/* ==========================================================================
   mobile.css — global mobile/touch optimizations
   --------------------------------------------------------------------------
   Loaded AFTER app.css so it can override Tailwind utilities.

   Why this file is hand-written and not part of the Tailwind build:
   the site is deployed by pulling to shared hosting, where the asset build
   (laravel-mix / npm) is not run — mobile rules previously added to
   resources/css/app.css never reached the served css/app.css. Everything here
   is plain CSS so it ships as-is with a git pull, no build step.

   Almost every rule is scoped to <= 640px so desktop is untouched.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Stop the page itself from scrolling sideways.
   `clip` (not `hidden`) so the sticky nav keeps working — `overflow:hidden`
   creates a scroll container and breaks position:sticky on descendants.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    html,
    body {
        overflow-x: clip;
        max-width: 100%;
    }
}

@supports not (overflow: clip) {
    @media (max-width: 640px) {
        html,
        body {
            overflow-x: hidden;
        }
    }
}

/* --------------------------------------------------------------------------
   2. Never let media/embeds force the page wide.
   -------------------------------------------------------------------------- */
img,
svg,
canvas,
video,
iframe,
embed,
object {
    max-width: 100%;
}

img,
svg,
canvas,
video {
    height: auto;
}

/* --------------------------------------------------------------------------
   3. Tables — the single biggest mobile problem here (300+ tables, most of
   them wide stat/roster grids that are not wrapped in a scroll container).

   Preferred: make the table's PARENT scroll via :has(), which keeps normal
   table rendering (column alignment across rows) intact.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    div:has(> table),
    section:has(> table),
    form:has(> table) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        max-width: none; /* allow it to be wider than the phone; parent scrolls */
    }

    /* Tighter cells so more fits before scrolling is needed. */
    table td,
    table th {
        padding: 0.4rem 0.5rem;
    }

    /* Keep header/label cells from wrapping into unreadable slivers. */
    table th {
        white-space: nowrap;
    }
}

/* Fallback for browsers without :has() — make the table itself the scroller.
   Slightly worse (table shrinks to content) but prevents page-wide overflow. */
@supports not (selector(:has(*))) {
    @media (max-width: 640px) {
        table {
            display: block;
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
    }
}

/* --------------------------------------------------------------------------
   4. Forms — iOS zooms the whole page in when a focused input's font-size is
   under 16px. Force 16px on mobile to kill that jarring auto-zoom.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    input:not([type='checkbox']):not([type='radio']),
    select,
    textarea {
        font-size: 16px !important;
        max-width: 100%;
    }

    /* Full-width form controls read much better on a phone. */
    input[type='text'],
    input[type='number'],
    input[type='email'],
    input[type='password'],
    input[type='search'],
    input[type='date'],
    input[type='datetime-local'],
    select,
    textarea {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   5. Touch targets — Apple/Google both recommend ~44px. Many controls here are
   text-xs with px-1 padding, which is a genuinely hard tap on a phone.
   Uses min-height + centred content rather than forcing a size, so layout
   stays intact.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    button,
    [type='button'],
    [type='submit'],
    [role='button'],
    nav a,
    .btn {
        min-height: 40px;
    }

    /* Inline links inside prose/tables must NOT get 40px — only standalone
       button-like links do (handled above via nav a / [role=button] / .btn). */
    table button,
    table [type='submit'],
    table [type='button'] {
        min-height: 32px; /* denser inside data tables */
    }
}

/* --------------------------------------------------------------------------
   6. Long unbroken strings (usernames, URLs, bill titles) blowing out layout.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    body {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    pre,
    code {
        white-space: pre-wrap;
        word-break: break-word;
    }
}

/* --------------------------------------------------------------------------
   7. Charts / maps / fixed-size canvases: scale down instead of overflowing.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    canvas {
        max-width: 100% !important;
    }

    /* SVG maps (state/world maps) are drawn at a fixed viewBox size. */
    svg[width] {
        width: 100%;
        height: auto;
    }
}

/* --------------------------------------------------------------------------
   8. Modals / dropdowns / popovers that were positioned for a desktop viewport
   and end up off-screen or taller than the phone.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    [role='menu'],
    [role='dialog'] {
        max-width: calc(100vw - 1rem);
        max-height: 85vh;
        overflow-y: auto;
    }
}

/* --------------------------------------------------------------------------
   9. Comfortable reading defaults on small screens.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    /* Avoid iOS bumping up text size in landscape. */
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    /* Give the main content a little breathing room from the screen edges. */
    main {
        padding-bottom: 4rem;
    }
}

/* --------------------------------------------------------------------------
   10. The "spacer grid" header hack (~72 pages).

   Page headers right-align a flag with markup like:
       <div class="grid grid-cols-5 gap-12">
         <div></div><div></div><div></div><div></div>
         <div><img ...flag...></div>
       </div>
   On a 390px screen four `gap-12` gaps eat ~192px and the flag is crushed into
   a ~40px column (and overflows it), forcing page-wide horizontal scroll.

   Hiding the filler collapses the grid to just the real content. The selector is
   deliberately narrow — `:empty` PLUS no class and no style attribute — so that
   meaningful empty elements (progress/seat-share bars, which are empty divs
   carrying a class and an inline width) are never hidden.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    [class*='grid-cols-'] > div:empty:not([class]):not([style]) {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   11. Football live-game scorebug: its panels use fixed min-widths that total
   ~380-400px and sit absolutely over a canvas that is only ~370px wide on a
   phone, so the bug spills off the field. Scale it down instead.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    #lv-scorebug .sbg {
        transform: scale(0.62);
        transform-origin: top left;
    }

    #lv-scorebug.sb-pos-bc .sbg,
    #lv-scorebug.sb-pos-bl .sbg {
        transform-origin: bottom left;
    }
}

/* --------------------------------------------------------------------------
   12. Utility classes available to templates (mobile-first helpers).
   -------------------------------------------------------------------------- */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.touch-target {
    min-height: 44px;
    min-width: 44px;
}

/* Hide on phones / show only on phones, for progressive disclosure. */
@media (max-width: 640px) {
    .mobile-hide {
        display: none !important;
    }
}

@media (min-width: 641px) {
    .mobile-only {
        display: none !important;
    }
}