/* ============================================================
   RESPONSIVE LAYER — loads AFTER style.css and page inline <style>
   Covers: small phones (320px) -> phones -> tablets -> laptops -> wide desktops
   Uses !important because base sheets and inline page styles already do.
   ============================================================ */

:root {
    /* Readable content column per breakpoint (overridden below) */
    --pl-content-max: 100%;
    --pl-gutter: 16px;
    --pl-safe-top: env(safe-area-inset-top, 0px);
    --pl-safe-bottom: env(safe-area-inset-bottom, 0px);
    --pl-safe-left: env(safe-area-inset-left, 0px);
    --pl-safe-right: env(safe-area-inset-right, 0px);
}

/* ------------------------------------------------------------
   1. BASE SAFETY — no horizontal scroll, media never overflows
   ------------------------------------------------------------ */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden !important;
}

img,
svg,
video,
canvas,
iframe,
picture {
    max-width: 100%;
    height: auto;
}

svg[width][height] {
    height: auto;
}

/* Long club names / emails / wallet addresses must not blow out the layout */
h1, h2, h3, h4, h5, h6, p, span, a, li, td, th, label, button {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Inputs shrink instead of forcing page width */
input,
select,
textarea,
button {
    max-width: 100%;
}

/* Anything using a fixed pixel width still wraps inside its parent */
.container,
[class*="-content"],
[class*="-card"],
[class*="-panel"],
[class*="-section"] {
    min-width: 0;
}

/* ------------------------------------------------------------
   2. APP SHELL — fluid gutters + notch safe areas
   ------------------------------------------------------------ */

body {
    padding-left: var(--pl-safe-left);
    padding-right: var(--pl-safe-right);
}

.container {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
}

/* ------------------------------------------------------------
   3. CONTENT COLUMN — centred and capped so wide screens stay readable
   ------------------------------------------------------------ */

.main-content,
.wallet-content,
.profile-content,
.book-seat-content,
.transaction-main-content,
.notifications-content,
.about-content,
.about-menu,
.legal-main,
.dealer-content,
.dealer-management-body .container > *:not(.header):not(.bottom-nav) {
    max-width: var(--pl-content-max);
    margin-inline: auto;
}

/* ------------------------------------------------------------
   4. TINY PHONES  (<= 360px)
   ------------------------------------------------------------ */

@media (max-width: 360px) {
    :root {
        --pl-gutter: 12px;
    }

    .header {
        padding: 14px var(--pl-gutter) !important;
    }

    .logo-text {
        font-size: 14px !important;
    }

    /* Two-up button rows stack rather than squeeze */
    .wallet-action-buttons,
    body.wallet-container .wallet-action-buttons {
        grid-template-columns: 1fr !important;
    }

    body.legal-page-container .legal-toc-grid {
        grid-template-columns: 1fr !important;
    }

    /* Seat picker keeps tappable squares */
    .seat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .control-panel {
        grid-template-columns: 1fr !important;
    }
}

/* ------------------------------------------------------------
   5. PHONES  (<= 480px) — stop iOS zoom-on-focus, tighten chrome
   ------------------------------------------------------------ */

@media (max-width: 480px) {
    /* iOS zooms any input under 16px on focus */
    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    .header {
        padding: 16px var(--pl-gutter) !important;
    }

    .control-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .document-grid {
        grid-template-columns: 1fr !important;
    }

    /* Horizontal chip / tab strips scroll instead of wrapping badly */
    .tabs,
    .tab-list,
    .filter-chips,
    .chip-row {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .tabs::-webkit-scrollbar,
    .tab-list::-webkit-scrollbar,
    .filter-chips::-webkit-scrollbar,
    .chip-row::-webkit-scrollbar {
        display: none;
    }
}

/* ------------------------------------------------------------
   6. LARGE PHONES / SMALL TABLETS  (481px - 767px)
   ------------------------------------------------------------ */

@media (min-width: 481px) and (max-width: 767px) {
    :root {
        --pl-content-max: 560px;
        --pl-gutter: 20px;
    }

    .seat-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
}

/* ------------------------------------------------------------
   7. TABLETS  (>= 768px)
   ------------------------------------------------------------ */

@media (min-width: 768px) {
    :root {
        --pl-content-max: 680px;
        --pl-gutter: 24px;
    }

    .header {
        padding: 20px var(--pl-gutter) !important;
    }

    .seat-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .control-panel {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .document-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    }

    body.player-identification-container .tab-content {
        max-width: var(--pl-content-max);
        margin-inline: auto;
    }

    /* Bottom nav becomes a centred bar rather than full-bleed */
    .bottom-nav {
        max-width: var(--pl-content-max);
        margin-inline: auto !important;
        left: 0 !important;
        right: 0 !important;
    }
}

/* ------------------------------------------------------------
   8. LAPTOPS  (>= 1024px)
   ------------------------------------------------------------ */

@media (min-width: 1024px) {
    :root {
        --pl-content-max: 860px;
        --pl-gutter: 32px;
    }

    /* Override the older blanket 1200px rule — 1200px of single-column
       list items reads as a stretched mobile screen. */
    body.wallet-container .wallet-content,
    body.profile-container .profile-content,
    body.dashboard-container .main-content,
    body.book-seat-container .main-content,
    body.book-seat-container .book-seat-content,
    body.player-identification-container .main-content,
    body.wallet-container .transaction-main-content,
    body.notifications-container .notifications-content,
    body.legal-page-container .legal-main {
        width: min(100%, var(--pl-content-max)) !important;
        max-width: var(--pl-content-max) !important;
        margin-inline: auto !important;
    }

    .seat-grid {
        grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    }

    body.dashboard-container .action-buttons {
        width: min(100%, var(--pl-content-max)) !important;
    }

    /* Full-height auth screens centre their card instead of top-aligning */
    body.player-login-screen .container,
    body.player-otp-screen .container,
    body.player-registration-screen .container,
    body.club-welcome-container .estate-shell {
        justify-content: center !important;
    }
}

/* ------------------------------------------------------------
   9. WIDE DESKTOPS  (>= 1440px)
   ------------------------------------------------------------ */

@media (min-width: 1440px) {
    :root {
        --pl-content-max: 1040px;
        --pl-gutter: 40px;
    }

    body.dealer-management-body .container {
        max-width: 1240px !important;
    }
}

/* ------------------------------------------------------------
   10. MODALS & OVERLAYS — never taller than the viewport
   ------------------------------------------------------------ */

.modal-content,
.filter-modal-content,
.summary-content,
.warning-content,
[class*="modal"] [class*="content"] {
    width: min(92vw, 460px) !important;
    max-width: min(92vw, 460px) !important;
    max-height: min(88vh, 88dvh) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 768px) {
    .modal-content,
    .filter-modal-content,
    .summary-content,
    .warning-content {
        width: min(90vw, 520px) !important;
        max-width: min(90vw, 520px) !important;
    }
}

/* ------------------------------------------------------------
   11. TOUCH TARGETS — coarse pointers get 44px minimums
   ------------------------------------------------------------ */

@media (pointer: coarse) {
    button,
    .btn,
    [role="button"],
    .nav-item,
    .tab-btn,
    .about-menu-item,
    a.cta {
        min-height: 44px;
        touch-action: manipulation;
    }

    .back-btn,
    .close-btn,
    .icon-btn {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ------------------------------------------------------------
   12. LANDSCAPE PHONES — short viewports lose vertical padding
   ------------------------------------------------------------ */

@media (orientation: landscape) and (max-height: 520px) {
    .header {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    .main-content,
    .wallet-content,
    .profile-content,
    .book-seat-content,
    .notifications-content,
    .transaction-main-content {
        padding-top: 10px !important;
        padding-bottom: calc(12px + var(--pl-safe-bottom)) !important;
    }

    .welcome-card,
    .form-container {
        margin-block: 8px !important;
    }

    /* Hero art eats the whole screen in landscape */
    .balance-card,
    body.dashboard-container .balance-card {
        min-height: 0 !important;
    }

    .modal-content,
    .filter-modal-content {
        max-height: 92dvh !important;
    }
}

/* ------------------------------------------------------------
   13. NOTCH / GESTURE BAR — fixed chrome respects safe areas
   ------------------------------------------------------------ */

.bottom-nav,
.sticky-footer,
.fixed-bottom-bar {
    padding-bottom: calc(10px + var(--pl-safe-bottom)) !important;
}

/* ------------------------------------------------------------
   14. HOVER — only real pointers get hover affordances
   ------------------------------------------------------------ */

@media (hover: none) {
    .about-btn:hover,
    .back-btn:hover,
    button:hover {
        background-color: inherit;
    }
}