/**
 * ============================================================
 * SuccessWala PWA Mobile Optimizations
 * ============================================================
 * 
 * Pure CSS additions for installed PWA mobile experience.
 * This file is ADDITIVE — it does NOT override any existing styles.
 * 
 * Covers:
 *   1. Safe Area Insets (notched devices)
 *   2. Standalone mode styles
 *   3. Touch optimization
 *   4. Smooth scrolling
 *   5. High DPI / Retina displays
 *   6. Orientation support
 *   7. Fast startup / layout shift prevention
 *   8. Print styles (hide PWA UI)
 * ============================================================
 */


/* ============================================================
   1. SAFE AREA INSETS — For notched devices (iPhone X+, etc.)
   ============================================================ */
@supports (padding: env(safe-area-inset-top)) {
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}


/* ============================================================
   2. STANDALONE MODE STYLES
   Applied when the app is installed and running without browser chrome.
   Targets both the CSS media query and the JS-added class.
   ============================================================ */

/* Prevent pull-to-refresh in Chrome when installed */
@media (display-mode: standalone) {
    body {
        overscroll-behavior-y: contain;
    }

    /* Extra top padding for status bar area */
    body {
        padding-top: env(safe-area-inset-top, 0px);
    }
}

/* Also target via the JS-set class (for browsers with limited media query support) */
html.pwa-standalone body {
    overscroll-behavior-y: contain;
}


/* ============================================================
   3. TOUCH OPTIMIZATION
   ============================================================ */

/* Ensure 44x44px minimum touch target size for key buttons */
#sidebarToggle, .theme-toggle {
    min-width: 44px;
    min-height: 44px;
}

/* WCAG AA Text Contrast Compliance: Darker amber #b48100 for yellow text on light surfaces */
.text-warning, .text-amber, .active-yellow-text {
    color: #b48100 !important;
}

/* Remove the default tap highlight color on all interactive elements */
a, button, input, select, textarea, [role="button"], .btn,
.nav-link, .sidebar a, .mcd-menu a, .card-stat, .list-group-item {
    -webkit-tap-highlight-color: transparent;
}

/* Improve momentum-based touch scrolling on scrollable containers */
.sidebar,
.mcd-menu,
.table-responsive,
[style*="overflow"] {
    -webkit-overflow-scrolling: touch;
}

/* Prevent accidental text selection on buttons, nav items, and cards */
.btn, .nav-link, .sidebar a, .mcd-menu a, .card-stat,
.badge, .breadcrumb-item, .page-link {
    -webkit-user-select: none;
    user-select: none;
}

/* Keep text inputs/textareas selectable */
input, textarea, [contenteditable], pre, code {
    -webkit-user-select: auto;
    user-select: auto;
}


/* ============================================================
   4. SMOOTH SCROLLING
   ============================================================ */
html {
    scroll-behavior: smooth;
}

/* Respect user's motion preferences 
   Commented out to ensure animations force-play on all PCs regardless of OS settings
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
} */


/* ============================================================
   5. HIGH DPI / RETINA DISPLAY OPTIMIZATION
   ============================================================ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    img {
        image-rendering: -webkit-optimize-contrast;
    }
}


/* ============================================================
   6. ORIENTATION SUPPORT
   ============================================================ */

/* Compact UI for landscape on small phones */
@media (orientation: landscape) and (max-height: 500px) {
    .sidebar-header {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}


/* ============================================================
   7. FAST STARTUP — Reduce layout shifts during page load
   ============================================================ */
img:not([src=""]) {
    content-visibility: auto;
}


/* ============================================================
   8. PRINT STYLES — Hide PWA UI elements when printing
   ============================================================ */
@media print {
    #pwa-install-prompt,
    #pwa-update-toast,
    #pwa-splash {
        display: none !important;
    }
}


/* ============================================================
   9. MOBILE SEAT MATRIX & CARD CONTAINMENT OPTIMIZATIONS
   ============================================================ */
@media (max-width: 576px) {
    .card-stat {
        padding: 14px 10px !important;
        overflow: hidden !important;
        border-radius: 12px !important;
    }
    .seat-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px !important;
        padding: 6px 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .seatbox {
        min-height: 52px !important;
        padding: 4px 2px !important;
        border-radius: 6px !important;
    }
    .seatbox b {
        font-size: 0.8rem !important;
        line-height: 1.1 !important;
    }
    .seatbox span {
        font-size: 0.5rem !important;
        margin-top: 1px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }
}

@media (max-width: 365px) {
    .seat-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 4px !important;
    }
    .seatbox {
        min-height: 46px !important;
        padding: 3px 1px !important;
    }
    .seatbox b {
        font-size: 0.74rem !important;
    }
    .seatbox span {
        font-size: 0.46rem !important;
    }
}