@import '_content/Z.Blazor.Diagrams/Z.Blazor.Diagrams.ezdqu7jd9f.bundle.scp.css';

/* /Components/Assessments/Runner/AccessCodeOverlay.razor.rz.scp.css */
.access-code-backdrop[b-bc7klrebs2] {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
}

.access-code-modal[b-bc7klrebs2] {
    position: relative;
    overflow: hidden;
    background: var(--player-bg, #fff);
    color: var(--player-text, #111);
    border-radius: 12px;
    min-width: 320px;
    max-width: 400px;
    padding: 1.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Validation in progress — spinner overlay covering the modal. */
.access-code-busy[b-bc7klrebs2] {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 12px;
}

.access-code-busy-spinner[b-bc7klrebs2] {
    font-size: 2rem;
    color: var(--player-accent, #4ec3e0);
}

.access-code-busy-text[b-bc7klrebs2] {
    color: #fff;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

.access-code-header[b-bc7klrebs2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.access-code-title[b-bc7klrebs2] {
    font-size: 1.2rem;
    font-weight: 700;
}

.access-code-close[b-bc7klrebs2] {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--player-text, #111);
    cursor: pointer;
    padding: 0 0.25rem;
}

.access-code-close:hover[b-bc7klrebs2] {
    opacity: 0.7;
}

.access-code-close:focus-visible[b-bc7klrebs2] {
    outline: 2px solid var(--player-accent);
    outline-offset: 2px;
}

.access-code-body[b-bc7klrebs2] {
    margin-bottom: 1.25rem;
}

.access-code-input[b-bc7klrebs2] {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.3em;
    border: 2px solid var(--player-option-border, #444);
    border-radius: 8px;
    background: var(--player-option-bg, #fff);
    color: var(--player-text, #111);
}

.access-code-input:focus[b-bc7klrebs2] {
    outline: none;
    border-color: var(--player-accent);
    box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.25);
}

.access-code-footer[b-bc7klrebs2] {
    display: flex;
    justify-content: center;
}

/* ── Submit button (duplicated from PlayerActionBar since scoped CSS cannot cross components) ── */
.player-btn[b-bc7klrebs2] {
    padding: 0.6rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: background 0.15s, color 0.15s;
}

.player-btn:disabled[b-bc7klrebs2] {
    opacity: 0.5;
    cursor: not-allowed;
}

.player-btn-active[b-bc7klrebs2] {
    background: var(--player-btn-active-bg, #000);
    color: var(--player-btn-active-text, #fff);
    border-color: var(--player-btn-active-bg, #000);
}

.player-btn:focus-visible[b-bc7klrebs2] {
    outline: 2px solid var(--player-accent);
    outline-offset: 2px;
}

.player-btn-active:hover:not(:disabled)[b-bc7klrebs2] {
    opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
    .player-btn[b-bc7klrebs2] {
        transition: none;
    }
}
/* /Components/Assessments/Runner/AudioPlayer.razor.rz.scp.css */
.audio-player[b-s8d3hlkrr6] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1;
    min-width: 0;
    background: var(--player-bar-bg, #050505);
    border: 1px solid var(--player-bar-border, #4a4a4a);
    padding: 0.35rem 0.5rem;
}

.audio-transport[b-s8d3hlkrr6] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: 0 0 auto;
}

.audio-btn[b-s8d3hlkrr6] {
    width: 1.35rem;
    height: 1.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--player-bar-bg, #1d1d1d);
    border: 1px solid var(--player-bar-border, #6a6a6a);
    color: var(--player-text, #fff);
    font-size: 0.7rem;
    cursor: pointer;
    padding: 0;
}

.audio-btn:hover[b-s8d3hlkrr6] {
    border-color: var(--player-accent);
    color: var(--player-accent);
}

.audio-btn:focus-visible[b-s8d3hlkrr6] {
    outline: 2px solid var(--player-accent);
    outline-offset: 2px;
}

.audio-segments[b-s8d3hlkrr6] {
    display: flex;
    align-items: center;
    flex: 1;
    height: 9px;
    gap: 3px;
    min-width: 0;
    border: 1px solid var(--player-bar-border, #333);
    padding: 0 2px;
}

.audio-segment[b-s8d3hlkrr6] {
    height: 100%;
    background: var(--player-audio-upcoming);
    cursor: pointer;
    min-width: 4px;
}

.audio-segment:focus-visible[b-s8d3hlkrr6] {
    outline: 2px solid var(--player-accent);
    outline-offset: 1px;
}

.audio-segment.played[b-s8d3hlkrr6] {
    background: var(--player-audio-played);
}

.audio-segment.current[b-s8d3hlkrr6] {
    background: var(--player-audio-played);
    box-shadow: inset -1px 0 0 #fff;
}

.audio-segment-placeholder[b-s8d3hlkrr6] {
    flex: 1;
    height: 100%;
    background: var(--player-audio-upcoming);
    opacity: 0.3;
}

.audio-time[b-s8d3hlkrr6] {
    font-size: 0.7rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--player-text, #d6d6d6);
    white-space: nowrap;
    min-width: 2.4rem;
    text-align: right;
}

.audio-error[b-s8d3hlkrr6] {
    color: #e53935;
    font-size: 0.8rem;
    flex: 0 0 auto;
    cursor: help;
}
/* /Components/Assessments/Runner/PlayerActionBar.razor.rz.scp.css */
.player-action-bar[b-vrhcove7lz] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.player-btn[b-vrhcove7lz] {
    min-width: 236px;
    min-height: 58px;
    padding: 0.72rem 1.4rem;
    font-size: calc(1.45rem * var(--runner-font-scale, 1));
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: 0;
    cursor: pointer;
    border: 2px solid transparent;
    text-transform: uppercase;
    line-height: 1;
}

.player-btn:disabled[b-vrhcove7lz] {
    opacity: 0.45;
    cursor: not-allowed;
}

.player-btn:focus-visible[b-vrhcove7lz] {
    outline: 2px solid var(--player-accent);
    outline-offset: 2px;
}

.player-btn-active[b-vrhcove7lz] {
    background: var(--player-btn-active-bg);
    color: var(--player-btn-active-text);
    border-color: var(--player-btn-outline-border);
}

.player-btn-active:hover:not(:disabled)[b-vrhcove7lz] {
    border-color: var(--player-accent);
}

.player-btn-outline[b-vrhcove7lz] {
    background: transparent;
    color: var(--player-text);
    border-color: var(--player-btn-outline-border);
}

.player-btn-outline:hover:not(:disabled)[b-vrhcove7lz] {
    border-color: var(--player-accent);
    color: var(--player-accent);
}

/* FINISH ASSESSMENT — distinctive accent-filled CTA on the last question */
.player-btn-finish[b-vrhcove7lz] {
    background: var(--player-accent, #1cb6c9) !important;
    color: #000 !important;
    border-color: var(--player-accent, #1cb6c9) !important;
    letter-spacing: 0.06em;
}

.player-btn-finish:hover:not(:disabled)[b-vrhcove7lz] {
    filter: brightness(1.1);
}

@media (max-width: 768px) {
    .player-btn[b-vrhcove7lz] {
        min-width: 170px;
        min-height: 48px;
        font-size: calc(1rem * var(--runner-font-scale, 1));
    }
}
/* /Components/Assessments/Runner/PlayerNavigationChevrons.razor.rz.scp.css */
.player-nav-chevrons[b-3d081sh4qq] {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1320px;
    gap: 0.6rem;
}

.chevron[b-3d081sh4qq] {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    background: transparent;
    border: 0;
    color: var(--player-text);
    cursor: pointer;
    line-height: 1;
    /* Pin to the vertical middle of the VISIBLE content window, not the middle of the
       content (which, for a long option list, put the chevrons off near the bottom).
       Sticky against .player-content-area (the scroll container); align-self overrides
       the row's align-items:center so the sticky offset controls vertical placement.
       The offset is 50% of the scrollport minus half the chevron's own height. */
    position: sticky;
    top: calc(50% - 1.5rem);
    align-self: flex-start;
}

.chevron:hover[b-3d081sh4qq] {
    color: var(--player-accent);
}

.chevron:focus-visible[b-3d081sh4qq] {
    outline: 2px solid var(--player-accent);
    outline-offset: 2px;
}

/* Greyed "blocked" forward chevron while an answer is mid-change. The button is
   intentionally still clickable so the click can raise the soft-stop toast; the
   host blocks the actual navigation. */
.chevron-disabled[b-3d081sh4qq],
.chevron-disabled:hover[b-3d081sh4qq] {
    color: var(--player-text);
    opacity: 0.35;
    cursor: not-allowed;
}

.chevron-placeholder[b-3d081sh4qq] {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
}

.chevron-content[b-3d081sh4qq] {
    flex: 1;
    min-width: 0;
}

@media (max-width: 768px) {
    .chevron[b-3d081sh4qq],
    .chevron-placeholder[b-3d081sh4qq] {
        width: 2.2rem;
        height: 2.2rem;
    }

    .chevron[b-3d081sh4qq] {
        /* Keep the sticky offset at half the smaller chevron height. */
        top: calc(50% - 1.1rem);
    }
}
/* /Components/Assessments/Runner/PlayerShell.razor.rz.scp.css */
.player-shell[b-qvimg2lxbu] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: var(--player-bg);
    color: var(--player-text);
}

.player-subheader[b-qvimg2lxbu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    min-height: 48px;
    padding: 0 1rem;
    background: var(--player-subheader-bg);
    color: var(--player-subheader-text);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.player-subheader-left[b-qvimg2lxbu] {
    display: flex;
    align-items: center;
    gap: 0.95rem;
    min-width: 0;
}

.player-tab[b-qvimg2lxbu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    padding: 0.36rem 1.15rem;
    background: var(--player-accent);
    color: #051217;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    border-radius: 0;
    text-transform: uppercase;
    /* Now a <button> (click → start page): strip default button chrome. */
    border: none;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
}

.player-tab:hover[b-qvimg2lxbu] {
    filter: brightness(0.94);
}

.player-tab:focus-visible[b-qvimg2lxbu] {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.player-assessment-name[b-qvimg2lxbu] {
    font-size: clamp(1.05rem, 1.35vw, 1.7rem);
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-subheader-right[b-qvimg2lxbu] {
    display: flex;
    align-items: center;
}

.player-question-bar[b-qvimg2lxbu] {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 62px;
    min-height: 62px;
    background: var(--player-bar-bg, #050505);
    border-bottom: 1px solid var(--player-bar-border, #262626);
    padding: 0 1rem;
}

.player-question-left[b-qvimg2lxbu] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex: 0 0 auto;
}

.player-question-label[b-qvimg2lxbu] {
    font-size: clamp(1.65rem, 2.05vw, 2.15rem);
    font-weight: 500;
    color: var(--player-accent);
    white-space: nowrap;
    line-height: 1;
}

.player-question-tools[b-qvimg2lxbu] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.player-question-tool[b-qvimg2lxbu] {
    width: 1.85rem;
    height: 1.85rem;
    border: 1px solid var(--player-bar-border, rgba(255, 255, 255, 0.5));
    color: var(--player-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    background: transparent;
    padding: 0;
    line-height: 1;
}

button.player-question-tool[b-qvimg2lxbu] {
    cursor: pointer;
}

button.player-question-tool:hover[b-qvimg2lxbu] {
    background: rgba(255, 255, 255, 0.1);
}

.player-content-area[b-qvimg2lxbu] {
    flex: 1;
    display: flex;
    align-items: safe center;
    justify-content: center;
    min-height: 0;
    overflow: auto;
    padding: clamp(1.2rem, 2.1vw, 2.4rem) clamp(0.8rem, 2vw, 2.2rem) 0.5rem;
}

.player-action-area[b-qvimg2lxbu] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 74px;
    padding: 0.5rem 1rem 1rem;
    background: transparent;
}

@media (max-width: 1024px) {
    .player-assessment-name[b-qvimg2lxbu] {
        font-size: 1rem;
    }

    .player-question-bar[b-qvimg2lxbu] {
        height: auto;
        min-height: 62px;
        flex-wrap: wrap;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
}

@media (max-width: 768px) {
    .player-subheader[b-qvimg2lxbu] {
        padding: 0 0.5rem;
    }

    .player-tab[b-qvimg2lxbu] {
        min-width: 94px;
        padding: 0.3rem 0.7rem;
        font-size: 0.9rem;
    }

    .player-question-label[b-qvimg2lxbu] {
        font-size: 1.45rem;
    }

    /* Keep the question-list and word-bank tools available on small devices.
       Bump the hit target to a touch-friendly size. */
    .player-question-tool[b-qvimg2lxbu] {
        width: 2.2rem;
        height: 2.2rem;
        font-size: 1.25rem;
    }
}

/* ── Accessibility ── */

.skip-link[b-qvimg2lxbu] {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 100;
    padding: 0.5rem 1rem;
    background: var(--player-accent);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.skip-link:focus[b-qvimg2lxbu] {
    top: 0;
}

@media (prefers-reduced-motion: reduce) {
    .player-shell[b-qvimg2lxbu],
    .player-shell *[b-qvimg2lxbu] {
        transition: none !important;
        animation: none !important;
    }
}
/* /Components/Assessments/Runner/PlayerToolbar.razor.rz.scp.css */
.player-toolbar[b-8lg7r9le7m] {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.player-toolbar-btn[b-8lg7r9le7m] {
    width: 2.05rem;
    height: 2.05rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--player-bar-bg, #0b0b0b);
    border: 1px solid var(--player-bar-border, rgba(255, 255, 255, 0.45));
    color: var(--player-text, #fff);
    border-radius: 0;
    padding: 0;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
}

.player-toolbar-btn:hover[b-8lg7r9le7m] {
    border-color: var(--player-accent, #1cb6c9);
    color: var(--player-accent, #1cb6c9);
}

.player-toolbar-btn:focus-visible[b-8lg7r9le7m] {
    outline: 2px solid var(--player-accent, #1cb6c9);
    outline-offset: 2px;
}

.toolbar-plus[b-8lg7r9le7m],
.toolbar-minus[b-8lg7r9le7m] {
    font-size: 0.62rem;
    margin-left: 0.1rem;
    margin-top: -0.5rem;
    font-weight: 700;
}
/* /Components/Assessments/Runner/QuestionListPanel.razor.rz.scp.css */
.qlist-backdrop[b-bbuzz5564s] {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    justify-content: flex-start;
}

.qlist-panel[b-bbuzz5564s] {
    width: min(360px, 86vw);
    height: 100%;
    background: var(--player-panel-bg, #fff);
    color: var(--player-text, #111);
    border-right: 1px solid var(--player-panel-border, rgba(0, 0, 0, 0.12));
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 14px rgba(0, 0, 0, 0.3);
}

.qlist-head[b-bbuzz5564s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--player-panel-border, rgba(0, 0, 0, 0.12));
}

.qlist-title[b-bbuzz5564s] {
    font-size: 1.15rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--player-accent, #4ec3e0);
}

.qlist-close[b-bbuzz5564s] {
    background: transparent;
    border: none;
    color: var(--player-text, #111);
    font-size: 1.2rem;
    cursor: pointer;
    line-height: 1;
    padding: 0.25rem;
}

.qlist-empty[b-bbuzz5564s] {
    padding: 1rem;
    opacity: 0.7;
}

.qlist-items[b-bbuzz5564s] {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0;
    overflow-y: auto;
    flex: 1;
}

.qlist-item[b-bbuzz5564s] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--player-panel-border, rgba(0, 0, 0, 0.12));
}

.qlist-item.is-clickable[b-bbuzz5564s] {
    cursor: pointer;
}

.qlist-item.is-clickable:hover[b-bbuzz5564s] {
    background: var(--player-panel-hover, rgba(0, 0, 0, 0.05));
}

.qlist-item.is-disabled[b-bbuzz5564s] {
    opacity: 0.55;
    cursor: default;
}

.qlist-item.is-current[b-bbuzz5564s] {
    background: rgba(78, 195, 224, 0.16);
    border-left: 3px solid var(--player-accent, #4ec3e0);
    padding-left: calc(1rem - 3px);
}

.qlist-marker[b-bbuzz5564s] {
    flex: 0 0 1.9rem;
    height: 1.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--player-panel-marker-border, rgba(0, 0, 0, 0.28));
    border-radius: 50%;
    font-weight: 600;
    font-size: 0.95rem;
}

.qlist-label[b-bbuzz5564s] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qlist-state[b-bbuzz5564s] {
    flex: 0 0 auto;
    color: var(--player-accent, #4ec3e0);
}

.qlist-note[b-bbuzz5564s] {
    padding: 0.6rem 1rem;
    border-top: 1px solid var(--player-panel-border, rgba(0, 0, 0, 0.12));
    color: var(--player-panel-note-text, #8a5a00);
    font-size: 0.92rem;
}
/* /Components/Assessments/Runner/Renderers/InteractionSwitchRenderer.razor.rz.scp.css */
.interaction-switch[b-k39r9iey8c] {
    width: 100%;
    max-width: 1380px;
    margin: 0 auto;
}

.interaction-switch .h4[b-k39r9iey8c] {
    font-size: calc(clamp(2.5rem, 3.9vw, 4.3rem) * var(--runner-font-scale, 1));
    text-align: center;
    font-weight: 400;
    line-height: 1.35;
    margin: 0.5rem auto 1.35rem;
    color: var(--player-stem-text);
}

/* NOTE: this scoped rule does not apply to the runner's RenderTreeBuilder-rendered stem
   (that uses inline styles in InteractionSwitchRenderer.RenderTextLine). The big gap below the
   LAST stem line is applied there; this keeps inter-line spacing tight for any non-builder path. */
.interaction-switch .line-stem[b-k39r9iey8c] {
    font-size: calc(clamp(1.35rem, 1.55vw, 1.9rem) * var(--runner-font-scale, 1) * 1.3) !important;
    text-align: center;
    font-weight: 400;
    line-height: 1.35;
    margin: 1.1rem auto 1.4rem !important;
    color: var(--player-stem-text);
}

.interaction-switch .line-prompt[b-k39r9iey8c] {
    font-size: calc(clamp(1.4rem, 1.8vw, 2.2rem) * var(--runner-font-scale, 1)) !important;
    text-align: center;
    line-height: 1.35;
    margin: 0.8rem auto 1.55rem !important;
}

.interaction-switch .line-body[b-k39r9iey8c] {
    font-size: calc(1.2rem * var(--runner-font-scale, 1));
}

.interaction-switch .mb-2:not(.audio-highlight)[b-k39r9iey8c],
.interaction-switch .mb-3[b-k39r9iey8c] {
    margin-bottom: 1.1rem !important;
}

.interaction-switch .word-list-counter[b-k39r9iey8c] {
    text-align: center;
    font-size: calc(1rem * var(--runner-font-scale, 1));
    margin-bottom: 1rem;
    letter-spacing: 0.03em;
}

/* Auto-generated "(Select x to y statements)" instruction above multi-select MCQ
   options — derived from the Min/Max ContentSubType tokens. Mirrors the look of
   the hand-authored cmr-smaller stem lines it replaces (centered, quieter than
   the stem). */
.interaction-switch .mcq-select-hint[b-k39r9iey8c] {
    text-align: center;
    font-size: calc(1.05rem * var(--runner-font-scale, 1));
    color: var(--player-stem-text);
    opacity: 0.75;
    margin: 0.15rem auto 0.9rem;
}

.interaction-switch .word-bank[b-k39r9iey8c] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    justify-content: center;
    margin: 1rem auto 2rem;
    max-width: 860px;
}

.interaction-switch .word-chip[b-k39r9iey8c] {
    background: transparent;
    color: var(--player-text, #111);
    border: 2px solid var(--player-option-border, #444);
    border-radius: 2rem;
    padding: 0.75rem 1.6rem;
    min-height: 2.8rem;
    font-size: calc(clamp(1.1rem, 1.3vw, 1.5rem) * var(--runner-font-scale, 1));
    font-weight: 400;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.interaction-switch .word-chip:hover:not(:disabled):not(.selected)[b-k39r9iey8c] {
    border-color: var(--player-accent, #1cb6c9);
    color: var(--player-accent, #1cb6c9);
}

.interaction-switch .word-chip.selected[b-k39r9iey8c] {
    background: var(--player-accent, #1cb6c9);
    color: #051217;
    border-color: var(--player-accent, #1cb6c9);
    font-weight: 600;
}

.interaction-switch .word-chip:focus-visible[b-k39r9iey8c] {
    outline: 2px solid var(--player-accent, #1cb6c9);
    outline-offset: 2px;
}

.interaction-switch .word-chip.placed[b-k39r9iey8c] {
    opacity: 0.4;
    border-color: var(--player-option-border, #444);
    color: var(--player-text, #111);
    cursor: pointer; /* remains clickable — click again to unplace */
}

.interaction-switch .word-chip.placed:hover[b-k39r9iey8c] {
    opacity: 0.65;
    border-color: var(--player-accent, #1cb6c9);
    color: var(--player-accent, #1cb6c9);
    background: transparent;
}

.interaction-switch .word-chip:disabled[b-k39r9iey8c] {
    opacity: 0.35;
    cursor: not-allowed;
}

.interaction-switch .compound-run[b-k39r9iey8c] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0.75rem 0 1.25rem;
    font-size: calc(clamp(1.2rem, 1.4vw, 1.65rem) * var(--runner-font-scale, 1));
    line-height: 1.7;
}

.interaction-switch .compound-text[b-k39r9iey8c] {
    white-space: pre-wrap;
}

.interaction-switch .compound-blank[b-k39r9iey8c] {
    border: 2px solid var(--player-option-border, #444);
    padding: 0.5rem 0.65rem;
    max-width: 100%;
    background: transparent;
    color: var(--player-text);
    font-size: inherit;
}

.interaction-switch .compound-blank:focus-visible[b-k39r9iey8c] {
    outline: 2px solid var(--player-accent, #1cb6c9);
    outline-offset: 2px;
}

.interaction-switch .compound-blank-sm[b-k39r9iey8c] {
    width: 180px;
}

.interaction-switch .compound-blank-md[b-k39r9iey8c] {
    width: min(420px, 90vw);
}

.interaction-switch .compound-blank-lg[b-k39r9iey8c] {
    width: min(100%, 90vw);
}

.interaction-switch .shortanswer-line[b-k39r9iey8c] {
    display: block;
    border: 3px solid var(--player-option-border, #444);
    background: transparent;
    color: var(--player-text);
    border-radius: 0;
    font-size: calc(1.25rem * var(--runner-font-scale, 1));
    padding: 0.9rem 1rem;
}

.interaction-switch .shortanswer-line:focus-visible[b-k39r9iey8c] {
    outline: 2px solid var(--player-accent, #1cb6c9);
    outline-offset: 2px;
}

.interaction-switch .shortanswer-line-short[b-k39r9iey8c] {
    width: 50%;
}

.interaction-switch .shortanswer-line-medium[b-k39r9iey8c] {
    width: 60%;
}

.interaction-switch .shortanswer-line-long[b-k39r9iey8c] {
    width: 100%;
}

.interaction-switch .shortanswer-textarea[b-k39r9iey8c] {
    width: 100%;
    min-height: 180px;
    border: 4px solid var(--player-option-border, #444);
    border-radius: 0;
    background: transparent;
    color: var(--player-text);
    font-size: calc(1.9rem * var(--runner-font-scale, 1));
    line-height: 1.35;
    padding: 1.4rem;
    resize: vertical;
}

.interaction-switch .shortanswer-textarea:focus-visible[b-k39r9iey8c] {
    outline: 2px solid var(--player-accent, #1cb6c9);
    outline-offset: 2px;
}

/* TrueFalse layout styles are global — see wwwroot/css/app.css */

@media (max-width: 768px) {
    .interaction-switch .h4[b-k39r9iey8c] {
        font-size: calc(clamp(1.8rem, 7vw, 2.8rem) * var(--runner-font-scale, 1));
    }

    .interaction-switch .line-stem[b-k39r9iey8c] {
        font-size: calc(1rem * var(--runner-font-scale, 1)) !important;
    }

    .interaction-switch .line-prompt[b-k39r9iey8c] {
        font-size: calc(clamp(1.15rem, 3.5vw, 1.6rem) * var(--runner-font-scale, 1)) !important;
    }


    .interaction-switch .shortanswer-line-short[b-k39r9iey8c],
    .interaction-switch .shortanswer-line-medium[b-k39r9iey8c] {
        width: 100%;
    }
}

.interaction-switch .LargeCentred[b-k39r9iey8c] {
    font-size: clamp(1.25rem, 3vw, 2.5rem);
    text-align: center;
}

.interaction-switch .LargeCentred-button[b-k39r9iey8c] {
    display: block;
    width: 100%;
    max-width: 640px;
    margin: 0.25rem auto;
}

.interaction-switch .divider-line[b-k39r9iey8c] {
    opacity: 0.5;
}

.interaction-switch .font-large[b-k39r9iey8c] {
    font-size: 1.25rem;
}

.interaction-switch .font-small[b-k39r9iey8c] {
    font-size: 0.95rem;
}

.interaction-switch .comment-box-fullv[b-k39r9iey8c] {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}

.interaction-switch .next-button[b-k39r9iey8c] {
    display: block;
    width: 100%;
    max-width: 640px;
    margin: 0.5rem auto 0;
}

.interaction-switch.profile-dark[b-k39r9iey8c] {
    background: #000;
    color: #fff;
    padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 3vw, 2rem);
    border-radius: 0.5rem;
}

.interaction-switch.profile-dark .LargeCentred[b-k39r9iey8c] {
    color: #fff;
}

.interaction-switch.profile-dark .divider-line[b-k39r9iey8c] {
    border-color: rgba(255, 255, 255, 0.35);
    opacity: 1;
}

.interaction-switch .profile-radio-row[b-k39r9iey8c] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    align-items: stretch;
}

.interaction-switch.profile-dark .profile-radio-row .btn[b-k39r9iey8c] {
    min-height: 84px;
    border: 2px solid #fff;
    border-radius: 0.75rem;
    font-weight: 600;
    padding: 1.25rem 1rem;
    white-space: normal;
}

.interaction-switch.profile-dark .profile-radio-row .btn-outline-primary[b-k39r9iey8c] {
    color: #fff;
    background: transparent;
}

.interaction-switch.profile-dark .profile-radio-row .btn-primary[b-k39r9iey8c] {
    color: #fff;
    background: #3a3a3a;
}

.interaction-switch.profile-dark .profile-radio-row .btn-primary:focus[b-k39r9iey8c],
.interaction-switch.profile-dark .profile-radio-row .btn-outline-primary:focus[b-k39r9iey8c] {
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

/* ═══════════════════════════════════════════
   Likert / RadioSelect scale
   ═══════════════════════════════════════════ */

.interaction-switch .likert-scale-row[b-k39r9iey8c] {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    max-width: 720px;
    margin: 1.75rem auto 2.5rem;
    padding: 0 0.5rem;
}

/* Connecting track — sits behind the dots, vertically centred on them */
.interaction-switch .likert-track[b-k39r9iey8c] {
    position: absolute;
    top: 0.7rem; /* half of --dot-size (1.4rem) */
    left: 1.5rem;
    right: 1.5rem;
    height: 2px;
    background: var(--player-option-border, #444);
    pointer-events: none;
    z-index: 0;
}

/* Each option: dot above, label below — whole column is the tap target */
.interaction-switch .likert-option[b-k39r9iey8c] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    flex: 0 0 auto;
    min-width: 3rem;
    transition: opacity 0.15s;
}

/* Circle marker */
.interaction-switch .likert-dot[b-k39r9iey8c] {
    display: block;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    border: 2px solid var(--player-option-border, #444);
    background: var(--player-bg, #f0f0f0); /* fill over the track line */
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

/* Label text */
.interaction-switch .likert-label[b-k39r9iey8c] {
    font-size: calc(clamp(0.8rem, 0.95vw, 1.05rem) * var(--runner-font-scale, 1));
    color: var(--player-text, #111);
    text-align: center;
    white-space: normal;
    max-width: 5.5rem;
    line-height: 1.25;
    transition: color 0.2s ease;
}

/* Hover */
.interaction-switch .likert-option:hover:not(:disabled) .likert-dot[b-k39r9iey8c] {
    border-color: var(--player-accent, #1cb6c9);
    transform: scale(1.15);
}

.interaction-switch .likert-option:hover:not(:disabled) .likert-label[b-k39r9iey8c] {
    color: var(--player-accent, #1cb6c9);
}

/* Selected */
.interaction-switch .likert-option.selected .likert-dot[b-k39r9iey8c] {
    background: var(--player-accent, #1cb6c9);
    border-color: var(--player-accent, #1cb6c9);
    transform: scale(1.3);
}

.interaction-switch .likert-option.selected .likert-label[b-k39r9iey8c] {
    color: var(--player-accent, #1cb6c9);
    font-weight: 600;
}

/* Focus ring */
.interaction-switch .likert-option:focus-visible .likert-dot[b-k39r9iey8c] {
    outline: 2px solid var(--player-accent, #1cb6c9);
    outline-offset: 3px;
}

/* Disabled */
.interaction-switch .likert-option:disabled[b-k39r9iey8c] {
    opacity: 0.4;
    cursor: not-allowed;
}

.interaction-switch .audio-highlight[b-k39r9iey8c] {
    outline: 2px solid var(--player-audio-highlight, #f5a623);
    outline-offset: 4px;
    border-radius: 0;
}

.interaction-switch .word-chip.audio-highlight[b-k39r9iey8c],
.interaction-switch .tf-row.audio-highlight[b-k39r9iey8c] {
    outline: 2px solid var(--player-audio-highlight, #f5a623);
    outline-offset: 3px;
}

/* ─── Ordering ─── */

.interaction-switch .ordering-list[b-k39r9iey8c] {
    max-width: 720px;
    margin: 1.5rem auto;
}

.interaction-switch .ordering-item[b-k39r9iey8c] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    margin-bottom: 0.4rem;
    border: 2px solid var(--player-option-border, #444);
    background: var(--player-option-bg, transparent);
    color: var(--player-option-text, inherit);
    font-size: calc(clamp(1.1rem, 1.3vw, 1.5rem) * var(--runner-font-scale, 1));
}

.interaction-switch .ordering-rank[b-k39r9iey8c] {
    min-width: 2rem;
    text-align: center;
    font-weight: 700;
    color: var(--player-accent, #1cb6c9);
}

.interaction-switch .ordering-text[b-k39r9iey8c] {
    flex: 1 1 0;
}

.interaction-switch .ordering-buttons[b-k39r9iey8c] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.interaction-switch .ordering-btn[b-k39r9iey8c] {
    background: transparent;
    border: 1px solid var(--player-option-border, #444);
    color: var(--player-text, inherit);
    font-size: 0.85rem;
    padding: 0.15rem 0.5rem;
    cursor: pointer;
    line-height: 1;
}

.interaction-switch .ordering-btn:hover:not(:disabled)[b-k39r9iey8c] {
    border-color: var(--player-accent, #1cb6c9);
    color: var(--player-accent, #1cb6c9);
}

.interaction-switch .ordering-btn:disabled[b-k39r9iey8c] {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ─── Matching ─── */

.interaction-switch .matching-container[b-k39r9iey8c] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    max-width: 860px;
    margin: 1.5rem auto;
}

.interaction-switch .matching-column[b-k39r9iey8c] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.interaction-switch .matching-item[b-k39r9iey8c] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 1rem;
    border: 2px solid var(--player-option-border, #444);
    background: var(--player-option-bg, transparent);
    color: var(--player-option-text, inherit);
    font-size: calc(clamp(1rem, 1.2vw, 1.4rem) * var(--runner-font-scale, 1));
    cursor: pointer;
    text-align: left;
    transition: border-color 0.12s, background 0.12s;
}

.interaction-switch .matching-item:disabled[b-k39r9iey8c] {
    opacity: 0.5;
    cursor: not-allowed;
}

.interaction-switch .matching-active[b-k39r9iey8c] {
    border-color: var(--player-accent, #1cb6c9) !important;
    background: rgba(28, 182, 201, 0.15);
}

.interaction-switch .matching-matched[b-k39r9iey8c] {
    border-color: var(--player-accent, #1cb6c9);
    background: var(--player-accent, #1cb6c9);
    color: #fff;
    font-weight: 600;
}

.interaction-switch .matching-clickable:not(:disabled)[b-k39r9iey8c] {
    border-color: var(--player-accent, #1cb6c9);
    border-style: dashed;
}

.interaction-switch .matching-clickable:not(:disabled):hover[b-k39r9iey8c] {
    background: rgba(28, 182, 201, 0.2);
}

.interaction-switch .matching-number[b-k39r9iey8c] {
    min-width: 1.8rem;
    font-weight: 700;
}

.interaction-switch .matching-text[b-k39r9iey8c] {
    flex: 1 1 0;
}

.interaction-switch .matching-pairs-summary[b-k39r9iey8c] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin: 1rem auto;
    max-width: 860px;
}

.interaction-switch .matching-pair-row[b-k39r9iey8c] {
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--player-accent, #1cb6c9);
    border-radius: 1rem;
    font-size: calc(0.95rem * var(--runner-font-scale, 1));
    color: var(--player-accent, #1cb6c9);
    font-weight: 600;
}

@media (max-width: 768px) {
    .interaction-switch .matching-container[b-k39r9iey8c] {
        grid-template-columns: 1fr;
    }

    .interaction-switch .ordering-item[b-k39r9iey8c] {
        font-size: 1rem;
    }

    .interaction-switch .matching-item[b-k39r9iey8c] {
        font-size: 1rem;
    }

    .interaction-switch .scale-container[b-k39r9iey8c] {
        overflow-x: auto;
    }

    .interaction-switch .scale-row[b-k39r9iey8c] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .interaction-switch .scale-header-row[b-k39r9iey8c] {
        display: none;
    }

    .interaction-switch .categorize-bucket-options[b-k39r9iey8c] {
        flex-direction: column;
    }

    .interaction-switch .radio-roles-container[b-k39r9iey8c] {
        overflow-x: auto;
    }
}

/* ─── Scale / Likert ─── */

.interaction-switch .scale-container[b-k39r9iey8c] {
    max-width: 860px;
    margin: 1.5rem auto;
}

.interaction-switch .scale-header-row[b-k39r9iey8c] {
    display: grid;
    grid-template-columns: 1fr repeat(var(--scale-cols, 5), minmax(2.5rem, 4rem));
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.interaction-switch .scale-header-cell[b-k39r9iey8c] {
    text-align: center;
    font-weight: 700;
    font-size: calc(0.95rem * var(--runner-font-scale, 1));
    color: var(--player-accent, #1cb6c9);
}

.interaction-switch .scale-statement-header[b-k39r9iey8c] {
    /* empty spacer for the statement column */
}

.interaction-switch .scale-row[b-k39r9iey8c] {
    display: grid;
    grid-template-columns: 1fr repeat(var(--scale-cols, 5), minmax(2.5rem, 4rem));
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--player-text, #111) 12%, transparent);
}

.interaction-switch .scale-statement[b-k39r9iey8c] {
    font-size: calc(clamp(1rem, 1.2vw, 1.3rem) * var(--runner-font-scale, 1));
}

.interaction-switch .scale-cell[b-k39r9iey8c] {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.interaction-switch .scale-cell input[type="radio"][b-k39r9iey8c] {
    width: 1.4rem;
    height: 1.4rem;
    accent-color: var(--player-accent, #1cb6c9);
    cursor: pointer;
}

/* ─── RadioRoles (multi-row radio grid) ─── */

.interaction-switch .radio-roles-container[b-k39r9iey8c] {
    max-width: 960px;
    margin: 1.5rem auto;
}

.interaction-switch .radio-roles-header-row[b-k39r9iey8c] {
    display: grid;
    grid-template-columns: 1fr repeat(var(--rr-cols, 4), minmax(5rem, 1fr));
    gap: 0.5rem;
    align-items: end;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid color-mix(in srgb, var(--player-text, #111) 18%, transparent);
}

.interaction-switch .radio-roles-header-cell[b-k39r9iey8c] {
    text-align: center;
    font-weight: 600;
    font-size: calc(0.85rem * var(--runner-font-scale, 1));
    color: var(--player-accent, #1cb6c9);
    line-height: 1.25;
    padding: 0 0.25rem;
}

.interaction-switch .radio-roles-statement-header[b-k39r9iey8c] {
    /* empty spacer for the statement column */
}

.interaction-switch .radio-roles-row[b-k39r9iey8c] {
    display: grid;
    grid-template-columns: 1fr repeat(var(--rr-cols, 4), minmax(5rem, 1fr));
    gap: 0.5rem;
    align-items: center;
    padding: 0.65rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--player-text, #111) 10%, transparent);
}

.interaction-switch .radio-roles-statement[b-k39r9iey8c] {
    font-size: calc(clamp(1rem, 1.2vw, 1.3rem) * var(--runner-font-scale, 1));
}

.interaction-switch .radio-roles-cell[b-k39r9iey8c] {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.interaction-switch .radio-roles-cell input[type="radio"][b-k39r9iey8c] {
    width: 1.4rem;
    height: 1.4rem;
    accent-color: var(--player-accent, #1cb6c9);
    cursor: pointer;
}

.interaction-switch .radio-roles-cell-label[b-k39r9iey8c] {
    /* Hidden on desktop (headers are visible); shown on mobile for context */
    display: none;
}

@media (max-width: 768px) {
    .interaction-switch .radio-roles-header-row[b-k39r9iey8c] {
        display: none;
    }

    .interaction-switch .radio-roles-row[b-k39r9iey8c] {
        grid-template-columns: 1fr;
        gap: 0.4rem;
        padding: 0.85rem 0;
    }

    .interaction-switch .radio-roles-cell[b-k39r9iey8c] {
        justify-content: flex-start;
        gap: 0.5rem;
    }

    .interaction-switch .radio-roles-cell-label[b-k39r9iey8c] {
        display: inline;
        font-size: calc(0.9rem * var(--runner-font-scale, 1));
    }
}

/* ─── Categorize / Sort ─── */

.interaction-switch .categorize-container[b-k39r9iey8c] {
    max-width: 860px;
    margin: 1.5rem auto;
}

.interaction-switch .categorize-item-row[b-k39r9iey8c] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--player-text, #111) 12%, transparent);
}

.interaction-switch .categorize-item-text[b-k39r9iey8c] {
    flex: 1 1 0;
    font-size: calc(clamp(1rem, 1.2vw, 1.3rem) * var(--runner-font-scale, 1));
}

.interaction-switch .categorize-bucket-options[b-k39r9iey8c] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.interaction-switch .categorize-bucket[b-k39r9iey8c] {
    background: transparent;
    color: var(--player-text, inherit);
    border: 2px solid var(--player-option-border, #444);
    border-radius: 1.5rem;
    padding: 0.45rem 1.2rem;
    font-size: calc(0.95rem * var(--runner-font-scale, 1));
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}

.interaction-switch .categorize-bucket:hover:not(:disabled):not(.categorize-selected)[b-k39r9iey8c] {
    border-color: var(--player-accent, #1cb6c9);
    color: var(--player-accent, #1cb6c9);
}

.interaction-switch .categorize-selected[b-k39r9iey8c] {
    background: var(--player-accent, #1cb6c9);
    color: #fff;
    border-color: var(--player-accent, #1cb6c9);
    font-weight: 600;
}

.interaction-switch .categorize-bucket:disabled[b-k39r9iey8c] {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ─── Navigation buttons (branching Yes/No/Unsure) ─── */
/* Uses global .mcq-option styles. Override padding/alignment because nav buttons
   have no .mcq-letter span — the 3.6rem left offset is not needed here. */

.interaction-switch .nav-buttons .mcq-option[b-k39r9iey8c] {
    padding: 0.72rem 1rem;
    text-align: center;
}

/* ─── Media ─── */

.interaction-switch .media-image-container[b-k39r9iey8c] {
    text-align: center;
    max-width: 720px;
    margin: 1rem auto;
}

.interaction-switch .media-image[b-k39r9iey8c] {
    max-width: 100%;
    height: auto;
    border-radius: 0.25rem;
}

.interaction-switch .media-video-container[b-k39r9iey8c] {
    text-align: center;
    max-width: 720px;
    margin: 1rem auto;
}

.interaction-switch .media-video[b-k39r9iey8c] {
    max-width: 100%;
    height: auto;
    border-radius: 0.25rem;
}

.interaction-switch .media-audio-container[b-k39r9iey8c] {
    max-width: 720px;
    margin: 1rem auto;
}

.interaction-switch .media-audio[b-k39r9iey8c] {
    width: 100%;
}
/* /Components/Assessments/Runner/Renderers/McqOptionGroup.razor.rz.scp.css */
/* MCQ option button styles are global — see wwwroot/css/app.css */
/* /Components/Assessments/Runner/WordBankPanel.razor.rz.scp.css */
.wbank-backdrop[b-fdb5quzmus] {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    justify-content: flex-end;
}

.wbank-panel[b-fdb5quzmus] {
    width: min(360px, 86vw);
    height: 100%;
    background: var(--player-panel-bg, #fff);
    color: var(--player-text, #111);
    border-left: 1px solid var(--player-panel-border, rgba(0, 0, 0, 0.12));
    display: flex;
    flex-direction: column;
    box-shadow: -2px 0 14px rgba(0, 0, 0, 0.3);
}

.wbank-head[b-fdb5quzmus] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--player-panel-border, rgba(0, 0, 0, 0.12));
}

.wbank-title[b-fdb5quzmus] {
    font-size: 1.15rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--player-accent, #4ec3e0);
}

.wbank-close[b-fdb5quzmus] {
    background: transparent;
    border: none;
    color: var(--player-text, #111);
    font-size: 1.2rem;
    cursor: pointer;
    line-height: 1;
    padding: 0.25rem;
}

.wbank-empty[b-fdb5quzmus] {
    padding: 1rem;
    opacity: 0.7;
}

.wbank-words[b-fdb5quzmus] {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0.75rem;
    overflow-y: auto;
    flex: 1;
    columns: 2;
    column-gap: 1rem;
}

.wbank-word[b-fdb5quzmus] {
    padding: 0.2rem 0;
    break-inside: avoid;
    font-size: 1.02rem;
}
/* /Components/Layout/AppHeader.razor.rz.scp.css */
.app-header--admin[b-sred72s2v2] {
    background: #000;
    color: #fff;
    display: grid;
    /* left (hamburger) | centre (CEWA logo, natural width) | spacer (eats slack) | right (strip, natural width) */
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: 0.75rem;
    /* No top/bottom/right padding: the right-hand strip artwork sits flush to
       the top, bottom and right edges of the black band. The band height is
       fixed by the strip's explicit pixel height (below) — keep this value in
       sync with .app-header-strip height so there's no top/bottom gap.
       Left padding kept so the product logo isn't jammed to the edge. */
    min-height: 56px;
    padding: 0 0 0 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

/* Left cluster */
.app-header-left[b-sred72s2v2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Centre cluster — sized to content (CEWA logo at natural width) */
.app-header-center[b-sred72s2v2] {
    display: flex;
    align-items: center;
}

/* Right panel — stretches to the full band height (no padding) so the strip
   artwork can fill it flush, top to bottom and out to the right edge. The
   logout button is the only chrome-level button here; it sits to the LEFT of
   the strip artwork (because the strip is flush to the right edge). */
.app-header-right[b-sred72s2v2] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    align-self: stretch;
    /* gap MUST be 0: the logout button is hidden at rest with
       pointer-events: none, so an unhovered gap between the button and
       the strip would break the strip-hover → button-hover handoff
       (cursor crosses dead pixels, both hover selectors stop matching,
       button reverts to invisible+unclickable before its own :hover
       can take over). With gap: 0 every pixel along the band's right
       edge belongs to either strip or button — no dead zone. */
    gap: 0;
}

/* Chrome-level Log Out button rendered for every authenticated page —
   guarantees an admin page always has a sign-out affordance even when it
   doesn't render its own UserSettingsBar inline. Hidden at rest so it
   doesn't duplicate the inline button on pages that DO have
   UserSettingsBar; revealed on hover-over-the-image-strip (cursor cue
   for the gesture) or by keyboard focus (Tab still reaches it because
   we use opacity-only hide, not visibility/display). */
.app-header-logout[b-sred72s2v2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    /* No right margin — the button must sit flush against the strip's
       left edge so the cursor can transition strip → button without
       crossing dead pixels. */
    margin: 0;
    border: 0;
    border-radius: 14px;
    background: #1a1a1a;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    /* Hidden default — invisible + click-proof but still tabbable. The
       reveal conditions below restore opacity + pointer-events. */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, background 0.15s ease;
}

/* Reveal triggers — three independent conditions:

     1. Strip-hover via :has() on the parent. DOM order is
        button-then-strip (so the strip sits flush right under
        justify-content: flex-end), which means the sibling combinator
        `~` can't see the strip from the button's position. `:has()`
        sidesteps the ordering: "select the right block that CONTAINS a
        hovered strip, then descend to the button." Both directions
        regardless of DOM order.

     2. Button-hover via :hover on the button. Once strip-hover has
        already set pointer-events: auto, the cursor can move onto the
        button and its own :hover keeps it revealed. Crucially this
        works ONLY because gap: 0 on the parent means the cursor never
        passes through an unhovered pixel where pointer-events: none
        would re-engage and lock the button out before :hover fires.

     3. Keyboard focus-visible — Tab navigation still reaches the
        button (we use opacity:0, not visibility/display), and the
        focus ring reveals it for keyboard users. Required for tenants
        without a strip image where #1 can never fire.

   Tenants WITHOUT a HeaderStripImageUrl: #1 is unreachable, so we add
   a defensive `.app-header-right:hover` fallback gated by `:not(:has)`
   — hovering anywhere in the right block reveals the button only on
   those tenants. Tenants WITH a strip keep the stricter strip-only
   trigger. */
.app-header-right:has(.app-header-strip:hover) .app-header-logout[b-sred72s2v2],
.app-header-right:not(:has(.app-header-strip)):hover .app-header-logout[b-sred72s2v2],
.app-header-logout:hover[b-sred72s2v2],
.app-header-logout:focus-visible[b-sred72s2v2] {
    opacity: 1;
    pointer-events: auto;
}

.app-header-logout:hover[b-sred72s2v2],
.app-header-logout:focus-visible[b-sred72s2v2] {
    background: #ff9f00;
    color: #1a1a1a;
    outline: none;
}

.app-header-logout > i[b-sred72s2v2] {
    font-size: 14px;
    line-height: 1;
}

/* Label is icon-only at rest; expands on hover/focus. Keeps the chrome
   compact on dense pages while still making the button discoverable. */
.app-header-logout-label[b-sred72s2v2] {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width 0.18s ease;
}

.app-header-logout:hover .app-header-logout-label[b-sred72s2v2],
.app-header-logout:focus-visible .app-header-logout-label[b-sred72s2v2] {
    max-width: 80px;
}

/* Strip is a real <img>; it runs flush to the band's top, bottom and right
   edges (no padding). Height is an EXPLICIT pixel value — NOT height:100% —
   because the grid row has no definite height for a percentage to resolve
   against, so 100% would fall back to the artwork's large intrinsic height and
   blow the band up. width:auto keeps the aspect ratio, so capping the height
   also caps the width proportionally (no distortion / clipping). */
.app-header-strip[b-sred72s2v2] {
    height: 56px;
    width: auto;
    display: block;
    object-fit: cover;
}

.app-header-left[b-sred72s2v2] {
    grid-column: 1;
}

.app-header-center[b-sred72s2v2] {
    grid-column: 2;
}

.app-header-spacer[b-sred72s2v2] {
    grid-column: 3;
}

.app-header-right[b-sred72s2v2] {
    grid-column: 4;
}

/* strip/control panel lives here */

/* Logos */
.app-header-logo[b-sred72s2v2] {
    height: 44px;
    width: auto;
    object-fit: contain;
}

.app-header-logo--product[b-sred72s2v2] {
    height: 44px;
}

.app-header-logo--tenant[b-sred72s2v2] {
    height: 44px;
}

/* Hamburger button stays visible on black */
.nav-toggle[b-sred72s2v2] {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    border-radius: 6px;
    width: 44px;
    height: 44px;
    cursor: pointer;
}

/* Build version tag — kept here for reference; the live tag now lives in
   PageFooter.razor.css. The header used to render `.app-build-tag` but it
   was moved to the global footer per Stefan's v04 cleanup. */

/* Keep form controls readable */
.app-font-picker select[b-sred72s2v2],
.app-auth-btn[b-sred72s2v2] {
    color: #111;
}

/* On mobile, center logo can be hidden if needed later */
@media (max-width: 768px) {
    .app-header--admin[b-sred72s2v2] {
        grid-template-columns: auto 1fr auto;
        /* Shorter band on mobile — keep min-height in sync with the strip. */
        min-height: 44px;
    }

    .app-header-strip[b-sred72s2v2] {
        height: 44px;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-q83a3bgek8] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-q83a3bgek8] {
    flex: 1;
}

.sidebar[b-q83a3bgek8] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-q83a3bgek8] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-q83a3bgek8]  a, .top-row[b-q83a3bgek8]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-q83a3bgek8]  a:hover, .top-row[b-q83a3bgek8]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-q83a3bgek8]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-q83a3bgek8] {
        justify-content: space-between;
    }

    .top-row[b-q83a3bgek8]  a, .top-row[b-q83a3bgek8]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-q83a3bgek8] {
        flex-direction: row;
    }

    .sidebar[b-q83a3bgek8] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-q83a3bgek8] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-q83a3bgek8]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-q83a3bgek8], article[b-q83a3bgek8] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-q83a3bgek8] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-q83a3bgek8] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }


.shell[b-q83a3bgek8] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.shell-header[b-q83a3bgek8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.shell-body[b-q83a3bgek8] {
    flex: 1;
    display: flex;
    min-height: 0;
    position: relative;
}

.shell-aside[b-q83a3bgek8] {
    width: 260px;
    min-height: 0;
}

.shell-main[b-q83a3bgek8] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.shell-main--full[b-q83a3bgek8] {
    padding: 1rem;
}

.shell-tabs[b-q83a3bgek8] {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.shell-content[b-q83a3bgek8] {
    padding: 1rem;
    overflow: auto;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-8ykrtpd01r] {
    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-8ykrtpd01r] {
    background-color: rgba(255, 255, 255, 0.5);
}

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

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

.bi[b-8ykrtpd01r] {
    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-8ykrtpd01r] {
    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-8ykrtpd01r] {
    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-8ykrtpd01r] {
    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-8ykrtpd01r] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

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

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

    .nav-item[b-8ykrtpd01r]  .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-8ykrtpd01r]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

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

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

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

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

    .nav-scrollable[b-8ykrtpd01r] {
        /* 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/PageFooter.razor.rz.scp.css */
/* Thin global footer. Sits below .app-body. Greyscale + tiny so it doesn't
   compete with page content. */
.app-footer[b-ei52vdht59] {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    padding: 4px 12px;
    background: var(--admin-charcoal, #1f1f1f);
    color: rgba(255, 255, 255, 0.55);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.app-footer-build[b-ei52vdht59] {
    font-size: 0.65rem;
    white-space: nowrap;
    user-select: all;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-v2eh1yoxb4],
.components-reconnect-repeated-attempt-visible[b-v2eh1yoxb4],
.components-reconnect-failed-visible[b-v2eh1yoxb4],
.components-pause-visible[b-v2eh1yoxb4],
.components-resume-failed-visible[b-v2eh1yoxb4],
.components-rejoining-animation[b-v2eh1yoxb4] {
    display: none;
}

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


#components-reconnect-modal[b-v2eh1yoxb4] {
    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-v2eh1yoxb4 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-v2eh1yoxb4 {
    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/Layout/ShellLoading.razor.rz.scp.css */
/* Fills the content area and centres the spinner both axes, so the loading
   symbol sits in the middle of the page while the shell bootstraps. */
.shell-loading[b-fed0v7e62j] {
    /* position:relative anchors Syncfusion's absolutely-positioned spinner
       pane so it centres within this box rather than the whole viewport. */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 70vh;
}
/* /Components/Layout/StudentAssessmentLayout.razor.rz.scp.css */
.student-assessment-layout[b-p84h15tmew] {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    width: 100vw;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.assessment-header-wrapper[b-p84h15tmew] {
    flex: 0 0 auto;
}

@media (max-width: 1024px) {
    .assessment-header-wrapper[b-p84h15tmew] {
        display: none;
    }
}
/* /Components/Layout/UserSettingsBar.razor.rz.scp.css */
/* Stefan v04 User Settings zone (with Patrick "per-button collapse" override).
   Right-aligned strip beneath the Header. 16 px padding top + right.
   Default state: each button shows only its icon (A+/A- stay as their text
   since they have no icon). Hovering or keyboard-focusing a single button
   expands ONLY that button to also show its label.

   The 30 px gap between the School Header (left) and User Settings (right)
   is enforced by the host page's School Header width — see SKILL.md. */

.user-settings[b-u434hqpko8] {
    /* Inline flex item — pages render the bar as a sibling of the School
       Header inside a `.page-top-row` flex container. The bar takes its
       own auto width on the right; the school header takes the remaining
       width on the left. See AssessmentDashboard.razor for the canonical
       placement. */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    background: transparent;
    box-sizing: border-box;
    flex-shrink: 0;
}

.user-settings-btn[b-u434hqpko8] {
    background: var(--admin-charcoal);
    color: var(--admin-white);
    border: 1px solid var(--admin-charcoal);
    /* Tight icon-only padding by default; expanding pushes back to ~12 px. */
    padding: 0 8px;
    transition: background 0.12s, color 0.12s, border-color 0.12s, padding 0.15s;
}

.user-settings-btn > i[b-u434hqpko8] {
    color: var(--admin-white);
}

/* Stefan: orange rollover for every User Settings button. */
.user-settings-btn:hover:not(:disabled)[b-u434hqpko8] {
    background: var(--admin-rollover-orange);
    color: var(--admin-charcoal);
    border-color: var(--admin-rollover-orange);
}

.user-settings-btn:hover:not(:disabled) > i[b-u434hqpko8] {
    color: var(--admin-charcoal);
}

.user-settings-btn:disabled[b-u434hqpko8] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* A+ / A− narrow buttons — text-only at every state, no collapse. */
.user-settings-font-btn[b-u434hqpko8] {
    min-width: 38px;
    padding: 0 10px;
}

/* Per-button collapse — labels live in <span class="user-settings-label">.
   Hidden by default; revealed only on the SPECIFIC button being hovered or
   keyboard-focused. Uses `display: none` → `inline` so the button auto-fits
   its content and the row stays tidy at every state. */
.user-settings-label[b-u434hqpko8] {
    display: none;
}

.user-settings-btn:hover .user-settings-label[b-u434hqpko8],
.user-settings-btn:focus-visible .user-settings-label[b-u434hqpko8] {
    display: inline;
}

/* Restore standard 12 px padding on the hovered/focused button so the icon
   and label have breathing room. */
.user-settings-btn:hover[b-u434hqpko8],
.user-settings-btn:focus-visible[b-u434hqpko8] {
    padding: 0 12px;
}

/* LOG OUT — Stefan v05 (2026-04-30): the duotone icon was rendering grey
   because `color` only paints duotone's primary layer; the secondary layer
   stays at ~40% opacity, giving a washed-out look against the charcoal
   button. Force both layers to fully-opaque white at rest, and to charcoal
   on hover so the icon turns black against the orange rollover.
   (`fa-duotone fa-light` exposes the standard --fa-primary-* / --fa-secondary-*
   custom properties; setting them is the canonical way to repaint duotone
   icons without changing the icon family.) */
.user-settings-logout > i[b-u434hqpko8] {
    --fa-primary-color: var(--admin-white);
    --fa-secondary-color: var(--admin-white);
    --fa-primary-opacity: 1;
    --fa-secondary-opacity: 1;
}

.user-settings-logout:hover:not(:disabled) > i[b-u434hqpko8],
.user-settings-logout:focus-visible:not(:disabled) > i[b-u434hqpko8] {
    --fa-primary-color: var(--admin-charcoal);
    --fa-secondary-color: var(--admin-charcoal);
}
/* /Components/Navigation/OmniaNavTree.razor.rz.scp.css */
/******************************************/
/** Omnia TreeView styling               **/
/******************************************/

/* Reset/cleanup Syncfusion defaults for this tree */
.omnia-nav-container[b-xkdvvwiacy]  .e-list-item.e-active .e-fullrow {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.omnia-nav-container[b-xkdvvwiacy]  .e-list-item .e-text-content:focus,
.omnia-nav-container[b-xkdvvwiacy]  .e-list-item .e-text-content:active {
    outline: none !important;
    box-shadow: none !important;
}

/* Hide Syncfusion expand/collapse chevrons */
.omnia-nav-container[b-xkdvvwiacy]  .e-icons.e-icon-collapsible,
.omnia-nav-container[b-xkdvvwiacy]  .e-icons.e-icon-expandable {
    display: none !important;
}

/* Kill the Syncfusion theme's left padding on the root list so the
   REGIONAL / SCHOOL tiles run flush to the menu's left edge — the
   default ~16px gutter is dead space. Nested lists keep their own
   indentation, so child rows (DASHBOARD etc.) shift left by the same
   amount and relative indents are preserved. */
.omnia-nav-container[b-xkdvvwiacy]  #OmniaNavTree > .e-ul {
    padding-left: 0 !important;
}

/*----------------------------------------
  LEVEL 1 – YEAR tiles
-----------------------------------------*/

.omnia-nav-container[b-xkdvvwiacy]  #OmniaNavTree > .e-ul > .e-list-item > .e-text-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 42px;
    padding: 0 1rem 0 2.2rem !important; /* space for triangle */
    margin-bottom: 4px;
    background-color: #e0e0e0;
    border-radius: 0;
    border-left: 4px solid transparent;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #333333;
    position: relative !important;
}

    .omnia-nav-container[b-xkdvvwiacy]  #OmniaNavTree > .e-ul > .e-list-item > .e-text-content:hover {
        background-color: #d4d4d4;
    }

    /* Triangle on YEAR tiles */
    .omnia-nav-container[b-xkdvvwiacy]  #OmniaNavTree > .e-ul > .e-list-item > .e-text-content::before {
        content: "";
        position: absolute;
        left: 0.6rem;
        width: 0;
        height: 0;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-left: 8px solid #777777;
    }

/*----------------------------------------
  LEVEL 2 – headers (YEAR LEVEL, CLASSES)
-----------------------------------------*/

.omnia-nav-container[b-xkdvvwiacy]  #OmniaNavTree > .e-ul > .e-list-item > .e-ul > .e-list-item > .e-text-content {
    background: transparent;
    border-radius: 0;
    margin: 6px 0 3px 0;
    padding: 0 0 3px 0.6rem;
    border-bottom: 1px solid #e0e0e0;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #b4241c;
}

/*----------------------------------------
  LEVEL 3 – items under headers
-----------------------------------------*/

.omnia-nav-container[b-xkdvvwiacy]  #OmniaNavTree > .e-ul > .e-list-item > .e-ul > .e-list-item > .e-ul > .e-list-item > .e-text-content {
    background: transparent;
    border-radius: 0;
    border: none;
    margin: 0;
    padding: 2px 0 2px 1rem;
    font-size: 0.86rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: #333333;
}

    /* Hover */
    .omnia-nav-container[b-xkdvvwiacy]  #OmniaNavTree > .e-ul > .e-list-item > .e-ul > .e-list-item > .e-ul > .e-list-item > .e-text-content:hover {
        background-color: #f3f3f3;
    }

/*----------------------------------------
  ACTIVE STATES
-----------------------------------------*/

/* 1. Generic Default: Active text is RED (for Level 2/3) */
.omnia-nav-container[b-xkdvvwiacy]  #OmniaNavTree .e-list-item.e-active .e-text-content,
.omnia-nav-container[b-xkdvvwiacy]  #OmniaNavTree .e-list-item.e-active .e-list-text {
    color: #b4241c !important;
    background-color: transparent !important;
    font-weight: 600;
}

/* 2. Level 1 Exception: YEAR tiles are WHITE text on RED background */
/* We must target .e-list-text explicitly to override rule #1 above */

/* Case A: The tile itself is active */
.omnia-nav-container[b-xkdvvwiacy]  #OmniaNavTree > .e-ul > .e-list-item.e-active > .e-text-content,
.omnia-nav-container[b-xkdvvwiacy]  #OmniaNavTree > .e-ul > .e-list-item.e-active > .e-text-content .e-list-text,
/* Case B: A child inside the tile is active (parent selection) */
.omnia-nav-container[b-xkdvvwiacy]  #OmniaNavTree > .e-ul > .e-list-item:has(.e-list-item.e-active) > .e-text-content,
.omnia-nav-container[b-xkdvvwiacy]  #OmniaNavTree > .e-ul > .e-list-item:has(.e-list-item.e-active) > .e-text-content .e-list-text {
    background-color: #b4241c !important;
    color: #ffffff !important;
}

    /* Ensure the triangle arrow turns white on the red background */
    .omnia-nav-container[b-xkdvvwiacy]  #OmniaNavTree > .e-ul > .e-list-item.e-active > .e-text-content::before,
    .omnia-nav-container[b-xkdvvwiacy]  #OmniaNavTree > .e-ul > .e-list-item:has(.e-list-item.e-active) > .e-text-content::before {
        border-left-color: #ffffff;
    }
/* /Components/Pages/Admin/AdminFunctionWindows/AdminFunctionWindows.razor.rz.scp.css */
.admin-function-windows-page[b-sgn2esqhh3] {
    padding: 16px;
    max-width: 720px;
    font-family: var(--admin-font);
    color: var(--admin-charcoal);
}

.afw-help[b-sgn2esqhh3] {
    color: var(--admin-text-muted);
    font-size: 13px;
    margin: 8px 0 16px;
}

.afw-row[b-sgn2esqhh3] {
    border: 1px solid var(--admin-surface-border);
    background: var(--admin-white, #fff);
    border-radius: 4px;
    padding: 12px 14px;
    margin-bottom: 14px;
}

.afw-row-header[b-sgn2esqhh3] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 10px;
}

.afw-row-header h3[b-sgn2esqhh3] {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}

.afw-row-key[b-sgn2esqhh3] {
    font-family: monospace;
    font-size: 11px;
    color: var(--admin-text-muted);
}

.afw-row-grid[b-sgn2esqhh3] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    align-items: start;
}

.afw-row-grid > label[b-sgn2esqhh3],
.afw-row-grid > fieldset[b-sgn2esqhh3] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
}

.afw-row-grid input[type=datetime-local][b-sgn2esqhh3],
.afw-row-grid textarea[b-sgn2esqhh3] {
    border: 1px solid var(--admin-surface-border);
    padding: 6px 8px;
    font-family: inherit;
    font-size: 13px;
    border-radius: 0;
    background: var(--admin-surface-white, #fff);
}

.afw-roles[b-sgn2esqhh3] {
    grid-column: 1 / span 2;
    border: 1px solid var(--admin-surface-border);
    padding: 8px 12px;
    margin: 0;
}

.afw-roles legend[b-sgn2esqhh3] {
    font-size: 12px;
    font-weight: 700;
    padding: 0 4px;
}

.afw-role-pick[b-sgn2esqhh3] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 14px;
    font-weight: 400;
}

.afw-notes[b-sgn2esqhh3] {
    grid-column: 1 / span 2;
}

.afw-row-actions[b-sgn2esqhh3] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.afw-row-actions button[b-sgn2esqhh3] {
    background: var(--admin-charcoal);
    color: var(--admin-white, #fff);
    border: none;
    padding: 6px 14px;
    font-weight: 700;
    cursor: pointer;
    border-radius: 0;
}

.afw-row-actions button:disabled[b-sgn2esqhh3] {
    opacity: 0.5;
    cursor: not-allowed;
}

.afw-save-msg.is-ok[b-sgn2esqhh3] {
    color: var(--bucket-complete, #2e7d32);
    font-size: 12px;
}

.afw-save-msg.is-error[b-sgn2esqhh3] {
    color: var(--admin-red, #b4241c);
    font-size: 12px;
}
/* /Components/Pages/Admin/Assessment/PlanFlow/AddSequenceModal.razor.rz.scp.css */
.add-seq-modal-overlay[b-5rneu6k61o] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-seq-modal-dialog[b-5rneu6k61o] {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 480px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.add-seq-modal-dialog-title[b-5rneu6k61o] {
    font-weight: 600;
    font-size: 1rem;
    padding: 12px 16px;
    border-bottom: 1px solid #e0e0e0;
}

.add-seq-modal-dialog-body[b-5rneu6k61o] {
    padding: 12px 16px;
    overflow-y: auto;
    flex: 1 1 auto;
}

.add-seq-modal-dialog-footer[b-5rneu6k61o] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 8px 16px 16px;
    border-top: 1px solid #e0e0e0;
}
/* /Components/Pages/Admin/Assessment/PlanFlow/AttachInteractionModal.razor.rz.scp.css */
.attach-int-modal-overlay[b-lpg3zf4q31] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
}

.attach-int-modal-dialog[b-lpg3zf4q31] {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 520px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.attach-int-modal-dialog-title[b-lpg3zf4q31] {
    font-weight: 600;
    font-size: 1rem;
    padding: 12px 16px;
    border-bottom: 1px solid #e0e0e0;
}

.attach-int-modal-dialog-body[b-lpg3zf4q31] {
    padding: 12px 16px;
    overflow-y: auto;
    flex: 1 1 auto;
}

.attach-int-modal-dialog-footer[b-lpg3zf4q31] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 8px 16px 16px;
    border-top: 1px solid #e0e0e0;
}
/* /Components/Pages/Admin/Assessment/PlanFlow/AttachSequenceModal.razor.rz.scp.css */
.attach-seq-modal-overlay[b-fmdhqnjsf9] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
}

.attach-seq-modal-dialog[b-fmdhqnjsf9] {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 520px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.attach-seq-modal-dialog-title[b-fmdhqnjsf9] {
    font-weight: 600;
    font-size: 1rem;
    padding: 12px 16px;
    border-bottom: 1px solid #e0e0e0;
}

.attach-seq-modal-dialog-body[b-fmdhqnjsf9] {
    padding: 12px 16px;
    overflow-y: auto;
    flex: 1 1 auto;
}

.attach-seq-modal-dialog-footer[b-fmdhqnjsf9] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 8px 16px 16px;
    border-top: 1px solid #e0e0e0;
}
/* /Components/Pages/Admin/Assessment/PlanFlow/BranchingConfigDialog.razor.rz.scp.css */
.branching-dialog-overlay[b-1klu8vfsaq] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
}

.branching-dialog[b-1klu8vfsaq] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 650px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.branching-dialog-header[b-1klu8vfsaq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #dee2e6;
}

.branching-dialog-header h5[b-1klu8vfsaq] {
    margin: 0;
    font-size: 1rem;
}

.branching-dialog-body[b-1klu8vfsaq] {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
}

.branching-summary[b-1klu8vfsaq] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: #f8f9fa;
    border-radius: 4px;
}

.branching-dialog-footer[b-1klu8vfsaq] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid #dee2e6;
}
/* /Components/Pages/Admin/Assessment/PlanFlow/ColourPalettePicker.razor.rz.scp.css */
.cpp[b-6vks5a0zo6] {
    position: relative;
    display: inline-flex;
}

.cpp-trigger[b-6vks5a0zo6] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    background: #f0f0f0;
    color: #5a6472;
    cursor: pointer;
}

.cpp-trigger:hover[b-6vks5a0zo6] {
    background: #e6e6e6;
}

.cpp-current[b-6vks5a0zo6] {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset;
}

.cpp-backdrop[b-6vks5a0zo6] {
    position: fixed;
    inset: 0;
    z-index: 1090;
}

.cpp-pop[b-6vks5a0zo6] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1091;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    padding: 8px;
    width: max-content;
}

.cpp-grid[b-6vks5a0zo6] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.cpp-swatch[b-6vks5a0zo6] {
    width: 26px;
    height: 26px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12) inset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.7rem;
}

.cpp-swatch.is-selected[b-6vks5a0zo6] {
    box-shadow: 0 0 0 2px #fff inset, 0 0 0 3px #333;
}

.cpp-custom[b-6vks5a0zo6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #eee;
    font-size: 0.75rem;
    color: #555;
    cursor: pointer;
}

.cpp-custom input[type="color"][b-6vks5a0zo6] {
    width: 28px;
    height: 22px;
    padding: 0;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    background: none;
    cursor: pointer;
}
/* /Components/Pages/Admin/Assessment/PlanFlow/ExportPlanModal.razor.rz.scp.css */
.export-modal-overlay[b-u12cjtpcuf] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
}

.export-modal-dialog[b-u12cjtpcuf] {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 520px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.export-modal-dialog-title[b-u12cjtpcuf] {
    font-weight: 600;
    font-size: 1rem;
    padding: 12px 16px;
    border-bottom: 1px solid #e0e0e0;
}

.export-modal-dialog-body[b-u12cjtpcuf] {
    padding: 12px 16px;
    overflow-y: auto;
    flex: 1 1 auto;
}

.export-modal-dialog-footer[b-u12cjtpcuf] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 8px 16px 16px;
    border-top: 1px solid #e0e0e0;
}

/* ── Format chips ── */
.export-format-grid[b-u12cjtpcuf] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.export-format-chip[b-u12cjtpcuf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 4px;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    position: relative;
    transition: border-color .12s, background .12s;
}

.export-format-chip i[b-u12cjtpcuf] {
    font-size: 1.35rem;
    color: #5a6472;
}

.export-format-chip.is-selected[b-u12cjtpcuf] {
    border-color: #2e75b6;
    background: #eef4fb;
}

.export-format-chip.is-selected i[b-u12cjtpcuf] {
    color: #2e75b6;
}

.export-format-chip.is-disabled[b-u12cjtpcuf] {
    cursor: not-allowed;
    opacity: 0.5;
}

.export-soon[b-u12cjtpcuf] {
    position: absolute;
    top: 3px;
    right: 4px;
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #9aa4b0;
}

/* Indent rail for a switch's sub-content. Always a WRAPPER — never put this on a
   .form-switch itself, or its own padding-left clobbers Bootstrap's and clips the
   negatively-margined switch handle off the left edge. */
.export-indent[b-u12cjtpcuf] {
    margin: 4px 0 2px 6px;
    padding-left: 12px;
    border-left: 2px solid #e6ebf1;
}

.export-divider[b-u12cjtpcuf] {
    margin: 12px 0;
    border: 0;
    border-top: 1px solid #eceff2;
}

.export-section-label[b-u12cjtpcuf] {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #9aa4b0;
    margin: 2px 0 6px;
}

/* Tighten the stacked switches so option groups read as a clean list. */
.export-modal-dialog-body .form-switch[b-u12cjtpcuf] {
    margin-bottom: .15rem;
    min-height: 1.4rem;
}

.export-modal-dialog-body .form-text[b-u12cjtpcuf] {
    margin-top: .1rem;
    line-height: 1.35;
}

.export-filename[b-u12cjtpcuf] {
    border-top: 1px dashed #e0e0e0;
    padding-top: 8px;
    word-break: break-all;
}
/* /Components/Pages/Admin/Assessment/PlanFlow/InteractionAudioTab.razor.rz.scp.css */
.cmr-admin-detail-section[b-77b3k5lcbh] {
    padding: 0.75rem 0;
    border-bottom: 1px solid #e0e0e0;
}

.cmr-admin-detail-section:last-child[b-77b3k5lcbh] {
    border-bottom: none;
}

.cmr-admin-section-title[b-77b3k5lcbh] {
    font-weight: 600;
    font-size: 0.875rem;
    color: #555;
    margin-bottom: 0.5rem;
}
/* /Components/Pages/Admin/Assessment/PlanFlow/InteractionEditTab.razor.rz.scp.css */
.cmr-admin-detail-section[b-h14xiby8vq] {
    padding: 0.75rem 0;
    border-bottom: 1px solid #e0e0e0;
}

.cmr-admin-detail-section:last-child[b-h14xiby8vq] {
    border-bottom: none;
}

.cmr-admin-section-title[b-h14xiby8vq] {
    font-weight: 600;
    font-size: 0.875rem;
    color: #555;
    margin-bottom: 0.5rem;
}

/* Collapsible sections in the edit panel.  Native <details>/<summary> for
   zero-JS expand/collapse; restyled so the disclosure marker sits on the
   left and the row is compact. */
.cmr-edit-collapsible > summary[b-h14xiby8vq] {
    cursor: pointer;
    list-style: none;             /* hide default arrow */
    user-select: none;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0;
    margin-bottom: 0.25rem;
}

/* Custom disclosure caret. */
.cmr-edit-collapsible > summary[b-h14xiby8vq]::before {
    content: "\25B8";              /* ▸ collapsed */
    color: #888;
    font-size: 0.7rem;
    transition: transform 0.12s ease;
    width: 0.7rem;
    display: inline-block;
}

.cmr-edit-collapsible[open] > summary[b-h14xiby8vq]::before {
    content: "\25BE";              /* ▾ expanded */
}

/* Native fallback (Firefox uses ::-webkit-details-marker on Chromium only). */
.cmr-edit-collapsible > summary[b-h14xiby8vq]::-webkit-details-marker {
    display: none;
}

/* Tighter spacing for the metadata section so it doesn't waste space at the bottom. */
.cmr-edit-collapsible:last-child[b-h14xiby8vq] {
    border-bottom: none;
    padding-bottom: 0;
}

/* ──────────────────────────────────────────────────────────────────────
   Per-line action menu (kebab dropdown).
   Mirrors the .pfe-dropdown pattern used in PlanListSidebar -- Blazor-managed
   open state + invisible backdrop for outside-click close. We do NOT use
   Bootstrap's data-bs-toggle="dropdown" because bootstrap.bundle.js isn't
   loaded in this app (only the CSS is); Bootstrap dropdowns would not work.
   ────────────────────────────────────────────────────────────────────── */
.cmr-line-menu-wrapper[b-h14xiby8vq] {
    position: relative;
    display: inline-flex;
}

.cmr-line-menu-backdrop[b-h14xiby8vq] {
    position: fixed;
    inset: 0;
    z-index: 1040;
}

.cmr-line-menu[b-h14xiby8vq] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1050;
    min-width: 180px;
    background: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    padding: 4px 0;
    display: flex;
    flex-direction: column;
}

.cmr-line-menu-item[b-h14xiby8vq] {
    background: none;
    border: none;
    text-align: left;
    padding: 6px 12px;
    font-size: 0.825rem;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.cmr-line-menu-item:hover:not(:disabled)[b-h14xiby8vq] {
    background: #f0f0f0;
}

.cmr-line-menu-item:disabled[b-h14xiby8vq] {
    color: #aaa;
    cursor: not-allowed;
}

.cmr-line-menu-item i[b-h14xiby8vq] {
    width: 14px;
    text-align: center;
    font-size: 0.75rem;
    color: #666;
}

.cmr-line-menu-item-danger[b-h14xiby8vq] {
    color: #b02a37;
}

.cmr-line-menu-item-danger i[b-h14xiby8vq] {
    color: #b02a37;
}

.cmr-line-menu-item-danger:hover:not(:disabled)[b-h14xiby8vq] {
    background: #fdecee;
}

.cmr-line-menu-divider[b-h14xiby8vq] {
    height: 1px;
    background: #e0e0e0;
    margin: 4px 0;
}
/* /Components/Pages/Admin/Assessment/PlanFlow/InteractionPalette.razor.rz.scp.css */
.interaction-palette[b-37matx05gn] {
    border-bottom: 1px solid #dee2e6;
    background: #f8f9fa;
}

.palette-header[b-37matx05gn] {
    display: flex;
    align-items: center;
    padding: 4px 8px;
}

.palette-toggle[b-37matx05gn] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 0.8rem;
    color: #495057;
    transition: background 0.15s;
}

.palette-toggle:hover[b-37matx05gn] {
    background: #e9ecef;
}

.palette-items[b-37matx05gn] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 8px 10px;
}

.palette-item[b-37matx05gn] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 5px;
    border: 2px solid var(--palette-stroke, #546E7A);
    background: var(--palette-fill, #ECEFF1);
    cursor: grab;
    font-size: 0.78rem;
    user-select: none;
    transition: box-shadow 0.15s, transform 0.1s;
}

.palette-item:hover[b-37matx05gn] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.palette-item:active[b-37matx05gn] {
    cursor: grabbing;
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.palette-icon[b-37matx05gn] {
    font-size: 1rem;
}

.palette-label[b-37matx05gn] {
    white-space: nowrap;
}
/* /Components/Pages/Admin/Assessment/PlanFlow/InteractionPreviewTab.razor.rz.scp.css */
.preview-start-panel[b-sjo57yx9ew] {
    text-align: center;
    padding: 2rem 1rem;
}

/* Response history list — each row is a button so the author can jump
   straight to any question. The current row is rendered disabled so
   it reads as the active position without being clickable. */
.preview-history-list[b-sjo57yx9ew] {
    max-height: 200px;
    overflow-y: auto;
}

.preview-history-item[b-sjo57yx9ew] {
    list-style: none;
}

.preview-history-btn[b-sjo57yx9ew] {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 4px 6px;
    background: none;
    border: none;
    border-bottom: 1px solid #e9ecef;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s;
}

.preview-history-btn:hover:not(:disabled)[b-sjo57yx9ew] {
    background: #f5f7fa;
}

.preview-history-btn:focus-visible[b-sjo57yx9ew] {
    outline: 2px solid #1976d2;
    outline-offset: -2px;
    background: #eef4fb;
}

.preview-history-btn:disabled[b-sjo57yx9ew] {
    cursor: default;
    /* Keep the row visually identical when disabled — only the cursor changes.
       Bootstrap-style 0.65 opacity would make the current row look "muted"
       which contradicts the visual story (it IS the active question). */
    opacity: 1;
}

.preview-history-btn-current[b-sjo57yx9ew] {
    background: #eef4fb;
}

.preview-history-title[b-sjo57yx9ew] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
}
/* /Components/Pages/Admin/Assessment/PlanFlow/InteractionViewTab.razor.rz.scp.css */
.cmr-interaction-preview[b-pbhsiq191c] {
    border: 1px solid #e0e0e0;
    border-radius: 0;
    padding: 1rem;
    background: #fff;
    max-height: 400px;
    overflow: auto;
}

.cmr-admin-detail-section[b-pbhsiq191c] {
    padding: 0.75rem 0;
    border-bottom: 1px solid #e0e0e0;
}

.cmr-admin-detail-section:last-child[b-pbhsiq191c] {
    border-bottom: none;
}

.cmr-admin-section-title[b-pbhsiq191c] {
    font-weight: 600;
    font-size: 0.875rem;
    color: #555;
    margin-bottom: 0.5rem;
}

/* Clickable variant — turns the section title into a button-like header
   that toggles the section's body. Used on the debug/inspector sections
   (Response JSON, Live Marking, Logic & Thresholds, Line Logic) so a
   content reviewer isn't distracted by developer-oriented detail. */
.cmr-admin-section-title.cmr-collapsible[b-pbhsiq191c] {
    cursor: pointer;
    user-select: none;
    margin-bottom: 0;
    padding: 0.125rem 0;
    transition: color 0.1s ease;
}

.cmr-admin-section-title.cmr-collapsible:hover[b-pbhsiq191c] {
    color: #222;
}

.cmr-admin-section-title.cmr-collapsible:focus-visible[b-pbhsiq191c] {
    outline: 2px solid #4a8;
    outline-offset: 2px;
    border-radius: 2px;
}

.cmr-collapse-indicator[b-pbhsiq191c] {
    display: inline-block;
    width: 1em;
    margin-right: 0.35rem;
    color: #888;
    font-size: 0.7rem;
    line-height: 1;
}

/* When the section is expanded, restore the original space below the
   title before its body content. */
.cmr-admin-section-title.cmr-collapsible[aria-expanded="true"][b-pbhsiq191c] {
    margin-bottom: 0.5rem;
}
/* /Components/Pages/Admin/Assessment/PlanFlow/PlanFilterPanel.razor.rz.scp.css */
.pfe-panel[b-n77spnfbzz] {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 0;
}

.pfe-panel-header[b-n77spnfbzz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid #e0e0e0;
}

.pfe-panel-title[b-n77spnfbzz] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--admin-charcoal);
}

.pfe-toggle[b-n77spnfbzz] {
    width: 24px;
    height: 24px;
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
    border: 1px solid #d0d0d0;
    border-radius: 0;
    font-size: 11px;
    color: #555;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}

.pfe-toggle:hover[b-n77spnfbzz] {
    background: #e0e0e0;
}

.pfe-panel-body[b-n77spnfbzz] {
    padding: 12px;
}
/* /Components/Pages/Admin/Assessment/PlanFlow/PlanListSidebar.razor.rz.scp.css */
.pfe-sidebar[b-8ria44fyz5] {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    overflow: hidden;
    transition: width 0.25s ease, opacity 0.2s ease;
}

.pfe-sidebar-collapsed[b-8ria44fyz5] {
    width: 48px;
}

.pfe-sidebar-header[b-8ria44fyz5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
}

.pfe-panel-title[b-8ria44fyz5] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--admin-charcoal);
}

.pfe-toggle[b-8ria44fyz5] {
    width: 24px;
    height: 24px;
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
    border: 1px solid #d0d0d0;
    border-radius: 0;
    font-size: 11px;
    color: #555;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}

.pfe-toggle:hover[b-8ria44fyz5] {
    background: #e0e0e0;
}

.pfe-sidebar-body[b-8ria44fyz5] {
    overflow: auto;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* The "Plans" label/badge in the outer header is itself the
   vertical-collapse toggle for the Plans sub-section. */
.pfe-plans-toggle[b-8ria44fyz5] {
    cursor: pointer;
    user-select: none;
    padding: 2px 4px;
    border-radius: 3px;
}

.pfe-plans-toggle:hover[b-8ria44fyz5] {
    background: #ececec;
}

.pfe-sidebar-empty[b-8ria44fyz5] {
    padding: 12px;
    color: #666;
    font-size: 0.875rem;
}

/* Show inactive toggle */
.pfe-inactive-toggle[b-8ria44fyz5] {
    padding: 6px 12px;
    border-bottom: 1px solid #e0e0e0;
    background: #fafafa;
}

.pfe-plan-list[b-8ria44fyz5] {
    display: flex;
    flex-direction: column;
}

.pfe-plan-row[b-8ria44fyz5] {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #e0e0e0;
}

.pfe-plan-row-inactive[b-8ria44fyz5] {
    opacity: 0.6;
}

.pfe-plan-row-pinned[b-8ria44fyz5] {
    background: #fffaf0;
}

.pfe-plan-row .pfe-plan-item[b-8ria44fyz5] {
    border-bottom: none;
}

/* Pin / unpin toggle on the left edge of each plan row.
   Hidden by default; visible on row hover, or always visible when pinned. */
.pfe-pin-btn[b-8ria44fyz5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    flex-shrink: 0;
    background: none;
    border: none;
    border-right: 1px solid #e0e0e0;
    color: #bbb;
    cursor: pointer;
    font-size: 0.75rem;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
}

.pfe-plan-row:hover .pfe-pin-btn[b-8ria44fyz5] {
    opacity: 1;
}

.pfe-pin-btn:hover[b-8ria44fyz5] {
    background: #f0f0f0;
    color: #555;
}

.pfe-pin-btn-pinned[b-8ria44fyz5] {
    opacity: 1;
    color: #e8a317;
}

.pfe-pin-btn-pinned:hover[b-8ria44fyz5] {
    color: #b87a00;
}

.pfe-plan-item[b-8ria44fyz5] {
    display: block;
    flex: 1;
    min-width: 0;
    text-align: left;
    padding: 8px 12px;
    background: none;
    border: none;
    cursor: pointer;
    transition: background 0.15s;
}

.pfe-plan-item:hover[b-8ria44fyz5] {
    background: #f5f5f5;
}

.pfe-plan-item-active[b-8ria44fyz5] {
    background: #e3f2fd;
    border-left: 3px solid #1976D2;
}

/* Dropdown menu button */
.pfe-menu-wrapper[b-8ria44fyz5] {
    position: relative;
    display: flex;
    align-items: stretch;
}

.pfe-menu-btn[b-8ria44fyz5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    flex-shrink: 0;
    background: none;
    border: none;
    border-left: 1px solid #e0e0e0;
    color: #888;
    cursor: pointer;
    font-size: 0.75rem;
    transition: background 0.15s, color 0.15s;
}

.pfe-menu-btn:hover[b-8ria44fyz5] {
    background: #f0f0f0;
    color: #333;
}

/* Dropdown backdrop */
.pfe-dropdown-backdrop[b-8ria44fyz5] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1039;
}

/* Dropdown menu — position:fixed so overflow:hidden/auto parents don't clip it */
.pfe-dropdown-menu[b-8ria44fyz5] {
    position: fixed;
    z-index: 1040;
    min-width: 160px;
    background: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    padding: 4px 0;
}

.pfe-dropdown-item[b-8ria44fyz5] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 6px 12px;
    font-size: 0.8125rem;
    color: #333;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    transition: background 0.12s;
}

.pfe-dropdown-item:hover[b-8ria44fyz5] {
    background: #f5f5f5;
}

.pfe-dropdown-item-danger[b-8ria44fyz5] {
    color: #d32f2f;
}

.pfe-dropdown-item-danger:hover[b-8ria44fyz5] {
    background: #fee;
}

.pfe-dropdown-divider[b-8ria44fyz5] {
    height: 1px;
    margin: 4px 0;
    background: #e0e0e0;
}

/* Clone/Rename/Delete dialog overlay */
.pfe-clone-overlay[b-8ria44fyz5] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.pfe-clone-dialog[b-8ria44fyz5] {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    width: 400px;
    max-width: 90vw;
}

.pfe-clone-dialog-title[b-8ria44fyz5] {
    font-weight: 600;
    font-size: 1rem;
    padding: 16px 16px 8px;
    border-bottom: 1px solid #e0e0e0;
}

.pfe-clone-dialog-body[b-8ria44fyz5] {
    padding: 12px 16px;
}

.pfe-clone-dialog-footer[b-8ria44fyz5] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 8px 16px 16px;
}

.pfe-plan-title[b-8ria44fyz5] {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--admin-charcoal);
    line-height: 1.25;
    /* Wrap long titles onto multiple lines instead of clipping with ellipsis,
       so admins can see the full plan name in the sidebar. */
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.pfe-plan-meta[b-8ria44fyz5] {
    font-size: 0.75rem;
    color: #666;
}

.pfe-tree-section[b-8ria44fyz5] {
    border-top: 1px solid #e0e0e0;
    padding: 4px;
    overflow: auto;
    max-height: 50%;
    flex-shrink: 0;
}

/* When the Plans section is vertically collapsed, the Structure tree
   takes the remaining space (no max-height cap, full flex). */
.pfe-sidebar-body-plans-collapsed .pfe-tree-section[b-8ria44fyz5] {
    max-height: none;
    flex-grow: 1;
    flex-shrink: 1;
    min-height: 0;
}

.pfe-tree-label[b-8ria44fyz5] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #666;
    padding: 4px 8px;
}

/* Compact TreeView overrides */
[b-8ria44fyz5] .e-treeview .e-list-item {
    padding: 0;
}

[b-8ria44fyz5] .e-treeview .e-text-content {
    padding: 2px 4px;
}

[b-8ria44fyz5] .e-treeview .e-list-text {
    font-size: 0.8rem;
    line-height: 1.3;
}

[b-8ria44fyz5] .e-treeview .e-icon-collapsible,
[b-8ria44fyz5] .e-treeview .e-icon-expandable {
    font-size: 0.7rem;
}

[b-8ria44fyz5] .plan-tree-node-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 160px;
    display: inline-block;
    vertical-align: middle;
}

[b-8ria44fyz5] .plan-tree-delete-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 4px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 3px;
    color: #999;
    cursor: pointer;
    font-size: 0.65rem;
    vertical-align: middle;
    flex-shrink: 0;
    line-height: 1;
}

[b-8ria44fyz5] .e-treeview .e-list-item:hover .plan-tree-delete-btn {
    display: inline-flex;
}

[b-8ria44fyz5] .plan-tree-delete-btn:hover {
    background: #fee;
    color: #d32f2f;
}

[b-8ria44fyz5] .plan-tree-badge {
    font-size: 0.6rem;
    padding: 1px 4px;
    vertical-align: middle;
    line-height: 1.2;
}
/* /Components/Pages/Admin/Assessment/PlanFlow/PlanSettingsModal.razor.rz.scp.css */
.settings-modal-overlay[b-78recor7zc] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
}

.settings-modal-dialog[b-78recor7zc] {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 440px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.settings-modal-dialog-title[b-78recor7zc] {
    font-weight: 600;
    font-size: 1rem;
    padding: 12px 16px;
    border-bottom: 1px solid #e0e0e0;
}

.settings-modal-dialog-body[b-78recor7zc] {
    padding: 12px 16px;
    overflow-y: auto;
    flex: 1 1 auto;
}

.settings-modal-dialog-footer[b-78recor7zc] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 8px 16px 16px;
    border-top: 1px solid #e0e0e0;
}

.settings-divider[b-78recor7zc] {
    margin: 12px 0;
    border: 0;
    border-top: 1px solid #eceff2;
}

.settings-section-label[b-78recor7zc] {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #9aa4b0;
    margin: 2px 0 6px;
}

.settings-modal-dialog-body .form-switch[b-78recor7zc] {
    margin-bottom: .15rem;
    min-height: 1.4rem;
}

.settings-modal-dialog-body .form-text[b-78recor7zc] {
    margin-top: .1rem;
    line-height: 1.35;
}
/* /Components/Pages/Admin/Assessment/PlanFlow/ValidationIssuesPanel.razor.rz.scp.css */
.pfe-panel[b-1f528d8s2m] {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 0;
}

.pfe-panel-info[b-1f528d8s2m] {
    border-color: #0dcaf0;
}

.pfe-panel-error[b-1f528d8s2m] {
    border-color: #dc3545;
}

.pfe-panel-warning[b-1f528d8s2m] {
    border-color: #ffc107;
}

.pfe-panel-success[b-1f528d8s2m] {
    border-color: #198754;
}

.pfe-panel-header[b-1f528d8s2m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
}

.pfe-header-error[b-1f528d8s2m] {
    background: #dc3545;
    color: #fff;
}

.pfe-header-warning[b-1f528d8s2m] {
    background: #ffc107;
    color: var(--admin-charcoal);
}

.pfe-panel-body[b-1f528d8s2m] {
    padding: 8px 12px;
}

.pfe-toggle[b-1f528d8s2m] {
    width: 24px;
    height: 24px;
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
    border: 1px solid #d0d0d0;
    border-radius: 0;
    font-size: 11px;
    color: #555;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}

.pfe-toggle:hover[b-1f528d8s2m] {
    background: #e0e0e0;
}

.pfe-toggle-light[b-1f528d8s2m] {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.4);
    color: #fff;
}

.pfe-toggle-light:hover[b-1f528d8s2m] {
    background: rgba(255,255,255,0.35);
}

.pfe-validation-body[b-1f528d8s2m] {
    max-height: 300px;
    overflow-y: auto;
}
/* /Components/Pages/Admin/Assessment/PlanFlowEditorNew.razor.rz.scp.css */
/* ══════════════════════════════════════════════
   PlanFlowEditorNew — CSS layout
   Mirrors AssessmentDashboard design tokens.
   ══════════════════════════════════════════════ */

/* ── Root slice: sidebar | toggle | main ── */
.pfe-slice[b-4mg1ti0f7f] {
    display: grid;
    grid-template-columns: 320px 0px 1fr;
    gap: 0;
    padding: 16px;
    transition: grid-template-columns 0.25s ease;

    /* Fill the entire .shell-frame-body. The shell already does the
       "what's left below the app header" math via flex:1 + min-height:0,
       so we just stretch to 100% of that — no magic pixel offsets. */
    height: 100%;
    box-sizing: border-box;
    /* Prevent the grid itself from scrolling the page; column children
       manage their own internal scroll regions. */
    overflow: hidden;
}

.pfe-left[b-4mg1ti0f7f] {
    grid-column: 1;
    min-width: 0;
    overflow: hidden;
    transition: width 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
    width: 320px;
    padding-right: 16px;
    /* Stretch to the full grid-row height so the sidebar reaches the
       bottom of the viewport regardless of how long the plan list is. */
    height: 100%;
    min-height: 0;
}

.pfe-slice.sidebar-collapsed .pfe-left[b-4mg1ti0f7f] {
    width: 0;
    opacity: 0;
    padding-right: 0;
    pointer-events: none;
}

.pfe-slice.sidebar-collapsed[b-4mg1ti0f7f] {
    grid-template-columns: 0px auto 1fr;
}

/* ── Sidebar toggle button (only visible when collapsed) ── */
.pfe-sidebar-toggle[b-4mg1ti0f7f] {
    grid-column: 2;
    align-self: start;
    margin-top: 2px;
    margin-right: 12px;
    width: 24px;
    height: 24px;
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
    border: 1px solid #d0d0d0;
    border-radius: 0;
    font-size: 11px;
    color: #555;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}

.pfe-sidebar-toggle:hover[b-4mg1ti0f7f] {
    background: #e0e0e0;
}

/* ── Main content area ── */
.pfe-right[b-4mg1ti0f7f] {
    grid-column: 3;
    min-width: 0;
    overflow: hidden;
    /* Stack page-header above the splitter and let the splitter eat the
       rest of the vertical space. */
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}


/* ── Page header ── */
.pfe-page-header[b-4mg1ti0f7f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

/* Constrains the title block so a long plan title doesn't push the
   page-actions select off the right edge. */
.pfe-page-header-text[b-4mg1ti0f7f] {
    min-width: 0;
    flex: 1 1 auto;
}

/* Small "Plan Flow Editor" label above the dynamic plan title. */
.pfe-page-eyebrow[b-4mg1ti0f7f] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #888;
    font-weight: 600;
}

.pfe-page-title[b-4mg1ti0f7f] {
    font-size: 18px;
    font-weight: 700;
    color: var(--admin-charcoal);
    line-height: 1.25;
    /* Allow long plan titles to wrap to a second line instead of clipping. */
    overflow-wrap: anywhere;
    word-break: break-word;
}

.pfe-page-title-placeholder[b-4mg1ti0f7f] {
    color: #999;
    font-style: italic;
    font-weight: 500;
}

.pfe-page-subtitle[b-4mg1ti0f7f] {
    font-size: 12px;
    color: #666;
}

.pfe-page-actions[b-4mg1ti0f7f] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    white-space: nowrap;
    align-items: center;
}

/* Transient confirmation shown after a manual "Clear runner cache" click. */
.pfe-cache-clear-msg[b-4mg1ti0f7f] {
    font-size: 0.75rem;
    color: #2e7d32;
    align-self: center;
}

/* "Add Profile Question" entry point — visually matched to the
   InteractionPalette's collapsed "Add Interaction" toggle so the two
   live in the palette row as a pair. */
.pfe-palette-btn[b-4mg1ti0f7f] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 0.8rem;
    color: #495057;
    transition: background 0.15s;
    white-space: nowrap;
}

.pfe-palette-btn:hover:not(:disabled)[b-4mg1ti0f7f] {
    background: #e9ecef;
}

.pfe-palette-btn:disabled[b-4mg1ti0f7f] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Per-plan line-text search — lives inside the palette row, next to
   "Add Profile Question". Results render as a list directly underneath. */
.pfe-palette-row[b-4mg1ti0f7f] {
    row-gap: 4px;
}

.pfe-find-input-wrap[b-4mg1ti0f7f] {
    position: relative;
    flex: 0 0 260px;
    max-width: 360px;
}

.pfe-find-icon[b-4mg1ti0f7f] {
    position: absolute;
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
    color: #888;
    font-size: 0.75rem;
    pointer-events: none;
}

.pfe-find-input[b-4mg1ti0f7f] {
    padding-left: 26px;
    padding-right: 26px;
}

.pfe-find-clear[b-4mg1ti0f7f] {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: #888;
    padding: 2px 6px;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
}

.pfe-find-clear:hover[b-4mg1ti0f7f] {
    background: #f0f0f0;
    color: #333;
}

.pfe-find-results[b-4mg1ti0f7f] {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    margin-bottom: 8px;
    background: #ffffff;
}

.pfe-find-result[b-4mg1ti0f7f] {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #eee;
    padding: 6px 10px;
    cursor: pointer;
}

.pfe-find-result:last-child[b-4mg1ti0f7f] {
    border-bottom: 0;
}

.pfe-find-result:hover[b-4mg1ti0f7f] {
    background: #f5f8ff;
}

.pfe-find-result.active[b-4mg1ti0f7f] {
    background: #e7f1ff;
}

.pfe-find-result-head[b-4mg1ti0f7f] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.8rem;
    margin-bottom: 2px;
}

.pfe-find-result-code[b-4mg1ti0f7f] {
    font-weight: 600;
    color: var(--admin-charcoal, #222);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pfe-find-result-seq[b-4mg1ti0f7f] {
    color: #666;
    font-size: 0.72rem;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 50%;
}

.pfe-find-result-snippet[b-4mg1ti0f7f] {
    font-size: 0.75rem;
    color: #444;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pfe-link-btn[b-4mg1ti0f7f] {
    padding: 4px 10px;
    font-size: 0.75rem;
    background: #f0f0f0;
    border: 1px solid #d0d0d0;
    border-radius: 0;
    color: #555;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
}

.pfe-link-btn:hover[b-4mg1ti0f7f] {
    background: #e0e0e0;
    color: #333;
    text-decoration: none;
}


/* ── Top row: filters + validation (2-column grid) ── */
.pfe-top-row[b-4mg1ti0f7f] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

/* ── Syncfusion Splitter: diagram | detail ── */
.pfe-splitter[b-4mg1ti0f7f] {
    border: none !important;
    /* Eat the height that's left below the page header (parent .pfe-right
       is a flex column). Together with Height="100%" on the SfSplitter
       this lets both panes stretch all the way to the viewport bottom. */
    flex: 1;
    min-height: 0;
}

.pfe-col[b-4mg1ti0f7f] {
    min-width: 0;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 0;
}

.pfe-col-diagram[b-4mg1ti0f7f] {
    height: 100%;
    min-height: 500px;
}

.pfe-col-detail[b-4mg1ti0f7f] {
    overflow: hidden;
    /* Cap to splitter pane height (so the body can scroll when content
       overflows) but otherwise size to content -- avoids wasted white
       space inside the bordered panel when the inspector is short. */
    max-height: 100%;
    overflow-y: auto;
}

/* ── Detail panel fullscreen (pop-out preview) ── */
.pfe-col-detail.pfe-detail-fullscreen[b-4mg1ti0f7f] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    max-width: none;
    border-radius: 0;
    border: none;
    background: #fff;
    padding: 16px;
}

/* ── Responsive ── */
@media (max-width: 1400px) {
    .pfe-top-row[b-4mg1ti0f7f] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .pfe-slice[b-4mg1ti0f7f] {
        grid-template-columns: 1fr;
    }
}

/* ── Linking mode banner ── */
.pfe-linking-banner[b-4mg1ti0f7f] {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: #1976D2;
    color: #fff;
    padding: 8px 16px;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    z-index: 1060;
    animation: pfe-toast-in-b-4mg1ti0f7f 0.2s ease-out;
}

/* ── Undo toast ── */
.pfe-undo-toast[b-4mg1ti0f7f] {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: #323232;
    color: #fff;
    padding: 10px 16px;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    z-index: 1060;
    animation: pfe-toast-in-b-4mg1ti0f7f 0.2s ease-out;
}

@keyframes pfe-toast-in-b-4mg1ti0f7f {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ── Creating interaction indicator ── */
.pfe-creating-indicator[b-4mg1ti0f7f] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #fff3cd;
    border-bottom: 1px solid #ffc107;
    font-size: 0.8rem;
    color: #856404;
}

/* ── Dialog overlay (connector edit, delete confirm) ── */
.pfe-clone-overlay[b-4mg1ti0f7f] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.pfe-clone-dialog[b-4mg1ti0f7f] {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    width: 400px;
    max-width: 90vw;
}

.pfe-clone-dialog-title[b-4mg1ti0f7f] {
    font-weight: 600;
    font-size: 1rem;
    padding: 16px 16px 8px;
    border-bottom: 1px solid #e0e0e0;
}

.pfe-clone-dialog-body[b-4mg1ti0f7f] {
    padding: 12px 16px;
}

.pfe-clone-dialog-footer[b-4mg1ti0f7f] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 8px 16px 16px;
}
/* /Components/Pages/Admin/ReleaseVerification/ReleaseVerificationCatalog.razor.rz.scp.css */
.rv-page[b-0fcq80y0uz] { padding: 1rem 1.5rem; }
.rv-header[b-0fcq80y0uz] { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: .75rem; gap: 1rem; }
.rv-header h2[b-0fcq80y0uz] { margin: 0 0 .25rem; }
.rv-sub[b-0fcq80y0uz] { font-size: .85rem; color: #64748b; }
.rv-header-actions[b-0fcq80y0uz] { display: flex; gap: .5rem; flex-shrink: 0; }
.rv-inline[b-0fcq80y0uz] { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; margin: .25rem 0 1rem; }

.rv-table[b-0fcq80y0uz] { width: 100%; border-collapse: collapse; font-size: .9rem; }
.rv-table th[b-0fcq80y0uz], .rv-table td[b-0fcq80y0uz] { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid #e5e7eb; vertical-align: top; }
.rv-table th[b-0fcq80y0uz] { background: #f8fafc; font-weight: 600; }
.rv-num[b-0fcq80y0uz] { text-align: right; }
.rv-inactive[b-0fcq80y0uz] { opacity: .5; }
.rv-table code[b-0fcq80y0uz] { font-size: .82rem; background: #f1f5f9; padding: .05rem .3rem; border-radius: .25rem; }

.rv-badge[b-0fcq80y0uz] { font-size: .72rem; font-weight: 600; padding: .1rem .45rem; border-radius: .75rem; }
.rv-badge-established[b-0fcq80y0uz] { background: #e2e8f0; color: #334155; }
.rv-badge-new[b-0fcq80y0uz] { background: #dcfce7; color: #166534; }
.rv-badge-updated[b-0fcq80y0uz] { background: #fef9c3; color: #854d0e; }
.rv-badge-deprecated[b-0fcq80y0uz] { background: #fee2e2; color: #991b1b; }

.rv-btn[b-0fcq80y0uz] { padding: .35rem .75rem; border: 1px solid #cbd5e1; background: #fff; border-radius: .375rem; cursor: pointer; font-size: .85rem; }
.rv-btn:hover[b-0fcq80y0uz] { background: #f1f5f9; }
.rv-btn-primary[b-0fcq80y0uz] { background: #2563eb; color: #fff; border-color: #2563eb; }
.rv-btn-primary:hover[b-0fcq80y0uz] { background: #1d4ed8; }

.rv-backdrop[b-0fcq80y0uz] { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.rv-modal[b-0fcq80y0uz] { background: #fff; border-radius: .5rem; width: min(520px, 92vw); max-height: 90vh; overflow-y: auto; box-shadow: 0 10px 40px rgba(0,0,0,.2); }
.rv-modal-header[b-0fcq80y0uz] { display: flex; justify-content: space-between; align-items: center; padding: .85rem 1.1rem; border-bottom: 1px solid #e5e7eb; position: sticky; top: 0; background: #fff; }
.rv-modal-header h3[b-0fcq80y0uz] { margin: 0; font-size: 1.05rem; }
.rv-close[b-0fcq80y0uz] { border: none; background: none; font-size: 1.4rem; cursor: pointer; line-height: 1; }
.rv-modal-body[b-0fcq80y0uz] { padding: 1.1rem; }
.rv-modal-footer[b-0fcq80y0uz] { display: flex; gap: .5rem; padding: .85rem 1.1rem; border-top: 1px solid #e5e7eb; position: sticky; bottom: 0; background: #fff; }

.rv-field[b-0fcq80y0uz] { margin-bottom: .85rem; display: flex; flex-direction: column; gap: .3rem; }
.rv-field label[b-0fcq80y0uz] { font-size: .8rem; font-weight: 600; color: #475569; }
.rv-field input[b-0fcq80y0uz], .rv-field select[b-0fcq80y0uz], .rv-field textarea[b-0fcq80y0uz] { padding: .4rem .55rem; border: 1px solid #cbd5e1; border-radius: .375rem; font-size: .9rem; font-family: inherit; }
.rv-error[b-0fcq80y0uz] { color: #dc2626; font-size: .85rem; margin-top: .5rem; }
/* /Components/Pages/Admin/ReleaseVerification/ReleaseVerificationSession.razor.rz.scp.css */
.rv-page[b-4j0mv5mg1j] { padding: 1rem 1.5rem; }
.rv-header[b-4j0mv5mg1j] { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: .75rem; gap: 1rem; }
.rv-header h2[b-4j0mv5mg1j] { margin: .25rem 0; }
.rv-back[b-4j0mv5mg1j] { font-size: .85rem; text-decoration: none; color: #2563eb; }
.rv-sub[b-4j0mv5mg1j] { font-size: .85rem; color: #64748b; }
.rv-header-actions[b-4j0mv5mg1j] { flex-shrink: 0; display: flex; gap: .5rem; align-items: center; }

.rv-readiness[b-4j0mv5mg1j] { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 1rem; }
.rv-chip[b-4j0mv5mg1j] { font-size: .78rem; font-weight: 600; padding: .2rem .6rem; border-radius: .75rem; background: #e2e8f0; color: #334155; }
.rv-chip-pass[b-4j0mv5mg1j] { background: #dcfce7; color: #166534; }
.rv-chip-fail[b-4j0mv5mg1j] { background: #fee2e2; color: #991b1b; }
.rv-chip-blocked[b-4j0mv5mg1j] { background: #fef3c7; color: #92400e; }
.rv-chip-open[b-4j0mv5mg1j] { background: #e2e8f0; color: #475569; }
.rv-chip-blocker[b-4j0mv5mg1j] { background: #991b1b; color: #fff; }

.rv-filters[b-4j0mv5mg1j] { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.rv-filters select[b-4j0mv5mg1j] { padding: .35rem .5rem; border: 1px solid #cbd5e1; border-radius: .375rem; font-size: .85rem; }
.rv-inline[b-4j0mv5mg1j] { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; }

.rv-group-title[b-4j0mv5mg1j] { margin: 1.25rem 0 .35rem; font-size: 1rem; color: #1e293b; }
.rv-table[b-4j0mv5mg1j] { width: 100%; border-collapse: collapse; font-size: .9rem; }
.rv-table th[b-4j0mv5mg1j], .rv-table td[b-4j0mv5mg1j] { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid #e5e7eb; vertical-align: top; }
.rv-table th[b-4j0mv5mg1j] { background: #f8fafc; font-weight: 600; }
.rv-center[b-4j0mv5mg1j] { text-align: center; }

.rv-col-outcome[b-4j0mv5mg1j] { width: 130px; }
.rv-col-blocker[b-4j0mv5mg1j] { width: 64px; text-align: center; }
.rv-col-save[b-4j0mv5mg1j] { width: 80px; }

.rv-dirty[b-4j0mv5mg1j] { background: #fffbeb; }

.rv-proc-name[b-4j0mv5mg1j] { font-weight: 600; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.rv-proc-desc[b-4j0mv5mg1j] { font-size: .82rem; color: #475569; margin-top: .2rem; }
.rv-proc-meta[b-4j0mv5mg1j] { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .3rem; font-size: .78rem; color: #64748b; align-items: center; }
.rv-proc-meta code[b-4j0mv5mg1j] { background: #f1f5f9; padding: .05rem .3rem; border-radius: .25rem; }
.rv-perm[b-4j0mv5mg1j] { background: #eef2ff; color: #3730a3; padding: .05rem .35rem; border-radius: .25rem; }

.rv-badge[b-4j0mv5mg1j] { font-size: .7rem; font-weight: 600; padding: .08rem .4rem; border-radius: .75rem; }
.rv-badge-established[b-4j0mv5mg1j] { background: #e2e8f0; color: #334155; }
.rv-badge-new[b-4j0mv5mg1j] { background: #dcfce7; color: #166534; }
.rv-badge-updated[b-4j0mv5mg1j] { background: #fef9c3; color: #854d0e; }
.rv-badge-deprecated[b-4j0mv5mg1j] { background: #fee2e2; color: #991b1b; }
.rv-stale[b-4j0mv5mg1j] { font-size: .7rem; font-weight: 600; color: #b45309; background: #fef3c7; padding: .08rem .4rem; border-radius: .75rem; }

.rv-outcome[b-4j0mv5mg1j] { padding: .3rem .4rem; border: 1px solid #cbd5e1; border-radius: .375rem; font-size: .82rem; width: 100%; }
.rv-outcome-pass[b-4j0mv5mg1j] { background: #dcfce7; }
.rv-outcome-fail[b-4j0mv5mg1j] { background: #fee2e2; }
.rv-outcome-blocked[b-4j0mv5mg1j] { background: #fef3c7; }
/* Notes is a <textarea rows="1"> that grows with content via
   `field-sizing: content` (Chrome 123+, Safari 18+ — fine for an
   internal admin page; older browsers get a fixed `min-height` row
   plus the manual `resize: vertical` drag handle). `resize: vertical`
   is kept on top of field-sizing so reviewers can pre-expand a row
   before they start typing if they know it'll be long.
   `line-height: 1.35` keeps the resting one-line height close to the
   original <input>; `font-family: inherit` undoes the browser's
   monospace default for <textarea>. */
.rv-notes[b-4j0mv5mg1j] {
    width: 100%;
    padding: .3rem .45rem;
    border: 1px solid #cbd5e1;
    border-radius: .375rem;
    font-size: .82rem;
    font-family: inherit;
    line-height: 1.35;
    min-height: calc(.82rem * 1.35 + .6rem);
    max-height: 14rem;
    resize: vertical;
    field-sizing: content;
    overflow: auto;
}

/* Developer-response label and field, rendered immediately below the
   reviewer's Notes textarea in the same cell. The label is the visual
   separator (rather than a border) so the cell stays compact when both
   fields are empty. The dev textarea uses a tinted background so the
   reviewer can quickly spot rows where the developer has already
   responded vs. ones still awaiting a fix. */
.rv-dev-label[b-4j0mv5mg1j] {
    font-size: .7rem;
    font-weight: 600;
    color: #64748b;
    margin: .4rem 0 .15rem;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.rv-notes-dev[b-4j0mv5mg1j] {
    background: #f8fafc;
}

.rv-btn[b-4j0mv5mg1j] { padding: .35rem .75rem; border: 1px solid #cbd5e1; background: #fff; border-radius: .375rem; cursor: pointer; font-size: .82rem; }
.rv-btn:hover[b-4j0mv5mg1j] { background: #f1f5f9; }
.rv-btn-primary[b-4j0mv5mg1j] { background: #2563eb; color: #fff; border-color: #2563eb; }
.rv-btn-primary:hover[b-4j0mv5mg1j] { background: #1d4ed8; }
.rv-error[b-4j0mv5mg1j] { color: #dc2626; font-size: .8rem; margin-top: .35rem; }
/* /Components/Pages/Admin/ReleaseVerification/ReleaseVerificationSessions.razor.rz.scp.css */
.rv-page[b-y6d7ozyo6t] { padding: 1rem 1.5rem; }
.rv-header[b-y6d7ozyo6t] { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; }
.rv-header h2[b-y6d7ozyo6t] { margin: 0 0 .25rem; }
.rv-back[b-y6d7ozyo6t] { font-size: .85rem; text-decoration: none; color: #2563eb; }
.rv-header-actions[b-y6d7ozyo6t] { display: flex; gap: .5rem; align-items: center; flex-shrink: 0; }

.rv-table[b-y6d7ozyo6t] { width: 100%; border-collapse: collapse; font-size: .9rem; }
.rv-table th[b-y6d7ozyo6t], .rv-table td[b-y6d7ozyo6t] { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid #e5e7eb; }
.rv-table th[b-y6d7ozyo6t] { background: #f8fafc; font-weight: 600; }
.rv-num[b-y6d7ozyo6t] { text-align: right; }
.rv-status[b-y6d7ozyo6t] { font-weight: 600; }

.rv-btn[b-y6d7ozyo6t] { padding: .35rem .75rem; border: 1px solid #cbd5e1; background: #fff; border-radius: .375rem; cursor: pointer; font-size: .85rem; }
.rv-btn:hover[b-y6d7ozyo6t] { background: #f1f5f9; }
.rv-btn-primary[b-y6d7ozyo6t] { background: #2563eb; color: #fff; border-color: #2563eb; }
.rv-btn-primary:hover[b-y6d7ozyo6t] { background: #1d4ed8; }

.rv-backdrop[b-y6d7ozyo6t] { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.rv-modal[b-y6d7ozyo6t] { background: #fff; border-radius: .5rem; width: min(480px, 92vw); box-shadow: 0 10px 40px rgba(0,0,0,.2); }
.rv-modal-header[b-y6d7ozyo6t] { display: flex; justify-content: space-between; align-items: center; padding: .85rem 1.1rem; border-bottom: 1px solid #e5e7eb; }
.rv-modal-header h3[b-y6d7ozyo6t] { margin: 0; font-size: 1.05rem; }
.rv-close[b-y6d7ozyo6t] { border: none; background: none; font-size: 1.4rem; cursor: pointer; line-height: 1; }
.rv-modal-body[b-y6d7ozyo6t] { padding: 1.1rem; }
.rv-modal-footer[b-y6d7ozyo6t] { display: flex; gap: .5rem; padding: .85rem 1.1rem; border-top: 1px solid #e5e7eb; }

.rv-field[b-y6d7ozyo6t] { margin-bottom: .85rem; display: flex; flex-direction: column; gap: .3rem; }
.rv-field label[b-y6d7ozyo6t] { font-size: .8rem; font-weight: 600; color: #475569; }
.rv-field input[b-y6d7ozyo6t], .rv-field select[b-y6d7ozyo6t], .rv-field textarea[b-y6d7ozyo6t] { padding: .4rem .55rem; border: 1px solid #cbd5e1; border-radius: .375rem; font-size: .9rem; }
.rv-error[b-y6d7ozyo6t] { color: #dc2626; font-size: .85rem; margin-top: .5rem; }
/* /Components/Pages/Admin/ReleaseVerification/ReviewerInstructionsPanel.razor.rz.scp.css */
.rv-help-btn[b-5mx2v6xsey] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .75rem;
    border: 1px solid #cbd5e1;
    background: #fff;
    border-radius: .375rem;
    cursor: pointer;
    font-size: .85rem;
    color: #1e293b;
}
.rv-help-btn:hover[b-5mx2v6xsey] { background: #f1f5f9; }

.rv-help-badge[b-5mx2v6xsey] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
}

/* SfSidebar hosts this panel; fill its height and scroll internally. */
.rv-help-panel[b-5mx2v6xsey] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
}

.rv-help-header[b-5mx2v6xsey] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}
.rv-help-header h3[b-5mx2v6xsey] { margin: 0; font-size: 1.05rem; }
.rv-help-close[b-5mx2v6xsey] {
    border: none;
    background: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: #64748b;
}

.rv-help-body[b-5mx2v6xsey] {
    padding: 1rem 1.1rem 2rem;
    overflow-y: auto;
    font-size: .88rem;
    line-height: 1.45;
    color: #334155;
}
.rv-help-body h4[b-5mx2v6xsey] {
    margin: 1.1rem 0 .35rem;
    font-size: .9rem;
    color: #0f172a;
}
.rv-help-body ul[b-5mx2v6xsey], .rv-help-body ol[b-5mx2v6xsey] { margin: .25rem 0 .5rem; padding-left: 1.2rem; }
.rv-help-body li[b-5mx2v6xsey] { margin: .25rem 0; }
.rv-help-intro[b-5mx2v6xsey] {
    margin: 0 0 .5rem;
    padding: .6rem .7rem;
    background: #eff6ff;
    border-left: 3px solid #2563eb;
    border-radius: .25rem;
}

.rv-help-outcomes[b-5mx2v6xsey] { list-style: none; padding-left: 0; margin: .35rem 0; }
.rv-help-outcomes li[b-5mx2v6xsey] { display: flex; align-items: center; gap: .4rem; }

.rv-help-tag[b-5mx2v6xsey] {
    display: inline-block;
    min-width: 3.4rem;
    text-align: center;
    font-size: .72rem;
    font-weight: 600;
    padding: .08rem .4rem;
    border-radius: .375rem;
    background: #e2e8f0;
    color: #334155;
}
.rv-help-pass[b-5mx2v6xsey] { background: #dcfce7; color: #166534; }
.rv-help-fail[b-5mx2v6xsey] { background: #fee2e2; color: #991b1b; }
.rv-help-blocked[b-5mx2v6xsey] { background: #fef3c7; color: #92400e; }
/* /Components/Pages/Admin/Results/AttemptListPanel.razor.rz.scp.css */
/* ── AttemptListPanel — flat design ── */

.are-attempts-panel[b-fucrlszem1] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.are-attempts-header[b-fucrlszem1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
}

.are-attempts-title[b-fucrlszem1] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--admin-charcoal);
}

.are-attempts-badge[b-fucrlszem1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 0.6875rem;
    font-weight: 600;
    background: #f0f0f0;
    color: #555;
    border: 1px solid #d0d0d0;
    border-radius: 0;
}

.are-attempts-body[b-fucrlszem1] {
    overflow: auto;
    flex-grow: 1;
}

.are-attempts-empty[b-fucrlszem1] {
    padding: 16px 12px;
    color: #666;
    font-size: 0.8125rem;
}

/* ── Table ── */
.are-attempts-table[b-fucrlszem1] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.are-attempts-table thead[b-fucrlszem1] {
    background: #f8f8f8;
    position: sticky;
    top: 0;
    z-index: 1;
}

.are-attempts-table th[b-fucrlszem1] {
    padding: 6px 12px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid #e0e0e0;
    text-align: left;
}

.are-attempts-table td[b-fucrlszem1] {
    padding: 8px 12px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

.are-attempts-table tbody tr[b-fucrlszem1] {
    cursor: pointer;
    transition: background 0.1s;
}

.are-attempts-table tbody tr:hover[b-fucrlszem1] {
    background: #f8f8f8;
}

.are-row-selected[b-fucrlszem1] {
    background: #e8eef5 !important;
}

.are-indicator[b-fucrlszem1] {
    font-size: 0.625rem;
    color: #555;
    text-align: center;
}

.are-attempt-name[b-fucrlszem1] {
    font-weight: 600;
    color: var(--admin-charcoal);
}

.are-attempt-id[b-fucrlszem1] {
    font-size: 0.6875rem;
    color: #888;
    font-family: 'Cascadia Code', 'Consolas', monospace;
}

.are-attempt-date[b-fucrlszem1] {
    font-size: 0.6875rem;
    color: #888;
}

.are-col-right[b-fucrlszem1] {
    text-align: right;
}
/* /Components/Pages/Admin/Results/AttemptResultsExplorer.razor.rz.scp.css */
/* ══════════════════════════════════════════════
   AttemptResultsExplorer — CSS Grid layout
   Mirrors AssessmentDashboard design tokens.
   ══════════════════════════════════════════════ */

/* ── Root slice: sidebar | toggle | main ── */
.are-slice[b-61uhk7epf9] {
    display: grid;
    grid-template-columns: 300px auto 1fr;
    gap: 0;
    padding: 16px;
    transition: grid-template-columns 0.25s ease;
}

.are-left[b-61uhk7epf9] {
    min-width: 0;
    overflow: hidden;
    transition: width 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
    width: 300px;
    padding-right: 16px;
}

.are-slice.sidebar-collapsed .are-left[b-61uhk7epf9] {
    width: 0;
    opacity: 0;
    padding-right: 0;
    pointer-events: none;
}

.are-slice.sidebar-collapsed[b-61uhk7epf9] {
    grid-template-columns: 0px auto 1fr;
}

/* ── Sidebar toggle button (24×24 flat square) ── */
.are-sidebar-toggle[b-61uhk7epf9] {
    align-self: start;
    margin-top: 2px;
    margin-right: 12px;
    width: 24px;
    height: 24px;
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
    border: 1px solid #d0d0d0;
    border-radius: 0;
    font-size: 11px;
    color: #555;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}

.are-sidebar-toggle:hover[b-61uhk7epf9] {
    background: #e0e0e0;
}

/* ── Main content area ── */
.are-right[b-61uhk7epf9] {
    min-width: 0;
}

/* ── Page header ── */
.are-page-header[b-61uhk7epf9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.are-page-title[b-61uhk7epf9] {
    font-size: 18px;
    font-weight: 700;
    color: var(--admin-charcoal);
}

.are-page-subtitle[b-61uhk7epf9] {
    font-size: 12px;
    color: #666;
}

.are-page-actions[b-61uhk7epf9] {
    display: flex;
    gap: 8px;
}

.are-link-btn[b-61uhk7epf9] {
    padding: 4px 10px;
    font-size: 0.75rem;
    background: #f0f0f0;
    border: 1px solid #d0d0d0;
    border-radius: 0;
    color: #555;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
}

.are-link-btn:hover[b-61uhk7epf9] {
    background: #e0e0e0;
    color: #333;
    text-decoration: none;
}

/* ── Columns: map | toggle | detail ── */
.are-columns[b-61uhk7epf9] {
    display: grid;
    grid-template-columns: 1fr auto 450px;
    gap: 12px;
    align-items: start;
    transition: grid-template-columns 0.25s ease;
}

.are-columns.detail-collapsed[b-61uhk7epf9] {
    grid-template-columns: 1fr auto 0px;
}

.are-col[b-61uhk7epf9] {
    min-width: 0;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 0;
}

.are-col-map[b-61uhk7epf9] {
    height: calc(100vh - 340px);
    min-height: 500px;
}

.are-col-detail[b-61uhk7epf9] {
    overflow: hidden;
    transition: width 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
    max-height: calc(100vh - 340px);
    overflow-y: auto;
}

.detail-collapsed .are-col-detail[b-61uhk7epf9] {
    opacity: 0;
    padding: 0;
    border: none;
    pointer-events: none;
}

/* ── Detail toggle button (24×24 flat square) ── */
.are-detail-toggle[b-61uhk7epf9] {
    align-self: start;
    margin-top: 2px;
    width: 24px;
    height: 24px;
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
    border: 1px solid #d0d0d0;
    border-radius: 0;
    font-size: 11px;
    color: #555;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}

.are-detail-toggle:hover[b-61uhk7epf9] {
    background: #e0e0e0;
}

/* ── Responsive ── */
@media (max-width: 1400px) {
    .are-columns[b-61uhk7epf9] {
        grid-template-columns: 1fr auto 380px;
    }

    .are-columns.detail-collapsed[b-61uhk7epf9] {
        grid-template-columns: 1fr auto 0px;
    }
}

@media (max-width: 900px) {
    .are-slice[b-61uhk7epf9] {
        grid-template-columns: 1fr;
    }

    .are-columns[b-61uhk7epf9] {
        grid-template-columns: 1fr;
    }

    .are-columns.detail-collapsed[b-61uhk7epf9] {
        grid-template-columns: 1fr;
    }

    .are-detail-toggle[b-61uhk7epf9] {
        align-self: center;
        justify-self: end;
    }
}

/* ── pre wrap for JSON blocks ── */
pre[b-61uhk7epf9] {
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── plan-flow pathway diagram (replaces the Syncfusion map) ── */
.are-map-hint[b-61uhk7epf9] {
    font-size: 12.5px;
    color: #52514e;
    border-left: 3px solid #2a78d6;
    background: rgba(42, 120, 214, 0.06);
    padding: 6px 10px;
    margin-bottom: 8px;
    border-radius: 0 4px 4px 0;
}

.are-map-empty[b-61uhk7epf9] {
    color: #6e6c66;
    font-size: 13.5px;
    border: 1px dashed #d5d2cb;
    border-radius: 6px;
    padding: 24px 16px;
    text-align: center;
}
/* /Components/Pages/Admin/Results/ResultsDetailPanel.razor.rz.scp.css */
/* ── ResultsDetailPanel — flat design ── */

.are-question-text[b-i0pc0x3bz7] {
    font-style: italic;
    color: #555;
    font-size: 0.8125rem;
}

.are-mark-grid[b-i0pc0x3bz7] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.are-feedback-section[b-i0pc0x3bz7] {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #f0f0f0;
    font-size: 0.8125rem;
}

/* ── Answer display ── */
.are-answers-list[b-i0pc0x3bz7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.are-answer-row[b-i0pc0x3bz7] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 0;
    font-size: 0.8125rem;
}

.are-answer-icon[b-i0pc0x3bz7] {
    flex-shrink: 0;
    width: 14px;
    font-weight: bold;
    text-align: center;
}

.are-answer-text[b-i0pc0x3bz7] {
    flex-grow: 1;
}

.are-badge[b-i0pc0x3bz7] {
    flex-shrink: 0;
    padding: 1px 8px;
    border-radius: 0;
    font-size: 0.6875rem;
    font-weight: 600;
}

.are-answer-correct-selected[b-i0pc0x3bz7] {
    background: #d1e7dd;
    border: 1px solid #a3cfbb;
}

.are-answer-correct-selected .are-answer-icon[b-i0pc0x3bz7] {
    color: #0f5132;
}

.are-badge-correct[b-i0pc0x3bz7] {
    background: #198754;
    color: #fff;
}

.are-answer-incorrect-selected[b-i0pc0x3bz7] {
    background: #f8d7da;
    border: 1px solid #f1aeb5;
}

.are-answer-incorrect-selected .are-answer-icon[b-i0pc0x3bz7] {
    color: #842029;
}

.are-badge-selected[b-i0pc0x3bz7] {
    background: #dc3545;
    color: #fff;
}

.are-answer-unselected[b-i0pc0x3bz7] {
    background: transparent;
    color: #888;
}

.are-answer-unselected .are-answer-icon[b-i0pc0x3bz7] {
    color: #888;
}

/* ── Lists ── */
.are-response-list[b-i0pc0x3bz7] {
    margin: 0;
    padding-left: 16px;
    font-size: 0.8125rem;
}

.are-text-muted[b-i0pc0x3bz7] {
    color: #888;
    font-size: 0.75rem;
}

.are-logic-text[b-i0pc0x3bz7] {
    font-size: 0.6875rem;
}

/* ── JSON pre ── */
.are-json-pre[b-i0pc0x3bz7] {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.6875rem;
    padding: 8px;
    background: #f8f8f8;
    border: 1px solid #e0e0e0;
    border-radius: 0;
    margin-top: 4px;
}

/* Neutral "student's response" highlight — deliberately NOT the green correct
   styling: on unscored content a response marker must not imply correctness. */
.are-answer-response[b-i0pc0x3bz7] {
    background: #e5eefb;
    border: 1px solid #b7d3f6;
    border-radius: 4px;
}

.are-answer-response .are-answer-icon[b-i0pc0x3bz7] {
    color: #1c5cab;
}
/* /Components/Pages/Admin/Results/ResultsSearchBar.razor.rz.scp.css */
/* ── ResultsSearchBar — hierarchical selector + advanced search ── */

.are-search-bar[b-0c5gxu7q74] {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 0;
    padding: 12px;
    margin-bottom: 12px;
}

/* ── Selector rows (flex, wrap on small screens) ── */
.are-selector-row[b-0c5gxu7q74] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: end;
    margin-bottom: 10px;
}

.are-selector-row:last-of-type[b-0c5gxu7q74] {
    margin-bottom: 0;
}

.are-search-field[b-0c5gxu7q74] {
    min-width: 140px;
}

.are-field-school[b-0c5gxu7q74] {
    min-width: 200px;
    flex: 1 1 200px;
    max-width: 360px;
}

.are-field-year[b-0c5gxu7q74] {
    flex: 0 1 auto;
}

/* ── Labels ── */
.are-label[b-0c5gxu7q74] {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #666;
    margin-bottom: 4px;
}

/* ── Inputs / selects ── */
.are-input[b-0c5gxu7q74] {
    width: 100%;
    padding: 4px 8px;
    font-size: 0.8125rem;
    border: 1px solid #d0d0d0;
    border-radius: 0;
    background: #fff;
    color: var(--admin-charcoal);
    outline: none;
    transition: border-color 0.15s;
}

.are-input:focus[b-0c5gxu7q74] {
    border-color: #888;
}

/* ── Year level buttons ── */
.are-year-buttons[b-0c5gxu7q74] {
    display: flex;
    gap: 0;
}

.are-btn-yl[b-0c5gxu7q74] {
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid #d0d0d0;
    background: #f8f8f8;
    color: #555;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    border-right-width: 0;
}

.are-btn-yl:last-child[b-0c5gxu7q74] {
    border-right-width: 1px;
}

.are-btn-yl:hover:not(.are-btn-yl-active)[b-0c5gxu7q74] {
    background: #e8e8e8;
    color: #333;
}

.are-btn-yl-active[b-0c5gxu7q74] {
    background: var(--admin-charcoal);
    color: #fff;
    border-color: var(--admin-charcoal);
}

/* ── Hints ── */
.are-hint[b-0c5gxu7q74] {
    font-size: 0.6875rem;
    color: #888;
    margin-top: 2px;
}

.are-loading-hint[b-0c5gxu7q74] {
    margin-top: 6px;
    margin-bottom: 4px;
}

/* ── Footer (advanced + clear) ── */
.are-search-footer[b-0c5gxu7q74] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid #e8e8e8;
}

.are-import-section[b-0c5gxu7q74] {
    font-size: 0.75rem;
    color: #888;
}

/* ── Advanced content (GUID search, import) ── */
.are-advanced-content[b-0c5gxu7q74] {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #e8e8e8;
    background: #fafafa;
}

.are-search-grid[b-0c5gxu7q74] {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 12px;
    align-items: end;
}

.are-search-field-wide[b-0c5gxu7q74] {
    grid-column: span 2;
}

.are-search-action[b-0c5gxu7q74] {
    display: flex;
    align-items: end;
}

.are-import-row[b-0c5gxu7q74] {
    margin-top: 10px;
}

/* ── Buttons ── */
.are-btn[b-0c5gxu7q74] {
    padding: 4px 12px;
    font-size: 0.75rem;
    border-radius: 0;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
    border: 1px solid #d0d0d0;
}

.are-btn:disabled[b-0c5gxu7q74] {
    opacity: 0.5;
    cursor: not-allowed;
}

.are-btn-primary[b-0c5gxu7q74] {
    background: var(--admin-charcoal);
    color: #fff;
    border-color: var(--admin-charcoal);
}

.are-btn-primary:hover:not(:disabled)[b-0c5gxu7q74] {
    background: #333;
}

.are-btn-outline[b-0c5gxu7q74] {
    background: #f0f0f0;
    color: #555;
}

.are-btn-outline:hover:not(:disabled)[b-0c5gxu7q74] {
    background: #e0e0e0;
}

.are-btn-danger[b-0c5gxu7q74] {
    background: #fff;
    color: #c62828;
    border-color: #c62828;
}

.are-btn-danger:hover:not(:disabled)[b-0c5gxu7q74] {
    background: #fbe9e7;
}

/* ── Error box ── */
.are-error-box[b-0c5gxu7q74] {
    margin-top: 12px;
    padding: 10px 12px;
    background: #fbe9e7;
    border: 1px solid #c62828;
    border-radius: 0;
}

.are-error-title[b-0c5gxu7q74] {
    font-weight: 600;
    font-size: 0.8125rem;
    color: #c62828;
    margin-bottom: 4px;
}

.are-error-list[b-0c5gxu7q74] {
    margin: 0;
    padding-left: 16px;
    font-size: 0.75rem;
    color: #333;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .are-selector-row[b-0c5gxu7q74] {
        flex-direction: column;
    }

    .are-field-school[b-0c5gxu7q74] {
        max-width: 100%;
    }

    .are-search-grid[b-0c5gxu7q74] {
        grid-template-columns: 1fr;
    }

    .are-search-field-wide[b-0c5gxu7q74] {
        grid-column: auto;
    }
}
/* /Components/Pages/Admin/StaffNetwork/StaffNetwork.razor.rz.scp.css */
/* Staff Network console — Stefan admin tokens. No raw hex; all colours via
   --admin-* tokens (see app.tokens.css + admin-ui-design skill). */

.staff-network-page[b-092h2b905p] {
    font-family: var(--admin-font);
    color: var(--admin-charcoal);
    padding: 12px 16px 16px 16px;
}

/* User Settings bar sits top-right, matching every other admin page. */
.snw-top-row[b-092h2b905p] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.snw-content[b-092h2b905p] {
    max-width: 1200px;
}

/* ── Page header ── */
.snw-page-header[b-092h2b905p] {
    margin-bottom: 20px;
}

.snw-title[b-092h2b905p] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: var(--admin-h1-size);
    font-weight: var(--admin-h1-weight);
    letter-spacing: var(--admin-h2-tracking);
    text-transform: uppercase;
    color: var(--admin-charcoal);
}

.snw-title > i[b-092h2b905p] {
    font-size: 18px;
    color: var(--admin-red-active);
}

.snw-subtitle[b-092h2b905p] {
    margin: 6px 0 0 0;
    font-size: var(--admin-text1-size);
    color: var(--admin-text-muted);
    max-width: 60ch;
}

/* ── Two action cards ── */
.snw-cards[b-092h2b905p] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 20px;
}

.snw-card[b-092h2b905p] {
    background: var(--admin-surface-white);
    border: 1px solid var(--admin-column-box-border);
    border-radius: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.snw-card-head[b-092h2b905p] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--admin-h2-size);
    font-weight: var(--admin-h2-weight);
    letter-spacing: var(--admin-h2-tracking);
    text-transform: uppercase;
    color: var(--admin-charcoal);
}

.snw-card-head > i[b-092h2b905p] {
    font-size: 16px;
    color: var(--admin-red-active);
}

.snw-card-desc[b-092h2b905p] {
    margin: 0;
    font-size: var(--admin-text1-size);
    color: var(--admin-text-muted);
}

.snw-card-disabled[b-092h2b905p] {
    margin: 0;
    font-size: var(--admin-text1-size);
    color: var(--admin-text-subtle);
    font-style: italic;
}

/* ── Buttons (Button 1 / 2 base classes come from site.css; fills here) ── */
.snw-btn-primary[b-092h2b905p] {
    align-self: flex-start;
    background: var(--admin-charcoal);
    color: var(--admin-white);
    border: 1px solid var(--admin-charcoal);
}

.snw-btn-primary > i[b-092h2b905p] { color: var(--admin-white); }

.snw-btn-primary:hover:not(:disabled)[b-092h2b905p] {
    background: var(--admin-rollover-orange);
    border-color: var(--admin-rollover-orange);
    color: var(--admin-charcoal);
}

.snw-btn-primary:hover:not(:disabled) > i[b-092h2b905p] { color: var(--admin-charcoal); }

.snw-btn-secondary[b-092h2b905p] {
    background: var(--admin-surface-white);
    color: var(--admin-charcoal);
    border: 1px solid var(--admin-surface-border);
}

.snw-btn-secondary:hover:not(:disabled)[b-092h2b905p] {
    background: var(--admin-surface-hover);
}

/* ── Notices ── */
.snw-notice[b-092h2b905p] {
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 0;
    font-size: var(--admin-text1-size);
    margin-bottom: 16px;
}

.snw-notice-info[b-092h2b905p] {
    background: var(--admin-status-info-bg);
    border-color: var(--admin-status-info-border);
    color: var(--admin-status-info-fg);
}

.snw-notice-error[b-092h2b905p] {
    background: var(--admin-status-error-bg);
    border-color: var(--admin-status-error-border);
    color: var(--admin-status-error-fg);
}

.snw-notice-success[b-092h2b905p] {
    background: var(--admin-status-success-bg);
    border-color: var(--admin-status-success-border);
    color: var(--admin-status-success-fg);
}

/* ── Created-admin / move result panel ── */
.snw-result[b-092h2b905p] {
    margin-top: 4px;
    padding: 12px;
    border: 1px solid var(--admin-status-success-border);
    border-radius: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.snw-result-head[b-092h2b905p] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--admin-sub2-size);
    font-weight: var(--admin-sub2-weight);
    letter-spacing: var(--admin-sub2-tracking);
    text-transform: uppercase;
    color: var(--admin-status-success-fg);
}

.snw-result-row[b-092h2b905p] {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.snw-result-label[b-092h2b905p] {
    flex: 0 0 80px;
    font-size: var(--admin-text3-size);
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--admin-text-muted);
}

.snw-result-value[b-092h2b905p] {
    font-size: var(--admin-text1-size);
    color: var(--admin-charcoal);
}

.snw-result-code[b-092h2b905p] {
    font-family: "Cascadia Mono", Consolas, monospace;
    font-size: var(--admin-text1-size);
    background: var(--admin-surface-soft);
    border: 1px solid var(--admin-surface-border-muted);
    padding: 2px 8px;
    color: var(--admin-charcoal);
}

.snw-result-note[b-092h2b905p] {
    margin: 2px 0 0 0;
    font-size: var(--admin-text3-size);
    color: var(--admin-text-muted);
}

/* ── Move-teacher search row (inside modal) ── */
[b-092h2b905p] .snw-search-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

[b-092h2b905p] .snw-search-input {
    flex: 1 1 auto;
}

/* ── Mode radios ── */
[b-092h2b905p] .snw-radio {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: var(--admin-text1-size);
    color: var(--admin-charcoal);
    font-weight: 400;
}

[b-092h2b905p] .snw-radio input {
    margin-top: 3px;
}
/* /Components/Pages/Admin/Tours/GuidedToursEditor.razor.rz.scp.css */
.tours-admin[b-1jt08f8rnv] {
    padding: 1.25rem 1.5rem;
    width: 100%;
}

.tours-noperm[b-1jt08f8rnv] {
    color: #64748b;
    padding: 1rem;
}

.tours-header[b-1jt08f8rnv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.tours-header h2[b-1jt08f8rnv] {
    margin: 0;
    font-size: 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.tours-header-actions[b-1jt08f8rnv] {
    display: inline-flex;
    align-items: center;
    gap: .9rem;
}

.tours-filter[b-1jt08f8rnv] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    color: #475569;
}

.tours-filter-label[b-1jt08f8rnv] {
    font-weight: 600;
    white-space: nowrap;
}

.tours-filter .admin-form-select[b-1jt08f8rnv] {
    min-width: 220px;
}

/* ── Master list ── */
.tours-empty[b-1jt08f8rnv] {
    color: #94a3b8;
    padding: 1rem;
    border: 1px dashed #e2e8f0;
    border-radius: .5rem;
}

.tours-table[b-1jt08f8rnv] {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}

.tours-table th[b-1jt08f8rnv],
.tours-table td[b-1jt08f8rnv] {
    text-align: left;
    padding: .5rem .6rem;
    border-bottom: 1px solid #eef2f7;
    vertical-align: top;
}

.tours-table th[b-1jt08f8rnv] {
    color: #64748b;
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.tours-table tr.is-editing[b-1jt08f8rnv] {
    background: #eff6ff;
}

.tours-table code[b-1jt08f8rnv] {
    font-size: .82rem;
    color: #334155;
}

.tours-num[b-1jt08f8rnv] {
    text-align: center;
}

.tours-badge[b-1jt08f8rnv] {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    padding: .1rem .45rem;
    border-radius: .375rem;
}

.tours-badge-pub[b-1jt08f8rnv] { background: #dcfce7; color: #166534; }
.tours-badge-draft[b-1jt08f8rnv] { background: #e2e8f0; color: #475569; }

.tours-row-actions[b-1jt08f8rnv] {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: .4rem;
    align-items: center;
    white-space: nowrap;
}

.tours-action-sep[b-1jt08f8rnv] {
    color: #cbd5e1;
    user-select: none;
}

.tours-actions-col[b-1jt08f8rnv] {
    width: 1%;
    white-space: nowrap;
}

.tours-confirm[b-1jt08f8rnv] {
    display: inline-flex;
    gap: .35rem;
    align-items: center;
    color: #991b1b;
    font-size: .82rem;
}

.tours-link[b-1jt08f8rnv] {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    color: #2563eb;
    font-size: .82rem;
}

.tours-link:hover[b-1jt08f8rnv] { text-decoration: underline; }
.tours-link:disabled[b-1jt08f8rnv] { color: #cbd5e1; cursor: default; text-decoration: none; }
.tours-danger[b-1jt08f8rnv] { color: #dc2626; }

/* ── Editor — slide-in drawer over the full-width list ── */
.tours-editor-backdrop[b-1jt08f8rnv] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .35);
    z-index: 1200;
}

.tours-editor-drawer[b-1jt08f8rnv] {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(640px, 100%);
    background: #fff;
    box-shadow: -8px 0 24px rgba(15, 23, 42, .18);
    z-index: 1201;
    display: flex;
    flex-direction: column;
}

.tours-editor-drawer-head[b-1jt08f8rnv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
    flex: 0 0 auto;
}

.tours-editor-drawer-head h3[b-1jt08f8rnv] {
    margin: 0;
    font-size: 1.05rem;
}

.tours-drawer-close[b-1jt08f8rnv] {
    border: none;
    background: none;
    font-size: 1.5rem;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
    padding: 0 .25rem;
}

.tours-drawer-close:hover[b-1jt08f8rnv] { color: #0f172a; }

.tours-editor-drawer-body[b-1jt08f8rnv] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem 1.25rem;
}

.tours-error[b-1jt08f8rnv] {
    background: #fee2e2;
    color: #991b1b;
    border-radius: .375rem;
    padding: .5rem .7rem;
    margin-bottom: .75rem;
    font-size: .85rem;
}

.tours-publish-row label[b-1jt08f8rnv] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .88rem;
}

/* Tenant multi-select (checkbox list) */
.tours-tenant-list[b-1jt08f8rnv] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin: .15rem 0 .35rem;
}

.tours-tenant-option[b-1jt08f8rnv] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .88rem;
    cursor: pointer;
}

.tours-tenant-option code[b-1jt08f8rnv] {
    color: #64748b;
    font-size: .8rem;
}

/* "All" scope badge in the master list */
.tours-tenant-all[b-1jt08f8rnv] {
    display: inline-block;
    padding: .1rem .45rem;
    border-radius: .35rem;
    background: #eef2ff;
    color: #4338ca;
    font-size: .72rem;
    font-weight: 600;
}

/* Per-tenant scope chips (when a tour is limited to specific tenants) */
.tours-tenant-chips[b-1jt08f8rnv] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.tours-tenant-chip[b-1jt08f8rnv] {
    display: inline-block;
    padding: .1rem .45rem;
    border-radius: .35rem;
    background: #fef3c7;
    color: #92400e;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.tours-steps-head[b-1jt08f8rnv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
}

.tours-steps-head h4[b-1jt08f8rnv] { margin: 0; font-size: .95rem; }

.tours-steps-hint[b-1jt08f8rnv] {
    font-size: .8rem;
    color: #64748b;
    margin: .35rem 0 .75rem;
}

.tours-step-card[b-1jt08f8rnv] {
    border: 1px solid #e8edf3;
    border-radius: .5rem;
    padding: .75rem .85rem;
    margin-bottom: .75rem;
    background: #fafcff;
}

.tours-step-card-head[b-1jt08f8rnv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .5rem;
}

.tours-step-num[b-1jt08f8rnv] {
    font-weight: 600;
    font-size: .85rem;
    color: #0f172a;
}

.tours-step-card-actions[b-1jt08f8rnv] {
    display: inline-flex;
    gap: .6rem;
    align-items: center;
}

.tours-advanced[b-1jt08f8rnv] {
    margin-top: .25rem;
}

.tours-advanced summary[b-1jt08f8rnv] {
    cursor: pointer;
    font-size: .82rem;
    color: #475569;
}

.tours-step-preview[b-1jt08f8rnv] {
    display: block;
    margin-top: .4rem;
    max-width: 100%;
    max-height: 160px;
    border: 1px solid #e2e8f0;
    border-radius: .375rem;
}

.tours-editor-footer[b-1jt08f8rnv] {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    padding: .85rem 1.25rem;
    border-top: 1px solid #e2e8f0;
    background: #fff;
    flex: 0 0 auto;
}
/* /Components/Pages/Assessments/Allocation/AssessmentAllocation.razor.rz.scp.css */
/* ── Main layout ── */
.alloc-slice[b-s9dkbatgwx] {
    display: grid;
    grid-template-columns: var(--admin-col-schools) auto 1fr;
    gap: 0;
    padding: 16px;
    transition: grid-template-columns 0.25s ease;
    font-family: var(--admin-font);
    color: var(--admin-charcoal);
}

.alloc-left[b-s9dkbatgwx] {
    grid-column: 1;
    min-width: 0;
    overflow: hidden;
    transition: width 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
    width: var(--admin-col-schools);
    padding-right: 16px;
}

.alloc-slice.sidebar-collapsed .alloc-left[b-s9dkbatgwx] {
    width: 0;
    opacity: 0;
    padding-right: 0;
    pointer-events: none;
}

.alloc-slice.sidebar-collapsed[b-s9dkbatgwx] {
    grid-template-columns: 0px auto 1fr;
}

.alloc-slice.no-sidebar[b-s9dkbatgwx] {
    grid-template-columns: 0 0 1fr;
}

.alloc-slice.no-sidebar .alloc-left[b-s9dkbatgwx],
.alloc-slice.no-sidebar .sidebar-toggle[b-s9dkbatgwx] {
    display: none;
}

/* ── Compact docked picker (broad-scope admins, unpinned) ──
   See SchoolDashboard.razor.css for the full rationale: list column released
   to content, header-height search-select floats in its old top-left spot,
   page-top-row offset keeps the school header in place. */
.alloc-slice.picker-docked[b-s9dkbatgwx] {
    position: relative;
    grid-template-columns: 0 0 1fr;
}

.alloc-slice.picker-docked .alloc-left[b-s9dkbatgwx] {
    position: absolute;
    width: var(--admin-col-schools);
    overflow: visible;
    z-index: 40;
}

.alloc-slice.picker-docked .page-top-row[b-s9dkbatgwx] {
    margin-left: var(--admin-col-schools);
    min-height: var(--admin-picker-compact-h);
}

/* ── Sidebar toggle ── */
.sidebar-toggle[b-s9dkbatgwx] {
    grid-column: 2;
    align-self: start;
    margin-top: 2px;
    margin-right: 12px;
    /* Thin tab — matches the .app-nav-edge-toggle pattern. */
    width: 14px;
    height: 42px;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
    border: 1px solid #d0d0d0;
    border-radius: 0;
    font-size: 11px;
    color: #555;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}

.sidebar-toggle:hover[b-s9dkbatgwx] {
    background: #e0e0e0;
}

.alloc-right[b-s9dkbatgwx] {
    /* Pin to col 3. See SchoolDashboard.razor.css for the rationale. */
    grid-column: 3;
    min-width: 0;
}

/* ── School header ── */
.school-header-panel[b-s9dkbatgwx] {
    background: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 0;
    padding: 10px 14px;
    margin-bottom: 8px;
}

.school-header-row[b-s9dkbatgwx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.school-header-name[b-s9dkbatgwx] {
    font-size: 18px;
    font-weight: 700;
    color: var(--admin-charcoal);
    display: flex;
    align-items: center;
    gap: 10px;
}

.school-header-name i[b-s9dkbatgwx] {
    color: var(--admin-red-active);
    font-size: 20px;
}

/* Stefan v05: ALLOCATION content header — single grey-outlined box wrapping
   the heading, year tabs, ASSESSMENT PLAN subheading + dropdown, and the
   show-all-current / tenant-mode toggles. */
.alloc-content-header[b-s9dkbatgwx] {
    background: var(--admin-white);
    border: 1px solid var(--admin-surface-border);
    border-radius: 0;
    padding: 12px 14px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.alloc-content-header-row[b-s9dkbatgwx] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.alloc-content-header-title[b-s9dkbatgwx] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--admin-font);
    font-size: var(--admin-h2-size);
    font-weight: var(--admin-h2-weight);
    letter-spacing: var(--admin-h2-tracking);
    text-transform: uppercase;
    color: var(--admin-charcoal);
}

.alloc-content-header-title > i[b-s9dkbatgwx] {
    font-size: 16px;
    color: var(--admin-charcoal);
}

.alloc-content-header-controls[b-s9dkbatgwx] {
    display: flex;
    align-items: flex-end;
    gap: 16px;
}

/* "Assessment Plan" subheading + dropdown stack vertically. */
.alloc-assessment-field[b-s9dkbatgwx] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.alloc-subheading[b-s9dkbatgwx] {
    font-family: var(--admin-font);
    font-size: var(--admin-sub3-size);
    font-weight: var(--admin-sub3-weight);
    letter-spacing: var(--admin-sub3-tracking);
    text-transform: uppercase;
    color: var(--admin-charcoal);
}

.alloc-content-header-actions[b-s9dkbatgwx] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ── Year level tabs ── */
.alloc-year-tabs[b-s9dkbatgwx] {
    display: flex;
    /* Stefan v05: 2 px gap between tabs (was 4 ad-hoc). */
    gap: 2px;
    margin-bottom: 0;
    flex-wrap: wrap;
}

.year-tab[b-s9dkbatgwx] {
    padding: 6px 16px;
    background: #f5f5f5;
    border: 1px solid #d0d0d0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    min-height: auto;
}

.year-tab:hover[b-s9dkbatgwx] {
    background: #e8e8e8;
}

/* Stefan: active year tabs are BLACK, not dark-red. Dark-red is reserved for active inner boxes. */
.year-tab-active[b-s9dkbatgwx] {
    background: var(--admin-charcoal);
    color: var(--admin-white);
    border-color: var(--admin-charcoal);
}

.year-tab-active:hover[b-s9dkbatgwx] {
    background: #000;
}

/* ── Assessment dropdown ── */
.alloc-assessment-select[b-s9dkbatgwx] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    background: #fff;
    border: 1px solid #d0d0d0;
    padding: 8px 14px;
}

.alloc-label[b-s9dkbatgwx] {
    font-weight: 600;
    font-size: 13px;
    color: #444;
    white-space: nowrap;
}

.alloc-dropdown[b-s9dkbatgwx] {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #d0d0d0;
    border-radius: 0;
    font-size: 13px;
    background: #fff;
}

.alloc-toggle-label[b-s9dkbatgwx] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #555;
    white-space: nowrap;
    cursor: pointer;
}

.alloc-toggle-label input[type="checkbox"][b-s9dkbatgwx] {
    accent-color: var(--admin-red-active);
    cursor: pointer;
}

/* Tenant-wide allocation — high-blast-radius action, distinct look */
.alloc-tenant-mode-toggle[b-s9dkbatgwx] {
    margin-left: auto;
    padding: 4px 10px;
    border: 1px solid #4527a0;
    background: #ede7f6;
    color: #311b92;
    font-weight: 700;
}

.alloc-tenant-mode-toggle > i[b-s9dkbatgwx] {
    color: #4527a0;
}

.alloc-no-assessments[b-s9dkbatgwx] {
    flex: 1;
    font-size: 12px;
    color: #999;
    font-style: italic;
}

/* ── Body: two-column layout ── */
.alloc-body[b-s9dkbatgwx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
}

/* Stefan v05: column panel background light grey, no red rule under heading. */
.alloc-col[b-s9dkbatgwx] {
    min-width: 0;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 0;
    padding: 12px;
}

/* ── Column header (Stefan v05) ──
   Title row uses Heading 2 typography (charcoal) with the panel-specific
   FA icon ahead of the text. The red rule under the heading has been
   removed — panel background is now light grey, content is white. */
.alloc-col-header[b-s9dkbatgwx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 6px;
}

.alloc-col-title[b-s9dkbatgwx] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--admin-font);
    font-size: var(--admin-h2-size);
    font-weight: var(--admin-h2-weight);
    letter-spacing: var(--admin-h2-tracking);
    text-transform: uppercase;
    color: var(--admin-charcoal);
}

.alloc-col-title > i[b-s9dkbatgwx] {
    font-size: 16px;
    color: var(--admin-charcoal);
}

/* ── Class list ── */
.alloc-class-list[b-s9dkbatgwx] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Stefan v05: class boxes are white (panel background is light grey). */
.alloc-class-card[b-s9dkbatgwx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 0;
    cursor: pointer;
    text-align: left;
    min-height: auto;
    transition: background 0.15s, border-color 0.15s;
}

.alloc-class-card:hover[b-s9dkbatgwx] {
    background: #f8f8f8;
}

.alloc-class-card.is-selected[b-s9dkbatgwx] {
    background: #fce4ec;
    border-color: #c62828;
}

.alloc-class-row[b-s9dkbatgwx] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.alloc-class-check[b-s9dkbatgwx] {
    color: #999;
    font-size: 14px;
    width: 18px;
}

.alloc-class-card.is-selected .alloc-class-check[b-s9dkbatgwx] {
    color: #c62828;
}

.alloc-class-name[b-s9dkbatgwx] {
    font-weight: 600;
    font-size: 13px;
    flex: 1;
}

.alloc-class-count[b-s9dkbatgwx] {
    font-size: 11px;
    color: #888;
}

.alloc-class-teachers[b-s9dkbatgwx] {
    font-size: 11px;
    color: #777;
    padding-left: 26px;
}

/* ── Class allocation indicator ── */
.alloc-class-allocated[b-s9dkbatgwx] {
    font-size: 11px;
    font-weight: 600;
    color: #2e7d32;
    padding-left: 26px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.alloc-class-allocated i[b-s9dkbatgwx] {
    font-size: 10px;
}

/* Stefan v05: SELECT ALL on the CLASSES panel renders as Button 3 — black
   fill, white uppercase 12/600 text, 26 px tall (height comes from
   .admin-btn-3 base class). Hover darkens to true black. Width is fixed
   to 120 px so the text fits without truncation. */
.alloc-select-all-btn[b-s9dkbatgwx] {
    background: var(--admin-charcoal);
    color: var(--admin-white);
    border: 1px solid var(--admin-charcoal);
    width: 120px;
    transition: background 0.15s, border-color 0.15s;
}

.alloc-select-all-btn:hover[b-s9dkbatgwx] {
    background: #000;
    border-color: #000;
}

/* Student-expand / refresh keep the prior inline-grey treatment. */
.alloc-student-expand-btn[b-s9dkbatgwx],
.alloc-refresh-btn[b-s9dkbatgwx] {
    background: #f5f5f5;
    border: 1px solid #d0d0d0;
    border-radius: 0;
    padding: 4px 10px;
    font-size: 11px;
    color: #555;
    cursor: pointer;
    min-height: auto;
    transition: background 0.15s;
}

.alloc-student-expand-btn:hover[b-s9dkbatgwx],
.alloc-refresh-btn:hover[b-s9dkbatgwx] {
    background: #e8e8e8;
}

.alloc-student-toggle[b-s9dkbatgwx] {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e8e8e8;
}

/* ── Student list ── */
.alloc-student-list[b-s9dkbatgwx] {
    margin-top: 8px;
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #e8e8e8;
    padding: 4px;
}

.alloc-student-header[b-s9dkbatgwx] {
    display: flex;
    justify-content: flex-end;
    padding: 4px;
    border-bottom: 1px solid #e8e8e8;
    margin-bottom: 4px;
}

.alloc-student-row[b-s9dkbatgwx] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    cursor: pointer;
    transition: background 0.1s;
    font-size: 12px;
}

.alloc-student-row:hover[b-s9dkbatgwx] {
    background: #f5f5f5;
}

.alloc-student-row.is-selected[b-s9dkbatgwx] {
    background: #fce4ec;
}

.alloc-student-check[b-s9dkbatgwx] {
    color: #999;
    font-size: 13px;
    width: 16px;
}

.alloc-student-row.is-selected .alloc-student-check[b-s9dkbatgwx] {
    color: #c62828;
}

.alloc-student-name[b-s9dkbatgwx] {
    flex: 1;
    font-weight: 500;
}

.alloc-student-class[b-s9dkbatgwx] {
    color: #888;
    font-size: 11px;
}

/* ── Student allocation indicator ── */
.alloc-student-row.is-allocated[b-s9dkbatgwx] {
    background: #e8f5e9;
}

.alloc-student-row.is-allocated:hover[b-s9dkbatgwx] {
    background: #c8e6c9;
}

.alloc-student-allocated-badge[b-s9dkbatgwx] {
    font-size: 10px;
    font-weight: 600;
    color: #2e7d32;
    background: #c8e6c9;
    padding: 1px 6px;
    white-space: nowrap;
}

/* ── Action panel ── */
.alloc-action-panel[b-s9dkbatgwx] {
    background: #fff;
    border: 1px solid #e0e0e0;
    padding: 12px;
    margin-bottom: 12px;
}

.alloc-scope-info[b-s9dkbatgwx] {
    font-size: 13px;
    color: #555;
    margin-bottom: 12px;
    padding: 8px;
    background: #f9f9f9;
    border: 1px solid #e8e8e8;
}

.alloc-dates[b-s9dkbatgwx] {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

/* ── New scheduling group (Date + Session + Lock-to-time + advanced override) ── */
.alloc-schedule[b-s9dkbatgwx] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.alloc-schedule-row[b-s9dkbatgwx] {
    display: flex;
    gap: 12px;
}

.alloc-advanced-toggle[b-s9dkbatgwx] {
    align-self: flex-start;
    background: transparent;
    border: none;
    color: var(--admin-text-muted, #666);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 0;
    cursor: pointer;
    min-height: auto;
}

.alloc-advanced-toggle:hover[b-s9dkbatgwx] {
    color: var(--admin-charcoal, #333);
}

.alloc-advanced-toggle > i[b-s9dkbatgwx] {
    margin-right: 6px;
    font-size: 10px;
}

.alloc-schedule-hint[b-s9dkbatgwx] {
    font-size: 11px;
    color: var(--admin-text-muted, #888);
    font-style: italic;
}

.alloc-date-field[b-s9dkbatgwx] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.alloc-date-field label[b-s9dkbatgwx] {
    font-size: 11px;
    font-weight: 600;
    color: #666;
}

.alloc-date-input[b-s9dkbatgwx] {
    padding: 6px 8px;
    border: 1px solid #d0d0d0;
    border-radius: 0;
    font-size: 12px;
}

.alloc-actions[b-s9dkbatgwx] {
    display: flex;
    gap: 8px;
}

.alloc-btn[b-s9dkbatgwx] {
    padding: 8px 20px;
    border: none;
    border-radius: 0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    min-height: auto;
    transition: background 0.15s;
}

.alloc-btn-locked[b-s9dkbatgwx] {
    background: #e65100;
    color: #fff;
}

.alloc-btn-locked:hover:not(:disabled)[b-s9dkbatgwx] {
    background: #bf360c;
}

.alloc-btn-open[b-s9dkbatgwx] {
    background: #2e7d32;
    color: #fff;
}

.alloc-btn-open:hover:not(:disabled)[b-s9dkbatgwx] {
    background: #1b5e20;
}

.alloc-btn:disabled[b-s9dkbatgwx] {
    opacity: 0.5;
    cursor: default;
}

.alloc-btn i[b-s9dkbatgwx] {
    margin-right: 4px;
}

/* ── Messages ── */
.alloc-message[b-s9dkbatgwx] {
    margin-top: 8px;
    padding: 8px 10px;
    font-size: 12px;
    border: 1px solid;
}

.alloc-success[b-s9dkbatgwx] {
    background: #e8f5e9;
    border-color: #4caf50;
    color: #2e7d32;
}

.alloc-error[b-s9dkbatgwx] {
    background: #ffebee;
    border-color: #f44336;
    color: #c62828;
}

/* ── Current allocations panel ── */
.alloc-current-panel[b-s9dkbatgwx] {
    background: #fff;
    border: 1px solid #e0e0e0;
    padding: 12px;
}

.alloc-table-wrap[b-s9dkbatgwx] {
    overflow-x: auto;
}

.alloc-table[b-s9dkbatgwx] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.alloc-table th[b-s9dkbatgwx] {
    text-align: left;
    padding: 6px 8px;
    border-bottom: 2px solid #e0e0e0;
    font-weight: 600;
    color: #555;
    font-size: 11px;
}

.alloc-table td[b-s9dkbatgwx] {
    padding: 6px 8px;
    border-bottom: 1px solid #f0f0f0;
}

.alloc-table tr:hover td[b-s9dkbatgwx] {
    background: #fafafa;
}

/* ── Header actions ── */
.alloc-header-actions[b-s9dkbatgwx] {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Bulk status buttons (Stefan v05 Button 2 spec) ──
   OPEN ALL — green #2e7d32, LOCK ALL — red, both white text + icon.
   Width fixed to 110 px so the labels don't reflow on narrow rows.
   Height inherits 26 px from .admin-btn-2. */
.alloc-bulk-btn[b-s9dkbatgwx] {
    width: 110px;
    border: none;
    color: var(--admin-white);
    transition: background 0.15s;
}

.alloc-bulk-btn > i[b-s9dkbatgwx] {
    color: var(--admin-white);
}

.alloc-bulk-open[b-s9dkbatgwx] {
    background: #2e7d32;
}

.alloc-bulk-open:hover[b-s9dkbatgwx] {
    background: #256628;
}

.alloc-bulk-lock[b-s9dkbatgwx] {
    background: #c62828;
}

.alloc-bulk-lock:hover[b-s9dkbatgwx] {
    background: #a31f1f;
}

/* ── Status toggle button ── */
.alloc-status-toggle[b-s9dkbatgwx] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border: 1px solid;
    border-radius: 0;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    min-height: auto;
    transition: background 0.15s, border-color 0.15s;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Stefan v05: per-row OPEN toggle stays green; the LOCKED state uses
   dark-red `#7b1f1f` (--admin-red-active) so it reads as the same
   "active inner box" colour Stefan reserves for that state. */
.alloc-status-toggle.is-open[b-s9dkbatgwx] {
    background: #2e7d32;
    border-color: #2e7d32;
    color: var(--admin-white);
}

.alloc-status-toggle.is-open:hover[b-s9dkbatgwx] {
    background: #256628;
}

.alloc-status-toggle.is-locked[b-s9dkbatgwx] {
    background: var(--admin-red-active);
    border-color: var(--admin-red-active);
    color: var(--admin-white);
}

.alloc-status-toggle.is-locked:hover[b-s9dkbatgwx] {
    background: #5e1717;
}

.alloc-status-toggle i[b-s9dkbatgwx] {
    font-size: 10px;
}

/* ── Remove button ── */
.alloc-remove-btn[b-s9dkbatgwx] {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 4px;
    font-size: 12px;
    min-height: auto;
    transition: color 0.15s;
}

.alloc-remove-btn:hover[b-s9dkbatgwx] {
    color: #c62828;
}

/* ── Empty / loading ── */
.alloc-empty[b-s9dkbatgwx],
.alloc-loading[b-s9dkbatgwx] {
    padding: 16px;
    color: #666;
}

.alloc-empty-small[b-s9dkbatgwx] {
    padding: 8px;
    color: #999;
    font-size: 12px;
}

/* ── Tenant-mode school picker scope bar + search ── */
.alloc-school-scopebar[b-s9dkbatgwx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.alloc-school-count[b-s9dkbatgwx] {
    font-size: 12px;
    color: #666;
    white-space: nowrap;
}

.alloc-school-search[b-s9dkbatgwx] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 4px 8px;
    font-size: 12px;
    border: 1px solid #d0d0d0;
    border-radius: 0;
}

/* CSS-drawn checkbox for the tenant-mode school list — deliberately NOT a
   Font Awesome <i>. FA's autoReplaceSvg + this list's search-filter row
   recycling freeze / duplicate class-swapped FA icons (stale + doubled
   ticks). See docs/SyncfusionComponentRules.md §1. Empty grey box when
   unselected; solid red box + white tick when selected. */
.alloc-school-check[b-s9dkbatgwx] {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    border: 1.5px solid #999;
    border-radius: 2px;
    background: #fff;
    position: relative;
    box-sizing: border-box;
}

.alloc-school-check.is-checked[b-s9dkbatgwx] {
    border-color: #c62828;
    background: #c62828;
}

.alloc-school-check.is-checked[b-s9dkbatgwx]::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ── OrgUnit picker selected ── */
[b-s9dkbatgwx] .ou-row.is-selected {
    color: #c62828;
    font-weight: 700;
}

/* ── Responsive ── */
@media (max-width: 1200px) {
    .alloc-body[b-s9dkbatgwx] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .alloc-slice[b-s9dkbatgwx] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Assessments/AssessmentDashboard.razor.rz.scp.css */
.assess-slice[b-d80vk5en66] {
    display: grid;
    grid-template-columns: var(--admin-col-schools) auto 1fr;
    gap: 0;
    /* v04: minimal outer padding so admins on laptops get every pixel.
       Same trim as .dashboard-slice / .student-slice. */
    padding: 12px 8px 8px 12px;
    transition: grid-template-columns 0.25s ease;
    font-family: var(--admin-font);
    color: var(--admin-charcoal);
}


.assess-left[b-d80vk5en66] {
    grid-column: 1;
    min-width: 0;
    overflow: hidden;
    transition: width 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
    width: var(--admin-col-schools);
    padding-right: 8px;
}

.assess-slice.sidebar-collapsed .assess-left[b-d80vk5en66] {
    width: 0;
    opacity: 0;
    padding-right: 0;
    pointer-events: none;
}

.assess-slice.sidebar-collapsed[b-d80vk5en66] {
    grid-template-columns: 0px auto 1fr;
}

.assess-slice.no-sidebar[b-d80vk5en66] {
    grid-template-columns: 0 0 1fr;
}

.assess-slice.no-sidebar .assess-left[b-d80vk5en66],
.assess-slice.no-sidebar .sidebar-toggle[b-d80vk5en66] {
    display: none;
}

/* ── Compact docked picker (broad-scope admins, unpinned) ──
   See SchoolDashboard.razor.css for the full rationale: list column released
   to content, header-height search-select floats in its old top-left spot,
   page-top-row offset keeps the school header in place. */
.assess-slice.picker-docked[b-d80vk5en66] {
    position: relative;
    grid-template-columns: 0 0 1fr;
}

.assess-slice.picker-docked .assess-left[b-d80vk5en66] {
    position: absolute;
    width: var(--admin-col-schools);
    overflow: visible;
    z-index: 40;
}

.assess-slice.picker-docked .page-top-row[b-d80vk5en66] {
    margin-left: var(--admin-col-schools);
    min-height: var(--admin-picker-compact-h);
}

/* ── Sidebar toggle button ── */
.sidebar-toggle[b-d80vk5en66] {
    grid-column: 2;
    align-self: start;
    margin-top: 2px;
    margin-right: 6px;
    /* Thin tab — matches the .app-nav-edge-toggle pattern. */
    width: 14px;
    height: 42px;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--admin-toggle-fill);
    border: 1px solid var(--admin-toggle-stroke);
    border-radius: 0;
    font-size: 12px;
    color: var(--admin-toggle-symbol);                /* v04: darker grey */
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}

.sidebar-toggle:hover[b-d80vk5en66] {
    background: var(--admin-surface-hover-strong);
}

.assess-right[b-d80vk5en66] {
    /* Pin to col 3. See SchoolDashboard.razor.css for the rationale. */
    grid-column: 3;
    min-width: 0;
}

/* ── Three-column layout (+ toggle button between students & detail) ── */
.dash-columns[b-d80vk5en66] {
    display: grid;
    grid-template-columns: var(--admin-col-classes) 1fr auto var(--admin-col-detail);
    gap: 12px;
    align-items: start;
    transition: grid-template-columns 0.25s ease;
}

.dash-columns.detail-collapsed[b-d80vk5en66] {
    grid-template-columns: var(--admin-col-classes) 1fr auto 0px;
}

/* Stefan column box — wraps tabs + inner boxes; stays light grey even when a child is "active" */
.dash-col[b-d80vk5en66] {
    min-width: 0;
    background: var(--admin-column-box-bg);
    border: 1px solid var(--admin-column-box-border);
    border-radius: 0;
    padding: 12px;
}

.dash-col-detail[b-d80vk5en66] {
    overflow: hidden;
    transition: width 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
}

.detail-collapsed .dash-col-detail[b-d80vk5en66] {
    opacity: 0;
    padding: 0;
    border: none;
    pointer-events: none;
}

/* ── Detail toggle button ── */
.detail-toggle[b-d80vk5en66] {
    align-self: start;
    margin-top: 2px;
    width: var(--admin-toggle-size);
    height: var(--admin-toggle-size);
    min-height: var(--admin-toggle-size);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--admin-toggle-fill);
    border: 1px solid var(--admin-toggle-stroke);
    border-radius: 0;
    font-size: 12px;
    color: var(--admin-toggle-symbol);                /* v04: darker grey */
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}

.detail-toggle:hover[b-d80vk5en66] {
    background: var(--admin-surface-hover-strong);
}

/* ── School header panel ──
   .page-top-row layout shared via site.css so the rule lives in one place. */
.school-header-panel[b-d80vk5en66] {
    background: var(--admin-white);
    border: 1px solid var(--admin-surface-border);
    border-radius: 0;
    padding: 10px 14px;
    margin-bottom: 8px;
}

/* Coordinator actions inside the collapsible school-header-detail (End
   Assessments / Schedule / Window). Wrap horizontally so they don't
   overflow a narrow header card. */
.school-detail-actions[b-d80vk5en66] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--admin-surface-border-soft);
}

/* Page-action strip directly beneath the User Settings area.
   Right-aligned row of always-visible coordinator actions (Generate Security
   Code + Create Test Class) so they don't compete with the school name for
   horizontal space in the header card. */
.assess-page-actions[b-d80vk5en66] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.school-header-panel button[b-d80vk5en66] {
    min-height: auto;
}

.school-header-row[b-d80vk5en66] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.school-header-name[b-d80vk5en66] {
    font-size: 18px;
    font-weight: 700;
    color: var(--admin-charcoal);
    display: flex;
    align-items: center;
    gap: 10px;
}

.school-header-name i[b-d80vk5en66] {
    color: var(--admin-red-active);
    font-size: 20px;
}

.school-header-toggle[b-d80vk5en66] {
    background: var(--admin-toggle-fill);
    border: 1px solid var(--admin-toggle-stroke);
    border-radius: 0;
    width: var(--admin-toggle-size);
    height: var(--admin-toggle-size);
    min-height: var(--admin-toggle-size);                    /* beat global button min-height */
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    box-sizing: border-box;
    color: var(--admin-toggle-symbol);                       /* v04: darker grey */
    flex-shrink: 0;
}

.school-header-toggle:hover[b-d80vk5en66] {
    background: var(--admin-surface-hover-strong);
}

/* Right-side group inside school-header-row: coordinator buttons + toggle */
.school-header-actions[b-d80vk5en66] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

/* ── Coordinator toolbar buttons (moved from DashboardHeaderPanel) ── */
.coordinator-btn[b-d80vk5en66] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    min-height: auto;                                        /* beat global 40px */
    border: none;
    border-radius: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: var(--admin-sub2-tracking);
    text-transform: uppercase;
    color: var(--admin-white);
    cursor: pointer;
    transition: background 0.15s;
}

.coordinator-btn:disabled[b-d80vk5en66] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Calendar-window "disabled" treatment (FunctionWindowGate, Disable /
   DisableWithMessage). Greyed-out like :disabled, but the element stays
   clickable so the DisableWithMessage toast can fire — so we deliberately
   do NOT use the native disabled attribute. The per-button :hover rules
   below also exclude .is-disabled to suppress the hover colour change. */
.coordinator-btn.is-disabled[b-d80vk5en66] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-end-assessment[b-d80vk5en66] {
    background: var(--admin-red-active);
}

.btn-end-assessment:hover:not(:disabled)[b-d80vk5en66] {
    background: #b71c1c;
}

.btn-security-code[b-d80vk5en66] {
    background: var(--admin-btn-download-fill);
}

.btn-security-code:hover:not(:disabled):not(.is-disabled)[b-d80vk5en66] {
    background: var(--admin-btn-download-stroke);
}

/* Inline failure message — sits in the same slot as the success pill
   but with the standard error palette. */
.security-code-error[b-d80vk5en66] {
    display: inline-flex;
    align-items: center;
    background: #fff6f6;
    border: 1px solid var(--admin-status-error-fg, #b00020);
    color: var(--admin-status-error-fg, #b00020);
    padding: 6px 10px;
    font-size: 12px;
    max-width: 480px;
}

.btn-create-test-class[b-d80vk5en66] {
    background: #546e7a;
}

.btn-create-test-class:hover:not(:disabled):not(.is-disabled)[b-d80vk5en66] {
    background: #37474f;
}

/* Bulk schedule header buttons */
.btn-bulk-schedule-school[b-d80vk5en66] {
    background: #1565c0;
}
.btn-bulk-schedule-school:hover:not(:disabled)[b-d80vk5en66] {
    background: #0d47a1;
}
.btn-bulk-schedule-tenant[b-d80vk5en66] {
    background: #4527a0;
}
.btn-bulk-schedule-tenant:hover:not(:disabled)[b-d80vk5en66] {
    background: #311b92;
}

/* Per-school "set the completion window" action — lighter teal so the
   per-school vs tenant pair reads as a colour-ramped scope hierarchy
   (lighter = narrower scope). Same hue family as tenant so they group
   visually under "window" actions. */
.btn-bulk-window-school[b-d80vk5en66] {
    background: #26a69a;
}
.btn-bulk-window-school:hover:not(:disabled)[b-d80vk5en66] {
    background: #00897b;
}

/* Tenant-wide "set the completion window" action — teal, distinct from
   the blue (school-schedule) and indigo (tenant-schedule, deprecated) above. */
.btn-bulk-window-tenant[b-d80vk5en66] {
    background: #00796b;
}
.btn-bulk-window-tenant:hover:not(:disabled)[b-d80vk5en66] {
    background: #004d40;
}

.bulk-schedule-success[b-d80vk5en66] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--admin-status-success-bg, #e8f5e9);
    color: var(--admin-status-success-fg, #2e7d32);
    border: 1px solid var(--admin-status-success-fg, #2e7d32);
    border-radius: 0;
    font-size: 12px;
    font-weight: 700;
}

/* ── Bulk schedule dialog ── */
.bulk-schedule-backdrop[b-d80vk5en66] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bulk-schedule-dialog[b-d80vk5en66] {
    background: var(--admin-white, #fff);
    min-width: 420px;
    max-width: 560px;
    border: 1px solid var(--admin-surface-border, #ddd);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
}

.bulk-schedule-header[b-d80vk5en66] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--admin-charcoal, #333);
    color: var(--admin-white, #fff);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.bulk-schedule-header > span[b-d80vk5en66] {
    flex: 1;
}

.bulk-schedule-close[b-d80vk5en66] {
    background: transparent;
    border: none;
    color: var(--admin-white, #fff);
    padding: 0 4px;
    cursor: pointer;
    min-height: auto;
    font-size: 16px;
}

.bulk-schedule-body[b-d80vk5en66] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bulk-schedule-target[b-d80vk5en66] {
    font-size: 13px;
    color: var(--admin-charcoal, #333);
    padding: 8px 10px;
    background: var(--admin-surface-soft, #fafafa);
    border-left: 3px solid var(--admin-red-active, #7b1f1f);
}

.bulk-schedule-field[b-d80vk5en66] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bulk-schedule-field label[b-d80vk5en66] {
    font-size: 11px;
    font-weight: 700;
    color: var(--admin-text-muted, #666);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.bulk-schedule-field input[b-d80vk5en66],
.bulk-schedule-field select[b-d80vk5en66] {
    padding: 6px 8px;
    border: 1px solid var(--admin-surface-border, #d0d0d0);
    font-size: 13px;
    border-radius: 0;
}

.bulk-schedule-check[b-d80vk5en66] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    cursor: pointer;
}

.bulk-schedule-hint[b-d80vk5en66] {
    font-size: 11px;
    color: var(--admin-text-muted, #888);
    font-style: italic;
}

.bulk-schedule-error[b-d80vk5en66] {
    color: var(--admin-red-active, #7b1f1f);
    background: #fff6f6;
    border: 1px solid #f0c0c0;
    padding: 6px 8px;
    font-size: 12px;
}

.bulk-schedule-actions[b-d80vk5en66] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--admin-divider, #eee);
    background: var(--admin-surface-soft, #fafafa);
}

.bulk-schedule-btn[b-d80vk5en66] {
    padding: 8px 20px;
    border-radius: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    cursor: pointer;
    min-height: 32px;
    border: 1px solid transparent;
}

.bulk-schedule-btn.btn-primary[b-d80vk5en66] {
    background: var(--admin-red-active, #7b1f1f);
    color: var(--admin-white, #fff);
}

.bulk-schedule-btn.btn-cancel[b-d80vk5en66] {
    background: var(--admin-white, #fff);
    color: var(--admin-charcoal, #333);
    border-color: var(--admin-surface-border, #d0d0d0);
}

.bulk-schedule-btn:disabled[b-d80vk5en66] {
    opacity: 0.5;
    cursor: not-allowed;
}

.security-code-display[b-d80vk5en66] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--admin-status-success-bg);
    border: 2px solid var(--admin-status-success-fg);
    padding: 6px 14px;
    border-radius: 0;
}

.security-code-value[b-d80vk5en66] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 20px;
    font-weight: 900;
    color: var(--admin-status-success-fg);
    letter-spacing: 3px;
}

/* Copy-to-clipboard button inside the green security-code pill.
   Borderless, ghost-style — the pill itself is the visual frame
   so the button sits beside the digits as a quiet affordance. */
.security-code-copy-btn[b-d80vk5en66] {
    background: transparent;
    border: 0;
    padding: 2px 6px;
    margin: 0;
    min-height: auto;
    cursor: pointer;
    color: var(--admin-status-success-fg);
    border-radius: 3px;
    transition: background 0.15s, color 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.security-code-copy-btn:hover[b-d80vk5en66] {
    background: rgba(0, 0, 0, 0.05);
}

/* Brief feedback flash after the copy lands. The `_securityCodeCopied`
   flag is reset back to false after ~2s by a delayed background task. */
.security-code-copy-btn.is-copied[b-d80vk5en66] {
    color: #2e7d32;
}

.security-code-copy-glyph[b-d80vk5en66] {
    font-size: 16px;
    line-height: 1;
    display: inline-block;
}

.test-class-message[b-d80vk5en66] {
    display: inline-flex;
    align-items: center;
    background: var(--admin-status-success-bg);
    border: 1px solid var(--admin-status-success-fg);
    color: var(--admin-status-success-fg);
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
}

/* On narrow viewports let the action cluster wrap below the name */
@media (max-width: 900px) {
    .school-header-row[b-d80vk5en66] {
        flex-wrap: wrap;
    }
    .school-header-actions[b-d80vk5en66] {
        flex-basis: 100%;
        justify-content: flex-start;
    }
}

.school-header-detail[b-d80vk5en66] {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--admin-divider);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.school-detail-row[b-d80vk5en66] {
    display: flex;
    gap: 8px;
    align-items: baseline;
    font-size: 12px;
}

.school-detail-label[b-d80vk5en66] {
    font-weight: 600;
    color: var(--admin-text-faint);
    min-width: 40px;
}

.school-detail-value[b-d80vk5en66] {
    color: var(--admin-text-strong);
}

.school-detail-mono[b-d80vk5en66] {
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 11px;
    color: var(--admin-text-subtle);
}

/* ── Empty / loading states ── */
.dash-empty[b-d80vk5en66],
.dash-loading[b-d80vk5en66] {
    padding: 16px;
    color: var(--admin-text-faint);
}

/* ── OrgUnit picker: selected school in Stefan dark-red ── */
[b-d80vk5en66] .ou-row.is-selected {
    color: var(--admin-red-active);
    font-weight: 700;
}

/* ── Responsive ── */
@media (max-width: 1400px) {
    .dash-columns[b-d80vk5en66] {
        grid-template-columns: 1fr auto 1fr;
    }

    .dash-columns.detail-collapsed[b-d80vk5en66] {
        grid-template-columns: 1fr auto 0px;
    }

    .dash-col-classes[b-d80vk5en66] {
        grid-column: 1 / -1;
    }
}

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

    .dash-columns[b-d80vk5en66] {
        grid-template-columns: 1fr;
    }

    .dash-columns.detail-collapsed[b-d80vk5en66] {
        grid-template-columns: 1fr;
    }

    .detail-toggle[b-d80vk5en66] {
        align-self: center;
        justify-self: end;
    }

    .dash-col-classes[b-d80vk5en66] {
        grid-column: auto;
    }
}
/* /Components/Pages/Assessments/Dashboard/DashboardActivityLogsPanel.razor.rz.scp.css */
/* v04: panel reads as an inset white card inside the grey column frame. */
.activity-logs-panel[b-0oxdygarsf] {
    border: 1px solid var(--admin-surface-border);
    border-radius: 0;
    background: var(--admin-surface-white);
    margin-top: 8px;
}

/* Stefan v05: dark-red border when the panel is open, mirrors the active
   selection treatment used elsewhere on admin pages. */
.activity-logs-panel.is-active[b-0oxdygarsf] {
    border-color: var(--admin-red-active);
}

.logs-header[b-0oxdygarsf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px;
    cursor: default;                                  /* v05: only the chevron is clickable now */
    background: var(--admin-surface-white);          /* v04: was column-box grey */
}

.logs-header-left[b-0oxdygarsf] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;                                    /* let title ellipsis if cramped */
}

/* Stefan v05: open/close button matches the Class Details box toggle —
   24×24 grey square, charcoal +/- glyph, button is the only click target.
   Lives in the top-right of the header (14 px padding maintained by parent). */
.logs-toggle[b-0oxdygarsf] {
    flex: 0 0 auto;
    width: var(--admin-toggle-size);
    height: var(--admin-toggle-size);
    min-width: var(--admin-toggle-size);
    min-height: var(--admin-toggle-size);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--admin-toggle-fill);
    border: 1px solid var(--admin-toggle-stroke);
    border-radius: 0;
    color: var(--admin-toggle-symbol);
    cursor: pointer;
    font-size: 12px;
    box-sizing: border-box;
    transition: background 0.15s;
}

.logs-toggle:hover[b-0oxdygarsf] {
    background: var(--admin-surface-hover-strong);
}

.logs-toggle > span > i[b-0oxdygarsf] {
    font-size: 11px;
    line-height: 1;
}

/* v04: panel headings are Heading 2 (14/700/uppercase/0.5 letter-spacing). */
.logs-title[b-0oxdygarsf] {
    font-family: var(--admin-font);
    font-size: var(--admin-h2-size);
    font-weight: var(--admin-h2-weight);
    letter-spacing: var(--admin-h2-tracking);
    text-transform: uppercase;
    color: var(--admin-charcoal);
}

/* v04: alert-count badge — circular, navy when zero, red when active. */
.logs-badge[b-0oxdygarsf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    background: var(--admin-badge-zero-bg);
    color: var(--admin-white);
    font-size: 11px;
    font-weight: 700;
    border-radius: 11px;
    box-sizing: border-box;
}

.logs-badge.has-alerts[b-0oxdygarsf] {
    background: var(--admin-badge-active-bg);
}

/* v04: MARK ALL AS READ row beneath the heading, right-aligned, 14 px insets.
   v05: flex-wrap + gap so action buttons can stack onto separate lines
   on a narrow column instead of overflowing the panel edge. */
.logs-action-row[b-0oxdygarsf] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    padding: 0 14px 14px;
    background: var(--admin-surface-white);
}

.logs-action-row > .admin-btn-3[b-0oxdygarsf] {
    flex: 0 1 auto;
    min-width: 0;
    padding-left: 10px;
    padding-right: 10px;
}

.logs-mark-read-btn[b-0oxdygarsf] {
    background: var(--admin-btn-mark-read-fill);
    color: var(--admin-white);
    border: 1px solid var(--admin-btn-mark-read-fill);
}

.logs-mark-read-btn:hover[b-0oxdygarsf] {
    filter: brightness(1.08);
}

/* v04: time-range now uses admin tab structure. Subheading-3 label sits 14 px
   above the tabs; tabs share equal width with a 6 px charcoal baseline. */
.logs-filters[b-0oxdygarsf] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 14px 14px;
    background: var(--admin-surface-white);
}

.logs-filter-label[b-0oxdygarsf] {
    font-family: var(--admin-font);
    font-size: 11px;
    font-weight: 700;
    color: var(--admin-charcoal);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.logs-tabs[b-0oxdygarsf] {
    display: flex;
    gap: 0;
    flex-wrap: nowrap;
    align-items: flex-end;
    border-bottom: var(--admin-tab-baseline-height) solid var(--admin-tab-baseline-color);
}

.logs-tab[b-0oxdygarsf] {
    flex: 1 1 0;
    min-width: 0;
    height: var(--admin-tab-height);
    min-height: var(--admin-tab-height);
    padding: 0 var(--admin-tab-pad-x);
    margin-bottom: var(--admin-tab-gap-below);
    border: none;
    border-right: 1px solid var(--admin-white);
    background: var(--admin-year-tab-bg);
    color: var(--admin-charcoal);
    font-size: var(--admin-sub2-size);
    font-weight: var(--admin-sub2-weight);
    letter-spacing: var(--admin-sub2-tracking);
    text-transform: uppercase;
    text-align: center;
    border-radius: 0;
    cursor: pointer;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.logs-tab:last-child[b-0oxdygarsf] { border-right: none; }
.logs-tab:hover:not(.is-selected)[b-0oxdygarsf] { background: var(--admin-year-tab-bg-hover); }

.logs-tab.is-selected[b-0oxdygarsf] {
    background: var(--admin-charcoal);
    color: var(--admin-white);
    margin-bottom: 0;
    height: calc(var(--admin-tab-height) + var(--admin-tab-gap-below));
    min-height: calc(var(--admin-tab-height) + var(--admin-tab-gap-below));
}

.logs-body[b-0oxdygarsf] {
    max-height: 350px;
    overflow-y: auto;
}

.logs-empty[b-0oxdygarsf] {
    padding: 16px;
    color: var(--admin-text-subtle);
    font-size: 13px;
}

.log-entry[b-0oxdygarsf] {
    border-bottom: 1px solid var(--admin-surface-border-soft);
}

.log-entry.is-flagged[b-0oxdygarsf] {
    border-left: 3px solid #f9a825;
}

.log-entry.is-read[b-0oxdygarsf] {
    opacity: 0.6;
}

.log-entry-header[b-0oxdygarsf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    cursor: pointer;
}

.log-entry-header:hover[b-0oxdygarsf] {
    background: var(--admin-surface-soft);
}

.log-entry-left[b-0oxdygarsf] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.log-event-type[b-0oxdygarsf] {
    font-size: 12px;
    font-weight: 700;
    color: var(--admin-text-strong);
    background: var(--admin-divider);
    padding: 2px 8px;
    border-radius: 2px;
}

.log-person[b-0oxdygarsf] {
    font-size: 12px;
    color: var(--admin-text-muted);
}

.log-class-badge[b-0oxdygarsf] {
    font-size: 11px;
    background: var(--admin-status-info-bg);
    color: var(--admin-status-info-fg);
    padding: 2px 6px;
    border-radius: 2px;
}

.log-entry-right[b-0oxdygarsf] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.log-time[b-0oxdygarsf] {
    font-size: 11px;
    color: var(--admin-text-subtle);
    white-space: nowrap;
}

.log-expand-icon[b-0oxdygarsf] {
    font-size: 10px;
    color: var(--admin-text-subtle);
}

.log-entry-detail[b-0oxdygarsf] {
    padding: 8px 14px 12px 28px;
    background: var(--admin-surface-soft);
}

/* Human-readable narrative line (replaces the old raw-JSON <pre>). Reads as
   a normal sentence, not a code block. */
.log-narrative[b-0oxdygarsf] {
    font-size: 13px;
    line-height: 1.45;
    color: var(--admin-text);
    margin: 0 0 8px 0;
    word-break: break-word;
}

.log-entry-actions[b-0oxdygarsf] {
    display: flex;
    gap: 8px;
}

.log-btn[b-0oxdygarsf] {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    color: var(--admin-white);
}

.btn-mark-read[b-0oxdygarsf] {
    background: var(--admin-status-success-fg);
}

.btn-flag-activity[b-0oxdygarsf] {
    background: #f9a825;
    color: var(--admin-charcoal);
}

.log-btn:disabled[b-0oxdygarsf] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Components/Pages/Assessments/Dashboard/DashboardClassDonutCard.razor.rz.scp.css */
/* Override global min-height: 40px from site.css touch targets */
.donut-card button[b-9fevkhcywq] {
    min-height: auto;
}

.donut-card[b-9fevkhcywq] {
    border: 1px solid var(--admin-surface-hover-strong);
    border-radius: 0;
    background: var(--admin-white);
    transition: border-color 0.15s;
}

.donut-card.is-selected[b-9fevkhcywq] {
    border-color: var(--admin-red-active);
    box-shadow: 0 0 0 2px rgba(123, 31, 31, 0.12);
}

/* ── Collapsed header (always visible) ── */
.donut-card-head[b-9fevkhcywq] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 12px;
    user-select: none;
}

/* Top row: name on left, count + toggle on right — clickable to select class */
.donut-card-head-top[b-9fevkhcywq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
}

.donut-card-head-top:hover[b-9fevkhcywq] {
    background: var(--admin-surface-soft);
}

.donut-card-name-group[b-9fevkhcywq] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.donut-card-icon[b-9fevkhcywq] {
    font-size: 16px;
    color: var(--admin-text-muted);
    flex-shrink: 0;
}

/* Scheduled-status tick in front of the class name.
   Solid check = scheduled (green), outline circle = not scheduled (muted). */
.donut-card-sched-icon[b-9fevkhcywq] {
    font-size: 13px;
    flex-shrink: 0;
    line-height: 1;
}

.donut-card-sched-icon.is-scheduled[b-9fevkhcywq] {
    color: var(--bucket-complete);
}

.donut-card-sched-icon.is-unscheduled[b-9fevkhcywq] {
    color: var(--admin-text-muted);
}

.donut-card-title[b-9fevkhcywq] {
    font-weight: 700;
    font-size: 14px;
    color: var(--admin-charcoal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.donut-card-head-right[b-9fevkhcywq] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Stefan "Student List" button — dark-grey 26h × 110w, white people-group icon + ALL CAPS label */
.donut-card-total[b-9fevkhcywq] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 110px;
    height: 26px;
    padding: 0 12px;
    background: var(--admin-btn-student-list-fill);
    border: 1px solid var(--admin-btn-student-list-stroke);
    color: var(--admin-white);
    font-size: var(--admin-sub2-size);           /* 12px */
    font-weight: var(--admin-sub2-weight);       /* 700 */
    letter-spacing: var(--admin-sub2-tracking);  /* 0.5px */
    text-transform: uppercase;
    border-radius: 0;
    box-sizing: border-box;
    white-space: nowrap;
    cursor: pointer;
}

.donut-card-total:hover[b-9fevkhcywq] {
    filter: brightness(1.1);
}

.donut-card-total.is-selected[b-9fevkhcywq] {
    outline: 2px solid var(--admin-red-active, #7b1f1f);
    outline-offset: -2px;
}

.donut-card-total > i[b-9fevkhcywq] {
    font-size: 14px;
    color: var(--admin-white);
}

/* v04 minimised state — when the card is collapsed, drop the "Students" label
   and tighten padding to 6px so the heading row breathes. */
.donut-card:not(.is-expanded) .donut-card-total[b-9fevkhcywq] {
    min-width: 0;
    padding: 0 6px;
}
.donut-card:not(.is-expanded) .donut-card-total-label[b-9fevkhcywq] {
    display: none;
}

/* ── Full-width stacked bar (below name row) ── */
.donut-card-bar-container[b-9fevkhcywq] {
    display: flex;
    height: 16px;
    border-radius: 2px;
    overflow: hidden;
    gap: 1px;
    width: 100%;
}

/* Collapsed schedule line under the bar: scheduled date + session symbol,
   or an inline SCHEDULE button when unscheduled. Right-aligned so it sits
   under the bar like the date does on the School Dashboard card. */
.donut-card-sched-line[b-9fevkhcywq] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 20px;
    margin-top: 6px;
}

.donut-card-sched-date[b-9fevkhcywq] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--admin-text-muted);
    white-space: nowrap;
}

/* Matches .multi-card-session-icon — slightly larger, full charcoal so
   the sunrise/sun/sunset glyph reads at a glance. */
.donut-card-session-icon[b-9fevkhcywq] {
    font-size: 15px;
    color: var(--admin-charcoal);
}

.donut-card-sched-line-btn[b-9fevkhcywq] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 20px;
    min-height: 20px;
    padding: 0 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--admin-white);
    background: var(--admin-btn-reschedule-fill);   /* matches this card's SCHEDULE button */
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.donut-card-sched-line-btn > i[b-9fevkhcywq] { font-size: 11px; }
.donut-card-sched-line-btn:hover:not(:disabled)[b-9fevkhcywq] { filter: brightness(1.3); }
.donut-card-sched-line-btn:disabled[b-9fevkhcywq] { opacity: 0.5; cursor: not-allowed; }

.donut-card-bar-seg[b-9fevkhcywq] {
    min-width: 2px;
    cursor: pointer;
    transition: flex 0.2s, filter 0.15s;
    /* Centre the bar-seg-count span inside the segment so the number sits on
       the colour rather than dropping below the bar. Mirrors the rule on
       .multi-card-bar-seg (Dashboard) and .gender-card-bar-seg (Students). */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.donut-card-bar-seg:hover[b-9fevkhcywq] {
    filter: brightness(1.15);
}

.donut-card-bar-seg.is-selected[b-9fevkhcywq] {
    box-shadow: inset 0 0 0 2px var(--admin-charcoal, #333);
    filter: brightness(1.1);
}

/* Hide the bar when card is expanded */
.donut-card.is-expanded .donut-card-bar-container[b-9fevkhcywq] {
    display: none;
}

/* ── Toggle button ── */
.donut-card-toggle[b-9fevkhcywq] {
    width: var(--admin-toggle-size);
    height: var(--admin-toggle-size);
    min-height: var(--admin-toggle-size);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--admin-toggle-fill);
    border: 1px solid var(--admin-toggle-stroke);
    border-radius: 0;
    font-size: 12px;
    color: var(--admin-toggle-symbol);                /* v04: darker grey */
    cursor: pointer;
}

.donut-card-toggle:hover[b-9fevkhcywq] {
    background: var(--admin-surface-hover-strong);
}

/* ── Expanded body ── */
/* Stefan dividing line: inset 14px each side, not full card width */
.donut-card-body[b-9fevkhcywq] {
    padding: 0 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}

.donut-card-body[b-9fevkhcywq]::before {
    content: "";
    display: block;
    margin: 0 14px;
    border-top: 1px solid var(--admin-divider);
}

/* ── Teacher pills ── */
.donut-card-teachers[b-9fevkhcywq] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 10px;
}

/* Stefan staff chip — rounded pill, Text 5 type, grey = teacher, gold = admin */
.donut-card-teacher[b-9fevkhcywq] {
    border-radius: 999px;
    padding: 3px 10px;
    font-size: var(--admin-text4-size);      /* v03 Text 4: 11px */
    font-weight: var(--admin-text4-weight);  /* 600 */
    color: var(--admin-charcoal);
    background: var(--admin-teacher-fill);
    border: 1px solid var(--admin-teacher-stroke);
}

/* Role → colour: Teacher + unknown → grey; any admin role → gold */
.donut-card-teacher.teacher-role-schooladmin[b-9fevkhcywq],
.donut-card-teacher.teacher-role-admin[b-9fevkhcywq] {
    background: var(--admin-staff-admin-fill);
    border-color: var(--admin-staff-admin-stroke);
}

.donut-card-teachers-inline[b-9fevkhcywq] {
    padding: 6px 14px 4px;
    border-top: none;
}

/* ── Action button rows ── */
.donut-card-actions-row[b-9fevkhcywq] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* v04: right-align DOWNLOAD buttons inside Class Details box (matches Dashboard layout). */
.donut-card-action-group[b-9fevkhcywq] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.donut-card-action-label[b-9fevkhcywq] {
    font-size: 11px;
    font-weight: 700;
    color: var(--admin-text-muted);
    min-width: 100px;
}

.donut-card-action-btn[b-9fevkhcywq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 26px;
    min-height: 26px;                                /* beat global button min-height */
    padding: 0 12px;
    border-radius: 0;
    cursor: pointer;
    font-size: var(--admin-sub2-size);               /* 12px */
    font-weight: var(--admin-sub2-weight);           /* 700 */
    letter-spacing: var(--admin-sub2-tracking);      /* 0.5px */
    text-transform: uppercase;
    box-sizing: border-box;
}

/* Stefan DOWNLOAD button — 135 × 26 (v04 — was 120 in v03), navy-blue, white icon + ALL CAPS text */
.donut-card-action-btn.btn-download[b-9fevkhcywq] {
    min-width: var(--admin-btn-download-w);
    background: var(--admin-btn-download-fill);
    border: 1px solid var(--admin-btn-download-fill);
    color: var(--admin-white);
}

.donut-card-action-btn.btn-download:hover:not(:disabled)[b-9fevkhcywq] {
    background: var(--admin-btn-download-stroke);    /* slightly darker navy on hover */
    border-color: var(--admin-btn-download-stroke);
}

.donut-card-action-btn.btn-download > i[b-9fevkhcywq] {
    color: var(--admin-white);
    font-size: 12px;
}

.donut-card-action-btn:disabled[b-9fevkhcywq] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Function-window gate (DisplayMode = Disable / DisableWithMessage): greyed-out
   like :disabled, but WITHOUT the native `disabled` attribute so the element
   stays click-target-able and the gate's toast can fire. See FunctionWindowGate
   — never add `disabled` for the gate's sake. */
.donut-card-action-btn.is-disabled[b-9fevkhcywq] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Suppress the navy hover-darkening on a gated (is-disabled) download button —
   the :hover:not(:disabled) rule above still matches since there's no native
   `disabled` attribute here. */
.donut-card-action-btn.btn-download.is-disabled:hover[b-9fevkhcywq] {
    background: var(--admin-btn-download-fill);
    border-color: var(--admin-btn-download-fill);
}

/* Aggregate-card "Download All" row: the label is longer than the per-class
   ones, so let it size to its content and keep the button hard-right like the
   single-class download buttons. */
.donut-card-action-group-wide .donut-card-action-label[b-9fevkhcywq] {
    min-width: 0;
    flex: 1 1 auto;
}

/* ── Donut chart ── */
.donut-card-chart[b-9fevkhcywq] {
    height: 220px;
}

.donut-card-center[b-9fevkhcywq] {
    text-align: center;
    font-weight: 700;
    font-size: 13px;
    color: var(--admin-text-strong);
}

/* v04: .donut-card-full-list-btn removed — Stefan dropped the FULL LIST STUDENTS
   button. Students are accessed via the Student-List count button at the top of
   the card. */

/* ── Schedule info ── */
/* Stefan dividing line: inset 14px each side, not full card width */
.donut-card-schedule[b-9fevkhcywq] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 6px;
}

.donut-card-schedule[b-9fevkhcywq]::before {
    content: "";
    display: block;
    margin: 0 14px 6px;
    border-top: 1px solid var(--admin-divider);
}

.donut-card-schedule-info[b-9fevkhcywq] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #777;
}

.donut-card-schedule-actions[b-9fevkhcywq] {
    display: flex;
    gap: 6px;
}

/* Stefan action buttons — 135 × 26, ALL CAPS + white icon + 0 radius */
.donut-card-schedule-btn[b-9fevkhcywq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 135px;
    height: 26px;
    min-height: 26px;                              /* beat global min-height */
    padding: 0 12px;
    border: none;
    border-radius: 0;
    font-size: var(--admin-sub2-size);             /* 12px */
    font-weight: var(--admin-sub2-weight);         /* 700 */
    letter-spacing: var(--admin-sub2-tracking);    /* 0.5px */
    text-transform: uppercase;
    cursor: pointer;
    color: var(--admin-white);
    box-sizing: border-box;
}

.donut-card-schedule-btn > i[b-9fevkhcywq] {
    color: var(--admin-white);
    font-size: 12px;
}

/* Reschedule: charcoal (Stefan v03) */
.donut-card-schedule-btn.btn-reschedule[b-9fevkhcywq] {
    background: var(--admin-btn-reschedule-fill);
}

.donut-card-schedule-btn.btn-reschedule:hover:not(:disabled)[b-9fevkhcywq] {
    filter: brightness(1.3);
}

/* Edit-window: teal — same family as the AssessmentDashboard
   tenant/school window buttons so the "window" concept reads
   consistently across the page hierarchy. Lighter than the
   tenant button because per-instance is the narrowest scope. */
.donut-card-schedule-btn.btn-window[b-9fevkhcywq] {
    background: #26a69a;
}

.donut-card-schedule-btn.btn-window:hover:not(:disabled)[b-9fevkhcywq] {
    background: #00897b;
}

.donut-card-schedule-btn:disabled[b-9fevkhcywq] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Lock / Unlock row ──
   Own full-width row beneath the Edit Window / Reschedule row. The button
   reuses the .donut-card-schedule-btn look but stretches across the card. */
.donut-card-lock-row[b-9fevkhcywq] {
    display: flex;
    width: 100%;
    margin-top: 6px;
}

.donut-card-lock-btn[b-9fevkhcywq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1;                                       /* full card width */
    height: 26px;
    min-height: 26px;
    padding: 0 12px;
    border: none;
    border-radius: 0;
    font-size: var(--admin-sub2-size);             /* 12px */
    font-weight: var(--admin-sub2-weight);         /* 700 */
    letter-spacing: var(--admin-sub2-tracking);    /* 0.5px */
    text-transform: uppercase;
    cursor: pointer;
    color: var(--admin-white);
    box-sizing: border-box;
    /* Unlocked (default): dark-red "Lock" call-to-action (Stefan admin-red). */
    background: var(--admin-red-active);
}

.donut-card-lock-btn > i[b-9fevkhcywq] {
    color: var(--admin-white);
    font-size: 12px;
}

.donut-card-lock-btn:hover:not(:disabled)[b-9fevkhcywq] {
    filter: brightness(1.3);
}

/* Locked: charcoal "Unlock" — visually distinct from the red lock CTA. */
.donut-card-lock-btn.is-locked[b-9fevkhcywq] {
    background: var(--admin-btn-reschedule-fill);
}

.donut-card-lock-btn:disabled[b-9fevkhcywq] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Schedule dialog ── */
.donut-card-schedule-dialog-backdrop[b-9fevkhcywq] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.donut-card-schedule-dialog[b-9fevkhcywq] {
    background: var(--admin-white, #fff);
    min-width: 360px;
    max-width: 480px;
    border: 1px solid var(--admin-surface-border, #ddd);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
}

.donut-card-schedule-dialog-header[b-9fevkhcywq] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--admin-charcoal, #333);
    color: var(--admin-white, #fff);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.donut-card-schedule-dialog-header > span[b-9fevkhcywq] {
    flex: 1;
}

.donut-card-schedule-dialog-close[b-9fevkhcywq] {
    background: transparent;
    border: none;
    color: var(--admin-white, #fff);
    padding: 0 4px;
    cursor: pointer;
    min-height: auto;
    font-size: 16px;
}

.donut-card-schedule-dialog-body[b-9fevkhcywq] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.donut-card-schedule-field[b-9fevkhcywq] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.donut-card-schedule-field label[b-9fevkhcywq] {
    font-size: 11px;
    font-weight: 700;
    color: var(--admin-text-muted, #666);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.donut-card-schedule-field input[b-9fevkhcywq],
.donut-card-schedule-field select[b-9fevkhcywq] {
    padding: 6px 8px;
    border: 1px solid var(--admin-surface-border, #d0d0d0);
    font-size: 13px;
    border-radius: 0;
}

.donut-card-schedule-check[b-9fevkhcywq] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--admin-charcoal, #333);
    cursor: pointer;
}

.donut-card-schedule-check input[type="checkbox"][b-9fevkhcywq] {
    margin: 0;
}

.donut-card-schedule-error[b-9fevkhcywq] {
    color: var(--admin-red-active, #7b1f1f);
    background: #fff6f6;
    border: 1px solid #f0c0c0;
    padding: 6px 8px;
    font-size: 12px;
}

/* Hint paragraph under the window-dialog inputs — explains the
   leave-blank-to-keep-current semantics so users don't accidentally
   clear a side they meant to leave intact. */
.donut-card-schedule-hint[b-9fevkhcywq] {
    font-size: 11px;
    color: var(--admin-charcoal, #555);
    margin: 4px 0 0;
    line-height: 1.4;
}

.donut-card-schedule-dialog-actions[b-9fevkhcywq] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--admin-divider, #eee);
    background: var(--admin-surface-soft, #fafafa);
}

.donut-card-schedule-dialog-btn[b-9fevkhcywq] {
    padding: 6px 16px;
    border-radius: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    cursor: pointer;
    min-height: 30px;
    border: 1px solid transparent;
}

.donut-card-schedule-dialog-btn.btn-primary[b-9fevkhcywq] {
    background: var(--admin-red-active, #7b1f1f);
    color: var(--admin-white, #fff);
}

.donut-card-schedule-dialog-btn.btn-cancel[b-9fevkhcywq],
.donut-card-schedule-dialog-btn.btn-secondary[b-9fevkhcywq] {
    background: var(--admin-white, #fff);
    color: var(--admin-charcoal, #333);
    border-color: var(--admin-surface-border, #d0d0d0);
}

.donut-card-schedule-dialog-btn:disabled[b-9fevkhcywq] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Components/Pages/Assessments/Dashboard/DashboardClassProgressPanel.razor.rz.scp.css */
.class-progress-panel[b-93d2qyi313] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
}

/* Stefan v05: panel heading sits 14 px from the top of the column box.
   The hosting .dash-col already supplies 12 px of padding, so the title
   only needs an extra 2 px on top to land at the spec'd 14 px. (Pre-v05
   this was 14 px on the title itself, giving an effective 26 px which
   Stefan flagged as "too much padding from the top of the panel".) */
.class-progress-title[b-93d2qyi313] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 2px;
    font-family: var(--admin-font);
    font-size: var(--admin-h2-size);                /* 14px */
    font-weight: var(--admin-h2-weight);            /* 700 */
    letter-spacing: var(--admin-h2-tracking);       /* 0.5px */
    text-transform: uppercase;
    color: var(--admin-charcoal);
}

.class-progress-title > i[b-93d2qyi313] {
    font-size: 16px;
    color: var(--admin-charcoal);
}

.class-progress-cards[b-93d2qyi313] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
}

.class-progress-empty[b-93d2qyi313] {
    color: var(--admin-text-faint);
    padding: 16px;
    font-size: 14px;
}
/* /Components/Pages/Assessments/Dashboard/DashboardClassStackedBarChart.razor.rz.scp.css */
.bar100[b-dgdbvi4j6n] {
    height: 360px;
}
/* /Components/Pages/Assessments/Dashboard/DashboardHeaderPanel.razor.rz.scp.css */
/* Override global min-height: 40px from site.css touch targets */
.dash-header-panel button[b-hmmsyf4raq] {
    min-height: auto;
}

.dash-header-panel[b-hmmsyf4raq] {
    background: var(--admin-white);
    border: 1px solid var(--admin-surface-border);
    border-radius: 0;
    padding: 12px;
    margin-bottom: 12px;
}

.dash-header-row[b-hmmsyf4raq] {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 12px;
    align-items: end;
    container-type: inline-size;
    container-name: dash-header-row;
}

/* ── Year-level tabs (Stefan spec, v05 2 px gap) ── */
.dash-year-tabs[b-hmmsyf4raq] {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    /* Stefan v05: 2 px gap between tabs to break the visual run-on. */
    gap: 2px;
    border-bottom: var(--admin-tab-baseline-height) solid var(--admin-tab-baseline-color); /* 6px charcoal */
}

.dash-year-tab[b-hmmsyf4raq] {
    flex: 1 1 0;                                                             /* equal share — responsive */
    min-width: 0;
    height: var(--admin-tab-height);                                         /* 30px */
    min-height: var(--admin-tab-height);                                     /* beat global button min-height */
    padding: 0 var(--admin-tab-pad-x);                                       /* 20px l/r */
    margin-bottom: var(--admin-tab-gap-below);                               /* 1px gap above baseline */
    border: none;
    background: var(--admin-year-tab-bg);
    color: var(--admin-charcoal);
    border-radius: 0;
    font-size: var(--admin-sub2-size);
    font-weight: var(--admin-sub2-weight);
    letter-spacing: var(--admin-sub2-tracking);
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.15s, color 0.15s;
}

.dash-year-tab:hover:not(.is-selected)[b-hmmsyf4raq] {
    background: var(--admin-year-tab-bg-hover);
}

.dash-year-tab.is-selected[b-hmmsyf4raq] {
    background: var(--admin-charcoal);                                       /* Stefan: active = BLACK */
    color: var(--admin-white);
    margin-bottom: 0;
    height: calc(var(--admin-tab-height) + var(--admin-tab-gap-below));      /* 31px to baseline */
    min-height: calc(var(--admin-tab-height) + var(--admin-tab-gap-below));
}

/* Short/full label visibility — default = full ("YEAR 3") */
.dash-year-tab .tab-short[b-hmmsyf4raq] { display: none; }
.dash-year-tab .tab-full[b-hmmsyf4raq]  { display: inline; }

/* When the header row gets tight, collapse per-tab text to just the number / "ALL".
   The "Year Level" field label already sits above the tab row, so no in-row prefix is needed. */
@container dash-header-row (max-width: 640px) {
    .dash-year-tab .tab-full[b-hmmsyf4raq]  { display: none; }
    .dash-year-tab .tab-short[b-hmmsyf4raq] { display: inline; }
    .dash-year-tab[b-hmmsyf4raq] { padding: 0 6px; }
}

.dash-control[b-hmmsyf4raq] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dash-label[b-hmmsyf4raq] {
    font-size: 11px;
    font-weight: 700;
    color: var(--admin-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dash-select[b-hmmsyf4raq] {
    width: 100%;
    padding: 10px 12px;
    border-radius: 0;
    border: 1px solid var(--admin-surface-border);
    /* Stefan v05: dropdown font dropped from 20 → 18. */
    font-size: 18px;
    font-weight: 700;
    color: var(--admin-charcoal);
}

@media (max-width: 900px) {
    .dash-header-row[b-hmmsyf4raq] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Assessments/Dashboard/DashboardStudentAlertsPanel.razor.rz.scp.css */
/* v04: panel reads as an inset white card inside the grey column frame. */
.student-alerts-panel[b-a1k41kndlu] {
    border: 1px solid var(--admin-surface-border);
    border-radius: 0;
    background: var(--admin-surface-white);
    margin-top: 8px;
}

/* Stefan v05: dark-red border when the panel is open. */
.student-alerts-panel.is-active[b-a1k41kndlu] {
    border-color: var(--admin-red-active);
}

.alerts-header[b-a1k41kndlu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px;
    cursor: default;                                  /* v05: only the chevron is clickable */
    background: var(--admin-surface-white);
}

.alerts-header-left[b-a1k41kndlu] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* Stefan v05: open/close button matches DashboardActivityLogsPanel + the
   Class Details box toggle — 24×24 grey square, charcoal +/- glyph,
   sole click target for open/close. */
.alerts-toggle[b-a1k41kndlu] {
    flex: 0 0 auto;
    width: var(--admin-toggle-size);
    height: var(--admin-toggle-size);
    min-width: var(--admin-toggle-size);
    min-height: var(--admin-toggle-size);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--admin-toggle-fill);
    border: 1px solid var(--admin-toggle-stroke);
    border-radius: 0;
    color: var(--admin-toggle-symbol);
    cursor: pointer;
    font-size: 12px;
    box-sizing: border-box;
    transition: background 0.15s;
}

.alerts-toggle:hover[b-a1k41kndlu] {
    background: var(--admin-surface-hover-strong);
}

.alerts-toggle > span > i[b-a1k41kndlu] {
    font-size: 11px;
    line-height: 1;
}

/* v04: panel headings are Heading 2. */
.alerts-title[b-a1k41kndlu] {
    font-family: var(--admin-font);
    font-size: var(--admin-h2-size);
    font-weight: var(--admin-h2-weight);
    letter-spacing: var(--admin-h2-tracking);
    text-transform: uppercase;
    color: var(--admin-charcoal);
}

/* v04: alert-count badge — circular, navy when zero, red when active. */
.alerts-badge[b-a1k41kndlu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    background: var(--admin-badge-zero-bg);
    color: var(--admin-white);
    font-size: 11px;
    font-weight: 700;
    border-radius: 11px;
    box-sizing: border-box;
}

.alerts-badge.has-alerts[b-a1k41kndlu] {
    background: var(--admin-badge-active-bg);
}

.alerts-unread-label[b-a1k41kndlu] {
    font-size: 11px;
    color: var(--admin-status-error-fg);
    font-weight: 600;
}

/* v04: MARK ALL AS READ row beneath the heading, right-aligned.
   v05: flex-wrap + gap so the two buttons can stack onto separate
   lines on a narrow column instead of the second button overflowing
   off the left edge. */
.alerts-action-row[b-a1k41kndlu] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    padding: 0 14px 14px;
    background: var(--admin-surface-white);
}

/* Both buttons in the action row share a min-width floor; this lets
   them sit side-by-side when there's room and stack neatly when there
   isn't, instead of getting cropped mid-letter by the panel edge. */
.alerts-action-row > .admin-btn-3[b-a1k41kndlu] {
    flex: 0 1 auto;
    min-width: 0;
    padding-left: 10px;
    padding-right: 10px;
}

.alerts-mark-read-btn[b-a1k41kndlu] {
    background: var(--admin-btn-mark-read-fill);
    color: var(--admin-white);
    border: 1px solid var(--admin-btn-mark-read-fill);
}

.alerts-mark-read-btn:hover[b-a1k41kndlu] {
    filter: brightness(1.08);
}

.alerts-filters[b-a1k41kndlu] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 14px 14px;
    background: var(--admin-surface-white);
}

.alerts-filter-group[b-a1k41kndlu] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.alerts-filter-label[b-a1k41kndlu] {
    font-family: var(--admin-font);
    font-size: 11px;
    font-weight: 700;
    color: var(--admin-charcoal);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.alerts-tabs[b-a1k41kndlu] {
    display: flex;
    gap: 0;
    flex-wrap: nowrap;
    align-items: flex-end;
    border-bottom: var(--admin-tab-baseline-height) solid var(--admin-tab-baseline-color);
    container-type: inline-size;
    container-name: alerts-tabs;
}

.alerts-tab[b-a1k41kndlu] {
    flex: 1 1 0;
    min-width: 0;
    height: var(--admin-tab-height);
    min-height: var(--admin-tab-height);
    padding: 0 var(--admin-tab-pad-x);
    margin-bottom: var(--admin-tab-gap-below);
    border: none;
    border-right: 1px solid var(--admin-white);
    background: var(--admin-year-tab-bg);
    color: var(--admin-charcoal);
    font-size: var(--admin-sub2-size);
    font-weight: var(--admin-sub2-weight);
    letter-spacing: var(--admin-sub2-tracking);
    text-transform: uppercase;
    text-align: center;
    border-radius: 0;
    cursor: pointer;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.alerts-tab:last-child[b-a1k41kndlu] { border-right: none; }
.alerts-tab:hover:not(.is-selected)[b-a1k41kndlu] { background: var(--admin-year-tab-bg-hover); }

.alerts-tab.is-selected[b-a1k41kndlu] {
    background: var(--admin-charcoal);
    color: var(--admin-white);
    margin-bottom: 0;
    height: calc(var(--admin-tab-height) + var(--admin-tab-gap-below));
    min-height: calc(var(--admin-tab-height) + var(--admin-tab-gap-below));
}

/* Year tab full/short label */
.alerts-tab .tab-short[b-a1k41kndlu] { display: none; }
.alerts-tab .tab-full[b-a1k41kndlu]  { display: inline; }

@container alerts-tabs (max-width: 520px) {
    .alerts-tab .tab-full[b-a1k41kndlu]  { display: none; }
    .alerts-tab .tab-short[b-a1k41kndlu] { display: inline; }
    .alerts-tab[b-a1k41kndlu] { padding: 0 6px; }
}

.alerts-type-select[b-a1k41kndlu] {
    height: var(--admin-search-box-h);
    padding: 0 10px;
    border: 1px solid var(--admin-surface-border);
    border-radius: 0;
    background: var(--admin-surface-white);
    font-family: var(--admin-font);
    font-size: 13px;
    color: var(--admin-charcoal);
    box-sizing: border-box;
    width: 100%;
}

.alerts-body[b-a1k41kndlu] {
    max-height: 350px;
    overflow-y: auto;
}

.alerts-empty[b-a1k41kndlu] {
    padding: 16px;
    color: var(--admin-text-subtle);
    font-size: 13px;
}

.alert-entry[b-a1k41kndlu] {
    border-bottom: 1px solid var(--admin-surface-border-soft);
}

.alert-entry.is-read[b-a1k41kndlu] {
    opacity: 0.6;
}

.alert-entry.is-resolved[b-a1k41kndlu] {
    border-left: 3px solid var(--admin-status-success-fg);
}

/* v05: header is now a flex *column* holding two rows.
   Row 1 (.alert-entry-row): identity (badge + student name) on the
   left, meta (time + mark-read icon + expand chevron) on the right.
   Row 2 (.alert-entry-row-tag): the assessment tag on its own line,
   full-width with ellipsis so long names don't wrap the whole entry. */
.alert-entry-header[b-a1k41kndlu] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 14px;
    cursor: pointer;
}

.alert-entry-header:hover[b-a1k41kndlu] {
    background: var(--admin-surface-soft);
}

.alert-entry-row[b-a1k41kndlu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* Identity cluster — class chip + student name, wraps internally if
   the student name is too long; the meta cluster stays right-aligned. */
.alert-entry-identity[b-a1k41kndlu] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
    flex-wrap: wrap;
}

.alert-entry-meta[b-a1k41kndlu] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

/* Tag row sits beneath the identity/meta row and gets the full available
   width. The tag itself ellipses if its text would overflow. */
.alert-entry-row-tag[b-a1k41kndlu] {
    margin-left: 0;
}

.alert-class-badge[b-a1k41kndlu] {
    font-size: 11px;
    font-weight: 700;
    background: var(--admin-status-info-bg);
    color: var(--admin-status-info-fg);
    padding: 2px 8px;
    border-radius: 2px;
    flex: 0 0 auto;
}

.alert-assessment-tag[b-a1k41kndlu] {
    display: inline-block;
    max-width: 100%;
    font-size: 11px;
    font-weight: 700;
    background: var(--admin-severity-high-bg);
    color: var(--admin-severity-high-fg);
    padding: 2px 8px;
    border-radius: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Kind-specific tag colours so the collapsed entry reads its concept at a
   glance. Incident keeps the default red (.kind-incident is a no-op marker).
   Exempt mirrors the dashboard's black "Exempt" bucket; Locked is a neutral
   charcoal so it doesn't read as an error. */
.alert-assessment-tag.kind-exempt[b-a1k41kndlu] {
    background: var(--bucket-exempt);
    color: var(--admin-white);
}

.alert-assessment-tag.kind-locked[b-a1k41kndlu] {
    background: var(--admin-charcoal);
    color: var(--admin-white);
}

.alert-student-name[b-a1k41kndlu] {
    font-size: 13px;
    font-weight: 600;
    color: var(--admin-text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Icon-only "Mark as read" — square button matching the visual rhythm
   of the expand chevron next to it. Saves the ~70px the previous
   text button stole from a narrow row. */
.alert-mark-read-btn[b-a1k41kndlu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--admin-status-success-fg);
    background: transparent;
    color: var(--admin-status-success-fg);
    cursor: pointer;
    border-radius: 2px;
    font-size: 11px;
}

.alert-mark-read-btn:hover[b-a1k41kndlu] {
    background: var(--admin-status-success-bg);
}

.alert-time[b-a1k41kndlu] {
    font-size: 11px;
    color: var(--admin-text-subtle);
    white-space: nowrap;
}

.alert-expand-icon[b-a1k41kndlu] {
    font-size: 10px;
    color: var(--admin-text-subtle);
}

.alert-entry-detail[b-a1k41kndlu] {
    padding: 8px 14px 12px 28px;
    background: var(--admin-surface-soft);
}

.alert-reason[b-a1k41kndlu] {
    font-size: 13px;
    color: var(--admin-text-strong);
    margin-bottom: 4px;
}

.alert-flagged-by[b-a1k41kndlu] {
    font-size: 11px;
    color: var(--admin-text-subtle);
    font-style: italic;
    margin-bottom: 6px;
}

.alert-notes-label[b-a1k41kndlu] {
    font-size: 11px;
    font-weight: 700;
    color: var(--admin-text-muted);
    margin-top: 6px;
}

.alert-notes[b-a1k41kndlu] {
    font-size: 11px;
    background: var(--admin-surface-hover);
    padding: 8px;
    border-radius: 2px;
    margin: 4px 0 0 0;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 120px;
    overflow-y: auto;
}
/* /Components/Pages/Assessments/Dashboard/DashboardStudentDetailPanel.razor.rz.scp.css */
.student-detail[b-do7qf43lcm] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid var(--admin-surface-border);
    border-radius: 4px;
    padding: 14px;
    background: var(--admin-white);
}

.student-detail-header[b-do7qf43lcm] {
    border-bottom: 1px solid var(--admin-surface-hover-strong);
    padding-bottom: 10px;
}

.student-detail-name-row[b-do7qf43lcm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* v04: Heading 1 — 18 / 600 / charcoal, STUDENT icon before the name. */
.student-detail-name[b-do7qf43lcm] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--admin-font);
    font-size: var(--admin-h1-size);
    font-weight: var(--admin-h1-weight);
    color: var(--admin-charcoal);
}

.student-detail-name-icon[b-do7qf43lcm] {
    font-size: 18px;
    color: var(--admin-charcoal);
}

.btn-edit-student[b-do7qf43lcm] {
    background: transparent;
    border: none;
    font-size: 16px;
    color: var(--admin-text-muted);                    /* v05: was text-faint — now active */
    cursor: pointer;
    padding: 4px;
    border-radius: 2px;
    transition: color 0.15s, background 0.15s;
}

.btn-edit-student:hover[b-do7qf43lcm] {
    color: var(--admin-charcoal);
    background: var(--admin-surface-hover);
}

.btn-edit-student:disabled[b-do7qf43lcm] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* v04: Text 1 — 14 / 400 / charcoal, year-class line beneath the name. */
.student-detail-sub[b-do7qf43lcm] {
    font-family: var(--admin-font);
    font-size: var(--admin-text1-size);
    font-weight: var(--admin-text1-weight);
    color: var(--admin-charcoal);
    margin-top: 4px;
}

/* v04: 36 px left inset — the two-column details grid sits indented. */
.student-detail-body[b-do7qf43lcm] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 36px;
}

.student-detail-row[b-do7qf43lcm] {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 10px;
    align-items: center;
    padding: 4px 0;
}

.student-detail-label[b-do7qf43lcm] {
    font-size: 12px;
    font-weight: 700;
    color: var(--admin-text-muted);
}

.student-detail-value[b-do7qf43lcm] {
    font-size: 13px;
    color: var(--admin-charcoal);
}

.mono[b-do7qf43lcm] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
}

.password-mask[b-do7qf43lcm] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.password-new-value[b-do7qf43lcm] {
    background: #fff59d;
    padding: 2px 8px;
    border-radius: 2px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--admin-charcoal);
}

.btn-toggle-password[b-do7qf43lcm] {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 13px;
    /* Bumped from --admin-text-subtle (#888) to --admin-text-muted (#555) and
       weighted up so the reveal (eye) + copy icons read clearly instead of
       washing out against the panel. */
    color: var(--admin-text-muted);
    font-weight: 600;
    padding: 2px;
}

.btn-toggle-password:hover:not(:disabled)[b-do7qf43lcm] {
    color: var(--admin-charcoal);
}

/* Unicode copy glyph — avoids the FA autoReplaceSvg row/diff crash that a
   dynamic-class <i> would trigger. */
.password-copy-glyph[b-do7qf43lcm] {
    font-size: 14px;
    line-height: 1;
}

.password-unavailable[b-do7qf43lcm] {
    color: var(--admin-text-muted);
    font-style: italic;
}

/* Action buttons */
.student-detail-actions[b-do7qf43lcm] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

/* v04: Button 1 — 34 px tall, icon on left, Subheading-2 type, ALL CAPS.
   Per-button fill remains as-is (Material colours flagged for v05 review). */
.student-detail-btn[b-do7qf43lcm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: var(--admin-btn1-h);
    min-height: var(--admin-btn1-h);
    padding: 0 14px;
    color: var(--admin-white);
    border: none;
    border-radius: 0;
    font-family: var(--admin-font);
    font-size: var(--admin-sub2-size);
    font-weight: var(--admin-sub2-weight);
    letter-spacing: var(--admin-sub2-tracking);
    text-transform: uppercase;
    box-sizing: border-box;
    cursor: pointer;
    white-space: nowrap;
}

.student-detail-btn:disabled[b-do7qf43lcm] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Gated action button: looks disabled but stays clickable so the click can
   raise an explanatory toast (a real :disabled button never fires a click).
   Matches the :disabled look above. */
.student-detail-btn.soft-disabled[b-do7qf43lcm] {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn-open-assessment[b-do7qf43lcm] {
    background: var(--admin-red-active);
}

.btn-download-report[b-do7qf43lcm] {
    background: var(--admin-btn-download-fill);
}

.answer-sheet-actions[b-do7qf43lcm] {
    display: flex;
    gap: 6px;
}

.answer-sheet-actions .btn-download-answer-sheet[b-do7qf43lcm] {
    flex: 1 1 auto;
}

.btn-download-answer-sheet[b-do7qf43lcm] {
    background: #2b579a; /* Word blue */
}

.btn-download-answer-sheet-full[b-do7qf43lcm] {
    background: #4a5568; /* slate — secondary to the A4 sheet */
    flex: 0 0 auto;
}

.btn-view-pathway[b-do7qf43lcm] {
    background: #212121;
}

.btn-mark-absent[b-do7qf43lcm] {
    background: #e65100;
}

.btn-mark-absent:hover:not(:disabled):not(.soft-disabled)[b-do7qf43lcm] {
    background: #bf360c;
}

.btn-mark-present[b-do7qf43lcm] {
    background: var(--admin-status-success-fg);
}

.btn-mark-present:hover:not(:disabled):not(.soft-disabled)[b-do7qf43lcm] {
    background: #1b5e20;
}

.btn-exempt[b-do7qf43lcm] {
    background: #4a148c;
}

.btn-exempt:hover:not(:disabled)[b-do7qf43lcm] {
    background: #311b92;
}

.btn-exempt-active[b-do7qf43lcm] {
    background: #7b1fa2;
}

.btn-exempt-active:hover:not(:disabled)[b-do7qf43lcm] {
    background: #6a1b9a;
}

.btn-flag[b-do7qf43lcm] {
    background: #546e7a;
}

.btn-flag:hover:not(:disabled):not(.soft-disabled)[b-do7qf43lcm] {
    background: #37474f;
}

.btn-flag-active[b-do7qf43lcm] {
    background: #f9a825;
    color: var(--admin-charcoal);
}

.btn-flag-active:hover:not(:disabled):not(.soft-disabled)[b-do7qf43lcm] {
    background: #f57f17;
}

/* Flag reason input row */
.flag-reason-row[b-do7qf43lcm] {
    display: flex;
    gap: 4px;
    align-items: center;
}

.flag-reason-input[b-do7qf43lcm] {
    flex: 1;
    padding: 8px 10px;
    border: 2px solid #f9a825;
    border-radius: 3px;
    font-size: 13px;
    outline: none;
}

.flag-reason-input:focus[b-do7qf43lcm] {
    border-color: #f57f17;
}

.flag-reason-confirm[b-do7qf43lcm],
.flag-reason-cancel[b-do7qf43lcm] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
}

.flag-reason-confirm[b-do7qf43lcm] {
    background: var(--admin-status-success-fg);
    color: var(--admin-white);
}

.flag-reason-confirm:disabled[b-do7qf43lcm] {
    opacity: 0.4;
    cursor: not-allowed;
}

.flag-reason-cancel[b-do7qf43lcm] {
    background: var(--admin-severity-low-bg);
    color: var(--admin-white);
}

.student-detail-empty[b-do7qf43lcm] {
    color: var(--admin-text-faint);
    padding: 16px;
    font-size: 14px;
}

/* Reset Assessment (OmniaAdmin destructive action) */
.btn-reset-assessment[b-do7qf43lcm] {
    background: #7a1f2b;
}

.btn-reset-assessment:hover:not(:disabled):not(.soft-disabled)[b-do7qf43lcm] {
    background: #5c1620;
}

.student-detail-reset-confirm[b-do7qf43lcm] {
    border: 1px solid #7a1f2b;
    border-radius: 6px;
    padding: 10px;
    background: rgba(122, 31, 43, 0.06);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.student-detail-reset-warning[b-do7qf43lcm] {
    font-size: 13px;
    color: var(--admin-charcoal, #333);
    display: flex;
    gap: 6px;
    align-items: flex-start;
}

.student-detail-reset-actions[b-do7qf43lcm] {
    display: flex;
    gap: 8px;
}

.btn-reset-confirm[b-do7qf43lcm] {
    background: #7a1f2b;
}

.btn-reset-confirm:hover:not(:disabled)[b-do7qf43lcm] {
    background: #5c1620;
}

.btn-reset-cancel[b-do7qf43lcm] {
    background: #546e7a;
}

.btn-reset-cancel:hover:not(:disabled)[b-do7qf43lcm] {
    background: #37474f;
}
/* /Components/Pages/Assessments/Dashboard/DashboardStudentListPanel.razor.rz.scp.css */
/* Override global min-height: 40px from site.css touch targets */
.student-grid-panel button[b-nd1pos2nu2] {
    min-height: auto;
}

.student-grid-panel[b-nd1pos2nu2] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
}

.student-grid-header[b-nd1pos2nu2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--admin-surface-hover-strong);
}

.student-grid-title[b-nd1pos2nu2] {
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

/* Small tag next to the class/status line advertising which assessment the
   grid is scoped to. Charcoal pill, Stefan Subheading 2 type. */
.student-grid-assessment-tag[b-nd1pos2nu2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 12px;
    background: var(--admin-charcoal);
    color: var(--admin-white);
    font-size: var(--admin-sub2-size);
    font-weight: var(--admin-sub2-weight);
    letter-spacing: var(--admin-sub2-tracking);
    text-transform: uppercase;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-grid-assessment-tag > i[b-nd1pos2nu2] {
    color: var(--admin-white);
    font-size: 11px;
}

/* Assessment status icon in grid cells — fa-regular fa-circle, tinted per bucket */
.status-icon[b-nd1pos2nu2] {
    font-size: 14px;
    line-height: 1;
}

/* Assessment status dot — CSS circle whose colour is set via inline style from
   BucketRawColor() on each row. Replaces an FA <i> because FA's autoReplaceSvg
   swaps the <i> for an <svg> at first render, after which Syncfusion's row
   recycling leaves the stale colour behind. */
.status-dot[b-nd1pos2nu2] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid currentColor;
    box-sizing: border-box;
    vertical-align: middle;
}

.status-complete[b-nd1pos2nu2] {
    color: var(--bucket-complete);
}

.status-incomplete[b-nd1pos2nu2] {
    color: var(--bucket-incomplete);
}

.status-notattempted[b-nd1pos2nu2] {
    color: var(--bucket-notattempted);
}

.status-exempt[b-nd1pos2nu2] {
    color: var(--bucket-exempt);
}

.status-absent[b-nd1pos2nu2] {
    color: var(--bucket-absent);
}

.status-flagged-incomplete[b-nd1pos2nu2] {
    color: var(--bucket-flagged-incomplete);
}

.status-flagged-complete[b-nd1pos2nu2] {
    color: var(--bucket-flagged-complete);
}

/* Edit button in grid */
.btn-grid-edit[b-nd1pos2nu2] {
    background: var(--admin-surface-hover-strong);
    border: 1px solid #ccc;
    border-radius: 2px;
    padding: 3px 8px;
    font-size: 12px;
    cursor: pointer;
    color: var(--admin-text-muted);
}

.btn-grid-edit:disabled[b-nd1pos2nu2] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Syncfusion toolbar / search overrides */
[b-nd1pos2nu2] .e-grid .e-toolbar {
    background: var(--admin-surface-soft);
    border-bottom: 1px solid var(--admin-surface-hover-strong);
    min-height: 36px;
    padding: 2px 4px;
}

[b-nd1pos2nu2] .e-grid .e-toolbar .e-search {
    max-width: 100%;
    width: 100%;
}

[b-nd1pos2nu2] .e-grid .e-toolbar .e-search .e-input {
    font-size: 13px;
}

/* Syncfusion grid overrides */
[b-nd1pos2nu2] .e-grid {
    border: none !important;
    font-size: 13px;
}

[b-nd1pos2nu2] .e-grid .e-headercell {
    font-weight: 700;
    font-size: 12px;
    background: var(--admin-column-box-bg);
}

/* Selected row: soft dark-red wash (Stefan tint, replaces Material blue). */
[b-nd1pos2nu2] .e-grid .e-row.e-active .e-rowcell,
[b-nd1pos2nu2] .e-grid .e-row.e-active:hover .e-rowcell {
    background-color: var(--admin-row-selected-bg) !important;
    color: var(--admin-row-selected-fg) !important;
}

/* v04: tighten horizontal padding so the Family Name column has more visible
   width. Internal cell padding is 7 px so the gap between adjacent cells is
   14 px (7 + 7); the first cell gets an extra 7 px left so the grid edge →
   status-icon distance is also 14 px. Vertical padding stays 6 px. */
[b-nd1pos2nu2] .e-grid .e-rowcell,
[b-nd1pos2nu2] .e-grid .e-headercell {
    padding: 6px 7px;
}
[b-nd1pos2nu2] .e-grid .e-rowcell:first-child,
[b-nd1pos2nu2] .e-grid .e-headercell:first-child {
    padding-left: 14px;
}

.student-grid-empty[b-nd1pos2nu2] {
    color: var(--admin-text-faint);
    padding: 16px;
    font-size: 14px;
}

/* Live presence pill (colours are set inline per Syncfusion rule #2 —
   these classes carry shape only). */
[b-nd1pos2nu2] .presence-pill {
    display: inline-block;
    padding: 1px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}

[b-nd1pos2nu2] .presence-pill-none {
    color: #cbd5e1;
    font-size: 12px;
}

/* Header "All assessments" workbook-export button. */
.student-grid-export[b-nd1pos2nu2] {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 4px 12px;
    border: 1px solid var(--admin-surface-border, #e0e0e0);
    border-radius: 0;
    background: var(--admin-surface-white, #fff);
    color: var(--admin-charcoal, #333);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.student-grid-export:hover:not(:disabled)[b-nd1pos2nu2] {
    background: var(--admin-toggle-fill, #f4f4f4);
}

.student-grid-export:disabled[b-nd1pos2nu2] {
    opacity: 0.6;
    cursor: default;
}

.student-grid-export i[b-nd1pos2nu2] {
    margin-right: 4px;
}
/* /Components/Pages/Assessments/ExemptedStudents.razor.rz.scp.css */
.exempt-page[b-m05pcyn557] {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.exempt-header[b-m05pcyn557] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.exempt-header-title[b-m05pcyn557] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.exempt-header-title h1[b-m05pcyn557] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.exempt-header-title i[b-m05pcyn557] {
    font-size: 1.4rem;
    color: #555;
}

.exempt-header-subtitle[b-m05pcyn557] {
    color: #666;
    font-size: 0.9rem;
}

.exempt-loading[b-m05pcyn557],
.exempt-empty[b-m05pcyn557] {
    padding: 2rem;
    text-align: center;
    color: #777;
    background: #fafafa;
    border-radius: 6px;
}

.exempt-summary[b-m05pcyn557] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* "Hide Example College Students" toggle — a quiet, self-contained filter row
   above the summary tiles. */
.exempt-hide-example[b-m05pcyn557] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    align-self: flex-start;
    font-size: 0.85rem;
    color: #444;
    cursor: pointer;
    user-select: none;
}

.exempt-hide-example input[b-m05pcyn557] {
    cursor: pointer;
}

.exempt-summary-tiles[b-m05pcyn557] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: stretch;
}

.exempt-tile[b-m05pcyn557] {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 8rem;
}

.exempt-tile-total[b-m05pcyn557] {
    background: #fff7f7;
    border-color: #f0d0d0;
}

.exempt-tile-value[b-m05pcyn557] {
    font-size: 1.8rem;
    font-weight: 700;
    color: #b53030;
    line-height: 1;
}

.exempt-tile-label[b-m05pcyn557] {
    font-size: 0.8rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.exempt-tile-yearlevels[b-m05pcyn557] {
    flex: 1 1 auto;
}

.exempt-tile-pills[b-m05pcyn557] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.exempt-summary-schools-control[b-m05pcyn557] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.exempt-school-select[b-m05pcyn557] {
    flex: 1 1 22rem;
    min-width: 16rem;
    max-width: 32rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid #d8dadc;
    border-radius: 6px;
    background: #fff;
    font-size: 0.9rem;
    color: #333;
}

.exempt-school-select:focus[b-m05pcyn557] {
    outline: none;
    border-color: #2b6cb0;
    box-shadow: 0 0 0 2px rgba(43, 108, 176, 0.2);
}

.exempt-school-clear[b-m05pcyn557] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: transparent;
    border: 1px solid transparent;
    color: #b53030;
    padding: 0.25rem 0.6rem;
    font-size: 0.85rem;
    border-radius: 999px;
    cursor: pointer;
}

.exempt-school-clear:hover[b-m05pcyn557] {
    background: #fff5f5;
    border-color: #f0d0d0;
}

.exempt-pill[b-m05pcyn557] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #f1f3f5;
    border: 1px solid #d8dadc;
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    font-size: 0.85rem;
    cursor: pointer;
    color: #333;
    transition: background 0.12s, border-color 0.12s;
}

.exempt-pill:hover[b-m05pcyn557] {
    background: #e7ecef;
}

.exempt-pill-active[b-m05pcyn557] {
    background: #2b6cb0;
    border-color: #2b6cb0;
    color: #fff;
}

.exempt-pill-active:hover[b-m05pcyn557] {
    background: #245994;
}

.exempt-pill-count[b-m05pcyn557] {
    font-weight: 700;
    background: rgba(0,0,0,0.07);
    padding: 0 0.45rem;
    border-radius: 999px;
    font-size: 0.78rem;
}

.exempt-pill-active .exempt-pill-count[b-m05pcyn557] {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

.exempt-pill-clear[b-m05pcyn557] {
    background: transparent;
    border-color: transparent;
    color: #b53030;
}

.exempt-summary-schools[b-m05pcyn557] {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Signed-form column. ::deep so the rules reach the cell template that the
   Syncfusion grid (a child component) renders. */
[b-m05pcyn557] .exempt-form-link {
    color: #2b6cb0;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

[b-m05pcyn557] .exempt-form-link:hover {
    text-decoration: underline;
}

/* Amber + italic so "exempt but signed form still outstanding" reads as an
   action item a coordinator can chase, distinct from the plain data columns. */
[b-m05pcyn557] .exempt-form-awaiting {
    color: #b26a00;
    font-style: italic;
    white-space: nowrap;
}

.exempt-summary-schools-label[b-m05pcyn557] {
    font-size: 0.8rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
/* /Components/Pages/Calendar/CalendarPage.razor.rz.scp.css */
.calendar-page[b-4r3uls6g8a] {
    padding: 0.5rem 1rem 1.5rem;
}

.page-top-row[b-4r3uls6g8a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.calendar-title[b-4r3uls6g8a] {
    font-weight: 600;
    letter-spacing: 0.04em;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #2d3436;
}

.calendar-loading[b-4r3uls6g8a],
.calendar-empty[b-4r3uls6g8a] {
    padding: 1rem;
    color: #636e72;
}

.calendar-empty[b-4r3uls6g8a] {
    border-left: 4px solid #d9822b;
    background: #fff7ed;
    margin-top: 0.75rem;
    border-radius: 4px;
}

.calendar-legend[b-4r3uls6g8a] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    margin: 0.25rem 0 1rem;
    font-size: 0.82rem;
    color: #2d3436;
}

.calendar-legend-item[b-4r3uls6g8a] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.calendar-legend-swatch[b-4r3uls6g8a] {
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 3px;
    display: inline-block;
}

.calendar-legend-swatch-tbc[b-4r3uls6g8a] {
    background: transparent;
    border: 2px dashed #2d3436;
    opacity: 0.78;
}
/* /Components/Pages/Dashboard/Communications/DashboardCommunicationsPanel.razor.rz.scp.css */
/* Visual rhythm mirrors DashboardActivityLogsPanel and
   DashboardStudentAlertsPanel so the three right-column panels
   read as a coherent stack. */
.comms-panel[b-g9zway7emh] {
    border: 1px solid var(--admin-surface-border);
    border-radius: 0;
    background: var(--admin-surface-white);
    margin-top: 8px;
}

.comms-panel.is-active[b-g9zway7emh] {
    border-color: var(--admin-red-active);
}

.comms-header[b-g9zway7emh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px;
    cursor: default;
    background: var(--admin-surface-white);
}

.comms-header-left[b-g9zway7emh] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.comms-title[b-g9zway7emh] {
    font-family: var(--admin-font);
    font-size: var(--admin-h2-size);
    font-weight: var(--admin-h2-weight);
    letter-spacing: var(--admin-h2-tracking);
    text-transform: uppercase;
    color: var(--admin-charcoal);
}

.comms-title-icon[b-g9zway7emh] {
    font-size: 14px;
    color: var(--admin-charcoal);
}

.comms-badge[b-g9zway7emh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    background: var(--admin-badge-zero-bg);
    color: var(--admin-white);
    font-size: 11px;
    font-weight: 700;
    border-radius: 11px;
    box-sizing: border-box;
}

.comms-badge.has-items[b-g9zway7emh] {
    background: var(--admin-badge-active-bg);
}

.comms-toggle[b-g9zway7emh] {
    flex: 0 0 auto;
    width: var(--admin-toggle-size);
    height: var(--admin-toggle-size);
    min-width: var(--admin-toggle-size);
    min-height: var(--admin-toggle-size);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--admin-toggle-fill);
    border: 1px solid var(--admin-toggle-stroke);
    border-radius: 0;
    color: var(--admin-toggle-symbol);
    cursor: pointer;
    font-size: 12px;
    box-sizing: border-box;
    transition: background 0.15s;
}

.comms-toggle:hover[b-g9zway7emh] {
    background: var(--admin-surface-hover-strong);
}

.comms-action-row[b-g9zway7emh] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    padding: 0 14px 14px;
    background: var(--admin-surface-white);
}

.comms-action-row > .admin-btn-3[b-g9zway7emh] {
    flex: 0 1 auto;
    min-width: 0;
    padding-left: 10px;
    padding-right: 10px;
}

.comms-compose-btn[b-g9zway7emh] {
    background: var(--admin-btn-mark-read-fill);
    color: var(--admin-white);
    border: 1px solid var(--admin-btn-mark-read-fill);
}

.comms-compose-btn:hover[b-g9zway7emh] {
    filter: brightness(1.08);
}

/* MARK ALL AS READ — same green pill as the Student Alerts panel
   so the affordance reads identically across the two surfaces. */
.comms-mark-all-read-btn[b-g9zway7emh] {
    background: var(--admin-btn-mark-read-fill);
    color: var(--admin-white);
    border: 1px solid var(--admin-btn-mark-read-fill);
}

.comms-mark-all-read-btn:hover[b-g9zway7emh] {
    filter: brightness(1.08);
}

/* "N unread" hint label next to the panel-header badge. Mirrors the
   .alerts-unread-label rule from the Student Alerts panel. */
.comms-unread-label[b-g9zway7emh] {
    font-size: 11px;
    color: var(--admin-status-error-fg);
    font-weight: 600;
}

/* Per-message unread indicator — small red dot in the entry header,
   right of the subject + left of the chevron. Disappears on read. */
.comms-unread-dot[b-g9zway7emh] {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--admin-badge-active-bg);
    align-self: center;
    margin-right: 2px;
}

/* Read messages fade slightly so the eye scans to unread first.
   Matches the .is-read styling on the Student Alerts entries. */
.comms-entry.is-read[b-g9zway7emh] {
    opacity: 0.7;
}

.comms-entry.is-read .comms-entry-sender[b-g9zway7emh],
.comms-entry.is-read .comms-entry-subject[b-g9zway7emh] {
    font-weight: 500;
}

.comms-body[b-g9zway7emh] {
    max-height: 400px;
    overflow-y: auto;
}

.comms-empty[b-g9zway7emh] {
    padding: 16px;
    color: var(--admin-text-subtle);
    font-size: 13px;
    text-align: center;
}

.comms-entry[b-g9zway7emh] {
    border-bottom: 1px solid var(--admin-surface-border-soft);
}

.comms-entry-header[b-g9zway7emh] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
}

.comms-entry-header:hover[b-g9zway7emh] {
    background: var(--admin-surface-soft);
}

/* Avatar circle holding the sender's initials. Background colour is
   stable per PersonId — set inline from the component because the
   palette is data-driven. */
.comms-sender-avatar[b-g9zway7emh] {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.comms-entry-text[b-g9zway7emh] {
    flex: 1 1 auto;
    min-width: 0;
}

.comms-entry-line-1[b-g9zway7emh] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.comms-entry-sender[b-g9zway7emh] {
    font-size: 12px;
    font-weight: 600;
    color: var(--admin-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.comms-entry-time[b-g9zway7emh] {
    font-size: 11px;
    color: var(--admin-text-subtle);
    white-space: nowrap;
}

.comms-entry-subject[b-g9zway7emh] {
    font-size: 13px;
    font-weight: 600;
    color: var(--admin-text-strong);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comms-expand-icon[b-g9zway7emh] {
    flex: 0 0 auto;
    color: var(--admin-text-subtle);
    font-size: 11px;
    align-self: center;
}

/* v2: wraps Markdig-rendered HTML (paragraphs, lists, links, headings)
   instead of plain pre-wrap text. The .markdown-body modifier (defined
   below) styles the block-level Markdig output to match the panel's
   compact rhythm. */
.comms-entry-body[b-g9zway7emh] {
    padding: 6px 14px 14px 56px; /* line up with subject (14 + 32 + 10 = 56) */
    font-size: 13px;
    color: var(--admin-text-strong);
    word-break: break-word;
    background: var(--admin-surface-soft);
}

/* ── Markdown-rendered body styling ──
   Markdig wraps text in <p>, lists in <ul>/<ol>, etc. with default
   browser margins which are too generous for a dense panel. Override
   to a compact rhythm. Inline elements (<strong>, <em>, <code>)
   inherit colour + size from the parent. */
.markdown-body p[b-g9zway7emh] {
    margin: 0 0 8px 0;
}

.markdown-body p:last-child[b-g9zway7emh] { margin-bottom: 0; }

.markdown-body h1[b-g9zway7emh], .markdown-body h2[b-g9zway7emh], .markdown-body h3[b-g9zway7emh],
.markdown-body h4[b-g9zway7emh], .markdown-body h5[b-g9zway7emh], .markdown-body h6[b-g9zway7emh] {
    margin: 10px 0 4px 0;
    font-weight: 700;
    color: var(--admin-text-strong);
    line-height: 1.2;
}

.markdown-body h1[b-g9zway7emh] { font-size: 16px; }
.markdown-body h2[b-g9zway7emh] { font-size: 14px; }
.markdown-body h3[b-g9zway7emh], .markdown-body h4[b-g9zway7emh],
.markdown-body h5[b-g9zway7emh], .markdown-body h6[b-g9zway7emh] { font-size: 13px; }

.markdown-body ul[b-g9zway7emh], .markdown-body ol[b-g9zway7emh] {
    margin: 0 0 8px 0;
    padding-left: 22px;
}

.markdown-body li[b-g9zway7emh] {
    margin-bottom: 2px;
}

.markdown-body a[b-g9zway7emh] {
    color: var(--admin-link, #1a4d8a);
    text-decoration: none;
}

.markdown-body a:hover[b-g9zway7emh] {
    text-decoration: underline;
}

.markdown-body blockquote[b-g9zway7emh] {
    margin: 6px 0;
    padding-left: 10px;
    border-left: 3px solid var(--admin-surface-border);
    color: var(--admin-text-muted);
}

.markdown-body code[b-g9zway7emh] {
    background: var(--admin-surface-hover);
    padding: 1px 4px;
    border-radius: 2px;
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 12px;
}

.markdown-body pre[b-g9zway7emh] {
    background: var(--admin-surface-hover);
    padding: 6px 8px;
    border-radius: 2px;
    overflow-x: auto;
    margin: 6px 0;
}

.markdown-body pre code[b-g9zway7emh] {
    background: transparent;
    padding: 0;
}

/* Composer textarea — taller default than admin-form-input one-liners. */
[b-g9zway7emh] .admin-form-input.compose-body {
    min-height: 160px;
    resize: vertical;
    font-family: var(--admin-font);
    line-height: 1.4;
    padding: 8px 10px;
}
/* /Components/Pages/Dashboard/DashboardMultiAssessmentCard.razor.rz.scp.css */
.multi-card[b-rdtsa9815h] {
    border: 1px solid var(--admin-surface-border);
    border-radius: 4px;
    background: var(--admin-white);
    margin-bottom: 8px;
}

/* Expanded state: no border change — the charcoal default border is kept.
   Selected state (below) carries the Stefan dark-red active outline. */
.multi-card.is-expanded[b-rdtsa9815h] {
    /* intentionally empty; previously set border-color: #1565c0 (Material blue) */
}

/* Stefan active/inner-box state — dark red outline, keep white background (outer column box stays grey) */
.multi-card.is-selected[b-rdtsa9815h] {
    border-color: var(--admin-red-active);
    box-shadow: 0 0 0 2px rgba(123, 31, 31, 0.12);
}

.multi-card-head[b-rdtsa9815h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px 4px;
    cursor: pointer;
}

.multi-card-name-group[b-rdtsa9815h] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.multi-card-icon[b-rdtsa9815h] {
    font-size: 16px;
    color: var(--admin-text-muted);
}

.multi-card-title[b-rdtsa9815h] {
    font-weight: 700;
    font-size: 14px;
    color: var(--admin-charcoal);
}

.multi-card-head-right[b-rdtsa9815h] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Stefan "Student List" button — dark-grey 26h × 110w, white people-group icon + ALL CAPS label */
.multi-card-total[b-rdtsa9815h] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 110px;
    height: 26px;
    padding: 0 12px;
    background: var(--admin-btn-student-list-fill);
    border: 1px solid var(--admin-btn-student-list-stroke);
    color: var(--admin-white);
    font-size: var(--admin-sub2-size);           /* 12px */
    font-weight: var(--admin-sub2-weight);       /* 700 */
    letter-spacing: var(--admin-sub2-tracking);  /* 0.5px */
    text-transform: uppercase;
    border-radius: 0;
    box-sizing: border-box;
    white-space: nowrap;
}

.multi-card-total > i[b-rdtsa9815h] {
    font-size: 14px;
    color: var(--admin-white);
}

/* v04 minimised state — when the card is collapsed, drop the "Students" label
   and tighten padding to 6px so the heading row breathes. */
.multi-card:not(.is-expanded) .multi-card-total[b-rdtsa9815h] {
    min-width: 0;
    padding: 0 6px;
}
.multi-card:not(.is-expanded) .multi-card-total-label[b-rdtsa9815h] {
    display: none;
}

/* Stefan square open/close button — 24x24 grey frame, matches .donut-card-toggle */
.multi-card-toggle[b-rdtsa9815h] {
    background: var(--admin-toggle-fill);
    border: 1px solid var(--admin-toggle-stroke);
    border-radius: 0;
    width: var(--admin-toggle-size);
    height: var(--admin-toggle-size);
    min-height: var(--admin-toggle-size);                    /* beat global button min-height */
    padding: 0;
    align-self: center;                                      /* don't stretch under flex parent */
    cursor: pointer;
    font-size: 12px;
    color: var(--admin-toggle-symbol);                       /* v04: darker grey */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.multi-card-toggle:hover[b-rdtsa9815h] {
    background: var(--admin-surface-hover-strong);
}

/* Assessment progress bars */
.multi-card-bars[b-rdtsa9815h] {
    /* Tighter left/right padding (was 14px) gives the participation bar
       more width on the class card. */
    padding: 6px 4px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.multi-card-bar-row[b-rdtsa9815h] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.multi-card-bar-row:hover[b-rdtsa9815h] {
    background: #f8f8f8;
    border-radius: 2px;
}

.multi-card-bar-label[b-rdtsa9815h] {
    font-size: 10px;
    font-weight: 600;
    color: var(--admin-text-muted);
    width: 90px;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.multi-card-bar-track[b-rdtsa9815h] {
    flex: 1;
    height: 14px;
    display: flex;
    gap: 1px;                      /* v04: 1px between coloured segments */
    overflow: hidden;
    border-radius: 2px;
}

.multi-card-bar-seg[b-rdtsa9815h] {
    min-width: 2px;
    transition: flex 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Active filter highlight — mirror DashboardClassDonutCard so the selected
   segment reads identically across all three admin pages. Inset shadow
   instead of border so the segment width doesn't shift. */
.multi-card-bar-seg.is-selected[b-rdtsa9815h] {
    box-shadow: inset 0 0 0 2px var(--admin-charcoal, #333);
    filter: brightness(1.1);
}

/* Bucket colours pulled from app.tokens.css so the dashboard, grid and
   allocation all share the same palette. The .bar-seg-* classes are
   assigned in the Razor code-behind via BucketSegClass(...). */
.bar-seg-complete[b-rdtsa9815h]            { background: var(--bucket-complete); }
.bar-seg-incomplete[b-rdtsa9815h]          { background: var(--bucket-incomplete); }
.bar-seg-notattempted[b-rdtsa9815h]        { background: var(--bucket-notattempted); }
.bar-seg-exempt[b-rdtsa9815h]              { background: var(--bucket-exempt); }
.bar-seg-absent[b-rdtsa9815h]              { background: var(--bucket-absent); }
.bar-seg-flagged-incomplete[b-rdtsa9815h]  { background: var(--bucket-flagged-incomplete); }
.bar-seg-flagged-complete[b-rdtsa9815h]    { background: var(--bucket-flagged-complete); }
.bar-seg-unknown[b-rdtsa9815h]             { background: var(--bucket-unknown); }
.bar-seg-empty[b-rdtsa9815h]               { background: var(--bucket-empty); }

/* Expanded body — Stefan dividing line: inset 14px each side, not full card width */
.multi-card-body[b-rdtsa9815h] {
    padding: 0 14px 12px;
    margin-top: 4px;
    padding-top: 10px;
    position: relative;
}

.multi-card-body[b-rdtsa9815h]::before {
    content: "";
    display: block;
    margin: 0 14px 10px;
    border-top: 1px solid var(--admin-divider);
}

.multi-card-teachers[b-rdtsa9815h] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.multi-card-teachers-label[b-rdtsa9815h] {
    font-size: 11px;
    font-weight: 700;
    color: var(--admin-text-subtle);
}

/* Stefan staff chip — rounded pill, Text 5 type, grey = teacher, gold = admin */
.multi-card-teacher[b-rdtsa9815h] {
    border-radius: 999px;
    padding: 3px 10px;
    font-size: var(--admin-text4-size);      /* v03 Text 4: 11px */
    font-weight: var(--admin-text4-weight);  /* 600 */
    color: var(--admin-charcoal);
    background: var(--admin-teacher-fill);
    border: 1px solid var(--admin-teacher-stroke);
}

/* Role → colour: Teacher + unknown → grey; any admin role → gold */
.multi-card-teacher.teacher-role-schooladmin[b-rdtsa9815h],
.multi-card-teacher.teacher-role-admin[b-rdtsa9815h] {
    background: var(--admin-staff-admin-fill);
    border-color: var(--admin-staff-admin-stroke);
}

/* Inline (always-visible) teacher row sits above the bars */
.multi-card-teachers-inline[b-rdtsa9815h] {
    padding: 4px 14px 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Stack the two download groups as separate rows (Class Table List,
   Student Login Cards) so each DOWNLOAD button lines up on the right
   edge — consistent with the SCHEDULE buttons further down the card. */
.multi-card-download-row[b-rdtsa9815h] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.multi-card-download-group[b-rdtsa9815h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: nowrap;
}

.multi-card-download-label[b-rdtsa9815h] {
    font-size: 11px;
    font-weight: 600;
    color: var(--admin-text-muted);
    /* Take remaining space but truncate rather than pushing the button off. */
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Stefan Download button — 135 × 26 (v04 — was 120 in v03), navy, white icon + ALL CAPS label */
.multi-card-download-btn[b-rdtsa9815h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: var(--admin-btn-download-w);
    height: 26px;
    min-height: 26px;                               /* beat global button min-height */
    padding: 0 12px;
    flex-shrink: 0;                                 /* stay on the right when label truncates */
    background: var(--admin-btn-download-fill);
    border: 1px solid var(--admin-btn-download-stroke);
    color: var(--admin-white);
    font-size: var(--admin-sub2-size);              /* 12px */
    font-weight: var(--admin-sub2-weight);          /* 700 */
    letter-spacing: var(--admin-sub2-tracking);     /* 0.5px */
    text-transform: uppercase;
    border-radius: 0;
    box-sizing: border-box;
    cursor: pointer;
}

.multi-card-download-btn > i[b-rdtsa9815h] {
    color: var(--admin-white);
    font-size: 12px;
}

.multi-card-download-btn:hover:not(:disabled)[b-rdtsa9815h] {
    filter: brightness(1.15);
}

.multi-card-download-btn:disabled[b-rdtsa9815h] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Function-window gate (DisplayMode = Disable / DisableWithMessage): greyed-out
   like :disabled, but WITHOUT the native `disabled` attribute so the element
   stays click-target-able and the gate's toast can fire. See FunctionWindowGate
   — never add `disabled` for the gate's sake. Mirrors the /assessments dashboard
   DashboardClassDonutCard rule. */
.multi-card-download-btn.is-disabled[b-rdtsa9815h] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Suppress the brightness hover-lift on a gated (is-disabled) download button —
   the :hover:not(:disabled) rule above still matches since there's no native
   `disabled` attribute here. */
.multi-card-download-btn.is-disabled:hover[b-rdtsa9815h] {
    filter: none;
}

/* .multi-card-full-list-btn / .multi-card-full-list-btn-row removed —
   the "Full List N Students" CTA was redundant since the top-right
   Student List pill ({count} STUDENTS) already opens the same list. */

/* Stefan dividing line between assessment rows: inset 14px each side.
   Label on the left, actions locked to the right. We do not wrap — the
   label truncates instead so the SCHEDULE / LOCK / … buttons stay in a
   predictable column aligned to the card's right edge. */
.multi-card-assessment-row[b-rdtsa9815h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    gap: 8px;
    position: relative;
    flex-wrap: nowrap;
}

/* Stefan v05: open meatball menu was painting *behind* the SCHEDULE / LOCK
   buttons on later rows. Each row sits in the same stacking context, so the
   meatball-wrap's own z-index couldn't escape its own row. Use :has() to
   lift the entire row above its siblings while a child meatball is open;
   the wrap + menu inside then layer above the next row's contents.  */
.multi-card-assessment-row:has(.admin-meatball-wrap.is-open)[b-rdtsa9815h] {
    z-index: 200;
}

.multi-card-assessment-row:not(:last-child)[b-rdtsa9815h]::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;
    border-bottom: 1px solid var(--admin-divider);
}

.multi-card-assessment-name[b-rdtsa9815h] {
    font-size: 12px;
    font-weight: 600;
    color: var(--admin-text-strong);
    /* Take remaining space but allow truncation if the brief name is long. */
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Scheduled-status indicator shown before the assessment label.
   Solid tick = scheduled (green), outline circle = not scheduled (muted). */
.multi-card-sched-icon[b-rdtsa9815h] {
    /* FA circle trio at 13px — readable but not heavy. Was 12px on the
       old Unicode glyph and 16px after the FA swap (too bold against
       the per-row text); 13 lands halfway. */
    font-size: 13px;
    flex-shrink: 0;
    line-height: 1;
}

.multi-card-sched-icon.is-scheduled[b-rdtsa9815h] {
    color: var(--bucket-complete);         /* same green as Complete bar segment */
}

/* "Some classes scheduled" state on the aggregate card — same green as
   the all-scheduled state because the glyph itself (fa-circle-half-stroke)
   carries the partial information. Keeps the colour story simple: green
   means "scheduling has started or finished"; muted-grey means "nothing
   yet". */
.multi-card-sched-icon.is-partially-scheduled[b-rdtsa9815h] {
    color: var(--bucket-complete);
}

.multi-card-sched-icon.is-unscheduled[b-rdtsa9815h] {
    color: var(--admin-text-muted);
}

.multi-card-assessment-actions[b-rdtsa9815h] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    flex-shrink: 0;   /* keep actions on one line, right-aligned */
    margin-left: auto; /* belt-and-braces against label growing */
}

.multi-card-schedule-info[b-rdtsa9815h] {
    font-size: 11px;
    color: var(--admin-text-muted);
}

/* Schedule-date suffix on the collapsed bar row — sits to the right
   of the progress bar (after .multi-card-bar-track) so it doesn't
   compete with the fixed-width label on the left for space. Compact
   and muted so the progress bar still owns the visual weight; the
   date is supplementary information. */
.multi-card-bar-schedule[b-rdtsa9815h] {
    flex: 0 0 auto;
    margin-left: 8px;
    font-size: 10px;
    font-weight: 600;
    color: var(--admin-text-muted);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Session-of-day symbol to the right of the scheduled date. Slightly
   larger and full charcoal so the sunrise/sun/sunset glyph reads at a
   glance — the previous 12px muted-grey pair was failing the squint
   test against a busy stacked-bar row. */
.multi-card-session-icon[b-rdtsa9815h] {
    font-size: 15px;
    color: var(--admin-charcoal);
}

/* Compact SCHEDULE button shown in the collapsed bar row for unscheduled
   assessments — sits in the same right-hand slot as the date on scheduled
   rows. */
.multi-card-bar-schedule-btn[b-rdtsa9815h] {
    flex: 0 0 auto;
    margin-left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 18px;
    min-height: 18px;
    padding: 0 8px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    color: #fff;
    background: var(--admin-btn-schedule-fill);   /* teal, matches expanded SCHEDULE */
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.multi-card-bar-schedule-btn:hover:not(:disabled)[b-rdtsa9815h] {
    filter: brightness(0.93);
}

.multi-card-bar-schedule-btn:disabled[b-rdtsa9815h] {
    opacity: 0.45;
    cursor: default;
}

/* Stefan Schedule / Reschedule buttons — 135 × 26, main body + right-side meatball menu */
.multi-card-action-btn[b-rdtsa9815h] {
    display: inline-flex;
    align-items: stretch;
    min-width: 135px;
    height: 26px;
    min-height: 26px;                             /* beat global button min-height */
    padding: 0;
    border: none;
    border-radius: 0;
    font-size: var(--admin-sub2-size);            /* 12px */
    font-weight: var(--admin-sub2-weight);        /* 700 */
    letter-spacing: var(--admin-sub2-tracking);   /* 0.5px */
    text-transform: uppercase;
    color: var(--admin-white);
    cursor: pointer;
    box-sizing: border-box;
}

/* Main body of the action button (icon + label). `.multi-card-action-btn` is
   now a <span> wrapping a .btn-body <button> + AdminMeatballMenu — the meatball
   is a separate interactive control so its click doesn't trigger the main
   button action. The inner button inherits colour/font from the span. */
.multi-card-action-btn > .btn-body[b-rdtsa9815h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1 1 auto;
    padding: 0 10px;
    border: none;
    background: transparent;        /* wrapper carries the fill */
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: inherit;
    min-height: 0;                  /* beat global button min-height */
}

/* Right-hand meatball slot is rendered by the shared AdminMeatballMenu
   component — its own scoped CSS handles layout and the three-dot icon.
   No rule needed here (Blazor scoped CSS wouldn't cross the component
   boundary anyway without ::deep). */

.multi-card-action-btn > .btn-body > i[b-rdtsa9815h],
.multi-card-action-btn > .btn-body > svg[b-rdtsa9815h] {
    font-size: 12px;
    color: var(--admin-white);
}

/* Stefan button colours */
.btn-schedule[b-rdtsa9815h] {
    background: var(--admin-btn-schedule-fill);   /* teal */
}

.btn-schedule:hover:not(:disabled)[b-rdtsa9815h] {
    filter: brightness(0.92);
}

.btn-reschedule[b-rdtsa9815h] {
    background: var(--admin-btn-reschedule-fill); /* charcoal */
}

.btn-reschedule:hover:not(:disabled)[b-rdtsa9815h] {
    filter: brightness(1.3);
}

/* LOCK ASSESSMENT — square icon-box. Lock is a platform escalation
   (SystemAdmin / OmniaAdmin only) so the affordance is compact and
   doesn't compete with the larger SCHEDULE / RESCHEDULE buttons for
   space. Same charcoal fill as the other admin-button framing so the
   theme stays consistent. Disabled state until FlagKind.Locked is
   wired (docs/AssessmentFlagArchitecture.md). */
.multi-card-action-icon[b-rdtsa9815h] {
    width: 26px;
    height: 26px;
    min-height: 26px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--admin-charcoal);
    color: var(--admin-white);
    border: 1px solid var(--admin-charcoal);
    border-radius: 0;
    cursor: pointer;
    box-sizing: border-box;
}

.multi-card-action-icon > i[b-rdtsa9815h] {
    color: var(--admin-white);
    font-size: 12px;
}

.multi-card-action-icon:disabled[b-rdtsa9815h] {
    opacity: 0.65;
    cursor: not-allowed;
}

.multi-card-action-btn:disabled[b-rdtsa9815h] {
    opacity: 0.65;
    cursor: not-allowed;
}

.multi-card-status-pill[b-rdtsa9815h] {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.status-open[b-rdtsa9815h] {
    background: var(--admin-status-success-bg);
    color: var(--admin-status-success-fg);
}
/* /Components/Pages/Dashboard/Presence/DashboardPresencePanel.razor.rz.scp.css */
/* Visual rhythm mirrors DashboardCommunicationsPanel /
   DashboardActivityLogsPanel / DashboardStudentAlertsPanel so the
   right-column panels read as a coherent stack. */
.presence-panel[b-0bfoqkh0ip] {
    border: 1px solid var(--admin-surface-border);
    border-radius: 0;
    background: var(--admin-surface-white);
    margin-top: 8px;
}

.presence-panel.is-active[b-0bfoqkh0ip] {
    border-color: var(--admin-red-active);
}

.pp-header[b-0bfoqkh0ip] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px;
    cursor: default;
    background: var(--admin-surface-white);
}

.pp-header-left[b-0bfoqkh0ip] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.pp-title[b-0bfoqkh0ip] {
    font-family: var(--admin-font);
    font-size: var(--admin-h2-size);
    font-weight: var(--admin-h2-weight);
    letter-spacing: var(--admin-h2-tracking);
    text-transform: uppercase;
    color: var(--admin-charcoal);
}

.pp-title-icon[b-0bfoqkh0ip] {
    font-size: 14px;
    color: var(--admin-charcoal);
}

.pp-badge[b-0bfoqkh0ip] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    background: var(--admin-badge-zero-bg);
    color: var(--admin-white);
    font-size: 11px;
    font-weight: 700;
    border-radius: 11px;
    box-sizing: border-box;
}

/* Presence "online" is a good state — green, not the alert red the
   count badges use on the audit panels. */
.pp-badge.has-items[b-0bfoqkh0ip] {
    background: #16a34a;
}

.pp-state-label[b-0bfoqkh0ip] {
    font-size: 12px;
    color: #16a34a;
    font-weight: 600;
    white-space: nowrap;
}

.pp-state-label.pp-muted[b-0bfoqkh0ip] {
    color: var(--admin-text-subtle);
    font-weight: 400;
    font-style: italic;
}

.pp-toggle[b-0bfoqkh0ip] {
    flex: 0 0 auto;
    width: var(--admin-toggle-size);
    height: var(--admin-toggle-size);
    min-width: var(--admin-toggle-size);
    min-height: var(--admin-toggle-size);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--admin-toggle-fill);
    border: 1px solid var(--admin-toggle-stroke);
    border-radius: 0;
    color: var(--admin-toggle-symbol);
    cursor: pointer;
    font-size: 12px;
    box-sizing: border-box;
}

.pp-toggle:hover[b-0bfoqkh0ip] {
    background: var(--admin-toggle-fill-hover, var(--admin-toggle-fill));
}

.pp-body[b-0bfoqkh0ip] {
    padding: 0 14px 14px;
}

.pp-note[b-0bfoqkh0ip] {
    font-size: 12px;
    color: var(--admin-text-subtle);
    font-style: italic;
    margin-top: 6px;
}

.pp-roster-toggle[b-0bfoqkh0ip] {
    margin-top: 10px;
    padding: 4px 12px;
    border: 1px solid var(--admin-surface-border);
    border-radius: 0;
    background: var(--admin-surface-white);
    color: var(--admin-charcoal);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.pp-roster-toggle:hover[b-0bfoqkh0ip] {
    background: var(--admin-toggle-fill);
}
/* /Components/Pages/Dashboard/SchoolDashboard.razor.rz.scp.css */
.dashboard-slice[b-dp2mvr7bun] {
    display: grid;
    grid-template-columns: var(--admin-col-schools) auto 1fr;
    gap: 0;
    /* v04: minimal outer padding so admins on laptops get every pixel.
       Left = 12px (gap between the main side-nav and the schools list),
       top  = 12px (gap below the AppHeader bottom border),
       right + bottom = 8px so column borders aren't kissing the viewport. */
    padding: 12px 8px 8px 12px;
    min-height: calc(100vh - 56px);
    transition: grid-template-columns 0.25s ease;
    font-family: var(--admin-font);
    color: var(--admin-charcoal);
}

.dashboard-slice.sidebar-collapsed[b-dp2mvr7bun] {
    grid-template-columns: 0 auto 1fr;
}

.dashboard-slice.no-sidebar[b-dp2mvr7bun] {
    grid-template-columns: 0 0 1fr;
}

.dashboard-slice.no-sidebar .dashboard-left[b-dp2mvr7bun],
.dashboard-slice.no-sidebar .sidebar-toggle[b-dp2mvr7bun] {
    display: none;
}

/* ── Compact docked picker (broad-scope admins, unpinned) ──
   The list column is released to the content (cols 1+2 collapse to 0); the
   picker — now just a header-height search-select — floats in its old
   top-left position. Absolute positioning with auto offsets keeps it at the
   grid area's static position, so it lands exactly where the column was.
   The page-top-row margin keeps the school header panel in the same place
   it occupies in the pinned layout; everything below it slides left to
   full width. */
.dashboard-slice.picker-docked[b-dp2mvr7bun] {
    position: relative;
    grid-template-columns: 0 0 1fr;
}

.dashboard-slice.picker-docked .dashboard-left[b-dp2mvr7bun] {
    position: absolute;
    width: var(--admin-col-schools);
    overflow: visible;                    /* combobox dropdown overlays content */
    z-index: 40;
}

.dashboard-slice.picker-docked .page-top-row[b-dp2mvr7bun] {
    margin-left: var(--admin-col-schools);
    min-height: var(--admin-picker-compact-h);
}

/* v04: All Schools List has no outer column box (per SKILL.md "All Schools
   List column"). The grey background + border are gone; the column animates
   width when the toggle is clicked. No internal scroll — the list grows to
   its natural height; the page itself scrolls if needed. */
.dashboard-left[b-dp2mvr7bun] {
    grid-column: 1;
    min-width: 0;
    overflow: hidden;                         /* clip the slide-out animation */
    transition: width 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
    width: var(--admin-col-schools);
    padding-right: 8px;
}

.dashboard-slice.sidebar-collapsed .dashboard-left[b-dp2mvr7bun] {
    width: 0;
    opacity: 0;
    padding-right: 0;
    pointer-events: none;
}

/* v04 column HIDE/SHOW button — 24 × 24 grey frame (matches the box-toggle
   pattern), darker-grey chevron glyph, sits at the top-right of the column.
   Mirrors the AssessmentDashboard / StudentDashboard treatment so all three
   pages collapse the schools list the same way. */
.sidebar-toggle[b-dp2mvr7bun] {
    grid-column: 2;
    align-self: start;
    margin-top: 2px;
    margin-right: 6px;
    /* Thin tab — matches the .app-nav-edge-toggle pattern. */
    width: 14px;
    height: 42px;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--admin-toggle-fill);
    border: 1px solid var(--admin-toggle-stroke);
    border-radius: 0;
    font-size: 12px;
    color: var(--admin-toggle-symbol);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}

.sidebar-toggle:hover[b-dp2mvr7bun] {
    background: var(--admin-surface-hover-strong);
}

.dashboard-right[b-dp2mvr7bun] {
    /* Pin to col 3. With the toggle now living inside the panel header, the
       middle (auto) column is empty most of the time — without this, Blazor's
       source-order auto-placement would drop .dashboard-right into col 2 and
       leave the 1fr col 3 as a wide empty band on the right. */
    grid-column: 3;
    padding: 0;
    overflow-y: auto;
    max-height: calc(100vh - 56px);
}

.school-header-panel[b-dp2mvr7bun] {
    margin-bottom: 12px;
}

.school-header-row[b-dp2mvr7bun] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.school-header-name[b-dp2mvr7bun] {
    font-size: 18px;
    font-weight: 900;
    color: var(--admin-charcoal);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Toolbar */
.dashboard-toolbar[b-dp2mvr7bun] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding: 8px 0;
    border-bottom: 1px solid var(--admin-surface-hover-strong);
    flex-wrap: wrap;
    gap: 8px;
}

.dashboard-col-header[b-dp2mvr7bun] {
    border: 1px solid var(--admin-surface-border);
    border-radius: 4px;
    background: var(--admin-white);
    padding: 10px 12px 0;
    margin-bottom: 8px;
}

.dashboard-col-title[b-dp2mvr7bun] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--admin-charcoal);
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

/* Collapsing search at the right end of the column title.
   Default state: just the magnifier icon, sitting flush with the title text.
   Expanded state: a 200 px input slides in next to the icon. */
.dashboard-col-search[b-dp2mvr7bun] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;                            /* push to the right of the title row */
}

.dashboard-col-search-toggle[b-dp2mvr7bun] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0;
    color: var(--admin-text-muted);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.dashboard-col-search-toggle:hover[b-dp2mvr7bun] {
    background: var(--admin-surface-hover);
    border-color: var(--admin-surface-border);
    color: var(--admin-charcoal);
}

.dashboard-col-search.is-expanded .dashboard-col-search-toggle[b-dp2mvr7bun] {
    background: var(--admin-surface-hover);
    border-color: var(--admin-surface-border);
    color: var(--admin-charcoal);
}

.dashboard-col-search-input[b-dp2mvr7bun] {
    width: 180px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--admin-surface-border);
    border-radius: 0;
    background: var(--admin-surface-white);
    font-family: var(--admin-font);
    font-size: 13px;
    color: var(--admin-charcoal);
    box-sizing: border-box;
}

.dashboard-col-search-input:focus[b-dp2mvr7bun] {
    outline: none;
    border-color: var(--admin-charcoal);
}

/* Stefan v05: "YEAR LEVEL" subheading above the tabs — SUBHEADING 3 tokens
   (uppercase 11/700/0.5px charcoal). Sits 14 px below the search bar so
   the whole STUDENT ASSESSMENTS title row reads top-down: title → search,
   subheading → tabs. */
.dashboard-year-tabs-label[b-dp2mvr7bun] {
    margin-top: var(--admin-search-offset);                   /* 14 px gap above */
    margin-bottom: 4px;
    font-family: var(--admin-font);
    font-size: var(--admin-sub3-size);                        /* 11 px */
    font-weight: var(--admin-sub3-weight);                    /* 700 */
    letter-spacing: var(--admin-sub3-tracking);               /* 0.5 px */
    color: var(--admin-charcoal);
    text-transform: uppercase;
}

.dashboard-year-tabs[b-dp2mvr7bun] {
    display: flex;
    gap: 0;
    flex-wrap: nowrap;
    align-items: flex-end;
    padding-top: 0;                                           /* gap now handled by the label above */
    border-bottom: var(--admin-tab-baseline-height) solid var(--admin-tab-baseline-color); /* 6px charcoal baseline */
    container-type: inline-size;
    container-name: dashboard-year-tabs;
}

/* Short/full label visibility — default = full ("YEAR 3") */
.dash-year-tab .tab-short[b-dp2mvr7bun] { display: none; }
.dash-year-tab .tab-full[b-dp2mvr7bun]  { display: inline; }

/* When the column is tight, collapse per-tab text to just the number ("3"). */
@container dashboard-year-tabs (max-width: 520px) {
    .dash-year-tab .tab-full[b-dp2mvr7bun]  { display: none; }
    .dash-year-tab .tab-short[b-dp2mvr7bun] { display: inline; }
    .dash-year-tab[b-dp2mvr7bun] { padding: 0 6px; }
}

.dash-year-tab[b-dp2mvr7bun] {
    flex: 1 1 0;                                             /* equal share — responsive */
    min-width: 0;                                            /* allow shrink below content width */
    height: var(--admin-tab-height);                         /* 30px */
    min-height: var(--admin-tab-height);                     /* override global button min-height (40px) */
    padding: 0 var(--admin-tab-pad-x);                       /* 20px left/right */
    margin-bottom: var(--admin-tab-gap-below);               /* v04: 2px gap above baseline */
    border: none;
    border-right: 1px solid var(--admin-white);
    background: var(--admin-year-tab-bg);
    color: var(--admin-charcoal);
    font-size: var(--admin-sub2-size);                       /* 12px */
    font-weight: var(--admin-sub2-weight);                   /* 700 */
    letter-spacing: var(--admin-sub2-tracking);              /* 0.5px */
    text-transform: uppercase;
    text-align: center;
    border-radius: 0;
    cursor: pointer;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.dash-year-tab:last-child[b-dp2mvr7bun] {
    border-right: none;
}

.dash-year-tab:hover:not(.is-selected)[b-dp2mvr7bun] {
    background: var(--admin-year-tab-bg-hover);
}

.dash-year-tab.is-selected[b-dp2mvr7bun] {
    background: var(--admin-charcoal);
    color: var(--admin-white);
    margin-bottom: 0;                                        /* extend down to baseline */
    height: calc(var(--admin-tab-height) + var(--admin-tab-gap-below));
    min-height: calc(var(--admin-tab-height) + var(--admin-tab-gap-below));
}

/* .dashboard-search-input removed — page now uses the shared .admin-search / .admin-search-input
   pair from site.css. See SKILL.md → "Search box" section. */

.dashboard-title[b-dp2mvr7bun] {
    font-size: 12px;
    font-weight: 700;
    color: var(--admin-text-muted);
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.dashboard-empty[b-dp2mvr7bun], .dashboard-loading[b-dp2mvr7bun] {
    padding: 40px 16px;
    color: var(--admin-text-subtle);
    font-size: 14px;
    text-align: center;
}

/* 3-column layout: Classes | Students/Detail | Logs+Alerts
   Classes column uses --admin-col-classes so width matches
   /school/assessments/dashboard and /school/students. */
.dashboard-columns[b-dp2mvr7bun] {
    display: grid;
    grid-template-columns: var(--admin-col-classes) minmax(300px, 2fr) minmax(280px, 1fr);
    gap: 12px;
    min-height: 400px;
}

/* Stefan column box — grey frame wrapping tabs + class cards / inner boxes */
.dashboard-col[b-dp2mvr7bun] {
    background: var(--admin-column-box-bg);
    border: 1px solid var(--admin-column-box-border);
    border-radius: 0;
    padding: 12px;
    overflow-y: auto;
    max-height: calc(100vh - 200px);
}

.dashboard-col-classes[b-dp2mvr7bun],
.dashboard-col-students[b-dp2mvr7bun] {
    /* inherit the grey frame from .dashboard-col; the old inter-column border-right
       was redundant once each column has its own box */
}

.dashboard-col-alerts[b-dp2mvr7bun] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dashboard-col-placeholder[b-dp2mvr7bun] {
    color: var(--admin-text-subtle);
    font-size: 13px;
    padding: 20px 0;
}

.student-detail-view[b-dp2mvr7bun] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.back-to-list-btn[b-dp2mvr7bun] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid #ccc;
    border-radius: 2px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--admin-text-muted);
    cursor: pointer;
    align-self: flex-start;
}

.back-to-list-btn:hover[b-dp2mvr7bun] {
    background: var(--admin-surface-hover);
}


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

    .dashboard-left[b-dp2mvr7bun], .sidebar-toggle[b-dp2mvr7bun] {
        display: none;
    }
}
/* /Components/Pages/Dashboard/Support/DashboardSupportPanel.razor.rz.scp.css */
/* Matches the visual rhythm of the other dashboard right-column
   panels (Communications / StaffActivityLogs / StudentAlerts). */
.support-panel[b-tqny890xc6] {
    border: 1px solid var(--admin-surface-border);
    border-radius: 0;
    background: var(--admin-surface-white);
    margin-top: 8px;
}

.support-panel.is-active[b-tqny890xc6] {
    border-color: var(--admin-red-active);
}

.support-header[b-tqny890xc6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px;
    background: var(--admin-surface-white);
}

.support-header-left[b-tqny890xc6] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.support-header-right[b-tqny890xc6] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.support-title[b-tqny890xc6] {
    font-family: var(--admin-font);
    font-size: var(--admin-h2-size);
    font-weight: var(--admin-h2-weight);
    letter-spacing: var(--admin-h2-tracking);
    text-transform: uppercase;
    color: var(--admin-charcoal);
}

.support-title-icon[b-tqny890xc6] {
    font-size: 14px;
    color: var(--admin-charcoal);
}

.support-toggle[b-tqny890xc6],
.support-edit-btn[b-tqny890xc6] {
    flex: 0 0 auto;
    width: var(--admin-toggle-size);
    height: var(--admin-toggle-size);
    min-width: var(--admin-toggle-size);
    min-height: var(--admin-toggle-size);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--admin-toggle-fill);
    border: 1px solid var(--admin-toggle-stroke);
    border-radius: 0;
    color: var(--admin-toggle-symbol);
    cursor: pointer;
    font-size: 11px;
    box-sizing: border-box;
    transition: background 0.15s;
}

.support-toggle:hover[b-tqny890xc6] {
    background: var(--admin-surface-hover-strong);
}

.support-edit-btn:disabled[b-tqny890xc6] {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Tab strip — horizontal scroll on overflow so a narrow right column
   doesn't break the row. Selected tab gets the charcoal fill that
   matches the year-level tabs elsewhere on admin pages.

   v2: tabs size to their label content (flex: 0 0 auto on each tab)
   rather than splitting the strip width equally. When the total
   tab width exceeds the strip width the native horizontal
   scrollbar lets the user scroll. scroll-behavior: smooth makes
   keyboard / programmatic scrolling glide rather than jump.
   Custom-styled thin scrollbar so it doesn't dominate the visual. */
.support-tab-strip[b-tqny890xc6] {
    display: flex;
    gap: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--admin-text-subtle, #888) transparent;
    border-bottom: var(--admin-tab-baseline-height) solid var(--admin-tab-baseline-color);
    background: var(--admin-surface-white);
}

/* Thin, charcoal-tinted scrollbar on WebKit browsers (Chrome / Edge /
   Safari). The Firefox equivalent is covered by scrollbar-width /
   scrollbar-color above. */
.support-tab-strip[b-tqny890xc6]::-webkit-scrollbar {
    height: 4px;
}

.support-tab-strip[b-tqny890xc6]::-webkit-scrollbar-thumb {
    background: var(--admin-text-subtle, #888);
    border-radius: 2px;
}

.support-tab-strip[b-tqny890xc6]::-webkit-scrollbar-track {
    background: transparent;
}

.support-tab[b-tqny890xc6] {
    /* Size to content (not equal-share of the strip). Longer labels
       like "Parent Letter" / "Past Papers" stay legible; the strip
       scrolls horizontally when the total tab width exceeds the
       container. */
    flex: 0 0 auto;
    height: var(--admin-tab-height);
    min-height: var(--admin-tab-height);
    padding: 0 14px;
    margin-bottom: var(--admin-tab-gap-below);
    border: none;
    border-right: 1px solid var(--admin-white);
    background: var(--admin-year-tab-bg);
    color: var(--admin-charcoal);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    text-align: center;
    border-radius: 0;
    cursor: pointer;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    white-space: nowrap;
}

.support-tab:last-child[b-tqny890xc6] { border-right: none; }
.support-tab:hover:not(.is-selected)[b-tqny890xc6] { background: var(--admin-year-tab-bg-hover); }

.support-tab.is-selected[b-tqny890xc6] {
    background: var(--admin-charcoal);
    color: var(--admin-white);
    margin-bottom: 0;
    height: calc(var(--admin-tab-height) + var(--admin-tab-gap-below));
    min-height: calc(var(--admin-tab-height) + var(--admin-tab-gap-below));
}

.support-body[b-tqny890xc6] {
    padding: 12px 14px;
    max-height: 400px;
    overflow-y: auto;
}

.support-empty[b-tqny890xc6] {
    padding: 16px;
    color: var(--admin-text-subtle);
    font-size: 13px;
    text-align: center;
    font-style: italic;
}

.support-entry[b-tqny890xc6] {
    padding: 8px 0;
    border-bottom: 1px solid var(--admin-surface-border-soft);
}

.support-entry:last-child[b-tqny890xc6] {
    border-bottom: none;
}

.support-entry-title[b-tqny890xc6] {
    font-size: 13px;
    font-weight: 600;
    color: var(--admin-text-strong);
}

.support-entry-description[b-tqny890xc6] {
    font-size: 12px;
    color: var(--admin-text-muted);
    margin-top: 2px;
}

/* Plain-text body — preserves line breaks (e.g. multi-line Contact
   address blocks like the CEWA REA Technical Support card in the
   screenshot). Wrapped in <pre> so multi-line authoring renders
   verbatim; the CSS strips the monospace + the default margins. */
/* v2: was a styled <pre> for plain-text; now wraps Markdig output.
   Markdig handles paragraph + line-break layout, so the wrapper just
   sets font size + colour. The .markdown-body modifier styles the
   block-level elements (paragraphs, lists, links, headings, code)
   consistently with the panel's visual rhythm. */
.support-entry-body[b-tqny890xc6] {
    margin: 6px 0 0 0;
    font-family: var(--admin-font);
    font-size: 12px;
    color: var(--admin-text-strong);
    word-break: break-word;
}

.support-entry-link[b-tqny890xc6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--admin-link, #1a4d8a);
    text-decoration: none;
}

.support-entry-link:hover[b-tqny890xc6] {
    text-decoration: underline;
}

/* ── Markdown-rendered body styling ──
   Markdig wraps text in <p>, lists in <ul>/<ol>, etc. with default
   browser margins which are too generous for a dense dashboard panel.
   Override them to a compact rhythm. Inline elements (<strong>,
   <em>, <code>) inherit colour + size from the parent. */
.markdown-body p[b-tqny890xc6] {
    margin: 0 0 6px 0;
}

.markdown-body p:last-child[b-tqny890xc6] { margin-bottom: 0; }

.markdown-body h1[b-tqny890xc6], .markdown-body h2[b-tqny890xc6], .markdown-body h3[b-tqny890xc6],
.markdown-body h4[b-tqny890xc6], .markdown-body h5[b-tqny890xc6], .markdown-body h6[b-tqny890xc6] {
    margin: 8px 0 4px 0;
    font-weight: 700;
    color: var(--admin-text-strong);
    line-height: 1.2;
}

.markdown-body h1[b-tqny890xc6] { font-size: 14px; }
.markdown-body h2[b-tqny890xc6] { font-size: 13px; }
.markdown-body h3[b-tqny890xc6], .markdown-body h4[b-tqny890xc6],
.markdown-body h5[b-tqny890xc6], .markdown-body h6[b-tqny890xc6] { font-size: 12px; }

.markdown-body ul[b-tqny890xc6], .markdown-body ol[b-tqny890xc6] {
    margin: 0 0 6px 0;
    padding-left: 20px;
}

.markdown-body li[b-tqny890xc6] {
    margin-bottom: 2px;
}

.markdown-body a[b-tqny890xc6] {
    color: var(--admin-link, #1a4d8a);
    text-decoration: none;
}

.markdown-body a:hover[b-tqny890xc6] {
    text-decoration: underline;
}

.markdown-body blockquote[b-tqny890xc6] {
    margin: 4px 0;
    padding-left: 10px;
    border-left: 3px solid var(--admin-surface-border);
    color: var(--admin-text-muted);
}

.markdown-body code[b-tqny890xc6] {
    background: var(--admin-surface-hover);
    padding: 1px 4px;
    border-radius: 2px;
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 11px;
}

.markdown-body pre[b-tqny890xc6] {
    background: var(--admin-surface-hover);
    padding: 6px 8px;
    border-radius: 2px;
    overflow-x: auto;
    margin: 4px 0;
}

.markdown-body pre code[b-tqny890xc6] {
    background: transparent;
    padding: 0;
}
/* /Components/Pages/Dashboard/TenantAccess/DashboardTenantAccessPanel.razor.rz.scp.css */
/* Gate-1 student-access master switch. Matches the visual rhythm of the
   other dashboard right-column panels (Support / Communications). */
.tenant-access-panel[b-11daz4g1xx] {
    border: 1px solid var(--admin-surface-border);
    border-radius: 0;
    background: var(--admin-surface-white);
    margin-top: 8px;
}

/* When student access is OFF the whole panel takes a warning edge so it's
   unmistakable at a glance in the right column. */
.tenant-access-panel.is-off[b-11daz4g1xx] {
    border-color: var(--admin-red-active, #b3261e);
    border-left-width: 4px;
}

.tap-header[b-11daz4g1xx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px;
    background: var(--admin-surface-white);
}

.tap-header-left[b-11daz4g1xx] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.tap-header-right[b-11daz4g1xx] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

/* Collapse/expand toggle — mirrors the Support panel's square +/- button. */
.tap-toggle[b-11daz4g1xx] {
    flex: 0 0 auto;
    width: var(--admin-toggle-size);
    height: var(--admin-toggle-size);
    min-width: var(--admin-toggle-size);
    min-height: var(--admin-toggle-size);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--admin-toggle-fill);
    border: 1px solid var(--admin-toggle-stroke);
    border-radius: 0;
    color: var(--admin-toggle-symbol);
    cursor: pointer;
    font-size: 11px;
    box-sizing: border-box;
    transition: background 0.15s;
}

.tap-toggle:hover[b-11daz4g1xx] {
    background: var(--admin-surface-hover-strong);
}

/* Expanded state gets the active edge that the other right-column panels use. */
.tenant-access-panel.is-active[b-11daz4g1xx] {
    border-color: var(--admin-red-active, #b3261e);
}

.tap-title[b-11daz4g1xx] {
    font-family: var(--admin-font);
    font-size: var(--admin-h2-size);
    font-weight: var(--admin-h2-weight);
    letter-spacing: var(--admin-h2-tracking);
    text-transform: uppercase;
    color: var(--admin-charcoal);
}

.tap-title-icon[b-11daz4g1xx] {
    font-size: 14px;
    color: var(--admin-charcoal);
}

.tap-badge[b-11daz4g1xx] {
    flex: 0 0 auto;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.tap-badge.is-on[b-11daz4g1xx] {
    background: var(--admin-green-soft, #e6f4ea);
    color: var(--admin-green-strong, #1e7d34);
}

.tap-badge.is-off[b-11daz4g1xx] {
    background: var(--admin-red-soft, #fce8e6);
    color: var(--admin-red-active, #b3261e);
}

.tap-body[b-11daz4g1xx] {
    padding: 12px 14px;
}

.tap-empty[b-11daz4g1xx] {
    padding: 10px 0;
    color: var(--admin-text-subtle);
    font-size: 13px;
    font-style: italic;
}

.tap-scope[b-11daz4g1xx] {
    font-size: 12px;
    color: var(--admin-text-muted);
    margin-bottom: 6px;
}

.tap-explain[b-11daz4g1xx] {
    margin: 0 0 10px 0;
    font-family: var(--admin-font);
    font-size: 12px;
    color: var(--admin-text-strong);
    line-height: 1.4;
}

.tap-btn[b-11daz4g1xx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid transparent;
    border-radius: 0;
    font-family: var(--admin-font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.15s, opacity 0.15s;
}

.tap-btn:disabled[b-11daz4g1xx] {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Danger = the destructive "turn OFF" action. */
.tap-btn-danger[b-11daz4g1xx] {
    background: var(--admin-red-active, #b3261e);
    color: var(--admin-white, #fff);
    border-color: var(--admin-red-active, #b3261e);
}

.tap-btn-danger:hover:not(:disabled)[b-11daz4g1xx] {
    background: var(--admin-red-strong, #8c1d18);
}

/* Primary = the safe "turn back ON" action. */
.tap-btn-primary[b-11daz4g1xx] {
    background: var(--admin-green-strong, #1e7d34);
    color: var(--admin-white, #fff);
    border-color: var(--admin-green-strong, #1e7d34);
}

.tap-btn-primary:hover:not(:disabled)[b-11daz4g1xx] {
    background: var(--admin-green-darker, #166128);
}

.tap-btn-ghost[b-11daz4g1xx] {
    background: transparent;
    color: var(--admin-charcoal);
    border-color: var(--admin-surface-border);
}

.tap-btn-ghost:hover:not(:disabled)[b-11daz4g1xx] {
    background: var(--admin-surface-hover-strong, #f0f0f0);
}

/* Inline confirmation block shown before an OFF flip. */
.tap-confirm[b-11daz4g1xx] {
    border: 1px solid var(--admin-red-soft, #fce8e6);
    background: var(--admin-red-soft, #fce8e6);
    padding: 10px;
    margin-top: 4px;
}

.tap-confirm p[b-11daz4g1xx] {
    margin: 0 0 8px 0;
    font-size: 12px;
    color: var(--admin-text-strong);
    line-height: 1.4;
}

.tap-actions[b-11daz4g1xx] {
    display: flex;
    gap: 8px;
}

/* Quick "open for testing" duration buttons. */
.tap-quick-label[b-11daz4g1xx] {
    margin-top: 12px;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--admin-text-muted);
}

.tap-quick-row[b-11daz4g1xx] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.tap-btn-quick[b-11daz4g1xx] {
    background: var(--admin-surface-white);
    color: var(--admin-charcoal);
    border-color: var(--admin-charcoal);
}

.tap-btn-quick:hover:not(:disabled)[b-11daz4g1xx] {
    background: var(--admin-charcoal);
    color: var(--admin-white, #fff);
}

/* Active testing-window block (amber/info treatment, distinct from the
   destructive red used for the permanent OFF flow). */
.tap-window[b-11daz4g1xx] {
    border: 1px solid var(--admin-charcoal);
    border-left-width: 4px;
    background: var(--admin-surface-hover, #f6f6f6);
    padding: 10px;
    margin-bottom: 4px;
}

.tap-window-head[b-11daz4g1xx] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--admin-charcoal);
    margin-bottom: 4px;
}

.tap-window p[b-11daz4g1xx] {
    margin: 0 0 8px 0;
    font-size: 12px;
    color: var(--admin-text-strong);
    line-height: 1.4;
}

/* OmniaAdmin cache tools at the base of the panel — subdued, separated from
   the main controls by a top rule so it reads as a utility footer. */
.tap-cache[b-11daz4g1xx] {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--admin-surface-border-soft, #e5e5e5);
}

.tap-cache-toggle[b-11daz4g1xx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    background: transparent;
    border: none;
    color: var(--admin-text-muted);
    font-family: var(--admin-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    cursor: pointer;
}

.tap-cache-toggle:hover[b-11daz4g1xx] {
    color: var(--admin-charcoal);
}

.tap-cache-picker[b-11daz4g1xx] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.tap-cache-item[b-11daz4g1xx] {
    padding: 5px 9px;
    background: var(--admin-surface-white);
    border: 1px solid var(--admin-surface-border);
    border-radius: 0;
    color: var(--admin-charcoal);
    font-family: var(--admin-font);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.tap-cache-item:hover:not(:disabled)[b-11daz4g1xx] {
    background: var(--admin-surface-hover-strong, #f0f0f0);
}

.tap-cache-item:disabled[b-11daz4g1xx] {
    cursor: not-allowed;
    opacity: 0.6;
}

.tap-cache-msg[b-11daz4g1xx] {
    margin-top: 8px;
    font-size: 11px;
    color: var(--admin-text-muted);
}

/* Lightweight inline feedback (toast convention, SyncfusionComponentRules #9). */
.tap-toast[b-11daz4g1xx] {
    margin-top: 10px;
    padding: 6px 10px;
    font-size: 12px;
    color: var(--admin-text-strong);
    background: var(--admin-surface-hover, #f6f6f6);
    border-left: 3px solid var(--admin-charcoal);
}
/* /Components/Pages/Help/HelpIndex.razor.rz.scp.css */
/* Scoped CSS for the /help page.
   Two-column layout: fixed-width sidebar TOC + flexible content area. */

.help-page[b-meb1ivwind] {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 32px;
    padding: 24px 32px 64px 32px;
    max-width: 1280px;
    margin: 0 auto;
    align-items: start;
}

@media (max-width: 900px) {
    .help-page[b-meb1ivwind] {
        grid-template-columns: 1fr;
        padding: 16px;
    }
}

.help-content[b-meb1ivwind] {
    min-width: 0; /* prevent overflow inside grid */
    padding-top: 4px;
}

.help-breadcrumb[b-meb1ivwind] {
    font-size: 0.85rem;
    color: #6b7280;
    margin-bottom: 18px;
}

    .help-breadcrumb a[b-meb1ivwind] {
        color: #1976d2;
        text-decoration: none;
    }

    .help-breadcrumb a:hover[b-meb1ivwind] {
        text-decoration: underline;
    }

.help-breadcrumb-sep[b-meb1ivwind] {
    margin: 0 6px;
    color: #cbd5e1;
}

.help-breadcrumb-current[b-meb1ivwind] {
    color: #334155;
}

.help-not-found[b-meb1ivwind] {
    padding: 32px;
    text-align: center;
    color: #6b7280;
}

    .help-not-found h1[b-meb1ivwind] {
        color: #334155;
    }

/* Topic article styles — applied to descendant components (Welcome / LoggingIn / ...)
   via ::deep, since scoped CSS otherwise wouldn't cross the component boundary. */

[b-meb1ivwind] .help-topic {
    max-width: 760px;
    line-height: 1.55;
    color: #334155;
}

[b-meb1ivwind] .help-topic-header {
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid #e2e8f0;
}

[b-meb1ivwind] .help-topic-header h1 {
    margin: 0 0 8px 0;
    color: #0f172a;
    font-size: 1.8rem;
    font-weight: 600;
}

[b-meb1ivwind] .help-topic-lede {
    font-size: 1.05rem;
    color: #475569;
    margin: 0;
}

[b-meb1ivwind] .help-topic-body h2 {
    margin-top: 32px;
    margin-bottom: 12px;
    color: #0f172a;
    font-size: 1.25rem;
    font-weight: 600;
}

[b-meb1ivwind] .help-topic-body h3 {
    margin-top: 20px;
    margin-bottom: 8px;
    color: #1e293b;
    font-size: 1.05rem;
    font-weight: 600;
}

[b-meb1ivwind] .help-topic-body p {
    margin: 0 0 12px 0;
}

[b-meb1ivwind] .help-topic-body ol,
[b-meb1ivwind] .help-topic-body ul {
    margin: 8px 0 16px 0;
    padding-left: 24px;
}

[b-meb1ivwind] .help-topic-body li {
    margin-bottom: 6px;
}

[b-meb1ivwind] .help-topic-next {
    list-style: none;
    padding-left: 0;
    margin: 12px 0;
}

[b-meb1ivwind] .help-topic-next li {
    padding: 6px 0;
}

[b-meb1ivwind] .help-topic-next a {
    color: #1976d2;
    font-weight: 500;
}

[b-meb1ivwind] .help-topic-soon {
    color: #94a3b8;
    font-style: italic;
}

[b-meb1ivwind] .help-topic-aside {
    margin: 24px 0;
    padding: 14px 16px;
    background: #fef9c3;
    border-left: 3px solid #facc15;
    border-radius: 4px;
    font-size: 0.92rem;
    color: #713f12;
}

[b-meb1ivwind] .help-topic-aside strong {
    color: #713f12;
}

[b-meb1ivwind] .help-topic-next-link {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
    font-size: 0.95rem;
}
/* /Components/Pages/Help/HelpScreenshot.razor.rz.scp.css */
/* Image + caption + "Show me in Omnia" CTA. */

.help-screenshot[b-vnwxw4d2su] {
    margin: 24px 0;
    padding: 0;
}

.help-screenshot-img[b-vnwxw4d2su] {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.help-screenshot-cta[b-vnwxw4d2su] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 6px 12px;
    background: #f1f5f9;
    color: #1976d2;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.12s, border-color 0.12s;
}

    .help-screenshot-cta:hover[b-vnwxw4d2su] {
        background: #e2e8f0;
        border-color: #94a3b8;
        text-decoration: none;
    }

    .help-screenshot-cta i[b-vnwxw4d2su] {
        font-size: 0.75rem;
    }

.help-screenshot-caption[b-vnwxw4d2su] {
    margin-top: 6px;
    font-size: 0.82rem;
    color: #64748b;
    font-style: italic;
}
/* /Components/Pages/Help/HelpToc.razor.rz.scp.css */
/* Sidebar TOC — sticky, light surface with grouped sections. */

.help-toc[b-oow01vg9gp] {
    position: sticky;
    top: 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}

.help-toc-header[b-oow01vg9gp] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #0f172a;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
    font-size: 1rem;
}

    .help-toc-header i[b-oow01vg9gp] {
        color: #1976d2;
    }

.help-toc-group[b-oow01vg9gp] {
    margin-bottom: 14px;
}

.help-toc-group-title[b-oow01vg9gp] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    margin: 8px 0 6px 0;
    padding: 0;
}

.help-toc-list[b-oow01vg9gp] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.help-toc-item[b-oow01vg9gp] {
    padding: 0;
}

.help-toc-link[b-oow01vg9gp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border-radius: 4px;
    color: #334155;
    text-decoration: none;
    font-size: 0.88rem;
    line-height: 1.3;
}

    .help-toc-link:hover[b-oow01vg9gp] {
        background: #e2e8f0;
        color: #0f172a;
    }

    .help-toc-link.is-disabled[b-oow01vg9gp] {
        color: #94a3b8;
        cursor: default;
    }

    .help-toc-link.is-disabled:hover[b-oow01vg9gp] {
        background: transparent;
        color: #94a3b8;
    }

.help-toc-item.is-current > .help-toc-link[b-oow01vg9gp] {
    background: #1976d2;
    color: #fff;
    font-weight: 500;
}

.help-toc-soon[b-oow01vg9gp] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: 8px;
}
/* /Components/Pages/LoginNew.razor.rz.scp.css */
.login-new[b-9c8u93vhhi] {
    min-height: 100vh;
    background: #000000;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.login-new__canvas[b-9c8u93vhhi] {
    width: min(1200px, 100%);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.login-new__top[b-9c8u93vhhi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.login-new__brand img[b-9c8u93vhhi] {
    width: min(420px, 100%);
    height: auto;
    display: block;
}

.login-new__panel[b-9c8u93vhhi] {
    flex: 0 0 320px;
    width: 320px;
    min-width: 320px;
    background: #7fd7e2;
    color: #0b1a1c;
    padding: 16px 18px 18px;
    border-radius: 4px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}

/* Temporary: hide the footer only for the generic (Religious Education)
   theme while its footer branding is being finalised. Remove this rule
   when the generic footer design lands. */
.login-new--default .login-new__footer[b-9c8u93vhhi] {
    display: none !important;
}

/* Temporary: ASK OMNIA element hidden across all themes for now. */
.login-new__footer-right[b-9c8u93vhhi] {
    display: none !important;
}

.login-new__panel-title[b-9c8u93vhhi] {
    font-weight: 700;
    letter-spacing: 0.03em;
    font-size: 0.95rem;
    margin-bottom: 10px;
}

.login-new__error[b-9c8u93vhhi] {
    background: #c03a2b;
    color: #ffffff;
    font-size: 0.85rem;
    padding: 6px 8px;
    border-radius: 3px;
    margin-bottom: 10px;
}

.login-new__label[b-9c8u93vhhi] {
    font-size: 0.8rem;
    font-weight: 600;
    display: block;
    margin: 8px 0 4px;
}

.login-new__input[b-9c8u93vhhi] {
    width: 100%;
    height: 30px;
    border: 1px solid #5598a0;
    border-radius: 2px;
    padding: 4px 8px;
    font-size: 0.9rem;
    background: #ffffff;
    color: #14282b;
}

.login-new__row[b-9c8u93vhhi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
}

.login-new__remember[b-9c8u93vhhi] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
}

.login-new__button[b-9c8u93vhhi] {
    background: #1e8290;
    color: #ffffff;
    border: 1px solid #0f5f69;
    border-radius: 3px;
    padding: 6px 16px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
}

.login-new__button:hover[b-9c8u93vhhi] {
    background: #156a75;
}

.login-new__strip[b-9c8u93vhhi] {
    height: 120px;
    background-image: url('/branding/strips/y7_header-01.jpg');
    background-size: cover;
    background-position: center;
    border-radius: 2px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.login-new__footer[b-9c8u93vhhi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.login-new__footer-left img[b-9c8u93vhhi] {
    height: 46px;
    width: auto;
    display: block;
}

.login-new__footer-text[b-9c8u93vhhi] {
    font-weight: 600;
    letter-spacing: 0.04em;
    font-size: 0.85rem;
    color: #ffffff;
}

.login-new__footer-right[b-9c8u93vhhi] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
}

.login-new__ask-icon[b-9c8u93vhhi] {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 2px solid #ffffff;
    position: relative;
}

.login-new__ask-icon[b-9c8u93vhhi]::after {
    content: '';
    position: absolute;
    inset: 7px;
    border-radius: 999px;
    border: 2px solid #ffffff;
}

.login-new__divider[b-9c8u93vhhi] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 10px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #3a6a70;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.login-new__divider[b-9c8u93vhhi]::before,
.login-new__divider[b-9c8u93vhhi]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #5598a0;
}

.login-new__sso-button[b-9c8u93vhhi] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: #ffffff;
    color: #333333;
    border: 1px solid #8c8c8c;
    border-radius: 3px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
}

.login-new__sso-button:hover[b-9c8u93vhhi] {
    background: #f0f0f0;
}

.login-new__sso-icon[b-9c8u93vhhi] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .login-new__top[b-9c8u93vhhi] {
        flex-direction: column;
        align-items: flex-start;
    }

    .login-new__panel[b-9c8u93vhhi] {
        width: min(360px, 100%);
    }

    .login-new__brand img[b-9c8u93vhhi] {
        width: min(320px, 100%);
    }
}

@media (max-width: 600px) {
    .login-new[b-9c8u93vhhi] {
        padding: 16px;
    }

    .login-new__strip[b-9c8u93vhhi] {
        height: 90px;
    }

    .login-new__footer[b-9c8u93vhhi] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Components/Pages/Monitoring/MonitoringTile.razor.rz.scp.css */
.m-tile[b-gpn7dh4rmj] {
    background: #fff;
    border: 1px solid #e3e8f0;
    border-left: 4px solid #c3cbdd;
    border-radius: 10px;
    padding: 15px 16px;
    box-shadow: 0 1px 3px rgba(31,42,68,.08), 0 1px 2px rgba(31,42,68,.06);
    position: relative;
    min-height: 118px;
    display: flex;
    flex-direction: column;
}

.m-tile.m-normal[b-gpn7dh4rmj] { border-left-color: #1f9d6b; }
.m-tile.m-attention[b-gpn7dh4rmj] { border-left-color: #c9821a; }
.m-tile.m-critical[b-gpn7dh4rmj] { border-left-color: #c4453b; }
.m-tile.m-muted[b-gpn7dh4rmj] { border-left-color: #c3cbdd; background: #fafbfd; }

.m-top[b-gpn7dh4rmj] { display: flex; align-items: center; gap: 9px; }

/* Reserve the top-right corner for the COMING SOON badge / live indicator so a
   long title wraps clear of it instead of running underneath. */
.m-tile.m-muted .m-top[b-gpn7dh4rmj] { padding-right: 74px; }

.m-ic[b-gpn7dh4rmj] {
    width: 30px; height: 30px; border-radius: 8px;
    background: #eef1f7; color: #3b4f8a;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
}

.m-title[b-gpn7dh4rmj] { font-size: 12.5px; color: #6b7689; font-weight: 600; }

.m-metric[b-gpn7dh4rmj] {
    font-size: 30px; font-weight: 700; margin: 8px 0 2px;
    letter-spacing: -.5px; color: #1f2a44;
}

.m-tile.m-muted .m-metric[b-gpn7dh4rmj] { color: #aab2c5; }

.m-cap[b-gpn7dh4rmj] { font-size: 12px; color: #6b7689; }

.m-live[b-gpn7dh4rmj] {
    position: absolute; top: 13px; right: 13px;
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10.5px; color: #2fa84f; font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px;
}

.m-live .dot[b-gpn7dh4rmj] {
    width: 8px; height: 8px; border-radius: 50%;
    background: #2fa84f; position: relative;
}

.m-live .dot[b-gpn7dh4rmj]::after {
    content: ""; position: absolute; inset: -3px; border-radius: 50%;
    border: 2px solid #2fa84f; opacity: .5;
    animation: m-pulse-b-gpn7dh4rmj 1.8s infinite;
}

@keyframes m-pulse-b-gpn7dh4rmj {
    0% { transform: scale(.6); opacity: .6; }
    100% { transform: scale(1.6); opacity: 0; }
}

.m-soon[b-gpn7dh4rmj] {
    position: absolute; top: 13px; right: 13px;
    font-size: 9.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .5px; color: #6b7689;
    background: #eef1f7; padding: 2px 7px; border-radius: 10px;
}

/* Clickable drill-down tile (rendered as an anchor). */
.m-tile-link[b-gpn7dh4rmj] { text-decoration: none; cursor: pointer; transition: box-shadow .12s, transform .12s; }
.m-tile-link:hover[b-gpn7dh4rmj] {
    box-shadow: 0 3px 8px rgba(31,42,68,.14), 0 1px 3px rgba(31,42,68,.10);
    transform: translateY(-1px);
}
.m-drill[b-gpn7dh4rmj] { margin-top: auto; padding-top: 8px; font-size: 11.5px; font-weight: 600; color: #3b4f8a; }
/* /Components/Pages/Monitoring/PresenceBreakdown.razor.rz.scp.css */
.presence-chips[b-qxezb9xpky] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.presence-chip[b-qxezb9xpky] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    border: 1px solid transparent;
}

.chip-dot[b-qxezb9xpky] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #16a34a;
    animation: presence-pulse-b-qxezb9xpky 2s ease-in-out infinite;
}

@keyframes presence-pulse-b-qxezb9xpky {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

/* Engaged states — calm, informational. Idle is deliberately muted, NOT amber:
   visible-tab idle usually means deep reading, not absence. */
.chip-active[b-qxezb9xpky] {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}

.chip-reading[b-qxezb9xpky] {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.chip-idle[b-qxezb9xpky] {
    background: #f8fafc;
    color: #64748b;
    border-color: #e2e8f0;
}

/* Attention states — the ones that correlate with a student having left. */
.chip-away[b-qxezb9xpky] {
    background: #fffbeb;
    color: #b45309;
    border-color: #fde68a;
}

.chip-disconnected[b-qxezb9xpky] {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

.chip-clickable[b-qxezb9xpky] {
    cursor: pointer;
    user-select: none;
}

.chip-clickable:hover[b-qxezb9xpky] {
    filter: brightness(0.96);
}

.chip-selected[b-qxezb9xpky] {
    outline: 2px solid currentColor;
    outline-offset: 1px;
}

.presence-unavailable[b-qxezb9xpky] {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 0.375rem;
    background: #f1f5f9;
    color: #64748b;
    border: 1px dashed #cbd5e1;
    font-size: 0.78rem;
    font-style: italic;
}
/* /Components/Pages/Monitoring/PresenceRosterPanel.razor.rz.scp.css */
.presence-roster[b-tbc1jnlf1y] {
    margin-top: 0.5rem;
}

.roster-note[b-tbc1jnlf1y] {
    font-size: 0.8rem;
    color: #64748b;
    padding: 0.4rem 0;
}

.roster-unavailable[b-tbc1jnlf1y] {
    font-style: italic;
}

.roster-merging[b-tbc1jnlf1y] {
    color: #1d4ed8;
}

.roster-filtered[b-tbc1jnlf1y] {
    color: #64748b;
    font-style: italic;
}

.roster-table[b-tbc1jnlf1y] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.roster-table th[b-tbc1jnlf1y] {
    text-align: left;
    font-weight: 600;
    color: #64748b;
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.roster-table td[b-tbc1jnlf1y] {
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid #f1f5f9;
}

.roster-when[b-tbc1jnlf1y] {
    color: #94a3b8;
    white-space: nowrap;
}

.roster-status[b-tbc1jnlf1y] {
    display: inline-block;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Mirror PresenceBreakdown's palette: Idle muted, attention reserved for Away/Disconnected. */
.status-active[b-tbc1jnlf1y] { background: #ecfdf5; color: #047857; }
.status-reading[b-tbc1jnlf1y] { background: #eff6ff; color: #1d4ed8; }
.status-idle[b-tbc1jnlf1y] { background: #f8fafc; color: #64748b; }
.status-away[b-tbc1jnlf1y] { background: #fffbeb; color: #b45309; }
.status-disconnected[b-tbc1jnlf1y] { background: #fef2f2; color: #b91c1c; }

.roster-asof[b-tbc1jnlf1y] {
    margin-top: 0.35rem;
    font-size: 0.72rem;
    color: #94a3b8;
}
/* /Components/Pages/Monitoring/ScheduleDrilldown.razor.rz.scp.css */
.sd-portal[b-gw02r204jt] { padding: 4px 4px 40px; }

.sd-denied[b-gw02r204jt] { padding: 32px; color: #6b7689; }
.sd-denied h2[b-gw02r204jt] { color: #1f2a44; }

.sd-header[b-gw02r204jt] {
    display: flex; align-items: flex-start; gap: 18px;
    flex-wrap: wrap; padding: 4px 2px 16px;
}
.sd-back[b-gw02r204jt] { font-size: 12.5px; color: #3b4f8a; text-decoration: none; }
.sd-back:hover[b-gw02r204jt] { text-decoration: underline; }
.sd-header h1[b-gw02r204jt] { font-size: 20px; margin: 2px 0 0; font-weight: 700; color: #1f2a44; }
.sd-sub[b-gw02r204jt] { color: #6b7689; font-size: 13px; }

.sd-header-right[b-gw02r204jt] { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sd-scope[b-gw02r204jt], .sd-year[b-gw02r204jt] {
    font-size: 12.5px; padding: 6px 11px; border-radius: 8px;
    background: #eef1f7; border: 1px solid #e3e8f0; color: #1f2a44;
}
.sd-scope[b-gw02r204jt] { font-weight: 600; }

.sd-scopebar[b-gw02r204jt] { display: flex; align-items: center; gap: 10px; padding: 0 2px 14px; flex-wrap: wrap; }
.sd-toggle[b-gw02r204jt] { display: inline-flex; border: 1px solid #e3e8f0; border-radius: 8px; overflow: hidden; }
.sd-toggle button[b-gw02r204jt] {
    padding: 6px 14px; font-size: 12.5px; cursor: pointer;
    color: #6b7689; background: #fff; border: none; border-right: 1px solid #e3e8f0;
}
.sd-toggle button:last-child[b-gw02r204jt] { border-right: none; }
.sd-toggle button.on[b-gw02r204jt] { background: #3b4f8a; color: #fff; font-weight: 600; }
.sd-select[b-gw02r204jt] {
    font-size: 13px; padding: 6px 10px; border-radius: 8px;
    border: 1px solid #e3e8f0; background: #fff; color: #1f2a44;
}

.sd-meta[b-gw02r204jt] { font-size: 12.5px; color: #6b7689; padding: 0 2px 14px; }
.sd-meta .sd-warn[b-gw02r204jt] { color: #c9821a; font-weight: 600; }
.sd-meta .sd-gen[b-gw02r204jt] { color: #98a1b3; }

.sd-capped[b-gw02r204jt] {
    font-size: 12.5px; color: #8a5a10; background: #fdf4e3;
    border: 1px solid #f0dfb8; border-radius: 8px;
    padding: 8px 12px; margin: 0 2px 14px;
}

/* Alerts Zone — empty-but-scheduled classes. Stronger than the amber caps disclosure:
   a class booked to run against an empty roster is an anomaly, not a footnote. */
.sd-alerts[b-gw02r204jt] {
    background: #fbe9e7; border: 1px solid #f0cfc9; border-left: 4px solid #c4453b;
    border-radius: 10px; margin: 0 2px 16px; overflow: hidden;
}
.sd-alerts-head[b-gw02r204jt] {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    padding: 11px 14px; cursor: pointer; user-select: none;
}
.sd-alerts-ic[b-gw02r204jt] { font-size: 15px; color: #c4453b; align-self: center; }
.sd-alerts-title[b-gw02r204jt] { font-size: 13.5px; font-weight: 700; color: #8f2f27; }
.sd-alerts-sub[b-gw02r204jt] { font-size: 12.5px; color: #9a6560; }
.sd-alerts-caret[b-gw02r204jt] { margin-left: auto; font-size: 12px; color: #b0554d; font-weight: 600; }

.sd-alerts-list[b-gw02r204jt] {
    list-style: none; margin: 0; padding: 2px 14px 12px;
    border-top: 1px solid #f0cfc9;
}
.sd-alerts-school[b-gw02r204jt] { padding: 8px 0 6px; border-bottom: 1px solid #f4dcd8; }
.sd-alerts-school:last-child[b-gw02r204jt] { border-bottom: none; }
.sd-alerts-school-name[b-gw02r204jt] {
    font-size: 12.5px; font-weight: 600; color: #1f2a44;
    display: flex; align-items: center; gap: 8px;
}
.sd-alerts-tenant[b-gw02r204jt] {
    font-size: 11px; color: #6b7689; background: #fff;
    border: 1px solid #eadad7; border-radius: 6px; padding: 1px 6px;
}
.sd-alerts-classes[b-gw02r204jt] { list-style: none; margin: 4px 0 0; padding: 0; }
.sd-alerts-class[b-gw02r204jt] {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    padding: 3px 0; font-size: 12.5px; color: #4a3634;
}
.sd-alerts-cname[b-gw02r204jt] { font-weight: 600; color: #1f2a44; }
.sd-alerts-year[b-gw02r204jt] {
    font-size: 11px; color: #6b7689; background: #fff;
    border: 1px solid #eadad7; border-radius: 6px; padding: 1px 6px;
}
.sd-alerts-dates[b-gw02r204jt] { color: #9a6560; }

.sd-legend[b-gw02r204jt] { margin-left: 10px; display: inline-flex; gap: 12px; }
.sd-key[b-gw02r204jt] { display: inline-flex; align-items: center; gap: 5px; }
.sd-sw[b-gw02r204jt] { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.sd-sw.sched[b-gw02r204jt] { background: #1f9d6b; }
.sd-sw.unsched[b-gw02r204jt] { background: #d7dce6; }

.sd-state[b-gw02r204jt] {
    padding: 28px; text-align: center; color: #6b7689;
    background: #fff; border: 1px solid #e3e8f0; border-radius: 10px;
}
.sd-state.sd-error[b-gw02r204jt] { color: #c4453b; background: #fbe9e7; border-color: #f0d2cd; }

.sd-toolbar[b-gw02r204jt] {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 0 2px 14px;
}
.sd-search[b-gw02r204jt] {
    flex: 0 1 280px; font-size: 13px; padding: 7px 11px; border-radius: 8px;
    border: 1px solid #e3e8f0; background: #fff; color: #1f2a44;
}
.sd-search:focus[b-gw02r204jt] { outline: none; border-color: #3b4f8a; }
.sd-slider[b-gw02r204jt] { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; color: #6b7689; }
.sd-slider strong[b-gw02r204jt] { color: #1f2a44; font-variant-numeric: tabular-nums; }
.sd-slider input[type=range][b-gw02r204jt] { width: 140px; accent-color: #3b4f8a; }
.sd-tools-right[b-gw02r204jt] { margin-left: auto; display: inline-flex; gap: 8px; }
.sd-btn[b-gw02r204jt] {
    font-size: 12.5px; padding: 6px 12px; border-radius: 8px; cursor: pointer;
    border: 1px solid #e3e8f0; background: #fff; color: #3b4f8a;
}
.sd-btn:hover[b-gw02r204jt] { background: #f2f5fb; }
.sd-btn-clear[b-gw02r204jt] { color: #6b7689; }

.sd-table[b-gw02r204jt] {
    width: 100%; border-collapse: collapse; background: #fff;
    border: 1px solid #e3e8f0; border-radius: 12px; overflow: hidden; font-size: 13px;
}
.sd-table thead th[b-gw02r204jt] {
    text-align: left; padding: 11px 14px; color: #6b7689; font-weight: 600;
    font-size: 12px; text-transform: uppercase; letter-spacing: .03em;
    background: #f7f9fc; border-bottom: 1px solid #e3e8f0;
}
.sd-table th.sd-num[b-gw02r204jt], .sd-table td.sd-num[b-gw02r204jt] { text-align: right; }
.sd-table th.sd-exp[b-gw02r204jt] { width: 34px; }
.sd-table th.sd-bar-head[b-gw02r204jt] { width: 240px; }

.sd-bar[b-gw02r204jt] { display: flex; align-items: center; gap: 10px; }
.sd-bar-track[b-gw02r204jt] {
    flex: 1; height: 10px; border-radius: 5px; overflow: hidden;
    background: #d7dce6; min-width: 90px;
}
.sd-bar-fill[b-gw02r204jt] { height: 100%; background: #1f9d6b; border-radius: 5px 0 0 5px; }
.sd-bar-label[b-gw02r204jt] {
    font-size: 12px; color: #1f2a44; font-variant-numeric: tabular-nums;
    white-space: nowrap; min-width: 48px; text-align: right;
}
.sd-bar-none[b-gw02r204jt] { font-size: 12px; color: #98a1b3; font-style: italic; }

.sd-row[b-gw02r204jt] { cursor: pointer; border-top: 1px solid #eef1f7; }
.sd-row:hover[b-gw02r204jt] { background: #f7f9fc; }
.sd-row.open[b-gw02r204jt] { background: #eef1f7; }
.sd-row td[b-gw02r204jt] { padding: 10px 14px; color: #1f2a44; }
.sd-exp[b-gw02r204jt] { width: 34px; text-align: center; color: #6b7689; }
.sd-caret[b-gw02r204jt] { font-size: 11px; }
.sd-school[b-gw02r204jt] { font-weight: 600; }
.sd-tenant[b-gw02r204jt] { color: #6b7689; }
.sd-code[b-gw02r204jt] { color: #98a1b3; font-size: 11.5px; margin-left: 4px; }

.sd-detail td[b-gw02r204jt] { background: #f7f9fc; padding: 4px 14px 14px 48px; border-top: none; }
.sd-detail-head[b-gw02r204jt] {
    font-size: 11px; text-transform: uppercase; letter-spacing: .03em;
    color: #6b7689; margin: 6px 0 8px;
}
.sd-assess[b-gw02r204jt] { list-style: none; margin: 0; padding: 0; max-width: 560px; }

/* Lazy-load states for the expanded detail (loading / failed / empty). */
.sd-detail-state[b-gw02r204jt] { font-size: 12.5px; color: #6b7689; padding: 8px 0 6px; font-style: italic; }
.sd-detail-error[b-gw02r204jt] { color: #c4453b; font-style: normal; }

/* Level 2: one assessment, optionally expandable to its classes. */
.sd-assess-row[b-gw02r204jt] {
    display: flex; align-items: center; gap: 10px;
    padding: 5px 0; border-bottom: 1px dashed #e3e8f0;
}
.sd-assess-row.clickable[b-gw02r204jt] { cursor: pointer; }
.sd-assess-row.clickable:hover[b-gw02r204jt] { color: #3b4f8a; }
.sd-acaret[b-gw02r204jt] { width: 12px; font-size: 10px; color: #6b7689; flex: 0 0 12px; }
.sd-aname[b-gw02r204jt] { color: #1f2a44; flex: 1; }
.sd-acount[b-gw02r204jt] { color: #3b4f8a; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Level 3: the classes taking that assessment. */
.sd-classes[b-gw02r204jt] { padding: 2px 0 8px 22px; }
.sd-class-list[b-gw02r204jt] { list-style: none; margin: 0; padding: 0; }
.sd-class[b-gw02r204jt] {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding: 3px 0; font-size: 12.5px;
}
.sd-cname[b-gw02r204jt] { color: #4a5468; }
.sd-cstatus[b-gw02r204jt] { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.sd-cstatus .sd-dot[b-gw02r204jt] { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.sd-cstatus.sched[b-gw02r204jt] { color: #1f9d6b; }
.sd-cstatus.sched .sd-dot[b-gw02r204jt] { background: #1f9d6b; }
.sd-cstatus.unsched[b-gw02r204jt] { color: #98a1b3; }
.sd-cstatus.unsched .sd-dot[b-gw02r204jt] { background: #d7dce6; }
/* /Components/Pages/Monitoring/StaffLoginDrilldown.razor.rz.scp.css */
.sl-portal[b-gpen4qj51e] { padding: 4px 4px 40px; }

.sl-denied[b-gpen4qj51e] { padding: 32px; color: #6b7689; }
.sl-denied h2[b-gpen4qj51e] { color: #1f2a44; }

.sl-header[b-gpen4qj51e] { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; padding: 4px 2px 16px; }
.sl-back[b-gpen4qj51e] { font-size: 12.5px; color: #3b4f8a; text-decoration: none; }
.sl-back:hover[b-gpen4qj51e] { text-decoration: underline; }
.sl-header h1[b-gpen4qj51e] { font-size: 20px; margin: 2px 0 0; font-weight: 700; color: #1f2a44; }
.sl-sub[b-gpen4qj51e] { color: #6b7689; font-size: 13px; }
.sl-header-right[b-gpen4qj51e] { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sl-scope[b-gpen4qj51e], .sl-year[b-gpen4qj51e] {
    font-size: 12.5px; padding: 6px 11px; border-radius: 8px;
    background: #eef1f7; border: 1px solid #e3e8f0; color: #1f2a44;
}
.sl-scope[b-gpen4qj51e] { font-weight: 600; }

.sl-controls[b-gpen4qj51e] { display: flex; align-items: center; gap: 16px; padding: 0 2px 14px; flex-wrap: wrap; }
.sl-toggle[b-gpen4qj51e] { display: inline-flex; border: 1px solid #e3e8f0; border-radius: 8px; overflow: hidden; }
.sl-toggle button[b-gpen4qj51e] {
    padding: 6px 14px; font-size: 12.5px; cursor: pointer;
    color: #6b7689; background: #fff; border: none; border-right: 1px solid #e3e8f0;
}
.sl-toggle button:last-child[b-gpen4qj51e] { border-right: none; }
.sl-toggle button.on[b-gpen4qj51e] { background: #3b4f8a; color: #fff; font-weight: 600; }
.sl-select[b-gpen4qj51e] {
    font-size: 13px; padding: 6px 10px; border-radius: 8px;
    border: 1px solid #e3e8f0; background: #fff; color: #1f2a44;
}
.sl-window[b-gpen4qj51e] { display: inline-flex; align-items: center; gap: 8px; }
.sl-window-label[b-gpen4qj51e] { font-size: 12.5px; color: #6b7689; }

.sl-meta[b-gpen4qj51e] { font-size: 12.5px; color: #6b7689; padding: 0 2px 12px; }
.sl-meta .sl-flag-count[b-gpen4qj51e] { color: #c4453b; font-weight: 700; }
.sl-meta .sl-warn[b-gpen4qj51e] { color: #c9821a; font-weight: 600; }
.sl-meta .sl-gen[b-gpen4qj51e] { color: #98a1b3; }

.sl-toolbar[b-gpen4qj51e] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 0 2px 14px; }
.sl-search[b-gpen4qj51e] {
    flex: 0 1 280px; font-size: 13px; padding: 7px 11px; border-radius: 8px;
    border: 1px solid #e3e8f0; background: #fff; color: #1f2a44;
}
.sl-search:focus[b-gpen4qj51e] { outline: none; border-color: #3b4f8a; }
.sl-check[b-gpen4qj51e] { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #4a5468; cursor: pointer; }
.sl-tools-right[b-gpen4qj51e] { margin-left: auto; display: inline-flex; gap: 8px; }
.sl-btn[b-gpen4qj51e] {
    font-size: 12.5px; padding: 6px 12px; border-radius: 8px; cursor: pointer;
    border: 1px solid #e3e8f0; background: #fff; color: #3b4f8a;
}
.sl-btn:hover[b-gpen4qj51e] { background: #f2f5fb; }

.sl-state[b-gpen4qj51e] {
    padding: 28px; text-align: center; color: #6b7689;
    background: #fff; border: 1px solid #e3e8f0; border-radius: 10px;
}
.sl-state.sl-error[b-gpen4qj51e] { color: #c4453b; background: #fbe9e7; border-color: #f0d2cd; }

.sl-table[b-gpen4qj51e] {
    width: 100%; border-collapse: collapse; background: #fff;
    border: 1px solid #e3e8f0; border-radius: 12px; overflow: hidden; font-size: 13px;
}
.sl-table thead th[b-gpen4qj51e] {
    text-align: left; padding: 11px 14px; color: #6b7689; font-weight: 600;
    font-size: 12px; text-transform: uppercase; letter-spacing: .03em;
    background: #f7f9fc; border-bottom: 1px solid #e3e8f0;
}
.sl-table th.sl-num[b-gpen4qj51e], .sl-table td.sl-num[b-gpen4qj51e] { text-align: right; }
.sl-table th.sl-exp[b-gpen4qj51e] { width: 34px; }

.sl-row[b-gpen4qj51e] { cursor: pointer; border-top: 1px solid #eef1f7; }
.sl-row:hover[b-gpen4qj51e] { background: #f7f9fc; }
.sl-row.open[b-gpen4qj51e] { background: #eef1f7; }
.sl-row.flag[b-gpen4qj51e] { background: #fdf3f2; }
.sl-row.flag:hover[b-gpen4qj51e] { background: #fbe9e7; }
.sl-row td[b-gpen4qj51e] { padding: 10px 14px; color: #1f2a44; }
.sl-exp[b-gpen4qj51e] { width: 34px; text-align: center; color: #6b7689; }
.sl-caret[b-gpen4qj51e] { font-size: 11px; }
.sl-school[b-gpen4qj51e] { font-weight: 600; }
.sl-tenant[b-gpen4qj51e] { color: #6b7689; }
.sl-code[b-gpen4qj51e] { color: #98a1b3; font-size: 11.5px; margin-left: 4px; }

.sl-badge[b-gpen4qj51e] { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 10px; white-space: nowrap; }
.sl-badge.no[b-gpen4qj51e] { color: #c4453b; background: #fbe1de; }
.sl-badge.ok[b-gpen4qj51e] { color: #1f8a5b; background: #e3f4ec; }

.sl-detail td[b-gpen4qj51e] { background: #f7f9fc; padding: 4px 14px 14px 48px; border-top: none; }
.sl-detail-head[b-gpen4qj51e] {
    font-size: 11px; text-transform: uppercase; letter-spacing: .03em;
    color: #6b7689; margin: 6px 0 8px;
}
.sl-staff[b-gpen4qj51e] { list-style: none; margin: 0; padding: 0; max-width: 660px; }
.sl-staff-row[b-gpen4qj51e] {
    display: grid; grid-template-columns: 22px 1fr auto 96px 52px; align-items: center; gap: 14px;
    padding: 5px 0; border-bottom: 1px dashed #e3e8f0;
}
.sl-staff-row:last-child[b-gpen4qj51e] { border-bottom: none; }
.sl-plus[b-gpen4qj51e] {
    width: 18px; height: 18px; line-height: 1; padding: 0; border-radius: 5px; cursor: pointer;
    border: 1px solid #d7dce6; background: #fff; color: #3b4f8a; font-size: 13px; font-weight: 700;
}
.sl-plus:hover[b-gpen4qj51e] { background: #eef1f7; }
.sl-pname[b-gpen4qj51e] { color: #1f2a44; }
.sl-prole[b-gpen4qj51e] { font-size: 11.5px; color: #6b7689; }
.sl-prole.admin[b-gpen4qj51e] { color: #3b4f8a; font-weight: 700; }
.sl-ptime[b-gpen4qj51e] { font-size: 12px; color: #4a5468; font-variant-numeric: tabular-nums; text-align: right; }
.sl-pmethod[b-gpen4qj51e] { font-size: 11px; color: #98a1b3; text-align: right; }

/* Per-staff activity summary (the "+" drill). */
.sl-activity[b-gpen4qj51e] { padding: 4px 0 10px 34px; }
.sl-activity-msg[b-gpen4qj51e] { font-size: 12px; color: #98a1b3; font-style: italic; }
.sl-activity-head[b-gpen4qj51e] {
    font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: #6b7689; margin: 2px 0 6px;
}
.sl-activity-list[b-gpen4qj51e] { list-style: none; margin: 0; padding: 0; max-width: 460px; }
.sl-activity-list li[b-gpen4qj51e] {
    display: grid; grid-template-columns: 1fr 34px auto; align-items: center; gap: 12px;
    padding: 3px 0; font-size: 12.5px;
}
.sl-aname[b-gpen4qj51e] { color: #1f2a44; }
.sl-acount[b-gpen4qj51e] { color: #3b4f8a; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.sl-alast[b-gpen4qj51e] { color: #98a1b3; font-size: 11.5px; text-align: right; }
/* /Components/Pages/Monitoring/SystemMonitoringOverview.razor.rz.scp.css */
.m-portal[b-vbffd3zklb] { padding: 4px 4px 40px; }

.m-denied[b-vbffd3zklb] { padding: 32px; color: #6b7689; }
.m-denied h2[b-vbffd3zklb] { color: #1f2a44; }

.m-header[b-vbffd3zklb] {
    display: flex; align-items: flex-start; gap: 18px;
    flex-wrap: wrap; padding: 4px 2px 16px;
}

.m-header h1[b-vbffd3zklb] { font-size: 20px; margin: 0; font-weight: 700; color: #1f2a44; }
.m-sub[b-vbffd3zklb] { color: #6b7689; font-size: 13px; }

.m-header-right[b-vbffd3zklb] {
    margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}

.m-scope[b-vbffd3zklb], .m-year[b-vbffd3zklb], .m-refresh[b-vbffd3zklb] {
    font-size: 12.5px; padding: 6px 11px; border-radius: 8px;
    background: #eef1f7; border: 1px solid #e3e8f0; color: #1f2a44;
}
.m-scope[b-vbffd3zklb] { font-weight: 600; }
.m-refresh[b-vbffd3zklb] { color: #6b7689; }
.m-refresh.m-live[b-vbffd3zklb] { color: #1f9d6b; background: #e8f7f0; border-color: #cceadd; font-weight: 600; }

.m-scopebar[b-vbffd3zklb] { display: flex; align-items: center; gap: 10px; padding: 0 2px 14px; flex-wrap: wrap; }

.m-toggle[b-vbffd3zklb] { display: inline-flex; border: 1px solid #e3e8f0; border-radius: 8px; overflow: hidden; }
.m-toggle button[b-vbffd3zklb] {
    padding: 6px 14px; font-size: 12.5px; cursor: pointer;
    color: #6b7689; background: #fff; border: none; border-right: 1px solid #e3e8f0;
}
.m-toggle button:last-child[b-vbffd3zklb] { border-right: none; }
.m-toggle button.on[b-vbffd3zklb] { background: #3b4f8a; color: #fff; font-weight: 600; }

.m-select[b-vbffd3zklb] {
    font-size: 13px; padding: 6px 10px; border-radius: 8px;
    border: 1px solid #e3e8f0; background: #fff; color: #1f2a44;
}

.m-meta[b-vbffd3zklb] { font-size: 12.5px; color: #6b7689; padding: 0 2px 14px; }
.m-meta .m-warn[b-vbffd3zklb] { color: #c9821a; font-weight: 600; }
.m-meta .m-gen[b-vbffd3zklb] { color: #98a1b3; }

.m-state[b-vbffd3zklb] {
    padding: 28px; text-align: center; color: #6b7689;
    background: #fff; border: 1px solid #e3e8f0; border-radius: 10px;
}
.m-state.m-error[b-vbffd3zklb] { color: #c4453b; background: #fbe9e7; border-color: #f0d2cd; }

.m-band[b-vbffd3zklb] {
    background: #fff; border: 1px solid #e3e8f0; border-radius: 12px;
    padding: 18px 20px 22px; margin-bottom: 18px;
}

.m-band-head[b-vbffd3zklb] { display: flex; align-items: center; gap: 10px; margin: 2px 0 16px; }
.m-band-head h2[b-vbffd3zklb] { font-size: 15px; margin: 0; color: #1f2a44; }
.m-band-ic[b-vbffd3zklb] { font-size: 16px; }
.m-band-sub[b-vbffd3zklb] { color: #6b7689; font-size: 12.5px; }

.m-tiles[b-vbffd3zklb] {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.m-table-wrap[b-vbffd3zklb] {
    border: 1px solid #e3e8f0; border-radius: 12px; overflow: hidden; background: #fff;
}
.m-th[b-vbffd3zklb] {
    background: #f7f9fc; padding: 11px 16px; font-size: 13px; font-weight: 700;
    border-bottom: 1px solid #e3e8f0; color: #1f2a44;
}
.m-table[b-vbffd3zklb] { width: 100%; border-collapse: collapse; }
.m-table th[b-vbffd3zklb], .m-table td[b-vbffd3zklb] {
    text-align: left; padding: 10px 16px; font-size: 13px;
    border-bottom: 1px solid #e3e8f0; color: #1f2a44;
}
.m-table th[b-vbffd3zklb] {
    color: #6b7689; font-weight: 600; font-size: 11.5px;
    text-transform: uppercase; letter-spacing: .5px;
}
.m-table tbody tr:last-child td[b-vbffd3zklb] { border-bottom: none; }
.m-tenant[b-vbffd3zklb] { font-weight: 600; }
.m-code[b-vbffd3zklb] {
    font-size: 11px; color: #6b7689; background: #eef1f7;
    padding: 1px 6px; border-radius: 8px; margin-left: 6px; font-weight: 400;
}

/* Presence chip strip under the Active band tiles (Phase 3 live presence). */
.m-presence-strip[b-vbffd3zklb] {
    margin-top: 0.5rem;
    padding: 0.35rem 0.25rem 0;
}
/* /Components/Pages/OrgUnits/OrgUnitPickerPanel.razor.rz.scp.css */
/* Container inherits font size (important for scaling) */
.ou-picker[b-8d1t8gymnv] {
    line-height: 1.15; /* tighter than browser default */
    position: relative; /* anchor for the edge-mounted collapse chevron */
    /* Slides right 22px (site.css :has() rule) when the main menu collapses
       so the menu re-expand tab keeps its top-left spot — match the menu's
       own 0.3s width animation. */
    transition: margin-left 0.3s ease;
}

/* Edge-mounted "hide schools list" chevron — sits on the panel's right
   border so it's discoverable without taking a column of its own. Slim
   tab shape (14×42) — height matches the .app-nav-edge-toggle and the
   menu's LEVEL 1 YEAR-tile so all the tabs visually line up. */
.ou-picker-edge-toggle[b-8d1t8gymnv] {
    position: absolute;
    top: 0;
    right: 0;
    width: 14px;
    height: 42px;
    padding: 0;
    margin: 0;
    background: var(--admin-toggle-fill, #f1f1f1);
    border: 1px solid var(--admin-toggle-stroke, #d0d0d0);
    border-radius: 0;
    color: var(--admin-toggle-symbol, #555);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    z-index: 2;
    transition: background 0.12s;
}

.ou-picker-edge-toggle:hover[b-8d1t8gymnv] {
    background: var(--admin-surface-hover-strong, #e5e5e5);
}

/* v04: All Schools List heading is RED (ties visually to the Main Menu beside it).
   Dropdown sits 14 px below the heading. No outer column box. */
.ou-picker-header[b-8d1t8gymnv] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0 0 14px 0;
}

/* Title + optional actions on the same row. Actions slot is right-flushed. */
.ou-picker-title-row[b-8d1t8gymnv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ou-picker-title[b-8d1t8gymnv] {
    font-family: var(--admin-font);
    font-size: var(--admin-h2-size);                /* 14px */
    font-weight: var(--admin-h2-weight);            /* 700 */
    letter-spacing: var(--admin-h2-tracking);       /* 0.5px */
    color: var(--admin-red);                        /* v04: red heading */
    text-transform: uppercase;
}

/* Year qualifier appended to the heading (e.g. "ALL SCHOOLS 2026").
   Identical size/weight/colour to the heading — it reads as part of the
   label, separated only by the space. */
.ou-picker-title-year[b-8d1t8gymnv] {
    margin-left: 0.4em;
    font-weight: var(--admin-h2-weight);
}

.ou-picker-actions[b-8d1t8gymnv] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* v04: "Select Client" dropdown sits 14 px below the heading (gap on the parent
   header). Visual treatment matches a regular admin select. */
.ou-tenant-select[b-8d1t8gymnv] {
    height: var(--admin-search-box-h);              /* 30px — matches search */
    padding: 0 10px;
    border: 1px solid var(--admin-surface-border);
    border-radius: 0;
    background: var(--admin-surface-white);
    font-family: var(--admin-font);
    font-size: 13px;
    color: var(--admin-charcoal);
    box-sizing: border-box;
    flex: 1 1 auto;
    min-width: 0;
}

/* Tenant + Year selectors share a row; tenant takes the available width,
   year sits next to it in a fixed-ish slot. */
.ou-picker-selectors[b-8d1t8gymnv] {
    display: flex;
    gap: 6px;
    align-items: center;
}

.ou-year-select[b-8d1t8gymnv] {
    height: var(--admin-search-box-h);              /* 30px — matches tenant selector */
    padding: 0 8px;
    border: 1px solid var(--admin-surface-border);
    border-radius: 0;
    background: var(--admin-surface-white);
    font-family: var(--admin-font);
    font-size: 13px;
    color: var(--admin-charcoal);
    box-sizing: border-box;
    flex: 0 0 auto;
    min-width: 80px;
}

/* ── Search box ── */
/* Stefan admin-search — 200×30 intent, grey light magnifying-glass on the left.
   Width here is fluid because the picker panel controls its parent sizing; the 30px
   height and icon / font values match the shared .admin-search class in site.css. */
.ou-search-box[b-8d1t8gymnv] {
    display: flex;
    align-items: center;
    gap: 6px;
    height: var(--admin-search-box-h);   /* 30px */
    margin-bottom: 0.35rem;
    padding: 0 10px;
    border: 1px solid #d0d0d0;
    border-radius: 0;
    background: #fff;
    box-sizing: border-box;
}

.ou-search-icon[b-8d1t8gymnv] {
    font-size: 13px;
    color: #888;
    flex-shrink: 0;
}

.ou-search-input[b-8d1t8gymnv] {
    flex: 1;
    border: none;
    outline: none;
    font-size: 13px;
    padding: 0;
    min-width: 0;
    background: transparent;
    color: var(--admin-charcoal);
    font-family: var(--admin-font);
}

.ou-search-input[b-8d1t8gymnv]::placeholder {
    color: #aaa;
}

.ou-search-clear[b-8d1t8gymnv] {
    appearance: none;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 2px;
    font-size: 0.7em;
    color: #999;
    min-height: 0;
    line-height: 1;
}

.ou-search-clear:hover[b-8d1t8gymnv] {
    color: #555;
}

/* List container
   Bound to viewport height so OmniaSystem / RegionalAdmin tenants who see
   200+ schools get an internal scroller rather than the whole page growing
   taller than the window. The 200px subtraction covers the AppHeader (56)
   plus the slice top padding, picker title row, tenant/year selector row,
   the gaps between them, the search box, and a small bottom buffer. Tweak
   if any of those header chunks change height. */
.ou-list[b-8d1t8gymnv] {
    display: flex;
    flex-direction: column;
    gap: 0; /* IMPORTANT */
    padding: 0;
    margin: 0;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    overflow-x: hidden;
    /* Tighter, neutral scrollbar that doesn't fight the admin chrome. */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}

.ou-list[b-8d1t8gymnv]::-webkit-scrollbar {
    width: 8px;
}

.ou-list[b-8d1t8gymnv]::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 4px;
}

.ou-list[b-8d1t8gymnv]::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.4);
}

.ou-list[b-8d1t8gymnv]::-webkit-scrollbar-track {
    background: transparent;
}

/* Each row.
   line-height was previously 1.05 with min-height: 0, which let the
   button collapse below the font's natural box and rows overlapped each
   other vertically when the column was tall (the scroller surfaced what
   was always a layout fragility). 1.3 line-height + flex centring plus
   a real minimum height keeps every row anchored on its own line, while
   nowrap + ellipsis stops long school names blowing horizontally past
   the column and triggering a horizontal scrollbar. */
.ou-row[b-8d1t8gymnv] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 0;
    background: transparent;
    padding: 3px 4px;
    margin: 0;
    min-height: 1.4em;
    line-height: 1.3;
    font-size: 0.8em; /* scales with app font size */

    display: flex;             /* anchor text vertically without padding gymnastics */
    align-items: center;
    width: 100%;
    text-align: left;
    cursor: pointer;
    color: rgba(0,0,0,0.7);

    /* Long names truncate inside the column instead of forcing a
       horizontal scrollbar. The PipeDisplayNameFormatter already caps
       at 36 chars but a few of the longer "<TYPE> <REGION>" combos
       still overflow the narrow sidebar. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .ou-row:hover[b-8d1t8gymnv] {
        text-decoration: underline;
    }

    /* Selected row */
    .ou-row.is-selected[b-8d1t8gymnv] {
        font-weight: 700;
        color: rgba(0,0,0,0.9);
        text-decoration: underline;
    }

/* Empty / loading */
.ou-empty[b-8d1t8gymnv] {
    font-size: 0.75em;
    color: rgba(0,0,0,0.55);
    padding: 0.15em 0;
}

/* ── Compact mode (broad-scope admins, unpinned) ──
   The panel is header-height only: title row, then one 30px row holding the
   (optional) tenant + year selectors and the school combobox. The host page
   floats this over the freed list column, so a solid background is required
   — page content scrolls underneath. */
.ou-picker.is-compact[b-8d1t8gymnv] {
    background: var(--admin-white, #fff);
    padding-bottom: 6px;
}

/* Pin toggle — sits in the title-row actions slot. Unpinned (compact) shows
   the pin tilted; pinned shows it upright in the heading red so the active
   "hold the list open" state is obvious. */
.ou-pin-toggle[b-8d1t8gymnv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    min-height: 22px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0;
    color: #999;
    font-size: 12px;
    cursor: pointer;
    transition: color 0.12s, background 0.12s, border-color 0.12s;
}

.ou-pin-toggle i[b-8d1t8gymnv] {
    transform: rotate(45deg);             /* tilted = unpinned */
    transition: transform 0.15s ease;
}

.ou-pin-toggle.is-pinned[b-8d1t8gymnv] {
    color: var(--admin-red);
}

.ou-pin-toggle.is-pinned i[b-8d1t8gymnv] {
    transform: rotate(0deg);              /* upright = pinned */
}

.ou-pin-toggle:hover[b-8d1t8gymnv] {
    background: var(--admin-surface-hover, #f0f0f0);
    border-color: var(--admin-surface-border, #d0d0d0);
    color: var(--admin-charcoal);
}

/* Single compact row: [tenant?] [year?] [combobox]. Relative-positioned so
   the dropdown can anchor to the row's full width rather than just the
   (possibly narrow) combobox input. */
.ou-compact-row[b-8d1t8gymnv] {
    position: relative;
    display: flex;
    gap: 6px;
    align-items: center;
}

/* Selectors shrink to content in the compact row — the combobox gets the
   remaining width. */
.ou-tenant-select-compact[b-8d1t8gymnv] {
    flex: 0 1 auto;
    width: auto;
    max-width: 96px;
}

.ou-year-select-compact[b-8d1t8gymnv] {
    min-width: 0;
    width: auto;
    padding: 0 4px;
}

/* ── Combobox (contains-search select) ── */
.ou-combo[b-8d1t8gymnv] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    height: var(--admin-search-box-h);    /* 30px — matches the selectors */
    padding: 0 8px;
    border: 1px solid #d0d0d0;
    border-radius: 0;
    background: #fff;
    box-sizing: border-box;
}

.ou-combo:focus-within[b-8d1t8gymnv] {
    border-color: var(--admin-charcoal);
}

.ou-combo-icon[b-8d1t8gymnv] {
    font-size: 13px;
    color: #888;
    flex-shrink: 0;
}

.ou-combo-input[b-8d1t8gymnv] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    padding: 0;
    background: transparent;
    font-family: var(--admin-font);
    font-size: 13px;
    color: var(--admin-charcoal);
    text-overflow: ellipsis;
}

.ou-combo-input[b-8d1t8gymnv]::placeholder {
    color: #777;                          /* darker than a hint — it shows the current selection */
}

.ou-combo-caret[b-8d1t8gymnv] {
    appearance: none;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 2px;
    min-height: 0;
    line-height: 1;
    font-size: 10px;
    color: #888;
}

.ou-combo-caret:hover[b-8d1t8gymnv] {
    color: var(--admin-charcoal);
}

/* Dropdown overlays the page content below the compact row. Same row look
   as the full list, with a bounded internal scroller for the 200+ school
   tenants. */
.ou-combo-dropdown[b-8d1t8gymnv] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 60;
    margin-top: 2px;
    background: #fff;
    border: 1px solid #d0d0d0;
    max-height: min(420px, calc(100vh - 220px));
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}

.ou-combo-option[b-8d1t8gymnv] {
    appearance: none;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 1.6em;
    padding: 4px 10px;
    margin: 0;
    text-align: left;
    cursor: pointer;
    font-family: var(--admin-font);
    font-size: 0.8em;
    line-height: 1.3;
    color: rgba(0, 0, 0, 0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ou-combo-option:hover[b-8d1t8gymnv] {
    background: var(--admin-surface-hover, #f0f0f0);
}

.ou-combo-option.is-selected[b-8d1t8gymnv] {
    font-weight: 700;
    color: rgba(0, 0, 0, 0.9);
}

.ou-combo-empty[b-8d1t8gymnv] {
    padding: 8px 10px;
    font-size: 0.75em;
    color: rgba(0, 0, 0, 0.55);
}
/* /Components/Pages/OrgUnits/OrgUnits.razor.rz.scp.css */
.schools-slice[b-j552vtlln5] {
    display: grid;
    grid-template-columns: var(--admin-col-schools) 1fr;
    gap: 1rem;
    min-height: 0;
}

.schools-left[b-j552vtlln5] {
    min-height: 0;
    border-right: 1px solid rgba(0,0,0,0.08);
    padding-right: 0.75rem;
}

.schools-right[b-j552vtlln5] {
    min-height: 0;
}

/* ── Compact docked picker (broad-scope admins, unpinned) ──
   Same treatment as the dashboard pages: the header-height search-select
   floats in the old column position and the content keeps its place via
   the margin offset. On this simple two-column page nothing sits below
   the top row, so the offset applies to the whole right panel. */
.schools-slice.picker-docked[b-j552vtlln5] {
    position: relative;
    grid-template-columns: 1fr;
}

.schools-slice.picker-docked .schools-left[b-j552vtlln5] {
    position: absolute;
    width: var(--admin-col-schools);
    border-right: none;
    overflow: visible;
    z-index: 40;
}

.schools-slice.picker-docked .schools-right[b-j552vtlln5] {
    grid-column: 1;
    margin-left: calc(var(--admin-col-schools) + 1rem);
    min-height: var(--admin-picker-compact-h);
}
/* /Components/Pages/OrgUnits/OrgUnitSummaryPanel.razor.rz.scp.css */
.ou-summary[b-5rtyu391em] {
    padding: 0.25rem 0;
}

.ou-summary-title[b-5rtyu391em] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #0f3b4a; /* close to your legacy teal */
    margin: 0 0 0.25rem 0;
    letter-spacing: 0.02em;
}

.ou-summary-meta[b-5rtyu391em] {
    font-size: 0.75rem;
    color: rgba(0,0,0,0.55);
    line-height: 1.2;
    word-break: break-word;
}
/* /Components/Pages/School/Classes.razor.rz.scp.css */
/* Stefan v04 layout — mirrors .student-slice / .dashboard-slice so the
   schools list, sidebar toggle and content column behave consistently
   across School Dashboard, Students, Assessments, Classes, Teachers,
   Allocation. */
.school-classes-slice[b-dnttmy2ew5] {
    display: grid;
    grid-template-columns: var(--admin-col-schools) auto 1fr;
    gap: 0;
    padding: 12px 8px 8px 12px;
    transition: grid-template-columns 0.25s ease;
    font-family: var(--admin-font);
    color: var(--admin-charcoal);
}

.school-classes-left[b-dnttmy2ew5] {
    grid-column: 1;
    min-width: 0;
    overflow: hidden;
    transition: width 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
    width: var(--admin-col-schools);
    padding-right: 8px;
}

.school-classes-slice.sidebar-collapsed .school-classes-left[b-dnttmy2ew5] {
    width: 0;
    opacity: 0;
    padding-right: 0;
    pointer-events: none;
}

.school-classes-slice.sidebar-collapsed[b-dnttmy2ew5] {
    grid-template-columns: 0px auto 1fr;
}

.school-classes-slice.no-sidebar[b-dnttmy2ew5] {
    grid-template-columns: 0 0 1fr;
}

.school-classes-slice.no-sidebar .school-classes-left[b-dnttmy2ew5],
.school-classes-slice.no-sidebar .sidebar-toggle[b-dnttmy2ew5] {
    display: none;
}

/* ── Compact docked picker (broad-scope admins, unpinned) ──
   See SchoolDashboard.razor.css for the full rationale: list column released
   to content, header-height search-select floats in its old top-left spot,
   page-top-row offset keeps the school header in place. */
.school-classes-slice.picker-docked[b-dnttmy2ew5] {
    position: relative;
    grid-template-columns: 0 0 1fr;
}

.school-classes-slice.picker-docked .school-classes-left[b-dnttmy2ew5] {
    position: absolute;
    width: var(--admin-col-schools);
    overflow: visible;
    z-index: 40;
}

.school-classes-slice.picker-docked .page-top-row[b-dnttmy2ew5] {
    margin-left: var(--admin-col-schools);
    min-height: var(--admin-picker-compact-h);
}

/* 24×24 grey-frame toggle, matching SchoolDashboard / StudentDashboard. */
.sidebar-toggle[b-dnttmy2ew5] {
    grid-column: 2;
    align-self: start;
    margin-top: 2px;
    margin-right: 6px;
    /* Thin tab — matches the .app-nav-edge-toggle pattern. */
    width: 14px;
    height: 42px;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--admin-toggle-fill);
    border: 1px solid var(--admin-toggle-stroke);
    border-radius: 0;
    font-size: 12px;
    color: var(--admin-toggle-symbol);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}

.sidebar-toggle:hover[b-dnttmy2ew5] {
    background: var(--admin-surface-hover-strong);
}

.school-classes-right[b-dnttmy2ew5] {
    /* Pin to col 3. See SchoolDashboard.razor.css for the rationale. */
    grid-column: 3;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media (max-width: 900px) {
    .school-classes-slice[b-dnttmy2ew5] {
        grid-template-columns: 1fr;
    }

    .school-classes-left[b-dnttmy2ew5],
    .sidebar-toggle[b-dnttmy2ew5] {
        display: none;
    }
}

/* Stefan school-header frame — uses column-box tokens */
.school-classes-header[b-dnttmy2ew5] {
    background: #fff;
    border: 1px solid var(--admin-column-box-border);
    border-radius: 0;
    padding: 12px 16px;
}

.school-classes-header-name[b-dnttmy2ew5] {
    font-size: var(--admin-h1-size);      /* Stefan Heading 1: 18/600 */
    font-weight: var(--admin-h1-weight);
    color: var(--admin-charcoal);
}

.school-classes-empty[b-dnttmy2ew5],
.school-classes-error[b-dnttmy2ew5] {
    padding: 16px;
    color: #555;
}

.school-classes-error[b-dnttmy2ew5] {
    color: #b71c1c;
    background: #ffebee;
    border: 1px solid #ffcdd2;
    border-radius: 0;
}

/* Stefan v05: CLASSES content header — heading + year tabs inside a single
   grey-outlined box, mirrors the equivalent ALLOCATION content header. */
.classes-content-header[b-dnttmy2ew5] {
    background: var(--admin-white);
    border: 1px solid var(--admin-surface-border);
    border-radius: 0;
    padding: 12px 14px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Heading row inside the content header — fa-sharp fa-thin screen-users
   icon + Heading 2 typography, vertically centred, 14 px from the left
   edge (the .classes-content-header padding already provides that). */
.classes-content-header-title[b-dnttmy2ew5] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--admin-font);
    font-size: var(--admin-h2-size);
    font-weight: var(--admin-h2-weight);
    letter-spacing: var(--admin-h2-tracking);
    text-transform: uppercase;
    color: var(--admin-charcoal);
}

.classes-content-header-title > i[b-dnttmy2ew5] {
    font-size: 16px;
    color: var(--admin-charcoal);
}

/* Stefan year-level tab bar — 30 h, grey inactive, black active, 6px charcoal baseline, flex-share */
.school-classes-tabs[b-dnttmy2ew5] {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    /* Stefan v05: 2 px gap between tabs. */
    gap: 2px;
    border-bottom: var(--admin-tab-baseline-height) solid var(--admin-tab-baseline-color);
}

.dash-year-tab[b-dnttmy2ew5] {
    flex: 1 1 0;
    min-width: 0;
    height: var(--admin-tab-height);
    min-height: var(--admin-tab-height);                  /* override global button min-height */
    padding: 0 var(--admin-tab-pad-x);
    margin-bottom: var(--admin-tab-gap-below);
    border: none;
    background: var(--admin-year-tab-bg);
    color: var(--admin-charcoal);
    border-radius: 0;
    font-size: var(--admin-sub2-size);
    font-weight: var(--admin-sub2-weight);
    letter-spacing: var(--admin-sub2-tracking);
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
}

.dash-year-tab:hover:not(.is-selected)[b-dnttmy2ew5] {
    background: var(--admin-year-tab-bg-hover);
}

.dash-year-tab.is-selected[b-dnttmy2ew5] {
    background: var(--admin-charcoal);
    color: var(--admin-white);
    margin-bottom: 0;
    height: calc(var(--admin-tab-height) + var(--admin-tab-gap-below));
    min-height: calc(var(--admin-tab-height) + var(--admin-tab-gap-below));
}

/* Stefan v05: each chip flex-fills the remaining row width uniformly so
   the boxes don't leave a wide empty band on the right of the row. The
   chips share the column equally; FamilyName text truncates from the
   right when the column is narrow. */
.class-teacher-chips[b-dnttmy2ew5] {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.class-teacher-chip[b-dnttmy2ew5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 4px;
    padding: 2px 8px;
    flex: 1 1 0;
    min-width: 0;                                     /* allow shrink below content width */
    height: 22px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.class-teacher-chip-text[b-dnttmy2ew5] {
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    text-align: center;
}

.class-teacher-chip.is-unassigned[b-dnttmy2ew5] {
    background: #9e9e9e;
}

.class-teacher-chip.is-assigned[b-dnttmy2ew5] {
    background: #4caf50;
}

.class-teacher-chip:disabled[b-dnttmy2ew5] {
    opacity: 0.5;
    cursor: wait;
}

/* ── Row actions (Edit / Delete pencil + trash) ────────────────────────
   Replaces Syncfusion's toolbar Edit/Delete with explicit per-row icons.
   Sized to match other dashboard action buttons (26 × 26). */
.class-row-actions[b-dnttmy2ew5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.class-row-action-btn[b-dnttmy2ew5] {
    width: 26px;
    height: 26px;
    min-height: 26px;
    padding: 0;
    border: 1px solid var(--admin-surface-border, #d0d0d0);
    background: var(--admin-white, #fff);
    color: var(--admin-text-muted, #666);
    border-radius: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.class-row-action-btn:hover:not(:disabled)[b-dnttmy2ew5] {
    background: var(--admin-surface-hover, #f0f0f0);
    color: var(--admin-charcoal, #333);
}

.class-row-action-btn.is-danger:hover:not(:disabled)[b-dnttmy2ew5] {
    background: #fff6f6;
    color: var(--admin-red-active, #7b1f1f);
    border-color: var(--admin-red-active, #7b1f1f);
}

/* ── + ADD NEW CLASS — sits at the right of the content header. ───────
   Same shape as ADD NEW STUDENT for cross-page consistency. */
.btn-add-class[b-dnttmy2ew5] {
    margin-left: auto;
}
/* /Components/Pages/School/SchoolLogs.razor.rz.scp.css */
/* /school/logs — full audit-log grid (legacy Omnia2025 logs page recreation). */

.school-logs-slice[b-btn8eodc54] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    height: 100%;
    box-sizing: border-box;
}

.page-top-row[b-btn8eodc54] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    justify-content: space-between;
}

.school-logs-empty[b-btn8eodc54],
.school-logs-error[b-btn8eodc54] {
    color: #555;
    padding: 1rem;
    border: 1px dashed #bbb;
    border-radius: 6px;
}

.school-logs-error[b-btn8eodc54] {
    color: #b00;
    border-color: #b00;
}

.school-logs-toolbar[b-btn8eodc54] {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    padding: 0.5rem 0.75rem;
    background: #f4f4f4;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}

.school-logs-toolbar-group[b-btn8eodc54] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.school-logs-toolbar-label[b-btn8eodc54] {
    font-size: 0.85rem;
    color: #444;
    font-weight: 600;
}

.school-logs-quickpicks[b-btn8eodc54] {
    display: flex;
    gap: 0.25rem;
    margin-left: auto;
}

.school-logs-meta[b-btn8eodc54] {
    font-size: 0.8rem;
    color: #666;
    text-align: right;
}
/* /Components/Pages/School/StudentAllocation.razor.rz.scp.css */
/* Stefan v04 layout — mirrors .student-slice / .dashboard-slice so the
   schools list, sidebar toggle and content column behave consistently
   across School Dashboard, Students, Assessments, Classes, Allocation. */
.student-allocation-slice[b-643e5wbhog] {
    display: grid;
    grid-template-columns: var(--admin-col-schools) auto 1fr;
    gap: 0;
    padding: 12px 8px 8px 12px;
    transition: grid-template-columns 0.25s ease;
    font-family: var(--admin-font);
    color: var(--admin-charcoal);
}

.student-allocation-left[b-643e5wbhog] {
    grid-column: 1;
    min-width: 0;
    overflow: hidden;
    transition: width 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
    width: var(--admin-col-schools);
    padding-right: 8px;
}

.student-allocation-slice.sidebar-collapsed .student-allocation-left[b-643e5wbhog] {
    width: 0;
    opacity: 0;
    padding-right: 0;
    pointer-events: none;
}

.student-allocation-slice.sidebar-collapsed[b-643e5wbhog] {
    grid-template-columns: 0px auto 1fr;
}

.student-allocation-slice.no-sidebar[b-643e5wbhog] {
    grid-template-columns: 0 0 1fr;
}

.student-allocation-slice.no-sidebar .student-allocation-left[b-643e5wbhog],
.student-allocation-slice.no-sidebar .sidebar-toggle[b-643e5wbhog] {
    display: none;
}

/* ── Compact docked picker (broad-scope admins, unpinned) ──
   See SchoolDashboard.razor.css for the full rationale: list column released
   to content, header-height search-select floats in its old top-left spot,
   page-top-row offset keeps the school header in place. */
.student-allocation-slice.picker-docked[b-643e5wbhog] {
    position: relative;
    grid-template-columns: 0 0 1fr;
}

.student-allocation-slice.picker-docked .student-allocation-left[b-643e5wbhog] {
    position: absolute;
    width: var(--admin-col-schools);
    overflow: visible;
    z-index: 40;
}

.student-allocation-slice.picker-docked .page-top-row[b-643e5wbhog] {
    margin-left: var(--admin-col-schools);
    min-height: var(--admin-picker-compact-h);
}

/* 24×24 grey-frame toggle, matching SchoolDashboard / StudentDashboard. */
.sidebar-toggle[b-643e5wbhog] {
    grid-column: 2;
    align-self: start;
    margin-top: 2px;
    margin-right: 6px;
    /* Thin tab — matches the .app-nav-edge-toggle pattern. */
    width: 14px;
    height: 42px;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--admin-toggle-fill);
    border: 1px solid var(--admin-toggle-stroke);
    border-radius: 0;
    font-size: 12px;
    color: var(--admin-toggle-symbol);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}

.sidebar-toggle:hover[b-643e5wbhog] {
    background: var(--admin-surface-hover-strong);
}

.student-allocation-right[b-643e5wbhog] {
    /* Pin to col 3. See SchoolDashboard.razor.css for the rationale. */
    grid-column: 3;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.student-allocation-empty[b-643e5wbhog],
.student-allocation-error[b-643e5wbhog],
.student-allocation-warning[b-643e5wbhog] {
    padding: 16px;
    color: #555;
}

.student-allocation-error[b-643e5wbhog] {
    color: #b71c1c;
    background: #ffebee;
    border: 1px solid #ffcdd2;
    border-radius: 0;
}

.student-allocation-warning[b-643e5wbhog] {
    color: #8a6d3b;
    background: #fcf8e3;
    border: 1px solid #faebcc;
    border-radius: 0;
}

.allocation-content-header[b-643e5wbhog] {
    background: var(--admin-white);
    border: 1px solid var(--admin-surface-border);
    border-radius: 0;
    padding: 12px 14px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.allocation-content-header-title[b-643e5wbhog] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--admin-font);
    font-size: var(--admin-h2-size);
    font-weight: var(--admin-h2-weight);
    letter-spacing: var(--admin-h2-tracking);
    text-transform: uppercase;
    color: var(--admin-charcoal);
}

.allocation-content-header-title > i[b-643e5wbhog] {
    font-size: 16px;
    color: var(--admin-charcoal);
}

.student-allocation-tabs[b-643e5wbhog] {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 2px;
    border-bottom: var(--admin-tab-baseline-height) solid var(--admin-tab-baseline-color);
}

.dash-year-tab[b-643e5wbhog] {
    flex: 1 1 0;
    min-width: 0;
    height: var(--admin-tab-height);
    min-height: var(--admin-tab-height);
    padding: 0 var(--admin-tab-pad-x);
    margin-bottom: var(--admin-tab-gap-below);
    border: none;
    background: var(--admin-year-tab-bg);
    color: var(--admin-charcoal);
    border-radius: 0;
    font-size: var(--admin-sub2-size);
    font-weight: var(--admin-sub2-weight);
    letter-spacing: var(--admin-sub2-tracking);
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
}

.dash-year-tab:hover:not(.is-selected)[b-643e5wbhog] {
    background: var(--admin-year-tab-bg-hover);
}

.dash-year-tab.is-selected[b-643e5wbhog] {
    background: var(--admin-charcoal);
    color: var(--admin-white);
    margin-bottom: 0;
    height: calc(var(--admin-tab-height) + var(--admin-tab-gap-below));
    min-height: calc(var(--admin-tab-height) + var(--admin-tab-gap-below));
}

.allocation-class-chips[b-643e5wbhog] {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.allocation-class-chip[b-643e5wbhog] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 4px;
    padding: 2px 8px;
    flex: 1 1 0;
    min-width: 0;
    height: 22px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.allocation-class-chip-text[b-643e5wbhog] {
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    text-align: center;
}

.allocation-class-chip.is-unassigned[b-643e5wbhog] {
    background: #9e9e9e;
}

.allocation-class-chip.is-assigned[b-643e5wbhog] {
    background: #4caf50;
}

.allocation-class-chip:disabled[b-643e5wbhog] {
    opacity: 0.5;
    cursor: wait;
}

@media (max-width: 900px) {
    .student-allocation-slice[b-643e5wbhog] {
        grid-template-columns: 1fr;
    }

    .student-allocation-left[b-643e5wbhog],
    .sidebar-toggle[b-643e5wbhog] {
        display: none;
    }
}
/* /Components/Pages/School/Teachers.razor.rz.scp.css */
/* Stefan v04 layout — mirrors .student-slice / .dashboard-slice so the
   schools list, sidebar toggle and content column behave consistently
   across School Dashboard, Students, Assessments, Classes, Teachers,
   Allocation. */
.school-classes-slice[b-vytwdlcqct] {
    display: grid;
    grid-template-columns: var(--admin-col-schools) auto 1fr;
    gap: 0;
    padding: 12px 8px 8px 12px;
    transition: grid-template-columns 0.25s ease;
    font-family: var(--admin-font);
    color: var(--admin-charcoal);
}

.school-classes-left[b-vytwdlcqct] {
    grid-column: 1;
    min-width: 0;
    overflow: hidden;
    transition: width 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
    width: var(--admin-col-schools);
    padding-right: 8px;
}

.school-classes-slice.sidebar-collapsed .school-classes-left[b-vytwdlcqct] {
    width: 0;
    opacity: 0;
    padding-right: 0;
    pointer-events: none;
}

.school-classes-slice.sidebar-collapsed[b-vytwdlcqct] {
    grid-template-columns: 0px auto 1fr;
}

.school-classes-slice.no-sidebar[b-vytwdlcqct] {
    grid-template-columns: 0 0 1fr;
}

.school-classes-slice.no-sidebar .school-classes-left[b-vytwdlcqct],
.school-classes-slice.no-sidebar .sidebar-toggle[b-vytwdlcqct] {
    display: none;
}

/* ── Compact docked picker (broad-scope admins, unpinned) ──
   See SchoolDashboard.razor.css for the full rationale: list column released
   to content, header-height search-select floats in its old top-left spot,
   page-top-row offset keeps the school header in place. */
.school-classes-slice.picker-docked[b-vytwdlcqct] {
    position: relative;
    grid-template-columns: 0 0 1fr;
}

.school-classes-slice.picker-docked .school-classes-left[b-vytwdlcqct] {
    position: absolute;
    width: var(--admin-col-schools);
    overflow: visible;
    z-index: 40;
}

.school-classes-slice.picker-docked .page-top-row[b-vytwdlcqct] {
    margin-left: var(--admin-col-schools);
    min-height: var(--admin-picker-compact-h);
}

/* 24×24 grey-frame toggle, matching SchoolDashboard / StudentDashboard. */
.sidebar-toggle[b-vytwdlcqct] {
    grid-column: 2;
    align-self: start;
    margin-top: 2px;
    margin-right: 6px;
    /* Thin tab — matches the .app-nav-edge-toggle pattern. */
    width: 14px;
    height: 42px;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--admin-toggle-fill);
    border: 1px solid var(--admin-toggle-stroke);
    border-radius: 0;
    font-size: 12px;
    color: var(--admin-toggle-symbol);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}

.sidebar-toggle:hover[b-vytwdlcqct] {
    background: var(--admin-surface-hover-strong);
}

.school-classes-right[b-vytwdlcqct] {
    /* Pin to col 3. See SchoolDashboard.razor.css for the rationale. */
    grid-column: 3;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media (max-width: 900px) {
    .school-classes-slice[b-vytwdlcqct] {
        grid-template-columns: 1fr;
    }

    .school-classes-left[b-vytwdlcqct],
    .sidebar-toggle[b-vytwdlcqct] {
        display: none;
    }
}

.school-classes-header[b-vytwdlcqct] {
    background: #fff;
    border: 1px solid var(--admin-column-box-border);
    border-radius: 0;
    padding: 12px 16px;
}

.school-classes-header-name[b-vytwdlcqct] {
    font-size: var(--admin-h1-size);
    font-weight: var(--admin-h1-weight);
    color: var(--admin-charcoal);
}

.school-classes-empty[b-vytwdlcqct],
.school-classes-error[b-vytwdlcqct] {
    padding: 16px;
    color: #555;
}

.school-classes-error[b-vytwdlcqct] {
    color: #b71c1c;
    background: #ffebee;
    border: 1px solid #ffcdd2;
    border-radius: 0;
}

/* Stefan year-level tab bar */
.school-classes-tabs[b-vytwdlcqct] {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0;
    border-bottom: var(--admin-tab-baseline-height) solid var(--admin-tab-baseline-color);
}

.dash-year-tab[b-vytwdlcqct] {
    flex: 1 1 0;
    min-width: 0;
    height: var(--admin-tab-height);
    min-height: var(--admin-tab-height);
    padding: 0 var(--admin-tab-pad-x);
    margin-bottom: var(--admin-tab-gap-below);
    border: none;
    background: var(--admin-year-tab-bg);
    color: var(--admin-charcoal);
    border-radius: 0;
    font-size: var(--admin-sub2-size);
    font-weight: var(--admin-sub2-weight);
    letter-spacing: var(--admin-sub2-tracking);
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
}

.dash-year-tab:hover:not(.is-selected)[b-vytwdlcqct] {
    background: var(--admin-year-tab-bg-hover);
}

.dash-year-tab.is-selected[b-vytwdlcqct] {
    background: var(--admin-charcoal);
    color: var(--admin-white);
    margin-bottom: 0;
    height: calc(var(--admin-tab-height) + var(--admin-tab-gap-below));
    min-height: calc(var(--admin-tab-height) + var(--admin-tab-gap-below));
}

.class-teacher-chips[b-vytwdlcqct] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.class-teacher-chip[b-vytwdlcqct] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 0;
    border-radius: 4px;
    padding: 2px 8px;
    min-width: 48px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    color: #fff;
}

.class-teacher-chip-icon[b-vytwdlcqct] {
    font-size: 10px;
}

.class-teacher-chip-text[b-vytwdlcqct] {
    line-height: 1;
}

.class-teacher-chip.is-unassigned[b-vytwdlcqct] {
    background: #9e9e9e;
}

.class-teacher-chip.is-assigned[b-vytwdlcqct] {
    background: #4caf50;
}

.class-teacher-chip:disabled[b-vytwdlcqct] {
    opacity: 0.5;
    cursor: wait;
}

.teacher-email-cell[b-vytwdlcqct] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.teacher-email-text[b-vytwdlcqct] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Masked/revealed password cell — monospace keeps the mask dots evenly
   spaced and the revealed value legible. */
.teacher-password-text[b-vytwdlcqct] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.08em;
}

.teacher-email-copy[b-vytwdlcqct] {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    padding: 2px 6px;
    cursor: pointer;
    color: #666;
    border-radius: 3px;
    transition: background 0.15s, color 0.15s;
}

.teacher-email-copy:hover[b-vytwdlcqct] {
    background: #e8e8e8;
    color: #333;
}

.teacher-email-copy.is-copied[b-vytwdlcqct] {
    color: #4caf50;
}

/* ── No-login flag (imported placeholder teachers) ──────────────────────
   Amber pill shown in the Email cell for teachers still on the sentinel
   @examplecollege.com address (no sign-in until a real email is set). This
   pill is ALSO the marker the row-tint rule below keys on via :has(), so the
   whole row washes amber without a stale-prone RowDataBound class (see
   docs/SyncfusionComponentRules rules 1 & 2). ::deep because the pill renders
   inside SfGrid's DOM. */
[b-vytwdlcqct] .no-login-flag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    padding: 1px 7px;
    border: 1px solid #ffcf8a;
    border-radius: 10px;
    background: #fff3e0;
    color: #b26a00;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    cursor: help;
}

[b-vytwdlcqct] .no-login-flag-glyph {
    font-size: 11px;
    line-height: 1;
}

/* Subtle full-row tint for any row carrying the no-login flag. :has() lets one
   in-cell marker colour the whole <tr>, and it re-evaluates live in CSS so
   Syncfusion row-recycling can't leave it stale. */
[b-vytwdlcqct] .e-grid tr.e-row:has(.no-login-flag) > td.e-rowcell {
    background-color: #fffaf0;
}

[b-vytwdlcqct] .e-grid tr.e-row:has(.no-login-flag):hover > td.e-rowcell {
    background-color: #fff3e0;
}

/* ── One-shot credentials modal (Username / Password rows) ───────────── */
.creds-reveal-row[b-vytwdlcqct] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.creds-reveal-value[b-vytwdlcqct] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    white-space: nowrap;
    padding: 6px 10px;
    background: var(--admin-surface-soft, #f8f8f8);
    border: 1px solid var(--admin-surface-border, #d0d0d0);
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14px;
    letter-spacing: 0.04em;
    color: var(--admin-charcoal, #333);
}

/* ── Content header (matches Classes.razor pattern) ──────────────────── */
.classes-content-header[b-vytwdlcqct] {
    background: var(--admin-white, #fff);
    border: 1px solid var(--admin-surface-border, #d0d0d0);
    border-radius: 0;
    padding: 12px 14px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.classes-content-header-title[b-vytwdlcqct] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--admin-font);
    font-size: var(--admin-h2-size);
    font-weight: var(--admin-h2-weight);
    letter-spacing: var(--admin-h2-tracking);
    text-transform: uppercase;
    color: var(--admin-charcoal);
}

.classes-content-header-title > i[b-vytwdlcqct] {
    font-size: 16px;
    color: var(--admin-charcoal);
}

/* + ADD NEW STAFF — sits at the right of the content header. */
.btn-add-class[b-vytwdlcqct] {
    margin-left: auto;
}

/* Action-button group (Show Deleted + Add New Staff). The header is a column
   flex, so the buttons are wrapped in this row and the group is right-aligned
   via align-self; inside, the buttons sit side by side with a gap. */
.staff-header-actions[b-vytwdlcqct] {
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: flex-end;
}

/* Inside the group the row handles spacing — drop the per-button auto margin
   so the two buttons stay adjacent rather than splitting apart. */
.staff-header-actions .btn-add-class[b-vytwdlcqct] {
    margin-left: 0;
}

/* ── Row actions (pencil / trash, 26 × 26) — matches Classes.razor ───── */
.class-row-actions[b-vytwdlcqct] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.class-row-action-btn[b-vytwdlcqct] {
    width: 26px;
    height: 26px;
    min-height: 26px;
    padding: 0;
    border: 1px solid var(--admin-surface-border, #d0d0d0);
    background: var(--admin-white, #fff);
    color: var(--admin-text-muted, #666);
    border-radius: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.class-row-action-btn:hover:not(:disabled)[b-vytwdlcqct] {
    background: var(--admin-surface-hover, #f0f0f0);
    color: var(--admin-charcoal, #333);
}

.class-row-action-btn.is-danger:hover:not(:disabled)[b-vytwdlcqct] {
    background: #fff6f6;
    color: var(--admin-red-active, #7b1f1f);
    border-color: var(--admin-red-active, #7b1f1f);
}

/* ── Class picker inside the staff modal ────────────────────────────────
   Chip grid that flexes its rows. Selected chips switch from the grey
   "unassigned" look to the green "assigned" look used in the main grid
   (so the visual language stays consistent between page and modal). */
.staff-class-picker[b-vytwdlcqct] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--admin-surface-border, #d0d0d0);
    background: var(--admin-surface-soft, #f8f8f8);
    max-height: 180px;
    overflow-y: auto;
}

[b-vytwdlcqct] .staff-class-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--admin-surface-border, #d0d0d0);
    background: var(--admin-white, #fff);
    color: var(--admin-charcoal, #333);
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    min-height: 28px;
}

[b-vytwdlcqct] .staff-class-chip:hover:not(:disabled) {
    background: var(--admin-surface-hover, #f0f0f0);
}

[b-vytwdlcqct] .staff-class-chip.is-on {
    background: #4caf50;
    border-color: #4caf50;
    color: #fff;
}

[b-vytwdlcqct] .staff-class-chip:disabled {
    opacity: 0.6;
    cursor: wait;
}

[b-vytwdlcqct] .staff-class-chip i {
    font-size: 11px;
}

/* Tighten the modal's two-up first/last name row so the inputs don't
   crowd the labels. Inherits the .admin-form-field-row pattern. */
[b-vytwdlcqct] .admin-form-field-row {
    display: flex;
    gap: 12px;
}

[b-vytwdlcqct] .admin-form-field-row > .admin-form-field {
    flex: 1 1 0;
    min-width: 0;
}
/* /Components/Pages/Schools/Assessments.razor.rz.scp.css */
.schools-slice[b-h42c7zf5io] {
    display: grid;
    grid-template-columns: var(--admin-col-schools) 1fr;
    gap: 1rem;
    min-height: 0;
    font-family: var(--admin-font);
    color: var(--admin-charcoal);
}

.schools-left[b-h42c7zf5io] {
    min-height: 0;
    border-right: 1px solid rgba(0,0,0,0.08);
    padding-right: 0.75rem;
}

.schools-right[b-h42c7zf5io] {
    min-height: 0;
}

/* ── Compact docked picker (broad-scope admins, unpinned) ──
   Same treatment as the dashboard pages: the header-height search-select
   floats in the old column position and the content keeps its place via
   the margin offset. On this simple two-column page nothing sits below
   the top row, so the offset applies to the whole right panel. */
.schools-slice.picker-docked[b-h42c7zf5io] {
    position: relative;
    grid-template-columns: 1fr;
}

.schools-slice.picker-docked .schools-left[b-h42c7zf5io] {
    position: absolute;
    width: var(--admin-col-schools);
    border-right: none;
    overflow: visible;
    z-index: 40;
}

.schools-slice.picker-docked .schools-right[b-h42c7zf5io] {
    grid-column: 1;
    margin-left: calc(var(--admin-col-schools) + 1rem);
    min-height: var(--admin-picker-compact-h);
}
/* /Components/Pages/Students/Dashboard/StudentClassGenderCard.razor.rz.scp.css */
/* Override global min-height: 40px from site.css touch targets */
.gender-card button[b-xz7azgx0ro] {
    min-height: auto;
}

.gender-card[b-xz7azgx0ro] {
    border: 1px solid var(--admin-surface-hover-strong);
    border-radius: 0;
    background: var(--admin-white);
    transition: border-color 0.15s;
}

.gender-card.is-selected[b-xz7azgx0ro] {
    border-color: var(--admin-red-active);
    box-shadow: 0 0 0 2px rgba(123, 31, 31, 0.12);
}

/* Collapsed header */
.gender-card-head[b-xz7azgx0ro] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 12px;
    user-select: none;
}

.gender-card-head-top[b-xz7azgx0ro] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
}

.gender-card-head-top:hover[b-xz7azgx0ro] {
    background: var(--admin-surface-soft);
}

.gender-card-name-group[b-xz7azgx0ro] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.gender-card-icon[b-xz7azgx0ro] {
    font-size: 16px;
    color: var(--admin-text-muted);
    flex-shrink: 0;
}

.gender-card-title[b-xz7azgx0ro] {
    font-weight: 700;
    font-size: 14px;
    color: var(--admin-charcoal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.gender-card-head-right[b-xz7azgx0ro] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Stefan "Student List" button — dark-grey 26h × 110w, white people-group icon + ALL CAPS label */
.gender-card-total[b-xz7azgx0ro] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 110px;
    height: 26px;
    padding: 0 12px;
    background: var(--admin-btn-student-list-fill);
    border: 1px solid var(--admin-btn-student-list-stroke);
    color: var(--admin-white);
    font-size: var(--admin-sub2-size);           /* 12px */
    font-weight: var(--admin-sub2-weight);       /* 700 */
    letter-spacing: var(--admin-sub2-tracking);  /* 0.5px */
    text-transform: uppercase;
    border-radius: 0;
    box-sizing: border-box;
    white-space: nowrap;
}

.gender-card-total > i[b-xz7azgx0ro] {
    font-size: 14px;
    color: var(--admin-white);
}

/* v04 minimised state — when the card is collapsed, drop the "Students" label
   and tighten padding to 6px so the heading row breathes. */
.gender-card:not(.is-expanded) .gender-card-total[b-xz7azgx0ro] {
    min-width: 0;
    padding: 0 6px;
}
.gender-card:not(.is-expanded) .gender-card-total-label[b-xz7azgx0ro] {
    display: none;
}

/* Full-width stacked bar */
.gender-card-bar-container[b-xz7azgx0ro] {
    display: flex;
    height: 16px;
    border-radius: 2px;
    overflow: hidden;
    gap: 1px;
    width: 100%;
}

.gender-card-bar-seg[b-xz7azgx0ro] {
    min-width: 2px;
    cursor: pointer;
    transition: flex 0.2s, filter 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.gender-card-bar-seg:hover[b-xz7azgx0ro] {
    filter: brightness(1.15);
}

/* Active filter highlight — same inset border as the Dashboard / Assessment
   bar segments so the three pages read identically. */
.gender-card-bar-seg.is-selected[b-xz7azgx0ro] {
    box-shadow: inset 0 0 0 2px var(--admin-charcoal, #333);
    filter: brightness(1.1);
}

/* Hide the bar when card is expanded */
.gender-card.is-expanded .gender-card-bar-container[b-xz7azgx0ro] {
    display: none;
}

/* Toggle button */
.gender-card-toggle[b-xz7azgx0ro] {
    width: var(--admin-toggle-size);
    height: var(--admin-toggle-size);
    min-height: var(--admin-toggle-size);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--admin-toggle-fill);
    border: 1px solid var(--admin-toggle-stroke);
    border-radius: 0;
    font-size: 12px;
    color: var(--admin-toggle-symbol);                /* v04: darker grey */
    cursor: pointer;
}

.gender-card-toggle:hover[b-xz7azgx0ro] {
    background: var(--admin-surface-hover-strong);
}

/* Expanded body */
.gender-card-body[b-xz7azgx0ro] {
    padding: 0 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid var(--admin-surface-border-soft);
}

/* Teacher pills */
.gender-card-teachers[b-xz7azgx0ro] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 10px;
}

/* Stefan staff chip — 2-tier palette. RoleCode now flows through
   TeacherDisplayDTO (Phase O), so the admin tier is wired up. */
.gender-card-teacher[b-xz7azgx0ro] {
    border-radius: 999px;
    padding: 3px 10px;
    font-size: var(--admin-text4-size);      /* v03 Text 4: 11px */
    font-weight: var(--admin-text4-weight);  /* 600 */
    color: var(--admin-charcoal);
    background: var(--admin-teacher-fill);
    border: 1px solid var(--admin-teacher-stroke);
}

/* Role → colour: Teacher + unknown → grey; any admin role → gold */
.gender-card-teacher.teacher-role-schooladmin[b-xz7azgx0ro],
.gender-card-teacher.teacher-role-admin[b-xz7azgx0ro] {
    background: var(--admin-staff-admin-fill);
    border-color: var(--admin-staff-admin-stroke);
}

/* Donut chart */
.gender-card-chart[b-xz7azgx0ro] {
    height: 220px;
}

.gender-card-center[b-xz7azgx0ro] {
    text-align: center;
    font-weight: 700;
    font-size: 13px;
    color: var(--admin-text-strong);
}

/* Legend */
.gender-card-legend[b-xz7azgx0ro] {
    display: flex;
    gap: 16px;
    padding-top: 4px;
}

.gender-card-legend-item[b-xz7azgx0ro] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.gender-card-legend-swatch[b-xz7azgx0ro] {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    flex-shrink: 0;
}

.gender-card-legend-clickable[b-xz7azgx0ro] {
    cursor: pointer;
    border-radius: 2px;
    padding: 2px 4px;
    transition: background 0.15s;
}

.gender-card-legend-clickable:hover[b-xz7azgx0ro] {
    background: var(--admin-surface-hover);
}

.gender-card-legend-label[b-xz7azgx0ro] {
    font-weight: 600;
    color: var(--admin-text-muted);
}

.gender-card-legend-count[b-xz7azgx0ro] {
    color: var(--admin-text-strong);
    font-weight: 700;
}
/* /Components/Pages/Students/Dashboard/StudentClassProgressPanel.razor.rz.scp.css */
.class-progress-panel[b-lrjkzmjoo0] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.class-progress-cards[b-lrjkzmjoo0] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.class-progress-empty[b-lrjkzmjoo0] {
    color: var(--admin-text-faint);
    padding: 16px;
    font-size: 14px;
}
/* /Components/Pages/Students/Dashboard/StudentDetailPanel.razor.rz.scp.css */
.student-detail[b-kus2evqyc3] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid var(--admin-surface-border);
    border-radius: 4px;
    padding: 14px;
    background: var(--admin-white);
}

.student-detail-header[b-kus2evqyc3] {
    border-bottom: 1px solid var(--admin-surface-hover-strong);
    padding-bottom: 10px;
}

.student-detail-name-row[b-kus2evqyc3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* v04: Heading 1 — 18 / 600 / charcoal, STUDENT icon before the name. */
.student-detail-name[b-kus2evqyc3] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--admin-font);
    font-size: var(--admin-h1-size);
    font-weight: var(--admin-h1-weight);
    color: var(--admin-charcoal);
}

.student-detail-name-icon[b-kus2evqyc3] {
    font-size: 18px;
    color: var(--admin-charcoal);
}

/* Edit + Delete sit in a small action group on the far right of the
   student-detail-name-row (the row is already justify-content: space-between).
   margin-left: auto belt-and-braces in case the layout changes. */
.student-detail-header-actions[b-kus2evqyc3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

/* Edit / Delete — solid charcoal icon + visible border so they read as
   active controls, not muted/inactive. Edit hover = surface-soft,
   delete hover = red-active for the destructive cue. */
.btn-edit-student[b-kus2evqyc3],
.btn-delete-student[b-kus2evqyc3] {
    width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    background: var(--admin-white, #fff);
    border: 1px solid var(--admin-charcoal, #333);
    border-radius: 4px;
    font-size: 14px;
    color: var(--admin-charcoal, #333);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.btn-edit-student:hover[b-kus2evqyc3] {
    background: var(--admin-surface-hover, #f0f0f0);
    color: var(--admin-charcoal, #222);
    border-color: var(--admin-charcoal, #222);
}

.btn-delete-student:hover[b-kus2evqyc3] {
    background: #fff6f6;
    color: var(--admin-red-active, #7b1f1f);
    border-color: var(--admin-red-active, #7b1f1f);
}

/* v04: Text 1 — 14 / 400 / charcoal. */
.student-detail-sub[b-kus2evqyc3] {
    font-family: var(--admin-font);
    font-size: var(--admin-text1-size);
    font-weight: var(--admin-text1-weight);
    color: var(--admin-charcoal);
    margin-top: 4px;
}

/* v04: 36 px left inset on the two-column details grid. */
.student-detail-body[b-kus2evqyc3] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 36px;
}

.student-detail-row[b-kus2evqyc3] {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 10px;
    align-items: center;
    padding: 4px 0;
}

.student-detail-label[b-kus2evqyc3] {
    font-size: 12px;
    font-weight: 700;
    color: var(--admin-text-muted);
}

.student-detail-value[b-kus2evqyc3] {
    font-size: 13px;
    color: var(--admin-charcoal);
}

.mono[b-kus2evqyc3] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
}

/* Edit inputs */
.student-edit-input[b-kus2evqyc3] {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--admin-surface-border);
    border-radius: 2px;
    font-size: 13px;
    color: var(--admin-charcoal);
    background: var(--admin-white);
}

.student-edit-input:focus[b-kus2evqyc3] {
    outline: none;
    border-color: var(--admin-red-active);
    box-shadow: 0 0 0 2px rgba(123, 31, 31, 0.12);
}

.student-edit-select[b-kus2evqyc3] {
    padding: 6px 8px;
    border: 1px solid var(--admin-surface-border);
    border-radius: 2px;
    font-size: 13px;
    background: var(--admin-white);
}

.student-edit-select:focus[b-kus2evqyc3] {
    outline: none;
    border-color: var(--admin-red-active);
}

/* Class change section */
.student-detail-class-change[b-kus2evqyc3] {
    border-top: 1px solid var(--admin-surface-hover-strong);
    padding-top: 8px;
    margin-top: 4px;
}

/* Action buttons */
.student-detail-actions[b-kus2evqyc3] {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.student-detail-btn[b-kus2evqyc3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--admin-white);
    border: none;
    border-radius: 0;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    /* Stefan v05: SAVE CHANGES / CANCEL render uppercase. */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    flex: 1;
    min-height: auto;
}

.student-detail-btn:disabled[b-kus2evqyc3] {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn-save[b-kus2evqyc3] {
    background: var(--admin-status-success-fg);
}

.btn-save:hover[b-kus2evqyc3] {
    filter: brightness(0.88);
}

.btn-cancel[b-kus2evqyc3] {
    background: #616161;
}

.btn-cancel:hover[b-kus2evqyc3] {
    background: var(--admin-btn-student-list-stroke);
}

/* Assessments section */
.student-assessments-section[b-kus2evqyc3] {
    border-top: 1px solid var(--admin-surface-hover-strong);
    padding-top: 10px;
    margin-top: 6px;
}

.student-assessments-title[b-kus2evqyc3] {
    font-size: 14px;
    font-weight: 700;
    color: var(--admin-charcoal);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.student-assessments-title i[b-kus2evqyc3] {
    color: var(--admin-red-active);
}

.student-assessments-empty[b-kus2evqyc3] {
    font-size: 12px;
    color: #999;
    padding: 4px 0;
}

.student-assessments-list[b-kus2evqyc3] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Status-coloured rows. Each row carries a row-status-{status} class
   that paints a coloured status puck on the left + a bolder tinted
   background so the row reads at a glance. The puck is built with the
   .student-assessment-status-icon span (markup) — pure CSS would only
   give us a stripe. The tints are stronger than the pill backgrounds
   (the pill stays for the explicit status label). */
.student-assessment-item[b-kus2evqyc3] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--admin-surface-hover-strong);
    border-left: 6px solid var(--admin-surface-hover-strong);
    border-radius: 2px;
    background: var(--admin-surface-soft);
}

.student-assessment-text[b-kus2evqyc3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

/* 22 x 22 status puck — coloured circle with an FA glyph centred.
   Strong fill so the colour stands out against the row's lighter tint. */
.student-assessment-status-icon[b-kus2evqyc3] {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    line-height: 1;
}

.student-assessment-item.row-status-registered[b-kus2evqyc3] {
    border-left-color: var(--admin-status-info-fg);
    background: #d6e6f3;
}
.student-assessment-item.row-status-registered .student-assessment-status-icon[b-kus2evqyc3] {
    background: var(--admin-status-info-fg);
}

.student-assessment-item.row-status-started[b-kus2evqyc3] {
    border-left-color: #e65100;
    background: #ffe0b2;
}
.student-assessment-item.row-status-started .student-assessment-status-icon[b-kus2evqyc3] {
    background: #e65100;
}

.student-assessment-item.row-status-submitted[b-kus2evqyc3] {
    border-left-color: var(--admin-status-success-fg);
    background: #c8e6c9;
}
.student-assessment-item.row-status-submitted .student-assessment-status-icon[b-kus2evqyc3] {
    background: var(--admin-status-success-fg);
}

.student-assessment-item.row-status-absent[b-kus2evqyc3] {
    border-left-color: var(--admin-status-error-fg);
    background: #f5cdcd;
}
.student-assessment-item.row-status-absent .student-assessment-status-icon[b-kus2evqyc3] {
    background: var(--admin-status-error-fg);
}

.student-assessment-item.row-status-withdrawn[b-kus2evqyc3] {
    border-left-color: #757575;
    background: #e0e0e0;
}
.student-assessment-item.row-status-withdrawn .student-assessment-status-icon[b-kus2evqyc3] {
    background: #757575;
}

/* Exempt — student has been removed from this assessment via an admin
   action. Reads as muted (grey background) with a hard black left bar +
   black puck so the row stands apart from the warm-toned status colours
   (registered/started/submitted/absent). The "Exempt" pill on the right
   still uses its pink-on-black styling for the explicit label. */
.student-assessment-item.row-status-exempt[b-kus2evqyc3] {
    border-left-color: #000;
    background: #e0e0e0;
}
.student-assessment-item.row-status-exempt .student-assessment-status-icon[b-kus2evqyc3] {
    background: #000;
}

.student-assessment-item.row-status-unknown[b-kus2evqyc3] {
    border-left-color: #bdbdbd;
    background: var(--admin-column-box-bg);
}
.student-assessment-item.row-status-unknown .student-assessment-status-icon[b-kus2evqyc3] {
    background: #9e9e9e;
}

.student-assessment-name[b-kus2evqyc3] {
    font-size: 13px;
    font-weight: 600;
    color: var(--admin-charcoal);
}

.student-assessment-meta[b-kus2evqyc3] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.student-assessment-group[b-kus2evqyc3] {
    font-size: 11px;
    color: #777;
}

.student-assessment-status[b-kus2evqyc3] {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 2px;
}

.status-registered[b-kus2evqyc3] {
    background: var(--admin-status-info-bg);
    color: var(--admin-status-info-fg);
}

.status-started[b-kus2evqyc3] {
    background: #fff3e0;
    color: #e65100;
}

.status-submitted[b-kus2evqyc3] {
    background: var(--admin-status-success-bg);
    color: var(--admin-status-success-fg);
}

.status-absent[b-kus2evqyc3] {
    background: var(--admin-status-error-bg);
    color: var(--admin-status-error-fg);
}

.status-withdrawn[b-kus2evqyc3] {
    background: var(--admin-column-box-bg);
    color: #616161;
}

/* Exempt label pill — black/white to match the rest of the exempt
   theme on this panel (black bar + grey row + black puck + black
   action buttons + black grid dot). The pinky-purple pairing the
   pill carried earlier looked correct in isolation but clashed
   against the now-monochrome exempt visual language. */
.status-exempt[b-kus2evqyc3] {
    background: #000;
    color: #fff;
}

.status-unknown[b-kus2evqyc3] {
    background: var(--admin-column-box-bg);
    color: #999;
}

.student-detail-empty[b-kus2evqyc3] {
    color: var(--admin-text-faint);
    padding: 16px;
    font-size: 14px;
}

/* Student-level action row — full-width buttons stacked vertically,
   matching the DashboardStudentDetailPanel pattern (.student-detail-actions
   on the assessment-dashboard side). Stefan v04 Button 1: 34 px tall,
   icon on left, Subheading-2 type, ALL CAPS, per-button fill colour. */
.student-actions-row[b-kus2evqyc3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 10px 0 14px;
}

.student-action-btn[b-kus2evqyc3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: var(--admin-btn1-h);
    min-height: var(--admin-btn1-h);
    padding: 0 14px;
    color: var(--admin-white);
    border: none;
    border-radius: 0;
    font-family: var(--admin-font);
    font-size: var(--admin-sub2-size);
    font-weight: var(--admin-sub2-weight);
    letter-spacing: var(--admin-sub2-tracking);
    text-transform: uppercase;
    box-sizing: border-box;
    cursor: pointer;
    white-space: nowrap;
}

.student-action-btn:disabled[b-kus2evqyc3] {
    opacity: 0.55;
    cursor: not-allowed;
}

.student-action-btn i[b-kus2evqyc3] {
    font-size: 13px;
}

/* Notes — teal, deliberately distinct from every assessment-status
   colour (blue=registered, orange=started, green=submitted, red=absent,
   grey=withdrawn, black=exempt) so it doesn't read as a status action.
   Material teal 700 → 900 on hover. */
.btn-notes[b-kus2evqyc3] {
    background: #00838f;
}
.btn-notes:hover:not(:disabled)[b-kus2evqyc3] {
    background: #006064;
}

/* Exempt from All Assessments / Re-include in Assessments —
   solid black to match the rest of the exempt theme on this panel
   (black left bar + black puck on exempt assessment rows, black
   dot on exempt students in the grid). When the student is already
   exempt, the slightly-lighter "is-active" tone keeps the click
   affordance distinct from the resting state without changing hue. */
.btn-exempt-all[b-kus2evqyc3] {
    background: #000;
}
.btn-exempt-all:hover:not(:disabled)[b-kus2evqyc3] {
    background: #212121;
}
.btn-exempt-all.is-active[b-kus2evqyc3] {
    background: #212121;
}
.btn-exempt-all.is-active:hover:not(:disabled)[b-kus2evqyc3] {
    background: #000;
}

/* Left School — mid-grey in the default "Mark as Left" state.
   Conscious choice: not red (it's reversible, not destructive), not
   orange (that's reserved for Mark Absent), and now distinct from the
   black Notes button so the three primary actions on the panel each
   carry a clearly different weight. */
.btn-left-school[b-kus2evqyc3] {
    background: #757575;
}
.btn-left-school:hover:not(:disabled)[b-kus2evqyc3] {
    background: #616161;
}

/* When the student is already Left, the same button position is the
   Reinstate action — green to signal "bring them back in". */
.btn-left-school.is-active[b-kus2evqyc3] {
    background: var(--admin-status-success-fg, #1e6b30);
}
.btn-left-school.is-active:hover:not(:disabled)[b-kus2evqyc3] {
    background: #1b5e20;
}

/* ── Re-include row split (Re-include button + Download icon) ─────────
   When the student is already exempt, the Re-include button shares its
   row with a small icon-only "Download Exemption Form" button. The flex
   container occupies the slot a single full-width button would take in
   .student-actions-row (which is column-flex), keeping the vertical
   rhythm of the action stack intact.

   The button itself shrinks to make room for the 40-px icon button on
   the right; min-width:0 lets the text label truncate if a future
   re-include phrase grows longer than the available width. */
.student-action-split-row[b-kus2evqyc3] {
    display: flex;
    gap: 6px;
    width: 100%;
}
.student-action-btn-split[b-kus2evqyc3] {
    flex: 1 1 auto;
    min-width: 0;
}

/* Secondary "Download Exemption Form" button inside the Edit
   Exemption dialog's FooterExtras slot. Sits on the left of the
   footer (the standard Cancel + Save stay on the right). Styled to
   look like a primary modal button but with the exempt-theme black
   so it's clearly the "exempt action" not a generic save — visually
   matches the black Re-include / Exempt-All buttons elsewhere on the
   panel. */
.btn-download-exemption-secondary[b-kus2evqyc3] {
    padding: 8px 20px;
    border-radius: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    cursor: pointer;
    min-height: 32px;
    border: 1px solid transparent;
    background: #000;
    color: var(--admin-white, #fff);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.btn-download-exemption-secondary:hover:not(:disabled)[b-kus2evqyc3] {
    background: #212121;
}
.btn-download-exemption-secondary:disabled[b-kus2evqyc3] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Icon-only secondary button to the right of the Re-include button.
   Fixed 40 px square to match the Stefan v04 Button-1 height (34 px)
   visually — slightly wider than tall keeps the icon centered without
   crowding. Solid black to match Re-include's active state (and the
   rest of the exempt theme: black left bar, black puck, black grid
   dot). Tooltip carries the affordance label. */
.student-action-icon-btn[b-kus2evqyc3] {
    flex: 0 0 auto;
    width: 40px;
    height: var(--admin-btn1-h);
    min-height: var(--admin-btn1-h);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #212121;
    color: var(--admin-white);
    border: none;
    border-radius: 0;
    cursor: pointer;
    font-size: 14px;
    box-sizing: border-box;
}
.student-action-icon-btn:hover:not(:disabled)[b-kus2evqyc3] {
    background: #000;
}
.student-action-icon-btn:disabled[b-kus2evqyc3] {
    opacity: 0.55;
    cursor: not-allowed;
}


/* Exempt-All reason textarea — inherits .admin-form-input styling via
   the shared class, but adds vertical-only resize and a comfortable
   minimum height. ::deep is required because .admin-form-input lives
   on the AdminFormModal's slotted content, not inside this component's
   isolated scope. */
[b-kus2evqyc3] .exempt-reason-textarea {
    resize: vertical;
    min-height: 80px;
    max-height: 240px;
    line-height: 1.4;
    font-family: inherit;
    padding: 6px 8px;
}

/* Password row — value text + eye toggle + book-copy buttons. */
.student-detail-password[b-kus2evqyc3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.password-value-text[b-kus2evqyc3] {
    font-family: var(--admin-font-mono, ui-monospace, SFMono-Regular, monospace);
    letter-spacing: 0.5px;
}

.password-unavailable[b-kus2evqyc3] {
    color: var(--admin-text-muted, #999);
    font-style: italic;
}

.password-action-btn[b-kus2evqyc3] {
    background: transparent;
    border: 0;
    padding: 2px 6px;
    cursor: pointer;
    color: #666;
    border-radius: 3px;
    min-height: auto;
    transition: background 0.15s, color 0.15s;
}

.password-action-btn:hover[b-kus2evqyc3] {
    background: var(--admin-surface-hover, #e8e8e8);
    color: var(--admin-charcoal, #333);
}

.password-action-btn.is-copied[b-kus2evqyc3] {
    color: #4caf50;
}

.password-action-btn i[b-kus2evqyc3] {
    font-size: 13px;
}

/* Unicode glyph used by the password copy button. Matches the size and
   weight of the `<i>`-based eye icon so the two action buttons sit at
   the same optical height. */
.password-copy-glyph[b-kus2evqyc3] {
    font-size: 14px;
    line-height: 1;
    display: inline-block;
}

/* Clear data button (inline on assessment row) */
.btn-clear-data[b-kus2evqyc3] {
    background: transparent;
    border: 1px solid var(--admin-status-error-fg);
    border-radius: 2px;
    font-size: 11px;
    font-weight: 600;
    color: var(--admin-status-error-fg);
    cursor: pointer;
    padding: 2px 8px;
    min-height: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    transition: background 0.15s, color 0.15s;
}

.btn-clear-data:hover[b-kus2evqyc3] {
    background: var(--admin-status-error-fg);
    color: var(--admin-white);
}

/* Confirmation dialog */
.clear-data-backdrop[b-kus2evqyc3] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.clear-data-modal[b-kus2evqyc3] {
    background: var(--admin-white);
    border-radius: 4px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    width: 420px;
    max-width: 90vw;
}

.clear-data-header[b-kus2evqyc3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--admin-surface-hover-strong);
}

.clear-data-title[b-kus2evqyc3] {
    font-weight: 700;
    font-size: 15px;
    color: var(--admin-status-error-fg);
}

.clear-data-close[b-kus2evqyc3] {
    background: transparent;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #999;
    min-height: auto;
    padding: 0 4px;
}

.clear-data-close:hover[b-kus2evqyc3] {
    color: var(--admin-text-strong);
}

.clear-data-body[b-kus2evqyc3] {
    padding: 16px;
    font-size: 13px;
    color: var(--admin-text-strong);
    line-height: 1.5;
}

.clear-data-body p[b-kus2evqyc3] {
    margin: 0 0 8px;
}

.clear-data-warning[b-kus2evqyc3] {
    color: var(--admin-status-error-fg);
    font-weight: 700;
    font-size: 12px;
}

.clear-data-footer[b-kus2evqyc3] {
    display: flex;
    gap: 8px;
    padding: 10px 16px 14px;
    justify-content: flex-end;
}

.clear-data-btn[b-kus2evqyc3] {
    border: none;
    border-radius: 2px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: auto;
}

.btn-confirm-clear[b-kus2evqyc3] {
    background: var(--admin-status-error-fg);
    color: var(--admin-white);
}

.btn-confirm-clear:hover[b-kus2evqyc3] {
    filter: brightness(0.85);
}

.btn-confirm-cancel[b-kus2evqyc3] {
    background: var(--admin-surface-hover-strong);
    color: var(--admin-text-strong);
}

.btn-confirm-cancel:hover[b-kus2evqyc3] {
    background: #bdbdbd;
}

/* ── Notes modal tabs (Current / History) ─────────────────────────────
   Only rendered when the user has StudentNotes_ViewHistory; otherwise
   the FormBody collapses to a single-pane view (no tabs at all). */
.notes-tabs[b-kus2evqyc3] {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--admin-surface-border, #d0d0d0);
    margin-bottom: 12px;
}

.notes-tab[b-kus2evqyc3] {
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 8px 14px;
    margin: 0;
    font-family: var(--admin-font);
    font-size: 13px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.55);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.notes-tab:hover[b-kus2evqyc3] {
    color: var(--admin-charcoal, #333);
}

.notes-tab.is-active[b-kus2evqyc3] {
    color: var(--admin-red, #8b0000);
    border-bottom-color: var(--admin-red, #8b0000);
}

.notes-tab-count[b-kus2evqyc3] {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.6);
}

.notes-tab.is-active .notes-tab-count[b-kus2evqyc3] {
    background: var(--admin-red, #8b0000);
    color: #fff;
}

/* ── History tab body ──────────────────────────────────────────────── */
.notes-history-list[b-kus2evqyc3] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 50vh;
    overflow-y: auto;
    padding-right: 4px;
}

.notes-history-entry[b-kus2evqyc3] {
    border-left: 3px solid var(--admin-surface-border, #d0d0d0);
    padding: 4px 0 4px 10px;
}

.notes-history-meta[b-kus2evqyc3] {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.55);
    margin-bottom: 4px;
}

.notes-history-meta-sep[b-kus2evqyc3] {
    margin: 0 6px;
    color: rgba(0, 0, 0, 0.25);
}

.notes-history-body[b-kus2evqyc3] {
    font-size: 13px;
    color: var(--admin-charcoal, #333);
    white-space: pre-wrap;
    word-wrap: break-word;
}

.notes-history-empty[b-kus2evqyc3] {
    color: rgba(0, 0, 0, 0.4);
}
/* /Components/Pages/Students/Dashboard/StudentHeaderPanel.razor.rz.scp.css */
/* Override global min-height: 40px from site.css touch targets */
.student-header-panel button[b-zxof37quxw] {
    min-height: auto;
}

.student-header-panel[b-zxof37quxw] {
    background: var(--admin-white);
    border: 1px solid var(--admin-surface-border);
    border-radius: 0;
    /* Stefan v05: 14 px padding from the left edge of the content header
       (matches the spec). 12 px on top/bottom keeps the row visually
       comfortable next to the column box border. */
    padding: 12px 14px;
    margin-bottom: 12px;
}

.student-header-row[b-zxof37quxw] {
    display: flex;
    align-items: center;                                  /* v05: centre title + tabs vertically */
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    container-type: inline-size;
    container-name: student-header-row;
}

/* Stefan v05: STUDENTS heading uses Heading 2 tokens (14 / 700 / charcoal,
   uppercase, 0.5 px letter-spacing) instead of the previous 20 px ad-hoc
   styling. Icon stays charcoal (not red) per the v05 spec. */
.student-header-title[b-zxof37quxw] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--admin-font);
    font-size: var(--admin-h2-size);                      /* 14px */
    font-weight: var(--admin-h2-weight);                  /* 700 */
    letter-spacing: var(--admin-h2-tracking);             /* 0.5px */
    text-transform: uppercase;
    color: var(--admin-charcoal);
}

.student-header-title i[b-zxof37quxw] {
    color: var(--admin-charcoal);
    font-size: 16px;
}

.dash-control[b-zxof37quxw] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* Fill remaining row width after the title so the tabs have room to share
       equally, matching /school/assessments/dashboard. Capped so tabs don't
       become absurdly wide on ultra-wide viewports. */
    flex: 1 1 auto;
    min-width: 0;
    max-width: 900px;
}

.dash-label[b-zxof37quxw] {
    font-size: 11px;
    font-weight: 700;
    color: var(--admin-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Year-level tabs (Stefan spec — matches /school/assessments/dashboard) ── */
.dash-year-tabs[b-zxof37quxw] {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    /* Stefan v05: 2 px gap between tabs to break the visual run-on. */
    gap: 2px;
    border-bottom: var(--admin-tab-baseline-height) solid var(--admin-tab-baseline-color); /* 6px charcoal */
}

.dash-year-tab[b-zxof37quxw] {
    flex: 1 1 0;                                                             /* equal share — responsive */
    min-width: 0;
    height: var(--admin-tab-height);                                         /* 30px */
    min-height: var(--admin-tab-height);                                     /* beat global button min-height */
    padding: 0 var(--admin-tab-pad-x);                                       /* 20px l/r */
    margin-bottom: var(--admin-tab-gap-below);                               /* 1px gap above baseline */
    border: none;
    background: var(--admin-year-tab-bg);
    color: var(--admin-charcoal);
    border-radius: 0;
    font-size: var(--admin-sub2-size);
    font-weight: var(--admin-sub2-weight);
    letter-spacing: var(--admin-sub2-tracking);
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.15s, color 0.15s;
}

.dash-year-tab:hover:not(.is-selected)[b-zxof37quxw] {
    background: var(--admin-year-tab-bg-hover);
}

.dash-year-tab.is-selected[b-zxof37quxw] {
    background: var(--admin-charcoal);                                       /* Stefan: active = BLACK */
    color: var(--admin-white);
    margin-bottom: 0;
    height: calc(var(--admin-tab-height) + var(--admin-tab-gap-below));      /* 31px to baseline */
    min-height: calc(var(--admin-tab-height) + var(--admin-tab-gap-below));
}

/* Short/full label visibility — default = full ("YEAR 3") */
.dash-year-tab .tab-short[b-zxof37quxw] { display: none; }
.dash-year-tab .tab-full[b-zxof37quxw]  { display: inline; }

/* When the header row gets tight, collapse per-tab text to just the number / "ALL". */
@container student-header-row (max-width: 640px) {
    .dash-year-tab .tab-full[b-zxof37quxw]  { display: none; }
    .dash-year-tab .tab-short[b-zxof37quxw] { display: inline; }
    .dash-year-tab[b-zxof37quxw] { padding: 0 6px; }
}

@media (max-width: 900px) {
    .student-header-row[b-zxof37quxw] {
        flex-direction: column;
        align-items: stretch;
    }

    .dash-control[b-zxof37quxw] {
        max-width: none;
    }
}

/* "Show Left School" toggle — sits to the right of the year-level tabs.
   Inactive: outline pill with the eye-slash icon. Active: filled
   charcoal pill with the eye icon, signalling "you're seeing them". */
.show-left-control[b-zxof37quxw] {
    flex: 0 0 auto;
    margin-left: auto;
}

.show-left-toggle[b-zxof37quxw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--admin-tab-height);
    padding: 0 12px;
    background: transparent;
    color: var(--admin-charcoal);
    border: 1px solid var(--admin-surface-border, #d0d0d0);
    border-radius: 4px;
    font-size: var(--admin-sub2-size);
    font-weight: var(--admin-sub2-weight);
    letter-spacing: var(--admin-sub2-tracking);
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.show-left-toggle:hover:not(:disabled)[b-zxof37quxw] {
    background: var(--admin-surface-hover, #f0f0f0);
    border-color: var(--admin-charcoal, #333);
}

.show-left-toggle.is-on[b-zxof37quxw] {
    background: var(--admin-charcoal, #212121);
    color: #fff;
    border-color: var(--admin-charcoal, #212121);
}

.show-left-toggle.is-on:hover[b-zxof37quxw] {
    background: #000;
}

.show-left-toggle i[b-zxof37quxw] {
    font-size: 12px;
}
/* /Components/Pages/Students/Dashboard/StudentListPanel.razor.rz.scp.css */
/* Override global min-height: 40px from site.css touch targets */
.student-grid-panel button[b-s4ez77e4ir] {
    min-height: auto;
}

/* "Use Year N default" — small quiet link-button under the blank DOB field. */
.student-dob-default-btn[b-s4ez77e4ir] {
    align-self: flex-start;
    margin-top: 4px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--admin-accent, #0d6efd);
    background: transparent;
    border: 1px solid var(--admin-accent, #0d6efd);
    border-radius: 4px;
    cursor: pointer;
}

.student-dob-default-btn:hover[b-s4ez77e4ir] {
    background: var(--admin-accent, #0d6efd);
    color: #fff;
}

.student-dob-default-btn:disabled[b-s4ez77e4ir] {
    opacity: 0.5;
    cursor: default;
}

.student-grid-panel[b-s4ez77e4ir] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
}

.student-grid-header[b-s4ez77e4ir] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--admin-surface-hover-strong);
}

/* Title stays on a single line — truncates with ellipsis if the
   column is too narrow rather than splitting "3 Green – 10 Students"
   into three lines. The action group below drops onto its own
   second row at narrow widths (via flex-wrap on the parent) which
   is the right escape hatch — keeps both elements legible. */
.student-grid-title[b-s4ez77e4ir] {
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.student-grid-title > i[b-s4ez77e4ir] {
    flex: 0 0 auto;
}

/* Small grey suffix on the header — "(+N left)" — appears only when
   Show Left School is on. Smaller and lighter than the main count so
   it reads as supplementary info, not part of the headline number. */
.student-grid-left-note[b-s4ez77e4ir] {
    font-size: 12px;
    font-weight: 500;
    color: var(--admin-text-muted, #888);
    margin-left: 2px;
}

/* Header actions group — Show Left School toggle (when applicable) +
   Add New Student. Both sit on the right of the header row, separated
   by a small gap so they read as related-but-distinct controls. At
   narrow widths the whole group wraps to a new row beneath the title
   rather than squishing it. */
.student-grid-header-actions[b-s4ez77e4ir] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Stefan v05: + ADD NEW STUDENT button — BUTTON 3, black fill, white text + icon. */
.btn-add-student[b-s4ez77e4ir] {
    background: var(--admin-charcoal);
    color: var(--admin-white);
    border: 1px solid var(--admin-charcoal);
    transition: background 0.15s, border-color 0.15s;
}

.btn-add-student > i[b-s4ez77e4ir] {
    color: var(--admin-white);
}

.btn-add-student:hover:not(:disabled)[b-s4ez77e4ir] {
    background: #000;
    border-color: #000;
}

/* SHOW / HIDE LEFT SCHOOL toggle — sits to the left of ADD NEW STUDENT
   when there are any left-school students in scope. Outline style by
   default (off), filled charcoal when active (on) — same visual
   vocabulary as other admin toggles. Text-only label flips between
   SHOW and HIDE so the current state is unambiguous. */
.show-left-toggle[b-s4ez77e4ir] {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 10px;
    background: transparent;
    color: var(--admin-charcoal);
    border: 1px solid var(--admin-surface-border, #d0d0d0);
    border-radius: 0;
    font-size: var(--admin-sub2-size);
    font-weight: var(--admin-sub2-weight);
    letter-spacing: var(--admin-sub2-tracking);
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.show-left-toggle:hover[b-s4ez77e4ir] {
    background: var(--admin-surface-hover, #f0f0f0);
    border-color: var(--admin-charcoal);
}

.show-left-toggle.is-on[b-s4ez77e4ir] {
    background: var(--admin-charcoal);
    color: var(--admin-white);
    border-color: var(--admin-charcoal);
}

.show-left-toggle.is-on:hover[b-s4ez77e4ir] {
    background: #000;
}

/* Gender indicator in grid cells — use !important to override
   the selected-row colour (#333) applied by Syncfusion */
.gender-indicator[b-s4ez77e4ir] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.gender-male[b-s4ez77e4ir] {
    color: #42a5f5 !important;
}

.gender-female[b-s4ez77e4ir] {
    color: #ef5350 !important;
}

.gender-other[b-s4ez77e4ir] {
    color: #9e9e9e !important;
}

/* Exempt-from-all-assessments indicator — small black dot rendered
   alongside the gender icon. Vertically centred so it shares a
   baseline with the Family Name / Given Name text on the same row,
   sitting just to the right of the gender glyph with a small gap.
   CSS-only (no FA icon) — the row recycling + FA autoReplaceSvg
   trap that crashed earlier icon attempts doesn't apply to a plain
   <span> with a background colour. */
.gender-cell-wrap[b-s4ez77e4ir] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding-left: 4px;
    width: 100%;
    height: 100%;
}
.exempt-dot[b-s4ez77e4ir] {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #000;
    cursor: help;
}

/* Syncfusion toolbar / search overrides */
[b-s4ez77e4ir] .e-grid .e-toolbar {
    background: var(--admin-surface-soft);
    border-bottom: 1px solid var(--admin-surface-hover-strong);
    min-height: 36px;
    padding: 2px 4px;
}

[b-s4ez77e4ir] .e-grid .e-toolbar .e-search {
    max-width: 100%;
    width: 100%;
}

[b-s4ez77e4ir] .e-grid .e-toolbar .e-search .e-input {
    font-size: 13px;
}

/* Syncfusion grid overrides */
[b-s4ez77e4ir] .e-grid {
    border: none !important;
    font-size: 13px;
}

[b-s4ez77e4ir] .e-grid .e-headercell {
    font-weight: 700;
    font-size: 12px;
    background: var(--admin-column-box-bg);
}

/* Selected row: Stefan dark-red tint (matches assessments dashboard). */
[b-s4ez77e4ir] .e-grid .e-row.e-active .e-rowcell,
[b-s4ez77e4ir] .e-grid .e-row.e-active:hover .e-rowcell {
    background-color: var(--admin-row-selected-bg) !important;
    color: var(--admin-row-selected-fg) !important;
}

/* v04: tighten horizontal padding so the Family Name column has more visible
   width. Internal cell padding is 7 px so the gap between adjacent cells is
   14 px (7 + 7); the first cell gets an extra 7 px left so the grid edge →
   status-icon distance is also 14 px. Vertical padding stays 6 px. */
[b-s4ez77e4ir] .e-grid .e-rowcell,
[b-s4ez77e4ir] .e-grid .e-headercell {
    padding: 6px 7px;
}
[b-s4ez77e4ir] .e-grid .e-rowcell:first-child,
[b-s4ez77e4ir] .e-grid .e-headercell:first-child {
    padding-left: 14px;
}

/* Gender icon column — a single Unicode glyph fits in ~36px. Drop the
   horizontal padding to a hair (just enough to keep the glyph off the
   column rules) so the column doesn't waste width that Family / Given
   Name need. CustomAttributes adds the `gender-icon-cell` class to both
   header and row cells in this column. */
[b-s4ez77e4ir] .e-grid .e-rowcell.gender-icon-cell,
[b-s4ez77e4ir] .e-grid .e-headercell.gender-icon-cell {
    padding-left: 2px;
    padding-right: 2px;
}

/* Gender filter badge */
.gender-filter-badge[b-s4ez77e4ir] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 6px;
    /* Dimension-agnostic chip: neutral fill + a 1px accent border whose colour
       is set inline from the active category (StudentDimensionView). */
    background: var(--admin-column-box-bg);
    color: var(--admin-charcoal);
    border: 1px solid var(--admin-charcoal);
}

/* Small colour chip echoing the clicked segment's colour (set inline). */
.gender-filter-swatch[b-s4ez77e4ir] {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    flex: 0 0 auto;
}

.gender-filter-male[b-s4ez77e4ir] {
    background: var(--admin-status-info-bg);
    color: var(--admin-status-info-fg);
}

.gender-filter-female[b-s4ez77e4ir] {
    background: #fce4ec;
    color: var(--admin-red-active);
}

.gender-filter-other[b-s4ez77e4ir] {
    background: var(--admin-column-box-bg);
    color: #616161;
}

.gender-filter-clear[b-s4ez77e4ir] {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 10px;
    color: inherit;
    padding: 0 2px;
    min-height: auto;
    line-height: 1;
    opacity: 0.7;
}

.gender-filter-clear:hover[b-s4ez77e4ir] {
    opacity: 1;
}

.student-grid-empty[b-s4ez77e4ir] {
    color: var(--admin-text-faint);
    padding: 16px;
    font-size: 14px;
}

/* ── Per-row Edit / Delete icons ───────────────────────────────────────
   Replaces the v04 inline-edit Syncfusion command column. Sized 26x26
   to match Class row actions and dashboard schedule-buttons. */
.student-row-actions[b-s4ez77e4ir] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.student-row-action-btn[b-s4ez77e4ir] {
    width: 26px;
    height: 26px;
    min-height: 26px;
    padding: 0;
    border: 1px solid var(--admin-surface-border, #d0d0d0);
    background: var(--admin-white, #fff);
    color: var(--admin-text-muted, #666);
    border-radius: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.student-row-action-btn:hover:not(:disabled)[b-s4ez77e4ir] {
    background: var(--admin-surface-hover, #f0f0f0);
    color: var(--admin-charcoal, #333);
}

.student-row-action-btn.is-danger:hover:not(:disabled)[b-s4ez77e4ir] {
    background: #fff6f6;
    color: var(--admin-red-active, #7b1f1f);
    border-color: var(--admin-red-active, #7b1f1f);
}

/* Left-school cell wrapper — applied to the Family/Given/Class cell
   templates when StudentGridItem.HasLeftSchool is true. Visible only
   when the "Show Left School" header toggle is on; otherwise these
   rows are filtered out server-side before reaching the grid.
   Earlier RowDataBound and cell-template attempts crashed Blazor's
   renderer; root cause was eventually traced to FA Kit's
   autoReplaceSvg colliding with conditional `<i>` elements in nearby
   buttons (not the cell templates themselves) — see the comment in
   StudentListPanel.razor over the Family Name GridColumn. */
.row-left-school-cell[b-s4ez77e4ir] {
    text-decoration: line-through;
    color: var(--admin-text-muted, #888);
    font-style: italic;
}

/* Class cell skips the strikethrough (a line through "3A" reads as
   noise on a short string) and leans on opacity/colour to signal
   "no longer at this school". */
.row-left-school-cell-muted[b-s4ez77e4ir] {
    text-decoration: none;
    opacity: 0.6;
}
/* /Components/Pages/Students/Start.razor.rz.scp.css */
.student-landing[b-n39mmwpgos] {
    min-height: 100vh;
    background: #dedede;
    color: #111;
    padding: 0;
}

.student-legacy-strip[b-n39mmwpgos] {
    height: 50px;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: #55585b;
    color: #fff;
    padding: 0 1rem;
}

.student-legacy-tab[b-n39mmwpgos] {
    min-width: 120px;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 700;
    padding: 0.3rem 0.6rem;
}

.student-legacy-tab-active[b-n39mmwpgos] {
    background: var(--player-accent, #1cb6c9);
    color: #13232b;
}

.student-legacy-title[b-n39mmwpgos] {
    text-transform: uppercase;
    font-size: 1.7rem;
    letter-spacing: 0.01em;
    font-weight: 400;
    flex: 1;
}

.student-legacy-tools[b-n39mmwpgos] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.student-legacy-tools button[b-n39mmwpgos] {
    width: 2rem;
    height: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: #0d0d0d;
    color: #fff;
    padding: 0;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.student-legacy-tools button:hover[b-n39mmwpgos] {
    background: #444;
}

.student-tool-hidden[b-n39mmwpgos] {
    display: none;
}

.student-landing-loading[b-n39mmwpgos],
.student-landing-error[b-n39mmwpgos] {
    max-width: 720px;
    margin: 0 auto;
    padding: 2rem 0;
}

.student-landing-layout[b-n39mmwpgos] {
    display: flex;
    gap: 2rem;
    max-width: 1100px;
    margin: 2.2rem auto 0;
    padding: 0 1rem 2rem;
}

.student-landing-sidebar[b-n39mmwpgos] {
    flex: 0 0 220px;
    background: #55585b;
    border-radius: 0;
    overflow: hidden;
    align-self: flex-start;
}

.sidebar-header[b-n39mmwpgos] {
    padding: 0.75rem 1rem;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.sidebar-item[b-n39mmwpgos] {
    display: block;
    width: 100%;
    padding: 0.65rem 1rem;
    border: none;
    background: transparent;
    color: #fff;
    text-align: left;
    font-size: 0.95rem;
    cursor: pointer;
}

.sidebar-item:hover[b-n39mmwpgos],
.sidebar-item-active[b-n39mmwpgos] {
    background: var(--player-accent, #1cb6c9);
    color: #111;
    font-weight: 600;
}

.student-landing-main[b-n39mmwpgos] {
    flex: 1;
    min-width: 0;
}

.student-landing-title[b-n39mmwpgos] {
    font-size: clamp(2.1em, 3vw, 3.2em);
    font-weight: 700;
    margin: 0 0 0.2rem;
}

.student-landing-student-name[b-n39mmwpgos] {
    font-size: clamp(1.6em, 2.2vw, 2.3em);
    margin: 1.1rem 0 1.6rem;
    font-weight: 400;
}

.student-landing-subtitle[b-n39mmwpgos] {
    font-size: 1.95em;
    margin: 0 0 1.6rem;
    color: #1f1f1f;
}

.assessment-card-list[b-n39mmwpgos] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    max-width: 860px;
}

.assessment-card[b-n39mmwpgos] {
    display: grid;
    grid-template-columns: 180px 1fr;
    align-items: center;
    gap: 1.2rem;
}

.assessment-card-info[b-n39mmwpgos] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.assessment-card-name[b-n39mmwpgos] {
    font-size: 1.25em;
    font-weight: 700;
    color: #111;
    line-height: 1.15;
}

.assessment-card-window[b-n39mmwpgos] {
    display: flex;
    gap: 1rem;
    font-size: 1.1em;
    opacity: 0.7;
}

.assessment-card-action[b-n39mmwpgos] {
    flex: 0 0 auto;
}

.assessment-btn[b-n39mmwpgos] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 40px;
    border: 2px solid #0a0a0a;
    border-radius: 0;
    font-weight: 700;
    font-size: 1.3em;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    white-space: nowrap;
}

.assessment-btn-start[b-n39mmwpgos] {
    /* Match the ASSESS tab accent (--player-accent) instead of solid black. */
    background: var(--player-accent, #1cb6c9);
    color: #13232b;
    border-color: var(--player-accent, #1cb6c9);
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.1s ease;
}

.assessment-btn-start:hover[b-n39mmwpgos] {
    filter: brightness(0.92);
}

.assessment-btn-review[b-n39mmwpgos] {
    background: #050505;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}

.assessment-btn-review:hover[b-n39mmwpgos] {
    background: #333;
}

.assessment-btn-status[b-n39mmwpgos] {
    cursor: default;
}

/* NOT AVAILABLE badge — accent text + accent border, no fill, to match the
   ASSESS tab colour. Withdrawn / Absent keep their own grey styling below. */
.assessment-btn-unavailable[b-n39mmwpgos] {
    background: transparent;
    color: var(--player-accent, #1cb6c9);
    border-color: var(--player-accent, #1cb6c9);
}

.assessment-btn-submitted[b-n39mmwpgos] {
    background: #050505;
    color: #fff;
}

.assessment-btn-withdrawn[b-n39mmwpgos],
.assessment-btn-absent[b-n39mmwpgos] {
    background: #6c757d;
    color: #fff;
}

@media (max-width: 1200px) {
    .student-legacy-title[b-n39mmwpgos] {
        font-size: 1.25rem;
    }

    .student-landing-subtitle[b-n39mmwpgos] {
        font-size: 1.2rem;
    }

    .assessment-card-name[b-n39mmwpgos] {
        font-size: 1.15em;
    }

    .assessment-btn[b-n39mmwpgos] {
        font-size: 1.1em;
        min-height: 36px;
    }
}

@media (max-width: 768px) {
    .student-legacy-strip[b-n39mmwpgos] {
        padding: 0 0.45rem;
    }

    .student-legacy-title[b-n39mmwpgos] {
        font-size: 1rem;
    }

    .student-legacy-tools[b-n39mmwpgos] {
        display: none;
    }

    .student-landing-layout[b-n39mmwpgos] {
        flex-direction: column;
        margin-top: 1rem;
        gap: 1rem;
    }

    .student-landing-sidebar[b-n39mmwpgos] {
        width: 100%;
        flex: none;
    }

    .student-landing-title[b-n39mmwpgos] {
        font-size: 1.8rem;
    }

    .student-landing-student-name[b-n39mmwpgos] {
        font-size: 1.25rem;
    }

    .assessment-card[b-n39mmwpgos] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Students/StudentAssessmentRunner.razor.rz.scp.css */
/* Zero-height scroll target at the top of the content area — drives
   "open each new page at the stem" (see OnAfterRenderAsync). No layout impact. */
.runner-content-top-anchor[b-e4oq7gttc6] {
    height: 0;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
}

/* Multi-question page: stack each interaction as a separated block with its own
   per-question action bar. Single-question pages do not use .page-item, so the
   historic single-interaction layout is unaffected. */

.page-item[b-e4oq7gttc6] {
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--runner-divider, rgba(255, 255, 255, 0.12));
}

.page-item:last-child[b-e4oq7gttc6] {
    border-bottom: none;
    margin-bottom: 0;
}

.page-item-actions[b-e4oq7gttc6] {
    margin-top: 0.5rem;
}

.page-item-label[b-e4oq7gttc6] {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.7;
    margin-bottom: 0.4rem;
}

.complete-review-btn[b-e4oq7gttc6] {
    margin-bottom: 0.75rem;
    cursor: pointer;
}
/* /Components/Pages/Students/StudentDashboard.razor.rz.scp.css */
.student-slice[b-f69bgc8dmo] {
    display: grid;
    grid-template-columns: var(--admin-col-schools) auto 1fr;
    gap: 0;
    /* v04: minimal outer padding so admins on laptops get every pixel.
       Same trim as .dashboard-slice / .assess-slice. */
    padding: 12px 8px 8px 12px;
    transition: grid-template-columns 0.25s ease;
    font-family: var(--admin-font);
    color: var(--admin-charcoal);
}

.student-left[b-f69bgc8dmo] {
    grid-column: 1;
    min-width: 0;
    overflow: hidden;
    transition: width 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
    width: var(--admin-col-schools);
    padding-right: 8px;
}

.student-slice.sidebar-collapsed .student-left[b-f69bgc8dmo] {
    width: 0;
    opacity: 0;
    padding-right: 0;
    pointer-events: none;
}

.student-slice.sidebar-collapsed[b-f69bgc8dmo] {
    grid-template-columns: 0px auto 1fr;
}

.student-slice.no-sidebar[b-f69bgc8dmo] {
    grid-template-columns: 0 0 1fr;
}

.student-slice.no-sidebar .student-left[b-f69bgc8dmo],
.student-slice.no-sidebar .sidebar-toggle[b-f69bgc8dmo] {
    display: none;
}

/* ── Compact docked picker (broad-scope admins, unpinned) ──
   See SchoolDashboard.razor.css for the full rationale: list column released
   to content, header-height search-select floats in its old top-left spot,
   page-top-row offset keeps the school header in place. */
.student-slice.picker-docked[b-f69bgc8dmo] {
    position: relative;
    grid-template-columns: 0 0 1fr;
}

.student-slice.picker-docked .student-left[b-f69bgc8dmo] {
    position: absolute;
    width: var(--admin-col-schools);
    overflow: visible;
    z-index: 40;
}

.student-slice.picker-docked .page-top-row[b-f69bgc8dmo] {
    margin-left: var(--admin-col-schools);
    min-height: var(--admin-picker-compact-h);
}

/* Sidebar toggle button */
.sidebar-toggle[b-f69bgc8dmo] {
    grid-column: 2;
    align-self: start;
    margin-top: 2px;
    margin-right: 6px;
    /* Thin tab — matches the .app-nav-edge-toggle pattern. */
    width: 14px;
    height: 42px;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--admin-toggle-fill);
    border: 1px solid var(--admin-toggle-stroke);
    border-radius: 0;
    font-size: 12px;
    color: var(--admin-toggle-symbol);                /* v04: darker grey */
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}

.sidebar-toggle:hover[b-f69bgc8dmo] {
    background: var(--admin-surface-hover-strong);
}

.student-right[b-f69bgc8dmo] {
    /* Pin to col 3. See SchoolDashboard.razor.css for the rationale. */
    grid-column: 3;
    min-width: 0;
}

/* Three-column layout */
.dash-columns[b-f69bgc8dmo] {
    display: grid;
    grid-template-columns: var(--admin-col-classes) 1fr auto var(--admin-col-detail);
    gap: 12px;
    align-items: start;
    transition: grid-template-columns 0.25s ease;
}

.dash-columns.detail-collapsed[b-f69bgc8dmo] {
    grid-template-columns: var(--admin-col-classes) 1fr auto 0px;
}

/* Stefan column box — wraps tabs + inner boxes; stays light grey even when a child is "active" */
.dash-col[b-f69bgc8dmo] {
    min-width: 0;
    background: var(--admin-column-box-bg);
    border: 1px solid var(--admin-column-box-border);
    border-radius: 0;
    padding: 12px;
}

.dash-col-detail[b-f69bgc8dmo] {
    overflow: hidden;
    transition: width 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
}

.detail-collapsed .dash-col-detail[b-f69bgc8dmo] {
    opacity: 0;
    padding: 0;
    border: none;
    pointer-events: none;
}

/* Detail toggle button */
.detail-toggle[b-f69bgc8dmo] {
    align-self: start;
    margin-top: 2px;
    width: var(--admin-toggle-size);
    height: var(--admin-toggle-size);
    min-height: var(--admin-toggle-size);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--admin-toggle-fill);
    border: 1px solid var(--admin-toggle-stroke);
    border-radius: 0;
    font-size: 12px;
    color: var(--admin-toggle-symbol);                /* v04: darker grey */
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}

.detail-toggle:hover[b-f69bgc8dmo] {
    background: var(--admin-surface-hover-strong);
}

/* School header panel */
.school-header-panel[b-f69bgc8dmo] {
    background: var(--admin-white);
    border: 1px solid var(--admin-surface-border);
    border-radius: 0;
    padding: 10px 14px;
    margin-bottom: 8px;
}

.school-header-panel button[b-f69bgc8dmo] {
    min-height: auto;
}

.school-header-row[b-f69bgc8dmo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.school-header-name[b-f69bgc8dmo] {
    font-size: 18px;
    font-weight: 700;
    color: var(--admin-charcoal);
    display: flex;
    align-items: center;
    gap: 10px;
}

.school-header-name i[b-f69bgc8dmo] {
    color: var(--admin-red-active);
    font-size: 20px;
}

.school-header-toggle[b-f69bgc8dmo] {
    background: var(--admin-toggle-fill);
    border: 1px solid var(--admin-toggle-stroke);
    border-radius: 0;
    width: var(--admin-toggle-size);
    height: var(--admin-toggle-size);
    min-height: var(--admin-toggle-size);                    /* beat global button min-height */
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    box-sizing: border-box;
    color: var(--admin-toggle-symbol);                       /* v04: darker grey */
    flex-shrink: 0;
}

.school-header-toggle:hover[b-f69bgc8dmo] {
    background: var(--admin-surface-hover-strong);
}

.school-header-detail[b-f69bgc8dmo] {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--admin-divider);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.school-detail-row[b-f69bgc8dmo] {
    display: flex;
    gap: 8px;
    align-items: baseline;
    font-size: 12px;
}

.school-detail-label[b-f69bgc8dmo] {
    font-weight: 600;
    color: var(--admin-text-faint);
    min-width: 40px;
}

.school-detail-value[b-f69bgc8dmo] {
    color: var(--admin-text-strong);
}

.school-detail-mono[b-f69bgc8dmo] {
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 11px;
    color: var(--admin-text-subtle);
}

/* Empty / loading states */
.dash-empty[b-f69bgc8dmo],
.dash-loading[b-f69bgc8dmo] {
    padding: 16px;
    color: var(--admin-text-faint);
}

/* OrgUnit picker: selected school in Stefan dark-red */
[b-f69bgc8dmo] .ou-row.is-selected {
    color: var(--admin-red-active);
    font-weight: 700;
}

/* Responsive */
@media (max-width: 1400px) {
    .dash-columns[b-f69bgc8dmo] {
        grid-template-columns: 1fr auto 1fr;
    }

    .dash-columns.detail-collapsed[b-f69bgc8dmo] {
        grid-template-columns: 1fr auto 0px;
    }

    .dash-col-classes[b-f69bgc8dmo] {
        grid-column: 1 / -1;
    }
}

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

    .dash-columns[b-f69bgc8dmo] {
        grid-template-columns: 1fr;
    }

    .dash-columns.detail-collapsed[b-f69bgc8dmo] {
        grid-template-columns: 1fr;
    }

    .detail-toggle[b-f69bgc8dmo] {
        align-self: center;
        justify-self: end;
    }

    .dash-col-classes[b-f69bgc8dmo] {
        grid-column: auto;
    }
}
/* /Components/Shared/Admin/AssessmentWorkspaceHeader.razor.rz.scp.css */
.awh[b-ebq1vt57nd] {
    margin-bottom: 1rem;
}

/* Tabs-only: the host supplies its own heading directly above, so the strip sits tight under it. */
.awh-tabs-only[b-ebq1vt57nd] {
    margin-bottom: 0.75rem;
}

.awh-tabs-only .awh-tabs[b-ebq1vt57nd] {
    margin-top: 0;
}

.awh-title-row[b-ebq1vt57nd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-width: 0;
    margin-top: 0.1rem;
}

.awh-title[b-ebq1vt57nd] {
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.awh-status[b-ebq1vt57nd] {
    font-size: 0.65rem;
    font-weight: 600;
    flex-shrink: 0;
}

/* Page-specific actions sit hard right, so the tab strip below is the only thing competing
   with the title for the eye. */
.awh-trailing[b-ebq1vt57nd] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.awh-tabs[b-ebq1vt57nd] {
    display: flex;
    align-items: stretch;
    gap: 0.15rem;
    flex-wrap: wrap;
    margin-top: 0.6rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.awh-tab[b-ebq1vt57nd] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    font-size: 0.82rem;
    color: var(--bs-secondary-color, #6c757d);
    text-decoration: none;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 0.375rem 0.375rem 0 0;
    /* Hold the 1px the current tab uses to sit over the strip's border, so nothing shifts
       vertically as you move between tabs. */
    margin-bottom: -1px;
    white-space: nowrap;
}

.awh-tab:hover[b-ebq1vt57nd] {
    color: var(--bs-emphasis-color, #212529);
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.awh-tab.is-current[b-ebq1vt57nd] {
    color: var(--bs-emphasis-color, #212529);
    font-weight: 600;
    background: var(--bs-body-bg, #fff);
    border-color: var(--bs-border-color, #dee2e6);
    border-bottom: 1px solid var(--bs-body-bg, #fff);
}

.awh-tab-icon[b-ebq1vt57nd] {
    font-size: 0.75rem;
}

/* "Assessments" is a level up, not a sibling view. It sits flat against the strip — no raised
   tab shape — so the eye reads it as leaving rather than as a sixth view of this assessment. */
.awh-tab-up[b-ebq1vt57nd] {
    border-radius: 0;
    margin-bottom: 0;
    padding-left: 0.15rem;
}

.awh-tab-up:hover[b-ebq1vt57nd] {
    background: transparent;
    text-decoration: underline;
}

.awh-tab-divider[b-ebq1vt57nd] {
    align-self: center;
    width: 1px;
    height: 1rem;
    margin: 0 0.5rem 0 0.35rem;
    background: var(--bs-border-color, #dee2e6);
}
/* /Components/Shared/Admin/FlowDiagramPanel.razor.rz.scp.css */
.cmr-admin-diagram-panel[b-2vkvlic33t] {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.cmr-admin-diagram-header[b-2vkvlic33t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid #e0e0e0;
    flex-wrap: wrap;
    gap: 8px;
    flex-shrink: 0;
}

.cmr-admin-panel-title[b-2vkvlic33t] {
    font-weight: 600;
    font-size: 0.875rem;
    color: #1a1a1a;
}

.cmr-admin-diagram-subtitle[b-2vkvlic33t] {
    font-size: 0.75rem;
    color: #666;
    margin-left: 8px;
}

.cmr-admin-diagram-controls[b-2vkvlic33t] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cmr-admin-diagram-body[b-2vkvlic33t] {
    flex-grow: 1;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

.cmr-admin-diagram-toolbar[b-2vkvlic33t] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-bottom: 1px solid #e0e0e0;
    background: #fafafa;
    flex-shrink: 0;
}

.pfe-toolbar-btn[b-2vkvlic33t] {
    padding: 2px 8px;
    font-size: 0.75rem;
    background: #f0f0f0;
    border: 1px solid #d0d0d0;
    border-radius: 0;
    color: #555;
    cursor: pointer;
    transition: background 0.15s;
    min-height: auto;
    line-height: 1.5;
}

.pfe-toolbar-btn:hover[b-2vkvlic33t] {
    background: #e0e0e0;
}

.pfe-toolbar-btn-active[b-2vkvlic33t] {
    background: #1976D2;
    border-color: #1565C0;
    color: #fff;
}

.pfe-toolbar-btn-active:hover[b-2vkvlic33t] {
    background: #1565C0;
}

.cmr-admin-toolbar-sep[b-2vkvlic33t] {
    border-left: 1px solid #d0d0d0;
    height: 20px;
    margin: 0 4px;
}

.cmr-admin-diagram-container[b-2vkvlic33t] {
    flex-grow: 1;
    position: relative;
    min-height: 400px;
}

.cmr-admin-diagram-empty[b-2vkvlic33t] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    color: #666;
    min-height: 400px;
    text-align: center;
}

.cmr-admin-diagram-footer[b-2vkvlic33t] {
    padding: 4px 12px;
    font-size: 0.75rem;
    color: #666;
    border-top: 1px solid #e0e0e0;
    flex-shrink: 0;
}

/* Syncfusion Diagram overrides */
[b-2vkvlic33t] .e-diagram {
    border: none !important;
}

[b-2vkvlic33t] .e-diagram-content {
    background: #fafafa;
}

[b-2vkvlic33t] .e-diagram .e-node.e-item-selected rect {
    stroke: #0d6efd !important;
    stroke-width: 3px !important;
}

/* Ensure diagram fills container */
[b-2vkvlic33t] .e-diagram {
    width: 100% !important;
    height: 100% !important;
}
/* /Components/Shared/Admin/InteractionDetailHeader.razor.rz.scp.css */
.cmr-admin-detail-header[b-t9og1fwr7o] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 0.75rem;
}

.cmr-admin-detail-code[b-t9og1fwr7o] {
    font-weight: 600;
    font-size: 0.9375rem;
    color: #1a1a1a;
}

.cmr-admin-detail-refid[b-t9og1fwr7o] {
    font-size: 0.75rem;
    color: #666;
}

.cmr-admin-detail-refid-label[b-t9og1fwr7o] {
    font-weight: 600;
    color: #888;
}

.cmr-admin-detail-type[b-t9og1fwr7o] {
    text-align: end;
}

.cmr-admin-detail-type-label[b-t9og1fwr7o] {
    font-size: 0.75rem;
    color: #666;
}

.cmr-admin-detail-type-value[b-t9og1fwr7o] {
    font-weight: 600;
    font-size: 0.9375rem;
    color: #1a1a1a;
}
/* /Components/Shared/Admin/InteractionDetailPanel.razor.rz.scp.css */
.cmr-admin-panel[b-enrajle6cw] {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    /* Size to content rather than stretching to the splitter pane height,
       so the panel doesn't show empty white space below short content.
       max-height keeps the body scrollable when content overflows the pane. */
    height: auto;
    max-height: 100%;
    align-self: flex-start;
}

.cmr-admin-panel-header[b-enrajle6cw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
}

.cmr-admin-panel-title[b-enrajle6cw] {
    font-weight: 600;
    font-size: 0.875rem;
    color: #1a1a1a;
}

.cmr-admin-panel-body[b-enrajle6cw] {
    padding: 12px;
    overflow: auto;
    /* Don't stretch: let the body size to its content, with the panel's
       max-height capping it when content overflows. */
    flex-grow: 0;
    flex-shrink: 1;
    min-height: 0;
}

.cmr-admin-empty[b-enrajle6cw] {
    color: #666;
    padding: 16px 0;
}
/* /Components/Shared/Admin/InteractionMetadataGrid.razor.rz.scp.css */
.cmr-admin-metadata-grid[b-bfxnsdc8uj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e0e0e0;
}

.cmr-admin-metadata-label[b-bfxnsdc8uj] {
    font-size: 0.75rem;
    color: #666;
}

.cmr-admin-metadata-value[b-bfxnsdc8uj] {
    font-weight: 600;
    font-size: 0.875rem;
    color: #1a1a1a;
}
/* /Components/Shared/Admin/ParentSequencesList.razor.rz.scp.css */
.cmr-admin-detail-section[b-avbv4a7738] {
    padding: 0.75rem 0;
    border-bottom: 1px solid #e0e0e0;
}

.cmr-admin-detail-section:last-child[b-avbv4a7738] {
    border-bottom: none;
}

.cmr-admin-section-title[b-avbv4a7738] {
    font-weight: 600;
    font-size: 0.875rem;
    color: #555;
    margin-bottom: 0.5rem;
}

.cmr-admin-sequence-list[b-avbv4a7738] {
    font-size: 0.875rem;
    margin-bottom: 0;
    padding-left: 1.25rem;
}
/* /Components/Shared/Admin/QuestionListFilterMenu.razor.rz.scp.css */
.qfm[b-cu0eu8mav2] {
    position: relative;
    display: inline-block;
}

.qfm-btn[b-cu0eu8mav2] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.qfm-icon[b-cu0eu8mav2],
.qfm-caret[b-cu0eu8mav2] {
    font-size: 0.7rem;
}

.qfm-caret.is-open[b-cu0eu8mav2] {
    transform: rotate(180deg);
}

.qfm-badge[b-cu0eu8mav2] {
    font-size: 0.6rem;
    font-weight: 600;
    padding: 0.15em 0.4em;
}

/* Invisible full-viewport catcher: any click outside the panel lands here and closes it.
   Mirrors .admin-meatball-backdrop. */
.qfm-backdrop[b-cu0eu8mav2] {
    position: fixed;
    inset: 0;
    z-index: 10;
    background: transparent;
}

.qfm-menu[b-cu0eu8mav2] {
    position: absolute;
    z-index: 11;
    top: calc(100% + 2px);
    left: 0;
    width: 21rem;
    max-width: min(21rem, calc(100vw - 2rem));
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.qfm-head[b-cu0eu8mav2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--bs-border-color-translucent, #e9ecef);
}

.qfm-head-title[b-cu0eu8mav2] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color, #6c757d);
}

.qfm-reset[b-cu0eu8mav2],
.qfm-bulk[b-cu0eu8mav2] {
    font-size: 0.72rem;
    text-decoration: none;
}

/* Only the groups scroll — the header's Reset stays reachable however long the facets run. */
.qfm-groups[b-cu0eu8mav2] {
    max-height: 24rem;
    overflow-y: auto;
    padding: 0.25rem 0.35rem 0.4rem;
}

.qfm-group + .qfm-group[b-cu0eu8mav2] {
    margin-top: 0.2rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--bs-border-color-translucent, #e9ecef);
}

.qfm-group-head[b-cu0eu8mav2] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.3rem 0.25rem;
}

.qfm-group-title[b-cu0eu8mav2] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-emphasis-color, #212529);
}

/* Pushes the All/None pair to the right edge of the group header. */
.qfm-group-count[b-cu0eu8mav2] {
    flex: 1 1 auto;
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    color: var(--bs-secondary-color, #6c757d);
}

.qfm-bulk-sep[b-cu0eu8mav2] {
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.7rem;
}

.qfm-foot[b-cu0eu8mav2] {
    padding: 0.35rem 0.6rem;
    border-top: 1px solid var(--bs-border-color-translucent, #e9ecef);
    font-size: 0.7rem;
    color: var(--bs-secondary-color, #6c757d);
}

/* Two columns: these lists run to 10+ values and a single column made the panel a scroll tunnel. */
.qfm-group[b-cu0eu8mav2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 0.4rem;
}

.qfm-group-head[b-cu0eu8mav2] {
    grid-column: 1 / -1;
}

.qfm-item[b-cu0eu8mav2] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    padding: 0.18rem 0.3rem;
    font-size: 0.78rem;
    cursor: pointer;
    border-radius: 0.2rem;
}

.qfm-item:hover[b-cu0eu8mav2] {
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.qfm-check[b-cu0eu8mav2] {
    margin: 0;
    flex-shrink: 0;
}

.qfm-label[b-cu0eu8mav2] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qfm-count[b-cu0eu8mav2] {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    color: var(--bs-secondary-color, #6c757d);
}

@media (max-width: 480px) {
    .qfm-group[b-cu0eu8mav2] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Shared/Admin/QuestionListToolbar.razor.rz.scp.css */
.qtoolbar[b-d28z21rtbd] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.qtoolbar-active[b-d28z21rtbd] {
    font-size: 0.65rem;
    font-weight: 400;
}

.qtoolbar-clear[b-d28z21rtbd] {
    font-size: 0.75rem;
    text-decoration: none;
}
/* /Components/Shared/Admin/QuestionRow.razor.rz.scp.css */
.qrow[b-hcjvf3d71l] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    width: 100%;
}

.qrow-leading[b-hcjvf3d71l],
.qrow-trailing[b-hcjvf3d71l] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

/* min-width:0 on both the flex child and the truncating span — without it the label's intrinsic
   width wins and the row overflows instead of ellipsising. */
.qrow-main[b-hcjvf3d71l] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
    gap: 0.05rem;
}

.qrow-label[b-hcjvf3d71l] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

a.qrow-label[b-hcjvf3d71l] {
    text-decoration: none;
}

a.qrow-label:hover[b-hcjvf3d71l] {
    text-decoration: underline;
}

/* The meta line stays on ONE line and ellipsises. It used to wrap, which in a narrow pane turned
   a one-line row into three and made the list impossible to scan. */
.qrow-meta[b-hcjvf3d71l] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    flex-wrap: nowrap;
    overflow: hidden;
    font-size: 0.72rem;
    line-height: 1.25;
    color: var(--bs-secondary-color, #6c757d);
}

/* The type is the one thing every row has, so it gives up space last. */
.qrow-type[b-hcjvf3d71l] {
    white-space: nowrap;
    flex-shrink: 0;
}

.qrow-code[b-hcjvf3d71l],
.qrow-mark[b-hcjvf3d71l],
.qrow-cat[b-hcjvf3d71l] {
    font-size: 0.62rem;
    font-weight: 400;
    line-height: 1.35;
    padding: 0.05em 0.35em;
    white-space: nowrap;
    flex-shrink: 0;
}

/* The code is monospace and fixed-width per assessment; let it truncate before the badges that
   carry meaning (marking mode, category). */
.qrow-code[b-hcjvf3d71l] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qrow-cat[b-hcjvf3d71l] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
}

.qrow-cat-icon[b-hcjvf3d71l] {
    font-size: 0.55rem;
    margin-right: 0.15em;
}

/* Hosts that paint a dark selected row (Bootstrap .active in the editor nav) pass qrow-inverse:
   muted grey on that background is unreadable, so the meta line follows the row's own foreground
   colour instead. */
.qrow-inverse .qrow-meta[b-hcjvf3d71l] {
    color: inherit;
    opacity: 0.85;
}
/* /Components/Shared/AdminFormModal.razor.rz.scp.css */
/* AdminFormModal — Stefan admin tokens (charcoal header, surface-soft
   footer, red-active primary). All admin create/edit overlays should reuse
   this component instead of bespoke modals. */

.admin-form-modal-backdrop[b-4l41xlksy5] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.admin-form-modal-dialog[b-4l41xlksy5] {
    background: var(--admin-white, #fff);
    border: 1px solid var(--admin-surface-border, #ddd);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: calc(100vh - 48px);
}

.admin-form-modal-sm[b-4l41xlksy5] { max-width: 360px; }
.admin-form-modal-md[b-4l41xlksy5] { max-width: 480px; }
.admin-form-modal-lg[b-4l41xlksy5] { max-width: 640px; }

/* ── Header — charcoal bar, uppercase title, X close button ── */
.admin-form-modal-header[b-4l41xlksy5] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--admin-charcoal, #333);
    color: var(--admin-white, #fff);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    flex: 0 0 auto;
}

.admin-form-modal-header > i[b-4l41xlksy5] {
    font-size: 14px;
    opacity: 0.92;
}

.admin-form-modal-header > span[b-4l41xlksy5] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-form-modal-close[b-4l41xlksy5] {
    background: transparent;
    border: none;
    color: var(--admin-white, #fff);
    padding: 0 4px;
    cursor: pointer;
    min-height: auto;
    font-size: 16px;
    line-height: 1;
}

.admin-form-modal-close:hover:not(:disabled)[b-4l41xlksy5] {
    opacity: 0.7;
}

.admin-form-modal-close:disabled[b-4l41xlksy5] {
    cursor: not-allowed;
    opacity: 0.5;
}

/* ── Body — form fields go here, scrolls if needed ── */
.admin-form-modal-body[b-4l41xlksy5] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    flex: 1 1 auto;
}

/* Error banner ─ shows under the body's natural flow */
.admin-form-modal-error[b-4l41xlksy5] {
    margin-top: 4px;
    padding: 8px 10px;
    background: #fff6f6;
    border: 1px solid #f0c0c0;
    color: var(--admin-red-active, #7b1f1f);
    font-size: 12px;
}

/* ── Footer — Cancel / Save aligned right, optional extras left ── */
.admin-form-modal-footer[b-4l41xlksy5] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--admin-divider, #eee);
    background: var(--admin-surface-soft, #fafafa);
    flex: 0 0 auto;
}

.admin-form-modal-footer-extras[b-4l41xlksy5] {
    margin-right: auto;
    display: flex;
    gap: 8px;
}

.admin-form-modal-btn[b-4l41xlksy5] {
    padding: 8px 20px;
    border-radius: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    cursor: pointer;
    min-height: 32px;
    border: 1px solid transparent;
}

.admin-form-modal-btn.btn-primary[b-4l41xlksy5] {
    background: var(--admin-red-active, #7b1f1f);
    color: var(--admin-white, #fff);
}

.admin-form-modal-btn.btn-primary:hover:not(:disabled)[b-4l41xlksy5] {
    filter: brightness(1.1);
}

.admin-form-modal-btn.btn-cancel[b-4l41xlksy5] {
    background: var(--admin-white, #fff);
    color: var(--admin-charcoal, #333);
    border-color: var(--admin-surface-border, #d0d0d0);
}

.admin-form-modal-btn.btn-cancel:hover:not(:disabled)[b-4l41xlksy5] {
    background: var(--admin-surface-hover, #f0f0f0);
}

.admin-form-modal-btn:disabled[b-4l41xlksy5] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Shared form-field primitives — used inside FormBody ────────────── */

.admin-form-field[b-4l41xlksy5] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0; /* allow the field to shrink inside a grid/flex row */
}

.admin-form-field-label[b-4l41xlksy5] {
    font-size: 11px;
    font-weight: 700;
    color: var(--admin-text-muted, #666);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.admin-form-field-label .admin-form-required[b-4l41xlksy5] {
    color: var(--admin-red-active, #7b1f1f);
    margin-left: 2px;
}

.admin-form-input[b-4l41xlksy5],
.admin-form-select[b-4l41xlksy5] {
    padding: 7px 9px;
    border: 1px solid var(--admin-surface-border, #d0d0d0);
    border-radius: 0;
    font-size: 13px;
    background: var(--admin-white, #fff);
    color: var(--admin-charcoal, #222);
    width: 100%;       /* fill the field; don't size to the widest <option> */
    min-width: 0;      /* let a long-option <select> shrink instead of overflowing */
    box-sizing: border-box;
}

.admin-form-input:focus[b-4l41xlksy5],
.admin-form-select:focus[b-4l41xlksy5] {
    outline: 2px solid var(--admin-red-active, #7b1f1f);
    outline-offset: -1px;
}

.admin-form-input:disabled[b-4l41xlksy5],
.admin-form-select:disabled[b-4l41xlksy5] {
    background: var(--admin-surface-soft, #fafafa);
    color: var(--admin-text-muted, #888);
    cursor: not-allowed;
}

.admin-form-field-hint[b-4l41xlksy5] {
    font-size: 11px;
    color: var(--admin-text-muted, #888);
    font-style: italic;
}

.admin-form-field-row[b-4l41xlksy5] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
}

/* ::deep so this block applies to slotted content too (Blazor CSS isolation). */
[b-4l41xlksy5] .admin-form-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
[b-4l41xlksy5] .admin-form-field-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--admin-text-muted, #666);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
[b-4l41xlksy5] .admin-form-required { color: var(--admin-red-active, #7b1f1f); margin-left: 2px; }
[b-4l41xlksy5] .admin-form-input,
[b-4l41xlksy5] .admin-form-select {
    padding: 7px 9px;
    border: 1px solid var(--admin-surface-border, #d0d0d0);
    border-radius: 0;
    font-size: 13px;
    background: var(--admin-white, #fff);
    color: var(--admin-charcoal, #222);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
[b-4l41xlksy5] .admin-form-input:focus,
[b-4l41xlksy5] .admin-form-select:focus {
    outline: 2px solid var(--admin-red-active, #7b1f1f);
    outline-offset: -1px;
}
[b-4l41xlksy5] .admin-form-field-hint {
    font-size: 11px;
    color: var(--admin-text-muted, #888);
    font-style: italic;
}
[b-4l41xlksy5] .admin-form-field-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
}

/* Helper for "Change Class" style inline-action row inside a form slot.
   Used by StudentDetailPanel's modal: dropdown takes remaining width,
   action button sits right. Matches admin design tokens. */
[b-4l41xlksy5] .class-change-controls {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

[b-4l41xlksy5] .btn-change-class {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    min-height: 32px;
    background: var(--admin-red-active, #7b1f1f);
    color: var(--admin-white, #fff);
    border: none;
    border-radius: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
}

[b-4l41xlksy5] .btn-change-class:hover:not(:disabled) {
    filter: brightness(1.1);
}

[b-4l41xlksy5] .btn-change-class:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Components/Shared/AdminMeatballMenu.razor.rz.scp.css */
.admin-meatball-wrap[b-jk0xdpxop8] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* While the dropdown is open, lift the whole wrap above any subsequent
   `position: relative` siblings (e.g. the next assessment row and its
   SCHEDULE button on the dashboard). Without this, later siblings paint
   over the dropdown because each one creates its own stacking context. */
.admin-meatball-wrap.is-open[b-jk0xdpxop8] {
    z-index: 100;
}

.admin-meatball-btn[b-jk0xdpxop8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 100%;
    min-height: 26px;
    padding: 0;
    background: transparent;
    border: none;
    border-left: 1px solid var(--admin-surface-border-muted);
    color: var(--admin-charcoal);
    cursor: pointer;
    font-size: 12px;
}

.admin-meatball-btn.is-dark[b-jk0xdpxop8] {
    color: var(--admin-white);
    border-left: 1px solid rgba(255, 255, 255, 0.35);
}

.admin-meatball-btn:hover[b-jk0xdpxop8] {
    filter: brightness(1.15);
}

/* Transparent click-catcher sits behind the menu so a click elsewhere closes it. */
.admin-meatball-backdrop[b-jk0xdpxop8] {
    position: fixed;
    inset: 0;
    z-index: 10;
    background: transparent;
}

.admin-meatball-menu[b-jk0xdpxop8] {
    position: absolute;
    top: 100%;
    right: 0;
    margin: 2px 0 0 0;
    padding: 4px 0;
    list-style: none;
    min-width: 160px;
    background: var(--admin-white);
    border: 1px solid var(--admin-surface-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    border-radius: 2px;
    z-index: 20;
    /* Reset inherited styling from the host action-button span — without this
       the items render ALL CAPS, 12 px bold, letter-spaced because the parent
       `.multi-card-action-btn` sets those for the SCHEDULE / RESCHEDULE label. */
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: var(--admin-charcoal);
}

.admin-meatball-item[b-jk0xdpxop8] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--admin-charcoal);
    cursor: pointer;
    white-space: nowrap;
}

.admin-meatball-item > i[b-jk0xdpxop8] {
    font-size: 11px;
    color: var(--admin-text-muted);
    width: 14px;
    text-align: center;
}

.admin-meatball-item:hover:not(.is-disabled)[b-jk0xdpxop8] {
    background: var(--admin-surface-hover);
}

.admin-meatball-item.is-disabled[b-jk0xdpxop8] {
    opacity: 0.55;
    cursor: not-allowed;
}
/* /Components/Shared/AssessmentScopeDrawer.razor.rz.scp.css */
/* ── Audience & Year Level — right slide-out drawer ── */
.scope-backdrop[b-su2o0tpkmg] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .35);
    z-index: 1200;
}

.scope-drawer[b-su2o0tpkmg] {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(440px, 100%);
    background: #fff;
    box-shadow: -8px 0 24px rgba(15, 23, 42, .18);
    z-index: 1201;
    display: flex;
    flex-direction: column;
}

.scope-head[b-su2o0tpkmg] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    padding: 1rem 1.25rem;
    background: #374151;
    color: #fff;
    flex: 0 0 auto;
}

.scope-head h3[b-su2o0tpkmg] {
    margin: 0;
    font-size: .8rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .85;
}

.scope-head .scope-form-name[b-su2o0tpkmg] {
    display: block;
    margin-top: .15rem;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.scope-close[b-su2o0tpkmg] {
    border: none;
    background: none;
    font-size: 1.4rem;
    line-height: 1;
    color: #cbd5e1;
    cursor: pointer;
    padding: 0 .25rem;
}
.scope-close:hover[b-su2o0tpkmg] { color: #fff; }

.scope-body[b-su2o0tpkmg] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.1rem 1.25rem;
}

.scope-section[b-su2o0tpkmg] { margin-bottom: 1.5rem; }

.scope-section > .scope-label[b-su2o0tpkmg] {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: .5rem;
}

.scope-status[b-su2o0tpkmg] {
    font-size: .85rem;
    color: #334155;
    margin: 0 0 1.25rem;
}
.scope-status strong[b-su2o0tpkmg] { color: #0f172a; }
.scope-status .scope-muted[b-su2o0tpkmg] { color: #94a3b8; }

/* Year-level chips */
.scope-year-grid[b-su2o0tpkmg] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .75rem;
}

.scope-year-chip[b-su2o0tpkmg] {
    min-width: 2.6rem;
    padding: .35rem .1rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    color: #334155;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.scope-year-chip:hover[b-su2o0tpkmg] { border-color: #94a3b8; }
.scope-year-chip.selected[b-su2o0tpkmg] {
    background: #b02a37;
    border-color: #b02a37;
    color: #fff;
}
.scope-year-chip:disabled[b-su2o0tpkmg] { opacity: .5; cursor: default; }

/* Audience rows */
.scope-aud-row[b-su2o0tpkmg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .45rem .6rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    margin-bottom: .4rem;
    font-size: .85rem;
}
.scope-aud-none[b-su2o0tpkmg] {
    font-size: .85rem;
    color: #b02a37;
    margin: .25rem 0 .6rem;
}
.scope-add-row[b-su2o0tpkmg] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    margin-top: .6rem;
}
.scope-add-row select[b-su2o0tpkmg],
.scope-add-row input[b-su2o0tpkmg] {
    font-size: .85rem;
    padding: .3rem .4rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
}
.scope-add-row .scope-target[b-su2o0tpkmg] { flex: 1 1 11rem; min-width: 9rem; }

.scope-hint[b-su2o0tpkmg] {
    font-size: .75rem;
    color: #94a3b8;
    margin: .4rem 0 0;
}

/* Buttons */
.scope-btn[b-su2o0tpkmg] {
    border: 1px solid transparent;
    border-radius: 6px;
    padding: .35rem .8rem;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
}
.scope-btn-primary[b-su2o0tpkmg] { background: #374151; color: #fff; }
.scope-btn-primary:hover[b-su2o0tpkmg] { background: #1f2937; }
.scope-btn-primary:disabled[b-su2o0tpkmg] { opacity: .6; cursor: default; }
.scope-btn-ghost[b-su2o0tpkmg] { background: #fff; color: #334155; border-color: #cbd5e1; }
.scope-btn-ghost:hover[b-su2o0tpkmg] { border-color: #94a3b8; }
.scope-btn-danger[b-su2o0tpkmg] { background: #fff; color: #b02a37; border-color: #f0c6cb; }
.scope-btn-danger:hover[b-su2o0tpkmg] { background: #fdf2f3; }

.scope-foot[b-su2o0tpkmg] {
    flex: 0 0 auto;
    padding: .85rem 1.25rem;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
}

.scope-error[b-su2o0tpkmg] {
    background: #fee2e2;
    color: #991b1b;
    border-radius: 6px;
    padding: .5rem .65rem;
    font-size: .82rem;
    margin-top: .75rem;
}
/* /Components/Shared/HelpPanel.razor.rz.scp.css */
/* ── Help trigger button ──
   The button lives in this component, so UserSettingsBar's scoped
   .user-settings-btn rules don't reach it — these rules apply only to the
   HELP button. Unlike PROFILE / LOG OUT (which sit charcoal + icon-only and
   expand on hover), HELP stands out: it sits ORANGE and ALWAYS-EXPANDED
   ("? HELP") so it's the obvious entry point, with a slightly deeper-orange
   rollover on hover/focus. */
.user-settings-btn[b-84hmo782a1] {
    background: var(--admin-rollover-orange);
    color: var(--admin-charcoal);
    border: 1px solid var(--admin-rollover-orange);
    /* Always expanded → keep the roomy 12 px padding at every state. */
    padding: 0 12px;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.user-settings-btn > i[b-84hmo782a1] {
    color: var(--admin-charcoal);
}

/* Slight colour change on hover/focus against the already-orange rest state. */
.user-settings-btn:hover:not(:disabled)[b-84hmo782a1],
.user-settings-btn:focus-visible:not(:disabled)[b-84hmo782a1] {
    background: var(--admin-help-orange-hover);
    border-color: var(--admin-help-orange-hover);
}

/* Label always visible — the HELP button never collapses to icon-only. */
.user-settings-label[b-84hmo782a1] {
    display: inline;
}

/* HelpPanel drawer — mirrors the ReviewerInstructionsPanel look so the
   Help drawer feels native alongside the release-verification panel. */

.help-panel[b-84hmo782a1] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
}

.help-panel-header[b-84hmo782a1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.help-panel-header h3[b-84hmo782a1] {
    margin: 0;
    font-size: 1.05rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.help-panel-header h3 i[b-84hmo782a1] { color: #2563eb; }

.help-panel-close[b-84hmo782a1] {
    border: none;
    background: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: #64748b;
}

.help-panel-close:hover[b-84hmo782a1] { color: #0f172a; }

.help-panel-body[b-84hmo782a1] {
    padding: 1rem 1.1rem 2rem;
    overflow-y: auto;
    font-size: .88rem;
    line-height: 1.45;
    color: #334155;
}

.help-panel-body h4[b-84hmo782a1] {
    margin: 1.1rem 0 .5rem;
    font-size: .9rem;
    color: #0f172a;
}

.help-panel-intro[b-84hmo782a1] {
    margin: 0 0 .5rem;
    padding: .6rem .7rem;
    background: #eff6ff;
    border-left: 3px solid #2563eb;
    border-radius: .25rem;
}

.help-panel-empty[b-84hmo782a1] {
    margin-top: 1.5rem;
    text-align: center;
    color: #94a3b8;
}

.help-panel-empty i[b-84hmo782a1] { font-size: 1.6rem; }
.help-panel-empty p[b-84hmo782a1] { margin: .5rem 0 0; }

/* Tour list */
.help-tour-list[b-84hmo782a1] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.help-tour-list li[b-84hmo782a1] { margin: 0 0 .5rem; }

.help-tour-item[b-84hmo782a1] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .75rem;
    text-align: left;
    padding: .7rem .8rem;
    border: 1px solid #e2e8f0;
    border-radius: .5rem;
    background: #fff;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}

.help-tour-item:hover[b-84hmo782a1] {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.help-tour-icon[b-84hmo782a1] {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eff6ff;
    color: #2563eb;
}

.help-tour-text[b-84hmo782a1] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.help-tour-title[b-84hmo782a1] {
    font-weight: 600;
    color: #0f172a;
}

.help-tour-summary[b-84hmo782a1] {
    font-size: .8rem;
    color: #64748b;
}

.help-tour-go[b-84hmo782a1] {
    flex-shrink: 0;
    color: #94a3b8;
}
/* /Components/Shared/InlineErrorBanner.razor.rz.scp.css */
.inline-error-banner[b-wbev88tpiz] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: #ffebee;
    border: 1px solid #c62828;
    border-radius: 3px;
    color: #b71c1c;
    font-size: 13px;
    margin-bottom: 12px;
}

.inline-error-banner i.fa-circle-exclamation[b-wbev88tpiz] {
    color: #c62828;
    font-size: 15px;
    flex-shrink: 0;
}

.inline-error-text[b-wbev88tpiz] {
    flex: 1;
    word-break: break-word;
}

.inline-error-dismiss[b-wbev88tpiz] {
    background: transparent;
    border: none;
    color: #b71c1c;
    cursor: pointer;
    padding: 2px 6px;
    font-size: 14px;
    flex-shrink: 0;
}

.inline-error-dismiss:hover[b-wbev88tpiz] {
    color: #880e0f;
}
/* /Components/Shared/MermaidDiagram.razor.rz.scp.css */
.mermaid-container[b-zsft121wk6] {
    overflow: auto;
    padding: 0.75rem;
    background: var(--bs-body-bg, #ffffff);
}

.mermaid-container svg[b-zsft121wk6] {
    max-width: 100%;
    height: auto;
}

/* Highlight the selected node (set via JS). */
.mermaid-container svg g.node.cmr-selected-node rect[b-zsft121wk6],
.mermaid-container svg g.node.cmr-selected-node polygon[b-zsft121wk6],
.mermaid-container svg g.node.cmr-selected-node ellipse[b-zsft121wk6],
.mermaid-container svg g.node.cmr-selected-node path[b-zsft121wk6] {
    stroke-width: 4px !important;
    stroke: var(--bs-primary, #0d6efd) !important;
}

/* Ensure subgraph labels are visible */
.mermaid-container svg .cluster-label[b-zsft121wk6] {
    font-weight: 600;
}

/* Style subgraph backgrounds */
.mermaid-container svg .cluster rect[b-zsft121wk6] {
    fill: #f8f9fa !important;
    stroke: #dee2e6 !important;
}

/* Legacy class name support */
.cmr-mermaid-wrap[b-zsft121wk6] {
    overflow: auto;
    padding: 0.75rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    background: var(--bs-body-bg, #ffffff);
}

.cmr-mermaid-wrap svg[b-zsft121wk6] {
    max-width: 100%;
    height: auto;
}

.cmr-mermaid-wrap svg g.node.cmr-selected-node rect[b-zsft121wk6],
.cmr-mermaid-wrap svg g.node.cmr-selected-node polygon[b-zsft121wk6],
.cmr-mermaid-wrap svg g.node.cmr-selected-node ellipse[b-zsft121wk6],
.cmr-mermaid-wrap svg g.node.cmr-selected-node path[b-zsft121wk6] {
    stroke-width: 4px !important;
    stroke: var(--bs-primary, #0d6efd) !important;
}
/* /Components/Shared/PanelCacheClearButton.razor.rz.scp.css */
/* Matches the square icon buttons in the dashboard panel headers
   (support-toggle / comms-toggle) so the broom sits flush beside them. */
.panel-cache-btn[b-6bp8h26ptr] {
    flex: 0 0 auto;
    width: var(--admin-toggle-size);
    height: var(--admin-toggle-size);
    min-width: var(--admin-toggle-size);
    min-height: var(--admin-toggle-size);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--admin-toggle-fill);
    border: 1px solid var(--admin-toggle-stroke);
    border-radius: 0;
    color: var(--admin-toggle-symbol);
    cursor: pointer;
    font-size: 11px;
    box-sizing: border-box;
    transition: background 0.15s;
}

.panel-cache-btn:hover:not(:disabled)[b-6bp8h26ptr] {
    background: var(--admin-surface-hover-strong, #f0f0f0);
}

.panel-cache-btn:disabled[b-6bp8h26ptr] {
    cursor: not-allowed;
    opacity: 0.6;
}
/* /Components/Shared/ScheduleEditorDialog.razor.rz.scp.css */
/* ── Shared schedule-editor modal ──
   Used by both /assessments/dashboard (per-class card) and
   /school/dashboard (per-assessment row). CSS isolation scopes
   these rules to <ScheduleEditorDialog> instances only — they
   don't leak to elements with similar class names elsewhere. */

.schedule-editor-backdrop[b-9rgyi2ekgr] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.schedule-editor-dialog[b-9rgyi2ekgr] {
    background: var(--admin-white, #fff);
    min-width: 360px;
    max-width: 480px;
    border: 1px solid var(--admin-surface-border, #ddd);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
}

.schedule-editor-header[b-9rgyi2ekgr] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--admin-charcoal, #333);
    color: var(--admin-white, #fff);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.schedule-editor-header > span[b-9rgyi2ekgr] {
    flex: 1;
}

.schedule-editor-close[b-9rgyi2ekgr] {
    background: transparent;
    border: none;
    color: var(--admin-white, #fff);
    padding: 0 4px;
    cursor: pointer;
    min-height: auto;
    font-size: 16px;
}

.schedule-editor-body[b-9rgyi2ekgr] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.schedule-editor-field[b-9rgyi2ekgr] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.schedule-editor-field label[b-9rgyi2ekgr] {
    font-size: 11px;
    font-weight: 700;
    color: var(--admin-text-muted, #666);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.schedule-editor-field input[b-9rgyi2ekgr],
.schedule-editor-field select[b-9rgyi2ekgr] {
    padding: 6px 8px;
    border: 1px solid var(--admin-surface-border, #d0d0d0);
    font-size: 13px;
    border-radius: 0;
}

/* Native session <select> — full-width to match the date field, with a
   white background so it reads as an editable field (some browsers tint
   selects grey by default). */
.schedule-editor-session-select[b-9rgyi2ekgr] {
    width: 100%;
    box-sizing: border-box;
    background: var(--admin-white, #fff);
    min-height: 32px;
}

/* Day-of-week + long-form date preview underneath the native date
   picker. The native input shows the browser-locale short format,
   which is ambiguous between AU and US — the preview gives the
   weekday and the spelled-out month so the operator can confirm
   they picked the right day at a glance. */
.schedule-editor-date-preview[b-9rgyi2ekgr] {
    font-size: 11px;
    color: var(--admin-text-muted, #666);
    margin-top: 2px;
}

.schedule-editor-check[b-9rgyi2ekgr] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--admin-charcoal, #333);
    cursor: pointer;
}

.schedule-editor-check input[type="checkbox"][b-9rgyi2ekgr] {
    margin: 0;
}

.schedule-editor-error[b-9rgyi2ekgr] {
    color: var(--admin-red-active, #7b1f1f);
    background: #fff6f6;
    border: 1px solid #f0c0c0;
    padding: 6px 8px;
    font-size: 12px;
}

/* Hint text under the date picker when AllowAnyDate is on — quietly
   signals "the window restriction has been waived for you". */
.schedule-editor-hint[b-9rgyi2ekgr] {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: var(--admin-text-muted, #666);
    font-style: italic;
}

/* The allocation-window line reads as data (a date range), not a waiver
   note — drop the italic and firm up the colour so it's legible at a glance
   beneath the "any date allowed" hint. */
.schedule-editor-window-hint[b-9rgyi2ekgr] {
    font-style: normal;
    font-weight: 600;
    color: var(--admin-text, #333);
}

/* School-local "Today" shortcut — replaces Syncfusion's UTC-bound Today
   button. A small, quiet link-button under the date field. */
.schedule-editor-today-btn[b-9rgyi2ekgr] {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: var(--admin-accent, #0d6efd);
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}

.schedule-editor-today-btn:hover[b-9rgyi2ekgr] {
    filter: brightness(0.93);
}

.schedule-editor-actions[b-9rgyi2ekgr] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--admin-divider, #eee);
    background: var(--admin-surface-soft, #fafafa);
}

.schedule-editor-btn[b-9rgyi2ekgr] {
    padding: 6px 16px;
    border-radius: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    cursor: pointer;
    min-height: 30px;
    border: 1px solid transparent;
}

.schedule-editor-btn.btn-primary[b-9rgyi2ekgr] {
    background: var(--admin-red-active, #7b1f1f);
    color: var(--admin-white, #fff);
}

.schedule-editor-btn.btn-cancel[b-9rgyi2ekgr],
.schedule-editor-btn.btn-secondary[b-9rgyi2ekgr] {
    background: var(--admin-white, #fff);
    color: var(--admin-charcoal, #333);
    border-color: var(--admin-surface-border, #d0d0d0);
}

.schedule-editor-btn:disabled[b-9rgyi2ekgr] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Components/Shared/SchoolHeaderPanel.razor.rz.scp.css */
/* User Settings now sits as a flex sibling inside .page-top-row (see
   site.css) so the panel no longer needs to reserve a right-side gutter. */
.school-header-panel[b-wy3pamgtg0] {
    background: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 0;
    padding: 10px 14px;
    margin-bottom: 8px;
}

.school-header-panel button[b-wy3pamgtg0] {
    min-height: auto;
}

.school-header-row[b-wy3pamgtg0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.school-header-name[b-wy3pamgtg0] {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: 10px;
}

.school-header-name i[b-wy3pamgtg0] {
    color: #7b1f1f;
    font-size: 20px;
}

.school-header-toggle[b-wy3pamgtg0] {
    background: var(--admin-toggle-fill);
    border: 1px solid var(--admin-toggle-stroke);
    border-radius: 0;
    width: var(--admin-toggle-size);
    height: var(--admin-toggle-size);
    min-height: var(--admin-toggle-size);            /* beat global button min-height */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    color: var(--admin-toggle-symbol);                /* v04: darker grey */
    flex-shrink: 0;
}

.school-header-toggle:hover[b-wy3pamgtg0] {
    background: #e0e0e0;
}

/* Unicode +/− glyph that replaces the Font Awesome <i> on the toggles — the
   FA kit's autoReplaceSvg races Blazor's diff and leaves a stale icon behind
   ("double icon"). A plain glyph is fully Blazor-controlled. */
.school-toggle-glyph[b-wy3pamgtg0] {
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}

/* Compact toggle for the collapsed Maintenance tools — same square look as the
   header toggle, sized to sit inline in a detail row. */
.school-detail-maint-toggle[b-wy3pamgtg0] {
    width: 20px;
    height: 20px;
    min-height: 20px;
}

.school-detail-maint-toggle .school-toggle-glyph[b-wy3pamgtg0] {
    font-size: 13px;
}

.school-header-detail[b-wy3pamgtg0] {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e8e8e8;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.school-detail-row[b-wy3pamgtg0] {
    display: flex;
    gap: 8px;
    align-items: baseline;
    font-size: 12px;
}

.school-detail-label[b-wy3pamgtg0] {
    font-weight: 600;
    color: #666;
    min-width: 60px;
}

.school-detail-value[b-wy3pamgtg0] {
    color: #333;
}

.school-detail-muted[b-wy3pamgtg0] {
    color: #666;
}

.school-detail-mono[b-wy3pamgtg0] {
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 11px;
    color: #888;
}

.school-detail-row-admins .school-detail-value[b-wy3pamgtg0] {
    flex: 1;
    word-break: break-word;
}

/* Admins list rendered inside the expanded detail block, on the same row
   as the "Admins" label. Wraps to multiple lines for schools with many
   admins; each entry is "Name · email@school". */
.school-detail-admins[b-wy3pamgtg0] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
}

.school-detail-admin[b-wy3pamgtg0] {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    white-space: nowrap;
}

.school-detail-admin-name[b-wy3pamgtg0] {
    font-weight: 500;
    color: #333;
}

.school-detail-admin-sep[b-wy3pamgtg0] {
    color: #aaa;
}

.school-detail-admin-email[b-wy3pamgtg0] {
    color: #1a4d8a;
    text-decoration: none;
}

.school-detail-admin-email:hover[b-wy3pamgtg0] {
    text-decoration: underline;
}

.school-detail-admin-divider[b-wy3pamgtg0] {
    color: #666;
    margin-left: -3px; /* tuck the comma against the email */
}

/* OmniaAdmin-only "Reconcile Allocations" maintenance action. Sits in the
   expandable detail under a "Maintenance" label, styled as a compact action
   button to match the page's coordinator-button look. */
.school-detail-reconcile-btn[b-wy3pamgtg0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #2c2c2c;
    color: #fff;
    border: none;
    border-radius: 2px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    white-space: nowrap;
}

.school-detail-reconcile-btn:hover:not(:disabled)[b-wy3pamgtg0] {
    background: #444;
}

.school-detail-reconcile-btn:disabled[b-wy3pamgtg0] {
    opacity: 0.5;
    cursor: not-allowed;
}

.school-detail-reconcile-msg[b-wy3pamgtg0] {
    margin-left: 10px;
    font-size: 12px;
    color: #2e7d32;
}
/* /Components/Shared/UserProfileModal.razor.rz.scp.css */
/* UserProfileModal — read-only key/value grid inside AdminFormModal. */
.profile-modal-loading[b-r13zc2rmy2] {
    padding: 12px 4px;
    color: #666;
    font-size: 13px;
    font-style: italic;
}

.profile-modal-grid[b-r13zc2rmy2] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.profile-modal-row[b-r13zc2rmy2] {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-size: 13px;
}

.profile-modal-label[b-r13zc2rmy2] {
    flex: 0 0 96px;
    font-weight: 600;
    color: #555;
}

.profile-modal-value[b-r13zc2rmy2] {
    flex: 1;
    color: #1a1a1a;
    word-break: break-word;
}

.profile-modal-value a[b-r13zc2rmy2] {
    color: #1a4d8a;
    text-decoration: none;
}

.profile-modal-value a:hover[b-r13zc2rmy2] {
    text-decoration: underline;
}

.profile-modal-muted[b-r13zc2rmy2] {
    color: #888;
}

.profile-modal-mono[b-r13zc2rmy2] {
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 11px;
    color: #888;
}

/* Role description sits on its own line beneath the role name. */
.profile-modal-role-desc[b-r13zc2rmy2] {
    display: block;
    margin-top: 2px;
    color: #888;
    font-size: 12px;
    line-height: 1.35;
}
/* /Components/Shell/ShellBreadcrumbs.razor.rz.scp.css */
.shell-breadcrumbs[b-mqmx80x1h9] {
    font-size: 0.875rem;
    opacity: 0.85;
}

.shell-breadcrumbs-list[b-mqmx80x1h9] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.shell-breadcrumbs-item[b-mqmx80x1h9]::after {
    content: "/";
    margin: 0 0.25rem;
    opacity: 0.6;
}

.shell-breadcrumbs-item:last-child[b-mqmx80x1h9]::after {
    content: "";
    margin: 0;
}

.shell-breadcrumbs[b-mqmx80x1h9]  a {
    text-decoration: none;
}

    .shell-breadcrumbs[b-mqmx80x1h9]  a:hover {
        text-decoration: underline;
    }
/* /Components/Shell/ShellContentFrame.razor.rz.scp.css */
.shell-frame[b-id58xrg937] {
    --tenant-primary: #0d6efd;
    --tenant-accent: #6610f2;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Thin top bar (like your screenshot’s grey bar) */
.shell-topbar[b-id58xrg937] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0.75rem;
    background: #e9e9e9;
    border-bottom: 1px solid rgba(0,0,0,0.12);
}

.shell-topbar-left[b-id58xrg937] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.shell-topbar-tab[b-id58xrg937] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.2rem;
    text-decoration: none;
    background: #111;
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
}

.shell-topbar[b-id58xrg937]  a.active {
    outline: 2px solid var(--tenant-primary);
}

.shell-page-header[b-id58xrg937] {
    padding: 0.75rem 0.75rem 0.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.10);
    background: #fff;
}

.shell-page-header-row[b-id58xrg937] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.shell-page-title[b-id58xrg937] {
    margin: 0;
    font-size: 1.4rem;
}

.shell-breadcrumbs[b-id58xrg937] {
    font-size: 0.85rem;
    opacity: 0.85;
}

.shell-breadcrumbs-list[b-id58xrg937] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.shell-breadcrumbs-item[b-id58xrg937]::after {
    content: "/";
    margin: 0 0.25rem;
    opacity: 0.6;
}

.shell-breadcrumbs-item:last-child[b-id58xrg937]::after {
    content: "";
    margin: 0;
}

.shell-section-tabs[b-id58xrg937] {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(0,0,0,0.10);
    overflow: auto;
    background: #fff;
}

.shell-section-tab[b-id58xrg937] {
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    white-space: nowrap;
}

.shell-section-tabs[b-id58xrg937]  a.active {
    border-bottom: 2px solid var(--tenant-primary);
    font-weight: 600;
}

/* v04: padding stripped so admin pages run flush to the viewport.
   Per-page slices own outer padding. See .app-content note in site.css. */
.shell-frame-body[b-id58xrg937] {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 0;
    background: #fff;
}
/* /Components/Shell/ShellPageHeader.razor.rz.scp.css */
.shell-page-header[b-acpqzv5qa8] {
    padding: 0.75rem 1rem 0.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.shell-page-header-row[b-acpqzv5qa8] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.25rem;
}

.shell-page-title[b-acpqzv5qa8] {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.2;
}

.shell-page-actions[b-acpqzv5qa8] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
/* /Components/Shell/ShellSectionTabs.razor.rz.scp.css */
.shell-section-tabs[b-uqpol5d2vb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    overflow: auto;
}

.shell-section-tab[b-uqpol5d2vb] {
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    white-space: nowrap;
}

.shell-section-tabs[b-uqpol5d2vb]  a.active {
    font-weight: 600;
    border-bottom: 2px solid currentColor;
    border-radius: 0;
}
/* /Components/Shell/ShellTopBar.razor.rz.scp.css */
.shell-topbar[b-kekcztbuc4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.shell-topbar-tabs[b-kekcztbuc4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

    .shell-topbar-tabs[b-kekcztbuc4]  a {
        text-decoration: none;
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
    }

        .shell-topbar-tabs[b-kekcztbuc4]  a.active {
            font-weight: 600;
            text-decoration: underline;
        }