/**
 * Mobile UX Optimizations for GrowthOS
 *
 * Psychology: Reduce friction on mobile = higher engagement
 * Focus: Touch-friendly, thumb-zone optimization, responsive charts
 */

/* ============================================
   GLOBAL MOBILE IMPROVEMENTS
   ============================================ */

/* Touch-friendly minimum target size (44px x 44px Apple guideline) */
@media (max-width: 767.98px) {
    .btn, .form-control, .form-select {
        min-height: 44px;
        font-size: 16px; /* Prevents iOS zoom on focus */
    }

    /* Larger tap targets for icons */
    a svg, button svg {
        min-width: 20px;
        min-height: 20px;
    }

    /* Improved spacing for mobile */
    .container-fluid {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Card spacing */
    .card {
        margin-bottom: 16px !important;
    }

    /* Larger headings for readability */
    h1, .h1 {
        font-size: 1.75rem;
    }

    h2, .h2 {
        font-size: 1.5rem;
    }

    /* Improved button groups */
    .btn-group .btn,
    .d-flex.gap-2 > .btn {
        white-space: nowrap;
    }
}

/* ============================================
   MILESTONE INTERFACES
   ============================================ */

/* Milestone cards on mobile */
@media (max-width: 767.98px) {
    .milestone-item {
        padding: 16px !important;
    }

    /* Stack milestone info vertically */
    .milestone-item .d-flex {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    /* Progress ring sizing */
    .progress-ring {
        width: 40px !important;
        height: 40px !important;
        margin-bottom: 12px;
    }

    /* Quick action buttons full width on mobile */
    .milestone-item .d-flex.gap-2 {
        width: 100%;
        margin-top: 12px;
    }

    .milestone-item .btn-sm {
        flex: 1;
        min-height: 44px;
    }

    /* Hide less important badges on very small screens */
    @media (max-width: 375px) {
        .badge.bg-light {
            display: none;
        }
    }
}

/* ============================================
   ANALYTICS DASHBOARDS
   ============================================ */

/* Responsive stat cards */
@media (max-width: 767.98px) {
    /* Stack stat cards 2x2 on mobile */
    .row.g-3 > [class*="col-md-3"] {
        width: 50% !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    /* Compact stat card content */
    .card-body.text-center {
        padding: 16px 8px !important;
    }

    .card-body.text-center .h2,
    .card-body.text-center .h3 {
        font-size: 1.5rem !important;
    }

    .card-body.text-center .small,
    .card-body.text-center small {
        font-size: 0.7rem !important;
    }

    /* Execution score card responsiveness */
    .bg-gradient-primary .row {
        flex-direction: column !important;
    }

    .bg-gradient-primary .col-md-8,
    .bg-gradient-primary .col-md-4 {
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 16px;
    }

    /* Score ring sizing */
    .position-relative[style*="width: 140px"] {
        width: 120px !important;
        height: 120px !important;
    }

    .position-relative[style*="width: 120px"] svg {
        width: 120px !important;
        height: 120px !important;
    }
}

/* Charts responsiveness */
@media (max-width: 767.98px) {
    canvas {
        max-height: 250px !important;
    }

    /* Ensure Chart.js respects mobile constraints */
    .card-body canvas {
        height: auto !important;
        max-width: 100%;
    }
}

/* ============================================
   TABLE ALTERNATIVES FOR MOBILE
   ============================================ */

/* Hide tables on mobile, show cards instead */
@media (max-width: 767.98px) {
    .table-responsive {
        border: none;
    }

    /* Make table rows look like cards */
    .table tbody tr {
        display: block;
        margin-bottom: 12px;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 12px;
        background: white;
    }

    .table thead {
        display: none; /* Hide table headers on mobile */
    }

    .table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border: none;
        border-bottom: 1px solid #f0f0f0;
    }

    .table tbody td:last-child {
        border-bottom: none;
    }

    /* Add labels for context on mobile */
    .table tbody td:before {
        content: attr(data-label);
        font-weight: 600;
        margin-right: 12px;
        flex-shrink: 0;
    }

    /* Exception: Keep comparison tables as tables (already optimized) */
    .company-table tbody tr {
        display: table-row !important;
    }

    .company-table tbody td {
        display: table-cell !important;
    }

    .company-table tbody td:before {
        content: none !important;
    }
}

/* ============================================
   MODAL IMPROVEMENTS
   ============================================ */

/* Full-screen modals on mobile */
@media (max-width: 575.98px) {
    .modal-dialog {
        margin: 0;
        max-width: 100%;
        min-height: 100vh;
    }

    .modal-content {
        min-height: 100vh;
        border-radius: 0;
        border: none;
    }

    .modal-header {
        padding: 16px;
        position: sticky;
        top: 0;
        background: white;
        z-index: 1;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

    .modal-body {
        padding: 16px;
        padding-bottom: 80px; /* Space for iOS bottom bar */
    }

    .modal-footer {
        position: sticky;
        bottom: 0;
        background: white;
        padding: 16px;
        box-shadow: 0 -2px 4px rgba(0,0,0,0.05);
    }
}

/* ============================================
   FORM IMPROVEMENTS
   ============================================ */

@media (max-width: 767.98px) {
    /* Stack form groups vertically */
    .row > [class*="col-md-"] {
        margin-bottom: 12px;
    }

    /* Larger form inputs */
    input[type="text"],
    input[type="email"],
    input[type="number"],
    input[type="date"],
    textarea,
    select {
        font-size: 16px !important; /* Prevent iOS zoom */
        padding: 12px;
    }

    /* Better date picker */
    input[type="date"] {
        min-height: 48px;
    }

    /* Range sliders larger hit area */
    input[type="range"] {
        height: 32px;
        cursor: pointer;
    }

    input[type="range"]::-webkit-slider-thumb {
        width: 24px;
        height: 24px;
    }

    input[type="range"]::-moz-range-thumb {
        width: 24px;
        height: 24px;
    }
}

/* ============================================
   NAVIGATION IMPROVEMENTS
   ============================================ */

@media (max-width: 767.98px) {
    /* Sticky header on mobile */
    .navbar {
        position: sticky;
        top: 0;
        z-index: 1020;
        box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    }

    /* Page headers compact */
    .d-flex.justify-content-between.align-items-center {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px;
    }

    .d-flex.justify-content-between.align-items-center > div:last-child {
        width: 100%;
    }

    .d-flex.justify-content-between.align-items-center .btn-group,
    .d-flex.justify-content-between.align-items-center .d-flex {
        width: 100%;
        justify-content: stretch !important;
    }

    .d-flex.justify-content-between.align-items-center .btn {
        flex: 1;
    }
}

/* ============================================
   BADGE & PILL IMPROVEMENTS
   ============================================ */

@media (max-width: 575.98px) {
    .badge {
        font-size: 0.7rem;
        padding: 4px 8px;
    }

    /* Multi-badge wrapping */
    .d-flex.gap-2 {
        flex-wrap: wrap !important;
    }
}

/* ============================================
   ALERTS & NOTIFICATIONS
   ============================================ */

@media (max-width: 767.98px) {
    .alert {
        padding: 12px;
        font-size: 0.9rem;
    }

    .alert .btn-close {
        padding: 12px;
    }
}

/* ============================================
   CHART LEGENDS
   ============================================ */

@media (max-width: 575.98px) {
    /* Chart.js legend positioning */
    .chartjs-legend {
        font-size: 0.75rem !important;
    }

    .chartjs-legend ul {
        flex-direction: column !important;
    }
}

/* ============================================
   PROGRESS BARS & RINGS
   ============================================ */

@media (max-width: 767.98px) {
    /* Larger progress rings for mobile */
    .position-relative.d-inline-flex[style*="width: 50px"] {
        width: 60px !important;
        height: 60px !important;
    }

    .position-relative.d-inline-flex[style*="width: 50px"] svg {
        width: 60px !important;
        height: 60px !important;
    }

    /* Progress bars thicker on mobile */
    .progress {
        height: 12px !important;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Hide on mobile */
.d-mobile-none {
    display: none !important;
}

@media (min-width: 768px) {
    .d-mobile-none {
        display: block !important;
    }
}

/* Show only on mobile */
.d-mobile-only {
    display: block !important;
}

@media (min-width: 768px) {
    .d-mobile-only {
        display: none !important;
    }
}

/* Touch-friendly spacing */
.touch-spacing {
    padding: 12px !important;
}

@media (min-width: 768px) {
    .touch-spacing {
        padding: 8px !important;
    }
}

/* ============================================
   THUMB ZONE OPTIMIZATION
   ============================================ */

/* Bottom-aligned actions for easy thumb access */
@media (max-width: 767.98px) {
    .thumb-zone {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        padding: 12px;
        box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
        z-index: 1000;
    }

    .thumb-zone .btn {
        width: 100%;
        min-height: 52px;
        font-size: 18px;
        font-weight: 600;
    }

    /* Add bottom padding to content when thumb-zone is present */
    .has-thumb-zone {
        padding-bottom: 80px !important;
    }
}

/* ============================================
   LOADING STATES
   ============================================ */

@media (max-width: 767.98px) {
    .spinner-border {
        width: 2rem;
        height: 2rem;
    }

    .spinner-border-sm {
        width: 1.25rem;
        height: 1.25rem;
    }
}

/* ============================================
   EMPTY STATES
   ============================================ */

@media (max-width: 767.98px) {
    .empty-state svg {
        width: 48px !important;
        height: 48px !important;
    }

    .empty-state h4 {
        font-size: 1.25rem !important;
    }

    .empty-state p {
        font-size: 0.9rem !important;
    }
}