/* /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] {
    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);
}

.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;
}

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

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

.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;
    }
}
/* /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;
}

.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;
}

.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;
    }

    .player-question-tools[b-qvimg2lxbu] {
        display: none;
    }
}

/* ── 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/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);
}

.interaction-switch .line-stem[b-k39r9iey8c] {
    font-size: calc(clamp(1.35rem, 1.55vw, 1.9rem) * var(--runner-font-scale, 1)) !important;
    text-align: center;
    font-weight: 400;
    line-height: 1.35;
    margin: 1.1rem auto 5.56rem !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;
}

.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/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/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;
}

/*----------------------------------------
  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/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/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/PlanFlowEditor.razor.rz.scp.css */
/* Legend styles for Mermaid diagram */
.cmr-map-legend[b-qd4enpfsqo] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.5rem;
    background: #f8f9fa;
    border-radius: 0.25rem;
    font-size: 0.8rem;
    color: #495057;
}

.cmr-legend-item[b-qd4enpfsqo] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.cmr-legend-line[b-qd4enpfsqo] {
    display: inline-block;
    width: 1.5rem;
    height: 2px;
    vertical-align: middle;
}

.cmr-legend-solid[b-qd4enpfsqo] {
    background-color: #333;
}

.cmr-legend-dotted[b-qd4enpfsqo] {
    border-top: 2px dashed #666;
    background-color: transparent;
}

.cmr-legend-box[b-qd4enpfsqo] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 0.2rem;
    vertical-align: middle;
}

/* Results panel styles */
.cmr-results-panel[b-qd4enpfsqo] {
    min-height: 400px;
    max-height: calc(100vh - 220px);
}

/* Detail section styles */
.cmr-detail-header[b-qd4enpfsqo] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #dee2e6;
}

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

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

.cmr-section-title[b-qd4enpfsqo] {
    font-weight: 600;
    font-size: 0.875rem;
    color: #495057;
    margin-bottom: 0.5rem;
}
/* /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;
}

/* "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; }
.rv-notes[b-4j0mv5mg1j] { width: 100%; padding: .3rem .45rem; border: 1px solid #cbd5e1; border-radius: .375rem; font-size: .82rem; }

.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;
}
/* /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;
}
/* /Components/Pages/Admin/Results/ResultsMapPanel.razor.rz.scp.css */
/* ── ResultsMapPanel — flat design (Syncfusion diagram) ── */

/* ── Header controls ── */
.are-map-control-label[b-dq213gf4f3] {
    font-size: 0.75rem;
    color: #888;
}

.are-select[b-dq213gf4f3] {
    padding: 3px 8px;
    font-size: 0.75rem;
    border: 1px solid #d0d0d0;
    border-radius: 0;
    background: #fff;
    color: var(--admin-charcoal);
    max-width: 220px;
}

.are-select:focus[b-dq213gf4f3] {
    border-color: #888;
    outline: none;
}

.are-map-switch[b-dq213gf4f3] {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.are-map-switch input[type="checkbox"][b-dq213gf4f3] {
    margin: 0;
}

.are-map-switch-label[b-dq213gf4f3] {
    font-size: 0.75rem;
    color: #555;
}

/* ── Legend ── */
.are-map-legend[b-dq213gf4f3] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 8px 10px;
    background: #f8f8f8;
    border-top: 1px solid #e0e0e0;
    border-radius: 0;
    font-size: 0.75rem;
    color: #555;
}

.are-legend-item[b-dq213gf4f3] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.are-legend-line[b-dq213gf4f3] {
    display: inline-block;
    width: 18px;
    height: 2px;
    vertical-align: middle;
}

.are-line-solid[b-dq213gf4f3] {
    background-color: #333;
}

.are-line-dotted[b-dq213gf4f3] {
    border-top: 2px dashed #666;
    background-color: transparent;
}

.are-legend-swatch[b-dq213gf4f3] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 0;
    vertical-align: middle;
}

.are-swatch-correct[b-dq213gf4f3] {
    background-color: #4CAF50;
    border: 1px solid #388E3C;
}

.are-swatch-incorrect[b-dq213gf4f3] {
    background-color: #EF5350;
    border: 1px solid #C62828;
}

.are-swatch-partial[b-dq213gf4f3] {
    background-color: #FFA726;
    border: 1px solid #EF6C00;
}

.are-swatch-answered[b-dq213gf4f3] {
    background-color: #42A5F5;
    border: 1px solid #1E88E5;
}

.are-swatch-skipped[b-dq213gf4f3] {
    background-color: #E0E0E0;
    border: 1px dashed #9E9E9E;
}
/* /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/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;
}

/* ── 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;
}

/* ── 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;
}

/* ── 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;
}

.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)[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)[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);
}

.log-payload[b-0oxdygarsf] {
    font-size: 11px;
    background: var(--admin-surface-hover);
    padding: 8px;
    border-radius: 2px;
    margin: 0 0 8px 0;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 120px;
    overflow-y: auto;
}

.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;
}

/* ── 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;
}

/* End-assessment: Stefan dark-red (admin-red-active) */
.donut-card-schedule-btn.btn-end[b-9fevkhcywq] {
    background: var(--admin-red-active);
}

.donut-card-schedule-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;
}

.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;
    color: var(--admin-text-subtle);
    padding: 2px;
}

/* 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;
}

.btn-open-assessment[b-do7qf43lcm] {
    background: var(--admin-red-active);
}

.btn-download-report[b-do7qf43lcm] {
    background: var(--admin-btn-download-fill);
}

.btn-view-pathway[b-do7qf43lcm] {
    background: #212121;
}

.btn-mark-absent[b-do7qf43lcm] {
    background: #e65100;
}

.btn-mark-absent:hover:not(:disabled)[b-do7qf43lcm] {
    background: #bf360c;
}

.btn-mark-present[b-do7qf43lcm] {
    background: var(--admin-status-success-fg);
}

.btn-mark-present:hover:not(: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)[b-do7qf43lcm] {
    background: #37474f;
}

.btn-flag-active[b-do7qf43lcm] {
    background: #f9a825;
    color: var(--admin-charcoal);
}

.btn-flag-active:hover:not(: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;
}
/* /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;
}
/* /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;
}

.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;
}

.exempt-summary-schools-label[b-m05pcyn557] {
    font-size: 0.8rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
/* /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;
}

/* .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/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;
}

/* 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/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/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 */
}

/* 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;
}

.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;
}
/* /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;
}
/* /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;
}

/* 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;
}

/* 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;
}

/* 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;
}

.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;
}

/* ── 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;
}

/* ── 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;
}
/* /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;
}

.class-change-controls[b-kus2evqyc3] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.class-change-controls select[b-kus2evqyc3] {
    flex: 1;
}

.btn-change-class[b-kus2evqyc3] {
    background: var(--admin-red-active);
    color: var(--admin-white);
    border: none;
    border-radius: 2px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    /* Stefan v05: MOVE button renders uppercase. */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: auto;
}

.btn-change-class:disabled[b-kus2evqyc3] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-change-class:hover:not(:disabled)[b-kus2evqyc3] {
    background: #5a1616;
}

/* 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;
}

.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: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 6px;
}

.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: 0 0 0.9rem;
    font-weight: 700;
}

.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] {
    background: #050505;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}

.assessment-btn-start:hover[b-n39mmwpgos] {
    background: #333;
}

.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;
}

.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/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;
}

/* 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/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/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;
}

.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);
}

.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: 1fr 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; }
[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);
}
[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: 1fr 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/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/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;
}

/* 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;
}

.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;
}

.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 */
}
/* /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;
}
/* /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;
        }