/* ==========================================================================
   SupervisionBoard — responsive layer (loaded last by every layout)
   App-wide fixes so pages work from 320px phones to wide desktops without
   per-page changes: wide tables scroll, headers wrap, top bars compress,
   modals fit, and form fields do not trigger iOS zoom.
   ========================================================================== */

/* Numbers line up in tables and stat tiles */
.table, .metric-value, .stat-value, [class*="-count"], .badge { font-variant-numeric: tabular-nums; }

img, video { max-width: 100%; height: auto; }

/* Long words / URLs / emails never push a layout wider than the screen */
.card, .panel, .modal-content, .dropdown-menu, .alert, td, th { overflow-wrap: anywhere; }
.table td, .table th { overflow-wrap: normal; }

/* ── Tablets and below ─────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .admin-page .row > [class*="col-xl-"],
    .admin-page .row > [class*="col-lg-"] { min-width: 0; }
    .container, .container-lg, .container-md { max-width: 100%; }
}

/* ── Phones and small tablets ──────────────────────────────────────────── */
@media (max-width: 767.98px) {
    /* Tables not already wrapped in .table-responsive scroll sideways instead of overflowing */
    :not(.table-responsive) > table.table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table th, .table td { white-space: nowrap; }
    .table td .small, .table td .text-muted { white-space: normal; }

    /* Header rows (title + actions) wrap instead of squashing */
    .admin-page .d-flex.justify-content-between,
    .card-header.d-flex,
    .panel-header,
    .modal-footer { flex-wrap: wrap; gap: .5rem; }
    .btn-toolbar, .btn-group:not(.btn-group-vertical) { flex-wrap: wrap; }

    /* Fixed-width input groups and inline widths become fluid */
    .input-group[style*="width"], .form-control[style*="width"], .form-select[style*="width"] { width: 100% !important; max-width: 100% !important; }

    /* 16px fields stop iOS Safari zooming the page on focus */
    input.form-control, select.form-select, textarea.form-control, .form-control-sm, .form-select-sm { font-size: 16px; }

    /* Tabs and pill bars scroll rather than wrap into several rows */
    .nav-tabs, .nav-pills { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
    .nav-tabs::-webkit-scrollbar, .nav-pills::-webkit-scrollbar { display: none; }
    .nav-tabs .nav-link, .nav-pills .nav-link { white-space: nowrap; }

    /* Headings scale down */
    h1, .h1 { font-size: 1.6rem; }
    h2, .h2 { font-size: 1.35rem; }
    h3, .h3 { font-size: 1.2rem; }

    /* Cards and modals use the width they have */
    .card-body { padding: 1rem; }
    .modal-dialog { margin: .5rem auto; max-width: calc(100vw - 1rem); }
    .dropdown-menu { max-width: calc(100vw - 1.5rem); }

    /* Top bar: keep title + actions on one line */
    .admin-top { gap: 8px !important; }
    .admin-top > .d-flex { gap: 6px !important; min-width: 0; }
    .admin-top > .d-flex:first-child { flex: 1 1 auto; }   /* title side gives up space first */
    .admin-top > .d-flex:last-child { flex: 0 0 auto; }    /* action buttons never squeeze off-screen */
    .admin-top strong, .admin-top .fs-5 { font-size: 1rem !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
}

@media (max-width: 575.98px) {
    /* Icon-only buttons in the top bar; user chip shows just its icon */
    .sup-userchip span, .stu-userchip span, .sb-userchip span, [class*="-userchip"] > span { display: none; }
    [class*="-userchip"] { padding: 5px !important; gap: 0 !important; }
    .admin-top .dropdown-toggle::after { display: none; }
    .sup-iconbtn, .stu-iconbtn, .sb-iconbtn { width: 34px !important; height: 34px !important; }

    .admin-page, .sb-page-content { padding: 14px 12px 32px !important; }
    .row { --bs-gutter-x: .75rem; }

    /* Full-width primary actions are easier to tap */
    .modal-footer > .btn { flex: 1 1 auto; }
}

/* Respect reduced-motion preferences across the app */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}