/* /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;
    grid-template-columns: auto 2rem 1fr 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 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;
}

/* Center cluster */
.app-header-center-one[b-sred72s2v2] {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Right panel */
.app-header-right[b-sred72s2v2] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    /* keeps controls readable on plain black */
    padding: 0.25rem 0.5rem;
}

/* Strip is a RIGHT-JUSTIFIED background panel (NOT fill) */
.app-header-right--strip[b-sred72s2v2] {
    min-height: 56px; /* adjust to match your artwork height */
    min-width: 420px; /* how wide the strip block is */
    padding-right: 0.75rem;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 100%; /* key: not fill; height matches panel */
}

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

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

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

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

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

    .app-header-right--strip[b-sred72s2v2] {
        min-width: 240px;
    }
}
/* /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/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;
}
/* /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;
}
/* /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 .pfe-plan-item[b-8ria44fyz5] {
    border-bottom: none;
}

.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);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

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

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

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

.pfe-page-title[b-4mg1ti0f7f] {
    font-size: 18px;
    font-weight: 700;
    color: var(--admin-charcoal);
    white-space: nowrap;
}

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

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

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

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

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

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

.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. */
.logs-action-row[b-0oxdygarsf] {
    display: flex;
    justify-content: flex-end;
    padding: 0 14px 14px;
    background: var(--admin-surface-white);
}

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

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

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

.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. */
.alerts-action-row[b-a1k41kndlu] {
    display: flex;
    justify-content: flex-end;
    padding: 0 14px 14px;
    background: var(--admin-surface-white);
}

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

.alert-entry-header[b-a1k41kndlu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    cursor: pointer;
}

.alert-entry-header:hover[b-a1k41kndlu] {
    background: var(--admin-surface-soft);
}

.alert-entry-left[b-a1k41kndlu] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

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

.alert-assessment-tag[b-a1k41kndlu] {
    font-size: 11px;
    font-weight: 700;
    background: var(--admin-severity-high-bg);
    color: var(--admin-severity-high-fg);
    padding: 2px 8px;
    border-radius: 2px;
}

.alert-student-name[b-a1k41kndlu] {
    font-size: 13px;
    font-weight: 600;
    color: var(--admin-text-strong);
}

.alert-entry-right[b-a1k41kndlu] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-mark-read-btn[b-a1k41kndlu] {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border: 1px solid var(--admin-status-success-fg);
    background: transparent;
    color: var(--admin-status-success-fg);
    cursor: pointer;
    border-radius: 2px;
}

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

.audio-toggle[b-do7qf43lcm] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--admin-text-muted);
    cursor: default;
}

.audio-toggle input[type="checkbox"][b-do7qf43lcm] {
    accent-color: #0d6efd;
}

.audio-toggle-text[b-do7qf43lcm] {
    font-size: 12px;
    color: var(--admin-text-muted);
}

.security-select[b-do7qf43lcm] {
    padding: 4px 8px;
    border: 1px solid var(--admin-surface-border);
    border-radius: 2px;
    font-size: 12px;
    background: var(--admin-white);
}

.security-select:disabled[b-do7qf43lcm] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* 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/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] {
    padding: 6px 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.multi-card-bar-row[b-rdtsa9815h] {
    display: flex;
    align-items: center;
    gap: 8px;
    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: 110px;
    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] {
    font-size: 12px;
    flex-shrink: 0;
    line-height: 1;
}

.multi-card-sched-icon.is-scheduled[b-rdtsa9815h] {
    color: var(--bucket-complete);         /* same green as Complete bar segment */
}

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

/* 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 keeps a distinct green accent — not specced by Stefan, so inherit a neutral
   charcoal treatment for consistency with the other admin-button framing. */
.btn-lock[b-rdtsa9815h] {
    background: var(--admin-charcoal);
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-lock > i[b-rdtsa9815h] {
    color: var(--admin-white);
    font-size: 12px;
}

.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;
    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);
    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/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] {
    width: 320px;
    background: #7fd7e2;
    color: #0b1a1c;
    padding: 16px 18px 18px;
    border-radius: 4px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}

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

/* 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 */
.ou-list[b-8d1t8gymnv] {
    display: flex;
    flex-direction: column;
    gap: 0; /* IMPORTANT */
    padding: 0;
    margin: 0;
}

/* Each row */
.ou-row[b-8d1t8gymnv] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 0;
    background: transparent;
    padding: 4px; /* remove UA padding */
    margin: 0;
    min-height: 0; /* remove UA min-height */
    height: auto;
    line-height: 1.05; /* tight vertical rhythm */
    font-size: 0.8em; /* scales with app font size */

    display: block; /* avoid inline-button quirks */
    width: 100%;
    text-align: left;
    cursor: pointer;
    color: rgba(0,0,0,0.7);
}

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

.student-assessment-item.row-status-exempt[b-kus2evqyc3] {
    border-left-color: #6a1b9a;
    background: #e1bee7;
}
.student-assessment-item.row-status-exempt .student-assessment-status-icon[b-kus2evqyc3] {
    background: #6a1b9a;
}

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

.status-exempt[b-kus2evqyc3] {
    background: #f3e5f5;
    color: #6a1b9a;
}

.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 — neutral charcoal. Stub today; full Notes UI lands later. */
.btn-notes[b-kus2evqyc3] {
    background: #424242;
}
.btn-notes:hover:not(:disabled)[b-kus2evqyc3] {
    background: #212121;
}

/* Exempt from All Assessments — purple, matching .btn-exempt on the
   assessment-dashboard panel for visual consistency. When the student
   is already fully exempt, flip to the brighter "is-active" purple. */
.btn-exempt-all[b-kus2evqyc3] {
    background: #4a148c;
}
.btn-exempt-all:hover:not(:disabled)[b-kus2evqyc3] {
    background: #311b92;
}
.btn-exempt-all.is-active[b-kus2evqyc3] {
    background: #7b1fa2;
}
.btn-exempt-all.is-active:hover:not(:disabled)[b-kus2evqyc3] {
    background: #6a1b9a;
}

/* Left School — solid charcoal in the default "Mark as Left" state.
   Conscious choice: not red (it's reversible, not destructive) and not
   orange (that's reserved for Mark Absent). Stays neutral but firm. */
.btn-left-school[b-kus2evqyc3] {
    background: #212121;
}
.btn-left-school:hover:not(:disabled)[b-kus2evqyc3] {
    background: #000;
}

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


/* 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-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;
}
/* /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;
    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-s4ez77e4ir] {
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 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. */
.student-grid-header-actions[b-s4ez77e4ir] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

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

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

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