/* ==========================================================================
   Mobile Enhancements — Additive styles for mobile/tablet
   Loaded AFTER style.css. Every rule is scoped to media queries
   so desktop is 100% unaffected.
   ========================================================================== */

/* Cross-document View Transitions — keeps bottom nav persistent across navigations */
@view-transition {
    navigation: auto;
}

::view-transition-old(bottom-nav),
::view-transition-new(bottom-nav) {
    animation: none;
}

/* --------------------------------------------------------------------------
   1. SAFE AREA INSETS (notched devices)
   -------------------------------------------------------------------------- */
@supports (padding: env(safe-area-inset-bottom)) {
    @media (max-width: 768px) {
        body {
            padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
        }
        .footer {
            padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
        }
    }
}

/* --------------------------------------------------------------------------
   2. BOTTOM NAVIGATION BAR (mobile only, injected by mobile-nav.js)
   -------------------------------------------------------------------------- */
.mobile-bottom-nav {
    display: none;
}

@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        top: calc(100svh - 82px - env(safe-area-inset-bottom, 0px));
        bottom: auto;
        left: 0;
        right: 0;
        z-index: 1000;
        background: #0f0f0f;
        border-top: 1px solid #333333;
        padding: 6px 0;
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
        align-items: stretch;
        justify-content: space-around;
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.3);
        contain: layout style;
        view-transition-name: bottom-nav;
    }

    .mobile-bottom-nav a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        padding: 6px 4px 4px;
        height: 52px;
        text-decoration: none;
        color: #999;
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.02em;
        transition: color 150ms;
        -webkit-tap-highlight-color: transparent;
        gap: 2px;
        box-sizing: border-box;
    }

    .mobile-bottom-nav a:active {
        transform: scale(0.92);
    }

    .mobile-bottom-nav a.active {
        color: #b6e925;
    }

    .mobile-bottom-nav svg {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
    }

    .mobile-bottom-nav span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 64px;
    }
}

/* --------------------------------------------------------------------------
   3. TOUCH TARGETS — Minimum 48px for all interactive elements
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Buttons */
    .btn-small {
        min-height: 40px;
        min-width: 40px;
        padding: var(--space-2, 8px) var(--space-3, 12px);
        font-size: var(--text-sm, 14px);
    }

    /* Action button groups in table cards */
    .action-buttons {
        gap: var(--space-2, 8px);
        flex-wrap: wrap;
    }

    .action-buttons .btn-small {
        flex: 1 1 auto;
        text-align: center;
        min-width: 80px;
    }

    /* Admin sidebar links (when visible in overlay) */
    .admin-sidebar-link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Form inputs */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    select,
    textarea {
        min-height: 44px;
        font-size: 16px; /* Prevents iOS zoom on focus */
    }

    /* Navigation links */
    .nav-links a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Footer links */
    .footer-links a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* --------------------------------------------------------------------------
   4. ADMIN SIDEBAR — Mobile overlay with toggle button
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Sidebar as slide-out overlay (triggered from bottom nav Menu tab) */
    .admin-sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        z-index: 1100;
        transform: translateX(-100%);
        transition: transform var(--transition-slow, 300ms) ease;
        background: var(--color-bg-card, var(--color-bg-subtle));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: none;
    }

    .admin-sidebar.mobile-open {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
    }

    .admin-sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 1099;
        background: rgba(0, 0, 0, 0.5);
    }

    .admin-sidebar-overlay.active {
        display: block;
    }

    /* Give main content full width when sidebar is hidden */
    .admin-layout {
        display: block;
    }

    .admin-main {
        width: 100%;
        min-width: 0;
    }
}

/* Hide overlay on desktop */
.admin-sidebar-overlay {
    display: none;
}

/* --------------------------------------------------------------------------
   5. TABLE MOBILE ENHANCEMENTS — Better card styling
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Make card-mode table rows more spacious and readable */
    .admin-content .data-table tr {
        padding: var(--space-4, 16px);
        margin-bottom: var(--space-3, 12px);
    }

    .admin-content .data-table td {
        padding: var(--space-2, 8px) 0;
    }

    /* Make labels more prominent */
    .admin-content .data-table td::before {
        font-size: var(--text-xs, 12px);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        min-width: 100px;
    }

    /* Action cell — full-width block instead of flex row */
    .admin-content .data-table td:last-child .action-buttons {
        width: 100%;
        justify-content: stretch;
    }

    /* Table responsive wrapper — better scroll indicators */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
        position: relative;
    }
}

/* --------------------------------------------------------------------------
   6. FILTER / SEARCH BARS — Better mobile layout
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .admin-filters {
        padding: var(--space-3, 12px);
    }

    .filter-row {
        gap: var(--space-2, 8px);
    }

    /* Search input takes priority */
    .filter-row .filter-input {
        order: -1;
    }

    /* Stack filter buttons */
    .filter-row .btn {
        min-height: 44px;
    }

    /* Export/action buttons */
    .export-buttons {
        flex-wrap: wrap;
        gap: var(--space-2, 8px);
    }

    .export-buttons .btn {
        flex: 1 1 auto;
        text-align: center;
        min-height: 44px;
    }
}

/* --------------------------------------------------------------------------
   7. FORMS — Full-width, mobile-optimized
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .form-row {
        gap: var(--space-3, 12px);
    }

    /* Make form actions stack nicely */
    .form-actions {
        gap: var(--space-2, 8px);
    }

    .form-actions .btn {
        min-height: 48px;
        font-size: var(--text-base, 16px);
    }

    /* Fieldsets */
    fieldset,
    .form-section {
        padding: var(--space-3, 12px);
    }
}

/* --------------------------------------------------------------------------
   8. CARDS & CONTENT — Better mobile spacing
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Admin content area — more breathing room */
    .admin-content {
        padding: var(--space-3, 12px);
    }

    .admin-content .container {
        padding-left: var(--space-2, 8px);
        padding-right: var(--space-2, 8px);
    }

    /* Admin header */
    .admin-header {
        padding: var(--space-3, 12px) var(--space-3, 12px) 0;
    }

    .admin-page-title {
        font-size: var(--text-xl, 20px);
    }

    /* Event info headers */
    .event-info-header {
        flex-direction: column;
        gap: var(--space-3, 12px);
    }

    .event-info-header h2 {
        font-size: var(--text-lg, 18px);
    }

    /* Dashboard stat cards */
    .dashboard-grid {
        gap: var(--space-3, 12px);
    }

    .dashboard-card,
    .stat-card {
        padding: var(--space-3, 12px);
    }

    /* Event cards */
    .event-card {
        padding: var(--space-3, 12px);
    }

    /* Marshal cards */
    .marshal-card {
        padding: var(--space-3, 12px) !important;
        margin-bottom: var(--space-3, 12px) !important;
    }

    .marshal-build-section {
        padding: var(--space-3, 12px) !important;
    }
}

/* --------------------------------------------------------------------------
   9. HERO & PUBLIC PAGES — Mobile polish
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Hero section tighter */
    .hero {
        padding: var(--space-8, 32px) var(--space-4, 16px);
    }

    /* Page headers */
    .page-header {
        padding: var(--space-6, 24px) var(--space-4, 16px);
    }

    /* Pilot cards */
    .pilot-card {
        padding: var(--space-3, 12px);
    }

    /* Gallery grid — 2 columns on mobile */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2, 8px);
    }

    /* Club grid */
    .club-card {
        padding: var(--space-3, 12px);
    }
}

/* --------------------------------------------------------------------------
   10. ALERTS & BADGES — Ensure readability
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .alert {
        padding: var(--space-3, 12px);
        font-size: var(--text-sm, 14px);
    }

    .badge {
        font-size: var(--text-xs, 12px);
        padding: 3px 8px;
    }
}

/* --------------------------------------------------------------------------
   11. MODALS & OVERLAYS — Full-screen on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .modal-content,
    .dialog-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0;
        border-radius: var(--radius-md, 8px) var(--radius-md, 8px) 0 0;
        max-height: 90vh;
        overflow-y: auto;
    }
}

/* --------------------------------------------------------------------------
   12. SCROLL BEHAVIOR — Momentum scrolling for all scrollable areas
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .admin-main,
    .table-responsive,
    .admin-content {
        -webkit-overflow-scrolling: touch;
    }

    /* Prevent horizontal overflow on the body */
    html, body {
        overflow-x: hidden;
    }
}

/* --------------------------------------------------------------------------
   13. TYPOGRAPHY — Slightly adjusted for mobile readability
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Prevent text overflow in tight spaces */
    .admin-content td,
    .admin-content th {
        word-break: break-word;
    }

    /* Long URLs or emails don't break layout */
    a {
        word-break: break-word;
    }
}

/* --------------------------------------------------------------------------
   14. PERFORMANCE — Reduce paint complexity on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Use simpler shadows on mobile */
    .card, .event-card, .dashboard-card, .stat-card {
        box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.2));
    }

    /* Hardware-accelerated scrolling for fixed elements */
    .mobile-bottom-nav {
        will-change: transform;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* --------------------------------------------------------------------------
   15. IMAGE LAZY LOADING — Placeholder styles
   -------------------------------------------------------------------------- */
img[loading="lazy"] {
    background: var(--color-bg-subtle, #222);
    transition: opacity var(--transition-base, 200ms);
}

/* --------------------------------------------------------------------------
   16. PRINT — Hide mobile-only elements when printing
   -------------------------------------------------------------------------- */
@media print {
    .mobile-bottom-nav,
    .admin-sidebar-overlay {
        display: none !important;
    }
}