/* =============================================================================
   LAYOUT-MOBILE.CSS — Mobile-specific enhancements (max-width: 767px)
   =============================================================================
   Base styles already target mobile. This file adds mobile-ONLY enhancements:
   - Bottom nav spacing
   - Safe area handling
   - Touch target enforcement
   - iOS quirks
   - Mobile UX improvements

   Breakpoints used:
   - @media (max-width: 479px)  → small phones
   - @media (max-width: 767px)  → phones + small tablets (below md)
   ============================================================================= */

@layer layout {

/* =============================================================================
   CABINET — Bottom nav spacing
   ============================================================================= */

@media (max-width: 767px) {
    /* Push scrollable content above bottom tab bar */
    .cabinet-content-area {
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    }

    /* Legacy fallback for pages not yet using .cabinet-content-area */
    .cabinet-main > .overflow-y-auto {
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    }
}

/* =============================================================================
   SIDEBAR — Mobile: off-canvas drawer
   ============================================================================= */

@media (max-width: 767px) {
    #cabinetSidebar {
        position: fixed;
        inset-block: 0;
        left: 0;
        z-index: var(--z-sidebar, 40);
        padding-top: calc(3.5rem + env(safe-area-inset-top, 0px));
    }
}

/* Footer mobile tap targets → now in components.css (@layer components) */

/* =============================================================================
   BACKGROUND — Simplified on mobile (less GPU, less jank)
   ============================================================================= */

@media (max-width: 767px) {
    .mesh-bg {
        top: -150px;
        bottom: -150px;
        transform: none;
        will-change: auto;
        overflow: hidden;
        background:
            radial-gradient(820px 520px at 0% 0%, rgba(255, 214, 10, 0.08), transparent 58%),
            radial-gradient(820px 520px at 100% 0%, rgba(175, 82, 222, 0.06), transparent 58%),
            radial-gradient(760px 520px at 50% 100%, rgba(52, 199, 89, 0.04), transparent 52%),
            var(--color-bg);
    }
    .dark .mesh-bg {
        background:
            radial-gradient(820px 560px at 0% 0%, rgba(255, 214, 10, 0.18), transparent 58%),
            radial-gradient(820px 560px at 100% 0%, rgba(175, 82, 222, 0.14), transparent 58%),
            radial-gradient(760px 600px at 50% 100%, rgba(48, 209, 88, 0.06), transparent 55%),
            #121214;
    }
    .mesh-bg-grid { opacity: 0.22; }
    .dark .mesh-bg-grid { opacity: 0.18; }
    .mesh-bg-shimmer {
        opacity: 0.16;
        filter: blur(52px);
    }
    .dark .mesh-bg-shimmer { opacity: 0.14; }
}

/* =============================================================================
   HOME HERO — Full viewport on mobile
   ============================================================================= */

@media (max-width: 767px) {
    .home-hero {
        min-height: calc(100vh - 3.5rem - env(safe-area-inset-top, 0px));
        min-height: calc(100svh - 3.5rem - env(safe-area-inset-top, 0px));
        min-height: calc(100dvh - 3.5rem - env(safe-area-inset-top, 0px));
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* =============================================================================
   FORMS — iOS auto-zoom prevention (font-size >= 16px)
   ============================================================================= */

@media (max-width: 767px) {
    .form-input, .form-select, .form-textarea {
        font-size: 16px;
        min-height: 48px;
    }

    /* Buttons: comfortable touch targets */
    .btn-primary, .btn-secondary, button[type="submit"] {
        min-height: 48px;
    }
}

/* =============================================================================
   BUTTONS & CARDS — Small phone adjustments
   ============================================================================= */

@media (max-width: 479px) {
    /* Button containers: allow wrapping on small phones */
    .flex.items-center.gap-2:has(.btn-primary, .btn-secondary) {
        flex-wrap: wrap;
    }

    /* Cards: slightly smaller radius on tiny screens */
    :where(.surface-card),
    :where(.glass-card) {
        border-radius: var(--radius-lg);
    }
}

/* CTA row → now in components.css (@layer components) */

/* =============================================================================
   MODALS — Constrain to viewport on mobile
   ============================================================================= */

@media (max-width: 767px) {
    [class*="fixed"][class*="inset-0"] > [class*="max-w-"] {
        max-width: calc(100vw - 2rem);
        max-height: calc(100vh - 2rem);
        max-height: calc(100dvh - 2rem);
    }
}

/* Sticky tables → now in components.css (@layer components) */

/* =============================================================================
   CHAT WIDGET — Hide behind modals on mobile
   ============================================================================= */

@media (max-width: 767px) {
    body:has(div[role="dialog"]:not(.hidden)) #chatWidget,
    body:has(#uploadModal:not(.hidden)) #chatWidget {
        display: none !important;
    }
}

/* =============================================================================
   TOUCH TARGET ENFORCEMENT
   All interactive elements must be at least 44px on mobile.
   This ensures WCAG 2.5.5 compliance.
   ============================================================================= */

@media (max-width: 767px) {
    /* Links in navigation should have sufficient tap area */
    nav a,
    nav button {
        min-height: 44px;
    }

    /* Checkbox/radio labels: larger touch area */
    label:has(input[type="checkbox"]),
    label:has(input[type="radio"]) {
        min-height: 44px;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    /* Inline text links: sufficient tap padding */
    .auth-panel a,
    .auth-panel button:not([type="submit"]) {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

} /* end @layer layout */