/* =============================================================================
   Mobile Responsive Overrides — Phasing / G-Section
   All layout rules scoped to max-width: 959.98px for zero desktop impact.
   ============================================================================= */

/* Mobile elements hidden by default (desktop). Shown on mobile inside the media query below. */
.mobile-bottom-tabs,
.mobile-more-backdrop,
.mobile-more-sheet,
.mobile-phase-pill,
.mobile-summary-tabs {
    display: none;
}

/* Mobile-only icon: More (3x3 grid of dots).
   Defined globally because the element exists in the DOM at all viewports
   even though the bottom tab bar is hidden on desktop. */
.icon-more {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23b0b0c8' stroke='none'%3E%3Ccircle cx='5' cy='5' r='2'/%3E%3Ccircle cx='12' cy='5' r='2'/%3E%3Ccircle cx='19' cy='5' r='2'/%3E%3Ccircle cx='5' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='19' cy='12' r='2'/%3E%3Ccircle cx='5' cy='19' r='2'/%3E%3Ccircle cx='12' cy='19' r='2'/%3E%3Ccircle cx='19' cy='19' r='2'/%3E%3C/svg%3E");
}

@media (max-width: 959.98px) {

    /* ─── 1. Mobile Bottom Tab Bar ───────────────────────────────────────── */

    .mobile-bottom-tabs {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1100;
        height: 56px;
        background: var(--mc-nav-bg);
        border-top: 1px solid var(--mc-border);
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
    }

    .mobile-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        background: none;
        border: none;
        padding: 6px 0;
        color: var(--mc-text-muted);
        text-decoration: none;
        cursor: pointer;
        transition: color 0.15s ease;
        min-height: 48px;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-tab .icon {
        width: 1.2rem;
        height: 1.2rem;
        min-width: 1.2rem;
        opacity: 0.6;
        transition: opacity 0.15s ease;
    }

    .mobile-tab-label {
        font-family: var(--mc-font-heading);
        font-size: 0.55rem;
        font-weight: 600;
        letter-spacing: 0.01em;
        text-transform: uppercase;
    }

    .mobile-tab.active,
    .mobile-tab:hover {
        color: var(--mc-primary);
    }

    .mobile-tab.active .icon,
    .mobile-tab:hover .icon {
        opacity: 1;
        filter: brightness(0) saturate(100%) invert(73%) sepia(53%) saturate(1000%) hue-rotate(165deg) brightness(102%) contrast(98%);
    }

    /* ─── 2. Mobile "More" Bottom Sheet ──────────────────────────────────── */

    .mobile-more-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1200;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        transition: opacity 0.25s ease;
        pointer-events: none;
    }

    .mobile-more-backdrop.open {
        opacity: 1;
        pointer-events: auto;
    }

    .mobile-more-sheet {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1210;
        background: var(--mc-surface);
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
        max-height: 80vh;
        overflow-y: auto;
    }

    .mobile-more-sheet.open {
        transform: translateY(0);
    }

    .mobile-more-handle {
        width: 36px;
        height: 4px;
        background: var(--mc-border);
        border-radius: 2px;
        margin: 0 auto 12px;
    }

    .mobile-more-section {
        padding: 0 16px;
    }

    .mobile-more-section-title {
        font-family: var(--mc-font-heading);
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--mc-text-muted);
        padding: 12px 0 6px;
    }

    .mobile-more-link {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 8px;
        border-radius: var(--mc-radius-md);
        color: var(--mc-text-body);
        text-decoration: none;
        font-size: 0.9rem;
        transition: background 0.15s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-more-link:hover {
        background: rgba(255, 255, 255, 0.06);
        color: var(--mc-text-heading);
    }

    .mobile-more-link .icon {
        width: 1.25rem;
        height: 1.25rem;
        min-width: 1.25rem;
        opacity: 0.7;
    }

    .mobile-more-divider {
        height: 1px;
        background: var(--mc-border);
        margin: 4px 16px;
    }

    .mobile-more-phase-item {
        display: block;
        width: 100%;
        text-align: left;
        background: none;
        border: none;
        padding: 10px 8px;
        border-radius: var(--mc-radius-sm);
        color: var(--mc-text-body);
        font-size: 0.85rem;
        cursor: pointer;
        transition: background 0.15s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-more-phase-item:hover {
        background: rgba(255, 255, 255, 0.06);
    }

    .mobile-more-phase-item.active {
        background: rgba(52, 200, 252, 0.10);
        color: var(--mc-primary);
    }

    .mobile-more-phase-item .phase-dates {
        display: block;
        font-size: 0.7rem;
        color: var(--mc-text-muted);
        margin-top: 2px;
    }

    .mobile-more-prediction-item {
        display: block;
        width: 100%;
        text-align: left;
        background: none;
        border: none;
        padding: 10px 8px;
        border-radius: var(--mc-radius-sm);
        color: var(--mc-text-body);
        font-size: 0.85rem;
        cursor: pointer;
        transition: background 0.15s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-more-prediction-item:hover {
        background: rgba(255, 255, 255, 0.06);
    }

    .mobile-more-prediction-item.active {
        background: rgba(52, 200, 252, 0.10);
        color: var(--mc-primary);
    }

    /* ─── 3. Mobile Phase Pill ───────────────────────────────────────────── */

    .mobile-phase-pill {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        margin: 8px 12px 4px;
        background: var(--mc-surface);
        border: 1px solid var(--mc-border);
        border-radius: 20px;
        font-size: 0.8rem;
        color: var(--mc-text-body);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-phase-pill .phase-name {
        font-weight: 600;
        color: var(--mc-text-heading);
    }

    .mobile-phase-pill .phase-dates {
        color: var(--mc-text-muted);
        font-size: 0.7rem;
    }

    .mobile-phase-pill .pill-chevron {
        margin-left: auto;
        font-size: 0.65rem;
        color: var(--mc-text-muted);
    }

    /* ─── 4. Mobile Summary Sub-tabs ────────────────────────────────────── */

    .mobile-summary-tabs {
        display: flex;
        gap: 4px;
        padding: 8px 12px 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-summary-tab {
        flex-shrink: 0;
        padding: 6px 14px;
        border-radius: 16px;
        background: var(--mc-surface);
        border: 1px solid var(--mc-border);
        color: var(--mc-text-muted);
        font-family: var(--mc-font-heading);
        font-size: 0.75rem;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
        transition: all 0.15s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-summary-tab.active {
        background: rgba(52, 200, 252, 0.12);
        border-color: var(--mc-primary);
        color: var(--mc-primary);
    }

    /* ─── 5. Global Component Overrides ──────────────────────────────────── */

    .mc-stat-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
        gap: var(--mc-space-2) !important;
    }

    .mc-toolbar .vr {
        display: none !important;
    }

    .mc-toolbar {
        gap: var(--mc-space-2) !important;
    }

    .mc-table {
        font-size: 0.78rem;
    }

    .mc-table th,
    .mc-table td {
        padding: 6px 8px;
    }

    .mc-card {
        padding: var(--mc-space-3);
        border-radius: var(--mc-radius-sm);
    }

    .mc-stat {
        padding: var(--mc-space-1) var(--mc-space-2);
        gap: var(--mc-space-2);
    }

    .mc-stat-value {
        font-size: 0.95rem;
    }

    .mc-stat-label {
        font-size: 0.6rem;
    }

    .mc-page-title {
        font-size: 1.1rem;
    }

    .mc-page-subtitle {
        font-size: 0.75rem;
    }

    /* ─── 6. Page-Specific Overrides ─────────────────────────────────────── */

    /* --- WeeklySummary --- */
    /* Make card-body a flex column so we can reorder stats above the table */
    .page-weekly-summary .card-body {
        display: flex;
        flex-direction: column;
    }

    .page-weekly-summary .mc-stat-grid {
        order: -1;
        margin-bottom: var(--mc-space-3);
    }

    /* Hide columns: Mid Date (2), Forecast (4), Weekly Cal (5), Weekly Active (6), TDEE (7), Weekly Deficit (8), Predicted Loss (9) */
    .page-weekly-summary .mc-table th:nth-child(2),
    .page-weekly-summary .mc-table td:nth-child(2),
    .page-weekly-summary .mc-table th:nth-child(4),
    .page-weekly-summary .mc-table td:nth-child(4),
    .page-weekly-summary .mc-table th:nth-child(5),
    .page-weekly-summary .mc-table td:nth-child(5),
    .page-weekly-summary .mc-table th:nth-child(6),
    .page-weekly-summary .mc-table td:nth-child(6),
    .page-weekly-summary .mc-table th:nth-child(7),
    .page-weekly-summary .mc-table td:nth-child(7),
    .page-weekly-summary .mc-table th:nth-child(8),
    .page-weekly-summary .mc-table td:nth-child(8),
    .page-weekly-summary .mc-table th:nth-child(9),
    .page-weekly-summary .mc-table td:nth-child(9) {
        display: none;
    }

    .page-weekly-summary .mc-bmi-gauge {
        flex-direction: column;
        gap: 8px;
    }

    /* --- PhaseMeasurements --- */
    /* Hide derived columns (11-16: LBM, BMR, TDEE, Deficit, Expected, Predicted) */
    .page-measurements .mc-table .derived-col {
        display: none;
    }

    /* Hide Water% (4), Protein (5), Carbs (6), Fiber (7), Salt (8).
       Keeps: Date (1), Weight (2), Fat% (3), Consumed kcal (9), Active kcal (10) */
    .page-measurements .mc-table th:nth-child(4),
    .page-measurements .mc-table td:nth-child(4),
    .page-measurements .mc-table th:nth-child(5),
    .page-measurements .mc-table td:nth-child(5),
    .page-measurements .mc-table th:nth-child(6),
    .page-measurements .mc-table td:nth-child(6),
    .page-measurements .mc-table th:nth-child(7),
    .page-measurements .mc-table td:nth-child(7),
    .page-measurements .mc-table th:nth-child(8),
    .page-measurements .mc-table td:nth-child(8) {
        display: none;
    }

    /* --- WeeklyScorecard --- */
    /* Hide Dates (2) and Exercise Days (7) */
    .page-scorecard .mc-table th:nth-child(2),
    .page-scorecard .mc-table td:nth-child(2),
    .page-scorecard .mc-table th:nth-child(7),
    .page-scorecard .mc-table td:nth-child(7) {
        display: none;
    }

    .page-scorecard .card-body {
        display: flex;
        flex-direction: column;
    }

    .page-scorecard .mc-stat-grid {
        order: -1;
        margin-bottom: var(--mc-space-3);
    }

    /* Override the inline min-width on weight change bar column */
    .page-scorecard .mc-table th:nth-child(3),
    .page-scorecard .mc-table td:nth-child(3) {
        min-width: auto !important;
    }

    /* --- WeeklyPaceTracker --- */
    /* Stack gauges and charts vertically */
    .page-weekly-pace .mc-card [style*="min-width: 400px"],
    .page-weekly-pace .mc-card [style*="min-width:400px"] {
        min-width: 100% !important;
    }

    .page-weekly-pace .mc-card [style*="min-width: 200px"],
    .page-weekly-pace .mc-card [style*="min-width:200px"] {
        min-width: 140px !important;
    }

    /* Hide Avg Active (3) and Avg Food (6) columns */
    .page-weekly-pace .mc-table th:nth-child(3),
    .page-weekly-pace .mc-table td:nth-child(3),
    .page-weekly-pace .mc-table th:nth-child(6),
    .page-weekly-pace .mc-table td:nth-child(6) {
        display: none;
    }

    /* --- WeightGraph --- */
    .page-weight-graph .mc-toolbar .vr {
        display: none;
    }

    /* Override scoped aspect-ratio for portrait mobile viewing — taller chart */
    .page-weight-graph .weight-chart-canvas {
        aspect-ratio: 5 / 4 !important;
    }

    /* --- DailyNutrition --- */
    /* Hide Yesterday and Today buttons (first and last in the date nav row),
       keep the compact Prev / Date / Next controls */
    .page-daily-nutrition .d-flex.justify-content-center > :first-child,
    .page-daily-nutrition .d-flex.justify-content-center > :last-child {
        display: none;
    }

    /* Hide Fat (F) and Carbs (C) header columns in per-meal food tables */
    .page-daily-nutrition .dn-table .th-fat,
    .page-daily-nutrition .dn-table .th-carb {
        display: none;
    }

    /* --- BloodPressure --- */
    /* Fill viewport minus bottom tabs using flex, override the inline height calc */
    .page-blood-pressure {
        height: calc(100dvh - 56px);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .page-blood-pressure .mc-toolbar {
        flex-shrink: 0;
        margin-bottom: 6px !important;
        padding: 8px 12px !important;
    }

    .page-blood-pressure .mc-card {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        padding: 4px !important;
        margin-bottom: 0 !important;
    }

    .page-blood-pressure .mc-card > div {
        flex: 1;
        height: auto !important;
    }

    /* Hide axis titles to maximize chart area */
    .page-blood-pressure .apexcharts-xaxis-title,
    .page-blood-pressure .apexcharts-yaxis-title {
        display: none;
    }

    /* --- ActivityHeatmap --- */
    .page-activity-heatmap [style*="height: 75vh"],
    .page-activity-heatmap [style*="height:75vh"] {
        height: calc(100vh - 160px) !important;
    }

    /* ─── 7. Touch & Interaction ─────────────────────────────────────────── */

    /* Ensure minimum 48px tap targets on interactive elements */
    .mobile-bottom-tabs button,
    .mobile-bottom-tabs a,
    .mobile-more-link,
    .mobile-more-phase-item,
    .mobile-more-prediction-item {
        min-height: 48px;
    }
}