/* ==========================================================================
   StoneEdu — Smart School Management System
   Design System  ·  Powered by StoneCode Technology
   --------------------------------------------------------------------------
   Layered on top of Bootstrap 5.3. Bootstrap component styles are re-skinned
   through Bootstrap's own CSS custom properties (--bs-*) so that every
   existing view inherits the premium base without markup churn.

   Contents
     01. Tokens
     02. Base & typography
     03. App shell (sidebar / topbar / content)
     04. Sidebar navigation
     05. Topbar
     06. Page header & breadcrumbs
     07. Cards & surfaces
     08. Stats, quick actions, KPI
     09. Buttons
     10. Forms
     11. Tables
     12. Toolbar (search / filter)
     13. Badges & pills
     14. Avatars
     15. Alerts & toasts
     16. Empty / loading / error states
     17. Tabs, pagination, dropdowns, modals
     18. Profile & detail views
     19. Certificates & print
     20. Responsive
     21. Accessibility & motion
   ========================================================================== */


/* ==========================================================================
   01. TOKENS
   ========================================================================== */

:root {
    /* ---- Brand ------------------------------------------------------- */
    --se-primary: #3151d3;
    --se-primary-600: #2942b8;
    --se-primary-700: #22399c;
    --se-primary-100: #dfe5fb;
    --se-primary-50: #eff2fe;

    --se-accent: #0d9488; /* teal — growth / positive */
    --se-accent-600: #0b7c72;
    --se-accent-50: #eefbf8;

    /* ---- Stone (navigation surface) ---------------------------------- */
    --se-stone-900: #101626;
    --se-stone-800: #161e33;
    --se-stone-700: #1e2840;
    --se-stone-600: #2a3550;
    --se-stone-400: #8b95ad;
    --se-stone-300: #a9b2c6;

    /* ---- Ink (text) --------------------------------------------------- */
    --se-ink-900: #101828;
    --se-ink-800: #1d2939;
    --se-ink-700: #344054;
    --se-ink-600: #475467;
    --se-ink-500: #667085;
    --se-ink-400: #98a2b3;

    /* ---- Surfaces ----------------------------------------------------- */
    --se-canvas: #f5f6fa;
    --se-surface: #ffffff;
    --se-surface-2: #fafbfd;
    --se-surface-3: #f2f4f8;

    /* ---- Lines -------------------------------------------------------- */
    --se-border: #e4e7ee;
    --se-border-strong: #d3d8e3;

    /* ---- Semantic ----------------------------------------------------- */
    --se-success: #067647;
    --se-success-bg: #e7f6ee;
    --se-success-br: #a9dcc2;

    --se-warning: #b54708;
    --se-warning-bg: #fdf3e7;
    --se-warning-br: #f0c9a0;

    --se-danger: #b42318;
    --se-danger-bg: #fdeceb;
    --se-danger-br: #f3b9b4;

    --se-info: #175cd3;
    --se-info-bg: #eaf1fd;
    --se-info-br: #b3ccf6;

    --se-neutral: #475467;
    --se-neutral-bg: #f2f4f8;
    --se-neutral-br: #dfe3ec;

    /* ---- Radius ------------------------------------------------------- */
    --se-r-sm: 6px;
    --se-r: 8px;
    --se-r-lg: 12px;
    --se-r-pill: 999px;

    /* ---- Elevation (two levels only) ---------------------------------- */
    --se-shadow-1: 0 1px 2px rgba(16, 24, 40, .05);
    --se-shadow-2: 0 6px 20px -4px rgba(16, 24, 40, .10), 0 2px 6px -2px rgba(16, 24, 40, .05);

    /* ---- Focus -------------------------------------------------------- */
    --se-ring: 0 0 0 3px rgba(49, 81, 211, .22);

    /* ---- Metrics ------------------------------------------------------ */
    --se-sidebar-w: 264px;
    --se-topbar-h: 60px;
    --se-tap: 44px; /* minimum touch target */
    --se-measure: 720px; /* comfortable width for a single-column form */

    /* ---- Type --------------------------------------------------------- */
    --se-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --se-font-num: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;

    /* ---- Bootstrap re-skin -------------------------------------------- */
    --bs-body-font-family: var(--se-font);
    --bs-body-color: var(--se-ink-700);
    --bs-body-bg: var(--se-canvas);
    --bs-border-color: var(--se-border);
    --bs-border-radius: var(--se-r);
    --bs-border-radius-sm: var(--se-r-sm);
    --bs-border-radius-lg: var(--se-r-lg);
    --bs-primary: var(--se-primary);
    --bs-link-color: var(--se-primary);
    --bs-link-hover-color: var(--se-primary-700);
    --bs-secondary-color: var(--se-ink-500);
}


/* ==========================================================================
   02. BASE & TYPOGRAPHY
   ========================================================================== */

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

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--se-font);
    font-size: .9375rem; /* 15px */
    line-height: 1.55;
    color: var(--se-ink-700);
    background: var(--se-canvas);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv02","cv03","cv04","cv11";

    /* A backstop against sideways scrolling on narrow screens. It has to be
       "clip" and not "hidden": "hidden" makes the body a scroll container, and a
       scroll container between a sticky element and the viewport stops it
       sticking — which would cost the topbar, and with it the hamburger, on
       every mobile screen the moment you scrolled down a long list. "clip"
       trims the same overflow without creating a scroll container. "hidden"
       stays first as the fallback for browsers that do not know "clip". */
    overflow-x: hidden;
    overflow-x: clip;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--se-font);
    color: var(--se-ink-900);
    font-weight: 650;
    letter-spacing: -.014em;
    line-height: 1.28;
    margin: 0 0 .5rem;
}

h1, .h1 { font-size: 1.625rem; }
h2, .h2 { font-size: 1.375rem; }
h3, .h3 { font-size: 1.1875rem; }
h4, .h4 { font-size: 1.0625rem; }
h5, .h5 { font-size: .9375rem; }
h6, .h6 { font-size: .875rem; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a {
    color: var(--se-primary);
    text-decoration: none;
    transition: color .15s ease;
}

a:hover { color: var(--se-primary-700); }

small, .small { font-size: .8125rem; }

hr {
    border: 0;
    border-top: 1px solid var(--se-border);
    opacity: 1;
    margin: 1.25rem 0;
}

code, kbd, pre, samp { font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace; }

.se-num {
    font-family: var(--se-font-num);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.se-muted { color: var(--se-ink-500); }
.se-dim { color: var(--se-ink-400); }
.se-strong { color: var(--se-ink-900); font-weight: 600; }

.se-eyebrow {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--se-ink-400);
}

/* A single-column form or a short confirmation reads badly at full desktop
   width — the eye has too far to travel from a label to its field. Seven pages
   had already reached for an inline max-width to fix that, in three different
   values (620px, 720px, 780px), which is three different answers to one
   question. This is the answer. */
.se-narrow { max-width: var(--se-measure); }

/* Consistent icon sizing — one library (Font Awesome 6), one rhythm. */
.se-app .fa,
.se-app .fas,
.se-app .far,
.se-app .fa-solid,
.se-app .fa-regular,
.se-app .fa-brands {
    font-size: 1em;
    line-height: 1;
    vertical-align: -.055em;
}


/* ==========================================================================
   03. APP SHELL
   ========================================================================== */

.se-app {
    min-height: 100vh;
    min-height: 100dvh;
}

.se-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--se-sidebar-w);
    background: var(--se-stone-900);
    color: var(--se-stone-300);
    display: flex;
    flex-direction: column;
    z-index: 1045;
    transition: transform .26s cubic-bezier(.4, 0, .2, 1);
}

.se-main {
    margin-left: var(--se-sidebar-w);
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    min-width: 0; /* prevents flex children from forcing overflow */
}

.se-content {
    flex: 1;
    padding: 1.5rem 1.75rem 2.5rem;
    max-width: 1600px;
    width: 100%;
    min-width: 0;
}

/* Backdrop for the mobile drawer */
.se-scrim {
    position: fixed;
    inset: 0;
    background: rgba(16, 22, 38, .5);
    backdrop-filter: blur(2px);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: opacity .26s ease, visibility .26s ease;
}

body.se-drawer-open .se-scrim {
    opacity: 1;
    visibility: visible;
}

body.se-drawer-open {
    overflow: hidden; /* scroll lock while drawer is open */
}


/* ==========================================================================
   04. SIDEBAR NAVIGATION
   ========================================================================== */

.se-brand {
    display: flex;
    align-items: center;
    gap: .6875rem;
    height: var(--se-topbar-h);
    padding: 0 1.125rem;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    flex-shrink: 0;
    color: #fff;
}

.se-brand:hover { color: #fff; }

.se-brand-mark {
    width: 32px;
    height: 32px;
    border-radius: var(--se-r-sm);
    background: linear-gradient(140deg, var(--se-primary) 0%, var(--se-primary-700) 100%);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: .9375rem;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(49, 81, 211, .35);
}

.se-brand-img {
    width: 34px;
    height: 34px;
    border-radius: var(--se-r-sm);
    object-fit: contain;
    background: #ffffff;
    padding: 2px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
}

.se-brand-text { display: flex; flex-direction: column; min-width: 0; }

.se-brand-name {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #fff;
    line-height: 1.15;
}

.se-brand-sub {
    font-size: .625rem;
    letter-spacing: .055em;
    text-transform: uppercase;
    color: var(--se-stone-400);
    font-weight: 600;
    line-height: 1.4;
}

.se-nav {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: .875rem .625rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: var(--se-stone-600) transparent;
}

.se-nav::-webkit-scrollbar { width: 6px; }
.se-nav::-webkit-scrollbar-thumb {
    background: var(--se-stone-600);
    border-radius: var(--se-r-pill);
}

.se-nav-section { margin-bottom: .375rem; }

.se-nav-title {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--se-stone-400);
    padding: .875rem .75rem .375rem;
    margin: 0;
}

.se-nav-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5625rem .75rem;
    min-height: 38px;
    border-radius: var(--se-r-sm);
    color: var(--se-stone-300);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.3;
    position: relative;
    transition: background-color .15s ease, color .15s ease;
}

.se-nav-link > i,
.se-nav-link > .se-nav-icon {
    width: 18px;
    text-align: center;
    font-size: .875rem;
    flex-shrink: 0;
    color: var(--se-stone-400);
    transition: color .15s ease;
}

.se-nav-link > span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.se-nav-link:hover > i { color: var(--se-stone-300); }

.se-nav-link.is-active {
    background: var(--se-primary);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 10px -2px rgba(49, 81, 211, .55);
}

.se-nav-link.is-active > i { color: #fff; }

.se-nav-link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
}

/* Count chip inside a nav item */
.se-nav-count {
    font-size: .6875rem;
    font-weight: 700;
    padding: .0625rem .375rem;
    border-radius: var(--se-r-pill);
    background: rgba(255, 255, 255, .12);
    color: #fff;
    min-width: 20px;
    text-align: center;
}

.se-nav-link.is-active .se-nav-count { background: rgba(255, 255, 255, .25); }

/* Sidebar footer */
.se-side-foot {
    flex-shrink: 0;
    padding: .875rem 1.125rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.se-side-foot-brand {
    font-size: .6875rem;
    color: var(--se-stone-400);
    line-height: 1.5;
}

.se-side-foot-brand strong { color: var(--se-stone-300); font-weight: 600; }

/* Drawer close button — mobile only, so it is sized for a thumb rather than a
   pointer: it never appears at a width where a mouse is the likely input. */
.se-drawer-close {
    display: none;
    background: transparent;
    border: 0;
    color: var(--se-stone-300);
    width: var(--se-tap);
    height: var(--se-tap);
    border-radius: var(--se-r-sm);
    margin-left: auto;
    flex-shrink: 0;
}

.se-drawer-close:hover { background: rgba(255, 255, 255, .08); color: #fff; }


/* ==========================================================================
   05. TOPBAR
   ========================================================================== */

.se-topbar {
    height: var(--se-topbar-h);
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--se-border);
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 0 1.75rem;
    position: sticky;
    top: 0;
    z-index: 1030;
    flex-shrink: 0;
}

.se-hamburger {
    display: none;
    width: var(--se-tap);
    height: var(--se-tap);
    border: 0;
    background: transparent;
    border-radius: var(--se-r-sm);
    color: var(--se-ink-700);
    font-size: 1.125rem;
    flex-shrink: 0;
    margin-left: -.5rem;
}

.se-hamburger:hover { background: var(--se-surface-3); }

.se-topbar-title {
    font-size: .9375rem;
    font-weight: 650;
    color: var(--se-ink-900);
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.se-topbar-spacer { flex: 1; min-width: 0; }

.se-topbar-actions {
    display: flex;
    align-items: center;
    gap: .375rem;
    flex-shrink: 0;
}

.se-icon-btn {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--se-r-sm);
    color: var(--se-ink-600);
    font-size: .9375rem;
    transition: background-color .15s ease, color .15s ease;
    position: relative;
}

.se-icon-btn:hover {
    background: var(--se-surface-3);
    color: var(--se-ink-900);
}

.se-icon-btn:focus-visible {
    outline: none;
    box-shadow: var(--se-ring);
}

/* User chip */
.se-user {
    display: flex;
    align-items: center;
    gap: .5625rem;
    padding: .25rem .5rem .25rem .25rem;
    border-radius: var(--se-r-pill);
    border: 1px solid var(--se-border);
    background: var(--se-surface);
    color: var(--se-ink-700);
    max-width: 220px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.se-user:hover {
    border-color: var(--se-border-strong);
    color: var(--se-ink-900);
    box-shadow: var(--se-shadow-1);
}

.se-user-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
    text-align: left;
}

.se-user-name {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--se-ink-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.se-user-role {
    font-size: .6875rem;
    color: var(--se-ink-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ==========================================================================
   06. PAGE HEADER & BREADCRUMBS
   ========================================================================== */

.se-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.375rem;
}

.se-page-head-main { min-width: 0; }

.se-crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .375rem;
    font-size: .75rem;
    color: var(--se-ink-400);
    margin-bottom: .375rem;
    padding: 0;
    list-style: none;
}

.se-crumbs a { color: var(--se-ink-500); font-weight: 500; }
.se-crumbs a:hover { color: var(--se-primary); }
.se-crumbs .se-crumb-sep { color: var(--se-ink-400); font-size: .625rem; }
.se-crumbs .is-current { color: var(--se-ink-700); font-weight: 600; }

.se-page-title {
    font-size: 1.4375rem;
    font-weight: 680;
    letter-spacing: -.02em;
    color: var(--se-ink-900);
    margin: 0;
    line-height: 1.25;
}

.se-page-sub {
    font-size: .875rem;
    color: var(--se-ink-500);
    margin: .1875rem 0 0;
}

.se-page-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}


/* ==========================================================================
   07. CARDS & SURFACES
   ========================================================================== */

.se-card,
.se-app .card {
    background: var(--se-surface);
    border: 1px solid var(--se-border);
    border-radius: var(--se-r-lg);
    box-shadow: var(--se-shadow-1);
    position: relative;
}

.se-app .card { --bs-card-border-color: var(--se-border); }

/* Neutralise legacy shadow utilities so elevation stays on-system */
.se-app .card.shadow,
.se-app .card.shadow-sm,
.se-app .card.shadow-lg { box-shadow: var(--se-shadow-1) !important; }

/* Responsive grid of cards, for the screens where a handful of records read
   better as cards than as table rows — a parent's children, for instance. Wraps
   to one column on a phone without a media query. */
.se-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
    gap: 1rem;
}

.se-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .875rem;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--se-border);
}

.se-card-title {
    font-size: .9375rem;
    font-weight: 650;
    color: var(--se-ink-900);
    margin: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.se-card-title > i { color: var(--se-ink-400); font-size: .875rem; }

.se-card-sub {
    font-size: .8125rem;
    color: var(--se-ink-500);
    margin: .125rem 0 0;
}

.se-card-body { padding: 1.25rem; }
.se-card-body.is-flush { padding: 0; }

.se-card-foot {
    padding: .875rem 1.25rem;
    border-top: 1px solid var(--se-border);
    background: var(--se-surface-2);
    border-radius: 0 0 var(--se-r-lg) var(--se-r-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

.se-card-link {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--se-primary);
    display: inline-flex;
    align-items: center;
    gap: .3125rem;
}

.se-card-link:hover { color: var(--se-primary-700); gap: .4375rem; }

/* Section divider inside a card */
.se-section-label {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--se-ink-400);
    padding-bottom: .625rem;
    margin: 0 0 1.125rem;
    border-bottom: 1px solid var(--se-border);
}

.se-section-label:not(:first-child) { margin-top: 2rem; }


/* ==========================================================================
   08. STATS, QUICK ACTIONS, KPI
   ========================================================================== */

.se-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.se-stat {
    background: var(--se-surface);
    border: 1px solid var(--se-border);
    border-radius: var(--se-r-lg);
    padding: 1.125rem 1.25rem;
    box-shadow: var(--se-shadow-1);
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    color: inherit;
    min-width: 0;
}

a.se-stat:hover {
    border-color: var(--se-primary-100);
    box-shadow: var(--se-shadow-2);
    transform: translateY(-2px);
    color: inherit;
}

/* A tile the signed-in role is not authorised to open is rendered without an
   href, so it must not advertise itself as clickable. */
a.se-stat:not([href]) { cursor: default; }
a.se-stat:not([href]):hover {
    border-color: var(--se-border);
    box-shadow: var(--se-shadow-1);
    transform: none;
}

.se-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--se-r);
    display: grid;
    place-items: center;
    font-size: 1.0625rem;
    flex-shrink: 0;
    background: var(--se-primary-50);
    color: var(--se-primary);
}

.se-stat-icon.is-teal    { background: var(--se-accent-50);   color: var(--se-accent); }
.se-stat-icon.is-success { background: var(--se-success-bg);  color: var(--se-success); }
.se-stat-icon.is-warning { background: var(--se-warning-bg);  color: var(--se-warning); }
.se-stat-icon.is-danger  { background: var(--se-danger-bg);   color: var(--se-danger); }
.se-stat-icon.is-info    { background: var(--se-info-bg);     color: var(--se-info); }
.se-stat-icon.is-neutral { background: var(--se-neutral-bg);  color: var(--se-neutral); }

.se-stat-main { min-width: 0; flex: 1; }

.se-stat-label {
    font-size: .75rem;
    font-weight: 600;
    color: var(--se-ink-500);
    letter-spacing: .01em;
    margin: 0 0 .1875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.se-stat-value {
    font-family: var(--se-font-num);
    font-size: 1.625rem;
    font-weight: 680;
    letter-spacing: -.028em;
    color: var(--se-ink-900);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.se-stat-meta {
    font-size: .75rem;
    color: var(--se-ink-500);
    margin-top: .3125rem;
    display: flex;
    align-items: center;
    gap: .3125rem;
}

.se-stat-meta .is-up   { color: var(--se-success); font-weight: 600; }
.se-stat-meta .is-down { color: var(--se-danger);  font-weight: 600; }

/* Quick action grid */
.se-quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
    gap: .75rem;
}

.se-quick {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .625rem;
    padding: 1rem;
    border: 1px solid var(--se-border);
    border-radius: var(--se-r);
    background: var(--se-surface);
    color: var(--se-ink-800);
    min-height: 96px;
    transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}

.se-quick:hover {
    border-color: var(--se-primary-100);
    background: var(--se-primary-50);
    color: var(--se-primary-700);
    transform: translateY(-2px);
}

.se-quick-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--se-r-sm);
    display: grid;
    place-items: center;
    background: var(--se-surface-3);
    color: var(--se-ink-600);
    font-size: .875rem;
    transition: background-color .18s ease, color .18s ease;
}

.se-quick:hover .se-quick-icon { background: #fff; color: var(--se-primary); }

.se-quick-label {
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.35;
}

/* Progress meter */
.se-meter {
    height: 7px;
    border-radius: var(--se-r-pill);
    background: var(--se-surface-3);
    overflow: hidden;
}

.se-meter-fill {
    height: 100%;
    border-radius: var(--se-r-pill);
    background: var(--se-primary);
    transition: width .5s cubic-bezier(.4, 0, .2, 1);
}

.se-meter-fill.is-success { background: var(--se-success); }
.se-meter-fill.is-warning { background: var(--se-warning); }
.se-meter-fill.is-danger  { background: var(--se-danger); }
.se-meter-fill.is-teal    { background: var(--se-accent); }


/* ==========================================================================
   09. BUTTONS
   ========================================================================== */

.se-app .btn {
    --bs-btn-padding-y: .5rem;
    --bs-btn-padding-x: .9375rem;
    --bs-btn-font-size: .875rem;
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--se-r-sm);
    --bs-btn-line-height: 1.4;
    letter-spacing: -.005em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4375rem;
    min-height: 38px;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
    white-space: nowrap;
}

.se-app .btn:focus-visible {
    outline: none;
    box-shadow: var(--se-ring);
}

.se-app .btn-sm {
    --bs-btn-padding-y: .3125rem;
    --bs-btn-padding-x: .625rem;
    --bs-btn-font-size: .8125rem;
    min-height: 32px;
}

.se-app .btn-lg {
    --bs-btn-padding-y: .625rem;
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-font-size: .9375rem;
    min-height: 44px;
}

.se-app .btn-primary {
    --bs-btn-bg: var(--se-primary);
    --bs-btn-border-color: var(--se-primary);
    --bs-btn-hover-bg: var(--se-primary-600);
    --bs-btn-hover-border-color: var(--se-primary-600);
    --bs-btn-active-bg: var(--se-primary-700);
    --bs-btn-active-border-color: var(--se-primary-700);
    --bs-btn-disabled-bg: var(--se-primary);
    --bs-btn-disabled-border-color: var(--se-primary);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}

/* Success actions use the brand teal, not stock Bootstrap green */
.se-app .btn-success {
    --bs-btn-bg: var(--se-accent);
    --bs-btn-border-color: var(--se-accent);
    --bs-btn-hover-bg: var(--se-accent-600);
    --bs-btn-hover-border-color: var(--se-accent-600);
    --bs-btn-active-bg: var(--se-accent-600);
    --bs-btn-active-border-color: var(--se-accent-600);
    --bs-btn-disabled-bg: var(--se-accent);
    --bs-btn-disabled-border-color: var(--se-accent);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}

.se-app .btn-danger {
    --bs-btn-bg: #d92d20;
    --bs-btn-border-color: #d92d20;
    --bs-btn-hover-bg: #b42318;
    --bs-btn-hover-border-color: #b42318;
    --bs-btn-active-bg: #912018;
    --bs-btn-active-border-color: #912018;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}

.se-app .btn-warning {
    --bs-btn-bg: #f79009;
    --bs-btn-border-color: #f79009;
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #dc6803;
    --bs-btn-hover-border-color: #dc6803;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #b54708;
    --bs-btn-active-color: #fff;
}

.se-app .btn-info {
    --bs-btn-bg: var(--se-info);
    --bs-btn-border-color: var(--se-info);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #144ba8;
    --bs-btn-hover-border-color: #144ba8;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}

.se-app .btn-dark {
    --bs-btn-bg: var(--se-stone-800);
    --bs-btn-border-color: var(--se-stone-800);
    --bs-btn-hover-bg: var(--se-stone-900);
    --bs-btn-hover-border-color: var(--se-stone-900);
}

/* Secondary reads as a neutral outline, not a grey slab */
.se-app .btn-secondary,
.se-app .btn-outline-secondary {
    --bs-btn-bg: var(--se-surface);
    --bs-btn-border-color: var(--se-border-strong);
    --bs-btn-color: var(--se-ink-700);
    --bs-btn-hover-bg: var(--se-surface-3);
    --bs-btn-hover-border-color: var(--se-border-strong);
    --bs-btn-hover-color: var(--se-ink-900);
    --bs-btn-active-bg: var(--se-surface-3);
    --bs-btn-active-border-color: var(--se-border-strong);
    --bs-btn-active-color: var(--se-ink-900);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

.se-app .btn-outline-primary {
    --bs-btn-color: var(--se-primary);
    --bs-btn-border-color: var(--se-primary-100);
    --bs-btn-bg: var(--se-surface);
    --bs-btn-hover-bg: var(--se-primary-50);
    --bs-btn-hover-border-color: var(--se-primary);
    --bs-btn-hover-color: var(--se-primary-700);
}

.se-app .btn-outline-danger {
    --bs-btn-color: var(--se-danger);
    --bs-btn-border-color: var(--se-danger-br);
    --bs-btn-bg: var(--se-surface);
    --bs-btn-hover-bg: var(--se-danger-bg);
    --bs-btn-hover-border-color: var(--se-danger);
    --bs-btn-hover-color: var(--se-danger);
}

.se-app .btn-light {
    --bs-btn-bg: var(--se-surface-3);
    --bs-btn-border-color: var(--se-border);
    --bs-btn-color: var(--se-ink-700);
    --bs-btn-hover-bg: var(--se-border);
    --bs-btn-hover-color: var(--se-ink-900);
}

/* Icon-only action button (table rows) */
.se-btn-icon {
    width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0 !important;
    display: inline-grid;
    place-items: center;
    border-radius: var(--se-r-sm);
    border: 1px solid var(--se-border);
    background: var(--se-surface);
    color: var(--se-ink-600);
    font-size: .8125rem;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.se-btn-icon:hover {
    background: var(--se-primary-50);
    border-color: var(--se-primary-100);
    color: var(--se-primary);
}

.se-btn-icon.is-danger:hover {
    background: var(--se-danger-bg);
    border-color: var(--se-danger-br);
    color: var(--se-danger);
}

.se-btn-icon:focus-visible { outline: none; box-shadow: var(--se-ring); }

.se-row-actions {
    display: inline-flex;
    align-items: center;
    gap: .3125rem;
    flex-wrap: nowrap;
}

/* Loading state */
.se-app .btn.is-loading {
    pointer-events: none;
    position: relative;
    color: transparent !important;
}

.se-app .btn.is-loading::after {
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: se-spin .6s linear infinite;
    color: #fff;
}

.se-app .btn-secondary.is-loading::after,
.se-app .btn-light.is-loading::after,
.se-app .btn-outline-primary.is-loading::after { color: var(--se-ink-600); }

@keyframes se-spin { to { transform: rotate(360deg); } }


/* ==========================================================================
   10. FORMS
   ========================================================================== */

.se-app .form-label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--se-ink-700);
    margin-bottom: .375rem;
    display: block;
}

.se-req {
    color: var(--se-danger);
    font-weight: 700;
    margin-left: .125rem;
}

.se-hint {
    font-size: .75rem;
    color: var(--se-ink-500);
    margin-top: .3125rem;
    display: block;
}

.se-app .form-control,
.se-app .form-select {
    font-size: .875rem;
    color: var(--se-ink-900);
    background-color: var(--se-surface);
    border: 1px solid var(--se-border-strong);
    border-radius: var(--se-r-sm);
    padding: .5rem .75rem;
    min-height: 40px;
    line-height: 1.45;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.se-app textarea.form-control { min-height: 96px; }

.se-app .form-control::placeholder { color: var(--se-ink-400); }

.se-app .form-control:hover:not(:disabled),
.se-app .form-select:hover:not(:disabled) { border-color: #b9c0cf; }

.se-app .form-control:focus,
.se-app .form-select:focus {
    border-color: var(--se-primary);
    box-shadow: var(--se-ring);
    outline: none;
}

.se-app .form-control:disabled,
.se-app .form-control[readonly],
.se-app .form-select:disabled {
    background-color: var(--se-surface-3);
    color: var(--se-ink-500);
    cursor: not-allowed;
}

.se-app .form-control-sm,
.se-app .form-select-sm {
    min-height: 34px;
    padding: .3125rem .625rem;
    font-size: .8125rem;
}

/* Native date/time controls */
.se-app input[type="date"],
.se-app input[type="time"],
.se-app input[type="datetime-local"] { appearance: none; }

.se-app input[type="date"]::-webkit-calendar-picker-indicator,
.se-app input[type="time"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .55;
    transition: opacity .15s ease;
}

.se-app input[type="date"]:hover::-webkit-calendar-picker-indicator,
.se-app input[type="time"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }

/* File input */
.se-app .form-control[type="file"] { padding: .3125rem .5rem; }

.se-app .form-control[type="file"]::file-selector-button {
    padding: .3125rem .75rem;
    margin: 0 .75rem 0 0;
    border: 1px solid var(--se-border-strong);
    border-radius: var(--se-r-sm);
    background: var(--se-surface-3);
    color: var(--se-ink-700);
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease;
}

.se-app .form-control[type="file"]::file-selector-button:hover { background: var(--se-border); }

/* Input group */
.se-app .input-group-text {
    background: var(--se-surface-3);
    border-color: var(--se-border-strong);
    color: var(--se-ink-500);
    font-size: .875rem;
    border-radius: var(--se-r-sm);
}

/* Checkbox / radio */
.se-app .form-check { min-height: 1.5rem; padding-left: 1.75rem; }
.se-app .form-check-input {
    width: 1.0625rem;
    height: 1.0625rem;
    margin-left: -1.75rem;
    margin-top: .1875rem;
    border-color: var(--se-border-strong);
    cursor: pointer;
}
.se-app .form-check-input:checked {
    background-color: var(--se-primary);
    border-color: var(--se-primary);
}
.se-app .form-check-input:focus {
    border-color: var(--se-primary);
    box-shadow: var(--se-ring);
}
.se-app .form-check-label { font-size: .875rem; cursor: pointer; color: var(--se-ink-700); }

/* Selectable checkbox card (subject assignment, filters).
   Markup: <label class="se-check-card">
             <input type="checkbox" class="form-check-input" …>
             <span class="se-check-card-label">…</span>
           </label>
   The whole label is the hit area, which is why it carries the min tap height. */
.se-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: .625rem;
}

.se-check-card {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .6875rem .875rem;
    border: 1px solid var(--se-border);
    border-radius: var(--se-r-sm);
    background: var(--se-surface);
    cursor: pointer;
    min-height: var(--se-tap);
    transition: border-color .15s ease, background-color .15s ease;
    margin: 0;
}

.se-check-card:hover { border-color: var(--se-primary-100); background: var(--se-primary-50); }

/* Overrides the -1.75rem hanging indent .form-check-input carries for
   Bootstrap's own layout; here the flex row does the positioning. */
.se-check-card .form-check-input { margin: 0; flex-shrink: 0; }

.se-check-card .form-check-input:checked ~ .se-check-card-label {
    color: var(--se-primary-700);
    font-weight: 600;
}

.se-check-card:has(.form-check-input:checked) {
    border-color: var(--se-primary);
    background: var(--se-primary-50);
    box-shadow: inset 0 0 0 1px var(--se-primary);
}

.se-check-card:has(.form-check-input:focus-visible) { box-shadow: var(--se-ring); }

.se-check-card-label { font-size: .875rem; color: var(--se-ink-700); line-height: 1.35; }

/* Optional block of fields belonging to a checkbox above it — the login on the
   staff form. Inset rather than a nested card: a card inside a card body reads
   as a second page section, and this is a part of the one form.

   Shown or hidden by data-se-reveal in stoneedu.js. Rendered visible, so with
   no JavaScript the fields are simply all on screen. */
.se-subpanel {
    border: 1px solid var(--se-border);
    border-left: 3px solid var(--se-primary-100);
    border-radius: var(--se-r-sm);
    background: var(--se-surface-2);
    padding: 1.125rem;
    margin-top: .875rem;
}

.se-subpanel > :first-child { margin-top: 0; }

/* The .se-form-grid inside sits in a narrower box than the one outside it, so
   its columns are allowed to be narrower before they wrap. */
.se-subpanel .se-form-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

@media (max-width: 480px) {
    .se-subpanel { padding: .875rem; }
}

/* Validation */
.se-app .input-validation-error,
.se-app .form-control.is-invalid,
.se-app .form-select.is-invalid {
    border-color: #d92d20;
    box-shadow: 0 0 0 3px rgba(217, 45, 32, .14);
}

.se-app .field-validation-error,
.se-app .text-danger {
    font-size: .75rem;
    color: var(--se-danger) !important;
    display: inline-block;
    margin-top: .3125rem;
    font-weight: 500;
}

.se-app .validation-summary-errors ul {
    margin: 0;
    padding-left: 1.125rem;
    font-size: .8125rem;
}

.se-app .validation-summary-valid { display: none; }

/* Form layout helpers */
.se-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.125rem;
}

.se-form-grid.is-2col { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.se-form-grid .se-span-2 { grid-column: span 2; }
.se-form-grid .se-span-all { grid-column: 1 / -1; }

.se-field { min-width: 0; }

.se-form-actions {
    display: flex;
    align-items: center;
    gap: .625rem;
    flex-wrap: wrap;
    padding-top: 1.25rem;
    margin-top: 1.75rem;
    border-top: 1px solid var(--se-border);
}

/* For an action row that follows body copy rather than fields, where the rule
   above it is the separator and the extra space just looks like a gap. */
.se-form-actions.is-flush { margin-top: 0; }

.se-form-actions .se-actions-spacer { flex: 1; }

/* Inline query form — a handful of fields plus a submit, sitting on one row.
   Used by the report screens, which need parameters before they can show
   anything. Fields grow to share the row and drop to full width on a phone,
   where the submit becomes a full-width button so it is easy to reach. */
.se-filter-form {
    display: flex;
    align-items: flex-end;
    gap: .75rem;
    flex-wrap: wrap;
}

.se-filter-form .se-field { flex: 1 1 170px; }
.se-filter-form .btn { min-height: 40px; }

@media (max-width: 575.98px) {
    .se-filter-form { align-items: stretch; }
    .se-filter-form .se-field { flex: 1 1 100%; }
    .se-filter-form .btn { width: 100%; min-height: var(--se-tap); }
}


/* ==========================================================================
   11. TABLES
   ========================================================================== */

.se-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0 0 var(--se-r-lg) var(--se-r-lg);
    scrollbar-width: thin;
}

.se-table-wrap::-webkit-scrollbar { height: 8px; }
.se-table-wrap::-webkit-scrollbar-track { background: var(--se-surface-3); }
.se-table-wrap::-webkit-scrollbar-thumb {
    background: var(--se-border-strong);
    border-radius: var(--se-r-pill);
}

.se-app .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--se-ink-700);
    --bs-table-border-color: var(--se-border);
    --bs-table-hover-bg: var(--se-surface-2);
    --bs-table-hover-color: var(--se-ink-900);
    --bs-table-striped-bg: var(--se-surface-2);
    font-size: .875rem;
    margin: 0;
    width: 100%;
    vertical-align: middle;
}

.se-app .table > thead {
    background: var(--se-surface-2);
    border-bottom: 1px solid var(--se-border);
}

.se-app .table > thead th {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .055em;
    text-transform: uppercase;
    color: var(--se-ink-500);
    padding: .75rem 1rem;
    white-space: nowrap;
    border-bottom: 0;
    background: transparent;
    vertical-align: middle;
}

/* Legacy dark/light thead utilities are normalised into the system look */
.se-app .table > thead.table-dark,
.se-app .table > thead.table-light {
    --bs-table-bg: var(--se-surface-2);
    --bs-table-color: var(--se-ink-500);
    background: var(--se-surface-2);
}

.se-app .table > thead.table-dark th,
.se-app .table > thead.table-light th {
    color: var(--se-ink-500);
    background: var(--se-surface-2);
}

.se-app .table > tbody > tr { border-bottom: 1px solid var(--se-border); }
.se-app .table > tbody > tr:last-child { border-bottom: 0; }

.se-app .table > tbody > td,
.se-app .table > tbody > tr > td {
    padding: .8125rem 1rem;
    color: var(--se-ink-700);
    vertical-align: middle;
    border-bottom: 0;
}

.se-app .table-hover > tbody > tr:hover > * {
    background: var(--se-surface-2);
    color: var(--se-ink-900);
}

/* Bordered/striped are folded into the base look for consistency */
.se-app .table-bordered > :not(caption) > * > * { border-width: 0; }
.se-app .table-bordered > tbody > tr { border-bottom: 1px solid var(--se-border); }
.se-app .table-striped > tbody > tr:nth-of-type(odd) > * { background: transparent; }

.se-table-primary {
    font-weight: 600;
    color: var(--se-ink-900) !important;
}

.se-table-secondary {
    font-size: .75rem;
    color: var(--se-ink-500);
    margin-top: .0625rem;
}

.se-app .table td.se-col-actions,
.se-app .table th.se-col-actions {
    text-align: right;
    white-space: nowrap;
    width: 1%;
}

.se-app .table td.se-col-tight,
.se-app .table th.se-col-tight { width: 1%; white-space: nowrap; }

/* Free-text column. One unbreakable token used to push the whole table out to its
   own width — a 200-character purpose typed as a single string does it, and so
   would a pasted reference number or URL. At 360px that took the certificates
   table from 699px to 2336px, so every row scrolled sideways because of one cell.

   `anywhere` and not `break-word`: only `anywhere` also shrinks the cell's
   min-content width, which is the figure the table layout algorithm actually uses.
   `break-word` would rewrap the text and leave the table just as wide.

   This started out as `max-width: 22rem; overflow-wrap: anywhere`, described as two
   parts that were both needed. Measured at 360px with the 200-character token, that
   was wrong: neither declaration 2336px, max-width alone 1017px (still broken),
   `overflow-wrap: anywhere` alone 760px, both together 760px. The cap contributes
   nothing once the text can break, and at 1920px the cell measured 618px against
   its own 352px max-width — the table algorithm does not honour max-width on a
   cell as a hard cap. So it was dropped rather than left in looking load-bearing.

   Deliberately opt-in per column rather than a rule on every `td`. Wide tables in
   this product are meant to scroll inside `.se-table-wrap`; making every cell
   breakable would let the layout algorithm shrink whole tables and break ordinary
   names and admission numbers mid-word to avoid a scrollbar that was the intended
   behaviour. This is for the columns that genuinely hold a sentence. */
.se-app .table td.se-col-text { overflow-wrap: anywhere; }

/* Identity cell: avatar + name + meta */
.se-identity {
    display: flex;
    align-items: center;
    gap: .6875rem;
    min-width: 0;
}

.se-identity-main { min-width: 0; }

/* Table footer / result count */
.se-table-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .8125rem 1.25rem;
    border-top: 1px solid var(--se-border);
    background: var(--se-surface-2);
    border-radius: 0 0 var(--se-r-lg) var(--se-r-lg);
    font-size: .8125rem;
    color: var(--se-ink-500);
}


/* ==========================================================================
   12. TOOLBAR (SEARCH / FILTER)
   ========================================================================== */

.se-toolbar {
    display: flex;
    align-items: center;
    gap: .625rem;
    flex-wrap: wrap;
    padding: .875rem 1.25rem;
    border-bottom: 1px solid var(--se-border);
    background: var(--se-surface);
    border-radius: var(--se-r-lg) var(--se-r-lg) 0 0;
}

.se-search {
    position: relative;
    flex: 1 1 260px;
    min-width: 0;
    max-width: 380px;
}

.se-search > i {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--se-ink-400);
    font-size: .8125rem;
    pointer-events: none;
}

.se-search .form-control { padding-left: 2.125rem; }

.se-filter { flex: 0 1 165px; min-width: 140px; }

.se-toolbar-spacer { flex: 1 1 auto; }

.se-toolbar-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}


/* ==========================================================================
   13. BADGES & PILLS
   ========================================================================== */

.se-badge,
.se-app .badge {
    display: inline-flex;
    align-items: center;
    gap: .3125rem;
    padding: .1875rem .5rem;
    border-radius: var(--se-r-sm);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    border: 1px solid transparent;
    white-space: nowrap;
    vertical-align: middle;
}

.se-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.se-badge.no-dot::before { display: none; }

.se-badge.is-success { background: var(--se-success-bg); color: var(--se-success); border-color: var(--se-success-br); }
.se-badge.is-warning { background: var(--se-warning-bg); color: var(--se-warning); border-color: var(--se-warning-br); }
.se-badge.is-danger  { background: var(--se-danger-bg);  color: var(--se-danger);  border-color: var(--se-danger-br); }
.se-badge.is-info    { background: var(--se-info-bg);    color: var(--se-info);    border-color: var(--se-info-br); }
.se-badge.is-neutral { background: var(--se-neutral-bg); color: var(--se-neutral); border-color: var(--se-neutral-br); }
.se-badge.is-primary { background: var(--se-primary-50); color: var(--se-primary-700); border-color: var(--se-primary-100); }

/* Map legacy Bootstrap badge colours onto the system palette */
.se-app .badge.bg-success   { background: var(--se-success-bg) !important; color: var(--se-success) !important; border-color: var(--se-success-br); }
.se-app .badge.bg-warning   { background: var(--se-warning-bg) !important; color: var(--se-warning) !important; border-color: var(--se-warning-br); }
.se-app .badge.bg-danger    { background: var(--se-danger-bg)  !important; color: var(--se-danger)  !important; border-color: var(--se-danger-br); }
.se-app .badge.bg-info      { background: var(--se-info-bg)    !important; color: var(--se-info)    !important; border-color: var(--se-info-br); }
.se-app .badge.bg-primary   { background: var(--se-primary-50) !important; color: var(--se-primary-700) !important; border-color: var(--se-primary-100); }
.se-app .badge.bg-secondary { background: var(--se-neutral-bg) !important; color: var(--se-neutral) !important; border-color: var(--se-neutral-br); }
.se-app .badge.text-dark    { color: inherit !important; }

/* --------------------------------------------------------------------------
   Status select — a <select> that wears the tone of whatever is chosen in it.

   Used on the staff roll sheet, where a row has four possible answers and a
   checkbox cannot carry them. Scanning forty rows for the two absences is the
   whole job, so the control is tinted rather than left uniform grey.

   The tone arrives as data-se-tone, written by stoneedu.js from the selected
   option's own data-tone. Nothing in CSS or JS decides that Present is green:
   Helpers/AttendanceStatus.Tone does, and it is rendered into the options.

   Sized to var(--se-tap) rather than the 40px every other control uses. This
   one is tapped once per person on a phone held in one hand, and it is the
   only control on the screen.
   -------------------------------------------------------------------------- */
.se-app .se-status-select {
    min-height: var(--se-tap);
    font-weight: 600;
    /* Wide enough that "Half Day" does not clip and every row is the same
       width, so the column reads as a column. */
    min-width: 8.5rem;
}

.se-app .se-status-select[data-se-tone="is-success"] {
    background-color: var(--se-success-bg);
    border-color: var(--se-success-br);
    color: var(--se-success);
}

.se-app .se-status-select[data-se-tone="is-danger"] {
    background-color: var(--se-danger-bg);
    border-color: var(--se-danger-br);
    color: var(--se-danger);
}

.se-app .se-status-select[data-se-tone="is-warning"] {
    background-color: var(--se-warning-bg);
    border-color: var(--se-warning-br);
    color: var(--se-warning);
}

.se-app .se-status-select[data-se-tone="is-info"] {
    background-color: var(--se-info-bg);
    border-color: var(--se-info-br);
    color: var(--se-info);
}

.se-app .se-status-select[data-se-tone="is-neutral"] {
    background-color: var(--se-neutral-bg);
    border-color: var(--se-neutral-br);
    color: var(--se-neutral);
}

/* The options themselves stay on the plain surface. A tinted <option> is drawn
   by the operating system on some platforms and ignored on others, so styling
   them would make the open list inconsistent for no gain. */
.se-app .se-status-select option {
    background-color: var(--se-surface);
    color: var(--se-ink-900);
    font-weight: 500;
}

.se-chip {
    display: inline-flex;
    align-items: center;
    gap: .3125rem;
    padding: .25rem .625rem;
    border-radius: var(--se-r-pill);
    background: var(--se-surface-3);
    border: 1px solid var(--se-border);
    color: var(--se-ink-600);
    font-size: .75rem;
    font-weight: 600;
}

/* Several chips in one cell or block — wraps instead of forcing the table wider. */
.se-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: .3125rem;
}


/* ==========================================================================
   14. AVATARS
   ========================================================================== */

.se-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--se-primary-50);
    color: var(--se-primary-700);
    display: inline-grid;
    place-items: center;
    font-size: .8125rem;
    font-weight: 700;
    flex-shrink: 0;
    border: 1px solid var(--se-border);
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: .01em;
}

.se-avatar-xs { width: 26px; height: 26px; font-size: .625rem; }
.se-avatar-sm { width: 32px; height: 32px; font-size: .6875rem; }
.se-avatar-lg { width: 56px; height: 56px; font-size: 1.125rem; }
.se-avatar-xl { width: 92px; height: 92px; font-size: 1.75rem; border-width: 2px; }
.se-avatar-2xl { width: 120px; height: 120px; font-size: 2.25rem; border-width: 3px; }

.se-avatar.is-square { border-radius: var(--se-r); }

/* Legacy classes kept working, restyled on-system */
.student-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 1px solid var(--se-border); }
.student-avatar-lg { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid var(--se-border); }


/* ==========================================================================
   15. ALERTS & TOASTS
   ========================================================================== */

.se-app .alert {
    border-radius: var(--se-r);
    border-width: 1px;
    padding: .8125rem 1rem;
    font-size: .875rem;
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    margin-bottom: 1rem;
}

.se-app .alert > i:first-child { margin-top: .1875rem; flex-shrink: 0; }

.se-app .alert-success { background: var(--se-success-bg); border-color: var(--se-success-br); color: var(--se-success); }
.se-app .alert-danger  { background: var(--se-danger-bg);  border-color: var(--se-danger-br);  color: var(--se-danger); }
.se-app .alert-warning { background: var(--se-warning-bg); border-color: var(--se-warning-br); color: var(--se-warning); }
.se-app .alert-info    { background: var(--se-info-bg);    border-color: var(--se-info-br);    color: var(--se-info); }

.se-app .alert ul { margin: 0; padding-left: 1.125rem; }
.se-app .alert p:last-child { margin-bottom: 0; }

/* Toast stack */
.se-toast-stack {
    position: fixed;
    top: calc(var(--se-topbar-h) + 12px);
    right: 18px;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: .625rem;
    max-width: min(380px, calc(100vw - 36px));
    pointer-events: none;
}

.se-toast {
    display: flex;
    align-items: flex-start;
    gap: .6875rem;
    padding: .8125rem .9375rem;
    background: var(--se-surface);
    border: 1px solid var(--se-border);
    border-left: 3px solid var(--se-primary);
    border-radius: var(--se-r);
    box-shadow: var(--se-shadow-2);
    font-size: .875rem;
    color: var(--se-ink-700);
    pointer-events: auto;
    animation: se-toast-in .3s cubic-bezier(.4, 0, .2, 1);
}

.se-toast.is-success { border-left-color: var(--se-success); }
.se-toast.is-danger  { border-left-color: var(--se-danger); }
.se-toast.is-warning { border-left-color: var(--se-warning); }
.se-toast.is-info    { border-left-color: var(--se-info); }

.se-toast.is-leaving { animation: se-toast-out .25s ease forwards; }

.se-toast-icon { font-size: .9375rem; margin-top: .0625rem; flex-shrink: 0; }
.se-toast.is-success .se-toast-icon { color: var(--se-success); }
.se-toast.is-danger  .se-toast-icon { color: var(--se-danger); }
.se-toast.is-warning .se-toast-icon { color: var(--se-warning); }
.se-toast.is-info    .se-toast-icon { color: var(--se-info); }

.se-toast-body { flex: 1; min-width: 0; }
.se-toast-title { font-weight: 650; color: var(--se-ink-900); display: block; margin-bottom: .0625rem; }

.se-toast-close {
    border: 0;
    background: transparent;
    color: var(--se-ink-400);
    font-size: .8125rem;
    padding: .125rem;
    line-height: 1;
    flex-shrink: 0;
    border-radius: var(--se-r-sm);
}

.se-toast-close:hover { color: var(--se-ink-700); }

@keyframes se-toast-in {
    from { opacity: 0; transform: translateX(20px) scale(.97); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes se-toast-out {
    to { opacity: 0; transform: translateX(20px) scale(.97); }
}


/* ==========================================================================
   16. EMPTY / LOADING / ERROR STATES
   ========================================================================== */

.se-empty {
    text-align: center;
    padding: 3.25rem 1.5rem;
    max-width: 420px;
    margin: 0 auto;
}

.se-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--se-r-lg);
    display: inline-grid;
    place-items: center;
    background: var(--se-surface-3);
    color: var(--se-ink-400);
    font-size: 1.375rem;
    margin-bottom: 1rem;
}

.se-empty-title {
    font-size: .9375rem;
    font-weight: 650;
    color: var(--se-ink-900);
    margin: 0 0 .3125rem;
}

.se-empty-text {
    font-size: .8125rem;
    color: var(--se-ink-500);
    margin: 0 0 1.125rem;
    line-height: 1.6;
}

.se-empty-text:last-child { margin-bottom: 0; }

/* Empty row inside a table */
td.se-empty-cell { padding: 0 !important; }
td.se-empty-cell .se-empty { padding: 2.5rem 1.5rem; }

/* Skeleton */
.se-skeleton {
    background: linear-gradient(90deg, var(--se-surface-3) 25%, #e9ecf3 37%, var(--se-surface-3) 63%);
    background-size: 400% 100%;
    animation: se-shimmer 1.3s ease-in-out infinite;
    border-radius: var(--se-r-sm);
    height: 14px;
}

@keyframes se-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

.se-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--se-border-strong);
    border-top-color: var(--se-primary);
    border-radius: 50%;
    animation: se-spin .6s linear infinite;
    display: inline-block;
}

/* Full-page error / status */
.se-status {
    max-width: 520px;
    margin: 3rem auto;
    text-align: center;
    padding: 2.5rem 1.75rem;
    background: var(--se-surface);
    border: 1px solid var(--se-border);
    border-radius: var(--se-r-lg);
    box-shadow: var(--se-shadow-1);
}

.se-status-icon {
    width: 62px;
    height: 62px;
    border-radius: var(--se-r-lg);
    display: inline-grid;
    place-items: center;
    font-size: 1.5rem;
    margin-bottom: 1.125rem;
    background: var(--se-danger-bg);
    color: var(--se-danger);
}

.se-status-icon.is-warning { background: var(--se-warning-bg); color: var(--se-warning); }
.se-status-icon.is-info    { background: var(--se-info-bg);    color: var(--se-info); }

.se-status-code {
    font-family: var(--se-font-num);
    font-size: 2.75rem;
    font-weight: 700;
    letter-spacing: -.04em;
    color: var(--se-ink-900);
    line-height: 1;
    margin-bottom: .5rem;
}

.se-status-title {
    font-size: 1.125rem;
    font-weight: 650;
    color: var(--se-ink-900);
    margin-bottom: .375rem;
}

.se-status-text {
    font-size: .875rem;
    color: var(--se-ink-500);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.se-status-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .625rem;
    justify-content: center;
}

.se-status-ref {
    margin-top: 1.5rem;
    padding-top: 1.125rem;
    border-top: 1px solid var(--se-border);
    font-size: .75rem;
    color: var(--se-ink-400);
    word-break: break-all;
}

.se-status-ref code {
    font-size: .75rem;
    color: var(--se-ink-600);
    background: var(--se-surface-3);
    border-radius: var(--se-r-sm);
    padding: .125rem .375rem;
}


/* ==========================================================================
   17. TABS, PAGINATION, DROPDOWNS, MODALS
   ========================================================================== */

.se-tabs {
    display: flex;
    align-items: center;
    gap: .25rem;
    border-bottom: 1px solid var(--se-border);
    overflow-x: auto;
    scrollbar-width: none;
    margin-bottom: 1.25rem;
}

.se-tabs::-webkit-scrollbar { display: none; }

.se-tab {
    padding: .625rem .875rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--se-ink-500);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    transition: color .15s ease, border-color .15s ease;
}

.se-tab:hover { color: var(--se-ink-900); }

.se-tab.is-active {
    color: var(--se-primary);
    border-bottom-color: var(--se-primary);
}

/* Pagination */
.se-pager {
    display: flex;
    align-items: center;
    /* Wraps deliberately. At its widest the pager is nine controls — two
       arrows, five numbers and two gaps — and at 44px each on a touch screen
       that is about 400px of buttons in a foot that has around 300px to give at
       375px wide. Wrapping to a second line keeps every page reachable; the
       alternative was dropping numbers on small screens, which takes pages away
       from the phones most likely to be scrolling a long register. */
    flex-wrap: wrap;
    justify-content: center;
    gap: .25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.se-pager-link {
    min-width: 34px;
    height: 34px;
    padding: 0 .5rem;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--se-border);
    border-radius: var(--se-r-sm);
    background: var(--se-surface);
    color: var(--se-ink-600);
    font-size: .8125rem;
    font-weight: 600;
}

.se-pager-link:hover { background: var(--se-surface-3); color: var(--se-ink-900); }

.se-pager-link.is-active {
    background: var(--se-primary);
    border-color: var(--se-primary);
    color: #fff;
}

.se-pager-link.is-disabled { opacity: .45; pointer-events: none; }

/* The … standing in for the page numbers left out between "1" and the ones
   around the current page. A plain list item, not a button — there is nothing
   to click — and aria-hidden, because "one, ellipsis, seven" read aloud tells a
   screen-reader user nothing the numbers either side do not already say. */
.se-pager-gap {
    min-width: 1.25rem;
    padding: 0 .125rem;
    display: inline-grid;
    place-items: center;
    color: var(--se-ink-400);
    font-size: .8125rem;
    font-weight: 600;
    user-select: none;
}

/* The pager sits in .se-table-foot, which is a space-between flex row. As the
   middle of three children it centres itself between the count and the reset
   button, and when there is only one page the [hidden] takes it out of the row
   entirely — leaving the foot looking exactly as it did before paging.

   The [hidden] rule is spelled out rather than left to the reset stylesheet,
   because an empty flex container that failed to disappear would still be
   holding the foot's gap open on every table that fits on one page. */
.se-pager-nav { display: flex; }
.se-pager-nav[hidden] { display: none; }

/* Dropdown */
.se-app .dropdown-menu {
    border: 1px solid var(--se-border);
    border-radius: var(--se-r);
    box-shadow: var(--se-shadow-2);
    padding: .3125rem;
    font-size: .875rem;
    min-width: 190px;
    color: var(--se-ink-700);
}

.se-app .dropdown-item {
    border-radius: var(--se-r-sm);
    padding: .4375rem .625rem;
    color: var(--se-ink-700);
    display: flex;
    align-items: center;
    gap: .5625rem;
    font-weight: 500;
    min-height: 36px;
}

.se-app .dropdown-item > i { width: 15px; text-align: center; color: var(--se-ink-400); font-size: .8125rem; }

.se-app .dropdown-item:hover,
.se-app .dropdown-item:focus {
    background: var(--se-surface-3);
    color: var(--se-ink-900);
}

.se-app .dropdown-item.is-danger { color: var(--se-danger); }
.se-app .dropdown-item.is-danger > i { color: var(--se-danger); }
.se-app .dropdown-item.is-danger:hover { background: var(--se-danger-bg); color: var(--se-danger); }

.se-app .dropdown-divider { margin: .3125rem 0; border-color: var(--se-border); }

.se-dropdown-head {
    padding: .5rem .625rem .4375rem;
    border-bottom: 1px solid var(--se-border);
    margin-bottom: .3125rem;
}

/* Modal */
.se-app .modal-content {
    border: 1px solid var(--se-border);
    border-radius: var(--se-r-lg);
    box-shadow: 0 20px 48px -12px rgba(16, 24, 40, .25);
}

.se-app .modal-header {
    border-bottom: 1px solid var(--se-border);
    padding: 1.125rem 1.375rem;
}

.se-app .modal-title { font-size: 1rem; font-weight: 650; color: var(--se-ink-900); }
.se-app .modal-body { padding: 1.375rem; }

.se-app .modal-footer {
    border-top: 1px solid var(--se-border);
    padding: .9375rem 1.375rem;
    background: var(--se-surface-2);
    border-radius: 0 0 var(--se-r-lg) var(--se-r-lg);
    gap: .5rem;
}

.se-app .modal-backdrop.show { opacity: .5; }


/* ==========================================================================
   18. PROFILE & DETAIL VIEWS
   ========================================================================== */

.se-profile {
    background: var(--se-surface);
    border: 1px solid var(--se-border);
    border-radius: var(--se-r-lg);
    box-shadow: var(--se-shadow-1);
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.se-profile-cover {
    height: 84px;
    background: linear-gradient(120deg, var(--se-stone-900) 0%, var(--se-primary-700) 55%, var(--se-primary) 100%);
}

.se-profile-body {
    padding: 0 1.5rem 1.375rem;
    display: flex;
    align-items: flex-end;
    gap: 1.125rem;
    flex-wrap: wrap;
    margin-top: -46px;
}

.se-profile-avatar {
    border: 3px solid var(--se-surface);
    box-shadow: var(--se-shadow-1);
    background: var(--se-surface);
}

.se-profile-meta { flex: 1; min-width: 0; padding-bottom: .1875rem; }

.se-profile-name {
    font-size: 1.25rem;
    font-weight: 680;
    letter-spacing: -.02em;
    color: var(--se-ink-900);
    margin: 0 0 .25rem;
}

.se-profile-tags {
    display: flex;
    align-items: center;
    gap: .4375rem;
    flex-wrap: wrap;
}

.se-profile-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    padding-bottom: .1875rem;
}

/* Key / value definition list */
.se-kv {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 1.125rem 1.5rem;
    margin: 0;
}

/* One pair per row — for a narrow aside, where auto-fit would still try to fit
   two columns into a space that cannot hold them. */
.se-kv.is-1col { grid-template-columns: minmax(0, 1fr); }

.se-kv-item { min-width: 0; }

.se-kv-key {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .055em;
    text-transform: uppercase;
    color: var(--se-ink-400);
    margin: 0 0 .25rem;
}

.se-kv-val {
    font-size: .875rem;
    color: var(--se-ink-900);
    font-weight: 500;
    margin: 0;
    word-break: break-word;
}

.se-kv-val.is-empty { color: var(--se-ink-400); font-weight: 400; font-style: italic; }

/* Timeline (promotion history, activity) */
.se-timeline { position: relative; padding-left: 1.5rem; margin: 0; list-style: none; }

.se-timeline::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--se-border);
}

.se-timeline-item { position: relative; padding-bottom: 1.25rem; }
.se-timeline-item:last-child { padding-bottom: 0; }

.se-timeline-item::before {
    content: "";
    position: absolute;
    left: -1.5rem;
    top: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--se-surface);
    border: 2px solid var(--se-primary);
}

.se-timeline-time { font-size: .75rem; color: var(--se-ink-400); margin-bottom: .1875rem; }
.se-timeline-title { font-size: .875rem; font-weight: 600; color: var(--se-ink-900); margin: 0 0 .125rem; }
.se-timeline-text { font-size: .8125rem; color: var(--se-ink-500); margin: 0; }

/* Two-column detail layout */
.se-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1.25rem;
    align-items: start;
}

.se-split.is-narrow { grid-template-columns: minmax(0, 1fr) 300px; }
.se-split-aside { display: flex; flex-direction: column; gap: 1.25rem; }

/* min-width:0 stops wide tables inside the main column from pushing the grid
   wider than the viewport (grid items default to an auto minimum size). */
.se-split-main { min-width: 0; }

/* Data list rows (dashboard side panels) */
.se-list { list-style: none; margin: 0; padding: 0; }

.se-list-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1.25rem;
    border-bottom: 1px solid var(--se-border);
    color: inherit;
    transition: background-color .15s ease;
    min-height: 60px;
}

.se-list-item:last-child { border-bottom: 0; }
a.se-list-item:hover { background: var(--se-surface-2); color: inherit; }
a.se-list-item:not([href]) { cursor: default; }
a.se-list-item:not([href]):hover { background: transparent; }

.se-list-main { flex: 1; min-width: 0; }

.se-list-title {
    font-size: .875rem;
    font-weight: 600;
    color: var(--se-ink-900);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.se-list-sub {
    font-size: .75rem;
    color: var(--se-ink-500);
    margin: .0625rem 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.se-list-aside { flex-shrink: 0; text-align: right; }

/* Icon-led fact list. Used where a page has to explain consequences before the
   user commits (remove-from-roll, bulk promotion) rather than tabulate data. */
.se-facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .625rem;
}

.se-facts > li {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    font-size: .875rem;
    line-height: 1.55;
    color: var(--se-ink-600);
}

.se-facts > li > i {
    flex-shrink: 0;
    margin-top: .1875rem;
    width: 16px;
    text-align: center;
    font-size: .8125rem;
    color: var(--se-ink-400);
}

.se-facts > li > i.fa-circle-check { color: var(--se-success); }
.se-facts > li > i.fa-triangle-exclamation { color: var(--se-warning); }
.se-facts > li > i.fa-circle-xmark { color: var(--se-danger); }

/* Written message. For content somebody typed in prose — a complaint and the
   reply to it — rather than a data field. se-kv-val would run it out as one flat
   line with its paragraph breaks collapsed, which is why pre-line is here. */
.se-msg {
    border: 1px solid var(--se-border);
    border-radius: var(--se-r);
    background: var(--se-surface-2);
    padding: .875rem 1rem;
}

.se-msg + .se-msg { margin-top: .75rem; }

/* The reply is the school answering, so it is set off from the complaint it
   answers by a coloured edge rather than a differently shaped box. */
.se-msg.is-reply {
    background: var(--se-primary-50);
    border-color: var(--se-primary-100);
    border-left: 3px solid var(--se-primary);
}

.se-msg-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .625rem;
    flex-wrap: wrap;
    margin-bottom: .375rem;
}

.se-msg-who {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .055em;
    text-transform: uppercase;
    color: var(--se-ink-400);
    margin: 0;
}

.se-msg-when { font-size: .75rem; color: var(--se-ink-400); }

.se-msg-text {
    font-size: .875rem;
    line-height: 1.6;
    color: var(--se-ink-700);
    margin: 0;
    white-space: pre-line;
    word-break: break-word;
}


/* ==========================================================================
   19. CERTIFICATES & PRINT
   ========================================================================== */

/* On-screen preview shell for printable documents */
.se-doc-shell {
    min-height: 100vh;
    background: var(--se-canvas);
    padding: 1.75rem 1rem 3rem;
    font-family: var(--se-font);
}

.se-doc-bar {
    max-width: 820px;
    margin: 0 auto 1.125rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

.se-doc-bar-title {
    font-size: .9375rem;
    font-weight: 650;
    color: var(--se-ink-900);
    margin: 0;
}

.se-doc-bar-sub { font-size: .75rem; color: var(--se-ink-500); margin: .125rem 0 0; }

.se-doc {
    max-width: 820px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--se-border);
    border-radius: var(--se-r);
    box-shadow: var(--se-shadow-2);
    padding: 3.25rem 3rem;
    color: #101828;
}

.se-doc-head {
    text-align: center;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid #101828;
    margin-bottom: 2.25rem;
}

.se-doc-school {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: #101828;
    margin: 0 0 .25rem;
    text-transform: uppercase;
}

.se-doc-tagline {
    font-size: .75rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #667085;
    margin: 0;
}

/* The school's address under its name on a letterhead, and in the preview on the
   school details page — the same class in both, so what that page shows is what a
   certificate prints rather than an impression of it.

   Not uppercase, unlike .se-doc-school: a name in capitals reads as a letterhead,
   an address in capitals just reads slowly. Lines come from the newlines somebody
   typed into the address box, one <p> each. */
.se-doc-address {
    font-size: .8125rem;
    line-height: 1.5;
    color: #475467;
    margin: 0;
}

.se-doc-type {
    display: inline-block;
    margin-top: 1.25rem;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #101828;
    border: 2px solid #101828;
    padding: .4375rem 1.375rem;
    border-radius: 3px;
}

.se-doc-body { font-size: 1rem; line-height: 2.05; color: #1d2939; text-align: justify; }
.se-doc-body p { margin: 0 0 1.125rem; }
.se-doc-body strong { font-weight: 700; color: #101828; border-bottom: 1px dotted #98a2b3; padding: 0 .1875rem; }

.se-doc-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem 1.5rem;
    padding: 1.125rem 1.375rem;
    background: #f8f9fc;
    border: 1px solid #e4e7ee;
    border-radius: var(--se-r-sm);
    margin-bottom: 2rem;
}

.se-doc-meta-key {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #667085;
    margin: 0 0 .1875rem;
}

.se-doc-meta-val { font-size: .9375rem; font-weight: 600; color: #101828; margin: 0; }

.se-doc-foot {
    margin-top: 3.5rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

.se-doc-sign { text-align: center; min-width: 190px; }

.se-doc-sign-line {
    border-top: 1px solid #101828;
    padding-top: .4375rem;
    margin-top: 3.25rem;
    font-size: .875rem;
    font-weight: 700;
    color: #101828;
}

.se-doc-sign-note { font-size: .6875rem; color: #667085; margin: .1875rem 0 0; }

.se-doc-issued { font-size: .8125rem; color: #475467; }
.se-doc-issued strong { color: #101828; }

/* ---- Tabular documents --------------------------------------------------------

   The attendance register, as opposed to a certificate. Everything above assumes a
   printable document is a paragraph of prose — .se-doc-body justifies its text and
   sets a 2.05 line height, which is right for "This is to certify that…" and useless
   for a grid of eleven columns.

   Bootstrap's .table is not reused here, and that is a print decision rather than a
   stylistic one: it draws its rules with a colour variable, and browsers drop
   background and border colours when printing unless told otherwise. A certificate
   survives that — it is black text on white. A register does not: eleven columns of
   digits with no gridlines cannot be read at all, and this is a document somebody
   signs. So the borders below are plain black, and the two shaded rows carry an
   explicit print-color-adjust further down. */

.se-doc-wide { max-width: 1080px; }

.se-doc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .8125rem;
    color: #101828;
    margin-bottom: 1.5rem;
}

.se-doc-table th,
.se-doc-table td {
    border: 1px solid #101828;
    padding: .375rem .5rem;
    text-align: left;
    vertical-align: top;
}

.se-doc-table thead th {
    background: #f2f4f7;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.se-doc-table tfoot td {
    background: #f2f4f7;
    font-weight: 700;
}

/* Numeric columns: right-aligned so the digits line up down the page, and squeezed to
   their content, which is what leaves the two name columns the rest of the width.
   tabular-nums stops a column of figures shifting as the digits change. */
.se-doc-table-num {
    text-align: right;
    white-space: nowrap;
    width: 1%;
    font-variant-numeric: tabular-nums;
}

/* The employee code, and a joining or leaving date, underneath a name. A block rather
   than columns of their own — eleven is already as many columns as A4 portrait holds. */
.se-doc-table-sub {
    display: block;
    font-size: .6875rem;
    color: #475467;
}

/* The legend under a report table. Every abbreviation in the headings is expanded here
   and so is what the percentage is a percentage of, because a signed document has to be
   readable by somebody who was not looking at the screen it came from. */
.se-doc-note {
    font-size: .75rem;
    line-height: 1.6;
    color: #475467;
    border-top: 1px solid #e4e7ee;
    padding-top: .875rem;
}

.se-doc-note p { margin: 0 0 .5rem; }
.se-doc-note p:last-child { margin-bottom: 0; }
.se-doc-note strong { color: #101828; }

.se-doc-credit {
    max-width: 820px;
    margin: 1.25rem auto 0;
    text-align: center;
    font-size: .6875rem;
    color: var(--se-ink-400);
}

/* Photograph on a printed document. Passport proportions, because that is the
   shape of the photograph a school holds and the box an invigilator expects.
   The empty variant is a ruled box rather than a broken image — the admit card
   used to point at /images/default-user.png, which does not exist. */
.se-doc-photo {
    width: 96px;
    height: 112px;
    object-fit: cover;
    border: 1px solid #101828;
    border-radius: 2px;
    background: #f2f4f7;
    display: block;
}

.se-doc-photo-empty {
    width: 96px;
    height: 112px;
    border: 1px dashed #98a2b3;
    border-radius: 2px;
    background: #f8f9fc;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: .625rem;
    line-height: 1.4;
    color: #667085;
    padding: .25rem;
}

/* Detail rows on a printed document, beside the photograph */
.se-doc-rows {
    display: grid;
    gap: .5rem 1rem;
    margin: 0;
}

.se-doc-row {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: .75rem;
    align-items: baseline;
    border-bottom: 1px dotted #d0d5dd;
    padding-bottom: .375rem;
}

.se-doc-row:last-child { border-bottom: 0; }

.se-doc-row dt {
    font-size: .8125rem;
    font-weight: 600;
    color: #475467;
    margin: 0;
}

.se-doc-row dd {
    font-size: .9375rem;
    font-weight: 650;
    color: #101828;
    margin: 0;
}

/* ID card */
.se-idcard {
    width: 340px;
    background: #fff;
    border: 1px solid var(--se-border);
    border-radius: var(--se-r-lg);
    overflow: hidden;
    box-shadow: var(--se-shadow-2);
    margin: 0 auto;
}

.se-idcard-head {
    background: linear-gradient(135deg, var(--se-stone-900) 0%, var(--se-primary-700) 100%);
    color: #fff;
    padding: .9375rem 1rem;
    text-align: center;
}

.se-idcard-school {
    font-size: .9375rem;
    font-weight: 700;
    letter-spacing: .02em;
    margin: 0;
    text-transform: uppercase;
    line-height: 1.3;
}

/* The school's address on the ID card. Its own class rather than .se-doc-address
   because this sits on the card's dark gradient header, where that class's grey
   would be close to unreadable — and because a card 300-odd pixels wide gets the
   address as one joined line, not as the four the certificate headers print. */
.se-idcard-address {
    font-size: .5625rem;
    line-height: 1.4;
    opacity: .85;
    margin: .25rem 0 0;
}

.se-idcard-label {
    font-size: .5625rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .8;
    margin: .1875rem 0 0;
}

.se-idcard-photo-wrap { text-align: center; padding: 1rem 1rem .625rem; }

.se-idcard-photo {
    width: 92px;
    height: 92px;
    border-radius: var(--se-r);
    object-fit: cover;
    border: 2px solid var(--se-border);
    background: var(--se-surface-3);
}

/* No photograph on file. The card used to point at /images/default-user.png, which
   does not exist in wwwroot/images — so it printed a broken image. */
.se-idcard-photo.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    border-style: dashed;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--se-ink-400);
    text-transform: uppercase;
}

.se-idcard-name {
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    color: var(--se-ink-900);
    margin: .5rem 0 .1875rem;
}

.se-idcard-class {
    text-align: center;
    font-size: .75rem;
    color: var(--se-ink-500);
    margin: 0 0 .875rem;
}

.se-idcard-rows { padding: 0 1rem 1rem; }

.se-idcard-row {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    padding: .375rem 0;
    border-bottom: 1px dashed var(--se-border);
    font-size: .75rem;
}

.se-idcard-row:last-child { border-bottom: 0; }
.se-idcard-row dt { color: var(--se-ink-500); font-weight: 600; margin: 0; }
.se-idcard-row dd { color: var(--se-ink-900); font-weight: 600; margin: 0; text-align: right; }

.se-idcard-foot {
    background: var(--se-surface-2);
    border-top: 1px solid var(--se-border);
    padding: .625rem 1rem;
    font-size: .625rem;
    color: var(--se-ink-500);
    text-align: center;
    line-height: 1.5;
}

/* Print rules */
@media print {
    .se-no-print,
    .se-sidebar,
    .se-topbar,
    .se-scrim,
    .se-doc-bar,
    .se-doc-credit,
    .se-toast-stack { display: none !important; }

    body,
    .se-doc-shell {
        background: #fff !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .se-main { margin-left: 0 !important; }
    .se-content { padding: 0 !important; max-width: none !important; }

    .se-doc {
        max-width: none;
        border: 0;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        margin: 0;
    }

    .se-idcard { box-shadow: none; page-break-inside: avoid; }

    /* Report tables. Three separate problems on paper, none of which the screen has:

       · A register runs over more than one sheet, and a sheet with no column headings
         is a grid of unlabelled numbers. thead as a table-header-group repeats them.
       · A row split across a page break is where a figure gets read against the wrong
         name, so rows are kept whole.
       · The heading band and the totals row are shaded, and browsers print shading as
         nothing by default — which would leave the total looking like one more person.
         print-color-adjust keeps both. */
    .se-doc-table { font-size: 7.5pt; }
    .se-doc-table thead { display: table-header-group; }
    .se-doc-table tfoot { display: table-footer-group; }
    .se-doc-table tr { page-break-inside: avoid; }
    .se-doc-table th,
    .se-doc-table td { padding: 2pt 3pt; }

    .se-doc-table thead th,
    .se-doc-table tfoot td {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .se-doc-note { font-size: 7pt; }

    /* The signature block belongs at the end of the document, not stranded alone on a
       sheet of its own after a register that filled the page before it. */
    .se-doc-foot { page-break-inside: avoid; }

    a[href]::after { content: none !important; }

    @page { size: A4; margin: 16mm; }
}


/* ==========================================================================
   20. RESPONSIVE
   ========================================================================== */

/* Large desktop — 1400px+ handled by max-width on .se-content */

@media (max-width: 1400px) {
    .se-split { grid-template-columns: minmax(0, 1fr) 312px; }
}

/* 1280 / 1366 laptops */
@media (max-width: 1280px) {
    :root { --se-sidebar-w: 244px; }
    .se-content { padding: 1.375rem 1.375rem 2.25rem; }
    .se-topbar { padding: 0 1.375rem; }
}

/* Tablet landscape — collapse the split layout */
@media (max-width: 1100px) {
    .se-split,
    .se-split.is-narrow { grid-template-columns: minmax(0, 1fr); }
    .se-stat-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}

/* ---- Tablet & below: sidebar becomes an off-canvas drawer ---------------- */
@media (max-width: 991.98px) {
    .se-sidebar {
        transform: translateX(-100%);
        box-shadow: 0 0 40px rgba(16, 22, 38, .35);
        width: min(300px, 86vw);
    }

    body.se-drawer-open .se-sidebar { transform: translateX(0); }

    .se-main { margin-left: 0; }

    .se-hamburger { display: grid; place-items: center; }
    .se-drawer-close { display: grid; place-items: center; }

    .se-content { padding: 1.125rem 1.125rem 2.25rem; }
    .se-topbar { padding: 0 1rem; gap: .5rem; }

    /* Sidebar links get a comfortable touch target on tablet/mobile */
    .se-nav-link { padding: .625rem .75rem; font-size: .9375rem; }
    .se-nav-link > i { font-size: .9375rem; width: 20px; }

    /* Tap targets live in their own block further down, because width alone
       does not answer the question — see "Touch targets". */

    .se-toast-stack { top: calc(var(--se-topbar-h) + 8px); right: 12px; left: 12px; max-width: none; }
}

/* ---- Mobile ------------------------------------------------------------- */
@media (max-width: 767.98px) {
    body { font-size: .9375rem; }

    .se-content { padding: 1rem .875rem 2.5rem; }

    /* Page header stacks, actions go full-width and finger-friendly */
    .se-page-head {
        flex-direction: column;
        align-items: stretch;
        gap: .875rem;
        margin-bottom: 1.125rem;
    }

    .se-page-title { font-size: 1.1875rem; }
    .se-page-actions { width: 100%; }
    .se-page-actions > .btn { flex: 1 1 auto; min-height: var(--se-tap); }

    /* Hide breadcrumbs on mobile — the topbar title carries the context */
    .se-crumbs { display: none; }

    /* Stats: two per row, tighter */
    .se-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem;
        margin-bottom: 1.125rem;
    }

    .se-stat { padding: .875rem; flex-direction: column; gap: .625rem; }
    .se-stat-icon { width: 34px; height: 34px; font-size: .875rem; }
    .se-stat-value { font-size: 1.375rem; }
    .se-stat-label { font-size: .6875rem; white-space: normal; }

    .se-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; }
    .se-quick { min-height: 84px; padding: .875rem; }

    /* Cards */
    .se-card-head { padding: .875rem 1rem; }
    .se-card-body { padding: 1rem; }
    .se-card-foot { padding: .75rem 1rem; }
    .se-app .card { border-radius: var(--se-r); }
    .se-card, .se-profile { border-radius: var(--se-r); }

    /* Forms go single column with larger targets */
    .se-form-grid,
    .se-form-grid.is-2col { grid-template-columns: minmax(0, 1fr); gap: .875rem; }
    .se-form-grid .se-span-2 { grid-column: span 1; }

    /* Control heights and the 16px input size are set at the drawer
       breakpoint above, so they cover portrait tablets too. */

    .se-form-actions {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: .5rem;
        margin-top: 1.25rem;
    }

    .se-form-actions .btn { width: 100%; min-height: var(--se-tap); }
    .se-form-actions .se-actions-spacer { display: none; }

    /* Toolbar stacks */
    .se-toolbar { padding: .75rem .875rem; gap: .5rem; }
    .se-search { flex: 1 1 100%; max-width: none; }
    .se-filter { flex: 1 1 calc(50% - .25rem); min-width: 0; }
    .se-toolbar-actions { width: 100%; }
    .se-toolbar-actions > .btn { flex: 1; min-height: var(--se-tap); }

    /* Tables: keep horizontal scroll, add an affordance */
    .se-table-wrap { margin: 0; }
    .se-app .table > thead th { padding: .625rem .75rem; }
    .se-app .table > tbody > tr > td { padding: .6875rem .75rem; }

    .se-table-foot { padding: .75rem .875rem; }

    /* Detail lists */
    .se-kv { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .875rem 1rem; }

    /* Profile header */
    .se-profile-body {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0 1rem 1.25rem;
    }

    .se-profile-meta { text-align: center; }
    .se-profile-tags { justify-content: center; }
    .se-profile-actions { width: 100%; }
    .se-profile-actions .btn { flex: 1; min-height: var(--se-tap); }

    /* Modals sit flush to the bottom like a native sheet */
    .se-app .modal-dialog {
        margin: 0;
        position: fixed;
        inset: auto 0 0 0;
        max-width: none;
    }

    .se-app .modal-content {
        border-radius: var(--se-r-lg) var(--se-r-lg) 0 0;
        border-bottom: 0;
        max-height: 92dvh;
    }

    .se-app .modal-body { overflow-y: auto; padding: 1.125rem; }
    .se-app .modal-header { padding: 1rem 1.125rem; }
    .se-app .modal-footer { padding: .875rem 1.125rem; flex-direction: column-reverse; }
    .se-app .modal-footer .btn { width: 100%; margin: 0; min-height: var(--se-tap); }

    .se-app .modal.fade .modal-dialog { transform: translateY(100%); }
    .se-app .modal.show .modal-dialog { transform: translateY(0); }

    /* Tap targets are set at the drawer breakpoint above, in one place, so
       that a portrait tablet gets the same 44px minimum a phone does. */

    .se-doc { padding: 1.75rem 1.25rem; }
    .se-doc-body { font-size: .9375rem; line-height: 1.85; text-align: left; }
    .se-doc-foot { flex-direction: column; align-items: flex-start; gap: 1.75rem; }
    .se-doc-sign { min-width: 0; width: 100%; text-align: left; }

    /* The 150px label column is wider than half a 360px screen. Stack instead. */
    .se-doc-row { grid-template-columns: minmax(0, 1fr); gap: .0625rem; }
    .se-doc-row dt { font-size: .75rem; }

    .se-status { margin: 1.5rem auto; padding: 2rem 1.25rem; }
}

/* ---- Small mobile (430 / 414 / 390 / 375 / 360) -------------------------- */
@media (max-width: 480px) {
    .se-content { padding: .875rem .75rem 2.5rem; }
    .se-topbar { padding: 0 .75rem; }

    .se-stat-grid { gap: .625rem; }
    .se-stat { padding: .8125rem; }
    .se-stat-value { font-size: 1.25rem; }

    .se-quick-grid { gap: .5rem; }
    .se-quick { min-height: 78px; padding: .75rem; }
    .se-quick-label { font-size: .75rem; }

    .se-page-title { font-size: 1.125rem; }

    /* Filters go full width rather than cramming two per row */
    .se-filter { flex: 1 1 100%; }

    .se-kv { grid-template-columns: minmax(0, 1fr); }

    .se-card-head { flex-direction: column; align-items: flex-start; gap: .625rem; }
    .se-card-head > .se-card-head-actions { width: 100%; }

    .se-user-meta { display: none; } /* avatar only in the topbar */

    /* Height comes from the drawer breakpoint; this is only the restyle. */
    .se-user {
        padding: .1875rem;
        border-color: transparent;
        background: transparent;
        justify-content: center;
    }

    .se-idcard { width: 100%; max-width: 340px; }
}

/* ---- Very narrow (≤360px) ------------------------------------------------ */
@media (max-width: 360px) {
    .se-stat-grid { grid-template-columns: minmax(0, 1fr); }
    .se-quick-grid { grid-template-columns: minmax(0, 1fr); }
    .se-topbar-title { font-size: .875rem; }
}

/* ---- Touch targets ------------------------------------------------------- */
/* Every tappable control clears 44px.
   ---------------------------------------------------------------------------
   Two conditions, either one enough. The width test is the layout's own: below
   992px the sidebar has become a drawer, so the screen is a phone or a tablet
   in portrait — 768px is an iPad. The pointer test is the real question, and
   catches what width misses: an iPad in landscape is 1024px wide and still has
   no mouse. `pointer: coarse` describes the primary input, so a laptop with a
   touchscreen and a trackpad reports `fine` and keeps its compact sizing —
   which is what someone using a trackpad wants.

   Measuring every visible control on a list turned up seven kinds that fell
   short. The icon-only ones were the worst: .se-btn-icon was 36px square with
   no label to widen it, several to a table row, and the usual way a row now
   offers Edit / Cancel / Mark exit. .se-user is the only route to sign-out and
   measured 39-41px. The rest were labelled buttons and form controls at 32-40px.

   .se-pager-link joined them when paging arrived: 34px square, and the two
   arrows carry an icon and no text, so nothing widens them either. On a phone
   they are the control you reach for most often on a long register.

   The 16px font size on inputs is a separate iOS problem: Safari zooms the page
   when you focus an input smaller than that, on iPad as well as on iPhone.

   .se-pw-toggle turned up during the staff module: 34px square, icon-only, and
   the only way to check a password you have just typed. It is handled
   differently from everything else in this block, because it is positioned
   inside the field it belongs to — growing the button itself to 44px would
   either overhang the field or push the visible pill out of the position the
   design puts it in, and it appears in four places (Account/Login,
   Staff/Login, Staff/Create, AdminUser/Create) that would all have to agree.
   So the button keeps its size and an invisible ::after carries the target,
   centred on it and landing exactly inside the 44px-tall field. Appearance,
   hover pill and focus ring are untouched; only the area that answers a tap
   grows. Noted because getBoundingClientRect() reports the button's border box
   and not the pseudo-element, so a probe re-finds this one every time — the way
   to check it is elementFromPoint at the corners of the 44px box.

   Two more turned up in the full retest, both links rather than buttons, and
   both standalone rather than inline — which is why they do not get the
   exemption the phone numbers get:

     · A card head's "All students →" / "Mark attendance →" link measured 20px
       tall. It is the action for the whole card, sitting beside the title, so it
       has the job of a button and needs the target of one. Written as a direct
       child selector on purpose: the same class is used *inside* prose on
       PromoteStudent/Index ("use bulk promotion instead") and Attendance/Stats
       ("use the daily report"), where the link is one word in a sentence and
       stretching it would prise the sentence apart. A direct child of the head
       is the standalone case; anything wrapped in a <p> or an <li> is the inline
       case and is left alone.
     · The dashboard activity feed's title link measured 17px tall and 93-162px
       wide — the smallest target in the product, eight of them stacked, and the
       only way into the record each line is about.

   Deliberately left alone: a phone number in a table's secondary line is an
   inline link inside a sentence, and stretching it to 44px would push the text
   of the row apart to no benefit — WCAG exempts inline links for exactly that
   reason. A crumb in .se-crumbs is the same case and gets the same exemption:
   it measures 14px tall, but it sits in a line of text between non-target words
   and separators, so its height is set by that line — the exact wording of the
   exception. Stretching it would make the crumb row 44px tall and push the page
   title down the screen on every page in the product. Below 768px the row is
   hidden outright (see .se-crumbs above), so this only concerns tablets.
   Same for .se-brand in the drawer: 32px tall, but 248px wide, so there
   is nothing to miss. And the checkbox in .se-check-card measures 17px square,
   but it is wrapped in a <label> that measures 44x318 and toggles it — the
   target is the card, not the box, so growing the box would only make the
   design worse. Recorded because a probe that measures inputs rather than
   labels re-finds all three every time. */
@media (max-width: 991.98px), (pointer: coarse) {
    .se-btn-icon { width: var(--se-tap); height: var(--se-tap); min-height: var(--se-tap); }
    .se-user { min-height: var(--se-tap); }
    .se-nav-link { min-height: var(--se-tap); }

    /* Standalone card action — not the inline-in-prose use of the same class. */
    .se-card-head > .se-card-link,
    .se-card-foot > .se-card-link { min-height: var(--se-tap); }

    /* Activity feed row link: full width of the row so the whole line is the
       target, not just the characters in the title. */
    .se-timeline-title a {
        display: flex;
        align-items: center;
        min-height: var(--se-tap);
    }

    .se-app .btn { min-height: var(--se-tap); }
    .se-app .btn-sm { min-height: var(--se-tap); }

    .se-pager-link { min-width: var(--se-tap); height: var(--se-tap); }
    .se-pager-gap { min-width: 1.75rem; }

    /* The reveal button sits inside the password field, so the target grows
       rather than the button — see the note above this block. The field is 44px
       tall here (the rule below), and the button is centred in it, so a 44px
       box centred on the button lands exactly within the field: nothing
       overhangs, and nothing moves. */
    .se-pw-toggle::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: var(--se-tap);
        height: var(--se-tap);
        transform: translate(-50%, -50%);
    }

    .se-app .form-control,
    .se-app .form-select { min-height: var(--se-tap); font-size: 1rem; }
}

/* Short viewports (landscape phones) */
@media (max-height: 560px) and (max-width: 991.98px) {
    .se-nav { padding-top: .5rem; }
    .se-nav-title { padding-top: .5rem; }
}


/* ==========================================================================
   21. ACCESSIBILITY & MOTION
   ========================================================================== */

.se-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip link — the first thing a keyboard user reaches, so it gets the same
   minimum as everything else rather than whatever its padding happened to add
   up to (42px). It is off-screen until focused, so this changes nothing seen. */
.se-skip {
    position: absolute;
    top: -60px;
    left: 12px;
    z-index: 1100;
    display: inline-flex;
    align-items: center;
    min-height: var(--se-tap);
    background: var(--se-primary);
    color: #fff;
    padding: .625rem 1rem;
    border-radius: var(--se-r-sm);
    font-size: .875rem;
    font-weight: 600;
    transition: top .18s ease;
}

.se-skip:focus {
    top: 12px;
    color: #fff;
}

/* Consistent visible focus everywhere */
.se-app a:focus-visible,
.se-app button:focus-visible,
.se-app [tabindex]:focus-visible {
    outline: 2px solid var(--se-primary);
    outline-offset: 2px;
    border-radius: var(--se-r-sm);
}

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

@media (prefers-contrast: more) {
    :root {
        --se-border: #b7bdcc;
        --se-border-strong: #8c94a8;
        --se-ink-500: #3d4759;
    }
}


/* ==========================================================================
   22. APP FOOTER
   ========================================================================== */

.se-foot {
    flex-shrink: 0;
    padding: 1rem 1.75rem;
    border-top: 1px solid var(--se-border);
    background: var(--se-surface);
    font-size: .75rem;
    color: var(--se-ink-500);
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.se-foot-brand strong { color: var(--se-ink-700); font-weight: 650; }
.se-foot-sep { color: var(--se-ink-400); }

.se-brand-row {
    display: flex;
    align-items: center;
    height: var(--se-topbar-h);
    padding-right: .5rem;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    flex-shrink: 0;
}

.se-brand-row .se-brand {
    flex: 1;
    min-width: 0;
    border-bottom: 0;
    height: auto;
}

.se-user-caret {
    font-size: .5625rem;
    color: var(--se-ink-400);
    margin-right: .1875rem;
    flex-shrink: 0;
}

.se-school-chip {
    max-width: 220px;
    overflow: hidden;
}

.se-school-chip > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Edge fade hinting that a table scrolls horizontally. The class is put on by
   initTableScroll() in stoneedu.js when the table is wider than its wrapper.

   The attachment has to be "scroll" — the default — and not "local": inside a
   scroll container "local" anchors the background to the content, so the fade
   travelled with the table and only reached the visible edge once you had
   already scrolled to the end, which is the one moment is-scrolled-end takes it
   away again. It was drawn correctly and never once seen. "scroll" anchors it to
   the wrapper's own box, so it sits at the visible right edge and the columns
   pass underneath it. */
.se-table-wrap.is-scrollable {
    background-image: linear-gradient(to left, rgba(16, 24, 40, .07), rgba(16, 24, 40, 0) 24px);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 24px 100%;
    background-attachment: scroll;
}

.se-table-wrap.is-scrolled-end { background-image: none; }


/* ==========================================================================
   23. AUTHENTICATION SCREENS
   ========================================================================== */

body.se-auth {
    background: var(--se-canvas);
    min-height: 100vh;
    min-height: 100dvh;
}

.se-auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
}

/* ---- Brand panel ---- */
.se-auth-brand {
    background:
        radial-gradient(circle at 78% 12%, rgba(49, 81, 211, .38) 0%, rgba(49, 81, 211, 0) 46%),
        radial-gradient(circle at 12% 88%, rgba(13, 148, 136, .26) 0%, rgba(13, 148, 136, 0) 44%),
        linear-gradient(158deg, var(--se-stone-900) 0%, var(--se-stone-800) 58%, #0c1120 100%);
    background-color: var(--se-stone-900);
    color: #fff;
    padding: 2.75rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

/* Subtle grid texture — no heavy imagery, no extra requests */
.se-auth-brand::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
    background-size: 44px 44px;
    pointer-events: none;
}

.se-auth-brand-top,
.se-auth-brand-mid,
.se-auth-brand-foot { position: relative; z-index: 1; }

.se-auth-brand-top {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.se-auth-mark {
    width: 36px;
    height: 36px;
    font-size: 1.0625rem;
}

.se-auth-brand-name {
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #fff;
}

.se-auth-logo-badge {
    background: #ffffff;
    padding: 10px 18px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
    margin-bottom: 2rem;
}

.se-auth-logo-badge img {
    height: 52px;
    max-width: 100%;
    object-fit: contain;
}

.se-auth-card-logo {
    text-align: center;
    margin-bottom: 1.25rem;
}

.se-auth-card-logo img {
    height: 56px;
    max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .08));
}

.se-auth-headline {
    font-size: 2.125rem;
    font-weight: 680;
    letter-spacing: -.032em;
    line-height: 1.18;
    color: #fff;
    margin: 0 0 .875rem;
    max-width: 20ch;
}

.se-auth-lede {
    font-size: .9375rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, .72);
    max-width: 42ch;
    margin: 0 0 2rem;
}

.se-auth-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .8125rem;
}

.se-auth-points li {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .875rem;
    color: rgba(255, 255, 255, .82);
    font-weight: 500;
}

.se-auth-points i {
    width: 30px;
    height: 30px;
    border-radius: var(--se-r-sm);
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #fff;
    font-size: .75rem;
    flex-shrink: 0;
}

.se-auth-brand-foot {
    font-size: .75rem;
    color: rgba(255, 255, 255, .48);
    margin: 0;
    letter-spacing: .01em;
}

/* ---- Form panel ---- */
.se-auth-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 2rem;
    background: var(--se-surface);
}

.se-auth-card {
    width: 100%;
    max-width: 392px;
}

.se-auth-mobile-brand {
    display: none;
    align-items: center;
    gap: .625rem;
    margin-bottom: 1.75rem;
}

.se-auth-mobile-brand .se-brand-name { color: var(--se-ink-900); font-size: 1.0625rem; }
.se-auth-mobile-brand .se-brand-sub { color: var(--se-ink-500); }

.se-auth-title {
    font-size: 1.5rem;
    font-weight: 680;
    letter-spacing: -.026em;
    color: var(--se-ink-900);
    margin: 0 0 .375rem;
}

.se-auth-sub {
    font-size: .875rem;
    color: var(--se-ink-500);
    margin: 0 0 1.75rem;
}

.se-auth-form { display: grid; gap: 1.125rem; }

.se-auth-form .btn { width: 100%; min-height: 44px; font-size: .9375rem; }

.se-auth-legal {
    font-size: .75rem;
    color: var(--se-ink-400);
    margin: 2.25rem 0 0;
    text-align: center;
}

/* Password field with reveal toggle */
.se-pw { position: relative; }

.se-pw .form-control { padding-right: 2.75rem; }

.se-pw-toggle {
    position: absolute;
    right: .3125rem;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--se-ink-400);
    border-radius: var(--se-r-sm);
    font-size: .8125rem;
}

.se-pw-toggle:hover { color: var(--se-ink-700); background: var(--se-surface-3); }
.se-pw-toggle:focus-visible { outline: none; box-shadow: var(--se-ring); }

/* Credential hint block on the sign-in screen */
.se-auth-note {
    margin-top: 1.5rem;
    padding: .8125rem .9375rem;
    border: 1px dashed var(--se-border-strong);
    border-radius: var(--se-r);
    background: var(--se-surface-2);
    font-size: .75rem;
    color: var(--se-ink-500);
    line-height: 1.6;
}

.se-auth-note strong { color: var(--se-ink-700); }

@media (max-width: 991.98px) {
    .se-auth-shell { grid-template-columns: minmax(0, 1fr); }
    .se-auth-brand { display: none; }
    .se-auth-mobile-brand { display: flex; }
    .se-auth-panel {
        min-height: 100vh;
        min-height: 100dvh;
        justify-content: flex-start;
        padding-top: 3rem;
        background: var(--se-canvas);
    }
    .se-auth-card {
        background: var(--se-surface);
        border: 1px solid var(--se-border);
        border-radius: var(--se-r-lg);
        box-shadow: var(--se-shadow-1);
        padding: 1.75rem 1.5rem;
        max-width: 440px;
    }
}

@media (max-width: 575.98px) {
    .se-auth-panel { padding: 1.75rem 1rem; }
    .se-auth-card { padding: 1.5rem 1.125rem; border-radius: var(--se-r); }
    .se-auth-title { font-size: 1.3125rem; }
    .se-auth-form .form-control { min-height: var(--se-tap); font-size: 1rem; }
}

@media (max-width: 1200px) {
    .se-auth-brand { padding: 2.25rem 2.25rem; }
    .se-auth-headline { font-size: 1.875rem; }
}

@media (max-width: 767.98px) {
    .se-foot {
        padding: .875rem 1rem 1.5rem;
        font-size: .6875rem;
        justify-content: center;
        text-align: center;
    }
}


/* ==========================================================================
   24. BLANK SHELL (status / error pages outside the app chrome)
   ========================================================================== */

.se-foot-brand { color: var(--se-ink-700); font-weight: 650; }

.se-blank-shell {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--se-canvas);
}

.se-blank-head {
    flex-shrink: 0;
    padding: 1.125rem 1.75rem;
    border-bottom: 1px solid var(--se-border);
    background: var(--se-surface);
}

.se-blank-head .se-brand {
    height: auto;
    padding: 0;
    border-bottom: 0;
    color: var(--se-ink-900);
    width: -moz-fit-content;
    width: fit-content;
}

.se-blank-head .se-brand:hover { color: var(--se-ink-900); }
.se-blank-head .se-brand-name { color: var(--se-ink-900); }
.se-blank-head .se-brand-sub { color: var(--se-ink-400); }

.se-blank-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
}

.se-blank-body > * { width: 100%; }

.se-blank-foot {
    flex-shrink: 0;
    padding: 1rem 1.75rem;
    border-top: 1px solid var(--se-border);
    background: var(--se-surface);
    font-size: .75rem;
    color: var(--se-ink-500);
    text-align: center;
}

@media (max-width: 767.98px) {
    .se-blank-head { padding: .875rem 1rem; }
    .se-blank-body { padding: 1.5rem 1rem; }
    .se-blank-foot { padding: .875rem 1rem 1.5rem; font-size: .6875rem; }
}


/* ==========================================================================
   25. MINI CHARTS  (CSS only — no charting library)
   ========================================================================== */

.se-bars {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    height: 148px;
}

.se-bar {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .375rem;
    height: 100%;
}

.se-bar-track {
    flex: 1;
    width: 100%;
    max-width: 44px;
    background: var(--se-surface-3);
    border-radius: var(--se-r-sm);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.se-bar-fill {
    width: 100%;
    background: var(--se-primary);
    border-radius: var(--se-r-sm);
    min-height: 3px;
    transition: height .5s cubic-bezier(.4, 0, .2, 1);
}

.se-bar-fill.is-success { background: var(--se-success); }
.se-bar-fill.is-warning { background: var(--se-warning); }
.se-bar-fill.is-danger { background: var(--se-danger); }
.se-bar-fill.is-empty { background: var(--se-border-strong); }

.se-bar-value {
    font-family: var(--se-font-num);
    font-size: .75rem;
    font-weight: 650;
    color: var(--se-ink-700);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.se-bar-value.is-empty { color: var(--se-ink-400); font-weight: 500; }

.se-bar-label {
    font-size: .6875rem;
    color: var(--se-ink-400);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

/* Horizontal ranked bars (class strength, status breakdown) */
.se-rank { list-style: none; margin: 0; padding: 0; display: grid; gap: .875rem; }

.se-rank-item { display: grid; gap: .375rem; }

.se-rank-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
}

.se-rank-label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--se-ink-800);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.se-rank-value {
    font-family: var(--se-font-num);
    font-size: .8125rem;
    font-weight: 650;
    color: var(--se-ink-900);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* Split present / absent read-out */
.se-splitstat {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: 1rem;
    margin-bottom: 1.125rem;
}

.se-splitstat-item { min-width: 0; }

.se-splitstat-key {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .055em;
    text-transform: uppercase;
    color: var(--se-ink-400);
    margin: 0 0 .1875rem;
}

.se-splitstat-val {
    font-family: var(--se-font-num);
    font-size: 1.375rem;
    font-weight: 680;
    letter-spacing: -.025em;
    line-height: 1.1;
    color: var(--se-ink-900);
    font-variant-numeric: tabular-nums;
}

.se-splitstat-val.is-success { color: var(--se-success); }
.se-splitstat-val.is-danger { color: var(--se-danger); }
.se-splitstat-val.is-muted { color: var(--se-ink-400); }

/* Added for the staff register's "Not marked" tile, which needed a third tone: a gap in
   the register is not a failure the way an absence is — nobody has said anything yet —
   but it is not neutral either, because it is the one figure on the page that means
   somebody still has work to do. The other three tiles could not say that. */
.se-splitstat-val.is-warning { color: var(--se-warning); }

@media (max-width: 575.98px) {
    .se-bars { height: 124px; gap: .3125rem; }
    .se-bar-value { font-size: .6875rem; }
    .se-bar-label { font-size: .625rem; }
}

/* ==========================================================================
   24. DARK SAAS THEME (STUDENTS REGISTER & MODERN DASHBOARD)
   ========================================================================== */

body.se-dark-theme,
.se-dark-theme {
    background-color: #060b19 !important;
    color: #e2e8f0 !important;
}

.se-dark-theme .se-main {
    background-color: #060b19;
}

.se-dark-theme .se-content {
    background-color: #060b19;
}

/* Sidebar */
.se-dark-theme .se-sidebar {
    background: #060c1d !important;
    border-right: 1px solid #14203e !important;
}

.se-dark-theme .se-brand {
    border-bottom: 1px solid #14203e !important;
    padding: 0.875rem 1.25rem;
    height: 72px;
}

.se-dark-theme .se-brand-img {
    width: 38px;
    height: 38px;
    background: #ffffff;
    border-radius: 10px;
    padding: 3px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.se-dark-theme .se-brand-name {
    font-size: 1.125rem;
    font-weight: 750;
    color: #ffffff;
    letter-spacing: -0.02em;
}

.se-dark-theme .se-brand-sub {
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    color: #38bdf8;
    font-weight: 700;
}

.se-dark-theme .se-nav-title {
    color: #64748b;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 1.125rem 0.875rem 0.375rem;
}

.se-dark-theme .se-nav-link {
    color: #94a3b8;
    border-radius: 10px;
    font-weight: 500;
    font-size: 0.9375rem;
    margin-bottom: 3px;
    transition: all 0.2s ease;
}

.se-dark-theme .se-nav-link:hover {
    background: #0f1c3b;
    color: #ffffff;
}

.se-dark-theme .se-nav-link.is-active {
    background: #2563eb !important;
    color: #ffffff !important;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.45);
}

.se-dark-theme .se-nav-link.is-active i {
    color: #ffffff !important;
}

/* Sidebar Bottom Promo Card */
.se-sidebar-promo-card {
    background: linear-gradient(145deg, #0d1836 0%, #081024 100%);
    border: 1px solid #1a2954;
    border-radius: 14px;
    padding: 14px 16px;
    margin: 1rem 0.875rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: relative;
    overflow: hidden;
}

.se-sidebar-promo-card .promo-text {
    font-size: 0.775rem;
    color: #93c5fd;
    font-weight: 600;
    line-height: 1.35;
}

.se-sidebar-promo-card .promo-icon {
    font-size: 1.75rem;
    color: #3b82f6;
    opacity: 0.85;
    filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.6));
}

/* Topbar */
.se-dark-theme .se-topbar {
    background: #070d1e !important;
    border-bottom: 1px solid #14203e !important;
    padding: 0 1.75rem;
    height: 72px;
}

.se-topbar-dark-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.se-hamburger-btn-dark {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #0f1c3d;
    border: 1px solid #1e305e;
    color: #94a3b8;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.se-hamburger-btn-dark:hover {
    color: #ffffff;
    border-color: #3b82f6;
}

.se-topbar-page-info .topbar-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.15;
    margin: 0;
}

.se-topbar-page-info .topbar-crumb {
    font-size: 0.775rem;
    color: #64748b;
    margin: 2px 0 0;
}

.se-topbar-page-info .topbar-crumb span {
    color: #94a3b8;
}

/* Global Search in Topbar */
.se-topbar-search {
    position: relative;
    width: 340px;
    margin-left: 2rem;
}

.se-topbar-search input {
    background: #0c152d;
    border: 1px solid #1a2952;
    border-radius: 10px;
    color: #ffffff;
    font-size: 0.875rem;
    padding: 8px 14px 8px 38px;
    width: 100%;
    transition: all 0.2s ease;
}

.se-topbar-search input:focus {
    background: #0f1c3d;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
    outline: none;
}

.se-topbar-search .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    font-size: 0.875rem;
}

.se-topbar-search .kbd-badge {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: #162448;
    border: 1px solid #233566;
    color: #94a3b8;
    border-radius: 6px;
    padding: 2px 7px;
    font-size: 0.6875rem;
    font-weight: 600;
}

/* Right Topbar Elements */
.se-school-badge-dark {
    background: #0c152d;
    border: 1px solid #1a2952;
    border-radius: 10px;
    color: #cbd5e1;
    padding: 8px 14px;
    font-size: 0.8125rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.15s ease;
}

.se-school-badge-dark:hover {
    color: #ffffff;
    border-color: #3b82f6;
}

.se-notif-btn-dark {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #0c152d;
    border: 1px solid #1a2952;
    color: #94a3b8;
    display: grid;
    place-items: center;
    position: relative;
    cursor: pointer;
    transition: all 0.15s ease;
}

.se-notif-btn-dark:hover {
    color: #ffffff;
    background: #111e40;
}

.se-notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #2563eb;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 2px solid #070d1e;
}

.se-user-pill-dark {
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: none;
    padding: 4px 8px;
    cursor: pointer;
}

.se-user-avatar-dark {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #2563eb;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.9375rem;
    display: grid;
    place-items: center;
    box-shadow: 0 0 12px rgba(37, 99, 235, 0.5);
}

.se-user-info-dark {
    text-align: left;
    line-height: 1.25;
}

.se-user-info-dark .u-name {
    font-size: 0.875rem;
    font-weight: 700;
    color: #ffffff;
    display: block;
}

.se-user-info-dark .u-role {
    font-size: 0.75rem;
    color: #64748b;
    display: block;
}

/* Stat Cards & Page Header Row */
.se-dark-metrics-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 16px;
    align-items: center;
    margin-bottom: 24px;
}

@media (max-width: 1300px) {
    .se-dark-metrics-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .se-dark-metrics-row {
        grid-template-columns: 1fr;
    }
}

.se-dark-metric-card {
    background: linear-gradient(145deg, #0e1a38 0%, #081124 100%);
    border: 1px solid #1b2c58;
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.se-dark-metric-card:hover {
    transform: translateY(-2px);
    border-color: #2b4588;
}

.se-metric-glow-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    color: #ffffff;
    flex-shrink: 0;
}

.se-metric-glow-icon.is-blue {
    background: radial-gradient(circle, #3b82f6 0%, #1d4ed8 100%);
    box-shadow: 0 0 16px rgba(59, 130, 246, 0.45);
}

.se-metric-glow-icon.is-green {
    background: radial-gradient(circle, #10b981 0%, #047857 100%);
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.45);
}

.se-metric-glow-icon.is-purple {
    background: radial-gradient(circle, #8b5cf6 0%, #6d28d9 100%);
    box-shadow: 0 0 16px rgba(139, 92, 246, 0.45);
}

.se-metric-glow-icon.is-amber {
    background: radial-gradient(circle, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.45);
}

.se-dark-metric-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.se-dark-metric-title {
    font-size: 0.775rem;
    color: #8fa0bd;
    font-weight: 500;
    margin-bottom: 2px;
}

.se-dark-metric-val {
    font-size: 1.5rem;
    font-weight: 750;
    color: #ffffff;
    line-height: 1.1;
    font-family: var(--se-font-num);
}

.se-dark-metric-sub {
    font-size: 0.7rem;
    color: #64748b;
    margin-top: 2px;
}

/* Action Buttons */
.se-dark-action-group {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-end;
}

.btn-dark-secondary {
    background: #0d1733;
    border: 1px solid #20315e;
    color: #ffffff;
    border-radius: 10px;
    padding: 11px 20px;
    font-size: 0.875rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-dark-secondary:hover {
    background: #14224a;
    border-color: #314b8a;
    color: #ffffff;
}

.btn-dark-primary {
    background: #2563eb;
    border: 1px solid #3b82f6;
    color: #ffffff;
    border-radius: 10px;
    padding: 11px 22px;
    font-size: 0.875rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.45);
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-dark-primary:hover {
    background: #1d4ed8;
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.6);
}

/* Filter Toolbar */
.se-dark-filter-bar {
    background: #091228;
    border: 1px solid #16244c;
    border-radius: 12px;
    padding: 10px 16px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.se-dark-search-input {
    flex: 1;
    min-width: 250px;
    position: relative;
    display: flex;
    align-items: center;
}

.se-dark-search-input i {
    position: absolute;
    left: 12px;
    color: #64748b;
    font-size: 0.875rem;
}

.se-dark-search-input input {
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 0.875rem;
    width: 100%;
    padding: 6px 12px 6px 36px;
    outline: none;
}

.se-dark-search-input input::placeholder {
    color: #64748b;
}

.se-dark-select {
    background: #0f1c3d;
    border: 1px solid #1e305e;
    color: #cbd5e1;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 0.8125rem;
    min-width: 130px;
    outline: none;
    cursor: pointer;
}

.se-dark-select:focus {
    border-color: #3b82f6;
}

.se-dark-filter-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #0f1c3d;
    border: 1px solid #1e305e;
    color: #94a3b8;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.se-dark-filter-btn:hover {
    color: #ffffff;
    border-color: #3b82f6;
}

/* Table Container & Table */
.se-dark-table-card {
    background: #070e22;
    border: 1px solid #142145;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.se-dark-table-card .table {
    margin-bottom: 0;
    color: #cbd5e1;
    border-collapse: separate;
    border-spacing: 0;
}

.se-dark-table-card thead th {
    background: transparent;
    color: #64748b;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 14px 18px;
    border-bottom: 1px solid #142145;
    border-top: none;
}

.se-dark-table-card tbody tr {
    transition: background 0.15s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.se-dark-table-card tbody tr:last-child {
    border-bottom: none;
}

.se-dark-table-card tbody tr:hover {
    background: rgba(26, 42, 84, 0.35) !important;
}

.se-dark-table-card tbody td {
    padding: 14px 18px;
    vertical-align: middle;
    border-top: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* Student Cell */
.se-student-identity-dark {
    display: flex;
    align-items: center;
    gap: 12px;
}

.se-student-avatar-img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #1e305e;
    background: #0f1c3d;
}

.se-student-avatar-fallback {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1e305e 0%, #0f1c3d 100%);
    border: 2px solid #23376a;
    color: #ffffff;
    font-weight: 700;
    font-size: 1rem;
    display: grid;
    place-items: center;
}

.se-student-name-dark {
    color: #ffffff;
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.25;
}

.se-student-adm-dark {
    color: #71829d;
    font-size: 0.775rem;
    font-family: var(--se-font-num);
}

/* Class Cell */
.se-class-main-dark {
    color: #ffffff;
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.25;
}

.se-class-sub-dark {
    color: #71829d;
    font-size: 0.775rem;
}

/* Parents Cell */
.se-parent-father-dark {
    color: #ffffff;
    font-size: 0.9375rem;
    line-height: 1.25;
}

.se-parent-mother-dark {
    color: #71829d;
    font-size: 0.775rem;
}

/* Mobile & Date */
.se-text-white-num {
    color: #cbd5e1;
    font-size: 0.875rem;
    font-family: var(--se-font-num);
}

.se-text-admit-dark {
    color: #cbd5e1;
    font-size: 0.8125rem;
    font-family: var(--se-font-num);
}

/* Status Pill */
.se-status-pill-green {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #34d399;
    font-size: 0.775rem;
    font-weight: 600;
    border-radius: 20px;
    padding: 4px 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.se-status-pill-green .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 6px #10b981;
}

.se-status-pill-gray {
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: #94a3b8;
    font-size: 0.775rem;
    font-weight: 600;
    border-radius: 20px;
    padding: 4px 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.se-status-pill-gray .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #94a3b8;
}

/* Table Row Action Buttons */
.se-dark-action-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #0f1c3d;
    border: 1px solid #1e305e;
    color: #94a3b8;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-right: 4px;
    text-decoration: none;
}

.se-dark-action-btn:hover {
    color: #ffffff;
    background: #172a59;
    border-color: #3b82f6;
}

/* Table Footer / Pager */
.se-dark-table-foot {
    padding: 14px 20px;
    border-top: 1px solid #142145;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #71829d;
    font-size: 0.8125rem;
    flex-wrap: wrap;
    gap: 12px;
}

.se-dark-table-foot strong {
    color: #ffffff;
}

.se-dark-pager-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.se-dark-page-btn {
    min-width: 32px;
    height: 32px;
    border-radius: 6px;
    background: #0f1c3d;
    border: 1px solid #1e305e;
    color: #94a3b8;
    display: inline-grid;
    place-items: center;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}

.se-dark-page-btn:hover {
    color: #ffffff;
    background: #172a59;
}

.se-dark-page-btn.is-active {
    background: #2563eb;
    border-color: #3b82f6;
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.4);
}

.se-dark-theme .dropdown-menu {
    background: #0b1530 !important;
    border: 1px solid #1c2e5a !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5) !important;
}

.se-dark-theme .dropdown-item {
    color: #cbd5e1 !important;
}

.se-dark-theme .dropdown-item:hover {
    background: #14244d !important;
    color: #ffffff !important;
}

.se-dark-theme .dropdown-divider {
    border-color: #1c2e5a !important;
}

.se-dark-theme .se-foot {
    background: #060b19 !important;
    border-top: 1px solid #14203e !important;
    color: #64748b !important;
}

/* ==========================================================================
   26. PREMIUM DARK SAAS DESIGN SYSTEM — SYSTEM-WIDE OVERRIDE
   --------------------------------------------------------------------------
   This section transforms the entire ERP into a premium dark navy SaaS
   product. It works by overriding the CSS custom property tokens on
   body.se-dark-theme (already set by _Layout.cshtml), which causes every
   existing component to inherit the dark palette without markup changes.

   Color system:
     Primary Blue:  #1769FF / #246BFF  — actions, focus, active states
     Orange:        #FF8A00 / #FF9800  — HOVER only: nav, buttons, cards
     Background:    #050B18 / #071226 / #0A1630
     Card surface:  #0B1933 / #0D1D39
     Border:        rgba(255,255,255,0.08)

   Orange is ONLY for hover/micro-interaction. Never replaces blue as brand.
   ========================================================================== */


/* ==========================================================================
   26.A  DARK PALETTE TOKEN OVERRIDE
   Every existing component reads --se-* variables, so overriding here
   propagates to all 30+ views without touching a single .cshtml file.
   ========================================================================== */

body.se-dark-theme {
    /* Primary brand — keep pure electric blue */
    --se-primary:          #1769FF;
    --se-primary-600:      #246BFF;
    --se-primary-700:      #1255D4;
    --se-primary-100:      rgba(23, 105, 255, 0.18);
    --se-primary-50:       rgba(23, 105, 255, 0.08);

    /* Orange — hover / micro-interaction only */
    --se-orange:           #FF8A00;
    --se-orange-600:       #FF9800;
    --se-orange-dim:       rgba(255, 138, 0, 0.10);
    --se-orange-border:    rgba(255, 138, 0, 0.35);

    /* Accent mapped to electric blue in dark mode */
    --se-accent:           #2F80FF;
    --se-accent-600:       #1769FF;
    --se-accent-50:        rgba(47, 128, 255, 0.08);

    /* Semantic — adjusted for dark surfaces */
    --se-success:          #22C55E;
    --se-success-bg:       rgba(34, 197, 94, 0.10);
    --se-success-br:       rgba(34, 197, 94, 0.30);
    --se-warning:          #F59E0B;
    --se-warning-bg:       rgba(245, 158, 11, 0.10);
    --se-warning-br:       rgba(245, 158, 11, 0.30);
    --se-danger:           #EF4444;
    --se-danger-bg:        rgba(239, 68, 68, 0.10);
    --se-danger-br:        rgba(239, 68, 68, 0.30);
    --se-info:             #38BDF8;
    --se-info-bg:          rgba(56, 189, 248, 0.10);
    --se-info-br:          rgba(56, 189, 248, 0.30);
    --se-neutral:          #94A3B8;
    --se-neutral-bg:       rgba(148, 163, 184, 0.10);
    --se-neutral-br:       rgba(148, 163, 184, 0.25);

    /* Surfaces — dark navy */
    --se-canvas:           #050B18;
    --se-surface:          #0B1933;
    --se-surface-2:        #0D1D39;
    --se-surface-3:        #0A1630;

    /* Borders */
    --se-border:           rgba(255, 255, 255, 0.08);
    --se-border-strong:    rgba(255, 255, 255, 0.14);

    /* Text hierarchy */
    --se-ink-900:          #FFFFFF;
    --se-ink-800:          #E2E8F0;
    --se-ink-700:          #CBD5E1;
    --se-ink-600:          #94A3B8;
    --se-ink-500:          #64748B;
    --se-ink-400:          #475569;

    /* Stone (sidebar) */
    --se-stone-900:        #050B18;
    --se-stone-800:        #071226;
    --se-stone-700:        #0A1630;
    --se-stone-600:        #0D1D39;
    --se-stone-400:        #64748B;
    --se-stone-300:        #94A3B8;

    /* Elevation */
    --se-shadow-1:         0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
    --se-shadow-2:         0 8px 24px rgba(0,0,0,.5), 0 3px 8px rgba(0,0,0,.35);

    /* Focus */
    --se-ring:             0 0 0 3px rgba(23,105,255,.22);

    /* Bootstrap */
    --bs-body-bg:          #050B18;
    --bs-body-color:       #CBD5E1;
    --bs-border-color:     rgba(255,255,255,0.08);
    --bs-link-color:       #1769FF;
    --bs-link-hover-color: #FF8A00;
}


/* ==========================================================================
   26.B  BASE SURFACE
   ========================================================================== */

body.se-dark-theme { background-color: #050B18; color: #CBD5E1; }
body.se-dark-theme .se-main { background-color: #050B18; }
body.se-dark-theme .se-content { background-color: #050B18; }


/* ==========================================================================
   26.C  SIDEBAR — DARK PREMIUM WITH ORANGE HOVER + ::before ACCENT BAR
   ========================================================================== */

body.se-dark-theme .se-sidebar {
    background: linear-gradient(180deg, #060e22 0%, #050B18 100%) !important;
    border-right: 1px solid rgba(255,255,255,0.06) !important;
}

body.se-dark-theme .se-brand { color: #fff; border-bottom: 1px solid rgba(255,255,255,0.06) !important; }
body.se-dark-theme .se-brand:hover { color: #fff; }

body.se-dark-theme .se-brand-img {
    width: 36px; height: 36px; border-radius: 10px;
    background: #fff; padding: 3px;
    box-shadow: 0 4px 14px rgba(0,0,0,.45); object-fit: contain;
}

body.se-dark-theme .se-brand-name {
    color: #fff; font-weight: 750; font-size: 1.0625rem; letter-spacing: -.02em;
}

body.se-dark-theme .se-brand-sub {
    color: #38BDF8; font-size: .625rem; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase;
}

body.se-dark-theme .se-nav-title {
    color: #475569; font-size: .625rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    padding: 1.125rem 1rem .375rem;
}

/* Nav links base */
body.se-dark-theme .se-nav-link {
    color: #94A3B8; border-radius: 10px; font-size: .875rem;
    font-weight: 500; margin-bottom: 2px; padding: .5625rem .875rem;
    transition: all .2s ease; position: relative; overflow: hidden;
    border: 1px solid transparent;
}

body.se-dark-theme .se-nav-link > i {
    color: #64748B; transition: color .2s ease; width: 18px;
    text-align: center; font-size: .875rem;
}

/* ::before — orange left accent bar */
body.se-dark-theme .se-nav-link::before {
    content: "";
    position: absolute; left: 0; top: 50%;
    width: 3px; height: 0;
    transform: translateY(-50%);
    background: #FF8A00;
    border-radius: 0 4px 4px 0;
    transition: height .2s ease;
}

/* ORANGE HOVER */
body.se-dark-theme .se-nav-link:hover {
    background: rgba(255,138,0,.08);
    border-color: rgba(255,138,0,.20);
    color: #fff;
}
body.se-dark-theme .se-nav-link:hover > i { color: #FF8A00; }
body.se-dark-theme .se-nav-link:hover::before { height: 60%; }

/* ACTIVE — blue gradient */
body.se-dark-theme .se-nav-link.is-active {
    background: linear-gradient(135deg, #1769FF 0%, #246BFF 100%) !important;
    color: #fff !important; font-weight: 600;
    border-color: rgba(23,105,255,.4) !important;
    box-shadow: 0 4px 16px rgba(23,105,255,.35);
}
body.se-dark-theme .se-nav-link.is-active > i { color: #fff !important; }
body.se-dark-theme .se-nav-link.is-active::before { background: rgba(255,255,255,.6); height: 60%; }

body.se-dark-theme .se-side-foot { border-top: 1px solid rgba(255,255,255,.06); }
body.se-dark-theme .se-side-foot-brand { color: #475569; }
body.se-dark-theme .se-side-foot-brand strong { color: #64748B; }

body.se-dark-theme .se-drawer-close { color: #94A3B8; background: transparent; }
body.se-dark-theme .se-drawer-close:hover { background: rgba(255,138,0,.08); color: #FF8A00; }

body.se-dark-theme .se-nav-count { background: rgba(23,105,255,.20); color: #60A5FA; }
body.se-dark-theme .se-nav-link.is-active .se-nav-count { background: rgba(255,255,255,.25); }


/* ==========================================================================
   26.D  TOPBAR
   ========================================================================== */

body.se-dark-theme .se-topbar {
    background: #071226 !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    backdrop-filter: none;
}

body.se-dark-theme .se-topbar-title { color: #fff; }

body.se-dark-theme .se-hamburger { color: #94A3B8; border-radius: 8px; }
body.se-dark-theme .se-hamburger:hover { background: rgba(255,138,0,.08); color: #FF8A00; }

body.se-dark-theme .se-icon-btn { color: #94A3B8; background: transparent; border-color: transparent; }
body.se-dark-theme .se-icon-btn:hover { background: rgba(255,138,0,.08); color: #FF8A00; border-color: rgba(255,138,0,.20); }

body.se-dark-theme .se-user {
    background: rgba(13,29,57,.8); border-color: rgba(255,255,255,.10); color: #CBD5E1;
}
body.se-dark-theme .se-user:hover { border-color: rgba(255,138,0,.35); background: rgba(255,138,0,.05); color: #fff; }
body.se-dark-theme .se-user-name { color: #fff; }
body.se-dark-theme .se-user-role { color: #64748B; }
body.se-dark-theme .se-user-caret { color: #475569; }


/* ==========================================================================
   26.E  PAGE HEADER & BREADCRUMBS
   ========================================================================== */

body.se-dark-theme .se-page-title { color: #fff; }
body.se-dark-theme .se-page-sub { color: #64748B; }
body.se-dark-theme .se-crumbs a { color: #64748B; }
body.se-dark-theme .se-crumbs a:hover { color: #FF8A00; }
body.se-dark-theme .se-crumbs .se-crumb-sep { color: #475569; }
body.se-dark-theme .se-crumbs .is-current { color: #94A3B8; }


/* ==========================================================================
   26.F  CARDS & SURFACES
   ========================================================================== */

body.se-dark-theme .se-card,
body.se-dark-theme .se-app .card {
    background: #0B1933;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 4px 20px rgba(0,0,0,.35);
    position: relative;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

/* Card top accent line — appears on hover */
body.se-dark-theme .se-card::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(23,105,255,0) 0%);
    border-radius: var(--se-r-lg) var(--se-r-lg) 0 0;
    transition: background .3s ease; z-index: 1;
}

body.se-dark-theme .se-card:hover,
body.se-dark-theme .se-app .card:hover {
    border-color: rgba(255,138,0,.25);
    box-shadow: 0 8px 30px rgba(0,0,0,.45);
    transform: translateY(-2px);
}

body.se-dark-theme .se-card:hover::before {
    background: linear-gradient(90deg, transparent, rgba(255,138,0,.5) 50%, transparent);
}

body.se-dark-theme .se-card-head { background: transparent; border-bottom: 1px solid rgba(255,255,255,.07); }
body.se-dark-theme .se-card-title { color: #fff; }
body.se-dark-theme .se-card-title > i { color: #64748B; }
body.se-dark-theme .se-card-sub { color: #64748B; }
body.se-dark-theme .se-card-body { background: transparent; }
body.se-dark-theme .se-card-foot { background: rgba(5,11,24,.5); border-top: 1px solid rgba(255,255,255,.07); }
body.se-dark-theme .se-card-link { color: #1769FF; }
body.se-dark-theme .se-card-link:hover { color: #FF8A00; }
body.se-dark-theme .se-section-label { color: #475569; border-bottom-color: rgba(255,255,255,.07); }

body.se-dark-theme .se-app .card {
    --bs-card-bg: #0B1933;
    --bs-card-border-color: rgba(255,255,255,.08);
    --bs-card-cap-bg: transparent;
    --bs-card-color: #CBD5E1;
}

body.se-dark-theme .se-app .card-header,
body.se-dark-theme .se-app .card-footer {
    background: rgba(5,11,24,.5);
    border-color: rgba(255,255,255,.07);
}

body.se-dark-theme .se-app .card-title { color: #fff; }


/* ==========================================================================
   26.G  STATS / KPI CARDS
   ========================================================================== */

body.se-dark-theme .se-stat {
    background: linear-gradient(145deg, #0B1933 0%, #0D1D39 100%);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 4px 20px rgba(0,0,0,.30);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

body.se-dark-theme a.se-stat:hover {
    border-color: rgba(255,138,0,.35);
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
    transform: translateY(-2px); color: inherit;
}

body.se-dark-theme .se-stat-icon { background: rgba(23,105,255,.15); color: #1769FF; }
body.se-dark-theme .se-stat-icon.is-teal    { background: rgba(56,189,248,.12); color: #38BDF8; }
body.se-dark-theme .se-stat-icon.is-success { background: rgba(34,197,94,.12);  color: #22C55E; }
body.se-dark-theme .se-stat-icon.is-warning { background: rgba(245,158,11,.12); color: #F59E0B; }
body.se-dark-theme .se-stat-icon.is-danger  { background: rgba(239,68,68,.12);  color: #EF4444; }
body.se-dark-theme .se-stat-icon.is-info    { background: rgba(56,189,248,.12); color: #38BDF8; }
body.se-dark-theme .se-stat-icon.is-neutral { background: rgba(148,163,184,.10); color: #94A3B8; }
body.se-dark-theme .se-stat-label { color: #64748B; }
body.se-dark-theme .se-stat-value { color: #fff; }
body.se-dark-theme .se-stat-meta  { color: #64748B; }

/* Quick actions */
body.se-dark-theme .se-quick {
    background: #0B1933; border: 1px solid rgba(255,255,255,.08); color: #CBD5E1;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
body.se-dark-theme .se-quick:hover {
    border-color: rgba(255,138,0,.35); background: rgba(255,138,0,.05);
    color: #fff; transform: translateY(-2px);
}
body.se-dark-theme .se-quick-icon { background: rgba(255,255,255,.05); color: #64748B; }
body.se-dark-theme .se-quick:hover .se-quick-icon { background: rgba(255,138,0,.12); color: #FF8A00; }
body.se-dark-theme .se-quick-label { color: #CBD5E1; }
body.se-dark-theme .se-quick:hover .se-quick-label { color: #fff; }

body.se-dark-theme .se-meter { background: rgba(255,255,255,.08); }
body.se-dark-theme .se-meter-fill { background: #1769FF; }
body.se-dark-theme .se-meter-fill.is-success { background: #22C55E; }
body.se-dark-theme .se-meter-fill.is-warning { background: #F59E0B; }
body.se-dark-theme .se-meter-fill.is-danger  { background: #EF4444; }
body.se-dark-theme .se-meter-fill.is-teal    { background: #38BDF8; }


/* ==========================================================================
   26.H  BUTTONS — BLUE PRIMARY + ORANGE HOVER
   ========================================================================== */

body.se-dark-theme .se-app .btn-primary {
    --bs-btn-bg:               #1769FF;
    --bs-btn-border-color:     #1769FF;
    --bs-btn-color:            #fff;
    --bs-btn-hover-bg:         #FF8A00;
    --bs-btn-hover-border-color: #FF9800;
    --bs-btn-hover-color:      #fff;
    --bs-btn-active-bg:        #e07800;
    --bs-btn-active-border-color: #e07800;
    box-shadow: 0 2px 8px rgba(23,105,255,.30);
    transition: all .2s ease;
    position: relative; overflow: hidden;
}

/* Shine sweep on hover */
body.se-dark-theme .se-app .btn-primary::after {
    content: "";
    position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
    transform: skewX(-15deg);
    transition: left .4s ease;
}
body.se-dark-theme .se-app .btn-primary:hover::after { left: 160%; }
body.se-dark-theme .se-app .btn-primary:hover { box-shadow: 0 4px 16px rgba(255,138,0,.35); }

body.se-dark-theme .se-app .btn-secondary,
body.se-dark-theme .se-app .btn-outline-secondary {
    --bs-btn-bg:               #0D1D39;
    --bs-btn-border-color:     rgba(255,255,255,.14);
    --bs-btn-color:            #CBD5E1;
    --bs-btn-hover-bg:         rgba(255,138,0,.08);
    --bs-btn-hover-border-color: rgba(255,138,0,.40);
    --bs-btn-hover-color:      #fff;
    --bs-btn-active-bg:        rgba(255,138,0,.12);
    --bs-btn-active-border-color: rgba(255,138,0,.50);
    --bs-btn-active-color:     #fff;
    box-shadow: none;
}

body.se-dark-theme .se-app .btn-outline-primary {
    --bs-btn-color:            #1769FF;
    --bs-btn-border-color:     rgba(23,105,255,.35);
    --bs-btn-bg:               transparent;
    --bs-btn-hover-bg:         rgba(255,138,0,.08);
    --bs-btn-hover-border-color: rgba(255,138,0,.40);
    --bs-btn-hover-color:      #FF8A00;
}

body.se-dark-theme .se-app .btn-outline-danger {
    --bs-btn-color:            #EF4444;
    --bs-btn-border-color:     rgba(239,68,68,.35);
    --bs-btn-bg:               transparent;
    --bs-btn-hover-bg:         rgba(239,68,68,.10);
    --bs-btn-hover-border-color: rgba(239,68,68,.50);
    --bs-btn-hover-color:      #EF4444;
}

body.se-dark-theme .se-app .btn-danger {
    --bs-btn-bg: #EF4444; --bs-btn-border-color: #EF4444;
    --bs-btn-hover-bg: #DC2626; --bs-btn-hover-border-color: #DC2626;
}

body.se-dark-theme .se-app .btn-success {
    --bs-btn-bg: #22C55E; --bs-btn-border-color: #22C55E; --bs-btn-color: #fff;
    --bs-btn-hover-bg: #FF8A00; --bs-btn-hover-border-color: #FF9800; --bs-btn-hover-color: #fff;
}

body.se-dark-theme .se-app .btn-warning {
    --bs-btn-bg: #F59E0B; --bs-btn-border-color: #F59E0B; --bs-btn-color: #0B1933;
    --bs-btn-hover-bg: #FF8A00; --bs-btn-hover-border-color: #FF9800; --bs-btn-hover-color: #fff;
}

body.se-dark-theme .se-app .btn-info {
    --bs-btn-bg: #38BDF8; --bs-btn-border-color: #38BDF8; --bs-btn-color: #0B1933;
    --bs-btn-hover-bg: #0EA5E9; --bs-btn-hover-border-color: #0EA5E9; --bs-btn-hover-color: #fff;
}

body.se-dark-theme .se-app .btn-light {
    --bs-btn-bg: #0D1D39; --bs-btn-border-color: rgba(255,255,255,.12); --bs-btn-color: #CBD5E1;
    --bs-btn-hover-bg: rgba(255,138,0,.08); --bs-btn-hover-border-color: rgba(255,138,0,.35); --bs-btn-hover-color: #fff;
}

body.se-dark-theme .se-app .btn-dark {
    --bs-btn-bg: #0D1D39; --bs-btn-border-color: rgba(255,255,255,.12);
    --bs-btn-hover-bg: rgba(255,138,0,.08); --bs-btn-hover-border-color: rgba(255,138,0,.35);
}

body.se-dark-theme .se-btn-icon {
    background: rgba(13,29,57,.8); border-color: rgba(255,255,255,.10); color: #64748B;
}
body.se-dark-theme .se-btn-icon:hover {
    background: rgba(255,138,0,.10); border-color: rgba(255,138,0,.35); color: #FF8A00;
}
body.se-dark-theme .se-btn-icon.is-danger:hover {
    background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.35); color: #EF4444;
}
body.se-dark-theme .se-app .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(23,105,255,.30); }


/* ==========================================================================
   26.I  FORMS — DARK INPUTS WITH ORANGE HOVER
   ========================================================================== */

body.se-dark-theme .se-app .form-label { color: #CBD5E1; }
body.se-dark-theme .se-hint { color: #64748B; }

body.se-dark-theme .se-app .form-control,
body.se-dark-theme .se-app .form-select {
    background-color: #0A1630; border-color: rgba(255,255,255,.12);
    color: #E2E8F0; box-shadow: none;
}

body.se-dark-theme .se-app .form-control::placeholder { color: #475569; }

body.se-dark-theme .se-app .form-control:hover:not(:disabled),
body.se-dark-theme .se-app .form-select:hover:not(:disabled) { border-color: rgba(255,138,0,.35); }

body.se-dark-theme .se-app .form-control:focus,
body.se-dark-theme .se-app .form-select:focus {
    background-color: #0B1933; border-color: #1769FF;
    box-shadow: 0 0 0 3px rgba(23,105,255,.20); color: #fff; outline: none;
}

body.se-dark-theme .se-app .form-control:disabled,
body.se-dark-theme .se-app .form-control[readonly],
body.se-dark-theme .se-app .form-select:disabled {
    background-color: rgba(10,22,48,.5); color: #475569; border-color: rgba(255,255,255,.06);
}

body.se-dark-theme .se-app input[type="date"]::-webkit-calendar-picker-indicator,
body.se-dark-theme .se-app input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(0.7) sepia(0.3) hue-rotate(180deg);
}

body.se-dark-theme .se-app .form-control[type="file"]::file-selector-button {
    background: #0D1D39; border-color: rgba(255,255,255,.14); color: #94A3B8;
}
body.se-dark-theme .se-app .form-control[type="file"]::file-selector-button:hover {
    background: rgba(255,138,0,.08); border-color: rgba(255,138,0,.35); color: #FF8A00;
}

body.se-dark-theme .se-app .input-group-text {
    background: #0A1630; border-color: rgba(255,255,255,.12); color: #64748B;
}

body.se-dark-theme .se-app .form-check-input {
    background-color: #0A1630; border-color: rgba(255,255,255,.20);
}
body.se-dark-theme .se-app .form-check-input:checked { background-color: #1769FF; border-color: #1769FF; }
body.se-dark-theme .se-app .form-check-label { color: #CBD5E1; }

body.se-dark-theme .se-check-card { background: #0B1933; border-color: rgba(255,255,255,.08); }
body.se-dark-theme .se-check-card:hover { border-color: rgba(255,138,0,.35); background: rgba(255,138,0,.05); }
body.se-dark-theme .se-check-card:has(.form-check-input:checked) {
    border-color: #1769FF; background: rgba(23,105,255,.08);
    box-shadow: inset 0 0 0 1px rgba(23,105,255,.30);
}
body.se-dark-theme .se-check-card-label { color: #CBD5E1; }
body.se-dark-theme .se-check-card .form-check-input:checked ~ .se-check-card-label { color: #60A5FA; font-weight: 600; }

body.se-dark-theme .se-subpanel {
    background: rgba(10,22,48,.6); border-color: rgba(255,255,255,.08);
    border-left-color: rgba(23,105,255,.40);
}

body.se-dark-theme .se-app .input-validation-error,
body.se-dark-theme .se-app .form-control.is-invalid,
body.se-dark-theme .se-app .form-select.is-invalid {
    border-color: #EF4444; box-shadow: 0 0 0 3px rgba(239,68,68,.15);
}

body.se-dark-theme .se-app .field-validation-error,
body.se-dark-theme .se-app .text-danger { color: #EF4444 !important; }

body.se-dark-theme .se-pw-toggle { color: #64748B; }
body.se-dark-theme .se-pw-toggle:hover { color: #FF8A00; background: rgba(255,138,0,.08); }
body.se-dark-theme .se-form-actions { border-top-color: rgba(255,255,255,.07); }


/* ==========================================================================
   26.J  TABLES — DARK + ORANGE ROW HOVER
   ========================================================================== */

body.se-dark-theme .se-table-wrap { scrollbar-color: rgba(255,255,255,.10) transparent; }
body.se-dark-theme .se-table-wrap::-webkit-scrollbar-track { background: transparent; }
body.se-dark-theme .se-table-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); }

body.se-dark-theme .se-app .table {
    --bs-table-bg: transparent;
    --bs-table-color: #CBD5E1;
    --bs-table-border-color: rgba(255,255,255,.07);
    --bs-table-hover-bg: rgba(255,138,0,.04);
    --bs-table-hover-color: #fff;
    --bs-table-striped-bg: transparent;
}

body.se-dark-theme .se-app .table > thead { background: rgba(5,11,24,.5); border-bottom: 1px solid rgba(255,255,255,.08); }
body.se-dark-theme .se-app .table > thead th { color: #475569; background: transparent; }

body.se-dark-theme .se-app .table > thead.table-dark,
body.se-dark-theme .se-app .table > thead.table-light {
    --bs-table-bg: transparent; --bs-table-color: #475569; background: transparent;
}
body.se-dark-theme .se-app .table > thead.table-dark th,
body.se-dark-theme .se-app .table > thead.table-light th { color: #475569; background: transparent; }

body.se-dark-theme .se-app .table > tbody > tr { border-bottom: 1px solid rgba(255,255,255,.05); }
body.se-dark-theme .se-app .table > tbody > td,
body.se-dark-theme .se-app .table > tbody > tr > td { color: #CBD5E1; border-bottom: 0; }

body.se-dark-theme .se-app .table-hover > tbody > tr { transition: background .15s ease; }
body.se-dark-theme .se-app .table-hover > tbody > tr:hover > * {
    background: rgba(255,138,0,.04); color: #fff; --bs-table-accent-bg: transparent;
}

body.se-dark-theme .se-table-primary { color: #fff !important; font-weight: 600; }
body.se-dark-theme .se-table-secondary { color: #64748B; }

body.se-dark-theme .se-table-foot {
    background: rgba(5,11,24,.5); border-top: 1px solid rgba(255,255,255,.07); color: #64748B;
}

body.se-dark-theme .se-table-wrap.is-scrollable {
    background-image: linear-gradient(to left, rgba(5,11,24,.7), rgba(5,11,24,0) 24px);
}


/* ==========================================================================
   26.K  TOOLBAR (SEARCH / FILTER BAR)
   ========================================================================== */

body.se-dark-theme .se-toolbar {
    background: #0B1933;
    border-bottom: 1px solid rgba(255,255,255,.07);
    border-radius: var(--se-r-lg) var(--se-r-lg) 0 0;
}

body.se-dark-theme .se-search > i { color: #475569; }
body.se-dark-theme .se-search .form-control {
    background: #0A1630; border-color: rgba(255,255,255,.10); color: #CBD5E1;
}
body.se-dark-theme .se-search .form-control:focus { border-color: #1769FF; box-shadow: 0 0 0 3px rgba(23,105,255,.15); }
body.se-dark-theme .se-search .form-control:hover { border-color: rgba(255,138,0,.30); }


/* ==========================================================================
   26.L  BADGES & PILLS
   ========================================================================== */

body.se-dark-theme .se-badge.is-success,
body.se-dark-theme .se-app .badge.bg-success {
    background: rgba(34,197,94,.12) !important; color: #4ADE80 !important; border-color: rgba(34,197,94,.25) !important;
}
body.se-dark-theme .se-badge.is-warning,
body.se-dark-theme .se-app .badge.bg-warning {
    background: rgba(245,158,11,.12) !important; color: #FCD34D !important; border-color: rgba(245,158,11,.25) !important;
}
body.se-dark-theme .se-badge.is-danger,
body.se-dark-theme .se-app .badge.bg-danger {
    background: rgba(239,68,68,.12) !important; color: #F87171 !important; border-color: rgba(239,68,68,.25) !important;
}
body.se-dark-theme .se-badge.is-info,
body.se-dark-theme .se-app .badge.bg-info {
    background: rgba(56,189,248,.12) !important; color: #7DD3FC !important; border-color: rgba(56,189,248,.25) !important;
}
body.se-dark-theme .se-badge.is-primary,
body.se-dark-theme .se-app .badge.bg-primary {
    background: rgba(23,105,255,.15) !important; color: #60A5FA !important; border-color: rgba(23,105,255,.30) !important;
}
body.se-dark-theme .se-badge.is-neutral,
body.se-dark-theme .se-app .badge.bg-secondary {
    background: rgba(148,163,184,.12) !important; color: #94A3B8 !important; border-color: rgba(148,163,184,.20) !important;
}

body.se-dark-theme .se-chip { background: rgba(13,29,57,.8); border-color: rgba(255,255,255,.10); color: #94A3B8; }

body.se-dark-theme .se-app .se-status-select { background-color: #0A1630; border-color: rgba(255,255,255,.12); color: #CBD5E1; }
body.se-dark-theme .se-app .se-status-select[data-se-tone="is-success"] { background-color: rgba(34,197,94,.10); border-color: rgba(34,197,94,.30); color: #4ADE80; }
body.se-dark-theme .se-app .se-status-select[data-se-tone="is-danger"]  { background-color: rgba(239,68,68,.10);  border-color: rgba(239,68,68,.30);  color: #F87171; }
body.se-dark-theme .se-app .se-status-select[data-se-tone="is-warning"] { background-color: rgba(245,158,11,.10); border-color: rgba(245,158,11,.30); color: #FCD34D; }
body.se-dark-theme .se-app .se-status-select[data-se-tone="is-info"]    { background-color: rgba(56,189,248,.10);  border-color: rgba(56,189,248,.30);  color: #7DD3FC; }
body.se-dark-theme .se-app .se-status-select[data-se-tone="is-neutral"] { background-color: rgba(148,163,184,.10); border-color: rgba(148,163,184,.25); color: #94A3B8; }
body.se-dark-theme .se-app .se-status-select option { background-color: #0B1933; color: #E2E8F0; }


/* ==========================================================================
   26.M  AVATARS
   ========================================================================== */

body.se-dark-theme .se-avatar { background: rgba(23,105,255,.15); color: #60A5FA; border-color: rgba(255,255,255,.10); }
body.se-dark-theme .student-avatar { border-color: rgba(255,255,255,.10); }


/* ==========================================================================
   26.N  ALERTS & TOASTS
   ========================================================================== */

body.se-dark-theme .se-app .alert-success { background: rgba(34,197,94,.10); border-color: rgba(34,197,94,.25); color: #4ADE80; }
body.se-dark-theme .se-app .alert-danger  { background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.25); color: #F87171; }
body.se-dark-theme .se-app .alert-warning { background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.25); color: #FCD34D; }
body.se-dark-theme .se-app .alert-info    { background: rgba(56,189,248,.10); border-color: rgba(56,189,248,.25); color: #7DD3FC; }

body.se-dark-theme .se-toast {
    background: #0B1933; border-color: rgba(255,255,255,.08); border-left-color: #1769FF;
    color: #CBD5E1; box-shadow: 0 12px 36px rgba(0,0,0,.5);
}
body.se-dark-theme .se-toast.is-success { border-left-color: #22C55E; }
body.se-dark-theme .se-toast.is-danger  { border-left-color: #EF4444; }
body.se-dark-theme .se-toast.is-warning { border-left-color: #F59E0B; }
body.se-dark-theme .se-toast.is-info    { border-left-color: #38BDF8; }
body.se-dark-theme .se-toast-title { color: #fff; }
body.se-dark-theme .se-toast-close { color: #475569; }
body.se-dark-theme .se-toast-close:hover { color: #FF8A00; }


/* ==========================================================================
   26.O  EMPTY / LOADING / ERROR STATES
   ========================================================================== */

body.se-dark-theme .se-empty-icon { background: rgba(13,29,57,.8); color: #475569; }
body.se-dark-theme .se-empty-title { color: #fff; }
body.se-dark-theme .se-empty-text  { color: #64748B; }

body.se-dark-theme .se-skeleton {
    background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.08) 37%, rgba(255,255,255,.04) 63%);
    background-size: 400% 100%;
}

body.se-dark-theme .se-spinner { border-color: rgba(255,255,255,.12); border-top-color: #1769FF; }

body.se-dark-theme .se-status {
    background: #0B1933; border-color: rgba(255,255,255,.08); box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
body.se-dark-theme .se-status-code { color: #fff; }
body.se-dark-theme .se-status-title { color: #fff; }
body.se-dark-theme .se-status-text  { color: #64748B; }
body.se-dark-theme .se-status-ref { border-top-color: rgba(255,255,255,.07); color: #475569; }
body.se-dark-theme .se-status-ref code { background: rgba(255,255,255,.06); color: #94A3B8; }


/* ==========================================================================
   26.P  TABS, PAGINATION, DROPDOWNS, MODALS
   ========================================================================== */

body.se-dark-theme .se-tabs { border-bottom-color: rgba(255,255,255,.08); }
body.se-dark-theme .se-tab { color: #64748B; }
body.se-dark-theme .se-tab:hover { color: #FF8A00; border-bottom-color: rgba(255,138,0,.35); }
body.se-dark-theme .se-tab.is-active { color: #1769FF; border-bottom-color: #1769FF; }

body.se-dark-theme .se-pager-link { background: #0B1933; border-color: rgba(255,255,255,.10); color: #94A3B8; }
body.se-dark-theme .se-pager-link:hover { background: rgba(255,138,0,.08); border-color: rgba(255,138,0,.35); color: #FF8A00; }
body.se-dark-theme .se-pager-link.is-active { background: #1769FF; border-color: #1769FF; color: #fff; }
body.se-dark-theme .se-pager-gap { color: #475569; }

body.se-dark-theme .se-app .pagination .page-link { background: #0B1933; border-color: rgba(255,255,255,.10); color: #94A3B8; }
body.se-dark-theme .se-app .pagination .page-link:hover { background: rgba(255,138,0,.08); border-color: rgba(255,138,0,.35); color: #FF8A00; }
body.se-dark-theme .se-app .pagination .page-item.active .page-link { background: #1769FF; border-color: #1769FF; color: #fff; }

/* Dropdown */
body.se-dark-theme .se-app .dropdown-menu {
    background: #0D1D39; border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 16px 48px rgba(0,0,0,.60);
}
body.se-dark-theme .se-app .dropdown-item { color: #CBD5E1; }
body.se-dark-theme .se-app .dropdown-item > i { color: #475569; }
body.se-dark-theme .se-app .dropdown-item:hover,
body.se-dark-theme .se-app .dropdown-item:focus { background: rgba(255,138,0,.08); color: #fff; }
body.se-dark-theme .se-app .dropdown-item:hover > i,
body.se-dark-theme .se-app .dropdown-item:focus > i { color: #FF8A00; }
body.se-dark-theme .se-app .dropdown-item.is-danger { color: #F87171; }
body.se-dark-theme .se-app .dropdown-item.is-danger > i { color: #F87171; }
body.se-dark-theme .se-app .dropdown-item.is-danger:hover { background: rgba(239,68,68,.10); color: #F87171; }
body.se-dark-theme .se-app .dropdown-divider { border-color: rgba(255,255,255,.07); }
body.se-dark-theme .se-dropdown-head { border-bottom-color: rgba(255,255,255,.07); }

body.se-dark-theme .se-app select.form-select option,
body.se-dark-theme .se-app select option { background-color: #0D1D39; color: #E2E8F0; }

/* Modal */
body.se-dark-theme .se-app .modal-content {
    background: #0B1933; border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 24px 64px rgba(0,0,0,.70);
}
body.se-dark-theme .se-app .modal-header { background: transparent; border-bottom: 1px solid rgba(255,255,255,.08); }
body.se-dark-theme .se-app .modal-title { color: #fff; }
body.se-dark-theme .se-app .modal-body { color: #CBD5E1; }
body.se-dark-theme .se-app .modal-footer { background: rgba(5,11,24,.5); border-top: 1px solid rgba(255,255,255,.08); }
body.se-dark-theme .se-app .modal-backdrop.show { background-color: rgba(0,0,0,.75); backdrop-filter: blur(4px); }
body.se-dark-theme .se-app .btn-close { filter: invert(1) brightness(0.6); }
body.se-dark-theme .se-app .btn-close:hover { filter: invert(1) sepia(1) saturate(4) hue-rotate(20deg); }


/* ==========================================================================
   26.Q  PROFILE & DETAIL VIEWS
   ========================================================================== */

body.se-dark-theme .se-profile { background: #0B1933; border-color: rgba(255,255,255,.08); }
body.se-dark-theme .se-profile-cover { background: linear-gradient(120deg, #050B18 0%, #1255D4 55%, #1769FF 100%); }
body.se-dark-theme .se-profile-avatar { border-color: #0B1933; }
body.se-dark-theme .se-profile-name { color: #fff; }

body.se-dark-theme .se-kv-key { color: #475569; }
body.se-dark-theme .se-kv-val { color: #E2E8F0; font-weight: 500; }
body.se-dark-theme .se-kv-val.is-empty { color: #475569; }

body.se-dark-theme .se-timeline::before { background: rgba(255,255,255,.08); }
body.se-dark-theme .se-timeline-item::before { background: #0B1933; border-color: #1769FF; }
body.se-dark-theme .se-timeline-time { color: #475569; }
body.se-dark-theme .se-timeline-title { color: #fff; }
body.se-dark-theme .se-timeline-text { color: #64748B; }

body.se-dark-theme .se-list-item { border-bottom-color: rgba(255,255,255,.06); color: #CBD5E1; }
body.se-dark-theme a.se-list-item:hover { background: rgba(255,138,0,.04); color: #fff; }
body.se-dark-theme .se-list-title { color: #fff; }
body.se-dark-theme .se-list-sub { color: #64748B; }

body.se-dark-theme .se-facts > li { color: #94A3B8; }
body.se-dark-theme .se-facts > li > i { color: #475569; }

body.se-dark-theme .se-msg { background: rgba(13,29,57,.6); border-color: rgba(255,255,255,.08); }
body.se-dark-theme .se-msg.is-reply { background: rgba(23,105,255,.06); border-color: rgba(23,105,255,.20); border-left-color: rgba(23,105,255,.50); }
body.se-dark-theme .se-msg-who { color: #475569; }
body.se-dark-theme .se-msg-when { color: #475569; }
body.se-dark-theme .se-msg-text { color: #CBD5E1; }


/* ==========================================================================
   26.R  MINI CHARTS
   ========================================================================== */

body.se-dark-theme .se-bar-track { background: rgba(255,255,255,.06); }
body.se-dark-theme .se-bar-fill  { background: #1769FF; }
body.se-dark-theme .se-bar-fill.is-success { background: #22C55E; }
body.se-dark-theme .se-bar-fill.is-warning { background: #F59E0B; }
body.se-dark-theme .se-bar-fill.is-danger  { background: #EF4444; }
body.se-dark-theme .se-bar-fill.is-empty   { background: rgba(255,255,255,.10); }
body.se-dark-theme .se-bar-value { color: #94A3B8; }
body.se-dark-theme .se-bar-value.is-empty { color: #475569; }
body.se-dark-theme .se-bar-label { color: #475569; }
body.se-dark-theme .se-rank-label { color: #CBD5E1; }
body.se-dark-theme .se-rank-value { color: #fff; }
body.se-dark-theme .se-splitstat-key { color: #475569; }
body.se-dark-theme .se-splitstat-val { color: #fff; }
body.se-dark-theme .se-splitstat-val.is-success { color: #22C55E; }
body.se-dark-theme .se-splitstat-val.is-danger  { color: #EF4444; }
body.se-dark-theme .se-splitstat-val.is-muted   { color: #475569; }
body.se-dark-theme .se-splitstat-val.is-warning { color: #F59E0B; }


/* ==========================================================================
   26.S  APP FOOTER
   ========================================================================== */

body.se-dark-theme .se-foot { background: #071226; border-top-color: rgba(255,255,255,.07); color: #475569; }
body.se-dark-theme .se-foot-brand { color: #64748B; }
body.se-dark-theme .se-foot-brand strong { color: #94A3B8; }
body.se-dark-theme .se-foot-sep { color: #344058; }


/* ==========================================================================
   26.T  LINKS, HEADINGS, GENERIC TEXT
   ========================================================================== */

body.se-dark-theme .se-skip { background: #1769FF; color: #fff; }
body.se-dark-theme .se-skip:focus { color: #fff; }

body.se-dark-theme .se-app a:focus-visible,
body.se-dark-theme .se-app button:focus-visible,
body.se-dark-theme .se-app [tabindex]:focus-visible { outline: 2px solid #1769FF; outline-offset: 2px; }

body.se-dark-theme .se-app a:not([class]) { color: #60A5FA; }
body.se-dark-theme .se-app a:not([class]):hover { color: #FF8A00; }

body.se-dark-theme .text-muted { color: #64748B !important; }
body.se-dark-theme .text-secondary { color: #64748B !important; }

body.se-dark-theme h1, body.se-dark-theme h2,
body.se-dark-theme h3, body.se-dark-theme h4,
body.se-dark-theme h5, body.se-dark-theme h6 { color: #fff; }

body.se-dark-theme p { color: #CBD5E1; }
body.se-dark-theme small { color: #64748B; }
body.se-dark-theme hr { border-color: rgba(255,255,255,.07); opacity: 1; }

body.se-dark-theme .se-section-label { color: #475569; border-bottom-color: rgba(255,255,255,.07); }
body.se-dark-theme .se-identity-main .se-table-primary { color: #fff !important; }
body.se-dark-theme .se-identity-main .se-table-secondary { color: #64748B; }


/* ==========================================================================
   26.U  BREADCRUMBS, NAV PILLS, LIST-GROUP, MISC BOOTSTRAP
   ========================================================================== */

body.se-dark-theme .se-app .breadcrumb-item.active { color: #94A3B8; }
body.se-dark-theme .se-app .breadcrumb-item + .breadcrumb-item::before { color: #475569; }
body.se-dark-theme .se-app .breadcrumb-item a { color: #64748B; }
body.se-dark-theme .se-app .breadcrumb-item a:hover { color: #FF8A00; }

body.se-dark-theme .se-app .list-group-item { background: #0B1933; border-color: rgba(255,255,255,.08); color: #CBD5E1; }
body.se-dark-theme .se-app .list-group-item.active { background: #1769FF; border-color: #1769FF; color: #fff; }
body.se-dark-theme .se-app .list-group-item:hover { background: rgba(255,138,0,.05); color: #fff; }

body.se-dark-theme .se-app .nav-link { color: #64748B; }
body.se-dark-theme .se-app .nav-link:hover { color: #FF8A00; }
body.se-dark-theme .se-app .nav-pills .nav-link.active { background-color: #1769FF; color: #fff; }
body.se-dark-theme .se-app .nav-tabs .nav-link.active {
    background-color: #0B1933; color: #1769FF;
    border-color: rgba(255,255,255,.10) rgba(255,255,255,.10) #0B1933;
}


/* ==========================================================================
   26.V  RESPONSIVE DARK REFINEMENTS
   ========================================================================== */

@media (max-width: 991.98px) {
    body.se-dark-theme .se-sidebar { box-shadow: 0 0 60px rgba(0,0,0,.70); }
    body.se-dark-theme .se-scrim { background: rgba(0,0,0,.65); backdrop-filter: blur(2px); }
}

@media (max-width: 767.98px) {
    body.se-dark-theme .se-app .modal-content { border-color: rgba(255,255,255,.12); }
}


/* ==========================================================================
   26.W  DARK COMPONENT SPECIFIC OVERRIDES (Students List & existing dark
         components — ensure hover states pick up orange in dark theme)
   ========================================================================== */

body.se-dark-theme .se-dark-table-card { background: #070e22; border-color: rgba(255,255,255,.07); }
body.se-dark-theme .se-dark-table-card .table { --bs-table-hover-bg: rgba(255,138,0,.04); }
body.se-dark-theme .se-dark-table-card tbody tr:hover { background: rgba(255,138,0,.04) !important; }

body.se-dark-theme .se-dark-filter-bar { background: #0B1933; border-color: rgba(255,255,255,.08); }

body.se-dark-theme .se-dark-select {
    background: #0A1630; border-color: rgba(255,255,255,.12); color: #CBD5E1;
    transition: border-color .2s ease;
}
body.se-dark-theme .se-dark-select:hover { border-color: rgba(255,138,0,.35); }
body.se-dark-theme .se-dark-select:focus { border-color: #1769FF; box-shadow: 0 0 0 3px rgba(23,105,255,.15); outline: none; }

body.se-dark-theme .se-dark-metric-card:hover { border-color: rgba(255,138,0,.30); }

body.se-dark-theme .btn-dark-secondary:hover {
    background: rgba(255,138,0,.08); border-color: rgba(255,138,0,.40); color: #FF8A00;
}

body.se-dark-theme .btn-dark-primary { background: #1769FF; border-color: #246BFF; }
body.se-dark-theme .btn-dark-primary:hover { background: #246BFF; box-shadow: 0 6px 20px rgba(23,105,255,.50); }

body.se-dark-theme .se-status-pill-green {
    background: rgba(34,197,94,.10); border: 1px solid rgba(34,197,94,.25); color: #4ADE80;
}
body.se-dark-theme .se-status-pill-gray {
    background: rgba(148,163,184,.10); border: 1px solid rgba(148,163,184,.20); color: #94A3B8;
}

body.se-dark-theme .se-dark-action-btn {
    background: rgba(13,29,57,.8); border: 1px solid rgba(255,255,255,.08);
    color: #64748B; transition: all .18s ease;
}
body.se-dark-theme .se-dark-action-btn:hover {
    background: rgba(255,138,0,.08); border-color: rgba(255,138,0,.35); color: #FF8A00;
}

body.se-dark-theme .se-dark-table-foot { background: rgba(5,11,24,.5); border-top: 1px solid rgba(255,255,255,.07); color: #64748B; }
body.se-dark-theme .se-dark-page-btn { background: #0B1933; border: 1px solid rgba(255,255,255,.10); color: #94A3B8; }
body.se-dark-theme .se-dark-page-btn:hover { background: rgba(255,138,0,.08); border-color: rgba(255,138,0,.35); color: #FF8A00; }
body.se-dark-theme .se-dark-page-btn.is-active { background: #1769FF; border-color: #1769FF; color: #fff; }

/* Topbar dark elements */
body.se-dark-theme .se-hamburger-btn-dark:hover { color: #FF8A00; border-color: rgba(255,138,0,.40); }
body.se-dark-theme .se-school-badge-dark:hover { color: #FF8A00; border-color: rgba(255,138,0,.35); }
body.se-dark-theme .se-notif-btn-dark:hover { color: #FF8A00; background: rgba(255,138,0,.08); border-color: rgba(255,138,0,.25); }

/* ==========================================================================
   END SECTION 26
   ========================================================================== */
/* ==========================================================================
   27. LAYOUT & SPACING FIX — TOPBAR, SIDEBAR, CONTENT SHELL
   --------------------------------------------------------------------------
   Fixes the header title wrapping, sidebar scroll, content width, form
   card density, and vertical spacing that the Section 24/26 dark theme
   introduced. CSS-only. No markup changes needed.
   ========================================================================== */


/* ==========================================================================
   27.A  APP SHELL — SIDEBAR + CONTENT GEOMETRY
   ========================================================================== */

/* Sidebar: fixed 280px, full viewport height, logo/nav/footer structure */
body.se-dark-theme {
    --se-sidebar-w: 280px;
    --se-topbar-h: 60px;
}

body.se-dark-theme .se-sidebar {
    width: var(--se-sidebar-w);
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
}

/* Brand header — match topbar height, NOT 72px */
body.se-dark-theme .se-brand {
    height: var(--se-topbar-h);
    padding: 0 1.125rem;
    flex-shrink: 0;
}

body.se-dark-theme .se-brand-row {
    height: var(--se-topbar-h);
}

/* Nav — scrollable area */
body.se-dark-theme .se-nav {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    min-height: 0;     /* allow flex shrink */
    padding: 0.75rem 0.625rem 0.75rem;
}

/* Promo card — inside scroll area, doesn't push footer */
body.se-dark-theme .se-sidebar-promo-card {
    margin: 0.75rem 0.625rem;
    flex-shrink: 0;
}

/* Footer — always at bottom, never moves */
body.se-dark-theme .se-side-foot {
    flex-shrink: 0;
}

/* Main area — takes remaining width */
body.se-dark-theme .se-main {
    margin-left: var(--se-sidebar-w);
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Content — proper max-width centered */
body.se-dark-theme .se-content {
    flex: 1;
    padding: 1.5rem 2rem 2.5rem;
    max-width: 1600px;
    width: 100%;
    min-width: 0;
}


/* ==========================================================================
   27.B  TOPBAR — FIXED HEIGHT, PROPER FLEX LAYOUT, NO TITLE WRAPPING
   ========================================================================== */

body.se-dark-theme .se-topbar {
    height: var(--se-topbar-h);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.5rem;
    position: sticky;
    top: 0;
    z-index: 1030;
    flex-shrink: 0;
}

/* LEFT group — hamburger + title/breadcrumb — does NOT shrink below content */
body.se-dark-theme .se-topbar-dark-left {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex-shrink: 0;
    min-width: 0;
}

/* Page title: single line, no wrapping */
body.se-dark-theme .se-topbar-page-info {
    min-width: 0;
}

body.se-dark-theme .se-topbar-page-info .topbar-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.se-dark-theme .se-topbar-page-info .topbar-crumb {
    font-size: 0.6875rem;
    color: #64748B;
    margin: 1px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* CENTER — search bar: flexible width, shrinks before title wraps */
body.se-dark-theme .se-topbar-search {
    flex: 1 1 280px;
    max-width: 340px;
    min-width: 160px;
    margin-left: 0;
    width: auto;
}

body.se-dark-theme .se-topbar-search input {
    height: 36px;
    padding: 0 14px 0 36px;
    border-radius: 8px;
    font-size: 0.8125rem;
}

/* SPACER — pushes right group to the end */
body.se-dark-theme .se-topbar-spacer {
    flex: 1 1 0;
    min-width: 0;
}

/* RIGHT group — school badge, bell, user */
body.se-dark-theme .se-topbar-actions {
    flex-shrink: 0;
    gap: 0.625rem;
}

/* School badge — truncate long names */
body.se-dark-theme .se-school-badge-dark {
    max-width: 200px;
    padding: 6px 12px;
    font-size: 0.75rem;
    border-radius: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.se-dark-theme .se-school-badge-dark > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Notification button — compact */
body.se-dark-theme .se-notif-btn-dark {
    width: 36px;
    height: 36px;
    font-size: 0.875rem;
}

/* User pill — compact */
body.se-dark-theme .se-user-pill-dark {
    gap: 8px;
    padding: 3px 6px;
}

body.se-dark-theme .se-user-avatar-dark {
    width: 34px;
    height: 34px;
    font-size: 0.8125rem;
}

body.se-dark-theme .se-user-info-dark .u-name {
    font-size: 0.8125rem;
}

body.se-dark-theme .se-user-info-dark .u-role {
    font-size: 0.6875rem;
}

/* Hamburger button — match height */
body.se-dark-theme .se-hamburger-btn-dark {
    width: 36px;
    height: 36px;
    font-size: 0.875rem;
}


/* ==========================================================================
   27.C  PAGE HEADER — CLEAN HIERARCHY, PROPER SPACING
   ========================================================================== */

body.se-dark-theme .se-page-head {
    margin-bottom: 1.25rem;
    gap: 0.75rem;
}

body.se-dark-theme .se-page-title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
    line-height: 1.2;
    margin: 0;
}

body.se-dark-theme .se-page-sub {
    font-size: 0.8125rem;
    color: #64748B;
    margin: 0.125rem 0 0;
}

body.se-dark-theme .se-crumbs {
    margin-bottom: 0.25rem;
    font-size: 0.6875rem;
}


/* ==========================================================================
   27.D  CARDS — COMPACT HEADER, CONSISTENT SPACING
   ========================================================================== */

/* Remove excessive hover lift on cards that wrap forms — only stat/link cards lift */
body.se-dark-theme .se-card:has(.se-card-body .se-form-grid),
body.se-dark-theme .se-card:has(.se-card-body .form-control),
body.se-dark-theme .se-card:has(.se-card-body .form-select) {
    transition: border-color 0.2s ease;
}

body.se-dark-theme .se-card:has(.se-card-body .se-form-grid):hover,
body.se-dark-theme .se-card:has(.se-card-body .form-control):hover,
body.se-dark-theme .se-card:has(.se-card-body .form-select):hover {
    transform: none;
    box-shadow: 0 4px 20px rgba(0,0,0,.35);
}

/* Card header — compact */
body.se-dark-theme .se-card-head {
    padding: 0.875rem 1.25rem;
}

body.se-dark-theme .se-card-title {
    font-size: 0.9375rem;
    font-weight: 650;
}

body.se-dark-theme .se-card-sub {
    font-size: 0.75rem;
    color: #64748B;
    margin: 0.0625rem 0 0;
}

/* Card body — consistent padding */
body.se-dark-theme .se-card-body {
    padding: 1.25rem;
}


/* ==========================================================================
   27.E  FORMS — HEIGHT, RADIUS, SPACING CONSISTENCY
   ========================================================================== */

/* Form grid: use 3 columns on desktop */
body.se-dark-theme .se-form-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

@media (min-width: 1200px) {
    body.se-dark-theme .se-form-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Labels — compact gap to input */
body.se-dark-theme .se-app .form-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #CBD5E1;
    margin-bottom: 0.375rem;
}

/* Required star */
body.se-dark-theme .se-req {
    color: #EF4444;
    font-weight: 700;
}

/* Inputs — consistent 44px height, 10px radius */
body.se-dark-theme .se-app .form-control,
body.se-dark-theme .se-app .form-select {
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    background-color: #0B1933;
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #fff;
    font-size: 0.875rem;
}

body.se-dark-theme .se-app .form-control::placeholder {
    color: #475569;
}

/* Hint text — tight to input */
body.se-dark-theme .se-hint {
    font-size: 0.75rem;
    color: #94A3B8;
    margin-top: 0.25rem;
    line-height: 1.4;
}

/* Form section spacing */
body.se-dark-theme .se-section-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #475569;
    padding-bottom: 0.5rem;
    margin: 0 0 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

body.se-dark-theme .se-section-label:not(:first-child) {
    margin-top: 1.5rem;
}

/* Form actions row */
body.se-dark-theme .se-form-actions {
    padding-top: 1rem;
    margin-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    gap: 0.5rem;
}


/* ==========================================================================
   27.F  VERTICAL SPACING — CONSISTENT SCALE
   ========================================================================== */

/* Stat grid → 1rem bottom margin */
body.se-dark-theme .se-stat-grid {
    margin-bottom: 1.25rem;
    gap: 1rem;
}

/* Between major page sections */
body.se-dark-theme .se-card + .se-card,
body.se-dark-theme .se-app .card + .card {
    margin-top: 1rem;
}


/* ==========================================================================
   27.G  TOPBAR / SIDEBAR RESPONSIVE — PREVENT OVERFLOW
   ========================================================================== */

@media (max-width: 1400px) {
    body.se-dark-theme .se-topbar-search {
        max-width: 260px;
    }

    body.se-dark-theme .se-school-badge-dark {
        max-width: 160px;
    }
}

@media (max-width: 1280px) {
    body.se-dark-theme {
        --se-sidebar-w: 260px;
    }

    body.se-dark-theme .se-content {
        padding: 1.25rem 1.5rem 2rem;
    }

    body.se-dark-theme .se-topbar {
        padding: 0 1.25rem;
    }

    body.se-dark-theme .se-topbar-search {
        max-width: 220px;
        min-width: 140px;
    }
}

@media (max-width: 1100px) {
    body.se-dark-theme .se-topbar-search {
        max-width: 180px;
        min-width: 120px;
    }

    body.se-dark-theme .se-school-badge-dark {
        max-width: 140px;
        font-size: 0.6875rem;
        padding: 5px 10px;
    }
}

/* Tablet — sidebar becomes drawer */
@media (max-width: 991.98px) {
    body.se-dark-theme .se-sidebar {
        transform: translateX(-100%);
        width: min(300px, 86vw);
    }

    body.se-dark-theme.se-drawer-open .se-sidebar {
        transform: translateX(0);
    }

    body.se-dark-theme .se-main {
        margin-left: 0;
    }

    body.se-dark-theme .se-hamburger,
    body.se-dark-theme .se-hamburger-btn-dark {
        display: grid;
    }

    body.se-dark-theme .se-topbar {
        padding: 0 1rem;
        gap: 0.75rem;
    }

    body.se-dark-theme .se-content {
        padding: 1rem 1rem 2rem;
    }

    body.se-dark-theme .se-topbar-page-info .topbar-title {
        font-size: 1rem;
    }
}

/* Mobile */
@media (max-width: 767.98px) {
    body.se-dark-theme .se-content {
        padding: 0.875rem 0.875rem 2rem;
    }

    body.se-dark-theme .se-page-title {
        font-size: 1.25rem;
    }

    /* Page actions full-width */
    body.se-dark-theme .se-page-head {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    body.se-dark-theme .se-page-actions {
        width: 100%;
    }

    body.se-dark-theme .se-page-actions > .btn {
        flex: 1 1 auto;
        min-height: 44px;
    }

    /* Forms single column */
    body.se-dark-theme .se-form-grid,
    body.se-dark-theme .se-form-grid.is-2col {
        grid-template-columns: minmax(0, 1fr);
    }

    body.se-dark-theme .se-form-grid .se-span-2 {
        grid-column: span 1;
    }

    /* Cards compact */
    body.se-dark-theme .se-card-head {
        padding: 0.75rem 1rem;
    }

    body.se-dark-theme .se-card-body {
        padding: 1rem;
    }

    /* Topbar compact */
    body.se-dark-theme .se-topbar {
        padding: 0 0.75rem;
        gap: 0.5rem;
    }

    body.se-dark-theme .se-topbar-page-info .topbar-title {
        font-size: 0.9375rem;
    }

    body.se-dark-theme .se-topbar-page-info .topbar-crumb {
        display: none;
    }

    /* User pill — avatar only */
    body.se-dark-theme .se-user-info-dark {
        display: none;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    body.se-dark-theme .se-content {
        padding: 0.75rem 0.75rem 2rem;
    }

    body.se-dark-theme .se-topbar {
        padding: 0 0.625rem;
    }

    body.se-dark-theme .se-stat-grid {
        gap: 0.625rem;
    }

    body.se-dark-theme .se-form-grid {
        gap: 0.75rem;
    }
}

/* Very narrow */
@media (max-width: 360px) {
    body.se-dark-theme .se-topbar-page-info .topbar-title {
        font-size: 0.875rem;
    }
}


/* ==========================================================================
   27.H  NO DOUBLE SCROLLBAR / HORIZONTAL OVERFLOW GUARD
   ========================================================================== */

/* Ensure the topbar never causes horizontal overflow */
body.se-dark-theme .se-topbar > * {
    min-width: 0;
}

/* Card ::before should not trigger overflow */
body.se-dark-theme .se-card::before {
    pointer-events: none;
    overflow: hidden;
}

/* ==========================================================================
   END SECTION 27 — LAYOUT & SPACING FIX
   ========================================================================== */


/* ==========================================================================
   28. PROGRESSIVE WEB APP (PWA) & DOWNLOAD APP BUTTON
   ========================================================================== */

.se-pwa-download-link {
    background: linear-gradient(135deg, rgba(49, 81, 211, 0.15) 0%, rgba(33, 58, 158, 0.1) 100%);
    border: 1px solid rgba(49, 81, 211, 0.25);
    color: #93c5fd !important;
    font-weight: 600;
    position: relative;
    overflow: hidden;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 0.25rem 0.2rem;
}

.se-pwa-download-link:hover {
    background: linear-gradient(135deg, rgba(49, 81, 211, 0.35) 0%, rgba(33, 58, 158, 0.25) 100%) !important;
    border-color: rgba(96, 165, 250, 0.6);
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(49, 81, 211, 0.28);
    transform: translateY(-1px);
}

.se-pwa-download-link #pwaDownloadIcon {
    color: #60a5fa !important;
    transition: transform 0.25s ease;
}

.se-pwa-download-link:hover #pwaDownloadIcon {
    transform: translateY(2px);
    color: #93c5fd !important;
}

.se-pwa-download-link.is-installed {
    background: rgba(34, 197, 94, 0.08) !important;
    border-color: rgba(34, 197, 94, 0.25) !important;
    color: #86efac !important;
}

.se-pwa-download-link.is-installed:hover {
    background: rgba(34, 197, 94, 0.15) !important;
    border-color: rgba(34, 197, 94, 0.45) !important;
}

.se-modal-pwa .nav-pills .nav-link {
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.15s ease;
}

.se-modal-pwa .nav-pills .nav-link.active {
    background: #3151d3 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(49, 81, 211, 0.4);
}


/* Standalone PWA & Safe Area Inset Support */
@supports (padding-top: env(safe-area-inset-top)) {
    @media all and (display-mode: standalone) {
        body.se-app {
            padding-top: env(safe-area-inset-top);
            padding-bottom: env(safe-area-inset-bottom);
        }
        .se-topbar {
            top: env(safe-area-inset-top);
        }
    }
}

/* Mobile App Shell & Touch Targets */
@media (max-width: 768px) {
    .se-nav-link {
        min-height: 44px;
    }
    .se-topbar-actions .se-icon-btn {
        min-width: 42px;
        min-height: 42px;
    }
}