/* ==========================================================================
   EduTech Grade Pro — interface stylesheet
   Direction: "the registrar's ledger".

   Classic comes from the vocabulary of academic record-keeping: a serif
   wordmark, hairline rules instead of boxes, an engraved gold accent, and
   tabular figures so columns of grades and money line up the way they do in
   a bound ledger.

   Modern comes from the handling: generous spacing, near-flat surfaces,
   real focus states, and restraint — one accent colour, small radii, and
   almost no shadow. The rules do the structural work that shadows usually do.

   Every class name here is one the views already use. Renaming any of them
   silently unstyles a page.
   ========================================================================== */

/* ── Tokens ───────────────────────────────────────────────────────────────
   Gold is deepened to #a8862c so it holds contrast against white — the
   lighter sand tone used before failed legibility as text or on buttons.  */

:root {
    --ink:        #141b2b;
    --ink-soft:   #2a3550;
    --ink-line:   #333e58;

    --gold:       #a8862c;
    --gold-deep:  #8a6d20;
    --gold-wash:  #f5edd6;

    --paper:      #f2f3f0;   /* cool paper, not cream */
    --card:       #ffffff;
    --rule:       #e3e3dd;
    --rule-soft:  #eeeee9;

    --text:       #141b2b;
    --text-body:  #303848;
    --text-muted: #6a7180;

    --success:    #1c7a4d;
    --success-bg: #e7f4ec;
    --danger:     #b0343c;
    --danger-bg:  #fbebec;
    --warning:    #a8701a;
    --warning-bg: #fbf0dd;
    --info:       #2b5fa8;
    --info-bg:    #e9f0fa;
    --purple:     #5b4b8a;
    --purple-bg:  #efecf7;

    --radius:     10px;
    --radius-lg:  14px;
    --radius-sm:  7px;

    /* Shadows stay almost invisible; hairlines carry the structure. */
    --shadow:     0 1px 2px rgba(20,27,43,0.04), 0 1px 12px rgba(20,27,43,0.03);
    --shadow-lg:  0 12px 40px rgba(20,27,43,0.16);

    /* Aliases — views reference these inline. */
    --primary:       var(--ink);
    --primary-light: var(--ink-soft);
    --accent:        var(--gold);
    --accent-light:  var(--gold-wash);
    --bg:            var(--paper);
    --bg-card:       var(--card);
    --border:        var(--rule);
}

/* ── Reset ──────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

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

body {
    font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    background: var(--paper);
    color: var(--text-body);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, svg, canvas { max-width: 100%; }

a { color: inherit; }

/* ── Type ─────────────────────────────────────────────────────────────────
   Fraunces carries the institutional voice; DM Sans does the interface
   work. The serif appears only where a document would use one — the
   wordmark, page titles and section headings — so it stays an accent
   rather than a texture.                                                   */

h1, h2, h3, h4,
.brand-name,
.card-header h3,
.topbar-title h2 {
    font-family: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
    color: var(--text);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

/* Numbers in a ledger have to align. Tabular figures everywhere data is
   compared down a column. */
table, .stat-info .num, .num, input[type="number"], code {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

code {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.92em;
    color: var(--ink-soft);
}

.text-muted { color: var(--text-muted); }
.fw-bold    { font-weight: 600; color: var(--text); }
.mb-3       { margin-bottom: 20px; }
.mt-2       { margin-top: 12px; }

/* ── Shell ────────────────────────────────────────────────────────────── */

.dashboard {
    display: grid;
    grid-template-columns: 258px 1fr;
    min-height: 100vh;
}

.main-content { grid-column: 2; padding: 0; overflow-x: hidden; min-width: 0; }

.content-area { padding: 30px 34px 56px; }

/* Opacity only — a transform here would become the containing block for
   every position:fixed modal and clip it to this element. */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.fade-in { animation: fadeIn 0.35s ease forwards; }

/* ── Sidebar ─────────────────────────────────────────────────────────────
   Ink field, hairline divisions, and a gold marker on the active item —
   the tab of a ledger you have your finger in.                            */

/* Fixed, not sticky.
   `overflow-x: hidden` on body (needed to stop wide tables dragging the page
   sideways) turns body into a scroll container, and a sticky element inside
   a scroll container sticks to THAT container rather than the viewport — so
   the sidebar scrolled away with the page. Fixed positioning is immune to
   whatever any ancestor does with overflow. The grid track below still
   reserves the 258px, and .main-content is pinned to column 2 because a
   fixed element no longer participates in the grid. */
.sidebar {
    background: var(--ink);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 258px;
    height: 100vh;
    z-index: 1000;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--ink-line) transparent;
}

.sidebar::-webkit-scrollbar { width: 7px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--ink-line); border-radius: 4px; }

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 22px 20px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.09);
}

/* The seal: a gold ring, the one ornament in the interface. */
.brand-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--gold);
    background: rgba(168,134,44,0.12);
    border: 1.5px solid rgba(168,134,44,0.55);
}

.brand-name {
    color: #fff;
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.brand-sub {
    color: rgba(255,255,255,0.5);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-top: 3px;
    font-weight: 500;
}

.sidebar-nav { padding: 14px 12px 24px; flex: 1; }

.nav-section-title {
    color: rgba(255,255,255,0.38);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 18px 10px 8px;
}

.nav-section-title:first-child { padding-top: 4px; }

.nav-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    margin-bottom: 1px;
    border-radius: var(--radius-sm);
    color: rgba(255,255,255,0.74);
    text-decoration: none;
    font-size: 13.5px;
    position: relative;
    transition: background 0.14s ease, color 0.14s ease;
}

.nav-link:hover { background: rgba(255,255,255,0.07); color: #fff; }

.nav-link.active {
    background: rgba(255,255,255,0.10);
    color: #fff;
    font-weight: 500;
}

/* Gold tab on the active row. */
.nav-link.active::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 7px;
    bottom: 7px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--gold);
}

.nav-icon { font-size: 15px; width: 19px; text-align: center; flex: 0 0 19px; }

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 15px 20px;
    border-top: 1px solid rgba(255,255,255,0.09);
}

.user-avatar {
    width: 37px;
    height: 37px;
    flex: 0 0 37px;
    border-radius: 50%;
    background: rgba(255,255,255,0.11);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.02em;
}

.user-info { min-width: 0; }

.user-name {
    color: #fff;
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-role {
    color: rgba(255,255,255,0.48);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 1px;
}

/* ── Topbar ─────────────────────────────────────────────────────────────── */

.topbar {
    background: var(--card);
    padding: 17px 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--rule);
    position: sticky;
    top: 0;
    z-index: 900;
}

.topbar-title h2 { font-size: 21px; }

.topbar-title p {
    color: var(--text-muted);
    font-size: 12.5px;
    margin-top: 2px;
}

.topbar-actions { display: flex; align-items: center; gap: 10px; }

.notif-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    background: var(--card);
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: border-color 0.14s ease, background 0.14s ease;
}

.notif-btn:hover { background: var(--paper); border-color: #d6d6cf; }

.dot {
    position: absolute;
    top: 7px;
    right: 8px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--danger);
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--card);
}

.nav-toggle {
    display: none;
    width: 42px;
    height: 42px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    background: var(--card);
    cursor: pointer;
    font-size: 18px;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
}

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(20,27,43,0.5);
    z-index: 1400;
}

.sidebar-backdrop.show { display: block; }

/* ── Cards ──────────────────────────────────────────────────────────────── */

.card {
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.card-header {
    padding: 17px 20px;
    border-bottom: 1px solid var(--rule);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--card);
}

.card-header h3 { font-size: 16px; }

/* ── Stat cards ──────────────────────────────────────────────────────────
   The icon sits in a ruled square rather than a coloured blob: closer to a
   stamped box on a form than a dashboard bubble.                          */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.stat-card {
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px 18px 17px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    overflow: hidden;
}

/* Hairline of colour along the top edge, drawn by the icon's tone. */
.stat-card::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 2px;
    background: var(--gold);
    opacity: 0.55;
}

.stat-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    border: 1px solid var(--rule);
    background: var(--paper);
}

.stat-icon.blue   { background: var(--info-bg);    border-color: #cfdcef; }
.stat-icon.green  { background: var(--success-bg); border-color: #c9e4d5; }
.stat-icon.purple { background: var(--purple-bg);  border-color: #d8d1ec; }
.stat-icon.amber  { background: var(--warning-bg); border-color: #ecd9b4; }

.stat-info { min-width: 0; }

.stat-info .num {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--text);
    letter-spacing: -0.02em;
}

.stat-info .label {
    color: var(--text-muted);
    font-size: 11.5px;
    margin-top: 3px;
    letter-spacing: 0.02em;
}

/* ── Tables — the signature ──────────────────────────────────────────────
   Column rules, a gold hairline under the header, and tabular figures.
   Most interfaces drop vertical rules; a ledger keeps them, and columns of
   grades and currency genuinely read better with them.                    */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table-wrap table { min-width: 620px; }

table { width: 100%; border-collapse: collapse; }

thead th {
    background: #fbfbf9;
    padding: 11px 16px;
    text-align: left;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1.5px solid var(--gold);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 2;
}

thead th + th { border-left: 1px solid var(--rule-soft); }

tbody td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--rule-soft);
    font-size: 13.5px;
    color: var(--text-body);
    vertical-align: middle;
}

tbody td + td { border-left: 1px solid var(--rule-soft); }

tbody tr:last-child td { border-bottom: 0; }

tbody tr { transition: background 0.12s ease; }

tbody tr:hover { background: #fbfaf6; }

/* ── Badges ──────────────────────────────────────────────────────────────
   Flat tints with a matching rule, so they read as stamps rather than
   pills.                                                                  */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3.5px 9px;
    border-radius: 5px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid transparent;
    white-space: nowrap;
}

.badge-success { background: var(--success-bg); color: var(--success); border-color: #c4e2d2; }
.badge-danger  { background: var(--danger-bg);  color: var(--danger);  border-color: #f0ccce; }
.badge-warning { background: var(--warning-bg); color: var(--warning); border-color: #ebd6ac; }
.badge-info    { background: var(--info-bg);    color: var(--info);    border-color: #cbdaef; }
.badge-purple  { background: var(--purple-bg);  color: var(--purple);  border-color: #d5cdeb; }
.badge-gray    { background: #f2f2ee;           color: #5f6570;        border-color: var(--rule); }

/* ── Buttons ─────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 17px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
    transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
    white-space: nowrap;
}

.btn-primary {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}

.btn-primary:hover { background: var(--ink-soft); border-color: var(--ink-soft); }

/* The gold button is reserved for the one document action on a page —
   printing an official copy. Spending it anywhere else would flatten it. */
.btn-accent {
    background: var(--gold);
    color: #fff;
    border-color: var(--gold);
}

.btn-accent:hover { background: var(--gold-deep); border-color: var(--gold-deep); }

.btn-outline {
    background: var(--card);
    color: var(--text-body);
    border-color: var(--rule);
}

.btn-outline:hover { background: var(--paper); border-color: #d3d3cb; }

.btn-sm { padding: 7px 12px; font-size: 12.5px; }

.btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ── Forms ──────────────────────────────────────────────────────────── */

.form-group { margin-bottom: 16px; }

label, .label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.form-control {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 14px;
    color: var(--text);
    background: var(--card);
    transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.form-control:hover { border-color: #d3d3cb; }

.form-control:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(168,134,44,0.14);
}

.form-control:disabled,
.form-control[readonly] { background: #f6f6f3; color: var(--text-muted); }

select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath fill='%236a7180' d='M5.5 7 0 1.4 1.4 0l4.1 4.2L9.6 0 11 1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    padding-right: 34px;
}

textarea.form-control { resize: vertical; min-height: 74px; }

/* Keyboard users must be able to see where they are. */
:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ── Alerts ─────────────────────────────────────────────────────────────── */

.alert {
    padding: 13px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 18px;
    font-size: 13.5px;
    border: 1px solid transparent;
    border-left-width: 3px;
}

.alert-success { background: var(--success-bg); color: #14603a; border-color: #c4e2d2; border-left-color: var(--success); }
.alert-danger  { background: var(--danger-bg);  color: #8e2830; border-color: #f0ccce; border-left-color: var(--danger); }

/* ── Tabs ───────────────────────────────────────────────────────────────── */

.tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 20px;
}

.tabs a {
    padding: 9px 14px;
    font-size: 13px;
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.14s ease, border-color 0.14s ease;
}

.tabs a:hover { color: var(--text); }

.tabs a.on {
    color: var(--text);
    border-bottom-color: var(--gold);
    font-weight: 600;
}

/* ── Modals ──────────────────────────────────────────────────────────────
   Header and footer are pinned; only the body scrolls, so the title and the
   save button stay reachable however tall the form gets.                   */

.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(20,27,43,0.55);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow-y: auto;
}

.modal-overlay.active { display: flex; }

.modal {
    background: var(--card);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 560px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.modal > form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}

.modal-header {
    padding: 19px 24px 15px;
    border-bottom: 1px solid var(--rule);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    background: var(--card);
}

.modal-header h3 { font-size: 17px; }

.modal-close {
    background: none;
    border: 0;
    font-size: 17px;
    cursor: pointer;
    color: var(--text-muted);
    line-height: 1;
    padding: 5px;
    border-radius: 5px;
}

.modal-close:hover { background: var(--paper); color: var(--text); }

.modal-body {
    padding: 19px 24px;
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
}

.modal-footer {
    padding: 14px 24px 17px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex: 0 0 auto;
    border-top: 1px solid var(--rule);
    background: var(--card);
}

/* ── Page-level grids used by several views ─────────────────────────────── */

.charts-grid,
.dept-grid,
.prof-grid,
.msg-grid,
.plan-grid,
.enroll-grid { display: grid; gap: 18px; }

.charts-grid { grid-template-columns: 1fr 1fr; }
.dept-grid   { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }

.dept-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 15px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--rule);
    background: var(--card);
    cursor: pointer;
    color: inherit;
}

.dept-btn:hover { background: var(--paper); }

/* ── Print ──────────────────────────────────────────────────────────────── */

@media print {
    .sidebar, .topbar, .no-print, .modal-overlay, .sidebar-backdrop { display: none !important; }
    .dashboard { grid-template-columns: 1fr; }
    .main-content { grid-column: 1; }
    .content-area { padding: 0; }
    .card { border: 0; box-shadow: none; }
    body { background: #fff; }
}

/* ==========================================================================
   RESPONSIVE
   Below 1024px the sidebar becomes a drawer. Several views set
   grid-template-columns inline; an inline style beats a stylesheet rule, so
   those collapses need !important — that is the reason for it here.
   ========================================================================== */

@media (max-width: 1280px) {
    .content-area { padding: 24px 22px 48px; }
    .topbar { padding: 15px 22px; }
}

@media (max-width: 1024px) {
    .dashboard { grid-template-columns: 1fr; }
    .main-content { grid-column: 1; }

    .sidebar {
        width: 268px;
        max-width: 84vw;
        z-index: 1500;
        transform: translateX(-100%);
        transition: transform 0.24s ease;
        box-shadow: 2px 0 22px rgba(20,27,43,0.2);
    }

    .sidebar.open { transform: translateX(0); }

    .nav-toggle { display: inline-flex; }

    .topbar { gap: 12px; flex-wrap: wrap; padding: 13px 17px; }
    .topbar-title h2 { font-size: 19px; }
    .topbar-title p  { font-size: 12px; }

    .content-area { padding: 18px 15px 44px; }

    [style*="grid-template-columns:1fr 340px"],
    [style*="grid-template-columns:1fr 360px"],
    [style*="grid-template-columns:1fr 380px"],
    [style*="grid-template-columns:1fr 400px"],
    [style*="grid-template-columns:300px 1fr"],
    [style*="grid-template-columns:280px 1fr"],
    [style*="grid-template-columns:200px 1fr"],
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:repeat(3,1fr)"],
    [style*="grid-template-columns:2fr 1fr 90px 110px"] {
        grid-template-columns: 1fr !important;
    }

    .charts-grid, .dept-grid, .prof-grid,
    .msg-grid, .plan-grid, .enroll-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .content-area { padding: 14px 12px 40px; }
    .topbar { padding: 12px 14px; }
    .topbar-title h2 { font-size: 18px; }

    .stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
    .stat-card { padding: 14px; gap: 11px; }
    .stat-icon { width: 38px; height: 38px; flex: 0 0 38px; font-size: 17px; }
    .stat-info .num { font-size: 20px; }
    .stat-info .label { font-size: 10.5px; }

    .card-header { flex-direction: column; align-items: flex-start; gap: 10px; }
    .card-header form, .topbar-actions { flex-wrap: wrap; }

    .tabs a { padding: 8px 11px; font-size: 12.5px; }

    /* 16px stops iOS zooming the page when a field is focused. */
    .form-control { font-size: 16px; padding: 11px 12px; }

    .table-wrap table { min-width: 560px; }

    [style*="minmax(220px"],
    [style*="minmax(200px"],
    [style*="minmax(180px"],
    [style*="minmax(170px"] { grid-template-columns: 1fr !important; }
}

@media (max-width: 420px) {
    .stats-grid { grid-template-columns: 1fr; }
    .sidebar { width: 84vw; }
}

@media (pointer: coarse) {
    .btn, .nav-link, .dept-btn, .modal-close, .nav-toggle { min-height: 40px; }
    .btn-sm { padding: 9px 12px; }
}

/* Respect a reduced-motion preference — required, not optional. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}