/*
 * Shared mobile layer for the static pages.
 * Pair with /static/responsive.js. Desktop layout is untouched: every rule
 * below lives inside a max-width media query.
 *
 * Page hooks:
 *   data-mobile-drawer  on a sidebar -> becomes an off-canvas drawer with a top bar
 *   data-mobile-title   on the same element -> text shown in the top bar
 */

/* Injected by responsive.js; hidden on desktop */
.rsp-topbar, .rsp-backdrop, .rsp-topbar-btn { display: none; }
.rsp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

@media (max-width: 768px) {
    html, body { overflow-x: hidden; max-width: 100%; }
    img, video, canvas, svg, iframe { max-width: 100%; }
    canvas { height: auto; }

    /* iOS zooms the page when a focused field is under 16px */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px !important; }

    /* ---- Off-canvas drawer ---- */
    .rsp-topbar {
        display: flex; align-items: center; gap: 12px;
        position: sticky; top: 0; z-index: 900;
        height: 56px; padding: 0 12px;
        background: #0f1535; color: #fff;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }
    /* Menu button placed inside an existing page nav (data-mobile-toggle-in) */
    .rsp-topbar-btn[hidden] { display: flex !important; margin-right: 4px; }
    .rsp-topbar-btn {
        width: 40px; height: 40px; border: none; border-radius: 10px;
        background: rgba(255,255,255,0.08); color: #fff; font-size: 18px;
        display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
    }
    .rsp-topbar-logo {
        width: 32px; height: 32px; border-radius: 8px; overflow: hidden; flex-shrink: 0;
        display: flex; align-items: center; justify-content: center;
    }
    .rsp-topbar-logo:empty { display: none; }
    .rsp-topbar-title { font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

    [data-mobile-drawer] {
        position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0;
        width: 272px !important; max-width: 85vw; height: 100vh; height: 100dvh;
        min-height: 0 !important; overflow-y: auto;
        transform: translateX(-100%); transition: transform 0.25s ease !important;
        z-index: 1001 !important;
    }
    body.rsp-drawer-open [data-mobile-drawer] { transform: none; box-shadow: 4px 0 24px rgba(0,0,0,0.3); }
    body.rsp-drawer-open { overflow: hidden; }
    .rsp-backdrop {
        position: fixed; inset: 0; z-index: 1000; background: rgba(15,21,53,0.5);
    }
    body.rsp-drawer-open .rsp-backdrop { display: block; }

    /* ---- Grids ----
       Inline grids (style="grid-template-columns:...") are common in these pages.
       Wide stat rows drop to two columns, everything else stacks. */
    [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
    [style*="grid-template-columns:repeat(4"], [style*="grid-template-columns: repeat(4"],
    [style*="grid-template-columns:repeat(5"], [style*="grid-template-columns: repeat(5"],
    [style*="grid-template-columns:repeat(6"], [style*="grid-template-columns: repeat(6"],
    [style*="grid-template-columns:1fr 1fr 1fr 1fr"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    [style*="grid-column:span"], [style*="grid-column: span"] { grid-column: auto !important; }
    /* Grid/flex children default to min-width:auto and push their track wider than the screen */
    [style*="display:grid"] > *, [style*="display: grid"] > * { min-width: 0; }

    /* Tailwind multi-column grids without a responsive prefix */
    .grid.grid-cols-2:not([class*=":grid-cols"]) { grid-template-columns: minmax(0, 1fr); }
    .grid.grid-cols-3:not([class*=":grid-cols"]),
    .grid.grid-cols-4:not([class*=":grid-cols"]),
    .grid.grid-cols-5:not([class*=":grid-cols"]),
    .grid.grid-cols-6:not([class*=":grid-cols"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .col-span-2, .col-span-3, .col-span-4 { grid-column: auto; }
    .grid > *, .grid > * > .flex > * { min-width: 0; }

    /* Toolbars / card headers: let actions drop below the title */
    [style*="justify-content:space-between"], [style*="justify-content: space-between"] { flex-wrap: wrap; row-gap: 10px; }
    :is([style*="justify-content:space-between"], [style*="justify-content: space-between"]) > * { min-width: 0; max-width: 100%; }
    :is([style*="justify-content:space-between"], [style*="justify-content: space-between"]) > [style*="display:flex"] { flex-wrap: wrap; row-gap: 8px; }
    [style*="display:flex"][style*="gap"] > input, [style*="display:flex"][style*="gap"] > select { min-width: 0; }

    /* ---- Top navigation bars (<body> > <nav> with Tailwind flex rows) ----
       Title stays on the first line; the action links move to a sideways-scrolling row. */
    body > nav .justify-between { flex-wrap: wrap; row-gap: 10px; }
    body > nav .justify-between > :first-child { min-width: 0; }
    body > nav .justify-between > :last-child:not(:first-child) {
        width: 100%; flex-wrap: nowrap; overflow-x: auto; gap: 8px;
        scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    body > nav .justify-between > :last-child:not(:first-child) > * { flex-shrink: 0; white-space: nowrap; margin-left: 0 !important; }
    body > nav h1 { font-size: 1.15rem !important; }

    /* Tailwind page gutters */
    .p-8 { padding: 1rem !important; }
    .px-8 { padding-left: 1rem !important; padding-right: 1rem !important; }
    .text-3xl { font-size: 1.5rem !important; line-height: 2rem !important; }

    /* ---- Modals ---- */
    .modal, [class*="modal-content"], [class$="-modal"], .maint-modal {
        max-width: calc(100vw - 24px) !important;
        max-height: calc(100dvh - 24px) !important;
        overflow-y: auto;
    }

    /* ---- Tables ---- */
    table th, table td { white-space: nowrap; }

    /* Toasts span the screen instead of hanging off the right edge */
    .toast { left: 12px !important; right: 12px !important; }
}