/* ══════════════════════════════════════════════════════════════════════
   Richa mobile shell v2 - comprehensive page-wide mobile responsive layer
   2026-08-10 (Nirav Sir)

   Every rule is inside `@media (max-width: 780px)` or `(max-width: 560px)`.
   Desktop viewports (>780px) never see any of this. Loaded globally via
   _DashLayout / Login / Welcome / Register. sw.js precaches it.

   PHILOSOPHY v2: instead of adding opt-in helper classes (few pages will
   actually adopt them), directly target the actual Richa class patterns
   used across the codebase so every page becomes mobile-friendly the
   moment this file is deployed. No per-page cshtml edit required.

   Sections:
     1. Global page hygiene (font size, tap highlights, no horizontal scroll)
     2. Universal container / wrapper tuning
     3. Grids that should collapse to 1 column
     4. Tables that should scroll horizontally
     5. Long-form pages (Pax, Confirm) - accordion + summary reorder
     6. List pages (Bookings, Ledger) - condensed card style
     7. Form pages (Search, Profile) - stack + full-width inputs
     8. Buttons - full-width on primary actions
     9. Opt-in helper components (sheet, sticky CTA, list card) - kept
        from v1 for pages that want them
   ══════════════════════════════════════════════════════════════════════ */

/* Visibility utilities - safe outside media query */
.mshell-only { display: none !important; }
.desk-only   { display: initial; }

/* Scrim base - always defined, opacity/pointer controlled via .on */
.mshell-scrim {
    display: none;
    position: fixed; inset: 0; z-index: 1150;
    background: rgba(10,23,56,.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0; pointer-events: none; transition: opacity .2s;
}
.mshell-scrim.on { opacity: 1; pointer-events: auto; }

/* ══════════════════════════════════════════════════════════════════════
   MOBILE MAIN (<= 780px) - everything below is mobile-only
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 780px) {

    /* ─── 1. Global page hygiene ─────────────────────────────────── */
    html, body {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        -webkit-tap-highlight-color: rgba(15,37,96,.08);
        -webkit-text-size-adjust: 100%;
        overscroll-behavior-y: contain;
    }
    /* Prevent iOS zoom on input focus */
    input, select, textarea {
        font-size: 16px !important;
    }
    /* Kill common desktop-only positioned bits that break mobile viewports */
    body { min-width: unset !important; }

    /* ─── 2. Container / wrapper tuning ──────────────────────────── */
    .container,
    .pax-wrap,
    .confirm-wrap,
    .res-wrap,
    .search-wrap,
    .bookings-wrap,
    .dashboard-wrap,
    .profile-wrap,
    .ledger-wrap {
        padding: 12px !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    /* Cards inside any wrapper - tighter padding for phone */
    .pax-card,
    .confirm-card,
    .info-card,
    .res-card,
    .booking-card,
    .card,
    .dashboard-card {
        padding: 14px !important;
        border-radius: 12px !important;
        margin-bottom: 12px !important;
    }

    /* ─── 3. Multi-column grids → single column ──────────────────── */
    .pax-grid,
    .confirm-grid,
    .res-layout,
    .search-grid,
    .contact-row,
    .gst-row,
    .markup-row,
    .row2,
    .dashboard-grid,
    .profile-grid,
    .modify-panel__body,
    .fare-buckets-grid,
    .bkg-form-row,
    .form-row-2col,
    .form-row-3col,
    .form-row-4col {
        display: block !important;
        grid-template-columns: none !important;
    }
    .pax-grid > *,
    .confirm-grid > *,
    .res-layout > *,
    .search-grid > * {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 12px !important;
    }
    /* 2-column form rows keep a compact 2-col layout on phones (Title +
       First Name etc.) since single-column would be way too tall. */
    .pax-basic-fields,
    .pax-intl-fields {
        display: grid !important;
        grid-template-columns: 90px 1fr 1fr !important;
        gap: 8px !important;
    }
    .pax-basic-fields > *:nth-child(n+4),
    .pax-intl-fields  > *:nth-child(n+4) { grid-column: 1 / -1 !important; }

    /* ─── 4. Tables - horizontal scroll wrap ─────────────────────── */
    /* Wrap all tables in a scrollable box. Sticky first column would be
       nice but that requires markup changes; scroll is the safe default. */
    table {
        display: block !important;
        overflow-x: auto !important;
        max-width: 100% !important;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        font-size: 12.5px !important;
    }
    table td, table th {
        white-space: nowrap;
        padding: 8px 10px !important;
    }
    /* Some Richa tables are already "flat" listing (Bookings, Ledger); those
       have data-mobile-card="1" attribute -- if not, we still get the scroll
       fallback above which is acceptable. */

    /* ─── 5. Long-form pages (Pax + Confirm) ─────────────────────── */
    /* Sticky page header when scrolling long forms so context stays visible. */
    .pax-stepper,
    .confirm-stepper {
        position: sticky !important; top: 0 !important; z-index: 90 !important;
        background: rgba(255,255,255,.96) !important;
        backdrop-filter: blur(6px);
        margin: -12px -12px 12px !important;
        padding: 10px 12px !important;
        border-bottom: 1px solid #e5e7eb !important;
    }
    /* Pax accordion - defined in Pax.cshtml directly (has JS wiring).
       Confirm page: hide desktop-only right rail on mobile if it exists. */
    /* Pax card row headers already collapsible via Pax.cshtml; no extra rule
       needed here. */

    /* ─── 6. List pages (Bookings, Ledger, Reports) ──────────────── */
    /* Bookings list: force horizontal scroll table, tighten controls */
    .tb-fbar,
    .booking-filter-bar,
    .ledger-filter-bar {
        display: flex !important; flex-wrap: wrap !important;
        gap: 8px !important; padding: 10px !important;
        margin-bottom: 10px !important;
    }
    .tb-fbar > *,
    .booking-filter-bar > *,
    .ledger-filter-bar > * {
        flex: 1 1 calc(50% - 4px) !important;
        min-width: 130px !important;
    }
    .tb-card,
    .booking-card,
    .ledger-card {
        padding: 12px !important;
        border-radius: 12px !important;
        margin-bottom: 10px !important;
    }
    /* Detail rows in cards - stack labels above values */
    .tb-card .row,
    .booking-card .row {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        gap: 4px 10px !important;
        padding: 6px 0 !important;
    }

    /* ─── 7. Form pages (Search / Profile / Register) ────────────── */
    /* Search form is already responsive-tuned; just ensure inputs are 44px */
    label[for], .form-label, .field__label {
        font-size: 12px !important;
        margin-bottom: 5px !important;
    }

    /* ─── 8. Buttons - full-width on primary actions ─────────────── */
    /* Most .btn-primary / .btn-book / .btn-confirm should be full-width so
       thumb-reach works. Preserve inline "cta chip" style buttons (short). */
    .btn-primary,
    .btn-confirm,
    .btn-book-main,
    .btn-book-rt,
    .btn-search-flights,
    .btn--solid,
    .btn--full,
    .btn-submit {
        width: 100% !important;
        padding: 12px !important;
        font-size: 14.5px !important;
        min-height: 46px !important;
    }
    /* Secondary buttons stay auto-width unless in an .actions-row */
    .actions-row {
        display: flex !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }
    .actions-row > * { flex: 1 1 45% !important; min-width: 120px !important; }

    /* ─── 9. Modals / dialogs - phone-friendly sizing ────────────── */
    .modal,
    .modal-panel,
    .dialog {
        width: 96vw !important;
        max-width: 96vw !important;
        max-height: 92vh !important;
        margin: 4vh auto !important;
        border-radius: 14px !important;
    }
    .modal-body { max-height: 70vh !important; overflow-y: auto !important; }

    /* ─── 10. Kill horizontal overflow anywhere ──────────────────── */
    /* Common culprits that push mobile page wider than viewport */
    * { max-width: 100vw; }
    img, video, iframe, canvas, svg { max-width: 100% !important; }
    /* But allow explicit horizontal-scroll containers to overflow */
    .mshell-scroll-x, .table-wrap, .fare-buckets-grid, table {
        max-width: none;
    }

    /* ─── 11. Sticky bottom actions padding ──────────────────────── */
    /* If a page uses .pwa-tabs, body gets 78px bottom pad. If it uses
       .mshell-sticky-cta, body gets 82px. If BOTH (Pax/Confirm), 148px. */
    body.mshell-has-sticky-cta { padding-bottom: 82px !important; }
    body.mshell-has-sticky-cta.mshell-with-tabs { padding-bottom: 148px !important; }

    /* ─── 12. Opt-in components (bottom sheet, list card etc.) ───── */
    .mshell-only { display: initial !important; }
    .desk-only   { display: none !important; }
    .mshell-scrim { display: block; }

    .mshell-sheet {
        position: fixed !important;
        left: 0 !important; right: 0 !important; bottom: 0 !important;
        width: 100% !important; max-height: 88vh; max-height: 88dvh;
        overflow-y: auto;
        background: #fff;
        border-radius: 22px 22px 0 0;
        transform: translateY(105%);
        transition: transform .3s cubic-bezier(.4,.0,.2,1);
        z-index: 1200;
        box-shadow: 0 -18px 48px rgba(10,23,56,.28);
        padding: 22px 16px calc(24px + env(safe-area-inset-bottom));
    }
    .mshell-sheet.open { transform: translateY(0); }
    .mshell-sheet::before {
        content: '';
        display: block; margin: -8px auto 14px;
        width: 44px; height: 4px; border-radius: 2px;
        background: #cbd5e1;
    }
    body.mshell-sheet-open { overflow: hidden; }

    .mshell-sticky-cta {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
        background: rgba(255,255,255,.98);
        backdrop-filter: blur(10px);
        border-top: 1px solid #e5e7eb;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        box-shadow: 0 -6px 18px -6px rgba(15,37,96,.14);
        display: flex; gap: 10px; align-items: center;
    }
    .mshell-btn-primary {
        display: inline-flex; align-items: center; justify-content: center;
        gap: 8px; width: 100%; height: 48px;
        background: linear-gradient(180deg, #1a44a2, #0f2560);
        color: #fff !important; font-family: inherit; font-size: 15px; font-weight: 800;
        border: 0; border-radius: 12px; cursor: pointer;
        box-shadow: 0 8px 20px -6px rgba(15,37,96,.42);
        text-decoration: none;
    }
    .mshell-btn-primary:active { transform: translateY(1px); filter: brightness(1.06); }
    .mshell-btn-primary:disabled { background: #94a3b8; cursor: not-allowed; box-shadow: none; }

    .mshell-list-card {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-left: 3px solid #cbd5e1;
        border-radius: 12px;
        padding: 12px 14px;
        box-shadow: 0 2px 8px -4px rgba(15,23,42,.06);
        display: flex; flex-direction: column; gap: 6px;
        text-decoration: none; color: inherit;
    }
    .mshell-list-card--active { border-left-color: #1a44a2; }
    .mshell-list-card--ok     { border-left-color: #16a34a; }
    .mshell-list-card--warn   { border-left-color: #d97706; }
    .mshell-list-card--err    { border-left-color: #b91c1c; }

    /* ─── 13. Reduce visual noise on mobile ──────────────────────── */
    /* Big-ass shadows and border-radii are calibrated for desktop cards.
       Tighten on mobile. */
    .shadow-lg { box-shadow: 0 2px 8px rgba(15,23,42,.08) !important; }
    .card-lg { padding: 14px !important; border-radius: 12px !important; }

    /* Truncate long inline flows that break layout (booking IDs, PNRs) */
    .booking-id, .pnr-code, .tk-tkt {
        display: inline-block;
        max-width: 130px;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        vertical-align: middle;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   NARROW-PHONE (<= 560px) - extra tightening for phone-specific
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
    .container, .pax-wrap, .confirm-wrap, .res-wrap,
    .search-wrap, .bookings-wrap { padding: 10px !important; }
    .pax-card, .confirm-card, .booking-card, .card, .info-card {
        padding: 12px !important;
    }
    /* Even more compact table cells */
    table td, table th { font-size: 12px !important; padding: 6px 8px !important; }
    /* Full width on pax-basic-fields since 3-col is too tight <400px */
    .pax-basic-fields, .pax-intl-fields {
        grid-template-columns: 1fr 1fr !important;
    }
    .pax-basic-fields > *:first-child { grid-column: 1 / -1 !important; }
    .mshell-sticky-cta { padding: 9px 12px calc(9px + env(safe-area-inset-bottom)); }
    .mshell-btn-primary { font-size: 14.5px; height: 46px; }
}

/* ══════════════════════════════════════════════════════════════════════
   PRINT - hide all mobile chrome (bottom tabs, sticky CTAs, drawers)
   ══════════════════════════════════════════════════════════════════════ */
@media print {
    .pwa-tabs, .mshell-sticky-cta, .mshell-sheet, .mshell-scrim,
    .dash-drawer-scrim, .m-topbar, .m-filter-fab, .pwa-install,
    #stickyConfirmBar {
        display: none !important;
    }
    body { padding-bottom: 0 !important; }
}