/* ==========================================================================
   JFL Mobile — app-like responsive layer
   Loaded after Bootstrap + jflit-ui.css so it can safely override.
   Everything is scoped to small screens; desktop layout is untouched.
   ========================================================================== */

:root {
    --jfl-tabbar-h: 60px;
    --jfl-safe-bottom: env(safe-area-inset-bottom, 0px);
    --jfl-safe-top: env(safe-area-inset-top, 0px);
}

/* --- Wide tables scroll inside their own box (any screen), never the page.
       templates/base.html wraps every `main table` in `.jfl-scroll-x` so no
       user-facing table can force a sideways-scrolling page. --- */
.jfl-scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

.jfl-scroll-x > table {
    margin-bottom: 0;
}

@media (max-width: 991.98px) {

    /* --- Base: no sideways scroll, native-like tapping ---
       `clip` (not `hidden`) — `hidden` turns body into a scroll container and
       breaks the header's position: sticky. */
    html,
    body {
        overflow-x: clip;
    }

    body {
        -webkit-tap-highlight-color: transparent;
    }

    /* --- Fluid media: nothing wider than the screen.
           Scoped to page content — a global `img { height:auto }` would
           override the header logo's height="40" attribute. --- */
    main img,
    main video,
    main iframe,
    main embed,
    main object,
    main canvas,
    .modal img {
        max-width: 100%;
        height: auto;
    }

    /* --- Panels never spill out of the viewport.
           Deliberately NOT .dropdown-menu: it is absolutely positioned, so a
           max-width of 100% resolves against the tiny trigger button and
           collapses the header dropdowns. --- */
    .card,
    .modal-content,
    .alert,
    .list-group {
        max-width: 100%;
    }

    /* --- Full-bleed, app-like gutters --- */
    .container,
    .container-fluid,
    .container-sm,
    .container-md,
    .container-lg {
        padding-left: 14px;
        padding-right: 14px;
    }

    /* --- Comfortable 44px touch targets (page content only —
           the header/navbar keeps its own, already-good styling) --- */
    main .btn:not(.btn-sm):not(.btn-close) {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    main .dropdown-item {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: .7rem 1rem;
    }

    /* --- iOS must not zoom when a field is focused --- */
    input,
    select,
    textarea,
    .form-control,
    .form-select {
        font-size: 16px;
    }

    /* --- Fluid headings --- */
    h1,
    .h1 {
        font-size: 1.6rem;
    }

    h2,
    .h2 {
        font-size: 1.35rem;
    }

    h3,
    .h3 {
        font-size: 1.15rem;
    }

    /* --- Wide tables scroll inside their own box, not the page ---
       (base rule defined at the top of this file) --- */

    /* --- Sticky header respects the notch --- */
    .navbar.sticky-top {
        padding-top: var(--jfl-safe-top);
    }
}

/* ==========================================================================
   The student bottom tab bar lives in templates/partials/_bottom_nav.html and
   carries its own styles — nothing to define here, only keep the floating
   "scroll to top" button clear of the bar on phones.
   ========================================================================== */
@media (max-width: 767.98px) {
    /* `body` prefix is required: base.html's inline `.scroll-to-top { bottom: 30px }`
       comes later in source order and would otherwise win (same specificity). */
    body .scroll-to-top {
        bottom: calc(56px + var(--jfl-safe-bottom) + 24px);
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
}

/* ==========================================================================
   Flex rows that must STAY rows on phones.
   templates/base.html forces every `.d-flex` to `flex-direction: column` (and
   every `.btn` to full width) below 768px, which breaks chip / badge / button
   rows — they stack into tall columns. Add `.jfl-row` to any row that should
   remain horizontal; it opts back out and lets its buttons size to content.
   `.cup-grid` is the reusable even-columns layout for the trophy cabinet.
   ========================================================================== */
@media (max-width: 768px) {
    .jfl-row {
        flex-direction: row !important;
        flex-wrap: wrap;
    }
    .jfl-row > .btn,
    .jfl-row > .btn-close {
        width: auto !important;
    }
}

.cup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
    gap: .5rem;
}

/* A row of buttons that packs into 2–4 even columns on phones instead of
   stacking one-per-row. Each button fills its grid cell. */
@media (max-width: 768px) {
    .jfl-btn-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
        gap: .5rem;
        width: 100%;
    }
    .jfl-btn-grid > .btn,
    .jfl-btn-grid > a.btn,
    .jfl-btn-grid > button {
        width: 100% !important;
        margin: 0 !important;
    }
}