/* ── Nepali (legacy, non-Unicode) fonts for Report Builder templates ──────────
   These are traditional "romanized-keyboard" Nepali fonts (not Unicode Devanagari).
   Font files aren't bundled with the repo — drop the .ttf files you have a license
   for into wwwroot/fonts/nepali/ using these exact filenames and they'll just work;
   until then, the font-family falls back to the next font in the stack wherever used. */
@font-face { font-family: 'Preeti';         src: url('/fonts/nepali/Preeti.ttf')        format('truetype'); font-display: swap; }
@font-face { font-family: 'Ganesh';         src: url('/fonts/nepali/Ganesh.ttf')        format('truetype'); font-display: swap; }
@font-face { font-family: 'Kantipur';       src: url('/fonts/nepali/Kantipur.ttf')      format('truetype'); font-display: swap; }
@font-face { font-family: 'Himali';         src: url('/fonts/nepali/Himali.ttf')        format('truetype'); font-display: swap; }
@font-face { font-family: 'Sagarmatha';     src: url('/fonts/nepali/Sagarmatha.ttf')    format('truetype'); font-display: swap; }
@font-face { font-family: 'Ananda';         src: url('/fonts/nepali/Ananda.ttf')        format('truetype'); font-display: swap; }
@font-face { font-family: 'PCS Nepali';     src: url('/fonts/nepali/PCS-Nepali.ttf')    format('truetype'); font-display: swap; }
@font-face { font-family: 'Fontasy Himaly'; src: url('/fonts/nepali/FontasyHimaly.ttf') format('truetype'); font-display: swap; }

/* ── --mud-palette-table-header shim ──────────────────────────────────────────
   MudBlazor 9.5 removed the `TableHeader` palette property (MudThemeProvider never emits this
   variable anymore — confirmed absent from its compiled CSS), but ~120 of this app's own report/
   list pages still reference var(--mud-palette-table-header) for their (often sticky) header row
   background. An undefined var() with no fallback makes the whole `background` declaration
   invalid per spec, so every one of those header rows was silently rendering fully transparent —
   on a sticky header this lets scrolled data rows show straight through the header text. Defining
   it once here, globally, makes all ~120 existing references self-heal with no per-page changes.
   Kept as a subtle tint (not a solid color) to match what those pages' own double-layered
   `linear-gradient(var(--mud-palette-table-header), var(--mud-palette-table-header)),
   var(--mud-palette-surface)` trick was already trying to achieve — an opaque, faintly-tinted
   header over the same solid backing every one of them already layers underneath it. */
:root {
    --mud-palette-table-header: rgba(0, 0, 0, 0.04);
}
#dash-shell.theme-dark {
    --mud-palette-table-header: rgba(255, 255, 255, 0.06);
}

/* ── View-mode MudButtonGroup selected-state contrast ─────────────────────────
   Every "Compact | Detailed | Bulk Edit"-style view-mode toggle across the app (Bill Run,
   Payroll Run, Student Bill Run Report, Student Ledger, and similar) is a MudButtonGroup whose
   selected button gets Variant.Filled and the rest Variant.Outlined — MudBlazor's own defaults for
   this pairing read as too close in contrast at a glance. Strengthened here globally, color-
   agnostic (doesn't hardcode Primary — some groups intentionally use Secondary/other colors), so
   every existing and future MudButtonGroup toggle in the app self-heals with no per-page change. */
.mud-button-group-root .mud-button-filled {
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3) !important;
}
.mud-button-group-root .mud-button-outlined {
    opacity: .7;
}

/* ── Accounting scrollable-table pattern (.acct-scroll-list) ──────────────────
   ~7 Accounting pages (General Ledger, Trial Balance, Journal Voucher List, Fixed Assets, Bank
   Accounts, Cash/Bank Book, Day Book) had already hand-rolled the same fix independently —
   wrapping their table in a max-height + overflow:auto MudPaper with a per-page inline <style>
   block for a sticky header — each copy only covering the TOP (thead), never the bottom, so a
   table's Closing Balance/Total row (the tfoot) scrolled out of view on a long ledger, which is
   the actual complaint this fixes. Promoted here once, globally, with the missing sticky-footer
   half added, so: (1) those 7 pages' duplicated inline <style> blocks can be deleted outright,
   and (2) every other Accounting table adopts the identical pattern just by adding the
   "acct-scroll-list" class + a max-height/overflow:auto style to its own wrapping MudPaper —
   no other page needs its own <style> block for this ever again. */
.acct-scroll-list thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: linear-gradient(var(--mud-palette-table-header), var(--mud-palette-table-header)), var(--mud-palette-surface);
}
.acct-scroll-list tfoot td, .acct-scroll-list tfoot th {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: var(--mud-palette-surface);
}
.acct-scroll-list tbody tr:hover {
    background: var(--mud-palette-action-default-hover);
}

/* ── Chart fullscreen toggle (VhChart + System Monitoring's ApexCharts) ───────
   Global (not component-scoped CSS isolation) since both VhChart.razor and
   SystemMonitoring.razor/MetricDetailDialog.razor render these class names directly. */
.vh-chart-wrap { position: relative; }

.vh-chart-actions {
    position: absolute;
    top: 2px;
    right: 4px;
    z-index: 5;
    opacity: 0.35;
    transition: opacity 0.15s;
}
.vh-chart-wrap:hover .vh-chart-actions {
    opacity: 1;
}
.vh-chart-fs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: rgba(0,0,0,0.06);
    color: #374151;
    cursor: pointer;
}
.vh-chart-fs-btn:hover {
    background: rgba(0,0,0,0.14);
}

.vh-chart-wrap:not(:fullscreen) .vh-chart-fs-exit { display: none; }
.vh-chart-wrap:fullscreen .vh-chart-fs-enter { display: none; }
.vh-chart-wrap:fullscreen {
    height: 100vh !important;
    width: 100vw !important;
    background: var(--mud-palette-surface, #fff);
    padding: 24px;
    box-sizing: border-box;
}

@media print {
    .vh-chart-actions { display: none !important; }
}

/* ── Charts follow the theme ───────────────────────────────────────────────
   ApexCharts paints axis labels, titles, legends and its tooltips / toolbar menu with fixed
   light-theme colours (dark grey text, white panels), so in the dark theme they vanished into
   the background. These use MudBlazor's palette variables, which are right in either theme —
   one rule set covering every chart (VhChart, the correlation heatmap, System Monitoring).
   Values drawn ON bars / slices (.apexcharts-datalabel, .apexcharts-pie-label) keep their own
   contrasting colours. */
.apexcharts-canvas .apexcharts-text:not(.apexcharts-datalabel):not(.apexcharts-pie-label),
.apexcharts-canvas .apexcharts-text:not(.apexcharts-datalabel):not(.apexcharts-pie-label) tspan,
.apexcharts-canvas .apexcharts-xaxis-label,
.apexcharts-canvas .apexcharts-yaxis-label,
.apexcharts-canvas .apexcharts-xaxis-title-text,
.apexcharts-canvas .apexcharts-yaxis-title-text {
    fill: var(--mud-palette-text-secondary) !important;
}
.apexcharts-canvas .apexcharts-title-text,
.apexcharts-canvas .apexcharts-subtitle-text,
.apexcharts-canvas .apexcharts-datalabels-group .apexcharts-datalabel-label,
.apexcharts-canvas .apexcharts-datalabels-group .apexcharts-datalabel-value {
    fill: var(--mud-palette-text-primary) !important;
}
.apexcharts-canvas .apexcharts-legend-text { color: var(--mud-palette-text-primary) !important; }
.apexcharts-canvas .apexcharts-gridline,
.apexcharts-canvas .apexcharts-xaxis line,
.apexcharts-canvas .apexcharts-xaxis-tick,
.apexcharts-canvas .apexcharts-yaxis line { stroke: var(--mud-palette-lines-default) !important; }
.apexcharts-canvas .apexcharts-tooltip.apexcharts-theme-light,
.apexcharts-canvas .apexcharts-xaxistooltip,
.apexcharts-canvas .apexcharts-yaxistooltip,
.apexcharts-canvas .apexcharts-menu {
    background: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    border-color: var(--mud-palette-lines-default) !important;
}
.apexcharts-canvas .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
    background: var(--mud-palette-background-gray) !important;
    border-color: var(--mud-palette-lines-default) !important;
}
.apexcharts-canvas .apexcharts-menu-item:hover { background: var(--mud-palette-action-default-hover) !important; }
.apexcharts-canvas .apexcharts-toolbar svg { fill: var(--mud-palette-text-secondary); }
/* Printed on white paper: always dark text, whatever the screen theme. */
@media print {
    .apexcharts-canvas .apexcharts-text:not(.apexcharts-datalabel):not(.apexcharts-pie-label),
    .apexcharts-canvas .apexcharts-text:not(.apexcharts-datalabel):not(.apexcharts-pie-label) tspan,
    .apexcharts-canvas .apexcharts-title-text,
    .apexcharts-canvas .apexcharts-datalabels-group text { fill: #333 !important; }
    .apexcharts-canvas .apexcharts-legend-text { color: #333 !important; }
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}


/* ===================== DASHBOARD SHARED UI ===================== */
/* Used by DashSchoolAdminContent, DashSuperAdminContent, DashTeacher/Student/Parent/InstitutionContent */

.dcard {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    display: flex;
    flex-direction: column
}

.dcard-head {
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-shrink: 0
}

    .dcard-head h3, .dcard-title {
        font-size: 15px;
        font-weight: 600;
        color: var(--ink);
        margin: 0;
        font-family: var(--sans)
    }

.dcard-sub {
    font-size: 12px;
    color: var(--muted);
    font-family: var(--mono);
    letter-spacing: .04em;
    margin-top: 3px
}

.dcard-link {
    font-size: 12px;
    color: var(--d-accent);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none
}

    .dcard-link:hover {
        text-decoration: underline
    }

    .dcard-link.danger {
        color: var(--coral)
    }

.dcard-body {
    padding: 22px
}

    .dcard-body.tight {
        padding: 0
    }

.dtable {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px
}

    .dtable th {
        text-align: left;
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: var(--muted);
        font-weight: 600;
        padding: 10px 22px;
        background: var(--bg);
        border-bottom: 1px solid var(--line)
    }

    .dtable td {
        padding: 13px 22px;
        border-bottom: 1px solid var(--line);
        color: var(--ink-2)
    }

    .dtable tr:last-child td {
        border-bottom: 0
    }

    .dtable tr:hover td {
        background: var(--bg)
    }

    .dtable td strong {
        color: var(--ink);
        font-weight: 600
    }

.dt-sub {
    font-size: 11px;
    color: var(--muted);
    font-family: var(--mono);
    margin-top: 2px;
    letter-spacing: .03em
}

.pill {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em
}

    .pill.paid {
        background: var(--teal-soft);
        color: var(--teal)
    }

    .pill.pending {
        background: var(--amber-soft);
        color: var(--amber)
    }

    .pill.overdue {
        background: var(--coral-soft);
        color: var(--coral)
    }

    .pill.active {
        background: var(--teal-soft);
        color: var(--teal)
    }

.act-feed {
    display: flex;
    flex-direction: column
}

.act-row {
    display: flex;
    gap: 12px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--line);
    transition: background .15s;
    align-items: flex-start
}

    .act-row:hover {
        background: var(--bg)
    }

    .act-row:last-child {
        border-bottom: 0
    }

.act-av {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    background: linear-gradient(135deg,var(--indigo),var(--indigo-dark))
}

    .act-av.coral {
        background: linear-gradient(135deg,#ea580c,#9a3412)
    }

    .act-av.teal {
        background: linear-gradient(135deg,#0d9488,#134e4a)
    }

    .act-av.amber {
        background: linear-gradient(135deg,#fbbf24,#ea580c)
    }

    .act-av.rose {
        background: linear-gradient(135deg,#e11d48,#9f1239)
    }

.act-info {
    flex: 1;
    min-width: 0
}

.act-t {
    font-size: 13px;
    color: var(--ink);
    line-height: 1.4
}

    .act-t strong {
        font-weight: 600
    }

.act-meta {
    color: var(--muted);
    font-size: 12px
}

.act-ts {
    font-size: 11px;
    color: var(--muted);
    font-family: var(--mono);
    letter-spacing: .04em;
    margin-top: 3px
}

.cal-list {
    display: flex;
    flex-direction: column
}

.cal-row {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    gap: 14px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--line);
    transition: background .15s;
    align-items: center
}

    .cal-row:hover {
        background: var(--bg)
    }

    .cal-row:last-child {
        border-bottom: 0
    }

.cal-date {
    font-family: var(--serif);
    font-size: 24px;
    color: var(--d-accent);
    font-weight: 500;
    line-height: 1;
    text-align: center
}

    .cal-date small {
        display: block;
        font-size: 9px;
        font-family: var(--mono);
        letter-spacing: .14em;
        color: var(--muted);
        text-transform: uppercase;
        margin-top: 3px;
        font-weight: 600
    }

.cal-t {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink)
}

.cal-s {
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 2px
}

.cal-tag {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 5px;
    font-weight: 600;
    background: var(--d-accent-soft);
    color: var(--d-accent);
    white-space: nowrap
}

    .cal-tag.coral {
        background: var(--coral-soft);
        color: var(--coral)
    }

    .cal-tag.teal {
        background: var(--teal-soft);
        color: var(--teal)
    }

.quick-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px
}

.quick {
    padding: 16px;
    border-radius: 11px;
    border: 1px solid var(--line);
    background: var(--bg);
    transition: border-color .15s,transform .15s,background .15s;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-decoration: none
}

    .quick:hover {
        border-color: var(--d-accent);
        transform: translateY(-1px);
        background: var(--paper)
    }

.quick-ic {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--d-accent-soft);
    color: var(--d-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px
}

.quick:nth-child(2) .quick-ic {
    background: var(--coral-soft);
    color: var(--coral)
}

.quick:nth-child(3) .quick-ic {
    background: var(--teal-soft);
    color: var(--teal)
}

.quick:nth-child(4) .quick-ic {
    background: var(--amber-soft);
    color: var(--amber)
}

.quick-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink)
}

.quick-desc {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.4
}

/* ===================== DASHBOARD RESETS ===================== */
/* Override public-site serif/layout styles within the dashboard shell */
.dash-shell,
.dash-shell * {
    box-sizing: border-box;
}

    /* The responsive public-site rules below add `section { padding: 80px 0 }` at ≤980px.
       Bare dashboard sections (cc-attn, cc-kpis-top) have no class to override it, so they
       bloat by ~160px. :not(.cc-card) leaves CcWidget sections alone so their own 14px/16px
       card padding keeps working (`.cc-card` has lower specificity than this selector but
       higher than the bare `section` rule, so it wins once this reset stays out of the way). */
    .dash-shell section:not(.cc-card) {
        padding: 0;
    }

    .dash-shell h1,
    .dash-shell h2,
    .dash-shell h3,
    .dash-shell h4,
    .dash-shell h5 {
        font-family: var(--sans);
        font-weight: 600;
        letter-spacing: normal;
        line-height: 1.3;
        color: inherit;
    }

    .dash-shell a {
        text-decoration: none;
        color: inherit;
    }

    .dash-shell button {
        font-family: var(--sans);
    }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 980px) {
    .menu, .nav-cta .btn-ghost {
        display: none
    }

    .hamburger {
        display: flex
    }

    .container {
        padding: 0 24px
    }

    section {
        padding: 80px 0
    }

    .page-hero {
        padding: 70px 0 70px
    }

    .hero {
        padding: 60px 0 0
    }

    .hero-slide {
        grid-template-columns: 1fr
    }

    .hero-visual {
        display: none
    }

    .section-head {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .feat-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .feat:nth-child(3n) {
        border-right: 1px solid var(--line)
    }

    .feat:nth-child(2n) {
        border-right: 0
    }

    .feat:nth-last-child(-n+3) {
        border-bottom: 1px solid var(--line)
    }

    .feat:nth-last-child(-n+2) {
        border-bottom: 0
    }

    .school-grid {
        grid-template-columns: 1fr 1fr
    }

    .ad-grid {
        grid-template-columns: repeat(6,1fr)
    }

    .ad.featured, .ad.large {
        grid-column: span 6
    }

    .ad.standard, .ad.small {
        grid-column: span 3
    }

    .news-grid {
        grid-template-columns: 1fr
    }

    .gal-grid {
        grid-template-columns: repeat(6,1fr)
    }

    .gal.s1, .gal.s2, .gal.s3, .gal.s4, .gal.s5, .gal.s6, .gal.s7, .gal.s8 {
        grid-column: span 3;
        grid-row: span 2
    }

    .stats-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .stat-cell {
        border-bottom: 1px solid rgba(255,255,255,.14);
        padding: 24px
    }

    .form-shell {
        grid-template-columns: 1fr;
        padding: 0 24px
    }

    .form-card {
        padding: 32px 28px
    }

    .form-row, .form-row.three {
        grid-template-columns: 1fr
    }

    .cta-band {
        padding: 60px 32px;
        margin: 60px 16px;
        border-radius: 24px
    }

    .foot-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px
    }

    .login-shell {
        grid-template-columns: 1fr;
        min-height: auto
    }

    .login-side {
        padding: 36px 28px;
        min-height: auto
    }

        .login-side .testimonial {
            display: none
        }

    .login-main {
        padding: 48px 28px
    }
}

@media (max-width:560px) {
    .school-grid, .feat-grid {
        grid-template-columns: 1fr
    }

    .feat {
        border-right: 0 !important;
        border-bottom: 1px solid var(--line)
    }

        .feat:last-child {
            border-bottom: 0
        }

    .gal-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .gal.s1, .gal.s2, .gal.s3, .gal.s4, .gal.s5, .gal.s6, .gal.s7, .gal.s8 {
        grid-column: span 1;
        grid-row: span 1
    }

    .stats-grid {
        grid-template-columns: 1fr
    }

    .foot-grid {
        grid-template-columns: 1fr
    }

    .form-card {
        padding: 28px 20px
    }

    .topbar .right {
        display: none
    }
}

/* ── Dashboard shared utilities (used across multiple dashboard components) ── */

/* Quick-access link item */
.quick-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
    width: 100%;
}

/* Calendar / schedule list */
.cal-list {
    display: flex;
    flex-direction: column;
}

.cal-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line, rgba(11,16,32,.08));
}

    .cal-row:last-child {
        border-bottom: none;
    }

.cal-date {
    min-width: 44px;
    font-family: var(--serif, Georgia, serif);
    font-size: 22px;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    line-height: 1;
    text-align: center;
    flex-shrink: 0;
}

    .cal-date small {
        display: block;
        font-family: var(--mono, monospace);
        font-size: 9px;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--mud-palette-text-secondary);
        font-weight: 600;
        margin-top: 2px;
    }

.cal-info {
    flex: 1;
    min-width: 0;
}

.cal-t {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-s {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
    font-family: var(--mono, monospace);
    letter-spacing: .02em;
}

.cal-chip {
    flex-shrink: 0;
    font-size: 10px !important;
    height: 22px !important;
}

.sb-child {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    text-decoration: none;
}

/* ===================== DASHBOARD SHARED UI ===================== */

/* Loading */
.page-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60vh;
}

/* Page header — flush below topbar, sticky on scroll */
.page-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 100;
    /* Extend side-to-side beyond dash-content's 32px horizontal padding */
    margin: 0 -32px 22px;
    padding: 0 32px;
    min-height: 52px;
    /* Same background/border as topbar — visually one continuous bar */
    background: var(--tb-bg, #ffffff);
    border-bottom: 1px solid var(--tb-border, #e5e7eb);
}

@media (max-width: 860px) {
    /* Matches .dash-content's own reduced padding at this breakpoint (DashboardLayout.razor.css) */
    .page-head {
        margin: 0 -14px 16px;
        padding: 0 14px;
    }
}

.page-title {
    font-family: var(--serif,Georgia,serif);
    font-size: clamp(22px,3vw,30px);
    font-weight: 400;
    color: var(--ink,#0f172a);
    letter-spacing: -.02em;
    margin: 0 0 4px;
    line-height: 1.1;
}

.page-sub {
    font-size: 13px;
    color: var(--muted,#94a3b8);
    margin: 0;
}

.page-head-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ── Student form sections + document tiles ─────────────────────────────── */
.stu-form-section {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--d-accent,#6366f1);
    padding: 6px 0 2px;
    margin-top: 4px;
    border-bottom: 1px solid var(--line,rgba(11,16,32,.08));
    width: 100%;
}

.stu-doc-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-2,#475569);
    display: block;
    margin-bottom: 6px;
}

.stu-doc {
    display: flex;
    align-items: center;
    gap: 12px;
}

.stu-doc-thumb {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--line,rgba(11,16,32,.1));
    background: var(--bg,#f8fafc);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--muted,#94a3b8);
    text-decoration: none;
}

    .stu-doc-thumb.empty {
        border-style: dashed;
    }

.stu-doc-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.school-banner {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.school-banner-img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--line,rgba(11,16,32,.1));
    background: var(--bg,#f8fafc);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--muted,#94a3b8);
    font-size: 13px;
}

    .school-banner-img.empty {
        border-style: dashed;
    }

/* ── Bulk import dialog ─────────────────────────────────────────────────── */
.import-templates {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.import-tpl-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    border: 1px solid var(--d-accent,#6366f1);
    background: rgba(99,102,241,.06);
    color: var(--d-accent,#6366f1);
    transition: background .15s;
}

    .import-tpl-btn:hover:not(:disabled) {
        background: rgba(99,102,241,.14);
    }

    .import-tpl-btn:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

.import-tpl-hint {
    font-size: 12px;
    color: var(--muted,#94a3b8);
}

.import-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.import-drop {
    position: relative;
}

.import-drop-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 16px;
    cursor: pointer;
    border: 1.5px dashed var(--line,rgba(11,16,32,.18));
    border-radius: 12px;
    color: var(--ink-2,#475569);
    font-size: 14px;
    font-weight: 600;
    transition: border-color .15s, background .15s;
}

    .import-drop-label:hover {
        border-color: var(--d-accent,#6366f1);
        background: rgba(99,102,241,.04);
    }

    .import-drop-label i {
        font-size: 1.3rem;
        color: var(--d-accent,#6366f1);
    }

.import-summary {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.import-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 700;
}

    .import-chip.ok {
        background: rgba(5,150,105,.12);
        color: #059669;
    }

    .import-chip.new {
        background: rgba(5,150,105,.12);
        color: #059669;
    }

    .import-chip.upd {
        background: rgba(99,102,241,.12);
        color: #6366f1;
    }

    .import-chip.err {
        background: rgba(225,29,72,.12);
        color: #e11d48;
    }

.import-tag {
    flex-shrink: 0;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 1px 7px;
    border-radius: 5px;
    white-space: nowrap;
}

    .import-tag.new {
        background: rgba(5,150,105,.12);
        color: #059669;
    }

    .import-tag.upd {
        background: rgba(99,102,241,.12);
        color: #6366f1;
    }

.import-preview {
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--line,rgba(11,16,32,.08));
    border-radius: 10px;
}

.import-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    font-size: 13px;
    border-bottom: 1px solid rgba(11,16,32,.05);
}

    .import-row:last-child {
        border-bottom: none;
    }

    .import-row.bad {
        background: rgba(225,29,72,.04);
    }

.import-row-name {
    font-weight: 600;
    color: var(--ink,#0f172a);
}

.import-row-meta {
    color: var(--muted,#94a3b8);
    font-size: 12px;
}

.import-row-err {
    margin-left: auto;
    color: #e11d48;
    font-size: 12px;
    font-weight: 600;
}

.import-row-note {
    margin-left: auto;
    color: #d97706;
    font-size: 11.5px;
    font-weight: 600;
    cursor: help;
    white-space: nowrap;
}

/* Shared backdrop for any click-outside-to-close dropdown */
.dropdown-backdrop {
    position: fixed;
    inset:    0;
    z-index:  899;
}

/* Stat strip */
.stat-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    position: relative;
    z-index: 10;
}

.stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 99px;
    font-size: 12.5px;
    font-weight: 600;
    border: 1px solid var(--line,rgba(11,16,32,.08));
    background: var(--paper,#fff);
    color: var(--ink-2,#475569);
    cursor: pointer;
    transition: box-shadow .15s, opacity .15s;
}

button.stat-pill {
    font-family: inherit;
}

.stat-pill:hover {
    opacity: .82;
}

.stat-pill.indigo {
    background: var(--d-accent-soft,rgba(99,102,241,.08));
    color: var(--d-accent,#6366f1);
    border-color: transparent;
}

.stat-pill.teal {
    background: rgba(13,148,136,.08);
    color: #0d9488;
    border-color: transparent;
}

.stat-pill.amber {
    background: rgba(217,119,6,.08);
    color: #d97706;
    border-color: transparent;
}

.stat-pill.coral {
    background: rgba(234,88,12,.08);
    color: #ea580c;
    border-color: transparent;
}

.stat-pill.chip-active {
    box-shadow: 0 0 0 2px currentColor;
    font-weight: 700;
}

/* School Map Picker */
.school-map-picker {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.smp-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.smp-hint {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .78rem;
    color: var(--ink-3,#94a3b8);
}

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

.smp-canvas {
    height: 280px;
    border-radius: 8px;
    border: 1px solid var(--line,rgba(11,16,32,.1));
    overflow: hidden;
}

.smp-coords {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .75rem;
    font-family: var(--mono);
    color: #0d9488;
    background: rgba(13,148,136,.07);
    padding: 4px 10px;
    border-radius: 6px;
}

.smp-no-pin {
    font-size: .75rem;
    color: var(--ink-3,#94a3b8);
    margin: 0;
}

/* Selected address display chip */
.addr-display {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .78rem;
    color: #0d9488;
    margin-top: 8px;
    padding: 5px 10px;
    background: rgba(13,148,136,.07);
    border-radius: 6px;
    border: 1px solid rgba(13,148,136,.15);
}

/* Address entry card */
.addr-entry {
    border: 1.5px solid var(--line,rgba(11,16,32,.09));
    border-radius: 10px;
    padding: 18px;
    background: var(--paper,#fff);
}

.addr-entry-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.addr-entry-label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink-1,#1e293b);
}

.addr-map-toggle {
    font-size: .75rem;
    cursor: pointer;
    color: var(--indigo,#6366f1);
    background: none;
    border: none;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Filter bar */
.filter-bar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.filter-bar-right {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.search-box {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 220px;
}

.search-ic {
    position: absolute;
    left: 12px;
    color: var(--muted,#94a3b8);
    pointer-events: none;
}

.search-input {
    width: 100%;
    height: 38px;
    border: 1px solid var(--line,rgba(11,16,32,.1));
    border-radius: 10px;
    padding: 0 36px 0 38px;
    font-size: 13.5px;
    font-family: var(--sans,system-ui);
    color: var(--ink,#0f172a);
    background: var(--paper,#fff);
    outline: none;
    transition: border-color .15s,box-shadow .15s;
}

    .search-input:focus {
        border-color: var(--d-accent,#6366f1);
        box-shadow: 0 0 0 3px var(--d-accent-soft,rgba(99,102,241,.1));
    }

.search-clear {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted,#94a3b8);
    padding: 2px;
    display: flex;
    align-items: center;
    transition: color .14s;
}

    .search-clear:hover {
        color: var(--ink,#0f172a);
    }

.filter-select {
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--line,rgba(11,16,32,.1));
    border-radius: 10px;
    font-size: 13px;
    font-family: var(--sans,system-ui);
    color: var(--ink,#0f172a);
    background: var(--paper,#fff);
    outline: none;
    cursor: pointer;
    transition: border-color .15s;
}

    .filter-select:focus {
        border-color: var(--d-accent,#6366f1);
    }

/* Data card + table */
.data-card {
    background: var(--paper,#fff);
    border: 1px solid var(--line,rgba(11,16,32,.08));
    border-radius: 16px;
    overflow: hidden;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .data-table th {
        text-align: left;
        font-family: var(--mono,monospace);
        font-size: 9.5px;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--muted,#94a3b8);
        font-weight: 600;
        padding: 14px 16px 12px;
        border-bottom: 1px solid var(--line,rgba(11,16,32,.08));
        white-space: nowrap;
    }

    .data-table td {
        padding: 12px 16px;
        border-bottom: 1px solid var(--line,rgba(11,16,32,.05));
        vertical-align: middle;
    }

    .data-table tbody tr:last-child td {
        border-bottom: none;
    }

    .data-table tbody tr:hover td {
        background: var(--bg,#f8fafc);
    }

.th-right, .td-right {
    text-align: right;
}

.cell-with-av {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cell-name {
    font-weight: 600;
    color: var(--ink,#0f172a);
    font-size: 13px;
}

.cell-meta {
    font-size: 11px;
    color: var(--muted,#94a3b8);
    margin-top: 2px;
}

.row-av {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--serif,Georgia,serif);
}

/* Bulk task matrix grid */
.bulk-grid-wrap {
    overflow: auto;
    border: 1px solid var(--border,#e2e8f0);
    border-radius: 10px;
    flex: 1 1 auto;
    min-height: 200px;
}

.bulk-grid {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    font-size: 13px;
}

    .bulk-grid thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--surface,#fff);
        border-bottom: 1px solid var(--border,#e2e8f0);
        padding: 8px 10px;
        text-align: left;
        vertical-align: top;
    }

    .bulk-grid tbody td {
        border-bottom: 1px solid var(--border,#eef2f7);
        padding: 6px 10px;
        vertical-align: top;
    }

    .bulk-grid tbody tr:hover td {
        background: var(--bg,#f8fafc);
    }

.bulk-col-roll {
    width: 64px;
    white-space: nowrap;
    color: var(--muted,#94a3b8);
}

.bulk-col-name {
    min-width: 180px;
}

.bulk-col-slot {
    min-width: 200px;
}

.bulk-slot-head {
    font-weight: 700;
    color: var(--ink,#0f172a);
    margin-bottom: 4px;
}

.bulk-setall {
    opacity: .85;
}

.bulk-footer-row td {
    position: sticky;
    bottom: 0;
    background: var(--surface,#fff);
    border-top: 2px solid var(--border,#e2e8f0);
    padding: 8px 10px;
    vertical-align: top;
}

.bulk-footer-label {
    font-weight: 600;
    font-size: 12px;
    color: var(--muted,#94a3b8);
    white-space: nowrap;
}

.bulk-footer-cell {
    min-width: 200px;
}

.bulk-footer-count {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    line-height: 1.6;
}

.bulk-footer-name {
    color: var(--ink,#0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bulk-footer-num {
    flex-shrink: 0;
    font-weight: 700;
    color: var(--primary,#6366f1);
    background: color-mix(in srgb, var(--primary,#6366f1) 10%, transparent);
    border-radius: 999px;
    padding: 0 6px;
    min-width: 22px;
    text-align: center;
}

.bulk-footer-unset .bulk-footer-name {
    color: var(--muted,#94a3b8);
}

.bulk-footer-unset .bulk-footer-num {
    color: var(--muted,#94a3b8);
    background: color-mix(in srgb, var(--muted,#94a3b8) 10%, transparent);
}

/* Bulk Students toolbar */
.bulk-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 0 12px;
}

.bulk-auto-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.bulk-apply-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.bulk-auto-label {
    font-size: 12px;
    color: var(--muted,#94a3b8);
    white-space: nowrap;
}

.bulk-num-input {
    width: 72px !important;
    min-width: 0 !important;
    text-align: center;
}

.bulk-default-input {
    min-width: 160px;
}

.bulk-toolbar-sep {
    width: 1px;
    height: 24px;
    background: var(--border,#e2e8f0);
    flex-shrink: 0;
}

.bulk-apply-btn {
    background: var(--d-accent,#6366f1) !important;
    color: #fff !important;
    border-color: var(--d-accent,#6366f1) !important;
}

    .bulk-apply-btn:hover {
        opacity: .88;
    }

    .bulk-apply-btn:disabled {
        opacity: .45;
        cursor: not-allowed;
    }

/* Bulk Students table columns */
.bulk-col-check {
    width: 40px;
    text-align: center;
    vertical-align: middle !important;
}

    .bulk-col-check input[type="checkbox"] {
        margin: 0;
        width: 14px;
        height: 14px;
        accent-color: var(--d-accent,#6366f1);
    }

.bulk-col-edit {
    min-width: 180px;
}

.bulk-col-action {
    width: 56px;
    text-align: center;
    vertical-align: middle !important;
}

/* Selected row highlight */
.bulk-row-selected td {
    background: rgba(99,102,241,.04) !important;
}

/* Cell inputs */
.bulk-cell-input {
    width: 100%;
    max-width: 200px;
    padding: 4px 8px;
    border: 1px solid var(--border,#e2e8f0);
    border-radius: 6px;
    font-size: 13px;
    background: var(--paper,#fff);
    outline: none;
    transition: border-color .15s;
}

    .bulk-cell-input:focus {
        border-color: var(--d-accent,#6366f1);
    }

    .bulk-cell-input.dirty {
        border-color: #f59e0b;
        background: rgba(245,158,11,.04);
    }

.bulk-cell-select {
    width: 100%;
    max-width: 160px;
    padding: 4px 8px;
    border: 1px solid var(--border,#e2e8f0);
    border-radius: 6px;
    font-size: 13px;
    background: var(--paper,#fff);
    outline: none;
    cursor: pointer;
}

    .bulk-cell-select:focus {
        border-color: var(--d-accent,#6366f1);
    }

/* Save status icons */
.bulk-status-ok {
    color: #22c55e;
    font-size: 15px;
}

.bulk-status-error {
    color: #ef4444;
    font-size: 15px;
    cursor: help;
}

/* Student code in meta line */
.bulk-code {
    margin-left: 8px;
    font-family: var(--mono,monospace);
    font-size: 11px;
    color: var(--muted,#94a3b8);
}

/* ── Property picker dropdown ──────────────────────────────────────────────── */
.prop-picker-wrap {
    position: relative;
    display: inline-flex;
    z-index: 100;
}

.prop-picker-btn {
    white-space: nowrap;
}

.prop-picker-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.prop-picker-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 101;
    min-width: 260px;
    max-height: 420px;
    overflow-y: auto;
    background: var(--paper,#fff);
    border: 1px solid var(--border,#e2e8f0);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.14);
    padding: 6px 0 8px;
}

.prop-picker-group {
    padding: 8px 12px 2px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted,#94a3b8);
}

.prop-picker-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
    transition: background .1s;
}

    .prop-picker-item:hover {
        background: rgba(99,102,241,.06);
    }

    .prop-picker-item input[type="checkbox"] {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        accent-color: var(--d-accent,#6366f1);
        cursor: pointer;
    }

/* ── Multi-prop column ─────────────────────────────────────────────────────── */
.bulk-col-prop {
    min-width: 155px;
    vertical-align: top;
}

.bulk-setall-row {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    padding-top: 4px;
}

.bulk-setall-input {
    padding: 3px 7px;
    border: 1px solid var(--border,#e2e8f0);
    border-radius: 6px;
    font-size: 12px;
    background: var(--paper,#fff);
    outline: none;
    min-width: 0;
    transition: border-color .15s;
}

.bulk-setall-select {
    padding: 3px 6px;
    border: 1px solid var(--border,#e2e8f0);
    border-radius: 6px;
    font-size: 12px;
    background: var(--paper,#fff);
    outline: none;
    cursor: pointer;
    transition: border-color .15s;
}

    .bulk-setall-input:focus,
    .bulk-setall-select:focus {
        border-color: var(--d-accent,#6366f1);
    }

/* ── Marking System list cards ────────────────────────────────────────────── */
.ms-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 16px;
}

.ms-card {
    background: var(--paper,#fff);
    border: 1px solid var(--border,#e2e8f0);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: box-shadow .15s;
}

    .ms-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.07); }

    .ms-card--inactive { opacity: .65; }

.ms-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.ms-card-title {
    font-weight: 700;
    font-size: 15px;
    color: var(--text,#1e293b);
}

.ms-card-desc {
    font-size: 12px;
    color: var(--muted,#94a3b8);
    margin-top: 2px;
}

.ms-card-actions { display: flex; gap: 2px; flex-shrink: 0; }

.ms-band-table-wrap { overflow-x: auto; }

.ms-band-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

    .ms-band-table th {
        text-align: left;
        padding: 4px 8px;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--muted,#94a3b8);
        border-bottom: 1px solid var(--border,#e2e8f0);
    }

    .ms-band-table td {
        padding: 5px 8px;
        border-bottom: 1px solid var(--border,#eef2f7);
        vertical-align: middle;
    }

    .ms-band-table tbody tr:last-child td { border-bottom: none; }

.ms-band-range { font-family: var(--mono,monospace); color: var(--d-accent,#6366f1); white-space: nowrap; }
.ms-band-label { font-weight: 600; }
.ms-band-remarks { color: var(--muted,#94a3b8); }

.ms-card-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 4px;
}

.ms-band-count    { font-size: 11px; color: var(--muted,#94a3b8); margin-left: auto; }
.ms-default-label { font-size: 11px; color: var(--d-accent,#6366f1); font-style: italic; }
.ms-hint          { font-size: 11px; color: var(--muted,#94a3b8); font-weight: 400; margin-left: 4px; }
.ms-system-badge  { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; background: #fef9c3; color: #a16207; letter-spacing: .04em; }
.ms-default-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; background: #f59e0b; color: #fff; letter-spacing: .04em; }
.ms-set-default-btn { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 10px; border: 1px solid #d1d5db; background: transparent; color: #6b7280; cursor: pointer; letter-spacing: .04em; transition: background .15s, color .15s; }
.ms-set-default-btn:hover:not(:disabled) { background: #fef3c7; color: #b45309; border-color: #f59e0b; }
.ms-set-default-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Marking-type toggle button group */
.ms-type-toggle { display: flex; gap: 0; border-radius: 6px; overflow: hidden; border: 1px solid #e2e8f0; width: fit-content; }
.ms-type-btn {
    padding: 5px 18px; font-size: 13px; font-weight: 500;
    background: #f8fafc; color: #64748b; border: none; cursor: pointer;
    transition: background .15s, color .15s;
}
.ms-type-btn + .ms-type-btn { border-left: 1px solid #e2e8f0; }
.ms-type-btn--active { background: var(--d-accent,#6366f1); color: #fff; }
.ms-type-btn:hover:not(.ms-type-btn--active) { background: #f1f5f9; }

/* Marking-type chip on the card */
.ms-type-chip { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 10px; }
.ms-type-chip--pct     { background: #e0f2fe; color: #0369a1; }
.ms-type-chip--grading { background: #ede9fe; color: #7c3aed; }

.ms-no-bands { font-size: 12px; color: var(--muted,#94a3b8); padding: 8px 0; }

/* ── Edit form ─────────────────────────────────────────────────────────────── */
.ms-form { display: flex; flex-direction: column; gap: 20px; margin-top: 16px; max-width: 900px; }

.ms-form-fields {
    background: var(--paper,#fff);
    border: 1px solid var(--border,#e2e8f0);
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ms-form-row { display: flex; flex-direction: column; gap: 5px; }

.ms-form-row--inline { flex-direction: row; align-items: center; gap: 24px; flex-wrap: wrap; }

.ms-label { font-size: 13px; font-weight: 600; color: var(--text,#1e293b); }

.ms-required { color: #ef4444; }

.ms-input {
    width: 100%;
    max-width: 400px;
}

.ms-input--sm { max-width: 90px !important; }

.ms-textarea {
    width: 100%;
    max-width: 500px;
    resize: vertical;
    font-family: inherit;
}

/* ── Band editor ───────────────────────────────────────────────────────────── */
.ms-bands-section {
    background: var(--paper,#fff);
    border: 1px solid var(--border,#e2e8f0);
    border-radius: 10px;
    padding: 16px 20px;
}

.ms-bands-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.ms-bands-title { font-weight: 700; font-size: 14px; color: var(--text,#1e293b); }

.ms-band-editor-wrap { overflow-x: auto; }

.ms-band-editor {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .ms-band-editor th {
        text-align: left;
        padding: 5px 8px;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--muted,#94a3b8);
        border-bottom: 1px solid var(--border,#e2e8f0);
        white-space: nowrap;
    }

    .ms-band-editor td {
        padding: 5px 5px;
        border-bottom: 1px solid var(--border,#eef2f7);
        vertical-align: middle;
    }

    .ms-band-editor tbody tr:last-child td { border-bottom: none; }

.ms-be-op  { width: 110px; }
.ms-be-val { width: 90px;  }
.ms-be-label   { min-width: 140px; }
.ms-be-grade   { width: 70px; }
.ms-be-gp      { width: 70px; }
.ms-be-remarks { min-width: 140px; }
.ms-be-del { width: 40px; text-align: center; }

.ms-band-grade { text-align: center; font-weight: 600; color: var(--d-accent,#6366f1); }
.ms-band-gp    { text-align: center; color: var(--muted,#94a3b8); }

.ms-be-select {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid var(--border,#e2e8f0);
    border-radius: 6px;
    font-size: 12px;
    background: var(--paper,#fff);
    outline: none;
    cursor: pointer;
}

    .ms-be-select:focus { border-color: var(--d-accent,#6366f1); }

.ms-be-input {
    width: 100%;
    padding: 4px 7px;
    border: 1px solid var(--border,#e2e8f0);
    border-radius: 6px;
    font-size: 12.5px;
    background: var(--paper,#fff);
    outline: none;
    transition: border-color .15s;
}

    .ms-be-input:focus { border-color: var(--d-accent,#6366f1); }

/* Type badge */
.type-badge {
    display: inline-block;
    font-family: var(--mono,monospace);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .05em;
    padding: 3px 8px;
    border-radius: 5px;
    background: var(--bg,#f1f5f9);
    color: var(--ink-2,#475569);
    white-space: nowrap;
}

    .type-badge.teal {
        background: rgba(13,148,136,.1);
        color: #0d9488;
    }

/* Status chip */
.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 99px;
    white-space: nowrap;
}

    .status-chip.active {
        background: rgba(5,150,105,.1);
        color: #059669;
    }

    .status-chip.inactive {
        background: rgba(100,116,139,.1);
        color: #64748b;
    }

    .status-chip.pending {
        background: rgba(217,119,6,.1);
        color: #d97706;
    }

    .status-chip.suspended {
        background: rgba(220,38,38,.1);
        color: #dc2626;
    }

    .status-chip.archived {
        background: rgba(100,116,139,.15);
        color: #475569;
    }

        .status-chip.active::before, .status-chip.inactive::before, .status-chip.pending::before,
        .status-chip.suspended::before, .status-chip.archived::before {
            content: '';
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: currentColor;
        }

/* Row actions */
.row-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    align-items: center;
}

/* Default toggle = "Disable" (destructive → red); .enable = "Enable" (positive → green).
   Colours are applied at rest so the two actions are distinguishable at a glance. */
.toggle-btn {
    padding: 4px 10px;
    border-radius: 7px;
    border: 1px solid #fca5a5;
    background: rgba(225,29,72,.06);
    font-size: 12px;
    font-weight: 600;
    color: #e11d48;
    cursor: pointer;
    transition: all .14s;
}

    .toggle-btn:hover {
        background: rgba(225,29,72,.16);
        color: #be123c;
        border-color: #f87171;
    }

    .toggle-btn.enable {
        border-color: #6ee7b7;
        background: rgba(5,150,105,.06);
        color: #059669;
    }

    .toggle-btn.enable:hover {
        background: rgba(5,150,105,.16);
        color: #047857;
        border-color: #34d399;
    }

/* ── Status filter (All / Enabled / Disabled) ───────────────────────────── */
.vh-status-filter {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--line, rgba(11,16,32,.1));
    border-radius: 9px;
    background: var(--surface-2, rgba(11,16,32,.03));
}

.vh-sf-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: none;
    border-radius: 7px;
    background: transparent;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-2, #475569);
    cursor: pointer;
    transition: all .14s;
}

    .vh-sf-btn:hover { color: var(--mud-palette-text-primary); }

    .vh-sf-btn.active {
        background: var(--surface, #fff);
        color: var(--mud-palette-text-primary);
        box-shadow: 0 1px 2px rgba(11,16,32,.08);
    }

    .vh-sf-btn.vh-sf-on.active  { color: #059669; }
    .vh-sf-btn.vh-sf-off.active { color: #e11d48; }

.vh-sf-count {
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 99px;
    background: var(--surface-2, rgba(11,16,32,.06));
    color: inherit;
}

/* Empty state */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    gap: 12px;
}

.empty-msg {
    font-size: 14px;
    color: var(--ink-2,#475569);
    margin: 0;
}

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    border-top: 1px solid var(--line,rgba(11,16,32,.06));
}

.page-btn {
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid var(--line,rgba(11,16,32,.1));
    background: var(--paper,#fff);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-2,#475569);
    cursor: pointer;
    transition: all .14s;
}

    .page-btn:hover:not(:disabled) {
        background: var(--d-accent,#6366f1);
        color: #fff;
        border-color: var(--d-accent,#6366f1);
    }

    .page-btn:disabled {
        opacity: .4;
        cursor: default;
    }

.page-info {
    font-size: 12px;
    color: var(--muted,#94a3b8);
    font-family: var(--mono,monospace);
}

/* Form layout */
.form-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-section {
    background: var(--paper,#fff);
    border: 1px solid var(--line,rgba(11,16,32,.08));
    border-radius: 16px;
    overflow: hidden;
}

.form-section-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line,rgba(11,16,32,.06));
}

.form-section-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--d-accent-soft,rgba(99,102,241,.1));
    color: var(--d-accent,#6366f1);
}

    .form-section-icon.teal {
        background: rgba(13,148,136,.1);
        color: #0d9488;
    }

    .form-section-icon.coral {
        background: rgba(234,88,12,.1);
        color: #ea580c;
    }

    .form-section-icon.amber {
        background: rgba(217,119,6,.1);
        color: #d97706;
    }

.form-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink,#0f172a);
}

.form-section-sub {
    font-size: 12px;
    color: var(--muted,#94a3b8);
    margin-top: 2px;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
    padding: 22px;
}

.form-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px 20px;
    padding: 22px;
}

@media (max-width:900px) {
    .form-grid-3 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width:700px) {
    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-grid-3 {
        grid-template-columns: 1fr;
    }
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .form-field.span-2 {
        grid-column: 1 / -1;
    }

.field-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-2,#475569);
    letter-spacing: .02em;
}

.field-hint {
    font-weight: 400;
    opacity: .65;
    margin-left: 4px;
}

.required {
    color: #e11d48;
}

.field-input, .field-select, .field-textarea {
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--line,rgba(11,16,32,.12));
    border-radius: 9px;
    font-size: 13.5px;
    font-family: var(--sans,system-ui);
    color: var(--ink,#0f172a);
    background: var(--paper,#fff);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    width: 100%;
    box-sizing: border-box;
}

.field-textarea {
    height: auto;
    padding: 10px 12px;
    resize: vertical;
}

    .field-input:focus, .field-select:focus, .field-textarea:focus {
        border-color: var(--d-accent,#6366f1);
        box-shadow: 0 0 0 3px var(--d-accent-soft,rgba(99,102,241,.1));
    }

.field-input--error {
    border-color: #e11d48 !important;
}

.field-error {
    font-size: 11.5px;
    color: #e11d48;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    padding: 16px 22px;
    border-top: 1px solid var(--line,rgba(11,16,32,.06));
}

/* Breadcrumb link */
.breadcrumb-link {
    color: var(--d-accent,#6366f1);
    text-decoration: none;
    font-size: 13px;
}

    .breadcrumb-link:hover {
        text-decoration: underline;
    }

.breadcrumb-sep {
    color: var(--muted,#94a3b8);
    margin: 0 6px;
    font-size: 13px;
}

/* School info card (AddSchoolAdmin page) */
.school-info-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: var(--paper,#fff);
    border: 1px solid var(--line,rgba(11,16,32,.08));
    border-radius: 14px;
    margin-bottom: 20px;
}

.sic-av {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--serif,Georgia,serif);
}

.sic-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink,#0f172a);
}

.sic-meta {
    font-size: 12px;
    color: var(--muted,#94a3b8);
    margin-top: 2px;
}

/* Existing admins list */
.existing-admins {
    background: var(--paper,#fff);
    border: 1px solid var(--line,rgba(11,16,32,.08));
    border-radius: 14px;
    margin-bottom: 20px;
    overflow: hidden;
}

.ea-head {
    padding: 14px 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink,#0f172a);
    border-bottom: 1px solid var(--line,rgba(11,16,32,.06));
}

.ea-list {
    padding: 8px 12px;
}

.ea-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px;
    border-radius: 8px;
}

    .ea-row:hover {
        background: var(--bg,#f8fafc);
    }

.ea-av {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--d-accent,#6366f1);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ea-info {
    flex: 1;
    min-width: 0;
}

.ea-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink,#0f172a);
}

.ea-email {
    font-size: 11.5px;
    color: var(--muted,#94a3b8);
}

/* Content component shared styles */
.sched-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sched-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line,rgba(11,16,32,.04));
}

    .sched-row:last-child {
        border-bottom: none;
    }

    .sched-row.sched-now {
        background: var(--d-accent-soft,rgba(99,102,241,.06));
        border-radius: 10px;
        padding: 10px 12px;
        margin: 0 -12px;
    }

.sched-time {
    width: 52px;
    text-align: right;
    flex-shrink: 0;
}

.sched-t {
    font-family: var(--mono,monospace);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-2,#475569);
}

.sched-live {
    font-family: var(--mono,monospace);
    font-size: 9px;
    font-weight: 700;
    color: #059669;
    letter-spacing: .1em;
    margin-top: 2px;
}

.sched-line {
    width: 3px;
    height: 36px;
    border-radius: 99px;
    background: var(--line,rgba(11,16,32,.1));
    flex-shrink: 0;
}

    .sched-line.active {
        background: var(--d-accent,#6366f1);
    }

.sched-subject {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink,#0f172a);
}

.sched-class {
    font-size: 11.5px;
    color: var(--muted,#94a3b8);
    margin-top: 2px;
}

.sched-status {
    margin-left: auto;
    flex-shrink: 0;
}

.att-done {
    font-size: 12px;
    font-weight: 600;
    color: #059669;
}

.att-pending {
    font-size: 12px;
    color: var(--muted,#94a3b8);
}

.marks-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.marks-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg,#f8fafc);
    border-radius: 10px;
}

.marks-subject {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink,#0f172a);
}

.marks-class {
    font-size: 11.5px;
    color: var(--muted,#94a3b8);
    margin-top: 2px;
}

.marks-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.marks-due {
    font-size: 11px;
    font-family: var(--mono,monospace);
    color: var(--ink-2,#475569);
}

    .marks-due.urgent {
        color: #e11d48;
    }

.marks-summary {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--muted,#94a3b8);
    padding-top: 4px;
}

.att-overview {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.att-class-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.att-class-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink,#0f172a);
}

.att-class-pct {
    font-family: var(--mono,monospace);
    font-size: 12px;
    font-weight: 700;
}

    .att-class-pct.indigo {
        color: var(--d-accent,#6366f1);
    }

    .att-class-pct.teal {
        color: #0d9488;
    }

    .att-class-pct.amber {
        color: #d97706;
    }

    .att-class-pct.coral {
        color: #ea580c;
    }

.att-bar {
    height: 6px;
    background: var(--bg,#f1f5f9);
    border-radius: 99px;
    overflow: hidden;
}

.att-fill {
    height: 100%;
    border-radius: 99px;
    background: var(--d-accent,#6366f1);
}

    .att-fill.teal {
        background: #0d9488;
    }

    .att-fill.amber {
        background: #d97706;
    }

    .att-fill.coral {
        background: #ea580c;
    }

.att-class-meta {
    font-size: 11px;
    color: var(--muted,#94a3b8);
    margin-top: 4px;
}

/* Student / parent specific */
.result-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.result-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--bg,#f8fafc);
    border-radius: 10px;
}

.result-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink,#0f172a);
}

.result-exam {
    font-size: 11.5px;
    color: var(--muted,#94a3b8);
    margin-top: 2px;
}

.result-score-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.result-score {
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.result-marks {
    font-family: var(--serif,Georgia,serif);
    font-size: 20px;
    font-weight: 400;
    color: var(--ink,#0f172a);
}

.result-total {
    font-size: 11px;
    color: var(--muted,#94a3b8);
}

.grade-badge {
    font-family: var(--mono,monospace);
    font-size: 10px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 5px;
}

    .grade-badge.A, .grade-badge\[A\+\] {
        background: rgba(5,150,105,.1);
        color: #059669;
    }

    .grade-badge.B, .grade-badge\[B\+\] {
        background: rgba(99,102,241,.1);
        color: #6366f1;
    }

    .grade-badge.C {
        background: rgba(217,119,6,.1);
        color: #d97706;
    }

.att-donut-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}

.att-donut {
    width: 120px;
    height: 120px;
}

.att-breakdown {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.att-bk-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink-2,#475569);
}

    .att-bk-row .att-num {
        margin-left: auto;
        font-family: var(--mono,monospace);
        font-size: 12px;
        font-weight: 600;
        color: var(--ink,#0f172a);
    }

.att-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

    .att-dot.present {
        background: #6366f1;
    }

    .att-dot.absent {
        background: #e11d48;
    }

    .att-dot.late {
        background: #d97706;
    }

.fee-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding: 12px 14px;
    background: rgba(217,119,6,.07);
    border: 1px solid rgba(217,119,6,.18);
    border-radius: 10px;
    font-size: 13px;
    color: var(--ink-2,#475569);
}

.fee-title {
    font-weight: 600;
    color: var(--amber,#d97706);
    font-size: 12px;
}

.fee-amount {
    font-size: 11.5px;
    color: var(--ink-2,#475569);
    margin-top: 1px;
}

/* Parent child card */
.child-card {
    background: var(--paper,#fff);
    border: 1px solid var(--line,rgba(11,16,32,.08));
    border-radius: 16px;
    padding: 20px;
}

.child-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.child-av {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--serif,Georgia,serif);
}

.child-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink,#0f172a);
}

.child-grade {
    font-size: 12px;
    color: var(--muted,#94a3b8);
    margin-top: 2px;
}

.child-stats {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 14px 0;
    border-top: 1px solid var(--line,rgba(11,16,32,.06));
    border-bottom: 1px solid var(--line,rgba(11,16,32,.06));
    margin-bottom: 12px;
}

.child-stat {
    flex: 1;
    text-align: center;
}

.child-stat-div {
    width: 1px;
    height: 32px;
    background: var(--line,rgba(11,16,32,.08));
    flex-shrink: 0;
}

.child-stat-val {
    font-family: var(--serif,Georgia,serif);
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 4px;
}

    .child-stat-val.indigo {
        color: var(--d-accent,#6366f1);
    }

    .child-stat-val.teal {
        color: #0d9488;
    }

    .child-stat-val.coral {
        color: #ea580c;
    }

.child-stat-key {
    font-size: 10px;
    font-family: var(--mono,monospace);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted,#94a3b8);
}

.child-fee-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(217,119,6,.07);
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--ink-2,#475569);
}

/* Notice list */
.notice-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.notice-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    border-radius: 10px;
    transition: background .14s;
    position: relative;
}

    .notice-row:hover {
        background: var(--bg,#f8fafc);
    }

    .notice-row.unread {
        background: var(--d-accent-soft,rgba(99,102,241,.04));
    }

.notice-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--d-accent-soft,rgba(99,102,241,.1));
    color: var(--d-accent,#6366f1);
}

    .notice-icon.teal {
        background: rgba(13,148,136,.1);
        color: #0d9488;
    }

    .notice-icon.coral {
        background: rgba(234,88,12,.1);
        color: #ea580c;
    }

    .notice-icon.amber {
        background: rgba(217,119,6,.1);
        color: #d97706;
    }

.notice-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink,#0f172a);
    line-height: 1.3;
}

.notice-meta {
    font-size: 11px;
    color: var(--muted,#94a3b8);
    margin-top: 2px;
}

.notice-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--d-accent,#6366f1);
    flex-shrink: 0;
}

/* Institution page */
.school-cards {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.school-item {
    border: 1px solid var(--line,rgba(11,16,32,.08));
    border-radius: 12px;
    padding: 16px;
    transition: box-shadow .15s;
}

    .school-item:hover {
        box-shadow: 0 4px 16px -6px rgba(0,0,0,.1);
    }

.school-item-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.school-av {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.school-item-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink,#0f172a);
}

.school-item-loc {
    font-size: 11.5px;
    color: var(--muted,#94a3b8);
    margin-top: 2px;
}

.school-item-stats {
    display: flex;
    gap: 0;
}

.school-stat {
    flex: 1;
    text-align: center;
    padding: 6px 0;
}

    .school-stat:not(:last-child) {
        border-right: 1px solid var(--line,rgba(11,16,32,.07));
    }

.school-stat-val {
    font-family: var(--serif,Georgia,serif);
    font-size: 20px;
    font-weight: 400;
    color: var(--ink,#0f172a);
}

.school-stat-key {
    font-size: 10px;
    font-family: var(--mono,monospace);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted,#94a3b8);
    margin-top: 2px;
}

.rev-total {
    font-family: var(--serif,Georgia,serif);
    font-size: 32px;
    font-weight: 400;
    color: var(--ink,#0f172a);
    letter-spacing: -.02em;
}

.rev-sub {
    font-size: 12px;
    color: #059669;
    font-weight: 600;
    margin: 4px 0 18px;
}

.rev-bars {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rev-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rev-bar-label {
    font-size: 12px;
    color: var(--ink-2,#475569);
    width: 90px;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rev-bar-track {
    flex: 1;
    height: 6px;
    background: var(--bg,#f1f5f9);
    border-radius: 99px;
    overflow: hidden;
}

.rev-bar-fill {
    height: 100%;
    border-radius: 99px;
    background: var(--d-accent,#6366f1);
}

    .rev-bar-fill.teal {
        background: #0d9488;
    }

    .rev-bar-fill.amber {
        background: #d97706;
    }

.rev-bar-val {
    font-family: var(--mono,monospace);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-2,#475569);
    width: 80px;
    text-align: right;
    flex-shrink: 0;
}

.inst-stats {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.inst-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg,#f8fafc);
    border-radius: 10px;
}

.inst-stat-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--d-accent-soft,rgba(99,102,241,.1));
    color: var(--d-accent,#6366f1);
}

    .inst-stat-icon.teal {
        background: rgba(13,148,136,.1);
        color: #0d9488;
    }

    .inst-stat-icon.coral {
        background: rgba(234,88,12,.1);
        color: #ea580c;
    }

    .inst-stat-icon.amber {
        background: rgba(217,119,6,.1);
        color: #d97706;
    }

.inst-stat-val {
    font-family: var(--serif,Georgia,serif);
    font-size: 20px;
    font-weight: 400;
    color: var(--ink,#0f172a);
    line-height: 1;
}

.inst-stat-key {
    font-size: 11.5px;
    color: var(--muted,#94a3b8);
    margin-top: 2px;
}

.inst-stat-trend {
    margin-left: auto;
    font-family: var(--mono,monospace);
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

    .inst-stat-trend.up {
        color: #059669;
    }

/* ── Table action links ───────────────────────────────────────────────────── */
.action-link {
    padding: 4px 10px;
    border-radius: 7px;
    border: 1px solid var(--line,rgba(11,16,32,.1));
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-2,#475569);
    cursor: pointer;
    transition: all .14s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

    .action-link:hover {
        background: var(--accent-soft,rgba(99,102,241,.08));
        color: var(--accent,#6366f1);
        border-color: var(--accent,#6366f1);
    }

.action-link-danger:hover {
    background: rgba(220,38,38,.08);
    color: #dc2626;
    border-color: #dc2626;
}

/* Hides an element only inside VidhyaHub.printReportArea's print popup — the popup copies the
   whole app.css bundle, so this one generic rule covers every report page's own "don't print this
   column/button" needs instead of each page hand-rolling its own @media print block. */
@media print {
    .no-print { display: none !important; }
}

/* MudThemeProvider injects every --mud-palette-* custom property at runtime elsewhere in the live
   page (not via any linked stylesheet) — printReportArea's popup only gets the target print area's
   own outerHTML plus linked stylesheets, so those variables are undefined inside it. Any border
   relying on one (var(--mud-palette-table-lines) etc.) silently fails to render there: not just
   this app's own report tables, but MudTable/MudSimpleTable's own default row separators and
   Bordered="true" cell lines too. Defining fixed, print-appropriate fallbacks on the popup
   document's own :root fixes every such rule at once instead of overriding each individually. */
@media print {
    :root {
        --mud-palette-table-lines: rgba(0, 0, 0, 0.3);
        --mud-palette-table-header: rgba(0, 0, 0, 0.04);
        --mud-palette-text-primary: #000;
        --mud-palette-text-secondary: #444;
        --mud-palette-lines-default: rgba(0, 0, 0, 0.3);
        --mud-palette-surface: #fff;
        --mud-palette-error: #b00020;
    }
}

/* Inverse of .no-print — content that exists only for the print popup (a plain read-only table
   standing in for an on-screen editing grid full of <input> cells, which prints as a mess of
   bordered form fields instead of a report). Same "screen:none / print:block" technique
   ReportPrintHeader.razor.css already uses for its own print-only header block. */
.print-only { display: none; }
@media print {
    .print-only { display: table; }
    /* MudBlazor's own table wrapper defaults to overflow-x:auto, which clips a wide table at the
       print popup's page width instead of letting print pagination handle it — same class of bug
       *-tbl-wrap's own @media print override fixes for the custom report grids. */
    .mud-table-container { overflow: visible !important; }
}

/* Wraps an .action-link with a small count badge centered above it (e.g. SchoolList's
   Admins/Features/Sessions actions showing how many of each the school already has). */
.action-with-count {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.action-count {
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    color: var(--ink-3,#94a3b8);
    background: var(--surface-2,rgba(11,16,32,.05));
    border-radius: 6px;
    padding: 1px 6px;
    min-width: 16px;
    text-align: center;
}

    .action-count.has-value {
        color: var(--accent,#6366f1);
        background: var(--accent-soft,rgba(99,102,241,.1));
    }

/* ── Multi-badge cell ─────────────────────────────────────────────────────── */
.cell-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.type-badge.indigo {
    background: rgba(99,102,241,.1);
    color: #6366f1;
}

.type-badge.teal {
    background: rgba(13,148,136,.1);
    color: #0d9488;
}

.type-badge.amber {
    background: rgba(217,119,6,.1);
    color: #b45309;
}

.type-badge.coral {
    background: rgba(234,88,12,.1);
    color: #ea580c;
}

/* ── Row avatar image ─────────────────────────────────────────────────────── */
.row-av-img {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

/* ── Avatar upload ────────────────────────────────────────────────────────── */
.avatar-upload-row {
    display: flex;
    align-items: center;
    gap: 24px;
}

.avatar-preview {
    width: 100px;
    height: 100px;
    border-radius: 16px;
    background: var(--bg,#f1f5f9);
    border: 2px dashed var(--line,rgba(11,16,32,.12));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

    .avatar-preview img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.avatar-placeholder {
    color: var(--muted,#94a3b8);
}

.avatar-upload-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.avatar-file-input {
    display: none;
}

.avatar-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    border-radius: 9px;
    border: 1.5px solid var(--accent,#6366f1);
    color: var(--accent,#6366f1);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .14s;
}

    .avatar-upload-btn:hover {
        background: rgba(99,102,241,.08);
    }

.avatar-remove-btn {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: 9px;
    border: 1.5px solid #e11d48;
    color: #e11d48;
    font-size: 12px;
    font-weight: 600;
    background: none;
    cursor: pointer;
    transition: all .14s;
}

    .avatar-remove-btn:hover {
        background: rgba(225,29,72,.06);
    }

.avatar-hint {
    font-size: 11.5px;
    color: var(--muted,#94a3b8);
    margin: 0;
}

/* ── Grid search bar (above DataGrid) ─────────────────────────────────────── */
.grid-search-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--paper, #fff);
    border: 1px solid rgba(11,16,32,.07);
    border-radius: 12px 12px 0 0;
    border-bottom: 1px solid rgba(11,16,32,.06);
}

/* ── MudDataGrid customisation (.vh-datagrid) ─────────────────────────────── */

/* Card shell — top rounding removed because .grid-search-bar sits above */
.vh-datagrid {
    border-radius: 0 0 14px 14px !important;
    overflow: hidden;
    border: 1px solid rgba(11,16,32,.07) !important;
    border-top: none !important;
    flex: 1 1 auto;
    min-height: 0;
    /* Height="100%" (VhDataGrid's default) makes .mud-table-container an inline height:100% child —
       with no flex layout here, that 100% resolves against this box's own flex-computed height and
       leaves zero room for the pager footer that follows as a sibling, which this element's own
       overflow:hidden then clips away entirely. Flex-column + letting only the table container
       shrink (below) makes the two share this box's real height instead, so the footer stays visible. */
    display: flex;
    flex-direction: column;
}

    .vh-datagrid > *:not(.mud-table-container) {
        flex-shrink: 0;
    }

    .vh-datagrid .mud-paper {
        border-radius: 0 0 14px 14px;
    }

    /* Header row */
    .vh-datagrid thead tr th {
        background: var(--bg,#f8fafc) !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--muted,#94a3b8) !important;
        font-family: var(--mono,monospace);
        border-bottom: 1.5px solid rgba(11,16,32,.06) !important;
        padding: 8px 12px !important;
        white-space: nowrap;
    }

/* Filter popup (ColumnFilterMenu mode) */
.mud-popover .mud-datagrid-filter-field input {
    font-size: 13px;
}

.mud-popover .mud-datagrid-filter-field .mud-input-root {
    font-size: 13px;
}

/* Data rows */
.vh-datagrid tbody tr td {
    padding: 9px 12px !important;
    font-size: 13px !important;
    border-bottom: 1px solid rgba(11,16,32,.04) !important;
    vertical-align: middle !important;
    color: var(--ink,#0f172a);
}

/* Hover */
.vh-datagrid tbody tr:hover td {
    background: rgba(99,102,241,.04) !important;
}

/* Striped even rows */
.vh-datagrid tbody tr:nth-child(even) td {
    background: var(--bg,#f8fafc) !important;
}

.vh-datagrid tbody tr:nth-child(even):hover td {
    background: rgba(99,102,241,.04) !important;
}

/* Group header rows — opaque (layered over the same solid --bg the column header uses) rather
   than the bare 6%-alpha tint on its own, and explicitly static/z-index:0 so it can never end up
   stacking above the sticky column header above it while scrolling. */
.vh-datagrid .mud-datagrid-group-row td {
    background: linear-gradient(rgba(99,102,241,.06), rgba(99,102,241,.06)), var(--bg, #f8fafc) !important;
    position: static !important;
    z-index: 0 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--d-accent,#6366f1) !important;
    border-bottom: 1px solid rgba(99,102,241,.12) !important;
}

/* Sort icon tint */
.vh-datagrid .mud-button-root.mud-icon-button .mud-icon-root {
    color: var(--muted,#94a3b8);
    font-size: 16px;
}

.vh-datagrid th[aria-sort] .mud-button-root.mud-icon-button .mud-icon-root {
    color: var(--d-accent,#6366f1);
}

/* Pagination footer */
.vh-datagrid .mud-table-pagination {
    border-top: 1px solid rgba(11,16,32,.06) !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
    color: var(--ink-2,#475569) !important;
}

    .vh-datagrid .mud-table-pagination .mud-select .mud-input-root {
        font-size: 12px !important;
    }

/* No-records state */
.vh-datagrid .mud-datagrid-no-records td {
    padding: 40px 20px !important;
}

/* "Actions" column right-align */
.vh-datagrid .td-right {
    text-align: right;
}

/* SelectColumn checkbox — compact, centred */
.vh-datagrid .mud-table-cell:first-child,
.vh-datagrid th:first-child {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    padding: 0 4px !important;
    text-align: center !important;
}

.vh-datagrid .mud-checkbox {
    margin: 0 !important;
    padding: 0 !important;
}

.vh-datagrid .mud-checkbox .mud-icon-root {
    font-size: 18px !important;
}

/* Column options button (3-dot) — show on header hover */
.vh-datagrid .mud-datagrid-column-options {
    opacity: 0;
    transition: opacity .15s;
}

.vh-datagrid th:hover .mud-datagrid-column-options {
    opacity: 1;
}

/* Drag handle shown on hoverable column headers */
.vh-datagrid .mud-datagrid-drag-indicator {
    color: var(--muted,#94a3b8);
    opacity: 0;
    transition: opacity .15s;
}

.vh-datagrid th:hover .mud-datagrid-drag-indicator {
    opacity: 1;
}

/* ── Toolbar (above grid) ─────────────────────────────────────────────────── */
.vh-datagrid .mud-toolbar {
    min-height: 36px !important;
    padding: 4px 12px !important;
    background: var(--bg, #f8fafc) !important;
    border-bottom: 1px solid rgba(11,16,32,.06) !important;
}

.vh-grid-toolbar {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 10px;
}

.vh-grid-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--mud-palette-text-secondary);
    font-style: italic;
    flex: 1;
    min-width: 0;
}

/* Case-sensitive toggle in toolbar */
.vh-grid-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--ink-2, #475569);
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(99,102,241,.06);
    border: 1px solid rgba(99,102,241,.18);
    user-select: none;
    white-space: nowrap;
    transition: background .15s, border-color .15s;
}

    .vh-grid-toggle:hover {
        background: rgba(99,102,241,.12);
        border-color: rgba(99,102,241,.32);
    }

    .vh-grid-toggle input[type="checkbox"] {
        margin: 0;
        width: 14px;
        height: 14px;
        cursor: pointer;
        accent-color: var(--d-accent, #6366f1);
    }

/* ── Grid settings dropdown (multi-select toggles + actions) ─────────────── */
.vh-grid-settings {
    text-transform: none !important;
    font-weight: 500 !important;
    font-size: 12px !important;
}

.vh-grid-settings-section {
    padding: 6px 0;
    min-width: 220px;
}

.vh-grid-settings-head {
    padding: 4px 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--mud-palette-text-secondary);
}

.vh-grid-settings-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    font-size: 13px;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    user-select: none;
}

    .vh-grid-settings-row:hover {
        background: rgba(99,102,241,.06);
    }

    .vh-grid-settings-row input[type="checkbox"] {
        margin: 0;
        width: 14px;
        height: 14px;
        accent-color: var(--d-accent, #6366f1);
        cursor: pointer;
    }

.vh-grid-settings-action {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 14px;
    background: transparent;
    border: none;
    text-align: left;
    font-size: 13px;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    transition: background .12s;
}

    .vh-grid-settings-action:hover:not(:disabled) {
        background: rgba(99,102,241,.06);
    }

    .vh-grid-settings-action:disabled {
        color: var(--mud-palette-text-secondary);
        cursor: not-allowed;
    }

    .vh-grid-settings-action i {
        color: var(--mud-palette-text-secondary);
        width: 16px;
    }

    .vh-grid-settings-action span:nth-of-type(1) {
        flex: 1;
    }

.vh-grid-settings-badge {
    background: var(--d-accent, #6366f1);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 99px;
    min-width: 18px;
    text-align: center;
}

/* Auto-hide stat-chips whose [data-count="0"] (no items match) */
.stat-pill[data-count="0"] {
    display: none !important;
}

/* Grid toolbar controls (StatusFilter etc.) sit on the LEFT of the stat-strip. */
.stat-strip-grid-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

    .stat-strip-grid-controls > * {
        flex: 0 0 auto;
    }

/* Right side of the stat-strip: column picker icon + settings + export bar */
.stat-strip-export {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}

/* ── Column picker icon-button + dropdown ────────────────────────────────── */
.col-picker-wrap {
    position: relative;
    display:  inline-flex;
}

.col-picker-btn {
    background:   rgba(100,116,139,.08);
    border-color: rgba(100,116,139,.25);
    color:        #475569;
    gap:          5px;
}

.col-picker-btn:hover:not(:disabled) {
    background:   rgba(100,116,139,.15);
    border-color: #475569;
}

.col-picker-badge {
    display:      inline-flex;
    align-items:  center;
    justify-content: center;
    min-width:    16px;
    height:       16px;
    padding:      0 4px;
    border-radius:99px;
    font-size:    10px;
    font-weight:  700;
    background:   var(--d-accent,#6366f1);
    color:        #fff;
    line-height:  1;
}

.col-picker-dropdown {
    position:     absolute;
    top:          calc(100% + 4px);
    right:        0;
    min-width:    180px;
    background:   var(--paper,#fff);
    border:       1px solid rgba(11,16,32,.1);
    border-radius:10px;
    box-shadow:   0 8px 24px rgba(11,16,32,.1);
    z-index:      900;
    overflow:     hidden;
    animation:    drop-in .12s ease;
}

.col-picker-head {
    padding:     8px 14px 6px;
    font-size:   11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color:       var(--muted,#94a3b8);
}

.col-picker-divider {
    height:     1px;
    background: rgba(11,16,32,.06);
    margin:     2px 0;
}

.col-picker-row {
    display:      flex;
    align-items:  center;
    gap:          9px;
    padding:      7px 14px;
    cursor:       pointer;
    font-size:    .8rem;
    color:        var(--ink,#0f172a);
    transition:   background .1s;
    user-select:  none;
}

.col-picker-row:hover {
    background: rgba(99,102,241,.06);
}

.col-picker-row.col-picker-all {
    font-weight: 600;
}

.col-picker-row input[type="checkbox"] {
    margin:  0;
    width:   14px;
    height:  14px;
    cursor:  pointer;
    accent-color: var(--d-accent,#6366f1);
    flex-shrink: 0;
}

/* Clear-filters icon button sits between controls and settings menu. */
.vh-grid-clear-filters {
    align-self: center;
}

/* Fixed footer aggregation row shown inside MudDataGrid PagerContent */
.vh-grid-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 6px 14px;
    background: rgba(99,102,241,.04);
    border-top: 1px solid rgba(11,16,32,.08);
    font-size: 12px;
    color: var(--ink-2, #475569);
}

.vh-grid-footer-aggs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.vh-grid-footer-agg {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 0;
}

    .vh-grid-footer-agg b {
        font-weight: 700;
        color: var(--mud-palette-text-primary);
        font-variant-numeric: tabular-nums;
    }

.vh-grid-footer-agg-label {
    color: var(--mud-palette-text-secondary);
    text-transform: lowercase;
}

.vh-grid-footer-agg-dot {
    color: var(--muted, #cbd5e1);
}

.vh-grid-footer-pager {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
}

.vh-grid-footer-pager .mud-table-pagination {
    margin-left: 0;
}

.vh-grid-showall {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: var(--ink-2, #475569);
    user-select: none;
    white-space: nowrap;
}

    .vh-grid-showall input[type="checkbox"] {
        width: 14px;
        height: 14px;
        accent-color: var(--mud-palette-primary, #6366f1);
        cursor: pointer;
    }

    .vh-grid-showall span {
        font-size: 12px;
    }

/* ── Freeze pane (first / actions column) ────────────────────────────────── */
/* CSS-only sticky columns. Toggled by adding `freeze-first` / `freeze-last`
   to the .vh-datagrid wrapper. Works with FixedHeader because position:sticky
   composes vertically + horizontally on the same element. */

.vh-datagrid.freeze-first thead th:first-child,
.vh-datagrid.freeze-first tbody td:first-child {
    position: sticky !important;
    left: 0;
    z-index: 6;
    background: var(--paper, #fff) !important;
    box-shadow: 2px 0 4px -2px rgba(11,16,32,.18);
}

.vh-datagrid.freeze-first thead th:first-child {
    z-index: 7;
    background: var(--bg, #f8fafc) !important;
}

.vh-datagrid.freeze-first tbody tr:nth-child(even) td:first-child {
    background: var(--bg, #f8fafc) !important;
}

.vh-datagrid.freeze-first tbody tr:hover td:first-child {
    background: rgba(99,102,241,.06) !important;
}

.vh-datagrid.freeze-last thead th:last-child,
.vh-datagrid.freeze-last tbody td:last-child {
    position: sticky !important;
    right: 0;
    z-index: 5;
    background: var(--paper, #fff) !important;
    box-shadow: -2px 0 4px -2px rgba(11,16,32,.18);
}

.vh-datagrid.freeze-last thead th:last-child {
    z-index: 7;
    background: var(--bg, #f8fafc) !important;
}

.vh-datagrid.freeze-last tbody tr:nth-child(even) td:last-child {
    background: var(--bg, #f8fafc) !important;
}

.vh-datagrid.freeze-last tbody tr:hover td:last-child {
    background: rgba(99,102,241,.06) !important;
}

/* ── Sticky header (FixedHeader="true") ──────────────────────────────────── */
.vh-datagrid .mud-table-container {
    border-radius: 0;
    flex: 1 1 auto;
    min-height: 0;
}

/* Pin the whole header block (title row + filter row) as one rigid unit instead of sticking each
   row's cells independently with a guessed pixel `top` offset for the second row — a wrong guess
   there is exactly what let the filter row overlap up into the title row while scrolling. Modern
   browsers support position:sticky directly on <thead>, so both rows move together and stay
   correctly stacked no matter how tall the title row actually renders (sort icons, column-options
   button, dense mode, etc. all change its real height).
   z-index here must stay BELOW 10 — .stat-strip (the grid toolbar row above the grid, holding
   VhGridColumnsPicker's column-options dropdown and ExportBar's Excel/PDF dropdowns) is its own
   `position:relative; z-index:10` stacking context. Those dropdowns are position:absolute with
   z-index:900, but that 900 is scoped *inside* .stat-strip's own context — it only orders them
   against other things inside .stat-strip, and can never let them escape above a sibling context
   with a higher top-level z-index than .stat-strip's own 10, no matter how high. A first attempt
   at this fix used z-index:15 here, which (being a sibling context with a HIGHER top-level number)
   won that comparison and visually buried both dropdowns behind the sticky header — exactly the
   report ("column options / export popups blocked, shown behind the header"). 8 is enough to stay
   above the freeze-column tbody cells' own external z-index (6/5, see freeze-first/freeze-last
   below) while staying under .stat-strip's 10. */
.vh-datagrid thead {
    position: sticky !important;
    top: 0 !important;
    z-index: 8 !important;
}

.vh-datagrid thead th {
    /* !important on position/z-index too — group rows are unpositioned (position:static), which
       should already stack below any positioned element regardless of z-index value, but forcing
       these past any other rule that might be winning on specificity is the difference between
       "should work" and actually being pinned in front while scrolling. position/top no longer do
       any positioning work of their own (the parent <thead> above now owns that) but are left
       sticky/0 so the cell doesn't fight its parent's stacking context. This z-index is scoped
       *inside* thead's own stacking context (thead itself is position:sticky with an explicit
       z-index, so it forms one) — it only orders header cells against each other (e.g. the frozen
       corner cell vs. plain cells within the same header row) and has no effect on anything outside
       thead, so it does not need to — and must not be relied on to — stay under .stat-strip's 10. */
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    background: var(--bg, #f8fafc) !important;
}

/* ── Column resize handle ─────────────────────────────────────────────────── */
.vh-datagrid .mud-resizer {
    width: 4px;
    background: transparent;
    transition: background .15s;
    cursor: col-resize;
}

    .vh-datagrid .mud-resizer:hover,
    .vh-datagrid .mud-resizer.mud-resizer-active {
        background: var(--d-accent, #6366f1);
    }

/* ── Column hide/show panel (HideableColumns="true") ─────────────────────── */
.mud-datagrid-columns-panel .mud-list-item {
    font-size: 13px !important;
}

.mud-datagrid-columns-panel .mud-list-item-text {
    font-size: 13px;
}

/* ── Inline filter row (FilterMode=ColumnFilterRow) ──────────────────────── */
/* MudBlazor renders the filter row as <tr> with class mud-table-row inside thead.
   Each cell is .filter-header-cell. We give it a soft tint and shrink the
   underlying input so the row doesn't take up too much vertical space. */
.vh-datagrid thead .filter-header-cell,
.vh-datagrid thead tr.mud-table-row + tr td {
    /* Layered over the same solid --bg the main header row uses (not just the bare 4%-alpha tint
       on its own) — with FixedHeader="true" this row sits in the sticky thead too, and a
       near-fully-transparent background let scrolled body rows show straight through it, same
       root cause as the header row's own transparency bug. Positioning is now handled entirely by
       the parent <thead>'s own position:sticky (see above), which pins the title row + filter row
       together as one rigid block — this cell is deliberately left position:static (no sticky/top/
       z-index of its own). It previously had its own position:sticky with a guessed `top: 36px`
       offset to sit below the title row, but that guess was too small relative to the title row's
       real rendered height and made this row overlap upward into it while scrolling; giving both
       rows independent top:0 stickiness on the same scroll container would reproduce the identical
       bug, so this row must stay unpositioned and simply ride along inside the sticky thead. */
    background: linear-gradient(rgba(99,102,241,.04), rgba(99,102,241,.04)), var(--bg, #f8fafc) !important;
    position: static !important;
    padding: 3px 8px !important;
    border-bottom: 1px solid rgba(11,16,32,.08) !important;
    font-family: var(--sans, system-ui) !important;
    text-transform: none;
    letter-spacing: normal;
}

    /* Filter input — strip the heavy underline and tighten height */
    .vh-datagrid thead .filter-header-cell .mud-input,
    .vh-datagrid thead .filter-header-cell .mud-input-control,
    .vh-datagrid thead .filter-header-cell .mud-select {
        margin-top: 0 !important;
        font-size: 12.5px !important;
    }

    .vh-datagrid thead .filter-header-cell .mud-input-slot {
        min-height: 28px !important;
        padding: 0 4px !important;
        background: rgba(255,255,255,.9);
        border-radius: 4px;
        border: 1px solid rgba(11,16,32,.1);
    }

        .vh-datagrid thead .filter-header-cell .mud-input-slot:before,
        .vh-datagrid thead .filter-header-cell .mud-input-slot:after {
            display: none !important;
        }

    .vh-datagrid thead .filter-header-cell .mud-input-input {
        padding: 4px 6px !important;
        font-size: 12.5px !important;
        height: auto !important;
        color: var(--mud-palette-text-primary) !important;
        font-family: var(--sans, system-ui) !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        font-weight: 500 !important;
    }

        .vh-datagrid thead .filter-header-cell .mud-input-input::placeholder {
            color: var(--mud-palette-text-secondary);
            font-style: italic;
            text-transform: none;
        }

    .vh-datagrid thead .filter-header-cell .mud-input-label,
    .vh-datagrid thead .filter-header-cell label.mud-input-label-norm {
        display: none !important;
    }

    .vh-datagrid thead .filter-header-cell .mud-icon-button {
        padding: 2px !important;
    }

    .vh-datagrid thead .filter-header-cell .mud-icon-root {
        font-size: 14px !important;
    }

    /* Operator dropdown (in front of input) — show as small icon button */
    .vh-datagrid thead .filter-header-cell .mud-button-root {
        min-width: 24px !important;
        padding: 2px !important;
    }

/* Group header row */
.vh-datagrid .mud-table-row-group {
    cursor: pointer;
}

.vh-datagrid .mud-datagrid-group-row td {
    background: rgba(99,102,241,.07) !important;
    font-weight: 700 !important;
    padding: 8px 12px !important;
}

.vh-datagrid .mud-datagrid-group-row .mud-icon-button {
    padding: 4px !important;
}

/* Resize handle */
.vh-datagrid .mud-resizer {
    background: rgba(99,102,241,.2);
    width: 3px !important;
    transition: background .14s;
}

    .vh-datagrid .mud-resizer:hover {
        background: var(--d-accent,#6366f1);
    }

/* ── Pager (MudDataGridPager) ─────────────────────────────────────────────── */
.vh-datagrid .mud-table-pagination {
    border-top: 1px solid rgba(11,16,32,.06) !important;
    padding: 6px 12px !important;
    background: var(--paper, #fff);
}

    /* Page number input */
    .vh-datagrid .mud-table-pagination .mud-input-root input {
        font-size: 12px !important;
        text-align: center;
        width: 40px !important;
        border-radius: 6px !important;
    }

    /* Rows-per-page label */
    .vh-datagrid .mud-table-pagination .mud-typography {
        font-size: 12px !important;
        color: var(--ink-2, #475569) !important;
    }

    /* Navigation arrows */
    .vh-datagrid .mud-table-pagination .mud-icon-button {
        width: 30px !important;
        height: 30px !important;
    }

        .vh-datagrid .mud-table-pagination .mud-icon-button:hover:not(:disabled) {
            background: rgba(99,102,241,.08) !important;
            color: var(--d-accent,#6366f1) !important;
        }

/* ── Audit Log ────────────────────────────────────────────────────────────── */

/* Action chips */
.audit-action-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 99px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .03em;
}

    .audit-action-chip.created {
        background: rgba(5,150,105,.1);
        color: #059669;
    }

    .audit-action-chip.updated {
        background: rgba(99,102,241,.1);
        color: #6366f1;
    }

    .audit-action-chip.deleted {
        background: rgba(225,29,72,.1);
        color: #e11d48;
    }

/* Expanded detail row */
.audit-detail {
    display: flex;
    gap: 16px;
    padding: 12px 16px;
    flex-wrap: wrap;
    background: var(--bg, #f8fafc);
}

.audit-detail-section {
    flex: 1;
    min-width: 240px;
}

.audit-detail-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--mud-palette-text-secondary);
    display: block;
    margin-bottom: 6px;
}

.audit-json {
    font-family: var(--mono, monospace);
    font-size: .72rem;
    color: var(--ink-2, #475569);
    background: var(--paper, #fff);
    border: 1px solid rgba(11,16,32,.07);
    border-radius: 8px;
    padding: 10px 12px;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 200px;
    overflow-y: auto;
}

/* ── MudBlazor dialog: remove scale transform so position:fixed works ──
   MudBlazor keeps transform:scale(1) via animation-fill-mode:forwards,
   which makes position:fixed inside a dialog relative to the dialog, not
   the viewport — causing the dialog's overflow:auto to create a scrollbar.
   Replace with a simple fade-in instead. */
.mud-dialog {
    transform: none !important;
    animation: vh-dialog-fade 0.15s ease-out !important;
    will-change: opacity;
}

@keyframes vh-dialog-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* When any ndp popup is visible, ensure the dialog content doesn't scroll */
body:has(.ndp-popup) .mud-dialog-content,
body:has(.ndp-popup) .mud-dialog-scroll-container {
    overflow: visible !important;
}

/* Subject reorder dialog */
.reorder-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.reorder-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    cursor: grab;
    user-select: none;
    transition: background 0.15s, box-shadow 0.15s;
}

.reorder-row:hover {
    background: var(--mud-palette-action-default-hover);
}

.reorder-row.reorder-dragging {
    opacity: 0.45;
    background: var(--mud-palette-primary-hover);
    cursor: grabbing;
}

.reorder-row:not(.reorder-dragging):hover {
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

.reorder-num {
    min-width: 20px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    text-align: right;
}

.reorder-handle {
    color: var(--mud-palette-text-secondary);
    opacity: 0.45;
    font-size: 20px !important;
}

.reorder-name {
    flex: 1;
    font-weight: 500;
    font-size: .875rem;
}

/* ── Marks Entry ────────────────────────────────────────────────────────────── */

.me-row-dragging {
    opacity: 0.45;
    background: var(--mud-palette-primary-hover);
    cursor: grabbing;
}

.me-add-row td {
    border-top: 1px dashed var(--mud-palette-divider) !important;
}

.me-class-tabs {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    padding: 8px 16px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

.me-class-tab {
    padding: 6px 14px;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
    border-radius: 4px 4px 0 0;
    transition: color .15s, border-color .15s;
}

.me-class-tab:hover { color: var(--mud-palette-primary); }

.me-class-tab--active {
    color: var(--mud-palette-primary);
    border-bottom-color: var(--mud-palette-primary);
    background: rgba(var(--mud-palette-primary-rgb), .05);
}

.me-filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
    position: sticky;
    top: 49px;
    z-index: 9;
}

.me-subj-toggle {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    transition: background .15s, color .15s, border-color .15s;
    user-select: none;
}

.me-subj-toggle--on {
    background: rgba(var(--mud-palette-primary-rgb), .12);
    color: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
}

.me-filter-sep {
    width: 1px;
    height: 20px;
    background: var(--mud-palette-lines-default);
    margin: 0 4px;
    flex-shrink: 0;
}

.me-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    transition: background .15s, color .15s, border-color .15s;
}

.me-sort-btn:hover { border-color: var(--mud-palette-primary); color: var(--mud-palette-primary); }

.me-sort-btn--active {
    background: rgba(var(--mud-palette-primary-rgb), .12);
    color: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
}

.me-outer {
    padding: 0 0 20px;
    display: flex;
    flex-direction: column;
    /* flex-basis:0 (not auto) — makes this reliably claim 100% of the remaining space in
       .dash-content regardless of its own content's natural height, instead of only growing
       from a content-sized starting point (which is what was leaving a dead gap below it). */
    flex: 1 1 0;
    min-height: 0;
}

.me-scroll-wrap {
    overflow-x: auto;
    overflow-y: auto;
    flex: 1 1 0;
    min-height: 0;
}

.me-table {
    border-collapse: collapse;
    font-size: 13px;
    min-width: 100%;
}

.me-table th,
.me-table td {
    border: 1px solid var(--mud-palette-lines-default);
    padding: 2px 4px;
}

.me-sticky-col {
    position: sticky;
    background: var(--mud-palette-surface);
    z-index: 2;
}

.me-sticky-col-0    { left: 0;    min-width: 36px; max-width: 44px; text-align: center; }
.me-sticky-col-roll { left: 36px; min-width: 52px; max-width: 68px; text-align: center; }
.me-sticky-col-1    { left: 88px; min-width: 150px; max-width: 220px; }
/* Single leading sticky column (no roll/col-0 before it) — grids with just a name column, e.g.
   the Staff Salary Bulk Entry grid. */
.me-sticky-col-name { left: 0; min-width: 180px; max-width: 260px; }

.me-th {
    position: sticky;
    z-index: 1;
    background: var(--mud-palette-surface);
    white-space: nowrap;
}

/* Explicit header row heights — these determine the sticky top offsets below */
.me-hdr-r1 { height: 36px; }
.me-hdr-r2 { height: 28px; }

/* Row-level sticky top offsets (hdr0=row1, hdr1=row2, hdr2=row3) */
.me-hdr0 { top: 0;   z-index: 3; }
.me-hdr1 { top: 36px; z-index: 3; }
.me-hdr2 { top: 64px; z-index: 3; }

.me-hdr0.me-sticky-col { z-index: 4; }
.me-hdr1.me-sticky-col { z-index: 4; }
.me-hdr2.me-sticky-col { z-index: 4; }

.me-subj-hdr {
    text-align: center;
    font-weight: 600;
    font-size: 12px;
    background: var(--mud-palette-dark-lighten);
    /* inline style overrides background with light pastel; always use dark text for contrast */
    color: #1a1a2e;
    padding: 5px 8px;
}

.me-comp-hdr {
    text-align: center;
    font-size: 11px;
    color: #2d3748;
    background: var(--mud-palette-background-gray);
    font-weight: 500;
}

.me-comp-fm {
    font-size: 10px;
    color: #9ca3af;
    font-weight: 400;
}

.me-roll {
    text-align: center;
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

.me-name {
    font-size: 12px;
    padding-left: 6px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.me-td {
    padding: 1px 2px;
}

.me-cell {
    position: relative;
    text-align: center;
    min-width: 64px;
    padding: 0;
}

.me-cell-absent   { background: #fff8e1; }
.me-cell-expelled { background: #fce4ec; }
.me-cell-grace    { background: #e8f5e9; }
.me-cell-na       { background: #fafafa; }
.me-cell-opt-na   { background: #dee2e6; cursor: not-allowed; }
.me-cell-carry    { cursor: default; }
.me-cell-invalid  { box-shadow: inset 0 0 0 2px #ef5350; }

.me-cell-saving::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 9px;
    height: 9px;
    border: 1.5px solid rgba(99, 102, 241, .25);
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: me-cell-spin .6s linear infinite;
    pointer-events: none;
    z-index: 2;
}

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

.me-invalid-icon {
    position: absolute;
    top: 1px;
    right: 1px;
    font-size: 12px !important;
    width: 12px !important;
    height: 12px !important;
    color: #ef5350;
    pointer-events: none;
    z-index: 2;
}

.me-grace-badge {
    position: absolute;
    bottom: 0;
    right: 1px;
    font-size: 9px;
    font-weight: 700;
    color: #2e7d32;
    line-height: 1;
    pointer-events: none;
    z-index: 2;
}

.me-input-carry {
    display: block;
    width: 100%;
    padding: 4px 4px;
    text-align: center;
    font-size: 13px;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
    box-sizing: border-box;
}

.me-input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    color: var(--mud-palette-text-primary);
    text-align: center;
    font-size: 13px;
    padding: 4px 4px;
    display: block;
    box-sizing: border-box;
    cursor: default;
}

.me-input:focus {
    background: rgba(var(--mud-palette-primary-rgb), .08);
    border-radius: 3px;
}

.me-input-grace   { color: #2e7d32; font-style: italic; }
.me-input-invalid { color: #b71c1c; background: #fff3f3 !important; outline: 2px solid #ef5350; outline-offset: -1px; border-radius: 3px; }

.me-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    min-width: 28px;
    text-align: center;
    outline: none;
}

.me-badge:focus { box-shadow: 0 0 0 2px rgba(var(--mud-palette-primary-rgb), .4); }

.me-badge-absent   { background: #fff3cd; color: #856404; }
.me-badge-expelled { background: #f8d7da; color: #721c24; }
.me-badge-na       { background: #e2e3e5; color: #6c757d; }

.me-row:hover .me-sticky-col { background: var(--mud-palette-action-default-hover); }
.me-row:hover td.me-td       { background: rgba(0,0,0,.02); }

.me-dirty-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff8f00;
    vertical-align: middle;
    margin-left: 4px;
}

.me-save-bar {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    z-index: 50;
}

/* ── Type group header ── */
.me-type-hdr {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    background: var(--mud-palette-background-gray);
    color: #374151;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.me-comp-type {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mud-palette-text-disabled);
    margin-bottom: 1px;
}

/* ── Attendance chip ── */
.me-subj-toggle--attendance {
    background: rgba(20, 184, 166, .1);
    color: #0d9488;
    border-color: #0d9488;
    text-decoration: none;
}
.me-subj-toggle--attendance:hover {
    background: rgba(20, 184, 166, .2);
    text-decoration: none;
}

/* ── Total columns ── */
.me-total-hdr {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    background: #e8f5e9;
    color: #2e7d32;
    white-space: nowrap;
    min-width: 52px;
}

.me-grand-total-hdr {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    background: #e3f2fd;
    color: #1565c0;
    white-space: nowrap;
    min-width: 52px;
}

.me-total-cell {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #2e7d32;
    background: #f9fff9;
    white-space: nowrap;
}

.me-grand-total {
    font-weight: 700;
    color: #1565c0;
    background: #f0f7ff;
}

/* ── Crosshair highlight ── */
/* Focused row: the <tr> itself */
.me-table tbody tr.me-row--focused > td {
    background: rgba(63, 131, 248, 0.07) !important;
}

/* Focused column: individual <td>s in the same column */
.me-table tbody td.me-col--focused {
    background: rgba(63, 131, 248, 0.07) !important;
}

/* Intersection: cell that is both in the focused row AND focused column */
.me-table tbody tr.me-row--focused > td.me-col--focused {
    background: rgba(63, 131, 248, 0.22) !important;
    outline: 2px solid rgba(63, 131, 248, 0.55);
    outline-offset: -1px;
    border-radius: 2px;
}

/* Keep sticky columns readable when row is highlighted */
.me-table tbody tr.me-row--focused > td.me-sticky-col {
    background: rgba(63, 131, 248, 0.12) !important;
}

/* ── Toolbar ── */
.me-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    position: sticky;
    top: 0;
    z-index: 10;
}

.me-filter-label {
    color: var(--mud-palette-text-secondary);
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

/* ── Unified chip / toggle pill ── */
.me-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    transition: background .15s, color .15s, border-color .15s;
    user-select: none;
    white-space: nowrap;
}

.me-chip:hover {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.me-chip--on {
    background: rgba(var(--mud-palette-primary-rgb), .12);
    color: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
}

.me-chip--attend {
    border-color: #0d9488;
    color: #0d9488;
    background: rgba(13,148,136,.06);
}

.me-chip--attend:hover,
.me-chip--attend-on {
    background: rgba(13,148,136,.15);
    color: #0d9488;
    border-color: #0d9488;
}

/* ── Component header cell labels ── */
.me-comp-type-label {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7280;
    margin-bottom: 1px;
}

.me-comp-title {
    font-size: 11px;
    font-weight: 500;
    color: #1f2937;
}

/* ── Attendance column ── */
.me-att-hdr {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    min-width: 72px;
    background: #e0f2f1;
    color: #00695c;
    vertical-align: middle;
    padding: 4px 6px;
}

.me-att-total {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    margin-top: 2px;
    font-size: 10px;
    color: #00695c;
}

.me-att-total-input {
    width: 38px;
    border: 1px solid #80cbc4;
    border-radius: 4px;
    background: #fff;
    text-align: center;
    font-size: 11px;
    padding: 1px 2px;
    color: #004d40;
    outline: none;
}

.me-att-total-input:focus {
    border-color: #00897b;
    box-shadow: 0 0 0 2px rgba(0,137,123,.2);
}

.me-att-cell {
    text-align: center;
    min-width: 68px;
    background: #f0faf9;
    position: relative;
}

.me-att-input {
    width: 46px;
    border: none;
    border-bottom: 1px solid #80cbc4;
    background: transparent;
    text-align: center;
    font-size: 13px;
    color: var(--mud-palette-text-primary);
    font-weight: 600;
    outline: none;
    padding: 2px 0;
}

.me-att-input:focus {
    border-bottom-color: #00897b;
    background: rgba(0,137,123,.05);
    border-radius: 2px 2px 0 0;
}

.me-att-of {
    font-size: 10px;
    color: #00695c;
    margin-left: 1px;
    vertical-align: middle;
}

/* ── Predictions (ML) nav group — shared across all 7 prediction pages ─────────── */
.pred-shell  { padding:16px 20px; max-width:1000px; margin:0 auto; }
.pred-head   { margin-bottom:14px; }
.pred-title  { font-size:1.3rem; font-weight:700; }
.pred-sub    { font-size:.85rem; color:var(--mud-palette-text-secondary); margin-top:4px; max-width:720px; }
.pred-ctrl   { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.pred-body   { margin-top:6px; }
.pred-empty  { display:flex; align-items:center; justify-content:center; height:140px;
               color:var(--mud-palette-text-secondary); font-size:13px; }
.pred-note   { font-size:.78rem; color:var(--mud-palette-text-secondary); margin:8px 0 16px; max-width:720px; }
.pred-cards  { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.pred-card   { border:1px solid var(--mud-palette-divider); border-radius:10px; padding:12px 18px; min-width:140px; }
.pred-card-label { font-size:.72rem; color:var(--mud-palette-text-secondary); text-transform:uppercase; letter-spacing:.04em; }
.pred-card-value { font-size:1.3rem; font-weight:700; margin-top:4px; }
.pred-dir-improving { color:#2e7d32; }
.pred-dir-declining { color:#c62828; }
.pred-dir-stable    { color:#616161; }
.pred-dir-insufficientdata { color:#9e9e9e; }
.pred-table-wrap { overflow:auto; }
.pred-table  { border-collapse:collapse; font-size:13px; width:100%; }
.pred-table th, .pred-table td { border:1px solid var(--mud-palette-divider); padding:6px 12px; text-align:left; white-space:nowrap; }
.pred-table thead th { background:var(--mud-palette-background-gray); font-weight:700; position:sticky; top:0; }
.pred-badge  { display:inline-block; padding:2px 10px; border-radius:10px; font-size:11px; font-weight:700; }
.pred-badge-high   { background:color-mix(in srgb, #c62828 18%, transparent); color:#c62828; }
.pred-badge-medium { background:color-mix(in srgb, #ef6c00 18%, transparent); color:#ef6c00; }
.pred-badge-low    { background:color-mix(in srgb, #2e7d32 18%, transparent); color:#2e7d32; }
.pred-reasons { font-size:12px; margin:0; padding-left:18px; }
.pred-anomaly-high { color:#c62828; font-weight:700; }
.pred-anomaly-low  { color:#ef6c00; font-weight:700; }

/* Chat search / go-to-date: brief highlight flash when a matched or dated message scrolls into view */
.chat-msg-highlight { animation: chatMsgHighlight 1.6s ease-out; }
@keyframes chatMsgHighlight {
    0%   { box-shadow: 0 0 0 2px var(--mud-palette-warning); }
    70%  { box-shadow: 0 0 0 2px var(--mud-palette-warning); }
    100% { box-shadow: none; }
}

/* Fleet map: pulsing highlight for a vehicle with an active, unresolved Transport Panic alert
   (see transport-map.js updateFleetMarkers) — the marker HTML is injected via Leaflet's divIcon,
   so this keyframe needs to live in a globally-loaded stylesheet rather than a component's own
   scoped <style> block. */
@keyframes vh-panic-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .55; transform: scale(1.15); }
}

/* VidhyaHub.gvChart.openFullscreen/printCard/exportPng (see app.js) build their overlay/clone by
   plain JS DOM manipulation from any page that calls them — not just GraphicalViews.razor, which
   is also where these rules used to live as a page-local <style> block. Scoped/page-local CSS
   never applies to elements a page injects into document.body after that page has navigated away,
   so this has to live in a globally-loaded stylesheet. Card markup on any calling page should use
   (or alias to) .gv-card-title / .gv-card-acts for the title lookup and action-button hiding to work. */
.gv-fs-overlay {
    position: fixed; inset: 0; z-index: 2000;
    background: #fff; display: flex; flex-direction: column;
    overflow: hidden;
}
.gv-fs-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px; border-bottom: 1px solid #e5e7eb;
    background: #fff; flex-shrink: 0;
}
.gv-fs-title { font-size: 15px; font-weight: 700; color: #374151; }
.gv-fs-hints { font-size: 11px; color: #9ca3af; margin-left: 10px; }
.gv-fs-scroll {
    flex: 1; overflow: auto; padding: 28px 32px;
    display: flex; align-items: flex-start; justify-content: center;
}
.gv-fs-inner {
    transform-origin: top center;
    width: 100%; transition: transform .1s;
}
.gv-fs-inner svg { width: 100% !important; height: auto !important; }

/* MudSelect's built-in "Select All" checkbox (SelectAll="true") defaults to
   label-then-checkbox (checkbox flush right) via its placement-start row-reverse —
   flip it back to checkbox-then-label, consistent with every other checkbox in the app. */
.mud-select-all .mud-input-content-placement-start {
    flex-direction: row;
}

/* Snackbar auto-dismiss countdown bar — MudBlazor has no built-in progress indicator for
   toasts, so this shrinks a thin bar across the bottom of every toast over the same duration
   as SnackbarConfiguration.VisibleStateDuration (5000ms default, unmodified in Program.cs). */
.mud-snackbar {
    position: relative;
    overflow: hidden;
}
.mud-snackbar::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    height: 3px;
    width: 100%;
    background: rgba(255, 255, 255, .55);
    animation: mud-snackbar-countdown 5000ms linear forwards;
    pointer-events: none;
}
@keyframes mud-snackbar-countdown {
    from { width: 100%; }
    to   { width: 0%; }
}
@media (prefers-reduced-motion: reduce) {
    .mud-snackbar::after { animation: none; display: none; }
}