/* ════════════════════════════════════════════════════════════════════════════
   KARDAN ONE — DESIGN SYSTEM OVERRIDE LAYER
   Canadian School of Tashkent (CST)
   ════════════════════════════════════════════════════════════════════════════

   SOURCE OF TRUTH : CRM/"6. my profile.html"  (Teacher Portal · My Profile)
   PURPOSE         : Apply that page's look to the whole portal — shell,
                     Teacher pages and Vice Principal pages — WITHOUT editing
                     any .razor markup, @code, API, save or data logic.

   HOW IT WORKS
   ────────────
   • Loaded from App.razor AFTER main.css, so its :root tokens win.
   • Component rules are prefixed `html body` (specificity 0,1,2) so they beat
     the single-class rules (0,1,0) inside each page's own <style> block, which
     the browser parses later in the document.
   • Rules below the shell sections touch PAINT ONLY — colour, border,
     radius, background, shadow, font, transition. Never display / position /
     width / height / flex / grid, so no page layout can shift.

   TABLE OF CONTENTS
   ─────────────────
   0.  Design tokens (corrected to match the mock)
   1.  Base & typography
   2.  Shell — sidebar
   3.  Shell — title bar / top bar
   4.  Shell — welcome banner
   5.  Universal surfaces (cards & panels)
   6.  Universal controls (buttons)
   7.  Universal form controls (inputs, selects, checkboxes, radios)
   8.  Universal drawers, modals & overlays
   9.  Universal tables
   10. Universal badges, chips, pills & toasts
   11. Teacher page class map
   12. Vice Principal page class map
   13. Retired shell-drift neutralisers
   ════════════════════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────────────────────────────
   0. DESIGN TOKENS — corrected to the mock
   The only substantive change vs main.css is the warm off-white surface
   (#FAFAF8) the mock uses instead of pure white, plus --font-body / --text-md
   which several pages reference but nothing ever defined.
   ────────────────────────────────────────────────────────────────────────── */
:root {
    --cst-red: #E11D48;
    --cst-blue: #15489D;
    --cst-navy: #00265E;
    --cst-coral: #F04860;
    --kardan-gold: #D4AF37;

    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', ui-monospace, monospace;
    --font-serif: 'Lora', Georgia, 'Times New Roman', serif;
    --font-script: 'Dancing Script', cursive;

    --accent-color: var(--cst-navy);
    --accent-hover: var(--cst-blue);

    --bg-primary: #FAFAF8;
    --bg-elevated: #FFFFFF;
    --bg-hover: #F3F2EF;
    --bg-warm: #FAFAF8;

    --text-primary: #1A1A1A;
    --text-secondary: #5C6370;
    --text-muted: #8B929A;

    --border-color: rgba(96, 165, 250, 0.12);
    --border-color-darker: rgba(0, 38, 94, 0.12);
    --border-accent: rgba(21, 72, 157, 0.12);
    --border-hairline: rgba(21, 72, 157, 0.7);
    --card-shadow: rgba(21, 72, 157, 0.06);

    --surface-bg: #FAFAF8;
    --surface-border: rgba(96, 165, 250, 0.15);

    --sidebar-icon: var(--cst-navy);
    --sidebar-icon-hover: var(--cst-red);
    --sidebar-icon-active: var(--cst-navy);
    --card-header-bg: var(--bg-primary);

    /* Semantic data colours (mock) */
    --ok: #059669;
    --ok-strong: #047857;
    --warn: #D97706;
    --danger: #DC2626;
    --info: #2563EB;
    --violet: #8B5CF6;
    --amber: #F59E0B;
    --pink: #EC4899;
    --teal: #14B8A6;

    --text-2xs: 10px;
    --text-xs: 12px;
    --text-sm: 13px;
    --text-md: 15px;
    --text-base: 15px;
    --text-lg: 17px;
    --text-xl: 19px;

    --space-1: 4px;
    --space-2: 6px;
    --space-3: 10px;
    --space-4: 14px;
    --space-5: 18px;
    --space-6: 22px;
    --space-8: 28px;

    --radius-sm: 5px;
    --radius-md: 7px;
    --radius-lg: 10px;
    --radius-full: 9999px;

    --nav-btn-size: 30px;
    --nav-icon-size: 15px;
    --sidebar-width: 230px;
    --sidebar-collapsed: 56px;
    --max-content-width: 1100px;
    --header-height: 54px;
    --content-gap: 18px;
    --schedule-panel-width: 280px;

    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
    --ease-std: cubic-bezier(0.4, 0, 0.2, 1);

    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 100;
    --z-fixed: 200;
    --z-modal-backdrop: 300;
    --z-modal: 400;
    --z-tooltip: 500;
}

[data-theme="dark"] {
    --accent-color: #60A5FA;
    --accent-hover: #93C5FD;

    --bg-primary: #111114;
    --bg-elevated: #1A1A1F;
    --bg-hover: #232329;
    --bg-warm: #1C1B19;

    --text-primary: #F0F0F2;
    --text-secondary: #9CA3AF;
    --text-muted: #6B7280;

    --border-color: rgba(255, 255, 255, 0.06);
    --border-color-darker: rgba(255, 255, 255, 0.10);
    --border-accent: rgba(96, 165, 250, 0.15);
    --border-hairline: rgba(59, 130, 246, 0.7);
    --card-shadow: rgba(0, 0, 0, 0.4);

    --cst-red: #FB7185;

    --surface-bg: #1A1A1F;
    --surface-border: rgba(96, 165, 250, 0.12);

    --sidebar-icon: var(--accent-color);
    --sidebar-icon-hover: var(--cst-red);
    --sidebar-icon-active: var(--accent-color);
    --card-header-bg: var(--bg-primary);

    --ok: #34D399;
    --ok-strong: #10B981;
    --warn: #FCD34D;
    --danger: #F87171;
    --info: #93C5FD;
}


/* ──────────────────────────────────────────────────────────────────────────
   1. BASE & TYPOGRAPHY
   ────────────────────────────────────────────────────────────────────────── */
html body {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: 1.5;
    background: var(--bg-primary);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
}

/* Monospaced font for data: financial figures, codes, dates, times.
   Extends the mock's list with the equivalent classes used across the app. */
html body .font-mono,
html body .course-code,
html body .fin-row-value, html body .fin-subtotal-value, html body .fin-net-value,
html body .fin-accordion-value,
html body .ps-doc-row-amount, html body .ps-doc-row-days, html body .ps-doc-net-value,
html body .ps-amount, html body .ps-net-amount, html body .ps-month-btn-paid,
html body .rp-row-value, html body .rp-card-badge,
html body .session-time, html body .stmt-amount, html body .stmt-date,
html body .adm-sr-upid,
html body .ui-stat-value, html body .dash-stat-value, html body .pc-stat-value,
html body .att-summary-val, html body .att-today-time-value, html body .att-log-time,
html body .panel-hero-value, html body .panel-stat-value {
    font-family: var(--font-mono);
    letter-spacing: -0.3px;
    font-variant-numeric: tabular-nums;
}

html body :focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }
html body button:focus:not(:focus-visible) { outline: none; }

/* Scrollbars — mock treatment, applied to every scroll container */
html body *::-webkit-scrollbar { width: 6px; height: 6px; }
html body *::-webkit-scrollbar-track { background: transparent; }
html body *::-webkit-scrollbar-thumb { background: rgba(21, 72, 157, 0.25); border-radius: 3px; }
html body *::-webkit-scrollbar-thumb:hover { background: rgba(240, 72, 96, 0.55); }
html[data-theme="dark"] body *::-webkit-scrollbar-thumb { background: rgba(96, 165, 250, 0.25); }


/* ──────────────────────────────────────────────────────────────────────────
   2. SHELL — SIDEBAR
   Restores the mock: hairline navy edge, logo mark instead of the gradient
   "K1" tile, flat navy wordmark, 3px coral bar on the active item.
   Markup is untouched — the gradient tile is re-skinned, not removed.
   ────────────────────────────────────────────────────────────────────────── */
html body .sidebar {
    background: var(--bg-primary);
    border-right: 0.7px solid var(--border-hairline);
}

html body .sidebar-header {
    padding: 18px 8px 18px 20px;
    border-bottom: none;
}
html body .logo-section { gap: 10px; height: 36px; }

/* BRAND LOCKUP
   The gradient "K1" tile becomes the real Kardan One logo — the official
   blue "KARDAN" / red "ONE" artwork already sitting in wwwroot/images.
   The text nodes ("Kardan One" + the role tagline) are hidden rather than
   deleted, so the .razor markup stays untouched and this is reversible.
   Expanded  → images/kardanone.png            (mark + wordmark, 400x83)
   Collapsed → images/kardanonewithouttext.png (mark only,        85x83)   */
html body .k-brand-img {
    width: 130px;           /* 27px tall x the artwork's 4.82 aspect ratio */
    height: 27px;
    flex-shrink: 0;
    border-radius: 0;
    background: url('/images/kardanone.png') left center / contain no-repeat;
    font-size: 0;
    color: transparent;
    box-shadow: none;
}
html[data-theme="dark"] body .k-brand-img {
    background: url('/images/kardanone.png') left center / contain no-repeat;
}

/* Collapsed rail — swap to the icon-only mark and re-centre it.
   The rail is 56px wide; the header's 20px/8px padding leaves only 28px, so
   the mark is sized to fit and the padding is evened up to keep it centred. */
html body .sidebar.collapsed .sidebar-header {
    padding-left: 0;
    padding-right: 0;
    /* .logo-section shrinks to its content, so centring *it* does nothing —
       the header is the element that has to centre the mark in the rail. */
    justify-content: center;
}
html body .sidebar.collapsed .k-brand-img {
    width: 26px;
    height: 26px;
    background-image: url('/images/kardanonewithouttext.png');
    background-position: center;
}

/* Wordmark + tagline now live in the artwork, so the text is hidden.
   Delete this rule to bring back the "Kardan One" / role-tagline text. */
html body .k-brand-text { display: none; }

/* Nav sections & items — mock spacing */
html body .nav-section-title {
    font-size: var(--text-2xs); font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.1em;
    padding: 0 22px 6px; margin-top: 20px;
}
html body .nav-section:first-child .nav-section-title { margin-top: 0; }

html body .nav-item {
    gap: 12px;
    color: var(--text-secondary);
    font-size: 13px; font-weight: 500;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: all 0.2s ease;
}
html body .nav-item:hover {
    color: var(--cst-navy);
    background: rgba(21, 72, 157, 0.05);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
html[data-theme="dark"] body .nav-item:hover {
    color: var(--accent-color);
    background: rgba(96, 165, 250, 0.10);
}

/* The mock's signature: 3px coral bar, squared-off left edge */
html body .nav-item.active {
    color: var(--cst-navy);
    background: rgba(21, 72, 157, 0.06);
    border: 1px solid transparent;
    border-left: 3px solid var(--cst-coral);
    border-radius: 0 8px 8px 0;
    margin-left: 0;
    padding-left: 13px;
}
html[data-theme="dark"] body .nav-item.active {
    color: var(--accent-color);
    background: rgba(96, 165, 250, 0.08);
    /* full shorthand + explicit left edge: main.css's dark `border:` shorthand
       would otherwise collapse the coral bar back to 1px */
    border: 1px solid transparent;
    border-left: 3px solid var(--cst-coral);
    border-radius: 0 8px 8px 0;
    margin-left: 0;
    padding-left: 13px;
}

html body .nav-icon svg { stroke: var(--sidebar-icon); stroke-width: 1.75; fill: none; }
html body .nav-item:hover .nav-icon svg { stroke: var(--sidebar-icon-hover); }
html body .nav-item.active .nav-icon svg { stroke: var(--sidebar-icon-active); }

/* Nav scroller.
   The VP menu has enough items to overflow; the Teacher menu does not — which
   is why only VP showed a chunky bright-blue bar. Two things combined:
     • main.css sets `scrollbar-color: rgba(0,128,255,.6)` on <html>. That
       property DOES inherit, so .nav-menu picked up the bright blue thumb.
     • `scrollbar-width` does NOT inherit, so .nav-menu stayed at `auto` —
       a full-width scrollbar with stepper arrows, ~15px of the 56px rail.
   And because scrollbar-color is set, Chrome uses the standard scrollbar and
   ignores the ::-webkit-scrollbar rules in section 1, so the 6px styling there
   never applied. Setting the standard properties directly is what works. */
html body .nav-menu {
    scrollbar-width: thin;
    scrollbar-color: rgba(21, 72, 157, 0.22) transparent;
}
html[data-theme="dark"] body .nav-menu { scrollbar-color: rgba(96, 165, 250, 0.22) transparent; }

/* Collapsed rail is only 56px wide — a scrollbar there steals ~15px and pushes
   the icons off-centre. Hide it; the rail still scrolls by wheel/trackpad. */
html body .sidebar.collapsed .nav-menu { scrollbar-width: none; }
html body .sidebar.collapsed .nav-menu::-webkit-scrollbar { width: 0; height: 0; }

/* Footer */
html body .sidebar-footer { border-top: 1px solid var(--border-color); }
html body .sidebar-footer:hover { background: rgba(21, 72, 157, 0.03); }
html[data-theme="dark"] body .sidebar-footer:hover { background: rgba(96, 165, 250, 0.05); }
html body .sidebar-footer-status { background: var(--ok); }
html body .sidebar-footer-text { font-size: 9px; font-weight: 600; letter-spacing: 0.03em; color: #0080FF; }
html body .sidebar-footer-text .ft-coral { color: var(--cst-coral); }
html body .sidebar-footer-text .ft-muted { color: var(--text-muted); font-weight: 400; }
html body .sidebar-footer-arrows svg { stroke: var(--cst-navy); }
html[data-theme="dark"] body .sidebar-footer-arrows svg { stroke: var(--accent-color); }


/* ──────────────────────────────────────────────────────────────────────────
   3. SHELL — TITLE BAR / TOP BAR
   ────────────────────────────────────────────────────────────────────────── */
html body .title-bar {
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
}
/* Mock's dotted texture */
html body .title-bar::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(circle at center, rgba(21, 72, 157, 0.03) 1px, transparent 1px);
    background-size: 8px 8px;
}
html[data-theme="dark"] body .title-bar::before {
    background-image: radial-gradient(circle at center, rgba(96, 165, 250, 0.04) 1px, transparent 1px);
}
html body .title-bar.scrolled {
    background: rgba(250, 250, 248, 0.97);
    border-bottom-color: rgba(21, 72, 157, 0.12);
    box-shadow: 0 2px 16px rgba(21, 72, 157, 0.04);
}
html[data-theme="dark"] body .title-bar.scrolled {
    background: rgba(17, 17, 20, 0.97);
    border-bottom-color: rgba(96, 165, 250, 0.12);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
}

html body .breadcrumb-link { font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); }
html body .breadcrumb-link:hover { color: var(--cst-navy); }
html[data-theme="dark"] body .breadcrumb-link:hover { color: var(--accent-color); }
html body .breadcrumb-current { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
html body .breadcrumb-separator { color: var(--text-muted); }

/* Circular header controls, navy at rest → coral-red on hover */
html body .header-control {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--border-color-darker);
    border-radius: 50%;
    transition: all 0.3s ease;
}
html[data-theme="dark"] body .header-control { background: var(--bg-elevated); }
html body .header-control:hover { border-color: var(--cst-navy); }
html[data-theme="dark"] body .header-control:hover { border-color: var(--accent-color); }
html body .header-control svg { stroke-width: 1.5; transition: all 0.3s ease; }
html body .notification-icon svg { color: var(--cst-navy); }
html[data-theme="dark"] body .notification-icon svg { color: var(--accent-color); }
html body .header-control:hover .notification-icon svg { color: var(--cst-red); animation: k1-bell-swing 900ms ease-in-out; }
html body .notif-dot { background: var(--cst-red); border: 1.5px solid var(--bg-primary); }
html body .theme-icon svg { color: var(--cst-navy); transition: transform 0.5s var(--ease-std), color 0.3s ease; }
html[data-theme="dark"] body .theme-icon svg { color: var(--accent-color); }
html body .header-control:hover .theme-icon svg { transform: rotate(180deg); color: var(--cst-red); }
html body .header-control:active .theme-icon svg { transform: rotate(360deg); }

@keyframes k1-bell-swing {
    0%, 100% { transform: rotate(0deg); }
    15% { transform: rotate(12deg); }
    35% { transform: rotate(-10deg); }
    55% { transform: rotate(8deg); }
    75% { transform: rotate(-5deg); }
}

/* Search — mock's 15px pill, not the 8px rounded rectangle */
html body .inline-search {
    background: var(--bg-elevated);
    border: 1px solid var(--border-color-darker);
    border-radius: 15px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
html body .inline-search:focus-within {
    border-color: var(--cst-navy);
    box-shadow: 0 0 0 3px rgba(21, 72, 157, 0.1);
}
html[data-theme="dark"] body .inline-search:focus-within {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.08);
}
html body .inline-search .search-icon { color: var(--cst-navy); transition: color 0.2s; }
html[data-theme="dark"] body .inline-search .search-icon { color: var(--accent-color); }
html body .inline-search:hover .search-icon { color: var(--cst-red); }
html body .inline-search input { font-size: var(--text-sm); color: var(--text-primary); font-family: inherit; }
html body .inline-search input::placeholder { color: var(--text-muted); }
html body .search-control { background: rgba(255, 255, 255, 0.6); border: 1px solid var(--border-color-darker); border-radius: 50%; }
html[data-theme="dark"] body .search-control { background: var(--bg-elevated); }
html body .search-control:hover { border-color: var(--cst-navy); }
html body .search-control svg { color: var(--cst-navy); stroke-width: 1.5; }
html body .search-control:hover svg { color: var(--cst-red); }

/* Admission global search — align to the same pill language */
html body .adm-search-box { border-radius: 15px; border-color: var(--border-color-darker); background: var(--bg-elevated); }
html body .adm-search-box:focus-within { border-color: var(--cst-navy); box-shadow: 0 0 0 3px rgba(21, 72, 157, 0.1); }
html body .adm-search-box .adm-search-icon { color: var(--cst-navy); }
html body .adm-sr { border-radius: var(--radius-lg); border-color: var(--border-color-darker); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18); }
html body .adm-sr-item:hover { background: rgba(21, 72, 157, 0.05); }
html[data-theme="dark"] body .adm-sr-item:hover { background: rgba(96, 165, 250, 0.08); }

/* Search results dropdown */
html body .search-results {
    background: var(--bg-elevated);
    border: 1px solid var(--border-color-darker);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
html body .search-result-item { border-radius: var(--radius-md); transition: all 0.2s ease; }
html body .search-result-item:hover,
html body .search-result-item.selected { background: rgba(21, 72, 157, 0.05); }
html[data-theme="dark"] body .search-result-item:hover,
html[data-theme="dark"] body .search-result-item.selected { background: rgba(96, 165, 250, 0.08); }
html body .search-result-icon svg { color: var(--cst-navy); transition: color 0.2s; }
html[data-theme="dark"] body .search-result-icon svg { color: var(--accent-color); }
html body .search-result-item:hover .search-result-icon svg { color: var(--cst-red); }
html body .search-result-item:hover .search-result-title { color: var(--cst-navy); }
html[data-theme="dark"] body .search-result-item:hover .search-result-title { color: var(--accent-color); }

/* Avatar — mock's plain circle with navy initials, not the blue→red gradient */
html body .user-avatar {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--border-color-darker);
    border-radius: 50%;
    color: var(--cst-navy);
    font-size: 12px; font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: none;
}
html[data-theme="dark"] body .user-avatar { background: var(--bg-elevated); color: var(--accent-color); }
html body .user-avatar:hover { border-color: var(--cst-navy); color: var(--cst-red); box-shadow: none; transform: none; }
html[data-theme="dark"] body .user-avatar:hover { border-color: var(--accent-color); color: var(--cst-red); }
/* The mock's top bar ends at the avatar: no user name, no hamburger.
   PgDashboard.razor re-declares `.header-control { display:flex }` in its own
   <style>, which loads after main.css and was resurrecting the hidden
   hamburger on desktop — hence forcing it here. Both come back under 900px,
   where the mobile drawer nav actually needs them. */
html body .user-profile-name { display: none; }
html body .mobile-menu-btn { display: none; }
@media (max-width: 900px) {
    html body .mobile-menu-btn { display: flex; }
}

/* Avatar dropdown — glassmorphism per the mock */
html body .avatar-dropdown {
    background: rgba(250, 250, 248, 0.92);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border-color-darker);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
html[data-theme="dark"] body .avatar-dropdown {
    background: rgba(30, 32, 38, 0.92);
    border-color: rgba(96, 165, 250, 0.18);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
html body .avatar-dropdown-item { font-size: var(--text-xs); font-weight: 500; color: var(--text-secondary); }
html body .avatar-dropdown-item:hover { background: var(--bg-hover); color: var(--text-primary); }
html body .avatar-dropdown-item.danger { color: var(--cst-red); }
html body .avatar-dropdown-item.danger:hover { background: rgba(225, 29, 72, 0.06); }
html body .avatar-dropdown-sep { background: var(--border-color); }


/* ──────────────────────────────────────────────────────────────────────────
   4. SHELL — WELCOME BANNER
   The page's own rule uses !important, so these must too.
   ────────────────────────────────────────────────────────────────────────── */
html body .welcome-banner {
    background: linear-gradient(135deg, var(--cst-navy) 0%, var(--cst-blue) 50%, #E11D48 100%) !important;
    border-radius: var(--radius-lg);
    transition: background 1s ease-in-out;
}
html[data-theme="dark"] body .welcome-banner {
    background: linear-gradient(135deg, #001B45 0%, #123A80 50%, #9F1239 100%) !important;
}
html body .banner-canvas,
html body .banner-vignette { border-radius: var(--radius-lg); }
html body .banner-vignette {
    background: radial-gradient(circle at center, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.25) 100%);
    mix-blend-mode: overlay;
}
html body .welcome-greeting {
    font-family: var(--font-body);
    font-size: var(--text-xl); font-weight: 600; color: #fff; letter-spacing: -0.3px;
}
html body .welcome-quote {
    font-family: var(--font-serif);
    font-size: var(--text-sm); font-weight: 400; font-style: italic;
    color: rgba(255, 255, 255, 0.9); line-height: 1.5; letter-spacing: 0.3px;
}
/* "ACADEMIC YEAR / 2026 to 2027" block — hidden per request.
   The mock's banner carries only the greeting and the quote. The markup in
   PgWelcomeBanner.razor is untouched, so this is reversible by deleting the
   rule below. Kept the type rules commented out in case it is ever restored.
   html body .banner-meta .l { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.8px; color: rgba(255,255,255,0.7); }
   html body .banner-meta .y { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 700; color: #fff; letter-spacing: -0.3px; } */
html body .banner-meta { display: none; }
html body .banner-dots i { background: rgba(255, 255, 255, 0.4); transition: all 0.2s; }
html body .banner-dots i:hover { background: rgba(255, 255, 255, 0.6); }
html body .banner-dots i.on { background: rgba(255, 255, 255, 0.9); }
html body .banner-toggle-btn svg { color: #fff; transition: transform 0.3s; }


/* ──────────────────────────────────────────────────────────────────────────
   5. UNIVERSAL SURFACES — cards & panels
   Every card-like class found across Teacher + VP pages gets the mock's
   hairline navy edge and 10px radius. Paint only.
   ────────────────────────────────────────────────────────────────────────── */
html body .class-card,
html body .right-panel,
html body .ui-card,
html body .k-panel,
html body .panel-card,
html body .assessment-card,
html body .assign-card,
html body .cal-card,
html body .cal-print-card,
html body .contact-card,
html body .course-card,
html body .cur-card,
html body .cur-anchor-card,
html body .dash-card,
html body .enx-card,
html body .hubreq-card,
html body .lesson-card,
html body .message-card,
html body .module-panel,
html body .note-card,
html body .req-card,
html body .sa-panel,
html body .staff-card,
html body .staff-loadpanel,
html body .step-card,
html body .struct-card,
html body .tr-panel,
html body .tt-card,
html body .tv-panel,
html body .unit-card,
html body .unit-context-card,
html body .unit-summary-card,
html body .unit-objectives-panel,
html body .year-status,
html body .alloc-wrap,
html body .sb-grid-wrap,
html body .k-tablewrap,
html body .rm-tablewrap,
html body .lrp-table-wrapper,
html body .unit-table-wrapper,
html body .rm-register,
html body .rmv-assign,
html body .en-grade {
    border: 0.7px solid var(--border-hairline);
    border-radius: var(--radius-lg);
    background: var(--bg-primary);
    box-shadow: none;
}
html[data-theme="dark"] body .class-card,
html[data-theme="dark"] body .right-panel,
html[data-theme="dark"] body .ui-card,
html[data-theme="dark"] body .k-panel,
html[data-theme="dark"] body .panel-card,
html[data-theme="dark"] body .assessment-card,
html[data-theme="dark"] body .assign-card,
html[data-theme="dark"] body .cal-card,
html[data-theme="dark"] body .cal-print-card,
html[data-theme="dark"] body .contact-card,
html[data-theme="dark"] body .course-card,
html[data-theme="dark"] body .cur-card,
html[data-theme="dark"] body .cur-anchor-card,
html[data-theme="dark"] body .dash-card,
html[data-theme="dark"] body .enx-card,
html[data-theme="dark"] body .hubreq-card,
html[data-theme="dark"] body .lesson-card,
html[data-theme="dark"] body .message-card,
html[data-theme="dark"] body .module-panel,
html[data-theme="dark"] body .note-card,
html[data-theme="dark"] body .req-card,
html[data-theme="dark"] body .sa-panel,
html[data-theme="dark"] body .staff-card,
html[data-theme="dark"] body .staff-loadpanel,
html[data-theme="dark"] body .step-card,
html[data-theme="dark"] body .struct-card,
html[data-theme="dark"] body .tr-panel,
html[data-theme="dark"] body .tt-card,
html[data-theme="dark"] body .tv-panel,
html[data-theme="dark"] body .unit-card,
html[data-theme="dark"] body .unit-context-card,
html[data-theme="dark"] body .unit-summary-card,
html[data-theme="dark"] body .unit-objectives-panel,
html[data-theme="dark"] body .year-status,
html[data-theme="dark"] body .alloc-wrap,
html[data-theme="dark"] body .sb-grid-wrap,
html[data-theme="dark"] body .k-tablewrap,
html[data-theme="dark"] body .rm-tablewrap,
html[data-theme="dark"] body .lrp-table-wrapper,
html[data-theme="dark"] body .unit-table-wrapper,
html[data-theme="dark"] body .rm-register,
html[data-theme="dark"] body .rmv-assign,
html[data-theme="dark"] body .en-grade {
    border-color: var(--border-hairline);
    background: var(--bg-elevated);
}

/* Card headers — flat surface + the mock's dotted texture, no gradient band */
html body .card-header,
html body .ui-card-head,
html body .k-panel-head,
html body .cal-card-head,
html body .cur-card-head,
html body .dash-card-h,
html body .enx-card-top,
html body .lesson-card-header,
html body .message-card-header,
html body .note-card-header,
html body .pc-card-h,
html body .report-card-header,
html body .req-card-h,
html body .right-panel-header,
html body .tr-panel-head,
html body .tt-card-head,
html body .unit-card-header,
html body .assessment-card-header,
html body .rm-floorcard-head {
    background: var(--card-header-bg);
    border-bottom: 1px solid var(--border-color);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    position: relative;
}
html body .card-header::before,
html body .ui-card-head::before,
html body .k-panel-head::before,
html body .right-panel-header::before,
html body .tr-panel-head::before,
html body .dash-card-h::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background-image: radial-gradient(circle at center, rgba(21, 72, 157, 0.03) 1px, transparent 1px);
    background-size: 8px 8px;
}
html[data-theme="dark"] body .card-header::before,
html[data-theme="dark"] body .ui-card-head::before,
html[data-theme="dark"] body .k-panel-head::before,
html[data-theme="dark"] body .right-panel-header::before,
html[data-theme="dark"] body .tr-panel-head::before,
html[data-theme="dark"] body .dash-card-h::before {
    background-image: radial-gradient(circle at center, rgba(96, 165, 250, 0.04) 1px, transparent 1px);
}

/* Card titles — navy in light, primary text in dark (mock .course-title) */
html body .course-title,
html body .ui-card-title,
html body .cal-card-title,
html body .cur-card-title,
html body .enx-card-title,
html body .panel-card-title,
html body .report-card-title,
html body .right-panel-title,
html body .tr-panel-title,
html body .tt-card-title,
html body .unit-card-title,
html body .assessment-card-title,
html body .rm-reg-title,
html body .rm-floorcard-title,
html body .modal-info-card-title,
html body .panel-section-title {
    color: var(--accent-color);
    font-weight: 600;
}
html[data-theme="dark"] body .course-title,
html[data-theme="dark"] body .ui-card-title,
html[data-theme="dark"] body .cal-card-title,
html[data-theme="dark"] body .cur-card-title,
html[data-theme="dark"] body .enx-card-title,
html[data-theme="dark"] body .panel-card-title,
html[data-theme="dark"] body .report-card-title,
html[data-theme="dark"] body .right-panel-title,
html[data-theme="dark"] body .tr-panel-title,
html[data-theme="dark"] body .tt-card-title,
html[data-theme="dark"] body .unit-card-title,
html[data-theme="dark"] body .assessment-card-title,
html[data-theme="dark"] body .rm-reg-title,
html[data-theme="dark"] body .rm-floorcard-title,
html[data-theme="dark"] body .modal-info-card-title,
html[data-theme="dark"] body .panel-section-title { color: var(--text-primary); }

/* Card footers keep the card's bottom radius */
html body .ui-card-foot,
html body .struct-cardfoot,
html body .modal-footer,
html body .lrp-modal-footer,
html body .unit-modal-footer { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* Stat tiles — elevated surface + faint border, never a grey fill */
html body .ui-stat,
html body .dash-stat,
html body .dops-stat,
html body .pc-stat,
html body .rp-stat,
html body .ss-stat,
html body .cal-sum-stat,
html body .cal-bal-day,
html body .attendance-stat,
html body .att-summary-item,
html body .week-box,
html body .confirm-box,
html body .planning-nav-box,
html body .timeline-legend-box {
    background: var(--card-header-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}
html[data-theme="dark"] body .ui-stat,
html[data-theme="dark"] body .dash-stat,
html[data-theme="dark"] body .dops-stat,
html[data-theme="dark"] body .pc-stat,
html[data-theme="dark"] body .rp-stat,
html[data-theme="dark"] body .ss-stat,
html[data-theme="dark"] body .cal-sum-stat,
html[data-theme="dark"] body .cal-bal-day,
html[data-theme="dark"] body .attendance-stat,
html[data-theme="dark"] body .att-summary-item,
html[data-theme="dark"] body .week-box,
html[data-theme="dark"] body .confirm-box,
html[data-theme="dark"] body .planning-nav-box,
html[data-theme="dark"] body .timeline-legend-box {
    background: rgba(96, 165, 250, 0.06);
    border-color: rgba(96, 165, 250, 0.15);
}

/* Icon tiles — mock's .icon-box: 10px radius, navy icon → red on hover */
html body .icon-box,
html body .info-icon-box,
html body .quick-action-icon,
html body .drawer-action-icon,
html body .notification-box,
html body .notes-badge {
    background: var(--bg-primary);
    border: 1px solid var(--border-color-darker);
    border-radius: var(--radius-lg);
    transition: border-color 0.2s, box-shadow 0.2s;
}
html[data-theme="dark"] body .icon-box,
html[data-theme="dark"] body .info-icon-box,
html[data-theme="dark"] body .quick-action-icon,
html[data-theme="dark"] body .drawer-action-icon,
html[data-theme="dark"] body .notification-box,
html[data-theme="dark"] body .notes-badge {
    background: var(--bg-elevated);
    border-color: rgba(96, 165, 250, 0.10);
}
html body .icon-box:hover,
html body .notification-box:hover,
html body .notes-badge:hover,
html body .quick-action-card:hover .quick-action-icon,
html body .drawer-action:hover .drawer-action-icon { border-color: var(--cst-navy); }
html[data-theme="dark"] body .icon-box:hover,
html[data-theme="dark"] body .notification-box:hover,
html[data-theme="dark"] body .notes-badge:hover,
html[data-theme="dark"] body .quick-action-card:hover .quick-action-icon,
html[data-theme="dark"] body .drawer-action:hover .drawer-action-icon { border-color: var(--accent-color); }
html body .icon-box svg,
html body .notification-box svg,
html body .notes-badge svg,
html body .quick-action-card svg,
html body .drawer-action-icon svg { color: var(--accent-color); fill: none; stroke-width: 1.5; transition: color 0.2s; }
html body .icon-box:hover svg,
html body .notification-box:hover svg,
html body .notes-badge:hover svg,
html body .quick-action-card:hover svg,
html body .drawer-action:hover .drawer-action-icon svg { color: var(--cst-red); }


/* ──────────────────────────────────────────────────────────────────────────
   6. UNIVERSAL CONTROLS — buttons
   Mock language: 8px radius, elevated surface, navy label, 1px faint border,
   navy border + coral icon on hover. Primary = translucent navy fill.
   ────────────────────────────────────────────────────────────────────────── */
html body .action-btn,
html body .ui-btn,
html body .k-sbtn,
html body .form-btn,
html body .modal-btn,
html body .rm-btn,
html body .rp-btn,
html body .sb-btn,
html body .tr-btn,
html body .tt-btn,
html body .enx-btn,
html body .rep-btn,
html body .note-btn,
html body .subj-btn,
html body .cal-addbtn,
html body .cal-print-btn,
html body .cal-save-btn,
html body .cur-addbtn,
html body .cur-genbtn,
html body .tr-addbtn,
html body .tr-savebtn,
html body .acal-add-btn,
html body .acal-file-btn,
html body .acal-submit-btn,
html body .add-note-btn,
html body .add-material-btn,
html body .attachment-btn,
html body .edit-btn,
html body .step-action,
html body .setup-foot-btn,
html body .report-generate-btn,
html body .roster-sort-btn,
html body .lesson-control-btn,
html body .note-action-btn,
html body .note-type-btn,
html body .select-action-btn,
html body .students-count-btn,
html body .toggle-btn,
html body .unit-toggle-btn,
html body .year-launch-btn,
html body .sa-open-btn,
html body .ev-add-btn,
html body .pd-addblock-btn,
html body .demo-btn,
html body .demo-button {
    background: var(--bg-primary);
    color: var(--accent-color);
    border: 1px solid var(--border-color-darker);
    border-radius: 8px;
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    transition: all 0.2s var(--ease-std);
}
html[data-theme="dark"] body .action-btn,
html[data-theme="dark"] body .ui-btn,
html[data-theme="dark"] body .k-sbtn,
html[data-theme="dark"] body .form-btn,
html[data-theme="dark"] body .modal-btn,
html[data-theme="dark"] body .rm-btn,
html[data-theme="dark"] body .rp-btn,
html[data-theme="dark"] body .sb-btn,
html[data-theme="dark"] body .tr-btn,
html[data-theme="dark"] body .tt-btn,
html[data-theme="dark"] body .enx-btn,
html[data-theme="dark"] body .rep-btn,
html[data-theme="dark"] body .note-btn,
html[data-theme="dark"] body .subj-btn,
html[data-theme="dark"] body .edit-btn,
html[data-theme="dark"] body .step-action,
html[data-theme="dark"] body .setup-foot-btn,
html[data-theme="dark"] body .toggle-btn { background: var(--bg-elevated); }

html body .action-btn:hover,
html body .ui-btn:hover,
html body .k-sbtn:hover,
html body .form-btn:hover,
html body .modal-btn:hover,
html body .rm-btn:hover,
html body .rp-btn:hover,
html body .sb-btn:hover,
html body .tr-btn:hover,
html body .tt-btn:hover,
html body .enx-btn:hover,
html body .rep-btn:hover,
html body .note-btn:hover,
html body .subj-btn:hover,
html body .edit-btn:hover,
html body .step-action:hover,
html body .setup-foot-btn:hover,
html body .toggle-btn:hover {
    border-color: var(--cst-navy);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 38, 94, 0.08);
}
html[data-theme="dark"] body .action-btn:hover,
html[data-theme="dark"] body .ui-btn:hover,
html[data-theme="dark"] body .modal-btn:hover,
html[data-theme="dark"] body .tr-btn:hover {
    border-color: var(--accent-color);
    box-shadow: 0 4px 14px rgba(96, 165, 250, 0.1);
}
html body .action-btn:hover svg,
html body .ui-btn:hover svg,
html body .tr-btn:hover svg,
html body .rm-btn:hover svg { color: var(--cst-red); }

/* Primary — the mock's translucent navy fill (drawer-footer-btn.primary) */
html body .btn-primary,
html body .ui-btn.primary,
html body .modal-btn-primary,
html body .modal-btn-save,
html body .notes-btn-primary,
html body .drawer-footer-btn.primary,
html body .payslip-view-btn,
html body .tr-savebtn,
html body .acal-submit-btn,
html body .cal-save-btn {
    background: rgba(21, 72, 157, 0.7);
    color: #fff;
    border: 1px solid transparent;
    border-radius: 8px;
    box-shadow: none;
}
html body .btn-primary:hover,
html body .ui-btn.primary:hover,
html body .modal-btn-primary:hover,
html body .modal-btn-save:hover,
html body .notes-btn-primary:hover,
html body .drawer-footer-btn.primary:hover,
html body .payslip-view-btn:hover,
html body .tr-savebtn:hover,
html body .acal-submit-btn:hover,
html body .cal-save-btn:hover { background: rgba(21, 72, 157, 0.85); color: #fff; }
html[data-theme="dark"] body .btn-primary,
html[data-theme="dark"] body .ui-btn.primary,
html[data-theme="dark"] body .modal-btn-primary,
html[data-theme="dark"] body .modal-btn-save,
html[data-theme="dark"] body .drawer-footer-btn.primary,
html[data-theme="dark"] body .payslip-view-btn { background: rgba(96, 165, 250, 0.7); }
html[data-theme="dark"] body .btn-primary:hover,
html[data-theme="dark"] body .ui-btn.primary:hover,
html[data-theme="dark"] body .modal-btn-primary:hover,
html[data-theme="dark"] body .drawer-footer-btn.primary:hover { background: rgba(96, 165, 250, 0.85); }

/* Secondary / ghost / cancel */
html body .btn-secondary,
html body .ui-btn.ghost,
html body .modal-btn-cancel,
html body .modal-btn-secondary,
html body .rm-btn-ghost,
html body .drawer-footer-btn.secondary {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color-darker);
    border-radius: 8px;
}
html body .btn-secondary:hover,
html body .ui-btn.ghost:hover,
html body .modal-btn-cancel:hover,
html body .modal-btn-secondary:hover,
html body .rm-btn-ghost:hover,
html body .drawer-footer-btn.secondary:hover { border-color: var(--cst-navy); color: var(--cst-navy); }
html[data-theme="dark"] body .btn-secondary:hover,
html[data-theme="dark"] body .modal-btn-cancel:hover,
html[data-theme="dark"] body .drawer-footer-btn.secondary:hover { border-color: var(--accent-color); color: var(--accent-color); }

/* Success / danger */
html body .modal-btn-success,
html body .drawer-footer-btn.success { background: var(--ok); border-color: var(--ok); color: #fff; }
html body .modal-btn-success:hover,
html body .drawer-footer-btn.success:hover { background: var(--ok-strong); }
html body .tr-btn-danger { background: transparent; color: var(--cst-red); border: 1px solid rgba(225, 29, 72, 0.3); border-radius: 8px; }
html body .tr-btn-danger:hover { background: rgba(225, 29, 72, 0.06); border-color: var(--cst-red); }

/* Circular icon buttons — mock's .nav-btn.
   .tab-nav-btn / .day-nav-btn are excluded: those are full-height flat
   dividers inside a segmented strip, and they carry BOTH classes. Without
   the :not() this layer's (0,1,2) selector beat their own (0,1,0) rules and
   stretched them into bordered ellipses. */
html body .nav-btn:not(.tab-nav-btn):not(.day-nav-btn),
html body .calendar-nav-btn,
html body .pd-iconbtn,
html body .tr-iconbtn,
html body .tv-iconbtn,
html body .rm-ibtn,
html body .ps-year-btn {
    background: var(--bg-primary);
    border: 1px solid var(--border-color-darker);
    border-radius: 50%;
    transition: border-color 0.2s;
}
html[data-theme="dark"] body .nav-btn:not(.tab-nav-btn):not(.day-nav-btn),
html[data-theme="dark"] body .calendar-nav-btn,
html[data-theme="dark"] body .pd-iconbtn,
html[data-theme="dark"] body .tr-iconbtn,
html[data-theme="dark"] body .tv-iconbtn,
html[data-theme="dark"] body .rm-ibtn { background: var(--bg-elevated); }
html body .nav-btn:not(.tab-nav-btn):not(.day-nav-btn):hover,
html body .calendar-nav-btn:hover,
html body .pd-iconbtn:hover,
html body .tr-iconbtn:hover,
html body .tv-iconbtn:hover,
html body .rm-ibtn:hover { border-color: var(--cst-navy); }
html[data-theme="dark"] body .nav-btn:not(.tab-nav-btn):not(.day-nav-btn):hover,
html[data-theme="dark"] body .calendar-nav-btn:hover,
html[data-theme="dark"] body .rm-ibtn:hover { border-color: var(--accent-color); }
html body .nav-btn:not(.tab-nav-btn):not(.day-nav-btn) svg { color: var(--accent-color); }
html body .nav-btn:not(.tab-nav-btn):not(.day-nav-btn):hover:not(:disabled) svg { color: var(--cst-red); }
html body .nav-btn:not(.tab-nav-btn):not(.day-nav-btn):disabled { opacity: 0.3; cursor: not-allowed; }

/* Close buttons — mock's .drawer-close-btn */
html body .drawer-close-btn,
html body .modal-close,
html body .modal-close-btn,
html body .lrp-modal-close,
html body .unit-modal-close,
html body .rm-drawer-close,
html body .tr-drawer-close,
html body .enx-modal-x,
html body .statement-close,
html body .payslip-modal-close,
html body .hr-request-close {
    background: var(--bg-primary);
    border: 1px solid var(--border-color-darker);
    border-radius: 8px;
    transition: all 0.2s ease;
}
html[data-theme="dark"] body .drawer-close-btn,
html[data-theme="dark"] body .modal-close,
html[data-theme="dark"] body .modal-close-btn,
html[data-theme="dark"] body .rm-drawer-close,
html[data-theme="dark"] body .tr-drawer-close { background: var(--bg-elevated); }
html body .drawer-close-btn:hover,
html body .modal-close:hover,
html body .modal-close-btn:hover,
html body .rm-drawer-close:hover,
html body .tr-drawer-close:hover,
html body .statement-close:hover { border-color: var(--cst-navy); }
html body .drawer-close-btn svg,
html body .modal-close svg,
html body .modal-close-btn svg,
html body .statement-close svg { color: var(--cst-navy); transition: color 0.2s; }
html[data-theme="dark"] body .drawer-close-btn svg,
html[data-theme="dark"] body .modal-close svg { color: var(--accent-color); }
html body .drawer-close-btn:hover svg,
html body .modal-close:hover svg,
html body .modal-close-btn:hover svg { color: var(--cst-red); }

/* FAB stack */
html body .fab-main-btn {
    background: var(--cst-blue); color: #fff; border-radius: var(--radius-lg);
    border: 1px solid rgba(21, 72, 157, 0.4);
    box-shadow: 0 4px 20px rgba(21, 72, 157, 0.25);
    transition: all 0.35s var(--ease-std);
}
html body .fab-main-btn:hover { box-shadow: 0 6px 24px rgba(21, 72, 157, 0.35); color: var(--cst-red); }
html body .fab-sub-action-btn {
    background: var(--bg-elevated); color: var(--cst-navy);
    border: 1px solid rgba(96, 165, 250, 0.15); border-radius: 12px;
    box-shadow: 0 2px 10px rgba(21, 72, 157, 0.10);
}
html body .fab-sub-action-btn:hover { border-color: var(--cst-navy); color: var(--cst-red); box-shadow: 0 4px 16px rgba(96, 165, 250, 0.15); }
html body .fab-sub-action-label {
    background: var(--bg-elevated); color: var(--text-primary);
    border: 1px solid rgba(96, 165, 250, 0.12); border-radius: 8px;
    box-shadow: 0 2px 12px rgba(21, 72, 157, 0.10);
}


/* ──────────────────────────────────────────────────────────────────────────
   7. UNIVERSAL FORM CONTROLS
   ────────────────────────────────────────────────────────────────────────── */
html body .form-input,
html body .form-select,
html body .form-textarea,
html body .modal-input,
html body .ui-input,
html body .ui-select,
html body .search-input,
html body .roster-search-input,
html body .acal-input,
html body .cur-input,
html body .cur-input-sm,
html body .cur-textarea,
html body .note-textarea,
html body .message-textarea,
html body .lesson-name-input,
html body .custom-subject-input,
html body .ro-req-input,
html body .struct-tinput,
html body .sb-select,
html body .report-select,
html body .datefield-input,
html body .hr-field-input,
html body .payslip-select,
html body .info-card-edit,
html body .student-select-search {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-primary);
    background-color: var(--bg-elevated);
    border: 1px solid var(--border-color-darker);
    border-radius: 8px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
html[data-theme="dark"] body .form-input,
html[data-theme="dark"] body .form-select,
html[data-theme="dark"] body .form-textarea,
html[data-theme="dark"] body .modal-input,
html[data-theme="dark"] body .ui-input,
html[data-theme="dark"] body .ui-select,
html[data-theme="dark"] body .search-input,
html[data-theme="dark"] body .cur-input,
html[data-theme="dark"] body .cur-textarea,
html[data-theme="dark"] body .note-textarea,
html[data-theme="dark"] body .sb-select,
html[data-theme="dark"] body .hr-field-input {
    background-color: var(--bg-elevated);
    border-color: rgba(96, 165, 250, 0.15);
}

html body .form-input:focus,
html body .form-select:focus,
html body .form-textarea:focus,
html body .modal-input:focus,
html body .ui-input:focus,
html body .ui-select:focus,
html body .search-input:focus,
html body .roster-search-input:focus,
html body .acal-input:focus,
html body .cur-input:focus,
html body .cur-textarea:focus,
html body .note-textarea:focus,
html body .message-textarea:focus,
html body .sb-select:focus,
html body .report-select:focus,
html body .hr-field-input:focus,
html body .payslip-select:focus {
    border-color: var(--cst-navy);
    box-shadow: 0 0 0 3px rgba(21, 72, 157, 0.1);
}
html[data-theme="dark"] body .form-input:focus,
html[data-theme="dark"] body .ui-input:focus,
html[data-theme="dark"] body .ui-select:focus,
html[data-theme="dark"] body .hr-field-input:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.08);
}

html body .form-input::placeholder,
html body .form-textarea::placeholder,
html body .modal-input::placeholder,
html body .ui-input::placeholder,
html body .search-input::placeholder,
html body .cur-input::placeholder,
html body .note-textarea::placeholder { color: var(--text-muted); }

/* Field labels — mock's uppercase micro-label */
html body .form-label,
html body .modal-label,
html body .ui-field > label,
html body .hr-field-label,
html body .cur-fieldlabel,
html body .drawer-section-title,
html body .panel-section-title,
html body .form-section-title {
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Selects — the mock's inline SVG chevron, no native arrow */
html body select.form-select,
html body select.ui-select,
html body select.sb-select,
html body select.report-select,
html body select.hr-field-input,
html body select.payslip-select,
html body select.modal-input,
html body select.cur-input,
html body select.rep-type,
html body select.cal-type,
html body select.activity-time-select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235C6370' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
    cursor: pointer;
}
html[data-theme="dark"] body select.form-select,
html[data-theme="dark"] body select.ui-select,
html[data-theme="dark"] body select.sb-select,
html[data-theme="dark"] body select.hr-field-input,
html[data-theme="dark"] body select.modal-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* Checkboxes & radios — navy accent, mock radii */
html body input[type="checkbox"],
html body input[type="radio"] {
    accent-color: var(--cst-navy);
    width: 15px; height: 15px;
    cursor: pointer;
}
html[data-theme="dark"] body input[type="checkbox"],
html[data-theme="dark"] body input[type="radio"] { accent-color: var(--accent-color); }

html body .outcome-checkbox,
html body .report-checkbox,
html body .share-checkbox,
html body .tr-checkline,
html body .pd-divtab-check,
html body .schedule-radio,
html body .multi-select-option,
html body .student-select-option {
    border-radius: var(--radius-sm);
    transition: background 0.15s ease;
}
html body .outcome-checkbox:hover,
html body .report-checkbox:hover,
html body .share-checkbox:hover,
html body .multi-select-option:hover,
html body .student-select-option:hover { background: rgba(21, 72, 157, 0.05); }
html[data-theme="dark"] body .outcome-checkbox:hover,
html[data-theme="dark"] body .multi-select-option:hover,
html[data-theme="dark"] body .student-select-option:hover { background: rgba(96, 165, 250, 0.08); }

/* Multi-select / dropdown triggers & panels */
html body .multi-select-trigger,
html body .student-select-trigger,
html body .datefield {
    background: var(--bg-elevated);
    border: 1px solid var(--border-color-darker);
    border-radius: 8px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
html body .multi-select-trigger:hover,
html body .student-select-trigger:hover,
html body .datefield:hover { border-color: var(--cst-navy); }
html body .multi-select-dropdown,
html body .student-select-dropdown,
html body .sort-dropdown-overlay,
html body .dropdown {
    background: var(--bg-elevated);
    border: 1px solid var(--border-color-darker);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}

/* Upload dropzones — mock's dashed border, green when filled */
html body .leave-req-upload,
html body .attachment-input-wrapper,
html body .leave-request-btn {
    border: 1px dashed var(--border-color-darker);
    border-radius: 8px;
    background: transparent;
    transition: border-color 0.2s, background 0.2s;
}
html body .leave-req-upload:hover,
html body .attachment-input-wrapper:hover,
html body .leave-request-btn:hover { border-color: var(--cst-navy); background: var(--bg-hover); }

/* Selected tags / chips */
html body .selected-tag,
html body .selected-student-tag,
html body .selected-items > span {
    background: rgba(21, 72, 157, 0.08);
    color: var(--cst-navy);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-full);
    font-size: var(--text-2xs);
    font-weight: 500;
}
html[data-theme="dark"] body .selected-tag,
html[data-theme="dark"] body .selected-student-tag {
    background: rgba(96, 165, 250, 0.12);
    color: var(--accent-color);
    border-color: rgba(96, 165, 250, 0.2);
}


/* ──────────────────────────────────────────────────────────────────────────
   8. UNIVERSAL DRAWERS, MODALS & OVERLAYS
   ────────────────────────────────────────────────────────────────────────── */

/* Scrims — mock's blurred 20% black */
html body .drawer-overlay,
html body .modal-overlay,
html body .lrp-modal-overlay,
html body .unit-modal-overlay,
html body .right-drawer-overlay,
html body .student-drawer-overlay,
html body .bottom-drawer-overlay,
html body .rm-drawer-scrim,
html body .tr-drawer-scrim,
html body .tr-modal-scrim,
html body .subj-overlay,
html body .ro-req-overlay,
html body .hr-request-overlay,
html body .leave-req-overlay {
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: opacity 0.4s var(--ease-drawer), visibility 0.4s var(--ease-drawer);
}
html[data-theme="dark"] body .drawer-overlay,
html[data-theme="dark"] body .modal-overlay,
html[data-theme="dark"] body .lrp-modal-overlay,
html[data-theme="dark"] body .unit-modal-overlay,
html[data-theme="dark"] body .right-drawer-overlay,
html[data-theme="dark"] body .bottom-drawer-overlay,
html[data-theme="dark"] body .rm-drawer-scrim,
html[data-theme="dark"] body .tr-drawer-scrim { background: rgba(0, 0, 0, 0.35); }

/* Drawer panels — frosted glass + hairline edge, mock .profile-drawer */
html body .profile-drawer,
html body .custom-drawer,
html body .right-drawer,
html body .student-drawer,
html body .notes-drawer,
html body .attendance-drawer,
html body .communication-drawer,
html body .sr-drawer,
html body .rm-drawer,
html body .tr-drawer,
html body .drawer {
    background: rgba(250, 250, 248, 0.82);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-left: 0.7px solid var(--border-hairline);
    box-shadow: -12px 0 48px rgba(0, 0, 0, 0.06), -4px 0 16px rgba(0, 0, 0, 0.04);
    transition: transform 0.45s var(--ease-drawer);
}
html[data-theme="dark"] body .profile-drawer,
html[data-theme="dark"] body .custom-drawer,
html[data-theme="dark"] body .right-drawer,
html[data-theme="dark"] body .student-drawer,
html[data-theme="dark"] body .notes-drawer,
html[data-theme="dark"] body .attendance-drawer,
html[data-theme="dark"] body .communication-drawer,
html[data-theme="dark"] body .rm-drawer,
html[data-theme="dark"] body .tr-drawer,
html[data-theme="dark"] body .drawer {
    background: rgba(30, 32, 38, 0.82);
    border-left-color: var(--border-hairline);
    box-shadow: -12px 0 48px rgba(0, 0, 0, 0.25), -4px 0 16px rgba(0, 0, 0, 0.15);
}

/* Bottom sheet keeps a top edge instead of a left edge */
html body .bottom-drawer {
    background: rgba(250, 250, 248, 0.9);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-top: 0.7px solid var(--border-hairline);
    border-left: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.08);
}
html[data-theme="dark"] body .bottom-drawer { background: rgba(30, 32, 38, 0.9); }
html body .bottom-drawer-handle { background: var(--border-color-darker); border-radius: var(--radius-full); }

/* Drawer chrome */
html body .drawer-header,
html body .right-drawer-header,
html body .rm-drawer-head,
html body .tr-drawer-head,
html body .bottom-drawer-header {
    background: var(--card-header-bg);
    border-bottom: 1px solid var(--border-color);
    position: relative;
}
html body .drawer-header::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(circle at center, rgba(21, 72, 157, 0.03) 1px, transparent 1px);
    background-size: 8px 8px;
}
html[data-theme="dark"] body .drawer-header::before {
    background-image: radial-gradient(circle at center, rgba(96, 165, 250, 0.04) 1px, transparent 1px);
}
html body .drawer-title,
html body .right-drawer-title,
html body .rm-drawer-htext,
html body .bottom-drawer-title { font-size: 14px; font-weight: 700; color: var(--text-primary); }
html body .drawer-subtitle,
html body .rm-drawer-sub { font-size: var(--text-xs); color: var(--text-secondary); font-weight: 400; }
html body .drawer-content,
html body .right-drawer-content,
html body .rm-drawer-body,
html body .tr-drawer-body,
html body .bottom-drawer-content { background: var(--bg-primary); }
html[data-theme="dark"] body .drawer-content,
html[data-theme="dark"] body .right-drawer-content,
html[data-theme="dark"] body .rm-drawer-body,
html[data-theme="dark"] body .tr-drawer-body { background: var(--bg-elevated); }

/* Drawer tabs — mock's segmented bar */
html body .drawer-tabs,
html body .drawer-nav {
    background: var(--bg-primary);
    border: 0.7px solid var(--border-hairline);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
html[data-theme="dark"] body .drawer-tabs,
html[data-theme="dark"] body .drawer-nav { background: var(--bg-elevated); }
html body .drawer-tab,
html body .drawer-nav-item {
    background: transparent;
    border: none;
    border-right: 0.7px solid var(--border-color-darker);
    border-radius: 0;
    font-family: inherit;
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}
html body .drawer-tab:last-child,
html body .drawer-nav-item:last-child { border-right: none; }
html body .drawer-tab:hover,
html body .drawer-nav-item:hover { background: rgba(21, 72, 157, 0.05); color: var(--cst-navy); }
html body .drawer-tab.active,
html body .drawer-nav-item.active { background: rgba(21, 72, 157, 0.08); color: var(--cst-navy); font-weight: 600; }
html[data-theme="dark"] body .drawer-tab:hover,
html[data-theme="dark"] body .drawer-nav-item:hover { background: rgba(96, 165, 250, 0.08); color: var(--accent-color); }
html[data-theme="dark"] body .drawer-tab.active,
html[data-theme="dark"] body .drawer-nav-item.active { background: rgba(96, 165, 250, 0.1); color: var(--accent-color); }

html body .drawer-footer-actions,
html body .tr-drawer-foot { background: var(--bg-primary); border-top: 1px solid var(--border-color); }
html[data-theme="dark"] body .drawer-footer-actions,
html[data-theme="dark"] body .tr-drawer-foot { background: var(--bg-elevated); }
html body .drawer-divider, html body .panel-divider { background: var(--border-color); }

/* Modal shells — frosted glass, 12px radius, hairline edge */
html body .modal-dialog,
html body .message-modal-content,
html body .lrp-modal,
html body .unit-modal,
html body .enx-modal,
html body .rep-modal,
html body .subj-modal,
html body .tr-modal,
html body .ro-req-modal,
html body .hr-request-modal,
html body .leave-req-modal,
html body .statement-modal,
html body .payslip-modal {
    background: rgba(250, 250, 248, 0.88);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 0.7px solid var(--border-hairline);
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
}
html[data-theme="dark"] body .modal-dialog,
html[data-theme="dark"] body .message-modal-content,
html[data-theme="dark"] body .lrp-modal,
html[data-theme="dark"] body .unit-modal,
html[data-theme="dark"] body .enx-modal,
html[data-theme="dark"] body .tr-modal,
html[data-theme="dark"] body .hr-request-modal,
html[data-theme="dark"] body .leave-req-modal,
html[data-theme="dark"] body .statement-modal,
html[data-theme="dark"] body .payslip-modal {
    background: rgba(30, 32, 38, 0.88);
    border-color: var(--border-hairline);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
}

html body .modal-header,
html body .lrp-modal-header,
html body .unit-modal-header,
html body .enx-modal-head,
html body .tr-modal-head,
html body .statement-header,
html body .payslip-modal-header,
html body .hr-request-header,
html body .leave-req-header {
    background: var(--card-header-bg);
    border-bottom: 1px solid var(--border-color);
    border-radius: 12px 12px 0 0;
}
html body .modal-title,
html body .lrp-modal-title,
html body .unit-modal-title,
html body .enx-modal-title,
html body .statement-title,
html body .payslip-modal-title { font-size: 14px; font-weight: 700; color: var(--text-primary); }
html body .modal-footer,
html body .lrp-modal-footer,
html body .unit-modal-footer,
html body .enx-modal-foot,
html body .tr-modal-foot,
html body .statement-footer,
html body .payslip-modal-footer { border-top: 1px solid var(--border-color); }


/* ──────────────────────────────────────────────────────────────────────────
   9. UNIVERSAL TABLES
   Mock language: transparent header band, uppercase muted micro-label,
   hairline row separators, faint navy row hover.
   ────────────────────────────────────────────────────────────────────────── */
html body .ui-table th,
html body .k-table th,
html body .da-table th,
html body .ka-table th,
html body .pd-table th,
html body .rm-table th,
html body .tr-table th,
html body .enx-table th,
html body .struct-table th,
html body .year-at-glance-table th,
html body .lrp-table-header,
html body .unit-table-header,
html body .att-log-header {
    background: transparent;
    color: var(--text-muted);
    font-size: var(--text-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--border-color-darker);
}
html body .ui-table td,
html body .k-table td,
html body .da-table td,
html body .ka-table td,
html body .pd-table td,
html body .rm-table td,
html body .tr-table td,
html body .enx-table td,
html body .struct-table td,
html body .year-at-glance-table td {
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: var(--text-xs);
}
html body .ui-table tbody tr:hover,
html body .k-table tbody tr:hover,
html body .da-table tbody tr:hover,
html body .ka-table tbody tr:hover,
html body .rm-table tbody tr:hover,
html body .tr-table tbody tr:hover,
html body .enx-table tbody tr:hover,
html body .struct-table tbody tr:hover { background: rgba(21, 72, 157, 0.05); }
html[data-theme="dark"] body .ui-table tbody tr:hover,
html[data-theme="dark"] body .rm-table tbody tr:hover,
html[data-theme="dark"] body .tr-table tbody tr:hover,
html[data-theme="dark"] body .struct-table tbody tr:hover { background: rgba(96, 165, 250, 0.08); }

/* List rows — mock's .list-item / .rp-card */
html body .list-item,
html body .rp-card,
html body .info-row,
html body .modal-info-row,
html body .panel-grid-item,
html body .panel-stat-row,
html body .student-row,
html body .lesson-row,
html body .session-row,
html body .cov-row,
html body .assign-row,
html body .staff-loadrow,
html body .struct-row,
html body .hubreq-row,
html body .amend-log-row,
html body .sa-trow,
html body .acal-trow {
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s ease;
}
html body .list-item:hover,
html body .rp-card:hover,
html body .student-row:hover,
html body .lesson-row:hover,
html body .cov-row:hover,
html body .assign-row:hover,
html body .staff-loadrow:hover,
html body .struct-row:hover { background: rgba(21, 72, 157, 0.06); }
html[data-theme="dark"] body .list-item:hover,
html[data-theme="dark"] body .rp-card:hover,
html[data-theme="dark"] body .student-row:hover,
html[data-theme="dark"] body .struct-row:hover { background: rgba(96, 165, 250, 0.08); }


/* ──────────────────────────────────────────────────────────────────────────
   10. UNIVERSAL BADGES, CHIPS, PILLS & TOASTS
   ────────────────────────────────────────────────────────────────────────── */
html body .badge,
html body .drawer-badge,
html body .panel-accordion-badge,
html body .ui-badge,
html body .adm-op,
html body .ps-tag {
    border-radius: var(--radius-sm);
    font-size: var(--text-2xs);
    font-weight: 500;
    letter-spacing: 0.01em;
}
html body .badge.primary { background: linear-gradient(135deg, rgba(21, 72, 157, 0.12) 0%, rgba(21, 72, 157, 0.06) 100%); color: var(--cst-navy); }
html body .badge.success { background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(16, 185, 129, 0.06) 100%); color: var(--ok); }
html body .badge.warning { background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(245, 158, 11, 0.06) 100%); color: var(--warn); }
html body .badge.danger  { background: linear-gradient(135deg, rgba(198, 12, 43, 0.12) 0%, rgba(198, 12, 43, 0.06) 100%); color: var(--cst-red); }
html[data-theme="dark"] body .badge.primary { background: linear-gradient(135deg, rgba(96, 165, 250, 0.2) 0%, rgba(96, 165, 250, 0.1) 100%); color: var(--accent-color); }
html[data-theme="dark"] body .badge.success { background: linear-gradient(135deg, rgba(52, 211, 153, 0.2) 0%, rgba(52, 211, 153, 0.1) 100%); color: var(--ok); }
html[data-theme="dark"] body .badge.warning { background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(251, 191, 36, 0.1) 100%); color: var(--warn); }
html[data-theme="dark"] body .badge.danger  { background: linear-gradient(135deg, rgba(248, 113, 113, 0.2) 0%, rgba(248, 113, 113, 0.1) 100%); color: var(--danger); }

/* Semantic value colours used across pages */
html body .green, html body .success, html body .credit,
html body .rp-row-value.success, html body .fin-row-value.green,
html body .att-summary-val.green, html body .stmt-amount.credit { color: var(--ok); }
html body .amber, html body .warning, html body .rp-row-value.warning,
html body .att-summary-val.amber { color: var(--warn); }
html body .red, html body .danger, html body .debit,
html body .fin-row-value.red, html body .att-summary-val.red,
html body .stmt-amount.debit { color: var(--danger); }

/* Toasts */
html body .toast {
    background: var(--bg-elevated);
    border: 1px solid var(--border-color-darker);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-primary);
    transition: all 0.3s var(--ease-drawer);
}
html body .toast.info svg { color: var(--cst-navy); }
html[data-theme="dark"] body .toast.info svg { color: var(--accent-color); }
html body .toast.success svg { color: var(--ok); }

/* Accordions — mock's .fin-accordion */
html body .fin-accordion,
html body .panel-accordion,
html body .panel-accordion-item {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
html body .fin-accordion-header:hover,
html body .panel-accordion-header:hover { background: var(--bg-hover); }
html body .fin-accordion-label,
html body .panel-accordion-label {
    font-size: var(--text-2xs); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted);
}
html body .fin-accordion-chevron,
html body .panel-accordion-chevron { color: var(--text-muted); transition: transform 0.2s; }

/* Progress bars */
html body .leave-drawer-bar,
html body .panel-progress-bar,
html body .rep-ev-barwrap { background: var(--bg-hover); border-radius: var(--radius-full); overflow: hidden; }
html body .leave-drawer-fill,
html body .panel-progress-fill { border-radius: var(--radius-full); transition: width 0.4s ease; }


/* ──────────────────────────────────────────────────────────────────────────
   11. TEACHER PAGE CLASS MAP
   Paint-only alignment for the classes unique to the Teacher portal.
   ────────────────────────────────────────────────────────────────────────── */
html body .panel-hero {
    background: var(--card-header-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}
html[data-theme="dark"] body .panel-hero { background: rgba(96, 165, 250, 0.06); border-color: rgba(96, 165, 250, 0.15); }
html body .panel-hero-label,
html body .panel-stat-label,
html body .panel-grid-label,
html body .drawer-info-label { font-size: var(--text-2xs); font-weight: 500; color: var(--text-muted); }
html body .panel-hero-value { color: var(--accent-color); font-weight: 700; }
html[data-theme="dark"] body .panel-hero-value { color: var(--text-primary); }
html body .panel-grid-value,
html body .drawer-info-value { font-size: var(--text-xs); font-weight: 600; color: var(--text-primary); }
/* NOTE: .info-card / .info-card-label / .info-card-value are deliberately NOT
   overridden here. main.css already carries the mock's versions, and
   PgDashboard.razor repaints .info-card as a dark glass panel for its hero —
   overriding it from this layer turned those three cards cream. */

html body .drawer-student-name { font-size: var(--text-base); font-weight: 600; color: var(--text-primary); }
html body .drawer-student-meta,
html body .drawer-note-date,
html body .list-item-meta { font-size: var(--text-2xs); color: var(--text-muted); }
html body .drawer-avatar {
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 2px solid var(--border-color-darker);
    color: var(--cst-navy);
    font-weight: 700;
}
html[data-theme="dark"] body .drawer-avatar { color: var(--accent-color); border-color: var(--accent-color); }
html body .drawer-note {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}
html[data-theme="dark"] body .drawer-note { background: var(--bg-elevated); border-color: rgba(96, 165, 250, 0.08); }

html body .schedule-period { border-radius: var(--radius-sm); border: 1px solid transparent; transition: background 0.15s ease; }
html body .schedule-period.current-period { background: rgba(21, 72, 157, 0.08); border-color: var(--border-accent); }
html[data-theme="dark"] body .schedule-period.current-period { background: rgba(96, 165, 250, 0.1); }
html body .schedule-period.break-period .schedule-subject { color: var(--text-muted); font-style: italic; }
html body .schedule-period.class-period .schedule-subject { color: var(--accent-color); font-weight: 600; }

html body .current-unit,
html body .leave-balance-item {
    background: var(--bg-primary);
    border: 1px solid var(--border-color-darker);
    border-radius: 8px;
}
html[data-theme="dark"] body .current-unit,
html[data-theme="dark"] body .leave-balance-item { background: var(--bg-elevated); }
html body .lesson-number-display {
    background: var(--bg-primary);
    border: 1px solid var(--border-color-darker);
    border-radius: var(--radius-sm);
    font-size: var(--text-2xs); font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.5px; text-transform: uppercase;
}
html[data-theme="dark"] body .lesson-number-display { background: var(--bg-elevated); }

html body .sessions-toggle,
html body .unit-accordion-toggle {
    background: var(--bg-primary);
    border: 1px solid var(--border-color-darker);
    border-radius: var(--radius-full);
    transition: border-color 0.2s;
}
html[data-theme="dark"] body .sessions-toggle,
html[data-theme="dark"] body .unit-accordion-toggle { background: var(--bg-elevated); }
html body .sessions-toggle:hover { border-color: var(--cst-navy); }
html body .sessions-toggle svg { color: var(--accent-color); transition: transform 0.3s, color 0.2s; }
html body .sessions-toggle:hover svg { color: var(--cst-red); }

html body .session-day,
html body .session-topic { color: var(--accent-color); font-weight: 600; font-size: var(--text-xs); }
html body .session-time { color: var(--text-secondary); font-weight: 500; font-size: var(--text-xs); }

html body .attendance-btn { border-radius: 8px; border: 1px solid var(--border-color-darker); font-weight: 600; transition: all 0.2s ease; }
html body .attendance-btn:hover { border-color: var(--cst-navy); }

html body .note-card-meta,
html body .message-card-meta,
html body .panel-card-meta,
html body .panel-card-subtitle { font-size: var(--text-2xs); color: var(--text-muted); }

html body .skeleton-card,
html body .skeleton-row,
html body .drawer-skeleton,
html body .nav-skeleton-title,
html body .nav-skeleton-item { background: var(--bg-hover); border-radius: var(--radius-sm); }

html body .panel-empty,
html body .drawer-empty,
html body .dropdown-empty,
html body .enx-modal-empty,
html body .panel-accordion-empty,
html body .weekend-message { color: var(--text-secondary); font-size: var(--text-sm); text-align: center; }
html body .panel-empty-icon svg,
html body .weekend-message svg { color: var(--accent-color); }


/* ──────────────────────────────────────────────────────────────────────────
   12. VICE PRINCIPAL PAGE CLASS MAP
   Replaces the flat/gradient VP treatment with the mock's language.
   Kept unscoped (not .vp-portal) so shared components look identical in
   every portal — the whole point of the request.
   ────────────────────────────────────────────────────────────────────────── */
html body .ui-card-head,
html body .rm-floorcard-head { background: var(--card-header-bg) !important; }
html[data-theme="dark"] body .ui-card-head,
html[data-theme="dark"] body .rm-floorcard-head { background: var(--card-header-bg) !important; }

html body .ui-card-sub,
html body .cal-card-sub,
html body .enx-modal-sub,
html body .rm-floorcard-sub,
html body .lrp-modal-subtitle,
html body .unit-modal-subtitle,
html body .statement-subtitle,
html body .payslip-modal-subtitle { font-size: var(--text-xs); color: var(--text-secondary); }

html body .alloc-toolbar,
html body .sb-toolbar,
html body .sb-rail,
html body .sb-validation,
html body .alloc-callout,
html body .amend-actions,
html body .amend-log,
html body .k-sched-bar,
html body .pd-block,
html body .sa-strip,
html body .dash-act {
    border: 0.7px solid var(--border-hairline);
    border-radius: var(--radius-lg);
    background: var(--bg-primary);
}
html[data-theme="dark"] body .alloc-toolbar,
html[data-theme="dark"] body .sb-toolbar,
html[data-theme="dark"] body .sb-rail,
html[data-theme="dark"] body .sb-validation,
html[data-theme="dark"] body .alloc-callout,
html[data-theme="dark"] body .amend-actions,
html[data-theme="dark"] body .amend-log,
html[data-theme="dark"] body .k-sched-bar,
html[data-theme="dark"] body .pd-block,
html[data-theme="dark"] body .sa-strip,
html[data-theme="dark"] body .dash-act { background: var(--bg-elevated); }

/* Setup-step buttons keep their mock chevron */
html body .step-action::before {
    content: ""; width: 13px; height: 13px; flex: 0 0 13px; margin-right: 5px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") no-repeat center / contain;
}

html body .k-tt-room.set {
    color: var(--text-muted); background: none; border: none;
    font-style: normal; font-weight: 400;
}
html body .pd-grip, html body .pd-drag { line-height: 1; }


/* ──────────────────────────────────────────────────────────────────────────
   13. RETIRED SHELL-DRIFT NEUTRALISERS
   main.css lines ~1148-1200 introduced a gradient "Kardan One shell theme"
   that the mock does not have. Section 2 & 3 above already override every
   visible property; these final resets catch the leftovers.
   ────────────────────────────────────────────────────────────────────────── */
html body .k-brand-img,
html body .k-brand-mark { text-shadow: none; }
html body .user-avatar { background-image: none; }
html[data-theme="dark"] body .user-avatar { background-image: none; }

/* ══════════════════════════════════════════════════════════════════════════
   PAGE SPACING STANDARD — 8 Oct 2026. ONE rule for every staff page.
   The gap between the sidebar / top bar and the page, and the width of the
   page, are set HERE and nowhere else. Pages must not set padding, margin or
   max-width on .content-area / .content-wrapper (many older pages did, which
   is why My Classes and My Students sat at different distances from the
   sidebar). These rules use !important so a stray page <style> cannot
   override them; print styles are untouched (screen only).
     • content-area: 18 px all round (14 px ≤ 768 px, 10 px ≤ 576 px)
     • content-wrapper: 1100 px wide, centred (full width ≤ 1100 px)
     • scrollbar-gutter: the scrollbar always keeps its space, so a long page
       and a short page are centred at exactly the same place.
     • Exception: .content-area.k-own-layout — only the Dashboard (full-screen
       masthead under a fixed top bar) — keeps its own spacing.
   ────────────────────────────────────────────────────────────────────────── */
@media screen {
    html { scrollbar-gutter: stable; }

    html body .content-area:not(.k-own-layout) {
        padding: var(--content-gap, 18px) !important;
    }
    html body .content-wrapper {
        max-width: var(--max-content-width, 1100px) !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    /* Communications pages (/admin/*) use .cst-admin instead of content-area */
    html body .main-wrapper .cst-admin {
        padding: var(--content-gap, 18px) !important;
        max-width: var(--max-content-width, 1100px);
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }
}
@media screen and (max-width: 768px) {
    html body .content-area:not(.k-own-layout), html body .main-wrapper .cst-admin { padding: var(--space-4, 14px) !important; }
}
@media screen and (max-width: 576px) {
    html body .content-area:not(.k-own-layout), html body .main-wrapper .cst-admin { padding: var(--space-3, 10px) !important; }
}