@import '_content/AuralizeBlazor/AuralizeBlazor.tf5u2o3oxg.bundle.scp.css';
@import '_content/Nextended.Blazor/Nextended.Blazor.tkxqvq0zjw.bundle.scp.css';
@import '_content/SchoolERP.SharedComponents/SchoolERP.SharedComponents.td48soi253.bundle.scp.css';

/* /Components/Layout/Dashboard/CommandPalette.razor.rz.scp.css */
/* Self-contained palette (does not rely on #dash-shell's scoped CSS vars, since this component
   renders as a sibling outside #dash-shell so its position:fixed overlay can't be clipped). */

.cp-backdrop[b-pf44zaezy2] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(15, 17, 26, .55);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
}

.cp-panel[b-pf44zaezy2] {
    width: min(560px, 92vw);
    max-height: 60vh;
    background: #1a1b2e;
    color: rgba(255, 255, 255, .92);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cp-search[b-pf44zaezy2] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.cp-search-ic[b-pf44zaezy2] {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, .5);
}

/* ::deep — cp-input is rendered inside the separate DebouncedInput component; see the matching
   comment in DashSidebar.razor.css for why this needs ::deep to actually apply. */
[b-pf44zaezy2] .cp-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: .95rem;
    font-family: inherit;
}

[b-pf44zaezy2] .cp-input::placeholder {
    color: rgba(255, 255, 255, .4);
}

.cp-kbd[b-pf44zaezy2] {
    font-size: .68rem;
    padding: 2px 6px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .6);
    font-family: var(--mono, monospace);
}

.cp-results[b-pf44zaezy2] {
    overflow-y: auto;
    padding: 6px;
}

.cp-empty[b-pf44zaezy2] {
    padding: 28px 16px;
    text-align: center;
    font-size: .85rem;
    color: rgba(255, 255, 255, .45);
}

.cp-result[b-pf44zaezy2] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: none;
    background: transparent;
    color: inherit;
    border-radius: 9px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.cp-result--active[b-pf44zaezy2] {
    background: rgba(99, 102, 241, .28);
}

.cp-result-ic[b-pf44zaezy2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: rgba(255, 255, 255, .08);
    font-size: .85rem;
    flex-shrink: 0;
}

.cp-result-body[b-pf44zaezy2] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.cp-result-title[b-pf44zaezy2] {
    font-size: .88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cp-result-sub[b-pf44zaezy2] {
    font-size: .7rem;
    color: rgba(255, 255, 255, .45);
}

.cp-result-hint[b-pf44zaezy2] {
    font-size: .68rem;
    color: rgba(255, 255, 255, .4);
    flex-shrink: 0;
}

.cp-result-grouped[b-pf44zaezy2] {
    cursor: default;
}

.cp-chip-row[b-pf44zaezy2] {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.cp-chip[b-pf44zaezy2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 7px;
    background: rgba(255, 255, 255, .08);
    color: inherit;
    cursor: pointer;
    font-size: .8rem;
    flex-shrink: 0;
}

.cp-chip:hover[b-pf44zaezy2] {
    background: rgba(255, 255, 255, .18);
}

.cp-chip--active[b-pf44zaezy2] {
    background: rgba(99, 102, 241, .5);
}

.cp-footer[b-pf44zaezy2] {
    display: flex;
    gap: 16px;
    padding: 8px 16px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: .68rem;
    color: rgba(255, 255, 255, .4);
}

.cp-footer span[b-pf44zaezy2] {
    display: flex;
    align-items: center;
    gap: 4px;
}
/* /Components/Layout/Dashboard/DashboardLayout.razor.rz.scp.css */
/* ── App shell ───────────────────────────────────────────────────────────── */

#dash-shell[b-szpz6v1wjp] {
    --sb-w:        64px;
    --sb-w-full:   240px;
    --tb-h:        60px;

    /* light palette */
    --bg:          #f0f2f7;
    --paper:       #ffffff;
    --border:      #e5e7eb;
    --txt:         #111827;
    --txt-muted:   #6b7280;
    /* Sidebar follows the theme: light surface + dark ink here, the original dark sidebar in
       .theme-dark below. --sb-ink is the RGB of the sidebar's text/overlay colour, used as
       rgba(var(--sb-ink), alpha) for hovers, dividers and muted labels in DashSidebar.razor.css. */
    --sb-bg:        #ffffff;
    --sb-ink:       15,23,42;
    --sb-txt:       rgba(15,23,42,.68);
    --sb-txt-act:   #0f172a;
    --sb-flyout-bg: #ffffff;
    --sb-border:    #e5e7eb;
    --sb-accent:   #6366f1;
    --tb-bg:       #ffffff;
    --tb-border:   #e5e7eb;
    --accent:      #6366f1;
    --accent-soft: rgba(99,102,241,.12);

    /* text palette (used across app.css and components) */
    --ink:    #0f172a;
    --ink-1:  #1e293b;
    --ink-2:  #475569;
    --ink-3:  #94a3b8;
    --muted:  #6b7280;
    --surface:#ffffff;

    /* typography */
    --sans:  'Plus Jakarta Sans', system-ui, sans-serif;
    --serif: 'Instrument Serif', Georgia, serif;
    --mono:  'JetBrains Mono', monospace;
    --radius: 12px;

    display: flex;
    height: 100dvh;
    overflow: hidden;
    font-family: var(--sans);
    color: var(--txt);
    background: var(--bg);
}

/* dark theme overrides */
#dash-shell.theme-dark[b-szpz6v1wjp] {
    /* Native form controls (<select>, <input>, scrollbars) follow this — without it they stay light in dark mode. */
    color-scheme: dark;
    --bg:          #0d0e1a;
    --paper:       #1a1b2e;
    --border:      #2a2b3d;
    --txt:         #e2e4f0;
    --txt-muted:   #6b7280;
    --sb-bg:        #12131f;
    --sb-ink:       255,255,255;
    --sb-txt:       rgba(255,255,255,.72);
    --sb-txt-act:   #ffffff;
    --sb-flyout-bg: #25273a;
    --sb-border:    transparent;
    --tb-bg:       #12131f;
    --tb-border:   #2a2b3d;
    --accent-soft: rgba(129,140,248,.14);

    /* text palette — light values for dark surfaces */
    --ink:    #e2e4f0;
    --ink-1:  #cbd5e1;
    --ink-2:  #aab3c5;
    --ink-3:  #8b93a7;
    --muted:  #9aa3b5;
    --surface:#1a1b2e;
}

/* accent overrides */
#dash-shell.accent-blue[b-szpz6v1wjp]    { --accent: #3b82f6; --sb-accent: #3b82f6; --accent-soft: rgba(59,130,246,.12); }
#dash-shell.accent-emerald[b-szpz6v1wjp] { --accent: #10b981; --sb-accent: #10b981; --accent-soft: rgba(16,185,129,.12); }
#dash-shell.accent-rose[b-szpz6v1wjp]    { --accent: #f43f5e; --sb-accent: #f43f5e; --accent-soft: rgba(244,63,94,.12);  }
#dash-shell.accent-amber[b-szpz6v1wjp]   { --accent: #f59e0b; --sb-accent: #f59e0b; --accent-soft: rgba(245,158,11,.12); }
#dash-shell.accent-violet[b-szpz6v1wjp]  { --accent: #8b5cf6; --sb-accent: #8b5cf6; --accent-soft: rgba(139,92,246,.12); }
#dash-shell.accent-teal[b-szpz6v1wjp]    { --accent: #14b8a6; --sb-accent: #14b8a6; --accent-soft: rgba(20,184,166,.12); }
#dash-shell.accent-orange[b-szpz6v1wjp]  { --accent: #f97316; --sb-accent: #f97316; --accent-soft: rgba(249,115,22,.12); }

/* font family overrides — all system-installed stacks (see ThemeService.ResolveFontStack),
   no web-font download needed, so the choice is guaranteed to actually render. */
#dash-shell.font-default[b-szpz6v1wjp] { --sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
#dash-shell.font-classic[b-szpz6v1wjp] { --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
#dash-shell.font-modern[b-szpz6v1wjp]  { --sans: 'Segoe UI', Verdana, Tahoma, sans-serif; }
#dash-shell.font-serif[b-szpz6v1wjp]   { --sans: Georgia, 'Times New Roman', serif; }
#dash-shell.font-rounded[b-szpz6v1wjp] { --sans: 'Trebuchet MS', Verdana, sans-serif; }

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

.shell-body[b-szpz6v1wjp] {
    display:        flex;
    flex-direction: column;
    flex:           1;
    min-width:      0;
    margin-left:    var(--sb-w);
    transition:     margin-left .22s ease;
    overflow:       hidden;
}

.shell-body.sb-pinned[b-szpz6v1wjp] {
    margin-left: var(--sb-w-full);
}

/* Below the sidebar's mobile breakpoint (see DashSidebar.razor.css) the sidebar becomes an
   off-canvas overlay rather than a layout participant, so content always gets the full width
   here regardless of the desktop pinned/collapsed state. */
@media (max-width: 860px) {
    .shell-body[b-szpz6v1wjp],
    .shell-body.sb-pinned[b-szpz6v1wjp] {
        margin-left: 0;
    }
}

/* ── Dash content ────────────────────────────────────────────────────────── */

.dash-content[b-szpz6v1wjp] {
    flex:           1;
    min-height:     0;   /* without this, a flex item that's also a scroll container can refuse to
                            shrink below its own content's natural size, which then stops a child
                            using flex-grow (e.g. Marks Entry's table wrapper) from ever receiving
                            the full remaining height — it was landing short, leaving a dead gap
                            below the table instead of the wrapper stretching to fill the page. */
    display:        flex;
    flex-direction: column;
    overflow-y:     auto;
    overflow-x:     hidden;   /* wide grids scroll internally (their own overflow-x); the page itself never should */
    padding:        0 32px 32px;   /* no top padding — page-head sits flush below topbar */
}

/* Narrower side padding on small screens — every pixel of width matters once the viewport itself
   is only a few hundred px wide. .page-head's bleed margin (app.css) matches this same value. */
@media (max-width: 860px) {
    .dash-content[b-szpz6v1wjp] {
        padding: 0 14px 14px;
    }
}

/* ── Density scale ───────────────────────────────────────────────────────── */
/* Most of the app's own components set their own fixed px font-sizes in scoped CSS, so a
   font-size change on #dash-shell alone barely cascades anywhere visible. `zoom` scales the
   whole rendered content area (text, spacing, icons) together, so Compact/Normal/Large are
   actually different — applied only to .dash-content so the fixed-width sidebar/topbar chrome
   doesn't shift. (Supported in Chrome/Edge/Safari and Firefox 126+.) */
#dash-shell.size-sm[b-szpz6v1wjp] { font-size: 13px; }
#dash-shell.size-md[b-szpz6v1wjp] { font-size: 14px; }
#dash-shell.size-lg[b-szpz6v1wjp] { font-size: 16px; }

#dash-shell.size-sm .dash-content[b-szpz6v1wjp] { zoom: 0.9;  padding: 0 24px 24px; }
#dash-shell.size-md .dash-content[b-szpz6v1wjp] { zoom: 1; }
#dash-shell.size-lg .dash-content[b-szpz6v1wjp] { zoom: 1.15; padding: 0 36px 36px; }


/* ── Reduce motion: no transitions/animations anywhere in the shell ──────── */
#dash-shell.reduce-motion[b-szpz6v1wjp],
#dash-shell.reduce-motion[b-szpz6v1wjp]  *,
#dash-shell.reduce-motion[b-szpz6v1wjp]  *::before,
#dash-shell.reduce-motion[b-szpz6v1wjp]  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
}

/* ── Sidebar style override (Theme dock → Sidebar: Light / Dark; Auto = follow the mode) ── */
/* Declared after the theme blocks so these win over .theme-dark / the light defaults. */
#dash-shell.sidebar-dark[b-szpz6v1wjp] {
    --sb-bg:        #1e1f2e;
    --sb-ink:       255,255,255;
    --sb-txt:       rgba(255,255,255,.72);
    --sb-txt-act:   #ffffff;
    --sb-flyout-bg: #25273a;
    --sb-border:    transparent;
}
#dash-shell.sidebar-light[b-szpz6v1wjp] {
    --sb-bg:        #ffffff;
    --sb-ink:       15,23,42;
    --sb-txt:       rgba(15,23,42,.68);
    --sb-txt-act:   #0f172a;
    --sb-flyout-bg: #ffffff;
    --sb-border:    #e5e7eb;
}
/* /Components/Layout/Dashboard/DashSidebar.razor.rz.scp.css */
/* ── Sidebar shell ────────────────────────────────────────────────────────── */

.sidebar[b-2nziddnq5i] {
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    background: var(--sb-bg);
    border-right: 1px solid var(--sb-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 300;
    transition: width .22s ease;
    border-right: 1px solid rgba(var(--sb-ink), .06);
}

    .sidebar.sb-pinned[b-2nziddnq5i] {
        width: var(--sb-w-full);
    }

    .sidebar.sb-collapsed[b-2nziddnq5i] {
        width: var(--sb-w);
    }

/* ── Mobile off-canvas drawer ────────────────────────────────────────────────
   Below the breakpoint the sidebar is always full-width and hidden off-screen by
   default (regardless of the desktop sb-pinned/sb-collapsed state, which stops
   mattering here), sliding into view as an overlay — never pushes page content,
   since there's no spare width to push it into on a small screen. */
@media (max-width: 860px) {
    .sidebar[b-2nziddnq5i] {
        width: var(--sb-w-full) !important;
        transform: translateX(-100%);
        transition: transform .25s ease;
    }

    .sidebar.sb-mobile-open[b-2nziddnq5i] {
        transform: translateX(0);
        box-shadow: 4px 0 28px rgba(0,0,0,.3);
    }
}

.sb-mobile-backdrop[b-2nziddnq5i] {
    display: none;
}

@media (max-width: 860px) {
    .sb-mobile-backdrop[b-2nziddnq5i] {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.42);
        z-index: 299; /* just under .sidebar's z-index:300 */
    }
}

/* ── Brand ────────────────────────────────────────────────────────────────── */

.sb-brand[b-2nziddnq5i] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 16px 12px;
    min-height: 60px;
    border-bottom: 1px solid rgba(var(--sb-ink), .07);
    flex-shrink: 0;
}

.sidebar.sb-collapsed .sb-brand[b-2nziddnq5i] {
    justify-content: center;
    padding: 16px 0 12px;
}

.sb-logo[b-2nziddnq5i] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
}

    .sb-logo img[b-2nziddnq5i] {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.sb-brand-name[b-2nziddnq5i] {
    font-weight: 700;
    font-size: .95rem;
    color: var(--sb-txt-act);
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.sb-pin[b-2nziddnq5i] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: rgba(var(--sb-ink), .45);
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .15s, background .15s;
    font-size: .8rem;
}

    .sb-pin:hover[b-2nziddnq5i] {
        color: var(--sb-txt-act);
        background: rgba(var(--sb-ink), .08);
    }

/* ── Historical session override indicator ──────────────────────────────── */

.sb-session-override[b-2nziddnq5i] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 12px 10px;
    padding: 7px 10px;
    border-radius: 8px;
    background: rgba(217,119,6,.16);
    border: 1px solid rgba(217,119,6,.4);
    color: #fbbf24;
    text-decoration: none;
    font-size: .78rem;
    font-weight: 600;
    transition: background .15s;
}

    .sb-session-override:hover[b-2nziddnq5i] {
        background: rgba(217,119,6,.26);
    }

.sb-session-override-txt[b-2nziddnq5i] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb-c-session-override[b-2nziddnq5i] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0 auto 8px;
    border-radius: 8px;
    background: rgba(217,119,6,.16);
    border: 1px solid rgba(217,119,6,.4);
    color: #fbbf24;
    text-decoration: none;
}

    .sb-c-session-override:hover[b-2nziddnq5i] {
        background: rgba(217,119,6,.26);
    }

/* ── Search ──────────────────────────────────────────────────────────────── */

.sb-search-row[b-2nziddnq5i] {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 10px 12px 6px;
}

.sb-search[b-2nziddnq5i] {
    flex: 1;
    min-width: 0;
    position: relative;
    display: flex;
    align-items: center;
}

.sb-edit-nav-icon-btn[b-2nziddnq5i] {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: rgba(var(--sb-ink), .45);
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    transition: color .15s, background .15s;
}

    .sb-edit-nav-icon-btn:hover[b-2nziddnq5i] {
        color: var(--sb-txt-act);
        background: rgba(var(--sb-ink), .08);
    }

.sb-search-ic[b-2nziddnq5i] {
    position: absolute;
    left: 10px;
    color: rgba(var(--sb-ink), .4);
    font-size: .85rem;
    pointer-events: none;
}

/* ::deep — .sb-search-input is a class handed to the separate DebouncedInput component and
   rendered inside ITS OWN markup, not DashSidebar's; Blazor's CSS isolation only auto-scopes
   elements defined directly in the same .razor file, so without ::deep this whole block silently
   never matches the real element and every rule here is dropped, falling back to the browser's
   default white input chrome. */
[b-2nziddnq5i] .sb-search-input {
    width: 100%;
    padding: 6px 28px 6px 30px;
    background: rgba(var(--sb-ink), .06);
    border: 1px solid rgba(var(--sb-ink), .08);
    border-radius: 8px;
    color: var(--sb-txt-act);
    font-size: .82rem;
    outline: none;
    transition: border-color .15s, background .15s;
    font-family: inherit;
}

    [b-2nziddnq5i] .sb-search-input::placeholder {
        color: rgba(var(--sb-ink), .35);
    }

    [b-2nziddnq5i] .sb-search-input:focus {
        background: rgba(var(--sb-ink), .09);
        border-color: var(--sb-accent);
    }

.sb-search-clear[b-2nziddnq5i] {
    position: absolute;
    right: 4px;
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    color: rgba(var(--sb-ink), .5);
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
}

    .sb-search-clear:hover[b-2nziddnq5i] {
        color: var(--sb-txt-act);
        background: rgba(var(--sb-ink), .08);
    }

/* ── Edit Nav Menu button ────────────────────────────────────────────────── */

/* ── Nav ──────────────────────────────────────────────────────────────────── */

.sb-nav[b-2nziddnq5i] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 0 8px;
    scrollbar-width: none;
}

    .sb-nav[b-2nziddnq5i]::-webkit-scrollbar {
        display: none;
    }

/* ── Section toggle (pinned mode) ─────────────────────────────────────────── */

.sb-section-toggle[b-2nziddnq5i] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: calc(100% - 16px);
    margin: 10px 8px 4px;
    padding: 8px 10px;
    background: rgba(0,0,0,.2);
    border: none;
    border-radius: 7px;
    cursor: pointer;
    color: rgba(var(--sb-ink), .55);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color .15s, background .15s;
    text-align: left;
}

    .sb-section-toggle:hover[b-2nziddnq5i] {
        color: rgba(var(--sb-ink), .85);
        background: rgba(0,0,0,.3);
    }

    .sb-section-toggle.collapsed[b-2nziddnq5i] {
        margin-bottom: 10px;
    }

.sb-section-ic[b-2nziddnq5i] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    flex-shrink: 0;
}

    .sb-section-ic .mud-icon-root[b-2nziddnq5i] {
        font-size: 1.05rem !important;
    }

.sb-section-lbl[b-2nziddnq5i] {
    flex: 1;
    min-width: 0;
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.25;
}

.sb-section-chevron[b-2nziddnq5i] {
    font-size: .65rem;
    transition: transform .2s ease;
    flex-shrink: 0;
}

.sb-section-toggle.collapsed .sb-section-chevron[b-2nziddnq5i] {
    transform: rotate(-90deg);
}

/* ── Nav items (pinned mode) ──────────────────────────────────────────────*/

.sb-item[b-2nziddnq5i] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    min-height: 40px;
    color: var(--sb-txt);
    text-decoration: none;
    border-radius: 8px;
    margin: 1px 8px;
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
    background: transparent;
    border: none;
    width: calc(100% - 16px);
    text-align: left;
}

    .sb-item:hover[b-2nziddnq5i] {
        background: rgba(var(--sb-ink), .07);
        color: var(--sb-txt-act);
    }

    .sb-item.active[b-2nziddnq5i] {
        background: var(--sb-accent);
        color: #fff;
    }

.sb-ic[b-2nziddnq5i] {
    flex-shrink: 0;
    width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}

.sb-lbl[b-2nziddnq5i] {
    flex: 1;
    min-width: 0;
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.25;
}

/* ── Badge ────────────────────────────────────────────────────────────────── */

.sb-badge[b-2nziddnq5i] {
    flex-shrink: 0;
    font-size: .65rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--sb-accent);
    color: #fff;
}

/* ── Group / chevron (pinned mode subgroup) ─────────────────────────────── */

.sb-chevron[b-2nziddnq5i] {
    flex-shrink: 0;
    font-size: .7rem;
    color: rgba(var(--sb-ink), .4);
    transition: transform .2s ease;
}

.sb-group--open > .sb-group-btn .sb-chevron[b-2nziddnq5i] {
    transform: rotate(90deg);
}

/* ── Children (pinned subgroup items) ────────────────────────────────────── */

.sb-children[b-2nziddnq5i] {
    display: none;
    padding: 2px 0;
}

.sb-group--open .sb-children[b-2nziddnq5i] {
    display: block;
}

.sb-child[b-2nziddnq5i] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 6px 14px 6px 42px;
    color: var(--sb-txt);
    text-decoration: none;
    font-size: .82rem;
    font-weight: 500;
    border-radius: 8px;
    margin: 1px 8px;
    transition: background .15s, color .15s;
    white-space: nowrap;
}

    .sb-child:hover[b-2nziddnq5i] {
        background: rgba(var(--sb-ink), .07);
        color: var(--sb-txt-act);
    }

    .sb-child.active[b-2nziddnq5i] {
        background: rgba(99,102,241,.2);
        color: var(--sb-accent);
    }

.sb-child-dot[b-2nziddnq5i] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(var(--sb-ink), .3);
    flex-shrink: 0;
}

.sb-child.active .sb-child-dot[b-2nziddnq5i] {
    background: var(--sb-accent);
}

/* ── Subgroup (pinned, one level deeper than .sb-children — e.g. Student/Staff) ── */

.sb-subgroup[b-2nziddnq5i] {
    padding: 2px 0;
}

.sb-subgroup-head[b-2nziddnq5i] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 4px 42px;
    color: rgba(var(--sb-ink), .45);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

    .sb-subgroup-head .mud-icon-root[b-2nziddnq5i] {
        font-size: .85rem !important;
    }

.sb-child--nested[b-2nziddnq5i] {
    padding-left: 58px;
}

/* ────────────────────────────────────────────────────────────────────────────
   COLLAPSED MODE
   ──────────────────────────────────────────────────────────────────────── */

/* Top-level item icons (Dashboard, etc.) */
.sb-c-item[b-2nziddnq5i] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 40px;
    margin: 2px auto;
    color: var(--sb-txt);
    text-decoration: none;
    border-radius: 8px;
    transition: background .15s, color .15s;
}

    .sb-c-item:hover[b-2nziddnq5i] {
        background: rgba(var(--sb-ink), .07);
        color: var(--sb-txt-act);
    }

    .sb-c-item.active[b-2nziddnq5i] {
        background: var(--sb-accent);
        color: #fff;
    }

/* Section icon (groups in collapsed mode) */
.sb-c-section[b-2nziddnq5i] {
    display: flex;
    justify-content: center;
    margin: 4px 0;
    position: relative;
}

.sb-c-icon-btn[b-2nziddnq5i] {
    width: 44px;
    height: 40px;
    border: none;
    background: transparent;
    color: rgba(var(--sb-ink), .75);
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background .15s, color .15s;
}

    .sb-c-icon-btn:hover[b-2nziddnq5i] {
        background: rgba(var(--sb-ink), .07);
        color: var(--sb-txt-act);
    }

.sb-c-section.active .sb-c-icon-btn[b-2nziddnq5i] {
    background: var(--sb-accent);
    color: #fff;
}

.sb-c-chevron[b-2nziddnq5i] {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: .6rem;
    color: rgba(var(--sb-ink), .4);
    line-height: 1;
}

/* ── Flyout (collapsed-mode popup) ────────────────────────────────────────── */

.sb-flyout[b-2nziddnq5i] {
    position: fixed;
    left: calc(var(--sb-w) + 6px);
    min-width: 220px;
    max-width: 280px;
    background: var(--sb-flyout-bg);
    border: 1px solid rgba(var(--sb-ink), .08);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,.4);
    z-index: 400;
    padding: 6px 0;
    animation: sb-flyout-in-b-2nziddnq5i .12s ease;
}

@keyframes sb-flyout-in-b-2nziddnq5i {
    from {
        opacity: 0;
        transform: translateX(-6px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.sb-flyout-head[b-2nziddnq5i] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    color: rgba(var(--sb-ink), .75);
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 1px solid rgba(var(--sb-ink), .06);
    margin-bottom: 4px;
}

    .sb-flyout-head .mud-icon-root[b-2nziddnq5i] {
        font-size: 1rem !important;
    }

.sb-flyout-body[b-2nziddnq5i] {
    display: flex;
    flex-direction: column;
}

.sb-flyout-item[b-2nziddnq5i] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    color: var(--sb-txt);
    text-decoration: none;
    font-size: .82rem;
    font-weight: 500;
    transition: background .12s, color .12s;
    white-space: nowrap;
    cursor: pointer;
}

    .sb-flyout-item:hover[b-2nziddnq5i] {
        background: rgba(var(--sb-ink), .08);
        color: var(--sb-txt-act);
    }

    .sb-flyout-item.active[b-2nziddnq5i] {
        background: rgba(99,102,241,.22);
        color: var(--sb-accent);
    }

    .sb-flyout-item .mud-icon-root[b-2nziddnq5i] {
        font-size: 1rem !important;
    }

.sb-flyout-child[b-2nziddnq5i] {
    padding-left: 28px;
    font-size: .78rem;
}

.sb-flyout-group[b-2nziddnq5i] {
    padding: 4px 0;
}

.sb-flyout-group-head[b-2nziddnq5i] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    color: rgba(var(--sb-ink), .55);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

    .sb-flyout-group-head .mud-icon-root[b-2nziddnq5i] {
        font-size: .9rem !important;
    }

.sb-flyout-subgroup-head[b-2nziddnq5i] {
    padding: 5px 14px 3px 28px;
    color: rgba(var(--sb-ink), .4);
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.sb-flyout-child--nested[b-2nziddnq5i] {
    padding-left: 40px;
}

/* ── Footer / workspace ──────────────────────────────────────────────────── */

.sb-footer[b-2nziddnq5i] {
    flex-shrink: 0;
    padding: 10px 8px;
    border-top: 1px solid rgba(var(--sb-ink), .07);
    position: relative;
}

.sb-ws[b-2nziddnq5i] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s;
}

    .sb-ws:hover[b-2nziddnq5i] {
        background: rgba(var(--sb-ink), .07);
    }

/* Collapsed-mode workspace (just avatar) */
.sb-c-ws[b-2nziddnq5i] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 0;
    border-radius: 8px;
    cursor: default;
}

    .sb-c-ws.sb-ws--switchable[b-2nziddnq5i] {
        cursor: pointer;
    }

        .sb-c-ws.sb-ws--switchable:hover[b-2nziddnq5i] {
            background: rgba(var(--sb-ink), .07);
        }

.sb-ws-av[b-2nziddnq5i] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(var(--sb-ink), .1);
    color: var(--sb-txt-act);
    font-size: .85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sb-ws-av img[b-2nziddnq5i] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
    background: rgba(var(--sb-ink), .08);
}

.sb-ws-info[b-2nziddnq5i] {
    flex: 1;
    min-width: 0;
}

.sb-ws-name[b-2nziddnq5i] {
    font-size: .82rem;
    font-weight: 600;
    color: var(--sb-txt-act);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb-ws-role[b-2nziddnq5i] {
    font-size: .72rem;
    color: rgba(var(--sb-ink), .5);
    white-space: nowrap;
}

/* ── Workload count badge on avatar ─────────────────────────────────────── */

.sb-ws-av-wrap[b-2nziddnq5i] {
    position: relative;
    flex-shrink: 0;
}

.sb-ws-count[b-2nziddnq5i] {
    position: absolute;
    bottom: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 99px;
    background: #6366f1;
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--sb-bg, #1e1f2e);
}

.sb-ws--switchable[b-2nziddnq5i] {
    cursor: pointer;
}

    .sb-ws--switchable:hover[b-2nziddnq5i] {
        background: rgba(var(--sb-ink), .1);
    }

.sb-ws-caret[b-2nziddnq5i] {
    flex-shrink: 0;
    font-size: .7rem;
    color: rgba(var(--sb-ink), .45);
    transition: transform .2s ease;
}

    .sb-ws-caret.open[b-2nziddnq5i] {
        transform: rotate(180deg);
    }

/* ── Workload switcher backdrop ──────────────────────────────────────────── */

.sb-ws-backdrop[b-2nziddnq5i] {
    position: fixed;
    inset: 0;
    z-index: 290;
}

/* ── Workload popup (floats above footer) ───────────────────────────────── */

.sb-ws-popup[b-2nziddnq5i] {
    position: absolute;
    bottom: 100%;
    left: 8px;
    right: 8px;
    background: var(--sb-flyout-bg);
    border: 1px solid rgba(var(--sb-ink), .1);
    border-radius: 12px;
    box-shadow: 0 -8px 32px rgba(0,0,0,.4);
    overflow: hidden;
    z-index: 300;
    margin-bottom: 6px;
    animation: ws-popup-in-b-2nziddnq5i .14s ease;
    min-width: 240px;
}

@keyframes ws-popup-in-b-2nziddnq5i {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sb-ws-popup-head[b-2nziddnq5i] {
    padding: 10px 14px 6px;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(var(--sb-ink), .4);
    border-bottom: 1px solid rgba(var(--sb-ink), .07);
    margin-bottom: 4px;
}

.sb-ws-popup-item[b-2nziddnq5i] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background .12s;
    border-radius: 8px;
    margin: 2px 4px;
    width: calc(100% - 8px);
}

    .sb-ws-popup-item:hover[b-2nziddnq5i] {
        background: rgba(var(--sb-ink), .07);
    }

    .sb-ws-popup-item.active[b-2nziddnq5i] {
        background: rgba(99,102,241,.2);
    }

.sb-ws-popup-av[b-2nziddnq5i] {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sb-ws-popup-info[b-2nziddnq5i] {
    flex: 1;
    min-width: 0;
}

.sb-ws-popup-name[b-2nziddnq5i] {
    font-size: .82rem;
    font-weight: 600;
    color: var(--sb-txt-act);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb-ws-popup-role[b-2nziddnq5i] {
    font-size: .7rem;
    color: rgba(var(--sb-ink), .5);
}

.sb-ws-popup-check[b-2nziddnq5i] {
    font-size: .85rem;
    color: #6366f1;
    flex-shrink: 0;
}

/* ── Nav loading / error states ─────────────────────────────────────────── */

.sb-nav-loading[b-2nziddnq5i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 12px;
}

.sb-nav-spinner[b-2nziddnq5i] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(var(--sb-ink), .12);
    border-top-color: rgba(var(--sb-ink), .65);
    border-radius: 50%;
    animation: sb-spin .75s linear infinite;
    flex-shrink: 0;
}

@@keyframes sb-spin {
    to[b-2nziddnq5i] { transform: rotate(360deg); }
}

.sb-nav-loading-txt[b-2nziddnq5i] {
    font-size: 11.5px;
    color: rgba(var(--sb-ink), .35);
    letter-spacing: .02em;
}

.sb-nav-err[b-2nziddnq5i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 24px 14px;
    text-align: center;
}

.sb-nav-err-ic[b-2nziddnq5i] {
    font-size: 18px;
    color: rgba(255,160,120,.8);
}

.sb-nav-err-msg[b-2nziddnq5i] {
    font-size: 11.5px;
    color: rgba(255,160,120,.75);
    line-height: 1.4;
}

.sb-nav-retry[b-2nziddnq5i] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    padding: 5px 12px;
    border: 1px solid rgba(var(--sb-ink), .18);
    border-radius: 5px;
    background: transparent;
    color: rgba(var(--sb-ink), .65);
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.sb-nav-retry:hover[b-2nziddnq5i] {
    background: rgba(var(--sb-ink), .08);
    border-color: rgba(var(--sb-ink), .3);
}

.sb-nav-retry-ic[b-2nziddnq5i] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 12px auto;
    border: 1px solid rgba(var(--sb-ink), .12);
    border-radius: 6px;
    background: transparent;
    color: rgba(255,160,120,.8);
    cursor: pointer;
    font-size: 15px;
    transition: background .15s;
}
.sb-nav-retry-ic:hover[b-2nziddnq5i] { background: rgba(var(--sb-ink), .07); }
/* /Components/Layout/Dashboard/DashTopBar.razor.rz.scp.css */
/* ── Topbar ───────────────────────────────────────────────────────────────── */

.topbar[b-z1fk7275lq] {
    display:      grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:  center;
    gap:          12px;
    min-height:   var(--tb-h);
    padding:      0 20px;
    background:   var(--tb-bg);
    border-bottom:1px solid var(--tb-border);
    position:     sticky;
    top:          0;
    z-index:      200;
    flex-shrink:  0;
}

/* ── Left ─────────────────────────────────────────────────────────────────── */

.tb-left[b-z1fk7275lq] { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }

.tb-toggle[b-z1fk7275lq] {
    width: 36px; height: 36px; border: none; background: transparent;
    border-radius: 8px; cursor: pointer; color: var(--txt-muted);
    font-size: 1.2rem; display: flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s; flex-shrink: 0;
}
.tb-toggle:hover[b-z1fk7275lq] { background: var(--accent-soft); color: var(--accent); }

/* Mobile menu button swaps in for the desktop pin-toggle below the breakpoint — see the matching
   query further down and DashSidebar.razor.css for the drawer itself. */
.tb-toggle-mobile[b-z1fk7275lq] { display: none; }

.tb-crumb-col[b-z1fk7275lq] { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 8px 0; }
.tb-crumb[b-z1fk7275lq] { display: flex; align-items: center; gap: 6px; font-size: .85rem; white-space: nowrap; overflow: hidden; min-width: 0; }
/* Below the breadcrumb trail — real browser history.back(), so it lands wherever the user
   actually came from rather than a hardcoded "parent" route. */
.tb-back-link[b-z1fk7275lq] {
    display: flex; align-items: center; gap: 4px;
    background: none; border: none; padding: 0; margin: 0;
    font-size: .75rem; color: var(--txt-muted); cursor: pointer; align-self: flex-start;
}
.tb-back-link:hover[b-z1fk7275lq] { color: var(--accent); text-decoration: underline; }
.tb-back-link i[b-z1fk7275lq] { font-size: .7rem; }
/* Every crumb is a real <button> (every node here navigates) — reset browser chrome so it reads
   as plain breadcrumb text, not a form control, until hovered. */
.tb-crumb-link[b-z1fk7275lq]   { background: none; border: none; padding: 0; font: inherit; cursor: pointer; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.tb-crumb-link:hover[b-z1fk7275lq] { text-decoration: underline; }
.tb-crumb-tenant[b-z1fk7275lq] { font-weight: 600; color: var(--txt); }
.tb-crumb-sep[b-z1fk7275lq]    { color: var(--txt-muted); font-size: .8rem; }
.tb-crumb-page[b-z1fk7275lq]   { color: var(--txt-muted); text-transform: capitalize; }

/* ── Date/time strip ──────────────────────────────────────────────────────── */
/* Same widget as Finance/PaymentCollection's own LiveDateTimeHeader, hoisted into the fixed topbar
   so it's visible on every page. Primary date over secondary date (stacked, default-calendar-first)
   in one column; time sits beside that column, vertically centered against the full two-line stack
   via align-items:center on the row. Sits in .topbar's own middle grid column (1fr auto 1fr) so it's
   always exactly centered without ever overlapping the breadcrumb/Ctrl+K hint on the left or the
   icon cluster on the right — a plain visual center via position:absolute+left:50% doesn't reserve
   any space of its own, so a long breadcrumb (or a narrower window) could grow underneath and
   collide with it; the grid's middle track reserves real space instead. Tinted with the theme's
   accent color (var(--accent), user-customizable via the theme editor) instead of the topbar's
   usual neutral text colors, so it reads as its own distinct element. */
.tb-dt[b-z1fk7275lq] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 14px;
    border-radius: 10px;
    background: var(--accent-soft);
    flex-shrink: 0;
    cursor: pointer;
    transition: opacity .15s;
}
.tb-dt:hover[b-z1fk7275lq] { opacity: .85; }
.tb-dt-dates[b-z1fk7275lq] {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}
.tb-dt-primary[b-z1fk7275lq]   { font-size: .78rem; font-weight: 700; color: var(--accent); }
.tb-dt-secondary[b-z1fk7275lq] { font-size: .7rem; color: var(--accent); opacity: .75; }
.tb-dt-time[b-z1fk7275lq] {
    font-size: .84rem;
    font-weight: 700;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding-left: 10px;
    border-left: 1px solid var(--accent);
    opacity: .9;
}


/* ── Command palette hint ─────────────────────────────────────────────────── */

.tb-cp-hint[b-z1fk7275lq] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding: 0 10px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--txt-muted);
    font-size: .78rem;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    min-width: 0;
}
.tb-cp-hint:hover[b-z1fk7275lq] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.tb-cp-hint-txt[b-z1fk7275lq] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-cp-hint-kbd[b-z1fk7275lq] {
    flex-shrink: 0;
    font-size: .68rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 5px;
    background: var(--paper);
    border: 1px solid var(--border);
    color: var(--txt-muted);
    font-family: var(--mono, monospace);
}

@media (max-width: 860px) {
    .tb-cp-hint-txt[b-z1fk7275lq] { display: none; }
    .tb-toggle-desktop[b-z1fk7275lq] { display: none; }
    .tb-toggle-mobile[b-z1fk7275lq]  { display: flex; }
}

/* ── Right ────────────────────────────────────────────────────────────────── */

.tb-right[b-z1fk7275lq] { display: flex; align-items: center; gap: 4px; flex-shrink: 0; justify-self: end; }

.tb-icon-btn[b-z1fk7275lq] {
    position: relative;
    width: 36px; height: 36px; border: none; background: transparent;
    border-radius: 8px; cursor: pointer; color: var(--txt-muted);
    font-size: 1rem; display: flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
}
.tb-icon-btn:hover[b-z1fk7275lq] { background: var(--accent-soft); color: var(--accent); }

/* ── Lang segment ─────────────────────────────────────────────────────────── */

.tb-seg[b-z1fk7275lq] { display: flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-right: 4px; }
.tb-seg-btn[b-z1fk7275lq] {
    padding: 0 10px; height: 30px; border: none; background: transparent;
    color: var(--txt-muted); font-size: .75rem; font-weight: 600; cursor: pointer;
    transition: background .15s, color .15s; letter-spacing: .04em;
}
.tb-seg-btn.active[b-z1fk7275lq] { background: var(--accent); color: #fff; }

/* ── Backdrop (closes notification panel) ───────────────────────────────── */

.tb-backdrop[b-z1fk7275lq] { position: fixed; inset: 0; z-index: 250; }

/* ── Notification bell ───────────────────────────────────────────────────── */

.tb-notif-wrap[b-z1fk7275lq] { position: relative; }

.tb-notif-badge[b-z1fk7275lq] {
    position: absolute; top: 4px; right: 4px;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 99px; background: #e11d48; color: #fff;
    font-size: .6rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none; border: 2px solid var(--tb-bg, #fff);
}

.tb-notif-panel[b-z1fk7275lq] {
    position:     absolute;
    top:          calc(100% + 8px);
    right:        0;
    width:        320px;
    background:   var(--paper, #fff);
    border:       1px solid rgba(11,16,32,.1);
    border-radius:14px;
    box-shadow:   0 12px 36px rgba(11,16,32,.14);
    z-index:      300;
    overflow:     hidden;
    animation:    np-in-b-z1fk7275lq .14s ease;
}

@keyframes np-in-b-z1fk7275lq {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.tb-np-head[b-z1fk7275lq] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px 10px; border-bottom: 1px solid rgba(11,16,32,.06);
}
.tb-np-title[b-z1fk7275lq] { font-size: .9rem; font-weight: 700; color: var(--ink, #0f172a); }
.tb-np-readall[b-z1fk7275lq] {
    font-size: .72rem; font-weight: 600; color: var(--accent, #6366f1);
    background: none; border: none; cursor: pointer; padding: 2px 8px;
    border-radius: 5px; transition: background .12s;
}
.tb-np-readall:hover[b-z1fk7275lq] { background: rgba(99,102,241,.08); }

.tb-np-empty[b-z1fk7275lq] {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 40px 20px; color: var(--muted, #94a3b8); font-size: .85rem;
}
.tb-np-empty i[b-z1fk7275lq] { font-size: 2rem; opacity: .4; }

.tb-np-list[b-z1fk7275lq] { max-height: 360px; overflow-y: auto; }

.tb-np-item[b-z1fk7275lq] {
    display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px;
    cursor: pointer; transition: background .12s;
    border-bottom: 1px solid rgba(11,16,32,.04);
}
.tb-np-item:last-child[b-z1fk7275lq]  { border-bottom: none; }
.tb-np-item:hover[b-z1fk7275lq]       { background: var(--bg, #f8fafc); }
.tb-np-item.unread[b-z1fk7275lq]      { background: rgba(99,102,241,.04); }
.tb-np-item.unread:hover[b-z1fk7275lq]{ background: rgba(99,102,241,.08); }

.tb-np-icon[b-z1fk7275lq] {
    flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: .9rem; margin-top: 1px;
}
.tb-np-icon.info[b-z1fk7275lq]    { background: rgba(99,102,241,.12); color: #6366f1; }
.tb-np-icon.success[b-z1fk7275lq] { background: rgba(5,150,105,.12);  color: #059669; }
.tb-np-icon.warning[b-z1fk7275lq] { background: rgba(217,119,6,.12);  color: #d97706; }
.tb-np-icon.alert[b-z1fk7275lq]   { background: rgba(225,29,72,.12);  color: #e11d48; }

.tb-np-body[b-z1fk7275lq] { flex: 1; min-width: 0; }
.tb-np-item-title[b-z1fk7275lq] { font-size: .82rem; font-weight: 600; color: var(--ink, #0f172a); line-height: 1.3; }
.tb-np-item-body[b-z1fk7275lq]  { font-size: .76rem; color: var(--ink-2, #475569); margin-top: 2px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-np-time[b-z1fk7275lq]       { font-size: .7rem; color: var(--muted, #94a3b8); margin-top: 3px; }

.tb-np-dot[b-z1fk7275lq] {
    flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent, #6366f1); margin-top: 6px;
}

/* ── Processes menu ──────────────────────────────────────────────────────── */

.tb-proc-wrap[b-z1fk7275lq] { position: relative; }

.tb-proc-btn.busy[b-z1fk7275lq] { color: var(--accent); }

.tb-proc-spin[b-z1fk7275lq] { animation: tb-proc-rotate-b-z1fk7275lq 1.6s linear infinite; }
@keyframes tb-proc-rotate-b-z1fk7275lq { to { transform: rotate(360deg); } }

.tb-proc-badge[b-z1fk7275lq] {
    position: absolute; top: 4px; right: 4px;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 99px; background: var(--accent, #6366f1); color: #fff;
    font-size: .6rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none; border: 2px solid var(--tb-bg, #fff);
}

.tb-proc-panel[b-z1fk7275lq] {
    position:     absolute;
    top:          calc(100% + 8px);
    right:        0;
    width:        340px;
    background:   var(--paper, #fff);
    border:       1px solid rgba(11,16,32,.1);
    border-radius:14px;
    box-shadow:   0 12px 36px rgba(11,16,32,.14);
    z-index:      300;
    overflow:     hidden;
    animation:    np-in-b-z1fk7275lq .14s ease;
}

.tb-proc-item[b-z1fk7275lq] {
    display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px;
    border-bottom: 1px solid rgba(11,16,32,.04);
}
.tb-proc-item:last-child[b-z1fk7275lq] { border-bottom: none; }

.tb-proc-icon[b-z1fk7275lq] {
    flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: .9rem; margin-top: 1px;
    background: rgba(99,102,241,.12); color: #6366f1;
}
.tb-proc-icon.success[b-z1fk7275lq]   { background: rgba(5,150,105,.12);  color: #059669; }
.tb-proc-icon.alert[b-z1fk7275lq]     { background: rgba(225,29,72,.12);  color: #e11d48; }
.tb-proc-icon.paused[b-z1fk7275lq]    { background: rgba(217,119,6,.12);  color: #d97706; }
.tb-proc-icon.cancelled[b-z1fk7275lq] { background: rgba(100,116,139,.14); color: #64748b; }

.tb-proc-body[b-z1fk7275lq] { flex: 1; min-width: 0; }

.tb-proc-line[b-z1fk7275lq] { display: flex; align-items: center; gap: 8px; }
.tb-proc-title[b-z1fk7275lq] {
    flex: 1; min-width: 0; font-size: .82rem; font-weight: 600;
    color: var(--ink, #0f172a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tb-proc-status[b-z1fk7275lq] {
    flex-shrink: 0; font-size: .64rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; padding: 1px 6px; border-radius: 5px;
    background: rgba(99,102,241,.1); color: #6366f1;
}
.tb-proc-status.success[b-z1fk7275lq]   { background: rgba(5,150,105,.12);  color: #059669; }
.tb-proc-status.alert[b-z1fk7275lq]     { background: rgba(225,29,72,.12);  color: #e11d48; }
.tb-proc-status.paused[b-z1fk7275lq]    { background: rgba(217,119,6,.12);  color: #d97706; }
.tb-proc-status.cancelled[b-z1fk7275lq] { background: rgba(100,116,139,.14); color: #64748b; }

.tb-proc-detail[b-z1fk7275lq] {
    font-size: .74rem; color: var(--ink-2, #475569); margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.tb-proc-bar[b-z1fk7275lq] {
    position: relative; height: 5px; margin-top: 8px;
    border-radius: 99px; background: rgba(99,102,241,.14); overflow: hidden;
}
.tb-proc-fill[b-z1fk7275lq] {
    position: absolute; inset: 0; width: 0;
    border-radius: 99px; background: var(--accent, #6366f1);
    transition: width .25s ease;
}
.tb-proc-bar.paused .tb-proc-fill[b-z1fk7275lq] { background: #d97706; }

/* Indeterminate: a sliding sweep instead of a fixed width */
.tb-proc-bar.indet .tb-proc-fill[b-z1fk7275lq] {
    width: 40%; animation: tb-proc-sweep-b-z1fk7275lq 1.1s ease-in-out infinite;
}
.tb-proc-bar.indet.paused .tb-proc-fill[b-z1fk7275lq] { animation-play-state: paused; }
@keyframes tb-proc-sweep-b-z1fk7275lq {
    0%   { left: -40%; }
    100% { left: 100%; }
}

.tb-proc-actions[b-z1fk7275lq] { display: flex; align-items: center; gap: 2px; flex-shrink: 0; margin-top: 1px; }
.tb-proc-act[b-z1fk7275lq] {
    width: 26px; height: 26px; border: none; background: transparent;
    border-radius: 6px; cursor: pointer; color: var(--muted, #94a3b8);
    font-size: .8rem; display: flex; align-items: center; justify-content: center;
    transition: background .12s, color .12s;
}
.tb-proc-act:hover[b-z1fk7275lq]        { background: var(--accent-soft, rgba(99,102,241,.1)); color: var(--accent, #6366f1); }
.tb-proc-act.danger:hover[b-z1fk7275lq] { background: rgba(225,29,72,.1); color: #e11d48; }

.tb-proc-body-dl[b-z1fk7275lq]          { cursor: pointer; }
.tb-proc-body-dl:hover .tb-proc-title[b-z1fk7275lq] { color: var(--accent, #6366f1); }
.tb-proc-dl-hint[b-z1fk7275lq]          { font-size: .72rem; color: var(--accent, #6366f1); opacity: .8; }

/* ── User / profile button ───────────────────────────────────────────────── */

.tb-user-btn[b-z1fk7275lq] {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 10px 4px 4px; border: 1px solid var(--border);
    border-radius: 10px; background: transparent; cursor: pointer;
    color: var(--txt); transition: background .15s, border-color .15s;
}
.tb-user-btn:hover[b-z1fk7275lq] { background: var(--accent-soft); border-color: var(--accent); }

.tb-user-av[b-z1fk7275lq] {
    width: 30px; height: 30px; border-radius: 8px; overflow: hidden;
    background: var(--bg, #f1f5f9); color: var(--accent); font-size: .8rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.tb-user-av img[b-z1fk7275lq] { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; background: var(--bg, #f1f5f9); }
.tb-user-name[b-z1fk7275lq]  { font-size: .82rem; font-weight: 600; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-user-caret[b-z1fk7275lq] { font-size: .7rem; color: var(--txt-muted); }

/* ── Profile mini-header inside the dropdown menu ───────────────────────── */

.tb-menu-profile[b-z1fk7275lq] {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px 10px;
}
.tb-mp-av[b-z1fk7275lq] {
    width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; overflow: hidden;
    background: var(--bg, #f1f5f9); color: var(--accent, #6366f1);
    font-size: .9rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.tb-mp-av img[b-z1fk7275lq] { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; background: var(--bg, #f1f5f9); }
.tb-mp-name[b-z1fk7275lq] { font-size: .85rem; font-weight: 700; color: var(--ink, #0f172a); }
.tb-mp-role[b-z1fk7275lq] { font-size: .72rem; color: var(--muted, #94a3b8); margin-top: 1px; }

/* ── Workload switcher section ───────────────────────────────────────────── */

.tb-ws-section-label[b-z1fk7275lq] {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 16px 4px;
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: var(--muted, #94a3b8);
}
.tb-ws-total-badge[b-z1fk7275lq] {
    margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 99px; background: var(--accent, #6366f1); color: #fff;
    font-size: .62rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}

.tb-ws-row[b-z1fk7275lq] {
    display: flex; align-items: center; gap: 9px; padding: 2px 0; width: 100%;
}
.tb-ws-av[b-z1fk7275lq] {
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 7px;
    color: #fff; font-size: .8rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.tb-ws-info[b-z1fk7275lq] { flex: 1; min-width: 0; }
.tb-ws-name[b-z1fk7275lq] { font-size: .82rem; font-weight: 600; color: var(--ink, #0f172a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-ws-role[b-z1fk7275lq] { font-size: .7rem; color: var(--muted, #94a3b8); }
.tb-ws-check[b-z1fk7275lq] { font-size: .85rem; color: var(--accent, #6366f1); flex-shrink: 0; }

/* ── School / role chip (workload switcher) ───────────────────────────────── */
.tb-school-btn[b-z1fk7275lq] {
    display: flex; align-items: center; gap: 10px;
    height: 44px; padding: 4px 10px 4px 4px;
    border: 1px solid var(--border); border-radius: 12px;
    background: var(--bg); color: var(--txt);
    cursor: pointer; min-width: 0; flex-shrink: 1;
    transition: background .15s, border-color .15s;
}
.tb-school-btn:hover[b-z1fk7275lq] { background: var(--accent-soft); border-color: var(--accent); }
.tb-school-logo[b-z1fk7275lq] {
    width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    background: var(--paper); color: #fff; font-weight: 700; font-size: .95rem;
}
.tb-school-logo img[b-z1fk7275lq] { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.tb-school-meta[b-z1fk7275lq] { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.2; }
.tb-school-name[b-z1fk7275lq] {
    font-size: .84rem; font-weight: 700; color: var(--txt);
    max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tb-school-role[b-z1fk7275lq] {
    font-size: .7rem; color: var(--txt-muted);
    max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tb-school-caret[b-z1fk7275lq] { font-size: .7rem; color: var(--txt-muted); flex-shrink: 0; }

/* Back link never wraps onto several lines. */
.tb-back-link[b-z1fk7275lq], .tb-back-txt[b-z1fk7275lq] { white-space: nowrap; }

/* ── Narrower screens: compact progressively instead of squeezing ─────────── */
/* The bar is a flex row (breadcrumb left, controls right — see "Layout v2" below); these steps
   compact the left-side pieces as the window narrows. */
@media (max-width: 1280px) {
    .tb-back-txt[b-z1fk7275lq]   { display: none; }      /* arrow only, tooltip keeps the text */
    .tb-cp-hint-txt[b-z1fk7275lq] { display: none; }     /* keep the Ctrl+K hint */
    .tb-user-name[b-z1fk7275lq], .tb-user-caret[b-z1fk7275lq] { display: none; }
}
@media (max-width: 1024px) {
    .tb-school-role[b-z1fk7275lq] { display: none; }
    .tb-school-name[b-z1fk7275lq] { max-width: 130px; }
}
@media (max-width: 860px) {
    .tb-school-meta[b-z1fk7275lq], .tb-school-caret[b-z1fk7275lq] { display: none; }
    .tb-school-btn[b-z1fk7275lq] { padding: 4px; }
    .tb-crumb-link[b-z1fk7275lq] { max-width: 140px; }
}

/* ── Layout v2 of the V1 bar: breadcrumb left, everything else right ─────── */
.topbar[b-z1fk7275lq] { display: flex; justify-content: space-between; align-items: center; }
.tb-left[b-z1fk7275lq]  { flex: 1 1 auto; min-width: 0; }
.tb-right[b-z1fk7275lq] { flex: 0 0 auto; gap: 6px; }

.tb-divider[b-z1fk7275lq] { width: 1px; height: 26px; background: var(--border); margin: 0 4px; flex-shrink: 0; }

/* Breadcrumb trail */
.tb-crumb[b-z1fk7275lq] { font-size: .84rem; }
.tb-crumb-link[b-z1fk7275lq] { color: var(--txt-muted); max-width: 200px; display: inline-flex; align-items: center; gap: 5px; }
.tb-crumb-link:hover[b-z1fk7275lq] { color: var(--accent); text-decoration: none; }
.tb-crumb-current[b-z1fk7275lq] {
    font-weight: 700; color: var(--txt); max-width: 260px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: inline-flex; align-items: center; gap: 5px;
}
.tb-crumb-sep[b-z1fk7275lq] { color: var(--txt-muted); opacity: .6; font-size: .9rem; margin: 0 1px; }

/* Search pill */
.tb-cp-hint[b-z1fk7275lq] { margin-left: 0; height: 36px; border-radius: 10px; padding: 0 8px 0 12px; }
.tb-cp-hint-txt[b-z1fk7275lq] { min-width: 70px; text-align: left; }

/* Date/time chip */
.tb-dt[b-z1fk7275lq] { height: 36px; padding: 0 10px; gap: 8px; border-radius: 10px; }
.tb-dt-icon[b-z1fk7275lq] { color: var(--accent); font-size: .85rem; }
.tb-dt-dates[b-z1fk7275lq] { line-height: 1.2; }
.tb-dt-primary[b-z1fk7275lq] { font-size: .74rem; }
.tb-dt-secondary[b-z1fk7275lq] { font-size: .66rem; }
.tb-dt-time[b-z1fk7275lq] { font-size: .8rem; padding-left: 8px; }

/* School chip on the right: same height as its neighbours */
.tb-school-btn[b-z1fk7275lq] { height: 40px; border-radius: 10px; }
.tb-school-logo[b-z1fk7275lq] { width: 30px; height: 30px; border-radius: 8px; }

/* ── Smaller screens: shrink each control instead of squeezing the bar ──── */
@media (max-width: 1380px) {
    .tb-dt-dates[b-z1fk7275lq] { display: none; }                          /* time only */
    .tb-dt-time[b-z1fk7275lq] { border-left: none; padding-left: 0; }
}
@media (max-width: 1180px) {
    .tb-cp-hint-txt[b-z1fk7275lq] { display: none; }                        /* icon + Ctrl+K */
    .tb-school-name[b-z1fk7275lq], .tb-school-role[b-z1fk7275lq] { max-width: 130px; }
}
@media (max-width: 960px) {
    .tb-dt-time[b-z1fk7275lq] { display: none; }                            /* calendar icon only */
    .tb-dt[b-z1fk7275lq] { padding: 0 10px; }
    .tb-cp-hint-kbd[b-z1fk7275lq] { display: none; }                        /* search icon only */
    .tb-cp-hint[b-z1fk7275lq] { padding: 0 10px; }
}
@media (max-width: 760px) {
    /* Only the last two steps of the trail (parent » current) */
    .tb-crumb > :not(:nth-last-child(-n+3))[b-z1fk7275lq] { display: none; }
    .tb-crumb-current[b-z1fk7275lq] { max-width: 150px; }
    .tb-divider[b-z1fk7275lq] { display: none; }
}

/* ── Dark mode: readable chips on the near-black bar ─────────────────────── */
/* In dark mode the accent text sat on a faint accent tint (dark-on-dark) and the school chip used
   the page background (almost the bar's own colour) with #6b7280 muted text. Use a lifted surface,
   brighter text and a lightened accent instead. (Scoped CSS keeps the #dash-shell ancestor as-is.) */
#dash-shell.theme-dark .tb-dt[b-z1fk7275lq] {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
}
#dash-shell.theme-dark .tb-dt-icon[b-z1fk7275lq],
#dash-shell.theme-dark .tb-dt-primary[b-z1fk7275lq],
#dash-shell.theme-dark .tb-dt-time[b-z1fk7275lq] {
    color: color-mix(in srgb, var(--accent) 45%, #ffffff);
}
#dash-shell.theme-dark .tb-dt-secondary[b-z1fk7275lq] { color: #b6bdcc; opacity: 1; }
#dash-shell.theme-dark .tb-dt-time[b-z1fk7275lq] { border-left-color: rgba(255,255,255,.18); opacity: 1; }
#dash-shell.theme-dark .tb-dt:hover[b-z1fk7275lq] { background: rgba(255,255,255,.10); opacity: 1; }

#dash-shell.theme-dark .tb-school-btn[b-z1fk7275lq] {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.12);
}
#dash-shell.theme-dark .tb-school-btn:hover[b-z1fk7275lq] {
    background: rgba(255,255,255,.10);
    border-color: color-mix(in srgb, var(--accent) 60%, #ffffff);
}
#dash-shell.theme-dark .tb-school-name[b-z1fk7275lq]  { color: #f1f3f9; }
#dash-shell.theme-dark .tb-school-role[b-z1fk7275lq],
#dash-shell.theme-dark .tb-school-caret[b-z1fk7275lq] { color: #aeb6c6; }
#dash-shell.theme-dark .tb-school-logo[b-z1fk7275lq]  { box-shadow: 0 0 0 1px rgba(255,255,255,.14); }

/* Same treatment for the search pill and the other muted bits of the bar. */
#dash-shell.theme-dark .tb-cp-hint[b-z1fk7275lq] {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.12);
    color: #c3c9d6;
}
#dash-shell.theme-dark .tb-cp-hint-kbd[b-z1fk7275lq] { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: #c3c9d6; }
#dash-shell.theme-dark .tb-crumb-link[b-z1fk7275lq],
#dash-shell.theme-dark .tb-back-link[b-z1fk7275lq],
#dash-shell.theme-dark .tb-crumb-sep[b-z1fk7275lq] { color: #aeb6c6; }
#dash-shell.theme-dark .tb-divider[b-z1fk7275lq] { background: rgba(255,255,255,.12); }
/* /Components/Layout/Dashboard/ThemeDock.razor.rz.scp.css */
/* Floating appearance dock — right edge, vertically centered. Lives inside #dash-shell so the
   theme variables (--accent, --paper, --txt…) cascade into it. */

.td-backdrop[b-f0db9xkb8b] { position: fixed; inset: 0; z-index: 1190; }

.td-dock[b-f0db9xkb8b] {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translate(calc(100% - 34px), -50%);   /* only the tab peeks out */
    display: flex;
    align-items: center;
    z-index: 1200;
    transition: transform .25s ease;
}
.td-dock.open[b-f0db9xkb8b] { transform: translate(0, -50%); }

.td-tab[b-f0db9xkb8b] {
    width: 34px; height: 46px;
    border: none; border-radius: 12px 0 0 12px;
    background: var(--accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.05rem; cursor: pointer;
    box-shadow: -4px 4px 14px rgba(0,0,0,.18);
    opacity: .85; transition: opacity .15s, width .15s;
}
.td-tab:hover[b-f0db9xkb8b], .td-dock.open .td-tab[b-f0db9xkb8b] { opacity: 1; width: 38px; }

.td-panel[b-f0db9xkb8b] {
    width: 268px;
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    padding: 14px 14px 12px;
    background: var(--paper);
    color: var(--txt);
    border: 1px solid var(--border);
    border-right: none;
    border-radius: 14px 0 0 14px;
    box-shadow: -8px 8px 30px rgba(0,0,0,.18);
}

.td-title[b-f0db9xkb8b] { font-weight: 700; font-size: .9rem; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.td-title i[b-f0db9xkb8b] { color: var(--accent); }
.td-label[b-f0db9xkb8b] {
    font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--txt-muted); margin: 12px 0 6px;
}

.td-seg[b-f0db9xkb8b] { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); }
.td-seg-3[b-f0db9xkb8b] { grid-template-columns: repeat(3, 1fr); }
.td-seg button[b-f0db9xkb8b] {
    border: none; background: transparent; color: var(--txt-muted);
    border-radius: 7px; padding: 6px 4px; font-size: .78rem; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.td-seg button.active[b-f0db9xkb8b] { background: var(--paper); color: var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

.td-swatches[b-f0db9xkb8b] { display: flex; flex-wrap: wrap; gap: 8px; }
.td-swatch[b-f0db9xkb8b] {
    width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer;
    color: #fff; display: flex; align-items: center; justify-content: center; font-size: .85rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .12s;
}
.td-swatch:hover[b-f0db9xkb8b] { transform: scale(1.1); }
.td-swatch.active[b-f0db9xkb8b] { border-color: var(--paper); outline: 2px solid var(--txt-muted); }


/* Phones: a slimmer tab, lower down so it doesn't sit over centered dialogs' content. */
@media (max-width: 600px) {
    .td-dock[b-f0db9xkb8b] { top: auto; bottom: 88px; transform: translate(calc(100% - 28px), 0); }
    .td-dock.open[b-f0db9xkb8b] { transform: translate(0, 0); }
    .td-tab[b-f0db9xkb8b] { width: 28px; height: 40px; }
}

/* Header */
.td-head[b-f0db9xkb8b] { display: flex; align-items: center; justify-content: space-between; }
.td-head .td-title[b-f0db9xkb8b] { margin-bottom: 0; }
.td-close[b-f0db9xkb8b] {
    border: none; background: transparent; color: var(--txt-muted); cursor: pointer;
    width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
}
.td-close:hover[b-f0db9xkb8b] { background: var(--accent-soft); color: var(--accent); }

.td-seg button[b-f0db9xkb8b] { font-size: .74rem; gap: 4px; }
.td-seg button:disabled[b-f0db9xkb8b] { opacity: .55; cursor: not-allowed; }

/* Fonts: each button previews its own typeface */
.td-fonts[b-f0db9xkb8b] { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.td-fonts button[b-f0db9xkb8b] {
    border: 1px solid var(--border); background: var(--bg); color: var(--txt);
    border-radius: 9px; padding: 6px 8px; font-size: .78rem; cursor: pointer;
    display: flex; align-items: center; gap: 8px; text-align: left;
}
.td-fonts button.active[b-f0db9xkb8b] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.td-font-sample[b-f0db9xkb8b] { font-size: 1rem; font-weight: 700; width: 22px; }

.td-note[b-f0db9xkb8b] { font-size: .7rem; color: var(--txt-muted); margin-top: 5px; }

/* Toggle switch */
.td-switch[b-f0db9xkb8b] { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: .8rem; font-weight: 600; cursor: pointer; }
.td-switch input[b-f0db9xkb8b] { position: absolute; opacity: 0; pointer-events: none; }
.td-switch-track[b-f0db9xkb8b] {
    width: 34px; height: 19px; border-radius: 999px; background: var(--border);
    position: relative; flex-shrink: 0; transition: background .15s;
}
.td-switch-thumb[b-f0db9xkb8b] {
    position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s;
}
.td-switch input:checked + .td-switch-track[b-f0db9xkb8b] { background: var(--accent); }
.td-switch input:checked + .td-switch-track .td-switch-thumb[b-f0db9xkb8b] { left: 17px; }
.td-switch input:focus-visible + .td-switch-track[b-f0db9xkb8b] { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Reset */
.td-reset[b-f0db9xkb8b] {
    margin-top: 14px; width: 100%;
    border: 1px dashed var(--border); background: transparent; color: var(--txt-muted);
    border-radius: 10px; padding: 8px; font-size: .78rem; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.td-reset:hover[b-f0db9xkb8b] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-ms4b7re0xg] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-ms4b7re0xg] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-ms4b7re0xg] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-ms4b7re0xg] {
    font-size: 1.1rem;
}

.bi[b-ms4b7re0xg] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-ms4b7re0xg] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-ms4b7re0xg] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-ms4b7re0xg] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-ms4b7re0xg] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-ms4b7re0xg] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-ms4b7re0xg] {
        padding-bottom: 1rem;
    }

    .nav-item[b-ms4b7re0xg]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-ms4b7re0xg]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-ms4b7re0xg]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-ms4b7re0xg] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-ms4b7re0xg] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-ms4b7re0xg] {
        display: none;
    }

    .nav-scrollable[b-ms4b7re0xg] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-bwtzfxbmy1],
.components-reconnect-repeated-attempt-visible[b-bwtzfxbmy1],
.components-reconnect-failed-visible[b-bwtzfxbmy1],
.components-pause-visible[b-bwtzfxbmy1],
.components-resume-failed-visible[b-bwtzfxbmy1],
.components-rejoining-animation[b-bwtzfxbmy1] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-bwtzfxbmy1],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-bwtzfxbmy1],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-bwtzfxbmy1],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-bwtzfxbmy1],
#components-reconnect-modal.components-reconnect-retrying[b-bwtzfxbmy1],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-bwtzfxbmy1],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-bwtzfxbmy1],
#components-reconnect-modal.components-reconnect-failed[b-bwtzfxbmy1],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-bwtzfxbmy1] {
    display: block;
}


#components-reconnect-modal[b-bwtzfxbmy1] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-bwtzfxbmy1 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-bwtzfxbmy1 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-bwtzfxbmy1 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-bwtzfxbmy1]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-bwtzfxbmy1 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-bwtzfxbmy1 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-bwtzfxbmy1 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-bwtzfxbmy1 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-bwtzfxbmy1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-bwtzfxbmy1] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-bwtzfxbmy1] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-bwtzfxbmy1] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-bwtzfxbmy1] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-bwtzfxbmy1] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-bwtzfxbmy1] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-bwtzfxbmy1 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-bwtzfxbmy1] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-bwtzfxbmy1 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Dashboard/DashAccountAdminContent.razor.rz.scp.css */
/* ── Shared card grid ───────────────────────────────────────────────────── */
.aa-grid[b-xjhy5cirgd] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.card--wide[b-xjhy5cirgd] { grid-column: 1 / -1; }

@media (max-width: 900px) { .aa-grid[b-xjhy5cirgd] { grid-template-columns: 1fr; } }

/* ── Card ───────────────────────────────────────────────────────────────── */
.card[b-xjhy5cirgd] {
    background: var(--paper, #fff);
    border: 1px solid var(--line, rgba(11,16,32,.08));
    border-radius: 16px;
    overflow: hidden;
}

.card--disabled[b-xjhy5cirgd] { opacity: .6; }

.card-head[b-xjhy5cirgd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--line, rgba(11,16,32,.06));
}

.card-title[b-xjhy5cirgd] {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink, #0f172a);
    line-height: 1.3;
}

.card-sub[b-xjhy5cirgd] {
    font-size: 11.5px;
    color: var(--muted, #94a3b8);
    margin-top: 2px;
}

.card-body[b-xjhy5cirgd] { padding: 18px 20px; }

/* ── Chart ──────────────────────────────────────────────────────────────── */
.chart-empty[b-xjhy5cirgd] { padding: 40px 0; text-align: center; color: var(--muted, #94a3b8); font-size: 13px; }
.widget-error[b-xjhy5cirgd] { display: flex; flex-direction: column; align-items: center; gap: 6px; }

/* ── Shared table ───────────────────────────────────────────────────────── */
.dash-table[b-xjhy5cirgd] { width: 100%; border-collapse: collapse; font-size: 13px; }
.dash-table th[b-xjhy5cirgd] {
    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: 0 10px 10px;
    border-bottom: 1px solid var(--line, rgba(11,16,32,.08));
}
.dash-table td[b-xjhy5cirgd] { padding: 10px 10px; border-bottom: 1px solid var(--line, rgba(11,16,32,.05)); vertical-align: middle; }
.dash-table tr:last-child td[b-xjhy5cirgd] { border-bottom: none; }
.dash-table tr:hover td[b-xjhy5cirgd] { background: var(--bg, #f8fafc); }
.dash-table tr.clickable[b-xjhy5cirgd] { cursor: pointer; }

.row-name[b-xjhy5cirgd] { font-weight: 600; color: var(--ink, #0f172a); }
.row-meta[b-xjhy5cirgd] { font-size: 11px; color: var(--muted, #94a3b8); margin-top: 2px; }

.amt-coral[b-xjhy5cirgd] { color: var(--coral, #ea580c); font-weight: 600; }
.amt-teal[b-xjhy5cirgd]  { color: var(--teal,  #0d9488); font-weight: 600; }

/* ── Suggestions (Day/Month/Year-End closing reminders) ────────────────── */
.sugg-list[b-xjhy5cirgd] { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; padding-right: 4px; }

.sugg-row[b-xjhy5cirgd] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg, #f8fafc);
    border-radius: 9px;
    cursor: pointer;
}
.sugg-row:hover[b-xjhy5cirgd] { background: var(--line, rgba(11,16,32,.06)); }

.sugg-info[b-xjhy5cirgd] { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.sugg-action[b-xjhy5cirgd] { font-size: 11.5px; font-weight: 600; color: var(--teal, #0d9488); white-space: nowrap; }

/* ── Class rows (Fee Collection by Class) ──────────────────────────────── */
.class-list[b-xjhy5cirgd] { display: flex; flex-direction: column; gap: 8px; max-height: 280px; overflow-y: auto; padding-right: 4px; }

.class-row[b-xjhy5cirgd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--bg, #f8fafc);
    border-radius: 9px;
}

.class-info[b-xjhy5cirgd] { display: flex; flex-direction: column; gap: 2px; }
.class-name[b-xjhy5cirgd] { font-size: 13px; font-weight: 600; color: var(--ink, #0f172a); }
.class-pct[b-xjhy5cirgd] { font-family: var(--mono, monospace); font-size: 12px; font-weight: 700; }
.class-pct.teal[b-xjhy5cirgd]   { color: var(--teal,  #0d9488); }
.class-pct.amber[b-xjhy5cirgd]  { color: var(--amber, #d97706); }
.class-pct.coral[b-xjhy5cirgd]  { color: var(--coral, #ea580c); }
/* /Components/Pages/Dashboard/Dashboard.razor.rz.scp.css */
/* ── Page root ──────────────────────────────────────────────────────────── */
.dash-home[b-9b46fnxgqb]  { width: 100%; }
.dash-loader[b-9b46fnxgqb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 60vh;
    gap: 8px;
}

/* ── Welcome ────────────────────────────────────────────────────────────── */
.dash-welcome[b-9b46fnxgqb] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 24px;
    gap: 16px;
    flex-wrap: wrap;
}

.dash-greeting[b-9b46fnxgqb] {
    font-family: var(--serif, Georgia, serif);
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 400;
    letter-spacing: -.02em;
    color: var(--ink, #0f172a);
    line-height: 1.05;
    margin: 0 0 6px;
}

.dash-greeting em[b-9b46fnxgqb] {
    font-style: italic;
    color: var(--coral, #ea580c);
}

.dash-sub[b-9b46fnxgqb] {
    font-size: 13.5px;
    color: var(--ink-2, #475569);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.dash-today[b-9b46fnxgqb]  { font-weight: 600; color: var(--ink, #0f172a); }
.dash-bull[b-9b46fnxgqb]   { color: var(--muted, #94a3b8); }
.dash-tenant[b-9b46fnxgqb] {
    font-family: var(--mono, monospace);
    font-size: 11.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted, #94a3b8);
    background: var(--bg, #f1f5f9);
    padding: 2px 8px;
    border-radius: 5px;
}

.dash-bday-msg[b-9b46fnxgqb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 5px 14px;
    border-radius: 999px;
    border: 1px solid #fbcfe8;
    background: linear-gradient(135deg, #fdf2f8, #fff7ed);
    color: #db2777;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    animation: dash-bday-pulse-b-9b46fnxgqb 1.8s ease-in-out infinite;
}
.dash-bday-msg:hover[b-9b46fnxgqb] { background: #fce7f3; }

@keyframes dash-bday-pulse-b-9b46fnxgqb {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}

@keyframes kpi-shimmer-b-9b46fnxgqb {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.dash-actions[b-9b46fnxgqb] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ── KPI strip ──────────────────────────────────────────────────────────── */
.kpi-strip[b-9b46fnxgqb] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}

@media (max-width: 1100px) { .kpi-strip[b-9b46fnxgqb] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .kpi-strip[b-9b46fnxgqb] { grid-template-columns: 1fr; } }

.kpi[b-9b46fnxgqb] {
    background: var(--paper, #fff);
    border: 1px solid var(--line, rgba(11,16,32,.08));
    border-radius: 16px;
    padding: 20px 22px 18px;
    position: relative;
    overflow: hidden;
    transition: box-shadow .15s ease, transform .15s ease;
    cursor: default;
}

.kpi:hover[b-9b46fnxgqb] {
    box-shadow: 0 6px 24px -8px rgba(0,0,0,.12);
    transform: translateY(-1px);
}

.kpi-clickable[b-9b46fnxgqb] {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.kpi-clickable:hover[b-9b46fnxgqb] {
    border-color: var(--primary, #6366f1);
}

/* Soft blob decoration */
.kpi[b-9b46fnxgqb]::after {
    content: '';
    position: absolute;
    top: -32px; right: -32px;
    width: 108px; height: 108px;
    border-radius: 50%;
    background: var(--d-accent-soft, rgba(99,102,241,.09));
    pointer-events: none;
}
.kpi.teal[b-9b46fnxgqb]::after  { background: var(--teal-soft,  rgba(13,148,136,.09)); }
.kpi.coral[b-9b46fnxgqb]::after { background: var(--coral-soft, rgba(234,88,12,.09)); }
.kpi.amber[b-9b46fnxgqb]::after { background: var(--amber-soft, rgba(217,119,6,.09)); }

/* Thin accent bar on top */
.kpi[b-9b46fnxgqb]::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: 16px 16px 0 0;
    background: var(--d-accent, #6366f1);
}
.kpi.teal[b-9b46fnxgqb]::before  { background: var(--teal,  #0d9488); }
.kpi.coral[b-9b46fnxgqb]::before { background: var(--coral, #ea580c); }
.kpi.amber[b-9b46fnxgqb]::before { background: var(--amber, #d97706); }

.kpi-top[b-9b46fnxgqb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.kpi-label[b-9b46fnxgqb] {
    font-family: var(--mono, monospace);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--muted, #94a3b8);
}

.kpi-ic[b-9b46fnxgqb] {
    width: 34px; height: 34px;
    border-radius: 9px;
    background: var(--d-accent-soft, rgba(99,102,241,.1));
    color: var(--d-accent, #6366f1);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    position: relative; z-index: 1;
}
.kpi-ic.teal[b-9b46fnxgqb]  { background: var(--teal-soft,  rgba(13,148,136,.1));  color: var(--teal,  #0d9488); }
.kpi-ic.coral[b-9b46fnxgqb] { background: var(--coral-soft, rgba(234,88,12,.1));   color: var(--coral, #ea580c); }
.kpi-ic.amber[b-9b46fnxgqb] { background: var(--amber-soft, rgba(217,119,6,.1));   color: var(--amber, #d97706); }

/* Icon plays a quick pop/wiggle on hover — MudIcon is a child component, so ::deep is needed to
   reach its rendered <svg> from this scoped stylesheet. */
.kpi-ic[b-9b46fnxgqb]  svg { transition: transform .15s ease; }
.kpi:hover .kpi-ic[b-9b46fnxgqb]  svg {
    animation: kpi-icon-pop-b-9b46fnxgqb .5s ease;
}
@keyframes kpi-icon-pop-b-9b46fnxgqb {
    0%   { transform: scale(1) rotate(0deg); }
    35%  { transform: scale(1.22) rotate(-8deg); }
    65%  { transform: scale(.95) rotate(4deg); }
    100% { transform: scale(1) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
    .kpi:hover .kpi-ic[b-9b46fnxgqb]  svg { animation: none; }
}

.kpi-val[b-9b46fnxgqb] {
    font-family: var(--serif, Georgia, serif);
    font-size: 36px;
    font-weight: 400;
    letter-spacing: -.03em;
    color: var(--ink, #0f172a);
    line-height: 1;
    margin-bottom: 10px;
}

.kpi-sub[b-9b46fnxgqb] {
    font-size: 11.5px;
    color: var(--ink-2, #475569);
    margin-top: -6px;
    margin-bottom: 10px;
}

.kpi-card-acts[b-9b46fnxgqb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line, rgba(11,16,32,.06));
    position: relative;
    z-index: 1;
}

.kpi-fast-act[b-9b46fnxgqb] { padding: 0 6px; font-size: 12px; }

.kpi-val-skeleton[b-9b46fnxgqb] {
    height: 36px;
    width: 64px;
    border-radius: 6px;
    margin-bottom: 10px;
    background: linear-gradient(90deg,
        var(--line, rgba(11,16,32,.08)) 25%,
        var(--d-accent-soft, rgba(99,102,241,.14)) 50%,
        var(--line, rgba(11,16,32,.08)) 75%);
    background-size: 200% 100%;
    animation: kpi-shimmer-b-9b46fnxgqb 1.4s ease-in-out infinite;
}

.kpi-bot[b-9b46fnxgqb] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.kpi-delta[b-9b46fnxgqb] {
    font-family: var(--mono, monospace);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    padding: 2px 7px;
    border-radius: 5px;
}

.kpi-delta.up[b-9b46fnxgqb]   { background: rgba(5,150,105,.1);  color: #059669; }
.kpi-delta.down[b-9b46fnxgqb] { background: rgba(225,29,72,.1);   color: #e11d48; }

.kpi-meta[b-9b46fnxgqb] {
    font-size: 11.5px;
    color: var(--muted, #94a3b8);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .dash-welcome[b-9b46fnxgqb]       { flex-direction: column; align-items: flex-start; }
    .dash-actions[b-9b46fnxgqb]       { flex-wrap: wrap; }
    .kpi-val[b-9b46fnxgqb]            { font-size: 30px; }
}
/* /Components/Pages/Dashboard/DashSchoolAdminContent.razor.rz.scp.css */
/* ── Shared card grid ───────────────────────────────────────────────────── */
.sa-grid[b-jpsubmvgn8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.card--wide[b-jpsubmvgn8] { grid-column: 1 / -1; }

@media (max-width: 900px) { .sa-grid[b-jpsubmvgn8] { grid-template-columns: 1fr; } }

/* ── Card ───────────────────────────────────────────────────────────────── */
.card[b-jpsubmvgn8] {
    background: var(--paper, #fff);
    border: 1px solid var(--line, rgba(11,16,32,.08));
    border-radius: 16px;
    overflow: hidden;
}

.card-head[b-jpsubmvgn8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--line, rgba(11,16,32,.06));
}

.card-title[b-jpsubmvgn8] {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink, #0f172a);
    line-height: 1.3;
}

.card-sub[b-jpsubmvgn8] {
    font-size: 11.5px;
    color: var(--muted, #94a3b8);
    margin-top: 2px;
}

.card-body[b-jpsubmvgn8] { padding: 18px 20px; }

/* ── Range tabs ─────────────────────────────────────────────────────────── */
.range-tabs[b-jpsubmvgn8] { display: flex; gap: 4px; }

.range-tab[b-jpsubmvgn8] {
    padding: 4px 10px;
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 7px;
    border: 1px solid var(--line, rgba(11,16,32,.08));
    background: transparent;
    color: var(--ink-2, #475569);
    cursor: pointer;
    transition: all .14s;
}

.range-tab.active[b-jpsubmvgn8], .range-tab:hover[b-jpsubmvgn8] {
    background: var(--d-accent, #6366f1);
    color: #fff;
    border-color: var(--d-accent, #6366f1);
}

/* ── Card header actions (fullscreen / print / export) ─────────────────── */
.card-acts[b-jpsubmvgn8] { display: flex; gap: 0; flex-shrink: 0; }

/* ── Chart ──────────────────────────────────────────────────────────────── */
.chart-wrap[b-jpsubmvgn8] { position: relative; margin-bottom: 8px; }
.chart-svg[b-jpsubmvgn8]  { width: 100%; height: 180px; display: block; }
.chart-empty[b-jpsubmvgn8] { padding: 40px 0; text-align: center; color: var(--muted, #94a3b8); font-size: 13px; }
.widget-error[b-jpsubmvgn8] { display: flex; flex-direction: column; align-items: center; gap: 6px; }

.chart-months[b-jpsubmvgn8] {
    display: flex;
    justify-content: space-between;
    padding: 0 2px;
    font-family: var(--mono, monospace);
    font-size: 10px;
    color: var(--muted, #94a3b8);
    margin-top: 6px;
    letter-spacing: .04em;
}

.chart-legend[b-jpsubmvgn8] {
    display: flex;
    gap: 18px;
    align-items: center;
    margin-top: 8px;
}

.legend-item[b-jpsubmvgn8] { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2, #475569); }

.legend-dot[b-jpsubmvgn8] {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.legend-dot.indigo[b-jpsubmvgn8] { background: #6366f1; }
.legend-dot.teal[b-jpsubmvgn8]   { background: #0d9488; }
.legend-dot.coral[b-jpsubmvgn8]  { background: #ea580c; }
.legend-dot.amber[b-jpsubmvgn8]  { background: #d97706; }

/* ── Today stats ────────────────────────────────────────────────────────── */
.today-stats[b-jpsubmvgn8] {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line, rgba(11,16,32,.06));
}

.today-stat[b-jpsubmvgn8] { flex: 1; text-align: center; }
.today-divider[b-jpsubmvgn8] { width: 1px; height: 36px; background: var(--line, rgba(11,16,32,.08)); flex-shrink: 0; }

.today-val[b-jpsubmvgn8] {
    font-family: var(--serif, Georgia, serif);
    font-size: 30px;
    font-weight: 400;
    letter-spacing: -.02em;
    line-height: 1;
    margin-bottom: 4px;
}
.today-val.indigo[b-jpsubmvgn8] { color: var(--d-accent, #6366f1); }
.today-val.coral[b-jpsubmvgn8]  { color: var(--coral,   #ea580c); }
.today-val.amber[b-jpsubmvgn8]  { color: var(--amber,   #d97706); }

.today-key[b-jpsubmvgn8] { font-size: 11px; color: var(--muted, #94a3b8); text-transform: uppercase; letter-spacing: .1em; font-family: var(--mono, monospace); }

/* ── Attendance bar ─────────────────────────────────────────────────────── */
.attend-bar-wrap[b-jpsubmvgn8] { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }

.attend-bar[b-jpsubmvgn8] {
    flex: 1;
    height: 6px;
    border-radius: 99px;
    background: var(--bg, #f1f5f9);
    overflow: hidden;
}

.attend-fill[b-jpsubmvgn8] {
    height: 100%;
    border-radius: 99px;
    background: var(--d-accent, #6366f1);
    transition: width .4s ease;
}

.attend-pct[b-jpsubmvgn8] { font-size: 12px; font-weight: 700; color: var(--d-accent, #6366f1); font-family: var(--mono, monospace); }

/* ── Class rows ─────────────────────────────────────────────────────────── */
/* Capped + scrollable rather than letting the card grow unbounded — a school with a
   couple dozen classes would otherwise stretch this card far past its row-mates. */
.class-list[b-jpsubmvgn8] { display: flex; flex-direction: column; gap: 8px; max-height: 280px; overflow-y: auto; padding-right: 4px; }

.class-row[b-jpsubmvgn8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--bg, #f8fafc);
    border-radius: 9px;
}

.class-info[b-jpsubmvgn8] { display: flex; flex-direction: column; gap: 2px; }
.class-name[b-jpsubmvgn8] { font-size: 13px; font-weight: 600; color: var(--ink, #0f172a); }
.class-teacher[b-jpsubmvgn8] { font-size: 11.5px; color: var(--muted, #94a3b8); }
.class-pct[b-jpsubmvgn8] { font-family: var(--mono, monospace); font-size: 12px; font-weight: 700; }
.class-pct.indigo[b-jpsubmvgn8] { color: var(--d-accent, #6366f1); }
.class-pct.teal[b-jpsubmvgn8]   { color: var(--teal,     #0d9488); }
.class-pct.amber[b-jpsubmvgn8]  { color: var(--amber,    #d97706); }
.class-pct.coral[b-jpsubmvgn8]  { color: var(--coral,    #ea580c); }

/* ── Events ─────────────────────────────────────────────────────────────── */
.event-list[b-jpsubmvgn8] { display: flex; flex-direction: column; gap: 10px; }

.event-row[b-jpsubmvgn8] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 10px;
    border-left: 3px solid transparent;
    transition: filter .14s;
}
.event-row:hover[b-jpsubmvgn8] { filter: brightness(0.97); }

/* Row tinted by event type, not just the small pill at the end — a glance down the list
   should tell exams from holidays from meetings without reading each label. */
.event-row.indigo[b-jpsubmvgn8] { background: var(--d-accent-soft, rgba(99,102,241,.07));  border-left-color: var(--d-accent, #6366f1); }
.event-row.teal[b-jpsubmvgn8]   { background: var(--teal-soft,  rgba(13,148,136,.07));     border-left-color: var(--teal,  #0d9488); }
.event-row.coral[b-jpsubmvgn8]  { background: var(--coral-soft, rgba(234,88,12,.07));      border-left-color: var(--coral, #ea580c); }
.event-row.amber[b-jpsubmvgn8]  { background: var(--amber-soft, rgba(217,119,6,.07));      border-left-color: var(--amber, #d97706); }

.event-date[b-jpsubmvgn8] {
    width: 42px; height: 48px;
    border-radius: 10px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    flex-shrink: 0;
    background: var(--d-accent-soft, rgba(99,102,241,.1));
    color: var(--d-accent, #6366f1);
}
.event-date.teal[b-jpsubmvgn8]  { background: var(--teal-soft,  rgba(13,148,136,.1));  color: var(--teal,  #0d9488); }
.event-date.coral[b-jpsubmvgn8] { background: var(--coral-soft, rgba(234,88,12,.1));   color: var(--coral, #ea580c); }
.event-date.amber[b-jpsubmvgn8] { background: var(--amber-soft, rgba(217,119,6,.1));   color: var(--amber, #d97706); }

.event-day[b-jpsubmvgn8] { font-size: 16px; font-weight: 700; line-height: 1; }
.event-mon[b-jpsubmvgn8] { font-size: 9px; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; opacity: .8; }

.event-detail[b-jpsubmvgn8] { flex: 1; min-width: 0; }
.event-title[b-jpsubmvgn8] { font-size: 13px; font-weight: 600; color: var(--ink, #0f172a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event-meta[b-jpsubmvgn8]  { font-size: 11.5px; color: var(--muted, #94a3b8); margin-top: 2px; }

.event-type[b-jpsubmvgn8] {
    font-family: var(--mono, monospace);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 5px;
    flex-shrink: 0;
    background: var(--d-accent-soft, rgba(99,102,241,.1));
    color: var(--d-accent, #6366f1);
}
.event-type.teal[b-jpsubmvgn8]  { background: var(--teal-soft,  rgba(13,148,136,.1));  color: var(--teal,  #0d9488); }
.event-type.coral[b-jpsubmvgn8] { background: var(--coral-soft, rgba(234,88,12,.1));   color: var(--coral, #ea580c); }
.event-type.amber[b-jpsubmvgn8] { background: var(--amber-soft, rgba(217,119,6,.1));   color: var(--amber, #d97706); }

/* ── Shared table ───────────────────────────────────────────────────────── */
.dash-table[b-jpsubmvgn8] { width: 100%; border-collapse: collapse; font-size: 13px; }
.dash-table th[b-jpsubmvgn8] {
    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: 0 10px 10px;
    border-bottom: 1px solid var(--line, rgba(11,16,32,.08));
}
.dash-table td[b-jpsubmvgn8] { padding: 10px 10px; border-bottom: 1px solid var(--line, rgba(11,16,32,.05)); vertical-align: middle; }
.dash-table tr:last-child td[b-jpsubmvgn8] { border-bottom: none; }
.dash-table tr:hover td[b-jpsubmvgn8] { background: var(--bg, #f8fafc); }

.row-name[b-jpsubmvgn8] { font-weight: 600; color: var(--ink, #0f172a); }
.row-meta[b-jpsubmvgn8] { font-size: 11px; color: var(--muted, #94a3b8); margin-top: 2px; }

/* ── Tag pill ───────────────────────────────────────────────────────────── */
.tag-pill[b-jpsubmvgn8] {
    display: inline-block;
    font-family: var(--mono, monospace);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    padding: 3px 8px;
    border-radius: 5px;
    background: var(--bg, #f1f5f9);
    color: var(--ink-2, #475569);
}
.tag-pill.teal[b-jpsubmvgn8] { background: var(--teal-soft, rgba(13,148,136,.1)); color: var(--teal, #0d9488); }

/* ── Status chip ────────────────────────────────────────────────────────── */
.status-chip[b-jpsubmvgn8] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 99px;
}
.status-chip.active[b-jpsubmvgn8]  { background: rgba(5,150,105,.1);  color: #059669; }
.status-chip.pending[b-jpsubmvgn8] { background: rgba(217,119,6,.1);  color: #d97706; }
.status-chip.active[b-jpsubmvgn8]::before, .status-chip.pending[b-jpsubmvgn8]::before {
    content: '';
    width: 5px; height: 5px;
    border-radius: 50%;
    background: currentColor;
}

/* ── Risk Detection list ────────────────────────────────────────────────── */
.risk-list[b-jpsubmvgn8] { display: flex; flex-direction: column; gap: 8px; }

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

.risk-info[b-jpsubmvgn8] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.risk-name[b-jpsubmvgn8] { font-size: 13px; font-weight: 600; color: var(--ink, #0f172a); }
.risk-meta[b-jpsubmvgn8] { font-size: 11px; color: var(--muted, #94a3b8); }
.risk-reason[b-jpsubmvgn8] { font-size: 11.5px; color: var(--ink-2, #475569); margin-top: 2px; }

.risk-score[b-jpsubmvgn8] {
    font-family: var(--mono, monospace);
    font-size: 15px;
    font-weight: 700;
    flex-shrink: 0;
}
.risk-score.coral[b-jpsubmvgn8] { color: var(--coral, #ea580c); }

/* ── Quick action grid ──────────────────────────────────────────────────── */
.qa-grid[b-jpsubmvgn8] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.qa-item[b-jpsubmvgn8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 8px;
    border-radius: 12px;
    background: var(--bg, #f8fafc);
    border: 1px solid var(--line, rgba(11,16,32,.06));
    text-decoration: none;
    transition: all .14s;
    cursor: pointer;
}
.qa-item:hover[b-jpsubmvgn8] { background: var(--d-accent-soft, rgba(99,102,241,.08)); border-color: var(--d-accent, #6366f1); transform: translateY(-1px); }

.qa-icon[b-jpsubmvgn8] {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--d-accent-soft, rgba(99,102,241,.1));
    color: var(--d-accent, #6366f1);
}
.qa-icon.teal[b-jpsubmvgn8]  { background: var(--teal-soft,  rgba(13,148,136,.1));  color: var(--teal,  #0d9488); }
.qa-icon.coral[b-jpsubmvgn8] { background: var(--coral-soft, rgba(234,88,12,.1));   color: var(--coral, #ea580c); }
.qa-icon.amber[b-jpsubmvgn8] { background: var(--amber-soft, rgba(217,119,6,.1));   color: var(--amber, #d97706); }

.qa-label[b-jpsubmvgn8] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-2, #475569);
    text-align: center;
    line-height: 1.3;
}

/* Icon plays the same quick pop/wiggle on hover as the dashboard KPI icons (see Dashboard.razor.css) */
.qa-icon[b-jpsubmvgn8]  svg { transition: transform .15s ease; }
.qa-item:hover .qa-icon[b-jpsubmvgn8]  svg {
    animation: qa-icon-pop-b-jpsubmvgn8 .5s ease;
}
@keyframes qa-icon-pop-b-jpsubmvgn8 {
    0%   { transform: scale(1) rotate(0deg); }
    35%  { transform: scale(1.22) rotate(-8deg); }
    65%  { transform: scale(.95) rotate(4deg); }
    100% { transform: scale(1) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
    .qa-item:hover .qa-icon[b-jpsubmvgn8]  svg { animation: none; }
}
/* /Components/Pages/Dashboard/DashSuperAdminContent.razor.rz.scp.css */
/* Shared grid & card base — all content components share these class names
   but scoping differs, so each component needs its own copy of the rules.
   Keep this file in sync with DashSchoolAdminContent.razor.css. */

.sa-grid[b-x5m7aa2efe] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.card--wide[b-x5m7aa2efe] { grid-column: 1 / -1; }

@media (max-width: 900px) { .sa-grid[b-x5m7aa2efe] { grid-template-columns: 1fr; } }

.card[b-x5m7aa2efe] {
    background: var(--paper, #fff);
    border: 1px solid var(--line, rgba(11,16,32,.08));
    border-radius: 16px;
    overflow: hidden;
}

.card-head[b-x5m7aa2efe] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--line, rgba(11,16,32,.06));
}

.card-title[b-x5m7aa2efe] { font-size: 14px; font-weight: 600; color: var(--ink, #0f172a); }
.card-sub[b-x5m7aa2efe]   { font-size: 11.5px; color: var(--muted, #94a3b8); margin-top: 2px; }
.card-body[b-x5m7aa2efe]  { padding: 18px 20px; }

/* Chart */
.chart-wrap[b-x5m7aa2efe] { position: relative; }
.chart-svg[b-x5m7aa2efe]  { width: 100%; height: 180px; display: block; }
.chart-months[b-x5m7aa2efe] {
    display: flex;
    justify-content: space-between;
    padding: 6px 2px 0;
    font-family: var(--mono, monospace);
    font-size: 10px;
    color: var(--muted, #94a3b8);
    letter-spacing: .04em;
}
.chart-legend[b-x5m7aa2efe] { display: flex; gap: 18px; align-items: center; margin-top: 10px; }
.legend-item[b-x5m7aa2efe]  { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2, #475569); }
.legend-dot[b-x5m7aa2efe]   { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.legend-dot.indigo[b-x5m7aa2efe] { background: #6366f1; }
.legend-dot.teal[b-x5m7aa2efe]   { background: #0d9488; }
.legend-dot.coral[b-x5m7aa2efe]  { background: #ea580c; }
.legend-dot.amber[b-x5m7aa2efe]  { background: #d97706; }

/* Table */
.dash-table[b-x5m7aa2efe] { width: 100%; border-collapse: collapse; font-size: 13px; }
.dash-table th[b-x5m7aa2efe] {
    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: 0 10px 10px;
    border-bottom: 1px solid var(--line, rgba(11,16,32,.08));
}
.dash-table td[b-x5m7aa2efe]  { padding: 10px; border-bottom: 1px solid var(--line, rgba(11,16,32,.05)); vertical-align: middle; }
.dash-table tr:last-child td[b-x5m7aa2efe] { border-bottom: none; }
.dash-table tr:hover td[b-x5m7aa2efe] { background: var(--bg, #f8fafc); }
.row-name[b-x5m7aa2efe] { font-weight: 600; color: var(--ink, #0f172a); }
.row-meta[b-x5m7aa2efe] { font-size: 11px; color: var(--muted, #94a3b8); margin-top: 2px; }

/* Pill / chip */
.tag-pill[b-x5m7aa2efe] {
    display: inline-block;
    font-family: var(--mono, monospace);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    padding: 3px 8px;
    border-radius: 5px;
    background: var(--bg, #f1f5f9);
    color: var(--ink-2, #475569);
}
.tag-pill.teal[b-x5m7aa2efe] { background: rgba(13,148,136,.1); color: #0d9488; }

.status-chip[b-x5m7aa2efe] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 99px;
}
.status-chip.active[b-x5m7aa2efe]  { background: rgba(5,150,105,.1);  color: #059669; }
.status-chip.pending[b-x5m7aa2efe] { background: rgba(217,119,6,.1);  color: #d97706; }
.status-chip.active[b-x5m7aa2efe]::before, .status-chip.pending[b-x5m7aa2efe]::before {
    content: '';
    width: 5px; height: 5px;
    border-radius: 50%;
    background: currentColor;
}

/* Quick actions */
.qa-grid[b-x5m7aa2efe] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.qa-item[b-x5m7aa2efe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 8px;
    border-radius: 12px;
    background: var(--bg, #f8fafc);
    border: 1px solid var(--line, rgba(11,16,32,.06));
    text-decoration: none;
    transition: all .14s;
}
.qa-item:hover[b-x5m7aa2efe] { background: var(--d-accent-soft, rgba(99,102,241,.08)); border-color: var(--d-accent, #6366f1); transform: translateY(-1px); }
.qa-icon[b-x5m7aa2efe] {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--d-accent-soft, rgba(99,102,241,.1));
    color: var(--d-accent, #6366f1);
}
.qa-icon.teal[b-x5m7aa2efe]  { background: rgba(13,148,136,.1);  color: #0d9488; }
.qa-icon.coral[b-x5m7aa2efe] { background: rgba(234,88,12,.1);   color: #ea580c; }
.qa-icon.amber[b-x5m7aa2efe] { background: rgba(217,119,6,.1);   color: #d97706; }
.qa-label[b-x5m7aa2efe] { font-size: 11.5px; font-weight: 600; color: var(--ink-2, #475569); text-align: center; line-height: 1.3; }

/* Icon plays the same quick pop/wiggle on hover as the dashboard KPI icons (see Dashboard.razor.css) */
.qa-icon[b-x5m7aa2efe]  svg { transition: transform .15s ease; }
.qa-item:hover .qa-icon[b-x5m7aa2efe]  svg {
    animation: qa-icon-pop-b-x5m7aa2efe .5s ease;
}
@keyframes qa-icon-pop-b-x5m7aa2efe {
    0%   { transform: scale(1) rotate(0deg); }
    35%  { transform: scale(1.22) rotate(-8deg); }
    65%  { transform: scale(.95) rotate(4deg); }
    100% { transform: scale(1) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
    .qa-item:hover .qa-icon[b-x5m7aa2efe]  svg { animation: none; }
}

/* Platform alerts */
.alert-row[b-x5m7aa2efe] { display: flex; flex-wrap: wrap; gap: 10px; }
.alert-item[b-x5m7aa2efe] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    text-decoration: none;
    border: 1px solid var(--line, rgba(11,16,32,.06));
    background: var(--bg, #f8fafc);
    color: var(--ink, #0f172a);
    transition: transform .14s;
}
.alert-item:hover[b-x5m7aa2efe] { transform: translateY(-1px); }
.alert-item.ok[b-x5m7aa2efe]   { color: #059669; }
.alert-item.warn[b-x5m7aa2efe] { background: rgba(217,119,6,.08); border-color: rgba(217,119,6,.25); color: #d97706; }
.alert-value[b-x5m7aa2efe] { font-size: 14px; font-weight: 700; line-height: 1.2; }
.alert-label[b-x5m7aa2efe] { font-size: 11px; color: var(--muted, #94a3b8); }
/* /Components/Pages/Dashboard/Profile.razor.rz.scp.css */
/* ── Profile header ───────────────────────────────────────────────────────── */

.profile-header[b-v6lo5lbeh4] {
    display:     flex;
    align-items: center;
    gap:         20px;
    padding:     24px 28px;
    background:  var(--paper);
    border:      1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 4px;
}

.profile-avatar[b-v6lo5lbeh4] {
    flex-shrink:     0;
    width:           72px;
    height:          72px;
    border-radius:   18px;
    background:      var(--accent);
    color:           #fff;
    font-size:       1.6rem;
    font-weight:     700;
    display:         flex;
    align-items:     center;
    justify-content: center;
    letter-spacing:  .02em;
}

.profile-name[b-v6lo5lbeh4] {
    font-size:   1.15rem;
    font-weight: 700;
    color:       var(--txt);
}

.profile-role[b-v6lo5lbeh4] {
    font-size:  .82rem;
    font-weight:600;
    color:      var(--accent);
    margin:     2px 0 4px;
}

.profile-since[b-v6lo5lbeh4] {
    font-size:  .78rem;
    color:      var(--txt-muted);
}

/* ── Read-only email field ────────────────────────────────────────────────── */

.field-readonly[b-v6lo5lbeh4] {
    display:      flex;
    align-items:  center;
    color:        var(--txt-muted);
    cursor:       default;
    user-select:  text;
}

.field-hint[b-v6lo5lbeh4] {
    display:   block;
    font-size: .75rem;
    color:     var(--txt-muted);
    margin-top:4px;
}

/* ── Show/hide password button ────────────────────────────────────────────── */

.field-eye[b-v6lo5lbeh4] {
    position:      absolute;
    right:         8px;
    top:           50%;
    transform:     translateY(-50%);
    padding:       6px 12px;
    border-radius: 6px;
    font-family:   var(--mono);
    font-size:     .7rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:         var(--txt-muted);
    background:    transparent;
    border:        none;
    cursor:        pointer;
    font-weight:   600;
}

.field-eye:hover[b-v6lo5lbeh4] { color: var(--txt); }
/* /Components/Pages/SchoolAdmin/Accounting/BalanceSheetReport.razor.rz.scp.css */
.mud-table-root th[b-0ru87hte0k],
.mud-table-root td[b-0ru87hte0k] {
    border: 1px solid var(--mud-palette-table-lines);
}
/* /Components/Pages/SchoolAdmin/Accounting/CashBankBook.razor.rz.scp.css */
.mud-table-root th[b-j6puw2xc0p],
.mud-table-root td[b-j6puw2xc0p] {
    border: 1px solid var(--mud-palette-table-lines);
}
/* /Components/Pages/SchoolAdmin/Accounting/CashFlowReport.razor.rz.scp.css */
.mud-table-root th[b-tk57hr8prl],
.mud-table-root td[b-tk57hr8prl] {
    border: 1px solid var(--mud-palette-table-lines);
}
/* /Components/Pages/SchoolAdmin/Accounting/ChangesInEquityReport.razor.rz.scp.css */
.mud-table-root th[b-n01695182t],
.mud-table-root td[b-n01695182t] {
    border: 1px solid var(--mud-palette-table-lines);
}
/* /Components/Pages/SchoolAdmin/Accounting/ExpenseByCostCenterReport.razor.rz.scp.css */
.mud-table-root th[b-3u43h9r9s5],
.mud-table-root td[b-3u43h9r9s5] {
    border: 1px solid var(--mud-palette-table-lines);
}
/* /Components/Pages/SchoolAdmin/Accounting/FinancialRatiosReport.razor.rz.scp.css */
.mud-table-root th[b-6xgnk9yggc],
.mud-table-root td[b-6xgnk9yggc] {
    border: 1px solid var(--mud-palette-table-lines);
}
/* /Components/Pages/SchoolAdmin/Accounting/GeneralLedgerReport.razor.rz.scp.css */
.mud-table-root th[b-86l5j2dskj],
.mud-table-root td[b-86l5j2dskj] {
    border: 1px solid var(--mud-palette-table-lines);
}
/* /Components/Pages/SchoolAdmin/Accounting/IncomeExpenditureStatement.razor.rz.scp.css */
.mud-table-root th[b-1d7qj2kca6],
.mud-table-root td[b-1d7qj2kca6] {
    border: 1px solid var(--mud-palette-table-lines);
}
/* /Components/Pages/SchoolAdmin/Accounting/TrialBalanceReport.razor.rz.scp.css */
.mud-table-root th[b-5divuosqv3],
.mud-table-root td[b-5divuosqv3] {
    border: 1px solid var(--mud-palette-table-lines);
}
/* /Components/Pages/SchoolAdmin/Attendance/AttendanceGrid.razor.rz.scp.css */
.ag-wrap[b-ixf9xqy9t1] { overflow-x: auto; border: 1px solid var(--mud-palette-lines-default, #e0e0e0); border-radius: 4px; }

.ag-table[b-ixf9xqy9t1] { width: 100%; border-collapse: collapse; font-size: 13px; }
.ag-table th[b-ixf9xqy9t1] {
    text-align: left; padding: 8px 10px; font-weight: 600; font-size: 11px; text-transform: uppercase;
    letter-spacing: .03em; opacity: .65; border-bottom: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    white-space: nowrap;
}
.ag-table[b-ixf9xqy9t1]  td { padding: 6px 10px; border-bottom: 1px solid var(--mud-palette-lines-default, #eee); vertical-align: middle; }
.ag-table[b-ixf9xqy9t1]  tr:last-child td { border-bottom: none; }

.ag-empty[b-ixf9xqy9t1] { text-align: center; padding: 24px; opacity: .6; }
/* /Components/Pages/SchoolAdmin/Attendance/AttendancePage.razor.rz.scp.css */
.ap-shell[b-2ufhoojenc] { display: flex; flex-direction: column; gap: 12px; padding: 12px; }

.ap-ctrl[b-2ufhoojenc] { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

.ap-status-pill[b-2ufhoojenc] {
    font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 12px;
    text-transform: uppercase; letter-spacing: .03em;
}
.ap-status-none[b-2ufhoojenc]  { background: #e5e7eb; color: #4b5563; }
.ap-status-draft[b-2ufhoojenc] { background: #fef3c7; color: #92400e; }
.ap-status-final[b-2ufhoojenc] { background: #dcfce7; color: #166534; }

.ap-empty[b-2ufhoojenc] { padding: 48px; text-align: center; opacity: .6; }

.ap-body[b-2ufhoojenc] { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.ap-grid-col[b-2ufhoojenc] { flex: 1; min-width: 0; }
.ap-summary-col[b-2ufhoojenc] { flex: 0 0 260px; }

@media (max-width: 900px) {
    .ap-summary-col[b-2ufhoojenc] { flex: 1 1 100%; order: -1; }
}
/* /Components/Pages/SchoolAdmin/Attendance/AttendanceStudentRow.razor.rz.scp.css */
.ar-roll[b-8vql5iprww] { width: 56px; opacity: .7; white-space: nowrap; }
.ar-name[b-8vql5iprww] { font-weight: 500; white-space: nowrap; }
.ar-status[b-8vql5iprww] { min-width: 260px; }
.ar-late[b-8vql5iprww] { width: 100px; }
.ar-remarks[b-8vql5iprww] { min-width: 160px; }
.ar-reason[b-8vql5iprww] { min-width: 220px; }

.ar-chips[b-8vql5iprww] { display: flex; flex-wrap: wrap; gap: 4px; }
.ar-chip[b-8vql5iprww] {
    font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 12px; border: 1px solid #d1d5db;
    background: transparent; color: inherit; opacity: .55; cursor: pointer; white-space: nowrap;
}
.ar-chip:hover[b-8vql5iprww] { opacity: .85; }
.ar-chip.active[b-8vql5iprww] { opacity: 1; color: #fff; border-color: transparent; }

.ar-badge[b-8vql5iprww] {
    font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 12px; color: #fff; display: inline-block;
}

.st-present.ar-badge[b-8vql5iprww] { background: #16a34a; }
.ar-chip.active.st-absent[b-8vql5iprww]   { background: #dc2626; }
.ar-chip.active.st-leave[b-8vql5iprww]    { background: #d97706; }
.ar-chip.active.st-half[b-8vql5iprww]     { background: #ca8a04; }
.ar-chip.active.st-late[b-8vql5iprww]     { background: #7c3aed; }
.ar-chip.active.st-medical[b-8vql5iprww]  { background: #0d9488; }
.ar-chip.active.st-official[b-8vql5iprww] { background: #475569; }
.st-absent.ar-badge[b-8vql5iprww]   { background: #dc2626; }
.st-leave.ar-badge[b-8vql5iprww]    { background: #d97706; }
.st-half.ar-badge[b-8vql5iprww]     { background: #ca8a04; }
.st-late.ar-badge[b-8vql5iprww]     { background: #7c3aed; }
.st-medical.ar-badge[b-8vql5iprww]  { background: #0d9488; }
.st-official.ar-badge[b-8vql5iprww] { background: #475569; }

.ar-reason-row[b-8vql5iprww] { display: flex; align-items: center; gap: 4px; }
/* /Components/Pages/SchoolAdmin/Attendance/AttendanceSummaryCard.razor.rz.scp.css */
[b-ykkmbmc4sb] .as-card { padding: 14px; }

.as-title[b-ykkmbmc4sb] { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .6; margin-bottom: 10px; }

.as-grid[b-ykkmbmc4sb] { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.as-item[b-ykkmbmc4sb] {
    display: flex; flex-direction: column; padding: 8px 10px; border-radius: 4px; border-left: 3px solid transparent;
    background: color-mix(in srgb, currentColor 8%, transparent);
}
.as-count[b-ykkmbmc4sb] { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.as-label[b-ykkmbmc4sb] { font-size: 11px; opacity: .75; }

.as-item.st-present[b-ykkmbmc4sb]  { border-left-color: #16a34a; color: #16a34a; }
.as-item.st-absent[b-ykkmbmc4sb]   { border-left-color: #dc2626; color: #dc2626; }
.as-item.st-leave[b-ykkmbmc4sb]    { border-left-color: #d97706; color: #d97706; }
.as-item.st-half[b-ykkmbmc4sb]     { border-left-color: #ca8a04; color: #ca8a04; }
.as-item.st-late[b-ykkmbmc4sb]     { border-left-color: #7c3aed; color: #7c3aed; }
.as-item.st-medical[b-ykkmbmc4sb]  { border-left-color: #0d9488; color: #0d9488; }
.as-item.st-official[b-ykkmbmc4sb] { border-left-color: #475569; color: #475569; }

.as-total[b-ykkmbmc4sb] { margin-top: 10px; font-size: 12px; opacity: .6; text-align: right; }
/* /Components/Pages/SchoolAdmin/Eca/AcademicCertificates.razor.rz.scp.css */
[b-lbds9rjsns] .acp-shell {
    padding: 16px;
    max-width: 1200px;
    margin: 0 auto;
}

[b-lbds9rjsns] .acp-toolbar {
    margin-bottom: 24px;
}

[b-lbds9rjsns] .acp-pages {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}
/* /Components/Pages/SchoolAdmin/Eca/AchievementCertificatePrinter.razor.rz.scp.css */
[b-toxjf4qzw5] .acp-shell {
    padding: 16px;
    max-width: 1200px;
    margin: 0 auto;
}

[b-toxjf4qzw5] .acp-toolbar {
    margin-bottom: 24px;
}

[b-toxjf4qzw5] .acp-pages {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}
/* /Components/Pages/SchoolAdmin/Eca/AttendanceCertificates.razor.rz.scp.css */
[b-s5yzd30i19] .acp-shell {
    padding: 16px;
    max-width: 1200px;
    margin: 0 auto;
}

[b-s5yzd30i19] .acp-toolbar {
    margin-bottom: 24px;
}

[b-s5yzd30i19] .acp-pages {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}
/* /Components/Pages/SchoolAdmin/Eca/PrizeDistributionCertificates.razor.rz.scp.css */
[b-mqyh60gq4c] .pdc-shell {
    padding: 16px;
    max-width: 1200px;
    margin: 0 auto;
}

[b-mqyh60gq4c] .pdc-toolbar {
    margin-bottom: 24px;
}

[b-mqyh60gq4c] .pdc-pages {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}
/* /Components/Pages/SchoolAdmin/Finance/PayableAging.razor.rz.scp.css */
.mud-table-root th[b-51vypqhbky],
.mud-table-root td[b-51vypqhbky] {
    border: 1px solid var(--mud-palette-table-lines);
}
/* /Components/Pages/SchoolAdmin/Finance/ReceivableAging.razor.rz.scp.css */
.mud-table-root th[b-v0pu92inm5],
.mud-table-root td[b-v0pu92inm5] {
    border: 1px solid var(--mud-palette-table-lines);
}
/* /Components/Pages/SchoolAdmin/Reports/ClassSubjectComparison.razor.rz.scp.css */
[b-sdxn8y7vua] .csc-shell {
    padding: 8px 14px 24px;
}

[b-sdxn8y7vua] .csc-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 10px;
    background: var(--mud-palette-background-gray);
    border-radius: 8px;
    margin-top: 10px;
}

[b-sdxn8y7vua] .csc-sel {
    width: 220px;
    flex-shrink: 0;
}

[b-sdxn8y7vua] .csc-sel-wide {
    width: 280px;
    flex-shrink: 0;
}

[b-sdxn8y7vua] .csc-level-picks {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

[b-sdxn8y7vua] .csc-level-label {
    font-size: 12.5px;
    color: #6b7280;
    margin-right: 2px;
}

[b-sdxn8y7vua] .csc-summary-card {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 16px;
}

[b-sdxn8y7vua] .csc-overall-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin-top: 6px;
}

[b-sdxn8y7vua] .csc-overall-stat {
    text-align: center;
    padding: 8px 4px;
    border-radius: 6px;
    background: var(--mud-palette-background-gray);
}

[b-sdxn8y7vua] .csc-overall-val {
    font-size: 1.4rem;
    font-weight: 700;
    color: #111827;
}

[b-sdxn8y7vua] .csc-overall-lbl {
    font-size: 11px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-top: 2px;
}

[b-sdxn8y7vua] .csc-overall-notes {
    margin-top: 10px;
    font-size: 12.5px;
    color: #374151;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

[b-sdxn8y7vua] .csc-section-hdr {
    font-size: 14px;
}

/* Summary/level tables have only a handful of columns — override the per-subject table's
   min-width:2100px (shared via .csc-tbl) which would otherwise force needless horizontal scroll. */
[b-sdxn8y7vua] .csc-summary-tbl {
    min-width: auto;
    white-space: normal;
}

[b-sdxn8y7vua] .csc-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 12px;
}

[b-sdxn8y7vua] .csc-chart-card {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 12px;
}

[b-sdxn8y7vua] .csc-chart-title {
    font-size: 13px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 4px;
}

[b-sdxn8y7vua] .csc-chart {
    height: 220px;
}

[b-sdxn8y7vua] .csc-tbl-wrap {
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

[b-sdxn8y7vua] .csc-tbl {
    width: 100%;
    min-width: 2100px;
    border-collapse: collapse;
    font-size: 12.5px;
}

[b-sdxn8y7vua] .csc-tbl th, [b-sdxn8y7vua] .csc-tbl td {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding: 6px 8px;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

[b-sdxn8y7vua] .csc-tbl th {
    background: var(--mud-palette-background-gray);
    font-weight: 700;
    position: sticky;
    top: 0;
}

[b-sdxn8y7vua] .csc-c {
    text-align: center;
}

[b-sdxn8y7vua] .csc-strong {
    font-weight: 700;
}

[b-sdxn8y7vua] .csc-up    { color: #059669; font-weight: 600; }
[b-sdxn8y7vua] .csc-down  { color: #dc2626; font-weight: 600; }
[b-sdxn8y7vua] .csc-flat  { color: #6b7280; }
[b-sdxn8y7vua] .csc-muted { color: #9ca3af; }

[b-sdxn8y7vua] .csc-trend {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

[b-sdxn8y7vua] .csc-status {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

[b-sdxn8y7vua] .csc-status-excellent { background: #ecfdf5; color: #047857; }
[b-sdxn8y7vua] .csc-status-good      { background: #eff6ff; color: #1d4ed8; }
[b-sdxn8y7vua] .csc-status-average   { background: #fffbeb; color: #b45309; }
[b-sdxn8y7vua] .csc-status-poor      { background: #fef2f2; color: #b91c1c; }

[b-sdxn8y7vua] .csc-dist {
    display: flex;
    height: 14px;
    width: 130px;
    border-radius: 4px;
    overflow: hidden;
    background: #f3f4f6;
}

[b-sdxn8y7vua] .csc-dist-seg { height: 100%; }
[b-sdxn8y7vua] .csc-dist-seg.b1 { background: #10b981; }
[b-sdxn8y7vua] .csc-dist-seg.b2 { background: #22c55e; }
[b-sdxn8y7vua] .csc-dist-seg.b3 { background: #84cc16; }
[b-sdxn8y7vua] .csc-dist-seg.b4 { background: #f59e0b; }
[b-sdxn8y7vua] .csc-dist-seg.b5 { background: #f97316; }
[b-sdxn8y7vua] .csc-dist-seg.b6 { background: #ef4444; }

@media print {
    @page {
        margin: 0.5in;
    }

    [b-sdxn8y7vua] .csc-no-print { display: none !important; }
    [b-sdxn8y7vua] .csc-shell { padding: 0; }
    [b-sdxn8y7vua] .csc-tbl-wrap { overflow: visible; border: none; }
}
/* /Components/Pages/SchoolAdmin/Reports/CorrelationAnalysis.razor.rz.scp.css */
[b-cq0ylwnj0e] .corr-shell {
    padding: 8px 14px 24px;
}

[b-cq0ylwnj0e] .corr-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 10px;
    background: var(--mud-palette-background-gray);
    border-radius: 8px;
}

[b-cq0ylwnj0e] .corr-sel {
    width: 220px;
    flex-shrink: 0;
}

[b-cq0ylwnj0e] .corr-sel-wide {
    width: 280px;
    flex-shrink: 0;
}

[b-cq0ylwnj0e] .corr-chart-card {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 12px;
}

[b-cq0ylwnj0e] .corr-chart-title {
    font-size: 13px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 4px;
}

[b-cq0ylwnj0e] .corr-chart {
    height: 220px;
}

[b-cq0ylwnj0e] .corr-tbl-wrap {
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

[b-cq0ylwnj0e] .corr-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

[b-cq0ylwnj0e] .corr-tbl th, [b-cq0ylwnj0e] .corr-tbl td {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding: 6px 8px;
    text-align: left;
    white-space: nowrap;
}

[b-cq0ylwnj0e] .corr-tbl th {
    background: var(--mud-palette-background-gray);
    font-weight: 700;
}

[b-cq0ylwnj0e] .corr-matrix {
    min-width: 600px;
}

[b-cq0ylwnj0e] .corr-matrix th:first-child {
    background: var(--mud-palette-background-gray);
    text-align: left;
}

[b-cq0ylwnj0e] .corr-c {
    text-align: center;
}

[b-cq0ylwnj0e] .corr-strong {
    font-weight: 700;
}

[b-cq0ylwnj0e] .corr-pairs {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 420px;
}

[b-cq0ylwnj0e] .corr-pair-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--mud-palette-background-gray);
    font-size: 13px;
}

[b-cq0ylwnj0e] .corr-pair-val {
    font-weight: 700;
}

[b-cq0ylwnj0e] .corr-pos { color: #059669; }
[b-cq0ylwnj0e] .corr-neg { color: #dc2626; }
/* /Components/Pages/SchoolAdmin/Reports/EntranceCard.razor.rz.scp.css */
[b-x8utpnzhg3] .ec-shell {
    display: flex;
    flex-direction: column;
    padding: 8px 14px 0;
}

[b-x8utpnzhg3] .ec-sticky-hdr {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--mud-palette-background, #f0f2f7);
    padding-bottom: 4px;
}

[b-x8utpnzhg3] .ec-ctrl {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding: 7px 10px;
    background: var(--mud-palette-surface, #fff);
    border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    margin-bottom: 6px;
}

[b-x8utpnzhg3] .ec-sel      { width: 150px; flex-shrink: 0; min-width: 0; }
[b-x8utpnzhg3] .ec-sel-wide { width: 190px; flex-shrink: 0; min-width: 0; }

[b-x8utpnzhg3] .ec-body {
    flex: 1;
    overflow-x: auto;
    padding: 4px 0 16px;
}

/* A4 sheets (exact paper size, scaled with the zoom), side by side when they fit */
[b-x8utpnzhg3] .ec-sheets {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    padding: 16px;
    justify-content: center;
    align-items: flex-start;
}

[b-x8utpnzhg3] .ec-sheet {
    flex-shrink: 0;
    box-sizing: border-box;
    background: #fff;
    color: #1a1a1a;
    color-scheme: light;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .22);
    overflow: hidden;
}

/* Card grid inside a sheet — columns, gaps and size come inline from the sheet geometry */
[b-x8utpnzhg3] .ec-cards-grid {
    display: grid;
    justify-content: center;
    align-content: start;
}

[b-x8utpnzhg3] .ec-card-wrap {
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 4px;
}

/* These class names are used by admitCard.js for print queries */
[b-x8utpnzhg3] .acp-page {
    position: relative;
    background: white;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    color: #1a1a1a;
    /* paper stays light in the dark theme: dark text, light native controls */
    color-scheme: light;
}

[b-x8utpnzhg3] .acp-page-html {
    position: relative;
    background: white;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

[b-x8utpnzhg3] .acp-elem {
    position: absolute;
    box-sizing: border-box;
}

[b-x8utpnzhg3] .acp-page-border {
    position: absolute;
    pointer-events: none;
    z-index: 9000;
    box-sizing: border-box;
}

[b-x8utpnzhg3] .acp-page-border-img {
    position: absolute;
    pointer-events: none;
    z-index: 9000;
    object-fit: fill;
}

[b-x8utpnzhg3] .acp-img-ph {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    background: #f0f0f0;
    color: #aaa;
    font-size: 11px;
}

[b-x8utpnzhg3] .ec-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--mud-palette-text-secondary);
}
/* /Components/Pages/SchoolAdmin/Reports/ExamComparisons.razor.rz.scp.css */

[b-i31u2x1dhq] .ledger-shell {
    display: flex;
    flex-direction: column;
    padding: 8px 14px 0;
}

/* ── Sticky controls header ─────────────────────────────────────────────── */
[b-i31u2x1dhq] .ledger-sticky-hdr {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--mud-palette-background, #f0f2f7);
    padding-bottom: 4px;
}

/* ── Controls strip ─────────────────────────────────────────────────────── */
[b-i31u2x1dhq] .ledger-ctrl {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding: 7px 10px;
    background: var(--mud-palette-background-gray);
    border-radius: 8px;
    margin-bottom: 8px;
}

    [b-i31u2x1dhq] .ledger-ctrl .lf-sel {
        width: 140px;
        flex-shrink: 0;
    }

    [b-i31u2x1dhq] .ledger-ctrl .lf-wide {
        width: 172px;
        flex-shrink: 0;
    }

/* ── Table body ─────────────────────────────────────────────────────────── */
[b-i31u2x1dhq] .ledger-body {
    padding-bottom: 10px;
    overflow-x: auto;
}

/* Print area expands to the table's natural width so header/footer align */
[b-i31u2x1dhq] #exam-comparisons-print-area {
    width: max-content;
    min-width: 100%;
}

/* ── Dropdown panel ─────────────────────────────────────────────────────── */
[b-i31u2x1dhq] .dp-wrap {
    position: relative;
    display: inline-flex;
}

[b-i31u2x1dhq] .dp-backdrop {
    position: fixed;
    inset: 0;
    z-index: 900;
}

[b-i31u2x1dhq] .dp-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 910;
    background: var(--mud-palette-surface);
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0,0,0,.18);
    padding: 10px 14px 12px;
    min-width: 210px;
    max-height: 400px;
    overflow-y: auto;
    font-size: 13px;
}

    [b-i31u2x1dhq] .dp-panel.dp-wide {
        min-width: 240px;
    }

[b-i31u2x1dhq] .dp-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--mud-palette-text-secondary);
    margin: 8px 0 3px;
}

    [b-i31u2x1dhq] .dp-label:first-child {
        margin-top: 0;
    }

[b-i31u2x1dhq] .dp-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    cursor: pointer;
    border-radius: 4px;
    user-select: none;
}

    [b-i31u2x1dhq] .dp-item:hover {
        background: var(--mud-palette-background-gray);
    }

    [b-i31u2x1dhq] .dp-item input[type=checkbox] {
        width: 15px;
        height: 15px;
        accent-color: #6366f1;
        cursor: pointer;
    }

[b-i31u2x1dhq] .dp-sort-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    border-radius: 4px;
    cursor: pointer;
}

    [b-i31u2x1dhq] .dp-sort-item:hover {
        background: var(--mud-palette-background-gray);
    }

    [b-i31u2x1dhq] .dp-sort-item.active {
        color: #6366f1;
        font-weight: 600;
    }

/* ── Filter badge on button ──────────────────────────────────────────────── */
 [b-i31u2x1dhq] .filter-btn-wrap {
    position: relative;
    display: inline-flex;
}

[b-i31u2x1dhq] .filter-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: #6366f1;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    min-width: 14px;
    height: 14px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    padding: 0 2px;
    line-height: 1;
}

/* ── Filter modal ────────────────────────────────────────────────────────── */
[b-i31u2x1dhq] .flt-overlay {
    position: fixed;
    inset: 0;
    z-index: 920;
    background: rgba(0,0,0,.35);
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-i31u2x1dhq] .flt-modal {
    background: var(--mud-palette-surface);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,.22);
    width: 430px;
    max-width: 95vw;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[b-i31u2x1dhq] .flt-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px 11px;
    border-bottom: 1px solid #e5e7eb;
    font-weight: 700;
    font-size: 14px;
}

[b-i31u2x1dhq] .flt-count {
    display: inline-block;
    background: #6366f1;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
}

[b-i31u2x1dhq] .flt-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
}

[b-i31u2x1dhq] .flt-footer {
    padding: 9px 16px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

[b-i31u2x1dhq] .flt-radios {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    padding: 3px 0 8px;
}

[b-i31u2x1dhq] .flt-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    font-size: 13px;
}

[b-i31u2x1dhq] .flt-num {
    width: 56px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    padding: 2px 5px;
    font-size: 12px;
    text-align: center;
}

[b-i31u2x1dhq] .flt-num:disabled {
    opacity: .45;
}

[b-i31u2x1dhq] .rc-header {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 8px;
    border-bottom: 2px solid #555;
    width: 100%;
    box-sizing: border-box;
}

[b-i31u2x1dhq] .rc-logo {
    width: 72px;
    height: 72px;
    object-fit: contain;
    flex-shrink: 0;
}

[b-i31u2x1dhq] .rc-logo-placeholder {
    width: 72px;
    height: 72px;
    border: 1px solid #ccc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #9ca3af;
    text-align: center;
    flex-shrink: 0;
}

[b-i31u2x1dhq] .rc-school-info {
    flex: 1;
    text-align: center;
}

[b-i31u2x1dhq] .rc-school-name {
    font-size: 18px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .5px;
    line-height: 1.2;
}

[b-i31u2x1dhq] .rc-school-sub {
    font-size: 11px;
    color: #374151;
    margin-top: 2px;
}

[b-i31u2x1dhq] .rc-title-box {
    display: inline-block;
    border: 2px solid #333;
    padding: 5px 30px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
    margin: 6px auto 0;
}

[b-i31u2x1dhq] .rc-class-info {
    font-size: 12px;
    color: #374151;
    margin-top: 5px;
}

[b-i31u2x1dhq] .rc-footer {
    display: none;
    justify-content: space-between;
    align-items: flex-end;
    padding: 10px 16px 8px;
    border-top: 1px solid #999;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    width: 100%;
    box-sizing: border-box;
}

[b-i31u2x1dhq] .rc-footer-sig {
    text-align: center;
    min-width: 140px;
}

[b-i31u2x1dhq] .rc-footer-sig-line {
    border-top: 1px solid #555;
    margin-top: 2px;
    padding-top: 3px;
    font-size: 11px;
    font-weight: 600;
}

[b-i31u2x1dhq] .rc-footer-date {
    font-size: 11px;
    color: #374151;
    font-weight: 400;
    padding-bottom: 6px;
}
/* ── Table ──────────────────────────────────────────────────────────────── */
[b-i31u2x1dhq] .ledger-table {
    border-collapse: collapse;
    font-size: 12px;
    white-space: nowrap;
}

    [b-i31u2x1dhq] .ledger-table th, [b-i31u2x1dhq] .ledger-table td {
        border: 1px solid #d0d0d0;
        padding: 3px 6px;
        text-align: center;
        vertical-align: middle;
    }

    [b-i31u2x1dhq] .ledger-table thead th {
        background: color-mix(in srgb, #6366f1 16%, var(--mud-palette-surface));
        font-weight: 600;
    }

    [b-i31u2x1dhq] .ledger-table thead tr:first-child th {
        background: #6366f1;
        color: #fff;
    }

    /* Exam sub-header row (row 2) — distinct shade from the subject row above it */
    [b-i31u2x1dhq] .ledger-table thead th.exam-group-hdr {
        background: #4338ca;
        color: #fff;
        font-size: 11px;
        font-weight: 600;
    }

    [b-i31u2x1dhq] .ledger-table thead tr.tr-type th {
        background: #7c3aed;
        color: #fff;
        font-size: 11px;
    }

    [b-i31u2x1dhq] .ledger-table thead tr.tr-comp th {
        background: color-mix(in srgb, #6366f1 16%, var(--mud-palette-surface));
        font-weight: 600;
    }

    [b-i31u2x1dhq] .ledger-table tbody tr:nth-child(even) {
        background: var(--mud-palette-background-gray);
    }

    [b-i31u2x1dhq] .ledger-table td.td-left {
        text-align: left;
    }

    [b-i31u2x1dhq] .ledger-table .td-absent {
        color: #b00;
        font-style: italic;
    }

    [b-i31u2x1dhq] .ledger-table .td-grade {
        font-weight: 600;
        color: #4f46e5;
    }

    [b-i31u2x1dhq] .ledger-table .td-summary {
        background: color-mix(in srgb, #0ea5e9 10%, var(--mud-palette-surface));
        font-style: italic;
    }

    [b-i31u2x1dhq] .ledger-table .td-summary-head {
        background: color-mix(in srgb, #3b82f6 30%, var(--mud-palette-surface));
        font-weight: 600;
        font-style: normal;
    }

    [b-i31u2x1dhq] .ledger-table tr.tr-failed td {
        background: color-mix(in srgb, #f43f5e 12%, var(--mud-palette-surface)) !important;
    }

    [b-i31u2x1dhq] .ledger-table tr.tr-failed .td-grade {
        color: #dc2626;
    }
    /* Cross-pattern must survive the failed-row background override */
    [b-i31u2x1dhq] .ledger-table tr.tr-failed td.td-na {
        background: linear-gradient(to bottom right, transparent calc(50% - 1px), #d0d0d0 calc(50% - 1px), #d0d0d0 calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(to bottom left, transparent calc(50% - 1px), #d0d0d0 calc(50% - 1px), #d0d0d0 calc(50% + 1px), transparent calc(50% + 1px)), #f5f5f5 !important;
    }

[b-i31u2x1dhq] .fail-mark {
    color: #dc2626;
    font-weight: 700;
    font-size: 9px;
    margin-left: 1px;
}

[b-i31u2x1dhq] .badge-fail {
    display: inline-block;
    background: #dc2626;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
    margin-left: 4px;
    vertical-align: middle;
}

[b-i31u2x1dhq] .td-name-f {
    font-weight: 700;
    font-style: italic;
}

[b-i31u2x1dhq] .td-na {
    background: linear-gradient(to bottom right, transparent calc(50% - 1px), #d0d0d0 calc(50% - 1px), #d0d0d0 calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(to bottom left, transparent calc(50% - 1px), #d0d0d0 calc(50% - 1px), #d0d0d0 calc(50% + 1px), transparent calc(50% + 1px)), #f5f5f5 !important;
    color: transparent !important;
    font-size: 0 !important;
}
/* Subject-total column */
[b-i31u2x1dhq] .td-sub-total {
    font-weight: 600;
}
/* Failed component cell */
[b-i31u2x1dhq] .td-comp-fail {
    background: color-mix(in srgb, #ef4444 40%, var(--mud-palette-surface)) !important;
}
/* Bold / underline emphasis */
[b-i31u2x1dhq] .td-bold {
    font-weight: 700;
    text-decoration: underline;
}

[b-i31u2x1dhq] .th-bold {
    font-weight: 800;
    text-decoration: underline;
}

/* ── Component header cell — normal and rotated ─────────────────────────── */
[b-i31u2x1dhq] .ledger-table thead tr.tr-comp th .rh-fm {
    font-size: 10px;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
}

/* ── Rotated column headers ─────────────────────────────────────────────── */
[b-i31u2x1dhq] .ledger-table.rotated-hdr thead tr.tr-comp th {
    vertical-align: bottom;
    text-align: left;
    padding: 4px 3px;
    height: 90px;
}

    [b-i31u2x1dhq] .ledger-table.rotated-hdr thead tr.tr-comp th .rh-inner {
        display: inline-block;
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        font-size: 11px;
        line-height: 1.35;
        white-space: nowrap;
    }

    [b-i31u2x1dhq] .ledger-table.rotated-hdr thead tr.tr-comp th .rh-fm {
        font-size: 10px;
        color: #9ca3af;
    }

/* ── Rotated metadata header cells ──────────────────────────────────────── */
[b-i31u2x1dhq] .ledger-table.rotated-hdr thead th.th-rot {
    vertical-align: bottom;
    text-align: left;
    padding: 4px 3px;
    height: 90px;
}

    [b-i31u2x1dhq] .ledger-table.rotated-hdr thead th.th-rot .rh-inner {
        display: inline-block;
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        font-size: 11px;
        line-height: 1.35;
        white-space: nowrap;
    }

/* ── Multi-format mark cell display ─────────────────────────────────────── */
[b-i31u2x1dhq] .cell-pct {
    font-size: 10px;
    color: #9ca3af;
    margin-left: 2px;
}

[b-i31u2x1dhq] .cell-gp {
    font-size: 10px;
    color: #4f46e5;
    font-weight: 600;
    display: block;
    line-height: 1.4;
}

[b-i31u2x1dhq] .cell-cmp-up,
[b-i31u2x1dhq] .cell-cmp-down {
    font-size: 10px;
    font-weight: 600;
    display: block;
    line-height: 1.4;
}
[b-i31u2x1dhq] .cell-cmp-up   { color: #16a34a; }
[b-i31u2x1dhq] .cell-cmp-down { color: #dc2626; }

/* ── Print ──────────────────────────────────────────────────────────────── */
@media print {
    /* Paper is always light — even when printed from the dark theme. */
    [b-i31u2x1dhq] .ledger-table, [b-i31u2x1dhq] .ledger-table th, [b-i31u2x1dhq] .ledger-table td { color: #000 !important; }
    [b-i31u2x1dhq] .ledger-table thead th { background: #ede9fd !important; }
    [b-i31u2x1dhq] .ledger-table .td-summary { background: #f0f9ff !important; }
    [b-i31u2x1dhq] .ledger-table .td-summary-head { background: #bfdbfe !important; }
    [b-i31u2x1dhq] .ledger-table tbody tr:nth-child(even) { background: #f8f7ff; }
    @page {
        margin: 0.5in;
        /* Deliberately no "size" at all — Chrome hides the print dialog's Layout/orientation
           control entirely as soon as @page specifies ANY explicit size, even a plain "A4" with no
           orientation keyword. Comparison tables are many-columns-wide and usually want landscape,
           but leaving size unset keeps the toggle available; most browsers remember the last
           orientation you pick for this print target and re-apply it next time. */
    }

    [b-i31u2x1dhq] .ledger-sticky-hdr {
        display: none;
    }

    [b-i31u2x1dhq] .ledger-body {
        overflow: visible;
    }

    [b-i31u2x1dhq] #exam-comparisons-print-area {
        width: auto;
        min-width: unset;
    }

    [b-i31u2x1dhq] .rc-header {
        display: flex;
    }

    [b-i31u2x1dhq] .rc-footer {
        display: flex;
    }

    [b-i31u2x1dhq] .ledger-table {
        font-size: 10px;
    }
        /* Strip all even-row tints — only failed rows and failed cells keep a tint */
        [b-i31u2x1dhq] .ledger-table tbody tr td {
            background: none !important;
        }

        [b-i31u2x1dhq] .ledger-table tbody tr.tr-failed td {
            background: #ffe8e8 !important;
        }

        [b-i31u2x1dhq] .ledger-table tbody tr td.td-comp-fail {
            background: #fca5a5 !important;
            print-color-adjust: exact;
            -webkit-print-color-adjust: exact;
        }

        [b-i31u2x1dhq] .ledger-table tbody tr.tr-failed td.td-na {
            background: linear-gradient(to bottom right, transparent calc(50% - 1px), #bbb calc(50% - 1px), #bbb calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(to bottom left, transparent calc(50% - 1px), #bbb calc(50% - 1px), #bbb calc(50% + 1px), transparent calc(50% + 1px)), #f0f0f0 !important;
        }
        /* Always rotate metadata and component headers in print */
        [b-i31u2x1dhq] .ledger-table thead th.th-rot {
            vertical-align: bottom;
            text-align: left;
            padding: 4px 3px;
            height: 70px;
        }

            [b-i31u2x1dhq] .ledger-table thead th.th-rot .rh-inner {
                display: inline-block;
                writing-mode: vertical-rl;
                transform: rotate(180deg);
                font-size: 9px;
                line-height: 1.35;
                white-space: nowrap;
            }

        [b-i31u2x1dhq] .ledger-table thead tr.tr-comp th {
            vertical-align: bottom;
            text-align: left;
            padding: 4px 3px;
            height: 70px;
        }

            [b-i31u2x1dhq] .ledger-table thead tr.tr-comp th .rh-inner {
                display: inline-block;
                writing-mode: vertical-rl;
                transform: rotate(180deg);
                font-size: 9px;
                line-height: 1.35;
                white-space: nowrap;
            }

            [b-i31u2x1dhq] .ledger-table thead tr.tr-comp th .rh-fm {
                font-size: 9px;
                color: var(--mud-palette-text-secondary);
            }
}
/* /Components/Pages/SchoolAdmin/Reports/ExamLedger.razor.rz.scp.css */

[b-1rooq06z9p] .ledger-shell {
    display: flex;
    flex-direction: column;
    padding: 8px 14px 0;
}

/* ── Sticky controls header ─────────────────────────────────────────────── */
[b-1rooq06z9p] .ledger-sticky-hdr {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--mud-palette-background, #f0f2f7);
    padding-bottom: 4px;
}

/* ── Controls strip ─────────────────────────────────────────────────────── */
[b-1rooq06z9p] .ledger-ctrl {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding: 7px 10px;
    background: var(--mud-palette-background-gray);
    border-radius: 8px;
    margin-bottom: 8px;
}

    [b-1rooq06z9p] .ledger-ctrl .lf-sel {
        width: 140px;
        flex-shrink: 0;
    }

    [b-1rooq06z9p] .ledger-ctrl .lf-wide {
        width: 172px;
        flex-shrink: 0;
    }

/* ── Table body ─────────────────────────────────────────────────────────── */
[b-1rooq06z9p] .ledger-body {
    padding-bottom: 10px;
    overflow-x: auto;
}

/* Print area expands to the table's natural width so header/footer align */
[b-1rooq06z9p] #ledger-print-area {
    width: max-content;
    min-width: 100%;
}

/* ── Dropdown panel ─────────────────────────────────────────────────────── */
[b-1rooq06z9p] .dp-wrap {
    position: relative;
    display: inline-flex;
}

[b-1rooq06z9p] .dp-backdrop {
    position: fixed;
    inset: 0;
    z-index: 900;
}

[b-1rooq06z9p] .dp-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 910;
    background: var(--mud-palette-surface);
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0,0,0,.18);
    padding: 10px 14px 12px;
    min-width: 210px;
    max-height: 400px;
    overflow-y: auto;
    font-size: 13px;
}

    [b-1rooq06z9p] .dp-panel.dp-wide {
        min-width: 240px;
    }

[b-1rooq06z9p] .dp-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--mud-palette-text-secondary);
    margin: 8px 0 3px;
}

    [b-1rooq06z9p] .dp-label:first-child {
        margin-top: 0;
    }

[b-1rooq06z9p] .dp-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    cursor: pointer;
    border-radius: 4px;
    user-select: none;
}

    [b-1rooq06z9p] .dp-item:hover {
        background: var(--mud-palette-background-gray);
    }

    [b-1rooq06z9p] .dp-item input[type=checkbox] {
        width: 15px;
        height: 15px;
        accent-color: #6366f1;
        cursor: pointer;
    }

[b-1rooq06z9p] .dp-sort-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    border-radius: 4px;
    cursor: pointer;
}

    [b-1rooq06z9p] .dp-sort-item:hover {
        background: var(--mud-palette-background-gray);
    }

    [b-1rooq06z9p] .dp-sort-item.active {
        color: #6366f1;
        font-weight: 600;
    }

/* ── Filter badge on button ──────────────────────────────────────────────── */
 [b-1rooq06z9p] .filter-btn-wrap {
    position: relative;
    display: inline-flex;
}

[b-1rooq06z9p] .filter-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: #6366f1;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    min-width: 14px;
    height: 14px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    padding: 0 2px;
    line-height: 1;
}

/* ── Filter modal ────────────────────────────────────────────────────────── */
[b-1rooq06z9p] .flt-overlay {
    position: fixed;
    inset: 0;
    z-index: 920;
    background: rgba(0,0,0,.35);
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-1rooq06z9p] .flt-modal {
    background: var(--mud-palette-surface);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,.22);
    width: 430px;
    max-width: 95vw;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[b-1rooq06z9p] .flt-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px 11px;
    border-bottom: 1px solid #e5e7eb;
    font-weight: 700;
    font-size: 14px;
}

[b-1rooq06z9p] .flt-count {
    display: inline-block;
    background: #6366f1;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
}

[b-1rooq06z9p] .flt-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
}

[b-1rooq06z9p] .flt-footer {
    padding: 9px 16px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

[b-1rooq06z9p] .flt-radios {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    padding: 3px 0 8px;
}

[b-1rooq06z9p] .flt-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    font-size: 13px;
}

[b-1rooq06z9p] .flt-num {
    width: 56px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    padding: 2px 5px;
    font-size: 12px;
    text-align: center;
}

[b-1rooq06z9p] .flt-num:disabled {
    opacity: .45;
}

[b-1rooq06z9p] .rc-header {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 8px;
    border-bottom: 2px solid #555;
    width: 100%;
    box-sizing: border-box;
}

[b-1rooq06z9p] .rc-logo {
    width: 72px;
    height: 72px;
    object-fit: contain;
    flex-shrink: 0;
}

[b-1rooq06z9p] .rc-logo-placeholder {
    width: 72px;
    height: 72px;
    border: 1px solid #ccc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #9ca3af;
    text-align: center;
    flex-shrink: 0;
}

[b-1rooq06z9p] .rc-school-info {
    flex: 1;
    text-align: center;
}

[b-1rooq06z9p] .rc-school-name {
    font-size: 18px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .5px;
    line-height: 1.2;
}

[b-1rooq06z9p] .rc-school-sub {
    font-size: 11px;
    color: #374151;
    margin-top: 2px;
}

[b-1rooq06z9p] .rc-title-box {
    display: inline-block;
    border: 2px solid #333;
    padding: 5px 30px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
    margin: 6px auto 0;
}

[b-1rooq06z9p] .rc-class-info {
    font-size: 12px;
    color: #374151;
    margin-top: 5px;
}

[b-1rooq06z9p] .rc-footer {
    display: none;
    justify-content: space-between;
    align-items: flex-end;
    padding: 10px 16px 8px;
    border-top: 1px solid #999;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    width: 100%;
    box-sizing: border-box;
}

[b-1rooq06z9p] .rc-footer-sig {
    text-align: center;
    min-width: 140px;
}

[b-1rooq06z9p] .rc-footer-sig-line {
    border-top: 1px solid #555;
    margin-top: 2px;
    padding-top: 3px;
    font-size: 11px;
    font-weight: 600;
}

[b-1rooq06z9p] .rc-footer-date {
    font-size: 11px;
    color: #374151;
    font-weight: 400;
    padding-bottom: 6px;
}
/* ── Table ──────────────────────────────────────────────────────────────── */
[b-1rooq06z9p] .ledger-table {
    border-collapse: collapse;
    font-size: 12px;
    white-space: nowrap;
}

    [b-1rooq06z9p] .ledger-table th, [b-1rooq06z9p] .ledger-table td {
        border: 1px solid #d0d0d0;
        padding: 3px 6px;
        text-align: center;
        vertical-align: middle;
    }

    [b-1rooq06z9p] .ledger-table thead th {
        background: color-mix(in srgb, #6366f1 16%, var(--mud-palette-surface));
        font-weight: 600;
    }

    [b-1rooq06z9p] .ledger-table thead tr:first-child th {
        background: #6366f1;
        color: #fff;
    }

    [b-1rooq06z9p] .ledger-table thead tr.tr-type th {
        background: #7c3aed;
        color: #fff;
        font-size: 11px;
    }

    [b-1rooq06z9p] .ledger-table thead tr.tr-comp th {
        background: color-mix(in srgb, #6366f1 16%, var(--mud-palette-surface));
        font-weight: 600;
    }

    [b-1rooq06z9p] .ledger-table tbody tr:nth-child(even) {
        background: var(--mud-palette-background-gray);
    }

    [b-1rooq06z9p] .ledger-table td.td-left {
        text-align: left;
    }

    [b-1rooq06z9p] .ledger-table .td-absent {
        color: #b00;
        font-style: italic;
    }

    [b-1rooq06z9p] .ledger-table .td-grade {
        font-weight: 600;
        color: #4f46e5;
    }

    [b-1rooq06z9p] .ledger-table .td-summary {
        background: color-mix(in srgb, #0ea5e9 10%, var(--mud-palette-surface));
        font-style: italic;
    }

    [b-1rooq06z9p] .ledger-table .td-summary-head {
        background: color-mix(in srgb, #3b82f6 30%, var(--mud-palette-surface));
        font-weight: 600;
        font-style: normal;
    }

    /* Marks separators between the different kinds of aggregate rows at the bottom of the ledger
       (extremes-by-gender, fail counts, pass %, each marking system's grade-band counts) — plain
       cell borders (1px, light grey) are too easy to lose among the dozens of ordinary summary rows,
       so the FIRST row of each new aggregate kind gets a thicker, dark top border instead. */
    [b-1rooq06z9p] .ledger-table tr.tr-group-start td {
        border-top: 2px solid #1f2937;
    }

    [b-1rooq06z9p] .ledger-table tr.tr-failed td {
        background: color-mix(in srgb, #f43f5e 12%, var(--mud-palette-surface)) !important;
    }

    [b-1rooq06z9p] .ledger-table tr.tr-failed .td-grade {
        color: #dc2626;
    }
    /* Cross-pattern must survive the failed-row background override */
    [b-1rooq06z9p] .ledger-table tr.tr-failed td.td-na {
        background: linear-gradient(to bottom right, transparent calc(50% - 1px), #d0d0d0 calc(50% - 1px), #d0d0d0 calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(to bottom left, transparent calc(50% - 1px), #d0d0d0 calc(50% - 1px), #d0d0d0 calc(50% + 1px), transparent calc(50% + 1px)), #f5f5f5 !important;
    }

[b-1rooq06z9p] .fail-mark {
    color: #dc2626;
    font-weight: 700;
    font-size: 9px;
    margin-left: 1px;
}

[b-1rooq06z9p] .grace-badge {
    color: #2e7d32;
    font-weight: 700;
    font-size: 9px;
    margin-left: 1px;
}

[b-1rooq06z9p] .badge-fail {
    display: inline-block;
    background: #dc2626;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
    margin-left: 4px;
    vertical-align: middle;
}

[b-1rooq06z9p] .td-name-f {
    font-weight: 700;
    font-style: italic;
}

[b-1rooq06z9p] .td-na {
    background: linear-gradient(to bottom right, transparent calc(50% - 1px), #d0d0d0 calc(50% - 1px), #d0d0d0 calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(to bottom left, transparent calc(50% - 1px), #d0d0d0 calc(50% - 1px), #d0d0d0 calc(50% + 1px), transparent calc(50% + 1px)), #f5f5f5 !important;
    color: transparent !important;
    font-size: 0 !important;
}
/* Subject-total column */
[b-1rooq06z9p] .td-sub-total {
    font-weight: 600;
}
/* Failed component cell */
[b-1rooq06z9p] .td-comp-fail {
    background: color-mix(in srgb, #ef4444 40%, var(--mud-palette-surface)) !important;
}
/* Carry-forward cell — hover the title tooltip for the per-source breakdown */
[b-1rooq06z9p] .td-carry-breakdown {
    cursor: help;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}
/* Bold / underline emphasis */
[b-1rooq06z9p] .td-bold {
    font-weight: 700;
    text-decoration: underline;
}

[b-1rooq06z9p] .th-bold {
    font-weight: 800;
    text-decoration: underline;
}

/* ── Component header cell — normal and rotated ─────────────────────────── */
[b-1rooq06z9p] .ledger-table thead tr.tr-comp th .rh-fm {
    font-size: 10px;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
}

/* ── Rotated column headers ─────────────────────────────────────────────── */
[b-1rooq06z9p] .ledger-table.rotated-hdr thead tr.tr-comp th {
    vertical-align: bottom;
    text-align: left;
    padding: 4px 3px;
    height: 90px;
}

    [b-1rooq06z9p] .ledger-table.rotated-hdr thead tr.tr-comp th .rh-inner {
        display: inline-block;
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        font-size: 11px;
        line-height: 1.35;
        white-space: nowrap;
    }

    [b-1rooq06z9p] .ledger-table.rotated-hdr thead tr.tr-comp th .rh-fm {
        font-size: 10px;
        color: #9ca3af;
    }

/* ── Rotated metadata header cells ──────────────────────────────────────── */
[b-1rooq06z9p] .ledger-table.rotated-hdr thead th.th-rot {
    vertical-align: bottom;
    text-align: left;
    padding: 4px 3px;
    height: 90px;
}

    [b-1rooq06z9p] .ledger-table.rotated-hdr thead th.th-rot .rh-inner {
        display: inline-block;
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        font-size: 11px;
        line-height: 1.35;
        white-space: nowrap;
    }

/* ── Multi-format mark cell display ─────────────────────────────────────── */
[b-1rooq06z9p] .cell-pct {
    font-size: 10px;
    color: #9ca3af;
    margin-left: 2px;
}

[b-1rooq06z9p] .cell-gp {
    font-size: 10px;
    color: #4f46e5;
    font-weight: 600;
    display: block;
    line-height: 1.4;
}

[b-1rooq06z9p] .cell-cmp-up,
[b-1rooq06z9p] .cell-cmp-down {
    font-size: 10px;
    font-weight: 600;
    display: block;
    line-height: 1.4;
}
[b-1rooq06z9p] .cell-cmp-up   { color: #16a34a; }
[b-1rooq06z9p] .cell-cmp-down { color: #dc2626; }

/* ── Print ──────────────────────────────────────────────────────────────── */
@media print {
    /* Paper is always light — even when printed from the dark theme. */
    [b-1rooq06z9p] .ledger-table, [b-1rooq06z9p] .ledger-table th, [b-1rooq06z9p] .ledger-table td { color: #000 !important; }
    [b-1rooq06z9p] .ledger-table thead th { background: #ede9fd !important; }
    [b-1rooq06z9p] .ledger-table .td-summary { background: #f0f9ff !important; }
    [b-1rooq06z9p] .ledger-table .td-summary-head { background: #bfdbfe !important; }
    [b-1rooq06z9p] .ledger-table tbody tr:nth-child(even) { background: #f8f7ff; }
    @page {
        margin: 0.5in;
        /* Deliberately no "size" at all — Chrome hides the print dialog's Layout/orientation
           control entirely as soon as @page specifies ANY explicit size, even a plain "A4" with no
           orientation keyword. Ledger tables are many-columns-wide and usually want landscape, but
           leaving size unset keeps the toggle available; most browsers remember the last
           orientation you pick for this print target and re-apply it next time. */
    }

    [b-1rooq06z9p] .ledger-sticky-hdr {
        display: none;
    }

    [b-1rooq06z9p] .ledger-body {
        overflow: visible;
    }

    [b-1rooq06z9p] #ledger-print-area {
        width: auto;
        min-width: unset;
    }

    [b-1rooq06z9p] .rc-header {
        display: flex;
    }

    [b-1rooq06z9p] .rc-footer {
        display: flex;
    }

    [b-1rooq06z9p] .ledger-table {
        font-size: 10px;
    }
        /* Strip all even-row tints — only failed rows and failed cells keep a tint */
        [b-1rooq06z9p] .ledger-table tbody tr td {
            background: none !important;
        }

        [b-1rooq06z9p] .ledger-table tbody tr.tr-failed td {
            background: #ffe8e8 !important;
        }

        [b-1rooq06z9p] .ledger-table tbody tr td.td-comp-fail {
            background: #fca5a5 !important;
            print-color-adjust: exact;
            -webkit-print-color-adjust: exact;
        }

        [b-1rooq06z9p] .ledger-table tbody tr.tr-failed td.td-na {
            background: linear-gradient(to bottom right, transparent calc(50% - 1px), #bbb calc(50% - 1px), #bbb calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(to bottom left, transparent calc(50% - 1px), #bbb calc(50% - 1px), #bbb calc(50% + 1px), transparent calc(50% + 1px)), #f0f0f0 !important;
        }
        /* Subject-title and component-type header rows use a colored background + white text —
           browsers skip background colors when printing by default (to save ink), which leaves
           the white text with nothing to show against but the bare page, reading as faint/washed
           out instead of the intended dark, high-contrast header. Force those two rows' colors to
           actually print, same fix already applied to td.td-comp-fail above. */
        [b-1rooq06z9p] .ledger-table thead tr:first-child th,
        [b-1rooq06z9p] .ledger-table thead tr.tr-type th {
            print-color-adjust: exact;
            -webkit-print-color-adjust: exact;
        }

        /* Always rotate metadata and component headers in print */
        [b-1rooq06z9p] .ledger-table thead th.th-rot {
            vertical-align: bottom;
            text-align: left;
            padding: 4px 3px;
            height: 70px;
        }

            [b-1rooq06z9p] .ledger-table thead th.th-rot .rh-inner {
                display: inline-block;
                writing-mode: vertical-rl;
                transform: rotate(180deg);
                font-size: 9px;
                line-height: 1.35;
                white-space: nowrap;
            }

        [b-1rooq06z9p] .ledger-table thead tr.tr-comp th {
            vertical-align: bottom;
            text-align: left;
            padding: 4px 3px;
            height: 70px;
        }

            [b-1rooq06z9p] .ledger-table thead tr.tr-comp th .rh-inner {
                display: inline-block;
                writing-mode: vertical-rl;
                transform: rotate(180deg);
                font-size: 9px;
                line-height: 1.35;
                white-space: nowrap;
            }

            [b-1rooq06z9p] .ledger-table thead tr.tr-comp th .rh-fm {
                font-size: 9px;
                color: var(--mud-palette-text-secondary);
            }
}
/* /Components/Pages/SchoolAdmin/Reports/GroupLedger.razor.rz.scp.css */
/* CSS for GroupLedger component — settings dropdown panel */

.dp-wrap[b-b8rse49ytm] {
    position: relative;
    display: inline-flex;
}

.dp-backdrop[b-b8rse49ytm] {
    position: fixed;
    inset: 0;
    z-index: 900;
}

.dp-panel[b-b8rse49ytm] {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 910;
    background: var(--mud-palette-surface);
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0,0,0,.18);
    padding: 10px 14px 12px;
    min-width: 190px;
    font-size: 13px;
}

.dp-label[b-b8rse49ytm] {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--mud-palette-text-secondary);
    margin: 8px 0 3px;
}

.dp-label:first-child[b-b8rse49ytm] {
    margin-top: 0;
}

.dp-item[b-b8rse49ytm] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px;
    cursor: pointer;
    border-radius: 4px;
    user-select: none;
}

.dp-item:hover[b-b8rse49ytm] {
    background: var(--mud-palette-background-gray);
}

.dp-item input[b-b8rse49ytm] {
    width: 15px;
    height: 15px;
    accent-color: #6366f1;
    cursor: pointer;
}

/* ── Print ──────────────────────────────────────────────────────────────── */
@media print {
    @page {
        margin: 0.5in;
    }

    .me-toolbar[b-b8rse49ytm] {
        display: none;
    }

    /* .me-scroll-wrap's max-height:calc(100vh - 270px) + overflow-y:auto (see wwwroot/css/app.css)
       would otherwise clip the table to whatever fits in that scrollable viewport, cutting off
       every row beyond it — print needs the full table, not a scrolled window into it. */
    .me-scroll-wrap[b-b8rse49ytm] {
        max-height: none;
        overflow: visible;
    }

    /* Sticky positioning has no meaning once the scroll container above is disabled, and can
       otherwise misplace these cells against the printed page instead of the table's own flow. */
    .me-sticky-col[b-b8rse49ytm],
    .me-th[b-b8rse49ytm] {
        position: static;
    }
}
/* /Components/Pages/SchoolAdmin/Reports/GroupMarksheet.razor.rz.scp.css */
/* CSS for GroupMarksheet component — ::deep so styles pierce into MarksheetStudentPicker */

/* Student picker (shared component, styles copied from Marksheet.razor.css) */
[b-iblns24fiu] .ms-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

[b-iblns24fiu] .ms-chips-lbl {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
    margin-right: 2px;
    white-space: nowrap;
}

[b-iblns24fiu] .ms-stpick {
    position: relative;
    display: inline-flex;
    flex-direction: column;
}

[b-iblns24fiu] .ms-stpick-input {
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    font-size: 13px;
    outline: none;
    width: 220px;
}

[b-iblns24fiu] .ms-stpick-input:focus {
    border-color: #6366f1;
}

[b-iblns24fiu] .ms-stpick-drop {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 910;
    background: var(--mud-palette-surface);
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0,0,0,.18);
    min-width: 240px;
    max-height: 280px;
    overflow-y: auto;
    font-size: 12px;
}

[b-iblns24fiu] .ms-stpick-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    cursor: pointer;
}

[b-iblns24fiu] .ms-stpick-item:hover { background: var(--mud-palette-background-gray); }
[b-iblns24fiu] .ms-stpick-item.on { background: color-mix(in srgb, #6366f1 16%, var(--mud-palette-surface)); }

[b-iblns24fiu] .ms-stpick-item input[type=checkbox] {
    accent-color: #6366f1;
    cursor: pointer;
}

[b-iblns24fiu] .ms-stpick-roll {
    margin-left: auto;
    color: #9ca3af;
    font-size: 11px;
}

[b-iblns24fiu] .ms-stpick-clear {
    padding: 5px 10px;
    font-size: 11px;
    color: #6366f1;
    cursor: pointer;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    font-weight: 600;
}

[b-iblns24fiu] .ms-stpick-clear:hover { background: var(--mud-palette-background-gray); }

[b-iblns24fiu] .ms-stchip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px 1px 8px;
    background: #e0e7ff;
    border-radius: 999px;
    font-size: 11px;
    color: #3730a3;
}

[b-iblns24fiu] .ms-stchip button {
    border: none;
    background: none;
    cursor: pointer;
    color: #6366f1;
    font-size: 14px;
    line-height: 1;
    padding: 0;
}

/* ─── Settings/sort/filter dropdown panels ───
   ::deep because .dp-backdrop is also rendered inside the reused MarksheetStudentPicker
   child component (which has no .razor.css of its own, so a plain selector here would never
   match its markup — that mismatch was why the student picker stopped closing on outside click). */
[b-iblns24fiu] .dp-wrap {
    position: relative;
    display: inline-flex;
}

[b-iblns24fiu] .dp-backdrop {
    position: fixed;
    inset: 0;
    z-index: 900;
}

[b-iblns24fiu] .dp-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 910;
    background: var(--mud-palette-surface);
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0,0,0,.18);
    padding: 10px 14px 12px;
    min-width: 190px;
    font-size: 13px;
}

[b-iblns24fiu] .dp-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--mud-palette-text-secondary);
    margin: 8px 0 3px;
}

[b-iblns24fiu] .dp-label:first-child {
    margin-top: 0;
}

[b-iblns24fiu] .dp-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px;
    cursor: pointer;
    border-radius: 4px;
    user-select: none;
}

[b-iblns24fiu] .dp-item:hover { background: var(--mud-palette-background-gray); }

[b-iblns24fiu] .dp-item input {
    width: 15px;
    height: 15px;
    accent-color: #6366f1;
    cursor: pointer;
}

[b-iblns24fiu] .dp-sort-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    border-radius: 4px;
    cursor: pointer;
}

[b-iblns24fiu] .dp-sort-item:hover { background: var(--mud-palette-background-gray); }

[b-iblns24fiu] .dp-sort-item.active {
    color: #6366f1;
    font-weight: 600;
}

[b-iblns24fiu] .ms-fbadge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #6366f1;
    color: #fff;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

[b-iblns24fiu] .ms-flt-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    font-size: 12px;
}

[b-iblns24fiu] .ms-flt-row input[type=checkbox] {
    accent-color: #6366f1;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

[b-iblns24fiu] .ms-flt-num {
    width: 54px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 2px 5px;
    font-size: 12px;
    text-align: center;
}

[b-iblns24fiu] .ms-flt-num:disabled { opacity: .4; }

/* ─── Report card ─── */
.rc-card[b-iblns24fiu] {
    width: 700px;
    margin: 0 auto 20px;
    border: 2px solid #555;
    font-family: 'Segoe UI',Arial,sans-serif;
    font-size: 12px;
    background: #fff;
    display: flex;
    flex-direction: column;
    position: relative;
    color: #1a1a1a;
    /* paper stays light in the dark theme: dark text, light native controls */
    color-scheme: light;
}

.rc-push[b-iblns24fiu] { flex: 1; }

.rc-header[b-iblns24fiu] {
    display: grid;
    /* Right column mirrors the logo's own width so the middle (school name/address/contact) column
       is truly centered on the page — this design has no right-side element at all, so without a
       matching reserved column the logo alone would visibly skew the center-aligned text rightward. */
    grid-template-columns: 72px 1fr 72px;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 8px;
    border-bottom: 2px solid #555;
}

.rc-logo[b-iblns24fiu] {
    width: 72px;
    height: 72px;
    object-fit: contain;
    flex-shrink: 0;
}

.rc-logo-placeholder[b-iblns24fiu] {
    width: 72px;
    height: 72px;
    border: 1px solid #ccc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #9ca3af;
    text-align: center;
    flex-shrink: 0;
}

.rc-school-info[b-iblns24fiu] { flex: 1; text-align: center; }

.rc-school-name[b-iblns24fiu] {
    font-size: 18px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .5px;
    line-height: 1.2;
}

.rc-school-sub[b-iblns24fiu] { font-size: 11px; color: #374151; margin-top: 2px; }

.rc-title-box[b-iblns24fiu] {
    width: fit-content;
    border: 2px solid #333;
    padding: 5px 30px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-align: center;
    margin: 6px auto 0;
}

.rc-student-row[b-iblns24fiu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 5px 12px;
    border-top: 1px solid #999;
    border-bottom: 1px solid #999;
    font-size: 12px;
}

.rc-stu-item[b-iblns24fiu] { display: flex; gap: 5px; }
.rc-stu-label[b-iblns24fiu] { font-weight: 700; }

.rc-exam-hdr[b-iblns24fiu] {
    text-align: center;
    font-weight: 700;
    font-size: 13px;
    padding: 5px 10px;
    background: #e0e0e0;
    border-bottom: 1px solid #999;
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* Item table (two-column split) */
.rc-item-cols[b-iblns24fiu] {
    display: flex;
    gap: 6px;
    padding: 4px;
}

.rc-item-col[b-iblns24fiu] { flex: 1; min-width: 0; }

.rc-tbl[b-iblns24fiu] {
    width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
}

.rc-tbl th[b-iblns24fiu], .rc-tbl td[b-iblns24fiu] {
    border: 1px solid #999;
    padding: 3px 6px;
    text-align: center;
    vertical-align: middle;
}

.rc-tbl th[b-iblns24fiu] {
    background: #ebebeb;
    font-weight: 700;
    font-size: 11px;
}

.rc-tbl td.rc-subj[b-iblns24fiu] {
    text-align: left;
    font-weight: 500;
    padding-left: 8px;
}

.rc-tbl .rc-fail[b-iblns24fiu] { color: #dc2626; font-weight: 700; }
.rc-tbl .rc-absent[b-iblns24fiu] { color: #d97706; font-style: italic; }

.rc-tbl .rc-grand[b-iblns24fiu] { font-weight: 700; background: #f5f5f5; }
.rc-tbl .rc-fm[b-iblns24fiu] { color: #6b7280; font-size: 10px; }

.rc-grand-tbl[b-iblns24fiu] { margin-top: -1px; }

/* Bottom section */
.rc-bottom[b-iblns24fiu] { display: flex; border-top: 2px solid #777; }
.rc-bottom-left[b-iblns24fiu] { flex: 1; border-right: 1px solid #999; padding: 8px 10px; }
.rc-bottom-right[b-iblns24fiu] { flex: 1; padding: 6px 10px; }

.rc-section-title[b-iblns24fiu] {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .5px;
    color: #6b7280;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.rc-result-row[b-iblns24fiu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #ddd;
    padding: 3px 8px;
    margin-bottom: 3px;
    font-size: 12px;
}

.rc-result-lbl[b-iblns24fiu] { font-weight: 600; }
.rc-result-val[b-iblns24fiu] { font-weight: 700; color: #1e40af; }

.rc-gs-tbl[b-iblns24fiu] { width: 100%; border-collapse: collapse; font-size: 10px; }
.rc-gs-tbl th[b-iblns24fiu], .rc-gs-tbl td[b-iblns24fiu] { border: 1px solid #ccc; padding: 2px 5px; text-align: center; }
.rc-gs-tbl th[b-iblns24fiu] { background: #ebebeb; font-weight: 600; }
.rc-gs-tbl td:first-child[b-iblns24fiu] { text-align: left; }

.rc-remarks-box[b-iblns24fiu] { border-top: 1px solid #999; padding: 6px 12px; font-size: 12px; }

.rc-footer[b-iblns24fiu] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 8px 16px;
    border-top: 1px solid #999;
    font-size: 12px;
    font-weight: 600;
}

.rc-footer-sig[b-iblns24fiu] { text-align: center; }

.rc-footer-sig-line[b-iblns24fiu] {
    border-top: 1px solid #555;
    margin-top: 20px;
    padding-top: 2px;
    font-size: 10px;
}

@media print {
    @page { margin: 0.4in; }

    .me-toolbar[b-iblns24fiu], .me-filter-bar[b-iblns24fiu], .gms-no-print[b-iblns24fiu] {
        display: none !important;
    }

    .rc-card[b-iblns24fiu] {
        page-break-after: always;
        break-after: page;
        margin-bottom: 0;
        width: 100%;
        border-width: 1px;
        min-height: calc(100vh - 0.4in);
    }

    .rc-card:last-child[b-iblns24fiu] {
        page-break-after: auto;
        break-after: auto;
    }
}
/* /Components/Pages/SchoolAdmin/Reports/IdCard.razor.rz.scp.css */
[b-jx7g6mjx8r] .ic-shell {
    display: flex;
    flex-direction: column;
    padding: 8px 14px 0;
}

[b-jx7g6mjx8r] .ic-sticky-hdr {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--mud-palette-background, #f0f2f7);
    padding-bottom: 4px;
}

[b-jx7g6mjx8r] .ic-ctrl {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding: 7px 10px;
    background: var(--mud-palette-surface, #fff);
    border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    margin-bottom: 6px;
}

[b-jx7g6mjx8r] .ic-sel      { width: 150px; flex-shrink: 0; min-width: 0; }
[b-jx7g6mjx8r] .ic-sel-wide { width: 190px; flex-shrink: 0; min-width: 0; }

[b-jx7g6mjx8r] .ic-body {
    flex: 1;
    overflow-x: auto;
    padding: 4px 0 16px;
}

/* Card grid — flex-wrap gives automatic multicolumn as zoom decreases */
[b-jx7g6mjx8r] .ic-cards-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 12px;
    align-items: flex-start;
}

[b-jx7g6mjx8r] .ic-card-wrap {
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 4px;
}

/* These class names are used by admitCard.js for print queries */
[b-jx7g6mjx8r] .acp-page {
    position: relative;
    background: white;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    color: #1a1a1a;
    /* paper stays light in the dark theme: dark text, light native controls */
    color-scheme: light;
}

[b-jx7g6mjx8r] .acp-page-html {
    position: relative;
    background: white;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

[b-jx7g6mjx8r] .acp-elem {
    position: absolute;
    box-sizing: border-box;
}

[b-jx7g6mjx8r] .acp-img-ph {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    background: #f0f0f0;
    color: #aaa;
    font-size: 11px;
}

[b-jx7g6mjx8r] .ic-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--mud-palette-text-secondary);
}
/* /Components/Pages/SchoolAdmin/Reports/Marksheet.razor.rz.scp.css */
/* CSS for Marksheet component — ::deep so styles pierce into child components */

[b-zykayeas8i] .ms-shell {
    display: flex;
    flex-direction: column;
    padding: 8px 14px 0;
}

/* Sticky controls + student picker */
[b-zykayeas8i] .ms-sticky-hdr {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--mud-palette-background, #f0f2f7);
    padding-bottom: 4px;
}

/* Controls bar */
[b-zykayeas8i] .ms-ctrl {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding: 7px 10px;
    background: var(--mud-palette-background-gray);
    border-radius: 8px;
    margin-bottom: 6px;
}

[b-zykayeas8i] .ms-ctrl .ms-sel {
    width: 150px;
    flex-shrink: 0;
    min-width: 0;
}

[b-zykayeas8i] .ms-ctrl .ms-selmd {
    width: 190px;
    flex-shrink: 0;
    min-width: 0;
}

/* Subject + student chips bar */
[b-zykayeas8i] .ms-chips {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    padding: 5px 10px;
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    margin-bottom: 6px;
}

[b-zykayeas8i] .ms-chips-lbl {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
    margin-right: 2px;
    white-space: nowrap;
}

[b-zykayeas8i] .ms-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    font-size: 12px;
    cursor: pointer;
    color: var(--mud-palette-text-primary);
    user-select: none;
    transition: all .15s;
}

[b-zykayeas8i] .ms-chip:hover {
    border-color: #6366f1;
    color: #6366f1;
}

[b-zykayeas8i] .ms-chip.ms-chip-on {
    background: #6366f1;
    border-color: #6366f1;
    color: #fff;
}

[b-zykayeas8i] .ms-chips-sep {
    width: 1px;
    height: 20px;
    background: #d1d5db;
    margin: 0 4px;
    flex-shrink: 0;
}

/* Student picker */
[b-zykayeas8i] .ms-stpick {
    position: relative;
    display: inline-flex;
    flex-direction: column;
}

[b-zykayeas8i] .ms-stpick-input {
    height: 26px;
    padding: 0 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    font-size: 12px;
    outline: none;
    width: 160px;
}

[b-zykayeas8i] .ms-stpick-input:focus {
    border-color: #6366f1;
}

[b-zykayeas8i] .ms-stpick-drop {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 910;
    background: var(--mud-palette-surface);
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0,0,0,.18);
    min-width: 240px;
    max-height: 280px;
    overflow-y: auto;
    font-size: 12px;
}

[b-zykayeas8i] .ms-stpick-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    cursor: pointer;
}

[b-zykayeas8i] .ms-stpick-item:hover {
    background: var(--mud-palette-background-gray);
}

[b-zykayeas8i] .ms-stpick-item.on {
    background: color-mix(in srgb, #6366f1 16%, var(--mud-palette-surface));
}

[b-zykayeas8i] .ms-stpick-item input[type=checkbox] {
    accent-color: #6366f1;
    cursor: pointer;
}

[b-zykayeas8i] .ms-stpick-roll {
    margin-left: auto;
    color: #9ca3af;
    font-size: 11px;
}

[b-zykayeas8i] .ms-stpick-clear {
    padding: 5px 10px;
    font-size: 11px;
    color: #6366f1;
    cursor: pointer;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    font-weight: 600;
}

[b-zykayeas8i] .ms-stpick-clear:hover {
    background: var(--mud-palette-background-gray);
}

[b-zykayeas8i] .ms-stchip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px 1px 8px;
    background: #e0e7ff;
    border-radius: 999px;
    font-size: 11px;
    color: #3730a3;
}

[b-zykayeas8i] .ms-stchip button {
    border: none;
    background: none;
    cursor: pointer;
    color: #6366f1;
    font-size: 14px;
    line-height: 1;
    padding: 0;
}

/* Body */
[b-zykayeas8i] .ms-body {
    padding: 8px 0 10px;
}

[b-zykayeas8i] .ms-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: #9ca3af;
    text-align: center;
}

/* ─── Multi-page view (activated by JS when zoomed out) ─── */
[b-zykayeas8i] .ms-body.ms-multipage {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 96px; /* 16px between sheets + each card's 38.4px paper margin on both sides */
    padding: 48px 44px;
}

[b-zykayeas8i] .ms-body.ms-multipage .rc-card {
    margin: 0;
    flex-shrink: 0;
}

[b-zykayeas8i] .ms-body.ms-multipage .rc-section-hdr {
    flex-basis: 100%;
    width: 100%;
    margin: 0;
}

/* ─── Report card ─── */
[b-zykayeas8i] .rc-card {
    zoom: var(--rc-zoom, 1);
    /* On screen the card sits on a real A4 sheet (794 x 1123 px at 96 dpi): the bordered card is
       the printable area, and the white band drawn around it by box-shadow is the 0.4in (38.4px)
       print margin — so what you see is the whole page, edge to edge, exactly as it prints. */
    width: 717px;
    margin: 40px auto 60px;
    box-shadow: 0 0 0 38.4px #fff, 0 2px 14px 38.4px rgba(0, 0, 0, .22);
    border: 2px solid #555;
    /* Border/padding count toward the declared width instead of adding to it — without this, a
       width:100% card (print) overflows the page's printable area by the border's width, which is
       why the right-side border could print off the edge and disappear. */
    box-sizing: border-box;
    padding: 6px;
    font-family: 'Segoe UI',Arial,sans-serif;
    font-size: calc(12px + var(--rc-fs-add, 0px));
    background: #fff;
    display: flex;
    flex-direction: column;
    position: relative;
    color: #1a1a1a;
    /* paper stays light in the dark theme: dark text, light native controls */
    color-scheme: light;
    /* A whole A4 page on screen too (see the width note above), like the printed sheet and Report
       Studio pages, so the marks table fills down to the bottom instead of ending mid-card. min-
       (not fixed) height: a card with more subjects than fit still grows. Print overrides this
       with the physical page height below. */
    min-height: 1046px; /* 1123 - 2 x 38.4 */
}

[b-zykayeas8i] .rc-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    object-fit: contain;
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
}

[b-zykayeas8i] .rc-header {
    display: grid;
    /* Both side columns match the logo's own width, not the (smaller, optional) student photo's —
       so the middle column stays truly centered whether or not a photo is shown on the right. */
    grid-template-columns: 72px 1fr 72px;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 8px;
    border-bottom: 2px solid #555;
}

[b-zykayeas8i] .rc-logo {
    width: 72px;
    height: 72px;
    object-fit: contain;
    flex-shrink: 0;
}

[b-zykayeas8i] .rc-logo-placeholder {
    width: 72px;
    height: 72px;
    border: 1px solid #ccc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(9px + var(--rc-fs-add, 0px));
    color: #9ca3af;
    text-align: center;
    flex-shrink: 0;
}

[b-zykayeas8i] .rc-school-info {
    flex: 1;
    text-align: center;
}

[b-zykayeas8i] .rc-stu-photo {
    width: 64px;
    height: 80px;
    object-fit: cover;
    border: 1px solid #999;
    justify-self: center;
}

[b-zykayeas8i] .rc-stu-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #ccc;
    font-size: calc(8px + var(--rc-fs-add, 0px));
    color: #9ca3af;
    text-align: center;
    justify-self: center;
}

[b-zykayeas8i] .rc-school-name {
    font-size: calc(18px + var(--rc-fs-add, 0px));
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .5px;
    line-height: 1.2;
    white-space: nowrap;
}

[b-zykayeas8i] .rc-school-sub {
    font-size: calc(11px + var(--rc-fs-add, 0px));
    color: #374151;
    margin-top: 2px;
}

[b-zykayeas8i] .rc-title-box {
    width: fit-content;
    padding: 5px 30px;
    font-size: calc(14px + var(--rc-fs-add, 0px));
    font-weight: 700;
    letter-spacing: 1px;
    text-align: center;
    margin: 6px auto 0;
    white-space: nowrap;
}

[b-zykayeas8i] .rc-student-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    row-gap: 4px;
    padding: 5px 12px;
    border-top: 1px solid #999;
    border-bottom: 1px solid #999;
    font-size: calc(12px + var(--rc-fs-add, 0px));
}

[b-zykayeas8i] .rc-stu-item {
    display: flex;
    gap: 5px;
}

[b-zykayeas8i] .rc-stu-label {
    font-weight: 700;
    white-space: nowrap;
}

[b-zykayeas8i] .rc-stu-break {
    flex-basis: 100%;
    width: 0;
    height: 0;
}

[b-zykayeas8i] .rc-exam-hdr {
    text-align: center;
    font-weight: 700;
    font-size: calc(13px + var(--rc-fs-add, 0px));
    padding: 5px 10px;
    background: #e0e0e0;
    border-bottom: 1px solid #999;
    text-transform: uppercase;
    letter-spacing: .5px;
    white-space: nowrap;
}

[b-zykayeas8i] .rc-exam-dates {
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    font-size: calc(10px + var(--rc-fs-add, 0px));
    color: #4b5563;
    margin-top: 1px;
}

/* Marks table — wrapped in .rc-tbl-wrap because <table> elements are unreliable flex items
   (their intrinsic height often wins over flex-grow, especially under print rendering); the wrap
   div is a normal block element and flexes properly, then the table just fills it at height:100%. */
[b-zykayeas8i] .rc-tbl-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* Flex items default to min-width:auto (their content's natural width), so without this a wide
       table (many Ledger columns) refuses to shrink and bleeds straight past .rc-card's border. The
       table itself is width:100% (capped to this wrapper) so it's already forced to fit — hidden
       (not auto) because border-collapse + sub-pixel column-width rounding was tripping the browser's
       overflow detection by a fraction of a pixel, showing a scrollbar even on ordinary-width tables. */
    min-width: 0;
    /* clip, not hidden: overflow-x:hidden silently turns overflow-y into auto (a scroll container),
       so the table — height:100% inside a page-height card — showed a vertical scrollbar. clip
       never scrolls; the table fills the page instead (filler row, see autoFitMarksheetTables). */
    overflow: clip;
}

[b-zykayeas8i] .rc-tbl {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
    font-size: calc(11.5px + var(--rc-fs-add, 0px));
}

[b-zykayeas8i] .rc-tbl th, [b-zykayeas8i] .rc-tbl td {
    border: 1px solid #999;
    padding: 3px 6px;
    text-align: center;
    vertical-align: middle;
}

/* Single trailing blank row (MarksheetPageSettings.FillTableRows) that absorbs whatever height
   .rc-tbl-wrap's flex:1 grants it beyond the real rows — only has room to grow when an ancestor
   gives .rc-card a definite height, which today only happens in print (see @media print below);
   on screen the card is content-sized, so this row shows with little/no extra height there. */
[b-zykayeas8i] .rc-filler-row td {
    height: 100%;
}

[b-zykayeas8i] .rc-tbl th {
    background: #ebebeb;
    font-weight: 700;
    font-size: calc(11px + var(--rc-fs-add, 0px));
    white-space: nowrap;
}

/* "Rotate Header" setting — single-column headers (no colspan, so each represents exactly one
   data column — a plain leaf header or a rowspan'd collapsed Theory/Practical column) rotate
   vertically so a wide table (e.g. Ledger with many components) can narrow those columns to the
   text's height instead of its width. Group headers (Full Marks/Obtained Marks/etc., which use
   colspan to span multiple sub-columns) stay horizontal since rotating them would misrepresent
   the width they need. */
[b-zykayeas8i] .rc-rotate-hdr th:not([colspan]):not(.rc-subj),
[b-zykayeas8i] .rc-rotate-hdr-auto th:not([colspan]):not(.rc-subj) {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    vertical-align: middle;
    padding: 8px 4px;
}

[b-zykayeas8i] .rc-tbl td.rc-subj {
    text-align: left;
    font-weight: 500;
    padding-left: 8px;
    white-space: nowrap;
}

[b-zykayeas8i] .rc-tbl .rc-fail {
    color: #dc2626;
    font-weight: 700;
}

[b-zykayeas8i] .rc-tbl .rc-pass {
    color: #15803d;
}

[b-zykayeas8i] .rc-tbl .rc-absent {
    color: #d97706;
    font-style: italic;
}

[b-zykayeas8i] .rc-cell-pct {
    color: #6b7280;
    font-size: calc(10px + var(--rc-fs-add, 0px));
}

[b-zykayeas8i] .rc-cell-gp {
    color: #1e40af;
    font-size: calc(10px + var(--rc-fs-add, 0px));
}

/* Theory+Practical mode's Total Score cell — GP/Grade on their own second line beneath Marks(%). */
[b-zykayeas8i] .rc-cell-line2 {
    color: #1e40af;
    font-size: calc(10px + var(--rc-fs-add, 0px));
    margin-top: 1px;
}

[b-zykayeas8i] .rc-grace-badge {
    color: #2e7d32;
    font-weight: 700;
    font-size: calc(9px + var(--rc-fs-add, 0px));
    margin-left: 1px;
}

[b-zykayeas8i] .rc-cmp-up,
[b-zykayeas8i] .rc-cmp-down {
    font-size: calc(10px + var(--rc-fs-add, 0px));
    font-weight: 600;
}
[b-zykayeas8i] .rc-cmp-up   { color: #16a34a; }
[b-zykayeas8i] .rc-cmp-down { color: #dc2626; }

[b-zykayeas8i] .rc-tbl .rc-grand {
    font-weight: 700;
    background: #f5f5f5;
}

[b-zykayeas8i] .rc-tbl .rc-fm {
    color: #6b7280;
    font-size: calc(10px + var(--rc-fs-add, 0px));
}

/* Bottom section */
[b-zykayeas8i] .rc-bottom {
    display: flex;
    border-top: 2px solid #777;
}

[b-zykayeas8i] .rc-bottom-left {
    flex: 1;
    border-right: 1px solid #999;
    padding: 8px 10px;
}

[b-zykayeas8i] .rc-bottom-right {
    flex: 1;
    padding: 6px 10px;
}

[b-zykayeas8i] .rc-section-title {
    font-size: calc(9px + var(--rc-fs-add, 0px));
    font-weight: 700;
    letter-spacing: .5px;
    color: #6b7280;
    text-transform: uppercase;
    margin-bottom: 4px;
    white-space: nowrap;
}

[b-zykayeas8i] .rc-result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #ddd;
    padding: 3px 8px;
    margin-bottom: 3px;
    font-size: calc(12px + var(--rc-fs-add, 0px));
    gap: 8px;
}

[b-zykayeas8i] .rc-result-lbl {
    font-weight: 600;
    white-space: nowrap;
}

[b-zykayeas8i] .rc-result-val {
    font-weight: 700;
    color: #1e40af;
}

[b-zykayeas8i] .rc-gs-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: calc(10px + var(--rc-fs-add, 0px));
}

[b-zykayeas8i] .rc-gs-tbl th, [b-zykayeas8i] .rc-gs-tbl td {
    border: 1px solid #ccc;
    padding: 2px 5px;
    text-align: center;
}

[b-zykayeas8i] .rc-gs-tbl th {
    background: #ebebeb;
    font-weight: 600;
    white-space: nowrap;
}

[b-zykayeas8i] .rc-gs-tbl td:first-child {
    text-align: left;
}

[b-zykayeas8i] .rc-remarks-box {
    border-top: 1px solid #999;
    padding: 6px 12px;
    font-size: calc(12px + var(--rc-fs-add, 0px));
}

/* ── Result Withheld/Hidden placeholder — replaces the whole card content, keeping the same
   .rc-card flex-column sizing so print pagination (one card per page) is unaffected. ── */
[b-zykayeas8i] .rc-blocked {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    padding: 40px 30px;
    color: #4b5563;
}

[b-zykayeas8i] .rc-blocked-icon {
    font-size: 40px;
    line-height: 1;
}

[b-zykayeas8i] .rc-blocked-title {
    font-size: 20px;
    font-weight: 800;
    color: #92400e;
}

[b-zykayeas8i] .rc-blocked-sub {
    font-size: 14px;
    font-weight: 600;
}

[b-zykayeas8i] .rc-blocked-msg {
    font-size: 12px;
    max-width: 380px;
    color: #6b7280;
}

[b-zykayeas8i] .rc-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 8px 16px;
    border-top: 1px solid #999;
    font-size: calc(12px + var(--rc-fs-add, 0px));
    font-weight: 600;
}

[b-zykayeas8i] .rc-footer-sig {
    text-align: center;
}

[b-zykayeas8i] .rc-footer-sig-line {
    border-top: 1px solid #555;
    margin-top: 20px;
    padding-top: 2px;
    font-size: calc(10px + var(--rc-fs-add, 0px));
    white-space: nowrap;
}

/* Dropdown panels */
[b-zykayeas8i] .dp-wrap {
    position: relative;
    display: inline-flex;
}

[b-zykayeas8i] .dp-backdrop {
    position: fixed;
    inset: 0;
    z-index: 900;
}

[b-zykayeas8i] .dp-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 910;
    background: var(--mud-palette-surface);
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0,0,0,.18);
    padding: 10px 14px 12px;
    min-width: 190px;
    font-size: 13px;
}

[b-zykayeas8i] .dp-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--mud-palette-text-secondary);
    margin: 8px 0 3px;
}

[b-zykayeas8i] .dp-label:first-child {
    margin-top: 0;
}

[b-zykayeas8i] .dp-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px;
    cursor: pointer;
    border-radius: 4px;
    user-select: none;
}

[b-zykayeas8i] .dp-item:hover {
    background: var(--mud-palette-background-gray);
}

[b-zykayeas8i] .dp-item input {
    width: 15px;
    height: 15px;
    accent-color: #6366f1;
    cursor: pointer;
}

[b-zykayeas8i] .dp-sort-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    border-radius: 4px;
    cursor: pointer;
}

[b-zykayeas8i] .dp-sort-item:hover {
    background: var(--mud-palette-background-gray);
}

[b-zykayeas8i] .dp-sort-item.active {
    color: #6366f1;
    font-weight: 600;
}

/* Filter panel */
[b-zykayeas8i] .ms-fbadge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #6366f1;
    color: #fff;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

[b-zykayeas8i] .ms-flt-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    font-size: 12px;
}

[b-zykayeas8i] .ms-flt-row input[type=checkbox] {
    accent-color: #6366f1;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

[b-zykayeas8i] .ms-flt-num {
    width: 54px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 2px 5px;
    font-size: 12px;
    text-align: center;
}

[b-zykayeas8i] .ms-flt-num:disabled {
    opacity: .4;
}

[b-zykayeas8i] .ms-flt-sep {
    border: none;
    border-top: 1px solid #f0f0f0;
    margin: 6px 0;
}

/* Section header (group-by-section) */
[b-zykayeas8i] .rc-section-hdr {
    width: 700px;
    margin: 0 auto 4px;
    padding: 4px 12px;
    background: #4f46e5;
    color: #fff;
    font-size: calc(12px + var(--rc-fs-add, 0px));
    font-weight: 700;
    letter-spacing: .5px;
    border-radius: 4px 4px 0 0;
}

[b-zykayeas8i] .ms-tpl-page {
    position: relative;
    background: #fff;
    margin: 0 auto 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,.18);
    overflow: hidden;
    color: #1a1a1a;
    /* paper stays light in the dark theme: dark text, light native controls */
    color-scheme: light;
}

[b-zykayeas8i] .ms-tpl-elem {
    position: absolute;
    box-sizing: border-box;
}

@media print {
    @page {
        margin: 0.4in;
        size: A4;
    }

    [b-zykayeas8i] .ms-sticky-hdr {
        display: none !important;
    }

    [b-zykayeas8i] .rc-card {
        page-break-after: always;
        break-after: page;
        margin: 0;
        box-shadow: none; /* the on-screen paper edge — the real page margin comes from @page */
        width: 100%;
        border-width: 2px;
        /* `vh` is unreliable in @media print (browsers often fail to resolve it against the
           actual paper size), which is why .rc-filler-row never had any extra height to grow
           into. A4 (297mm) minus both the top and bottom 0.4in @page margins (see @page above) is
           a real physical length, so it renders consistently — keep this in sync with @page's
           margin. min-height (not height) so a card with more subjects/sections than fit in one
           page still grows instead of clipping. */
        min-height: calc(297mm - 0.8in);
    }

    [b-zykayeas8i] .rc-card:last-child {
        page-break-after: auto;
        break-after: auto;
    }

    [b-zykayeas8i] .ms-tpl-page {
        page-break-after: always;
        break-after: page;
        box-shadow: none;
        margin: 0 auto;
    }

    [b-zykayeas8i] .ms-tpl-page:last-child {
        page-break-after: auto;
        break-after: auto;
    }
}
/* /Components/Pages/SchoolAdmin/Reports/Markslip.razor.rz.scp.css */
[b-khww5gzysz] .msl-shell {
    display: flex;
    flex-direction: column;
    padding: 8px 14px 0;
    height: 100%;
    overflow: hidden;
}

/* ── Sticky header wrapper ──────────────────────────────────────────────── */
[b-khww5gzysz] .msl-sticky-hdr {
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--mud-palette-background, #f0f2f7);
    padding-bottom: 2px;
}

/* ── Controls strip ─────────────────────────────────────────────────────── */
[b-khww5gzysz] .msl-ctrl {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding: 7px 10px;
    background: var(--mud-palette-surface, #fff);
    border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    margin-bottom: 6px;
}

[b-khww5gzysz] .msl-sel       { width: 130px; flex-shrink: 0; min-width: 0; }
[b-khww5gzysz] .msl-sel-wide  { width: 190px; flex-shrink: 0; min-width: 0; }
[b-khww5gzysz] .msl-sel-subj  { width: 220px; flex-shrink: 0; min-width: 0; }

[b-khww5gzysz] .msl-zoom-lbl {
    font-size: 11px;
    font-weight: 600;
    min-width: 36px;
    text-align: center;
}

/* ── Dropdown panels (same pattern as ledger) ───────────────────────────── */
[b-khww5gzysz] .dp-wrap {
    position: relative;
    display: inline-flex;
}

[b-khww5gzysz] .dp-backdrop {
    position: fixed;
    inset: 0;
    z-index: 900;
}

[b-khww5gzysz] .dp-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 910;
    background: var(--mud-palette-surface);
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0,0,0,.18);
    padding: 10px 14px 12px;
    min-width: 210px;
    max-height: 400px;
    overflow-y: auto;
    font-size: 13px;
}

    [b-khww5gzysz] .dp-panel.dp-wide { min-width: 240px; }

[b-khww5gzysz] .dp-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--mud-palette-text-secondary);
    margin: 8px 0 3px;
}

    [b-khww5gzysz] .dp-label:first-child { margin-top: 0; }

[b-khww5gzysz] .dp-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    cursor: pointer;
    border-radius: 4px;
    user-select: none;
}

    [b-khww5gzysz] .dp-item:hover { background: var(--mud-palette-background-gray); }

    [b-khww5gzysz] .dp-item input[type=checkbox] {
        width: 15px;
        height: 15px;
        accent-color: #6366f1;
        cursor: pointer;
    }

[b-khww5gzysz] .dp-sort-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    border-radius: 4px;
    cursor: pointer;
}

    [b-khww5gzysz] .dp-sort-item:hover { background: var(--mud-palette-background-gray); }

    [b-khww5gzysz] .dp-sort-item.active {
        color: #6366f1;
        font-weight: 600;
    }

[b-khww5gzysz] .dp-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
}

[b-khww5gzysz] .dp-row-lbl {
    font-size: 12px;
    flex: 1;
}

[b-khww5gzysz] .dp-num {
    width: 46px;
    border: 1px solid var(--mud-palette-lines-default, #ccc);
    border-radius: 4px;
    padding: 2px 4px;
    font-size: 11px;
    text-align: center;
    background: var(--mud-palette-background, #fff);
    color: var(--mud-palette-text-primary);
}

[b-khww5gzysz] .dp-unit {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    min-width: 14px;
}

/* ── Body ───────────────────────────────────────────────────────────────── */
[b-khww5gzysz] .msl-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 4px 0 16px;
}

[b-khww5gzysz] .msl-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--mud-palette-text-secondary);
    gap: 6px;
}

/* ── Preview ────────────────────────────────────────────────────────────── */
[b-khww5gzysz] .msl-preview-wrap {
    display: flex;
    justify-content: center;
    padding: 12px;
}

[b-khww5gzysz] .msl-page {
    background: white;
    box-shadow: 0 2px 12px rgba(0,0,0,.18);
    padding: 14px 16px 20px;
    font-family: Arial, sans-serif;
    transform-origin: top left;
    color: #1a1a1a;
    /* paper stays light in the dark theme: dark text, light native controls */
    color-scheme: light;
}

/* ── Markslip header ────────────────────────────────────────────────────── */
[b-khww5gzysz] .msl-hdr {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 2px solid #222;
    padding-bottom: 6px;
    margin-bottom: 5px;
}

[b-khww5gzysz] .msl-logo {
    width: 52px;
    height: 52px;
    object-fit: contain;
    flex-shrink: 0;
}

[b-khww5gzysz] .msl-school-info { flex: 1; text-align: center; }
[b-khww5gzysz] .msl-school-name { font-size: 16px; font-weight: 700; }
[b-khww5gzysz] .msl-school-sub  { font-size: 10px; color: #444; }

[b-khww5gzysz] .msl-title-box {
    display: inline-block;
    border: 1.5px solid #333;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 700;
    margin-top: 4px;
    letter-spacing: .5px;
}

[b-khww5gzysz] .msl-info-row {
    display: flex;
    justify-content: space-between;
    background: #f3f4f6;
    padding: 3px 6px;
    font-size: 10px;
    border-radius: 3px;
    margin-bottom: 6px;
}

/* ── Table ──────────────────────────────────────────────────────────────── */
[b-khww5gzysz] .msl-table {
    width: 100%;
    border-collapse: collapse;
}

[b-khww5gzysz] .msl-table th,
[b-khww5gzysz] .msl-table td {
    border: 1px solid #555;
    padding: 2px 3px;
    text-align: center;
    font-size: inherit;
}

[b-khww5gzysz] .msl-table th { background: #f0f0f0; font-weight: 700; }

[b-khww5gzysz] .msl-th-sn   { width: 26px; }
[b-khww5gzysz] .msl-th-roll { width: 34px; }
[b-khww5gzysz] .msl-th-name { text-align: left; min-width: 80px; }
[b-khww5gzysz] .msl-th-subj { font-size: .9em; }
[b-khww5gzysz] .msl-th-comp { font-size: .85em; min-width: 30px; }
[b-khww5gzysz] .msl-th-date { font-size: 8px; }
[b-khww5gzysz] .msl-th-att  { min-width: 30px; }
[b-khww5gzysz] .msl-th-rem  { min-width: 50px; }

/* "Rotate header" setting — cells with neither colspan (the Subject group header) nor rowspan
   (SN/Roll/Name/Att/Remarks, which span every header row already) are exactly the per-component/
   date row cells — narrowing those to their text's height is what actually saves width when
   there are many subjects. */
[b-khww5gzysz] .msl-rotate-hdr th:not([colspan]):not([rowspan]) {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    vertical-align: middle;
    padding: 6px 3px;
}

[b-khww5gzysz] .msl-tc    { text-align: center; }
[b-khww5gzysz] .msl-tl    { text-align: left; }
[b-khww5gzysz] .msl-tl-f  { font-weight: 700; font-style: italic; }
[b-khww5gzysz] .msl-fm    { font-size: 8px; color: #555; }
[b-khww5gzysz] .msl-entry { min-width: 28px; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
[b-khww5gzysz] .msl-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 12mm;
    padding-top: 2mm;
}

[b-khww5gzysz] .msl-sign-block {
    text-align: center;
    min-width: 70mm;
}

[b-khww5gzysz] .msl-sign-line  { border-bottom: 1px solid #333; margin-bottom: 3px; }
[b-khww5gzysz] .msl-sign-label { font-size: 10px; }
/* /Components/Pages/SchoolAdmin/Reports/RemainingMarksEntry.razor.rz.scp.css */
[b-0rltynum9g] .rme-shell {
    padding: 8px 14px 24px;
}

[b-0rltynum9g] .rme-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 10px;
    background: var(--mud-palette-background-gray);
    border-radius: 8px;
    margin-bottom: 14px;
}

[b-0rltynum9g] .rme-sel {
    width: 220px;
    flex-shrink: 0;
}

[b-0rltynum9g] .rme-sel-wide {
    width: 280px;
    flex-shrink: 0;
}

[b-0rltynum9g] .rme-switch {
    margin-left: 4px;
}

[b-0rltynum9g] .rme-summary {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

[b-0rltynum9g] .rme-chip {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
}

[b-0rltynum9g] .rme-chip.total { background: #eef2ff; color: #4338ca; }
[b-0rltynum9g] .rme-chip.done { background: #ecfdf5; color: #047857; }
[b-0rltynum9g] .rme-chip.pending { background: #fff7ed; color: #c2410c; }

[b-0rltynum9g] .rme-tbl-wrap {
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

[b-0rltynum9g] .rme-tbl {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    font-size: 13px;
}

[b-0rltynum9g] .rme-tbl th, [b-0rltynum9g] .rme-tbl td {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding: 7px 10px;
    text-align: left;
    vertical-align: middle;
}

[b-0rltynum9g] .rme-tbl th {
    background: var(--mud-palette-background-gray);
    font-weight: 700;
    position: sticky;
    top: 0;
}

[b-0rltynum9g] .rme-c {
    text-align: center;
    color: #374151;
    white-space: nowrap;
}

[b-0rltynum9g] .rme-bar-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-0rltynum9g] .rme-bar {
    flex: 1;
    height: 8px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}

[b-0rltynum9g] .rme-bar-fill {
    height: 100%;
    border-radius: 999px;
}

[b-0rltynum9g] .rme-bar-fill.good, [b-0rltynum9g] .rme-pct.good { background: #10b981; color: #047857; }
[b-0rltynum9g] .rme-bar-fill.mid, [b-0rltynum9g] .rme-pct.mid { background: #f59e0b; color: #b45309; }
[b-0rltynum9g] .rme-bar-fill.low, [b-0rltynum9g] .rme-pct.low { background: #ef4444; color: #b91c1c; }

[b-0rltynum9g] .rme-pct {
    font-weight: 700;
    font-size: 12px;
    width: 38px;
    text-align: right;
}
/* /Components/Pages/SchoolAdmin/Reports/ResultControl.razor.rz.scp.css */
[b-giu612m3zg] .rctl-shell {
    padding: 8px 14px 24px;
}

[b-giu612m3zg] .rctl-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 10px;
    background: var(--mud-palette-background-gray);
    border-radius: 8px;
    margin-bottom: 14px;
}

[b-giu612m3zg] .rctl-sel {
    width: 190px;
    flex-shrink: 0;
}

[b-giu612m3zg] .rctl-sel-wide {
    width: 260px;
    flex-shrink: 0;
}

[b-giu612m3zg] .rctl-tbl-wrap {
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

[b-giu612m3zg] .rctl-tbl {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    font-size: 13px;
}

[b-giu612m3zg] .rctl-tbl th, [b-giu612m3zg] .rctl-tbl td {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding: 6px 8px;
    text-align: left;
    vertical-align: middle;
}

[b-giu612m3zg] .rctl-tbl th {
    background: var(--mud-palette-background-gray);
    font-weight: 700;
    position: sticky;
    top: 0;
}

[b-giu612m3zg] .rctl-c {
    text-align: center;
    color: #6b7280;
}

[b-giu612m3zg] .rctl-sub {
    font-size: 11px;
    color: #6b7280;
}

[b-giu612m3zg] .rctl-hint {
    font-weight: 400;
    font-size: 10px;
    color: #9ca3af;
}
/* /Components/Pages/SchoolAdmin/Reports/SeatPlanReports.razor.rz.scp.css */
[b-cssnzvd3md] .sp-shell {
    display: flex;
    flex-direction: column;
    padding: 8px 14px 0;
    height: 100%;
}

[b-cssnzvd3md] .sp-sticky-hdr {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--mud-palette-background, #f0f2f7);
    padding-bottom: 4px;
}

[b-cssnzvd3md] .sp-ctrl {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding: 7px 10px;
    background: var(--mud-palette-surface, #fff);
    border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    margin-bottom: 6px;
}

[b-cssnzvd3md] .sp-sel      { width: 130px; flex-shrink: 0; min-width: 0; }
[b-cssnzvd3md] .sp-sel-wide { width: 190px; flex-shrink: 0; min-width: 0; }

[b-cssnzvd3md] .sp-body {
    flex: 1;
    overflow: auto;
    padding: 4px 0 16px;
}

[b-cssnzvd3md] .sp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--mud-palette-text-secondary);
}

/* Pages laid out horizontally with wrapping */
[b-cssnzvd3md] .sp-pages-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 12px;
    align-items: flex-start;
}

/* Outer wrapper — zoom applied here so layout flow adjusts */
[b-cssnzvd3md] .sp-page-wrap {
    display: inline-block;
    flex-shrink: 0;
    transform-origin: top left;
}

/* A4-ish page card */
[b-cssnzvd3md] .sp-page {
    width: 794px;
    min-height: 400px;
    background: white;
    box-shadow: 0 2px 12px rgba(0,0,0,.18);
    padding: 18px 20px 22px;
    font-family: Arial, sans-serif;
    font-size: 11px;
    color: #1a1a1a;
    /* paper stays light in the dark theme: dark text, light native controls */
    color-scheme: light;
}

/* Page header */
[b-cssnzvd3md] .sp-print-hdr { text-align: center; margin-bottom: 6px; }
[b-cssnzvd3md] .sp-school-name { font-size: 15px; font-weight: 700; }
[b-cssnzvd3md] .sp-exam-name   { font-size: 12px; font-weight: 700; margin: 2px 0; }
[b-cssnzvd3md] .sp-plan-sub    { font-size: 11px; }

[b-cssnzvd3md] .sp-room-bar {
    display: flex;
    justify-content: space-between;
    border-bottom: 1.5px solid #333;
    padding-bottom: 4px;
    margin: 6px 0 4px;
    font-size: 11px;
    font-weight: 600;
}

/* Attendance / file-door table */
[b-cssnzvd3md] .sp-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 4px;
}

[b-cssnzvd3md] .sp-table th,
[b-cssnzvd3md] .sp-table td {
    border: 1px solid #444;
    padding: 3px 5px;
    font-size: inherit;
}

[b-cssnzvd3md] .sp-table th { background: #f0f0f0; font-weight: 700; text-align: center; }

[b-cssnzvd3md] .sp-tc { text-align: center; }
[b-cssnzvd3md] .sp-tl { text-align: left; }

[b-cssnzvd3md] .sp-td-sig {
    min-width: 18mm;
}

[b-cssnzvd3md] .sp-col-sep {
    border-left: 2px solid #888;
    border-right: 2px solid #888;
}

[b-cssnzvd3md] .sp-summary {
    margin-top: 5px;
    font-size: 10px;
    color: #444;
}

/* Desk cards */
[b-cssnzvd3md] .sp-desk-grid {
    display: grid;
    background: white;
    padding: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,.18);
    width: fit-content;
    min-width: 400px;
}

[b-cssnzvd3md] .sp-desk-card {
    border: 1px solid #333;
    display: flex;
    overflow: hidden;
}

[b-cssnzvd3md] .sp-desk-side {
    writing-mode: vertical-rl;
    font-size: 7px;
    font-weight: 700;
    padding: 2px;
    background: #e8e8e8;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    min-width: 10px;
}

[b-cssnzvd3md] .sp-shift-side { transform: rotate(180deg); }

[b-cssnzvd3md] .sp-desk-body {
    flex: 1;
    text-align: center;
    padding: 4px 2px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    overflow: hidden;
}

[b-cssnzvd3md] .sp-desk-sym  { font-weight: 900; }
[b-cssnzvd3md] .sp-desk-name { font-weight: 600; }
[b-cssnzvd3md] .sp-desk-cls  { color: #444; }
/* /Components/Pages/SchoolAdmin/Reports/StudentExamComparisonReport.razor.rz.scp.css */
[b-j1kg89z4p9] .sec-shell {
    padding: 8px 14px 24px;
}

[b-j1kg89z4p9] .sec-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 10px;
    background: var(--mud-palette-background, #f5f5f5);
    border-radius: 8px;
    margin-top: 10px;
    position: sticky;
    top: 0;
    z-index: 20;
}

[b-j1kg89z4p9] .sec-sel {
    width: 200px;
    flex-shrink: 0;
}

[b-j1kg89z4p9] .sec-sel-wide {
    width: 260px;
    flex-shrink: 0;
}

[b-j1kg89z4p9] .sec-card {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 14px 16px;
    margin-top: 16px;
}

[b-j1kg89z4p9] .sec-card-head {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    font-size: 13.5px;
    margin-bottom: 4px;
}

[b-j1kg89z4p9] .sec-card-sub {
    font-size: 12.5px;
    color: #6b7280;
    margin-bottom: 10px;
}

[b-j1kg89z4p9] .sec-tbl-wrap {
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

[b-j1kg89z4p9] .sec-tbl {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 12.5px;
}

[b-j1kg89z4p9] .sec-tbl th, [b-j1kg89z4p9] .sec-tbl td {
    border: 1px solid var(--mud-palette-lines-default);
    padding: 5px 8px;
    text-align: left;
    vertical-align: middle;
}

[b-j1kg89z4p9] .sec-tbl th {
    background: var(--mud-palette-background-gray);
    font-weight: 700;
}

[b-j1kg89z4p9] .sec-rowlabel {
    color: #6b7280;
    font-size: 11.5px;
}

/* Thicker top border on each subject's first row (Marks) so the 3-row Marks/GP/Gr group is
   visually separated from the subject above it — the default 1px grid line reads as continuous. */
[b-j1kg89z4p9] .sec-subject-first-row td {
    border-top: 2px solid #9ca3af;
}

[b-j1kg89z4p9] .sec-c {
    text-align: center;
}

[b-j1kg89z4p9] .sec-strong {
    font-weight: 700;
}

[b-j1kg89z4p9] .sec-summary-title {
    margin-top: 14px;
    font-weight: 700;
    font-size: 13.5px;
}

[b-j1kg89z4p9] .sec-summary {
    margin-top: 6px;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

[b-j1kg89z4p9] .sec-up    { color: #059669; font-weight: 700; }
[b-j1kg89z4p9] .sec-down  { color: #dc2626; font-weight: 700; }
[b-j1kg89z4p9] .sec-flat  { color: #6b7280; font-weight: 700; }
[b-j1kg89z4p9] .sec-muted { color: #b45309; font-weight: 700; }

[b-j1kg89z4p9] .sec-agg-body tr {
    background: var(--mud-palette-background-gray);
}

[b-j1kg89z4p9] .sec-agg-row td {
    font-weight: 600;
    font-size: 12px;
}

[b-j1kg89z4p9] .sec-settings-wrap {
    position: relative;
}

[b-j1kg89z4p9] .sec-settings-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10;
}

[b-j1kg89z4p9] .sec-settings-panel {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 11;
    background: var(--mud-palette-surface, #fff);
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    padding: 8px;
    min-width: 220px;
}

[b-j1kg89z4p9] .sec-settings-sub {
    margin-left: 14px;
    padding-left: 8px;
    border-left: 2px solid #e5e7eb;
}

[b-j1kg89z4p9] .sec-settings-disabled {
    opacity: 0.45;
    pointer-events: none;
}

[b-j1kg89z4p9] .sec-settings-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #9ca3af;
    margin: 6px 0 2px 0;
}

[b-j1kg89z4p9] .sec-settings-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12.5px;
    white-space: nowrap;
}

[b-j1kg89z4p9] .sec-settings-item:hover {
    background: var(--mud-palette-background-gray);
}

@media print {
    @page {
        margin: 0.5in;
    }

    [b-j1kg89z4p9] .sec-no-print { display: none !important; }
    [b-j1kg89z4p9] .sec-shell { padding: 0; }
    [b-j1kg89z4p9] .sec-tbl-wrap { overflow: visible; border: none; }
    [b-j1kg89z4p9] .sec-card { break-inside: avoid; page-break-inside: avoid; }
}
/* /Components/Pages/SchoolAdmin/Reports/StudentPerformanceComparison.razor.rz.scp.css */
[b-75ps6lsuyy] .spc-shell {
    padding: 8px 14px 24px;
}

[b-75ps6lsuyy] .spc-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 10px;
    background: var(--mud-palette-background-gray);
    border-radius: 8px;
    margin-top: 10px;
}

[b-75ps6lsuyy] .spc-sel {
    width: 220px;
    flex-shrink: 0;
}

[b-75ps6lsuyy] .spc-summary {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

[b-75ps6lsuyy] .spc-chip {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
}

[b-75ps6lsuyy] .spc-chip.up    { background: #ecfdf5; color: #047857; }
[b-75ps6lsuyy] .spc-chip.down  { background: #fef2f2; color: #b91c1c; }
[b-75ps6lsuyy] .spc-chip.flat  { background: #f3f4f6; color: #4b5563; }
[b-75ps6lsuyy] .spc-chip.muted { background: #eef2ff; color: #4338ca; }

[b-75ps6lsuyy] .spc-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}

[b-75ps6lsuyy] .spc-chart-card {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 12px;
}

[b-75ps6lsuyy] .spc-chart-title {
    font-size: 13px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 4px;
}

[b-75ps6lsuyy] .spc-chart {
    height: 200px;
}

[b-75ps6lsuyy] .spc-tbl-wrap {
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

[b-75ps6lsuyy] .spc-tbl {
    width: 100%;
    min-width: 1400px;
    border-collapse: collapse;
    font-size: 12.5px;
}

[b-75ps6lsuyy] .spc-tbl th, [b-75ps6lsuyy] .spc-tbl td {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding: 6px 8px;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

[b-75ps6lsuyy] .spc-tbl th {
    background: var(--mud-palette-background-gray);
    font-weight: 700;
    position: sticky;
    top: 0;
}

[b-75ps6lsuyy] .spc-c {
    text-align: center;
}

[b-75ps6lsuyy] .spc-strong {
    font-weight: 700;
}

[b-75ps6lsuyy] .spc-up    { color: #059669; font-weight: 600; }
[b-75ps6lsuyy] .spc-down  { color: #dc2626; font-weight: 600; }
[b-75ps6lsuyy] .spc-flat  { color: #6b7280; }
[b-75ps6lsuyy] .spc-muted { color: #9ca3af; }

[b-75ps6lsuyy] .spc-trend {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

[b-75ps6lsuyy] .spc-status {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

[b-75ps6lsuyy] .spc-status-excellent { background: #ecfdf5; color: #047857; }
[b-75ps6lsuyy] .spc-status-average   { background: #fffbeb; color: #b45309; }
[b-75ps6lsuyy] .spc-status-poor      { background: #fef2f2; color: #b91c1c; }
[b-75ps6lsuyy] .spc-status-muted     { background: #f3f4f6; color: #6b7280; }

@media print {
    @page {
        margin: 0.5in;
    }

    [b-75ps6lsuyy] .spc-no-print { display: none !important; }
    [b-75ps6lsuyy] .spc-shell { padding: 0; }
    [b-75ps6lsuyy] .spc-tbl-wrap { overflow: visible; border: none; }
}
/* /Components/Pages/SchoolAdmin/Reports/TimetableReport.razor.rz.scp.css */
/* CSS for TimetableReport component — moved out of an inline <style> tag into Blazor's normal
   CSS-isolation mechanism so it's bundled into the app's real stylesheet and available to the
   print popup (see VidhyaHub.printReportArea in app.js) via #tt-report-print-area's outerHTML. */

.tt-report-shell[b-sh90j74sjq] { padding: 16px; }
.tt-report-filters[b-sh90j74sjq] { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.tt-report-sel[b-sh90j74sjq] { min-width: 260px; }
.tt-report-empty[b-sh90j74sjq] { padding: 30px; text-align: center; color: var(--mud-palette-text-secondary); }
.tt-report-scroll[b-sh90j74sjq] { overflow-x: auto; }

table.tt-report-table[b-sh90j74sjq] { border-collapse: collapse; width: 100%; min-width: 720px; background: var(--mud-palette-surface); }
table.tt-report-table th[b-sh90j74sjq], table.tt-report-table td[b-sh90j74sjq] { border: 1px solid var(--mud-palette-divider); padding: 8px 10px; text-align: center; vertical-align: middle; }
table.tt-report-table thead th[b-sh90j74sjq] { background: var(--mud-palette-background-grey); font-size: 12px; }
.tt-report-corner[b-sh90j74sjq] { min-width: 110px; background: var(--mud-palette-background-grey); }
.tt-report-hdr-label[b-sh90j74sjq] { font-weight: 700; font-size: 12px; }
.tt-report-hdr-time[b-sh90j74sjq] { font-size: 11px; color: var(--mud-palette-text-secondary); }
.tt-report-break-hdr[b-sh90j74sjq] { background: #fde7f3; }
.tt-report-class-cell[b-sh90j74sjq] { font-weight: 700; background: var(--mud-palette-background-grey); white-space: nowrap; }
.tt-report-cell[b-sh90j74sjq] { min-width: 110px; }
.tt-report-subject[b-sh90j74sjq] { font-weight: 600; font-size: 13px; }
.tt-report-teacher[b-sh90j74sjq] { font-size: 11px; color: var(--mud-palette-text-secondary); }
.tt-report-break-cell[b-sh90j74sjq] { background: #fde7f3; }
.tt-report-break-vert[b-sh90j74sjq] { writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 700; letter-spacing: .05em; margin: 0 auto; }

.tt-print-header[b-sh90j74sjq] { display: flex; align-items: center; gap: 14px; border-bottom: 2px solid var(--mud-palette-divider); padding-bottom: 10px; margin-bottom: 14px; }
.tt-print-logo[b-sh90j74sjq] { width: 56px; height: 56px; object-fit: contain; flex-shrink: 0; }
.tt-print-logo-ph[b-sh90j74sjq] { width: 56px; height: 56px; border: 1px solid var(--mud-palette-divider); border-radius: 50%; flex-shrink: 0; }
.tt-print-school-info[b-sh90j74sjq] { flex: 1; text-align: center; }
.tt-print-school-name[b-sh90j74sjq] { font-size: 18px; font-weight: 900; text-transform: uppercase; letter-spacing: .5px; }
.tt-print-school-addr[b-sh90j74sjq] { font-size: 11px; color: var(--mud-palette-text-secondary); margin-top: 2px; }
.tt-print-title[b-sh90j74sjq] { display: inline-block; border: 2px solid var(--mud-palette-divider); padding: 4px 24px; font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-top: 8px; }
.tt-print-meta[b-sh90j74sjq] { font-size: 12px; color: var(--mud-palette-text-secondary); margin-top: 6px; }

@media print {
    /* No forced orientation (no "size: landscape") — that would hide the browser's own
       Portrait/Landscape toggle, since the page would be dictating it. This schedule grid usually
       wants landscape, but leaving it unforced keeps the toggle available; most browsers remember
       the last orientation you pick for this print target and re-apply it next time. */
    @page {
        margin: 0.5in;
    }

    .tt-no-print[b-sh90j74sjq] { display: none !important; }
    .tt-report-shell[b-sh90j74sjq] { padding: 0; }
    .tt-report-scroll[b-sh90j74sjq] { overflow: visible; }
}
/* /Components/Pages/SuperAdmin/Monitoring/SystemMonitoring.razor.rz.scp.css */
.monitoring-tile[b-atbtxe1bm5] {
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.monitoring-tile:hover[b-atbtxe1bm5] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}
/* /Components/Shared/CertificatePageRenderer.razor.rz.scp.css */
.cert-page[b-x86th0qidb] {
    position: relative;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
    overflow: hidden;
    flex-shrink: 0;
    color: #1a1a1a;
    /* paper stays light in the dark theme: dark text, light native controls */
    color-scheme: light;
}

.cert-elem[b-x86th0qidb] {
    position: absolute;
    box-sizing: border-box;
}

.cert-page-border[b-x86th0qidb] {
    position: absolute;
    pointer-events: none;
    z-index: 9000;
    box-sizing: border-box;
}

.cert-page-border-img[b-x86th0qidb] {
    position: absolute;
    pointer-events: none;
    z-index: 9000;
    object-fit: fill;
}

@media print {
    @page {
        margin: 0;
        size: auto;
    }

    .cert-page[b-x86th0qidb] {
        box-shadow: none;
        margin: 0 auto;
        page-break-after: always;
        break-after: page;
    }

    .cert-page:last-child[b-x86th0qidb] {
        page-break-after: auto;
        break-after: auto;
    }
}
/* /Components/Shared/ReportPrintHeader.razor.rz.scp.css */
/* No ::deep here — .rph-block is this component's own root element, not a descendant reached
   through a child component boundary. ::deep compiles to a descendant combinator ([b-xxxx] .rph-block),
   which requires an ANCESTOR carrying the scope attribute; since .rph-block carries the attribute
   itself (not an ancestor of it), that rule silently never matched — the block was never actually
   display:none on screen. A bare .rph-block compiles to .rph-block[b-xxxx], which does match. */
.rph-block[b-5ijwgcswp2] {
    display: none;
}

@media print {
    .rph-block[b-5ijwgcswp2] {
        display: block;
        margin-bottom: 10px;
        padding-bottom: 6px;
        border-bottom: 1px solid #ccc;
    }

    .rph-logo[b-5ijwgcswp2] {
        display: block;
        max-height: 48px;
        max-width: 140px;
        margin: 0 auto 4px;
    }

    .rph-school[b-5ijwgcswp2] {
        font-size: 13px;
        font-weight: 600;
        color: #333;
    }

    .rph-title[b-5ijwgcswp2] {
        font-size: 16px;
        font-weight: 700;
        color: #111;
    }

    .rph-meta[b-5ijwgcswp2] {
        font-size: 10.5px;
        font-weight: 600;
        color: #444;
        margin-top: 2px;
    }

    .rph-desc[b-5ijwgcswp2] {
        font-size: 10px;
        color: #555;
        margin-top: 2px;
        max-width: 90%;
    }
}