/* =========================================
   Staff Modern Styles
   SchoolConnect Design System
   ========================================= */

/* ── Centered dialog (replaces the global sc-side-panel slide-in across
       every staff / people page). Lives in this global stylesheet so the
       same classes work in StaffProfile, StaffDirectory, TeacherDetails,
       Performance, Leave, and the student-cohort screens without each
       page needing its own scoped copy. */
.panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 10000;
    animation: dlgOverlayIn 0.2s ease;
}

@keyframes dlgOverlayIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* The dialog is a SIBLING of the overlay (not a child) — see StaffProfile /
   TeacherDetails markup. Centering must therefore be done on the dialog
   itself, not on the overlay's flex box. */
.dialog-shell {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(720px, 95vw);
    max-width: 95vw;
    max-height: min(90vh, 900px);
    background: var(--sc-surface, #fff);
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    z-index: 10001;
    overflow: hidden;
    animation: dlgIn 0.2s ease;
}

@keyframes dlgIn {
    from {
        opacity: 0;
        transform: translate(-50%, calc(-50% + 8px)) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sc-space-5) var(--sc-space-6);
    border-bottom: 1px solid var(--sc-border);
    background: var(--sc-surface-variant);
    flex-shrink: 0;
}

.panel-header-title {
    display: flex;
    align-items: center;
    gap: var(--sc-space-4);
}

.panel-header-title h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 650;
    color: var(--sc-text-primary);
}

.panel-subtitle {
    margin: 0;
    font-size: 0.78rem;
    color: var(--sc-text-secondary);
}

.panel-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--sc-surface-variant);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sc-primary-500);
    border: 1px solid var(--sc-border);
    flex-shrink: 0;
}

.panel-icon .rzi {
    font-size: 1.15rem;
}

.panel-close-btn,
.panel-close {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--sc-text-secondary);
    padding: var(--sc-space-2);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.panel-close-btn:hover,
.panel-close:hover {
    background: var(--sc-gray-200);
    color: var(--sc-text-primary);
}

.panel-close-btn .rzi,
.panel-close .rzi {
    font-size: 1.25rem;
}

.panel-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--sc-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-4);
}

.panel-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--sc-space-3);
    padding: var(--sc-space-4) var(--sc-space-6);
    border-top: 1px solid var(--sc-border);
    background: var(--sc-surface-variant);
    flex-shrink: 0;
}

/* Section + form grid used inside the StaffProfile side-panel editor. */
.sc-panel-section {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-4);
}

.sc-panel-section-title {
    margin: 0 0 var(--sc-space-1) 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sc-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
}

.sc-panel-section-title .rzi {
    font-size: 1rem;
    color: var(--sc-text-secondary);
}

.sc-panel-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sc-space-5) var(--sc-space-4);
}

.sc-panel-form-grid .form-field.full-width {
    grid-column: 1 / -1;
}

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

/* ── Teaching capability editor (per-phase × per-subject grid) used by the
       StaffProfile "Manage Teaching" dialog. Keys are "<subjectId>::<phase>"
       so a teacher can teach the same subject in different phases. */
.teach-hint {
    margin: 0 0 var(--sc-space-3) 0;
    font-size: 0.8rem;
    color: var(--sc-text-secondary);
    line-height: 1.4;
}

.teach-phase-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sc-space-2);
}

.teach-chip {
    appearance: none;
    background: var(--sc-surface, #fff);
    border: 1px solid var(--sc-border);
    color: var(--sc-text-primary);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.teach-chip:hover {
    border-color: var(--sc-primary-400, var(--sc-primary-500));
    color: var(--sc-primary-500, var(--sc-primary-500));
}

.teach-chip.active {
    background: var(--sc-primary-50, rgba(59, 130, 246, 0.08));
    border-color: var(--sc-primary-500);
    color: var(--sc-primary-700, var(--sc-primary-500));
}

.teach-chip.active.solid {
    background: var(--sc-primary-500);
    border-color: var(--sc-primary-500);
    color: var(--sc-text-inverse, #fff);
}

.teach-count {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--sc-text-secondary);
    background: var(--sc-surface-variant);
    border-radius: 999px;
    padding: 2px 8px;
}

.teach-empty {
    margin: 0;
    font-size: 0.8rem;
    color: var(--sc-text-secondary);
    font-style: italic;
}

.teach-subject-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--sc-space-2);
}

.teach-subject {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
    padding: 8px 10px;
    border: 1px solid var(--sc-border);
    border-radius: 10px;
    cursor: pointer;
    background: var(--sc-surface, #fff);
    transition: border-color 0.12s ease, background 0.12s ease;
    user-select: none;
}

.teach-subject:hover {
    border-color: var(--sc-primary-400, var(--sc-primary-500));
}

.teach-subject.on {
    background: var(--sc-primary-50, rgba(59, 130, 246, 0.06));
    border-color: var(--sc-primary-500);
}

.teach-check {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1.5px solid var(--sc-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--sc-text-inverse, #fff);
    background: var(--sc-surface, #fff);
    flex-shrink: 0;
}

.teach-subject.on .teach-check {
    background: var(--sc-primary-500);
    border-color: var(--sc-primary-500);
}

.teach-check .rzi {
    font-size: 0.85rem;
}

.teach-subject-name {
    flex: 1;
    font-size: 0.85rem;
    color: var(--sc-text-primary);
}

.teach-board {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--sc-text-secondary);
    background: var(--sc-surface-variant);
    border-radius: 4px;
    padding: 2px 6px;
    letter-spacing: 0.02em;
}

/* ── Teachers Dashboard ──────────────────────────────────────── */
.teachers-dashboard .td-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--sc-space-4);
    margin: var(--sc-space-5) 0;
}

.teachers-dashboard .td-kpi {
    display: flex;
    gap: var(--sc-space-3);
    align-items: flex-start;
    padding: var(--sc-space-4) var(--sc-space-5);
    background: var(--sc-surface, #fff);
    border: 1px solid var(--sc-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.teachers-dashboard .td-kpi.warn {
    border-color: var(--sc-warning-300, #fbbf24);
    background: var(--sc-warning-50, #fffbeb);
}

.teachers-dashboard .td-kpi.danger {
    border-color: var(--sc-error-300, #fca5a5);
    background: var(--sc-error-50, #fef2f2);
}

.teachers-dashboard .td-kpi-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--sc-primary-50, rgba(59, 130, 246, 0.1));
    color: var(--sc-primary-500, var(--sc-primary-500));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.teachers-dashboard .td-kpi.warn .td-kpi-icon {
    background: var(--sc-warning-100, #fef3c7);
    color: var(--sc-warning-700, #b45309);
}

.teachers-dashboard .td-kpi.danger .td-kpi-icon {
    background: var(--sc-error-100, #fee2e2);
    color: var(--sc-error-700, #b91c1c);
}

.teachers-dashboard .td-kpi-icon .rzi {
    font-size: 1.4rem;
}

.teachers-dashboard .td-kpi-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.teachers-dashboard .td-kpi-label {
    font-size: 0.75rem;
    color: var(--sc-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.teachers-dashboard .td-kpi-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--sc-text-primary);
    line-height: 1.1;
}

.teachers-dashboard .td-kpi-sub {
    font-size: 0.72rem;
    color: var(--sc-text-secondary);
}

/* Top-level dashboard sections now use the shared .sc-card/.sc-card-header/
   .sc-card-body convention (detail-pages.css); this rule only adds the
   between-card rhythm that convention leaves to the parent layout, since
   this page stacks cards directly rather than inside a gapped grid. */
.teachers-dashboard .sc-card {
    margin-bottom: var(--sc-space-5);
}

.teachers-dashboard .td-panel-count {
    margin-left: var(--sc-space-2);
    font-size: 0.7rem;
    font-weight: 600;
    background: var(--sc-warning-100, #fef3c7);
    color: var(--sc-warning-700, #b45309);
    padding: 2px 8px;
    border-radius: 999px;
}

.teachers-dashboard .td-panel-hint {
    margin: 4px 0 0;
    font-size: 0.78rem;
    color: var(--sc-text-secondary);
}

/* Warning cards */
.teachers-dashboard .td-warn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--sc-space-3);
    /* padding removed 2026-08-04 — now lives inside .sc-card-body, which
       already supplies it. */
    margin-top: var(--sc-space-3);
}

.teachers-dashboard .td-warn-card {
    padding: var(--sc-space-3) var(--sc-space-4);
    border: 1px solid var(--sc-warning-300, rgba(252, 211, 77, 0.5));
    background: var(--sc-warning-50, #fffbeb);
    border-radius: 10px;
}

.teachers-dashboard .td-warn-card-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: var(--sc-space-2);
}

.teachers-dashboard .td-warn-name {
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--sc-text-primary);
    cursor: pointer;
}

.teachers-dashboard .td-warn-name:hover {
    color: var(--sc-primary-500);
    text-decoration: underline;
}

.teachers-dashboard .td-warn-meta {
    font-size: 0.72rem;
    color: var(--sc-text-secondary);
}

.teachers-dashboard .td-warn-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.teachers-dashboard .td-warn-chip {
    font-size: 0.7rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 999px;
    color: var(--sc-text-secondary);
    background: var(--sc-surface, #fff);
    border: 1px solid var(--sc-border);
}

.teachers-dashboard .td-warn-chip.warn {
    color: var(--sc-warning-700, #b45309);
    background: var(--sc-warning-100, #fef3c7);
    border-color: var(--sc-warning-300, rgba(252, 211, 77, 0.5));
}

.teachers-dashboard .td-warn-chip.danger {
    color: var(--sc-error-700, #b91c1c);
    background: var(--sc-error-100, #fee2e2);
    border-color: var(--sc-error-300, #fca5a5);
}

/* Workload list — card-style rows. Uses the same visual language as the
   student directory list view (avatar + multi-line block + trailing stats
   + chevron) so the teacher dashboard feels native to this UI. */
.teachers-dashboard .td-list {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-2);
    /* padding removed 2026-08-04 — now lives inside .sc-card-body. */
    margin-top: var(--sc-space-3);
}

.teachers-dashboard .td-list-item {
    display: grid;
    grid-template-columns: minmax(220px, 2.2fr) 80px 100px minmax(180px, 1.4fr) 28px;
    gap: var(--sc-space-4);
    align-items: center;
    padding: var(--sc-space-3) var(--sc-space-4);
    background: var(--sc-surface, #fff);
    border: 1px solid var(--sc-border);
    border-radius: 12px;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.teachers-dashboard .td-list-item:hover {
    border-color: var(--sc-primary-300, var(--sc-primary-500));
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
}

.teachers-dashboard .td-list-item:focus-visible {
    outline: 2px solid var(--sc-primary-500);
    outline-offset: 2px;
}

.teachers-dashboard .td-list-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.teachers-dashboard .td-list-top {
    display: flex;
    align-items: baseline;
    gap: var(--sc-space-2);
    flex-wrap: wrap;
}

.teachers-dashboard .td-list-name {
    font-weight: 600;
    color: var(--sc-text-primary);
    font-size: 0.95rem;
}

.teachers-dashboard .td-list-role {
    font-size: 0.72rem;
    color: var(--sc-text-secondary);
    background: var(--sc-surface-variant);
    padding: 1px 8px;
    border-radius: 999px;
}

.teachers-dashboard .td-list-subjects {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.teachers-dashboard .td-list-empty-meta {
    font-size: 0.75rem;
    color: var(--sc-warning-700, #b45309);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.teachers-dashboard .td-list-empty-meta .rzi {
    font-size: 0.9rem;
}

.teachers-dashboard .td-mini-chip {
    font-size: 0.7rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 999px;
    color: var(--sc-primary-700, var(--sc-primary-500));
    background: var(--sc-primary-50, rgba(59, 130, 246, 0.08));
    border: 1px solid var(--sc-primary-200, rgba(59, 130, 246, 0.3));
}

.teachers-dashboard .td-mini-chip.muted {
    color: var(--sc-text-secondary);
    background: var(--sc-surface-variant);
    border-color: var(--sc-border);
}

.teachers-dashboard .td-list-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
}

.teachers-dashboard .td-list-stat-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--sc-text-primary);
}

.teachers-dashboard .td-list-stat-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sc-text-secondary);
    font-weight: 600;
    margin-top: 2px;
}

.teachers-dashboard .td-list-stat.strong .td-list-stat-value {
    color: var(--sc-primary-700, var(--sc-primary-500));
}

.teachers-dashboard .td-list-capacity {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.teachers-dashboard .td-cap-row {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
}

.teachers-dashboard .td-cap-bar {
    flex: 1;
    height: 8px;
    border-radius: 999px;
    background: var(--sc-surface-variant);
    overflow: hidden;
}

.teachers-dashboard .td-cap-fill {
    height: 100%;
    border-radius: inherit;
    background: var(--sc-success-500, #10b981);
    transition: width 0.3s ease;
}

.teachers-dashboard .td-cap-bar.warn .td-cap-fill {
    background: var(--sc-warning-500, #f59e0b);
}

.teachers-dashboard .td-cap-bar.danger .td-cap-fill {
    background: var(--sc-error-500, #ef4444);
}

.teachers-dashboard .td-cap-pct {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--sc-success-700, #047857);
}

.teachers-dashboard .td-cap-pct.warn {
    color: var(--sc-warning-700, #b45309);
}

.teachers-dashboard .td-cap-pct.danger {
    color: var(--sc-error-700, #b91c1c);
}

.teachers-dashboard .td-cap-text {
    font-size: 0.7rem;
    color: var(--sc-text-secondary);
}

.teachers-dashboard .td-cap-text.muted {
    font-style: italic;
    color: var(--sc-text-disabled);
}

.teachers-dashboard .td-list-chevron {
    color: var(--sc-text-disabled);
    font-size: 1.15rem;
    justify-self: end;
    transition: transform 0.15s ease, color 0.15s ease;
}

.teachers-dashboard .td-list-item:hover .td-list-chevron {
    color: var(--sc-primary-500, var(--sc-primary-500));
    transform: translateX(2px);
}

.teachers-dashboard .td-panel-count.neutral {
    background: var(--sc-surface-variant);
    color: var(--sc-text-secondary);
}

/* ── Composition / distribution panel ──────────────────────── */
.teachers-dashboard .td-comp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--sc-space-4);
    /* padding removed 2026-08-04 — now lives inside .sc-card-body. */
    margin-top: var(--sc-space-3);
}

.teachers-dashboard .td-comp-card {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-3);
    padding: var(--sc-space-4);
    border: 1px solid var(--sc-border);
    border-radius: 12px;
    background: var(--sc-surface, #fff);
}

.teachers-dashboard .td-comp-head {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
    flex-wrap: wrap;
}

.teachers-dashboard .td-comp-head .rzi {
    color: var(--sc-primary-500, var(--sc-primary-500));
    font-size: 1.1rem;
}

.teachers-dashboard .td-comp-title {
    font-weight: 600;
    color: var(--sc-text-primary);
    font-size: 0.9rem;
}

.teachers-dashboard .td-comp-hint {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--sc-text-secondary);
}

.teachers-dashboard .td-comp-empty {
    font-size: 0.78rem;
    color: var(--sc-text-secondary);
    font-style: italic;
    padding: var(--sc-space-3) 0;
}

.teachers-dashboard .td-comp-empty.success {
    color: var(--sc-success-700, #047857);
    font-style: normal;
}

/* Horizontal bar chart (subjects, departments, tenure) */
.teachers-dashboard .td-comp-bars {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.teachers-dashboard .td-comp-bar-row {
    display: grid;
    grid-template-columns: minmax(110px, 1fr) 1fr 32px;
    align-items: center;
    gap: var(--sc-space-2);
    font-size: 0.82rem;
}

.teachers-dashboard .td-comp-bar-label {
    color: var(--sc-text-primary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teachers-dashboard .td-comp-bar-row.warn .td-comp-bar-label {
    color: var(--sc-error-700, #b91c1c);
}

.teachers-dashboard .td-comp-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sc-error-500, #ef4444);
    display: inline-block;
    flex-shrink: 0;
}

.teachers-dashboard .td-comp-bar {
    height: 8px;
    border-radius: 999px;
    background: var(--sc-surface-variant);
    overflow: hidden;
}

.teachers-dashboard .td-comp-bar-fill {
    height: 100%;
    background: var(--sc-primary-500);
    border-radius: inherit;
}

.teachers-dashboard .td-comp-bar-row.warn .td-comp-bar-fill {
    background: var(--sc-error-500, #ef4444);
}

.teachers-dashboard .td-comp-bar-num {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sc-text-primary);
    text-align: right;
}

.teachers-dashboard .td-comp-more {
    font-size: 0.75rem;
    color: var(--sc-text-secondary);
    font-style: italic;
    text-align: center;
    padding-top: 4px;
}

/* Stacked-pill chart (phase distribution) */
.teachers-dashboard .td-comp-stack {
    display: flex;
    height: 14px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--sc-surface-variant);
}

.teachers-dashboard .td-comp-stack-seg {
    height: 100%;
}

.teachers-dashboard .td-comp-stack-seg.phase-fp, .teachers-dashboard .td-comp-legend-dot.phase-fp {
    background: #3b82f6;
}

.teachers-dashboard .td-comp-stack-seg.phase-ip, .teachers-dashboard .td-comp-legend-dot.phase-ip {
    background: #10b981;
}

.teachers-dashboard .td-comp-stack-seg.phase-sp, .teachers-dashboard .td-comp-legend-dot.phase-sp {
    background: #f59e0b;
}

.teachers-dashboard .td-comp-stack-seg.phase-fet, .teachers-dashboard .td-comp-legend-dot.phase-fet {
    background: #8b5cf6;
}

.teachers-dashboard .td-comp-stack-seg.phase-other, .teachers-dashboard .td-comp-legend-dot.phase-other {
    background: #94a3b8;
}

.teachers-dashboard .td-comp-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sc-space-3);
}

.teachers-dashboard .td-comp-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--sc-text-secondary);
}

.teachers-dashboard .td-comp-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
}

.teachers-dashboard .td-comp-legend-label {
    color: var(--sc-text-primary);
    font-weight: 500;
}

.teachers-dashboard .td-comp-legend-num {
    color: var(--sc-text-secondary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Status pill grid */
.teachers-dashboard .td-comp-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: var(--sc-space-2);
}

.teachers-dashboard .td-comp-status-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--sc-space-3);
    border-radius: 10px;
    background: var(--sc-surface-variant);
    border: 1px solid var(--sc-border);
}

.teachers-dashboard .td-comp-status-pill.ok {
    background: var(--sc-success-50, #ecfdf5);
    border-color: var(--sc-success-300, #6ee7b7);
}

.teachers-dashboard .td-comp-status-pill.warn {
    background: var(--sc-warning-50, #fffbeb);
    border-color: var(--sc-warning-300, #fcd34d);
}

.teachers-dashboard .td-comp-status-pill.danger {
    background: var(--sc-error-50, #fef2f2);
    border-color: var(--sc-error-300, #fca5a5);
}

.teachers-dashboard .td-comp-status-num {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sc-text-primary);
}

.teachers-dashboard .td-comp-status-name {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    color: var(--sc-text-secondary);
}

/* Single-point-of-failure chips */
.teachers-dashboard .td-comp-spof {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.teachers-dashboard .td-comp-spof-chip {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--sc-warning-700, #b45309);
    background: var(--sc-warning-50, #fffbeb);
    border: 1px solid var(--sc-warning-300, #fcd34d);
    padding: 3px 10px;
    border-radius: 999px;
}

.teachers-dashboard .td-comp-spof-more {
    font-size: 0.75rem;
    color: var(--sc-text-secondary);
    align-self: center;
}

/* KPI body — allow smaller fraction text inside the big number */
.teachers-dashboard .td-kpi-value small {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--sc-text-secondary);
    margin-left: 4px;
}

/* ── Coverage gap analysis ─────────────────────────────────── */
.teachers-dashboard .td-panel-coverage .sc-card-header>.rzi {
    color: var(--sc-warning-600, #d97706);
    background: var(--sc-warning-100, #fef3c7);
}

.teachers-dashboard .td-coverage-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sc-space-4);
    /* padding removed 2026-08-04 — now lives inside .sc-card-body. */
    margin-top: var(--sc-space-3);
}

.teachers-dashboard .td-coverage-headline {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: var(--sc-space-5);
    padding: var(--sc-space-4) var(--sc-space-5);
    border-radius: 14px;
    border: 1px solid var(--sc-border);
    background: var(--sc-surface, #fff);
}

.teachers-dashboard .td-coverage-headline.ok {
    border-color: var(--sc-success-300, #6ee7b7);
    background: var(--sc-success-50, #ecfdf5);
}

.teachers-dashboard .td-coverage-headline.danger {
    border-color: var(--sc-error-300, #fca5a5);
    background: var(--sc-error-50, #fef2f2);
}

.teachers-dashboard .td-coverage-headline-num {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 2rem;
    font-weight: 700;
    color: var(--sc-text-primary);
}

.teachers-dashboard .td-coverage-headline.danger .td-coverage-headline-num {
    color: var(--sc-error-700, #b91c1c);
}

.teachers-dashboard .td-coverage-headline.ok .td-coverage-headline-num {
    color: var(--sc-success-700, #047857);
}

.teachers-dashboard .td-coverage-divider {
    color: var(--sc-text-secondary);
    font-weight: 500;
}

.teachers-dashboard .td-coverage-arrow {
    font-size: 1.4rem;
    color: var(--sc-error-600, #dc2626);
}

.teachers-dashboard .td-coverage-headline-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.teachers-dashboard .td-coverage-headline-label {
    font-weight: 600;
    color: var(--sc-text-primary);
    font-size: 0.95rem;
}

.teachers-dashboard .td-coverage-headline-meta {
    font-size: 0.85rem;
    color: var(--sc-text-secondary);
}

.teachers-dashboard .td-coverage-headline-meta strong {
    color: var(--sc-error-700, #b91c1c);
    margin-left: 4px;
}

.teachers-dashboard .td-coverage-card {
    padding: var(--sc-space-4);
    border: 1px solid var(--sc-border);
    border-radius: 12px;
    background: var(--sc-surface, #fff);
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-3);
}

.teachers-dashboard .td-coverage-card.danger {
    border-color: var(--sc-error-300, #fca5a5);
    background: var(--sc-error-50, #fef2f2);
}

.teachers-dashboard .td-coverage-card.warn {
    border-color: var(--sc-warning-300, #fcd34d);
    background: var(--sc-warning-50, #fffbeb);
}

.teachers-dashboard .td-coverage-card-head {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
}

.teachers-dashboard .td-coverage-card.danger .td-coverage-card-head .rzi {
    color: var(--sc-error-700, #b91c1c);
}

.teachers-dashboard .td-coverage-card.warn .td-coverage-card-head .rzi {
    color: var(--sc-warning-700, #b45309);
}

.teachers-dashboard .td-coverage-card-title {
    font-weight: 600;
    color: var(--sc-text-primary);
    font-size: 0.9rem;
    flex: 1;
}

.teachers-dashboard .td-coverage-card-count {
    font-size: 0.72rem;
    font-weight: 700;
    background: var(--sc-surface, #fff);
    color: var(--sc-text-primary);
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid var(--sc-border);
}

.teachers-dashboard .td-coverage-card-hint {
    margin: 0;
    font-size: 0.78rem;
    color: var(--sc-text-secondary);
    line-height: 1.4;
}

.teachers-dashboard .td-coverage-rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.teachers-dashboard .td-coverage-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sc-space-3);
    padding: 6px 10px;
    background: var(--sc-surface, #fff);
    border-radius: 8px;
    border: 1px solid var(--sc-border);
}

.teachers-dashboard .td-coverage-row-name {
    font-weight: 500;
    color: var(--sc-text-primary);
    font-size: 0.85rem;
}

.teachers-dashboard .td-coverage-row-meta {
    font-size: 0.75rem;
    color: var(--sc-text-secondary);
    text-align: right;
}

.teachers-dashboard .td-coverage-row-meta strong {
    color: var(--sc-warning-700, #b45309);
}

.teachers-dashboard .td-coverage-row-more {
    justify-content: center;
    color: var(--sc-text-secondary);
    font-size: 0.75rem;
    font-style: italic;
    background: transparent;
    border-style: dashed;
}

@media (max-width: 900px) {
    .teachers-dashboard .td-coverage-grid {
        grid-template-columns: 1fr;
    }

    .teachers-dashboard .td-list-item {
        grid-template-columns: 1fr 70px 28px;
    }

    .teachers-dashboard .td-list-stat.strong,
    .teachers-dashboard .td-list-capacity {
        grid-column: 1 / -1;
    }
}

/* Imbalance cards */
.teachers-dashboard .td-imbalance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: var(--sc-space-3);
    /* padding removed 2026-08-04 — now lives inside .sc-card-body. */
    margin-top: var(--sc-space-3);
}

.teachers-dashboard .td-imbalance-card {
    border: 1px solid var(--sc-border);
    border-radius: 10px;
    padding: var(--sc-space-3) var(--sc-space-4);
    background: var(--sc-surface, #fff);
}

.teachers-dashboard .td-imbalance-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--sc-space-2);
}

.teachers-dashboard .td-imbalance-subject {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--sc-text-primary);
}

.teachers-dashboard .td-imbalance-spread {
    font-size: 0.7rem;
    color: var(--sc-warning-700, #b45309);
    font-weight: 500;
}

.teachers-dashboard .td-imbalance-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.teachers-dashboard .td-imbalance-row {
    display: grid;
    grid-template-columns: minmax(110px, 1fr) 1fr 40px;
    align-items: center;
    gap: var(--sc-space-3);
}

.teachers-dashboard .td-imbalance-name {
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    font-size: 0.82rem;
    color: var(--sc-text-primary);
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teachers-dashboard .td-imbalance-name:hover {
    color: var(--sc-primary-500);
    text-decoration: underline;
}

.teachers-dashboard .td-imbalance-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--sc-surface-variant);
    overflow: hidden;
}

.teachers-dashboard .td-imbalance-fill {
    height: 100%;
    background: var(--sc-primary-500);
}

.teachers-dashboard .td-imbalance-num {
    font-size: 0.82rem;
    font-weight: 600;
    text-align: right;
    color: var(--sc-text-primary);
}

/* Base Layout */
.sc-page {
    font-family: var(--sc-font-sans, 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
}

/* Add bottom padding when edit form is active to prevent action bar overlap */
.sc-page:has(.edit-actions-bar),
.sc-page.has-action-bar {
    padding-bottom: 100px;
}

/* =========================================
   Modern Breadcrumb
   ========================================= */
.modern-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

.modern-breadcrumb .breadcrumb-link {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--sc-text-secondary);
    text-decoration: none;
    transition: color 0.15s ease;
}

.modern-breadcrumb .breadcrumb-link:hover {
    color: var(--sc-primary-500);
}

.modern-breadcrumb .breadcrumb-separator {
    color: var(--sc-gray-300);
    font-size: 1rem;
}

.modern-breadcrumb .breadcrumb-current {
    color: var(--sc-text-primary);
    font-weight: 500;
}

/* =========================================
   Modern Hero Header (List/Directory pages)
   ========================================= */
.modern-hero-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sc-hero-padding-y, 2rem) var(--sc-hero-padding-x, 2.5rem);
    background: var(--theme-primary-500);
    border-radius: var(--sc-hero-radius, 16px);
    color: var(--sc-text-inverse);
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}

.modern-hero-header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 60%;
    height: 200%;
    background: transparent;
    pointer-events: none;
}

.modern-hero-header::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 40%;
    height: 150%;
    background: transparent;
    pointer-events: none;
}

.hero-content {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    z-index: 1;
}

.hero-icon {
    width: 72px;
    height: 72px;
    background: var(--sc-hero-icon-bg, rgba(255, 255, 255, 0.15));
    backdrop-filter: blur(10px);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--sc-hero-border);
}

.hero-icon .rzi {
    font-size: 2.25rem;
    color: var(--sc-text-inverse);
}

.hero-title-section h1 {
    margin: 0;
    font-size: var(--sc-hero-title-size, 2rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    color: var(--sc-text-inverse);
}

.hero-title-section p {
    margin: 0.5rem 0 0 0;
    font-size: var(--sc-hero-subtitle-size, 1rem);
    font-weight: 400;
    color: var(--sc-hero-text-muted, rgba(255, 255, 255, 0.9));
}

.hero-stats {
    display: flex;
    gap: 1rem;
    z-index: 1;
}

.hero-stat {
    background: var(--sc-hero-stat-bg, rgba(255, 255, 255, 0.12));
    backdrop-filter: blur(10px);
    border: 1px solid var(--sc-hero-border);
    border-radius: 10px;
    padding: 1rem 1.5rem;
    text-align: center;
    min-width: 100px;
    transition: all var(--sc-transition-slow, 0.3s ease);
    color: var(--sc-text-inverse);
}

.hero-stat:hover {
    background: var(--sc-hero-stat-bg-hover, rgba(255, 255, 255, 0.18));
    transform: translateY(-2px);
}

/* Hero stat variants removed — all stats use uniform token styling */

.hero-stat-value {
    font-size: var(--sc-hero-stat-value-size, 2rem);
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0.25rem;
    color: var(--sc-text-inverse);
}

.hero-stat-label {
    font-size: var(--sc-hero-stat-label-size, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
    color: var(--sc-hero-text-muted, rgba(255, 255, 255, 0.9));
}

/* =========================================
   Modern Profile Hero (Shared)
   ========================================= */
.modern-profile-hero {
    position: relative;
    background: none;
    border: none;
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 2rem;
}

.modern-profile-hero::before {
    display: none;
}

.modern-profile-hero::after {
    display: none;
}

.profile-hero-content {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 2rem 2.5rem;
    position: relative;
    z-index: 1;
}

.profile-avatar-large {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(var(--sc-primary-rgb), 0.08);
    backdrop-filter: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--sc-hero-border-strong);
    overflow: visible;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.profile-avatar-large:hover {
    transform: scale(1.05);
}

.profile-avatar-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.profile-avatar-large span {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--sc-primary-500);
    text-shadow: none;
}

.profile-avatar-large .rzi {
    font-size: 60px;
    color: var(--sc-primary-500);
}

.avatar-status-dot {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid var(--sc-surface);
}

.avatar-status-dot.active {
    background: var(--sc-success-500);
}

.avatar-status-dot.pending,
.avatar-status-dot.invited {
    background: var(--sc-warning-500);
}

.avatar-status-dot.inactive,
.avatar-status-dot.deactivated {
    background: var(--sc-text-secondary);
}

.avatar-edit-btn {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--sc-surface);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
}

.avatar-edit-btn:hover {
    transform: scale(1.15) rotate(15deg);
    background: var(--sc-primary-500);
}

.avatar-edit-btn:hover .material-icons {
    color: var(--sc-text-inverse);
}

.avatar-edit-btn .material-icons {
    font-size: 1.1rem;
    color: var(--sc-primary-500);
    transition: color 0.3s ease;
}

.profile-hero-info {
    flex: 1;
}

.profile-hero-info h1 {
    margin: 0 0 0.5rem 0;
    font-size: 2rem;
    font-weight: 800;
    color: var(--rz-text-color);
    text-shadow: none;
    letter-spacing: -0.5px;
}

.profile-hero-subtitle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--sc-text-secondary);
    font-size: 1rem;
    margin-bottom: 1rem;
}

.profile-hero-subtitle .rzi,
.profile-hero-subtitle .material-icons {
    font-size: 1.1rem;
    opacity: 0.85;
}

.profile-hero-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.profile-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 1rem;
    border-radius: var(--sc-radius-full);
    font-size: 0.8rem;
    font-weight: 600;
    background: rgba(var(--sc-primary-rgb), 0.08);
    color: var(--rz-text-color);
    backdrop-filter: none;
    border: none;
}

.profile-hero-badge.success {
    background: var(--sc-success-50);
    color: var(--sc-success-600);
}

.profile-hero-badge.warning {
    background: var(--sc-warning-50);
    color: var(--sc-warning-600);
}

.profile-hero-badge.danger {
    background: var(--sc-danger-50);
    color: var(--sc-danger-600);
}

.profile-hero-badge .rzi,
.profile-hero-badge .material-icons {
    font-size: 0.9rem;
}

/* Teacher Profile Button in Hero */
.profile-hero-teacher-action {
    margin-top: 1rem;
}

.teacher-profile-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    background: rgba(var(--sc-primary-rgb), 0.08);
    border: 1px solid var(--sc-hero-border);
    border-radius: var(--sc-radius-lg);
    color: var(--rz-text-color);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: none;
}

.teacher-profile-btn:hover {
    background: rgba(var(--sc-primary-rgb), 0.12);
    transform: translateX(4px);
}

.teacher-profile-btn .rzi {
    font-size: 1.1rem !important;
}

.teacher-profile-btn .rzi:last-child {
    font-size: 1rem !important;
    opacity: 0.8;
}

.profile-hero-actions {
    display: flex;
    gap: 0.75rem;
    position: relative;
    z-index: 1;
}

.edit-mode-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.85rem;
    border-radius: var(--sc-radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--sc-warning-50);
    color: var(--sc-warning-700);
    border: 1px solid var(--sc-warning-200);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.edit-mode-label .material-icons {
    font-size: 0.875rem;
}

/* =========================================
   Edit Hero Section (Legacy)
   ========================================= */
.edit-hero-modern {
    position: relative;
    background: var(--sc-surface);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 2rem;
    border: 1px solid var(--sc-gray-200);
}

.edit-hero-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: var(--theme-primary-500);
    opacity: 0.95;
}

.edit-hero-content {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 1.5rem;
    padding: 1.5rem 2rem 2rem;
    padding-top: 60px;
}

.edit-avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.edit-avatar-wrapper {
    position: relative;
    width: 110px;
    height: 110px;
}

.edit-avatar-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--sc-surface);
}

.edit-avatar-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--theme-primary-500);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sc-text-inverse);
    font-size: 2.5rem;
    font-weight: 600;
    border: 4px solid var(--sc-surface);
}

.edit-avatar-upload {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 36px;
    height: 36px;
    background: var(--sc-surface);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid var(--sc-gray-200);
    transition: all 0.2s ease;
    color: var(--sc-primary-500);
}

.edit-avatar-upload:hover {
    background: var(--sc-primary-500);
    color: var(--sc-text-inverse);
    border-color: var(--sc-primary-500);
    transform: scale(1.08);
}

.edit-avatar-upload .rzi {
    font-size: 18px;
}

.edit-avatar-status {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 3px solid var(--sc-surface);
}

.edit-avatar-status.online {
    background: var(--sc-success-500);
}

.edit-avatar-status.away {
    background: var(--sc-warning-500);
}

.edit-avatar-status.offline {
    background: var(--sc-gray-400);
}

.upload-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--sc-info-500);
    padding: 0.25rem 0.75rem;
    background: var(--sc-info-50);
    border-radius: 16px;
}

.upload-indicator.error {
    color: var(--sc-danger-500);
    background: var(--sc-danger-50);
}

.edit-hero-info {
    flex: 1;
    padding-bottom: 0.5rem;
}

.edit-hero-title-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.edit-hero-title-row h1 {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--sc-text-primary);
}

.edit-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    border-radius: 16px;
    font-size: 0.8rem;
    font-weight: 500;
}

.edit-hero-badge .rzi {
    font-size: 14px;
}

.edit-hero-badge.success {
    background: var(--sc-success-50);
    color: var(--sc-success-600);
}

.edit-hero-badge.warning {
    background: var(--sc-warning-50);
    color: var(--sc-warning-600);
}

.edit-hero-badge.neutral {
    background: var(--sc-gray-100);
    color: var(--sc-gray-600);
}

.edit-hero-subtitle {
    color: var(--sc-text-secondary);
    margin: 0 0 0.75rem 0;
    font-size: 0.95rem;
}

.edit-hero-subtitle strong {
    color: var(--sc-text-primary);
}

.edit-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.85rem;
    color: var(--sc-text-secondary);
}

.meta-item .rzi {
    font-size: 16px;
    color: var(--sc-gray-400);
}

/* =========================================
   Edit Content Grid
   ========================================= */
.edit-content-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.edit-content-grid > .edit-column {
    display: contents;
}

.edit-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* =========================================
   Glass Card Component
   ========================================= */
.glass-card {
    background: var(--sc-surface);
    border-radius: 12px;
    border: 1px solid var(--sc-border);
    overflow: hidden;
}

.glass-card:hover {}

.glass-card.info {
    background: var(--sc-gray-50);
}

.glass-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--sc-border);
    background: var(--sc-surface-variant);
}

.glass-card-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--sc-text-primary);
}

.header-badge {
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.625rem;
    border-radius: 12px;
    background: var(--sc-gray-100);
    color: var(--sc-gray-500);
}

.icon-box {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-box .rzi {
    font-size: 1.125rem;
}

.icon-box.info {
    background: var(--sc-stat-sky-bg);
    color: var(--sc-stat-sky);
}

.icon-box.orange {
    background: var(--sc-stat-amber-bg);
    color: var(--sc-stat-amber);
}

.icon-box.primary {
    background: rgba(var(--sc-primary-rgb), 0.12);
    color: var(--sc-primary-500);
}

.icon-box.warning {
    background: var(--sc-warning-50);
    color: var(--sc-warning-500);
}

.icon-box.success {
    background: var(--sc-success-50);
    color: var(--sc-success-500);
}

.icon-box.neutral {
    background: var(--sc-primary-100);
    color: var(--sc-gray-500);
}

.glass-card-body {
    padding: 1.25rem;
}

/* =========================================
   Form Styling
   ========================================= */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

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

.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-field.full-width {
    grid-column: 1 / -1;
}

.form-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--sc-text-primary);
}

.form-label.required::after {
    content: " *";
    color: var(--sc-danger-500);
}

.form-input {
    width: 100% !important;
}

.form-input.with-icon {
    padding-left: 2.5rem !important;
}

.input-with-icon {
    position: relative;
}

.input-icon {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sc-gray-400);
    font-size: 18px;
    z-index: 1;
    pointer-events: none;
}

.form-textarea {
    width: 100% !important;
    min-height: 120px;
    resize: vertical;
}

.form-hint {
    font-size: 0.75rem;
    color: var(--sc-text-secondary);
    line-height: 1.4;
}

.form-hint-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.char-counter {
    font-family: var(--sc-font-mono);
    font-size: 0.7rem;
    color: var(--sc-gray-400);
    flex-shrink: 0;
}

.char-counter.warning {
    color: var(--sc-warning-500);
    font-weight: 500;
}

.form-validator {
    font-size: 0.75rem !important;
}

/* Input Overrides for Radzen */
.glass-card .rz-textbox,
.glass-card .rz-dropdown,
.glass-card .rz-multiselect,
.glass-card .rz-textarea {
    border-radius: 10px !important;
    border: 1.5px solid var(--sc-gray-200) !important;
    transition: all 0.2s ease !important;
    background: var(--sc-surface) !important;
}

.glass-card .rz-textbox:hover,
.glass-card .rz-dropdown:hover,
.glass-card .rz-multiselect:hover,
.glass-card .rz-textarea:hover {
    border-color: var(--sc-gray-300) !important;
}

.glass-card .rz-textbox:focus,
.glass-card .rz-dropdown:focus,
.glass-card .rz-multiselect:focus,
.glass-card .rz-textarea:focus,
.glass-card .rz-state-focused {
    border-color: var(--sc-primary-500) !important;
}

/* =========================================
   Info Grid (Read-only)
   ========================================= */
.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.info-label {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--sc-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.info-value {
    font-size: 0.9rem;
    color: var(--sc-text-primary);
}

.info-value.mono {
    font-family: var(--sc-font-mono);
    font-size: 0.8rem;
    background: var(--sc-gray-100);
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    display: inline-block;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-badge.success {
    background: var(--sc-success-50);
    color: var(--sc-success-600);
}

.status-badge.warning {
    background: var(--sc-warning-50);
    color: var(--sc-warning-600);
}

.status-badge.neutral {
    background: var(--sc-gray-100);
    color: var(--sc-gray-600);
}

/* =========================================
   Selected Tags
   ========================================= */
.selected-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--sc-gray-200);
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 16px;
    font-size: 0.8rem;
    font-weight: 500;
}

.tag .rzi {
    font-size: 14px;
}

.tag.subject {
    background: rgba(34, 197, 94, 0.08);
    color: var(--sc-success-600);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

/* =========================================
   Loading & Empty States
   ========================================= */
.loading-state {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--sc-gray-50);
    border-radius: 10px;
    color: var(--sc-text-secondary);
    font-size: 0.875rem;
}

.empty-state-mini {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3rem 2rem;
    background: var(--sc-gray-50);
    border-radius: 12px;
    text-align: center;
}

.empty-state-mini .rzi {
    font-size: 2.5rem;
    color: var(--theme-primary-500);
    background: var(--sc-primary-50);
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.empty-state-mini p {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--sc-gray-500);
}

/* =========================================
   Sticky Action Bar
   ========================================= */
.edit-actions-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--sc-surface);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--sc-border);
    z-index: 1000;
}

.actions-bar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1600px;
    margin: 0 auto;
    padding: 1rem 2rem;
}

.actions-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--sc-text-secondary);
    font-size: 0.9rem;
}

.actions-info .rzi {
    font-size: 20px;
    color: var(--sc-gray-400);
}

.actions-buttons {
    display: flex;
    gap: 0.75rem;
}

.btn-secondary,
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn-secondary {
    background: var(--sc-surface);
    border: 1.5px solid var(--sc-gray-300);
    color: var(--sc-text-primary);
}

.btn-secondary:hover {
    background: var(--sc-gray-50);
    border-color: var(--sc-gray-400);
}

.btn-primary {
    background: var(--theme-primary-500);
    color: var(--sc-text-inverse);
}

.btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
}

.btn-primary:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-secondary .rzi,
.btn-primary .rzi {
    font-size: 18px;
}

/* =========================================
   Modern Empty State
   ========================================= */
.modern-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 2rem;
    background: var(--sc-surface);
    border-radius: 16px;
    border: 1px solid var(--sc-gray-200);
}

.modern-empty-state .empty-icon {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.modern-empty-state .empty-icon .rzi {
    font-size: 2.75rem;
}

.modern-empty-state .empty-icon.danger {
    background: var(--sc-danger-50);
    color: var(--sc-danger-500);
}

.modern-empty-state h2 {
    font-size: 1.375rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    color: var(--sc-text-primary);
}

.modern-empty-state p {
    color: var(--sc-text-secondary);
    max-width: 400px;
    margin: 0 0 1.5rem 0;
    line-height: 1.5;
}

/* =========================================
   Animations
   ========================================= */
.animate-in {
    animation: fadeInUp 0.4s ease-out forwards;
    opacity: 0;
}

.stagger-1 {
    animation-delay: 0.1s;
}

.stagger-2 {
    animation-delay: 0.2s;
}

.stagger-3 {
    animation-delay: 0.3s;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

/* =========================================
   Dark Mode Overrides
   ========================================= */
[data-theme*="-dark"] .modern-empty-state .empty-state-icon {
    background: #0f172a;
}

[data-theme*="-dark"] .modern-empty-state .empty-state-icon .rzi {
    color: var(--sc-gray-300);
}

[data-theme*="-dark"] .modern-breadcrumb .breadcrumb-link:hover {
    background: #0f172a;
}

/* Stat card icons — dark mode */
[data-theme*="-dark"] .stat-icon,
[data-theme*="-dark"] .stat-icon.success,
[data-theme*="-dark"] .stat-icon.danger,
[data-theme*="-dark"] .stat-icon.warning,
[data-theme*="-dark"] .stat-icon.info {
    background: #0f172a;
    color: var(--sc-gray-300);
}

[data-theme*="-dark"] .stat-icon .rzi,
[data-theme*="-dark"] .stat-icon.success .rzi,
[data-theme*="-dark"] .stat-icon.danger .rzi,
[data-theme*="-dark"] .stat-icon.warning .rzi,
[data-theme*="-dark"] .stat-icon.info .rzi {
    color: var(--sc-gray-300);
}

/* Stat icon wrappers — dark mode */
[data-theme*="-dark"] .stat-icon-wrapper,
[data-theme*="-dark"] .stat-icon-wrapper.sky,
[data-theme*="-dark"] .stat-icon-wrapper.orange,
[data-theme*="-dark"] .stat-icon-wrapper.emerald,
[data-theme*="-dark"] .stat-icon-wrapper.amber,
[data-theme*="-dark"] .stat-icon-wrapper.primary {
    background: #0f172a;
    color: var(--sc-gray-300);
}

[data-theme*="-dark"] .stat-icon-wrapper .rzi,
[data-theme*="-dark"] .stat-icon-wrapper.sky .rzi,
[data-theme*="-dark"] .stat-icon-wrapper.orange .rzi,
[data-theme*="-dark"] .stat-icon-wrapper.emerald .rzi,
[data-theme*="-dark"] .stat-icon-wrapper.amber .rzi,
[data-theme*="-dark"] .stat-icon-wrapper.primary .rzi {
    color: var(--sc-gray-300);
}

/* Modern avatar — dark mode */
[data-theme*="-dark"] .modern-avatar,
[data-theme*="-dark"] .modern-avatar.default {
    background: #374151;
    color: var(--sc-gray-300);
}

/* Glass card — dark mode */
[data-theme*="-dark"] .glass-card {
    background: var(--sc-surface, #1f2937);
    border-color: rgba(255, 255, 255, 0.06);
}

[data-theme*="-dark"] .glass-card-header {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* Glass card title icons — dark mode */
[data-theme*="-dark"] .glass-card-title .rzi {
    color: var(--sc-gray-300);
}

/* =========================================
   Responsive Adjustments
   ========================================= */
@media (max-width: 768px) {

    .edit-hero-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 1rem;
        padding-top: 50px;
    }

    .edit-hero-info {
        align-items: center;
    }

    .edit-hero-title-row {
        flex-direction: column;
        gap: 0.5rem;
    }

    .edit-hero-meta {
        justify-content: center;
    }

    .actions-bar-content {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }

    .actions-info {
        display: none;
    }

    .actions-buttons {
        width: 100%;
    }

    .actions-buttons button {
        flex: 1;
        justify-content: center;
    }
}

/* =========================================
   Legacy Support (Old classes still used elsewhere)
   ========================================= */
.modern-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sc-gray-100);
    color: var(--sc-gray-700);
    font-weight: 600;
    border-radius: 10px;
    flex-shrink: 0;
    border: 2px solid var(--sc-gray-200);
}

.modern-avatar {
    width: 40px;
    height: 40px;
    font-size: 0.875rem;
}

.modern-avatar.xs {
    width: 28px;
    height: 28px;
    font-size: 0.7rem;
    border-radius: 8px;
    border-width: 1px;
}

.modern-avatar.small {
    width: 36px;
    height: 36px;
    font-size: 0.8rem;
    border-radius: 9px;
    border-width: 1px;
}

.modern-avatar.medium {
    width: 48px;
    height: 48px;
    font-size: 1rem;
}

.modern-avatar.large {
    width: 72px;
    height: 72px;
    font-size: 1.5rem;
}

/* Data-grid staff cell layout (used by Reviews, Goals, Development tables) */
.grid-staff-cell {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
}

.grid-staff-cell .staff-details {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.grid-staff-cell .staff-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sc-gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grid-staff-cell .staff-meta {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--sc-gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modern-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.modern-badge .rzi,
.modern-badge .rz-icon {
    font-size: 0.875rem;
    line-height: 1;
}

.modern-badge.success {
    background: var(--sc-success-50);
    color: var(--sc-success-600);
}

.modern-badge.warning {
    background: var(--sc-warning-50);
    color: var(--sc-warning-600);
}

.modern-badge.neutral,
.modern-badge.gray {
    background: var(--sc-gray-100);
    color: var(--sc-gray-700);
}

.modern-badge.info {
    background: var(--sc-info-50, #eff6ff);
    color: var(--sc-info-600, #2563eb);
}

.modern-badge.danger {
    background: var(--sc-danger-50, #fef2f2);
    color: var(--sc-danger-600, #dc2626);
}

.modern-badge.orange {
    background: #fff7ed;
    color: #c2410c;
}

.modern-badge.indigo {
    background: var(--sc-primary-50);
    color: var(--sc-badge-blue-text);
}

.modern-badge.pink {
    background: var(--sc-badge-pink-bg);
    color: var(--sc-badge-pink-text);
}

/* =========================================
   Modern Button Styles
   ========================================= */
.modern-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    text-decoration: none;
}

.modern-btn.primary {
    background: var(--theme-primary-500);
    color: var(--sc-text-inverse);
}

.modern-btn.primary:hover {
    transform: translateY(-1px);
}

.modern-btn.secondary {
    background: var(--sc-surface);
    border: 1.5px solid var(--sc-gray-300);
    color: var(--sc-text-primary);
}

.modern-btn.secondary:hover {
    background: var(--sc-gray-50);
    border-color: var(--sc-gray-400);
}

.modern-btn.ghost {
    background: transparent;
    color: var(--sc-primary-500);
}

.modern-btn.ghost:hover {
    background: var(--sc-primary-50);
}

.modern-btn-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.modern-btn-small.primary {
    background: var(--sc-primary-500);
    color: var(--sc-text-inverse);
}

.modern-btn-small.primary:hover {
    background: var(--sc-primary-500);
}

.text-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.text-btn.danger {
    color: var(--sc-danger-500);
}

.text-btn.danger:hover {
    background: var(--sc-danger-50);
}

.text-btn.primary {
    color: var(--sc-primary-500);
}

.text-btn.primary:hover {
    background: var(--sc-primary-50);
}

/* =========================================
   Biography Styles
   ========================================= */
.biography-content {
    margin-bottom: 1rem;
}

.biography-text {
    color: var(--sc-text-primary);
    line-height: 1.7;
    font-size: 0.9rem;
    margin: 0;
    white-space: pre-wrap;
}

.biography-actions {
    display: flex;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--sc-gray-100);
}

.empty-biography {
    text-align: center;
    padding: 1.5rem;
    background: var(--sc-gray-50);
    border-radius: 12px;
    border: 2px dashed var(--sc-gray-200);
}

.empty-biography .empty-bio-icon {
    font-size: 2rem;
    color: var(--sc-gray-300);
    margin-bottom: 0.5rem;
}

.empty-biography p {
    color: var(--sc-text-secondary);
    font-size: 0.875rem;
    margin: 0 0 1rem 0;
}

/* =========================================
   Staff Profile Page - Modern Tabs
   ========================================= */
.modern-tabs {
    background: var(--sc-surface);
    border-radius: 12px;
    border: 1px solid var(--sc-gray-200);
    overflow: hidden;
    font-family: var(--sc-font-sans, 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
}

.modern-tabs ::deep .rz-tabview-nav {
    background: var(--sc-gray-50);
    border-bottom: 1px solid var(--sc-gray-200);
    padding: 0 1.5rem;
    gap: 0;
    font-family: var(--sc-font-sans, 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif) !important;
}

.modern-tabs ::deep .rz-tabview-nav *:not(.rzi):not([class*="material"]) {
    font-family: var(--sc-font-sans, 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif) !important;
}

/* Maximum specificity for modern-tabs li elements */
.modern-tabs ::deep .rz-tabview-nav li.rz-tabview-selected {
    color: var(--sc-primary-700) !important;
}

.modern-tabs ::deep .rz-tabview-nav li.rz-tabview-selected a,
.modern-tabs ::deep .rz-tabview-nav li.rz-tabview-selected a *,
.modern-tabs ::deep .rz-tabview-nav li.rz-tabview-selected button,
.modern-tabs ::deep .rz-tabview-nav li.rz-tabview-selected button * {
    color: var(--sc-primary-700) !important;
}

.modern-tabs ::deep .rz-tabview-nav li.rz-tabview-selected a .rzi,
.modern-tabs ::deep .rz-tabview-nav li.rz-tabview-selected button .rzi {
    color: var(--theme-primary-500) !important;
}

.modern-tabs ::deep .rz-tabview-panels {
    padding: 0;
}

/* Tab Content Area */
.tab-content-modern {
    padding: 1.5rem;
}

.tab-header-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1.25rem;
}

/* =========================================
   Staff Profile - Stats Grid
   ========================================= */
.modern-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* Stat card icon (attendance counters, etc.) */
.stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--sc-gray-200);
}

.stat-icon .rzi {
    font-size: 1.5rem;
}

.stat-icon.success {
    background: var(--sc-stat-icon-success-bg);
    color: var(--sc-stat-icon-success-color);
}

.stat-icon.success .rzi {
    color: var(--sc-stat-icon-success-color);
}

.stat-icon.danger {
    background: var(--sc-stat-icon-danger-bg);
    color: var(--sc-stat-icon-danger-color);
}

.stat-icon.danger .rzi {
    color: var(--sc-stat-icon-danger-color);
}

.stat-icon.warning {
    background: var(--sc-stat-icon-warning-bg);
    color: var(--sc-stat-icon-warning-color);
}

.stat-icon.warning .rzi {
    color: var(--sc-stat-icon-warning-color);
}

.stat-icon.info {
    background: var(--sc-stat-icon-primary-bg);
    color: var(--sc-stat-icon-primary-color);
}

.stat-icon.info .rzi {
    color: var(--sc-stat-icon-primary-color);
}

.stat-content {
    flex: 1;
    min-width: 0;
}

.stat-content .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sc-text-primary);
    line-height: 1.2;
}

.stat-content .stat-label {
    font-size: 0.8rem;
    color: var(--sc-text-secondary);
    margin-top: 0.125rem;
}

.modern-stat-card {
    background: var(--sc-surface);
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid var(--sc-gray-200);
    transition: all 0.2s ease;
    position: relative;
}

.modern-stat-card:hover {
    transform: translateY(-2px);
}

/* Interactive variant — used when the stat tile is a <button> that
   navigates somewhere on click. Adds cursor, hover lift + shadow, and an
   arrow that reveals on hover. */
button.modern-stat-card.interactive {
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    width: 100%;
}

button.modern-stat-card.interactive:hover {
    border-color: var(--sc-primary-300, var(--sc-primary-500));
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

button.modern-stat-card.interactive:focus-visible {
    outline: 2px solid var(--sc-primary-500);
    outline-offset: 2px;
}

.modern-stat-card .stat-arrow {
    margin-left: auto;
    color: var(--sc-text-disabled);
    font-size: 1.1rem;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease, color 0.18s ease;
}

button.modern-stat-card.interactive:hover .stat-arrow {
    opacity: 1;
    transform: translateX(0);
    color: var(--sc-primary-500, var(--sc-primary-500));
}

.stat-icon-wrapper {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(107, 114, 128, 0.08);
    color: var(--rz-text-secondary-color);
}

.stat-icon-wrapper .rzi {
    font-size: 1.5rem;
    color: var(--rz-text-secondary-color);
}

.stat-icon-wrapper.sky {
    background: var(--sc-stat-icon-primary-bg);
    color: var(--sc-stat-icon-primary-color);
}

.stat-icon-wrapper.sky .rzi {
    color: var(--sc-stat-icon-primary-color);
}

.stat-icon-wrapper.orange {
    background: var(--sc-stat-icon-warning-bg);
    color: var(--sc-stat-icon-warning-color);
}

.stat-icon-wrapper.orange .rzi {
    color: var(--sc-stat-icon-warning-color);
}

.stat-icon-wrapper.emerald {
    background: var(--sc-stat-icon-success-bg);
    color: var(--sc-stat-icon-success-color);
}

.stat-icon-wrapper.emerald .rzi {
    color: var(--sc-stat-icon-success-color);
}

.stat-icon-wrapper.amber {
    background: var(--sc-stat-icon-warning-bg);
    color: var(--sc-stat-icon-warning-color);
}

.stat-icon-wrapper.amber .rzi {
    color: var(--sc-stat-icon-warning-color);
}

.stat-icon-wrapper.primary {
    background: var(--sc-stat-icon-info-bg);
    color: var(--sc-stat-icon-info-color);
}

.stat-icon-wrapper.primary .rzi {
    color: var(--sc-stat-icon-info-color);
}

.stat-icon-wrapper.purple {
    background: var(--sc-stat-icon-purple-bg);
    color: var(--sc-stat-icon-purple-color);
}

.stat-icon-wrapper.purple .rzi {
    color: var(--sc-stat-icon-purple-color);
}

.stat-icon-wrapper.warning {
    background: var(--sc-stat-icon-warning-bg);
    color: var(--sc-stat-icon-warning-color);
}

.stat-icon-wrapper.warning .rzi {
    color: var(--sc-stat-icon-warning-color);
}

.stat-icon-wrapper.info {
    background: var(--sc-stat-icon-primary-bg);
    color: var(--sc-stat-icon-primary-color);
}

.stat-icon-wrapper.info .rzi {
    color: var(--sc-stat-icon-primary-color);
}

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

.stat-info .value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sc-text-primary);
    line-height: 1.2;
}

.stat-info .label {
    font-size: 0.8rem;
    color: var(--sc-text-secondary);
    margin-top: 0.125rem;
}

.stat-trend {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.125rem;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 16px;
}

.stat-trend.positive {
    background: var(--sc-success-50);
    color: var(--sc-success-600);
}

.stat-trend.negative {
    background: var(--sc-danger-50);
    color: var(--sc-danger-600);
}

.stat-trend .rzi {
    font-size: 0.75rem;
}

/* =========================================
   Staff Profile - Content Grid
   ========================================= */
.profile-content-grid {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 1.5rem;
    align-items: start;
}

.profile-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.profile-main-content {
    min-width: 0;
}

/* =========================================
   Teacher Workload Overview
   ========================================= */
.workload-overview {
    background: var(--sc-surface);
    border-radius: 12px;
    border: 1px solid var(--sc-gray-100);
}

.workload-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
}

.workload-metric {
    padding: 1rem;
    background: var(--sc-gray-50);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.workload-metric:hover {
    background: var(--sc-gray-100);
    transform: translateY(-2px);
}

.workload-metric .metric-label {
    font-size: 0.8rem;
    color: var(--sc-text-secondary);
    margin-bottom: 0.25rem;
}

.workload-metric .metric-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--sc-text-primary);
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

.workload-metric .metric-bar {
    height: 6px;
    background: var(--sc-gray-200);
    border-radius: 3px;
    overflow: hidden;
}

.workload-metric .metric-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}

.workload-metric .metric-fill.primary {
    background: var(--theme-primary-500);
}

.workload-metric .metric-fill.orange {
    background: var(--sc-stat-orange);
}

.workload-metric .metric-fill.purple {
    background: var(--sc-stat-purple);
}

.workload-metric .metric-fill.emerald {
    background: var(--sc-success-500);
}

.workload-metric .metric-fill.info {
    background: var(--sc-primary-500);
}

.workload-metric .metric-fill.warning {
    background: var(--sc-warning-500);
}

/* =========================================
   Staff Profile - Contact & Details
   ========================================= */
.contact-list-modern {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.contact-item-modern {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem;
    background: var(--sc-gray-50);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.contact-item-modern:hover {
    background: var(--sc-gray-100);
}

.contact-icon-box {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: transparent;
    border: 1.5px solid var(--sc-gray-300);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-icon-box .rzi {
    font-size: 1.125rem;
    color: var(--sc-primary-500) !important;
}

.contact-details-modern {
    flex: 1;
    min-width: 0;
}

.contact-details-modern .contact-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--sc-text-muted);
    margin-bottom: 0.125rem;
}

.contact-details-modern .contact-value {
    display: block;
    font-size: 0.875rem;
    color: var(--sc-text-primary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact-details-modern .contact-value.muted {
    color: var(--sc-text-muted);
    font-style: italic;
}

.icon-btn-small {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--sc-gray-200);
    background: var(--sc-surface);
    color: var(--sc-primary-500);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.icon-btn-small:hover {
    background: var(--sc-primary-50);
    border-color: var(--sc-primary-200);
    color: var(--sc-primary-500);
}

.icon-btn-small.success {
    border-color: var(--sc-success-200);
}

.icon-btn-small.success:hover {
    background: var(--sc-success-50);
    border-color: var(--sc-success-300);
    color: var(--sc-success-600);
}

.icon-btn-small .rzi {
    font-size: 1rem;
}

/* Details Grid */
.details-grid-modern {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.875rem;
}

.detail-item-modern {
    padding: 0.75rem;
    background: var(--sc-gray-50);
    border-radius: 10px;
}

.detail-item-modern.full {
    grid-column: 1 / -1;
}

.detail-item-modern .detail-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--sc-text-muted);
    margin-bottom: 0.25rem;
}

.detail-item-modern .detail-value {
    font-size: 0.875rem;
    color: var(--sc-text-primary);
    font-weight: 500;
}

.detail-item-modern .detail-value.mono {
    font-family: monospace;
    font-size: 0.8rem;
    color: var(--sc-primary-500);
}

/* =========================================
   Staff Profile - Classes Grid
   ========================================= */
.classes-grid-modern {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.class-card-modern {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--sc-gray-50);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.class-card-modern:hover {
    background: var(--sc-surface);
    border-color: var(--sc-primary-200);
}

.class-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    background: var(--theme-primary-500);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.class-card-icon .rzi {
    font-size: 1.5rem;
    color: var(--sc-text-inverse);
}

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

.class-card-info h4 {
    margin: 0 0 0.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--sc-text-primary);
}

.class-card-info .class-grade {
    font-size: 0.8rem;
    color: var(--sc-text-secondary);
}

.class-card-students {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.875rem;
    background: var(--sc-primary-50);
    border-radius: 10px;
    color: var(--sc-primary-500);
    font-size: 0.825rem;
    font-weight: 600;
}

.class-card-students .rzi {
    font-size: 1rem;
}

.class-card-actions {
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.class-card-modern:hover .class-card-actions {
    opacity: 1;
}

.class-arrow {
    color: var(--sc-gray-300);
    font-size: 1.25rem;
    transition: all 0.2s ease;
}

.class-card-modern:hover .class-arrow {
    color: var(--sc-primary-500);
    transform: translateX(2px);
}

/* =========================================
   Staff Profile - Empty States
   ========================================= */
.modern-empty-mini {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 2rem;
    background: var(--sc-gray-50);
    border-radius: 12px;
    border: 2px dashed var(--sc-gray-200);
}

.modern-empty-mini .empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--sc-primary-100);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.modern-empty-mini .empty-icon .rzi {
    font-size: 1.75rem;
    color: var(--sc-gray-400);
}

.modern-empty-mini h4 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--sc-text-primary);
}

.modern-empty-mini p {
    color: var(--sc-text-secondary);
    margin: 0;
    font-size: 0.875rem;
    max-width: 300px;
}

/* =========================================
   Staff Profile - Schedule (HTML Table)
   Clean, professional calendar with perfect borders
   ========================================= */
.schedule-header-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

.schedule-wrapper-modern {
    overflow-x: auto;
    background: var(--sc-surface);
    border: 1px solid var(--sc-text-disabled);
    border-radius: 4px;
}

table.schedule-table-modern {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    background: var(--sc-surface);
    display: table !important;
}

table.schedule-table-modern thead {
    display: table-header-group !important;
}

table.schedule-table-modern tbody {
    display: table-row-group !important;
}

table.schedule-table-modern tr {
    display: table-row !important;
}

table.schedule-table-modern th,
table.schedule-table-modern td {
    display: table-cell !important;
    border: 1px solid var(--sc-text-disabled) !important;
    background: var(--sc-surface) !important;
}

/* Header Row */
table.schedule-table-modern thead tr {
    background: var(--sc-surface-variant) !important;
}

table.schedule-table-modern thead th {
    padding: 12px 8px;
    background: var(--sc-surface-variant) !important;
    font-weight: 600;
    font-size: 12px;
    color: var(--sc-text-primary);
    text-align: center;
    border: 1px solid var(--sc-text-disabled) !important;
    min-width: 80px;
}

table.schedule-table-modern thead th.time-header {
    width: 80px;
    min-width: 80px;
}

table.schedule-table-modern thead th.day-header {
    min-width: 90px;
}

/* Time Cells */
table.schedule-table-modern tbody td.time-cell {
    width: 80px;
    padding: 8px;
    background: var(--sc-surface-variant) !important;
    font-weight: 500;
    font-size: 11px;
    color: var(--sc-text-secondary);
    text-align: right;
    vertical-align: top;
    border: 1px solid var(--sc-text-disabled) !important;
    height: 60px;
}

/* Schedule Cells */
table.schedule-table-modern tbody td.schedule-cell {
    padding: 4px;
    background: var(--sc-surface) !important;
    height: 60px;
    min-width: 90px;
    vertical-align: middle;
    text-align: center;
    border: 1px solid var(--sc-text-disabled) !important;
    cursor: pointer;
    transition: background 0.15s ease;
}

table.schedule-table-modern tbody td.schedule-cell.empty:hover {
    background: var(--sc-surface-variant) !important;
}

table.schedule-table-modern tbody td.schedule-cell .add-lesson-icon {
    font-size: 18px;
    color: var(--sc-border);
    opacity: 0;
    transition: opacity 0.15s ease;
}

table.schedule-table-modern tbody td.schedule-cell.empty:hover .add-lesson-icon {
    opacity: 1;
    color: var(--sc-primary-500);
}

/* Cells with Classes */
table.schedule-table-modern tbody td.schedule-cell.has-class {
    background: var(--sc-surface) !important;
    border-left: 3px solid var(--theme-primary-500) !important;
    text-align: left;
    padding-left: 8px;
    vertical-align: middle;
}

table.schedule-table-modern tbody td.schedule-cell.has-class:hover {
    background: var(--sc-surface-variant) !important;
}

table.schedule-table-modern tbody td.schedule-cell.has-class .class-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Color Variants */
table.schedule-table-modern tbody td.schedule-cell.has-class.orange {
    border-left-color: var(--sc-stat-orange) !important;
}

table.schedule-table-modern tbody td.schedule-cell.has-class.success {
    border-left-color: var(--sc-success-500) !important;
}

table.schedule-table-modern tbody td.schedule-cell.has-class.warning {
    border-left-color: var(--sc-warning-500) !important;
}

table.schedule-table-modern tbody td.schedule-cell.has-class.info {
    border-left-color: var(--sc-primary-500) !important;
}

/* Class Name */
.class-name-modern {
    font-weight: 600;
    font-size: 12px;
    color: var(--sc-text-primary);
    line-height: 1.3;
}

/* Room */
.class-room-modern {
    font-size: 11px;
    color: var(--sc-text-secondary);
}

/* Legend */
.schedule-legend {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    margin-top: 12px;
    padding: 10px 0;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--sc-text-secondary);
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    border-left: 3px solid;
    background: var(--sc-surface);
}

.legend-dot.primary {
    border-left-color: var(--theme-primary-500);
}

.legend-dot.orange {
    border-left-color: var(--sc-stat-orange);
}

.legend-dot.success {
    border-left-color: var(--sc-success-500);
}

.legend-dot.warning {
    border-left-color: var(--sc-warning-500);
}

.legend-dot.info {
    border-left-color: var(--sc-primary-500);
}

/* Responsive Schedule Table */
@media (max-width: 768px) {
    .schedule-table-modern {
        min-width: 450px;
    }

    .schedule-table-modern .time-header,
    .schedule-table-modern .day-header {
        font-size: 11px;
        padding: 8px 4px;
    }

    .schedule-table-modern .time-cell {
        font-size: 10px;
        padding: 4px;
        height: 50px;
    }

    .schedule-table-modern .schedule-cell {
        height: 50px;
        padding: 2px;
    }

    .class-name-modern {
        font-size: 10px;
    }

    .class-room-modern {
        font-size: 9px;
    }

    .schedule-legend {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
}

/* =========================================
   Staff Profile - Attendance Summary
   ========================================= */
.attendance-header-modern {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

.attendance-cards-modern {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.attendance-card-modern {
    padding: 1.5rem;
    background: var(--sc-surface);
    border-radius: 12px;
    text-align: center;
    border: 1px solid var(--sc-border);
    transition: all 0.2s ease;
}

.attendance-card-modern:hover {
    transform: translateY(-2px);
}

.attendance-card-modern .att-icon-modern {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
    font-size: 24px;
}

.attendance-card-modern .att-value-modern {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

.attendance-card-modern .att-label-modern {
    font-size: 0.85rem;
    color: var(--sc-text-secondary);
    margin-top: 0.25rem;
    font-weight: 500;
}

/* Present Card */
.attendance-card-modern.present .att-icon-modern {
    background: var(--sc-success-50);
    color: var(--sc-success-600);
}

.attendance-card-modern.present .att-value-modern {
    color: var(--sc-success-600);
}

/* Absent Card */
.attendance-card-modern.absent .att-icon-modern {
    background: var(--sc-danger-50);
    color: var(--sc-danger-600);
}

.attendance-card-modern.absent .att-value-modern {
    color: var(--sc-danger-600);
}

/* Late Card */
.attendance-card-modern.late .att-icon-modern {
    background: var(--sc-warning-50);
    color: var(--sc-warning-600);
}

.attendance-card-modern.late .att-value-modern {
    color: var(--sc-warning-600);
}

/* Leave Card */
.attendance-card-modern.leave .att-icon-modern {
    background: var(--sc-primary-100);
    color: var(--theme-primary-500);
}

.attendance-card-modern.leave .att-value-modern {
    color: var(--theme-primary-500);
}

/* Responsive */
@media (max-width: 768px) {
    .attendance-cards-modern {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .attendance-cards-modern {
        grid-template-columns: 1fr;
    }
}

/* Legacy attendance summary styles */
.attendance-summary-modern {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.attendance-stat-modern {
    padding: 1.25rem;
    background: var(--sc-gray-50);
    border-radius: 10px;
    text-align: center;
    transition: all 0.2s ease;
}

.attendance-stat-modern:hover {
    transform: scale(1.02);
}

.attendance-stat-modern .stat-number {
    font-size: 2rem;
    font-weight: 700;
}

.attendance-stat-modern .stat-label {
    font-size: 0.8rem;
    color: var(--sc-text-secondary);
    margin-top: 0.25rem;
}

.attendance-stat-modern.present .stat-number {
    color: var(--sc-success-500);
}

.attendance-stat-modern.absent .stat-number {
    color: var(--sc-danger-500);
}

.attendance-stat-modern.late .stat-number {
    color: var(--sc-warning-500);
}

.attendance-stat-modern.leave .stat-number {
    color: var(--sc-info-500);
}

/* =========================================
   Staff Profile - Documents Tab
   ========================================= */
.documents-header-modern {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

.documents-filters-modern {
    display: flex;
    gap: 0.75rem;
}

.documents-filters-modern .modern-dropdown {
    min-width: 160px;
}

/* Expiring Documents Warning Banner */
.expiry-warning-banner-modern {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: var(--sc-warning-50);
    border: 1px solid var(--sc-warning-500);
    border-radius: 10px;
    margin-bottom: 1rem;
}

.warning-icon-modern {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--sc-warning-500);
    color: var(--sc-text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.warning-content-modern {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.warning-content-modern .warning-title {
    font-weight: 600;
    color: var(--sc-warning-600);
    font-size: 0.9rem;
}

.warning-content-modern .warning-detail {
    font-size: 0.8rem;
    color: var(--sc-warning-600);
}

/* Documents Empty State */
.documents-empty-state {
    display: flex;
    justify-content: center;
    padding: 2rem;
}

.documents-empty-state .empty-state-card {
    text-align: center;
    max-width: 400px;
}

.documents-empty-state .empty-icon-wrapper {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: var(--sc-surface-muted);
    color: var(--sc-text-disabled);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 28px;
}

.documents-empty-state h4 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--sc-text-secondary);
}

.documents-empty-state .empty-description {
    font-size: 0.85rem;
    color: var(--sc-text-secondary);
    margin: 0 0 1.5rem;
    line-height: 1.5;
}

/* Documents Grid */
.documents-grid-modern {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.document-card-modern {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.document-card-modern:hover {
    border-color: var(--sc-border-strong);
}

.document-card-modern.expired {
    border-color: var(--sc-danger-50);
    background: var(--sc-danger-50);
}

.document-card-modern.expiring {
    border-color: var(--sc-warning-50);
    background: var(--sc-warning-50);
}

/* Document Icon */
.doc-icon-modern {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 20px;
    color: var(--sc-text-inverse);
}

.doc-icon-modern.pdf {
    background: var(--sc-danger-500);
}

.doc-icon-modern.doc {
    background: var(--sc-primary-500);
}

.doc-icon-modern.image {
    background: var(--sc-stat-purple);
}

.doc-icon-modern.spreadsheet {
    background: var(--sc-success-500);
}

.doc-icon-modern.default {
    background: var(--sc-primary-500);
}

/* Document Info */
.doc-info-modern {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.doc-name-modern {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--sc-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doc-meta-modern {
    font-size: 0.75rem;
    color: var(--sc-text-secondary);
}

/* Document Badges */
.doc-badges-modern {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.doc-badges-modern .modern-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 500;
}

.doc-badges-modern .modern-badge.category {
    background: var(--sc-surface-muted);
    color: var(--sc-text-secondary);
}

.doc-badges-modern .modern-badge.verified {
    background: var(--sc-success-50);
    color: var(--sc-success-600);
}

.doc-badges-modern .modern-badge.verified .rzi {
    font-size: 12px;
}

.doc-badges-modern .modern-badge.pending {
    background: var(--sc-warning-50);
    color: var(--sc-warning-600);
}

.doc-badges-modern .modern-badge.expired {
    background: var(--sc-danger-50);
    color: var(--sc-danger-600);
}

.doc-badges-modern .modern-badge.expiring {
    background: var(--sc-warning-50);
    color: var(--sc-warning-600);
}

/* Document Actions */
.doc-actions-modern {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.icon-btn-small {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: var(--sc-surface-muted);
    color: var(--sc-primary-500);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 16px;
}

.icon-btn-small:hover {
    background: var(--sc-border);
    color: var(--sc-primary-500);
}

.icon-btn-small.danger:hover {
    background: var(--sc-danger-50);
    color: var(--sc-danger-600);
}

/* Responsive */
@media (max-width: 768px) {
    .documents-header-modern {
        flex-direction: column;
        gap: 0.75rem;
    }

    .documents-filters-modern {
        flex-direction: column;
    }

    .documents-filters-modern .modern-dropdown {
        width: 100%;
    }

    .document-card-modern {
        flex-wrap: wrap;
    }

    .doc-actions-modern {
        width: 100%;
        justify-content: flex-end;
        padding-top: 0.5rem;
        border-top: 1px solid var(--sc-surface-muted);
    }
}

/* =========================================
   Staff Profile - Performance Tab
   ========================================= */
.tab-header-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

.icon-add-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: none;
    background: var(--theme-primary-500);
    color: var(--sc-text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 18px;
}

.icon-add-btn:hover {
    background: var(--sc-primary-700);
    transform: scale(1.05);
}

.performance-section-modern {
    margin-bottom: 1.5rem;
}

.section-title-modern {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--sc-text-primary);
    margin: 0 0 1rem;
}

.icon-box {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.icon-box.small {
    width: 28px;
    height: 28px;
    font-size: 14px;
}

.icon-box.primary {
    background: var(--sc-primary-50);
    color: var(--theme-primary-500);
}

.icon-box.warning {
    background: var(--sc-warning-50);
    color: var(--sc-warning-600);
}

.icon-box.success {
    background: var(--sc-success-50);
    color: var(--sc-success-600);
}

.icon-box.danger {
    background: var(--sc-danger-50);
    color: var(--sc-danger-600);
}

/* Review Card */
.review-card-modern {
    padding: 1rem;
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: 12px;
}

.review-header-modern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.review-type-modern {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--sc-text-primary);
}

.review-period-modern {
    font-size: 0.8rem;
    color: var(--sc-text-secondary);
}

.review-rating-modern {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.rating-value-modern {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--sc-warning-500);
}

.review-meta-modern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: var(--sc-text-secondary);
}

.review-meta-modern .modern-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 500;
}

.review-meta-modern .modern-badge.completed {
    background: var(--sc-success-50);
    color: var(--sc-success-600);
}

.review-meta-modern .modern-badge.in-progress,
.review-meta-modern .modern-badge.in_progress {
    background: var(--sc-primary-100);
    color: var(--sc-primary-800);
}

.review-meta-modern .modern-badge.pending {
    background: var(--sc-warning-50);
    color: var(--sc-warning-600);
}

/* Goals List */
.goals-list-modern {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.goal-item-modern {
    padding: 1rem;
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: 10px;
}

.goal-header-modern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.goal-title-modern {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--sc-text-primary);
}

.goal-target-modern {
    font-size: 0.75rem;
    color: var(--sc-text-secondary);
}

.goal-progress-modern {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.progress-bar-modern {
    flex: 1;
    height: 8px;
    background: var(--sc-border);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar-modern .progress-fill {
    height: 100%;
    background: var(--theme-primary-500);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.progress-value-modern {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--theme-primary-500);
    min-width: 36px;
    text-align: right;
}

/* Activities List */
.activities-list-modern {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.activity-item-modern {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: 10px;
}

.activity-icon-modern {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.activity-icon-modern.workshop {
    background: var(--sc-primary-100);
    color: var(--theme-primary-500);
}

.activity-icon-modern.course {
    background: var(--sc-success-50);
    color: var(--sc-success-600);
}

.activity-icon-modern.certification {
    background: var(--sc-warning-50);
    color: var(--sc-warning-600);
}

.activity-icon-modern.conference {
    background: var(--sc-stat-purple-bg);
    color: var(--sc-stat-violet);
}

.activity-icon-modern.training {
    background: var(--sc-primary-50);
    color: var(--theme-primary-500);
}

.activity-info-modern {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.activity-title-modern {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--sc-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activity-meta-modern {
    font-size: 0.75rem;
    color: var(--sc-text-secondary);
}

.cert-earned-badge {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--sc-success-50);
    color: var(--sc-success-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

/* Empty State Compact */
.modern-empty-compact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.5rem;
    background: var(--sc-surface-variant);
    border: 1px dashed var(--sc-border-strong);
    border-radius: 10px;
    color: var(--sc-text-disabled);
    font-size: 0.85rem;
}

.modern-empty-compact .rzi {
    font-size: 20px;
}

/* View All Link */
.view-all-link-modern {
    display: flex;
    justify-content: center;
    padding-top: 0.5rem;
}

.view-all-link-modern .modern-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--theme-primary-500);
    font-weight: 500;
    font-size: 0.85rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.view-all-link-modern .modern-link:hover {
    color: var(--sc-primary-700);
    gap: 0.75rem;
}

.view-all-link-modern .modern-link .rzi {
    font-size: 16px;
    transition: transform 0.2s ease;
}

.view-all-link-modern .modern-link:hover .rzi {
    transform: translateX(3px);
}

/* =========================================
   Staff Profile - Incidents Tab
   ========================================= */
/* Empty State with Success */
.modern-empty-mini {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 2rem;
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: 12px;
}

.modern-empty-mini.success {
    background: var(--sc-success-50);
    border-color: var(--sc-success-50);
}

.modern-empty-mini .empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin-bottom: 1rem;
}

.modern-empty-mini .empty-icon.success {
    background: var(--sc-success-50);
    color: var(--sc-success-600);
}

.modern-empty-mini h4 {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--sc-text-primary);
}

.modern-empty-mini p {
    margin: 0 0 1.5rem;
    font-size: 0.9rem;
    color: var(--sc-text-secondary);
    max-width: 400px;
}

/* Incident Summary Cards */
.incident-summary-cards-modern {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.incident-summary-card {
    padding: 1.25rem;
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: 12px;
    text-align: center;
}

.incident-summary-card.total {
    border-left: 3px solid var(--sc-text-secondary);
}

.incident-summary-card.warning {
    border-left: 3px solid var(--sc-warning-500);
}

.incident-summary-card.success {
    border-left: 3px solid var(--sc-success-500);
}

.summary-value-modern {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--sc-text-primary);
}

.incident-summary-card.total .summary-value-modern {
    color: var(--sc-text-secondary);
}

.incident-summary-card.warning .summary-value-modern {
    color: var(--sc-warning-500);
}

.incident-summary-card.success .summary-value-modern {
    color: var(--sc-success-500);
}

.summary-label-modern {
    font-size: 0.8rem;
    color: var(--sc-text-secondary);
    margin-top: 0.25rem;
}

/* Incidents List */
.incidents-list-modern {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.incident-item-modern {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.incident-item-modern:hover {
    border-color: var(--sc-border-strong);
}

.incident-item-modern.open,
.incident-item-modern.investigating {
    border-left: 3px solid var(--sc-warning-500);
}

.incident-item-modern.closed,
.incident-item-modern.resolved {
    border-left: 3px solid var(--sc-success-500);
}

.incident-item-modern.escalated {
    border-left: 3px solid var(--sc-danger-500);
}

.incident-main-modern {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    min-width: 0;
}

.incident-icon-modern {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.incident-icon-modern.low {
    background: var(--sc-primary-100);
    color: var(--theme-primary-500);
}

.incident-icon-modern.medium {
    background: var(--sc-warning-50);
    color: var(--sc-warning-600);
}

.incident-icon-modern.high {
    background: var(--sc-warning-50);
    color: var(--sc-stat-orange);
}

.incident-icon-modern.critical {
    background: var(--sc-danger-50);
    color: var(--sc-danger-600);
}

.incident-details-modern {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.incident-header-modern {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.incident-number-modern {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--sc-text-primary);
}

.incident-type-modern {
    font-size: 0.75rem;
    color: var(--sc-text-secondary);
    padding: 0.15rem 0.5rem;
    background: var(--sc-surface-muted);
    border-radius: 4px;
}

.incident-meta-modern {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--sc-text-secondary);
}

.incident-date-modern,
.incident-location-modern {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.incident-date-modern .rzi,
.incident-location-modern .rzi {
    font-size: 14px;
}

/* Incident Badges */
.incident-badges-modern {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-shrink: 0;
}

.incident-badges-modern .modern-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 500;
    white-space: nowrap;
}

.incident-badges-modern .modern-badge.severity.low {
    background: var(--sc-primary-100);
    color: var(--sc-primary-800);
}

.incident-badges-modern .modern-badge.severity.medium {
    background: var(--sc-warning-50);
    color: var(--sc-warning-600);
}

.incident-badges-modern .modern-badge.severity.high {
    background: var(--sc-warning-50);
    color: var(--sc-stat-orange);
}

.incident-badges-modern .modern-badge.severity.critical {
    background: var(--sc-danger-50);
    color: var(--sc-danger-600);
}

.incident-badges-modern .modern-badge.status.open,
.incident-badges-modern .modern-badge.status.investigating {
    background: var(--sc-warning-50);
    color: var(--sc-warning-600);
}

/* =============================================================================
   Hero Period Dropdown — styled like primary button
   ============================================================================= */
.hero-period-dropdown.rz-dropdown {
    background: var(--sc-primary-500) !important;
    border-color: var(--sc-primary-500) !important;
    border-radius: var(--sc-radius-md) !important;
    font-weight: 500 !important;
}

.hero-period-dropdown.rz-dropdown .rz-dropdown-label,
.hero-period-dropdown.rz-dropdown .rz-placeholder {
    color: #fff !important;
}

.hero-period-dropdown.rz-dropdown .rz-dropdown-trigger .rzi {
    color: #fff !important;
}

[data-theme*="-dark"] .hero-period-dropdown.rz-dropdown {
    background: var(--sc-primary-500) !important;
    border-color: var(--sc-primary-500) !important;
}

[data-theme*="-dark"] .hero-period-dropdown.rz-dropdown .rz-dropdown-label,
[data-theme*="-dark"] .hero-period-dropdown.rz-dropdown .rz-placeholder {
    color: #fff !important;
}

[data-theme*="-dark"] .hero-period-dropdown.rz-dropdown .rz-dropdown-trigger .rzi {
    color: #fff !important;
}

/* ===== Table Action Buttons (card-icon-btn style) ===== */
.table-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Row-action buttons — circular, neutral-gray, icon-only. Shared by every
   list/table "Actions" column across Staff, Student and Administration list
   pages. Two markup conventions reach this same look: a plain <button
   class="card-icon-btn"> wrapping a RadzenIcon (the newer convention), or a
   raw <RadzenButton Icon="..."> sitting inside .table-actions (the Radzen
   component renders its own .rz-button class) — both are targeted here so
   either markup choice on a given page ends up looking identical. */
.table-actions .card-icon-btn,
.rz-data-grid .card-icon-btn,
.table-actions .rz-button,
.rz-data-grid .table-actions .rz-button {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--sc-text-secondary, #555);
    cursor: pointer;
    transition: all 150ms ease;
    padding: 0.5rem;
}

.table-actions .card-icon-btn:hover,
.rz-data-grid .card-icon-btn:hover,
.table-actions .rz-button:hover,
.rz-data-grid .table-actions .rz-button:hover {
    background: var(--sc-gray-200, #e5e7eb);
    color: var(--sc-text-primary, #111827);
}

.table-actions .card-icon-btn.danger:hover,
.rz-data-grid .card-icon-btn.danger:hover {
    background: var(--sc-error-bg, #fef2f2);
    color: var(--sc-error, #ef4444);
}

.table-actions .card-icon-btn.success:hover,
.rz-data-grid .card-icon-btn.success:hover {
    background: var(--sc-success-bg, #f0fdf4);
    color: var(--sc-success, #22c55e);
}

.table-actions .card-icon-btn .rzi,
.table-actions .card-icon-btn .rz-icon,
.rz-data-grid .card-icon-btn .rzi,
.rz-data-grid .card-icon-btn .rz-icon,
.table-actions .rz-button .rzi,
.table-actions .rz-button .rz-icon {
    font-size: 1.05rem !important;
}

.table-actions .card-icon-btn:disabled,
.table-actions .rz-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.incident-badges-modern .modern-badge.status.closed,
.incident-badges-modern .modern-badge.status.resolved {
    background: var(--sc-success-50);
    color: var(--sc-success-600);
}

.incident-badges-modern .modern-badge.status.escalated {
    background: var(--sc-danger-50);
    color: var(--sc-danger-600);
}

.incident-badges-modern .modern-badge .rzi {
    font-size: 12px;
}

/* Incident Actions */
.incident-actions-modern {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.incident-actions-footer-modern {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
}

/* Modern Button Variants */
.modern-btn.warning {
    background: var(--sc-warning-500);
    color: var(--sc-text-inverse);
    border: none;
    padding: 0.75rem 1.25rem;
    border-radius: 10px;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.modern-btn.warning:hover {
    background: var(--sc-warning-600);
}

/* Responsive */
@media (max-width: 768px) {
    .incident-summary-cards-modern {
        grid-template-columns: 1fr;
    }

    .incident-item-modern {
        flex-direction: column;
        align-items: flex-start;
    }

    .incident-main-modern {
        width: 100%;
        flex-wrap: wrap;
    }

    .incident-badges-modern {
        flex-direction: row;
        width: 100%;
        justify-content: flex-start;
    }

    .incident-actions-modern {
        width: 100%;
        justify-content: flex-end;
        padding-top: 0.5rem;
        border-top: 1px solid var(--sc-surface-muted);
    }
}

/* Legacy Document List Styles */
.documents-list-modern {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.document-item-modern {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--sc-gray-50);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.document-item-modern:hover {
    background: var(--sc-surface);
}

.document-icon-modern {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.document-icon-modern.pdf {
    background: var(--sc-danger-500);
}

.document-icon-modern.doc {
    background: var(--sc-primary-500);
}

.document-icon-modern.image {
    background: var(--sc-stat-purple);
}

/* =========================================
   Performance Review Dialog - Action Buttons
   ========================================= */
.performance-review-dialog .wizard-actions {
    padding: 1rem 2rem;
    background: var(--sc-surface);
    border-top: 1px solid var(--sc-border);
}

.performance-review-dialog .wizard-actions .rz-button,
.performance-review-dialog .dialog-actions .rz-button {
    min-width: 200px;
    width: 200px;
    height: 44px;
    justify-content: center;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    transition: all 0.2s ease;
}

.performance-review-dialog .wizard-actions .rz-button.rz-button-md:not(.rz-primary),
.performance-review-dialog .dialog-actions .rz-button.rz-button-md:not(.rz-primary) {
    background: var(--sc-surface) !important;
    border: 1.5px solid var(--sc-border) !important;
    color: var(--sc-text-primary) !important;
}

.performance-review-dialog .wizard-actions .rz-button.rz-button-md:not(.rz-primary):hover,
.performance-review-dialog .dialog-actions .rz-button.rz-button-md:not(.rz-primary):hover {
    background: var(--sc-gray-50) !important;
    border-color: var(--sc-gray-300) !important;
}

.performance-review-dialog .wizard-actions .rz-button.rz-primary,
.performance-review-dialog .dialog-actions .rz-button.rz-primary {
    background: var(--sc-primary-500, var(--theme-primary-500)) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.performance-review-dialog .wizard-actions .rz-button.rz-primary:hover,
.performance-review-dialog .dialog-actions .rz-button.rz-primary:hover {
    background: var(--sc-primary-500, var(--sc-primary-700)) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    transform: translateY(-1px);
}

.performance-review-dialog .wizard-actions .rz-button .rzi,
.performance-review-dialog .wizard-actions .rz-button .rz-button-icon-left,
.performance-review-dialog .dialog-actions .rz-button .rzi,
.performance-review-dialog .dialog-actions .rz-button .rz-button-icon-left {
    display: none !important;
}

.document-icon-modern.default {
    background: var(--sc-primary-500);
}

.document-icon-modern .rzi {
    font-size: 1.25rem;
    color: var(--sc-text-inverse);
}

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

.document-info-modern h4 {
    margin: 0 0 0.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--sc-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.document-meta-modern {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--sc-text-secondary);
}

.document-expiry-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 500;
}

.document-expiry-badge.valid {
    background: var(--sc-success-50);
    color: var(--sc-success-600);
}

.document-expiry-badge.expiring {
    background: var(--sc-warning-50);
    color: var(--sc-warning-600);
}

.document-expiry-badge.expired {
    background: var(--sc-danger-50);
    color: var(--sc-danger-600);
}

/* =========================================
   Staff Card Grid (Shared)
   ========================================= */
.modern-staff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.modern-staff-card {
    background: var(--sc-surface);
    border-radius: 12px;
    border: 1px solid #ededed;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 180px;
}

.modern-staff-card:hover {
    transform: translateY(-2px);
    border-color: #e0e0e0;
}

[data-theme*="-dark"] .modern-staff-card {
    border-color: var(--sc-gray-600);
}

[data-theme*="-dark"] .modern-staff-card:hover {
    border-color: var(--sc-gray-500);
}

.staff-card-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.625rem;
    border-radius: 16px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    background: var(--sc-primary-50, rgba(59, 130, 246, 0.08));
    color: var(--rz-primary);
}

.staff-card-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.staff-card-status.success {
    background: var(--sc-success-50);
    color: var(--sc-success-600);
}

.staff-card-status.warning {
    background: var(--sc-warning-50);
    color: var(--sc-stat-orange);
}

.staff-card-status.neutral {
    background: var(--sc-surface-muted);
    color: var(--sc-text-secondary);
}

.staff-avatar {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: var(--sc-surface-muted);
    color: var(--sc-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.25rem;
    flex-shrink: 0;
    text-transform: uppercase;
    border: 1px solid var(--sc-border);
    margin-bottom: 0.75rem;
}

.staff-card-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--sc-text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.staff-card-role {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--sc-primary-500);
    margin: 0;
}

.staff-card-bio {
    font-size: 0.8125rem;
    color: var(--sc-text-secondary);
    margin: 0.5rem 0 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.staff-card-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.staff-action-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    background: transparent;
    color: var(--sc-text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.staff-action-btn:hover {
    border-color: var(--sc-border);
    background: var(--sc-surface-muted);
}

.staff-action-btn.primary {
    color: var(--sc-primary, #4f46e5);
}

.staff-action-btn.primary:hover {
    background: var(--sc-primary-light, #eef2ff);
    border-color: var(--sc-primary, #4f46e5);
}

.staff-action-btn .rzi {
    font-size: 1.125rem;
}

@media (max-width: 640px) {
    .modern-staff-grid {
        grid-template-columns: 1fr;
    }
}

/* App-card layout classes for staff cards — mirrors centre card design */
.modern-staff-card .staff-card-badge-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sc-space-5) var(--sc-space-6) var(--sc-space-3);
}

.modern-staff-card .staff-type-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sc-space-2);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--sc-text-secondary);
    background: var(--sc-surface-muted);
    border-radius: 16px;
    padding: 0.25rem 0.625rem;
}

.modern-staff-card .staff-type-badge .rzi {
    font-size: 0.875rem !important;
}

.modern-staff-card .staff-card-body {
    padding: 0 var(--sc-space-6) var(--sc-space-4);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.modern-staff-card .staff-card-name {
    margin: 0 0 var(--sc-space-1) 0;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--sc-text-primary);
    letter-spacing: -0.01em;
}

.modern-staff-card .staff-card-description {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--sc-text-secondary);
    line-height: 1.5;
}

.modern-staff-card .staff-card-divider {
    height: 1px;
    background: var(--sc-border, #ededed);
    margin: 0 var(--sc-space-6);
}

.modern-staff-card .staff-card-meta {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-2);
    padding: var(--sc-space-4) var(--sc-space-6);
}

.modern-staff-card .staff-meta-item {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
    font-size: 0.8125rem;
    color: var(--sc-text-secondary);
}

.modern-staff-card .staff-meta-item .rzi {
    font-size: 1rem !important;
    opacity: 0.7;
}

.modern-staff-card .staff-card-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0.75rem var(--sc-space-6);
    border-top: 1px solid var(--sc-border, #ededed);
    background: var(--theme-surface-variant, var(--sc-surface-muted));
    border-radius: 0 0 12px 12px;
}

.modern-staff-card .staff-card-actions {
    display: flex;
    gap: var(--sc-space-2);
}

.modern-staff-card .card-icon-btn {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--sc-border, #ededed);
    border-radius: 8px;
    background: var(--sc-surface);
    color: var(--sc-text-disabled);
    cursor: pointer;
    transition: all 0.15s ease;
}

.modern-staff-card .card-icon-btn:hover {
    background: var(--sc-surface-muted);
    border-color: var(--sc-border-strong, var(--sc-gray-300));
    color: var(--sc-primary-500);
}

.modern-staff-card .card-icon-btn .rzi {
    font-size: 0.875rem !important;
}

.modern-staff-card .submitted-date {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--sc-text-secondary);
}

.modern-staff-card .submitted-date .rzi {
    font-size: 1rem;
}

.modern-staff-card .card-action-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--sc-surface);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sc-text-secondary);
    transition: all 0.2s ease;
}

.modern-staff-card .card-action-btn:hover {
    background: var(--sc-primary-50);
    color: var(--sc-primary-500);
}

/* Modern Avatar (Card Grid) */
.modern-avatar {
    width: var(--sc-avatar-size, 56px);
    height: var(--sc-avatar-size, 56px);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--sc-avatar-font-size, 1.25rem);
    font-weight: var(--sc-font-bold, 700);
    color: var(--sc-gray-700);
    background: var(--sc-gray-100);
    text-transform: uppercase;
    border: 1px solid var(--sc-gray-200);
}

.modern-avatar.lg {
    width: var(--sc-avatar-size-lg, 56px);
    height: var(--sc-avatar-size-lg, 56px);
    font-size: var(--sc-avatar-font-size-lg, 1.25rem);
}

.modern-avatar.sm {
    width: 40px;
    height: 40px;
    font-size: 0.875rem;
}

/* =========================================
   Staff Profile - Responsive
   ========================================= */
@media (max-width: 1200px) {
    .modern-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .profile-content-grid {
        grid-template-columns: 1fr;
    }

    .profile-sidebar {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

@media (max-width: 768px) {
    .modern-stats-grid {
        grid-template-columns: 1fr;
    }

    .profile-sidebar {
        grid-template-columns: 1fr;
    }

    .attendance-summary-modern {
        grid-template-columns: repeat(2, 1fr);
    }

    .details-grid-modern {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   Modern Tab Bar
   ========================================= */
.modern-tab-bar {
    display: flex;
    gap: var(--sc-space-4, 1rem);
    padding: 0;
    margin-bottom: var(--sc-space-4, 1rem);
    border-bottom: 1px solid var(--sc-gray-200, var(--sc-border));
}

/* Geometry copied from modern-tabs.css's RadzenTabs strip (the Cohorts list style) so the two
   are the same control: same padding, gap, size, weight, and a 3px inset box-shadow underline
   rather than a ::after bar. They render side by side across the product and were visibly
   different heights and underline weights even after the active fill came off. */
.modern-tab {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2, 0.5rem);
    padding: var(--sc-space-3, 0.75rem) var(--sc-space-2, 0.5rem);
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--sc-text-secondary);
    font-size: var(--sc-text-sm, 0.875rem);
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

/* Underline only -- no fill. The active tab carried a primary-50 pill on top of the underline,
   which made the same control look like two different things depending on which page you were
   on: a tinted pill here, a plain underlined tab on every RadzenTabs strip in the product
   (Cohorts, Student Directory, and the rest). The underline below is the whole active state.
   Hover changes colour only, for the same reason. */
.modern-tab:hover {
    color: var(--sc-primary-500);
    background: transparent;
}

.modern-tab.active {
    color: var(--sc-primary-500);
    background: transparent;
    font-weight: 600;
    /* inset box-shadow, not a ::after bar -- same technique and same 3px as the Radzen strip,
       so the underline sits at the same depth and weight on both. */
    box-shadow: inset 0 -3px 0 0 var(--sc-primary-500);
}

.modern-tab .rzi {
    font-size: 1.125rem;
}

/* =========================================
   Modern Filter Bar — staff-specific overrides
   (grid layout + responsive rules live in the
   design system modern-filter-bar.css)
   ========================================= */

/* Uniform control height */
.modern-filter-bar .rz-button,
.modern-filter-bar .rz-dropdown,
.modern-filter-bar .rz-textbox,
.modern-filter-bar .rz-numeric,
.modern-filter-bar .rz-datepicker,
.modern-filter-bar input,
.modern-filter-bar select {
    height: 38px;
    min-height: 38px;
    box-sizing: border-box;
}

.modern-filter-bar .rz-button {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1;
}

.modern-filter-bar .rz-button.rz-button-icon-only {
    width: 38px;
    min-width: 38px;
    padding: 0;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.filter-group>*,
.filter-group>.rz-dropdown,
.filter-group>.rz-textbox,
.filter-group>.rz-datepicker {
    flex: 0 1 200px;
    min-width: 140px;
    max-width: 220px;
}

.action-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* ── Filter Bar — tablet responsive (≤1024px) ──────────────────────────────
   modern-filter-bar becomes display:flex on tablet (see modern-filter-bar.css).
   Make filter-group scroll its children horizontally so everything stays in
   one compact row instead of wrapping to 2-3 rows. */
@media (max-width: 1024px) {
    /* filter-group scrolls horizontally; action-group + search-group stay fixed */
    .modern-filter-bar .filter-group {
        flex: 1 1 0;
        min-width: 0;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .modern-filter-bar .filter-group::-webkit-scrollbar {
        display: none;
    }

    /* Fixed width per filter item so they don't shrink to nothing */
    .modern-filter-bar .filter-group > *,
    .modern-filter-bar .filter-group > .rz-dropdown,
    .modern-filter-bar .filter-group > .rz-textbox,
    .modern-filter-bar .filter-group > .rz-datepicker {
        flex: 0 0 auto;
        min-width: 150px;
        max-width: 175px;
        width: 160px;
    }

    /* search-group (Incidents/Certifications) stays narrow on the left */
    .modern-filter-bar .search-group {
        flex-shrink: 0;
        min-width: 160px;
        max-width: 210px;
    }

    /* action-group pinned to the right */
    .modern-filter-bar .action-group {
        flex-shrink: 0;
    }
}

/* Mobile (≤640px): revert — filter-group wraps again inside the block bar */
@media (max-width: 640px) {
    .modern-filter-bar .filter-group {
        flex-wrap: wrap;
        overflow-x: visible;
        flex: 1;
    }

    .modern-filter-bar .filter-group > *,
    .modern-filter-bar .filter-group > .rz-dropdown,
    .modern-filter-bar .filter-group > .rz-textbox,
    .modern-filter-bar .filter-group > .rz-datepicker {
        flex: 1 1 140px;
        min-width: 140px;
        max-width: none;
        width: auto;
    }

    .modern-filter-bar .search-group {
        min-width: 0;
        max-width: none;
    }
}

/* =========================================
   FAB Menu (Floating Action Button)
   ========================================= */
.modern-fab-container {
    position: fixed !important;
    bottom: 2rem !important;
    right: 2rem !important;
    z-index: 999 !important;
    transform: none !important;
}

/* Hide FAB when a side panel is open */
body:has(.sc-panel-overlay) .modern-fab-container {
    display: none !important;
}

.modern-fab {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    border: none;
    background: var(--theme-primary-500);
    color: var(--sc-text-inverse);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-fab:hover {
    transform: scale(1.08);
}

.modern-fab.open {
    transform: rotate(45deg);
    background: var(--theme-primary-500);
}

.modern-fab ::deep .rzi {
    font-size: 1.75rem;
    transition: transform 0.3s ease;
}

.fab-menu {
    position: absolute;
    bottom: 80px;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fab-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.fab-menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-direction: row-reverse;
    cursor: pointer;
}

.fab-menu-label {
    background: var(--sc-surface);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sc-text-primary);
    white-space: nowrap;
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.2s ease;
    min-width: 100px;
    text-align: center;
}

.fab-menu.open .fab-menu-label {
    opacity: 1;
    transform: translateX(0);
}

.fab-menu-btn {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    border: none;
    color: var(--sc-text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.fab-menu-btn:hover {
    transform: scale(1.1);
}

.fab-menu-btn ::deep .rzi {
    font-size: 1.35rem;
}

.fab-menu-btn.primary {
    background: var(--sc-primary-500);
}

.fab-menu-btn.success {
    background: var(--sc-success-500);
}

.fab-menu-btn.orange {
    background: var(--sc-stat-orange);
}

.fab-menu-btn.info {
    background: var(--sc-info-500);
}

/* =========================================
   Avatar colour palette (shared across
   staff / guardian / student cards)
   ========================================= */
.modern-avatar.av-c0 { background: linear-gradient(135deg, #6366f1, #4f46e5); color: #fff; border-color: transparent; }
.modern-avatar.av-c1 { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; border-color: transparent; }
.modern-avatar.av-c2 { background: linear-gradient(135deg, #10b981, #047857); color: #fff; border-color: transparent; }
.modern-avatar.av-c3 { background: linear-gradient(135deg, #ec4899, #db2777); color: #fff; border-color: transparent; }
.modern-avatar.av-c4 { background: linear-gradient(135deg, #3b82f6, #1d4ed8); color: #fff; border-color: transparent; }
.modern-avatar.av-c5 { background: linear-gradient(135deg, #14b8a6, #0d9488); color: #fff; border-color: transparent; }

/* Shared card header pattern — used by staff / guardian / student grid cards */
.app-card-header-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

/* Name + status on the same row, status pushed to the right */
.app-card-name-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.app-card-name-row .staff-name {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--sc-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-card-name-row .staff-card-status {
    flex-shrink: 0;
    width: fit-content;
}

/* Subtitle line below name row (student number / role) */
.app-card-subtitle {
    font-size: 0.78rem;
    color: var(--sc-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Legacy: direct children of header-info (guardian cards still use old structure) */
.app-card-header-info > .staff-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--sc-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-card-header-info > .staff-card-status {
    align-self: flex-start;
    width: fit-content;
}