/* ==========================================================================
   Shaheen — School portal design system
   Light-first with dark support via [data-theme="dark"] + prefers-color-scheme
   ========================================================================== */

/* ---- Design tokens (light) ---------------------------------------------- */
:root {
    --bg:            #f4f6fb;
    --surface:       #ffffff;
    --surface-2:     #f7f9fd;
    --surface-3:     #eef2f8;
    --border:        #e2e8f0;
    --border-hi:     #cbd5e1;

    --text:          #0f172a;
    --text-dim:      #475569;
    --text-mute:     #94a3b8;

    --brand:         #2563eb;
    --brand-hi:      #1d4ed8;
    --brand-soft:    #dbeafe;
    --brand-ink:     #ffffff;

    --accent:        #f59e0b;
    --accent-soft:   #fef3c7;

    --ok:            #16a34a;
    --ok-soft:       #dcfce7;
    --warn:          #ea580c;
    --warn-soft:     #ffedd5;
    --err:           #dc2626;
    --err-soft:      #fee2e2;
    --info:          #0891b2;
    --info-soft:     #cffafe;

    --shadow-sm:     0 1px 2px rgba(15, 23, 42, .05);
    --shadow:        0 4px 12px -2px rgba(15, 23, 42, .08), 0 2px 4px -1px rgba(15, 23, 42, .04);
    --shadow-lg:     0 12px 32px -8px rgba(15, 23, 42, .12);

    --radius-sm:     6px;
    --radius:        10px;
    --radius-lg:     14px;
    --radius-xl:     20px;

    --font-body:     "IBM Plex Sans Arabic", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono:     "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

/* ---- Dark tokens (system preference, unless explicit light) ------------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:          #0b1220;
        --surface:     #111a2e;
        --surface-2:   #1a2542;
        --surface-3:   #202d4d;
        --border:      #23324f;
        --border-hi:   #364766;

        --text:        #e8ecf3;
        --text-dim:    #9aa5b8;
        --text-mute:   #64748b;

        --brand:       #4f8dff;
        --brand-hi:    #6ba0ff;
        --brand-soft:  rgba(79, 141, 255, .18);
        --brand-ink:   #0b1220;

        --accent:      #fbbf24;
        --accent-soft: rgba(251, 191, 36, .18);

        --ok:          #22c55e;
        --ok-soft:     rgba(34, 197, 94, .18);
        --warn:        #f59e0b;
        --warn-soft:   rgba(245, 158, 11, .18);
        --err:         #ef4444;
        --err-soft:    rgba(239, 68, 68, .18);
        --info:        #38bdf8;
        --info-soft:   rgba(56, 189, 248, .18);

        --shadow-sm:   0 1px 2px rgba(0, 0, 0, .3);
        --shadow:      0 4px 12px -2px rgba(0, 0, 0, .45);
        --shadow-lg:   0 12px 32px -8px rgba(0, 0, 0, .55);
    }
}

/* ---- Dark tokens (explicit override) ------------------------------------ */
:root[data-theme="dark"] {
    --bg:          #0b1220;
    --surface:     #111a2e;
    --surface-2:   #1a2542;
    --surface-3:   #202d4d;
    --border:      #23324f;
    --border-hi:   #364766;

    --text:        #e8ecf3;
    --text-dim:    #9aa5b8;
    --text-mute:   #64748b;

    --brand:       #4f8dff;
    --brand-hi:    #6ba0ff;
    --brand-soft:  rgba(79, 141, 255, .18);
    --brand-ink:   #0b1220;

    --accent:      #fbbf24;
    --accent-soft: rgba(251, 191, 36, .18);

    --ok:          #22c55e;
    --ok-soft:     rgba(34, 197, 94, .18);
    --warn:        #f59e0b;
    --warn-soft:   rgba(245, 158, 11, .18);
    --err:         #ef4444;
    --err-soft:    rgba(239, 68, 68, .18);
    --info:        #38bdf8;
    --info-soft:   rgba(56, 189, 248, .18);

    --shadow-sm:   0 1px 2px rgba(0, 0, 0, .3);
    --shadow:      0 4px 12px -2px rgba(0, 0, 0, .45);
    --shadow-lg:   0 12px 32px -8px rgba(0, 0, 0, .55);
}

/* ---- Bootstrap variable overrides so vanilla classes pick up our theme -- */
:root {
    --bs-body-bg:              var(--bg);
    --bs-body-color:           var(--text);
    --bs-border-color:         var(--border);
    --bs-secondary-bg:         var(--surface-2);
    --bs-tertiary-bg:          var(--surface-3);
    --bs-emphasis-color:       var(--text);
    --bs-secondary-color:      var(--text-dim);
    --bs-tertiary-color:       var(--text-mute);
    --bs-link-color:           var(--brand);
    --bs-link-hover-color:     var(--brand-hi);
    --bs-primary:              var(--brand);
    --bs-primary-rgb:          37, 99, 235;
    --bs-heading-color:        var(--text);
}

/* ---- Base --------------------------------------------------------------- */
html { color-scheme: light dark; }
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"]  { color-scheme: dark; }

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100dvh;
}

code, .font-mono, pre { font-family: var(--font-mono); font-size: 0.92em; }
::selection { background: var(--brand-soft); color: var(--text); }

/* ---- App shell: sidebar + top header + main --------------------------- */
:root {
    --sidebar-w: 240px;
    --topbar-h:  60px;
}

.app-topbar {
    position: fixed; top: 0; inset-inline-start: 0; inset-inline-end: 0;
    height: var(--topbar-h); z-index: 90;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 0 24px;
    background: color-mix(in oklab, var(--surface) 92%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--border);
}
.topbar-brand {
    display: inline-flex; align-items: center; gap: 12px;
    text-decoration: none; color: var(--text);
    font-weight: 700; font-size: 16px; letter-spacing: -0.01em;
    white-space: nowrap;
}
.brand-mark {
    width: 34px; height: 34px; border-radius: 9px;
    background: linear-gradient(135deg, var(--brand) 0%, #6ba0ff 100%);
    color: var(--brand-ink); display: grid; place-items: center;
    font-weight: 800; font-size: 15px; letter-spacing: -0.03em;
    box-shadow: 0 4px 12px -2px rgba(37, 99, 235, 0.35);
    flex-shrink: 0;
}
.brand-school {
    color: var(--text-dim); font-weight: 500; font-size: 13px;
    padding: 2px 10px; border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface-2);
    display: none;
}
@media (min-width: 992px) { .brand-school { display: inline-block; } }
.topbar-right { display: flex; align-items: center; gap: 8px; }

/* Sidebar */
.app-sidebar {
    position: fixed; top: var(--topbar-h); bottom: 0;
    inset-inline-start: 0; width: var(--sidebar-w); z-index: 80;
    background: var(--surface); border-inline-end: 1px solid var(--border);
    display: flex; flex-direction: column;
    overflow-y: auto; overflow-x: hidden;
    padding: 14px 12px;
    transition: transform .18s ease;
}
.side-nav { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.side-nav a {
    display: flex; align-items: center; gap: 12px;
    text-decoration: none; color: var(--text-dim);
    padding: 10px 14px; border-radius: 9px;
    font-size: 14px; font-weight: 500;
    transition: background .12s, color .12s;
}
.side-nav a:hover { color: var(--text); background: var(--surface-2); }
.side-nav a.active {
    color: var(--brand); background: var(--brand-soft);
    font-weight: 600;
}
.side-nav a .nav-icon {
    width: 20px; height: 20px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px; opacity: 0.9;
}
.side-nav a.active .nav-icon { opacity: 1; }
.side-nav-section {
    margin: 12px 4px 6px; padding: 0 8px;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
    color: var(--text-mute); text-transform: uppercase;
}
html[dir="rtl"] .side-nav-section { text-transform: none; letter-spacing: 0; font-size: 12px; }

/* Mobile: sidebar becomes a slide-in drawer */
.sidebar-backdrop {
    position: fixed; inset: 0; background: rgba(15, 23, 42, .45);
    z-index: 79; opacity: 0; pointer-events: none;
    transition: opacity .15s ease;
}
.sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }
.hamburger { display: none; }
@media (max-width: 900px) {
    .hamburger { display: inline-flex; }
    .app-sidebar {
        transform: translateX(calc(var(--sidebar-w) * -1));
        box-shadow: var(--shadow-lg);
    }
    html[dir="rtl"] .app-sidebar { transform: translateX(var(--sidebar-w)); }
    .sidebar-open .app-sidebar { transform: translateX(0); }
    html[dir="rtl"] .sidebar-open .app-sidebar { transform: translateX(0); }
}
.icon-btn {
    background: transparent; color: var(--text-dim); border: 1px solid var(--border);
    width: 36px; height: 36px; border-radius: 8px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all .12s;
    font-size: 15px;
}
.icon-btn:hover { color: var(--text); border-color: var(--border-hi); background: var(--surface-2); }
.icon-btn svg { width: 16px; height: 16px; }

.user-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 10px 6px 6px; border-radius: 999px;
    background: var(--surface-2); border: 1px solid var(--border);
    color: var(--text); font-size: 13px; font-weight: 500; text-decoration: none;
    transition: border-color .12s;
}
.user-chip:hover { border-color: var(--border-hi); color: var(--text); }
.user-avatar {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--brand); color: var(--brand-ink);
    display: grid; place-items: center;
    font-size: 12px; font-weight: 700;
}
.user-role {
    font-size: 10.5px; padding: 2px 6px; border-radius: 4px;
    background: var(--surface-3); color: var(--text-mute);
    letter-spacing: 0.02em;
}

.logout-btn {
    background: transparent; color: var(--text-dim); border: 1px solid var(--border);
    padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 500;
    cursor: pointer; transition: all .12s;
    font-family: var(--font-body);
}
.logout-btn:hover { color: var(--err); border-color: var(--err); background: var(--err-soft); }

/* ---- Main content shell ------------------------------------------------- */
.page-shell {
    padding: calc(var(--topbar-h) + 20px) 24px 40px;
    padding-inline-start: calc(var(--sidebar-w) + 24px);
    max-width: 100%;
    min-height: 100dvh;
}
@media (max-width: 900px) {
    .page-shell { padding-inline-start: 24px; }
}

.page-header {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 20px; flex-wrap: wrap;
    margin-bottom: 24px;
}
.page-title { font-size: 24px; font-weight: 700; margin: 0; color: var(--text); letter-spacing: -0.01em; }
.page-sub  { color: var(--text-dim); font-size: 14px; margin: 4px 0 0; }
.page-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; }

/* ---- Cards -------------------------------------------------------------- */
.card {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm);
}
.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 14px 18px !important;
    font-weight: 600; color: var(--text);
}
.card-body { padding: 18px !important; color: var(--text); }
.card-footer { background: var(--surface-2) !important; border-top: 1px solid var(--border) !important; }

/* ---- KPI tiles ---------------------------------------------------------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; }
.kpi-tile {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 18px 20px;
    position: relative; overflow: hidden;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.kpi-tile:hover { border-color: var(--border-hi); box-shadow: var(--shadow); transform: translateY(-1px); }
.kpi-tile .kpi-label {
    color: var(--text-dim); font-size: 12.5px; font-weight: 600;
    letter-spacing: 0.03em; text-transform: uppercase;
    margin: 0 0 10px;
}
.kpi-tile .kpi-value {
    font-family: var(--font-mono); font-size: 32px; font-weight: 700;
    color: var(--text); letter-spacing: -0.02em; line-height: 1;
    display: flex; align-items: baseline; gap: 8px;
}
.kpi-tile .kpi-value small { font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--text-mute); }
.kpi-tile .kpi-hint { color: var(--text-mute); font-size: 12.5px; margin-top: 6px; }
.kpi-tile .kpi-icon {
    position: absolute; inset-inline-end: 16px; top: 16px;
    width: 36px; height: 36px; border-radius: 8px;
    background: var(--brand-soft); color: var(--brand);
    display: grid; place-items: center; font-size: 16px;
}
.kpi-tile.tone-ok .kpi-icon   { background: var(--ok-soft);   color: var(--ok); }
.kpi-tile.tone-warn .kpi-icon { background: var(--warn-soft); color: var(--warn); }
.kpi-tile.tone-info .kpi-icon { background: var(--info-soft); color: var(--info); }

/* ---- Tables ------------------------------------------------------------- */
.table {
    --bs-table-bg: var(--surface);
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--border);
    --bs-table-hover-bg: var(--surface-2);
    --bs-table-hover-color: var(--text);
    --bs-table-striped-bg: var(--surface-2);
    margin: 0;
}
.table > :not(caption) > * > * { padding: 12px 14px; border-color: var(--border); vertical-align: middle; }
.table > thead > tr > th {
    background: var(--surface-2); color: var(--text-dim);
    font-weight: 600; font-size: 12px; letter-spacing: 0.03em;
    text-transform: uppercase; padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}
html[dir="rtl"] .table > thead > tr > th { text-transform: none; letter-spacing: 0; font-size: 13px; }
.table-hover > tbody > tr:hover > * { background-color: var(--surface-2); color: var(--text); }

/* Table inside a card — remove double border */
.card > .table-responsive, .card > .table { border-radius: inherit; overflow: hidden; }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
    border-radius: 8px; font-weight: 500;
    padding: 8px 16px; font-size: 14px;
    transition: all .12s ease;
    display: inline-flex; align-items: center; gap: 6px;
    border-width: 1px;
}
.btn-sm { padding: 5px 11px; font-size: 12.5px; border-radius: 6px; }
.btn-lg { padding: 12px 22px; font-size: 15px; border-radius: 10px; }

.btn-primary {
    background: var(--brand); border-color: var(--brand); color: var(--brand-ink);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--brand-hi); border-color: var(--brand-hi); color: var(--brand-ink);
}

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

.btn-outline-secondary {
    color: var(--text-dim); border-color: var(--border-hi); background: transparent;
}
.btn-outline-secondary:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-hi); }

.btn-outline-danger  { color: var(--err);  border-color: var(--err);  background: transparent; }
.btn-outline-danger:hover  { background: var(--err);  color: white; }
.btn-outline-warning { color: var(--warn); border-color: var(--warn); background: transparent; }
.btn-outline-warning:hover { background: var(--warn); color: white; }
.btn-outline-success { color: var(--ok);   border-color: var(--ok);   background: transparent; }
.btn-outline-success:hover { background: var(--ok);   color: white; }
.btn-outline-info    { color: var(--info); border-color: var(--info); background: transparent; }
.btn-outline-info:hover    { background: var(--info); color: white; }

.btn-success { background: var(--ok);   border-color: var(--ok);   color: white; }
.btn-warning { background: var(--warn); border-color: var(--warn); color: white; }
.btn-danger  { background: var(--err);  border-color: var(--err);  color: white; }

/* ---- Forms -------------------------------------------------------------- */
.form-control, .form-select {
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: 8px;
    padding: 9px 12px; font-size: 14px; font-family: var(--font-body);
    transition: border-color .12s, box-shadow .12s;
}
.form-control:focus, .form-select:focus {
    background: var(--surface); color: var(--text);
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
    outline: none;
}
.form-control::placeholder { color: var(--text-mute); }
.form-label { color: var(--text-dim); font-weight: 500; font-size: 13px; margin-bottom: 5px; }
.form-text { color: var(--text-mute); }

/* ---- Alerts ------------------------------------------------------------- */
.alert { border-radius: var(--radius); border-width: 1px; padding: 12px 16px; font-size: 13.5px; }
.alert-success { background: var(--ok-soft);   color: var(--ok);   border-color: transparent; }
.alert-danger  { background: var(--err-soft);  color: var(--err);  border-color: transparent; }
.alert-warning { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.alert-info    { background: var(--info-soft); color: var(--info); border-color: transparent; }

/* ---- Badges ------------------------------------------------------------- */
.badge {
    font-weight: 500; padding: 4px 8px; border-radius: 6px;
    font-size: 11.5px; letter-spacing: 0.02em;
}
html[dir="rtl"] .badge { font-size: 12px; letter-spacing: 0; }
.bg-success   { background: var(--ok)   !important; color: white !important; }
.bg-warning   { background: var(--warn) !important; color: white !important; }
.bg-danger    { background: var(--err)  !important; color: white !important; }
.bg-info      { background: var(--info) !important; color: white !important; }
.bg-secondary { background: var(--surface-3) !important; color: var(--text-dim) !important; }
.bg-primary   { background: var(--brand) !important; color: var(--brand-ink) !important; }

/* ---- Empty state -------------------------------------------------------- */
.empty-state {
    text-align: center; padding: 60px 20px;
    background: var(--surface); border: 1px dashed var(--border);
    border-radius: var(--radius-lg); color: var(--text-dim);
}
.empty-state .empty-icon {
    font-size: 40px; opacity: 0.5; margin-bottom: 12px;
    display: block; line-height: 1;
}
.empty-state h3 { color: var(--text); font-size: 17px; font-weight: 600; margin: 0 0 6px; }
.empty-state p  { color: var(--text-dim); font-size: 14px; margin: 0 0 16px; }

/* ---- Auth (login) shell ------------------------------------------------- */
.auth-shell {
    min-height: 100dvh;
    display: grid; place-items: center; padding: 24px;
    background:
        radial-gradient(ellipse 55% 45% at 20% 20%, var(--brand-soft) 0%, transparent 65%),
        radial-gradient(ellipse 45% 40% at 80% 90%, var(--accent-soft) 0%, transparent 60%),
        var(--bg);
}
.auth-card {
    width: 100%; max-width: 440px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-xl); padding: 32px 28px;
    box-shadow: var(--shadow-lg);
}
.auth-card h1 { font-size: 22px; margin: 0 0 4px; color: var(--text); font-weight: 700; }
.auth-card .auth-sub { color: var(--text-dim); font-size: 14px; margin: 0 0 24px; }

/* ---- Utilities ---------------------------------------------------------- */
.tabnum { font-variant-numeric: tabular-nums; }
.text-dim { color: var(--text-dim) !important; }
.text-mute { color: var(--text-mute) !important; }
.text-brand { color: var(--brand) !important; }
.hairline { border: 0; height: 1px; background: var(--border); margin: 20px 0; }

/* ---- Bootstrap tab stripe overrides ------------------------------------- */
.nav-tabs { border-bottom: 1px solid var(--border); gap: 4px; }
.nav-tabs .nav-link {
    color: var(--text-dim); background: transparent;
    border: 1px solid transparent; border-bottom: 0;
    border-radius: 8px 8px 0 0; padding: 8px 14px; font-weight: 500;
}
.nav-tabs .nav-link:hover { color: var(--text); background: var(--surface-2); border-color: transparent; }
.nav-tabs .nav-link.active {
    color: var(--brand); background: var(--surface);
    border-color: var(--border) var(--border) var(--surface);
}
.tab-content > .tab-pane { padding: 20px 0; }

/* ---- Legacy dark-mode utility overrides -------------------------------- */
/* Many pre-existing views hardcoded Bootstrap dark utilities
   (bg-dark, bg-black, text-white, text-white-50, border-secondary, table-dark).
   Force those to use theme tokens so they adapt in light mode too. */

.bg-dark, .bg-black {
    background-color: var(--surface) !important;
    color: var(--text) !important;
}
.text-white     { color: var(--text) !important; }
.text-light     { color: var(--text) !important; }
.text-white-50  { color: var(--text-dim) !important; }
.text-white-75  { color: var(--text-dim) !important; }
.text-muted     { color: var(--text-mute) !important; }
.border-secondary { border-color: var(--border) !important; }
.border-light     { border-color: var(--border) !important; }

/* Form controls that were tagged bg-dark / bg-black */
.form-control.bg-dark, .form-control.bg-black,
.form-select.bg-dark,  .form-select.bg-black,
input.bg-dark, input.bg-black, select.bg-dark, select.bg-black, textarea.bg-dark, textarea.bg-black {
    background-color: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
.form-control.bg-dark:focus, .form-control.bg-black:focus,
.form-select.bg-dark:focus,  .form-select.bg-black:focus {
    background-color: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3px var(--brand-soft) !important;
}
.form-control::placeholder { color: var(--text-mute) !important; }

/* Cards that were tagged bg-dark / bg-black */
.card.bg-dark, .card.bg-black {
    background-color: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
.card-header.bg-dark, .card-header.bg-black {
    background-color: var(--surface-2) !important;
    color: var(--text) !important;
    border-bottom-color: var(--border) !important;
}

/* Dark tables — make them look identical to our styled .table */
.table-dark {
    --bs-table-bg: var(--surface) !important;
    --bs-table-color: var(--text) !important;
    --bs-table-border-color: var(--border) !important;
    --bs-table-hover-bg: var(--surface-2) !important;
    --bs-table-hover-color: var(--text) !important;
    --bs-table-striped-bg: var(--surface-2) !important;
    background-color: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
.table-dark > :not(caption) > * > * {
    color: var(--text) !important;
    background-color: transparent !important;
    border-color: var(--border) !important;
}
.table-dark > thead > tr > th {
    background-color: var(--surface-2) !important;
    color: var(--text-dim) !important;
}

/* Bootstrap dark-scheme button hover/link inside cards */
.btn-outline-light {
    color: var(--text) !important;
    border-color: var(--border-hi) !important;
    background: transparent !important;
}
.btn-outline-light:hover {
    background: var(--surface-2) !important;
    color: var(--text) !important;
    border-color: var(--border-hi) !important;
}
.btn-light {
    background: var(--surface-2) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
.btn-light:hover { background: var(--surface-3) !important; color: var(--text) !important; }

/* ---- Small screens ------------------------------------------------------ */
@media (max-width: 768px) {
    .top-nav-inner { padding: 10px 14px; }
    .top-nav-links { gap: 2px; }
    .top-nav-links a { padding: 7px 10px; font-size: 12.5px; }
    .page-shell { padding: 16px; }
    .page-header { flex-direction: column; align-items: stretch; }
    .brand-school { display: none; }
}