/* =============================================================================
   Mobile Layout Tokens (Epic 18 — Mobile Optimization)
   Mobile-first base (320-767px), intermediate (768-1023px).
   Uses --mobile-* namespace. Load after 3beez-tokens.css, before layout-desktop.css.
   ============================================================================= */

/* ── Mobile-first base tokens ─────────────────────────────────────────────── */
:root {
    --mobile-touch-target-min: 44px;
    --mobile-form-input-height: 48px;
    --mobile-header-height: 48px;
    --mobile-bottom-nav-height: 56px;
    --mobile-safe-area-top: env(safe-area-inset-top, 0px);
    --mobile-safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --mobile-safe-area-left: env(safe-area-inset-left, 0px);
    --mobile-safe-area-right: env(safe-area-inset-right, 0px);
}

/* ── Mobile base (max-width: 767px) ───────────────────────────────────────── */
@media (max-width: 767px) {
    /* Navigation hidden on mobile, hamburger visible */
    .nav-menu { display: none; }
    .hamburger-trigger { display: flex; }

    /* Header reduced height */
    .layout-header,
    .app-header-cluster {
        height: var(--mobile-header-height);
    }

    /* Content full width, single column */
    .layout-content,
    .app-content {
        max-width: 100%;
        padding: 0 var(--x-spacing-md);
    }

    /* Dashboard: 1-column stack */
    .dashboard-row-grid {
        grid-template-columns: 1fr;
        gap: var(--x-spacing-md);
    }

    /* Prevent pull-to-refresh conflict with scroll containers */
    .app-main,
    .discover-carousel,
    .messages-chat-window {
        overscroll-behavior: contain;
    }

    /* Touch targets minimum 44x44px (WCAG 2.5.8) */
    button,
    a,
    [role="button"] {
        min-height: var(--mobile-touch-target-min);
        min-width: var(--mobile-touch-target-min);
    }

    /* Form inputs taller for touch */
    .x-textfield-input,
    .x-select-input,
    .x-textarea-input {
        min-height: var(--mobile-form-input-height);
    }

    /* Safe area padding for notched devices */
    body {
        padding-top: var(--mobile-safe-area-top);
        padding-bottom: var(--mobile-safe-area-bottom);
        padding-left: var(--mobile-safe-area-left);
        padding-right: var(--mobile-safe-area-right);
    }

    /* Bottom nav respects safe area */
    .bottom-nav {
        padding-bottom: var(--mobile-safe-area-bottom);
    }

    /* Cards: reduce padding on mobile */
    .dashboard-card-white {
        padding: var(--x-spacing-md);
        gap: var(--x-spacing-md);
    }

    /* Welcome banner: reduce height on mobile */
    .dashboard-welcome-banner {
        height: auto;
        min-height: 120px;
    }

    .dashboard-banner-bg {
        display: none;
    }

    /* KPI grid: 2 columns on mobile */
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--x-spacing-sm);
    }

    /* Messages layout: stack vertically */
    .messages-layout {
        flex-direction: column;
        height: auto;
    }

    .messages-chat-list {
        width: 100%;
        max-height: 40vh;
        border-right: none;
        border-bottom: 1px solid var(--x-color-border);
    }
}

/* ── Intermediate tablet (768-1023px) ─────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
    :root {
        --layout-nav-width: 200px;
        --layout-content-max-width: 720px;
    }

    /* Dashboard: 2-column grid */
    .dashboard-row-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Content area padding */
    .app-content {
        padding: 0 var(--x-spacing-lg) var(--x-spacing-lg);
    }

    /* KPI grid: 2 columns on tablet */
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}