/* /Components/Common/AbsenceMotivatorSheet.razor.rz.scp.css */
/* AbsenceMotivatorSheet — slide-over shell, header, filter pills, body rows,
   sticky footer, and the inline reason-picker modal. Faithful port of
   TWAbsenceMotivator (prototype 38455-38710). All class names use the
   .tcd-amot- prefix so they namespace cleanly inside the teacher pages
   (which already use .tcd-* for the class-detail surface). */

.tcd-amot-backdrop[b-dt1mex3z0q] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: 1500;
    display: flex;
    justify-content: flex-end;
    animation: tcd-amot-fade-b-dt1mex3z0q .12s ease;
}
@keyframes tcd-amot-fade-b-dt1mex3z0q { from { opacity: 0 } to { opacity: 1 } }

.tcd-amot-sheet[b-dt1mex3z0q] {
    /* Bumped from 760px → 960px so each per-student card has room for the
       expanded absence rows below it without crowding the toolbar. On laptops
       narrower than the cap, the 95% fallback keeps a slim margin to the page
       behind so the slide-over still reads as an overlay, not a full-screen. */
    width: min(960px, 95%);
    height: 100%;
    background: #fff;
    box-shadow: -12px 0 40px rgba(15, 23, 42, .18);
    display: flex;
    flex-direction: column;
    animation: tcd-amot-slide-b-dt1mex3z0q .22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes tcd-amot-slide-b-dt1mex3z0q { from { transform: translateX(100%) } to { transform: translateX(0) } }

/* ── Header ───────────────────────────────────────────────── */
.tcd-amot-head[b-dt1mex3z0q] {
    padding: 18px 22px;
    border-bottom: 1px solid var(--ec-border-soft);
    background: linear-gradient(135deg, #fff5e7, #fff);
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.tcd-amot-head-icon[b-dt1mex3z0q] {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--ec-amber, #f59e0b);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tcd-amot-head-icon .bi[b-dt1mex3z0q] { font-size: 18px; }
.tcd-amot-head-text[b-dt1mex3z0q] { flex: 1; min-width: 0; }
.tcd-amot-head-row[b-dt1mex3z0q] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
}
.tcd-amot-eyebrow[b-dt1mex3z0q] {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ec-amber, #f59e0b);
    margin: 0;
}
.tcd-amot-eyebrow-pill[b-dt1mex3z0q] {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 2px 7px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--ec-amber, #f59e0b) 14%, transparent);
    color: var(--ec-amber, #f59e0b);
}
.tcd-amot-head-text h2[b-dt1mex3z0q] {
    font-size: 18px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
    letter-spacing: -0.005em;
}
.tcd-amot-head-sub[b-dt1mex3z0q] {
    font-size: 12px;
    color: var(--ec-muted);
    margin: 4px 0 0;
}
.tcd-amot-close[b-dt1mex3z0q] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 1px solid var(--ec-border);
    background: #fff;
    font-size: 18px;
    color: var(--ec-muted);
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
    flex-shrink: 0;
}
.tcd-amot-close:hover[b-dt1mex3z0q] { color: var(--ec-text); }

/* ── Toolbar (pills + search + group toggle) ──────────────── */
.tcd-amot-toolbar[b-dt1mex3z0q] {
    padding: 14px 22px;
    border-bottom: 1px solid var(--ec-border-soft);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.tcd-amot-pills[b-dt1mex3z0q] { display: inline-flex; gap: 5px; }
.tcd-amot-pill[b-dt1mex3z0q] {
    background: #fff;
    color: var(--ec-sub);
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    padding: 6px 11px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.tcd-amot-pill-count[b-dt1mex3z0q] {
    font-size: 10px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--ec-border-soft);
    color: var(--ec-muted);
}
.tcd-amot-pill--unx.tcd-amot-pill--on[b-dt1mex3z0q] {
    background: var(--ec-amber, #f59e0b);
    color: #fff;
    border-color: var(--ec-amber, #f59e0b);
}
.tcd-amot-pill--mot.tcd-amot-pill--on[b-dt1mex3z0q] {
    background: var(--ec-green, #16a34a);
    color: #fff;
    border-color: var(--ec-green, #16a34a);
}
.tcd-amot-pill--all.tcd-amot-pill--on[b-dt1mex3z0q] {
    background: var(--ec-text);
    color: #fff;
    border-color: var(--ec-text);
}
.tcd-amot-pill--on .tcd-amot-pill-count[b-dt1mex3z0q] {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

.tcd-amot-search[b-dt1mex3z0q] {
    position: relative;
    flex: 1 1 200px;
    min-width: 180px;
}
.tcd-amot-search .bi[b-dt1mex3z0q] {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--ec-muted);
}
.tcd-amot-search input[b-dt1mex3z0q] {
    width: 100%;
    padding: 7px 12px 7px 32px;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    font-size: 12.5px;
    font-family: inherit;
    outline: none;
    background: #fff;
    color: var(--ec-text);
    box-sizing: border-box;
}
.tcd-amot-search input:focus[b-dt1mex3z0q] {
    border-color: var(--ec-amber, #f59e0b);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ec-amber, #f59e0b) 14%, transparent);
}

.tcd-amot-groupseg[b-dt1mex3z0q] {
    display: inline-flex;
    gap: 0;
    background: var(--ec-text);
    border-radius: 9px;
    padding: 3px;
}
.tcd-amot-groupseg-btn[b-dt1mex3z0q] {
    padding: 6px 11px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, .72);
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
}
.tcd-amot-groupseg-btn--on[b-dt1mex3z0q] {
    background: #fff;
    color: var(--ec-text);
}

/* ── Body ─────────────────────────────────────────────────── */
.tcd-amot-body[b-dt1mex3z0q] {
    flex: 1;
    overflow-y: auto;
    padding: 14px 22px;
    background: var(--ec-bg);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tcd-amot-loading[b-dt1mex3z0q] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 24px 0;
    color: var(--ec-muted);
    font-size: 13px;
}
.tcd-amot-loading .bi[b-dt1mex3z0q] { animation: tcd-amot-spin-b-dt1mex3z0q 1s linear infinite; }
@keyframes tcd-amot-spin-b-dt1mex3z0q { to { transform: rotate(360deg); } }

.tcd-amot-empty[b-dt1mex3z0q] {
    background: #fff;
    border: 1px dashed var(--ec-border);
    border-radius: 12px;
    padding: 36px 24px;
    text-align: center;
}
.tcd-amot-empty .bi[b-dt1mex3z0q] {
    font-size: 32px;
    color: var(--ec-green);
}
.tcd-amot-empty-title[b-dt1mex3z0q] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 10px 0 0;
}
.tcd-amot-empty-sub[b-dt1mex3z0q] {
    font-size: 12px;
    color: var(--ec-muted);
    margin: 5px auto 0;
    max-width: 360px;
    line-height: 1.5;
}

.tcd-amot-group[b-dt1mex3z0q] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 12px;
    overflow: hidden;
}
.tcd-amot-group-head[b-dt1mex3z0q] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--ec-border-soft);
}
.tcd-amot-group-avatar[b-dt1mex3z0q] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
}
.tcd-amot-group-text[b-dt1mex3z0q] { flex: 1; min-width: 0; }
.tcd-amot-group-name[b-dt1mex3z0q] {
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.tcd-amot-group-meta[b-dt1mex3z0q] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 2px 0 0;
}
.tcd-amot-group-meta-need[b-dt1mex3z0q] {
    color: var(--ec-amber, #f59e0b);
}
.tcd-amot-group-selectall[b-dt1mex3z0q] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 7px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 700;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
}
.tcd-amot-group-selectall:disabled[b-dt1mex3z0q] { opacity: .5; cursor: not-allowed; }
.tcd-amot-group-cta[b-dt1mex3z0q] {
    background: var(--ec-amber, #f59e0b);
    border: none;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 11.5px;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 4px 10px color-mix(in srgb, var(--ec-amber, #f59e0b) 30%, transparent);
}
.tcd-amot-group-cta:hover[b-dt1mex3z0q] { filter: brightness(1.06); }

/* Row — checkbox + meta + status chip + per-row Motivate */
.tcd-amot-row[b-dt1mex3z0q] {
    display: grid;
    grid-template-columns: 20px 1fr auto auto;
    gap: 11px;
    align-items: center;
    padding: 10px 14px;
    border-top: 1px solid var(--ec-border-soft);
}
.tcd-amot-row:first-child[b-dt1mex3z0q] { border-top: none; }
.tcd-amot-row--mot[b-dt1mex3z0q] { background: color-mix(in srgb, var(--ec-green, #16a34a) 4%, #fff); }
.tcd-amot-row input[type="checkbox"][b-dt1mex3z0q] {
    width: 16px;
    height: 16px;
    accent-color: var(--ec-amber, #f59e0b);
    cursor: pointer;
}
.tcd-amot-row input[type="checkbox"]:disabled[b-dt1mex3z0q] { opacity: .3; cursor: not-allowed; }
.tcd-amot-row-text[b-dt1mex3z0q] { min-width: 0; }
.tcd-amot-row-meta[b-dt1mex3z0q] {
    font-size: 11.5px;
    color: var(--ec-sub);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.tcd-amot-row-subj[b-dt1mex3z0q] {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 2px 6px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--ec-blue) 14%, transparent);
    color: var(--ec-blue);
}
.tcd-amot-row-sub[b-dt1mex3z0q] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 2px 0 0;
}
.tcd-amot-row-status[b-dt1mex3z0q] {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 4px;
}
.tcd-amot-row-status--unx[b-dt1mex3z0q] {
    background: color-mix(in srgb, var(--ec-amber, #f59e0b) 14%, transparent);
    color: var(--ec-amber, #f59e0b);
}
.tcd-amot-row-status--mot[b-dt1mex3z0q] {
    background: color-mix(in srgb, var(--ec-green, #16a34a) 14%, transparent);
    color: var(--ec-green, #16a34a);
}
.tcd-amot-row-cta[b-dt1mex3z0q] {
    background: #fff;
    border: 1px solid var(--ec-amber, #f59e0b);
    border-radius: 8px;
    padding: 5px 11px;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--ec-amber, #f59e0b);
    cursor: pointer;
    font-family: inherit;
}
.tcd-amot-row-cta:hover[b-dt1mex3z0q] {
    background: color-mix(in srgb, var(--ec-amber, #f59e0b) 8%, #fff);
}

/* ── Sticky footer ────────────────────────────────────────── */
.tcd-amot-foot[b-dt1mex3z0q] {
    padding: 12px 22px;
    border-top: 1px solid var(--ec-border-soft);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.tcd-amot-foot-tip[b-dt1mex3z0q] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 0;
    flex: 1;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tcd-amot-foot-tip .bi[b-dt1mex3z0q] { color: var(--ec-amber, #f59e0b); }
.tcd-amot-foot-actions[b-dt1mex3z0q] { display: inline-flex; gap: 7px; }
.tcd-amot-foot-close[b-dt1mex3z0q] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
}
.tcd-amot-foot-cta[b-dt1mex3z0q] {
    background: var(--ec-amber, #f59e0b);
    border: none;
    border-radius: 9px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--ec-amber, #f59e0b) 30%, transparent);
}
.tcd-amot-foot-cta:disabled[b-dt1mex3z0q] {
    background: var(--ec-border-soft);
    color: var(--ec-muted);
    box-shadow: none;
    cursor: not-allowed;
}

/* ── Reason-picker modal (inline, top-most) ───────────────── */
.tcd-amot-modal-backdrop[b-dt1mex3z0q] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .6);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.tcd-amot-modal[b-dt1mex3z0q] {
    background: #fff;
    border-radius: 16px;
    max-width: 460px;
    width: 100%;
    box-shadow: 0 24px 60px rgba(13, 23, 51, .4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.tcd-amot-modal-head[b-dt1mex3z0q] {
    padding: 16px 20px;
    border-bottom: 1px solid var(--ec-border-soft);
    background: linear-gradient(135deg, #fff5e7, #fff);
    display: flex;
    align-items: center;
    gap: 11px;
}
.tcd-amot-modal-head-icon[b-dt1mex3z0q] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--ec-amber, #f59e0b);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tcd-amot-modal-head-icon .bi[b-dt1mex3z0q] { font-size: 16px; }
.tcd-amot-modal-head-text[b-dt1mex3z0q] { flex: 1; min-width: 0; }
.tcd-amot-modal-eyebrow[b-dt1mex3z0q] {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--ec-amber, #f59e0b);
    margin: 0;
}
.tcd-amot-modal-head-text h3[b-dt1mex3z0q] {
    font-size: 15px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 3px 0 0;
}
.tcd-amot-modal-close[b-dt1mex3z0q] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--ec-border);
    background: #fff;
    font-size: 16px;
    color: var(--ec-muted);
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
    flex-shrink: 0;
}

/* AFFECTED ABSENCES — mini list section between head and body. Each row
   is a 24px avatar + a single inline line "Name · Subject · Date · Time".
   Scrolls when there are more than 4 entries so bulk-motivate (e.g. 30
   selected) doesn't push the reason chips off-screen. */
.tcd-amot-modal-affected[b-dt1mex3z0q] {
    padding: 13px 20px 12px;
    border-bottom: 1px solid var(--ec-border-soft);
    background: color-mix(in srgb, var(--ec-bg) 40%, #fff);
}
.tcd-amot-modal-affected-list[b-dt1mex3z0q] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 140px;
    overflow-y: auto;
    margin-top: 6px;
}
.tcd-amot-modal-affected-row[b-dt1mex3z0q] {
    display: flex;
    align-items: center;
    gap: 9px;
}
.tcd-amot-modal-affected-av[b-dt1mex3z0q] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    flex-shrink: 0;
}
.tcd-amot-modal-affected-row p[b-dt1mex3z0q] {
    font-size: 11.5px;
    color: var(--ec-sub);
    margin: 0;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tcd-amot-modal-affected-row p b[b-dt1mex3z0q] { color: var(--ec-text); font-weight: 700; }

.tcd-amot-modal-body[b-dt1mex3z0q] {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Green confirmation banner — sets expectations before commit. Per
   prototype MotivateAbsenceModal lines 36636-36641. */
.tcd-amot-modal-banner[b-dt1mex3z0q] {
    padding: 10px 12px;
    background: var(--ec-green-lt, color-mix(in srgb, var(--ec-green, #16a34a) 12%, #fff));
    border: 1px solid color-mix(in srgb, var(--ec-green, #16a34a) 40%, transparent);
    border-radius: 9px;
    display: flex;
    gap: 9px;
    align-items: flex-start;
}
.tcd-amot-modal-banner .bi[b-dt1mex3z0q] {
    color: var(--ec-green, #16a34a);
    font-size: 16px;
    line-height: 1.4;
    flex-shrink: 0;
}
.tcd-amot-modal-banner p[b-dt1mex3z0q] {
    font-size: 11.5px;
    color: var(--ec-text);
    line-height: 1.55;
    margin: 0;
}
.tcd-amot-modal-banner b[b-dt1mex3z0q] { color: var(--ec-text); font-weight: 700; }
.tcd-amot-modal-label[b-dt1mex3z0q] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 -2px;
}
.tcd-amot-modal-label span[b-dt1mex3z0q] {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    color: var(--ec-muted);
}
.tcd-amot-modal-chips[b-dt1mex3z0q] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.tcd-amot-modal-chip[b-dt1mex3z0q] {
    background: #fff;
    color: var(--ec-sub);
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}
.tcd-amot-modal-chip--on[b-dt1mex3z0q] {
    background: var(--ec-amber, #f59e0b);
    color: #fff;
    border-color: var(--ec-amber, #f59e0b);
}
.tcd-amot-modal-note[b-dt1mex3z0q] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    font-size: 12.5px;
    font-family: inherit;
    outline: none;
    min-height: 56px;
    resize: vertical;
    box-sizing: border-box;
}

.tcd-amot-modal-foot[b-dt1mex3z0q] {
    padding: 12px 20px;
    border-top: 1px solid var(--ec-border-soft);
    display: flex;
    justify-content: flex-end;
    gap: 7px;
}
.tcd-amot-modal-cancel[b-dt1mex3z0q] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
}
.tcd-amot-modal-save[b-dt1mex3z0q] {
    background: var(--ec-amber, #f59e0b);
    border: none;
    border-radius: 9px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--ec-amber, #f59e0b) 30%, transparent);
}
.tcd-amot-modal-save:disabled[b-dt1mex3z0q] {
    background: var(--ec-border-soft);
    color: var(--ec-muted);
    box-shadow: none;
    cursor: not-allowed;
}

/* ─────────────────────────────────────────────────────────────────────
   Notices tab — parent absence notices folded in from the old
   standalone /teacher/absence-notices page. Card layout mirrors the
   prototype's tan-card (envelope explainer + reason chip + parent quote
   + Approve/Reject buttons).
   ──────────────────────────────────────────────────────────────────── */

/* "Notices N" pill — same shape as Unexcused/Motivated/All, blue accent. */
.tcd-amot-pill--ntc[b-dt1mex3z0q] { --pill-tone: var(--ec-blue, #3b5fc0); }
.tcd-amot-pill--ntc.tcd-amot-pill--on[b-dt1mex3z0q] {
    background: var(--ec-blue, #3b5fc0);
    color: #fff;
    border-color: var(--ec-blue, #3b5fc0);
}
.tcd-amot-pill--ntc.tcd-amot-pill--on .tcd-amot-pill-count[b-dt1mex3z0q] {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

/* Top-of-tab explainer panel. */
.tcd-amot-notice-help[b-dt1mex3z0q] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: color-mix(in srgb, var(--ec-blue, #3b5fc0) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--ec-blue, #3b5fc0) 18%, transparent);
    border-radius: 12px;
    padding: 11px 14px;
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--ec-text);
    line-height: 1.45;
}
.tcd-amot-notice-help .bi[b-dt1mex3z0q] { color: var(--ec-blue, #3b5fc0); font-size: 16px; }
.tcd-amot-notice-help-ok[b-dt1mex3z0q] { color: var(--ec-green, #16a34a); }
.tcd-amot-notice-help-rej[b-dt1mex3z0q] { color: var(--ec-red, #dc2626); }

.tcd-amot-notices[b-dt1mex3z0q] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tcd-amot-notice[b-dt1mex3z0q] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tcd-amot-notice-head[b-dt1mex3z0q] {
    display: flex;
    align-items: center;
    gap: 12px;
}
.tcd-amot-notice-av[b-dt1mex3z0q] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tcd-amot-notice-id[b-dt1mex3z0q] { flex: 1; min-width: 0; }
.tcd-amot-notice-name[b-dt1mex3z0q] {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--ec-text);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.tcd-amot-notice-pill[b-dt1mex3z0q] {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ec-blue, #3b5fc0) 12%, transparent);
    color: var(--ec-blue, #3b5fc0);
    border: 1px solid color-mix(in srgb, var(--ec-blue, #3b5fc0) 22%, transparent);
}
.tcd-amot-notice-meta[b-dt1mex3z0q] {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--ec-muted);
}
.tcd-amot-notice-sep[b-dt1mex3z0q] { margin: 0 6px; opacity: 0.5; }

.tcd-amot-notice-row[b-dt1mex3z0q] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.tcd-amot-notice-reason[b-dt1mex3z0q] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 4px 9px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--ec-amber, #f59e0b) 12%, transparent);
    color: var(--ec-amber, #f59e0b);
    border: 1px solid color-mix(in srgb, var(--ec-amber, #f59e0b) 28%, transparent);
}
.tcd-amot-notice-from[b-dt1mex3z0q] {
    font-size: 12px;
    color: var(--ec-muted);
}

.tcd-amot-notice-note[b-dt1mex3z0q] {
    margin: 0;
    background: var(--ec-bg, #f8fafc);
    border-left: 3px solid var(--ec-border);
    border-radius: 0 8px 8px 0;
    padding: 10px 12px;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 13px;
    color: var(--ec-text);
    line-height: 1.5;
    font-style: italic;
}
.tcd-amot-notice-note .bi[b-dt1mex3z0q] { color: var(--ec-muted); flex-shrink: 0; margin-top: 2px; }

.tcd-amot-notice-actions[b-dt1mex3z0q] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
}
.tcd-amot-notice-btn[b-dt1mex3z0q] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    transition: opacity 0.12s, transform 0.04s;
}
.tcd-amot-notice-btn:disabled[b-dt1mex3z0q] { opacity: 0.55; cursor: not-allowed; }
.tcd-amot-notice-btn:active:not(:disabled)[b-dt1mex3z0q] { transform: translateY(1px); }

.tcd-amot-notice-btn--ok[b-dt1mex3z0q] {
    background: var(--ec-green, #16a34a);
    color: #fff;
    border-color: var(--ec-green, #16a34a);
}
.tcd-amot-notice-btn--rej[b-dt1mex3z0q] {
    background: #fff;
    color: var(--ec-red, #dc2626);
    border-color: color-mix(in srgb, var(--ec-red, #dc2626) 35%, transparent);
}
.tcd-amot-notice-btn--rej:hover:not(:disabled)[b-dt1mex3z0q] {
    background: color-mix(in srgb, var(--ec-red, #dc2626) 6%, transparent);
}

.tcd-amot-spin[b-dt1mex3z0q] {
    animation: tcd-amot-spin-b-dt1mex3z0q 1s linear infinite;
    display: inline-block;
}
@keyframes tcd-amot-spin-b-dt1mex3z0q {
    to { transform: rotate(360deg); }
}

.tcd-amot-notice-err[b-dt1mex3z0q] {
    margin-top: 10px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--ec-red, #dc2626) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--ec-red, #dc2626) 22%, transparent);
    color: var(--ec-red, #dc2626);
    border-radius: 10px;
    display: flex;
    gap: 8px;
    font-size: 13px;
}

/* Attachment doc pill — clickable card that opens the parent-uploaded
   doctor's note in a new tab via the signed URL. */
.tcd-amot-notice-doc[b-dt1mex3z0q] {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--ec-blue, #3b5fc0) 6%, #fff);
    border: 1px solid color-mix(in srgb, var(--ec-blue, #3b5fc0) 22%, transparent);
    color: var(--ec-text);
    transition: background .12s, border-color .12s;
}
.tcd-amot-notice-doc:hover[b-dt1mex3z0q] {
    background: color-mix(in srgb, var(--ec-blue, #3b5fc0) 10%, #fff);
    border-color: color-mix(in srgb, var(--ec-blue, #3b5fc0) 38%, transparent);
}
.tcd-amot-notice-doc .bi-paperclip[b-dt1mex3z0q] {
    font-size: 18px;
    color: var(--ec-blue, #3b5fc0);
    flex-shrink: 0;
}
.tcd-amot-notice-doc-text[b-dt1mex3z0q] { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tcd-amot-notice-doc-name[b-dt1mex3z0q] {
    font-size: 13px;
    font-weight: 700;
    color: var(--ec-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tcd-amot-notice-doc-meta[b-dt1mex3z0q] {
    font-size: 11px;
    color: var(--ec-muted);
}
.tcd-amot-notice-doc-arrow[b-dt1mex3z0q] {
    font-size: 13px;
    color: var(--ec-muted);
    flex-shrink: 0;
}

.tcd-amot-notice-nodoc[b-dt1mex3z0q] {
    margin: 0;
    font-size: 12px;
    color: var(--ec-amber, #b45309);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
/* /Components/Common/Atoms/AllergenChipPicker.razor.rz.scp.css */
/* AllergenChipPicker — chip strip + collapsible catalog panel. */

.acp[b-n1hb8juszf] { display: flex; flex-direction: column; gap: 8px; }

.acp-chips[b-n1hb8juszf] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}
.acp-empty[b-n1hb8juszf] {
    font-size: 11px;
    color: var(--ec-muted);
    font-style: italic;
    margin: 0;
}

.acp-chip[b-n1hb8juszf] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 5px 4px 9px;
    background: var(--ec-amber-lt);
    color: var(--ec-amber);
    border: 1px solid var(--ec-amber);
    border-radius: 99px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
}
.acp-chip i[b-n1hb8juszf] { font-size: 10px; }
.acp-chip-remove[b-n1hb8juszf] {
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    font-family: inherit;
    padding: 0 3px;
    line-height: 1;
    font-size: 14px;
    font-weight: 800;
}
.acp-chip-remove:hover[b-n1hb8juszf] { opacity: 0.7; }

.acp-add-btn[b-n1hb8juszf] {
    padding: 4px 11px;
    background: #fff;
    color: var(--ec-blue);
    border: 1px dashed color-mix(in srgb, var(--ec-blue) 50%, transparent);
    border-radius: 99px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.acp-add-btn i[b-n1hb8juszf] { font-size: 10px; }
.acp-add-btn:hover[b-n1hb8juszf] {
    background: var(--ec-blue-gh);
    border-color: var(--ec-blue);
}

.acp-panel[b-n1hb8juszf] {
    padding: 10px 12px;
    background: var(--ec-bg);
    border: 1px solid var(--ec-border);
    border-radius: 9px;
}
.acp-panel-label[b-n1hb8juszf] {
    font-size: 9.5px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 6px;
}
.acp-panel-grid[b-n1hb8juszf] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.acp-cat-btn[b-n1hb8juszf] {
    padding: 5px 9px;
    border-radius: 99px;
    border: 1px solid var(--ec-border);
    font-size: 10.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 0.12s, color 0.12s, transform 0.05s;
}
.acp-cat-btn:active[b-n1hb8juszf] { transform: translateY(1px); }
.acp-cat-short[b-n1hb8juszf] {
    font-size: 9px;
    opacity: 0.85;
}
.acp-cat-btn.is-on .acp-cat-short[b-n1hb8juszf] { opacity: 0.85; }
.acp-cat-check[b-n1hb8juszf] { font-size: 10px; }
/* /Components/Common/Atoms/ChildCard.razor.rz.scp.css */
.ec-child[b-k55u3onx5r] {
  display: grid; grid-template-columns: 48px 1fr auto; align-items: center;
  gap: 12px; padding: 12px 14px;
  background: var(--ec-card); border: 1px solid var(--ec-border); border-radius: 14px;
  cursor: pointer; font-family: inherit; text-align: left;
  transition: border-color .12s, box-shadow .12s;
}
.ec-child:hover[b-k55u3onx5r] { border-color: var(--ec-blue); }
.ec-child-selected[b-k55u3onx5r] { border-color: var(--ec-blue); box-shadow: 0 0 0 3px var(--ec-school-tint); }
.ec-stage-kindergarten .ec-child-selected[b-k55u3onx5r] { border-color: var(--ec-primary); box-shadow: 0 0 0 3px var(--ec-kg-tint); }
.ec-child-thumb[b-k55u3onx5r] {
  width: 48px; height: 48px; border-radius: 50%; overflow: hidden;
  background: var(--ec-school-tint); color: var(--ec-blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800;
}
.ec-child-thumb img[b-k55u3onx5r] { width: 100%; height: 100%; object-fit: cover; }
.ec-child-name[b-k55u3onx5r]  { font-size: 14px; font-weight: 800; color: var(--ec-text); line-height: 1.2; }
.ec-child-class[b-k55u3onx5r] { font-size: 11px; color: var(--ec-muted); margin-top: 2px; }
.ec-child-stage[b-k55u3onx5r] {
  font-size: 9px; font-weight: 800; padding: 3px 7px; border-radius: 5px;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--ec-border-soft); color: var(--ec-sub);
}
.ec-child-stage-kg[b-k55u3onx5r] { background: var(--ec-kg-tint); color: var(--ec-primary); }
.ec-child-stage-primary[b-k55u3onx5r], .ec-child-stage-secondary[b-k55u3onx5r] { background: var(--ec-school-tint); color: var(--ec-blue); }
.ec-child-headline[b-k55u3onx5r] { grid-column: 1 / -1; font-size: 12px; color: var(--ec-sub); margin-top: 4px; }
/* /Components/Common/Atoms/EcLoader.razor.rz.scp.css */
.ec-loader[b-zxfrbfu2fk] {
    color: var(--ec-sub);
    font-family: inherit;
}

.ec-loader--page[b-zxfrbfu2fk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 64px 24px;
    min-height: 240px;
}

.ec-loader--inline[b-zxfrbfu2fk] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ec-loader-ring[b-zxfrbfu2fk] {
    display: inline-block;
    box-sizing: border-box;
    border: 3px solid var(--ec-border);
    border-top-color: var(--ec-blue);
    border-radius: 50%;
    animation: ec-loader-spin-b-zxfrbfu2fk 0.7s linear infinite;
    flex-shrink: 0;
}

.ec-loader-label[b-zxfrbfu2fk] {
    margin: 0;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ec-muted);
    letter-spacing: 0.02em;
}

.ec-loader--inline .ec-loader-label[b-zxfrbfu2fk] {
    font-size: 12px;
    font-weight: 600;
    color: var(--ec-sub);
}

@keyframes ec-loader-spin-b-zxfrbfu2fk { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .ec-loader-ring[b-zxfrbfu2fk] { animation-duration: 1.6s; }
}
/* /Components/Common/Atoms/EcSkeleton.razor.rz.scp.css */
/* ─── Skeleton loader ─────────────────────────────────────────────────
   Shimmering placeholder blocks that hint at the upcoming layout while
   data is fetching. Colors hook into the existing --ec-* token system.
*/

.ec-skel[b-ax7ru71mef] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

/* Hero strip (used by Variant="page") */
.ec-skel-hero[b-ax7ru71mef] {
    height: 72px;
    border-radius: 14px;
    background: var(--ec-surface, #fff);
    border: 1px solid var(--ec-border, #e5e7eb);
    position: relative;
    overflow: hidden;
}

/* KPI strip */
.ec-skel-kpis[b-ax7ru71mef] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}

.ec-skel-kpi[b-ax7ru71mef] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--ec-surface, #fff);
    border: 1px solid var(--ec-border, #e5e7eb);
    border-radius: 14px;
}

.ec-skel-kpi-icon[b-ax7ru71mef] {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #f1f5f9;
    flex-shrink: 0;
}

.ec-skel-kpi-body[b-ax7ru71mef] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

/* Row list */
.ec-skel-rows[b-ax7ru71mef] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--ec-surface, #fff);
    border: 1px solid var(--ec-border, #e5e7eb);
    border-radius: 14px;
    padding: 8px;
}

.ec-skel-row[b-ax7ru71mef] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 12px;
    border-bottom: 1px solid var(--ec-border, #f1f5f9);
}

.ec-skel-row:last-child[b-ax7ru71mef] {
    border-bottom: none;
}

.ec-skel-row-avatar[b-ax7ru71mef] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f1f5f9;
    flex-shrink: 0;
}

.ec-skel-row-body[b-ax7ru71mef] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.ec-skel-row-meta[b-ax7ru71mef] {
    width: 90px;
    flex-shrink: 0;
}

/* Card grid */
.ec-skel-cards[b-ax7ru71mef] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.ec-skel-card[b-ax7ru71mef] {
    background: var(--ec-surface, #fff);
    border: 1px solid var(--ec-border, #e5e7eb);
    border-radius: 14px;
    overflow: hidden;
}

.ec-skel-card-cover[b-ax7ru71mef] {
    height: 100px;
    background: #f1f5f9;
}

.ec-skel-card-body[b-ax7ru71mef] {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Shimmer line — width modifiers control how full a row looks  */
.ec-skel-line[b-ax7ru71mef] {
    height: 12px;
    border-radius: 6px;
    background: #f1f5f9;
}

.ec-skel-line--40[b-ax7ru71mef] { width: 40%; }
.ec-skel-line--55[b-ax7ru71mef] { width: 55%; }
.ec-skel-line--70[b-ax7ru71mef] { width: 70%; }
.ec-skel-line--85[b-ax7ru71mef] { width: 85%; }
.ec-skel-line--90[b-ax7ru71mef] { width: 90%; }

/* Shimmer animation — gentle opacity pulse, respects reduced motion */
.ec-skel-hero[b-ax7ru71mef],
.ec-skel-kpi-icon[b-ax7ru71mef],
.ec-skel-row-avatar[b-ax7ru71mef],
.ec-skel-card-cover[b-ax7ru71mef],
.ec-skel-line[b-ax7ru71mef] {
    animation: ec-skel-pulse-b-ax7ru71mef 1.4s ease-in-out infinite;
}

@keyframes ec-skel-pulse-b-ax7ru71mef {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
    .ec-skel-hero[b-ax7ru71mef],
    .ec-skel-kpi-icon[b-ax7ru71mef],
    .ec-skel-row-avatar[b-ax7ru71mef],
    .ec-skel-card-cover[b-ax7ru71mef],
    .ec-skel-line[b-ax7ru71mef] {
        animation: none;
    }
}
/* /Components/Common/Atoms/GradePill.razor.rz.scp.css */
.ec-grade[b-od8bfdgej5] {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; padding: 4px 9px; border-radius: 8px;
  font-size: 13px; font-weight: 800; border: 1.5px solid;
}
.ec-grade-ok[b-od8bfdgej5]    { background: #dcfce7; border-color: #bbf7d0; color: var(--ec-ok); }
.ec-grade-warn[b-od8bfdgej5]  { background: #fef3c7; border-color: #fde68a; color: var(--ec-warn); }
.ec-grade-alert[b-od8bfdgej5] { background: #fee2e2; border-color: #fecaca; color: var(--ec-alert); }
/* /Components/Common/Atoms/ListRow.razor.rz.scp.css */
.ec-row[b-ws9prvn3xn] {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 10px;
  background: var(--ec-card);
}
.ec-row-bar[b-ws9prvn3xn] { width: 3px; align-self: stretch; border-radius: 3px; background: var(--row-accent); }
.ec-row-body[b-ws9prvn3xn] { flex: 1; min-width: 0; }
.ec-row-leading[b-ws9prvn3xn], .ec-row-trailing[b-ws9prvn3xn] { flex-shrink: 0; }
.ec-row-now[b-ws9prvn3xn]  { background: var(--ec-school-tint); }
.ec-row-past[b-ws9prvn3xn] { opacity: 0.55; }
.ec-stage-kindergarten .ec-row-now[b-ws9prvn3xn] { background: var(--ec-kg-tint); }
/* /Components/Common/Atoms/ProgressBar.razor.rz.scp.css */
.ec-pbar[b-cp0i4p7svz] { display: flex; flex-direction: column; gap: 4px; }
.ec-pbar-row[b-cp0i4p7svz] { display: flex; justify-content: space-between; align-items: baseline; }
.ec-pbar-label[b-cp0i4p7svz] { font-size: 11px; font-weight: 600; color: var(--ec-sub); }
.ec-pbar-value[b-cp0i4p7svz] { font-size: 11px; font-weight: 800; color: var(--ec-text); font-variant-numeric: tabular-nums; }
.ec-pbar-track[b-cp0i4p7svz] { height: 6px; background: var(--ec-border-soft); border-radius: 3px; overflow: hidden; }
.ec-pbar-fill[b-cp0i4p7svz] { height: 100%; border-radius: 3px; transition: width .25s ease; }
/* /Components/Common/Atoms/RoutineSlotEmoji.razor.rz.scp.css */
.ec-rse[b-gdwcf678il] {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  background: color-mix(in oklab, var(--rse-color) 18%, transparent);
  font-size: 16px; line-height: 1;
  flex-shrink: 0;
}
/* /Components/Common/Atoms/RTag.razor.rz.scp.css */
.ec-rtag[b-l68mz9err4] {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.4;
}
/* /Components/Common/Atoms/StatusChip.razor.rz.scp.css */
.ec-status[b-p0b8w4s9y1] {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 13px; border-radius: 11px; border: 1px solid var(--ec-border);
}
.ec-status-dot[b-p0b8w4s9y1] { width: 8px; height: 8px; border-radius: 50%; }
.ec-status-title[b-p0b8w4s9y1] { font-size: 12px; font-weight: 800; color: var(--ec-text); line-height: 1.2; }
.ec-status-sub[b-p0b8w4s9y1]   { font-size: 10.5px; color: var(--ec-sub); margin-top: 1px; }
.ec-status-ok[b-p0b8w4s9y1]   { background: #dcfce7; border-color: #bbf7d0; }
.ec-status-ok   .ec-status-dot[b-p0b8w4s9y1] { background: var(--ec-ok);   box-shadow: 0 0 0 3px #bbf7d0; }
.ec-status-warn[b-p0b8w4s9y1] { background: #fef3c7; border-color: #fde68a; }
.ec-status-warn .ec-status-dot[b-p0b8w4s9y1] { background: var(--ec-warn); box-shadow: 0 0 0 3px #fde68a; }
.ec-status-info[b-p0b8w4s9y1] { background: var(--ec-school-tint); border-color: var(--ec-school-tint); }
.ec-status-info .ec-status-dot[b-p0b8w4s9y1] { background: var(--ec-blue); box-shadow: 0 0 0 3px var(--ec-school-tint); }
/* /Components/Common/Atoms/StudentAvatar.razor.rz.scp.css */
.ec-avatar[b-q71xgsnsvj] {
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    font-weight: 800;
    line-height: 1;
}

img.ec-avatar[b-q71xgsnsvj] {
    object-fit: cover;
}
/* /Components/Common/Atoms/SubjectCell.razor.rz.scp.css */
.ec-subj[b-mcx2z3cgzr] { display: flex; align-items: center; gap: 11px; }
.ec-subj-dot[b-mcx2z3cgzr] { width: 10px; height: 10px; border-radius: 50%; background: var(--subj-color); flex-shrink: 0; }
.ec-subj-name[b-mcx2z3cgzr] { font-size: 13px; font-weight: 700; color: var(--ec-text); line-height: 1.2; }
.ec-subj-meta[b-mcx2z3cgzr] { font-size: 11px; color: var(--ec-muted); margin-top: 2px; }
/* /Components/Common/Atoms/SubjectMonogram.razor.rz.scp.css */
.ec-subject-monogram[b-vgbean543o] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    line-height: 1;
}

.ec-subject-monogram__txt[b-vgbean543o] {
    font-weight: 800;
    letter-spacing: -0.02em;
}
/* /Components/Common/Atoms/UserAvatar.razor.rz.scp.css */
/* Mirror of StudentAvatar.razor.css — Blazor scopes .ec-avatar to each component,
   so UserAvatar needs its own copy of the base rules. The atom sets size /
   border-radius / font-size / background inline; these provide centring, photo
   cover-fit and the white glyph colour. */
.ec-avatar[b-zwwu6zbd27] {
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    font-weight: 800;
    line-height: 1;
}

img.ec-avatar[b-zwwu6zbd27] {
    object-fit: cover;
}
/* /Components/Common/Atoms/WebCapacityBar.razor.rz.scp.css */
.ec-cap-bar[b-ku84qapb0d] {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.ec-cap-bar-label[b-ku84qapb0d] {
  font-size: 10px;
  font-weight: 700;
  color: var(--ec-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  flex-shrink: 0;
}

.ec-cap-bar-track[b-ku84qapb0d] {
  flex: 1;
  min-width: 80px;
  max-width: 140px;
  height: 6px;
  background: var(--ec-border-soft);
  border-radius: 3px;
  overflow: hidden;
}

.ec-cap-bar-fill[b-ku84qapb0d] {
  height: 100%;
  border-radius: 3px;
  transition: width .3s ease;
}

.ec-cap-bar-value[b-ku84qapb0d] {
  font-size: 12px;
  font-weight: 700;
  color: var(--ec-text);
  white-space: nowrap;
  flex-shrink: 0;
}
/* /Components/Common/Atoms/WebCard.razor.rz.scp.css */
.ec-card[b-pzbavves1x] {
    background: var(--ec-panel);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius-card);
    box-shadow: var(--ec-shadow-sm);
    padding: var(--card-pad, var(--ec-sp-4)); /* 16px default */
    display: flex;
    flex-direction: column;
    gap: var(--ec-sp-3);
}

.ec-card--accent[b-pzbavves1x] {
    border-top: 3px solid var(--card-accent, var(--ec-blue));
}

.ec-card-head[b-pzbavves1x] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ec-sp-3);
}

.ec-card-headings[b-pzbavves1x] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ec-card-eyebrow[b-pzbavves1x] {
    font-size: var(--ec-fs-eyebrow);
    font-weight: var(--ec-fw-bold);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ec-muted);
}

.ec-card-title[b-pzbavves1x] {
    margin: 0;
    font-size: var(--ec-fs-lg);
    font-weight: var(--ec-fw-bold);
    color: var(--ec-text);
    line-height: var(--ec-lh-tight);
}

.ec-card-actions[b-pzbavves1x] {
    flex-shrink: 0;
}

.ec-card-foot[b-pzbavves1x] {
    padding-top: var(--ec-sp-3);
    border-top: 1px solid var(--ec-border-soft);
}
/* /Components/Common/Atoms/WebEmpty.razor.rz.scp.css */
/* Bordered card — the one canonical empty/"no data" look across the whole app
   (the Documents pattern). Defined here so the border is identical everywhere. */
.ec-empty[b-g50vvncep4] {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 48px 24px;
  background: var(--ec-panel);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius-card);
}
/* Plain (no card) — for empties already inside a structured panel. */
.ec-empty--plain[b-g50vvncep4] { background: none; border: none; border-radius: 0; }
.ec-empty-icon[b-g50vvncep4] {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--ec-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: var(--ec-muted);
  margin-bottom: 14px;
}
.ec-empty-title[b-g50vvncep4] { font-size: 14px; font-weight: 800; color: var(--ec-text); margin-bottom: 5px; }
.ec-empty-body[b-g50vvncep4]  { font-size: 13px; color: var(--ec-muted); max-width: 340px; line-height: 1.5; margin-bottom: 16px; }
/* /Components/Common/Atoms/WebKpi.razor.rz.scp.css */
/* Canonical KPI = the Users page card (.up2-kpi): icon + body vertically centered
   as one block, consistent card height (min-height), 42px icon, 22px value. */
.ec-kpi[b-cuhv5umaum] {
  display: flex; align-items: center; gap: 13px;
  background: var(--ec-card); border: 1px solid var(--ec-border);
  border-radius: 14px; padding: 18px 20px; min-height: 96px;
  font-family: inherit; text-align: left;
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}
button.ec-kpi[b-cuhv5umaum] { cursor: pointer; }
button.ec-kpi:hover[b-cuhv5umaum] { border-color: var(--kpi-accent); box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.ec-kpi-stripe[b-cuhv5umaum] { width: 4px; border-radius: 2px; background: var(--kpi-accent); flex-shrink: 0; }
.ec-kpi-icon-box[b-cuhv5umaum] {
  width: 42px; height: 42px; border-radius: 12px;
  background: color-mix(in srgb, var(--kpi-accent) 15%, transparent);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0; color: var(--kpi-accent);
  align-self: center;
}
.ec-kpi-body[b-cuhv5umaum] { flex: 1; min-width: 0; }
.ec-kpi-row[b-cuhv5umaum]  { display: flex; align-items: baseline; gap: 8px; }
.ec-kpi-value[b-cuhv5umaum] { font-size: 22px; font-weight: 800; color: var(--ec-text); line-height: 1; letter-spacing: -0.02em; }
.ec-kpi-trend[b-cuhv5umaum] { font-size: 11px; font-weight: 700; }
.ec-kpi-trend-up[b-cuhv5umaum]   { color: var(--ec-ok); }
.ec-kpi-trend-down[b-cuhv5umaum] { color: var(--ec-alert); }
/* margin: Xpx 0 0 (not margin-top) — explicitly zero the bottom so Bootstrap
   Reboot's `p { margin-bottom: 1rem }` can't leak onto these <p> elements and
   inflate the card height (was making WebKpi cards 129px vs the bespoke 101px). */
.ec-kpi-label[b-cuhv5umaum] { font-size: 10px; font-weight: 700; color: var(--ec-muted); text-transform: uppercase; letter-spacing: 0.1em; margin: 5px 0 0; }
.ec-kpi-sub[b-cuhv5umaum]   { font-size: 11px; color: var(--ec-sub); margin: 3px 0 0; }

/* Compact mode — smaller padding + icon box + value, for 5-tile rows that
   would otherwise have to wrap. Used on homework / food menus / activities /
   attendance / timetable / classes. Always nowrap on the value so long
   strings like "Week 19" don't bump the card height. */
.ec-kpi--compact[b-cuhv5umaum] { padding: 12px 14px; gap: 11px; border-radius: 12px; min-height: 76px; }
.ec-kpi--compact .ec-kpi-icon-box[b-cuhv5umaum] { width: 38px; height: 38px; border-radius: 10px; font-size: 16px; }
.ec-kpi--compact .ec-kpi-value[b-cuhv5umaum]    { font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-kpi--compact .ec-kpi-label[b-cuhv5umaum]    { margin-top: 4px; font-size: 9.5px; }
.ec-kpi--compact .ec-kpi-sub[b-cuhv5umaum]      { margin-top: 2px; font-size: 10.5px; }
/* /Components/Common/Atoms/WebPage.razor.rz.scp.css */
/* Standard page-body wrapper — vertical rhythm only; the shell owns the gutter. */
.ec-web-page[b-h6e1356rca] {
    display: flex;
    flex-direction: column;
    gap: var(--ec-sp-5); /* 20px between page sections */
}

/* Cap + centre the content column when MaxWidth is set. */
.ec-web-page--max[b-h6e1356rca] {
    max-width: var(--ec-wp-max);
    width: 100%;
    margin-inline: auto;
}

/* Full-bleed — cancel the shell's 24px gutter (16px on mobile). */
.ec-web-page--bleed[b-h6e1356rca] {
    margin: calc(var(--ec-sp-6) * -1);
}

@media (max-width: 640.98px) {
    .ec-web-page--bleed[b-h6e1356rca] {
        margin: calc(var(--ec-sp-4) * -1);
    }
}
/* /Components/Common/Atoms/WebPill.razor.rz.scp.css */
.ec-pill[b-03nunk04sp] {
  display: inline-flex; align-items: center;
  padding: 3px 7px; border-radius: 5px;
  font-size: 9px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap;
  background: var(--ec-border-soft); color: var(--ec-sub);
}

/* ── Tone: soft (default) ── */
.ec-pill-neutral[b-03nunk04sp] { background: var(--ec-border-soft); color: var(--ec-sub); }
.ec-pill-info[b-03nunk04sp]    { background: var(--ec-school-tint); color: var(--ec-blue); }
.ec-pill-ok[b-03nunk04sp]      { background: #dcfce7;               color: var(--ec-ok); }
.ec-pill-warn[b-03nunk04sp]    { background: #fef3c7;               color: var(--ec-warn); }
.ec-pill-alert[b-03nunk04sp]   { background: #fee2e2;               color: var(--ec-alert); }

/* ── Variant: solid — override bg to the token color, text white ── */
.ec-pill-solid.ec-pill-info[b-03nunk04sp]    { background: var(--ec-blue);  color: #fff; }
.ec-pill-solid.ec-pill-ok[b-03nunk04sp]      { background: var(--ec-ok);    color: #fff; }
.ec-pill-solid.ec-pill-warn[b-03nunk04sp]    { background: var(--ec-warn);  color: #fff; }
.ec-pill-solid.ec-pill-alert[b-03nunk04sp]   { background: var(--ec-alert); color: #fff; }
.ec-pill-solid.ec-pill-neutral[b-03nunk04sp] { background: var(--ec-sub);   color: #fff; }
/* /Components/Common/Atoms/WebSectionHeader.razor.rz.scp.css */
.ec-sec-head[b-pe9iyaxdeq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ec-sp-3);
}

.ec-sec-headings[b-pe9iyaxdeq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ec-sec-eyebrow[b-pe9iyaxdeq] {
    font-size: var(--ec-fs-eyebrow);
    font-weight: var(--ec-fw-bold);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ec-muted);
}

.ec-sec-title[b-pe9iyaxdeq] {
    margin: 0;
    font-size: var(--ec-fs-xl);
    font-weight: var(--ec-fw-bold);
    color: var(--ec-text);
    line-height: var(--ec-lh-tight);
}

.ec-sec-action[b-pe9iyaxdeq] {
    flex-shrink: 0;
}
/* /Components/Common/Atoms/WebSegmentedControl.razor.rz.scp.css */
.ec-seg[b-n7ikym79oe] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ec-sp-2);
}

/* ── Pills variant — group switcher ─────────────────────────────────────── */
.ec-seg--pills .ec-seg-item[b-n7ikym79oe] {
    display: inline-flex;
    align-items: center;
    gap: var(--ec-sp-2);
    padding: 7px 14px;
    font-size: var(--ec-fs-sm);
    font-weight: var(--ec-fw-semibold);
    color: var(--ec-text);
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius-md);
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.ec-seg--pills .ec-seg-item:hover[b-n7ikym79oe] {
    border-color: var(--seg-accent, var(--ec-blue));
}

.ec-seg--pills .ec-seg-item--on[b-n7ikym79oe] {
    background: var(--seg-accent, var(--ec-blue));
    border-color: var(--seg-accent, var(--ec-blue));
    color: #fff;
}

.ec-seg-dot[b-n7ikym79oe] {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--seg-dot, var(--ec-muted));
    flex-shrink: 0;
}

.ec-seg-item--on .ec-seg-dot[b-n7ikym79oe] {
    background: #fff;
}

/* ── Tabs variant — underline tab row ───────────────────────────────────── */
.ec-seg--tabs[b-n7ikym79oe] {
    gap: 0;
    border-bottom: 1px solid var(--ec-border);
}

.ec-seg--tabs .ec-seg-item[b-n7ikym79oe] {
    display: inline-flex;
    align-items: center;
    gap: var(--ec-sp-2);
    background: none;
    border: none;
    padding: 10px 14px;
    font-size: var(--ec-fs-base);
    font-weight: var(--ec-fw-semibold);
    color: var(--ec-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    transition: color .12s ease, border-color .12s ease;
}

.ec-seg--tabs .ec-seg-item:hover[b-n7ikym79oe] {
    color: var(--ec-text);
}

.ec-seg--tabs .ec-seg-item--on[b-n7ikym79oe] {
    color: var(--seg-accent, var(--ec-blue));
    border-bottom-color: var(--seg-accent, var(--ec-blue));
}
/* /Components/Common/Atoms/WebSidebar.razor.rz.scp.css */
.ec-web-sidebar[b-7bduwk283i] {
    width: 248px;
    background: #fff;
    border-right: 1px solid var(--ec-border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    height: 100%;
}

.ec-sb-brand[b-7bduwk283i] {
    padding: 18px 18px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--ec-border-soft);
}

.ec-sb-brand--branded[b-7bduwk283i] {
    padding: 14px 16px 12px;
}

.ec-sb-brand-mark[b-7bduwk283i] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--ec-blue), var(--ec-blue-dk));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    flex-shrink: 0;
}

.ec-sb-brand-mark--branded[b-7bduwk283i] {
    width: 40px;
    height: 40px;
    font-size: 20px;
}

.ec-sb-brand-mark--image[b-7bduwk283i] {
    border: none;
    overflow: hidden;
    padding: 2px;
    background: #fff;
}

.ec-sb-brand-mark--image img[b-7bduwk283i] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.ec-sb-brand-emoji[b-7bduwk283i] {
    font-size: 22px;
    line-height: 1;
}

.ec-sb-brand-text[b-7bduwk283i] {
    flex: 1;
    min-width: 0;
}

.ec-sb-brand-name[b-7bduwk283i] {
    font-size: 15px;
    font-weight: 800;
    color: var(--ec-text);
    line-height: 1;
    letter-spacing: -0.01em;
}

.ec-sb-brand-name--branded[b-7bduwk283i] {
    font-size: 13px;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.ec-sb-brand-portal[b-7bduwk283i] {
    font-size: 9.5px;
    margin: 3px 0 0;
    font-weight: 800;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    gap: 5px;
}

.ec-sb-brand-portal-dot[b-7bduwk283i] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    display: inline-block;
}

.ec-sb-brand-via[b-7bduwk283i] {
    font-size: 9px;
    color: var(--ec-muted);
    margin: 2px 0 0;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.ec-sb-brand-sub[b-7bduwk283i] {
    font-size: 10px;
    color: var(--ec-muted);
    margin-top: 3px;
    font-weight: 600;
}

.ec-sb-switcher-wrap[b-7bduwk283i] {
    padding: 12px 14px;
    border-bottom: 1px solid var(--ec-border-soft);
}

.ec-sb-switcher-label[b-7bduwk283i] {
    font-size: 9px;
    font-weight: 700;
    color: var(--ec-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 6px 4px;
}

.ec-sb-level-toggle[b-7bduwk283i] {
    display: flex;
    background: var(--ec-bg);
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    padding: 3px;
    margin-top: 8px;
}

.ec-sb-level-opt[b-7bduwk283i] {
    flex: 1;
    padding: 5px 6px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--ec-muted);
    font-size: 10.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.ec-sb-level-opt.is-active[b-7bduwk283i] {
    background: #fff;
    color: var(--ec-text);
    box-shadow: 0 1px 3px rgba(13, 23, 51, 0.08);
}

/* The .ec-sb-setup-link styles moved to global app.css so they apply to
   FacilityPicker (whose scoped CSS would otherwise hide them).
   .ec-sb-setup-header / -title / -desc / -back styles live there too — they're
   slotted into WebSidebar via HeaderSlot from NavMenu, so the slotted DOM
   carries NavMenu's scope attribute, not this file's. */

.ec-sb-nav[b-7bduwk283i] {
    flex: 1;
    overflow-y: auto;
    padding: 12px 8px;
}

.ec-sb-group[b-7bduwk283i] {
    margin-bottom: 14px;
}

.ec-sb-group-label[b-7bduwk283i] {
    font-size: 9px;
    font-weight: 700;
    color: var(--ec-muted);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 12px 6px;
    margin: 0;
}

.ec-sb-item[b-7bduwk283i] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 12px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
    margin-bottom: 1px;
    position: relative;
    text-align: left;
}

.ec-sb-item:hover:not(.is-active)[b-7bduwk283i] {
    background: var(--ec-border-soft);
}

.ec-sb-item.is-active[b-7bduwk283i] {
    font-weight: 700;
}

.ec-sb-item-bar[b-7bduwk283i] {
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
}

.ec-sb-item i[b-7bduwk283i] {
    font-size: 14px;
    width: 18px;
    text-align: center;
}

.ec-sb-item-label[b-7bduwk283i] {
    font-size: 13px;
    flex: 1;
}

.ec-sb-item-badge[b-7bduwk283i] {
    color: #fff;
    border-radius: 20px;
    padding: 1px 7px;
    font-size: 10px;
    font-weight: 700;
}

.ec-sb-item-badge-text[b-7bduwk283i] {
    letter-spacing: 0.04em;
    padding: 1px 8px;
}

.ec-sb-item-alert[b-7bduwk283i] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ec-amber);
}

.ec-sb-footer[b-7bduwk283i] {
    padding: 8px;
    border-top: 1px solid var(--ec-border-soft);
}

.ec-sb-footer-btn[b-7bduwk283i] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    color: var(--ec-sub);
    font-size: 13px;
    font-weight: 600;
}

.ec-sb-footer-btn-logout[b-7bduwk283i] {
    color: var(--ec-red);
}

/* Loading skeleton — shown for stage-driven roles (teacher/parent) until the
   active stage resolves, so the nav doesn't flash the wrong layout. */
.ec-sb-skel[b-7bduwk283i] {
    display: block;
    background: linear-gradient(90deg, #eef1f6 25%, #e4e8ef 37%, #eef1f6 63%);
    background-size: 400% 100%;
    border-radius: 6px;
    animation: ec-sb-skel-shimmer-b-7bduwk283i 1.4s ease infinite;
}

@keyframes ec-sb-skel-shimmer-b-7bduwk283i {
    0%   { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

.ec-sb-skel-label[b-7bduwk283i] {
    width: 44%;
    height: 9px;
    margin: 14px 10px 8px;
    border-radius: 4px;
}

.ec-sb-skel-row[b-7bduwk283i] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
}

.ec-sb-skel-ico[b-7bduwk283i] {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    flex-shrink: 0;
}

.ec-sb-skel-txt[b-7bduwk283i] {
    height: 10px;
    flex: 1;
    max-width: 130px;
}
/* /Components/Common/Atoms/WebTopBar.razor.rz.scp.css */
.ec-web-topbar[b-4llr65p3k0] {
    height: 64px;
    background: #fff;
    border-bottom: 1px solid var(--ec-border);
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 20;
}

.ec-tb-title-block[b-4llr65p3k0] { flex: 1; min-width: 0; }

.ec-tb-breadcrumb[b-4llr65p3k0] {
    font-size: 11px;
    color: var(--ec-muted);
    font-weight: 600;
    margin: 0 0 2px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.ec-tb-bc-sep[b-4llr65p3k0] { color: var(--ec-faint); }
.ec-tb-bc-last[b-4llr65p3k0] { color: var(--ec-sub); }

.ec-tb-title[b-4llr65p3k0] {
    font-size: 19px;
    font-weight: 800;
    color: var(--ec-text);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ec-tb-subtitle[b-4llr65p3k0] {
    font-size: 12px;
    color: var(--ec-sub);
    margin: 1px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ec-tb-status[b-4llr65p3k0] {
    display: flex;
    align-items: center;
    gap: 9px;
    border-radius: 11px;
    padding: 7px 13px;
    flex-shrink: 0;
}

.ec-tb-status-ok[b-4llr65p3k0]    { background: var(--ec-green-lt); border: 1px solid #bbf7d0; }
.ec-tb-status-warn[b-4llr65p3k0]  { background: var(--ec-amber-lt); border: 1px solid #fde68a; }
.ec-tb-status-info[b-4llr65p3k0]  { background: var(--ec-blue-gh);  border: 1px solid var(--ec-blue-lt); }

.ec-tb-status-dot[b-4llr65p3k0] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.ec-tb-status-ok   .ec-tb-status-dot[b-4llr65p3k0] { background: var(--ec-green); box-shadow: 0 0 0 3px #bbf7d0; animation: ec-pulse-b-4llr65p3k0 2s infinite; }
.ec-tb-status-warn .ec-tb-status-dot[b-4llr65p3k0] { background: var(--ec-amber); box-shadow: 0 0 0 3px #fde68a; }
.ec-tb-status-info .ec-tb-status-dot[b-4llr65p3k0] { background: var(--ec-blue);  box-shadow: 0 0 0 3px var(--ec-blue-lt); }

.ec-tb-status-title[b-4llr65p3k0] { font-size: 12px; font-weight: 800; color: var(--ec-text); margin: 0; line-height: 1.2; }
.ec-tb-status-sub[b-4llr65p3k0]   { font-size: 10.5px; color: var(--ec-sub); margin: 1px 0 0; }

.ec-tb-bell-slot[b-4llr65p3k0], .ec-tb-avatar-slot[b-4llr65p3k0] { display: flex; align-items: center; }
.ec-tb-contextual[b-4llr65p3k0], .ec-tb-action[b-4llr65p3k0] { display: flex; align-items: center; }

@keyframes ec-pulse-b-4llr65p3k0 {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}
/* /Components/Common/AudiencePicker.razor.rz.scp.css */
/* Audience picker — reusable across Activities / Events / Polls. Visual
   shape ports from the prototype's AWActivities slide-over picker. */

.aud-picker[b-xu994mme9c] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid var(--ec-border-soft, #eef0f6);
    border-radius: 12px;
    background: var(--ec-bg, #f7f8fc);
}

.aud-picker-hdr[b-xu994mme9c] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 2px;
}
.aud-picker-hdr-text[b-xu994mme9c] { flex: 1; min-width: 0; }
.aud-picker-label[b-xu994mme9c] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-muted, #8b95ad);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 4px;
}
.aud-picker-req[b-xu994mme9c] { color: var(--ec-red, #dc2626); }
.aud-picker-count[b-xu994mme9c] {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ec-text, #1a2540);
    margin: 0;
}
.aud-picker-clear[b-xu994mme9c] {
    flex-shrink: 0;
    padding: 5px 10px;
    background: #fff;
    border: 1px solid var(--ec-border, #e7eaf3);
    border-radius: 7px;
    font-size: 11px;
    font-weight: 700;
    color: var(--ec-sub, #5d6a89);
    cursor: pointer;
    font-family: inherit;
}
.aud-picker-clear:hover[b-xu994mme9c] { background: var(--ec-bg, #f7f8fc); }

.aud-picker-sec[b-xu994mme9c] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-muted, #8b95ad);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 6px 0 4px;
}

.aud-picker-row[b-xu994mme9c] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.aud-picker-hint[b-xu994mme9c] {
    font-size: 11px;
    color: var(--ec-muted, #8b95ad);
    margin: 0;
}

/* ── Pickable chips ───────────────────────────────────────────────────── */
.aud-pickbtn[b-xu994mme9c] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    background: #fff;
    color: var(--ec-sub, #5d6a89);
    border: 1px solid var(--ec-border, #e7eaf3);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background-color .12s, color .12s, border-color .12s, box-shadow .12s;
}
.aud-pickbtn:hover:not(:disabled):not(.is-dimmed)[b-xu994mme9c] {
    background: var(--ec-bg, #f7f8fc);
    border-color: var(--ec-purple, #7c3aed);
    color: var(--ec-purple, #7c3aed);
}
.aud-pickbtn:disabled[b-xu994mme9c] {
    cursor: not-allowed;
}
.aud-pickbtn.is-on[b-xu994mme9c] {
    background: #f4ebff;
    border-color: var(--ec-purple, #7c3aed);
    color: var(--ec-purple, #7c3aed);
}
.aud-pickbtn.is-dimmed[b-xu994mme9c] {
    opacity: 0.5;
}
.aud-pickbtn .bi[b-xu994mme9c] { font-size: 11px; }
.aud-pickbtn-count[b-xu994mme9c] {
    margin-left: 4px;
    padding: 1px 6px;
    background: var(--ec-border-soft, #eef0f6);
    color: var(--ec-muted, #8b95ad);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
}
.aud-pickbtn.is-on .aud-pickbtn-count[b-xu994mme9c] {
    background: rgba(124, 58, 237, 0.15);
    color: var(--ec-purple, #7c3aed);
}

/* Class chips render with a per-class accent — driven by inline style. */
.aud-pickbtn--class.is-on[b-xu994mme9c] { font-weight: 800; }
.aud-pickbtn--prog .bi-star-fill[b-xu994mme9c] { color: #f59e0b; }

/* ── Per-facility cards ──────────────────────────────────────────────── */
.aud-fac-card[b-xu994mme9c] {
    background: #fff;
    border: 1px solid var(--ec-border, #e7eaf3);
    border-radius: 10px;
    padding: 11px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color .12s, box-shadow .12s;
}
.aud-fac-card.is-on[b-xu994mme9c] {
    border-color: var(--ec-purple, #7c3aed);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.08);
}
.aud-fac-hdr[b-xu994mme9c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.aud-fac-name[b-xu994mme9c] {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--ec-text, #1a2540);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.aud-fac-name .bi[b-xu994mme9c] { color: var(--ec-muted, #8b95ad); }
.aud-fac-count[b-xu994mme9c] {
    font-size: 11px;
    font-weight: 700;
    color: var(--ec-muted, #8b95ad);
    margin-left: 2px;
}
.aud-fac-toggle[b-xu994mme9c] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ec-sub, #5d6a89);
    cursor: pointer;
}
.aud-fac-toggle input[type="checkbox"][b-xu994mme9c] {
    accent-color: var(--ec-purple, #7c3aed);
    cursor: pointer;
}

.aud-rowlabel[b-xu994mme9c] {
    font-size: 10px;
    font-weight: 800;
    color: var(--ec-muted, #8b95ad);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}

@media (max-width: 640px) {
    .aud-fac-hdr[b-xu994mme9c] { flex-wrap: wrap; }
    .aud-picker[b-xu994mme9c] { padding: 12px 12px; }
}
/* /Components/Common/ClassActivities.razor.rz.scp.css */
/* ClassActivities — teacher Activities surface (port of TWClassPhotosInline
   + TWActivities, proto 37703-37882 + 40439-40762). Single .cla-* prefix
   (class-activities) so the styles drop cleanly into either host page. */

.cla[b-ih7es18a5f] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.cla-loading[b-ih7es18a5f] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 36px 0;
    justify-content: center;
    color: var(--ec-muted);
    font-size: 13px;
}
.cla-loading .bi[b-ih7es18a5f] { animation: cla-spin-b-ih7es18a5f 1s linear infinite; }
@keyframes cla-spin-b-ih7es18a5f { to { transform: rotate(360deg); } }

/* ── Header: KPI strip + Share button ────────────────────────────── */
.cla-head[b-ih7es18a5f] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.cla-kpis[b-ih7es18a5f] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    flex: 1;
}
.cla-kpi[b-ih7es18a5f] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 12px;
    padding: 11px 14px;
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 130px;
}
.cla-kpi-icon[b-ih7es18a5f] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}
.cla-kpi--ok .cla-kpi-icon[b-ih7es18a5f]   { background: color-mix(in srgb, var(--ec-green, #16a34a) 14%, transparent); color: var(--ec-green, #16a34a); }
.cla-kpi--warn .cla-kpi-icon[b-ih7es18a5f] { background: color-mix(in srgb, var(--ec-amber, #f59e0b) 14%, transparent); color: var(--ec-amber, #f59e0b); }
.cla-kpi--info .cla-kpi-icon[b-ih7es18a5f] { background: color-mix(in srgb, var(--ec-blue) 14%, transparent); color: var(--ec-blue); }
.cla-kpi-value[b-ih7es18a5f] {
    font-size: 16px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
    line-height: 1;
}
.cla-kpi-label[b-ih7es18a5f] {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--ec-muted);
    margin: 3px 0 0;
    text-transform: uppercase;
}

.cla-compose[b-ih7es18a5f] {
    background: var(--ec-blue);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--ec-blue) 30%, transparent);
}
.cla-compose:hover[b-ih7es18a5f] { filter: brightness(1.06); }

/* ── Inline banner ───────────────────────────────────────────────── */
.cla-banner[b-ih7es18a5f] {
    padding: 10px 12px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12.5px;
    font-weight: 600;
}
.cla-banner--alert[b-ih7es18a5f] {
    background: color-mix(in srgb, var(--ec-red, #dc2626) 12%, #fff);
    color: var(--ec-red, #dc2626);
    border: 1px solid color-mix(in srgb, var(--ec-red, #dc2626) 30%, transparent);
}
.cla-banner-close[b-ih7es18a5f] {
    margin-left: auto;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    font-family: inherit;
}

/* ── Empty state ─────────────────────────────────────────────────── */
.cla-empty[b-ih7es18a5f] {
    background: #fff;
    border: 1px dashed var(--ec-border);
    border-radius: 14px;
    padding: 48px 28px;
    text-align: center;
}
.cla-empty-icon[b-ih7es18a5f] {
    font-size: 38px;
    color: var(--ec-faint);
    margin-bottom: 10px;
    display: block;
}
.cla-empty-title[b-ih7es18a5f] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.cla-empty-sub[b-ih7es18a5f] {
    font-size: 12px;
    color: var(--ec-muted);
    margin: 5px auto 0;
    max-width: 380px;
    line-height: 1.5;
}

/* ── Activity row ────────────────────────────────────────────────── */
.cla-list[b-ih7es18a5f] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.cla-row[b-ih7es18a5f] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    padding: 16px 20px;
}
.cla-row[data-tone="warn"][b-ih7es18a5f] {
    background: color-mix(in srgb, var(--ec-amber, #f59e0b) 4%, #fff);
}
.cla-row-head[b-ih7es18a5f] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    justify-content: space-between;
    flex-wrap: wrap;
}
.cla-row-eyebrow[b-ih7es18a5f] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}
.cla-row-class[b-ih7es18a5f] {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 2px 7px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--ec-blue) 12%, transparent);
    color: var(--ec-blue);
    text-transform: uppercase;
}
.cla-row-status[b-ih7es18a5f] {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 2px 7px;
    border-radius: 4px;
}
.cla-row-status--ok[b-ih7es18a5f]   { background: color-mix(in srgb, var(--ec-green, #16a34a) 14%, transparent); color: var(--ec-green, #16a34a); }
.cla-row-status--warn[b-ih7es18a5f] { background: color-mix(in srgb, var(--ec-amber, #f59e0b) 14%, transparent); color: var(--ec-amber, #f59e0b); }
.cla-row-date[b-ih7es18a5f] {
    font-size: 11px;
    color: var(--ec-muted);
    font-weight: 600;
}
.cla-row-actions[b-ih7es18a5f] {
    display: inline-flex;
    gap: 6px;
}
.cla-row-publish[b-ih7es18a5f] {
    background: var(--ec-blue);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 7px 13px;
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
}
.cla-row-publish:hover[b-ih7es18a5f] { filter: brightness(1.06); }
.cla-row-open[b-ih7es18a5f] {
    background: #fff;
    color: var(--ec-sub);
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    padding: 7px 11px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.cla-row-open:hover[b-ih7es18a5f] { border-color: var(--ec-text); color: var(--ec-text); }

.cla-row-title[b-ih7es18a5f] {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 7px 0 0;
    line-height: 1.3;
}
.cla-row-desc[b-ih7es18a5f] {
    font-size: 12px;
    color: var(--ec-sub);
    margin: 5px 0 0;
    line-height: 1.5;
}

/* Photo grid — 4 cols, square tiles, gradient fallback when no thumb. */
.cla-row-photos[b-ih7es18a5f] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-top: 12px;
}
.cla-row-photo[b-ih7es18a5f] {
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .75);
}
.cla-row-photo img[b-ih7es18a5f] { width: 100%; height: 100%; object-fit: cover; display: block; }
.cla-row-photo-icon[b-ih7es18a5f] { font-size: 26px; }

@media (max-width: 720px) {
    .cla-row-photos[b-ih7es18a5f] { grid-template-columns: repeat(2, 1fr); }
}

/* Engagement strip */
.cla-row-engage[b-ih7es18a5f] {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--ec-border-soft);
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 11.5px;
}
.cla-row-engage-stat[b-ih7es18a5f] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--ec-text);
    font-weight: 700;
}
.cla-row-engage-stat--red .bi[b-ih7es18a5f] { color: var(--ec-red, #dc2626); }
.cla-row-engage-comments[b-ih7es18a5f] {
    background: transparent;
    border: none;
    color: var(--ec-blue);
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
}
.cla-row-engage-comments:hover[b-ih7es18a5f] { text-decoration: underline; text-underline-offset: 3px; }
.cla-row-engage-opt[b-ih7es18a5f] {
    margin-left: auto;
    color: var(--ec-muted);
    font-size: 10.5px;
    font-style: italic;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.cla-row-engage-opt .bi[b-ih7es18a5f] { color: var(--ec-red, #dc2626); }
.cla-row-engage-draft[b-ih7es18a5f] {
    color: var(--ec-muted);
    font-style: italic;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.cla-row-engage-draft b[b-ih7es18a5f] { color: var(--ec-amber, #f59e0b); font-style: normal; }

/* ── Detail drawer ───────────────────────────────────────────────── */
.cla-drawer-backdrop[b-ih7es18a5f] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .5);
    z-index: 1700;
    display: flex;
    justify-content: flex-end;
}
.cla-drawer[b-ih7es18a5f] {
    width: min(760px, 96%);
    height: 100%;
    background: #fff;
    box-shadow: -12px 0 40px rgba(15, 23, 42, .18);
    display: flex;
    flex-direction: column;
    animation: cla-slide-b-ih7es18a5f .22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes cla-slide-b-ih7es18a5f { from { transform: translateX(100%) } to { transform: translateX(0) } }

.cla-drawer-head[b-ih7es18a5f] {
    padding: 16px 22px;
    border-bottom: 1px solid var(--ec-border-soft);
    display: flex;
    align-items: center;
    gap: 11px;
    justify-content: space-between;
}
.cla-drawer-eyebrow[b-ih7es18a5f] { display: inline-flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.cla-drawer-close[b-ih7es18a5f] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 1px solid var(--ec-border);
    background: #fff;
    font-size: 18px;
    color: var(--ec-muted);
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
}

.cla-drawer-body[b-ih7es18a5f] {
    flex: 1;
    overflow-y: auto;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--ec-bg);
}
.cla-drawer-title[b-ih7es18a5f] {
    font-size: 19px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
    line-height: 1.25;
}
.cla-drawer-desc[b-ih7es18a5f] {
    font-size: 13px;
    color: var(--ec-sub);
    margin: 0;
    line-height: 1.55;
}

.cla-drawer-toolbar[b-ih7es18a5f] {
    display: inline-flex;
    gap: 7px;
    flex-wrap: wrap;
}
.cla-tool[b-ih7es18a5f] {
    padding: 7px 13px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--ec-border);
    background: #fff;
    color: var(--ec-sub);
}
.cla-tool--ghost:hover[b-ih7es18a5f] { color: var(--ec-text); border-color: var(--ec-text); }
.cla-tool--publish[b-ih7es18a5f] {
    background: var(--ec-blue);
    color: #fff;
    border-color: var(--ec-blue);
}
.cla-tool--danger[b-ih7es18a5f] {
    background: #fff;
    color: var(--ec-red, #dc2626);
    border-color: color-mix(in srgb, var(--ec-red, #dc2626) 40%, transparent);
}
.cla-tool--danger:hover[b-ih7es18a5f] { background: color-mix(in srgb, var(--ec-red, #dc2626) 8%, #fff); }
.cla-tool:disabled[b-ih7es18a5f] { opacity: .55; cursor: not-allowed; }

.cla-drawer-photos[b-ih7es18a5f] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.cla-drawer-photo[b-ih7es18a5f] {
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: flex-end;
    color: rgba(255, 255, 255, .92);
}
.cla-drawer-photo img[b-ih7es18a5f] { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; }
.cla-drawer-photo-caption[b-ih7es18a5f] {
    position: relative;
    padding: 6px 10px;
    width: 100%;
    font-size: 11.5px;
    font-weight: 700;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .35));
}
@media (max-width: 720px) {
    .cla-drawer-photos[b-ih7es18a5f] { grid-template-columns: repeat(2, 1fr); }
}

.cla-drawer-summary[b-ih7es18a5f] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 10px;
    padding: 9px 14px;
    font-size: 11.5px;
    color: var(--ec-sub);
    font-weight: 700;
}
.cla-drawer-summary .bi[b-ih7es18a5f] { color: var(--ec-red, #dc2626); margin-right: 3px; }
.cla-drawer-summary-opt[b-ih7es18a5f] {
    margin-left: auto;
    color: var(--ec-muted);
    font-style: italic;
    font-weight: 600;
}
.cla-drawer-summary-opt .bi[b-ih7es18a5f] { color: var(--ec-red, #dc2626); }

.cla-drawer-section-label[b-ih7es18a5f] {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--ec-muted);
    text-transform: uppercase;
    margin: 0;
}
.cla-drawer-empty-sub[b-ih7es18a5f] {
    font-size: 12px;
    color: var(--ec-muted);
    font-style: italic;
    margin: 0;
}

/* Comments */
.cla-comments[b-ih7es18a5f] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cla-comment[b-ih7es18a5f] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.cla-comment--hidden .cla-comment-text[b-ih7es18a5f] { text-decoration: line-through; color: var(--ec-muted); }
.cla-comment-av[b-ih7es18a5f] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ec-blue);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
}
.cla-comment-av--me[b-ih7es18a5f] { background: var(--ec-amber, #f59e0b); }
.cla-comment-body[b-ih7es18a5f] { flex: 1; min-width: 0; }
.cla-comment-head[b-ih7es18a5f] {
    font-size: 11.5px;
    color: var(--ec-text);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.cla-comment-role[b-ih7es18a5f] {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--ec-border-soft);
    color: var(--ec-muted);
}
.cla-comment-when[b-ih7es18a5f] { font-size: 10.5px; color: var(--ec-muted); font-weight: 600; }
.cla-comment-text[b-ih7es18a5f] {
    font-size: 12.5px;
    color: var(--ec-text);
    margin: 4px 0 0;
    line-height: 1.5;
}
.cla-comment-remove[b-ih7es18a5f] {
    background: transparent;
    border: none;
    color: var(--ec-red, #dc2626);
    font-size: 11px;
    font-weight: 700;
    padding: 0;
    margin-top: 4px;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.cla-comment-remove:hover[b-ih7es18a5f] { text-decoration: underline; text-underline-offset: 3px; }

/* Reply composer at the drawer footer */
.cla-drawer-reply[b-ih7es18a5f] {
    padding: 12px 22px;
    border-top: 1px solid var(--ec-border-soft);
    background: #fff;
    display: flex;
    align-items: flex-end;
    gap: 9px;
}
.cla-reply-input[b-ih7es18a5f] {
    flex: 1;
    padding: 9px 12px;
    border: 1px solid var(--ec-border);
    border-radius: 10px;
    font-size: 12.5px;
    font-family: inherit;
    outline: none;
    resize: vertical;
    min-height: 36px;
    max-height: 120px;
    box-sizing: border-box;
}
.cla-reply-btn[b-ih7es18a5f] {
    background: var(--ec-blue);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 9px 14px;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.cla-reply-btn:disabled[b-ih7es18a5f] { opacity: .55; cursor: not-allowed; }

/* ── Composer modal ──────────────────────────────────────────────── */
/* Right-side slide-over (app standard for form dialogs) — mirrors .cla-drawer. */
.cla-cmp-backdrop[b-ih7es18a5f] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .5);
    z-index: 1700;
    display: flex;
    justify-content: flex-end;
}
.cla-cmp[b-ih7es18a5f] {
    width: min(540px, 96%);
    height: 100%;
    background: #fff;
    box-shadow: -12px 0 40px rgba(15, 23, 42, .18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: cla-slide-b-ih7es18a5f .22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cla-cmp-head[b-ih7es18a5f] {
    padding: 18px 24px;
    border-bottom: 1px solid var(--ec-border-soft);
    display: flex;
    align-items: center;
    gap: 11px;
}
.cla-cmp-head-icon[b-ih7es18a5f] {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--ec-blue);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cla-cmp-head-icon .bi[b-ih7es18a5f] { font-size: 18px; }
.cla-cmp-head-text[b-ih7es18a5f] { flex: 1; min-width: 0; }
.cla-cmp-eyebrow[b-ih7es18a5f] {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ec-blue);
    margin: 0;
}
.cla-cmp-head-text h2[b-ih7es18a5f] {
    font-size: 18px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 3px 0 0;
}
.cla-cmp-close[b-ih7es18a5f] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 1px solid var(--ec-border);
    background: #fff;
    font-size: 18px;
    color: var(--ec-muted);
    cursor: pointer;
    font-family: inherit;
}

.cla-cmp-body[b-ih7es18a5f] {
    flex: 1;
    overflow-y: auto;
    padding: 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 13px;
}
.cla-cmp-field[b-ih7es18a5f] { display: flex; flex-direction: column; gap: 5px; }
.cla-cmp-label[b-ih7es18a5f] {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--ec-muted);
    text-transform: uppercase;
    margin: 0;
}
.cla-cmp-label-opt[b-ih7es18a5f] { text-transform: none; letter-spacing: 0; font-weight: 600; }
.cla-cmp-input[b-ih7es18a5f],
.cla-cmp-textarea[b-ih7es18a5f] {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    background: #fff;
    color: var(--ec-text);
    box-sizing: border-box;
}
.cla-cmp-textarea[b-ih7es18a5f] { min-height: 80px; resize: vertical; }
.cla-cmp-locked[b-ih7es18a5f] {
    padding: 9px 12px;
    border: 1px dashed var(--ec-border);
    border-radius: 9px;
    background: var(--ec-bg);
    font-size: 13px;
    font-weight: 700;
    color: var(--ec-text);
}
.cla-cmp-drop[b-ih7es18a5f] {
    position: relative;
    padding: 18px 16px;
    background: var(--ec-bg);
    border: 1.5px dashed var(--ec-border);
    border-radius: 11px;
    text-align: center;
    color: var(--ec-sub);
    cursor: pointer;
    transition: border-color .12s ease;
    display: block;
}
.cla-cmp-drop:hover[b-ih7es18a5f] { border-color: var(--ec-blue); color: var(--ec-blue); }
.cla-cmp-drop .bi[b-ih7es18a5f] { font-size: 18px; color: var(--ec-muted); display: block; margin-bottom: 4px; }
.cla-cmp-drop p[b-ih7es18a5f] { margin: 0; font-size: 12.5px; }
.cla-cmp-drop-sub[b-ih7es18a5f] { color: var(--ec-muted); font-size: 11px; margin-top: 3px !important; }
.cla-cmp-drop input[type="file"][b-ih7es18a5f] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

/* New-upload previews — thumbnail grid with per-file remove (admin parity) */
.cla-cmp-media-grid[b-ih7es18a5f] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 9px;
    margin-bottom: 4px;
}
.cla-cmp-media-tile[b-ih7es18a5f] { position: relative; }
.cla-cmp-media-thumb[b-ih7es18a5f] {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 10px;
    object-fit: cover;
    background: var(--ec-bg);
    border: 1px solid var(--ec-border);
    display: block;
}
.cla-cmp-media-thumb--video[b-ih7es18a5f] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1e293b;
    color: #fff;
    font-size: 22px;
}
.cla-cmp-media-remove[b-ih7es18a5f] {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: var(--ec-red, #dc2626);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    padding: 0;
    line-height: 1;
    font-family: inherit;
}
.cla-cmp-media-remove:hover[b-ih7es18a5f] { filter: brightness(1.08); }
.cla-cmp-media-name[b-ih7es18a5f] {
    display: block;
    font-size: 10px;
    color: var(--ec-muted);
    text-align: center;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Edit-mode: subheads splitting current media from new uploads, + the
   mark-for-removal (red ×) / restore (green ↺) affordances on existing tiles. */
.cla-cmp-media-subhead[b-ih7es18a5f] {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ec-muted);
    margin: 2px 0 -2px;
}
.cla-cmp-media-tile--removed[b-ih7es18a5f] { opacity: .35; }
.cla-cmp-media-restore[b-ih7es18a5f] {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: var(--ec-green, #16a34a);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    padding: 0;
    line-height: 1;
    font-family: inherit;
}
.cla-cmp-media-restore:hover[b-ih7es18a5f] { filter: brightness(1.08); }

.cla-cmp-error[b-ih7es18a5f] {
    padding: 9px 11px;
    background: color-mix(in srgb, var(--ec-red, #dc2626) 12%, #fff);
    color: var(--ec-red, #dc2626);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
}

.cla-cmp-foot[b-ih7es18a5f] {
    padding: 12px 24px;
    border-top: 1px solid var(--ec-border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.cla-cmp-foot-help[b-ih7es18a5f] { font-size: 11.5px; color: var(--ec-muted); margin: 0; flex: 1; }
.cla-cmp-foot-actions[b-ih7es18a5f] { display: inline-flex; gap: 7px; }
.cla-cmp-cancel[b-ih7es18a5f] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    padding: 9px 14px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
}
.cla-cmp-save[b-ih7es18a5f] {
    background: var(--ec-blue);
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.cla-cmp-save:disabled[b-ih7es18a5f] {
    background: var(--ec-border-soft);
    color: var(--ec-muted);
    cursor: not-allowed;
}

/* ── Composer: audience picker + status (admin-parity layout) ─────── */
.cla-cmp--wide[b-ih7es18a5f] { width: min(640px, 96%); }

.cla-cmp-noaud[b-ih7es18a5f] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 13px;
    border-radius: 9px;
    background: #fff9e8;
    color: #8a6400;
    border: 1px solid #f5e7a8;
    font-size: 12.5px;
    font-weight: 600;
}
.cla-cmp-hint-warn[b-ih7es18a5f] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: -4px 0 0;
    font-size: 11.5px;
    font-weight: 700;
    color: #a16207;
}
.cla-cmp-row2[b-ih7es18a5f] { display: flex; gap: 12px; }
.cla-cmp-field--grow[b-ih7es18a5f] { flex: 1; min-width: 0; }
.cla-cmp-field--date[b-ih7es18a5f] { width: 160px; flex-shrink: 0; }

.cla-cmp-status[b-ih7es18a5f] { display: flex; gap: 9px; }
.cla-cmp-statuscard[b-ih7es18a5f] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 14px;
    border: 1.5px solid var(--ec-border);
    border-radius: 11px;
    background: #fff;
    font-size: 13px;
    font-weight: 700;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
    transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.cla-cmp-statuscard:hover[b-ih7es18a5f] { border-color: var(--ec-blue); }
.cla-cmp-statuscard--amber.is-on[b-ih7es18a5f] {
    border-color: #d97706;
    background: #fff7ed;
    color: #b45309;
}
.cla-cmp-statuscard--green.is-on[b-ih7es18a5f] {
    border-color: #16a34a;
    background: #f0fdf4;
    color: #15803d;
}

/* ── Composer: "children visible in photos" face-tag chips ───────── */
.cla-cmp-tagwrap[b-ih7es18a5f] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.cla-cmp-tag[b-ih7es18a5f] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px 5px 5px;
    border: 1.5px solid var(--ec-border);
    border-radius: 20px;
    background: #fff;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
    transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.cla-cmp-tag:hover[b-ih7es18a5f] { border-color: var(--ec-blue); }
.cla-cmp-tag .bi[b-ih7es18a5f] { font-size: 13px; color: var(--ec-blue); }
.cla-cmp-tag-av[b-ih7es18a5f] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ec-border-soft);
    color: var(--ec-sub);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    flex-shrink: 0;
}
.cla-cmp-tag-name[b-ih7es18a5f] { line-height: 1; }
.cla-cmp-tag.is-on[b-ih7es18a5f] {
    border-color: var(--ec-blue);
    background: color-mix(in srgb, var(--ec-blue) 9%, #fff);
    color: var(--ec-blue);
}
.cla-cmp-tag.is-on .cla-cmp-tag-av[b-ih7es18a5f] { background: var(--ec-blue); color: #fff; }
.cla-cmp-tag-badge[b-ih7es18a5f] {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.04em;
    background: color-mix(in srgb, var(--ec-red, #dc2626) 14%, #fff);
    color: var(--ec-red, #dc2626);
    padding: 2px 6px;
    border-radius: 5px;
}
.cla-cmp-tag.is-optout[b-ih7es18a5f] {
    border-color: color-mix(in srgb, var(--ec-red, #dc2626) 45%, #fff);
}
.cla-cmp-tag.is-optout.is-on[b-ih7es18a5f] {
    border-color: var(--ec-red, #dc2626);
    background: color-mix(in srgb, var(--ec-red, #dc2626) 9%, #fff);
    color: var(--ec-red, #dc2626);
}
.cla-cmp-tag.is-optout.is-on .cla-cmp-tag-av[b-ih7es18a5f] { background: var(--ec-red, #dc2626); color: #fff; }
.cla-cmp-block[b-ih7es18a5f] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--ec-red, #dc2626) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--ec-red, #dc2626) 35%, #fff);
    color: var(--ec-red, #dc2626);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
}
.cla-cmp-block .bi[b-ih7es18a5f] { font-size: 15px; flex-shrink: 0; margin-top: 1px; }
.cla-cmp-optout-hint[b-ih7es18a5f] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    padding: 9px 12px;
    border-radius: 9px;
    background: #fff7ed;
    border: 1px solid #f5d9a8;
    color: #a16207;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.45;
}
.cla-cmp-optout-hint .bi[b-ih7es18a5f] { font-size: 14px; flex-shrink: 0; margin-top: 1px; }

@media (max-width: 560px) {
    .cla-cmp-row2[b-ih7es18a5f] { flex-direction: column; }
    .cla-cmp-field--date[b-ih7es18a5f] { width: 100%; }
}

/* ── Delete confirm ──────────────────────────────────────────────── */
.cla-confirm-backdrop[b-ih7es18a5f] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .6);
    z-index: 1800;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.cla-confirm[b-ih7es18a5f] {
    background: #fff;
    border-radius: 14px;
    max-width: 420px;
    width: 100%;
    padding: 22px 24px 18px;
    text-align: center;
    box-shadow: 0 24px 60px rgba(13, 23, 51, .4);
}
.cla-confirm-icon[b-ih7es18a5f] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ec-red, #dc2626) 14%, transparent);
    color: var(--ec-red, #dc2626);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 12px;
}
.cla-confirm-title[b-ih7es18a5f] {
    font-size: 15px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.cla-confirm-sub[b-ih7es18a5f] {
    font-size: 12.5px;
    color: var(--ec-muted);
    margin: 6px auto 0;
    max-width: 320px;
    line-height: 1.5;
}
.cla-confirm-foot[b-ih7es18a5f] {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 16px;
}
.cla-confirm-cancel[b-ih7es18a5f] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
}
.cla-confirm-danger[b-ih7es18a5f] {
    background: var(--ec-red, #dc2626);
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 8px 16px;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
}
/* /Components/Common/ClassCareLog.razor.rz.scp.css */
/* ClassCareLog — compact KG daily care log for the group-detail Care log tab.
   Port of the prototype TWKgCareLogInline (proto 43854-44062): a gradient
   header bar with five summary pills, then a per-child grid of dashed-border
   cells (Check-in · Nap · Mood & notes · Check-out · Absent?). */

.ccl[b-h6s2t1uhpx] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Transient warning banner — drop-off gate ("check in first") + save failures. */
.ccl-warn[b-h6s2t1uhpx] {
    display: flex;
    align-items: center;
    gap: 9px;
    background: color-mix(in srgb, var(--ec-amber) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--ec-amber) 40%, transparent);
    color: var(--ec-amber);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 12.5px;
    font-weight: 700;
}
.ccl-warn i[b-h6s2t1uhpx] { font-size: 14px; flex-shrink: 0; }

/* ── Header bar + summary pills ─────────────────────────────────────── */
.ccl-head[b-h6s2t1uhpx] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, #fff), #fff);
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.ccl-title[b-h6s2t1uhpx] {
    font-size: 14px; font-weight: 800;
    color: var(--ec-text);
    letter-spacing: -0.01em;
    margin: 0;
    display: flex; align-items: center; gap: 8px;
}
.ccl-kg[b-h6s2t1uhpx] {
    font-size: 9.5px; font-weight: 800;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent);
    padding: 2px 7px; border-radius: 4px;
    letter-spacing: 0.06em;
}
.ccl-sub[b-h6s2t1uhpx] { font-size: 12px; color: var(--ec-muted); margin: 3px 0 0; }

.ccl-pills[b-h6s2t1uhpx] { display: flex; gap: 8px; flex-wrap: wrap; }
.ccl-pill[b-h6s2t1uhpx] {
    border-radius: 10px;
    padding: 8px 12px;
    min-width: 96px;
}
.ccl-pill-label[b-h6s2t1uhpx] {
    font-size: 10px; font-weight: 800;
    letter-spacing: 0.08em; text-transform: uppercase;
    margin: 0;
}
.ccl-pill-value[b-h6s2t1uhpx] { font-size: 18px; font-weight: 800; line-height: 1.1; margin: 3px 0 0; }

.ccl-pill--green[b-h6s2t1uhpx]  { background: color-mix(in srgb, var(--ec-green) 12%, transparent);  border: 1px solid color-mix(in srgb, var(--ec-green) 30%, transparent); }
.ccl-pill--green  .ccl-pill-label[b-h6s2t1uhpx], .ccl-pill--green  .ccl-pill-value[b-h6s2t1uhpx] { color: var(--ec-green); }
.ccl-pill--blue[b-h6s2t1uhpx]   { background: color-mix(in srgb, #3b5fc0 12%, transparent);   border: 1px solid color-mix(in srgb, #3b5fc0 30%, transparent); }
.ccl-pill--blue   .ccl-pill-label[b-h6s2t1uhpx], .ccl-pill--blue   .ccl-pill-value[b-h6s2t1uhpx] { color: #3b5fc0; }
.ccl-pill--pink[b-h6s2t1uhpx]   { background: color-mix(in srgb, var(--ec-pink) 12%, transparent);   border: 1px solid color-mix(in srgb, var(--ec-pink) 30%, transparent); }
.ccl-pill--pink   .ccl-pill-label[b-h6s2t1uhpx], .ccl-pill--pink   .ccl-pill-value[b-h6s2t1uhpx] { color: var(--ec-pink); }
.ccl-pill--amber[b-h6s2t1uhpx]  { background: color-mix(in srgb, var(--ec-amber) 12%, transparent);  border: 1px solid color-mix(in srgb, var(--ec-amber) 30%, transparent); }
.ccl-pill--amber  .ccl-pill-label[b-h6s2t1uhpx], .ccl-pill--amber  .ccl-pill-value[b-h6s2t1uhpx] { color: var(--ec-amber); }
.ccl-pill--purple[b-h6s2t1uhpx] { background: color-mix(in srgb, var(--ec-purple) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ec-purple) 30%, transparent); }
.ccl-pill--purple .ccl-pill-label[b-h6s2t1uhpx], .ccl-pill--purple .ccl-pill-value[b-h6s2t1uhpx] { color: var(--ec-purple); }

/* ── Per-child grid ─────────────────────────────────────────────────── */
.ccl-table[b-h6s2t1uhpx] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    overflow: hidden;
}
.ccl-grid[b-h6s2t1uhpx] {
    display: grid;
    /* Fixed Absent track (96px) — see KgDailyLogRow.razor.css. MUST match the row
       grid so the header columns line up with the cells below. */
    grid-template-columns: minmax(160px, 1.3fr) 0.9fr 1.1fr 1.3fr 0.9fr 96px;
    gap: 10px;
    padding: 10px 16px;
    align-items: center;
}
.ccl-grid-head[b-h6s2t1uhpx] {
    border-bottom: 1px solid var(--ec-border-soft);
    background: var(--ec-bg);
}
.ccl-col[b-h6s2t1uhpx] {
    font-size: 10px; font-weight: 800;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ec-muted);
    margin: 0;
}
.ccl-col--green[b-h6s2t1uhpx]  { color: var(--ec-green); }
.ccl-col--blue[b-h6s2t1uhpx]   { color: #3b5fc0; }
.ccl-col--pink[b-h6s2t1uhpx]   { color: var(--ec-pink); }
.ccl-col--purple[b-h6s2t1uhpx] { color: var(--ec-purple); }
.ccl-col--muted[b-h6s2t1uhpx]  { color: var(--ec-muted); }

.ccl-row[b-h6s2t1uhpx] { border-top: 1px solid var(--ec-border-soft); align-items: stretch; }
.ccl-row--absent[b-h6s2t1uhpx] { opacity: .55; }

.ccl-student[b-h6s2t1uhpx] { display: flex; align-items: center; gap: 10px; min-width: 0; align-self: center; }
.ccl-avatar[b-h6s2t1uhpx] {
    width: 34px; height: 34px; border-radius: 50%;
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 11.5px; font-weight: 800; flex-shrink: 0;
}
.ccl-student-text[b-h6s2t1uhpx] { min-width: 0; }
.ccl-student-name[b-h6s2t1uhpx] {
    font-size: 12.5px; font-weight: 700; color: var(--ec-text);
    margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ccl-student-allergy[b-h6s2t1uhpx] { font-size: 10px; color: var(--ec-amber); font-weight: 700; margin: 1px 0 0; }

/* Cells — dashed-border tappable tiles. Flex-column + min-height so every
   cell in a row is the same height regardless of 1- vs 2-line content
   (the row stretches them via align-items: stretch). */
.ccl-cell[b-h6s2t1uhpx] {
    border-radius: 9px;
    padding: 8px 10px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    min-width: 0;
    border: 1px dashed var(--ec-border);
    background: var(--ec-bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 50px;
    box-sizing: border-box;
}
.ccl-cell:disabled[b-h6s2t1uhpx] { cursor: not-allowed; }
.ccl-cell--empty[b-h6s2t1uhpx] { background: var(--ec-bg); border-color: var(--ec-border); }
.ccl-cell--in[b-h6s2t1uhpx]       { background: color-mix(in srgb, var(--ec-green) 12%, #fff);  border-color: color-mix(in srgb, var(--ec-green) 40%, transparent); }
.ccl-cell--nap[b-h6s2t1uhpx]      { background: color-mix(in srgb, #3b5fc0 14%, #fff);   border-color: color-mix(in srgb, #3b5fc0 45%, transparent); }
.ccl-cell--nap-done[b-h6s2t1uhpx] { background: color-mix(in srgb, #3b5fc0 7%, #fff);    border-color: color-mix(in srgb, #3b5fc0 28%, transparent); }
.ccl-cell--out[b-h6s2t1uhpx]      { background: color-mix(in srgb, var(--ec-purple) 10%, #fff); border-color: color-mix(in srgb, var(--ec-purple) 40%, transparent); }

.ccl-cell-time[b-h6s2t1uhpx] { font-size: 13px; font-weight: 800; line-height: 1.1; margin: 0; font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", monospace; }
.ccl-cell-time--green[b-h6s2t1uhpx]  { color: var(--ec-green); }
.ccl-cell-time--blue[b-h6s2t1uhpx]   { color: #3b5fc0; }
.ccl-cell-time--purple[b-h6s2t1uhpx] { color: var(--ec-purple); }
.ccl-cell-strong[b-h6s2t1uhpx] { font-size: 12.5px; font-weight: 800; line-height: 1.1; margin: 0; }
.ccl-cell-strong--blue[b-h6s2t1uhpx] { color: #3b5fc0; }
.ccl-cell-strong--muted[b-h6s2t1uhpx] { color: var(--ec-muted); }
.ccl-cell-by[b-h6s2t1uhpx] { font-size: 10.5px; color: var(--ec-sub); margin: 2px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccl-cell-add[b-h6s2t1uhpx] { font-size: 11.5px; color: var(--ec-muted); font-weight: 700; margin: 0; }
.ccl-mono[b-h6s2t1uhpx] { font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", monospace; }

/* Mood & notes cell — round icon + label + note count */
.ccl-cell--mood[b-h6s2t1uhpx] { flex-direction: row; align-items: center; gap: 7px; padding: 6px 9px; overflow: hidden; }
.ccl-cell--mood-on[b-h6s2t1uhpx] { background: color-mix(in srgb, var(--ec-pink) 7%, #fff); border-color: color-mix(in srgb, var(--ec-pink) 38%, transparent); }
.ccl-mood-icon[b-h6s2t1uhpx] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    border: 1px solid transparent; flex-shrink: 0;
}
.ccl-mood-icon--empty[b-h6s2t1uhpx] { background: var(--ec-bg); border-color: var(--ec-border); color: var(--ec-muted); font-size: 11px; }
.ccl-mood-text[b-h6s2t1uhpx] { flex: 1; min-width: 0; overflow: hidden; }
.ccl-mood-label[b-h6s2t1uhpx] { font-size: 11.5px; font-weight: 800; line-height: 1.15; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccl-mood-label--empty[b-h6s2t1uhpx] { color: var(--ec-muted); }
.ccl-mood-notes[b-h6s2t1uhpx] { font-size: 10px; color: var(--ec-muted); margin: 1px 0 0; line-height: 1.1; }

/* Absent pill */
.ccl-absent[b-h6s2t1uhpx] {
    background: #fff; color: var(--ec-muted);
    border: 1px solid var(--ec-border); border-radius: 7px;
    padding: 6px 10px; font-size: 10.5px; font-weight: 800;
    letter-spacing: 0.06em; cursor: pointer; font-family: inherit; white-space: nowrap;
    align-self: center;
}
.ccl-absent--on[b-h6s2t1uhpx] { background: var(--ec-red); color: #fff; border-color: var(--ec-red); }

.ccl-empty[b-h6s2t1uhpx] { padding: 30px 22px; text-align: center; }
.ccl-empty-title[b-h6s2t1uhpx] { font-size: 13px; font-weight: 700; color: var(--ec-muted); margin: 0; }

/* ── Edit slide-over ────────────────────────────────────────────────── */
.ccl-scrim[b-h6s2t1uhpx] {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, .42);
    backdrop-filter: blur(2px);
    display: flex; justify-content: flex-end;
    z-index: 1200;
}
.ccl-sheet[b-h6s2t1uhpx] {
    width: min(440px, 92%); height: 100%;
    background: #fff;
    box-shadow: -12px 0 40px rgba(15, 23, 42, .18);
    overflow-y: auto;
    display: flex; flex-direction: column;
}
.ccl-sheet-head[b-h6s2t1uhpx] {
    padding: 18px 22px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent, #d63677) 12%, #fff), #fff);
    border-bottom: 1px solid var(--ec-border-soft);
    display: flex; align-items: center; gap: 12px;
}
.ccl-sheet-avatar[b-h6s2t1uhpx] {
    width: 42px; height: 42px; border-radius: 50%;
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800; flex-shrink: 0;
}
.ccl-sheet-head-text[b-h6s2t1uhpx] { flex: 1; min-width: 0; }
.ccl-sheet-eyebrow[b-h6s2t1uhpx] { font-size: 11px; font-weight: 800; color: var(--accent, #d63677); letter-spacing: 0.1em; text-transform: uppercase; margin: 0; }
.ccl-sheet-name[b-h6s2t1uhpx] { font-size: 16px; font-weight: 800; color: var(--ec-text); margin: 2px 0 0; }
.ccl-sheet-close[b-h6s2t1uhpx] {
    width: 32px; height: 32px; border-radius: 8px;
    border: 1px solid var(--ec-border); background: #fff;
    font-size: 14px; color: var(--ec-muted); cursor: pointer; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.ccl-sheet-body[b-h6s2t1uhpx] { flex: 1; padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; }
.ccl-field-grid[b-h6s2t1uhpx] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ccl-field[b-h6s2t1uhpx] { display: flex; flex-direction: column; }
.ccl-label[b-h6s2t1uhpx] { font-size: 11px; font-weight: 800; color: var(--ec-muted); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; }
.ccl-field-row[b-h6s2t1uhpx] { display: flex; gap: 8px; align-items: center; }
.ccl-input[b-h6s2t1uhpx] { border: 1px solid var(--ec-border); border-radius: 9px; padding: 10px 12px; font-size: 14px; font-family: inherit; font-weight: 700; color: var(--ec-text); }
.ccl-input--full[b-h6s2t1uhpx] { width: 100%; box-sizing: border-box; font-weight: 400; font-size: 13px; }
.ccl-now[b-h6s2t1uhpx] { background: var(--accent, #d63677); border: none; border-radius: 9px; padding: 10px 14px; font-size: 12px; font-weight: 800; color: #fff; cursor: pointer; font-family: inherit; white-space: nowrap; }
.ccl-now--blue[b-h6s2t1uhpx] { background: #3b5fc0; }
.ccl-help[b-h6s2t1uhpx] { font-size: 10.5px; color: var(--ec-muted); margin: 5px 0 0; }
.ccl-duration[b-h6s2t1uhpx] { font-size: 11.5px; color: var(--ec-muted); margin: 0; }
.ccl-duration b[b-h6s2t1uhpx] { color: var(--ec-text); }
.ccl-chips[b-h6s2t1uhpx] { display: flex; gap: 5px; flex-wrap: wrap; }
.ccl-chip[b-h6s2t1uhpx] { background: #fff; color: var(--ec-sub); border: 1px solid var(--ec-border); border-radius: 8px; padding: 7px 12px; font-size: 11.5px; font-weight: 700; cursor: pointer; font-family: inherit; }
.ccl-chip--on[b-h6s2t1uhpx] { background: #3b5fc0; color: #fff; border-color: #3b5fc0; }
.ccl-textarea[b-h6s2t1uhpx] { width: 100%; border: 1px solid var(--ec-border); border-radius: 9px; padding: 10px 12px; font-size: 13px; font-family: inherit; box-sizing: border-box; resize: vertical; }

/* Mood editor — CURRENT MOOD strip + TODAY'S MOOD picker grid */
.ccl-moodcard[b-h6s2t1uhpx] {
    background: var(--ec-bg);
    border: 1px solid var(--ec-border-soft);
    border-radius: 12px;
    padding: 11px 13px;
}
.ccl-mini-label[b-h6s2t1uhpx] {
    font-size: 10px; font-weight: 800; color: var(--ec-muted);
    letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 6px;
}
.ccl-mini-label--spaced[b-h6s2t1uhpx] { margin-top: 12px; }
.ccl-curmood[b-h6s2t1uhpx] {
    font-size: 14.5px; font-weight: 800; margin: 0;
    display: inline-flex; align-items: center; gap: 7px;
}
.ccl-curmood-icon[b-h6s2t1uhpx] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
}
.ccl-curmood-empty[b-h6s2t1uhpx] { font-size: 13px; font-weight: 700; color: var(--ec-muted); font-style: italic; margin: 0; }

.ccl-moodgrid[b-h6s2t1uhpx] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ccl-moodtile[b-h6s2t1uhpx] {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    border: 1.5px solid var(--ec-border); border-radius: 10px;
    padding: 8px 6px; background: #fff; cursor: pointer; font-family: inherit;
}
.ccl-moodtile-icon[b-h6s2t1uhpx] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
}
.ccl-moodtile-label[b-h6s2t1uhpx] { font-size: 10.5px; font-weight: 800; color: var(--ec-text); text-align: center; }
@media (max-width: 520px) { .ccl-moodgrid[b-h6s2t1uhpx] { grid-template-columns: repeat(3, 1fr); } }

/* Teacher notes — list + composer */
.ccl-notes-head[b-h6s2t1uhpx] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; }
.ccl-addnote[b-h6s2t1uhpx] {
    background: var(--accent, #d63677); color: #fff; border: none; border-radius: 8px;
    padding: 6px 12px; font-size: 11.5px; font-weight: 800; cursor: pointer; font-family: inherit;
}
.ccl-composer[b-h6s2t1uhpx] {
    background: color-mix(in srgb, var(--accent, #d63677) 6%, #fff);
    border: 1px solid color-mix(in srgb, var(--accent, #d63677) 30%, transparent);
    border-radius: 11px; padding: 11px 13px; margin-bottom: 9px;
}
.ccl-catchips[b-h6s2t1uhpx] { display: flex; gap: 5px; flex-wrap: wrap; }
.ccl-catchip[b-h6s2t1uhpx] {
    display: inline-flex; align-items: center; gap: 5px;
    background: #fff; border: 1px solid var(--ec-border); border-radius: 7px;
    padding: 5px 10px; font-size: 11px; font-weight: 800; cursor: pointer; font-family: inherit;
}
.ccl-visrow[b-h6s2t1uhpx] { display: flex; gap: 5px; }
.ccl-vis[b-h6s2t1uhpx] {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    background: #fff; color: var(--ec-sub); border: 1px solid var(--ec-border); border-radius: 8px;
    padding: 7px 9px; font-size: 11px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.ccl-vis--on[b-h6s2t1uhpx] { background: var(--ec-text); color: #fff; border-color: var(--ec-text); }
.ccl-composer-foot[b-h6s2t1uhpx] { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }

.ccl-notes-empty[b-h6s2t1uhpx] { padding: 14px 13px; background: var(--ec-bg); border: 1px dashed var(--ec-border); border-radius: 10px; text-align: center; }
.ccl-notes-empty p[b-h6s2t1uhpx] { font-size: 11.5px; color: var(--ec-muted); margin: 0; }

.ccl-notelist[b-h6s2t1uhpx] { display: flex; flex-direction: column; gap: 6px; }
.ccl-note[b-h6s2t1uhpx] { background: #fff; border: 1px solid var(--ec-border-soft); border-left: 3px solid var(--ec-border); border-radius: 10px; padding: 9px 11px; }
.ccl-note-head[b-h6s2t1uhpx] { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.ccl-note-cat[b-h6s2t1uhpx] {
    display: inline-flex; align-items: center; gap: 4px; border: 1px solid transparent; border-radius: 6px;
    padding: 2px 8px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
}
.ccl-note-staff[b-h6s2t1uhpx] { display: inline-flex; align-items: center; gap: 3px; color: var(--ec-muted); font-size: 10px; font-weight: 700; }
.ccl-note-spacer[b-h6s2t1uhpx] { flex: 1; }
.ccl-note-time[b-h6s2t1uhpx] { font-size: 10px; color: var(--ec-muted); font-weight: 700; font-family: ui-monospace, "SF Mono", monospace; }
.ccl-note-del[b-h6s2t1uhpx] {
    background: #fff; border: 1px solid var(--ec-border); border-radius: 5px; padding: 2px 6px;
    font-size: 10px; color: var(--ec-muted); cursor: pointer; font-family: inherit; display: inline-flex; align-items: center;
}
.ccl-note-text[b-h6s2t1uhpx] { font-size: 12.5px; color: var(--ec-text); line-height: 1.5; margin: 0; }
.ccl-note-by[b-h6s2t1uhpx] { font-size: 10px; color: var(--ec-muted); margin: 4px 0 0; }

.ccl-sheet-foot[b-h6s2t1uhpx] {
    padding: 14px 22px; border-top: 1px solid var(--ec-border-soft); background: var(--ec-bg);
    display: flex; gap: 8px; justify-content: space-between; align-items: center;
}
.ccl-foot-right[b-h6s2t1uhpx] { display: flex; gap: 7px; }
.ccl-btn-clear[b-h6s2t1uhpx] { background: #fff; border: 1px solid var(--ec-border); border-radius: 9px; padding: 9px 14px; font-size: 12px; font-weight: 700; color: var(--ec-red); cursor: pointer; font-family: inherit; }
.ccl-btn-cancel[b-h6s2t1uhpx] { background: #fff; border: 1px solid var(--ec-border); border-radius: 9px; padding: 9px 14px; font-size: 12px; font-weight: 700; color: var(--ec-sub); cursor: pointer; font-family: inherit; }
.ccl-btn-save[b-h6s2t1uhpx] { background: var(--accent, #d63677); border: none; border-radius: 9px; padding: 9px 18px; font-size: 13px; font-weight: 800; color: #fff; cursor: pointer; font-family: inherit; }

@media (max-width: 860px) {
    .ccl-grid[b-h6s2t1uhpx] { grid-template-columns: minmax(120px, 1.3fr) repeat(4, 1fr) 96px; }
}
/* /Components/Common/ClassGradebook.razor.rz.scp.css */
/* ClassGradebook — scoped CSS. Component owns its own gradebook
   surface; class names are all .cgb-* (gradebook card) and .cgb-qg-*
   (Quick Grade modal). Faithful port of TWClassGradesInline +
   QuickGradeModal (proto 36593-37471). */

.tgc[b-clyf0led5t] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.cgb-card[b-clyf0led5t] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    overflow: hidden;
}
.cgb-loading[b-clyf0led5t] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 36px 0;
    justify-content: center;
    color: var(--ec-muted);
    font-size: 13px;
}
.cgb-loading .bi[b-clyf0led5t] { animation: cgb-spin-b-clyf0led5t 1s linear infinite; }
@keyframes cgb-spin-b-clyf0led5t { to { transform: rotate(360deg); } }

.cgb-empty[b-clyf0led5t] {
    padding: 36px 24px;
    text-align: center;
}
.cgb-empty-title[b-clyf0led5t] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.cgb-empty-sub[b-clyf0led5t] {
    font-size: 12px;
    color: var(--ec-muted);
    margin: 5px auto 0;
    max-width: 380px;
    line-height: 1.5;
}

/* Band color tokens — Numeric / Letter / Qualifier averages all collapse
   onto the same ok/warn/alert/muted set via GradeAggregator. */
.cgb-band--ok[b-clyf0led5t]    { color: var(--ec-green); }
.cgb-band--warn[b-clyf0led5t]  { color: var(--ec-amber); }
.cgb-band--alert[b-clyf0led5t] { color: var(--ec-red); }
.cgb-band--muted[b-clyf0led5t] { color: var(--ec-muted); }
.cgb-band--info[b-clyf0led5t]  { color: var(--ec-blue); }

.cgb-toolbar[b-clyf0led5t] {
    padding: 14px 18px;
}
.cgb-toolbar-head[b-clyf0led5t] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.cgb-toolbar-text[b-clyf0led5t] {
    flex: 1 1 280px;
    min-width: 0;
}
.cgb-toolbar-title[b-clyf0led5t] {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}
.cgb-toolbar-title h3[b-clyf0led5t] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.cgb-pill[b-clyf0led5t] {
    font-size: 9.5px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.06em;
    line-height: 1.4;
}
.cgb-pill--accent[b-clyf0led5t] {
    background: color-mix(in srgb, var(--pill, var(--ec-blue)) 14%, transparent);
    color: var(--pill, var(--ec-blue));
}
.cgb-pill--neutral[b-clyf0led5t] {
    background: var(--ec-border-soft);
    color: var(--ec-sub);
}
.cgb-toolbar-desc[b-clyf0led5t] {
    font-size: 11.5px;
    color: var(--ec-muted);
    margin: 5px 0 0;
    line-height: 1.5;
}
.cgb-quickadd[b-clyf0led5t] {
    background: linear-gradient(135deg, var(--accent, var(--ec-blue)) 0%, color-mix(in srgb, var(--accent, var(--ec-blue)) 80%, #000) 100%);
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent, var(--ec-blue)) 30%, transparent);
    transition: filter .12s ease;
}
.cgb-quickadd:hover[b-clyf0led5t] { filter: brightness(1.06); }
.cgb-quickadd .bi[b-clyf0led5t] { font-size: 13px; }

/* Subject filter chips — small inline pills at the top of the gradebook.
   Renamed from .cgb-chip* to .cgb-fchip* to avoid colliding with the
   .cgb-chip class used for grade-value chips inside the student rows
   (which are a vertically-stacked column with value + date). The later
   rule was winning the cascade and turning these filter chips into tall
   tiles. */
.cgb-chiprow[b-clyf0led5t] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.cgb-fchip[b-clyf0led5t] {
    background: #fff;
    color: var(--ec-sub);
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
    white-space: nowrap;
}
.cgb-fchip-dot[b-clyf0led5t] {
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--chip, var(--ec-blue));
    display: inline-block;
    flex-shrink: 0;
}
.cgb-fchip-mine[b-clyf0led5t] {
    font-size: 8.5px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0.06em;
    background: color-mix(in srgb, var(--chip, var(--ec-blue)) 14%, transparent);
    color: var(--chip, var(--ec-blue));
}
.cgb-fchip-count[b-clyf0led5t] {
    font-size: 9.5px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--ec-border-soft);
    color: var(--ec-muted);
}
.cgb-fchip--on[b-clyf0led5t] {
    background: var(--chip, var(--ec-blue));
    color: #fff;
    border-color: var(--chip, var(--ec-blue));
}
.cgb-fchip--on .cgb-fchip-dot[b-clyf0led5t] { background: #fff; }
.cgb-fchip--on .cgb-fchip-mine[b-clyf0led5t],
.cgb-fchip--on .cgb-fchip-count[b-clyf0led5t] {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

/* Search + sort */
.cgb-search[b-clyf0led5t] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.cgb-search-input[b-clyf0led5t] {
    position: relative;
    flex: 1 1 240px;
    min-width: 200px;
}
.cgb-search-input .bi[b-clyf0led5t] {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--ec-muted);
}
.cgb-search-input input[b-clyf0led5t] {
    width: 100%;
    padding: 8px 12px 8px 32px;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    font-size: 12.5px;
    font-family: inherit;
    outline: none;
    background: #fff;
    color: var(--ec-text);
    box-sizing: border-box;
}
.cgb-search-input input:focus[b-clyf0led5t] {
    border-color: var(--ec-blue);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ec-blue) 12%, transparent);
}
.cgb-sort[b-clyf0led5t] {
    display: inline-flex;
    gap: 3px;
    background: var(--ec-bg);
    border-radius: 8px;
    padding: 3px;
}
.cgb-sort-btn[b-clyf0led5t] {
    padding: 5px 10px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    background: transparent;
    color: var(--ec-muted);
}
.cgb-sort-btn--on[b-clyf0led5t] {
    background: #fff;
    color: var(--ec-text);
    box-shadow: 0 1px 3px rgba(13, 23, 51, .08);
}

/* KPI strip */
.cgb-kpis[b-clyf0led5t] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}
.cgb-kpi[b-clyf0led5t] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 12px;
    padding: 12px 14px;
}
.cgb-kpi-head[b-clyf0led5t] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.cgb-kpi-icon[b-clyf0led5t] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--kpi, var(--ec-blue)) 14%, transparent);
    color: var(--kpi, var(--ec-blue));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cgb-kpi-icon .bi[b-clyf0led5t] { font-size: 14px; }
.cgb-kpi-label[b-clyf0led5t] {
    font-size: 10px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}
.cgb-kpi-value[b-clyf0led5t] {
    font-size: 18px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
    line-height: 1;
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", monospace;
}
.cgb-kpi-sub[b-clyf0led5t] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 5px 0 0;
}

/* Student cards */
.cgb-list[b-clyf0led5t] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cgb-stu[b-clyf0led5t] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 13px;
    overflow: hidden;
}
.cgb-stu-head[b-clyf0led5t] {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--ec-border-soft);
}
.cgb-stu-avatar[b-clyf0led5t] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
}
.cgb-stu-text[b-clyf0led5t] {
    flex: 1;
    min-width: 0;
}
.cgb-stu-name[b-clyf0led5t] {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.cgb-stu-meta[b-clyf0led5t] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 2px 0 0;
}
.cgb-stu-avg[b-clyf0led5t] {
    text-align: right;
    flex-shrink: 0;
}
.cgb-stu-avg-label[b-clyf0led5t] {
    font-size: 9.5px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    margin: 0;
}
.cgb-stu-avg-value[b-clyf0led5t] {
    font-size: 18px;
    font-weight: 800;
    margin: 2px 0 0;
    line-height: 1;
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", monospace;
}
.cgb-stu-empty[b-clyf0led5t] {
    font-size: 11px;
    color: var(--ec-muted);
    font-style: italic;
    margin: 0;
    flex-shrink: 0;
}
.cgb-stu-add[b-clyf0led5t] {
    background: var(--accent, var(--ec-blue));
    border: none;
    border-radius: 9px;
    padding: 8px 13px;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    transition: filter .12s ease;
}
.cgb-stu-add:hover[b-clyf0led5t] { filter: brightness(1.06); }
.cgb-stu-add .bi[b-clyf0led5t] { font-size: 12px; }

.cgb-stu-empty-row[b-clyf0led5t] {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.cgb-stu-empty-row .bi[b-clyf0led5t] {
    color: var(--ec-muted);
    font-size: 16px;
}
.cgb-stu-empty-row p[b-clyf0led5t] {
    font-size: 12px;
    color: var(--ec-muted);
    margin: 0;
    flex: 1;
}

/* Subject rows inside a student card */
.cgb-subj[b-clyf0led5t] {
    padding: 11px 16px;
    display: grid;
    grid-template-columns: 200px 1fr auto;
    gap: 14px;
    align-items: center;
    border-top: 1px solid var(--ec-border-soft);
    background: #fff;
}
.cgb-subj:first-child[b-clyf0led5t] { border-top: none; }
.cgb-subj--read[b-clyf0led5t] {
    background: color-mix(in srgb, var(--ec-bg) 60%, #fff);
}
.cgb-subj-label[b-clyf0led5t] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}
.cgb-subj-icon[b-clyf0led5t] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    /* Solid subject colour + white glyph — matches the prototype's
       SubjectMonogram (gradebook rows, EduConnect All Roles.html lines
       492/587) and the admin Subjects catalog, not a faint tint. */
    background: var(--stripe, var(--ec-blue));
    color: #fff;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--stripe, var(--ec-blue)) 27%, transparent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cgb-subj-icon .bi[b-clyf0led5t] { font-size: 15px; }
.cgb-subj-text[b-clyf0led5t] {
    min-width: 0;
    flex: 1;
}
.cgb-subj-name-row[b-clyf0led5t] {
    display: flex;
    align-items: center;
    gap: 5px;
}
.cgb-subj-name[b-clyf0led5t] {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cgb-subj-mine[b-clyf0led5t] {
    font-size: 8.5px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0.06em;
    background: color-mix(in srgb, var(--stripe, var(--ec-blue)) 14%, transparent);
    color: var(--stripe, var(--ec-blue));
}
.cgb-subj-read[b-clyf0led5t] {
    font-size: 8.5px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0.06em;
    background: var(--ec-border-soft);
    color: var(--ec-muted);
}
.cgb-subj-meta[b-clyf0led5t] {
    font-size: 10.5px;
    color: var(--ec-muted);
    font-weight: 600;
    margin: 2px 0 0;
}
.cgb-subj-meta b[b-clyf0led5t] {
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", monospace;
}

.cgb-subj-chips[b-clyf0led5t] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
}
.cgb-chip[b-clyf0led5t] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 5px 9px 6px;
    border-radius: 8px;
    border-top: 3px solid var(--stripe, var(--ec-blue));
    background: var(--ec-bg);
    min-width: 46px;
    border-left: 1px solid color-mix(in srgb, var(--stripe, var(--ec-blue)) 14%, transparent);
    border-right: 1px solid color-mix(in srgb, var(--stripe, var(--ec-blue)) 14%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--stripe, var(--ec-blue)) 14%, transparent);
    cursor: default;
}
.cgb-chip--read[b-clyf0led5t] { opacity: .85; }
.cgb-chip-value[b-clyf0led5t] {
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", monospace;
}
.cgb-chip-date[b-clyf0led5t] {
    font-size: 8.5px;
    font-weight: 700;
    color: var(--ec-muted);
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", monospace;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.cgb-chip-major[b-clyf0led5t] {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--stripe, var(--ec-blue));
    display: inline-block;
}
.cgb-chip.cgb-band--ok[b-clyf0led5t]    { background: var(--ec-green-lt); }
.cgb-chip.cgb-band--warn[b-clyf0led5t]  { background: var(--ec-amber-lt); }
.cgb-chip.cgb-band--alert[b-clyf0led5t] { background: var(--ec-red-lt); }
.cgb-chip.cgb-band--info[b-clyf0led5t]  { background: var(--ec-blue-lt); }
.cgb-chip.cgb-band--ok    .cgb-chip-value[b-clyf0led5t] { color: var(--ec-green); }
.cgb-chip.cgb-band--warn  .cgb-chip-value[b-clyf0led5t] { color: var(--ec-amber); }
.cgb-chip.cgb-band--alert .cgb-chip-value[b-clyf0led5t] { color: var(--ec-red); }
.cgb-chip.cgb-band--info  .cgb-chip-value[b-clyf0led5t] { color: var(--ec-blue); }

.cgb-subj-cta[b-clyf0led5t] { flex-shrink: 0; }
.cgb-subj-add[b-clyf0led5t] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--stripe, var(--ec-blue)) 35%, transparent);
    font-size: 18px;
    font-weight: 800;
    color: var(--stripe, var(--ec-blue));
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
    transition: background .12s ease;
}
.cgb-subj-add:hover[b-clyf0led5t] {
    background: color-mix(in srgb, var(--stripe, var(--ec-blue)) 8%, #fff);
}
.cgb-subj-by[b-clyf0led5t] {
    font-size: 9.5px;
    color: var(--ec-muted);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

@media (max-width: 900px) {
    .cgb-kpis[b-clyf0led5t] { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
    .cgb-subj[b-clyf0led5t] { grid-template-columns: 1fr; gap: 8px; }
    .cgb-stu-head[b-clyf0led5t] { flex-wrap: wrap; }
}

/* ─── Quick Grade modal ───────────────────────────────────────────── */
/* Right-side slide-over (matches the documents pattern). */
.cgb-qg-backdrop[b-clyf0led5t] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .5);
    /* Has to sit above .ec-app-topbar (z-index: 1000 in MainLayout.razor.css)
       so the dimmed overlay actually covers the sticky top bar. Below the
       SecurityModal at 3000 so an auth interrupt still wins. */
    z-index: 1500;
    display: flex;
    justify-content: flex-end;
    animation: cgb-qg-fade-b-clyf0led5t .12s ease;
}
@keyframes cgb-qg-fade-b-clyf0led5t { from { opacity: 0 } to { opacity: 1 } }
.cgb-qg-modal[b-clyf0led5t] {
    background: #fff;
    width: min(540px, 96%);
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: -12px 0 40px rgba(13, 23, 51, .16);
    overflow: hidden;
    animation: cgb-qg-slide-b-clyf0led5t .22s ease-out;
}
@keyframes cgb-qg-slide-b-clyf0led5t { from { transform: translateX(24px); opacity: .4; } to { transform: translateX(0); opacity: 1; } }
.cgb-qg-head[b-clyf0led5t] {
    padding: 18px 22px;
    border-bottom: 1px solid var(--ec-border-soft);
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent, var(--ec-blue)) 10%, #fff), #fff);
    display: flex;
    align-items: center;
    gap: 11px;
}
.cgb-qg-head-icon[b-clyf0led5t] {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--accent, var(--ec-blue));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cgb-qg-head-icon .bi[b-clyf0led5t] { font-size: 18px; }
.cgb-qg-head-text[b-clyf0led5t] {
    flex: 1;
    min-width: 0;
}
.cgb-qg-eyebrow[b-clyf0led5t] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--accent, var(--ec-blue));
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
}
.cgb-qg-head-text h2[b-clyf0led5t] {
    font-size: 18px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 3px 0 0;
}
.cgb-qg-close[b-clyf0led5t] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 1px solid var(--ec-border);
    background: #fff;
    font-size: 18px;
    color: var(--ec-muted);
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
    flex-shrink: 0;
}
.cgb-qg-close:hover[b-clyf0led5t] { color: var(--ec-text); }

.cgb-qg-body[b-clyf0led5t] {
    flex: 1;
    overflow-y: auto;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.cgb-qg-row[b-clyf0led5t] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
}
.cgb-qg-field[b-clyf0led5t] { display: flex; flex-direction: column; }
.cgb-qg-label[b-clyf0led5t] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 6px;
}
.cgb-qg-label-meta[b-clyf0led5t] {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    color: var(--ec-muted);
}

/* Student picker */
.cgb-qg-stuwrap[b-clyf0led5t] { position: relative; margin-bottom: 7px; }
.cgb-qg-stuwrap-icon[b-clyf0led5t] {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--ec-muted);
}
.cgb-qg-stuinput[b-clyf0led5t] {
    width: 100%;
    padding: 9px 12px 9px 32px;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
}
.cgb-qg-stuinput:focus[b-clyf0led5t] { border-color: var(--accent, var(--ec-blue)); }
.cgb-qg-stulist[b-clyf0led5t] {
    max-height: 180px;
    overflow-y: auto;
    border: 1px solid var(--ec-border-soft);
    border-radius: 9px;
}
.cgb-qg-stuitem[b-clyf0led5t] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: #fff;
    border: none;
    border-top: 1px solid var(--ec-border-soft);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}
.cgb-qg-stuitem:first-child[b-clyf0led5t] { border-top: none; }
.cgb-qg-stuitem:hover[b-clyf0led5t] { background: var(--ec-bg); }
.cgb-qg-stuitem-av[b-clyf0led5t] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    flex-shrink: 0;
}
.cgb-qg-stuitem-name[b-clyf0led5t] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ec-text);
}

.cgb-qg-stuchip[b-clyf0led5t] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--chip-bg, #f5f6fa);
    border: 1px solid color-mix(in srgb, var(--accent, var(--ec-blue)) 30%, transparent);
    border-radius: 10px;
}
.cgb-qg-stuchip-av[b-clyf0led5t] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
}
.cgb-qg-stuchip p[b-clyf0led5t] {
    flex: 1;
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.cgb-qg-stuchip-change[b-clyf0led5t] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 7px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 700;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
}

/* Subject chips */
.cgb-qg-locked[b-clyf0led5t] {
    padding: 10px 12px;
    background: var(--ec-red-lt);
    border: 1px solid color-mix(in srgb, var(--ec-red) 40%, transparent);
    border-radius: 9px;
    color: var(--ec-red);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cgb-qg-sublocked[b-clyf0led5t] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    background: color-mix(in srgb, var(--subcolor, var(--ec-blue)) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--subcolor, var(--ec-blue)) 40%, transparent);
    border-radius: 9px;
    align-self: flex-start;
}
.cgb-qg-sublocked p[b-clyf0led5t] {
    font-size: 13px;
    font-weight: 800;
    color: var(--subcolor, var(--ec-blue));
    margin: 0;
}
.cgb-qg-chip-dot[b-clyf0led5t] {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: var(--subcolor, var(--ec-blue));
}
.cgb-qg-locked-pill[b-clyf0led5t] {
    font-size: 9.5px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .06);
    color: var(--ec-sub);
    letter-spacing: 0.06em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.cgb-qg-subchips[b-clyf0led5t] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.cgb-qg-subchip[b-clyf0led5t] {
    background: #fff;
    color: var(--ec-sub);
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    padding: 7px 12px;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.cgb-qg-subchip--on[b-clyf0led5t] {
    background: var(--subcolor, var(--ec-blue));
    color: #fff;
    border-color: var(--subcolor, var(--ec-blue));
}
.cgb-qg-subchip--on .cgb-qg-chip-dot[b-clyf0led5t] { background: #fff; }

/* Grade value picker */
.cgb-qg-valuerow[b-clyf0led5t] {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 9px;
}
.cgb-qg-valueinput[b-clyf0led5t] {
    width: 120px;
    padding: 12px 16px;
    border: 2px solid var(--ec-border);
    border-radius: 11px;
    font-size: 30px;
    font-weight: 800;
    color: var(--ec-text);
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", monospace;
    text-align: center;
    outline: none;
    box-sizing: border-box;
}
.cgb-qg-valuehint[b-clyf0led5t] {
    font-size: 13px;
    color: var(--ec-muted);
    font-weight: 600;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.cgb-qg-quickpicks[b-clyf0led5t] {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.cgb-qg-pick[b-clyf0led5t] {
    background: #fff;
    color: var(--tone, var(--ec-text));
    border: 1.5px solid color-mix(in srgb, var(--tone, var(--ec-blue)) 50%, transparent);
    border-radius: 8px;
    min-width: 44px;
    padding: 7px 11px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", monospace;
}
.cgb-qg-pick--on[b-clyf0led5t] {
    background: var(--tone, var(--ec-blue));
    color: #fff;
}

/* Qualifier tile grid — Romanian primary FB/B/S/I (proto 37340-37361). Each
   tile shows the token (large) + the full label below it. Inactive tiles get
   an inset 1.5px border in the tone color; active tiles fill with the tone. */
.cgb-qg-qualgrid[b-clyf0led5t] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;
}
.cgb-qg-qual[b-clyf0led5t] {
    padding: 14px 9px;
    border-radius: 11px;
    border: none;
    background: #fff;
    color: var(--tone, var(--ec-blue));
    cursor: pointer;
    font-family: inherit;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tone, var(--ec-blue)) 40%, transparent);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: filter .12s ease;
}
.cgb-qg-qual:hover[b-clyf0led5t] { filter: brightness(0.97); }
.cgb-qg-qual-token[b-clyf0led5t] {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
}
.cgb-qg-qual-label[b-clyf0led5t] {
    font-size: 10px;
    font-weight: 700;
    opacity: 0.85;
    letter-spacing: 0.04em;
}
.cgb-qg-qual--on[b-clyf0led5t] {
    background: var(--tone, var(--ec-blue));
    color: #fff;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--tone, var(--ec-blue)) 40%, transparent);
}

/* Type chips + segmented Weight */
.cgb-qg-types[b-clyf0led5t] {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.cgb-qg-type[b-clyf0led5t] {
    background: #fff;
    color: var(--ec-sub);
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    padding: 5px 11px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}
.cgb-qg-type--on[b-clyf0led5t] {
    background: var(--ec-text);
    color: #fff;
    border-color: var(--ec-text);
}
.cgb-qg-seg[b-clyf0led5t] {
    display: flex;
    gap: 3px;
    background: var(--ec-bg);
    padding: 3px;
    border-radius: 8px;
}
.cgb-qg-seg-btn[b-clyf0led5t] {
    flex: 1;
    padding: 7px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    background: transparent;
    color: var(--ec-muted);
}
.cgb-qg-seg-btn--on[b-clyf0led5t] {
    background: #fff;
    color: var(--ec-text);
    box-shadow: 0 1px 3px rgba(13, 23, 51, .08);
}

.cgb-qg-date[b-clyf0led5t] {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    color: var(--ec-text);
    box-sizing: border-box;
}
.cgb-qg-note[b-clyf0led5t] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    font-size: 12.5px;
    font-family: inherit;
    outline: none;
    min-height: 60px;
    resize: vertical;
    box-sizing: border-box;
}

.cgb-qg-error[b-clyf0led5t] {
    padding: 9px 11px;
    background: var(--ec-red-lt);
    color: var(--ec-red);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
}

/* Footer */
.cgb-qg-foot[b-clyf0led5t] {
    padding: 12px 22px;
    border-top: 1px solid var(--ec-border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    background: #fff;
}
.cgb-qg-foot-help[b-clyf0led5t] {
    font-size: 11px;
    color: var(--ec-muted);
    line-height: 1.5;
    margin: 0;
    flex: 1;
    min-width: 0;
}
.cgb-qg-foot-actions[b-clyf0led5t] { display: inline-flex; gap: 7px; }
.cgb-qg-cancel[b-clyf0led5t] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    padding: 9px 14px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
}
.cgb-qg-cancel:disabled[b-clyf0led5t] { opacity: .5; cursor: not-allowed; }
.cgb-qg-save[b-clyf0led5t] {
    background: linear-gradient(135deg, var(--accent, var(--ec-blue)) 0%, color-mix(in srgb, var(--accent, var(--ec-blue)) 80%, #000) 100%);
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent, var(--ec-blue)) 30%, transparent);
}
.cgb-qg-save:disabled[b-clyf0led5t] {
    background: var(--ec-border-soft);
    color: var(--ec-muted);
    cursor: not-allowed;
    box-shadow: none;
}
/* /Components/Common/ClassHomework.razor.rz.scp.css */
/* ClassHomework — shared component. All classes use the .chw-* prefix so
   they namespace cleanly inside both host pages (class detail's .tcd-*
   and standalone page's .thw-* both stay untouched). Faithful port of
   the prototype's TWClassDetail Homework tab (proto 36810-36945) plus
   TWHomeworkPage's filter row + submissions/review surfaces. */

.chw[b-k5dcsbayx3] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.chw-loading[b-k5dcsbayx3] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 28px 0;
    justify-content: center;
    color: var(--ec-muted);
    font-size: 13px;
}
.chw-loading .bi[b-k5dcsbayx3] { animation: chw-spin-b-k5dcsbayx3 1s linear infinite; }
@keyframes chw-spin-b-k5dcsbayx3 { to { transform: rotate(360deg); } }

/* ── Filter row ───────────────────────────────────────────────────── */
.chw-filters[b-k5dcsbayx3] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.chw-filters-spacer[b-k5dcsbayx3] { flex: 1; }
.chw-chip[b-k5dcsbayx3] {
    background: #fff;
    color: var(--ec-sub);
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.chw-chip-count[b-k5dcsbayx3] {
    font-size: 10px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--ec-border-soft);
    color: var(--ec-muted);
}
.chw-chip--active[b-k5dcsbayx3] {
    background: var(--ec-blue);
    color: #fff;
    border-color: var(--ec-blue);
}
.chw-chip--active .chw-chip-count[b-k5dcsbayx3] {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}
.chw-classpick[b-k5dcsbayx3] {
    padding: 7px 12px;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    background: #fff;
    color: var(--ec-text);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    outline: none;
}
.chw-assign[b-k5dcsbayx3] {
    padding: 8px 14px;
    background: var(--ec-blue);
    color: #fff;
    border: none;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--ec-blue) 30%, transparent);
}
.chw-assign:hover[b-k5dcsbayx3] { filter: brightness(1.06); }

/* ── Inline error banner ──────────────────────────────────────────── */
.chw-banner[b-k5dcsbayx3] {
    padding: 10px 12px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12.5px;
    font-weight: 600;
}
.chw-banner--alert[b-k5dcsbayx3] {
    background: var(--ec-red-lt, color-mix(in srgb, var(--ec-red, #dc2626) 12%, #fff));
    color: var(--ec-red, #dc2626);
    border: 1px solid color-mix(in srgb, var(--ec-red, #dc2626) 30%, transparent);
}
.chw-banner-close[b-k5dcsbayx3] {
    margin-left: auto;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    font-family: inherit;
    padding: 4px;
}

/* ── Empty state ──────────────────────────────────────────────────── */
.chw-empty[b-k5dcsbayx3] {
    background: #fff;
    border: 1px dashed var(--ec-border);
    border-radius: 14px;
    padding: 48px 28px;
    text-align: center;
}
.chw-empty--inset[b-k5dcsbayx3] { background: var(--ec-bg); padding: 28px 18px; }
.chw-empty-icon[b-k5dcsbayx3] {
    font-size: 38px;
    color: var(--ec-faint);
    margin-bottom: 10px;
    display: block;
}
.chw-empty-title[b-k5dcsbayx3] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.chw-empty-sub[b-k5dcsbayx3] {
    font-size: 12px;
    color: var(--ec-muted);
    margin: 5px auto 0;
    max-width: 380px;
    line-height: 1.5;
}

/* ── Row list ─────────────────────────────────────────────────────── */
.chw-list[b-k5dcsbayx3] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.chw-row[b-k5dcsbayx3] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    padding: 14px 18px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    align-items: flex-start;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.chw-row:hover[b-k5dcsbayx3] {
    border-color: color-mix(in srgb, var(--accent, var(--ec-blue)) 35%, var(--ec-border));
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent, var(--ec-blue)) 18%, transparent);
}
.chw-row-body[b-k5dcsbayx3] { min-width: 0; }
.chw-row-pills[b-k5dcsbayx3] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.chw-row-class[b-k5dcsbayx3] {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 2px 7px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--accent, var(--ec-blue)) 14%, transparent);
    color: var(--accent, var(--ec-blue));
    text-transform: uppercase;
}
.chw-row-subject[b-k5dcsbayx3] {
    font-size: 11.5px;
    color: var(--ec-muted);
    font-weight: 600;
}
.chw-row-typepill[b-k5dcsbayx3] {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--ec-border-soft);
    color: var(--ec-muted);
    text-transform: uppercase;
}
.chw-row-status[b-k5dcsbayx3] {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 2px 7px;
    border-radius: 4px;
    text-transform: uppercase;
}
.chw-row-status--ok[b-k5dcsbayx3]    { background: color-mix(in srgb, var(--ec-blue) 12%, transparent);  color: var(--ec-blue); }
.chw-row-status--warn[b-k5dcsbayx3]  { background: color-mix(in srgb, var(--ec-amber, #f59e0b) 14%, transparent); color: var(--ec-amber, #f59e0b); }
.chw-row-status--muted[b-k5dcsbayx3] { background: var(--ec-border-soft); color: var(--ec-muted); }
.chw-row-status--draft[b-k5dcsbayx3] { background: var(--ec-border-soft); color: var(--ec-muted); }
.chw-row-status--overdue[b-k5dcsbayx3] { background: color-mix(in srgb, var(--ec-red, #dc2626) 12%, transparent); color: var(--ec-red, #dc2626); }
/* "○ NOT GRADED" — purple, marks a check-off-only assignment. */
.chw-row-notgraded[b-k5dcsbayx3] {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 2px 7px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--ec-purple, #7c3aed) 16%, transparent);
    color: var(--ec-purple, #7c3aed);
}
.chw-row-title[b-k5dcsbayx3] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
    line-height: 1.3;
}
.chw-row-desc[b-k5dcsbayx3] {
    font-size: 12px;
    color: var(--ec-muted);
    margin: 4px 0 0;
    line-height: 1.5;
}
.chw-row-progressrow[b-k5dcsbayx3] {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 9px;
}
.chw-row-progress[b-k5dcsbayx3] {
    flex: 1;
    height: 6px;
    background: var(--ec-border-soft);
    border-radius: 3px;
    overflow: hidden;
}
.chw-row-progress-bar[b-k5dcsbayx3] {
    height: 100%;
    background: var(--ec-blue);
    border-radius: 3px;
    transition: width .25s ease;
}
.chw-row[data-tone="warn"]  .chw-row-progress-bar[b-k5dcsbayx3] { background: var(--ec-amber, #f59e0b); }
.chw-row[data-tone="muted"] .chw-row-progress-bar[b-k5dcsbayx3] { background: var(--ec-muted); }
.chw-row-stats[b-k5dcsbayx3] {
    font-size: 11.5px;
    color: var(--ec-muted);
    margin: 0;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.chw-row-sep[b-k5dcsbayx3] { color: var(--ec-faint); }
.chw-row-due[b-k5dcsbayx3] {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
    min-width: 130px;
}
.chw-row-due-label[b-k5dcsbayx3] {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ec-muted);
    margin: 0;
}
.chw-row-due-date[b-k5dcsbayx3] {
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
    line-height: 1.1;
}
.chw-row-due-date--overdue[b-k5dcsbayx3] { color: var(--ec-red, #dc2626); }
.chw-row-cta[b-k5dcsbayx3] {
    background: #fff;
    color: var(--ec-blue);
    border: 1px solid var(--ec-blue);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
}
.chw-row-cta:hover[b-k5dcsbayx3] {
    background: color-mix(in srgb, var(--ec-blue) 8%, #fff);
}
/* Grading CTA — amber filled "Grade →" / "Check →" (proto 41687). */
.chw-row-cta--grade[b-k5dcsbayx3] {
    background: var(--ec-amber, #d97706);
    border-color: var(--ec-amber, #d97706);
    color: #fff;
}
.chw-row-cta--grade:hover[b-k5dcsbayx3] { filter: brightness(.96); background: var(--ec-amber, #d97706); }
/* Past-assignment view CTA — quiet/muted so it doesn't compete. */
.chw-row-cta--ghost[b-k5dcsbayx3] {
    color: var(--ec-sub);
    border-color: var(--ec-border);
}
.chw-row-cta--ghost:hover[b-k5dcsbayx3] { background: var(--ec-bg); border-color: var(--ec-text); color: var(--ec-text); }
.chw-row-cta-count[b-k5dcsbayx3] {
    font-size: 10px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--ec-blue) 14%, transparent);
    color: var(--ec-blue);
}
.chw-row-row-ghosts[b-k5dcsbayx3] {
    display: inline-flex;
    gap: 5px;
    margin-top: 2px;
}
.chw-row-ghost[b-k5dcsbayx3] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 7px;
    width: 28px;
    height: 28px;
    color: var(--ec-muted);
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.chw-row-ghost:hover[b-k5dcsbayx3] { color: var(--ec-text); border-color: var(--ec-text); }
.chw-row-ghost .bi[b-k5dcsbayx3] { font-size: 13px; }

/* ── Submissions modal (right slide-over) ─────────────────────────── */
.chw-overlay[b-k5dcsbayx3] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .5);
    z-index: 1500;
    display: flex;
    justify-content: flex-end;
}
.chw-overlay--center[b-k5dcsbayx3] {
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.chw-modal[b-k5dcsbayx3] {
    /* Match the app's standard view/detail slide-over width (UserViewSheet,
       billing detail = 560px) rather than the prototype's wider 720px sheet. */
    width: min(560px, 96%);
    height: 100%;
    background: #fff;
    box-shadow: -12px 0 40px rgba(15, 23, 42, .18);
    display: flex;
    flex-direction: column;
    animation: chw-slide-b-k5dcsbayx3 .22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes chw-slide-b-k5dcsbayx3 { from { transform: translateX(100%) } to { transform: translateX(0) } }

.chw-modal-head[b-k5dcsbayx3] {
    padding: 14px 22px;
    border-bottom: 1px solid var(--ec-border-soft);
    display: flex;
    align-items: flex-start;
    gap: 11px;
}
.chw-modal-back[b-k5dcsbayx3] {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: var(--ec-bg);
    border: none;
    color: var(--ec-text);
    cursor: pointer;
    font-family: inherit;
}
.chw-modal-head-text[b-k5dcsbayx3] { flex: 1; min-width: 0; }
.chw-modal-eyebrow[b-k5dcsbayx3] {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ec-muted);
    margin: 0;
}
.chw-modal-title[b-k5dcsbayx3] {
    font-size: 17px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 2px 0 0;
}
.chw-modal-sub[b-k5dcsbayx3] {
    font-size: 11.5px;
    color: var(--ec-muted);
    margin: 3px 0 0;
}
.chw-modal-close[b-k5dcsbayx3] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--ec-border);
    background: #fff;
    color: var(--ec-muted);
    cursor: pointer;
    font-family: inherit;
}

.chw-modal-kpis[b-k5dcsbayx3] {
    padding: 12px 22px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;
    border-bottom: 1px solid var(--ec-border-soft);
    background: color-mix(in srgb, var(--ec-bg) 55%, #fff);
}
.chw-modal-kpi[b-k5dcsbayx3] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    padding: 8px 11px;
    text-align: center;
}
.chw-modal-kpi-label[b-k5dcsbayx3] {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ec-muted);
    margin: 0;
}
.chw-modal-kpi-value[b-k5dcsbayx3] {
    font-size: 18px;
    font-weight: 800;
    color: var(--accent, var(--ec-blue));
    margin: 3px 0 0;
    line-height: 1;
}

.chw-modal-body[b-k5dcsbayx3] {
    flex: 1;
    overflow-y: auto;
    padding: 14px 22px;
    background: var(--ec-bg);
}
.chw-modal-section-label[b-k5dcsbayx3] {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ec-muted);
    margin: 0 0 8px;
}

.chw-sub-list[b-k5dcsbayx3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.chw-sub-row[b-k5dcsbayx3] {
    width: 100%;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-left: 4px solid var(--accent, var(--ec-blue));
    border-radius: 11px;
    padding: 11px 14px;
    display: grid;
    grid-template-columns: 36px 1fr auto auto;
    gap: 12px;
    align-items: center;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: box-shadow .12s ease;
}
.chw-sub-row:hover[b-k5dcsbayx3] { box-shadow: 0 3px 12px rgba(13, 23, 51, .08); }
.chw-sub-row--graded[b-k5dcsbayx3] { border-color: color-mix(in srgb, var(--ec-green, #16a34a) 40%, transparent); }
.chw-sub-avatar[b-k5dcsbayx3] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ec-blue);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
}
.chw-sub-body[b-k5dcsbayx3] { min-width: 0; }
.chw-sub-name[b-k5dcsbayx3] {
    font-size: 13px;
    font-weight: 700;
    color: var(--ec-text);
    margin: 0;
}
.chw-sub-meta[b-k5dcsbayx3] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 2px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.chw-sub-status[b-k5dcsbayx3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.chw-sub-grade[b-k5dcsbayx3] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-green, #16a34a);
}
.chw-sub-pill[b-k5dcsbayx3] {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--ec-border-soft);
    color: var(--ec-muted);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.chw-sub-pill--warn[b-k5dcsbayx3] { background: color-mix(in srgb, var(--ec-amber, #f59e0b) 14%, transparent); color: var(--ec-amber, #f59e0b); }
.chw-sub-pill--ok[b-k5dcsbayx3]   { background: color-mix(in srgb, var(--ec-green, #16a34a) 14%, transparent); color: var(--ec-green, #16a34a); }
.chw-sub-pill--info[b-k5dcsbayx3] { background: color-mix(in srgb, var(--ec-blue) 14%, transparent); color: var(--ec-blue); }

/* ── Per-submission detail slide-over (overlays modal) ────────────── */
.chw-detail-overlay[b-k5dcsbayx3] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    z-index: 1600;
    display: flex;
    justify-content: flex-end;
}
.chw-detail[b-k5dcsbayx3] {
    width: min(540px, 96%);
    height: 100%;
    background: #fff;
    box-shadow: -12px 0 40px rgba(15, 23, 42, .22);
    display: flex;
    flex-direction: column;
}
.chw-detail-head[b-k5dcsbayx3] {
    padding: 14px 22px 16px;
    border-bottom: 1px solid var(--ec-border-soft);
    display: flex;
    flex-direction: column;
    gap: 11px;
    position: relative;
    flex-shrink: 0;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent, var(--ec-blue)) 9%, #fff), #fff);
}
/* "‹ Back to submissions" — returns to the list within the same sheet. */
.chw-detail-back[b-k5dcsbayx3] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 7px;
    padding: 5px 11px 5px 8px;
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
}
.chw-detail-back:hover[b-k5dcsbayx3] { border-color: var(--ec-text); color: var(--ec-text); }
.chw-detail-back .bi[b-k5dcsbayx3] { font-size: 12px; }
.chw-detail-headrow[b-k5dcsbayx3] {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding-right: 36px;
}
.chw-detail-avatar[b-k5dcsbayx3] {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--ec-blue);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    flex-shrink: 0;
}
.chw-detail-head-text[b-k5dcsbayx3] { flex: 1; min-width: 0; }
.chw-detail-eyebrow[b-k5dcsbayx3] {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent, var(--ec-muted));
    margin: 0;
}
.chw-detail-title[b-k5dcsbayx3] {
    font-size: 17px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 3px 0 0;
}
.chw-detail-hw[b-k5dcsbayx3] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 3px 0 0;
}
.chw-detail-head .chw-modal-close[b-k5dcsbayx3] { position: absolute; top: 14px; right: 14px; }
.chw-detail-body[b-k5dcsbayx3] {
    flex: 1;
    overflow-y: auto;
    padding: 16px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.chw-detail-meta[b-k5dcsbayx3] {
    font-size: 12px;
    color: var(--ec-muted);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.chw-detail-section-label[b-k5dcsbayx3] {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ec-muted);
    margin: 0;
}
.chw-callout[b-k5dcsbayx3] {
    padding: 12px 14px;
    border-radius: 9px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ec-text);
}
.chw-callout--purple[b-k5dcsbayx3] {
    background: color-mix(in srgb, var(--ec-purple, #7c3aed) 9%, #fff);
    border-left: 3px solid var(--ec-purple, #7c3aed);
    font-style: italic;
}
.chw-callout-eyebrow[b-k5dcsbayx3] {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #7c3aed;
    margin: 0;
    text-transform: uppercase;
}
.chw-callout-text[b-k5dcsbayx3] {
    font-size: 12.5px;
    color: var(--ec-text);
    margin: 4px 0 0;
    line-height: 1.5;
}

.chw-files[b-k5dcsbayx3] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.chw-file[b-k5dcsbayx3] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 11px;
    background: var(--ec-bg);
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    text-decoration: none;
    color: var(--ec-text);
    font-size: 12px;
    font-weight: 600;
}
.chw-file-icon[b-k5dcsbayx3] { color: var(--ec-muted); }
.chw-file-name[b-k5dcsbayx3] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chw-file-dl[b-k5dcsbayx3] { color: var(--ec-muted); }

.chw-grade-form[b-k5dcsbayx3] {
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.chw-grade-field[b-k5dcsbayx3] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.chw-grade-field-label[b-k5dcsbayx3] {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ec-muted);
}
.chw-grade-field-opt[b-k5dcsbayx3] {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}
.chw-grade-input[b-k5dcsbayx3],
.chw-grade-textarea[b-k5dcsbayx3] {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
}
.chw-grade-textarea[b-k5dcsbayx3] {
    min-height: 100px;
    resize: vertical;
}
.chw-grade-error[b-k5dcsbayx3] {
    font-size: 11.5px;
    color: var(--ec-red, #dc2626);
    margin: 0;
}

/* ── Submissions-modal header extras (icon box + scale/not-graded pills) ── */
.chw-modal-head-icon[b-k5dcsbayx3] {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: color-mix(in srgb, var(--accent, var(--ec-blue)) 15%, #fff);
    color: var(--accent, var(--ec-blue));
}
.chw-modal-eyebrowrow[b-k5dcsbayx3] {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}
.chw-modal-eyebrow[b-k5dcsbayx3] {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent, var(--ec-muted));
    margin: 0;
}
.chw-modal-notgraded[b-k5dcsbayx3] {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 2px 7px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--ec-purple, #7c3aed) 16%, transparent);
    color: var(--ec-purple, #7c3aed);
}
.chw-modal-scale[b-k5dcsbayx3] {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--ec-bg);
    color: var(--ec-sub);
}

/* ── Submission row: chips + status + grade columns ─────────────────── */
.chw-sub-chips[b-k5dcsbayx3] {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 5px;
}
.chw-sub-chip[b-k5dcsbayx3] {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 2px 7px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--ec-border-soft);
    color: var(--ec-muted);
}
.chw-sub-chip--files[b-k5dcsbayx3] { background: color-mix(in srgb, var(--ec-blue) 12%, transparent); color: var(--ec-blue); }
.chw-sub-chip--notes[b-k5dcsbayx3] { background: color-mix(in srgb, var(--ec-purple, #7c3aed) 14%, transparent); color: var(--ec-purple, #7c3aed); }
.chw-sub-chip--late[b-k5dcsbayx3]  { background: color-mix(in srgb, var(--ec-amber, #d97706) 16%, transparent); color: var(--ec-amber, #d97706); }
.chw-sub-statuscol[b-k5dcsbayx3] { display: inline-flex; align-items: center; }
.chw-sub-gradecol[b-k5dcsbayx3] { text-align: right; min-width: 56px; }
.chw-sub-grade-label[b-k5dcsbayx3] {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ec-muted);
    margin: 0;
}
.chw-sub-grade-big[b-k5dcsbayx3] {
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    margin: 2px 0 0;
}
.chw-sub-open[b-k5dcsbayx3] {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 7px 12px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--accent, var(--ec-blue)) 14%, transparent);
    color: var(--accent, var(--ec-blue));
    white-space: nowrap;
}
.chw-sub-pill--alert[b-k5dcsbayx3] { background: color-mix(in srgb, var(--ec-red, #dc2626) 14%, transparent); color: var(--ec-red, #dc2626); }

/* ── "Not submitted yet" list ──────────────────────────────────────── */
.chw-modal-section-label--mt[b-k5dcsbayx3] { margin-top: 18px; }
.chw-miss-list[b-k5dcsbayx3] { display: flex; flex-direction: column; gap: 6px; }
.chw-miss-row[b-k5dcsbayx3] {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 14px;
    background: color-mix(in srgb, var(--ec-bg) 70%, #fff);
    border: 1px dashed var(--ec-border);
    border-radius: 11px;
}
.chw-miss-avatar[b-k5dcsbayx3] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ec-faint);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10.5px;
    font-weight: 800;
    flex-shrink: 0;
    opacity: .9;
}
.chw-miss-name[b-k5dcsbayx3] { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; color: var(--ec-sub); margin: 0; }
/* "Remind" — pings the student + parents that an overdue HW is unsubmitted. */
.chw-miss-remind[b-k5dcsbayx3] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--ec-amber, #d97706);
    color: #fff;
    border: none;
    border-radius: 7px;
    padding: 5px 11px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    flex-shrink: 0;
}
.chw-miss-remind:hover:not(:disabled)[b-k5dcsbayx3] { filter: brightness(.96); }
.chw-miss-remind:disabled[b-k5dcsbayx3] { cursor: default; }
.chw-miss-remind--done[b-k5dcsbayx3] {
    background: color-mix(in srgb, var(--ec-green, #16a34a) 14%, transparent);
    color: var(--ec-green, #16a34a);
    opacity: 1;
}
.chw-miss-remind .bi[b-k5dcsbayx3] { font-size: 11px; }

/* ── Grade dialog: meta grid + files + check-off + grade buttons ────── */
.chw-detail-metagrid[b-k5dcsbayx3] { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.chw-detail-metacell[b-k5dcsbayx3] { padding: 10px 12px; background: var(--ec-bg); border-radius: 9px; }
.chw-detail-metalabel[b-k5dcsbayx3] {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ec-muted);
    margin: 0;
}
.chw-detail-metaval[b-k5dcsbayx3] { font-size: 13px; font-weight: 700; color: var(--ec-text); margin: 3px 0 0; }
.chw-detail-metaval--num[b-k5dcsbayx3] { font-size: 18px; font-weight: 800; line-height: 1; }
.chw-detail-metasub[b-k5dcsbayx3] { font-size: 10.5px; color: var(--ec-muted); margin: 1px 0 0; }

.chw-file2[b-k5dcsbayx3] {
    display: flex;
    align-items: center;
    gap: 11px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 10px;
    padding: 9px 12px;
}
.chw-file2-type[b-k5dcsbayx3] {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--ec-blue) 12%, #fff);
    color: var(--ec-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    flex-shrink: 0;
}
.chw-file2-body[b-k5dcsbayx3] { flex: 1; min-width: 0; }
.chw-file2-name[b-k5dcsbayx3] { font-size: 12.5px; font-weight: 700; color: var(--ec-text); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chw-file2-open[b-k5dcsbayx3] {
    background: var(--ec-blue);
    color: #fff;
    border-radius: 7px;
    padding: 7px 13px;
    font-size: 11.5px;
    font-weight: 800;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}
.chw-detail-noattach[b-k5dcsbayx3] {
    padding: 16px;
    background: var(--ec-bg);
    border-radius: 10px;
    text-align: center;
    font-size: 12.5px;
    font-style: italic;
    color: var(--ec-muted);
}

.chw-checkoff[b-k5dcsbayx3] {
    padding: 14px 16px;
    background: color-mix(in srgb, var(--ec-purple, #7c3aed) 8%, #fff);
    border: 1px solid color-mix(in srgb, var(--ec-purple, #7c3aed) 28%, transparent);
    border-radius: 11px;
    display: flex;
    align-items: center;
    gap: 11px;
}
.chw-checkoff-mark[b-k5dcsbayx3] { font-size: 24px; color: var(--ec-purple, #7c3aed); line-height: 1; }
.chw-checkoff-title[b-k5dcsbayx3] { font-size: 12.5px; font-weight: 800; color: var(--ec-purple, #7c3aed); margin: 0; }
.chw-checkoff-sub[b-k5dcsbayx3] { font-size: 11px; color: var(--ec-sub); margin: 2px 0 0; }

/* Letter-scale grade buttons (FB · B · S · I) */
.chw-grade-letters[b-k5dcsbayx3] { display: grid; gap: 9px; }
.chw-grade-letter[b-k5dcsbayx3] {
    padding: 14px 9px;
    border-radius: 11px;
    border: none;
    background: #fff;
    color: var(--c, var(--ec-text));
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c, var(--ec-blue)) 40%, transparent);
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}
.chw-grade-letter-v[b-k5dcsbayx3] { font-size: 22px; font-weight: 800; }
.chw-grade-letter--on[b-k5dcsbayx3] {
    background: var(--c, var(--ec-blue));
    color: #fff;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--c, var(--ec-blue)) 40%, transparent);
}

/* Numeric-scale quick-pick grade buttons */
.chw-grade-nums[b-k5dcsbayx3] { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.chw-grade-num[b-k5dcsbayx3] {
    aspect-ratio: 1;
    border-radius: 10px;
    border: none;
    background: #fff;
    color: var(--ec-text);
    box-shadow: inset 0 0 0 1px var(--ec-border);
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
}
.chw-grade-num--on[b-k5dcsbayx3] {
    background: var(--c, var(--ec-blue));
    color: #fff;
    box-shadow: none;
}

.chw-detail-foot[b-k5dcsbayx3] {
    padding: 12px 22px;
    border-top: 1px solid var(--ec-border-soft);
    display: flex;
    justify-content: flex-end;
    gap: 7px;
}
.chw-btn[b-k5dcsbayx3] {
    padding: 9px 14px;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    border: 1px solid var(--ec-border);
    background: #fff;
    color: var(--ec-sub);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.chw-btn--cancel:hover[b-k5dcsbayx3] { color: var(--ec-text); border-color: var(--ec-text); }
.chw-btn--primary[b-k5dcsbayx3] {
    background: var(--ec-green, #16a34a);
    color: #fff;
    border-color: var(--ec-green, #16a34a);
    font-weight: 800;
}
.chw-btn--primary:hover:not(:disabled)[b-k5dcsbayx3] { filter: brightness(.96); }
.chw-btn--primary:disabled[b-k5dcsbayx3] { opacity: .55; cursor: not-allowed; }
.chw-btn--danger[b-k5dcsbayx3] {
    background: var(--ec-red, #dc2626);
    color: #fff;
    border-color: var(--ec-red, #dc2626);
}

/* ── Delete confirm modal ────────────────────────────────────────── */
.chw-confirm[b-k5dcsbayx3] {
    background: #fff;
    border-radius: 14px;
    max-width: 420px;
    width: 100%;
    padding: 22px 24px 18px;
    text-align: center;
    box-shadow: 0 24px 60px rgba(13, 23, 51, .4);
}
.chw-confirm-icon[b-k5dcsbayx3] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ec-red, #dc2626) 14%, transparent);
    color: var(--ec-red, #dc2626);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 12px;
}
.chw-confirm-title[b-k5dcsbayx3] {
    font-size: 15px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.chw-confirm-sub[b-k5dcsbayx3] {
    font-size: 12.5px;
    color: var(--ec-muted);
    margin: 6px auto 0;
    max-width: 320px;
    line-height: 1.5;
}
.chw-confirm-foot[b-k5dcsbayx3] {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 16px;
}

@media (max-width: 720px) {
    .chw-modal-kpis[b-k5dcsbayx3] { grid-template-columns: repeat(2, 1fr); }
    .chw-row[b-k5dcsbayx3] { grid-template-columns: 1fr; }
    .chw-row-due[b-k5dcsbayx3] { align-items: flex-start; text-align: left; }
}

/* ─────────────────────────────────────────────────────────────────────
   Assign-homework modal — centered, ~620px wide, scrolls when tall.
   Matches the prototype's Assign-homework dialog (proto 39260-39400).
   ───────────────────────────────────────────────────────────────────── */
.chw-asg-backdrop[b-k5dcsbayx3] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .6);
    z-index: 1700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.chw-asg-modal[b-k5dcsbayx3] {
    background: #fff;
    border-radius: 16px;
    max-width: 620px;
    width: 100%;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 60px rgba(13, 23, 51, .4);
    overflow: hidden;
}
.chw-asg-head[b-k5dcsbayx3] {
    padding: 18px 24px;
    border-bottom: 1px solid var(--ec-border-soft);
    display: flex;
    align-items: center;
    gap: 11px;
}
.chw-asg-head-icon[b-k5dcsbayx3] {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--ec-blue);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.chw-asg-head-icon .bi[b-k5dcsbayx3] { font-size: 18px; }
.chw-asg-head-text[b-k5dcsbayx3] { flex: 1; min-width: 0; }
.chw-asg-eyebrow[b-k5dcsbayx3] {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ec-blue);
    margin: 0;
}
.chw-asg-head-text h2[b-k5dcsbayx3] {
    font-size: 18px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 3px 0 0;
}
.chw-asg-close[b-k5dcsbayx3] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 1px solid var(--ec-border);
    background: #fff;
    font-size: 18px;
    color: var(--ec-muted);
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
    flex-shrink: 0;
}

.chw-asg-body[b-k5dcsbayx3] {
    flex: 1;
    overflow-y: auto;
    padding: 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 13px;
}
.chw-asg-row[b-k5dcsbayx3] { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.chw-asg-trirow[b-k5dcsbayx3] { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.chw-asg-field[b-k5dcsbayx3] { display: flex; flex-direction: column; gap: 5px; }
.chw-asg-label[b-k5dcsbayx3] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}
.chw-asg-label-opt[b-k5dcsbayx3] { text-transform: none; letter-spacing: 0; font-weight: 600; }

.chw-asg-select[b-k5dcsbayx3],
.chw-asg-input[b-k5dcsbayx3],
.chw-asg-textarea[b-k5dcsbayx3] {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    background: #fff;
    color: var(--ec-text);
    box-sizing: border-box;
}
.chw-asg-textarea[b-k5dcsbayx3] { min-height: 80px; resize: vertical; }
.chw-asg-input:focus[b-k5dcsbayx3],
.chw-asg-textarea:focus[b-k5dcsbayx3],
.chw-asg-select:focus[b-k5dcsbayx3] {
    border-color: var(--ec-blue);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ec-blue) 12%, transparent);
}

.chw-asg-locked-pill[b-k5dcsbayx3] {
    padding: 9px 12px;
    border: 1px dashed var(--ec-border);
    border-radius: 9px;
    background: var(--ec-bg);
    font-size: 13px;
    font-weight: 700;
    color: var(--ec-text);
}

/* Multi-select class chips (assign to one or more classes at once) */
.chw-asg-classchips[b-k5dcsbayx3] { display: flex; gap: 6px; flex-wrap: wrap; }
.chw-asg-classchip[b-k5dcsbayx3] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    color: var(--ec-sub);
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.chw-asg-classchip:hover[b-k5dcsbayx3] { border-color: var(--ec-blue); }
.chw-asg-classchip--on[b-k5dcsbayx3] {
    border-color: var(--ec-blue);
    background: color-mix(in srgb, var(--ec-blue) 10%, #fff);
    color: var(--ec-blue);
}
.chw-asg-classhint[b-k5dcsbayx3] {
    margin: 6px 0 0;
    font-size: 11px;
    color: var(--ec-muted);
}

/* KIND chips */
.chw-asg-chips[b-k5dcsbayx3] { display: flex; gap: 6px; flex-wrap: wrap; }
.chw-asg-kind[b-k5dcsbayx3] {
    background: #fff;
    color: var(--ec-sub);
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}
.chw-asg-kind--on[b-k5dcsbayx3] {
    background: var(--ec-text);
    color: #fff;
    border-color: var(--ec-text);
}

/* Segmented controls (Priority + Weight) */
.chw-asg-seg[b-k5dcsbayx3] {
    display: flex;
    gap: 4px;
    background: var(--ec-bg);
    padding: 4px;
    border-radius: 9px;
}
.chw-asg-seg-btn[b-k5dcsbayx3] {
    flex: 1;
    padding: 7px 12px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--ec-muted);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
}
.chw-asg-seg-btn--on[b-k5dcsbayx3] {
    background: #fff;
    color: var(--ec-text);
    box-shadow: 0 1px 3px rgba(13, 23, 51, .08);
}
/* Priority variant — active button takes the priority's color. */
.chw-asg-seg--priority .chw-asg-seg-btn--low.chw-asg-seg-btn--on[b-k5dcsbayx3]  { background: var(--ec-muted); color: #fff; box-shadow: none; }
.chw-asg-seg--priority .chw-asg-seg-btn--med.chw-asg-seg-btn--on[b-k5dcsbayx3]  { background: var(--ec-amber, #f59e0b); color: #fff; box-shadow: none; }
.chw-asg-seg--priority .chw-asg-seg-btn--high.chw-asg-seg-btn--on[b-k5dcsbayx3] { background: var(--ec-red, #dc2626); color: #fff; box-shadow: none; }

/* WILL BE GRADED two-button picker */
.chw-asg-graded[b-k5dcsbayx3] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.chw-asg-graded-btn[b-k5dcsbayx3] {
    padding: 9px 11px;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    background: #fff;
    color: var(--ec-sub);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    text-align: center;
    line-height: 1.3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.chw-asg-graded-btn .bi[b-k5dcsbayx3] { font-size: 13px; }
.chw-asg-graded-btn--yes.chw-asg-graded-btn--on[b-k5dcsbayx3] {
    background: color-mix(in srgb, var(--ec-green, #16a34a) 12%, #fff);
    border-color: var(--ec-green, #16a34a);
    color: var(--ec-green, #16a34a);
}
.chw-asg-graded-btn--no.chw-asg-graded-btn--on[b-k5dcsbayx3] {
    background: color-mix(in srgb, var(--ec-text) 8%, #fff);
    border-color: var(--ec-text);
    color: var(--ec-text);
}

/* ATTACH WORKSHEET drop zone */
.chw-asg-drop[b-k5dcsbayx3] {
    padding: 18px 16px;
    background: var(--ec-bg);
    border: 1.5px dashed var(--ec-border);
    border-radius: 11px;
    text-align: center;
    color: var(--ec-sub);
    cursor: pointer;
    transition: border-color .12s ease;
}
.chw-asg-drop:hover[b-k5dcsbayx3] { border-color: var(--ec-blue); color: var(--ec-blue); }
.chw-asg-drop .bi[b-k5dcsbayx3] { font-size: 18px; color: var(--ec-muted); display: block; margin-bottom: 4px; }
.chw-asg-drop p[b-k5dcsbayx3] { margin: 0; font-size: 12.5px; }
.chw-asg-drop-sub[b-k5dcsbayx3] { color: var(--ec-muted); font-size: 11px; margin-top: 3px !important; }

.chw-asg-error[b-k5dcsbayx3] {
    padding: 9px 11px;
    background: var(--ec-red-lt, color-mix(in srgb, var(--ec-red, #dc2626) 12%, #fff));
    color: var(--ec-red, #dc2626);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
}

.chw-asg-foot[b-k5dcsbayx3] {
    padding: 12px 24px;
    border-top: 1px solid var(--ec-border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    background: #fff;
}
.chw-asg-foot-help[b-k5dcsbayx3] {
    font-size: 11.5px;
    color: var(--ec-muted);
    margin: 0;
    flex: 1;
    min-width: 0;
}
.chw-asg-foot-actions[b-k5dcsbayx3] { display: inline-flex; gap: 7px; }
.chw-asg-cancel[b-k5dcsbayx3] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    padding: 9px 14px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
}
.chw-asg-save[b-k5dcsbayx3] {
    background: var(--ec-blue);
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--ec-blue) 30%, transparent);
}
.chw-asg-save:disabled[b-k5dcsbayx3] {
    background: var(--ec-border-soft);
    color: var(--ec-muted);
    box-shadow: none;
    cursor: not-allowed;
}

@media (max-width: 560px) {
    .chw-asg-row[b-k5dcsbayx3],
    .chw-asg-trirow[b-k5dcsbayx3] { grid-template-columns: 1fr; }
}
/* /Components/Common/KgCareCellAbsent.razor.rz.scp.css */
/* Absent tri-state pill. min-height 52 + box-sizing border-box keeps it level
   with the row's care cells (the prototype gives every cell the same floor). */

.kgabs[b-iatwdrroit] {
    width: 100%;
    min-height: 52px;
    box-sizing: border-box;
    border-radius: 7px;
    padding: 6px 10px;
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.kgabs--none[b-iatwdrroit] { background: #fff; color: var(--ec-muted); border: 1px solid var(--ec-border); }
.kgabs--a[b-iatwdrroit] { background: var(--ec-red); color: #fff; border: 1px solid var(--ec-red); }
.kgabs--e[b-iatwdrroit] { background: var(--ec-amber); color: #fff; border: 1px solid var(--ec-amber); }
/* /Components/Common/KgCareCellCheckIn.razor.rz.scp.css */
/* Check-in cell — green. Equal-height contract: every root variant is
   min-height 52 + box-sizing border-box; the Now button is white-space:nowrap. */

.kgci-empty[b-rcvponv21r],
.kgci-pill[b-rcvponv21r] {
    display: flex;
    gap: 5px;
    align-items: stretch;
    min-width: 0;
}

/* Empty: solid-green "Check in" + ✎ box */
.kgci-now[b-rcvponv21r] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    min-height: 52px;
    box-sizing: border-box;
    padding: 8px 10px;
    border-radius: 9px;
    border: 1px solid var(--ec-green);
    background: var(--ec-green);
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}
.kgci-now:disabled[b-rcvponv21r] { opacity: .45; cursor: not-allowed; }

.kgci-editbox[b-rcvponv21r] {
    width: 32px;
    flex-shrink: 0;
    min-height: 52px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    border: 1px solid var(--ec-border);
    background: #fff;
    color: var(--ec-green);
    font-size: 12px;
    cursor: pointer;
}
.kgci-editbox:disabled[b-rcvponv21r] { opacity: .55; cursor: not-allowed; }

/* Filled: green pill (time + by) with inline ✎ */
.kgci-pill[b-rcvponv21r] {
    min-height: 52px;
    box-sizing: border-box;
    border-radius: 9px;
    padding: 6px 10px;
    background: color-mix(in srgb, var(--ec-green) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--ec-green) 40%, transparent);
    align-items: center;
    gap: 7px;
}
.kgci-pillbody[b-rcvponv21r] { flex: 1; min-width: 0; cursor: pointer; }
.kgci-pillbody--off[b-rcvponv21r] { cursor: default; }
.kgci-time[b-rcvponv21r] {
    margin: 0;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--ec-green);
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", monospace;
}
.kgci-by[b-rcvponv21r] {
    margin: 2px 0 0;
    font-size: 10.5px;
    color: var(--ec-sub);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kgci-edit[b-rcvponv21r] {
    width: 24px;
    height: 24px;
    padding: 0;
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: var(--ec-green);
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.kgci-edit:disabled[b-rcvponv21r] { opacity: .55; cursor: not-allowed; }
/* /Components/Common/KgCareCellCheckOut.razor.rz.scp.css */
/* Check-out cell — purple. Equal-height contract: every root variant is
   min-height 52 + box-sizing border-box; the Now button is white-space:nowrap. */

.kgco-empty[b-rc9n9ox5vc],
.kgco-pill[b-rc9n9ox5vc] {
    display: flex;
    gap: 5px;
    align-items: stretch;
    min-width: 0;
}

.kgco-now[b-rc9n9ox5vc] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    min-height: 52px;
    box-sizing: border-box;
    padding: 8px 10px;
    border-radius: 9px;
    border: 1px solid var(--ec-purple);
    background: var(--ec-purple);
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}
.kgco-now:disabled[b-rc9n9ox5vc] { opacity: .45; cursor: not-allowed; }

.kgco-editbox[b-rc9n9ox5vc] {
    width: 32px;
    flex-shrink: 0;
    min-height: 52px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    border: 1px solid var(--ec-border);
    background: #fff;
    color: var(--ec-purple);
    font-size: 12px;
    cursor: pointer;
}
.kgco-editbox:disabled[b-rc9n9ox5vc] { opacity: .55; cursor: not-allowed; }

.kgco-pill[b-rc9n9ox5vc] {
    min-height: 52px;
    box-sizing: border-box;
    border-radius: 9px;
    padding: 6px 10px;
    background: color-mix(in srgb, var(--ec-purple) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--ec-purple) 45%, transparent);
    align-items: center;
    gap: 7px;
}
.kgco-pillbody[b-rc9n9ox5vc] { flex: 1; min-width: 0; cursor: pointer; }
.kgco-pillbody--off[b-rc9n9ox5vc] { cursor: default; }
.kgco-time[b-rc9n9ox5vc] {
    margin: 0;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--ec-purple);
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", monospace;
}
.kgco-by[b-rc9n9ox5vc] {
    margin: 2px 0 0;
    font-size: 10.5px;
    color: var(--ec-sub);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kgco-edit[b-rc9n9ox5vc] {
    width: 24px;
    height: 24px;
    padding: 0;
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: var(--ec-purple);
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.kgco-edit:disabled[b-rc9n9ox5vc] { opacity: .55; cursor: not-allowed; }
/* /Components/Common/KgCareCellMood.razor.rz.scp.css */
/* Mood & notes cell — pink. Solid border when filled, dashed when empty.
   min-height 52 + box-sizing border-box to match the row's other cells. */

.kgmood[b-ueg63az8mn] {
    width: 100%;
    min-height: 52px;
    box-sizing: border-box;
    border-radius: 9px;
    padding: 6px 9px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    overflow: hidden;
}
.kgmood:disabled[b-ueg63az8mn] { cursor: not-allowed; }
.kgmood--empty[b-ueg63az8mn] { background: #fff; border: 1px dashed var(--ec-border); }
.kgmood--on[b-ueg63az8mn] { background: color-mix(in srgb, var(--ec-pink) 7%, #fff); border: 1px solid color-mix(in srgb, var(--ec-pink) 33%, transparent); }

.kgmood-icon[b-ueg63az8mn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid transparent;
    flex-shrink: 0;
}
.kgmood-icon--empty[b-ueg63az8mn] { background: var(--ec-bg); border-color: var(--ec-border); color: var(--ec-muted); font-size: 11px; }

.kgmood-text[b-ueg63az8mn] { flex: 1; min-width: 0; overflow: hidden; }
.kgmood-label[b-ueg63az8mn] {
    margin: 0;
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ec-muted);
}
.kgmood-label--empty[b-ueg63az8mn] { color: var(--ec-muted); }
.kgmood-notes[b-ueg63az8mn] { margin: 1px 0 0; font-size: 10px; color: var(--ec-muted); line-height: 1.1; }
/* /Components/Common/KgCareCellNap.razor.rz.scp.css */
/* Nap cell — blue. Four variants, all min-height 52 + box-sizing border-box.
   Uses a FIXED #3b5fc0, NOT the --ec-blue token: --ec-blue is remapped app-wide to
   the institution brand accent (MainLayout.BrandStyle), which is often green-ish and
   would make nap look like the green check-in cell. Nap is a fixed semantic segment
   colour (like check-in green / mood pink / check-out purple), so it must not follow
   the brand accent. Do NOT swap these hexes back to the --ec-blue token. */

.kgnap-empty[b-5747uhxwm6],
.kgnap-pill[b-5747uhxwm6] {
    display: flex;
    gap: 5px;
    align-items: stretch;
    min-width: 0;
}

/* Start / Stop "Now" buttons — solid blue */
.kgnap-now[b-5747uhxwm6] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    min-height: 52px;
    box-sizing: border-box;
    padding: 8px 10px;
    border-radius: 9px;
    border: 1px solid #3b5fc0;
    background: #3b5fc0;
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}
.kgnap-now:disabled[b-5747uhxwm6] { opacity: .45; cursor: not-allowed; }

/* Stop variant stacks "Stop nap" over "since HH:mm" */
.kgnap-now--stop[b-5747uhxwm6] {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1px;
    font-size: 11.5px;
}
.kgnap-now-top[b-5747uhxwm6] { display: inline-flex; align-items: center; gap: 4px; }
.kgnap-now-sub[b-5747uhxwm6] { font-size: 10px; font-weight: 600; opacity: .85; }

.kgnap-editbox[b-5747uhxwm6] {
    width: 32px;
    flex-shrink: 0;
    min-height: 52px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    border: 1px solid var(--ec-border);
    background: #fff;
    color: #3b5fc0;
    font-size: 12px;
    cursor: pointer;
}
.kgnap-editbox:disabled[b-5747uhxwm6] { opacity: .55; cursor: not-allowed; }

/* Done: blue-tinted pill (minutes + quality) */
.kgnap-pill[b-5747uhxwm6] {
    min-height: 52px;
    box-sizing: border-box;
    border-radius: 9px;
    padding: 6px 10px;
    background: color-mix(in srgb, #3b5fc0 7%, #fff);
    border: 1px solid color-mix(in srgb, #3b5fc0 28%, transparent);
    align-items: center;
    gap: 7px;
}
.kgnap-pillbody[b-5747uhxwm6] { flex: 1; min-width: 0; cursor: pointer; }
.kgnap-pillbody--off[b-5747uhxwm6] { cursor: default; }
.kgnap-min[b-5747uhxwm6] { margin: 0; font-size: 13px; font-weight: 800; line-height: 1.1; color: #3b5fc0; }
.kgnap-q[b-5747uhxwm6] { margin: 2px 0 0; font-size: 10.5px; color: var(--ec-sub); }
.kgnap-edit[b-5747uhxwm6] {
    width: 24px;
    height: 24px;
    padding: 0;
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: #3b5fc0;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.kgnap-edit:disabled[b-5747uhxwm6] { opacity: .55; cursor: not-allowed; }

/* Skipped: gray dashed pill */
.kgnap-skipped[b-5747uhxwm6] {
    width: 100%;
    min-height: 52px;
    box-sizing: border-box;
    border-radius: 9px;
    padding: 6px 10px;
    text-align: left;
    background: var(--ec-bg);
    border: 1px dashed var(--ec-border);
    cursor: pointer;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.kgnap-skipped:disabled[b-5747uhxwm6] { cursor: not-allowed; }
.kgnap-skipped-title[b-5747uhxwm6] { margin: 0; font-size: 12.5px; font-weight: 800; line-height: 1.1; color: var(--ec-muted); }
.kgnap-skipped-sub[b-5747uhxwm6] { margin: 2px 0 0; font-size: 10.5px; color: var(--ec-sub); }
/* /Components/Common/KgDailyLogRow.razor.rz.scp.css */
/* One KG daily-log row. The grid template + padding + gap MUST match the
   column-header row in ClassCareLog.razor.css (.ccl-grid-head) so columns align.
   align-items:stretch + min-height 72 makes every cell render the same height. */

.kgr-row[b-p11nvl2kj1] {
    display: grid;
    /* Last (Absent) track is a FIXED width, not auto: auto sizes to content, and
       the pill's text differs per state ("Absent?" / "ABSENT" / "EXCUSED"), so an
       auto track made each row a different width and the fr columns no longer
       lined up between rows. A fixed track keeps every row's columns aligned. */
    grid-template-columns: minmax(160px, 1.3fr) 0.9fr 1.1fr 1.3fr 0.9fr 96px;
    gap: 10px;
    padding: 10px 16px;
    align-items: stretch;
    min-height: 72px;
}
.kgr-row--bordered[b-p11nvl2kj1] { border-top: 1px solid var(--ec-border-soft); }
.kgr-row--absent[b-p11nvl2kj1] { opacity: .55; }

.kgr-student[b-p11nvl2kj1] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    align-self: center;
}
.kgr-student-text[b-p11nvl2kj1] { min-width: 0; }
.kgr-student-name[b-p11nvl2kj1] {
    margin: 0;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ec-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kgr-student-allergy[b-p11nvl2kj1] { margin: 1px 0 0; font-size: 10px; color: var(--ec-amber); font-weight: 700; }

@media (max-width: 860px) {
    .kgr-row[b-p11nvl2kj1] { grid-template-columns: minmax(120px, 1.3fr) repeat(4, 1fr) 96px; }
}
/* /Components/Common/LegalPageShell.razor.rz.scp.css */
/* ── Root / mesh background (mirrors the login page) ── */
.lp-root[b-7ousn8zgc3] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #f9f9ff;
    background-image:
        radial-gradient(at 0% 0%,    rgba(46,93,171,0.05) 0px, transparent 50%),
        radial-gradient(at 100% 0%,  rgba(251,188,5,0.05) 0px, transparent 50%),
        radial-gradient(at 100% 100%,rgba(0,110,45,0.05)  0px, transparent 50%),
        radial-gradient(at 0% 100%,  rgba(46,93,171,0.05) 0px, transparent 50%);
    font-family: 'Manrope', 'Plus Jakarta Sans', sans-serif;
}

/* ── Top bar ── */
.ld-topbar[b-7ousn8zgc3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    box-sizing: border-box;
}
.ld-brand[b-7ousn8zgc3] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
}
.ld-brand-icon[b-7ousn8zgc3] { font-size: 1.75rem; color: var(--ec-primary); }
.ld-brand-name[b-7ousn8zgc3] {
    font-family: 'Plus Jakarta Sans', 'Helvetica Neue', sans-serif;
    font-size: 1.25rem; font-weight: 800;
    color: var(--ec-on-surface); letter-spacing: -0.02em;
}
.ld-back[b-7ousn8zgc3] {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.8rem; font-weight: 700;
    color: var(--ec-primary); text-decoration: none;
    transition: color 0.15s;
}
.ld-back:hover[b-7ousn8zgc3] { color: #1e519f; text-decoration: underline; text-underline-offset: 3px; }

/* ── Main article column ── */
.ld-main[b-7ousn8zgc3] {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 1rem 1rem 3rem;
}
.ld-doc[b-7ousn8zgc3] {
    width: 100%;
    max-width: 760px;
    background: white;
    border-radius: 0.875rem;
    box-shadow: 0 20px 40px rgba(30,50,86,0.06);
    border: 1px solid rgba(159,178,221,0.1);
    padding: 2.5rem 2.75rem 3rem;
    box-sizing: border-box;
}
.ld-title[b-7ousn8zgc3] {
    font-family: 'Plus Jakarta Sans', 'Helvetica Neue', sans-serif;
    font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em;
    color: var(--ec-on-surface); margin: 0 0 0.5rem;
}
.ld-subtitle[b-7ousn8zgc3] {
    font-size: 0.95rem; line-height: 1.6;
    color: var(--ec-on-surface-variant); margin: 0 0 1rem;
}
.ld-updated[b-7ousn8zgc3] {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.75rem; font-weight: 600;
    color: var(--ec-on-surface-variant);
    background: rgba(46,93,171,0.06);
    border-radius: 9999px; padding: 0.3rem 0.75rem;
    margin: 0 0 1.75rem;
}

/* ── Document typography (page-authored ChildContent → reach via ::deep) ── */
.ld-body[b-7ousn8zgc3]  h2 {
    font-family: 'Plus Jakarta Sans', 'Helvetica Neue', sans-serif;
    font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em;
    color: var(--ec-on-surface);
    margin: 2rem 0 0.6rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(159,178,221,0.18);
}
.ld-body[b-7ousn8zgc3]  h2:first-child { margin-top: 0.5rem; padding-top: 0; border-top: none; }
.ld-body[b-7ousn8zgc3]  h3 {
    font-size: 0.9rem; font-weight: 700;
    color: var(--ec-on-surface);
    margin: 1.1rem 0 0.4rem;
}
.ld-body[b-7ousn8zgc3]  p {
    font-size: 0.875rem; line-height: 1.7;
    color: var(--ec-on-surface); opacity: 0.92;
    margin: 0 0 0.85rem;
}
.ld-body[b-7ousn8zgc3]  ul,
.ld-body[b-7ousn8zgc3]  ol {
    margin: 0 0 0.95rem; padding-left: 1.25rem;
    display: flex; flex-direction: column; gap: 0.4rem;
}
.ld-body[b-7ousn8zgc3]  li {
    font-size: 0.875rem; line-height: 1.65;
    color: var(--ec-on-surface); opacity: 0.92;
}
.ld-body[b-7ousn8zgc3]  a {
    color: var(--ec-primary); font-weight: 600;
    text-decoration: none;
}
.ld-body[b-7ousn8zgc3]  a:hover { text-decoration: underline; text-underline-offset: 2px; }
.ld-body[b-7ousn8zgc3]  strong { font-weight: 700; }

/* Cookie category table */
.ld-body[b-7ousn8zgc3]  table {
    width: 100%; border-collapse: collapse;
    margin: 0.25rem 0 1.1rem; font-size: 0.82rem;
}
.ld-body[b-7ousn8zgc3]  th,
.ld-body[b-7ousn8zgc3]  td {
    text-align: left; vertical-align: top;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid rgba(159,178,221,0.18);
    line-height: 1.5;
}
.ld-body[b-7ousn8zgc3]  th {
    font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--ec-on-surface-variant);
    background: rgba(46,93,171,0.04);
}

/* Contact info cards */
.ld-body[b-7ousn8zgc3]  .ld-contact-grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem; margin: 0.5rem 0 1.25rem; padding: 0;
}
.ld-body[b-7ousn8zgc3]  .ld-contact-card {
    display: flex; align-items: flex-start; gap: 0.75rem;
    background: #f9f9ff;
    border: 1px solid rgba(159,178,221,0.2);
    border-radius: 0.75rem; padding: 0.95rem 1rem;
}
.ld-body[b-7ousn8zgc3]  .ld-contact-card i {
    font-size: 1.05rem; color: var(--ec-primary);
    margin-top: 0.1rem;
}
.ld-body[b-7ousn8zgc3]  .ld-contact-card .ld-cc-label {
    display: block; font-size: 0.68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--ec-on-surface-variant); margin-bottom: 0.15rem;
}
.ld-body[b-7ousn8zgc3]  .ld-contact-card .ld-cc-value {
    font-size: 0.85rem; font-weight: 600; color: var(--ec-on-surface);
}

/* ── Footer (shared with login) ── */
.lp-footer[b-7ousn8zgc3] { border-top: 1px solid rgba(159,178,221,0.1); background: white; flex-shrink: 0; }
.lp-footer-inner[b-7ousn8zgc3] {
    max-width: 1200px; margin: 0 auto;
    padding: 0.75rem 1.5rem;
    display: flex; align-items: center;
    justify-content: space-between; flex-wrap: wrap; gap: 0.75rem;
}
.lp-footer-left[b-7ousn8zgc3] { display: flex; align-items: center; gap: 1rem; }
.lp-footer-brand[b-7ousn8zgc3] { font-size: 0.875rem; font-weight: 700; color: var(--ec-primary); }
.lp-footer-divider[b-7ousn8zgc3] { width: 1px; height: 0.75rem; background: rgba(159,178,221,0.3); }
.lp-footer-copy[b-7ousn8zgc3] { font-size: 0.68rem; color: rgba(76,95,133,0.7); }
.lp-footer-nav[b-7ousn8zgc3] { display: flex; align-items: center; gap: 1.25rem; }
.lp-footer-nav a[b-7ousn8zgc3] {
    font-size: 0.68rem; color: rgba(76,95,133,0.7);
    text-decoration: none; transition: color 0.15s;
}
.lp-footer-nav a:hover[b-7ousn8zgc3] { color: var(--ec-primary); }
.lp-footer-nav a.ld-nav-active[b-7ousn8zgc3] { color: var(--ec-primary); font-weight: 700; }

@media (max-width: 600px) {
    .ld-doc[b-7ousn8zgc3] { padding: 1.75rem 1.4rem 2.25rem; }
    .ld-title[b-7ousn8zgc3] { font-size: 1.4rem; }
    .ld-body[b-7ousn8zgc3]  .ld-contact-grid { grid-template-columns: 1fr; }
    .lp-footer-inner[b-7ousn8zgc3] { flex-direction: column; align-items: flex-start; }
    .lp-footer-divider[b-7ousn8zgc3] { display: none; }
}
/* /Components/Common/ProfilePhotoCropper.razor.rz.scp.css */
.ppc-backdrop[b-fjyyfq87jn] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    /* The cropper is always opened from inside another modal/drawer/sheet, so it
       must stack above every one of them (the highest opener — the students
       view drawer — is 3000). Stay below the 9000+ toast/notification layer. */
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.ppc-dialog[b-fjyyfq87jn] {
    background: #fff;
    border-radius: 16px;
    width: min(560px, 100%);
    box-shadow: 0 24px 64px -16px rgba(15, 23, 42, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ppc-head[b-fjyyfq87jn] {
    padding: 16px 20px;
    border-bottom: 1px solid var(--ec-border-soft);
    display: flex;
    align-items: center;
    gap: 12px;
}
.ppc-icon[b-fjyyfq87jn] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--ec-blue) 14%, transparent);
    color: var(--ec-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.ppc-title[b-fjyyfq87jn] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.ppc-sub[b-fjyyfq87jn] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 2px 0 0;
}
.ppc-canvas[b-fjyyfq87jn] {
    background: #0f172a;
    padding: 16px;
    /* Tall enough for a comfortable crop window but capped so the dialog
       still fits a 720p viewport without scrolling. */
    max-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ppc-canvas img[b-fjyyfq87jn] {
    max-width: 100%;
    max-height: 56vh;
    display: block;
}
.ppc-foot[b-fjyyfq87jn] {
    padding: 12px 20px;
    border-top: 1px solid var(--ec-border-soft);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.ppc-btn[b-fjyyfq87jn] {
    border-radius: 9px;
    padding: 10px 18px;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: filter 0.15s, background 0.15s;
}
.ppc-btn:disabled[b-fjyyfq87jn] { opacity: 0.55; cursor: not-allowed; }
.ppc-btn-cancel[b-fjyyfq87jn] {
    background: #fff;
    color: var(--ec-sub);
    border-color: var(--ec-border);
}
.ppc-btn-cancel:hover[b-fjyyfq87jn] { background: var(--ec-bg); color: var(--ec-text); }
.ppc-btn-save[b-fjyyfq87jn] {
    background: var(--ec-purple);
    color: #fff;
}
.ppc-btn-save:hover:not(:disabled)[b-fjyyfq87jn] { filter: brightness(0.93); }
/* /Components/Layout/AppSplash.razor.rz.scp.css */
/* ── Full-screen post-login splash ─────────────────────────────────────────
   Covers the entire shell until the role's data + branding are ready. Platform
   blue (institution branding isn't known yet — that's what we're waiting for).
   Brand styling mirrors the login page for a seamless login → splash → app feel. */

.ec-splash[b-hua2q4famp] {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f9f9ff;
    background-image:
        radial-gradient(at 0% 0%,    rgba(46,93,171,0.06) 0px, transparent 50%),
        radial-gradient(at 100% 0%,  rgba(251,188,5,0.05) 0px, transparent 50%),
        radial-gradient(at 100% 100%,rgba(0,110,45,0.05)  0px, transparent 50%),
        radial-gradient(at 0% 100%,  rgba(46,93,171,0.06) 0px, transparent 50%);
    font-family: 'Manrope', 'Plus Jakarta Sans', sans-serif;
    opacity: 1;
    transition: opacity 0.28s ease;
    will-change: opacity;
}

/* Reveal: fade the overlay out, then the component unmounts. */
.ec-splash.is-leaving[b-hua2q4famp] {
    opacity: 0;
    pointer-events: none;
}

.ec-splash-inner[b-hua2q4famp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    animation: ec-splash-enter-b-hua2q4famp 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── Brand mark ── */
.ec-splash-mark[b-hua2q4famp] {
    width: 76px;
    height: 76px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--ec-primary, #2e5dab) 0%, var(--ec-primary-dk, #1e519f) 100%);
    box-shadow: 0 16px 36px -10px rgba(46,93,171,0.5), inset 0 1px 0 rgba(255,255,255,0.25);
    animation: ec-splash-float-b-hua2q4famp 3s ease-in-out infinite;
}

.ec-splash-mark svg[b-hua2q4famp] {
    width: 42px;
    height: 42px;
}

.ec-splash-brand[b-hua2q4famp] {
    font-family: 'Plus Jakarta Sans', 'Helvetica Neue', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ec-on-surface, #1e2433);
}

/* ── Spinner ── */
.ec-splash-spinner[b-hua2q4famp] {
    width: 30px;
    height: 30px;
    border: 3px solid rgba(46,93,171,0.18);
    border-top-color: var(--ec-primary, #2e5dab);
    border-radius: 50%;
    animation: ec-splash-spin-b-hua2q4famp 0.7s linear infinite;
    margin-top: 0.25rem;
}

.ec-splash-status[b-hua2q4famp] {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ec-on-surface-variant, #4c5f85);
    opacity: 0.85;
}

/* ── Error state ── */
.ec-splash-error[b-hua2q4famp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    max-width: 320px;
    text-align: center;
    margin-top: 0.25rem;
}

.ec-splash-error > .bi[b-hua2q4famp] {
    font-size: 1.6rem;
    color: var(--ec-tertiary, #b8860b);
    margin-bottom: 0.15rem;
}

.ec-splash-error-title[b-hua2q4famp] {
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    color: var(--ec-on-surface, #1e2433);
}

.ec-splash-error-body[b-hua2q4famp] {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--ec-on-surface-variant, #4c5f85);
}

.ec-splash-retry[b-hua2q4famp] {
    margin-top: 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.5rem;
    border: none;
    border-radius: 9999px;
    background: linear-gradient(135deg, var(--ec-primary, #2e5dab) 0%, var(--ec-primary-dk, #1e519f) 100%);
    color: #fff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 22px -6px rgba(46,93,171,0.45);
    transition: transform 0.15s, box-shadow 0.25s, opacity 0.15s;
}

.ec-splash-retry:hover:not(:disabled)[b-hua2q4famp] {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px -6px rgba(46,93,171,0.55);
}

.ec-splash-retry:active:not(:disabled)[b-hua2q4famp] { transform: scale(0.98); }
.ec-splash-retry:disabled[b-hua2q4famp] { opacity: 0.7; cursor: default; }

.ec-splash-retry-spin[b-hua2q4famp] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ec-splash-spin-b-hua2q4famp 0.7s linear infinite;
}

/* Hidden logo preloader — present in the DOM only to trigger the browser fetch. */
.ec-splash-preload[b-hua2q4famp] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

@keyframes ec-splash-spin-b-hua2q4famp {
    to { transform: rotate(360deg); }
}

@keyframes ec-splash-float-b-hua2q4famp {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

@keyframes ec-splash-enter-b-hua2q4famp {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Respect reduced-motion: no float / no enter slide / instant spinner is fine. */
@media (prefers-reduced-motion: reduce) {
    .ec-splash-mark[b-hua2q4famp] { animation: none; }
    .ec-splash-inner[b-hua2q4famp] { animation: none; }
    .ec-splash[b-hua2q4famp] { transition: none; }
}
/* /Components/Layout/ChildPicker.razor.rz.scp.css */
/* ============================================================
   ChildPicker — scoped styles
   The switcher pill uses the shared .ec-sb-switcher-pill class
   defined in FacilityPicker.razor.css. Only the dropdown markup
   diverges (child avatars vs facility avatars) so styles for that
   remain ec-child-* prefixed to avoid bleeding into FacilityPicker.
   ============================================================ */

.ec-child-wrap[b-0er0ilyvjq] { position: relative; }

.ec-child-backdrop[b-0er0ilyvjq] {
    position: fixed;
    inset: 0;
    z-index: 1001;
}

.ec-child-dropdown[b-0er0ilyvjq] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 1002;
    background: white;
    border-radius: 1.25rem;
    padding: 0.75rem;
    min-width: 240px;
    box-shadow: 0 16px 48px -8px rgba(30,50,86,0.18), 0 0 0 1px rgba(46,93,171,0.08);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ec-child-heading[b-0er0ilyvjq] {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ec-on-surface-variant, var(--ec-muted));
    opacity: 0.55;
    margin: 0 0.25rem 0.5rem;
}

.ec-child-empty[b-0er0ilyvjq] {
    font-size: 0.8rem;
    color: var(--ec-on-surface-variant, var(--ec-muted));
    text-align: center;
    padding: 1rem;
    opacity: 0.6;
    margin: 0;
}
.ec-child-loading[b-0er0ilyvjq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    padding: 0.75rem;
    font-size: 0.78rem;
    color: var(--ec-on-surface-variant, var(--ec-muted));
    opacity: 0.7;
}
.ec-child-spinner[b-0er0ilyvjq] {
    width: 14px; height: 14px;
    border: 2px solid rgba(46,93,171,0.15);
    border-top-color: var(--ec-primary, var(--ec-blue));
    border-radius: 50%;
    animation: ec-child-spin-b-0er0ilyvjq 0.7s linear infinite;
    flex-shrink: 0;
}
@keyframes ec-child-spin-b-0er0ilyvjq { to { transform: rotate(360deg); } }

.ec-child-no-item[b-0er0ilyvjq] {
    display: flex; flex-direction: column; align-items: center;
    gap: 0.4rem; padding: 0.75rem 0.5rem;
}
.ec-child-no-item-icon[b-0er0ilyvjq] {
    font-size: 1.75rem; color: var(--ec-amber); opacity: 0.7;
}

.ec-child-item[b-0er0ilyvjq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.625rem 0.75rem;
    background: none;
    border: none;
    border-radius: 0.875rem;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background 0.15s;
}
.ec-child-item:hover[b-0er0ilyvjq] { background: #f8f9ff; }
.ec-child-item-active[b-0er0ilyvjq] { background: rgba(46,93,171,0.06); }

.ec-child-avatar[b-0er0ilyvjq] {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0; overflow: hidden;
}

.ec-child-info[b-0er0ilyvjq] { flex: 1; min-width: 0; }
.ec-child-inst-name[b-0er0ilyvjq] {
    display: block; font-size: 0.825rem; font-weight: 700;
    color: var(--ec-text); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.ec-child-inst-type[b-0er0ilyvjq] {
    display: block; font-size: 0.65rem; font-weight: 600;
    color: var(--ec-muted); opacity: 0.65;
    text-transform: uppercase; letter-spacing: 0.06em;
}
.ec-child-check[b-0er0ilyvjq] {
    color: var(--ec-primary, var(--ec-blue));
    font-size: 0.9rem;
    flex-shrink: 0;
}
/* /Components/Layout/FacilityPicker.razor.rz.scp.css */
/* ============================================================
   FacilityPicker — scoped styles
   The switcher pill (.ec-sb-switcher-pill) matches the prototype's
   active-facility card. The dropdown below mirrors the prototype's
   institution-grouped list with a "Customer-wide setup" footer.
   ============================================================ */

/* -- Wrapper (positions the dropdown relative to pill + setup link) --
   display:flex column forces the children to stack so the wrap's height
   correctly includes the dashed setup link; otherwise the dropdown's
   `top: calc(100% + 4px)` lands on top of an inline setup link. */
.ec-picker-wrap[b-c0lw3r2edn] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Lift the entire wrap above ALL page content so the dropdown (absolute
       inside this wrap) doesn't get clamped by an ancestor stacking context.
       Without this, the TeacherDashboard hero card / KPI strips paint on top
       of the popover because they sit in a sibling stacking context that the
       sidebar's wrap can't escape via dropdown z-index alone. */
    z-index: 9000;
}

/* The .ec-sb-switcher-pill (and dot/body/name/sub/tag/chevron) live in
   global app.css so both FacilityPicker and ChildPicker can share them
   despite Blazor's scoped-CSS isolation. */

/* -- Backdrop -- */
.ec-picker-backdrop[b-c0lw3r2edn] {
    position: fixed;
    inset: 0;
    z-index: 9000;
}

/* -- Dropdown — anchored to the pill via .ec-picker-wrap (position:relative).
   `top: 100%` puts the top edge flush against the bottom of the pill with
   zero margin; `left:0 / right:0` keeps the dropdown the same width as the
   pill itself.
   z-index 9001 sits ABOVE page content (dashboard hero cards, KPI strips,
   sticky headers etc) so the popover is never partially occluded. The old
   1002 was too low — TeacherDashboard's hero card paints on top because
   it's inside a positioned ancestor that creates its own stacking context. -- */
.ec-picker-dropdown[b-c0lw3r2edn] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 9001;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    overflow: hidden;
    max-height: 420px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 32px rgba(13,23,51,0.18);
}

.ec-picker-scroll[b-c0lw3r2edn] {
    overflow-y: auto;
    flex: 1;
}

/* -- Loading / error / empty pieces (legacy classes still in markup) -- */
.ec-picker-heading[b-c0lw3r2edn] {
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ec-sub);
    margin: 0;
    padding: 8px 12px 6px;
    background: var(--ec-bg);
    border-bottom: 1px solid var(--ec-border-soft);
}

.ec-picker-empty[b-c0lw3r2edn] {
    font-size: 0.8rem;
    color: var(--ec-muted);
    text-align: center;
    padding: 1rem;
    opacity: 0.6;
    margin: 0;
}
.ec-picker-error[b-c0lw3r2edn] {
    color: var(--ec-red);
    opacity: 1;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    justify-content: center;
}
.ec-picker-loading[b-c0lw3r2edn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    padding: 0.75rem;
    font-size: 0.78rem;
    color: var(--ec-muted);
    opacity: 0.7;
}
.ec-picker-spinner[b-c0lw3r2edn] {
    width: 14px; height: 14px;
    border: 2px solid rgba(46,93,171,0.15);
    border-top-color: var(--ec-blue);
    border-radius: 50%;
    animation: ec-picker-spin-b-c0lw3r2edn 0.7s linear infinite;
    flex-shrink: 0;
}
@keyframes ec-picker-spin-b-c0lw3r2edn { to { transform: rotate(360deg); } }

.ec-picker-retry[b-c0lw3r2edn] {
    width: 100%; margin-top: 0.25rem;
    padding: 0.5rem; background: #f1f3ff; border: none;
    border-radius: 0.75rem; font-size: 0.75rem; font-weight: 700;
    color: var(--ec-blue); cursor: pointer; font-family: inherit;
    display: flex; align-items: center; justify-content: center; gap: 0.4rem;
    transition: background 0.15s;
}
.ec-picker-retry:hover[b-c0lw3r2edn] { background: #e9edff; }

.ec-picker-no-item[b-c0lw3r2edn] {
    display: flex; flex-direction: column; align-items: center;
    gap: 0.4rem; padding: 0.75rem 0.5rem;
}
.ec-picker-no-item-icon[b-c0lw3r2edn] {
    font-size: 1.75rem; color: var(--ec-amber); opacity: 0.7;
}
.ec-picker-add-link[b-c0lw3r2edn] {
    display: inline-flex; align-items: center; gap: 0.4rem;
    width: calc(100% - 1rem); margin: 0.25rem 0.5rem 0.5rem;
    padding: 0.55rem 1rem; background: var(--ec-blue);
    color: #fff; border-radius: 0.75rem; font-size: 0.8rem;
    font-weight: 700; text-decoration: none; font-family: inherit;
    justify-content: center; transition: background 0.15s;
}
.ec-picker-add-link:hover[b-c0lw3r2edn] { background: var(--ec-blue-dk); color: #fff; }

/* -- Institution group header (matches prototype 32245-32251) -- */
.ec-picker-inst-group + .ec-picker-inst-group[b-c0lw3r2edn] {
    margin-top: 0;
}

.ec-picker-inst-header[b-c0lw3r2edn] {
    background: var(--ec-bg);
    padding: 6px 12px;
    border-bottom: 1px solid var(--ec-border-soft);
    display: flex;
    align-items: center;
    gap: 6px;
}

.ec-picker-inst-header p[b-c0lw3r2edn] {
    font-size: 9.5px;
    font-weight: 800;
    color: var(--ec-sub);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ec-picker-inst-header i[b-c0lw3r2edn] {
    font-size: 12px;
    color: var(--ec-sub);
}

.ec-picker-inst-svg[b-c0lw3r2edn] {
    color: var(--ec-sub);
    flex-shrink: 0;
}

/* -- Facility row (matches prototype 32253-32265) -- */
.ec-picker-row[b-c0lw3r2edn] {
    width: 100%;
    background: #fff;
    border: none;
    border-bottom: 1px solid var(--ec-border-soft);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background 0.1s;
}

.ec-picker-row:hover[b-c0lw3r2edn] { background: var(--ec-blue-gh); }
.ec-picker-row-active[b-c0lw3r2edn] { background: var(--ec-blue-gh); }

.ec-picker-row-pin[b-c0lw3r2edn] {
    font-size: 14px;
    color: var(--ec-sub);
    flex-shrink: 0;
}

.ec-picker-row-body[b-c0lw3r2edn] {
    flex: 1;
    min-width: 0;
}

.ec-picker-row-name[b-c0lw3r2edn] {
    font-size: 12px;
    font-weight: 700;
    color: var(--ec-text);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ec-picker-row-sub[b-c0lw3r2edn] {
    font-size: 10px;
    color: var(--ec-muted);
    margin: 1px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ec-picker-check[b-c0lw3r2edn] {
    color: var(--ec-blue);
    font-size: 14px;
    font-weight: 800;
    flex-shrink: 0;
}

/* -- Customer-wide setup footer (matches prototype 32271-32282) -- */
.ec-picker-setup-footer[b-c0lw3r2edn] {
    background: #fef3c7;
    border-top: 1px solid #fde68a;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    text-decoration: none;
    transition: background 0.1s;
}

.ec-picker-setup-footer:hover[b-c0lw3r2edn] {
    background: #fde68a;
}

.ec-picker-setup-footer > i[b-c0lw3r2edn] {
    font-size: 14px;
    color: #92400e;
    flex-shrink: 0;
}

.ec-picker-setup-body[b-c0lw3r2edn] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ec-picker-setup-body strong[b-c0lw3r2edn] {
    font-size: 12px;
    font-weight: 800;
    color: #92400e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ec-picker-setup-body em[b-c0lw3r2edn] {
    font-size: 10px;
    color: var(--ec-sub);
    font-style: normal;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ec-picker-setup-arrow[b-c0lw3r2edn] {
    color: #92400e;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   "Set scope" picker — combined Facility + Year selector with deferred
   commit (Apply / Cancel). Replaces the old tap-to-switch facility list.
   Lives inside .ec-picker-dropdown — additive to the existing dropdown
   styles, scoped to the .ec-picker-dropdown--scope modifier so the legacy
   chrome stays untouched for any non-rebuilt call sites.
   ═══════════════════════════════════════════════════════════════════════ */

.ec-picker-dropdown--scope[b-c0lw3r2edn] {
    width: 320px;
    padding: 0;
}

/* Header — kicker + title + close X. Sits flush against the top of the
   dropdown so the section labels below have breathing room. */
.ec-picker-header[b-c0lw3r2edn] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 14px 8px;
}
.ec-picker-header-text[b-c0lw3r2edn] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ec-picker-kicker[b-c0lw3r2edn] {
    margin: 0;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--ec-primary);
    text-transform: uppercase;
}
.ec-picker-title[b-c0lw3r2edn] {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}
.ec-picker-close[b-c0lw3r2edn] {
    background: #f1f5f9;
    border: none;
    border-radius: 6px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #475569;
    font-size: 11px;
    transition: background 120ms ease;
}
.ec-picker-close:hover[b-c0lw3r2edn] { background: #e2e8f0; }

/* Section labels — smallcap above each group. */
.ec-picker-section-label[b-c0lw3r2edn] {
    margin: 8px 14px 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #64748b;
    text-transform: uppercase;
}
.ec-picker-section-label--year[b-c0lw3r2edn] { margin-top: 14px; }

/* Card — the unified facility/year row. Padding + border ramp ensures the
   archive amber + active green tints feel like state colour, not decoration. */
.ec-picker-card[b-c0lw3r2edn] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: calc(100% - 20px);
    margin: 4px 10px;
    padding: 10px 11px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    text-align: left;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}
.ec-picker-card:hover[b-c0lw3r2edn] { background: #f8fafc; }

/* Selected = institution-accent ring (was hardcoded school blue). */
.ec-picker-card--selected[b-c0lw3r2edn] {
    border-color: var(--ec-primary);
    background: color-mix(in srgb, var(--ec-primary) 8%, #fff);
}

/* Active-year card: pale green tint (matches 2025-2026 ACTIVE in the mockup). */
.ec-picker-card--active[b-c0lw3r2edn] {
    background: #f0fdf4;
    border-color: #bbf7d0;
}
.ec-picker-card--active.ec-picker-card--selected[b-c0lw3r2edn] {
    border-color: #16a34a;
    background: #dcfce7;
}

/* Archive-year card: amber tint + warm border. Communicates "historical,
   read-only" without needing a separate banner. */
.ec-picker-card--archive[b-c0lw3r2edn] {
    background: #fef3c7;
    border-color: #fcd34d;
}
.ec-picker-card--archive.ec-picker-card--selected[b-c0lw3r2edn] {
    border-color: #d97706;
    background: #fed7aa;
}

/* Planning-year card: pale blue, "configured but not live yet". */
.ec-picker-card--planning[b-c0lw3r2edn] {
    background: #eff6ff;
    border-color: #bfdbfe;
}
.ec-picker-card--planning.ec-picker-card--selected[b-c0lw3r2edn] {
    border-color: #3b82f6;
    background: #dbeafe;
}

/* Icon avatar at the left of the card. Facility uses Accent-colour tint;
   year uses status-coloured tint. */
.ec-picker-card-icon[b-c0lw3r2edn] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}
.ec-picker-card-icon--year[b-c0lw3r2edn] { background: rgba(255,255,255,0.9); }
.ec-picker-card-icon--active[b-c0lw3r2edn] { background: #dcfce7; color: #16a34a; }
.ec-picker-card-icon--archive[b-c0lw3r2edn] { background: #fed7aa; color: #d97706; }
.ec-picker-card-icon--planning[b-c0lw3r2edn] { background: #dbeafe; color: #3b82f6; }

.ec-picker-card-body[b-c0lw3r2edn] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.ec-picker-card-name-row[b-c0lw3r2edn] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.ec-picker-card-name[b-c0lw3r2edn] {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ec-picker-card-sub[b-c0lw3r2edn] {
    font-size: 11px;
    color: #64748b;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pills (LIVE / ACTIVE / ARCHIVE / PLANNING). */
.ec-picker-card-pill[b-c0lw3r2edn] {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    flex-shrink: 0;
}
.ec-picker-card-pill--live[b-c0lw3r2edn]   { background: #dcfce7; color: #166534; }
.ec-picker-card-pill--active[b-c0lw3r2edn] { background: #dcfce7; color: #166534; }
.ec-picker-card-pill--archive[b-c0lw3r2edn] { background: #fed7aa; color: #92400e; }
.ec-picker-card-pill--planning[b-c0lw3r2edn] { background: #dbeafe; color: #1d4ed8; }

/* Radio indicator on the right of each card. */
.ec-picker-radio[b-c0lw3r2edn] {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    flex-shrink: 0;
    position: relative;
    transition: border-color 120ms ease;
}
.ec-picker-radio--on[b-c0lw3r2edn] {
    border-color: var(--ec-primary);
}
.ec-picker-radio--on[b-c0lw3r2edn]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--ec-primary);
}
.ec-picker-radio--active.ec-picker-radio--on[b-c0lw3r2edn] { border-color: #16a34a; }
.ec-picker-radio--active.ec-picker-radio--on[b-c0lw3r2edn]::after { background: #16a34a; }
.ec-picker-radio--archive.ec-picker-radio--on[b-c0lw3r2edn] { border-color: #d97706; }
.ec-picker-radio--archive.ec-picker-radio--on[b-c0lw3r2edn]::after { background: #d97706; }
.ec-picker-radio--planning.ec-picker-radio--on[b-c0lw3r2edn] { border-color: #3b82f6; }
.ec-picker-radio--planning.ec-picker-radio--on[b-c0lw3r2edn]::after { background: #3b82f6; }

/* Empty-state row (no years available / still loading). Same shape as a
   regular card but non-interactive — no hover, no radio, italicised sub. */
.ec-picker-card-empty[b-c0lw3r2edn] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 10px;
    padding: 10px 11px;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
    color: #64748b;
}
.ec-picker-card-empty .ec-picker-card-name[b-c0lw3r2edn] {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
}
.ec-picker-card-empty .ec-picker-card-sub[b-c0lw3r2edn] {
    font-size: 11px;
    font-style: italic;
}

/* Cancel / Apply footer. */
.ec-picker-footer-actions[b-c0lw3r2edn] {
    display: flex;
    gap: 8px;
    padding: 12px 14px 14px;
    border-top: 1px solid #f1f5f9;
    margin-top: 8px;
}
.ec-picker-action[b-c0lw3r2edn] {
    flex: 1;
    padding: 9px 14px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: background 120ms ease, filter 120ms ease;
}
.ec-picker-action--cancel[b-c0lw3r2edn] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
}
.ec-picker-action--cancel:hover[b-c0lw3r2edn] { background: #f8fafc; }
.ec-picker-action--apply[b-c0lw3r2edn] {
    background: var(--ec-primary);
    color: #ffffff;
}
.ec-picker-action--apply:hover[b-c0lw3r2edn] { filter: brightness(0.96); }
/* /Components/Layout/LevelToggle.razor.rz.scp.css */
/* -- Level toggle (Kindergarten / Primary / Secondary stage switcher) --
   Matches prototype web-shell.jsx WebSidebar.levelToggle (lines 84-99). */

.ec-level-toggle[b-tiy86vsdaa] {
    display: flex;
    gap: 0;
    background: var(--ec-surface);
    border: 1px solid var(--ec-outline-variant, #e2e8f0);
    border-radius: 9px;
    padding: 3px;
    margin-top: 8px;
}

.ec-level-opt[b-tiy86vsdaa] {
    flex: 1;
    padding: 5px 6px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--ec-on-surface-variant);
    font-size: 10.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: background 0.12s, color 0.12s, box-shadow 0.12s;
}

.ec-level-opt.is-active[b-tiy86vsdaa] {
    background: #fff;
    color: var(--ec-on-surface);
    box-shadow: 0 1px 3px rgba(13, 23, 51, 0.08);
}

.ec-level-opt-icon[b-tiy86vsdaa] {
    font-size: 11px;
    line-height: 1;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* MainLayout shell — sidebar + main column. Phase 1D rewrite.

   The old MainLayout.razor.css defined .page / .sidebar / .top-row +
   media queries for the previous flexbox shell. Those classes are gone
   from the markup; the new shell uses ec-app-* classes scoped here.

   ec-app-root + ec-stage-* live on the outer div via inline markup in
   MainLayout (so global stage-themes.css can target it from any nesting
   depth). Everything below is scoped to this component. */

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

.ec-app-sidebar[b-gp09o6pltd] {
    background-color: #f8fafc;
    border-right: 1px solid var(--ec-border);
}

.ec-app-main[b-gp09o6pltd] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--ec-bg);
}

.ec-app-topbar[b-gp09o6pltd] {
    background: #fff;
    border-bottom: 1px solid var(--ec-border);
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Standard symmetric page gutter — the shell owns the outer page padding.
   Pages MUST NOT add their own outer wrapper padding (it compounds with this).
   Full-bleed pages opt out via <WebPage Bleed>. See WebApp/CLAUDE.md
   "Page layout & visual consistency standard". */
.ec-app-content[b-gp09o6pltd] {
    padding: var(--ec-sp-6); /* 24px all sides */
    flex: 1;
}

/* Mobile: stack vertically; sidebar becomes off-canvas drawer (future). */
@media (max-width: 640.98px) {
    .ec-app-content[b-gp09o6pltd] {
        padding: var(--ec-sp-4); /* 16px */
    }
}

/* Desktop: side-by-side, sidebar sticky to the viewport edge. */
@media (min-width: 641px) {
    .ec-app-shell[b-gp09o6pltd] {
        flex-direction: row;
    }

    .ec-app-sidebar[b-gp09o6pltd] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
        flex-shrink: 0;
        /* Raise the sidebar's stacking context above the main content area so
           sidebar popovers (the FacilityPicker dropdown + its backdrop) overlay
           page content like the dashboard hero card. The sidebar and main are
           sibling flex items both at z-index:auto, so without this they tie and
           DOM order wins — main paints last and its positioned cards (.thp-hero,
           position:relative) occlude the dropdown no matter how high the
           dropdown's own z-index is (it's trapped inside the sidebar's context).
           Kept well below full-screen modal overlays (slide-over editors at
           z-index:1100) so those still cover the sidebar. */
        z-index: 30;
    }
}

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

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

/* Content skeleton — shown in the main content area for stage-driven roles
   (teacher/parent) until the active stage resolves, so the page doesn't paint
   the wrong-themed content before flipping. Mirrors the sidebar skeleton. */
.ec-content-skel[b-gp09o6pltd] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 960px;
}

.ec-content-skel-bar[b-gp09o6pltd] {
    background: linear-gradient(90deg, #eef1f6 25%, #e4e8ef 37%, #eef1f6 63%);
    background-size: 400% 100%;
    border-radius: 14px;
    animation: ec-content-skel-shimmer-b-gp09o6pltd 1.4s ease infinite;
}

@keyframes ec-content-skel-shimmer-b-gp09o6pltd {
    0%   { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

.ec-content-skel-title[b-gp09o6pltd] {
    width: 280px;
    height: 30px;
    border-radius: 8px;
    margin-bottom: 6px;
}

.ec-content-skel-hero[b-gp09o6pltd] {
    height: 132px;
}

.ec-content-skel-card[b-gp09o6pltd] {
    height: 96px;
}
/* /Components/Layout/NotificationBell.razor.rz.scp.css */
/* -- Notification bell --
   Prefix: ec-notif-*  (replaces legacy ml-notif-* in MainLayout). */

.ec-notif-wrap[b-d2sisyi7io] { position: relative; }

/* 38x38 ghost button matching prototype web-shell.jsx lines 234-244. */
.ec-notif-btn[b-d2sisyi7io] {
    position: relative;
    width: 38px;
    height: 38px;
    background: var(--ec-bg);
    border: 1px solid var(--ec-border);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ec-sub);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    font-family: inherit;
}
.ec-notif-btn:hover[b-d2sisyi7io] { background: var(--ec-blue-gh); color: var(--ec-blue); }
.ec-notif-btn i[b-d2sisyi7io]     { font-size: 16px; }

/* Small pink dot used when there are any unread notifications — matches
   the prototype's absolute pink indicator (web-shell.jsx line 243). */
.ec-notif-badge[b-d2sisyi7io] {
    position: absolute;
    top: 6px;
    right: 7px;
    min-width: 8px;
    height: 8px;
    padding: 0 4px;
    background: var(--ec-pink);
    color: #fff;
    border-radius: 99px;
    font-size: 9px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    line-height: 1;
    pointer-events: none;
}

.ec-notif-panel[b-d2sisyi7io] {
    position: absolute; top: calc(100% + 10px); right: 0;
    z-index: 1100;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    border-radius: 1.25rem;
    min-width: 340px; max-width: 380px;
    box-shadow: 0 20px 60px -8px rgba(15,23,42,0.18), 0 0 0 1px rgba(46,93,171,0.09);
    overflow: hidden;
}

.ec-notif-panel-hdr[b-d2sisyi7io] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.875rem 1rem 0.625rem 1.125rem;
    border-bottom: 1px solid rgba(226,232,240,0.8);
}

.ec-notif-panel-hdr-actions[b-d2sisyi7io] {
    display: flex; align-items: center; gap: 0.5rem;
}

.ec-notif-panel-title[b-d2sisyi7io] { font-size: 0.82rem; font-weight: 800; color: var(--ec-on-surface); }

.ec-notif-mark-all[b-d2sisyi7io] {
    background: none; border: none; cursor: pointer; font-family: inherit;
    font-size: 0.72rem; font-weight: 700; color: var(--ec-primary);
    padding: 0; transition: opacity 0.15s;
}
.ec-notif-mark-all:hover[b-d2sisyi7io] { opacity: 0.7; }

.ec-notif-empty[b-d2sisyi7io] {
    display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
    padding: 2rem 1rem; color: var(--ec-on-surface-variant); opacity: 0.5;
    font-size: 0.82rem;
}
.ec-notif-empty i[b-d2sisyi7io] { font-size: 1.5rem; }

.ec-notif-item[b-d2sisyi7io] {
    display: flex; align-items: flex-start; gap: 0.75rem;
    padding: 0.75rem 1.125rem; cursor: pointer;
    transition: background 0.12s; border-bottom: 1px solid #f8fafc;
}
.ec-notif-item:hover[b-d2sisyi7io] { background: #f8fafc; }
.ec-notif-item-unread[b-d2sisyi7io] { background: color-mix(in srgb, var(--ec-primary) 7%, #fff); }
.ec-notif-item-unread:hover[b-d2sisyi7io] { background: color-mix(in srgb, var(--ec-primary) 12%, #fff); }

.ec-notif-item-icon[b-d2sisyi7io] {
    width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 0.85rem;
}
.ec-notif-icon-attendance[b-d2sisyi7io]  { background: #fef3c7; color: #d97706; }
.ec-notif-icon-activity[b-d2sisyi7io]    { background: #dbeafe; color: #2563eb; }
.ec-notif-icon-announcement[b-d2sisyi7io]{ background: #f3e8ff; color: #7c3aed; }
.ec-notif-icon-assignment[b-d2sisyi7io]  { background: #dcfce7; color: #16a34a; }
.ec-notif-icon-system[b-d2sisyi7io]      { background: #f1f5f9; color: #64748b; }
.ec-notif-icon-message[b-d2sisyi7io]     { background: #fce7f3; color: #be185d; }
.ec-notif-icon-general[b-d2sisyi7io]     { background: #f1f5f9; color: #64748b; }

.ec-notif-item-body[b-d2sisyi7io] { flex: 1; min-width: 0; }
.ec-notif-item-title[b-d2sisyi7io]   { font-size: 0.8rem; font-weight: 700; color: var(--ec-on-surface); margin: 0 0 0.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-notif-item-content[b-d2sisyi7io] { font-size: 0.72rem; color: var(--ec-on-surface-variant); margin: 0 0 0.2rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ec-notif-item-time[b-d2sisyi7io]    { font-size: 0.65rem; font-weight: 600; color: var(--ec-on-surface-variant); opacity: 0.55; text-transform: uppercase; letter-spacing: 0.04em; }

.ec-notif-panel-footer[b-d2sisyi7io] { padding: 0.5rem 1.125rem 0.75rem; text-align: center; border-top: 1px solid #f1f5f9; }
.ec-notif-view-all[b-d2sisyi7io] {
    font-size: 0.78rem; font-weight: 700; color: var(--ec-primary);
    text-decoration: none; transition: opacity 0.15s;
}
.ec-notif-view-all:hover[b-d2sisyi7io] { opacity: 0.7; }

/* Shared backdrop — same key as picker; defined locally so the
   bell works standalone without depending on MainLayout's stylesheet. */
.ec-picker-backdrop[b-d2sisyi7io] {
    position: fixed;
    inset: 0;
    z-index: 1001;
}
/* /Components/Layout/OrganizationPicker.razor.rz.scp.css */
/* ============================================================
   OrganizationPicker — scoped styles
   Cross-customer org switcher. The pill reuses the shared global
   .ec-sb-switcher-* classes (from app.css); this file styles the
   wrap, label, and the dropdown chrome — mirroring FacilityPicker's
   scope dropdown so the two pickers read as siblings in the sidebar.
   ============================================================ */

.ec-org-wrap[b-ph51qnn64f] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Lift above page content so the dropdown isn't clamped by a sibling
       stacking context — same rationale as FacilityPicker's wrap. */
    z-index: 9000;
    margin-bottom: 10px;
}

/* Uppercase smallcap label above the pill (matches the sidebar switcher label). */
.ec-org-label[b-ph51qnn64f] {
    margin: 0 0 5px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ec-sub);
}

.ec-org-pill[b-ph51qnn64f] { width: 100%; }

/* Square icon avatar at the left of the pill. */
.ec-org-icon[b-ph51qnn64f] {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    font-size: 11px;
}

/* Inline spinner shown while a switch is in flight. */
.ec-org-spinner[b-ph51qnn64f] {
    width: 13px;
    height: 13px;
    border: 2px solid rgba(46, 93, 171, 0.2);
    border-top-color: var(--ec-blue);
    border-radius: 50%;
    animation: ec-org-spin-b-ph51qnn64f 0.7s linear infinite;
    flex-shrink: 0;
}
@keyframes ec-org-spin-b-ph51qnn64f { to { transform: rotate(360deg); } }

/* -- Backdrop -- */
.ec-org-backdrop[b-ph51qnn64f] {
    position: fixed;
    inset: 0;
    z-index: 9000;
}

/* -- Dropdown — anchored to the pill via .ec-org-wrap (position:relative). -- */
.ec-org-dropdown[b-ph51qnn64f] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 9001;
    margin-top: 4px;
    width: 100%;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    overflow: hidden;
    max-height: 360px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 32px rgba(13, 23, 51, 0.18);
}

/* Header — kicker + title + close X. */
.ec-org-header[b-ph51qnn64f] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px 6px;
}
.ec-org-header-text[b-ph51qnn64f] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ec-org-kicker[b-ph51qnn64f] {
    margin: 0;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--ec-blue);
    text-transform: uppercase;
}
.ec-org-title[b-ph51qnn64f] {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}
.ec-org-close[b-ph51qnn64f] {
    background: #f1f5f9;
    border: none;
    border-radius: 6px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #475569;
    font-size: 11px;
    transition: background 120ms ease;
}
.ec-org-close:hover[b-ph51qnn64f] { background: #e2e8f0; }

.ec-org-error[b-ph51qnn64f] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 14px 6px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(172, 52, 52, 0.08);
    color: var(--ec-red);
    font-size: 11.5px;
    font-weight: 600;
}

.ec-org-scroll[b-ph51qnn64f] {
    overflow-y: auto;
    flex: 1;
    padding-bottom: 6px;
}

/* Card — one organization row. */
.ec-org-card[b-ph51qnn64f] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: calc(100% - 20px);
    margin: 4px 10px;
    padding: 10px 11px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: background 120ms ease, border-color 120ms ease;
}
.ec-org-card:hover:not(:disabled)[b-ph51qnn64f] { background: #f8fafc; }
.ec-org-card:disabled[b-ph51qnn64f] { cursor: default; }

/* The current org: pale blue tint, non-interactive. */
.ec-org-card--current[b-ph51qnn64f] {
    background: #eef2ff;
    border-color: #c7d2fe;
}

.ec-org-card-icon[b-ph51qnn64f] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}

.ec-org-card-body[b-ph51qnn64f] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.ec-org-card-name-row[b-ph51qnn64f] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.ec-org-card-name[b-ph51qnn64f] {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ec-org-card-sub[b-ph51qnn64f] {
    font-size: 11px;
    color: #64748b;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ec-org-card-pill[b-ph51qnn64f] {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    flex-shrink: 0;
    background: #dbeafe;
    color: #1d4ed8;
}

.ec-org-card-check[b-ph51qnn64f] {
    color: #1d4ed8;
    font-size: 15px;
    flex-shrink: 0;
}
.ec-org-card-go[b-ph51qnn64f] {
    color: var(--ec-muted);
    font-size: 18px;
    flex-shrink: 0;
}
/* /Components/Layout/UserMenu.razor.rz.scp.css */
/* -- User menu (avatar + dropdown) --
   Prefix: ec-usermenu-* (replaces legacy ml-profile-* in MainLayout). */

.ec-usermenu-wrap[b-1cipr4nycf] { position: relative; }

/* 38x38 purple circle matching prototype web-shell.jsx lines 291-296. */
.ec-top-avatar[b-1cipr4nycf] {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--ec-primary);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 13px;
    cursor: pointer;
    border: none;
    font-family: inherit;
    transition: box-shadow 0.15s, transform 0.15s;
    overflow: hidden;
    padding: 0;
}
.ec-top-avatar:hover[b-1cipr4nycf] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ec-primary) 18%, transparent); }
.ec-top-avatar-img[b-1cipr4nycf]   { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.ec-usermenu-menu[b-1cipr4nycf] {
    position: absolute; top: calc(100% + 10px); right: 0;
    z-index: 1100;
    background: white; border-radius: 1.25rem;
    min-width: 230px;
    box-shadow: 0 20px 56px -8px rgba(15,23,42,0.2), 0 0 0 1px rgba(46,93,171,0.07);
    overflow: hidden;
}

.ec-usermenu-menu-hdr[b-1cipr4nycf] {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 1rem 1.125rem 0.875rem;
    background: linear-gradient(135deg, var(--ec-primary, #2e5dab) 0%, var(--ec-primary-dk, #2944a0) 100%);
    color: white;
}

.ec-usermenu-menu-avatar[b-1cipr4nycf] {
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,0.2); color: white;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1rem; flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.4);
}
.ec-usermenu-menu-avatar img[b-1cipr4nycf] { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.ec-usermenu-menu-info[b-1cipr4nycf] { min-width: 0; }
.ec-usermenu-menu-name[b-1cipr4nycf] { display: block; font-size: 0.875rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-usermenu-menu-role[b-1cipr4nycf] { display: block; font-size: 0.68rem; font-weight: 600; opacity: 0.8; }
.ec-usermenu-menu-loc[b-1cipr4nycf]  { display: flex; align-items: center; gap: 0.25rem; font-size: 0.65rem; opacity: 0.7; margin-top: 0.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ec-usermenu-menu-items[b-1cipr4nycf] { padding: 0.5rem 0.5rem 0.5rem; }
.ec-usermenu-menu-item[b-1cipr4nycf] {
    display: flex; align-items: center; gap: 0.6rem; width: 100%;
    padding: 0.6rem 0.75rem; border-radius: 0.75rem;
    font-size: 0.82rem; font-weight: 600; color: var(--ec-on-surface);
    text-decoration: none; cursor: pointer;
    background: none; border: none; font-family: inherit; text-align: left;
    transition: background 0.12s;
}
.ec-usermenu-menu-item:hover[b-1cipr4nycf] { background: #f1f5f9; }
.ec-usermenu-menu-item i[b-1cipr4nycf] { width: 16px; text-align: center; opacity: 0.7; flex-shrink: 0; }

.ec-usermenu-menu-dot[b-1cipr4nycf] {
    width: 7px; height: 7px; border-radius: 50%; background: #16a34a;
    margin-left: auto; flex-shrink: 0;
}

.ec-usermenu-menu-divider[b-1cipr4nycf] {
    height: 1px; background: var(--ec-border-soft); margin: 4px 0;
}

.ec-usermenu-menu-item--logout[b-1cipr4nycf] { color: var(--ec-red); font-weight: 700; }
.ec-usermenu-menu-item--logout:hover[b-1cipr4nycf] { background: #fef2f2; }

/* Shared backdrop key (defined locally so the menu works standalone). */
.ec-picker-backdrop[b-1cipr4nycf] {
    position: fixed;
    inset: 0;
    z-index: 1001;
}
/* /Components/Pages/AcademicYears/AcademicYearsPage.razor.rz.scp.css */
/* AcademicYearsPage — customer-wide setup, academic-year list.
   Source of truth: prototype EduConnect All Roles.html lines 19139-19422
   (AWYears). Inline JSX values are transcribed verbatim in px — when the
   prototype writes `fontSize:24` it means 24 actual pixels, not "24/16rem
   of whatever the cascade gives us". The earlier rem-based pass shrank
   the KPIs (17px instead of 24px) and the icon tiles (36px instead of
   46px) because `rem` was being computed against the default 16px root
   without accounting for the prototype's intent. */

/* ── Page chrome ─────────────────────────────────────────────────────── */
.ayp-page[b-m81d3xv4o4] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ── Banners ─────────────────────────────────────────────────────────── */
.ayp-banner-error[b-m81d3xv4o4] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 600;
    background: var(--ec-red-lt);
    color: var(--ec-red);
}
.ayp-banner-close[b-m81d3xv4o4] {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    font-size: 16px;
    padding: 0;
    line-height: 1;
}

.ayp-loading[b-m81d3xv4o4], .ayp-empty[b-m81d3xv4o4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 64px 32px;
    color: var(--ec-muted);
    gap: 12px;
    text-align: center;
}
.ayp-spinner[b-m81d3xv4o4] {
    width: 36px;
    height: 36px;
    border: 3px solid #e9eefb;
    border-top-color: var(--ec-blue);
    border-radius: 50%;
    animation: ayp-spin-b-m81d3xv4o4 0.75s linear infinite;
}
@keyframes ayp-spin-b-m81d3xv4o4 { to { transform: rotate(360deg); } }
.ayp-empty-icon[b-m81d3xv4o4] { font-size: 40px; opacity: 0.35; }
.ayp-empty-sub[b-m81d3xv4o4] { font-size: 13px; opacity: 0.7; max-width: 420px; }
.ayp-empty-actions[b-m81d3xv4o4] {
    display: flex;
    gap: 10px;
    margin-top: 8px;
    flex-wrap: wrap;
    justify-content: center;
}
.ayp-empty-actions .ayp-add-btn[b-m81d3xv4o4],
.ayp-empty-actions .ayp-btn-edit[b-m81d3xv4o4] { padding: 9px 16px; font-size: 12.5px; }

/* ── KPI grid (4 tiles) — prototype WebKPI lines 1306-1335 ───────────── */
.ayp-kpi-grid[b-m81d3xv4o4] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.ayp-kpi[b-m81d3xv4o4] {
    min-height: 96px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.ayp-kpi-icon[b-m81d3xv4o4] {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.ayp-kpi-value[b-m81d3xv4o4] {
    font-size: 22px;
    font-weight: 800;
    color: var(--ec-text);
    line-height: 1;
    letter-spacing: -0.02em;
}
.ayp-kpi-label[b-m81d3xv4o4] {
    font-size: 10px;
    font-weight: 700;
    color: var(--ec-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 6px;
}

@media (max-width: 880px) {
    .ayp-kpi-grid[b-m81d3xv4o4] { grid-template-columns: repeat(2, 1fr); }
}

/* ── Intro row + Add button ─────────────────────────────────────────── */
.ayp-intro-row[b-m81d3xv4o4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.ayp-intro[b-m81d3xv4o4] {
    flex: 1;
    min-width: 240px;
    margin: 0;
    font-size: 12px;
    color: var(--ec-muted);
    line-height: 1.5;
}
.ayp-add-btn[b-m81d3xv4o4] {
    background: var(--ec-purple);
    border: none;
    border-radius: 9px;
    padding: 9px 15px;
    font-size: 12.5px;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 6px rgba(124, 58, 237, 0.19);
    transition: transform 0.15s, box-shadow 0.15s;
}
.ayp-add-btn:hover[b-m81d3xv4o4] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.28);
}

/* ── Year cards ─────────────────────────────────────────────────────── */
.ayp-list[b-m81d3xv4o4] { display: flex; flex-direction: column; gap: 11px; }
.ayp-year-card[b-m81d3xv4o4] {
    background: #fff;
    border: 1.5px solid var(--ec-border);
    border-radius: 14px;
    padding: 15px 20px;
}
.ayp-year-card--active[b-m81d3xv4o4] { border-color: var(--ec-green); }

.ayp-year-head[b-m81d3xv4o4] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 11px;
    flex-wrap: wrap;
}
.ayp-year-head-left[b-m81d3xv4o4] { flex: 1 1 280px; min-width: 0; }
.ayp-year-title-row[b-m81d3xv4o4] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
    flex-wrap: wrap;
}
.ayp-year-label[b-m81d3xv4o4] { font-size: 16px; font-weight: 800; color: var(--ec-text); margin: 0; }
.ayp-year-dates[b-m81d3xv4o4] { font-size: 12px; color: var(--ec-sub); margin: 0; }

/* Status pill — small uppercase badge matching prototype WebPill. */
.ayp-pill[b-m81d3xv4o4] {
    display: inline-flex;
    align-items: center;
    padding: 3px 7px;
    border-radius: 5px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.ayp-pill--active[b-m81d3xv4o4]   { background: rgba(22, 163, 74, 0.094);  color: var(--ec-green); }
.ayp-pill--planning[b-m81d3xv4o4] { background: rgba(217, 119, 6, 0.094);  color: var(--ec-amber); }
.ayp-pill--archived[b-m81d3xv4o4] { background: rgba(139, 149, 173, 0.094); color: var(--ec-muted); }

.ayp-year-actions[b-m81d3xv4o4] { display: flex; gap: 6px; }
.ayp-btn-active[b-m81d3xv4o4] {
    background: var(--ec-green);
    border: none;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 11.5px;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
}
.ayp-btn-active:hover[b-m81d3xv4o4] { background: var(--ec-green-dk, #15803d); }
.ayp-btn-edit[b-m81d3xv4o4] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.ayp-btn-edit:hover[b-m81d3xv4o4] { background: var(--ec-bg); }

/* ── Terms section ──────────────────────────────────────────────────── */
.ayp-section[b-m81d3xv4o4] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--ec-border-soft);
}
.ayp-section--holidays[b-m81d3xv4o4] { margin-top: 11px; padding-top: 11px; }
.ayp-section-label[b-m81d3xv4o4] {
    font-size: 10px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 7px 0;
}
.ayp-terms-grid[b-m81d3xv4o4] { display: flex; gap: 7px; flex-wrap: wrap; }
.ayp-term-chip[b-m81d3xv4o4] {
    flex: 1 1 200px;
    min-width: 200px;
    padding: 9px 12px;
    background: var(--ec-bg);
    border: 1px solid var(--ec-border-soft);
    border-radius: 9px;
}
.ayp-term-chip--active[b-m81d3xv4o4] {
    background: var(--ec-green-lt);
    border-color: #bbf7d0;
}
.ayp-term-name[b-m81d3xv4o4] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-text);
    letter-spacing: 0.04em;
    margin: 0;
}
.ayp-term-chip--active .ayp-term-name[b-m81d3xv4o4] { color: var(--ec-green); }
.ayp-term-dates[b-m81d3xv4o4] { font-size: 10.5px; color: var(--ec-sub); margin: 2px 0 0 0; }

/* ── Holidays section ───────────────────────────────────────────────── */
.ayp-holidays-wrap[b-m81d3xv4o4] { display: flex; gap: 6px; flex-wrap: wrap; }
.ayp-holiday-pill[b-m81d3xv4o4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--ec-amber);
    background: var(--ec-amber-lt);
    padding: 4px 9px 4px 7px;
    border-radius: 6px;
}
.ayp-holiday-name[b-m81d3xv4o4] { color: var(--ec-amber); }
.ayp-holiday-date[b-m81d3xv4o4] { color: var(--ec-muted); font-weight: 600; }

/* ── Drawer (slide-over) ────────────────────────────────────────────── */
.ayp-drawer-overlay[b-m81d3xv4o4] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 3000;
    display: flex;
    justify-content: flex-end;
}
.ayp-drawer[b-m81d3xv4o4] {
    width: min(580px, 92%);
    height: 100%;
    background: #fff;
    box-shadow: -12px 0 40px rgba(13, 23, 51, 0.16);
    display: flex;
    flex-direction: column;
}

.ayp-drawer-head[b-m81d3xv4o4] {
    padding: 18px 24px 14px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.07), #fff);
    border-bottom: 1px solid var(--ec-border);
    position: relative;
}
.ayp-drawer-close[b-m81d3xv4o4] {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--ec-border);
    cursor: pointer;
    font-size: 15px;
    color: var(--ec-sub);
    font-family: inherit;
}
.ayp-drawer-close:hover[b-m81d3xv4o4] { background: var(--ec-bg); }
.ayp-drawer-kicker[b-m81d3xv4o4] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-purple);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
}
.ayp-drawer-title[b-m81d3xv4o4] {
    font-size: 19px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 3px 0 0 0;
    letter-spacing: -0.01em;
}

.ayp-drawer-body[b-m81d3xv4o4] {
    flex: 1;
    overflow-y: auto;
    padding: 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ayp-fld[b-m81d3xv4o4] { display: flex; flex-direction: column; }
.ayp-fld-label[b-m81d3xv4o4] {
    font-size: 10px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 5px 0;
}
.ayp-fld-input[b-m81d3xv4o4] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    font-size: 13.5px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
}
.ayp-fld-input:focus[b-m81d3xv4o4] {
    border-color: var(--ec-purple);
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15);
}
.ayp-fld-input--bold[b-m81d3xv4o4] { font-weight: 700; }
.ayp-fld-input--sm[b-m81d3xv4o4] {
    padding: 9px 11px;
    border-radius: 8px;
    font-size: 12.5px;
}
.ayp-fld-hint[b-m81d3xv4o4] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 4px 0 0 0;
    font-style: italic;
    line-height: 1.5;
}

.ayp-fld-grid-2[b-m81d3xv4o4] { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }

.ayp-status-row[b-m81d3xv4o4] { display: flex; gap: 6px; flex-wrap: wrap; }
.ayp-status-btn[b-m81d3xv4o4] {
    padding: 7px 12px;
    border-radius: 8px;
    background: #fff;
    color: var(--ec-sub);
    border: 1.5px solid var(--ec-border);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ayp-status-btn--active-on[b-m81d3xv4o4]   { background: var(--ec-green); color: #fff; border-color: var(--ec-green); }
.ayp-status-btn--planning-on[b-m81d3xv4o4] { background: var(--ec-amber); color: #fff; border-color: var(--ec-amber); }
.ayp-status-btn--archived-on[b-m81d3xv4o4] { background: var(--ec-muted); color: #fff; border-color: var(--ec-muted); }

.ayp-fld-headrow[b-m81d3xv4o4] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 6px;
    gap: 6px;
}
.ayp-fld-add[b-m81d3xv4o4] {
    padding: 4px 9px;
    background: #fff;
    color: var(--ec-purple);
    border: 1px solid var(--ec-border);
    border-radius: 7px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
}
.ayp-fld-add:hover[b-m81d3xv4o4] { background: var(--ec-bg); }
.ayp-fld-empty[b-m81d3xv4o4] {
    padding: 14px;
    background: var(--ec-bg);
    border-radius: 9px;
    text-align: center;
    font-size: 11.5px;
    color: var(--ec-muted);
    font-style: italic;
}

.ayp-rows[b-m81d3xv4o4] { display: flex; flex-direction: column; gap: 6px; }
.ayp-term-row[b-m81d3xv4o4] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 30px;
    gap: 7px;
    align-items: center;
    padding: 8px 10px;
    background: var(--ec-bg);
    border: 1px solid var(--ec-border-soft);
    border-radius: 8px;
}
.ayp-holiday-row[b-m81d3xv4o4] {
    display: grid;
    grid-template-columns: 1.4fr 2fr 30px;
    gap: 7px;
    align-items: center;
    padding: 8px 10px;
    background: var(--ec-bg);
    border: 1px solid var(--ec-border-soft);
    border-radius: 8px;
}
.ayp-row-input[b-m81d3xv4o4] {
    padding: 6px 9px;
    border: 1px solid var(--ec-border);
    border-radius: 6px;
    font-size: 11.5px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
}
.ayp-row-input:focus[b-m81d3xv4o4] {
    border-color: var(--ec-purple);
    box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.2);
}
.ayp-row-input--bold[b-m81d3xv4o4] { font-weight: 700; }
.ayp-row-input--mono[b-m81d3xv4o4] {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
}
.ayp-code[b-m81d3xv4o4] {
    background: var(--ec-bg);
    padding: 1px 5px;
    border-radius: 4px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 10px;
}
.ayp-row-del[b-m81d3xv4o4] {
    background: transparent;
    border: none;
    color: var(--ec-red);
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
    width: 30px;
    height: 30px;
}

.ayp-drawer-foot[b-m81d3xv4o4] {
    padding: 12px 24px;
    border-top: 1px solid var(--ec-border);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    align-items: center;
    background: var(--ec-bg);
}
.ayp-foot-delete[b-m81d3xv4o4] {
    background: #fff;
    border: 1px solid rgba(220, 38, 38, 0.33);
    border-radius: 9px;
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ec-red);
    cursor: pointer;
    font-family: inherit;
    margin-right: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.ayp-foot-delete:hover[b-m81d3xv4o4] { background: var(--ec-red-lt); }
.ayp-foot-cancel[b-m81d3xv4o4] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
}
.ayp-foot-cancel:hover[b-m81d3xv4o4] { background: var(--ec-bg); }
.ayp-foot-save[b-m81d3xv4o4] {
    background: var(--ec-purple);
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 9px 18px;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 2px 6px rgba(124, 58, 237, 0.19);
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.ayp-foot-save:hover:not(:disabled)[b-m81d3xv4o4] { transform: translateY(-1px); }
.ayp-foot-save:disabled[b-m81d3xv4o4] {
    background: var(--ec-border-soft);
    color: var(--ec-muted);
    cursor: not-allowed;
    box-shadow: none;
}
.ayp-spinner-sm[b-m81d3xv4o4] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ayp-spin-b-m81d3xv4o4 0.7s linear infinite;
}

/* ── Rollover hero (top of page) — prototype lines 20803-20833 ─────────
   Soft purple-to-blue gradient panel announcing the rollover CTA. The
   button is dimmed outside the 90-day-to-end-of-year window because
   forcing a rollover earlier risks bad student-assignment data. */
.ayp-rollover-hero[b-m81d3xv4o4] {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.06), rgba(59, 130, 246, 0.04));
    border: 1px solid rgba(124, 58, 237, 0.15);
    border-radius: 14px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.ayp-rollover-copy[b-m81d3xv4o4] {
    flex: 1 1 320px;
    min-width: 0;
}
.ayp-rollover-kicker[b-m81d3xv4o4] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-purple);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0;
}
.ayp-rollover-title[b-m81d3xv4o4] {
    font-size: 19px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 4px 0 0 0;
    letter-spacing: -0.01em;
}
.ayp-rollover-sub[b-m81d3xv4o4] {
    font-size: 12px;
    color: var(--ec-sub);
    line-height: 1.5;
    margin: 5px 0 0 0;
}
.ayp-rollover-sub b[b-m81d3xv4o4] { color: var(--ec-text); }
.ayp-rollover-cta[b-m81d3xv4o4] {
    background: var(--ec-purple);
    color: #fff;
    border: none;
    border-radius: 11px;
    padding: 12px 20px;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    box-shadow: 0 3px 10px rgba(124, 58, 237, 0.28);
    transition: transform 0.15s, box-shadow 0.15s;
}
.ayp-rollover-cta:hover[b-m81d3xv4o4] {
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(124, 58, 237, 0.36);
}
.ayp-rollover-cta--disabled[b-m81d3xv4o4],
.ayp-rollover-cta:disabled[b-m81d3xv4o4] {
    background: var(--ec-border-soft);
    color: var(--ec-muted);
    cursor: not-allowed;
    box-shadow: none;
}
.ayp-rollover-cta--disabled:hover[b-m81d3xv4o4],
.ayp-rollover-cta:disabled:hover[b-m81d3xv4o4] {
    transform: none;
    box-shadow: none;
}

/* ── Card border tints — derived from status ─────────────────────────── */
.ayp-year-card--planning[b-m81d3xv4o4] { border-color: rgba(217, 119, 6, 0.35); }
.ayp-year-card--archived[b-m81d3xv4o4] { opacity: 0.92; }

/* ── VIEWING NOW pill (on the scoped non-active year) ────────────────── */
.ayp-viewing-now[b-m81d3xv4o4] {
    font-size: 9.5px;
    font-weight: 800;
    color: var(--ec-amber);
    background: var(--ec-amber-lt);
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

/* ── Scope action button (amber, archived cards) ─────────────────────── */
.ayp-btn-scope[b-m81d3xv4o4] {
    background: var(--ec-amber);
    border: none;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 11.5px;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.ayp-btn-scope:hover[b-m81d3xv4o4] { filter: brightness(0.96); }

/* ── Per-year KPI strip (5 tiles) — prototype lines 20884-20897 ──────── */
.ayp-year-kpis[b-m81d3xv4o4] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--ec-border-soft);
}
.ayp-year-kpi[b-m81d3xv4o4] {
    padding: 9px 11px;
    background: var(--ec-bg);
    border-radius: 8px;
    text-align: center;
}
.ayp-year-kpi-value[b-m81d3xv4o4] {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.1;
    margin: 0;
}
.ayp-year-kpi-value--blue[b-m81d3xv4o4]   { color: var(--ec-blue); }
.ayp-year-kpi-value--purple[b-m81d3xv4o4] { color: var(--ec-purple); }
.ayp-year-kpi-value--green[b-m81d3xv4o4]  { color: var(--ec-green); }
.ayp-year-kpi-value--amber[b-m81d3xv4o4]  { color: var(--ec-amber); }
.ayp-year-kpi-value--teal[b-m81d3xv4o4]   { color: var(--ec-teal, #0d9488); }
.ayp-year-kpi-label[b-m81d3xv4o4] {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--ec-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 2px 0 0 0;
}
@media (max-width: 720px) {
    .ayp-year-kpis[b-m81d3xv4o4] { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
    .ayp-year-kpis[b-m81d3xv4o4] { grid-template-columns: repeat(2, 1fr); }
}

/* ── Toast (transient bottom-right confirmation) ─────────────────────── */
.ayp-toast[b-m81d3xv4o4] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: #0f172a;
    color: #fff;
    padding: 12px 18px;
    border-radius: 11px;
    font-size: 12.5px;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.28);
    display: inline-flex;
    align-items: center;
    gap: 9px;
    z-index: 4000;
    animation: ayp-toast-in-b-m81d3xv4o4 0.22s ease-out;
    max-width: 380px;
}
.ayp-toast i[b-m81d3xv4o4] { color: #93c5fd; font-size: 14px; }
@keyframes ayp-toast-in-b-m81d3xv4o4 {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* /Components/Pages/AcademicYears/AdminYearRolloverWizard.razor.rz.scp.css */
/* AdminYearRolloverWizard — 6-step rollover slide-over.
   Source of truth: prototype AWYearRolloverWizard
   (EduConnect All Roles.html lines 21088-21585). */

/* ── Overlay + panel chrome ─────────────────────────────────────────── */
.aywiz-overlay[b-ayirktd7z6] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 3200;
    display: flex;
    justify-content: flex-end;
}
.aywiz-panel[b-ayirktd7z6] {
    width: min(820px, 96%);
    height: 100%;
    background: #fff;
    box-shadow: -12px 0 40px rgba(13, 23, 51, 0.18);
    display: flex;
    flex-direction: column;
}

/* ── Header (kicker + title + pips) ─────────────────────────────────── */
.aywiz-head[b-ayirktd7z6] {
    padding: 18px 26px 14px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), #fff);
    border-bottom: 1px solid var(--ec-border);
    position: relative;
}
.aywiz-close[b-ayirktd7z6] {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: #fff;
    border: 1px solid var(--ec-border);
    cursor: pointer;
    font-size: 17px;
    color: var(--ec-sub);
    font-family: inherit;
    line-height: 1;
}
.aywiz-close:hover[b-ayirktd7z6] { background: var(--ec-bg); }
.aywiz-kicker[b-ayirktd7z6] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-purple);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0;
}
.aywiz-title[b-ayirktd7z6] {
    font-size: 20px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 3px 0 0 0;
    letter-spacing: -0.01em;
}
.aywiz-pips[b-ayirktd7z6] {
    display: flex;
    gap: 5px;
    margin-top: 12px;
}
.aywiz-pip[b-ayirktd7z6] {
    flex: 1;
    height: 5px;
    border-radius: 3px;
    background: var(--ec-border-soft);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s;
}
.aywiz-pip--done[b-ayirktd7z6]   { background: rgba(124, 58, 237, 0.4); }
.aywiz-pip--active[b-ayirktd7z6] { background: var(--ec-purple); }

/* ── Body + step containers ─────────────────────────────────────────── */
.aywiz-body[b-ayirktd7z6] {
    flex: 1;
    overflow-y: auto;
    padding: 20px 26px;
}
.aywiz-step[b-ayirktd7z6] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.aywiz-error[b-ayirktd7z6] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 9px;
    background: var(--ec-red-lt);
    color: var(--ec-red);
    font-size: 12.5px;
    font-weight: 700;
}

/* ── Step 1: closing alert + tile grid ──────────────────────────────── */
.aywiz-alert[b-ayirktd7z6] {
    padding: 18px 20px;
    border-radius: 12px;
    margin-bottom: 4px;
}
.aywiz-alert--warning[b-ayirktd7z6] {
    background: var(--ec-amber-lt);
    border: 1.5px solid #fde68a;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.aywiz-alert-icon[b-ayirktd7z6] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--ec-amber);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
}
.aywiz-alert-copy[b-ayirktd7z6] { flex: 1; min-width: 0; }
.aywiz-alert-title[b-ayirktd7z6] {
    font-size: 14px;
    font-weight: 800;
    color: #92400e;
    margin: 0;
}
.aywiz-alert-sub[b-ayirktd7z6] {
    font-size: 12.5px;
    color: #78350f;
    line-height: 1.55;
    margin: 6px 0 0 0;
}
.aywiz-alert-sub b[b-ayirktd7z6] { color: #78350f; }

.aywiz-section-label[b-ayirktd7z6] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 4px 0;
}
.aywiz-archive-grid[b-ayirktd7z6] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
@media (max-width: 640px) {
    .aywiz-archive-grid[b-ayirktd7z6] { grid-template-columns: 1fr; }
}
.aywiz-archive-tile[b-ayirktd7z6] {
    padding: 13px 14px;
    background: #fff;
    border: 1px solid var(--ec-border-soft);
    border-radius: 11px;
    display: flex;
    gap: 11px;
    align-items: center;
}
.aywiz-archive-tile-icon[b-ayirktd7z6] {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
}
.aywiz-archive-tile-copy[b-ayirktd7z6] { flex: 1; min-width: 0; }
.aywiz-archive-tile-value[b-ayirktd7z6] {
    font-size: 18px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.aywiz-archive-tile-label[b-ayirktd7z6] {
    font-size: 10px;
    font-weight: 700;
    color: var(--ec-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 2px 0 0 0;
}
.aywiz-archive-tile-sub[b-ayirktd7z6] {
    font-size: 10.5px;
    color: var(--ec-sub);
    margin: 3px 0 0 0;
}

.aywiz-howto[b-ayirktd7z6] {
    font-size: 11.5px;
    color: var(--ec-sub);
    line-height: 1.55;
    padding: 12px 14px;
    background: var(--ec-bg);
    border-radius: 9px;
    margin: 0;
}
.aywiz-howto b[b-ayirktd7z6] { color: var(--ec-text); }

/* ── Step 2: form fields ────────────────────────────────────────────── */
.aywiz-fld[b-ayirktd7z6] { display: flex; flex-direction: column; }
.aywiz-fld-label[b-ayirktd7z6] {
    font-size: 10px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 5px 0;
}
.aywiz-input[b-ayirktd7z6] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    font-size: 13.5px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
}
.aywiz-input:focus[b-ayirktd7z6] {
    border-color: var(--ec-purple);
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15);
}
.aywiz-input--bold[b-ayirktd7z6] { font-weight: 700; }
.aywiz-input--sm[b-ayirktd7z6] {
    padding: 9px 11px;
    border-radius: 8px;
    font-size: 12.5px;
}
.aywiz-fld-hint[b-ayirktd7z6] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 4px 0 0 0;
    font-style: italic;
}
.aywiz-fld-row-2[b-ayirktd7z6] { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.aywiz-fld-headrow[b-ayirktd7z6] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 7px;
    gap: 6px;
}
.aywiz-fld-add[b-ayirktd7z6] {
    padding: 4px 9px;
    background: #fff;
    color: var(--ec-purple);
    border: 1px solid var(--ec-border);
    border-radius: 7px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
}
.aywiz-fld-add:hover[b-ayirktd7z6] { background: var(--ec-bg); }
.aywiz-fld-empty[b-ayirktd7z6] {
    padding: 14px;
    background: var(--ec-bg);
    border-radius: 9px;
    text-align: center;
    font-size: 11.5px;
    color: var(--ec-muted);
    font-style: italic;
}
.aywiz-rows[b-ayirktd7z6] { display: flex; flex-direction: column; gap: 6px; }
.aywiz-row-term[b-ayirktd7z6] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 30px;
    gap: 7px;
    align-items: center;
    padding: 8px 10px;
    background: var(--ec-bg);
    border: 1px solid var(--ec-border-soft);
    border-radius: 8px;
}
.aywiz-row-holiday[b-ayirktd7z6] {
    display: grid;
    grid-template-columns: 1.2fr 2fr 30px;
    gap: 7px;
    align-items: center;
    padding: 8px 10px;
    background: var(--ec-bg);
    border: 1px solid var(--ec-border-soft);
    border-radius: 8px;
}
.aywiz-row-input[b-ayirktd7z6] {
    padding: 6px 9px;
    border: 1px solid var(--ec-border);
    border-radius: 6px;
    font-size: 11.5px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
}
.aywiz-row-input:focus[b-ayirktd7z6] {
    border-color: var(--ec-purple);
    box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.2);
}
.aywiz-row-input--bold[b-ayirktd7z6] { font-weight: 700; }
.aywiz-row-del[b-ayirktd7z6] {
    background: transparent;
    border: none;
    color: var(--ec-red);
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
    width: 30px;
    height: 30px;
}

/* ── Step placeholder card (3 / 4 / 5 until Y4c-d land) ─────────────── */
.aywiz-placeholder[b-ayirktd7z6] {
    padding: 36px 28px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.04), rgba(59, 130, 246, 0.03));
    border: 1px dashed rgba(124, 58, 237, 0.25);
    border-radius: 14px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.aywiz-placeholder i[b-ayirktd7z6] {
    font-size: 32px;
    color: var(--ec-purple);
}
.aywiz-placeholder h3[b-ayirktd7z6] {
    font-size: 16px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.aywiz-placeholder p[b-ayirktd7z6] {
    font-size: 12.5px;
    color: var(--ec-sub);
    line-height: 1.55;
    max-width: 460px;
    margin: 0;
}
.aywiz-placeholder-cta[b-ayirktd7z6] {
    font-size: 11.5px !important;
    color: var(--ec-purple) !important;
    font-weight: 700;
    margin-top: 4px !important;
}

/* ── Step 6: ready-to-roll panel + change list ──────────────────────── */
.aywiz-alert--ready[b-ayirktd7z6] {
    padding: 20px 22px;
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.08), rgba(59, 130, 246, 0.04));
    border: 1.5px solid rgba(22, 163, 74, 0.4);
    border-radius: 14px;
}
.aywiz-ready-kicker[b-ayirktd7z6] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-green);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
}
.aywiz-ready-body[b-ayirktd7z6] {
    font-size: 14px;
    color: var(--ec-text);
    margin: 8px 0 0 0;
    line-height: 1.65;
}

.aywiz-change-list[b-ayirktd7z6] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.aywiz-change-row[b-ayirktd7z6] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 13px;
    background: #fff;
    border: 1px solid var(--ec-border-soft);
    border-radius: 8px;
}
.aywiz-change-dot[b-ayirktd7z6] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}
.aywiz-change-old[b-ayirktd7z6] {
    font-size: 12px;
    font-weight: 700;
    color: var(--ec-text);
    flex: 1;
    margin: 0;
}
.aywiz-change-arrow[b-ayirktd7z6] { font-size: 11px; color: var(--ec-muted); }
.aywiz-change-pill[b-ayirktd7z6] {
    font-size: 10.5px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 5px;
    letter-spacing: 0.04em;
}
.aywiz-change-new[b-ayirktd7z6] {
    font-size: 12px;
    font-weight: 800;
    color: var(--ec-text);
    min-width: 120px;
    text-align: right;
    margin: 0;
}

.aywiz-warning-card[b-ayirktd7z6] {
    padding: 12px 14px;
    background: var(--ec-amber-lt);
    border-radius: 9px;
}
.aywiz-warning-card p[b-ayirktd7z6] {
    font-size: 11.5px;
    color: #78350f;
    line-height: 1.55;
    margin: 0;
}

.aywiz-confirm[b-ayirktd7z6] {
    width: 100%;
    padding: 14px;
    background: var(--ec-green);
    color: #fff;
    border: none;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.32);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.aywiz-confirm:hover:not(:disabled)[b-ayirktd7z6] { filter: brightness(0.97); }
.aywiz-confirm:disabled[b-ayirktd7z6] {
    background: var(--ec-border-soft);
    color: var(--ec-muted);
    cursor: not-allowed;
    box-shadow: none;
}
.aywiz-confirm--danger[b-ayirktd7z6] {
    background: var(--ec-red, #dc2626);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.32);
}

/* Step 6 "Activate now" opt-in. Sits between the warning card and the
   confirm button. Visual treatment is a checkbox row with a clear hint —
   the danger consequences live in the warning-card copy that flips when
   the box is ticked, not on this control itself. */
.aywiz-activate-now[b-ayirktd7z6] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 13px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 9px;
    cursor: pointer;
    font-size: 12px;
    line-height: 1.5;
    color: #78350f;
}
.aywiz-activate-now input[type="checkbox"][b-ayirktd7z6] {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    accent-color: #d97706;
    flex-shrink: 0;
    cursor: pointer;
}
.aywiz-activate-now-text[b-ayirktd7z6] { display: block; }
.aywiz-activate-now-text b[b-ayirktd7z6] { font-weight: 700; }
.aywiz-activate-now-hint[b-ayirktd7z6] {
    display: block;
    margin-top: 2px;
    color: #92400e;
    font-size: 11px;
}
.aywiz-spinner[b-ayirktd7z6] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: aywiz-spin-b-ayirktd7z6 0.7s linear infinite;
}
@keyframes aywiz-spin-b-ayirktd7z6 { to { transform: rotate(360deg); } }

/* ── Footer nav ─────────────────────────────────────────────────────── */
.aywiz-foot[b-ayirktd7z6] {
    padding: 12px 26px;
    border-top: 1px solid var(--ec-border);
    background: var(--ec-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.aywiz-foot-right[b-ayirktd7z6] { display: flex; gap: 8px; }
.aywiz-foot-cancel[b-ayirktd7z6] {
    padding: 9px 15px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
}
.aywiz-foot-cancel:hover[b-ayirktd7z6] { background: var(--ec-bg); }
.aywiz-foot-back[b-ayirktd7z6] {
    padding: 9px 15px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
}
.aywiz-foot-back:disabled[b-ayirktd7z6] {
    color: var(--ec-muted);
    cursor: not-allowed;
}
.aywiz-foot-back:hover:not(:disabled)[b-ayirktd7z6] { background: var(--ec-bg); }
.aywiz-foot-next[b-ayirktd7z6] {
    padding: 9px 18px;
    background: var(--ec-purple);
    border: none;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 2px 6px rgba(124, 58, 237, 0.28);
}
.aywiz-foot-next:hover[b-ayirktd7z6] { transform: translateY(-1px); }

/* ── Color tints shared by tiles + pills ────────────────────────────── */
.aywiz-tint-blue[b-ayirktd7z6]   { color: var(--ec-blue);   background: rgba(59, 95, 192, 0.12); }
.aywiz-tint-purple[b-ayirktd7z6] { color: var(--ec-purple); background: rgba(124, 58, 237, 0.12); }
.aywiz-tint-green[b-ayirktd7z6]  { color: var(--ec-green);  background: rgba(22, 163, 74, 0.12); }
.aywiz-tint-amber[b-ayirktd7z6]  { color: var(--ec-amber);  background: rgba(217, 119, 6, 0.12); }
.aywiz-tint-teal[b-ayirktd7z6]   { color: var(--ec-teal);   background: rgba(13, 148, 136, 0.12); }
.aywiz-tint-muted[b-ayirktd7z6]  { color: var(--ec-muted);  background: rgba(139, 149, 173, 0.12); }

/* ── Step 3 + 4 grid (class action + teacher carryover) ─────────────── */
.aywiz-intro[b-ayirktd7z6] {
    font-size: 12px;
    color: var(--ec-sub);
    line-height: 1.55;
    margin: 0 0 4px 0;
}
.aywiz-intro b[b-ayirktd7z6] { color: var(--ec-text); }

.aywiz-empty[b-ayirktd7z6] {
    padding: 20px;
    text-align: center;
    font-size: 12px;
    color: var(--ec-muted);
    font-style: italic;
    background: var(--ec-bg);
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    box-sizing: border-box;
}
.aywiz-empty i[b-ayirktd7z6] { font-size: 14px; }

.aywiz-grid[b-ayirktd7z6] {
    border: 1px solid var(--ec-border);
    border-radius: 11px;
    overflow: hidden;
    background: #fff;
}
.aywiz-grid-head[b-ayirktd7z6] {
    padding: 9px 13px;
    background: var(--ec-bg);
    border-bottom: 1px solid var(--ec-border);
    font-size: 10px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.aywiz-grid-row[b-ayirktd7z6] {
    padding: 11px 13px;
    border-bottom: 1px solid var(--ec-border-soft);
    align-items: center;
    gap: 10px;
}
.aywiz-grid-row:last-child[b-ayirktd7z6] { border-bottom: none; }

.aywiz-grid-row--class[b-ayirktd7z6] { display: grid; grid-template-columns: 1.6fr 1.2fr 1.5fr; }
.aywiz-grid-row--teacher[b-ayirktd7z6] { display: grid; grid-template-columns: 1.6fr 1.2fr 1fr; }

.aywiz-class-cell[b-ayirktd7z6] { min-width: 0; }
.aywiz-class-name[b-ayirktd7z6] {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 7px;
}
.aywiz-class-sub[b-ayirktd7z6] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 2px 0 0 0;
}

.aywiz-teacher-cell[b-ayirktd7z6] { min-width: 0; }
.aywiz-teacher-name[b-ayirktd7z6] {
    font-size: 12px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.aywiz-homeroom-pill[b-ayirktd7z6] {
    font-size: 8.5px;
    font-weight: 800;
    color: var(--ec-amber);
    background: var(--ec-amber-lt);
    padding: 1.5px 5px;
    border-radius: 3px;
    letter-spacing: 0.04em;
}
.aywiz-teacher-class[b-ayirktd7z6] {
    font-size: 11.5px;
    color: var(--ec-sub);
    font-weight: 700;
    margin: 0;
}

/* Action <select> — the COLLAPSED button is tinted via .aywiz-tint-* (text
   + background). The OPEN option list, however, is rendered by the browser
   and Chrome propagates the parent <select>'s background into every <option>
   — which makes the dropdown look like a coloured rainbow when you click
   it. Reset <option> styling explicitly so the open panel renders plain
   white-on-dark like a normal native dropdown. */
.aywiz-action-select[b-ayirktd7z6] {
    padding: 7px 9px;
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    border: 1px solid currentColor;
}
.aywiz-action-select:focus[b-ayirktd7z6] {
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15);
}
/* Reset option rendering — neutral background, default text colour. The
   !important is necessary because the <select>'s `aywiz-tint-*` background
   inherits down to options on Chromium and would otherwise win. */
.aywiz-action-select option[b-ayirktd7z6] {
    background: #fff !important;
    color: var(--ec-text) !important;
    font-weight: 600;
}

.aywiz-name-input[b-ayirktd7z6] {
    padding: 7px 10px;
    border: 1px solid var(--ec-border);
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ec-text);
    font-family: inherit;
    outline: none;
    background: #fff;
}
.aywiz-name-input:focus[b-ayirktd7z6] {
    border-color: var(--ec-purple);
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15);
}
.aywiz-name-input--disabled[b-ayirktd7z6],
.aywiz-name-input:disabled[b-ayirktd7z6] {
    background: var(--ec-bg);
    color: var(--ec-muted);
    cursor: not-allowed;
}

/* Step 3 legend — chips below the grid explaining each action colour. */
.aywiz-legend[b-ayirktd7z6] {
    display: flex;
    gap: 14px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.aywiz-legend-item[b-ayirktd7z6] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    color: var(--ec-sub);
}
.aywiz-legend-swatch[b-ayirktd7z6] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
}
.aywiz-legend-name[b-ayirktd7z6] { font-weight: 800; }
.aywiz-legend-desc[b-ayirktd7z6] { color: var(--ec-muted); }

/* ── Step 5 timetable strategy cards (radio-like) ───────────────────── */
.aywiz-timetable-cards[b-ayirktd7z6] {
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.aywiz-tt-card[b-ayirktd7z6] {
    text-align: left;
    padding: 15px 17px;
    border-radius: 12px;
    background: #fff;
    border: 2px solid var(--ec-border);
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: background 0.15s, border-color 0.15s;
}
.aywiz-tt-card:hover[b-ayirktd7z6] { background: var(--ec-bg); }

/* Per-option highlight colour when selected. */
.aywiz-tt-card--green.aywiz-tt-card--selected[b-ayirktd7z6]  { border-color: var(--ec-green);  background: rgba(22, 163, 74, 0.06); }
.aywiz-tt-card--blue.aywiz-tt-card--selected[b-ayirktd7z6]   { border-color: var(--ec-blue);   background: rgba(59, 95, 192, 0.06); }
.aywiz-tt-card--amber.aywiz-tt-card--selected[b-ayirktd7z6]  { border-color: var(--ec-amber);  background: rgba(217, 119, 6, 0.06); }

.aywiz-tt-radio[b-ayirktd7z6] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--ec-border);
    background: #fff;
    flex-shrink: 0;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.aywiz-tt-card--green.aywiz-tt-card--selected  .aywiz-tt-radio[b-ayirktd7z6] { border-color: var(--ec-green); background: var(--ec-green); }
.aywiz-tt-card--blue.aywiz-tt-card--selected   .aywiz-tt-radio[b-ayirktd7z6] { border-color: var(--ec-blue);  background: var(--ec-blue); }
.aywiz-tt-card--amber.aywiz-tt-card--selected  .aywiz-tt-radio[b-ayirktd7z6] { border-color: var(--ec-amber); background: var(--ec-amber); }
.aywiz-tt-radio-dot[b-ayirktd7z6] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
}

.aywiz-tt-copy[b-ayirktd7z6] { flex: 1; min-width: 0; }
.aywiz-tt-title[b-ayirktd7z6] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}
.aywiz-tt-tag[b-ayirktd7z6] {
    font-size: 9.5px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.06em;
}
.aywiz-tt-desc[b-ayirktd7z6] {
    font-size: 12px;
    color: var(--ec-sub);
    line-height: 1.5;
    margin: 4px 0 0 0;
}
/* /Components/Pages/AcademicYears/ConfirmDialog.razor.rz.scp.css */
/* ConfirmDialog — centered modal for destructive confirmations on the
   academic-year surface. Scoped CSS so styles don't leak into the page's
   own ayp- namespace. */

.ec-confirm-overlay[b-elrxbo1pgl] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 3500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.ec-confirm-panel[b-elrxbo1pgl] {
    width: min(520px, 100%);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(13, 23, 51, 0.28);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: ec-confirm-in-b-elrxbo1pgl 0.18s ease-out;
}
@keyframes ec-confirm-in-b-elrxbo1pgl {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.ec-confirm-head[b-elrxbo1pgl] {
    padding: 22px 24px 14px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.05), #fff);
    border-bottom: 1px solid var(--ec-border);
}
.ec-confirm-icon[b-elrxbo1pgl] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
    color: #fff;
}
.ec-confirm-icon--danger[b-elrxbo1pgl]  { background: var(--ec-red);    }
.ec-confirm-icon--primary[b-elrxbo1pgl] { background: var(--ec-purple); }
.ec-confirm-title[b-elrxbo1pgl] {
    font-size: 17px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 4px 0 0;
    letter-spacing: -0.01em;
    line-height: 1.35;
}

.ec-confirm-body[b-elrxbo1pgl] {
    padding: 18px 24px;
    font-size: 13.5px;
    color: var(--ec-sub);
    line-height: 1.55;
    max-height: 60vh;
    overflow-y: auto;
}
.ec-confirm-body p[b-elrxbo1pgl] { margin: 0 0 10px; }
.ec-confirm-body p:last-child[b-elrxbo1pgl] { margin-bottom: 0; }
.ec-confirm-body b[b-elrxbo1pgl], .ec-confirm-body strong[b-elrxbo1pgl] { color: var(--ec-text); }
.ec-confirm-body ul[b-elrxbo1pgl] {
    margin: 10px 0;
    padding-left: 20px;
}
.ec-confirm-body li[b-elrxbo1pgl] { margin-bottom: 4px; }

.ec-confirm-foot[b-elrxbo1pgl] {
    padding: 12px 24px;
    background: var(--ec-bg);
    border-top: 1px solid var(--ec-border);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    align-items: center;
}
.ec-confirm-cancel[b-elrxbo1pgl] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    padding: 9px 16px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
}
.ec-confirm-cancel:hover[b-elrxbo1pgl] { background: var(--ec-bg); }

.ec-confirm-ok[b-elrxbo1pgl] {
    border: none;
    border-radius: 9px;
    padding: 9px 18px;
    font-size: 12.5px;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.ec-confirm-ok--danger[b-elrxbo1pgl]  { background: var(--ec-red);    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.28); }
.ec-confirm-ok--primary[b-elrxbo1pgl] { background: var(--ec-primary); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14); }
.ec-confirm-ok:hover:not(:disabled)[b-elrxbo1pgl] { transform: translateY(-1px); }
.ec-confirm-ok:disabled[b-elrxbo1pgl] {
    background: var(--ec-border-soft);
    color: var(--ec-muted);
    cursor: not-allowed;
    box-shadow: none;
}

.ec-confirm-spinner[b-elrxbo1pgl] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ec-confirm-spin-b-elrxbo1pgl 0.7s linear infinite;
}
@keyframes ec-confirm-spin-b-elrxbo1pgl { to { transform: rotate(360deg); } }
/* /Components/Pages/Activities/ActivitiesPage.razor.rz.scp.css */
/* Admin Activities — transcribed from prototype AWActivities
   (EduConnect All Roles.html lines 30262-30495). */

.awact-page[b-npw1y6k7j8] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Banner / loading / empty ────────────────────────────────────── */
.awact-banner[b-npw1y6k7j8] {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 13px; font-weight: 600;
}
.awact-banner-error[b-npw1y6k7j8] {
    background: color-mix(in srgb, var(--ec-red) 8%, transparent);
    color: var(--ec-red);
    border: 1px solid color-mix(in srgb, var(--ec-red) 18%, transparent);
}
.awact-banner-ok[b-npw1y6k7j8] {
    background: color-mix(in srgb, var(--ec-green) 8%, transparent);
    color: color-mix(in srgb, var(--ec-green) 85%, black);
    border: 1px solid color-mix(in srgb, var(--ec-green) 22%, transparent);
}
.awact-banner-close[b-npw1y6k7j8] {
    margin-left: auto;
    background: none; border: none; cursor: pointer;
    color: inherit; font-size: 16px; padding: 0; line-height: 1;
}

.awact-loading[b-npw1y6k7j8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px 24px;
    color: var(--ec-muted);
    gap: 14px;
}
.awact-spinner[b-npw1y6k7j8] {
    width: 38px; height: 38px;
    border: 3px solid var(--ec-border-soft);
    border-top-color: var(--ec-purple);
    border-radius: 50%;
    animation: awact-spin-b-npw1y6k7j8 0.75s linear infinite;
}
@keyframes awact-spin-b-npw1y6k7j8 { to { transform: rotate(360deg); } }

.awact-empty[b-npw1y6k7j8] {
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--ec-muted);
    text-align: center;
}
.awact-empty-icon[b-npw1y6k7j8] { font-size: 32px; opacity: 0.4; margin-bottom: 6px; color: var(--ec-purple); }
.awact-empty-title[b-npw1y6k7j8] { font-size: 13px; font-weight: 800; color: var(--ec-text); margin: 0; }
.awact-empty-sub[b-npw1y6k7j8]   { font-size: 11.5px; color: var(--ec-muted); margin: 0; max-width: 420px; }

/* ── KPIs ──────────────────────────────────────────────────────── */
.awact-kpis[b-npw1y6k7j8] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}
.awact-kpis[b-npw1y6k7j8]  .ec-kpi-value {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 1180px) {
    .awact-kpis[b-npw1y6k7j8] { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
    .awact-kpis[b-npw1y6k7j8] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .awact-kpis[b-npw1y6k7j8] { grid-template-columns: 1fr; }
}

/* ── Opt-out reminder banner ───────────────────────────────────── */
.awact-optout-banner[b-npw1y6k7j8] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--ec-amber-lt);
    border: 1px solid #fde68a;
    border-radius: 11px;
    padding: 12px 16px;
}
.awact-optout-banner > i[b-npw1y6k7j8] {
    color: #b45309;
    font-size: 16px;
    margin-top: 2px;
}
.awact-optout-title[b-npw1y6k7j8] {
    font-size: 12.5px;
    font-weight: 800;
    color: #92400e;
    letter-spacing: 0.04em;
    margin: 0 0 5px;
    text-transform: uppercase;
}
.awact-optout-sub[b-npw1y6k7j8] {
    font-size: 11.5px;
    color: var(--ec-sub);
    line-height: 1.5;
    margin: 0;
}

/* ── Card shell + toolbar ──────────────────────────────────────── */
.awact-card[b-npw1y6k7j8] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 12px;
    overflow: hidden;
}
.awact-toolbar[b-npw1y6k7j8] {
    padding: 12px 18px;
    border-bottom: 1px solid var(--ec-border);
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.awact-toolbar-spacer[b-npw1y6k7j8] { flex: 1; }
.awact-toolbar-hint[b-npw1y6k7j8] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 0;
}

.awact-status-tabs[b-npw1y6k7j8] {
    display: flex;
    gap: 5px;
}
.awact-status-tab[b-npw1y6k7j8] {
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--ec-border);
    background: #fff;
    color: var(--ec-sub);
    font-size: 11.5px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    text-transform: capitalize;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.05s;
}
.awact-status-tab:hover[b-npw1y6k7j8] { background: var(--ec-bg); }
.awact-status-tab:active[b-npw1y6k7j8] { transform: translateY(1px); }
.awact-status-tab.is-active[b-npw1y6k7j8] {
    background: var(--ec-purple);
    color: #fff;
    border-color: var(--ec-purple);
}

.awact-select[b-npw1y6k7j8] {
    padding: 8px 12px;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ec-sub);
    font-family: inherit;
    background: #fff;
    outline: none;
    cursor: pointer;
}
.awact-select:focus[b-npw1y6k7j8] {
    border-color: var(--ec-purple);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ec-purple) 18%, transparent);
}

/* ── Buttons ───────────────────────────────────────────────────── */
.awact-btn[b-npw1y6k7j8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    border: none;
    transition: background 0.15s, color 0.15s, transform 0.05s;
}
.awact-btn:disabled[b-npw1y6k7j8] { opacity: 0.55; cursor: not-allowed; }
.awact-btn:active:not(:disabled)[b-npw1y6k7j8] { transform: translateY(1px); }
.awact-btn i[b-npw1y6k7j8] { font-size: 13px; }

.awact-btn-primary[b-npw1y6k7j8] { background: var(--ec-primary); color: #fff; }
.awact-btn-primary:hover:not(:disabled)[b-npw1y6k7j8] { filter: brightness(0.93); }

.awact-btn-success[b-npw1y6k7j8] { background: var(--ec-green); color: #fff; }
.awact-btn-success:hover:not(:disabled)[b-npw1y6k7j8] { background: color-mix(in srgb, var(--ec-green) 88%, black); }

.awact-btn-warn[b-npw1y6k7j8] { background: var(--ec-amber); color: #fff; }
.awact-btn-warn:hover:not(:disabled)[b-npw1y6k7j8] { background: color-mix(in srgb, var(--ec-amber) 88%, black); }

.awact-btn-info[b-npw1y6k7j8] { background: var(--ec-blue); color: #fff; }
.awact-btn-info:hover:not(:disabled)[b-npw1y6k7j8] { background: color-mix(in srgb, var(--ec-blue) 88%, black); }

.awact-btn-danger[b-npw1y6k7j8] { background: var(--ec-red); color: #fff; }
.awact-btn-danger:hover:not(:disabled)[b-npw1y6k7j8] { background: color-mix(in srgb, var(--ec-red) 88%, black); }

.awact-btn-ghost[b-npw1y6k7j8] {
    background: #fff;
    color: var(--ec-sub);
    border: 1px solid var(--ec-border);
    font-weight: 700;
}
.awact-btn-ghost:hover:not(:disabled)[b-npw1y6k7j8] { background: var(--ec-bg); }

.awact-btn-ghost-danger[b-npw1y6k7j8] {
    background: #fff;
    color: var(--ec-red);
    border: 1px solid var(--ec-border);
    font-weight: 700;
}
.awact-btn-ghost-danger:hover:not(:disabled)[b-npw1y6k7j8] {
    background: color-mix(in srgb, var(--ec-red) 8%, white);
    border-color: color-mix(in srgb, var(--ec-red) 35%, var(--ec-border));
}

/* ── Activity grid ─────────────────────────────────────────────── */
.awact-grid[b-npw1y6k7j8] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
    padding: 14px;
}

.awact-card-item[b-npw1y6k7j8] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
    display: flex;
    flex-direction: column;
}
.awact-card-item:hover[b-npw1y6k7j8] {
    border-color: color-mix(in srgb, var(--ec-purple) 30%, var(--ec-border));
    box-shadow: 0 6px 18px rgba(13, 23, 51, 0.08);
    transform: translateY(-1px);
}

.awact-card-media[b-npw1y6k7j8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    height: 120px;
    background: var(--ec-bg);
}
.awact-card-media.is-empty[b-npw1y6k7j8] {
    grid-template-columns: 1fr;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.85);
}
.awact-card-media-empty[b-npw1y6k7j8] {
    font-size: 28px;
    opacity: 0.7;
    color: var(--ec-sub);
}
.awact-card-photo-cell[b-npw1y6k7j8] {
    position: relative;
    overflow: hidden;
    min-width: 0;
}
.awact-card-photo[b-npw1y6k7j8] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.awact-card-photo-more[b-npw1y6k7j8] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(13, 23, 51, 0.55);
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.awact-card-body[b-npw1y6k7j8] {
    padding: 12px 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.awact-card-pills[b-npw1y6k7j8] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 5px;
}
.awact-card-title[b-npw1y6k7j8] {
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-text);
    line-height: 1.3;
    margin: 0 0 4px;
}
.awact-card-desc[b-npw1y6k7j8] {
    font-size: 11px;
    color: var(--ec-sub);
    line-height: 1.4;
    margin: 0 0 7px;
    flex: 1;
}
.awact-card-foot[b-npw1y6k7j8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    border-top: 1px solid var(--ec-border-soft);
    padding-top: 8px;
    margin-top: auto;
}
.awact-card-meta[b-npw1y6k7j8] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.awact-card-date[b-npw1y6k7j8] {
    font-size: 10.5px;
    color: var(--ec-muted);
    font-weight: 700;
    margin: 0;
    flex-shrink: 0;
}

/* ── Pills / chips ─────────────────────────────────────────────── */
.awact-pill[b-npw1y6k7j8] {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: 6px;
    text-transform: uppercase;
}
.awact-pill.is-pub[b-npw1y6k7j8]   { background: var(--ec-green-lt); color: var(--ec-green); }
.awact-pill.is-draft[b-npw1y6k7j8] { background: var(--ec-amber-lt); color: var(--ec-amber); }
.awact-pill.is-purple[b-npw1y6k7j8] { background: var(--ec-purple-lt); color: var(--ec-purple); }

.awact-photo-count[b-npw1y6k7j8] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--ec-muted);
    font-weight: 600;
}
.awact-photo-count i[b-npw1y6k7j8] { font-size: 11px; }

.awact-optout-chip[b-npw1y6k7j8] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9.5px;
    font-weight: 800;
    color: #b45309;
    background: var(--ec-amber-lt);
    padding: 2px 6px;
    border-radius: 4px;
}
.awact-optout-chip i[b-npw1y6k7j8] { font-size: 10px; }

/* Engagement chips on cards */
.awact-card-engage[b-npw1y6k7j8] {
    display: flex;
    gap: 10px;
    margin: 4px 0 6px;
}
.awact-engage[b-npw1y6k7j8] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 700;
}
.awact-engage i[b-npw1y6k7j8] { font-size: 11px; }
.awact-engage--heart[b-npw1y6k7j8]   { color: var(--ec-pink); }
.awact-engage--comment[b-npw1y6k7j8] { color: var(--ec-blue); }

.awact-card-by[b-npw1y6k7j8] {
    color: var(--ec-muted);
    font-size: 10px;
    font-weight: 600;
}
.awact-card-meta i[b-npw1y6k7j8] { color: var(--ec-sub); margin-right: 3px; }

/* ── Slide-overs (moderation + editor) ─────────────────────────── */
.awact-overlay[b-npw1y6k7j8] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 1080;
    display: flex;
    justify-content: flex-end;
    animation: awact-overlay-in-b-npw1y6k7j8 0.15s ease;
}
@keyframes awact-overlay-in-b-npw1y6k7j8 { from { background: rgba(15, 23, 42, 0); } }

.awact-sheet[b-npw1y6k7j8] {
    width: min(620px, 95vw);
    height: 100%;
    background: #fff;
    box-shadow: -12px 0 40px rgba(13, 23, 51, 0.16);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: awact-sheet-in-b-npw1y6k7j8 0.2s ease;
}
.awact-sheet--wide[b-npw1y6k7j8] { width: min(720px, 95vw); }

@keyframes awact-sheet-in-b-npw1y6k7j8 {
    from { transform: translateX(30px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

.awact-sheet-hdr[b-npw1y6k7j8] {
    padding: 18px 26px;
    border-bottom: 1px solid var(--ec-border);
    position: relative;
}
.awact-sheet-close[b-npw1y6k7j8] {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--ec-border);
    cursor: pointer;
    font-size: 15px;
    color: var(--ec-sub);
    font-family: inherit;
    line-height: 1;
}
.awact-sheet-close:hover[b-npw1y6k7j8] { background: var(--ec-bg); }

.awact-sheet-eyebrow[b-npw1y6k7j8] {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
}
.awact-sheet-title[b-npw1y6k7j8] {
    font-size: 18px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 3px 30px 0 0;
    line-height: 1.3;
}
.awact-sheet-by[b-npw1y6k7j8] {
    font-size: 11.5px;
    color: var(--ec-sub);
    margin: 5px 0 0;
}
.awact-sheet-pills[b-npw1y6k7j8] {
    display: flex;
    gap: 6px;
    margin-top: 9px;
}

.awact-sheet-body[b-npw1y6k7j8] {
    flex: 1;
    overflow-y: auto;
    padding: 16px 26px 26px;
}
.awact-sheet-desc[b-npw1y6k7j8] {
    font-size: 13px;
    color: var(--ec-text);
    line-height: 1.6;
    margin: 0 0 14px;
    white-space: pre-wrap;
}

.awact-sheet-sec[b-npw1y6k7j8] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 7px;
}
.awact-sheet-gallery[b-npw1y6k7j8] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin-bottom: 14px;
}
.awact-sheet-photo[b-npw1y6k7j8] {
    aspect-ratio: 1 / 1;
    border-radius: 9px;
    overflow: hidden;
    border: 1px solid var(--ec-border-soft);
    background: var(--ec-bg);
    display: block;
    transition: transform 0.15s, box-shadow 0.15s;
}
.awact-sheet-photo:hover[b-npw1y6k7j8] {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(13, 23, 51, 0.14);
}
.awact-sheet-photo img[b-npw1y6k7j8] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.awact-sheet-optout[b-npw1y6k7j8] {
    background: var(--ec-amber-lt);
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
}
.awact-sheet-optout--inline[b-npw1y6k7j8] { margin: 0 0 12px; padding: 9px 12px; }
.awact-sheet-optout-title[b-npw1y6k7j8] {
    font-size: 11px;
    font-weight: 800;
    color: #92400e;
    letter-spacing: 0.04em;
    margin: 0 0 5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.awact-sheet-optout-sub[b-npw1y6k7j8] {
    font-size: 11.5px;
    color: var(--ec-sub);
    line-height: 1.5;
    margin: 0 0 6px;
}
.awact-sheet-optout-name[b-npw1y6k7j8] {
    font-size: 11.5px;
    color: var(--ec-text);
    font-weight: 600;
    margin: 2px 0 0;
}

.awact-sheet-actions[b-npw1y6k7j8] {
    display: flex;
    gap: 7px;
    padding-top: 14px;
    margin-top: 8px;
    border-top: 1px solid var(--ec-border-soft);
    flex-wrap: wrap;
}
.awact-sheet-actions .awact-btn:first-child[b-npw1y6k7j8] { flex: 1; padding: 10px; }

.awact-sheet-reactions[b-npw1y6k7j8] {
    margin-left: 8px;
    color: var(--ec-pink);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}
.awact-sheet-reactions i[b-npw1y6k7j8] { font-size: 11px; margin-right: 3px; }

/* Comments moderation list */
.awact-comment-list[b-npw1y6k7j8] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}
.awact-comment[b-npw1y6k7j8] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 11px;
    background: var(--ec-bg);
    border: 1px solid var(--ec-border-soft);
    border-radius: 9px;
}
.awact-comment.is-hidden[b-npw1y6k7j8] {
    opacity: 0.6;
    background: color-mix(in srgb, var(--ec-amber) 5%, white);
    border-color: color-mix(in srgb, var(--ec-amber) 20%, var(--ec-border));
}
.awact-comment-avatar[b-npw1y6k7j8] {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--ec-blue);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.awact-comment-body[b-npw1y6k7j8] { flex: 1; min-width: 0; }
.awact-comment-head[b-npw1y6k7j8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.awact-comment-author[b-npw1y6k7j8] {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ec-text);
}
.awact-comment-time[b-npw1y6k7j8] {
    font-size: 10px;
    color: var(--ec-muted);
}
.awact-comment-flag[b-npw1y6k7j8] {
    font-size: 9.5px;
    font-weight: 800;
    color: var(--ec-amber);
    background: var(--ec-amber-lt);
    padding: 1px 5px;
    border-radius: 4px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.awact-comment-text[b-npw1y6k7j8] {
    margin: 4px 0 6px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ec-text);
    white-space: pre-wrap;
}
.awact-comment-actions[b-npw1y6k7j8] {
    display: flex;
    gap: 6px;
}
.awact-comment-action[b-npw1y6k7j8] {
    padding: 4px 9px;
    border-radius: 6px;
    border: 1px solid var(--ec-border);
    background: #fff;
    color: var(--ec-sub);
    font-size: 10.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.awact-comment-action:hover[b-npw1y6k7j8] { background: var(--ec-bg); }
.awact-comment-action--danger[b-npw1y6k7j8] { color: var(--ec-red); }
.awact-comment-action--danger:hover[b-npw1y6k7j8] {
    background: color-mix(in srgb, var(--ec-red) 8%, white);
    border-color: color-mix(in srgb, var(--ec-red) 35%, var(--ec-border));
}

/* ── Editor (class picker, fields) ─────────────────────────────── */
.awact-editor-hdr[b-npw1y6k7j8] {
    padding: 20px 26px 14px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--ec-purple) 12%, white), #fff);
    border-bottom: 1px solid var(--ec-border);
    position: relative;
}
.awact-editor-hdr-body[b-npw1y6k7j8] { display: flex; align-items: center; gap: 12px; }
.awact-editor-icon[b-npw1y6k7j8] {
    font-size: 24px;
    color: var(--ec-purple);
    flex-shrink: 0;
}
.awact-editor-title[b-npw1y6k7j8] {
    font-size: 17px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.awact-editor-sub[b-npw1y6k7j8] {
    font-size: 11.5px;
    color: var(--ec-muted);
    margin: 2px 0 0;
}

.awact-editor-body[b-npw1y6k7j8] {
    flex: 1;
    overflow-y: auto;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.awact-editor-footer[b-npw1y6k7j8] {
    padding: 12px 22px;
    border-top: 1px solid var(--ec-border-soft);
    background: var(--ec-bg);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ── Audience picker (institution / facility / classes / programs) ─── */
.awact-picker[b-npw1y6k7j8] {
    background: var(--ec-bg);
    border: 1px solid var(--ec-border-soft);
    border-radius: 11px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.awact-picker-hdr[b-npw1y6k7j8] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    flex-wrap: wrap;
    justify-content: space-between;
}
.awact-picker-count[b-npw1y6k7j8] {
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 3px 0 0;
}
.awact-picker-sec[b-npw1y6k7j8] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-sub);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 4px 0 4px;
}

.awact-chip[b-npw1y6k7j8] {
    padding: 5px 11px;
    border-radius: 7px;
    border: 1px solid var(--ec-border);
    background: #fff;
    color: var(--ec-sub);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.awact-chip:hover[b-npw1y6k7j8] { background: var(--ec-bg); }
.awact-chip:disabled[b-npw1y6k7j8] {
    opacity: 0.5;
    cursor: default;
    background: var(--ec-bg);
    border-color: var(--ec-border-soft);
    color: var(--ec-muted);
}

.awact-picker-row[b-npw1y6k7j8] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.awact-pickbtn[b-npw1y6k7j8] {
    padding: 6px 11px;
    border-radius: 8px;
    border: 1.5px solid var(--ec-border);
    background: #fff;
    color: var(--ec-sub);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.awact-pickbtn:hover:not(:disabled)[b-npw1y6k7j8] { background: var(--ec-blue-gh); }
.awact-pickbtn:disabled[b-npw1y6k7j8] { cursor: default; }
.awact-pickbtn.is-on[b-npw1y6k7j8] {
    font-weight: 800;
    border-color: var(--ec-purple);
    background: color-mix(in srgb, var(--ec-purple) 10%, white);
    color: var(--ec-purple);
}
.awact-pickbtn.is-dimmed[b-npw1y6k7j8] {
    opacity: 0.45;
}
.awact-pickbtn-count[b-npw1y6k7j8] {
    margin-left: 2px;
    font-size: 9.5px;
    font-weight: 700;
    color: var(--ec-muted);
    opacity: 0.85;
}
.awact-pickbtn.is-on .awact-pickbtn-count[b-npw1y6k7j8] {
    color: inherit;
    opacity: 0.6;
}
.awact-pickbtn--prog.is-on[b-npw1y6k7j8] {
    border-color: var(--ec-amber);
    background: var(--ec-amber-lt);
    color: var(--ec-amber);
}

.awact-fac-card[b-npw1y6k7j8] {
    background: #fff;
    border: 1.5px solid var(--ec-border);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.15s;
}
.awact-fac-card.is-on[b-npw1y6k7j8] {
    border-color: var(--ec-purple);
    background: color-mix(in srgb, var(--ec-purple) 4%, white);
}
.awact-fac-hdr[b-npw1y6k7j8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.awact-fac-name[b-npw1y6k7j8] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.awact-fac-name i[b-npw1y6k7j8] { font-size: 12px; color: var(--ec-sub); }
.awact-fac-count[b-npw1y6k7j8] { font-weight: 600; }
.awact-fac-toggle[b-npw1y6k7j8] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border: 1px solid var(--ec-border);
    border-radius: 6px;
    background: #fff;
    font-size: 11px;
    font-weight: 700;
    color: var(--ec-sub);
    cursor: pointer;
    user-select: none;
}
.awact-fac-toggle input[b-npw1y6k7j8] { cursor: pointer; }
.awact-fac-toggle:has(input:checked)[b-npw1y6k7j8] {
    border-color: var(--ec-purple);
    background: color-mix(in srgb, var(--ec-purple) 10%, white);
    color: var(--ec-purple);
}
.awact-pickrow-label[b-npw1y6k7j8] {
    font-size: 10px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 4px 0 4px;
}

/* Form fields */
.awact-form-row[b-npw1y6k7j8] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.awact-field[b-npw1y6k7j8] { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.awact-field--grow[b-npw1y6k7j8] { flex: 1; }
.awact-field--date[b-npw1y6k7j8] { flex: 0 0 160px; }
.awact-field-label[b-npw1y6k7j8] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-sub);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 4px;
}
.awact-req[b-npw1y6k7j8] { color: var(--ec-red); }
.awact-help-muted[b-npw1y6k7j8] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 0 0 6px;
}

.awact-input[b-npw1y6k7j8] {
    padding: 9px 12px;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    font-size: 13px;
    font-family: inherit;
    color: var(--ec-text);
    outline: none;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
}
.awact-input:focus[b-npw1y6k7j8] {
    border-color: var(--ec-purple);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ec-purple) 18%, transparent);
}
.awact-textarea[b-npw1y6k7j8] {
    resize: vertical;
    min-height: 70px;
    line-height: 1.45;
}

.awact-status-row[b-npw1y6k7j8] {
    display: flex;
    gap: 6px;
}
.awact-status-card[b-npw1y6k7j8] {
    flex: 1;
    padding: 10px 12px;
    border-radius: 9px;
    border: 1.5px solid var(--ec-border);
    background: #fff;
    color: var(--ec-sub);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}
.awact-status-card.is-on[b-npw1y6k7j8] { font-weight: 800; }
.awact-status-card--amber.is-on[b-npw1y6k7j8] {
    border-color: var(--ec-amber);
    background: color-mix(in srgb, var(--ec-amber) 10%, white);
    color: var(--ec-amber);
}
.awact-status-card--green.is-on[b-npw1y6k7j8] {
    border-color: var(--ec-green);
    background: color-mix(in srgb, var(--ec-green) 10%, white);
    color: var(--ec-green);
}

.awact-form-err[b-npw1y6k7j8] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: var(--ec-red);
    background: color-mix(in srgb, var(--ec-red) 8%, white);
    border: 1px solid color-mix(in srgb, var(--ec-red) 30%, transparent);
    padding: 8px 11px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 700;
}

/* ── Delete confirm modal ──────────────────────────────────────── */
.awact-modal-overlay[b-npw1y6k7j8] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 1090;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: awact-overlay-in-b-npw1y6k7j8 0.15s ease;
}

.awact-modal[b-npw1y6k7j8] {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(13, 23, 51, 0.28);
    width: min(440px, 100%);
    margin: auto;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: awact-sheet-in-b-npw1y6k7j8 0.18s ease;
}
.awact-modal-hdr[b-npw1y6k7j8] {
    padding: 16px 22px;
    border-bottom: 1px solid var(--ec-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.awact-modal-hdr h3[b-npw1y6k7j8] {
    font-size: 16px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.awact-modal-close[b-npw1y6k7j8] {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: #fff;
    border: 1px solid var(--ec-border);
    cursor: pointer;
    font-size: 14px;
    color: var(--ec-sub);
    line-height: 1;
}
.awact-modal-close:hover[b-npw1y6k7j8] { background: var(--ec-bg); }
.awact-modal-body[b-npw1y6k7j8] { padding: 18px 22px; font-size: 12.5px; color: var(--ec-sub); line-height: 1.55; }
.awact-modal-body b[b-npw1y6k7j8] { color: var(--ec-text); font-weight: 700; }
.awact-modal-footer[b-npw1y6k7j8] {
    padding: 12px 22px;
    border-top: 1px solid var(--ec-border-soft);
    background: var(--ec-bg);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ── Editor media uploader ────────────────────────────────────────────── */
.awact-media-grid[b-npw1y6k7j8] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
    margin: 6px 0 10px;
}
.awact-media-tile[b-npw1y6k7j8] {
    position: relative;
    aspect-ratio: 1;
    border-radius: 9px;
    overflow: hidden;
    background: #eef0f6;
    transition: opacity .15s;
}
.awact-media-tile.is-removed[b-npw1y6k7j8] { opacity: 0.4; }
.awact-media-thumb[b-npw1y6k7j8] {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.awact-media-thumb.is-video[b-npw1y6k7j8] {
    background: #1a2540; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; position: relative;
}
.awact-media-thumb.is-video img[b-npw1y6k7j8] { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.awact-media-play[b-npw1y6k7j8] {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 28px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
    pointer-events: none;
}
.awact-media-remove[b-npw1y6k7j8],
.awact-media-restore[b-npw1y6k7j8] {
    position: absolute; top: 4px; right: 4px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(15,23,42,0.75);
    color: #fff; border: none;
    font-size: 13px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.awact-media-remove:hover[b-npw1y6k7j8] { background: var(--ec-red); }
.awact-media-restore[b-npw1y6k7j8] { background: rgba(124,58,237,0.85); }
.awact-media-restore:hover[b-npw1y6k7j8] { background: #7c3aed; }
.awact-media-name[b-npw1y6k7j8] {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 4px 6px;
    background: linear-gradient(180deg, rgba(15,23,42,0), rgba(15,23,42,0.8));
    color: #fff; font-size: 10px; font-weight: 600;
    text-align: center; overflow: hidden;
    white-space: nowrap; text-overflow: ellipsis;
}

.awact-upload-zone[b-npw1y6k7j8] {
    display: block;
    border: 1.5px dashed var(--ec-border, #cdd3e1);
    border-radius: 10px;
    padding: 18px;
    text-align: center;
    cursor: pointer;
    transition: background-color .12s, border-color .12s;
    background: #fafbff;
}
.awact-upload-zone:hover[b-npw1y6k7j8] { background: #f3f5fc; border-color: #7c3aed; }
.awact-file-input[b-npw1y6k7j8] {
    position: absolute;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}
.awact-upload-inner[b-npw1y6k7j8] { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.awact-upload-icon[b-npw1y6k7j8] { font-size: 22px; color: #7c3aed; }
.awact-upload-text[b-npw1y6k7j8] { font-size: 12.5px; font-weight: 700; color: var(--ec-text); margin: 0; }
.awact-upload-sub[b-npw1y6k7j8]  { font-size: 11px; color: var(--ec-muted); margin: 0; }
/* /Components/Pages/Admin/AdminProfile.razor.rz.scp.css */
/* AdminProfile — scoped CSS. Mirrors PWProfile (proto 7823-7952).
   Same shape as ParentProfile/TeacherProfile so all three role profile
   pages share visual chrome; the .ap-* prefix is its own scope so
   admin-specific tweaks (institutions card, role pill text) don't
   leak into the parent/teacher views. */

.ap-page[b-4z1t5xyy5i] { padding: 0; background: var(--ec-bg); min-height: 100%; }

/* ── Hero (institution-accent gradient) ────────────────────────────── */
.ap-hero[b-4z1t5xyy5i] {
    position: relative;
    background: linear-gradient(120deg, var(--ec-primary) 0%, var(--ec-primary-dk) 100%);
    border-radius: 16px;
    padding: 24px 26px;
    color: #fff;
    margin-bottom: 18px;
    overflow: clip;
}
.ap-hero-ring[b-4z1t5xyy5i] {
    position: absolute; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.07);
    pointer-events: none;
}
.ap-hero-ring-1[b-4z1t5xyy5i] { top: -60px; right: -50px; width: 240px; height: 240px; }
.ap-hero-ring-2[b-4z1t5xyy5i] { bottom: -80px; right: 60px; width: 180px; height: 180px; }
.ap-hero-row[b-4z1t5xyy5i] {
    position: relative;
    display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
}

.ap-avatar-wrap[b-4z1t5xyy5i] { position: relative; flex-shrink: 0; }
.ap-avatar[b-4z1t5xyy5i] {
    width: 88px; height: 88px; border-radius: 22px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 30px; font-weight: 800;
    letter-spacing: -0.02em;
    border: 3px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
}
.ap-avatar--img[b-4z1t5xyy5i] { object-fit: cover; }
.ap-avatar-edit[b-4z1t5xyy5i] {
    position: absolute; bottom: -2px; right: -2px;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--ec-primary);
    border: 2px solid #fff;
    cursor: pointer; font-family: inherit;
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    font-size: 12px;
}
.ap-avatar-edit[aria-disabled="true"][b-4z1t5xyy5i] { opacity: 0.7; cursor: not-allowed; }
.ap-avatar-delete[b-4z1t5xyy5i] {
    position: absolute; top: -2px; right: -2px;
    width: 30px; height: 30px; border-radius: 50%;
    background: #fff;
    border: 2px solid rgba(255, 255, 255, 0.9);
    cursor: pointer; font-family: inherit;
    color: var(--ec-red);
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    font-size: 12px;
}
.ap-avatar-delete:hover[b-4z1t5xyy5i] { background: var(--ec-red-lt); }
.ap-avatar-spinner[b-4z1t5xyy5i] {
    position: absolute; inset: 0;
    border-radius: 22px;
    background: rgba(15, 23, 42, 0.45);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 22px;
}
.ap-avatar-spinner i[b-4z1t5xyy5i] { animation: ap-avatar-spin-b-4z1t5xyy5i 0.8s linear infinite; }
@keyframes ap-avatar-spin-b-4z1t5xyy5i { to { transform: rotate(360deg); } }

.ap-hero-body[b-4z1t5xyy5i] { flex: 1; min-width: 0; }
.ap-hero-eyebrow[b-4z1t5xyy5i] {
    font-size: 11px; font-weight: 700;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.12em; text-transform: uppercase;
    margin: 0;
}
.ap-hero-name[b-4z1t5xyy5i] {
    font-size: 26px; font-weight: 800;
    margin: 5px 0 0;
    letter-spacing: -0.02em; line-height: 1.05;
}
.ap-hero-pills[b-4z1t5xyy5i] {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-top: 8px;
}
.ap-pill[b-4z1t5xyy5i] {
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 10px; font-weight: 800;
    color: #fff;
    letter-spacing: 0.06em;
}
.ap-pill--active[b-4z1t5xyy5i] {
    background: rgba(34, 197, 94, 0.25);
    border-color: rgba(34, 197, 94, 0.4);
}
.ap-hero-meta[b-4z1t5xyy5i] {
    font-size: 13px; color: rgba(255, 255, 255, 0.85);
    margin: 10px 0 0;
}
.ap-hero-settings[b-4z1t5xyy5i] {
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 9px;
    padding: 10px 16px;
    color: #fff;
    font-size: 12.5px; font-weight: 700;
    cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 7px;
}
.ap-hero-settings:hover[b-4z1t5xyy5i] { background: rgba(255, 255, 255, 0.24); }

/* ── Two-column body ──────────────────────────────────────────────── */
.ap-body[b-4z1t5xyy5i] {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 16px;
    align-items: flex-start;
}
.ap-col[b-4z1t5xyy5i] { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* ── Section card ─────────────────────────────────────────────────── */
.ap-card[b-4z1t5xyy5i] {
    background: var(--ec-card, #fff);
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    padding: 16px 18px;
}
.ap-card-head[b-4z1t5xyy5i] {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.ap-card-title[b-4z1t5xyy5i] {
    font-size: 13.5px; font-weight: 800;
    color: var(--ec-text); margin: 0;
}
.ap-edit-btn[b-4z1t5xyy5i] {
    background: transparent;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    padding: 6px 11px;
    font-size: 11.5px; font-weight: 700;
    color: var(--ec-blue);
    cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 4px;
}
.ap-edit-btn:disabled[b-4z1t5xyy5i] { opacity: 0.55; cursor: not-allowed; }

/* ── Personal info / address rows ─────────────────────────────────── */
.ap-row[b-4z1t5xyy5i] {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--ec-border-soft);
}
.ap-row:last-child[b-4z1t5xyy5i] { border-bottom: none; }
.ap-row-label[b-4z1t5xyy5i] {
    font-size: 11px; font-weight: 700;
    color: var(--ec-muted);
    margin: 0;
    align-self: center;
}
.ap-row-value[b-4z1t5xyy5i] {
    font-size: 13px; font-weight: 600;
    color: var(--ec-text);
    margin: 0; line-height: 1.45;
    text-align: right;
}
.ap-row-value--multi[b-4z1t5xyy5i] { white-space: pre-wrap; }

/* ── Inline edit form ─────────────────────────────────────────────── */
.ap-form[b-4z1t5xyy5i] { display: flex; flex-direction: column; gap: 10px; }
.ap-form-row[b-4z1t5xyy5i] { display: flex; flex-direction: column; gap: 5px; }
.ap-form-row--split[b-4z1t5xyy5i] { flex-direction: row; gap: 10px; }
.ap-form-row--postal[b-4z1t5xyy5i] { flex: 0 0 130px; }
.ap-form-row--city[b-4z1t5xyy5i] { flex: 1; min-width: 0; }
.ap-form-label[b-4z1t5xyy5i] {
    font-size: 11px; font-weight: 700;
    color: var(--ec-muted);
    letter-spacing: 0.06em; text-transform: uppercase;
    margin: 0;
}
.ap-form-input[b-4z1t5xyy5i],
.ap-form-textarea[b-4z1t5xyy5i] {
    width: 100%;
    background: var(--ec-blue-gh, #f4f6fc);
    border: 1px solid transparent;
    border-radius: 9px;
    padding: 9px 12px;
    font-size: 13px;
    color: var(--ec-text);
    font-family: inherit;
    outline: none;
    transition: background .15s, border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
.ap-form-input:focus[b-4z1t5xyy5i],
.ap-form-textarea:focus[b-4z1t5xyy5i] {
    background: #fff;
    border-color: var(--ec-blue);
    box-shadow: 0 0 0 3px rgba(59, 95, 192, 0.14);
}
.ap-form-input:disabled[b-4z1t5xyy5i],
.ap-form-textarea:disabled[b-4z1t5xyy5i] { opacity: 0.55; cursor: not-allowed; }

.ap-form-readonly[b-4z1t5xyy5i] {
    display: flex; flex-direction: column; gap: 3px;
    padding: 6px 0 4px;
    border-top: 1px solid var(--ec-border-soft);
    margin: 6px 0 0;
}
.ap-readonly-note[b-4z1t5xyy5i] {
    font-size: 10px; color: var(--ec-muted); font-weight: 600;
    margin-left: 8px;
}

.ap-form-error[b-4z1t5xyy5i] {
    display: flex; align-items: center; gap: 8px;
    background: var(--ec-red-lt);
    color: var(--ec-red);
    border: 1px solid rgba(220, 38, 38, 0.22);
    border-radius: 9px;
    padding: 8px 12px;
    font-size: 12px; font-weight: 600;
}

.ap-form-actions[b-4z1t5xyy5i] {
    display: flex; gap: 8px; justify-content: flex-end;
    padding-top: 4px;
}
.ap-form-cancel[b-4z1t5xyy5i] {
    background: #fff; border: 1px solid var(--ec-border);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 12.5px; font-weight: 700;
    color: var(--ec-sub);
    cursor: pointer; font-family: inherit;
}
.ap-form-cancel:hover:not(:disabled)[b-4z1t5xyy5i] { color: var(--ec-text); border-color: var(--ec-muted); }
.ap-form-save[b-4z1t5xyy5i] {
    background: var(--ec-blue);
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 12.5px; font-weight: 800;
    color: #fff;
    cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 6px;
    box-shadow: 0 4px 12px -4px rgba(41, 68, 160, 0.4);
}
.ap-form-save:hover:not(:disabled)[b-4z1t5xyy5i] { filter: brightness(1.05); }
.ap-form-cancel:disabled[b-4z1t5xyy5i],
.ap-form-save:disabled[b-4z1t5xyy5i] { opacity: 0.55; cursor: not-allowed; }
.ap-form-spinner[b-4z1t5xyy5i] {
    width: 14px; height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff; border-radius: 50%;
    animation: ap-form-spin-b-4z1t5xyy5i 0.7s linear infinite;
}
@keyframes ap-form-spin-b-4z1t5xyy5i { to { transform: rotate(360deg); } }

/* ── Institution row ──────────────────────────────────────────────── */
.ap-inst-row[b-4z1t5xyy5i] {
    width: 100%;
    display: flex; align-items: center; gap: 11px;
    padding: 12px 0;
    border-bottom: 1px solid var(--ec-border-soft);
    background: transparent;
    border-top: none; border-left: none; border-right: none;
    cursor: pointer; font-family: inherit; text-align: left;
}
.ap-inst-row:last-child[b-4z1t5xyy5i] { border-bottom: none; }
.ap-inst-row:hover[b-4z1t5xyy5i] { background: var(--ec-blue-gh, #f4f6fc); }
.ap-inst-avatar[b-4z1t5xyy5i] {
    width: 42px; height: 42px; border-radius: 11px;
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12.5px; font-weight: 800;
    flex-shrink: 0;
    letter-spacing: 0.04em;
    overflow: hidden;
}
.ap-inst-logo[b-4z1t5xyy5i] {
    width: 100%; height: 100%; object-fit: cover;
}
.ap-inst-body[b-4z1t5xyy5i] { flex: 1; min-width: 0; }
.ap-inst-name[b-4z1t5xyy5i] {
    font-size: 13.5px; font-weight: 800;
    color: var(--ec-text); margin: 0;
}
.ap-inst-meta[b-4z1t5xyy5i] {
    font-size: 11px; color: var(--ec-muted); margin: 2px 0 0;
}
.ap-inst-chev[b-4z1t5xyy5i] { color: var(--ec-muted); font-size: 13px; }

.ap-empty[b-4z1t5xyy5i] { font-size: 12.5px; color: var(--ec-muted); margin: 0; }

/* ── Security rows ────────────────────────────────────────────────── */
.ap-sec-row[b-4z1t5xyy5i] {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 0;
    border-bottom: 1px solid var(--ec-border-soft);
}
.ap-sec-row:last-child[b-4z1t5xyy5i] { border-bottom: none; }
.ap-sec-icon[b-4z1t5xyy5i] {
    width: 34px; height: 34px; border-radius: 9px;
    background: var(--ec-bg);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; color: var(--ec-sub); font-size: 14px;
}
.ap-sec-body[b-4z1t5xyy5i] { flex: 1; min-width: 0; }
.ap-sec-label[b-4z1t5xyy5i] { font-size: 12.5px; font-weight: 700; color: var(--ec-text); margin: 0; }
.ap-sec-sub[b-4z1t5xyy5i] { font-size: 10.5px; color: var(--ec-muted); margin: 2px 0 0; }
.ap-sec-sub--warn[b-4z1t5xyy5i] { color: var(--ec-amber); font-weight: 700; }
.ap-sec-cta[b-4z1t5xyy5i] {
    background: transparent;
    border: 1px solid var(--ec-border);
    border-radius: 7px;
    padding: 5px 10px;
    font-size: 11px; font-weight: 700;
    color: var(--ec-blue);
    cursor: pointer; font-family: inherit;
    text-decoration: none;
}
.ap-sec-cta:disabled[b-4z1t5xyy5i] { opacity: 0.6; cursor: not-allowed; }
.ap-sec-cta--warn[b-4z1t5xyy5i] {
    background: var(--ec-amber);
    border-color: var(--ec-amber);
    color: #fff;
    font-weight: 800;
}
.ap-sec-soon[b-4z1t5xyy5i] {
    font-size: 10px; font-weight: 800;
    color: var(--ec-muted);
    background: var(--ec-border-soft);
    padding: 5px 10px;
    border-radius: 6px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ── Sign-out CTA ─────────────────────────────────────────────────── */
.ap-signout[b-4z1t5xyy5i] {
    width: 100%;
    background: #fff;
    border: 1px solid #fecaca;
    border-radius: 11px;
    padding: 12px;
    font-size: 13px; font-weight: 700;
    color: var(--ec-red);
    cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.ap-signout:hover[b-4z1t5xyy5i] { background: var(--ec-red-lt); }

@media (max-width: 1000px) {
    .ap-body[b-4z1t5xyy5i] { grid-template-columns: 1fr; }
    .ap-row[b-4z1t5xyy5i] { grid-template-columns: 1fr; gap: 2px; }
    .ap-row-label[b-4z1t5xyy5i] { font-size: 10.5px; }
    .ap-row-value[b-4z1t5xyy5i] { text-align: left; }
}
/* /Components/Pages/Admin/KgDevelopmentAreas.razor.rz.scp.css */
.kga-page[b-hfdq0t8wt6] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.kga-intro[b-hfdq0t8wt6] {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ec-sub);
    max-width: 760px;
    margin: 0;
}

/* ── KPI strip ── */
.kga-kpis[b-hfdq0t8wt6] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

@media (max-width: 900px) {
    .kga-kpis[b-hfdq0t8wt6] { grid-template-columns: repeat(2, 1fr); }
}

/* ── Area grid ── */
.kga-grid[b-hfdq0t8wt6] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

@media (max-width: 760px) {
    .kga-grid[b-hfdq0t8wt6] { grid-template-columns: 1fr; }
}

.kga-card[b-hfdq0t8wt6] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    padding: 16px 18px;
    cursor: pointer;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
}

.kga-card:hover[b-hfdq0t8wt6] {
    border-color: var(--ec-border-strong, #cdd3e0);
    box-shadow: 0 4px 16px rgba(13, 23, 51, 0.06);
}

.kga-card-top[b-hfdq0t8wt6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.kga-card-icon[b-hfdq0t8wt6] {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kga-card-edit[b-hfdq0t8wt6] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--ec-border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.kga-card-code[b-hfdq0t8wt6] {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    margin: 2px 0 0;
}

.kga-card-name[b-hfdq0t8wt6] {
    font-size: 15.5px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}

.kga-card-desc[b-hfdq0t8wt6] {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ec-sub);
    margin: 0;
}

.kga-card-pills[b-hfdq0t8wt6] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.kga-pill[b-hfdq0t8wt6] {
    font-size: 11px;
    font-weight: 700;
    color: var(--ec-sub);
    background: var(--ec-bg);
    border: 1px solid var(--ec-border-soft);
    border-radius: 999px;
    padding: 3px 9px;
}

.kga-pill-count[b-hfdq0t8wt6] {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    color: var(--ec-text);
}

/* ── Add card ── */
.kga-card--add[b-hfdq0t8wt6] {
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-style: dashed;
    border-color: var(--ec-border);
    background: var(--ec-bg);
    min-height: 150px;
}

.kga-card--add:hover[b-hfdq0t8wt6] { box-shadow: none; }

.kga-add-icon[b-hfdq0t8wt6] {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--ec-border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.kga-add-label[b-hfdq0t8wt6] {
    font-size: 13px;
    font-weight: 700;
    color: var(--ec-sub);
    margin: 0;
}

/* ── Slide-over ── */
.kga-scrim[b-hfdq0t8wt6] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    z-index: 1500;
    display: flex;
    justify-content: flex-end;
    animation: kga-fade-b-hfdq0t8wt6 0.18s ease;
}

.kga-sheet[b-hfdq0t8wt6] {
    width: min(520px, 96%);
    height: 100%;
    background: #fff;
    box-shadow: -12px 0 40px rgba(13, 23, 51, 0.16);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: kga-slide-b-hfdq0t8wt6 0.22s ease-out;
}

@keyframes kga-fade-b-hfdq0t8wt6 { from { opacity: 0; } to { opacity: 1; } }
@keyframes kga-slide-b-hfdq0t8wt6 { from { transform: translateX(24px); opacity: 0.4; } to { transform: translateX(0); opacity: 1; } }

.kga-sheet-bar[b-hfdq0t8wt6] {
    height: 3px;
    flex-shrink: 0;
}

.kga-sheet-head[b-hfdq0t8wt6] {
    padding: 14px 22px;
    border-bottom: 1px solid var(--ec-border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-shrink: 0;
}

.kga-sheet-headrow[b-hfdq0t8wt6] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.kga-sheet-icon[b-hfdq0t8wt6] {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kga-sheet-eyebrow[b-hfdq0t8wt6] {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}

.kga-sheet-title[b-hfdq0t8wt6] {
    font-size: 17px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 2px 0 0;
}

.kga-sheet-close[b-hfdq0t8wt6] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--ec-border);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kga-sheet-body[b-hfdq0t8wt6] {
    flex: 1;
    overflow-y: auto;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--ec-bg);
}

.kga-field[b-hfdq0t8wt6] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kga-field-label[b-hfdq0t8wt6] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ec-sub);
}

.kga-input[b-hfdq0t8wt6],
.kga-area[b-hfdq0t8wt6] {
    font-family: inherit;
    font-size: 13.5px;
    color: var(--ec-text);
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    padding: 9px 11px;
    width: 100%;
}

.kga-area[b-hfdq0t8wt6] { resize: vertical; line-height: 1.45; }

.kga-input:focus[b-hfdq0t8wt6],
.kga-area:focus[b-hfdq0t8wt6] {
    outline: none;
    border-color: var(--ec-purple);
}

.kga-create-hint[b-hfdq0t8wt6] {
    font-size: 12px;
    color: var(--ec-sub);
    margin: 0;
}

/* ── Band tabs ── */
.kga-bandtabs[b-hfdq0t8wt6] {
    display: flex;
    gap: 6px;
    border-bottom: 1px solid var(--ec-border-soft);
    padding-bottom: 2px;
}

.kga-bandtab[b-hfdq0t8wt6] {
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: var(--ec-sub);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 7px 6px;
    cursor: pointer;
}

.kga-bandtab--on[b-hfdq0t8wt6] {
    color: var(--ec-purple);
    border-bottom-color: var(--ec-purple);
}

/* ── Milestone list ── */
.kga-ms-list[b-hfdq0t8wt6] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kga-ms-row[b-hfdq0t8wt6] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--ec-border-soft);
    border-radius: 10px;
    padding: 10px 12px;
}

.kga-ms-num[b-hfdq0t8wt6] {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--ec-bg);
    color: var(--ec-sub);
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kga-ms-body[b-hfdq0t8wt6] { flex: 1; min-width: 0; }

.kga-ms-title[b-hfdq0t8wt6] {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ec-text);
    margin: 0;
}

.kga-ms-beh[b-hfdq0t8wt6] {
    font-size: 12px;
    line-height: 1.4;
    color: var(--ec-sub);
    margin: 2px 0 0;
}

.kga-ms-icon[b-hfdq0t8wt6] {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 1px solid var(--ec-border);
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kga-ms-edit[b-hfdq0t8wt6] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.kga-ms-edit-foot[b-hfdq0t8wt6] {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
}

/* Compact buttons inside the inline add/edit milestone form. */
.kga-ms-edit-foot .kga-btn[b-hfdq0t8wt6] {
    font-size: 12px;
    padding: 7px 13px;
}

.kga-ms-add[b-hfdq0t8wt6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ec-sub);
    background: var(--ec-bg);
    border: 1px dashed var(--ec-border);
    border-radius: 10px;
    padding: 11px;
    cursor: pointer;
}

/* ── Buttons ── */
.kga-btn[b-hfdq0t8wt6] {
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    border-radius: 9px;
    padding: 9px 16px;
    cursor: pointer;
    border: 1px solid var(--ec-border);
    background: #fff;
    color: var(--ec-text);
}

.kga-btn-primary[b-hfdq0t8wt6] {
    background: var(--ec-purple);
    border-color: var(--ec-purple);
    color: #fff;
}

.kga-btn-pink[b-hfdq0t8wt6] {
    background: var(--ec-pink);
    border-color: var(--ec-pink);
    color: #fff;
}

.kga-btn:disabled[b-hfdq0t8wt6] { opacity: .55; cursor: default; }

.kga-delete-area[b-hfdq0t8wt6] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ec-red);
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--ec-red) 30%, transparent);
    border-radius: 9px;
    padding: 9px 14px;
    cursor: pointer;
    align-self: flex-start;
    margin-top: 4px;
}

.kga-sheet-foot[b-hfdq0t8wt6] {
    padding: 12px 22px;
    border-top: 1px solid var(--ec-border-soft);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.kga-foot-hint[b-hfdq0t8wt6] {
    font-size: 12px;
    color: var(--ec-sub);
    margin: 0;
}
/* /Components/Pages/Announcements/AnnouncementsPage.razor.rz.scp.css */
/* Admin · Announcements — prototype AWAnnouncements (EduConnect All Roles.html
   lines 29789-30119). Pixel-faithful port: KPI strip, filter chips, card stack
   with left-color stripe + pill row + read-engagement bar, right slide-over
   editor with audience scope / priority / category / target / pin / expiry /
   photo palette, centered delete confirm. */

.aw-ann-page[b-uljzlh1x26] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── KPI strip ────────────────────────────────────────────────────────── */
.aw-ann-kpis[b-uljzlh1x26] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 4px;
}

/* ── Toolbar (tabs + new button) ──────────────────────────────────────── */
.aw-ann-toolbar[b-uljzlh1x26] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.aw-ann-tabs[b-uljzlh1x26] {
    display: flex;
    gap: 5px;
}

.aw-ann-tab[b-uljzlh1x26] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #fff;
    color: #5d6a89;
    border: 1px solid #e7eaf3;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background-color .12s, color .12s, border-color .12s;
}
.aw-ann-tab:hover:not(.is-active)[b-uljzlh1x26] {
    background: #f7f8fc;
}
.aw-ann-tab-count[b-uljzlh1x26] {
    display: inline-block;
    min-width: 14px;
    padding: 1px 5px;
    background: #eef0f6;
    color: #8b95ad;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
    text-align: center;
}

/* page-level "New announcement" CTA now uses the shared .ec-btn-primary class */

/* ── Banner ───────────────────────────────────────────────────────────── */
.aw-ann-banner[b-uljzlh1x26] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    border-radius: 10px;
    font-size: 13px;
}
.aw-ann-banner-close[b-uljzlh1x26] {
    margin-left: auto;
    background: transparent;
    border: none;
    color: #b91c1c;
    cursor: pointer;
    font-size: 14px;
}

/* ── List ─────────────────────────────────────────────────────────────── */
.aw-ann-list[b-uljzlh1x26] {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.aw-ann-card[b-uljzlh1x26] {
    background: #fff;
    border: 1px solid #e7eaf3;
    border-left: 4px solid #3b5fc0;
    border-radius: 14px;
    padding: 14px 18px;
    cursor: pointer;
    transition: box-shadow .15s, transform .12s;
}
.aw-ann-card:hover[b-uljzlh1x26] {
    box-shadow: 0 4px 14px rgba(13, 23, 51, .07);
}

.aw-ann-card-row[b-uljzlh1x26] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 11px;
    flex-wrap: wrap;
}

.aw-ann-card-body[b-uljzlh1x26] {
    flex: 1 1 280px;
    min-width: 0;
}

.aw-ann-pills[b-uljzlh1x26] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.aw-ann-pill[b-uljzlh1x26] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.4;
}
.aw-ann-pill .bi[b-uljzlh1x26] { font-size: 10px; }

.aw-ann-pill-pinned[b-uljzlh1x26] {
    color: #7c3aed;
    background: rgba(124, 58, 237, 0.08);
}

.aw-ann-pill-status[b-uljzlh1x26] {
    text-transform: none;
    letter-spacing: 0.06em;
}

.aw-ann-date[b-uljzlh1x26] {
    font-size: 11px;
    color: #8b95ad;
    font-weight: 600;
}

.aw-ann-title[b-uljzlh1x26] {
    font-size: 14.5px;
    font-weight: 800;
    color: #1a2540;
    margin: 0 0 4px;
}

.aw-ann-body[b-uljzlh1x26] {
    font-size: 12px;
    color: #5d6a89;
    line-height: 1.55;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.aw-ann-audience[b-uljzlh1x26] {
    font-size: 10.5px;
    color: #8b95ad;
    margin: 6px 0 0;
    font-weight: 600;
}

/* Read engagement ── prototype right column on published rows */
.aw-ann-read[b-uljzlh1x26] {
    flex-shrink: 0;
    text-align: right;
    min-width: 140px;
}
.aw-ann-read-label[b-uljzlh1x26] {
    font-size: 10px;
    font-weight: 800;
    color: #8b95ad;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}
.aw-ann-read-value[b-uljzlh1x26] {
    font-size: 18px;
    font-weight: 800;
    color: #1a2540;
    margin: 2px 0 0;
}
.aw-ann-read-bar[b-uljzlh1x26] {
    width: 120px;
    height: 5px;
    border-radius: 3px;
    background: #eef0f6;
    overflow: hidden;
    margin: 5px 0 0 auto;
}
.aw-ann-read-bar-fill[b-uljzlh1x26] {
    height: 100%;
    background: #16a34a;
    transition: width .25s ease-out;
}
.aw-ann-read-pct[b-uljzlh1x26] {
    font-size: 11px;
    color: #8b95ad;
    margin: 5px 0 0;
}

/* ── Card actions ─────────────────────────────────────────────────────── */
.aw-ann-actions[b-uljzlh1x26] {
    margin-top: 11px;
    padding-top: 11px;
    border-top: 1px solid #eef0f6;
    display: flex;
    gap: 6px;
}

.aw-ann-btn[b-uljzlh1x26] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    background: #fff;
    border: 1px solid #e7eaf3;
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 700;
    color: #5d6a89;
    cursor: pointer;
    font-family: inherit;
    transition: background-color .12s, color .12s, border-color .12s;
}
.aw-ann-btn:disabled[b-uljzlh1x26] {
    opacity: .55;
    cursor: not-allowed;
}
.aw-ann-btn .bi[b-uljzlh1x26] { font-size: 12px; }

.aw-ann-btn-ghost:hover:not(:disabled)[b-uljzlh1x26] {
    background: #f7f8fc;
    color: #1a2540;
}

.aw-ann-btn-publish[b-uljzlh1x26] {
    background: #7c3aed;
    border-color: #7c3aed;
    color: #fff;
    padding: 6px 12px;
    font-weight: 800;
}
.aw-ann-btn-publish:hover:not(:disabled)[b-uljzlh1x26] {
    filter: brightness(0.95);
}

.aw-ann-btn-danger[b-uljzlh1x26] {
    color: #dc2626;
}
.aw-ann-btn-danger:hover:not(:disabled)[b-uljzlh1x26] {
    background: #fee2e2;
    border-color: #fecaca;
}

.aw-ann-btn-danger-solid[b-uljzlh1x26] {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
    padding: 8px 16px;
    font-weight: 800;
}
.aw-ann-btn-danger-solid:hover:not(:disabled)[b-uljzlh1x26] {
    filter: brightness(0.95);
}

.aw-ann-btn-primary[b-uljzlh1x26] {
    background: #7c3aed;
    border-color: #7c3aed;
    color: #fff;
    padding: 8px 16px;
    font-size: 12.5px;
    font-weight: 800;
}
.aw-ann-btn-primary:hover:not(:disabled)[b-uljzlh1x26] {
    filter: brightness(0.95);
}

/* ── Empty ───────────────────────────────────────────────────────────── */
.aw-ann-empty[b-uljzlh1x26] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 48px 24px;
    background: #fff;
    border: 1px solid #e7eaf3;
    border-radius: 14px;
    color: #8b95ad;
    text-align: center;
}
.aw-ann-empty-icon[b-uljzlh1x26] { opacity: 0.6; margin-bottom: 4px; }
.aw-ann-empty-title[b-uljzlh1x26] { font-size: 14px; font-weight: 800; color: #1a2540; margin: 0; }
.aw-ann-empty-sub[b-uljzlh1x26] { font-size: 12.5px; color: #8b95ad; margin: 0; }

/* ── Slide-over editor ───────────────────────────────────────────────── */
.aw-ann-overlay[b-uljzlh1x26] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 92;
    display: flex;
    justify-content: flex-end;
    animation: aw-ann-fade-in-b-uljzlh1x26 .14s ease-out;
}

.aw-ann-overlay-center[b-uljzlh1x26] {
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 95;
}

@keyframes aw-ann-fade-in-b-uljzlh1x26 { from { opacity: 0 } to { opacity: 1 } }
@keyframes aw-ann-slide-in-b-uljzlh1x26 { from { transform: translateX(16px); opacity: 0 } to { transform: none; opacity: 1 } }

.aw-ann-sheet[b-uljzlh1x26] {
    width: min(680px, 95%);
    height: 100%;
    background: #fff;
    box-shadow: -12px 0 40px rgba(13, 23, 51, .16);
    display: flex;
    flex-direction: column;
    animation: aw-ann-slide-in-b-uljzlh1x26 .16s ease-out;
}

.aw-ann-sheet-hdr[b-uljzlh1x26] {
    padding: 20px 26px 14px;
    background: linear-gradient(135deg, rgba(124, 58, 237, .08), #fff);
    border-bottom: 1px solid #e7eaf3;
    position: relative;
}

.aw-ann-sheet-close[b-uljzlh1x26] {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e7eaf3;
    cursor: pointer;
    font-size: 16px;
    color: #5d6a89;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.aw-ann-sheet-eyebrow[b-uljzlh1x26] {
    font-size: 10.5px;
    font-weight: 800;
    color: #7c3aed;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
}

.aw-ann-sheet-title[b-uljzlh1x26] {
    font-size: 19px;
    font-weight: 800;
    color: #1a2540;
    margin: 4px 0 0;
    letter-spacing: -0.01em;
}

.aw-ann-sheet-sub[b-uljzlh1x26] {
    font-size: 11.5px;
    color: #8b95ad;
    margin: 3px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.aw-ann-sheet-sub .bi[b-uljzlh1x26] { font-size: 12px; }

.aw-ann-sheet-body[b-uljzlh1x26] {
    padding: 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    flex: 1;
}

.aw-ann-sec[b-uljzlh1x26] { display: flex; flex-direction: column; gap: 7px; }
.aw-ann-sec-grid[b-uljzlh1x26] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.aw-ann-sec-grid > div[b-uljzlh1x26] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.aw-ann-sec-label[b-uljzlh1x26] {
    font-size: 11px;
    font-weight: 800;
    color: #8b95ad;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}

.aw-ann-pill-row[b-uljzlh1x26] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* ── Pickable pills (Schoolwide / One class etc.) ─────────────────────── */
.aw-ann-pickpill[b-uljzlh1x26] {
    padding: 8px 13px;
    border-radius: 8px;
    border: none;
    background: #fff;
    color: #5d6a89;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    box-shadow: inset 0 0 0 1px #e7eaf3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background-color .12s, color .12s, box-shadow .12s;
}
.aw-ann-pickpill.is-active[b-uljzlh1x26] {
    background: #7c3aed;
    color: #fff;
    box-shadow: 0 2px 6px rgba(124, 58, 237, .3);
}
.aw-ann-pickpill .bi[b-uljzlh1x26] { font-size: 12px; }

/* Priority pills (rounded) */
.aw-ann-prio[b-uljzlh1x26] {
    padding: 7px 11px;
    border-radius: 8px;
    border: none;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.04em;
}

/* Send-to target pills */
.aw-ann-target[b-uljzlh1x26] {
    padding: 7px 11px;
    border-radius: 8px;
    border: none;
    background: #fff;
    color: #5d6a89;
    box-shadow: inset 0 0 0 1px #e7eaf3;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    transition: background-color .12s, color .12s, box-shadow .12s;
}
.aw-ann-target.is-active[b-uljzlh1x26] {
    background: #1a2540;
    color: #fff;
    box-shadow: none;
}

/* Class picker grid */
.aw-ann-class-grid[b-uljzlh1x26] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.aw-ann-class-group-label[b-uljzlh1x26] {
    font-size: 10px;
    font-weight: 800;
    color: #8b95ad;
    margin: 0;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.aw-ann-class-row[b-uljzlh1x26] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.aw-ann-classbtn[b-uljzlh1x26] {
    padding: 7px 12px;
    border-radius: 8px;
    border: none;
    background: #fff;
    color: #5d6a89;
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    box-shadow: inset 0 0 0 1px #e7eaf3;
    transition: background-color .12s, color .12s, box-shadow .12s;
}

/* Inputs */
.aw-ann-input[b-uljzlh1x26] {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid #e7eaf3;
    border-radius: 9px;
    font-size: 12.5px;
    font-family: inherit;
    background: #fff;
    color: #1a2540;
    outline: none;
    box-sizing: border-box;
    transition: border-color .12s, box-shadow .12s;
}
.aw-ann-input:focus[b-uljzlh1x26] {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .12);
}

.aw-ann-input-title[b-uljzlh1x26] {
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
}

.aw-ann-textarea[b-uljzlh1x26] {
    min-height: 110px;
    resize: vertical;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.55;
}

/* Pin toggle button */
.aw-ann-pintoggle[b-uljzlh1x26] {
    width: 100%;
    padding: 9px 11px;
    border: 1.5px solid #e7eaf3;
    border-radius: 9px;
    background: #fff;
    color: #5d6a89;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background-color .12s, color .12s, border-color .12s;
}
.aw-ann-pintoggle.is-on[b-uljzlh1x26] {
    background: rgba(124, 58, 237, 0.08);
    border-color: #7c3aed;
    color: #7c3aed;
}

/* Media (real uploads) — existing + pending grid + upload zone */
.aw-ann-upload-hint[b-uljzlh1x26] {
    font-size: 11px;
    color: #8b95ad;
    margin: -2px 0 0;
}
.aw-ann-sec-label-sub[b-uljzlh1x26] {
    color: #8b95ad;
    margin-top: 4px;
}
.aw-ann-media-grid[b-uljzlh1x26] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
}
.aw-ann-media-tile[b-uljzlh1x26] {
    position: relative;
    aspect-ratio: 1;
    border-radius: 9px;
    overflow: hidden;
    background: #eef0f6;
    transition: opacity .15s;
}
.aw-ann-media-tile.is-removed[b-uljzlh1x26] {
    opacity: 0.4;
}
.aw-ann-media-thumb[b-uljzlh1x26] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.aw-ann-media-thumb.is-video[b-uljzlh1x26] {
    background: #1a2540;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    position: relative;
}
.aw-ann-media-thumb.is-video img[b-uljzlh1x26] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
}
.aw-ann-media-play[b-uljzlh1x26] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 28px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}
.aw-ann-media-remove[b-uljzlh1x26],
.aw-ann-media-restore[b-uljzlh1x26] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.75);
    color: #fff;
    border: none;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.aw-ann-media-remove:hover[b-uljzlh1x26] { background: #dc2626; }
.aw-ann-media-restore[b-uljzlh1x26] { background: rgba(124, 58, 237, 0.85); }
.aw-ann-media-restore:hover[b-uljzlh1x26] { background: #7c3aed; }
.aw-ann-media-name[b-uljzlh1x26] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 4px 6px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0), rgba(15, 23, 42, 0.8));
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.aw-ann-upload-zone[b-uljzlh1x26] {
    display: block;
    border: 1.5px dashed #cdd3e1;
    border-radius: 10px;
    padding: 18px;
    text-align: center;
    cursor: pointer;
    transition: background-color .12s, border-color .12s;
    background: #fafbff;
}
.aw-ann-upload-zone:hover[b-uljzlh1x26] {
    background: #f3f5fc;
    border-color: #7c3aed;
}
.aw-ann-file-input[b-uljzlh1x26] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.aw-ann-upload-inner[b-uljzlh1x26] { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.aw-ann-upload-icon[b-uljzlh1x26] { font-size: 22px; color: #7c3aed; }
.aw-ann-upload-text[b-uljzlh1x26] { font-size: 12.5px; font-weight: 700; color: #1a2540; margin: 0; }
.aw-ann-upload-sub[b-uljzlh1x26]  { font-size: 11px; color: #8b95ad; margin: 0; }
.aw-ann-upload-err[b-uljzlh1x26] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #b91c1c;
    background: #fee2e2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 6px 10px;
    margin: 0;
}

/* Sheet footer */
.aw-ann-sheet-ftr[b-uljzlh1x26] {
    padding: 12px 24px;
    border-top: 1px solid #eef0f6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    background: #fff;
}
.aw-ann-sheet-ftr-actions[b-uljzlh1x26] {
    display: flex;
    gap: 8px;
}

/* ── Delete confirm ──────────────────────────────────────────────────── */
.aw-ann-confirm[b-uljzlh1x26] {
    background: #fff;
    border-radius: 14px;
    max-width: 440px;
    width: 100%;
    box-shadow: 0 24px 60px rgba(13, 23, 51, .4);
    animation: aw-ann-slide-in-b-uljzlh1x26 .16s ease-out;
}
.aw-ann-confirm-hdr[b-uljzlh1x26] {
    padding: 18px 22px;
    border-bottom: 1px solid #eef0f6;
}
.aw-ann-confirm-eyebrow[b-uljzlh1x26] {
    font-size: 10.5px;
    font-weight: 800;
    color: #dc2626;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
}
.aw-ann-confirm-title[b-uljzlh1x26] {
    font-size: 16px;
    font-weight: 800;
    color: #1a2540;
    margin: 4px 0 0;
}
.aw-ann-confirm-body[b-uljzlh1x26] {
    padding: 14px 22px;
    font-size: 13px;
    color: #1a2540;
    line-height: 1.55;
}
.aw-ann-confirm-ftr[b-uljzlh1x26] {
    padding: 12px 22px;
    border-top: 1px solid #eef0f6;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 980px) {
    .aw-ann-kpis[b-uljzlh1x26] {
        grid-template-columns: repeat(2, 1fr);
    }
    .aw-ann-sec-grid[b-uljzlh1x26] {
        grid-template-columns: 1fr;
    }
    .aw-ann-media-grid[b-uljzlh1x26] {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    }
}
@media (max-width: 640px) {
    .aw-ann-read[b-uljzlh1x26] { min-width: 100%; text-align: left; }
    .aw-ann-read-bar[b-uljzlh1x26] { margin-left: 0; }
    .aw-ann-tabs[b-uljzlh1x26] { flex-wrap: wrap; }
}
/* /Components/Pages/Attendance/AdminAttendanceDashboard.razor.rz.scp.css */
/* Admin Attendance dashboard — transcribed from prototype AWAttendance
   (EduConnect All Roles.html lines 20879-21035). */

.atda-page[b-x40xrlg1zn] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Banner / loading / empty ───────────────────────────────────────── */
.atda-banner[b-x40xrlg1zn] {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 13px; font-weight: 600;
}
.atda-banner-error[b-x40xrlg1zn] {
    background: color-mix(in srgb, var(--ec-red) 8%, transparent);
    color: var(--ec-red);
}
.atda-banner-close[b-x40xrlg1zn] {
    margin-left: auto;
    background: none; border: none; cursor: pointer;
    color: inherit; font-size: 16px; padding: 0;
}

.atda-loading[b-x40xrlg1zn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px 24px;
    color: var(--ec-muted);
    gap: 14px;
}
.atda-spinner[b-x40xrlg1zn] {
    width: 38px; height: 38px;
    border: 3px solid var(--ec-border-soft);
    border-top-color: var(--ec-blue);
    border-radius: 50%;
    animation: atda-spin-b-x40xrlg1zn 0.75s linear infinite;
}
@keyframes atda-spin-b-x40xrlg1zn { to { transform: rotate(360deg); } }

.atda-empty[b-x40xrlg1zn] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    padding: 60px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--ec-muted);
    text-align: center;
}
.atda-empty-icon[b-x40xrlg1zn] { font-size: 32px; opacity: 0.4; margin-bottom: 6px; }
.atda-empty-title[b-x40xrlg1zn] { font-size: 14px; font-weight: 800; color: var(--ec-text); margin: 0; }
.atda-empty-sub[b-x40xrlg1zn]   { font-size: 12px; color: var(--ec-muted); margin: 0; max-width: 380px; }

/* ── KPIs ──────────────────────────────────────────────────────────── */
.atda-kpis[b-x40xrlg1zn] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
@media (max-width: 980px) {
    .atda-kpis[b-x40xrlg1zn] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .atda-kpis[b-x40xrlg1zn] { grid-template-columns: 1fr; }
}

/* ── Card shell ─────────────────────────────────────────────────────── */
.atda-card[b-x40xrlg1zn] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 12px;
    overflow: hidden;
}
.atda-card-hdr[b-x40xrlg1zn] {
    padding: 12px 18px;
    border-bottom: 1px solid var(--ec-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.atda-card-title[b-x40xrlg1zn] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.atda-card-sub[b-x40xrlg1zn] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 0;
}

/* ── Per-class table ────────────────────────────────────────────────── */
.atda-table-head[b-x40xrlg1zn] {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr 1.4fr;
    padding: 10px 18px;
    background: var(--ec-bg);
    font-size: 10px;
    font-weight: 700;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.atda-table-row[b-x40xrlg1zn] {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr 1.4fr;
    padding: 12px 18px;
    border-top: 1px solid var(--ec-border-soft);
    align-items: center;
    gap: 8px;
}
.atda-table-row:hover[b-x40xrlg1zn] { background: color-mix(in srgb, var(--ec-bg) 50%, transparent); }
.atda-table-empty[b-x40xrlg1zn] {
    padding: 22px 18px;
    color: var(--ec-muted);
    font-size: 12px;
    text-align: center;
}

.atda-class-cell[b-x40xrlg1zn] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.atda-class-bar[b-x40xrlg1zn] {
    width: 10px; height: 30px;
    border-radius: 3px;
    flex-shrink: 0;
}
.atda-class-name[b-x40xrlg1zn] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ec-text);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.atda-class-sub[b-x40xrlg1zn] {
    font-size: 10px;
    color: var(--ec-muted);
    margin: 1px 0 0;
}

.atda-num[b-x40xrlg1zn] {
    font-size: 14px;
    font-weight: 800;
}
.atda-num--green[b-x40xrlg1zn] { color: var(--ec-green); }
.atda-num--red[b-x40xrlg1zn]   { color: var(--ec-red); }
.atda-num--muted[b-x40xrlg1zn] { color: var(--ec-muted); }

.atda-pct-cell[b-x40xrlg1zn] {
    display: flex;
    align-items: center;
    gap: 8px;
}
.atda-pct-bar[b-x40xrlg1zn] {
    flex: 1;
    height: 6px;
    background: var(--ec-border-soft);
    border-radius: 3px;
    overflow: hidden;
}
.atda-pct-fill[b-x40xrlg1zn] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
}
.atda-pct-num[b-x40xrlg1zn] {
    font-size: 13px;
    font-weight: 800;
    min-width: 42px;
    text-align: right;
}

@media (max-width: 760px) {
    .atda-table-head[b-x40xrlg1zn] { display: none; }
    .atda-table-row[b-x40xrlg1zn] {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 6px;
        row-gap: 10px;
    }
    .atda-class-cell[b-x40xrlg1zn] { grid-column: 1 / -1; }
    .atda-pct-cell[b-x40xrlg1zn] { grid-column: 1 / -1; }
}

/* ── Recent activity (prototype audit-log row layout) ────────────────── */
.atda-card-title[b-x40xrlg1zn] { display: flex; align-items: center; gap: 8px; }
.atda-card-title-icon[b-x40xrlg1zn] {
    font-size: 13px;
    color: var(--ec-blue);
}
.atda-card-aside[b-x40xrlg1zn] {
    font-size: 11px;
    color: var(--ec-muted);
    font-style: italic;
    margin: 0;
}
.atda-card-aside b[b-x40xrlg1zn] {
    color: var(--ec-blue);
    font-style: normal;
    font-weight: 700;
}

.atda-activity-row[b-x40xrlg1zn] {
    display: grid;
    grid-template-columns: 150px 1fr 110px 1.2fr 70px;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    border-top: 1px solid var(--ec-border-soft);
    border-left: 3px solid var(--ec-green);
}
.atda-activity-row:first-of-type[b-x40xrlg1zn] { border-top: none; }

.atda-activity-time[b-x40xrlg1zn] {
    font-size: 10.5px;
    color: var(--ec-muted);
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
    white-space: nowrap;
}

.atda-activity-student[b-x40xrlg1zn] { min-width: 0; }
.atda-activity-name[b-x40xrlg1zn] {
    font-size: 12px;
    font-weight: 700;
    color: var(--ec-text);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.atda-activity-class[b-x40xrlg1zn] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 1px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.atda-activity-pill[b-x40xrlg1zn] {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 3px 8px;
    border-radius: 5px;
    text-transform: uppercase;
    text-align: center;
    justify-self: start;
    line-height: 1.5;
}

.atda-activity-value[b-x40xrlg1zn] {
    font-size: 11.5px;
    color: var(--ec-text);
    font-weight: 600;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.atda-activity-value b[b-x40xrlg1zn] { font-weight: 800; }
.atda-strike[b-x40xrlg1zn] {
    text-decoration: line-through;
    color: var(--ec-muted);
    font-weight: 600;
}
.atda-arrow[b-x40xrlg1zn] { color: var(--ec-muted); }
.atda-capitalize[b-x40xrlg1zn] { text-transform: capitalize; }

.atda-activity-actor[b-x40xrlg1zn] {
    font-size: 10px;
    color: var(--ec-muted);
    text-align: right;
    white-space: nowrap;
}

@media (max-width: 880px) {
    .atda-activity-row[b-x40xrlg1zn] {
        grid-template-columns: 1fr 90px;
        grid-template-areas:
            "student pill"
            "value   value"
            "time    actor";
        row-gap: 4px;
    }
    .atda-activity-time[b-x40xrlg1zn]    { grid-area: time; }
    .atda-activity-student[b-x40xrlg1zn] { grid-area: student; }
    .atda-activity-pill[b-x40xrlg1zn]    { grid-area: pill; justify-self: end; }
    .atda-activity-value[b-x40xrlg1zn]   { grid-area: value; white-space: normal; }
    .atda-activity-actor[b-x40xrlg1zn]   { grid-area: actor; text-align: left; }
}

/* ── Heatmap ────────────────────────────────────────────────────────── */
.atda-heatmap-scroll[b-x40xrlg1zn] {
    overflow-x: auto;
    padding: 12px 18px 16px;
}
.atda-heatmap[b-x40xrlg1zn] {
    display: grid;
    gap: 4px;
    min-width: 100%;
}
.atda-heat-cell[b-x40xrlg1zn] {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    aspect-ratio: 1;
    min-height: 28px;
    font-size: 9px;
    font-weight: 800;
    color: #fff;
}
.atda-heat-pct[b-x40xrlg1zn] {
    transition: transform 0.15s;
}
.atda-heat-pct:hover[b-x40xrlg1zn] { transform: scale(1.08); }
.atda-heat-hdr[b-x40xrlg1zn] {
    background: transparent !important;
    color: var(--ec-muted);
    aspect-ratio: auto;
    min-height: unset;
    padding: 4px 0;
    font-size: 9px;
    letter-spacing: 0.06em;
    text-align: center;
    line-height: 1.1;
}
.atda-heat-day-hdr[b-x40xrlg1zn] { flex-direction: column; }
.atda-heat-day-num[b-x40xrlg1zn] {
    font-size: 12px;
    font-weight: 700;
    color: var(--ec-sub);
}
.atda-heat-class[b-x40xrlg1zn] {
    background: transparent !important;
    color: var(--ec-text);
    aspect-ratio: auto;
    min-height: unset;
    padding: 4px 6px 4px 0;
    font-size: 11px;
    font-weight: 700;
    justify-content: flex-start;
    gap: 6px;
}
.atda-heat-bar[b-x40xrlg1zn] {
    width: 4px;
    height: 16px;
    border-radius: 2px;
    flex-shrink: 0;
}
.atda-heat-name[b-x40xrlg1zn] {
    color: var(--ec-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* /Components/Pages/Auth/TwoFactorEnrollment.razor.rz.scp.css */
/* The .lp-card class (defined below, mirroring Login.razor) provides the
   card chrome — background, border, shadow, padding. Keep .ec-auth-wizard
   for any selector hooks but no card styling. */
.ec-auth-wizard[b-y2g992ef56] { display: block; }

/* ─────────────────────────────────────────────────────────────
   Shell — duplicated from Login.razor's inline <style> so the
   wizard page renders with the same mesh background, centered
   brand header, white card, and footer. Login uses inline
   <style> which is page-scoped to /login; duplicating here is
   the smallest-blast-radius way to share the visual language.
   If this gets copied a third time, promote to global app.css.
   ───────────────────────────────────────────────────────────── */
.lp-root[b-y2g992ef56] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #f9f9ff;
    background-image:
        radial-gradient(at 0% 0%,    rgba(46,93,171,0.05) 0px, transparent 50%),
        radial-gradient(at 100% 0%,  rgba(251,188,5,0.05) 0px, transparent 50%),
        radial-gradient(at 100% 100%,rgba(0,110,45,0.05)  0px, transparent 50%),
        radial-gradient(at 0% 100%,  rgba(46,93,171,0.05) 0px, transparent 50%);
    font-family: 'Manrope', 'Plus Jakarta Sans', sans-serif;
}
.lp-main[b-y2g992ef56] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}
.lp-center[b-y2g992ef56] {
    width: 100%;
    max-width: 448px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.lp-brand[b-y2g992ef56] { text-align: center; margin-bottom: 1.5rem; }
.lp-brand-row[b-y2g992ef56] {
    display: flex; align-items: center; justify-content: center;
    gap: 0.75rem; margin-bottom: 0.375rem;
}
.lp-brand-icon[b-y2g992ef56] { font-size: 2.25rem; color: var(--ec-primary); }
.lp-brand-name[b-y2g992ef56] {
    font-family: 'Plus Jakarta Sans', 'Helvetica Neue', sans-serif;
    font-size: 1.5rem; font-weight: 800;
    color: var(--ec-on-surface); letter-spacing: -0.02em;
}
.lp-brand-sub[b-y2g992ef56] { font-size: 0.8rem; font-weight: 500; color: var(--ec-on-surface-variant); margin: 0; }
.lp-card[b-y2g992ef56] {
    width: 100%;
    background: white;
    border-radius: 0.875rem;
    box-shadow: 0 20px 40px rgba(30,50,86,0.06);
    border: 1px solid rgba(159,178,221,0.1);
    padding: 2rem;
}
.lp-footer[b-y2g992ef56] { border-top: 1px solid rgba(159,178,221,0.1); background: white; flex-shrink: 0; }
.lp-footer-inner[b-y2g992ef56] {
    max-width: 1200px; margin: 0 auto;
    padding: 0.75rem 1.5rem;
    display: flex; align-items: center;
    justify-content: space-between; flex-wrap: wrap; gap: 0.75rem;
}
.lp-footer-left[b-y2g992ef56] { display: flex; align-items: center; gap: 1rem; }
.lp-footer-brand[b-y2g992ef56] { font-size: 0.875rem; font-weight: 700; color: var(--ec-primary); }
.lp-footer-divider[b-y2g992ef56] { width: 1px; height: 0.75rem; background: rgba(159,178,221,0.3); }
.lp-footer-copy[b-y2g992ef56] { font-size: 0.68rem; color: rgba(76,95,133,0.7); }
.lp-footer-nav[b-y2g992ef56] { display: flex; align-items: center; gap: 1.25rem; }
.lp-footer-nav a[b-y2g992ef56] {
    font-size: 0.68rem; color: rgba(76,95,133,0.7);
    text-decoration: none; transition: color 0.15s;
}
.lp-footer-nav a:hover[b-y2g992ef56] { color: var(--ec-primary); }

@media (max-width: 480px) {
    .lp-card[b-y2g992ef56] { padding: 1.5rem; }
    .lp-footer-inner[b-y2g992ef56] { flex-direction: column; align-items: flex-start; }
    .lp-footer-divider[b-y2g992ef56] { display: none; }
}

.ec-wizard-step[b-y2g992ef56] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ec-wizard-icon[b-y2g992ef56] {
    width: 56px;
    height: 56px;
    background: rgba(46, 93, 171, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--ec-primary);
    margin-bottom: 16px;
}

.ec-wizard-icon--success[b-y2g992ef56] {
    background: rgba(0, 110, 45, 0.1);
    color: #006e2d;
}

.ec-wizard-title[b-y2g992ef56] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ec-on-surface);
    margin: 0 0 8px;
}

.ec-wizard-body[b-y2g992ef56] {
    font-size: 0.875rem;
    color: var(--ec-on-surface-variant);
    margin: 0 0 24px;
    line-height: 1.6;
}

.ec-wizard-qr-wrap[b-y2g992ef56] {
    margin: 8px 0 16px;
}

.ec-totp-qr[b-y2g992ef56] {
    width: 240px;
    height: 240px;
    border-radius: 8px;
    border: 1px solid var(--ec-border);
}

.ec-wizard-secret-details[b-y2g992ef56] {
    width: 100%;
    text-align: left;
    margin-bottom: 20px;
    font-size: 0.85rem;
    color: var(--ec-on-surface-variant);
}

.ec-wizard-secret-details summary[b-y2g992ef56] {
    cursor: pointer;
    font-weight: 600;
    color: var(--ec-primary);
}

.ec-wizard-secret-box[b-y2g992ef56] {
    margin-top: 8px;
    padding: 12px;
    background: var(--ec-surface-variant, #f0f2f8);
    border-radius: 8px;
    text-align: center;
}

.ec-totp-secret[b-y2g992ef56] {
    font-family: monospace;
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    word-break: break-all;
    color: var(--ec-on-surface);
}

.ec-wizard-secret-hint[b-y2g992ef56] {
    font-size: 0.75rem;
    color: var(--ec-on-surface-variant);
    margin: 6px 0 0;
}

.ec-wizard-cta[b-y2g992ef56] {
    width: 100%;
    margin-top: 8px;
}

/* Pill-style primary CTA mirroring Login.razor's .lp-btn-submit so the
   "I've added it — continue" and "Verify" buttons feel like siblings of
   the login form's Sign In button instead of stock Bootstrap. */
.lp-btn-submit[b-y2g992ef56] {
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--ec-primary) 0%, #1e519f 100%);
    color: white;
    border: none;
    border-radius: 9999px;
    font-family: 'Plus Jakarta Sans', 'Helvetica Neue', sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: 0 8px 24px -4px rgba(46,93,171,0.3);
    transition: box-shadow 0.3s, transform 0.15s;
}
.lp-btn-submit:hover:not(:disabled)[b-y2g992ef56] {
    box-shadow: 0 12px 28px -4px rgba(46,93,171,0.4);
    transform: translateY(-1px);
}
.lp-btn-submit:active:not(:disabled)[b-y2g992ef56] { transform: scale(0.985); }
.lp-btn-submit:disabled[b-y2g992ef56] { opacity: 0.65; cursor: not-allowed; }

.ec-wizard-loading[b-y2g992ef56] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 0;
    color: var(--ec-on-surface-variant);
}

.ec-wizard-field[b-y2g992ef56] {
    width: 100%;
    margin-bottom: 16px;
}

.ec-totp-code-input[b-y2g992ef56] {
    font-size: 1.75rem;
    letter-spacing: 0.4em;
    text-align: center;
    max-width: 240px;
    margin: 0 auto;
    display: block;
}

.ec-wizard-actions[b-y2g992ef56] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.ec-wizard-back[b-y2g992ef56] {
    color: var(--ec-on-surface-variant);
    font-size: 0.85rem;
}

.ec-recovery-codes[b-y2g992ef56] {
    list-style: none;
    padding: 0;
    column-count: 2;
    width: 100%;
    background: var(--ec-surface-variant, #f0f2f8);
    border-radius: 8px;
    padding: 12px 16px;
    margin: 0 0 12px;
    text-align: left;
}

.ec-recovery-codes li[b-y2g992ef56] {
    padding: 4px 0;
}

.ec-recovery-codes code[b-y2g992ef56] {
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    color: var(--ec-on-surface);
}

.ec-wizard-code-actions[b-y2g992ef56] {
    display: flex;
    gap: 8px;
    justify-content: center;
    width: 100%;
}

.ec-auth-cancel[b-y2g992ef56] {
    /* Reset native <button> chrome — defaults render a grey rectangle. */
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;

    display: block;
    margin: 24px auto 0;
    text-align: center;
    color: var(--ec-on-surface-variant);
    font-size: 0.8rem;
    text-decoration: none;
    opacity: 0.7;
    transition: opacity 0.15s, color 0.15s;
}

.ec-auth-cancel:hover[b-y2g992ef56] {
    opacity: 1;
    color: var(--ec-error);
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* /Components/Pages/Billing/AdminBillingOverrideDetail.razor.rz.scp.css */
/* Admin Billing Override — detail slide-over.
   Source: prototype AWBillingOverrides detail block (lines 28632-28692). */

/* MainLayout chrome sits at z-index: 1000; overlays + panels must clear
   that ceiling or they paint behind the sidebar + header. */
.awbod-overlay[b-37krdtqrab] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 1100;
    animation: awbod-fade-in-b-37krdtqrab 0.12s ease;
}
@keyframes awbod-fade-in-b-37krdtqrab { from { background: rgba(15, 23, 42, 0); } }

.awbod-panel[b-37krdtqrab] {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(560px, 96vw);
    background: #fff;
    z-index: 1101;
    overflow-y: auto;
    box-shadow: -16px 0 32px rgba(0, 0, 0, 0.16);
}

.awbod-hdr[b-37krdtqrab] {
    padding: 20px 24px;
    border-bottom: 1px solid var(--ec-border-soft);
    display: flex;
    align-items: center;
    gap: 13px;
}
.awbod-avatar[b-37krdtqrab] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 800;
    flex-shrink: 0;
}
.awbod-hdr-text[b-37krdtqrab] { flex: 1; min-width: 0; }
.awbod-eyebrow[b-37krdtqrab] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}
.awbod-name[b-37krdtqrab] {
    font-size: 18px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 2px 0 0;
}
.awbod-meta[b-37krdtqrab] { font-size: 11.5px; color: var(--ec-sub); margin: 2px 0 0; }
.awbod-close[b-37krdtqrab] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--ec-border);
    font-size: 14px;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
}

.awbod-body[b-37krdtqrab] { padding: 20px 24px; }

.awbod-section-label[b-37krdtqrab] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 8px;
}

.awbod-diff[b-37krdtqrab] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    align-items: center;
}
.awbod-diff-cell[b-37krdtqrab] {
    padding: 14px 16px;
    border-radius: 11px;
    text-align: center;
}
.awbod-diff-default[b-37krdtqrab] { background: var(--ec-bg); }
.awbod-diff-final[b-37krdtqrab] {
    background: var(--ec-purple-lt);
    border: 1px solid color-mix(in srgb, var(--ec-purple) 26%, transparent);
}
.awbod-diff-label[b-37krdtqrab] {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}
.awbod-diff-label-default[b-37krdtqrab] { color: var(--ec-muted); }
.awbod-diff-label-final[b-37krdtqrab]   { color: var(--ec-purple); }
.awbod-diff-amount[b-37krdtqrab] {
    font-size: 24px;
    font-weight: 800;
    color: var(--ec-muted);
    margin: 4px 0 0;
    font-family: ui-monospace, "SF Mono", monospace;
}
.awbod-diff-amount.is-changed[b-37krdtqrab] { text-decoration: line-through; }
.awbod-diff-amount-final[b-37krdtqrab] {
    font-size: 30px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 4px 0 0;
    font-family: ui-monospace, "SF Mono", monospace;
}
.awbod-diff-sub[b-37krdtqrab] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 3px 0 0;
}
.awbod-diff-sub-final[b-37krdtqrab] {
    color: var(--ec-purple);
    font-weight: 700;
}
.awbod-diff-arrow[b-37krdtqrab] {
    font-size: 18px;
    color: var(--ec-purple);
    font-weight: 800;
}
.awbod-diff-savings[b-37krdtqrab] {
    font-size: 11.5px;
    color: var(--ec-green);
    font-weight: 700;
    margin: 8px 0 0;
    text-align: center;
}

.awbod-meta-grid[b-37krdtqrab] {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}
.awbod-meta-cell[b-37krdtqrab] {
    padding: 10px 13px;
    background: var(--ec-bg);
    border-radius: 9px;
}
.awbod-meta-label[b-37krdtqrab] {
    font-size: 9.5px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}
.awbod-meta-value[b-37krdtqrab] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ec-text);
    margin: 3px 0 0;
}
.awbod-meta-value.is-amber[b-37krdtqrab] { color: var(--ec-amber); }

.awbod-notes[b-37krdtqrab] {
    margin-top: 9px;
    padding: 10px 13px;
    background: var(--ec-bg);
    border-radius: 9px;
}
.awbod-notes-text[b-37krdtqrab] {
    font-size: 12px;
    color: var(--ec-text);
    line-height: 1.5;
    margin: 4px 0 0;
}
.awbod-notes-empty[b-37krdtqrab] { font-style: italic; color: var(--ec-muted); }

.awbod-actions[b-37krdtqrab] {
    display: flex;
    gap: 8px;
    margin-top: 18px;
    justify-content: flex-end;
}
.awbod-btn[b-37krdtqrab] {
    padding: 9px 14px;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.awbod-btn-danger[b-37krdtqrab] {
    background: #fff;
    color: var(--ec-red);
    border-color: var(--ec-border);
}
.awbod-btn-danger:hover:not(:disabled)[b-37krdtqrab] {
    background: color-mix(in srgb, var(--ec-red) 8%, white);
}
.awbod-btn-primary[b-37krdtqrab] {
    padding: 9px 16px;
    background: var(--ec-primary);
    color: #fff;
    font-weight: 800;
    border: none;
}
.awbod-btn-primary:hover[b-37krdtqrab] { filter: brightness(0.93); }
/* /Components/Pages/Billing/AdminBillingOverrideEditor.razor.rz.scp.css */
/* Admin Billing Override Editor — right slide-over.
   Source: prototype AWOverrideEditor (lines 28724-28896). Student + plan
   picker → 3-tile override-kind toggle (Discount / Custom plan / Manual)
   → per-kind body (discount form / custom-plan picker / manual notice)
   → live preview → valid until + notes. */

/* MainLayout chrome sits at z-index: 1000; this overlay must clear it. */
.awboe-overlay[b-jbu9anpypx] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 1100;
    display: flex;
    justify-content: flex-end;
    animation: awboe-fade-in-b-jbu9anpypx 0.12s ease;
}
@keyframes awboe-fade-in-b-jbu9anpypx { from { background: rgba(15, 23, 42, 0); } }

.awboe-panel[b-jbu9anpypx] {
    width: min(680px, 96%);
    height: 100%;
    background: #fff;
    box-shadow: -12px 0 40px rgba(13, 23, 51, 0.16);
    display: flex;
    flex-direction: column;
}

.awboe-stripe[b-jbu9anpypx] { height: 3px; flex-shrink: 0; background: var(--ec-purple); }

.awboe-hdr[b-jbu9anpypx] {
    padding: 14px 22px;
    border-bottom: 1px solid var(--ec-border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.awboe-hdr-text[b-jbu9anpypx] { display: flex; align-items: center; gap: 11px; }
.awboe-hdr-icon[b-jbu9anpypx] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--ec-purple-lt);
    color: var(--ec-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.awboe-hdr-eyebrow[b-jbu9anpypx] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-purple);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}
.awboe-hdr-title[b-jbu9anpypx] {
    font-size: 17px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 2px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 480px;
}
.awboe-close[b-jbu9anpypx] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--ec-border);
    font-size: 14px;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
}

.awboe-body[b-jbu9anpypx] {
    flex: 1;
    overflow-y: auto;
    padding: 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--ec-bg);
}

.awboe-field-label[b-jbu9anpypx] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 6px;
}
.awboe-input[b-jbu9anpypx],
.awboe-select[b-jbu9anpypx] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    font-size: 12.5px;
    font-family: inherit;
    background: #fff;
    color: var(--ec-text);
    outline: none;
    box-sizing: border-box;
}
.awboe-input:focus[b-jbu9anpypx],
.awboe-select:focus[b-jbu9anpypx] { border-color: var(--ec-purple); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ec-purple) 16%, transparent); }
.awboe-input:disabled[b-jbu9anpypx],
.awboe-select:disabled[b-jbu9anpypx] { background: var(--ec-bg); opacity: 0.55; }

.awboe-grid-2[b-jbu9anpypx] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.awboe-grid-1-2[b-jbu9anpypx] { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }

/* Override-kind tiles */
.awboe-kind-row[b-jbu9anpypx] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.awboe-kind-tile[b-jbu9anpypx] {
    padding: 12px 13px;
    border-radius: 9px;
    border: 1px solid var(--ec-border);
    background: #fff;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-align: center;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.awboe-kind-tile.is-on[b-jbu9anpypx] {
    background: var(--ec-purple-lt);
    border-color: var(--ec-purple);
    color: var(--ec-purple);
}
.awboe-kind-tile-name[b-jbu9anpypx] { font-size: 11.5px; font-weight: 800; }
.awboe-kind-tile-desc[b-jbu9anpypx] { font-size: 9.5px; color: var(--ec-muted); font-weight: 600; }

/* Discount form */
.awboe-disc-row[b-jbu9anpypx] {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    gap: 8px;
}
.awboe-disc-toggle[b-jbu9anpypx] {
    display: flex;
    gap: 5px;
    padding: 3px;
    background: var(--ec-bg);
    border: 1px solid var(--ec-border);
    border-radius: 8px;
}
.awboe-disc-toggle-btn[b-jbu9anpypx] {
    padding: 7px 14px;
    background: transparent;
    color: var(--ec-muted);
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
}
.awboe-disc-toggle-btn.is-on[b-jbu9anpypx] {
    background: #fff;
    color: var(--ec-purple);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.awboe-disc-amount[b-jbu9anpypx] {
    padding: 9px 12px;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    font-size: 13.5px;
    font-family: ui-monospace, "SF Mono", monospace;
    font-weight: 800;
    background: #fff;
    outline: none;
    box-sizing: border-box;
}

.awboe-manual-notice[b-jbu9anpypx] {
    padding: 12px 14px;
    background: var(--ec-amber-lt);
    border: 1px solid color-mix(in srgb, var(--ec-amber) 26%, transparent);
    border-radius: 10px;
}
.awboe-manual-notice-title[b-jbu9anpypx] {
    font-size: 12px;
    font-weight: 800;
    color: var(--ec-amber);
    margin: 0 0 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.awboe-manual-notice-body[b-jbu9anpypx] {
    font-size: 11.5px;
    color: var(--ec-text);
    line-height: 1.55;
    margin: 0;
}

.awboe-preview[b-jbu9anpypx] {
    padding: 13px 16px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 11px;
}
.awboe-preview-row[b-jbu9anpypx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.awboe-preview-cell .label[b-jbu9anpypx] { font-size: 11px; color: var(--ec-muted); margin: 0; }
.awboe-preview-cell-final .label[b-jbu9anpypx] { color: var(--ec-purple); font-weight: 800; }
.awboe-preview-amount[b-jbu9anpypx] {
    font-size: 18px;
    font-weight: 800;
    color: var(--ec-muted);
    font-family: ui-monospace, "SF Mono", monospace;
    margin: 2px 0 0;
}
.awboe-preview-amount.is-changed[b-jbu9anpypx] { text-decoration: line-through; }
.awboe-preview-amount-final[b-jbu9anpypx] {
    font-size: 28px;
    font-weight: 800;
    color: var(--ec-text);
    font-family: ui-monospace, "SF Mono", monospace;
    margin: 2px 0 0;
}
.awboe-preview-arrow[b-jbu9anpypx] { font-size: 20px; color: var(--ec-purple); font-weight: 800; }
.awboe-preview-savings[b-jbu9anpypx] {
    font-size: 11px;
    color: var(--ec-green);
    font-weight: 700;
    margin: 6px 0 0;
    text-align: right;
}

.awboe-field-hint[b-jbu9anpypx] {
    font-size: 10px;
    color: var(--ec-muted);
    margin: 3px 0 0;
    font-style: italic;
}
.awboe-warn-hint[b-jbu9anpypx] {
    font-size: 10px;
    color: var(--ec-amber);
    margin: 4px 0 0;
    font-style: italic;
}

.awboe-err[b-jbu9anpypx] {
    margin: 0;
    padding: 9px 11px;
    background: color-mix(in srgb, var(--ec-red) 8%, white);
    color: var(--ec-red);
    border: 1px solid color-mix(in srgb, var(--ec-red) 30%, transparent);
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 700;
}

.awboe-footer[b-jbu9anpypx] {
    padding: 12px 24px;
    border-top: 1px solid var(--ec-border-soft);
    display: flex;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0;
    background: #fff;
}
.awboe-btn[b-jbu9anpypx] {
    border-radius: 9px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.awboe-btn:disabled[b-jbu9anpypx] { cursor: not-allowed; }
.awboe-btn-ghost[b-jbu9anpypx] {
    background: #fff;
    color: var(--ec-sub);
    border-color: var(--ec-border);
    font-weight: 700;
    font-size: 12.5px;
    padding: 9px 14px;
}
.awboe-btn-save[b-jbu9anpypx] {
    background: var(--ec-primary);
    color: #fff;
    border: none;
}
.awboe-btn-save:disabled[b-jbu9anpypx] { background: var(--ec-border-soft); color: var(--ec-muted); }
.awboe-btn-save:hover:not(:disabled)[b-jbu9anpypx] { filter: brightness(0.93); }
/* /Components/Pages/Billing/AdminBillingOverridesPage.razor.rz.scp.css */
/* Admin Student Billing Overrides — transcribed from prototype AWBillingOverrides
   (EduConnect All Roles.html lines 28477-28722). 4-KPI strip → filter
   chips (All / Discount / Custom plan / Manual / Sibling / Staff) + class
   select + search box + purple "+ New override" → grid-row table. */

.awbo-page[b-hl7qfp43x5] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── KPIs ────────────────────────────────────────────────────── */
.awbo-kpis[b-hl7qfp43x5] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
@media (max-width: 980px) { .awbo-kpis[b-hl7qfp43x5] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .awbo-kpis[b-hl7qfp43x5] { grid-template-columns: 1fr; } }

/* ── Filter row ──────────────────────────────────────────────── */
.awbo-filter-row[b-hl7qfp43x5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.awbo-chips[b-hl7qfp43x5] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.awbo-chip[b-hl7qfp43x5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--ec-border);
    background: #fff;
    color: var(--ec-sub);
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.awbo-chip:hover:not(.is-active)[b-hl7qfp43x5] { background: var(--ec-bg); }
.awbo-chip-count[b-hl7qfp43x5] {
    font-size: 10px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--ec-border-soft);
    color: var(--ec-muted);
}
.awbo-chip.is-active .awbo-chip-count[b-hl7qfp43x5] { background: rgba(255, 255, 255, 0.22); color: #fff; }

.awbo-filter-right[b-hl7qfp43x5] {
    display: flex;
    gap: 8px;
    align-items: center;
}
.awbo-class-select[b-hl7qfp43x5],
.awbo-search-input[b-hl7qfp43x5] {
    padding: 7px 11px;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    font-size: 12px;
    font-family: inherit;
    background: #fff;
    color: var(--ec-text);
    outline: none;
    box-sizing: border-box;
}
.awbo-search-input[b-hl7qfp43x5] { min-width: 220px; }
.awbo-new[b-hl7qfp43x5] {
    background: var(--ec-primary);
    border: none;
    border-radius: 9px;
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.awbo-new:hover[b-hl7qfp43x5] { filter: brightness(0.93); }

/* ── Table ───────────────────────────────────────────────────── */
.awbo-table-wrap[b-hl7qfp43x5] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    overflow: hidden;
}
.awbo-row-hdr[b-hl7qfp43x5],
.awbo-row[b-hl7qfp43x5] {
    display: grid;
    grid-template-columns: 1.5fr 1.3fr 1fr 1fr 1fr 0.6fr;
    gap: 10px;
    align-items: center;
    padding: 10px 18px;
}
.awbo-row-hdr[b-hl7qfp43x5] {
    background: var(--ec-bg);
    border-bottom: 1px solid var(--ec-border);
    font-size: 10px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.awbo-row-hdr p[b-hl7qfp43x5] { margin: 0; }
.awbo-row-hdr-action[b-hl7qfp43x5] { text-align: right; }

.awbo-row[b-hl7qfp43x5] {
    padding: 12px 18px;
    border-bottom: 1px solid var(--ec-border-soft);
    cursor: pointer;
    transition: background 0.12s;
}
.awbo-row:last-child[b-hl7qfp43x5] { border-bottom: none; }
.awbo-row:hover[b-hl7qfp43x5] { background: var(--ec-bg); }

.awbo-student-cell[b-hl7qfp43x5] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.awbo-avatar[b-hl7qfp43x5] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
}
.awbo-student-name[b-hl7qfp43x5] {
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.awbo-student-class[b-hl7qfp43x5] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 0;
}

.awbo-plan-name[b-hl7qfp43x5] { font-size: 12.5px; font-weight: 700; color: var(--ec-text); margin: 0; }
.awbo-plan-custom[b-hl7qfp43x5] {
    font-size: 10px;
    color: var(--ec-blue);
    font-weight: 700;
    margin: 1px 0 0;
}

.awbo-amount[b-hl7qfp43x5] {
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-text);
    font-family: ui-monospace, "SF Mono", monospace;
    margin: 0;
}
.awbo-saves[b-hl7qfp43x5] {
    font-size: 10px;
    color: var(--ec-green);
    font-weight: 700;
    margin: 1px 0 0;
}

.awbo-reason[b-hl7qfp43x5] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}
.awbo-reason-chip[b-hl7qfp43x5] {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.04em;
    display: inline-block;
}
.awbo-reason-discount[b-hl7qfp43x5]   { color: var(--ec-green);  background: var(--ec-green-lt); }
.awbo-reason-sibling[b-hl7qfp43x5]    { color: var(--ec-purple); background: var(--ec-purple-lt); }
.awbo-reason-staff[b-hl7qfp43x5]      { color: var(--ec-teal);   background: var(--ec-teal-lt); }
.awbo-reason-scholarship[b-hl7qfp43x5],
.awbo-reason-custom-plan[b-hl7qfp43x5] { color: var(--ec-blue);   background: var(--ec-blue-lt); text-transform: uppercase; }
.awbo-reason-manual[b-hl7qfp43x5]     { color: var(--ec-amber);  background: var(--ec-amber-lt); text-transform: uppercase; }
.awbo-auto-flag[b-hl7qfp43x5] {
    font-size: 9px;
    color: var(--ec-muted);
    font-weight: 600;
    margin-left: 4px;
}

.awbo-valid-until[b-hl7qfp43x5] { font-size: 11px; margin: 0; }
.awbo-valid-until.has-end[b-hl7qfp43x5]  { color: var(--ec-amber); font-weight: 700; }
.awbo-valid-until.no-end[b-hl7qfp43x5]   { color: var(--ec-muted); font-weight: 500; }

.awbo-action-cell[b-hl7qfp43x5] { text-align: right; }
.awbo-edit-btn[b-hl7qfp43x5] {
    padding: 5px 12px;
    background: #fff;
    color: var(--ec-text);
    border: 1px solid var(--ec-border);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}
.awbo-edit-btn:hover[b-hl7qfp43x5] { background: var(--ec-bg); }

/* ── Empty / loading ─────────────────────────────────────────── */
.awbo-empty[b-hl7qfp43x5] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    padding: 60px;
    text-align: center;
    color: var(--ec-muted);
    font-size: 13px;
}
.awbo-loading[b-hl7qfp43x5] {
    padding: 60px;
    text-align: center;
    color: var(--ec-muted);
    font-size: 13px;
}
/* /Components/Pages/Billing/AdminBillingPlanDetail.razor.rz.scp.css */
/* Admin Billing Plan Detail — transcribed from prototype AWBillingPlans
   detail slide-over (EduConnect All Roles.html lines 28220-28328). Right
   slide-over with kind-colored top stripe, pill row, headline amount,
   2×2 rules grid (prorate / refund / sibling / early-bird), attachments,
   and audit footer. */

/* MainLayout chrome sits at z-index: 1000; overlays + panels must clear
   that ceiling or they paint behind the sidebar + header. */
.awbp-d-overlay[b-bydv7je5lk] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 1100;
    animation: awbp-d-fade-in-b-bydv7je5lk 0.12s ease;
}
@keyframes awbp-d-fade-in-b-bydv7je5lk { from { background: rgba(15, 23, 42, 0); } }

.awbp-d-panel[b-bydv7je5lk] {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(640px, 96vw);
    background: #fff;
    z-index: 1101;
    overflow-y: auto;
    box-shadow: -16px 0 32px rgba(0, 0, 0, 0.16);
    display: flex;
    flex-direction: column;
}

.awbp-d-stripe[b-bydv7je5lk] { height: 6px; flex-shrink: 0; }

.awbp-d-hdr[b-bydv7je5lk] {
    padding: 18px 24px;
    border-bottom: 1px solid var(--ec-border-soft);
}
.awbp-d-pillrow[b-bydv7je5lk] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.awbp-d-pill[b-bydv7je5lk] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.awbp-d-pill-archived[b-bydv7je5lk] { color: var(--ec-muted); background: var(--ec-border-soft); }
.awbp-d-pill-composite[b-bydv7je5lk] { color: var(--ec-green); background: var(--ec-green-lt); }
.awbp-d-close[b-bydv7je5lk] {
    margin-left: auto;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--ec-border);
    font-size: 14px;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
}
.awbp-d-title[b-bydv7je5lk] {
    font-size: 22px;
    font-weight: 800;
    color: var(--ec-text);
    letter-spacing: -0.01em;
    margin: 0;
    line-height: 1.2;
}
.awbp-d-notes[b-bydv7je5lk] {
    font-size: 12.5px;
    color: var(--ec-sub);
    margin: 5px 0 0;
    line-height: 1.55;
}
.awbp-d-notes-empty[b-bydv7je5lk] { font-style: italic; color: var(--ec-muted); }

.awbp-d-actions[b-bydv7je5lk] {
    display: flex;
    gap: 7px;
    margin-top: 13px;
    flex-wrap: wrap;
}
.awbp-d-btn[b-bydv7je5lk] {
    padding: 8px 14px;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.awbp-d-btn:disabled[b-bydv7je5lk] { cursor: not-allowed; opacity: 0.5; }
.awbp-d-btn-primary[b-bydv7je5lk] { background: var(--ec-blue); color: #fff; border: none; font-weight: 800; }
.awbp-d-btn-primary:hover[b-bydv7je5lk] { background: color-mix(in srgb, var(--ec-blue) 88%, black); }
.awbp-d-btn-ghost[b-bydv7je5lk] { background: #fff; color: var(--ec-text); border-color: var(--ec-border); }
.awbp-d-btn-ghost:hover[b-bydv7je5lk] { background: var(--ec-bg); }
.awbp-d-btn-restore[b-bydv7je5lk] { background: var(--ec-green); color: #fff; border: none; font-weight: 800; }
.awbp-d-btn-danger[b-bydv7je5lk] { background: #fff; color: var(--ec-red); border-color: var(--ec-border); }
.awbp-d-btn-danger:hover:not(:disabled)[b-bydv7je5lk] {
    background: color-mix(in srgb, var(--ec-red) 8%, white);
    border-color: color-mix(in srgb, var(--ec-red) 35%, var(--ec-border));
}

.awbp-d-body[b-bydv7je5lk] {
    padding: 18px 24px;
}

/* Headline amount */
.awbp-d-amount[b-bydv7je5lk] {
    padding: 18px 20px;
    background: var(--ec-bg);
    border-radius: 13px;
    margin-bottom: 16px;
}
.awbp-d-amount-label[b-bydv7je5lk] {
    font-size: 10px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}
.awbp-d-amount-row[b-bydv7je5lk] {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin-top: 4px;
    flex-wrap: wrap;
}
.awbp-d-amount-num[b-bydv7je5lk] {
    font-size: 40px;
    font-weight: 800;
    color: var(--ec-text);
    line-height: 1;
    font-family: ui-monospace, "SF Mono", monospace;
    margin: 0;
}
.awbp-d-amount-unit[b-bydv7je5lk] {
    font-size: 14px;
    font-weight: 700;
    color: var(--ec-sub);
    margin: 0;
}
.awbp-d-amount-sub[b-bydv7je5lk] {
    font-size: 11.5px;
    color: var(--ec-muted);
    margin: 6px 0 0;
    line-height: 1.5;
}

/* Charges (advanced mode only — multi-charge list) */
.awbp-d-charges[b-bydv7je5lk] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}
.awbp-d-charge[b-bydv7je5lk] {
    padding: 10px 13px;
    background: var(--ec-bg);
    border-radius: 9px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.awbp-d-charge-label[b-bydv7je5lk] { font-size: 12px; font-weight: 700; color: var(--ec-text); margin: 0; }
.awbp-d-charge-meta[b-bydv7je5lk] { font-size: 11px; color: var(--ec-muted); margin: 2px 0 0; }
.awbp-d-charge-amount[b-bydv7je5lk] {
    font-size: 17px;
    font-weight: 800;
    color: var(--ec-text);
    font-family: ui-monospace, "SF Mono", monospace;
    margin: 0;
    white-space: nowrap;
}

/* Section header */
.awbp-d-section-hdr[b-bydv7je5lk] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 8px;
}
.awbp-d-section-hdr-row[b-bydv7je5lk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

/* Rules grid (2×2) */
.awbp-d-rules[b-bydv7je5lk] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 18px;
}
.awbp-d-rule[b-bydv7je5lk] {
    padding: 10px 13px;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    background: #fff;
}
.awbp-d-rule-label[b-bydv7je5lk] {
    font-size: 9.5px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
}
.awbp-d-rule-value[b-bydv7je5lk] {
    font-size: 12.5px;
    font-weight: 700;
    margin: 3px 0 0;
}
.awbp-d-rule-value-on[b-bydv7je5lk] { color: var(--ec-green); }
.awbp-d-rule-value-off[b-bydv7je5lk] { color: var(--ec-muted); }
.awbp-d-rule-value-sibling[b-bydv7je5lk] { color: var(--ec-purple); }
.awbp-d-rule-value-eb[b-bydv7je5lk] { color: var(--ec-amber); }

/* Attachments */
.awbp-d-attach-add[b-bydv7je5lk] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 7px;
    padding: 5px 10px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ec-blue);
    cursor: pointer;
    font-family: inherit;
}
.awbp-d-attach-empty[b-bydv7je5lk] {
    padding: 22px;
    background: var(--ec-bg);
    border-radius: 10px;
    text-align: center;
}
.awbp-d-attach-empty-title[b-bydv7je5lk] { font-size: 13px; font-weight: 700; color: var(--ec-muted); margin: 0; }
.awbp-d-attach-empty-sub[b-bydv7je5lk]   { font-size: 11px; color: var(--ec-muted); margin: 4px 0 0; }
.awbp-d-attach-list[b-bydv7je5lk] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}
.awbp-d-attach[b-bydv7je5lk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 13px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    gap: 10px;
}
.awbp-d-attach-text[b-bydv7je5lk] { flex: 1; min-width: 0; }
.awbp-d-attach-name[b-bydv7je5lk] { font-size: 12.5px; font-weight: 700; color: var(--ec-text); margin: 0; }
.awbp-d-attach-meta[b-bydv7je5lk] { font-size: 10.5px; color: var(--ec-muted); margin: 1px 0 0; }
.awbp-d-detach[b-bydv7je5lk] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 6px;
    padding: 3px 9px;
    font-size: 11px;
    color: var(--ec-red);
    cursor: pointer;
    font-family: inherit;
}

/* Audit box */
.awbp-d-audit[b-bydv7je5lk] {
    padding: 11px 14px;
    background: var(--ec-bg);
    border-radius: 10px;
}
.awbp-d-audit-label[b-bydv7je5lk] {
    font-size: 9.5px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}
.awbp-d-audit-text[b-bydv7je5lk] {
    font-size: 11px;
    color: var(--ec-sub);
    margin: 5px 0 0;
}

/* Attach picker modal (existing functionality, restyled) */
.awbp-d-pick-overlay[b-bydv7je5lk] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 1110;
    display: flex;
    align-items: center;
    justify-content: center;
}
.awbp-d-pick[b-bydv7je5lk] {
    background: #fff;
    border-radius: 14px;
    width: 520px;
    max-width: 96vw;
    max-height: 80vh;
    overflow-y: auto;
    padding: 22px;
}
.awbp-d-pick-title[b-bydv7je5lk] { margin: 0 0 14px; font-size: 16px; font-weight: 800; color: var(--ec-text); }
.awbp-d-pick-types[b-bydv7je5lk] { display: flex; gap: 8px; margin-bottom: 14px; }
.awbp-d-pick-type[b-bydv7je5lk] {
    background: #fff; color: var(--ec-text); border: 1px solid var(--ec-border);
    border-radius: 8px; padding: 7px 12px; font-size: 12px;
    cursor: pointer; font-family: inherit; font-weight: 700;
}
.awbp-d-pick-type.is-on[b-bydv7je5lk] { background: var(--ec-blue); color: #fff; border-color: var(--ec-blue); }
.awbp-d-pick-select[b-bydv7je5lk] {
    width: 100%; padding: 9px 12px; border: 1px solid var(--ec-border);
    border-radius: 8px; font-size: 13px; font-family: inherit; background: #fff;
}
.awbp-d-pick-autochk[b-bydv7je5lk] {
    display: flex; align-items: center; gap: 8px; margin-top: 14px;
    cursor: pointer; font-size: 12.5px; color: var(--ec-text);
}
.awbp-d-pick-err[b-bydv7je5lk] {
    margin-top: 10px; padding: 8px 10px; background: var(--ec-red-lt);
    color: var(--ec-red); border-radius: 7px; font-size: 12px;
}
.awbp-d-pick-actions[b-bydv7je5lk] {
    display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px;
}
/* /Components/Pages/Billing/AdminBillingPlanEditor.razor.rz.scp.css */
/* Admin Billing Plan Editor — transcribed from prototype AWBillingPlanEditor
   (EduConnect All Roles.html lines 28351-28472). Right slide-over with
   top accent stripe, icon-box header, scrollable gray body, sticky footer. */

/* MainLayout chrome sits at z-index: 1000; this overlay must clear it. */
.awbp-edit-overlay[b-z43xxeo7s8] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 1100;
    display: flex;
    justify-content: flex-end;
    animation: awbp-fade-in-b-z43xxeo7s8 0.12s ease;
}
@keyframes awbp-fade-in-b-z43xxeo7s8 { from { background: rgba(15, 23, 42, 0); } }

.awbp-edit-panel[b-z43xxeo7s8] {
    width: min(760px, 96%);
    height: 100%;
    background: #fff;
    box-shadow: -12px 0 40px rgba(13, 23, 51, 0.16);
    display: flex;
    flex-direction: column;
}

.awbp-edit-stripe[b-z43xxeo7s8] {
    height: 3px;
    flex-shrink: 0;
}

.awbp-edit-hdr[b-z43xxeo7s8] {
    padding: 14px 22px;
    border-bottom: 1px solid var(--ec-border-soft);
    display: flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
}
.awbp-edit-hdr-icon[b-z43xxeo7s8] {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.awbp-edit-hdr-text[b-z43xxeo7s8] {
    flex: 1;
    min-width: 0;
}
.awbp-edit-hdr-eyebrow[b-z43xxeo7s8] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}
.awbp-edit-hdr-title[b-z43xxeo7s8] {
    font-size: 17px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 2px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.awbp-edit-close[b-z43xxeo7s8] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--ec-border);
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    flex-shrink: 0;
}

.awbp-edit-body[b-z43xxeo7s8] {
    flex: 1;
    overflow-y: auto;
    padding: 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--ec-bg);
}
.awbp-field-label[b-z43xxeo7s8] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 6px;
}
.awbp-field-hint[b-z43xxeo7s8] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 4px 0 0;
    line-height: 1.4;
    font-style: italic;
}
.awbp-input[b-z43xxeo7s8] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    font-size: 13.5px;
    font-family: inherit;
    font-weight: 700;
    outline: none;
    box-sizing: border-box;
    background: #fff;
    color: var(--ec-text);
}
.awbp-input:focus[b-z43xxeo7s8] { border-color: var(--ec-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ec-blue) 16%, transparent); }

.awbp-tiles-4[b-z43xxeo7s8] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
.awbp-tiles-3[b-z43xxeo7s8] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.awbp-tile[b-z43xxeo7s8] {
    padding: 10px 11px;
    border-radius: 9px;
    border: 1px solid var(--ec-border);
    background: #fff;
    cursor: pointer;
    font-family: inherit;
    text-align: center;
    color: var(--ec-sub);
    transition: background 0.12s, border-color 0.12s;
}
.awbp-tile-kind[b-z43xxeo7s8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.awbp-tile-kind-name[b-z43xxeo7s8] {
    font-size: 12px;
    font-weight: 800;
    color: var(--ec-text);
}
.awbp-tile-kind-sub[b-z43xxeo7s8] {
    font-size: 9px;
    color: var(--ec-muted);
    font-weight: 600;
}
.awbp-tile-cadence[b-z43xxeo7s8] {
    display: flex;
    align-items: center;
    gap: 6px;
    text-align: left;
    font-size: 11.5px;
    font-weight: 800;
}

.awbp-cadence-hint[b-z43xxeo7s8] {
    font-size: 10.5px;
    color: var(--ec-muted);
    font-style: italic;
    margin: 7px 0 0;
    padding: 7px 10px;
    background: #fff;
    border-radius: 7px;
    line-height: 1.5;
    border: 1px solid var(--ec-border-soft);
}

.awbp-grid-2[b-z43xxeo7s8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
}

.awbp-eb-row[b-z43xxeo7s8] {
    display: flex;
    gap: 6px;
    align-items: center;
}
.awbp-input-num[b-z43xxeo7s8] {
    width: 80px;
    padding: 9px 11px;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    font-size: 12.5px;
    font-family: inherit;
    background: #fff;
    box-sizing: border-box;
    outline: none;
}
.awbp-input-num.is-mono[b-z43xxeo7s8] { font-family: ui-monospace, "SF Mono", monospace; font-weight: 800; }
.awbp-input-date[b-z43xxeo7s8] {
    flex: 1;
    padding: 9px 11px;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    font-size: 12px;
    font-family: inherit;
    background: #fff;
    box-sizing: border-box;
    outline: none;
}

.awbp-rules[b-z43xxeo7s8] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.awbp-rule[b-z43xxeo7s8] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 12px;
    border-radius: 8px;
    cursor: pointer;
    background: var(--ec-bg);
    border: 1px solid var(--ec-border);
    transition: background 0.12s, border-color 0.12s;
}
.awbp-rule input[type="checkbox"][b-z43xxeo7s8] { margin-top: 2px; accent-color: var(--ec-blue); }
.awbp-rule.is-on-blue[b-z43xxeo7s8] { background: var(--ec-blue-lt); border-color: color-mix(in srgb, var(--ec-blue) 26%, var(--ec-border)); }
.awbp-rule.is-on-teal[b-z43xxeo7s8] { background: var(--ec-teal-lt); border-color: color-mix(in srgb, var(--ec-teal) 26%, var(--ec-border)); }
.awbp-rule-title[b-z43xxeo7s8] {
    font-size: 12px;
    font-weight: 700;
    color: var(--ec-text);
    margin: 0;
}
.awbp-rule-sub[b-z43xxeo7s8] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 2px 0 0;
    line-height: 1.5;
}

.awbp-textarea[b-z43xxeo7s8] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    font-size: 12.5px;
    font-family: inherit;
    outline: none;
    resize: vertical;
    box-sizing: border-box;
    line-height: 1.5;
    background: #fff;
    color: var(--ec-text);
    min-height: 60px;
}

/* ── Invoice issuer & series card ───────────────────────────────────── */
.awbp-issuer-card[b-z43xxeo7s8] {
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 11px;
}
.awbp-issuer-hdr[b-z43xxeo7s8] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 11px;
}
.awbp-issuer-icon[b-z43xxeo7s8] {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--ec-purple) 14%, transparent);
    color: var(--ec-purple);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.awbp-issuer-hdr-text[b-z43xxeo7s8] {
    flex: 1;
    min-width: 0;
}
.awbp-issuer-title[b-z43xxeo7s8] {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.awbp-issuer-help[b-z43xxeo7s8] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 2px 0 0;
    line-height: 1.5;
}
.awbp-issuer-badge[b-z43xxeo7s8] {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 800;
    color: var(--ec-amber);
    background: var(--ec-amber-lt);
    padding: 3px 8px;
    border-radius: 5px;
    letter-spacing: 0.06em;
    white-space: nowrap;
}
.awbp-issuer-grid[b-z43xxeo7s8] {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 9px;
}
.awbp-issuer-fld-label[b-z43xxeo7s8] {
    font-size: 10.5px;
    color: var(--ec-muted);
    font-weight: 700;
    margin: 0 0 5px;
}
.awbp-select[b-z43xxeo7s8] {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    font-size: 12.5px;
    font-family: inherit;
    font-weight: 700;
    color: var(--ec-text);
    background: #fff;
    box-sizing: border-box;
    outline: none;
}
.awbp-select:focus[b-z43xxeo7s8] { border-color: var(--ec-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ec-blue) 16%, transparent); }
.awbp-select:disabled[b-z43xxeo7s8] { background: var(--ec-bg); cursor: not-allowed; }
.awbp-issuer-preview[b-z43xxeo7s8] {
    margin-top: 9px;
    padding: 8px 11px;
    background: var(--ec-bg);
    border-radius: 7px;
    font-size: 11px;
    color: var(--ec-sub);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 7px;
}
.awbp-issuer-preview-entity b[b-z43xxeo7s8] { color: var(--ec-text); }
.awbp-issuer-preview-next[b-z43xxeo7s8] {
    font-family: ui-monospace, "SF Mono", monospace;
    font-weight: 800;
    color: var(--ec-purple);
}

.awbp-form-err[b-z43xxeo7s8] {
    margin: 0;
    padding: 9px 11px;
    background: color-mix(in srgb, var(--ec-red) 8%, white);
    color: var(--ec-red);
    border: 1px solid color-mix(in srgb, var(--ec-red) 30%, transparent);
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 700;
}

.awbp-edit-footer[b-z43xxeo7s8] {
    padding: 12px 24px;
    border-top: 1px solid var(--ec-border-soft);
    display: flex;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0;
    background: #fff;
}
.awbp-edit-footer-right[b-z43xxeo7s8] {
    display: flex;
    gap: 8px;
}

.awbp-btn[b-z43xxeo7s8] {
    border-radius: 9px;
    padding: 9px 16px;
    font-size: 12.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.awbp-btn:disabled[b-z43xxeo7s8] { cursor: not-allowed; opacity: 0.55; }
.awbp-btn-ghost[b-z43xxeo7s8]   { background: #fff; color: var(--ec-sub); border-color: var(--ec-border); }
.awbp-btn-ghost:hover:not(:disabled)[b-z43xxeo7s8] { background: var(--ec-bg); }
.awbp-btn-archive[b-z43xxeo7s8] { background: #fff; color: var(--ec-text); border-color: var(--ec-border); font-weight: 700; }
.awbp-btn-archive:hover:not(:disabled)[b-z43xxeo7s8] { background: var(--ec-bg); }
.awbp-btn-primary[b-z43xxeo7s8] { background: var(--ec-blue); color: #fff; font-weight: 800; padding: 9px 18px; }
.awbp-btn-primary:hover:not(:disabled)[b-z43xxeo7s8] { background: color-mix(in srgb, var(--ec-blue) 88%, black); }
/* /Components/Pages/Billing/AdminBillingPlansPage.razor.rz.scp.css */
/* Admin Billing Plans — transcribed from prototype AWBillingPlans
   (EduConnect All Roles.html lines 28077-28220). */

.awbp-page[b-u9ns9e7fd9] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── KPI strip ───────────────────────────────────────────────── */
.awbp-kpis[b-u9ns9e7fd9] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
@media (max-width: 980px) { .awbp-kpis[b-u9ns9e7fd9] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .awbp-kpis[b-u9ns9e7fd9] { grid-template-columns: 1fr; } }

/* ── Filter row ──────────────────────────────────────────────── */
.awbp-filter-row[b-u9ns9e7fd9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.awbp-chips[b-u9ns9e7fd9] {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.awbp-chip[b-u9ns9e7fd9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--ec-border);
    background: #fff;
    color: var(--ec-sub);
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.awbp-chip:hover:not(.is-active)[b-u9ns9e7fd9] { background: var(--ec-bg); }
.awbp-chip-count[b-u9ns9e7fd9] {
    font-size: 10px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--ec-border-soft);
    color: var(--ec-muted);
}
.awbp-chip.is-active .awbp-chip-count[b-u9ns9e7fd9] { background: rgba(255, 255, 255, 0.22); color: #fff; }

.awbp-filter-right[b-u9ns9e7fd9] {
    display: flex;
    gap: 8px;
    align-items: center;
}
.awbp-status-select[b-u9ns9e7fd9] {
    padding: 7px 11px;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    font-size: 12px;
    font-family: inherit;
    background: #fff;
    color: var(--ec-text);
}
.awbp-new[b-u9ns9e7fd9] {
    background: var(--ec-blue);
    border: none;
    border-radius: 9px;
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.awbp-new:hover[b-u9ns9e7fd9] { background: color-mix(in srgb, var(--ec-blue) 88%, black); }

/* ── Plan card grid ──────────────────────────────────────────── */
.awbp-empty[b-u9ns9e7fd9] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    padding: 60px;
    text-align: center;
    color: var(--ec-muted);
    font-size: 12.5px;
}
.awbp-grid[b-u9ns9e7fd9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 12px;
}

.awbp-card[b-u9ns9e7fd9] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 13px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.awbp-card:hover[b-u9ns9e7fd9] { border-color: color-mix(in srgb, var(--ec-text) 14%, var(--ec-border)); box-shadow: 0 6px 18px rgba(13, 23, 51, 0.06); }
.awbp-card.is-archived[b-u9ns9e7fd9] { opacity: 0.7; }
.awbp-card-stripe[b-u9ns9e7fd9] { height: 5px; }
.awbp-card-body[b-u9ns9e7fd9] { padding: 14px 16px; }

.awbp-card-pills[b-u9ns9e7fd9] {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 7px;
}
.awbp-pill[b-u9ns9e7fd9] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.awbp-pill-archived[b-u9ns9e7fd9] {
    color: var(--ec-muted);
    background: var(--ec-border-soft);
}
.awbp-pill-composite[b-u9ns9e7fd9] {
    color: var(--ec-green);
    background: var(--ec-green-lt);
}

.awbp-card-title[b-u9ns9e7fd9] {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--ec-text);
    line-height: 1.3;
    margin: 0 0 2px;
}
.awbp-card-notes[b-u9ns9e7fd9] {
    font-size: 11px;
    color: var(--ec-muted);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 33px;
    margin: 0;
}
.awbp-card-notes-empty[b-u9ns9e7fd9] { font-style: italic; }

.awbp-card-foot[b-u9ns9e7fd9] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid var(--ec-border-soft);
}
.awbp-card-foot-label[b-u9ns9e7fd9] {
    font-size: 9.5px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}
.awbp-card-amount[b-u9ns9e7fd9] {
    font-size: 22px;
    font-weight: 800;
    color: var(--ec-text);
    line-height: 1;
    margin: 2px 0 0;
    font-family: ui-monospace, "SF Mono", monospace;
}
.awbp-card-amount-unit[b-u9ns9e7fd9] {
    font-size: 11px;
    font-weight: 700;
    color: var(--ec-muted);
    font-family: inherit;
}
.awbp-card-used[b-u9ns9e7fd9] {
    font-size: 13px;
    font-weight: 800;
    margin: 2px 0 0;
    text-align: right;
}
.awbp-card-used.is-used[b-u9ns9e7fd9] { color: var(--ec-green); }
.awbp-card-used.is-unused[b-u9ns9e7fd9] { color: var(--ec-muted); }

.awbp-card-badges[b-u9ns9e7fd9] {
    display: flex;
    gap: 5px;
    margin-top: 9px;
    flex-wrap: wrap;
}
.awbp-badge[b-u9ns9e7fd9] {
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
}
.awbp-badge-sibling[b-u9ns9e7fd9]  { color: var(--ec-purple); background: var(--ec-purple-lt); }
.awbp-badge-eb[b-u9ns9e7fd9]       { color: var(--ec-amber);  background: var(--ec-amber-lt); }
.awbp-badge-prorates[b-u9ns9e7fd9] { color: var(--ec-blue);   background: var(--ec-blue-lt); }
.awbp-badge-refund[b-u9ns9e7fd9]   { color: var(--ec-teal);   background: var(--ec-teal-lt); }

.awbp-card-more[b-u9ns9e7fd9] {
    font-size: 10.5px;
    color: var(--ec-sub);
    margin: 8px 0 0;
}
/* /Components/Pages/Billing/AdminDiscountRuleEditor.razor.rz.scp.css */
/* Admin Discount Rule Editor — transcribed from prototype editor block
   (EduConnect All Roles.html lines 27876-28057). Right slide-over with
   icon-box header, scrollable gray body, sticky footer. Body sections:
   Name → Kind tiles → Type/Value → Attached plans → Application (with
   per-kind sub-fields) → Stacking + Priority → Notes. */

/* MainLayout chrome sits at z-index: 1000; this overlay must clear it. */
.awdre-overlay[b-zpgqf5l872] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 1100;
    display: flex;
    justify-content: flex-end;
    animation: awdre-fade-in-b-zpgqf5l872 0.12s ease;
}
@keyframes awdre-fade-in-b-zpgqf5l872 { from { background: rgba(15, 23, 42, 0); } }

.awdre-panel[b-zpgqf5l872] {
    width: min(680px, 96%);
    height: 100%;
    background: #fff;
    box-shadow: -12px 0 40px rgba(13, 23, 51, 0.16);
    display: flex;
    flex-direction: column;
}

.awdre-stripe[b-zpgqf5l872] { height: 3px; flex-shrink: 0; }

.awdre-hdr[b-zpgqf5l872] {
    padding: 14px 22px;
    border-bottom: 1px solid var(--ec-border-soft);
    display: flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
}
.awdre-hdr-icon[b-zpgqf5l872] {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.awdre-hdr-text[b-zpgqf5l872] { flex: 1; min-width: 0; }
.awdre-hdr-eyebrow[b-zpgqf5l872] {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}
.awdre-hdr-title[b-zpgqf5l872] {
    font-size: 17px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 2px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.awdre-close[b-zpgqf5l872] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--ec-border);
    font-size: 13px;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
}

.awdre-body[b-zpgqf5l872] {
    flex: 1;
    overflow-y: auto;
    padding: 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--ec-bg);
}

.awdre-field-label[b-zpgqf5l872] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 6px;
}
.awdre-field-hint[b-zpgqf5l872] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 0 0 8px;
    line-height: 1.5;
    font-style: italic;
}
.awdre-input[b-zpgqf5l872] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    font-size: 13.5px;
    font-family: inherit;
    font-weight: 700;
    outline: none;
    box-sizing: border-box;
    background: #fff;
    color: var(--ec-text);
}
.awdre-input:focus[b-zpgqf5l872] { border-color: var(--ec-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ec-blue) 16%, transparent); }
.awdre-input-mono[b-zpgqf5l872] { font-family: ui-monospace, "SF Mono", monospace; font-weight: 800; }

/* Kind tiles */
.awdre-kind-grid[b-zpgqf5l872] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 6px;
}
.awdre-kind-tile[b-zpgqf5l872] {
    padding: 10px 11px;
    border-radius: 9px;
    border: 1px solid var(--ec-border);
    background: #fff;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    color: var(--ec-sub);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.12s, border-color 0.12s;
}
.awdre-kind-tile-text[b-zpgqf5l872] { min-width: 0; flex: 1; }
.awdre-kind-tile-name[b-zpgqf5l872] { font-size: 12px; font-weight: 800; color: var(--ec-text); margin: 0; }
.awdre-kind-tile-desc[b-zpgqf5l872] {
    font-size: 9.5px;
    color: var(--ec-muted);
    margin: 1px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.awdre-tv-row[b-zpgqf5l872] {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 11px;
}
.awdre-value-row[b-zpgqf5l872] {
    display: flex;
    align-items: center;
    gap: 8px;
}
.awdre-value-row .awdre-input[b-zpgqf5l872] { flex: 1; }
.awdre-value-unit[b-zpgqf5l872] {
    font-size: 14px;
    font-weight: 800;
    min-width: 40px;
}

/* Plan attachment */
.awdre-allplans[b-zpgqf5l872] {
    padding: 10px 13px;
    background: var(--ec-green-lt);
    border: 1px solid color-mix(in srgb, var(--ec-green) 28%, transparent);
    border-radius: 9px;
    margin-bottom: 8px;
}
.awdre-allplans-text[b-zpgqf5l872] {
    font-size: 11.5px;
    color: var(--ec-green);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}
.awdre-plan-chips-list[b-zpgqf5l872] {
    padding: 9px 12px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    max-height: 200px;
    overflow-y: auto;
}
.awdre-plan-chips-empty[b-zpgqf5l872] {
    font-size: 11px;
    color: var(--ec-muted);
    font-style: italic;
    margin: 0;
}
.awdre-plan-chips[b-zpgqf5l872] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.awdre-plan-chip[b-zpgqf5l872] {
    padding: 5px 10px;
    border-radius: 7px;
    border: 1px solid var(--ec-border);
    background: #fff;
    color: var(--ec-sub);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.awdre-plan-chip.is-on[b-zpgqf5l872] {
    background: var(--ec-blue-lt);
    color: var(--ec-blue);
    border-color: var(--ec-blue);
}

/* Application section */
.awdre-section-divider[b-zpgqf5l872] {
    padding-top: 14px;
    border-top: 1px solid var(--ec-border-soft);
}
.awdre-checkrow[b-zpgqf5l872] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    cursor: pointer;
    margin: 0;
}
.awdre-checkrow input[type="checkbox"][b-zpgqf5l872] {
    width: 16px;
    height: 16px;
    margin-top: 2px;
}
.awdre-checkrow-title[b-zpgqf5l872] { font-size: 12.5px; font-weight: 700; color: var(--ec-text); margin: 0; }
.awdre-checkrow-sub[b-zpgqf5l872]   { font-size: 11px; color: var(--ec-muted); margin: 3px 0 0; line-height: 1.5; }

.awdre-grid-2[b-zpgqf5l872]  { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.awdre-grid-3[b-zpgqf5l872]  { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }

.awdre-small-label[b-zpgqf5l872] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 4px;
}
.awdre-small-input[b-zpgqf5l872] {
    width: 100%;
    padding: 8px 11px;
    border: 1px solid var(--ec-border);
    border-radius: 7px;
    font-size: 12.5px;
    font-family: inherit;
    background: #fff;
    box-sizing: border-box;
    outline: none;
    color: var(--ec-text);
}

/* Priority box */
.awdre-priority-box[b-zpgqf5l872] {
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    display: flex;
    align-items: center;
    gap: 11px;
}
.awdre-priority-input[b-zpgqf5l872] {
    width: 90px;
    padding: 7px 10px;
    border: 1px solid var(--ec-border);
    border-radius: 7px;
    font-size: 14px;
    font-family: ui-monospace, "SF Mono", monospace;
    font-weight: 800;
    outline: none;
    background: var(--ec-bg);
    text-align: center;
}

/* Notes */
.awdre-textarea[b-zpgqf5l872] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    font-size: 12.5px;
    font-family: inherit;
    outline: none;
    resize: vertical;
    box-sizing: border-box;
    background: #fff;
    color: var(--ec-text);
    line-height: 1.5;
    min-height: 80px;
}

.awdre-err[b-zpgqf5l872] {
    margin: 0;
    padding: 9px 11px;
    background: color-mix(in srgb, var(--ec-red) 8%, white);
    color: var(--ec-red);
    border: 1px solid color-mix(in srgb, var(--ec-red) 30%, transparent);
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 700;
}

/* Footer */
.awdre-footer[b-zpgqf5l872] {
    padding: 12px 22px;
    border-top: 1px solid var(--ec-border-soft);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
    background: #fff;
}
.awdre-btn[b-zpgqf5l872] {
    border-radius: 9px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.awdre-btn:disabled[b-zpgqf5l872] { cursor: not-allowed; opacity: 0.55; }
.awdre-btn-ghost[b-zpgqf5l872] {
    background: #fff;
    color: var(--ec-sub);
    border-color: var(--ec-border);
    font-weight: 700;
    font-size: 12.5px;
    padding: 9px 16px;
}
.awdre-btn-ghost:hover:not(:disabled)[b-zpgqf5l872] { background: var(--ec-bg); }
.awdre-btn-save[b-zpgqf5l872] { color: #fff; border: none; }
.awdre-btn-save:disabled[b-zpgqf5l872] { background: var(--ec-border-soft); color: var(--ec-muted); }
/* /Components/Pages/Billing/AdminDiscountRulesPage.razor.rz.scp.css */
/* Admin Discount Rules — transcribed from prototype AWDiscountRules
   (EduConnect All Roles.html lines 27725-27874). 4-KPI strip → filter
   chips + status select + purple "+ New rule" → card grid with
   left-accent stripe, kind pill, big value, attached-plans pills,
   metadata row, stackable/priority footer, Archive/Restore + Delete
   buttons. */

.awdr-page[b-j5949h1zyc] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── KPI strip ───────────────────────────────────────────────── */
.awdr-kpis[b-j5949h1zyc] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
@media (max-width: 980px) { .awdr-kpis[b-j5949h1zyc] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .awdr-kpis[b-j5949h1zyc] { grid-template-columns: 1fr; } }

/* ── Filter row ──────────────────────────────────────────────── */
.awdr-filter-row[b-j5949h1zyc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.awdr-chips[b-j5949h1zyc] {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.awdr-chip[b-j5949h1zyc] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    border-radius: 8px;
    border: 1px solid var(--ec-border);
    background: #fff;
    color: var(--ec-sub);
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.awdr-chip:hover:not(.is-active)[b-j5949h1zyc] { background: var(--ec-bg); }
.awdr-chip-count[b-j5949h1zyc] {
    font-size: 10px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 4px;
}

.awdr-filter-right[b-j5949h1zyc] {
    display: flex;
    gap: 6px;
    align-items: center;
}
.awdr-status-select[b-j5949h1zyc] {
    padding: 7px 12px;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    font-size: 12px;
    font-family: inherit;
    background: #fff;
    color: var(--ec-sub);
    font-weight: 600;
}
.awdr-new[b-j5949h1zyc] {
    padding: 8px 14px;
    background: var(--ec-primary);
    border: none;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.awdr-new:hover[b-j5949h1zyc] { filter: brightness(0.93); }

/* ── Cards grid ──────────────────────────────────────────────── */
.awdr-grid[b-j5949h1zyc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 12px;
}
.awdr-card[b-j5949h1zyc] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-left: 4px solid var(--ec-blue);
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: box-shadow 0.15s, border-color 0.15s;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.awdr-card:hover[b-j5949h1zyc] { box-shadow: 0 6px 18px rgba(13, 23, 51, 0.06); }
.awdr-card.is-archived[b-j5949h1zyc] { opacity: 0.62; }

.awdr-card-hdr[b-j5949h1zyc] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.awdr-pill-kind[b-j5949h1zyc] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.awdr-pill-kind-label[b-j5949h1zyc] {
    font-size: 9.5px;
    color: var(--ec-muted);
    font-weight: 700;
}
.awdr-pill-auto[b-j5949h1zyc] {
    font-size: 9px;
    font-weight: 800;
    color: var(--ec-green);
    background: var(--ec-green-lt);
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0.05em;
}
.awdr-pill-archived[b-j5949h1zyc] {
    font-size: 9px;
    font-weight: 800;
    color: var(--ec-muted);
    background: var(--ec-border-soft);
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0.05em;
}

.awdr-card-title[b-j5949h1zyc] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    line-height: 1.3;
    margin: 0;
}
.awdr-card-value[b-j5949h1zyc] {
    font-size: 20px;
    font-weight: 800;
    margin: 6px 0 0;
    font-family: ui-monospace, "SF Mono", monospace;
    line-height: 1;
}

.awdr-card-plans[b-j5949h1zyc] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
}
.awdr-plan-pill[b-j5949h1zyc] {
    font-size: 10px;
    font-weight: 700;
    color: var(--ec-sub);
    background: var(--ec-bg);
    padding: 3px 7px;
    border-radius: 4px;
    white-space: nowrap;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.awdr-plan-pill.is-all[b-j5949h1zyc] {
    color: var(--ec-muted);
    background: var(--ec-bg);
    border: 1px dashed var(--ec-border);
    font-weight: 700;
    font-size: 10.5px;
    padding: 3px 8px;
    border-radius: 5px;
}
.awdr-plan-pill-more[b-j5949h1zyc] {
    font-size: 10px;
    color: var(--ec-muted);
    font-weight: 700;
}

.awdr-card-meta[b-j5949h1zyc] {
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid var(--ec-border-soft);
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    font-size: 10.5px;
    color: var(--ec-muted);
}
.awdr-card-meta-code[b-j5949h1zyc] {
    color: var(--ec-text);
    font-weight: 700;
    font-family: ui-monospace, "SF Mono", monospace;
}

.awdr-card-stack[b-j5949h1zyc] {
    margin-top: 8px;
    font-size: 10px;
    color: var(--ec-muted);
    font-weight: 600;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.awdr-card-actions[b-j5949h1zyc] {
    display: flex;
    gap: 6px;
    margin-top: 11px;
}
.awdr-card-action[b-j5949h1zyc] {
    padding: 6px 10px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 7px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}
.awdr-card-action-archive[b-j5949h1zyc] { color: var(--ec-amber); }
.awdr-card-action-restore[b-j5949h1zyc] {
    background: var(--ec-green-lt);
    color: var(--ec-green);
    border-color: color-mix(in srgb, var(--ec-green) 26%, transparent);
}
.awdr-card-action-delete[b-j5949h1zyc]  { color: var(--ec-red); }
.awdr-card-action:hover[b-j5949h1zyc] { background: var(--ec-bg); }
.awdr-card-action-restore:hover[b-j5949h1zyc] { background: color-mix(in srgb, var(--ec-green) 14%, white); }

/* ── Empty state ─────────────────────────────────────────────── */
.awdr-empty[b-j5949h1zyc] {
    grid-column: 1 / -1;
    padding: 40px 20px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 12px;
}
.awdr-empty-msg[b-j5949h1zyc] {
    font-size: 13px;
    color: var(--ec-muted);
    margin: 0 0 12px;
}

/* ── Loading + banner ────────────────────────────────────────── */
.awdr-loading[b-j5949h1zyc] {
    padding: 60px;
    text-align: center;
    color: var(--ec-muted);
    font-size: 13px;
}
.awdr-banner[b-j5949h1zyc] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    background: color-mix(in srgb, var(--ec-red) 8%, transparent);
    color: var(--ec-red);
    border: 1px solid color-mix(in srgb, var(--ec-red) 18%, transparent);
}
.awdr-banner-close[b-j5949h1zyc] {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    font-size: 16px;
    padding: 0;
    line-height: 1;
}
/* /Components/Pages/Billing/AdminInvoiceDetail.razor.rz.scp.css */
/* Admin · Invoice detail slide-over — transcribed from prototype
   AWInvoiceDetail (EduConnect All Roles.html lines 35858-35957). */

.aid-mono[b-ihgqv3xvwh] { font-family: ui-monospace, "SF Mono", monospace; }
.aid-right[b-ihgqv3xvwh] { text-align: right; }

/* MainLayout chrome sits at z-index 1000 — clear it. */
.aid-overlay[b-ihgqv3xvwh] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 1100;
}
.aid-panel[b-ihgqv3xvwh] {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(640px, 96vw);
    background: #fff;
    z-index: 1101;
    box-shadow: -12px 0 40px rgba(13, 23, 51, 0.16);
    display: flex;
    flex-direction: column;
}

.aid-hdr[b-ihgqv3xvwh] {
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--ec-border-soft, #eef0f6);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    flex-shrink: 0;
}
.aid-eyebrow[b-ihgqv3xvwh] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
}
.aid-eyebrow.is-storno[b-ihgqv3xvwh] { color: var(--ec-purple); }
.aid-title[b-ihgqv3xvwh] { font-size: 18px; font-weight: 800; color: var(--ec-text); margin: 3px 0 0; }
.aid-issued[b-ihgqv3xvwh] { font-size: 12px; color: var(--ec-sub); margin: 5px 0 0; }
.aid-close[b-ihgqv3xvwh] {
    width: 32px;
    height: 32px;
    border: 1px solid var(--ec-border);
    background: #fff;
    border-radius: 9px;
    cursor: pointer;
    color: var(--ec-sub);
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    flex-shrink: 0;
}

.aid-body[b-ihgqv3xvwh] {
    flex: 1;
    overflow-y: auto;
    padding: 18px 22px;
}

/* Issuer + Bill-to */
.aid-parties[b-ihgqv3xvwh] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}
.aid-party[b-ihgqv3xvwh] {
    padding: 12px 14px;
    background: var(--ec-bg);
    border-radius: 11px;
    border: 1px solid var(--ec-border-soft, #eef0f6);
}
.aid-party-label[b-ihgqv3xvwh] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 5px;
}
.aid-party-name[b-ihgqv3xvwh] { font-size: 13.5px; font-weight: 800; color: var(--ec-text); margin: 0; }
.aid-party-line[b-ihgqv3xvwh] { font-size: 11px; color: var(--ec-sub); margin: 2px 0 0; }
.aid-party-mono[b-ihgqv3xvwh] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 4px 0 0;
    font-family: ui-monospace, "SF Mono", monospace;
}

.aid-section-label[b-ihgqv3xvwh] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 7px;
}

/* Line items */
.aid-lines[b-ihgqv3xvwh] {
    border: 1px solid var(--ec-border);
    border-radius: 11px;
    overflow: hidden;
    margin-bottom: 14px;
}
.aid-lines-head[b-ihgqv3xvwh],
.aid-lines-row[b-ihgqv3xvwh] {
    display: grid;
    grid-template-columns: 1fr 70px 60px 110px 120px;
    align-items: center;
}
.aid-lines-head[b-ihgqv3xvwh] {
    padding: 9px 13px;
    background: var(--ec-bg);
    font-size: 10px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--ec-border);
}
.aid-lines-row[b-ihgqv3xvwh] {
    padding: 10px 13px;
    border-top: 1px solid var(--ec-border-soft, #eef0f6);
}
.aid-lines-row:first-of-type[b-ihgqv3xvwh] { border-top: none; }
.aid-li-name[b-ihgqv3xvwh] { font-size: 12.5px; color: var(--ec-text); }
.aid-li-unit[b-ihgqv3xvwh] { font-size: 11px; color: var(--ec-muted); }
.aid-li-total[b-ihgqv3xvwh] { font-size: 12.5px; color: var(--ec-text); font-weight: 700; }
.aid-li-total.is-negative[b-ihgqv3xvwh] { color: var(--ec-purple); }

.aid-lines-foot[b-ihgqv3xvwh] {
    padding: 10px 13px;
    background: var(--ec-bg);
    border-top: 1px solid var(--ec-border);
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
}
.aid-foot-sub[b-ihgqv3xvwh] { font-size: 11px; color: var(--ec-muted); margin: 0; }
.aid-foot-total[b-ihgqv3xvwh] { font-size: 16px; font-weight: 800; color: var(--ec-text); margin: 0; }
.aid-foot-total.is-negative[b-ihgqv3xvwh] { color: var(--ec-purple); }

.aid-notes[b-ihgqv3xvwh] {
    padding: 10px 13px;
    background: color-mix(in srgb, var(--ec-amber-lt) 55%, transparent);
    border: 1px solid #fde68a;
    border-radius: 10px;
    margin-bottom: 14px;
    font-size: 11px;
    color: var(--ec-text);
    line-height: 1.55;
}
.aid-cross[b-ihgqv3xvwh] {
    padding: 10px 13px;
    background: var(--ec-purple-lt);
    border: 1px solid color-mix(in srgb, var(--ec-purple) 25%, transparent);
    border-radius: 10px;
    margin-bottom: 8px;
}
.aid-cross p[b-ihgqv3xvwh] { font-size: 11px; color: var(--ec-purple); font-weight: 700; margin: 0; }

/* Footer */
.aid-foot[b-ihgqv3xvwh] {
    padding: 14px 22px;
    border-top: 1px solid var(--ec-border);
    display: flex;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0;
    background: #fff;
}
.aid-foot-actions[b-ihgqv3xvwh] { display: flex; gap: 7px; }
.aid-btn[b-ihgqv3xvwh] {
    padding: 9px 14px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    border: 1px solid transparent;
}
.aid-btn:disabled[b-ihgqv3xvwh] { opacity: 0.5; cursor: not-allowed; }
.aid-btn-ghost[b-ihgqv3xvwh] { background: #fff; border-color: var(--ec-border); color: var(--ec-sub); }
.aid-btn-ghost:hover[b-ihgqv3xvwh] { background: var(--ec-bg); }
.aid-btn-cancel[b-ihgqv3xvwh] {
    background: #fff;
    border-color: color-mix(in srgb, var(--ec-red) 25%, transparent);
    color: var(--ec-red);
}
.aid-btn-cancel:hover:not(:disabled)[b-ihgqv3xvwh] { background: var(--ec-red-lt); }
.aid-btn-paid[b-ihgqv3xvwh] {
    padding: 9px 18px;
    background: var(--ec-green);
    color: #fff;
    border: none;
    font-weight: 800;
}
.aid-btn-paid:hover:not(:disabled)[b-ihgqv3xvwh] { background: color-mix(in srgb, var(--ec-green) 88%, black); }

@media (max-width: 640px) {
    .aid-parties[b-ihgqv3xvwh] { grid-template-columns: 1fr; }
    .aid-lines-head[b-ihgqv3xvwh] { display: none; }
    .aid-lines-row[b-ihgqv3xvwh] { grid-template-columns: 1fr auto; gap: 2px 10px; }
}
/* /Components/Pages/Billing/AdminInvoiceGenerationPage.razor.rz.scp.css */
/* Admin Invoice Generation — transcribed from prototype AWInvoiceGeneration
   (EduConnect All Roles.html lines 28902-29233). Blue hero with Preview /
   Run-now buttons → 4 KPIs → 2-column main (Auto-invoicing config / Recent
   runs) → preview overlay / confirm dialog / run detail slide-over. */

.awig-page[b-5ax4pmnyiw] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Hero ────────────────────────────────────────────────────── */
.awig-hero[b-5ax4pmnyiw] {
    background: linear-gradient(120deg, var(--ec-blue-dk), var(--ec-blue));
    border-radius: 14px;
    padding: 20px 24px;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.awig-hero-glyph[b-5ax4pmnyiw] {
    position: absolute;
    right: -30px;
    top: -30px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    pointer-events: none;
}
.awig-hero-inner[b-5ax4pmnyiw] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.awig-hero-text[b-5ax4pmnyiw] { flex: 1 1 360px; min-width: 0; }
.awig-hero-eyebrow[b-5ax4pmnyiw] {
    font-size: 10.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0;
}
.awig-hero-title[b-5ax4pmnyiw] {
    font-size: 22px;
    font-weight: 800;
    margin: 5px 0 0;
    letter-spacing: -0.01em;
}
.awig-hero-sub[b-5ax4pmnyiw] {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.85);
    margin: 6px 0 0;
    line-height: 1.55;
    max-width: 540px;
}
.awig-hero-actions[b-5ax4pmnyiw] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.awig-hero-btn[b-5ax4pmnyiw] {
    padding: 10px 16px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.awig-hero-btn-ghost[b-5ax4pmnyiw] {
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
}
.awig-hero-btn-ghost:hover[b-5ax4pmnyiw] { background: rgba(255, 255, 255, 0.28); }
.awig-hero-btn-primary[b-5ax4pmnyiw] {
    background: #fff;
    color: var(--ec-blue-dk);
    border: none;
}
.awig-hero-btn-primary:hover[b-5ax4pmnyiw] { background: color-mix(in srgb, #fff 92%, var(--ec-blue) 8%); }

/* ── Run-completed feedback ──────────────────────────────────── */
.awig-feedback[b-5ax4pmnyiw] {
    padding: 12px 16px;
    background: var(--ec-green-lt);
    border: 1px solid color-mix(in srgb, var(--ec-green) 26%, transparent);
    border-radius: 11px;
    display: flex;
    align-items: center;
    gap: 11px;
}
.awig-feedback-title[b-5ax4pmnyiw] { font-size: 12.5px; font-weight: 800; color: var(--ec-green); margin: 0; }
.awig-feedback-sub[b-5ax4pmnyiw]   { font-size: 11.5px; color: var(--ec-green); margin: 2px 0 0; }

/* ── KPIs ────────────────────────────────────────────────────── */
.awig-kpis[b-5ax4pmnyiw] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
@media (max-width: 1080px) { .awig-kpis[b-5ax4pmnyiw] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .awig-kpis[b-5ax4pmnyiw] { grid-template-columns: 1fr; } }

/* ── Two-column main ─────────────────────────────────────────── */
.awig-main[b-5ax4pmnyiw] {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 16px;
}
@media (max-width: 980px) { .awig-main[b-5ax4pmnyiw] { grid-template-columns: 1fr; } }
.awig-card[b-5ax4pmnyiw] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    padding: 18px 20px;
}
.awig-card-hdr[b-5ax4pmnyiw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 11px;
    flex-wrap: wrap;
}
.awig-card-title[b-5ax4pmnyiw] {
    font-size: 15px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.awig-card-sub[b-5ax4pmnyiw] {
    font-size: 11.5px;
    color: var(--ec-muted);
    margin: 2px 0 0;
}

/* Org toggle */
.awig-org[b-5ax4pmnyiw] {
    padding: 13px 15px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 14px;
    border: 1px solid var(--ec-border);
    background: var(--ec-bg);
}
.awig-org.is-on[b-5ax4pmnyiw] {
    background: var(--ec-green-lt);
    border-color: color-mix(in srgb, var(--ec-green) 26%, transparent);
}
.awig-org-icon[b-5ax4pmnyiw] {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: rgba(13, 23, 51, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}
.awig-org.is-on .awig-org-icon[b-5ax4pmnyiw] {
    background: color-mix(in srgb, var(--ec-green) 14%, transparent);
}
.awig-org-text[b-5ax4pmnyiw] { flex: 1; min-width: 0; }
.awig-org-title[b-5ax4pmnyiw] { font-size: 13px; font-weight: 800; color: var(--ec-text); margin: 0; }
.awig-org-sub[b-5ax4pmnyiw]   { font-size: 11px; color: var(--ec-muted); margin: 2px 0 0; }

/* Toggle switch */
.awig-switch[b-5ax4pmnyiw] {
    width: 48px;
    height: 26px;
    border-radius: 13px;
    background: var(--ec-border-soft);
    border: none;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}
.awig-switch.is-on[b-5ax4pmnyiw] { background: var(--ec-green); }
.awig-switch-knob[b-5ax4pmnyiw] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: left 0.2s;
}
.awig-switch.is-on .awig-switch-knob[b-5ax4pmnyiw] { left: 24px; }
.awig-switch.is-sm[b-5ax4pmnyiw] { width: 42px; height: 23px; }
.awig-switch.is-sm .awig-switch-knob[b-5ax4pmnyiw] { width: 19px; height: 19px; }
.awig-switch.is-sm.is-on .awig-switch-knob[b-5ax4pmnyiw] { left: 21px; }

/* Per-entity rows */
.awig-section-label[b-5ax4pmnyiw] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 8px;
}
.awig-entity-list[b-5ax4pmnyiw] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.awig-entity[b-5ax4pmnyiw] {
    padding: 10px 13px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.awig-entity-stripe[b-5ax4pmnyiw] {
    width: 6px;
    height: 32px;
    border-radius: 3px;
    flex-shrink: 0;
}
.awig-entity-text[b-5ax4pmnyiw] { flex: 1; min-width: 0; }
.awig-entity-name-row[b-5ax4pmnyiw] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.awig-entity-name[b-5ax4pmnyiw] { font-size: 12.5px; font-weight: 800; color: var(--ec-text); margin: 0; }
.awig-entity-pill[b-5ax4pmnyiw] {
    font-size: 9px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 4px;
    letter-spacing: 0.04em;
}
.awig-entity-pill-inherits[b-5ax4pmnyiw] { color: var(--ec-muted); background: var(--ec-bg); font-weight: 700; }
.awig-entity-pill-override-on[b-5ax4pmnyiw] { color: var(--ec-green); background: var(--ec-green-lt); }
.awig-entity-pill-override-off[b-5ax4pmnyiw] { color: var(--ec-amber); background: var(--ec-amber-lt); }
.awig-entity-plans[b-5ax4pmnyiw] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 2px 0 0;
}
.awig-entity-plans-empty[b-5ax4pmnyiw] { font-style: italic; }

.awig-footnote[b-5ax4pmnyiw] {
    margin-top: 14px;
    padding: 10px 13px;
    background: var(--ec-bg);
    border-radius: 10px;
}
.awig-footnote-text[b-5ax4pmnyiw] {
    font-size: 11px;
    color: var(--ec-sub);
    line-height: 1.55;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
}

/* Recent runs */
.awig-runs[b-5ax4pmnyiw] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.awig-run[b-5ax4pmnyiw] {
    padding: 11px 13px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 10px;
    cursor: pointer;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.awig-run:hover[b-5ax4pmnyiw] { box-shadow: 0 4px 12px rgba(13, 23, 51, 0.06); border-color: color-mix(in srgb, var(--ec-text) 14%, var(--ec-border)); }
.awig-run-hdr[b-5ax4pmnyiw] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 3px;
}
.awig-run-trigger[b-5ax4pmnyiw] {
    display: inline-flex;
    align-items: center;
}
.awig-run-label[b-5ax4pmnyiw] { font-size: 12.5px; font-weight: 800; color: var(--ec-text); margin: 0; }
.awig-run-meta[b-5ax4pmnyiw]  { font-size: 10.5px; color: var(--ec-muted); margin: 0; }
.awig-run-foot[b-5ax4pmnyiw] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--ec-border-soft);
}
.awig-run-count[b-5ax4pmnyiw]  { font-size: 11.5px; font-weight: 700; color: var(--ec-text); margin: 0; }
.awig-run-total[b-5ax4pmnyiw]  { font-size: 11.5px; font-weight: 700; color: var(--ec-green); margin: 0; }
.awig-run-errors[b-5ax4pmnyiw] { font-size: 10.5px; font-weight: 800; color: var(--ec-red); margin: 0; display: inline-flex; align-items: center; gap: 4px; }

.awig-runs-empty[b-5ax4pmnyiw] {
    font-size: 12px;
    color: var(--ec-muted);
    padding: 20px;
    text-align: center;
    margin: 0;
}

/* ── Preview overlay ─────────────────────────────────────────── */
/* z-index is intentionally above MainLayout's chrome (sidebar + header
   sit at z-index: 1000). Modals + slide-overs must clear that ceiling
   to actually cover the viewport. */
.awig-overlay[b-5ax4pmnyiw] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: awig-fade-b-5ax4pmnyiw 0.12s ease;
}
@keyframes awig-fade-b-5ax4pmnyiw { from { background: rgba(15, 23, 42, 0); } }

.awig-preview[b-5ax4pmnyiw] {
    background: #fff;
    border-radius: 16px;
    width: min(820px, 100%);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
}
.awig-preview-hdr[b-5ax4pmnyiw] {
    padding: 18px 24px;
    border-bottom: 1px solid var(--ec-border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.awig-preview-eyebrow[b-5ax4pmnyiw] { font-size: 10.5px; font-weight: 800; color: var(--ec-muted); letter-spacing: 0.08em; text-transform: uppercase; margin: 0; }
.awig-preview-title[b-5ax4pmnyiw]   { font-size: 18px; font-weight: 800; color: var(--ec-text); margin: 2px 0 0; }
.awig-close[b-5ax4pmnyiw] {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #fff;
    border: 1px solid var(--ec-border);
    font-size: 14px;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
}

.awig-preview-stats[b-5ax4pmnyiw] {
    padding: 14px 24px;
    background: var(--ec-bg);
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--ec-border-soft);
}
.awig-stat-label[b-5ax4pmnyiw] { font-size: 10px; font-weight: 800; color: var(--ec-muted); letter-spacing: 0.08em; text-transform: uppercase; margin: 0; }
.awig-stat-value[b-5ax4pmnyiw] {
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    margin: 3px 0 0;
    font-family: ui-monospace, "SF Mono", monospace;
    color: var(--ec-text);
}
.awig-stat-value.is-green[b-5ax4pmnyiw] { color: var(--ec-green); }
.awig-stat-value.is-amber[b-5ax4pmnyiw] { color: var(--ec-amber); }

.awig-preview-body[b-5ax4pmnyiw] {
    flex: 1;
    overflow-y: auto;
    padding: 14px 24px;
}
.awig-preview-row[b-5ax4pmnyiw] {
    padding: 10px 13px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    margin-bottom: 6px;
    display: grid;
    grid-template-columns: 1.5fr auto auto;
    gap: 12px;
    align-items: center;
}
.awig-preview-row.is-skipped[b-5ax4pmnyiw] { background: var(--ec-bg); }
.awig-preview-row-name[b-5ax4pmnyiw] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ec-text);
    margin: 0;
}
.awig-preview-row.is-skipped .awig-preview-row-name[b-5ax4pmnyiw] { color: var(--ec-muted); }
.awig-preview-row-class[b-5ax4pmnyiw] { color: var(--ec-muted); font-weight: 600; }
.awig-preview-row-meta[b-5ax4pmnyiw] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 1px 0 0;
}
.awig-preview-row-skip-reason[b-5ax4pmnyiw] { color: var(--ec-amber); font-weight: 700; }
.awig-preview-row-discount[b-5ax4pmnyiw]    { color: var(--ec-purple); font-weight: 700; }
.awig-preview-row-tag[b-5ax4pmnyiw] {
    font-size: 9.5px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 5px;
    letter-spacing: 0.06em;
    justify-self: start;
}
.awig-preview-row-tag.is-go[b-5ax4pmnyiw]   { color: var(--ec-green); background: var(--ec-green-lt); }
.awig-preview-row-tag.is-skip[b-5ax4pmnyiw] { color: var(--ec-muted); background: var(--ec-border-soft); }
.awig-preview-row-amount[b-5ax4pmnyiw] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    font-family: ui-monospace, "SF Mono", monospace;
    margin: 0;
    text-align: right;
}
.awig-preview-row.is-skipped .awig-preview-row-amount[b-5ax4pmnyiw] { color: var(--ec-muted); }

.awig-preview-foot[b-5ax4pmnyiw] {
    padding: 14px 24px;
    border-top: 1px solid var(--ec-border-soft);
    display: flex;
    justify-content: space-between;
    gap: 8px;
}
.awig-btn[b-5ax4pmnyiw] {
    border-radius: 9px;
    padding: 9px 16px;
    font-size: 12.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.awig-btn:disabled[b-5ax4pmnyiw] { cursor: not-allowed; }
.awig-btn-ghost[b-5ax4pmnyiw] {
    background: #fff;
    color: var(--ec-sub);
    border-color: var(--ec-border);
}
.awig-btn-ghost:hover:not(:disabled)[b-5ax4pmnyiw] { background: var(--ec-bg); }
.awig-btn-commit[b-5ax4pmnyiw] {
    background: var(--ec-green);
    color: #fff;
    border: none;
    font-weight: 800;
    font-size: 13px;
    padding: 9px 18px;
}
.awig-btn-commit:disabled[b-5ax4pmnyiw] { background: var(--ec-border-soft); color: var(--ec-muted); }
.awig-btn-commit:hover:not(:disabled)[b-5ax4pmnyiw] { background: color-mix(in srgb, var(--ec-green) 88%, black); }

.awig-preview-empty[b-5ax4pmnyiw] {
    padding: 30px;
    text-align: center;
    color: var(--ec-muted);
    font-size: 13px;
    margin: 0;
}

/* ── Confirm dialog ──────────────────────────────────────────── */
.awig-confirm[b-5ax4pmnyiw] {
    background: #fff;
    border-radius: 14px;
    width: min(440px, 100%);
    padding: 24px 26px;
}
.awig-confirm-eyebrow[b-5ax4pmnyiw] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-blue);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}
.awig-confirm-title[b-5ax4pmnyiw] {
    font-size: 17px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 6px 0 0;
    line-height: 1.4;
}
.awig-confirm-body[b-5ax4pmnyiw] {
    font-size: 12.5px;
    color: var(--ec-sub);
    margin: 7px 0 0;
    line-height: 1.6;
}
.awig-confirm-actions[b-5ax4pmnyiw] {
    display: flex;
    gap: 8px;
    margin-top: 18px;
    justify-content: flex-end;
}

/* ── Run detail slide-over ───────────────────────────────────── */
/* See note above: MainLayout chrome sits at z-index: 1000 so the slide-
   over has to clear that ceiling, not the page-local default. */
.awig-run-detail-overlay[b-5ax4pmnyiw] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 1100;
    animation: awig-fade-b-5ax4pmnyiw 0.12s ease;
}
.awig-run-detail-panel[b-5ax4pmnyiw] {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(560px, 96vw);
    background: #fff;
    z-index: 1101;
    overflow-y: auto;
    box-shadow: -16px 0 32px rgba(0, 0, 0, 0.16);
}
.awig-run-detail-hdr[b-5ax4pmnyiw] {
    padding: 18px 24px;
    border-bottom: 1px solid var(--ec-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.awig-run-detail-eyebrow[b-5ax4pmnyiw] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}
.awig-run-detail-title[b-5ax4pmnyiw] { font-size: 17px; font-weight: 800; color: var(--ec-text); margin: 2px 0 0; }
.awig-run-detail-body[b-5ax4pmnyiw] { padding: 18px 24px; }
.awig-run-detail-grid[b-5ax4pmnyiw] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}
.awig-run-detail-cell[b-5ax4pmnyiw] {
    padding: 12px 14px;
    background: var(--ec-bg);
    border-radius: 10px;
}
.awig-run-detail-cell-label[b-5ax4pmnyiw] {
    font-size: 9.5px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}
.awig-run-detail-cell-value[b-5ax4pmnyiw] {
    font-size: 26px;
    font-weight: 800;
    color: var(--ec-text);
    line-height: 1;
    margin: 4px 0 0;
    font-family: ui-monospace, "SF Mono", monospace;
}
.awig-run-detail-cell-value.is-green[b-5ax4pmnyiw] { color: var(--ec-green); }
.awig-run-detail-cell-value-text[b-5ax4pmnyiw] {
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 4px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.awig-run-detail-by-plan[b-5ax4pmnyiw] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.awig-run-detail-plan-row[b-5ax4pmnyiw] {
    padding: 9px 12px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.awig-run-detail-plan-name[b-5ax4pmnyiw]  { font-size: 12.5px; font-weight: 700; color: var(--ec-text); margin: 0; }
.awig-run-detail-plan-count[b-5ax4pmnyiw] { font-size: 12.5px; font-weight: 800; color: var(--ec-text); margin: 0; }

/* ── Generated invoices list (inside run-detail slide-over) ─────── */
.awig-run-detail-invoices-hdr[b-5ax4pmnyiw] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 22px 0 8px;
}
.awig-run-detail-invoices-hdr .awig-section-label[b-5ax4pmnyiw] { margin: 0; }
.awig-run-detail-invoices-count[b-5ax4pmnyiw] {
    font-size: 10.5px;
    color: var(--ec-muted);
    font-weight: 700;
    margin: 0;
}
.awig-run-detail-invoices[b-5ax4pmnyiw] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.awig-run-detail-invoice[b-5ax4pmnyiw] {
    width: 100%;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    padding: 11px 13px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.awig-run-detail-invoice:hover[b-5ax4pmnyiw] {
    border-color: color-mix(in srgb, var(--ec-blue) 30%, var(--ec-border));
    box-shadow: 0 2px 8px rgba(13, 23, 51, 0.05);
}
.awig-run-detail-invoice-left[b-5ax4pmnyiw] { min-width: 0; }
.awig-run-detail-invoice-number[b-5ax4pmnyiw] {
    font-family: ui-monospace, "SF Mono", monospace;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ec-text);
    margin: 0;
}
.awig-run-detail-invoice-meta[b-5ax4pmnyiw] {
    font-size: 11.5px;
    color: var(--ec-sub);
    margin: 2px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.awig-run-detail-invoice-due[b-5ax4pmnyiw] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 2px 0 0;
}
.awig-run-detail-invoice-right[b-5ax4pmnyiw] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
.awig-run-detail-invoice-amount[b-5ax4pmnyiw] {
    font-family: ui-monospace, "SF Mono", monospace;
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
    white-space: nowrap;
}
.awig-run-detail-invoice-unit[b-5ax4pmnyiw] { font-size: 10.5px; color: var(--ec-muted); font-weight: 600; }
.awig-run-detail-invoice-status[b-5ax4pmnyiw] {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 2px 6px;
    border-radius: 4px;
}
.awig-run-detail-invoice-status.is-red[b-5ax4pmnyiw]    { color: #fff; background: var(--ec-red); }
.awig-run-detail-invoice-status.is-amber[b-5ax4pmnyiw]  { color: #fff; background: var(--ec-amber); }
.awig-run-detail-invoice-status.is-green[b-5ax4pmnyiw]  { color: #fff; background: var(--ec-green); }
.awig-run-detail-invoice-status.is-blue[b-5ax4pmnyiw]   { color: #fff; background: var(--ec-blue); }

.awig-run-detail-footer[b-5ax4pmnyiw] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 13px 0 0;
    line-height: 1.5;
}
/* /Components/Pages/Billing/AdminInvoiceGenerator.razor.rz.scp.css */
/* Admin · "+ New invoice" wizard — transcribed from prototype
   AWInvoiceGenerator (EduConnect All Roles.html lines 35981-36326). */

.aig-mono[b-v1tsmtqwmb] { font-family: ui-monospace, "SF Mono", monospace; }

.aig-overlay[b-v1tsmtqwmb] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 1100;
}
.aig-panel[b-v1tsmtqwmb] {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(820px, 96vw);
    background: #fff;
    z-index: 1101;
    box-shadow: -12px 0 40px rgba(13, 23, 51, 0.16);
    display: flex;
    flex-direction: column;
}

.aig-hdr[b-v1tsmtqwmb] {
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--ec-border-soft, #eef0f6);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    flex-shrink: 0;
}
.aig-eyebrow[b-v1tsmtqwmb] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
}
.aig-title[b-v1tsmtqwmb] { font-size: 18px; font-weight: 800; color: var(--ec-text); margin: 3px 0 0; letter-spacing: -0.01em; }
.aig-close[b-v1tsmtqwmb] {
    width: 32px;
    height: 32px;
    border: 1px solid var(--ec-border);
    background: #fff;
    border-radius: 9px;
    cursor: pointer;
    color: var(--ec-sub);
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    flex-shrink: 0;
}

/* Stepper */
.aig-stepper[b-v1tsmtqwmb] {
    padding: 10px 22px;
    border-bottom: 1px solid var(--ec-border-soft, #eef0f6);
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.aig-step[b-v1tsmtqwmb] {
    flex: 1;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--ec-bg);
    color: var(--ec-muted);
    border: 1px solid var(--ec-border-soft, #eef0f6);
    font-size: 11.5px;
    font-weight: 800;
    cursor: not-allowed;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.aig-step.is-on[b-v1tsmtqwmb] {
    background: var(--ec-purple);
    color: #fff;
    border-color: var(--ec-purple);
    cursor: default;
}
.aig-step.is-done[b-v1tsmtqwmb] {
    background: var(--ec-purple-lt);
    color: var(--ec-purple);
    border-color: color-mix(in srgb, var(--ec-purple) 25%, transparent);
    cursor: pointer;
}
.aig-step-num[b-v1tsmtqwmb] {
    width: 18px;
    height: 18px;
    border-radius: 99px;
    background: var(--ec-border-soft, #eef0f6);
    color: var(--ec-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
}
.aig-step.is-on .aig-step-num[b-v1tsmtqwmb] { background: rgba(255, 255, 255, 0.25); color: #fff; }
.aig-step.is-done .aig-step-num[b-v1tsmtqwmb] { background: var(--ec-purple); color: #fff; }

/* Body */
.aig-body[b-v1tsmtqwmb] {
    flex: 1;
    overflow-y: auto;
    padding: 18px 22px;
}
.aig-intro[b-v1tsmtqwmb] { font-size: 13px; color: var(--ec-muted); margin: 0 0 11px; line-height: 1.55; }
.aig-stack[b-v1tsmtqwmb] { display: flex; flex-direction: column; gap: 14px; }

.aig-label[b-v1tsmtqwmb] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 7px;
}
.aig-label-soft[b-v1tsmtqwmb] { text-transform: none; letter-spacing: 0; font-weight: 600; }

.aig-select[b-v1tsmtqwmb] {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    font-size: 12.5px;
    font-family: inherit;
    background: #fff;
    font-weight: 700;
    color: var(--ec-text);
    box-sizing: border-box;
    outline: none;
}
.aig-select:disabled[b-v1tsmtqwmb] { background: #f8fafc; }
.aig-vat[b-v1tsmtqwmb], .aig-date[b-v1tsmtqwmb] { font-weight: 600; }

/* Kind grid */
.aig-kinds[b-v1tsmtqwmb] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
.aig-kind[b-v1tsmtqwmb] {
    padding: 12px 10px;
    border-radius: 10px;
    border: 1px solid var(--ec-border);
    background: #fff;
    color: var(--ec-sub);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.aig-kind.is-active[b-v1tsmtqwmb] {
    border-color: var(--k);
    background: color-mix(in srgb, var(--k) 8%, transparent);
    color: var(--k);
}

/* Issuer box */
.aig-issuer-box[b-v1tsmtqwmb] {
    padding: 12px 14px;
    background: var(--ec-bg);
    border-radius: 11px;
    border: 1px solid var(--ec-border-soft, #eef0f6);
}
.aig-issuer-grid[b-v1tsmtqwmb] {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 9px;
}
.aig-next[b-v1tsmtqwmb] { font-size: 11px; color: var(--ec-sub); margin: 7px 0 0; }
.aig-next b[b-v1tsmtqwmb] { color: var(--ec-purple); }

/* Line items */
.aig-lines-hdr[b-v1tsmtqwmb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 7px;
}
.aig-addline[b-v1tsmtqwmb] {
    padding: 5px 11px;
    background: #fff;
    border: 1px dashed color-mix(in srgb, var(--ec-purple) 33%, transparent);
    color: var(--ec-purple);
    border-radius: 7px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
}
.aig-lines[b-v1tsmtqwmb] { display: flex; flex-direction: column; gap: 7px; }
.aig-line[b-v1tsmtqwmb] {
    display: grid;
    grid-template-columns: 1fr 70px 80px 110px 90px auto;
    gap: 6px;
    align-items: center;
    padding: 9px 11px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
}
.aig-line input[b-v1tsmtqwmb] {
    padding: 7px 9px;
    border: 1px solid var(--ec-border);
    border-radius: 7px;
    font-size: 12px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    width: 100%;
}
.aig-line-num[b-v1tsmtqwmb] { text-align: right; font-family: ui-monospace, "SF Mono", monospace; }
.aig-line-total[b-v1tsmtqwmb] {
    font-size: 12.5px;
    color: var(--ec-text);
    font-weight: 700;
    text-align: right;
    margin: 0;
}
.aig-line-rm[b-v1tsmtqwmb] {
    padding: 7px 9px;
    background: #fff;
    border: 1px solid var(--ec-border);
    color: var(--ec-red);
    border-radius: 7px;
    font-size: 11px;
    cursor: pointer;
    font-family: inherit;
}
.aig-line-rm:disabled[b-v1tsmtqwmb] { color: var(--ec-muted); cursor: not-allowed; }

.aig-notes-grid[b-v1tsmtqwmb] {
    display: grid;
    grid-template-columns: 1fr 120px;
    gap: 9px;
}

/* Payment term */
.aig-term-box[b-v1tsmtqwmb] {
    padding: 14px 16px;
    background: var(--ec-bg);
    border: 1px solid var(--ec-border-soft, #eef0f6);
    border-radius: 11px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
}
.aig-term-icon[b-v1tsmtqwmb] {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--ec-amber) 15%, transparent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.aig-term-text[b-v1tsmtqwmb] { flex: 1; min-width: 0; }
.aig-term-eyebrow[b-v1tsmtqwmb] {
    font-size: 12px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
}
.aig-term-main[b-v1tsmtqwmb] { font-size: 13.5px; font-weight: 800; color: var(--ec-text); margin: 3px 0 0; }
.aig-term-sub[b-v1tsmtqwmb] { font-size: 11.5px; color: var(--ec-sub); margin: 3px 0 0; }

.aig-override[b-v1tsmtqwmb] {
    padding: 14px 16px;
    background: #fff;
    border: 1px dashed var(--ec-border);
    border-radius: 11px;
}
.aig-override.is-on[b-v1tsmtqwmb] { border-style: solid; border-color: color-mix(in srgb, var(--ec-purple) 33%, transparent); }
.aig-override-row[b-v1tsmtqwmb] { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.aig-override-row input[type="checkbox"][b-v1tsmtqwmb] { margin: 0; accent-color: var(--ec-purple); width: 16px; height: 16px; }
.aig-override-text[b-v1tsmtqwmb] { flex: 1; min-width: 0; }
.aig-override-title[b-v1tsmtqwmb] { font-size: 12.5px; font-weight: 800; color: var(--ec-text); margin: 0; }
.aig-override.is-on .aig-override-title[b-v1tsmtqwmb] { color: var(--ec-purple); }
.aig-override-sub[b-v1tsmtqwmb] { font-size: 11px; color: var(--ec-muted); margin: 2px 0 0; }
.aig-override-body[b-v1tsmtqwmb] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--ec-border-soft, #eef0f6);
}
.aig-override-note[b-v1tsmtqwmb] { font-size: 11px; color: var(--ec-sub); margin: 6px 0 0; }

/* Review */
.aig-summary-box[b-v1tsmtqwmb] {
    padding: 14px 16px;
    background: var(--ec-bg);
    border: 1px solid var(--ec-border-soft, #eef0f6);
    border-radius: 11px;
    margin-bottom: 14px;
}
.aig-summary-main[b-v1tsmtqwmb] { font-size: 14px; font-weight: 800; color: var(--ec-text); margin: 5px 0 0; }
.aig-summary-line[b-v1tsmtqwmb] { font-size: 11.5px; color: var(--ec-sub); margin: 3px 0 0; }
.aig-override-tag[b-v1tsmtqwmb] { color: var(--ec-purple); font-weight: 700; }
.aig-plan-tag[b-v1tsmtqwmb] { color: var(--ec-muted); }
.aig-recipients-label[b-v1tsmtqwmb] { margin-bottom: 7px; }
.aig-recipients[b-v1tsmtqwmb] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 240px;
    overflow-y: auto;
}
.aig-recipient[b-v1tsmtqwmb] {
    padding: 8px 11px;
    background: #fff;
    border: 1px solid var(--ec-border-soft, #eef0f6);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.aig-recipient-name[b-v1tsmtqwmb] { font-size: 12.5px; font-weight: 700; color: var(--ec-text); margin: 0; }
.aig-recipient-amount[b-v1tsmtqwmb] { font-size: 11.5px; color: var(--ec-muted); margin: 0; }

.aig-error[b-v1tsmtqwmb] {
    margin-top: 12px;
    padding: 9px 11px;
    background: var(--ec-red-lt);
    color: var(--ec-red);
    border-radius: 8px;
    font-size: 12px;
}

/* Footer */
.aig-foot[b-v1tsmtqwmb] {
    padding: 14px 22px;
    border-top: 1px solid var(--ec-border);
    display: flex;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0;
    background: #fff;
}
.aig-foot-left[b-v1tsmtqwmb] { display: flex; gap: 7px; }
.aig-btn[b-v1tsmtqwmb] {
    padding: 9px 14px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.aig-btn:disabled[b-v1tsmtqwmb] { opacity: 0.5; cursor: not-allowed; }
.aig-btn-ghost[b-v1tsmtqwmb] { background: #fff; border-color: var(--ec-border); color: var(--ec-sub); }
.aig-btn-ghost:hover[b-v1tsmtqwmb] { background: var(--ec-bg); }
.aig-btn-next[b-v1tsmtqwmb] {
    padding: 9px 18px;
    background: var(--ec-purple);
    color: #fff;
    border: none;
    font-weight: 800;
    font-size: 13px;
}
.aig-btn-next:disabled[b-v1tsmtqwmb] { background: var(--ec-border); color: #fff; opacity: 1; }
.aig-btn-issue[b-v1tsmtqwmb] {
    padding: 9px 18px;
    background: var(--ec-green);
    color: #fff;
    border: none;
    font-weight: 800;
    font-size: 13px;
}
.aig-btn-issue:disabled[b-v1tsmtqwmb] { opacity: 0.6; }

@media (max-width: 720px) {
    .aig-kinds[b-v1tsmtqwmb] { grid-template-columns: repeat(2, 1fr); }
    .aig-line[b-v1tsmtqwmb] { grid-template-columns: 1fr 1fr; }
    .aig-line-total[b-v1tsmtqwmb] { grid-column: 1 / -1; text-align: left; }
}
/* /Components/Pages/Billing/AdminInvoiceIssuerEditor.razor.rz.scp.css */
/* Admin Invoice issuer editor — transcribed from prototype AWSupplierEditor
   (EduConnect All Roles.html lines 34162-34351). Right slide-over with
   icon-less header, scrollable body grouped into sections, sticky footer. */

/* MainLayout chrome sits at z-index: 1000; this overlay must clear it. */
.awsup-edit-overlay[b-h1nk5gftke] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 1100;
    display: flex;
    justify-content: flex-end;
    animation: awsup-edit-fade-in-b-h1nk5gftke 0.12s ease;
}
@keyframes awsup-edit-fade-in-b-h1nk5gftke { from { background: rgba(15, 23, 42, 0); } }

.awsup-edit-panel[b-h1nk5gftke] {
    width: min(720px, 96%);
    height: 100%;
    background: #fff;
    box-shadow: -12px 0 40px rgba(13, 23, 51, 0.16);
    display: flex;
    flex-direction: column;
}

/* ── Header ──────────────────────────────────────────────────── */
.awsup-edit-hdr[b-h1nk5gftke] {
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--ec-border-soft);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    flex-shrink: 0;
}
.awsup-edit-hdr-text[b-h1nk5gftke] { min-width: 0; }
.awsup-edit-hdr-eyebrow[b-h1nk5gftke] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
}
.awsup-edit-hdr-title[b-h1nk5gftke] {
    font-size: 17px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 3px 0 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.awsup-edit-close[b-h1nk5gftke] {
    width: 32px;
    height: 32px;
    border: 1px solid var(--ec-border);
    background: #fff;
    border-radius: 9px;
    cursor: pointer;
    color: var(--ec-sub);
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    flex-shrink: 0;
}
.awsup-edit-close:hover[b-h1nk5gftke] { background: var(--ec-bg); }

/* ── Body ────────────────────────────────────────────────────── */
.awsup-edit-body[b-h1nk5gftke] {
    flex: 1;
    overflow-y: auto;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.awsup-sec-title[b-h1nk5gftke] {
    font-size: 11.5px;
    font-weight: 800;
    color: var(--ec-text);
    letter-spacing: -0.005em;
    margin: 0 0 10px;
}
.awsup-sec-sub[b-h1nk5gftke] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 2px 0 0;
    line-height: 1.5;
}

.awsup-field-label[b-h1nk5gftke] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 4px;
}
.awsup-field-hint[b-h1nk5gftke] {
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ec-muted);
    margin-left: 6px;
}

.awsup-input[b-h1nk5gftke] {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    font-size: 12.5px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    background: #fff;
    color: var(--ec-text);
}
.awsup-input:focus[b-h1nk5gftke] { border-color: var(--ec-purple); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ec-purple) 16%, transparent); }
.awsup-mono[b-h1nk5gftke] { font-family: ui-monospace, "SF Mono", monospace; }

.awsup-grid-2[b-h1nk5gftke] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.awsup-grid-addr[b-h1nk5gftke] {
    display: grid;
    grid-template-columns: 2fr 1fr 110px 1fr;
    gap: 10px;
}
.awsup-grid-bank[b-h1nk5gftke] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 10px;
}
@media (max-width: 620px) {
    .awsup-grid-2[b-h1nk5gftke],
    .awsup-grid-addr[b-h1nk5gftke],
    .awsup-grid-bank[b-h1nk5gftke] { grid-template-columns: 1fr; }
}

/* ── Invoice series ──────────────────────────────────────────── */
.awsup-series-hdr[b-h1nk5gftke] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.awsup-series-hdr .awsup-sec-title[b-h1nk5gftke] { margin: 0; }
.awsup-series-add[b-h1nk5gftke] {
    padding: 6px 11px;
    background: #fff;
    border: 1px dashed color-mix(in srgb, var(--ec-purple) 50%, transparent);
    color: var(--ec-purple);
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.awsup-series-add:hover[b-h1nk5gftke] { background: var(--ec-purple-lt); }

.awsup-series-rows[b-h1nk5gftke] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.awsup-series-row[b-h1nk5gftke] {
    padding: 12px 14px;
    background: var(--ec-bg);
    border: 1px solid var(--ec-border-soft);
    border-radius: 11px;
}
.awsup-series-row.is-default[b-h1nk5gftke] {
    background: color-mix(in srgb, var(--ec-purple-lt) 55%, #fff);
    border-color: color-mix(in srgb, var(--ec-purple) 40%, transparent);
}
.awsup-series-grid[b-h1nk5gftke] {
    display: grid;
    grid-template-columns: 1fr 1.5fr 80px 100px auto;
    gap: 8px;
    align-items: flex-end;
}
@media (max-width: 620px) {
    .awsup-series-grid[b-h1nk5gftke] { grid-template-columns: 1fr 1fr; }
}
.awsup-series-del[b-h1nk5gftke] {
    padding: 9px 11px;
    background: #fff;
    border: 1px solid var(--ec-border);
    color: var(--ec-red);
    border-radius: 7px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    height: fit-content;
}
.awsup-series-del:hover:not(:disabled)[b-h1nk5gftke] { background: var(--ec-bg); }
.awsup-series-del:disabled[b-h1nk5gftke] { color: var(--ec-muted); cursor: not-allowed; }

.awsup-series-foot[b-h1nk5gftke] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    gap: 9px;
    flex-wrap: wrap;
}
.awsup-series-notes[b-h1nk5gftke] {
    flex: 1;
    min-width: 200px;
    padding: 7px 10px;
    border: 1px solid var(--ec-border-soft);
    border-radius: 7px;
    font-size: 11.5px;
    font-family: inherit;
    outline: none;
    background: #fff;
    box-sizing: border-box;
    color: var(--ec-text);
}
.awsup-series-notes:focus[b-h1nk5gftke] { border-color: var(--ec-purple); }
.awsup-series-deflabel[b-h1nk5gftke] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--ec-sub);
    cursor: pointer;
}
.awsup-series-deflabel.is-on[b-h1nk5gftke] { color: var(--ec-purple); }
.awsup-series-deflabel input[type="radio"][b-h1nk5gftke] { accent-color: var(--ec-purple); margin: 0; }
.awsup-series-preview[b-h1nk5gftke] {
    font-size: 10.5px;
    color: var(--ec-muted);
    font-weight: 700;
}

/* ── Notes + default flag ────────────────────────────────────── */
.awsup-textarea[b-h1nk5gftke] {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    font-size: 12.5px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    resize: vertical;
    line-height: 1.5;
    background: #fff;
    color: var(--ec-text);
    min-height: 56px;
}
.awsup-textarea:focus[b-h1nk5gftke] { border-color: var(--ec-purple); }
.awsup-default-flag[b-h1nk5gftke] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ec-text);
    cursor: pointer;
}
.awsup-default-flag input[type="checkbox"][b-h1nk5gftke] { accent-color: var(--ec-purple); }

.awsup-form-err[b-h1nk5gftke] {
    margin: 0;
    padding: 9px 11px;
    background: color-mix(in srgb, var(--ec-red) 8%, white);
    color: var(--ec-red);
    border: 1px solid color-mix(in srgb, var(--ec-red) 30%, transparent);
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 700;
}

/* ── Footer ──────────────────────────────────────────────────── */
.awsup-edit-footer[b-h1nk5gftke] {
    padding: 14px 22px;
    border-top: 1px solid var(--ec-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0;
    background: #fff;
}
.awsup-btn[b-h1nk5gftke] {
    border-radius: 8px;
    padding: 9px 14px;
    font-size: 12.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid transparent;
}
.awsup-btn:disabled[b-h1nk5gftke] { cursor: not-allowed; }
.awsup-btn-ghost[b-h1nk5gftke] {
    background: #fff;
    color: var(--ec-sub);
    border-color: var(--ec-border);
}
.awsup-btn-ghost:hover[b-h1nk5gftke] { background: var(--ec-bg); }
.awsup-btn-primary[b-h1nk5gftke] {
    background: var(--ec-purple);
    color: #fff;
    font-weight: 800;
    padding: 9px 18px;
    font-size: 13px;
}
.awsup-btn-primary:hover:not(:disabled)[b-h1nk5gftke] { background: color-mix(in srgb, var(--ec-purple) 88%, black); }
.awsup-btn-primary:disabled[b-h1nk5gftke] { background: var(--ec-border); }
/* /Components/Pages/Billing/AdminInvoiceIssuersPage.razor.rz.scp.css */
/* Admin Invoice issuers — transcribed from prototype AWSuppliers
   (EduConnect All Roles.html lines 34012-34159). */

/* ── KPI strip ───────────────────────────────────────────────── */
.awsup-kpis[b-1yvcss0gvg] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
@media (max-width: 980px) { .awsup-kpis[b-1yvcss0gvg] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .awsup-kpis[b-1yvcss0gvg] { grid-template-columns: 1fr; } }

/* ── Intro + Add row ─────────────────────────────────────────── */
.awsup-intro-row[b-1yvcss0gvg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.awsup-intro[b-1yvcss0gvg] {
    font-size: 12.5px;
    color: var(--ec-muted);
    line-height: 1.5;
    max-width: 680px;
    margin: 0;
}
.awsup-add[b-1yvcss0gvg] {
    background: var(--ec-purple);
    border: none;
    border-radius: 9px;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}
.awsup-add:hover[b-1yvcss0gvg] { background: color-mix(in srgb, var(--ec-purple) 88%, black); }

/* ── Issuer list ─────────────────────────────────────────────── */
.awsup-list[b-1yvcss0gvg] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.awsup-card[b-1yvcss0gvg] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 13px;
    padding: 14px 18px;
}
.awsup-card.is-default[b-1yvcss0gvg] { border-left: 4px solid var(--ec-amber); }
.awsup-card.is-archived[b-1yvcss0gvg] { opacity: 0.6; }

.awsup-card-top[b-1yvcss0gvg] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
}
.awsup-card-main[b-1yvcss0gvg] {
    flex: 1 1 380px;
    min-width: 0;
}

.awsup-card-titlerow[b-1yvcss0gvg] {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 5px;
}
.awsup-card-name[b-1yvcss0gvg] {
    font-size: 16px;
    font-weight: 800;
    color: var(--ec-text);
    letter-spacing: -0.01em;
    margin: 0;
}
.awsup-tag[b-1yvcss0gvg] {
    font-size: 9.5px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.06em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.awsup-tag-default[b-1yvcss0gvg] {
    color: var(--ec-amber);
    background: var(--ec-amber-lt);
}
.awsup-tag-archived[b-1yvcss0gvg] {
    color: var(--ec-muted);
    background: var(--ec-bg);
}

.awsup-card-legal[b-1yvcss0gvg] {
    font-size: 11.5px;
    color: var(--ec-muted);
    margin: 0 0 7px;
}

.awsup-card-facts[b-1yvcss0gvg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 4px 14px;
    font-size: 11.5px;
}
.awsup-fact[b-1yvcss0gvg] {
    color: var(--ec-sub);
    margin: 0;
}
.awsup-fact-k[b-1yvcss0gvg] {
    color: var(--ec-muted);
    font-weight: 700;
}
.awsup-fact-v[b-1yvcss0gvg] {
    font-weight: 700;
    color: var(--ec-text);
}
.awsup-mono[b-1yvcss0gvg] {
    font-family: ui-monospace, "SF Mono", monospace;
}
.awsup-iban[b-1yvcss0gvg] { font-size: 11px; }

.awsup-card-addr[b-1yvcss0gvg] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 6px 0 0;
}

.awsup-series[b-1yvcss0gvg] {
    margin-top: 9px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.awsup-series-chip[b-1yvcss0gvg] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    background: var(--ec-bg);
    border: 1px solid var(--ec-border-soft);
    border-radius: 99px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--ec-sub);
}
.awsup-series-chip.is-default[b-1yvcss0gvg] {
    background: var(--ec-purple-lt);
    border-color: color-mix(in srgb, var(--ec-purple) 40%, transparent);
    color: var(--ec-purple);
}
.awsup-series-code[b-1yvcss0gvg] {
    font-weight: 800;
}
.awsup-series-dot[b-1yvcss0gvg] { color: var(--ec-muted); }
.awsup-series-deflbl[b-1yvcss0gvg] {
    font-size: 9px;
    opacity: 0.7;
}

/* ── Card actions ────────────────────────────────────────────── */
.awsup-card-actions[b-1yvcss0gvg] {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.awsup-act[b-1yvcss0gvg] {
    padding: 6px 12px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.awsup-act:hover[b-1yvcss0gvg] { background: var(--ec-bg); }
.awsup-act-ghost[b-1yvcss0gvg] {
    padding: 6px 10px;
    font-size: 11px;
    color: var(--ec-sub);
}
.awsup-act-edit[b-1yvcss0gvg] { color: var(--ec-text); }
.awsup-act-archive[b-1yvcss0gvg] { color: var(--ec-red); }
.awsup-act-restore[b-1yvcss0gvg] { color: var(--ec-green); }

/* ── Notes footer ────────────────────────────────────────────── */
.awsup-card-notes[b-1yvcss0gvg] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 9px 0 0;
    padding-top: 9px;
    border-top: 1px solid var(--ec-border-soft);
    font-style: italic;
}

/* ── Archive confirm dialog ──────────────────────────────────── */
.awsup-confirm-overlay[b-1yvcss0gvg] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: awsup-fade-in-b-1yvcss0gvg 0.12s ease;
}
@keyframes awsup-fade-in-b-1yvcss0gvg { from { background: rgba(15, 23, 42, 0); } }

.awsup-confirm[b-1yvcss0gvg] {
    background: #fff;
    border-radius: 14px;
    max-width: 440px;
    width: 100%;
    box-shadow: 0 24px 60px rgba(13, 23, 51, 0.4);
}
.awsup-confirm-hdr[b-1yvcss0gvg] {
    padding: 18px 22px;
    border-bottom: 1px solid var(--ec-border-soft);
}
.awsup-confirm-eyebrow[b-1yvcss0gvg] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-amber);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
}
.awsup-confirm-title[b-1yvcss0gvg] {
    font-size: 16px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 4px 0 0;
}
.awsup-confirm-body[b-1yvcss0gvg] {
    padding: 14px 22px;
}
.awsup-confirm-body p[b-1yvcss0gvg] {
    font-size: 13px;
    color: var(--ec-text);
    line-height: 1.55;
    margin: 0;
}
.awsup-confirm-foot[b-1yvcss0gvg] {
    padding: 12px 22px 16px;
    display: flex;
    justify-content: flex-end;
    gap: 7px;
}
.awsup-cbtn[b-1yvcss0gvg] {
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    border: 1px solid transparent;
}
.awsup-cbtn-ghost[b-1yvcss0gvg] {
    background: #fff;
    border-color: var(--ec-border);
    color: var(--ec-sub);
}
.awsup-cbtn-ghost:hover[b-1yvcss0gvg] { background: var(--ec-bg); }
.awsup-cbtn-archive[b-1yvcss0gvg] {
    background: var(--ec-amber);
    color: #fff;
    font-weight: 800;
    padding: 8px 16px;
}
.awsup-cbtn-archive:hover[b-1yvcss0gvg] { background: color-mix(in srgb, var(--ec-amber) 88%, black); }
/* /Components/Pages/Billing/AdminInvoicesPage.razor.rz.scp.css */
/* Admin All Invoices ledger — transcribed from prototype AWInvoices
   (EduConnect All Roles.html lines 35604-35857): KPI strip · toolbar
   (search + issuer + kind + status segmented filter + New invoice) ·
   ledger table · empty state · storno confirm dialog · toast. */

.awi-mono[b-uqbeos8ecy] { font-family: ui-monospace, "SF Mono", monospace; }
.awi-right[b-uqbeos8ecy] { text-align: right; }

/* ── KPI strip ───────────────────────────────────────────────── */
.awi-kpis[b-uqbeos8ecy] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

/* ── Toolbar ─────────────────────────────────────────────────── */
.awi-toolbar[b-uqbeos8ecy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    flex-wrap: wrap;
}
.awi-toolbar-filters[b-uqbeos8ecy] {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    align-items: center;
}
.awi-search[b-uqbeos8ecy] {
    padding: 8px 11px;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    font-size: 12.5px;
    font-family: inherit;
    outline: none;
    min-width: 240px;
    background: #fff;
    color: var(--ec-text);
}
.awi-search:focus[b-uqbeos8ecy] { border-color: var(--ec-primary, var(--ec-blue)); }
.awi-tb-select[b-uqbeos8ecy] {
    padding: 8px 11px;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    font-size: 12.5px;
    font-family: inherit;
    background: #fff;
    font-weight: 700;
    color: var(--ec-text);
    min-width: 140px;
    outline: none;
}

.awi-status-seg[b-uqbeos8ecy] {
    display: flex;
    gap: 4px;
}
.awi-status-btn[b-uqbeos8ecy] {
    padding: 7px 11px;
    background: #fff;
    color: var(--ec-sub);
    border: 1px solid var(--ec-border);
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.awi-status-btn.is-active[b-uqbeos8ecy] {
    background: var(--seg);
    color: #fff;
    border-color: var(--seg);
}
.awi-status-badge[b-uqbeos8ecy] {
    font-size: 10px;
    font-weight: 800;
    background: var(--ec-border-soft, #eef0f6);
    color: var(--ec-muted);
    padding: 1px 5px;
    border-radius: 4px;
}
.awi-status-btn.is-active .awi-status-badge[b-uqbeos8ecy] {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.awi-new-btn[b-uqbeos8ecy] {
    background: var(--ec-purple);
    border: none;
    border-radius: 9px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.awi-new-btn:hover:not(:disabled)[b-uqbeos8ecy] { background: color-mix(in srgb, var(--ec-purple) 88%, black); }
.awi-new-btn:disabled[b-uqbeos8ecy] { opacity: 0.5; cursor: not-allowed; }

/* ── Ledger table ────────────────────────────────────────────── */
.awi-ledger[b-uqbeos8ecy] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    overflow: hidden;
}
.awi-ledger-head[b-uqbeos8ecy],
.awi-ledger-row[b-uqbeos8ecy] {
    display: grid;
    grid-template-columns: 180px 1fr 130px 130px 110px 120px 120px;
    gap: 0;
    align-items: center;
}
.awi-ledger-head[b-uqbeos8ecy] {
    padding: 10px 16px;
    background: var(--ec-bg);
    border-bottom: 1px solid var(--ec-border);
    font-size: 10px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.awi-ledger-row[b-uqbeos8ecy] {
    padding: 13px 16px;
    border-top: 1px solid var(--ec-border-soft, #eef0f6);
    cursor: pointer;
}
.awi-ledger-row:first-of-type[b-uqbeos8ecy] { border-top: none; }
.awi-ledger-row:hover[b-uqbeos8ecy] { background: var(--ec-bg); }

.awi-num[b-uqbeos8ecy] { font-size: 12.5px; font-weight: 800; color: var(--ec-text); margin: 0; }
.awi-num-cross[b-uqbeos8ecy] { font-size: 10px; color: var(--ec-muted); margin: 2px 0 0; }

.awi-cell-desc[b-uqbeos8ecy] { min-width: 0; }
.awi-desc-name[b-uqbeos8ecy] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ec-text);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.awi-desc-sub[b-uqbeos8ecy] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 2px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.awi-kindtag[b-uqbeos8ecy] {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}

.awi-issuer-name[b-uqbeos8ecy] { font-size: 11.5px; font-weight: 700; color: var(--ec-text); margin: 0; }

.awi-total[b-uqbeos8ecy] { font-size: 14px; font-weight: 800; color: var(--ec-text); margin: 0; }
.awi-total.is-negative[b-uqbeos8ecy] { color: var(--ec-purple); }

.awi-date-issue[b-uqbeos8ecy] { font-size: 11px; color: var(--ec-text); font-weight: 700; margin: 0; }
.awi-date-due[b-uqbeos8ecy] { font-size: 10.5px; color: var(--ec-muted); margin: 2px 0 0; font-weight: 600; }
.awi-date-due.is-overdue[b-uqbeos8ecy] { color: var(--ec-red); font-weight: 800; }

.awi-pill[b-uqbeos8ecy] {
    display: inline-flex;
    align-items: center;
    font-size: 9.5px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 5px;
    letter-spacing: 0.06em;
}
.awi-pill.is-paid[b-uqbeos8ecy]      { color: var(--ec-green); background: var(--ec-green-lt); }
.awi-pill.is-issued[b-uqbeos8ecy]    { color: var(--ec-blue); background: var(--ec-blue-lt); }
.awi-pill.is-overdue[b-uqbeos8ecy]   { color: var(--ec-red); background: var(--ec-red-lt); }
.awi-pill.is-draft[b-uqbeos8ecy]     { color: var(--ec-amber); background: var(--ec-amber-lt); }
.awi-pill.is-storno[b-uqbeos8ecy]    { color: var(--ec-purple); background: var(--ec-purple-lt); }
.awi-pill.is-cancelled[b-uqbeos8ecy] { color: var(--ec-muted); background: var(--ec-bg); text-decoration: line-through; }

.awi-cell-actions[b-uqbeos8ecy] {
    display: flex;
    justify-content: flex-end;
    gap: 5px;
}
.awi-rowbtn[b-uqbeos8ecy] {
    padding: 5px 9px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}
.awi-rowbtn:disabled[b-uqbeos8ecy] { opacity: 0.5; cursor: not-allowed; }
.awi-rowbtn-paid[b-uqbeos8ecy] { color: var(--ec-green); }
.awi-rowbtn-paid:hover:not(:disabled)[b-uqbeos8ecy] { background: var(--ec-green-lt); }
.awi-rowbtn-cancel[b-uqbeos8ecy] { color: var(--ec-red); }
.awi-rowbtn-cancel:hover:not(:disabled)[b-uqbeos8ecy] { background: var(--ec-red-lt); }

/* ── Storno confirm dialog ───────────────────────────────────── */
.awi-confirm-overlay[b-uqbeos8ecy] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.awi-confirm[b-uqbeos8ecy] {
    background: #fff;
    border-radius: 14px;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 24px 60px rgba(13, 23, 51, 0.4);
}
.awi-confirm-hdr[b-uqbeos8ecy] {
    padding: 18px 22px;
    border-bottom: 1px solid var(--ec-border-soft, #eef0f6);
}
.awi-confirm-eyebrow[b-uqbeos8ecy] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-red);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
}
.awi-confirm-title[b-uqbeos8ecy] { font-size: 16px; font-weight: 800; color: var(--ec-text); margin: 4px 0 0; }
.awi-confirm-body[b-uqbeos8ecy] { padding: 14px 22px; }
.awi-confirm-text[b-uqbeos8ecy] { font-size: 13px; color: var(--ec-text); line-height: 1.55; margin: 0; }
.awi-confirm-next[b-uqbeos8ecy] {
    font-size: 11.5px;
    color: var(--ec-muted);
    margin: 8px 0 0;
}
.awi-confirm-next b[b-uqbeos8ecy] { color: var(--ec-purple); }
.awi-confirm-label[b-uqbeos8ecy] {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--ec-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 14px 0 5px;
}
.awi-confirm-textarea[b-uqbeos8ecy] {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    font-size: 12.5px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    resize: vertical;
}
.awi-confirm-err[b-uqbeos8ecy] {
    margin-top: 10px;
    padding: 8px 10px;
    background: var(--ec-red-lt);
    color: var(--ec-red);
    border-radius: 7px;
    font-size: 12px;
}
.awi-confirm-foot[b-uqbeos8ecy] {
    padding: 12px 22px 16px;
    display: flex;
    justify-content: flex-end;
    gap: 7px;
}
.awi-cbtn[b-uqbeos8ecy] {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    border: 1px solid transparent;
}
.awi-cbtn:disabled[b-uqbeos8ecy] { opacity: 0.6; cursor: not-allowed; }
.awi-cbtn-ghost[b-uqbeos8ecy] { background: #fff; border-color: var(--ec-border); color: var(--ec-sub); font-weight: 700; }
.awi-cbtn-storno[b-uqbeos8ecy] { background: var(--ec-red); color: #fff; border: none; }

/* ── Toast ───────────────────────────────────────────────────── */
.awi-toast[b-uqbeos8ecy] {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 18px;
    background: var(--ec-text);
    color: #fff;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(13, 23, 51, 0.25);
    z-index: 1300;
}

@media (max-width: 1100px) {
    .awi-kpis[b-uqbeos8ecy] { grid-template-columns: repeat(2, 1fr); }
    .awi-ledger-head[b-uqbeos8ecy] { display: none; }
    .awi-ledger-row[b-uqbeos8ecy] {
        grid-template-columns: 1fr auto;
        gap: 6px 12px;
    }
    .awi-cell-issuer[b-uqbeos8ecy], .awi-cell-dates[b-uqbeos8ecy] { display: none; }
}
/* /Components/Pages/Billing/AdminInvoiceStudentPicker.razor.rz.scp.css */
/* Admin · Invoice generator recipient picker — transcribed from prototype
   AWInvoiceStudentPicker. Searchable, class-filtered multi-select list. */

.aisp-filters[b-2em9c38jsg] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 9px;
}
.aisp-search[b-2em9c38jsg],
.aisp-select[b-2em9c38jsg] {
    padding: 9px 11px;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    font-size: 12.5px;
    font-family: inherit;
    outline: none;
    background: #fff;
    color: var(--ec-text);
}
.aisp-select[b-2em9c38jsg] { font-weight: 700; }

.aisp-summary[b-2em9c38jsg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 7px;
}
.aisp-count[b-2em9c38jsg] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}
.aisp-selectall[b-2em9c38jsg] {
    padding: 5px 10px;
    background: #fff;
    border: 1px solid var(--ec-border);
    color: var(--ec-purple);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}
.aisp-selectall:hover[b-2em9c38jsg] { background: var(--ec-purple-lt); }

.aisp-list[b-2em9c38jsg] {
    max-height: 340px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    padding: 4px;
    background: #fff;
}
.aisp-empty[b-2em9c38jsg] {
    font-size: 12px;
    color: var(--ec-muted);
    text-align: center;
    padding: 24px 12px;
    margin: 0;
}
.aisp-item[b-2em9c38jsg] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid transparent;
    border-radius: 7px;
    cursor: pointer;
}
.aisp-item.is-picked[b-2em9c38jsg] {
    background: color-mix(in srgb, var(--ec-purple-lt) 88%, transparent);
    border-color: color-mix(in srgb, var(--ec-purple) 33%, transparent);
}
.aisp-item input[type="checkbox"][b-2em9c38jsg] { margin: 0; accent-color: var(--ec-purple); width: 15px; height: 15px; }
.aisp-avatar[b-2em9c38jsg] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
}
.aisp-item-text[b-2em9c38jsg] { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.aisp-item-name[b-2em9c38jsg] {
    font-size: 13px;
    font-weight: 700;
    color: var(--ec-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.aisp-item-class[b-2em9c38jsg] { font-size: 10.5px; color: var(--ec-muted); margin-top: 1px; }
/* /Components/Pages/Billing/ParentBillingPage.razor.rz.scp.css */
.pb-page[b-twti41inix] { padding: 0; background: var(--ec-bg); min-height: 100%; }
.pb-header[b-twti41inix] { margin-bottom: 16px; }
.pb-title[b-twti41inix] { font-size: 22px; font-weight: 800; color: var(--ec-text); margin: 0; letter-spacing: -0.01em; }
.pb-subtitle[b-twti41inix] { font-size: 12.5px; color: var(--ec-sub); margin: 4px 0 0; line-height: 1.5; }

/* ── Hero ─────────────────────────────────────────────────────────── */
.pb-hero[b-twti41inix] {
    position: relative;
    border-radius: 16px;
    padding: 24px 26px;
    color: #fff;
    margin-bottom: 16px;
    overflow: hidden;
}
.pb-hero--alert[b-twti41inix] { background: linear-gradient(120deg, #b91c1c 0%, var(--ec-red) 60%, #f97316 130%); }
.pb-hero--warn[b-twti41inix]  { background: linear-gradient(120deg, #b45309 0%, var(--ec-amber) 60%, #f97316 130%); }
.pb-hero--ok[b-twti41inix]    { background: linear-gradient(120deg, #15803d 0%, var(--ec-green) 60%, var(--ec-teal) 130%); }
.pb-hero-ring[b-twti41inix] {
    position: absolute; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.07);
    pointer-events: none;
}
.pb-hero-ring-1[b-twti41inix] { top: -60px; right: -50px; width: 240px; height: 240px; }
.pb-hero-ring-2[b-twti41inix] { bottom: -80px; right: 60px; width: 180px; height: 180px; }
.pb-hero-row[b-twti41inix] {
    position: relative;
    display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap;
}
.pb-hero-main[b-twti41inix] { flex: 1 1 320px; min-width: 0; }
.pb-hero-eyebrow[b-twti41inix] {
    font-size: 11px; font-weight: 800;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.14em; text-transform: uppercase;
    margin: 0;
}
.pb-hero-amount[b-twti41inix] {
    font-size: 48px; font-weight: 800;
    margin: 6px 0 0; letter-spacing: -0.03em; line-height: 1;
    font-family: ui-monospace, 'SF Mono', monospace;
}
.pb-hero-amount-unit[b-twti41inix] {
    font-size: 18px; font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
}
.pb-hero-status[b-twti41inix] {
    font-size: 13.5px; color: rgba(255, 255, 255, 0.88);
    margin: 8px 0 0; line-height: 1.55; max-width: 540px;
}
.pb-hero-status b[b-twti41inix] { color: #fff; }
.pb-hero-actions[b-twti41inix] {
    display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap;
}
.pb-hero-pay[b-twti41inix] {
    background: #fff; border: none; border-radius: 9px;
    padding: 12px 22px;
    font-size: 14px; font-weight: 800;
    cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.pb-hero--alert .pb-hero-pay[b-twti41inix] { color: #b91c1c; }
.pb-hero--warn  .pb-hero-pay[b-twti41inix] { color: #b45309; }
.pb-hero--ok    .pb-hero-pay[b-twti41inix] { color: #15803d; }
.pb-hero-pay:disabled[b-twti41inix] { opacity: 0.85; cursor: not-allowed; }
.pb-hero-ghost[b-twti41inix] {
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 9px;
    padding: 12px 16px;
    color: #fff;
    font-size: 12.5px; font-weight: 700;
    cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 7px;
}
.pb-hero-ghost:hover[b-twti41inix] { background: rgba(255, 255, 255, 0.24); }

.pb-hero-side[b-twti41inix] {
    min-width: 240px;
    display: flex; flex-direction: column; gap: 8px;
}
.pb-hero-card[b-twti41inix] {
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 11px;
    padding: 12px 15px;
}
.pb-hero-card-eyebrow[b-twti41inix] {
    font-size: 10px; font-weight: 800;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.1em; text-transform: uppercase;
    margin: 0;
}
.pb-hero-card-value[b-twti41inix] {
    font-size: 22px; font-weight: 800;
    line-height: 1.05; margin: 3px 0 0;
    font-family: ui-monospace, 'SF Mono', monospace;
}
.pb-hero-card-sub[b-twti41inix] {
    font-size: 11px; color: rgba(255, 255, 255, 0.78);
    margin: 2px 0 0;
}

/* ── Two-column body ──────────────────────────────────────────────── */
.pb-body[b-twti41inix] {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 16px;
    align-items: flex-start;
}
.pb-col-main[b-twti41inix] { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pb-col-side[b-twti41inix] { display: flex; flex-direction: column; gap: 14px; }

.pb-section-head[b-twti41inix] {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 9px;
    padding: 0 4px;
    flex-wrap: wrap;
    gap: 9px;
}
.pb-section-head-left[b-twti41inix] {
    display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.pb-section-badge[b-twti41inix] {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 6px;
    font-size: 11px; font-weight: 800;
    letter-spacing: 0.08em;
    color: #fff;
}
.pb-section-badge--alert[b-twti41inix] { background: var(--ec-red); }
.pb-section-badge--warn[b-twti41inix]  { background: var(--ec-amber); }
.pb-section-badge--ok[b-twti41inix]    { background: var(--ec-green-lt); color: var(--ec-green); }
.pb-section-badge--info[b-twti41inix]  { background: var(--ec-blue-lt); color: var(--ec-blue); }
.pb-section-total[b-twti41inix] {
    font-size: 13.5px; font-weight: 800; color: var(--ec-text);
    margin: 0;
    font-family: ui-monospace, 'SF Mono', monospace;
}
.pb-section-total-unit[b-twti41inix] { color: var(--ec-muted); font-weight: 600; }
.pb-section-cta[b-twti41inix] {
    border: none; border-radius: 8px;
    padding: 8px 14px;
    font-size: 12px; font-weight: 800;
    color: #fff; cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 5px;
}
.pb-section-cta--alert[b-twti41inix] { background: var(--ec-red); }
.pb-section-cta--warn[b-twti41inix]  { background: var(--ec-amber); }
.pb-section-cta:disabled[b-twti41inix] { opacity: 0.8; cursor: not-allowed; }

.pb-rows[b-twti41inix] { display: flex; flex-direction: column; gap: 8px; }
.pb-rows--padded[b-twti41inix] { padding: 0 0 4px; margin-top: 8px; }

/* ── Invoice row ──────────────────────────────────────────────────── */
.pb-row[b-twti41inix] {
    width: 100%; text-align: left;
    font-family: inherit; cursor: pointer;
    background: var(--ec-card);
    border: 1px solid var(--ec-border);
    border-radius: 10px;
    padding: 13px 14px 13px 12px;
    display: grid;
    grid-template-columns: 94px 44px 1fr auto auto;
    gap: 13px;
    align-items: center;
    transition: border-color .15s, box-shadow .15s;
}
.pb-row--alert[b-twti41inix] { border-color: rgba(220, 38, 38, 0.3); border-left: 4px solid var(--ec-red); padding-left: 8px; }
.pb-row--warn[b-twti41inix]  { border-left: 4px solid var(--ec-amber); padding-left: 8px; }
.pb-row--ok[b-twti41inix]    { border-left: 4px solid var(--ec-green); padding-left: 8px; }
.pb-row--info[b-twti41inix]  { border-left: 4px solid var(--ec-blue); padding-left: 8px; }
.pb-row:hover[b-twti41inix] { box-shadow: 0 2px 10px rgba(13, 23, 51, 0.08); }
.pb-row--alert:hover[b-twti41inix] { border-color: var(--ec-red); box-shadow: 0 2px 10px rgba(220, 38, 38, 0.12); }

.pb-row-badge[b-twti41inix] {
    display: inline-flex; align-items: center; gap: 5px;
    justify-self: start;
    padding: 5px 9px; border-radius: 6px;
    font-size: 10px; font-weight: 800;
    letter-spacing: 0.08em;
}
.pb-row-badge--alert[b-twti41inix] { background: var(--ec-red);   color: #fff; }
.pb-row-badge--warn[b-twti41inix]  { background: var(--ec-amber); color: #fff; }
.pb-row-badge--ok[b-twti41inix]    { background: var(--ec-green-lt); color: var(--ec-green); }
.pb-row-badge--info[b-twti41inix]  { background: var(--ec-blue-lt);  color: var(--ec-blue); }
.pb-row-badge i[b-twti41inix] { font-size: 11px; }

.pb-row-tile[b-twti41inix] {
    width: 40px; height: 40px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px;
}

.pb-row-body[b-twti41inix] { min-width: 0; }
.pb-row-title[b-twti41inix] {
    font-size: 13.5px; font-weight: 800; color: var(--ec-text);
    line-height: 1.3; margin: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pb-row-sub[b-twti41inix] {
    font-size: 11px; color: var(--ec-muted);
    margin: 3px 0 0; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pb-row-sub--alert[b-twti41inix] { color: var(--ec-red); font-weight: 700; }

.pb-row-amount[b-twti41inix] {
    font-size: 16px; font-weight: 800;
    color: var(--ec-text);
    font-family: ui-monospace, 'SF Mono', monospace;
    white-space: nowrap;
    min-width: 90px; text-align: right;
    margin: 0;
}
.pb-row-amount--paid[b-twti41inix] { color: var(--ec-muted); text-decoration: line-through; }
.pb-row-amount--alert[b-twti41inix] { color: var(--ec-red); }
.pb-row-amount-unit[b-twti41inix] { font-size: 11px; color: var(--ec-muted); font-weight: 600; margin-left: 3px; }

.pb-row-action[b-twti41inix] {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 12px; border-radius: 7px;
    font-size: 11.5px; font-weight: 800;
    white-space: nowrap;
    border: 1px solid transparent;
}
.pb-row-action--alert[b-twti41inix] { background: var(--ec-red);   color: #fff; }
.pb-row-action--warn[b-twti41inix]  { background: var(--ec-blue);  color: #fff; }
.pb-row-action--ok[b-twti41inix]    { background: var(--ec-green-lt); color: var(--ec-green); }
.pb-row-action--info[b-twti41inix]  { background: var(--ec-blue-lt); color: var(--ec-blue); }
.pb-row-action--ghost[b-twti41inix] { background: #fff; color: var(--ec-sub); border-color: var(--ec-border); font-weight: 700; }

/* ── Paid section toggle ──────────────────────────────────────────── */
.pb-paid-toggle[b-twti41inix] {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    background: var(--ec-green-lt);
    border: 1px solid rgba(22, 163, 74, 0.25);
    border-radius: 10px;
    padding: 12px 16px;
    cursor: pointer; font-family: inherit;
    transition: background .15s, border-color .15s;
}
.pb-paid-toggle.is-open[b-twti41inix] {
    background: var(--ec-card);
    border-color: var(--ec-border);
}
.pb-paid-toggle-chev[b-twti41inix] {
    font-size: 12px; font-weight: 700; color: var(--ec-sub);
    display: inline-flex; align-items: center; gap: 5px;
}

/* ── Right sidebar ────────────────────────────────────────────────── */
.pb-aside-card[b-twti41inix] {
    background: linear-gradient(135deg, rgba(207, 250, 254, 0.25), #fff);
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    overflow: hidden;
}
.pb-aside-head[b-twti41inix] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--ec-border-soft);
    display: flex; justify-content: space-between; align-items: center;
    gap: 9px;
}
.pb-aside-title[b-twti41inix] {
    font-size: 12px; font-weight: 800; color: var(--ec-text);
    letter-spacing: -0.005em; margin: 0;
    text-transform: uppercase;
}
.pb-aside-amount[b-twti41inix] {
    font-size: 11px; color: var(--ec-muted); font-weight: 700;
    font-family: ui-monospace, 'SF Mono', monospace;
}
.pb-aside-body[b-twti41inix] { padding: 14px 16px; }
.pb-aside-body--list[b-twti41inix] { padding: 0; }

.pb-spend-list[b-twti41inix] { display: flex; flex-direction: column; gap: 10px; }
.pb-spend-row-head[b-twti41inix] {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 5px;
    gap: 8px;
}
.pb-spend-row-label[b-twti41inix] {
    display: inline-flex; align-items: center; gap: 7px;
    min-width: 0;
    font-size: 12px; font-weight: 700; color: var(--ec-text);
}
.pb-spend-row-label i[b-twti41inix] { font-size: 13px; }
.pb-spend-row-meta[b-twti41inix] {
    display: inline-flex; align-items: baseline; gap: 8px;
    white-space: nowrap;
}
.pb-spend-row-pct[b-twti41inix] { font-size: 11px; color: var(--ec-muted); font-weight: 600; }
.pb-spend-row-amount[b-twti41inix] {
    font-size: 12px; font-weight: 800; color: var(--ec-text);
    font-family: ui-monospace, 'SF Mono', monospace;
}
.pb-spend-bar[b-twti41inix] {
    height: 6px; background: var(--ec-border-soft);
    border-radius: 3px; overflow: hidden;
}
.pb-spend-bar-fill[b-twti41inix] { height: 100%; border-radius: 3px; transition: width .3s; }

.pb-doc-row[b-twti41inix] {
    width: 100%;
    display: flex; align-items: center; gap: 11px;
    padding: 11px 16px;
    background: transparent; border: none;
    border-top: 1px solid var(--ec-border-soft);
    cursor: pointer; font-family: inherit; text-align: left;
    transition: background .12s;
}
.pb-doc-row:first-child[b-twti41inix] { border-top: none; }
.pb-doc-row:hover[b-twti41inix] { background: var(--ec-blue-gh); }
.pb-doc-icon[b-twti41inix] {
    width: 32px; height: 32px; border-radius: 8px;
    background: var(--ec-bg);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; color: var(--ec-red); font-size: 14px;
}
.pb-doc-body[b-twti41inix] { flex: 1; min-width: 0; }
.pb-doc-title[b-twti41inix] {
    font-size: 12.5px; font-weight: 700; color: var(--ec-text);
    margin: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pb-doc-sub[b-twti41inix] { font-size: 10.5px; color: var(--ec-muted); margin: 2px 0 0; }
.pb-doc-cta[b-twti41inix] { font-size: 11px; font-weight: 700; color: var(--ec-blue); white-space: nowrap; }

/* ── Detail slide-over ────────────────────────────────────────────── */
.pb-sheet-overlay[b-twti41inix] {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 95;
}
.pb-sheet[b-twti41inix] {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 560px; max-width: 96vw;
    background: #fff; z-index: 96;
    overflow-y: auto;
    box-shadow: -16px 0 32px rgba(0, 0, 0, 0.16);
}
.pb-sheet-inner[b-twti41inix] { padding: 22px; }
.pb-sheet-close[b-twti41inix] {
    float: right;
    width: 32px; height: 32px; border-radius: 9px;
    background: #fff; border: 1px solid var(--ec-border);
    color: var(--ec-sub); cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px;
}
.pb-sheet-close:hover[b-twti41inix] { color: var(--ec-text); border-color: var(--ec-blue); }
.pb-sheet-eyebrow[b-twti41inix] {
    font-size: 10.5px; font-weight: 800; color: var(--ec-muted);
    letter-spacing: 0.1em; text-transform: uppercase;
    margin: 0;
}
.pb-sheet-number[b-twti41inix] {
    font-size: 24px; font-weight: 800; color: var(--ec-text);
    margin: 4px 0 0; letter-spacing: -0.01em;
}
.pb-sheet-lead[b-twti41inix] { font-size: 12.5px; color: var(--ec-sub); margin: 8px 0 0; line-height: 1.5; }

.pb-sheet-lines[b-twti41inix] {
    margin-top: 22px;
    border: 1px solid var(--ec-border);
    border-radius: 11px;
    overflow: hidden;
}
.pb-sheet-line[b-twti41inix] {
    padding: 12px 14px;
    display: flex; justify-content: space-between;
    border-bottom: 1px solid var(--ec-border-soft);
}
.pb-sheet-line:last-of-type[b-twti41inix] { border-bottom: none; }
.pb-sheet-line-body[b-twti41inix] { flex: 1; min-width: 0; }
.pb-sheet-line-label[b-twti41inix] { font-size: 13px; font-weight: 600; color: var(--ec-text); margin: 0; }
.pb-sheet-line-meta[b-twti41inix] { font-size: 11px; color: var(--ec-muted); margin: 2px 0 0; }
.pb-sheet-line-discount[b-twti41inix] { font-size: 11px; color: var(--ec-green); margin: 2px 0 0; }
.pb-sheet-line-amount[b-twti41inix] {
    font-size: 14px; font-weight: 700;
    font-family: ui-monospace, 'SF Mono', monospace; margin: 0;
    white-space: nowrap;
}
.pb-sheet-total[b-twti41inix] {
    padding: 14px;
    background: var(--ec-bg);
    display: flex; justify-content: space-between;
}
.pb-sheet-total-label[b-twti41inix] { font-size: 13px; font-weight: 800; color: var(--ec-text); margin: 0; }
.pb-sheet-total-value[b-twti41inix] {
    font-size: 18px; font-weight: 800; color: var(--ec-text);
    font-family: ui-monospace, 'SF Mono', monospace; margin: 0;
}

.pb-sheet-pay-note[b-twti41inix] {
    margin-top: 18px;
    padding: 14px;
    background: var(--ec-blue-lt);
    border-radius: 11px;
}
.pb-sheet-pay-note-text[b-twti41inix] { margin: 0 0 8px; font-size: 12.5px; color: var(--ec-text); }
.pb-sheet-pay-btn[b-twti41inix] {
    background: var(--ec-faint); border: none; border-radius: 9px;
    padding: 9px 16px;
    font-size: 12.5px; font-weight: 800; color: #fff;
    cursor: not-allowed; font-family: inherit;
}

.pb-sheet-credits[b-twti41inix] { margin-top: 14px; }
.pb-sheet-credits-eyebrow[b-twti41inix] {
    font-size: 10.5px; font-weight: 800; color: var(--ec-muted);
    letter-spacing: 0.08em; text-transform: uppercase;
    margin: 0 0 6px;
}
.pb-sheet-credit-line[b-twti41inix] { margin: 0 0 4px; font-size: 12px; color: var(--ec-sub); }

.pb-sheet-issuer[b-twti41inix] {
    margin: 6px 0 0; font-size: 12px; font-weight: 600; color: var(--ec-sub);
    display: inline-flex; align-items: center; gap: 6px;
}
.pb-sheet-issuer i[b-twti41inix] { font-size: 12px; color: var(--ec-muted); }

.pb-sheet-line--sub[b-twti41inix] { background: var(--ec-bg); }
.pb-sheet-line--sub .pb-sheet-line-label[b-twti41inix] { font-weight: 600; color: var(--ec-sub); }
.pb-sheet-line--sub .pb-sheet-line-amount[b-twti41inix] { font-weight: 600; color: var(--ec-sub); font-size: 13px; }

.pb-sheet-storno[b-twti41inix] {
    margin-top: 16px;
    display: flex; gap: 10px; align-items: flex-start;
    padding: 12px 14px;
    border-radius: 11px;
    border: 1px solid var(--ec-border);
    background: var(--ec-bg);
}
.pb-sheet-storno > i[b-twti41inix] { font-size: 16px; line-height: 1.3; flex-shrink: 0; }
.pb-sheet-storno--cancelled[b-twti41inix] { border-color: color-mix(in srgb, var(--ec-red) 35%, var(--ec-border)); background: var(--ec-red-lt); }
.pb-sheet-storno--cancelled > i[b-twti41inix] { color: var(--ec-red); }
.pb-sheet-storno--storno[b-twti41inix] { border-color: color-mix(in srgb, var(--ec-blue) 35%, var(--ec-border)); background: var(--ec-blue-lt); }
.pb-sheet-storno--storno > i[b-twti41inix] { color: var(--ec-blue); }
.pb-sheet-storno-body[b-twti41inix] { min-width: 0; }
.pb-sheet-storno-line[b-twti41inix] { margin: 0; font-size: 12.5px; color: var(--ec-text); }
.pb-sheet-storno-reason[b-twti41inix] { margin: 4px 0 0; font-size: 12px; color: var(--ec-sub); }

.pb-row-docnum[b-twti41inix] {
    font-family: ui-monospace, 'SF Mono', monospace;
    font-weight: 700; color: var(--ec-muted);
}

/* ── Annual statement modal ───────────────────────────────────────── */
.pb-modal-overlay[b-twti41inix] {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 110;
    display: flex; align-items: center; justify-content: center;
}
.pb-modal[b-twti41inix] {
    background: #fff; border-radius: 14px;
    width: 460px; max-width: 96vw;
    padding: 22px;
}
.pb-modal-title[b-twti41inix] { margin: 0; font-size: 18px; font-weight: 800; color: var(--ec-text); }
.pb-modal-hint[b-twti41inix] { margin: 6px 0 14px; font-size: 12.5px; color: var(--ec-sub); }
.pb-modal-label[b-twti41inix] {
    font-size: 10.5px; font-weight: 800; color: var(--ec-muted);
    letter-spacing: 0.08em; text-transform: uppercase;
    margin: 0 0 6px;
}
.pb-modal-select[b-twti41inix] {
    width: 100%; padding: 9px 12px;
    border: 1px solid var(--ec-border); border-radius: 8px;
    font-size: 13px; font-family: inherit; background: #fff;
}
.pb-modal-error[b-twti41inix] {
    margin-top: 10px; padding: 8px 10px;
    background: var(--ec-red-lt); color: var(--ec-red);
    border-radius: 7px; font-size: 12px;
}
.pb-modal-actions[b-twti41inix] { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.pb-modal-cancel[b-twti41inix] {
    background: #fff; border: 1px solid var(--ec-border); border-radius: 8px;
    padding: 8px 14px; font-size: 12px; cursor: pointer; font-family: inherit;
}
.pb-modal-submit[b-twti41inix] {
    background: var(--ec-blue); border: none; border-radius: 8px;
    padding: 8px 14px; font-size: 12px; font-weight: 800; color: #fff;
    cursor: pointer; font-family: inherit;
}
.pb-modal-submit:disabled[b-twti41inix] { opacity: 0.6; cursor: not-allowed; }

@media (max-width: 1100px) {
    .pb-body[b-twti41inix] { grid-template-columns: 1fr; }
    .pb-hero-side[b-twti41inix] { flex-direction: row; flex-wrap: wrap; min-width: 0; width: 100%; }
    .pb-hero-card[b-twti41inix] { flex: 1 1 200px; }
}
@media (max-width: 720px) {
    .pb-row[b-twti41inix] { grid-template-columns: 1fr; gap: 8px; }
    .pb-row-badge[b-twti41inix] { justify-self: start; }
    .pb-row-amount[b-twti41inix] { text-align: left; }
    .pb-hero-amount[b-twti41inix] { font-size: 36px; }
}
/* /Components/Pages/CalendarView.razor.rz.scp.css */
/* Admin School Calendar — transcribed from prototype AWCalendar
   (EduConnect All Roles.html lines 20604-20809). */

.awcal-page[b-z126r1iash] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Banner / loading ──────────────────────────────────────────── */
.awcal-banner[b-z126r1iash] {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 13px; font-weight: 600;
}
.awcal-banner-error[b-z126r1iash] {
    background: color-mix(in srgb, var(--ec-red) 8%, transparent);
    color: var(--ec-red);
    border: 1px solid color-mix(in srgb, var(--ec-red) 18%, transparent);
}
.awcal-banner-close[b-z126r1iash] {
    margin-left: auto;
    background: none; border: none; cursor: pointer;
    color: inherit; font-size: 16px; padding: 0; line-height: 1;
}

.awcal-loading[b-z126r1iash] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px 24px;
    color: var(--ec-muted);
    gap: 14px;
}
.awcal-spinner[b-z126r1iash] {
    width: 38px; height: 38px;
    border: 3px solid var(--ec-border-soft);
    border-top-color: var(--ec-purple);
    border-radius: 50%;
    animation: awcal-spin-b-z126r1iash 0.75s linear infinite;
}
@keyframes awcal-spin-b-z126r1iash { to { transform: rotate(360deg); } }

/* ── KPIs ──────────────────────────────────────────────────────── */
.awcal-kpis[b-z126r1iash] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
@media (max-width: 980px) { .awcal-kpis[b-z126r1iash] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .awcal-kpis[b-z126r1iash] { grid-template-columns: 1fr; } }

/* ── Toolbar ──────────────────────────────────────────────────── */
.awcal-toolbar[b-z126r1iash] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 12px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.awcal-arrow[b-z126r1iash] {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: var(--ec-bg);
    border: 1px solid var(--ec-border);
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-sub);
    font-family: inherit;
    line-height: 1;
}
.awcal-arrow:hover[b-z126r1iash] { background: var(--ec-blue-gh); }
.awcal-month[b-z126r1iash] {
    font-size: 15px;
    font-weight: 800;
    color: var(--ec-text);
    min-width: 160px;
    margin: 0;
}
.awcal-today[b-z126r1iash] {
    padding: 7px 12px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--ec-border);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
}
.awcal-today:hover[b-z126r1iash] { background: var(--ec-bg); }
.awcal-toolbar-spacer[b-z126r1iash] { flex: 1; }

.awcal-chips[b-z126r1iash] {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.awcal-chip[b-z126r1iash] {
    padding: 5px 11px;
    border-radius: 6px;
    border: 1px solid var(--ec-border-soft);
    background: #fff;
    color: var(--ec-sub);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.awcal-chip:hover:not(.is-active)[b-z126r1iash] { background: var(--ec-bg); }
.awcal-chip.is-active[b-z126r1iash] { color: #fff; }

.awcal-new[b-z126r1iash] {
    background: var(--ec-primary);
    border: none;
    border-radius: 8px;
    padding: 8px 13px;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.awcal-new:hover[b-z126r1iash] { filter: brightness(0.93); }

/* ── Month grid ────────────────────────────────────────────────── */
.awcal-grid-wrap[b-z126r1iash] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 12px;
    overflow: hidden;
}
.awcal-grid-hdr[b-z126r1iash] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--ec-bg);
}
.awcal-grid-day-name[b-z126r1iash] {
    padding: 10px 12px;
    font-size: 10px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
}
.awcal-grid[b-z126r1iash] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
.awcal-cell[b-z126r1iash] {
    min-height: 96px;
    padding: 5px 7px;
    background: #fff;
    border-top: 1px solid var(--ec-border-soft);
    cursor: pointer;
    transition: background 0.12s;
}
.awcal-cell:nth-child(7n)[b-z126r1iash] { border-right: none; }
.awcal-cell:not(:nth-child(7n))[b-z126r1iash] { border-right: 1px solid var(--ec-border-soft); }
.awcal-cell:hover[b-z126r1iash] { background: var(--ec-blue-gh); }
.awcal-cell.is-today[b-z126r1iash] { background: var(--ec-blue-lt); }
.awcal-cell--out[b-z126r1iash] {
    min-height: 96px;
    background: color-mix(in srgb, var(--ec-bg) 50%, transparent);
    border-top: 1px solid var(--ec-border-soft);
}
.awcal-cell--out:not(:nth-child(7n))[b-z126r1iash] { border-right: 1px solid var(--ec-border-soft); }

.awcal-day-num[b-z126r1iash] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0 0 5px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.awcal-day-num.is-today[b-z126r1iash] { color: var(--ec-blue); }
.awcal-today-pill[b-z126r1iash] {
    font-size: 8.5px;
    font-weight: 800;
    color: #fff;
    background: var(--ec-blue);
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0.06em;
}

.awcal-day-events[b-z126r1iash] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.awcal-pill[b-z126r1iash] {
    padding: 2px 6px;
    border: none;
    border-left: 3px solid var(--ec-blue);
    border-radius: 3px;
    font-size: 9.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.awcal-pill:hover[b-z126r1iash] { filter: brightness(0.95); }
.awcal-pill-more[b-z126r1iash] {
    font-size: 9px;
    color: var(--ec-muted);
    font-weight: 700;
    margin: 2px 0 0;
}

/* ── Modal (read + editor) ─────────────────────────────────────── */
.awcal-modal-overlay[b-z126r1iash] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    z-index: 1090;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: awcal-fade-b-z126r1iash 0.15s ease;
}
@keyframes awcal-fade-b-z126r1iash { from { background: rgba(15, 23, 42, 0); } }

.awcal-modal[b-z126r1iash] {
    background: #fff;
    border-radius: 14px;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 24px 60px rgba(13, 23, 51, 0.4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 90vh;
}
.awcal-modal--wide[b-z126r1iash] { max-width: 540px; }

.awcal-modal-hdr[b-z126r1iash] {
    padding: 16px 20px;
    border-bottom: 1px solid var(--ec-border-soft);
    border-left: 4px solid var(--ec-purple);
}
.awcal-modal-meta[b-z126r1iash] {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 5px;
}
.awcal-modal-pill[b-z126r1iash] {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.awcal-modal-when[b-z126r1iash] {
    font-size: 11px;
    color: var(--ec-muted);
    font-weight: 600;
    margin: 0;
}
.awcal-modal-eyebrow[b-z126r1iash] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-purple);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
}
.awcal-modal-title[b-z126r1iash] {
    font-size: 16px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 3px 0 0;
}
.awcal-modal-aud[b-z126r1iash] {
    font-size: 11px;
    color: var(--ec-sub);
    margin: 3px 0 0;
}

.awcal-modal-body[b-z126r1iash] {
    padding: 15px 20px;
    overflow-y: auto;
    flex: 1;
}
.awcal-modal-body--form[b-z126r1iash] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.awcal-modal-desc[b-z126r1iash] {
    font-size: 12.5px;
    color: var(--ec-text);
    line-height: 1.6;
    margin: 0;
    white-space: pre-wrap;
}

.awcal-field[b-z126r1iash] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    min-width: 0;
}
.awcal-field-label[b-z126r1iash] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
}
.awcal-form-row[b-z126r1iash] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
}
.awcal-input[b-z126r1iash] {
    padding: 9px 12px;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    font-size: 12.5px;
    font-family: inherit;
    color: var(--ec-text);
    background: #fff;
    outline: none;
    box-sizing: border-box;
}
.awcal-input:focus[b-z126r1iash] {
    border-color: var(--ec-purple);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ec-purple) 18%, transparent);
}
.awcal-textarea[b-z126r1iash] {
    min-height: 70px;
    resize: vertical;
    line-height: 1.5;
}

.awcal-cat-row[b-z126r1iash] {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.awcal-cat-btn[b-z126r1iash] {
    padding: 7px 11px;
    border: 1px solid;
    border-radius: 7px;
    background: #fff;
    font-size: 11px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background 0.12s, color 0.12s;
}
.awcal-cat-btn.is-on[b-z126r1iash] { font-weight: 800; }

.awcal-form-err[b-z126r1iash] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: var(--ec-red);
    background: color-mix(in srgb, var(--ec-red) 8%, white);
    border: 1px solid color-mix(in srgb, var(--ec-red) 30%, transparent);
    padding: 8px 11px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 700;
}

.awcal-modal-footer[b-z126r1iash] {
    padding: 11px 20px;
    border-top: 1px solid var(--ec-border-soft);
    display: flex;
    justify-content: flex-end;
    gap: 7px;
}
.awcal-modal-footer--split[b-z126r1iash] {
    justify-content: space-between;
}
.awcal-modal-footer-right[b-z126r1iash] {
    display: flex;
    gap: 7px;
}

.awcal-btn[b-z126r1iash] {
    padding: 7px 13px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.awcal-btn:disabled[b-z126r1iash] { opacity: 0.55; cursor: not-allowed; }
.awcal-btn-primary[b-z126r1iash] { background: var(--ec-primary); color: #fff; font-weight: 800; }
.awcal-btn-primary:hover:not(:disabled)[b-z126r1iash] { filter: brightness(0.93); }
.awcal-btn-ghost[b-z126r1iash] { background: #fff; color: var(--ec-sub); border-color: var(--ec-border); }
.awcal-btn-ghost:hover:not(:disabled)[b-z126r1iash] { background: var(--ec-bg); }
.awcal-btn-ghost-danger[b-z126r1iash] { background: #fff; color: var(--ec-red); border-color: var(--ec-border); }
.awcal-btn-ghost-danger:hover:not(:disabled)[b-z126r1iash] {
    background: color-mix(in srgb, var(--ec-red) 8%, white);
    border-color: color-mix(in srgb, var(--ec-red) 35%, var(--ec-border));
}
/* /Components/Pages/Classes/ClassEditor.razor.rz.scp.css */
/* Class editor slide-over — transcribed from prototype AWClassEditor
   (EduConnect All Roles.html lines 14547-14727). Px units / token colors
   match the prototype 1:1. */

.cle-backdrop[b-8ik3uopm20] {
    position: fixed; inset: 0;
    background: rgba(15, 23, 51, 0.42);
    backdrop-filter: blur(2px);
    z-index: 3000;
}

.cle-sheet[b-8ik3uopm20] {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 60vw; max-width: 760px; min-width: 460px;
    background: #fff;
    box-shadow: -16px 0 48px -16px rgba(15, 23, 51, 0.28);
    z-index: 3001;
    display: flex; flex-direction: column;
    overflow: hidden;
}
@media (max-width: 720px) {
    .cle-sheet[b-8ik3uopm20] { width: 100vw; min-width: 0; max-width: none; }
}

/* ── Header ─────────────────────────────────────────────────────────── */
.cle-hdr[b-8ik3uopm20] {
    position: relative;
    padding: 22px 56px 22px 24px;
    border-bottom: 1px solid var(--ec-border);
}
.cle-close[b-8ik3uopm20] {
    position: absolute; top: 18px; right: 18px;
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 1px solid var(--ec-border);
    background: #fff;
    color: var(--ec-muted);
    font-size: 18px; line-height: 1;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.cle-close:hover[b-8ik3uopm20] { background: var(--ec-bg); }
.cle-hdr-row[b-8ik3uopm20] { display: flex; gap: 14px; align-items: flex-start; }
.cle-hdr-icon[b-8ik3uopm20] {
    width: 48px; height: 48px;
    border-radius: 12px;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    box-shadow: 0 6px 16px -6px rgba(15, 23, 51, 0.25);
}
.cle-hdr-body[b-8ik3uopm20] { min-width: 0; flex: 1; }
.cle-hdr-mode[b-8ik3uopm20] {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ec-muted);
    margin: 0 0 3px;
}
.cle-hdr-title[b-8ik3uopm20] {
    font-size: 22px;
    font-weight: 800;
    color: var(--ec-text);
    line-height: 1.15;
    margin: 0;
}
.cle-hdr-sub[b-8ik3uopm20] {
    font-size: 12px;
    color: var(--ec-sub);
    margin: 5px 0 0;
}

/* ── Error banner ───────────────────────────────────────────────────── */
.cle-error-banner[b-8ik3uopm20] {
    display: flex; align-items: center; gap: 10px;
    margin: 12px 16px 0;
    padding: 9px 12px;
    background: color-mix(in srgb, var(--ec-red) 9%, transparent);
    color: var(--ec-red);
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 600;
}
.cle-error-close[b-8ik3uopm20] {
    margin-left: auto;
    background: none; border: none;
    color: inherit; font-size: 16px;
    cursor: pointer;
}

/* ── Body ───────────────────────────────────────────────────────────── */
.cle-body[b-8ik3uopm20] {
    flex: 1;
    display: flex;
    min-height: 0;
}

/* Tab rail */
.cle-tabs[b-8ik3uopm20] {
    width: 78px;
    background: var(--ec-bg);
    border-right: 1px solid var(--ec-border);
    padding: 14px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}
.cle-tab[b-8ik3uopm20] {
    background: none;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 8px 4px;
    color: var(--ec-muted);
    cursor: pointer;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.cle-tab i[b-8ik3uopm20] { font-size: 16px; }
.cle-tab span[b-8ik3uopm20] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.cle-tab:hover[b-8ik3uopm20] { background: #fff; color: var(--ec-sub); }
.cle-tab.is-active[b-8ik3uopm20] {
    background: #fff;
    color: var(--ec-blue);
    border-color: var(--ec-blue-lt);
    box-shadow: 0 2px 8px -4px rgba(59, 95, 192, 0.25);
}

/* Content scroll */
.cle-content[b-8ik3uopm20] {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* ── Sections / inputs ──────────────────────────────────────────────── */
.cle-section[b-8ik3uopm20] { display: flex; flex-direction: column; gap: 6px; }
.cle-grid-2[b-8ik3uopm20] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 600px) {
    .cle-grid-2[b-8ik3uopm20] { grid-template-columns: 1fr; }
}

.cle-label[b-8ik3uopm20] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
}
.cle-label-hint[b-8ik3uopm20] {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--ec-faint);
    margin-left: 6px;
    text-transform: none;
}
.cle-help[b-8ik3uopm20] {
    font-size: 11px;
    color: var(--ec-sub);
    margin: 2px 0 0;
}
.cle-help--muted[b-8ik3uopm20] { color: var(--ec-muted); font-style: italic; }

.cle-input[b-8ik3uopm20] {
    width: 100%;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    padding: 9px 12px;
    font-size: 13px;
    color: var(--ec-text);
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
}
.cle-input:focus[b-8ik3uopm20] {
    border-color: var(--ec-blue);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ec-blue) 18%, transparent);
}
.cle-textarea[b-8ik3uopm20] {
    resize: vertical;
    min-height: 60px;
    line-height: 1.45;
}

/* ── Facility cards ─────────────────────────────────────────────────── */
.cle-facility-grid[b-8ik3uopm20] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}
.cle-facility-card[b-8ik3uopm20] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    background: #fff;
    border: 1.5px solid var(--ec-border);
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
}
.cle-facility-card:hover[b-8ik3uopm20] { background: var(--ec-bg); }
.cle-facility-card.is-picked[b-8ik3uopm20] { background: #fff; }
.cle-facility-icon[b-8ik3uopm20] {
    width: 36px; height: 36px;
    border-radius: 9px;
    background: var(--ec-bg);
    color: var(--ec-sub);
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}
.cle-facility-body[b-8ik3uopm20] { min-width: 0; flex: 1; }
.cle-facility-name[b-8ik3uopm20] {
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cle-facility-type[b-8ik3uopm20] {
    font-size: 11px;
    color: var(--ec-muted);
    font-weight: 600;
    margin: 1px 0 0;
}
.cle-facility-check[b-8ik3uopm20] {
    font-size: 18px;
    flex-shrink: 0;
    margin-left: auto;
}

/* ── KG / School toggle (multi-stage facilities) ────────────────────── */
.cle-stage-toggle[b-8ik3uopm20] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.cle-stage-opt[b-8ik3uopm20] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 14px;
    background: #fff;
    border: 1.5px solid var(--ec-border);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
}
.cle-stage-opt:hover:not(.is-on)[b-8ik3uopm20] { background: var(--ec-bg); }
.cle-stage-opt i[b-8ik3uopm20] { font-size: 15px; }

/* ── Color swatches ─────────────────────────────────────────────────── */
.cle-color-row[b-8ik3uopm20] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.cle-color-swatch[b-8ik3uopm20] {
    width: 38px; height: 38px;
    border-radius: 9px;
    border: none;
    cursor: pointer;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s, box-shadow 0.1s;
}
.cle-color-swatch:hover[b-8ik3uopm20] { transform: translateY(-1px); }
.cle-color-swatch.is-picked[b-8ik3uopm20] {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px currentColor;
}

/* ── Staff card ─────────────────────────────────────────────────────── */
.cle-staff-card[b-8ik3uopm20] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--ec-bg);
    border-radius: 10px;
}
.cle-staff-avatar[b-8ik3uopm20] {
    width: 36px; height: 36px;
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.cle-staff-avatar-img[b-8ik3uopm20] { width: 100%; height: 100%; object-fit: cover; }
.cle-staff-name[b-8ik3uopm20] {
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.cle-staff-email[b-8ik3uopm20] {
    font-size: 11.5px;
    color: var(--ec-muted);
    margin: 1px 0 0;
}

.cle-staff-remove[b-8ik3uopm20] {
    border: 1px solid var(--w-border, #e2e8f0);
    background: #fff;
    color: var(--w-danger, #dc2626);
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.cle-staff-lead[b-8ik3uopm20] {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ec-accent, #d63677) 14%, transparent);
    color: var(--ec-accent, #d63677);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    vertical-align: middle;
}

.cle-staff-makelead[b-8ik3uopm20] {
    border: 1px solid var(--ec-border, #e2e8f0);
    background: #fff;
    color: var(--ec-accent, #d63677);
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.cle-staff-makelead:disabled[b-8ik3uopm20],
.cle-staff-remove:disabled[b-8ik3uopm20] { opacity: 0.5; cursor: default; }

/* ── Students tab ───────────────────────────────────────────────────── */
.cle-students-hdr[b-8ik3uopm20] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.cle-cap-tail[b-8ik3uopm20] {
    color: var(--ec-muted);
    font-weight: 700;
    margin-left: 4px;
}
.cle-cap-pill[b-8ik3uopm20] {
    background: color-mix(in srgb, var(--ec-amber-lt) 80%, transparent);
    color: var(--ec-amber);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 2px 7px;
    border-radius: 4px;
}
.cle-add-btn[b-8ik3uopm20] {
    margin-left: auto;
    background: var(--ec-blue);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 6px 11px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.cle-add-btn:disabled[b-8ik3uopm20] {
    background: var(--ec-border-soft);
    color: var(--ec-muted);
    cursor: not-allowed;
}
.cle-students-grid[b-8ik3uopm20] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
}
.cle-student-chip[b-8ik3uopm20] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    background: var(--ec-bg);
    border-radius: 8px;
    min-width: 0;
}
.cle-student-name[b-8ik3uopm20] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ec-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.cle-student-remove[b-8ik3uopm20] {
    width: 22px; height: 22px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--ec-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cle-student-remove:hover[b-8ik3uopm20] {
    background: color-mix(in srgb, var(--ec-red) 10%, transparent);
    color: var(--ec-red);
}

/* ── Add-student picker (overlay over the editor) ───────────────────── */
.cle-pick-overlay[b-8ik3uopm20] {
    position: fixed; inset: 0;
    background: rgba(15, 23, 51, 0.45);
    z-index: 3100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.cle-pick[b-8ik3uopm20] {
    background: #fff;
    width: 100%;
    max-width: 420px;
    border-radius: 14px;
    box-shadow: 0 24px 64px -12px rgba(15, 23, 51, 0.32);
    display: flex;
    flex-direction: column;
    max-height: 70vh;
    overflow: hidden;
}
.cle-pick-hdr[b-8ik3uopm20] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--ec-border);
}
.cle-pick-hdr h3[b-8ik3uopm20] {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
}
.cle-pick-close[b-8ik3uopm20] {
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 1px solid var(--ec-border);
    background: #fff;
    color: var(--ec-muted);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}
.cle-pick-search[b-8ik3uopm20] {
    position: relative;
    padding: 12px 18px 6px;
}
.cle-pick-search i[b-8ik3uopm20] {
    position: absolute;
    left: 28px;
    top: 50%;
    transform: translateY(-25%);
    color: var(--ec-muted);
    font-size: 12px;
    pointer-events: none;
}
.cle-pick-search input[b-8ik3uopm20] {
    width: 100%;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    padding: 8px 12px 8px 30px;
    font-size: 13px;
    color: var(--ec-text);
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
}
.cle-pick-search input:focus[b-8ik3uopm20] {
    border-color: var(--ec-blue);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ec-blue) 18%, transparent);
}
.cle-pick-list[b-8ik3uopm20] {
    padding: 6px 18px 14px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cle-pick-row[b-8ik3uopm20] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    background: none;
    border: 1px solid transparent;
    border-radius: 8px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}
.cle-pick-row:hover[b-8ik3uopm20] { background: var(--ec-bg); }
.cle-pick-av[b-8ik3uopm20] {
    width: 28px; height: 28px;
    border-radius: 50%;
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cle-pick-name[b-8ik3uopm20] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ec-text);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cle-pick-add[b-8ik3uopm20] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-blue);
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* ── Billing toggle ─────────────────────────────────────────────────── */
.cle-toggle-row[b-8ik3uopm20] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.cle-toggle-opt[b-8ik3uopm20] {
    flex: 1;
    min-width: 110px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: border-color 0.15s, background 0.15s;
}
.cle-toggle-opt:hover[b-8ik3uopm20] { background: var(--ec-bg); }
.cle-toggle-opt.is-active[b-8ik3uopm20] {
    border-width: 1.5px;
}

/* ── Role cards (Roles tab) ─────────────────────────────────────────── */
.cle-role-card[b-8ik3uopm20] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.cle-role-hdr[b-8ik3uopm20] {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cle-role-hdr > i[b-8ik3uopm20] { font-size: 18px; flex-shrink: 0; }
.cle-role-body[b-8ik3uopm20] { flex: 1; min-width: 0; }
.cle-role-label[b-8ik3uopm20] {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ec-muted);
    margin: 0;
}
.cle-role-current[b-8ik3uopm20] {
    font-size: 13px;
    font-weight: 700;
    color: var(--ec-text);
    margin: 1px 0 0;
}
.cle-role-clear[b-8ik3uopm20] {
    background: none;
    border: 1px solid var(--ec-border);
    border-radius: 7px;
    color: var(--ec-muted);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 9px;
    cursor: pointer;
    font-family: inherit;
}
.cle-role-clear:hover[b-8ik3uopm20] {
    background: color-mix(in srgb, var(--ec-red) 8%, transparent);
    color: var(--ec-red);
    border-color: color-mix(in srgb, var(--ec-red) 25%, transparent);
}

/* ── Footer ─────────────────────────────────────────────────────────── */
.cle-footer[b-8ik3uopm20] {
    border-top: 1px solid var(--ec-border);
    padding: 14px 24px;
    display: flex;
    gap: 8px;
    align-items: center;
    background: #fff;
}
.cle-btn[b-8ik3uopm20] {
    padding: 9px 16px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.cle-btn-cancel[b-8ik3uopm20] {
    background: #fff;
    color: var(--ec-sub);
    border-color: var(--ec-border);
}
.cle-btn-cancel:hover[b-8ik3uopm20] { background: var(--ec-bg); }
.cle-btn-archive[b-8ik3uopm20] {
    background: #fff;
    color: var(--ec-amber);
    border-color: color-mix(in srgb, var(--ec-amber) 30%, transparent);
    margin-left: auto;
}
.cle-btn-archive:hover[b-8ik3uopm20] { background: color-mix(in srgb, var(--ec-amber-lt) 60%, transparent); }
.cle-btn-save[b-8ik3uopm20] {
    margin-left: auto;
    background: var(--ec-blue);
    color: #fff;
    font-weight: 800;
}
.cle-btn-archive + .cle-btn-save[b-8ik3uopm20] { margin-left: 0; }
.cle-btn-save:hover:not(.is-disabled)[b-8ik3uopm20] { filter: brightness(0.95); }
.cle-btn-save.is-disabled[b-8ik3uopm20],
.cle-btn-save:disabled[b-8ik3uopm20] {
    background: var(--ec-border-soft);
    color: var(--ec-muted);
    cursor: not-allowed;
}
/* /Components/Pages/Classes/ClassesPage.razor.rz.scp.css */
/* Class Management — transcribed verbatim from prototype AWClassManagement
   (EduConnect All Roles.html ~lines 14385-14542). px units + token colors
   match the prototype 1:1; deviating from these breaks the side-by-side. */

.cm-page[b-aosxgb3ytn] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── KPI row ─────────────────────────────────────────────────────────────── */
.cm-kpis[b-aosxgb3ytn] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

/* ── Filter strip ───────────────────────────────────────────────────────── */
.cm-filter-strip[b-aosxgb3ytn] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cm-search[b-aosxgb3ytn] {
    position: relative;
    flex: 1 1 240px;
    min-width: 200px;
}

.cm-search-icon[b-aosxgb3ytn] {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ec-muted);
    font-size: 12px;
    pointer-events: none;
}

.cm-search-input[b-aosxgb3ytn] {
    width: 100%;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    padding: 8px 12px 8px 32px;
    font-size: 13px;
    font-family: inherit;
    color: var(--ec-text);
    outline: none;
    box-sizing: border-box;
}
.cm-search-input:focus[b-aosxgb3ytn] {
    border-color: var(--ec-blue);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ec-blue) 18%, transparent);
}

.cm-filter-select[b-aosxgb3ytn] {
    padding: 8px 12px;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ec-sub);
    background: #fff;
    font-family: inherit;
    cursor: pointer;
}

/* page-level "New class" CTA now uses the shared .ec-btn-primary class */

/* ── States ─────────────────────────────────────────────────────────────── */
.cm-loading[b-aosxgb3ytn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px 24px;
    color: var(--ec-muted);
    gap: 14px;
}
.cm-spinner[b-aosxgb3ytn] {
    width: 38px; height: 38px;
    border: 3px solid var(--ec-border-soft);
    border-top-color: var(--ec-blue);
    border-radius: 50%;
    animation: cm-spin-b-aosxgb3ytn 0.75s linear infinite;
}
@keyframes cm-spin-b-aosxgb3ytn { to { transform: rotate(360deg); } }

.cm-banner[b-aosxgb3ytn] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
}
.cm-banner-error[b-aosxgb3ytn] {
    background: color-mix(in srgb, var(--ec-red) 8%, transparent);
    color: var(--ec-red);
}
.cm-banner-close[b-aosxgb3ytn] {
    margin-left: auto;
    background: none; border: none; cursor: pointer;
    color: inherit; font-size: 16px; padding: 0;
}

.cm-empty[b-aosxgb3ytn] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    padding: 60px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--ec-muted);
    text-align: center;
}
.cm-empty-icon[b-aosxgb3ytn] { font-size: 32px; opacity: 0.4; margin-bottom: 6px; }
.cm-empty-title[b-aosxgb3ytn] { font-size: 14px; font-weight: 800; color: var(--ec-text); margin: 0; }
.cm-empty-sub[b-aosxgb3ytn]   { font-size: 12px; color: var(--ec-muted); margin: 0; }

/* ── Card grid ──────────────────────────────────────────────────────────── */
.cm-grid[b-aosxgb3ytn] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 12px;
}

.cm-card[b-aosxgb3ytn] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-left-width: 4px;
    border-left-style: solid;
    border-radius: 13px;
    padding: 15px 17px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cm-card:hover[b-aosxgb3ytn] {
    border-color: var(--cm-accent, var(--ec-border));
    box-shadow: 0 4px 18px color-mix(in srgb, var(--cm-accent, transparent) 18%, transparent);
}
.cm-card.is-archived[b-aosxgb3ytn] { opacity: 0.62; }

/* Header */
.cm-card-hdr[b-aosxgb3ytn] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 3px;
}
.cm-card-hdr-body[b-aosxgb3ytn] { min-width: 0; flex: 1; }
.cm-stage-row[b-aosxgb3ytn] {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 4px; flex-wrap: wrap;
}
.cm-stage-pill[b-aosxgb3ytn] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.06em;
}
.cm-stage-pill i[b-aosxgb3ytn] { font-size: 10px; }
.cm-facility-code[b-aosxgb3ytn] {
    font-size: 9.5px;
    color: var(--ec-muted);
    font-weight: 700;
}
.cm-archived-pill[b-aosxgb3ytn] {
    font-size: 9.5px;
    font-weight: 800;
    color: var(--ec-muted);
    background: var(--ec-border-soft);
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.06em;
}
.cm-card-name[b-aosxgb3ytn] {
    font-size: 16.5px;
    font-weight: 800;
    color: var(--ec-text);
    line-height: 1.2;
    margin: 0;
}
.cm-card-meta[b-aosxgb3ytn] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 3px 0 0;
}
.cm-card-meta b[b-aosxgb3ytn] { color: var(--ec-sub); font-weight: 700; }

.cm-edit-btn[b-aosxgb3ytn] {
    padding: 6px 11px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 7px;
    font-size: 11px;
    font-weight: 700;
    color: var(--ec-sub);
    font-family: inherit;
    cursor: pointer;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.cm-edit-btn:hover[b-aosxgb3ytn] { background: var(--ec-bg); border-color: var(--ec-faint); }
.cm-edit-btn i[b-aosxgb3ytn] { font-size: 12px; }

/* Capacity */
.cm-cap[b-aosxgb3ytn] { margin-bottom: 3px; }
.cm-cap-row[b-aosxgb3ytn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
.cm-cap-label[b-aosxgb3ytn] {
    font-size: 10px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.cm-cap-count[b-aosxgb3ytn] {
    font-size: 12px;
    font-weight: 700;
}
.cm-cap-of[b-aosxgb3ytn] {
    color: var(--ec-muted);
    font-weight: 600;
}
.cm-cap-bar-wrap[b-aosxgb3ytn] {
    height: 6px;
    background: var(--ec-border-soft);
    border-radius: 3px;
    overflow: hidden;
}
.cm-cap-bar[b-aosxgb3ytn] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
}

/* Staff line */
.cm-staff[b-aosxgb3ytn] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    background: var(--ec-bg);
    border-radius: 9px;
}
.cm-avatar[b-aosxgb3ytn] {
    width: 30px; height: 30px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
    overflow: hidden;
}
.cm-avatar-img[b-aosxgb3ytn] { width: 100%; height: 100%; object-fit: cover; }
.cm-avatar--empty[b-aosxgb3ytn] {
    background: var(--ec-border-soft);
    color: var(--ec-muted);
    font-size: 14px;
}
.cm-staff-body[b-aosxgb3ytn] { min-width: 0; flex: 1; }
.cm-staff-label[b-aosxgb3ytn] {
    font-size: 9.5px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}
.cm-staff-label--warn[b-aosxgb3ytn] { color: var(--ec-red); }
.cm-staff-name[b-aosxgb3ytn] {
    font-size: 12px;
    font-weight: 700;
    color: var(--ec-text);
    line-height: 1.2;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cm-staff-help[b-aosxgb3ytn] {
    font-size: 11px;
    color: var(--ec-muted);
    line-height: 1.2;
    margin: 0;
}
.cm-subj-count[b-aosxgb3ytn] {
    font-size: 10.5px;
    color: var(--ec-muted);
    font-weight: 700;
    white-space: nowrap;
    margin: 0;
}

/* Billing line */
.cm-billing[b-aosxgb3ytn] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 11px;
    border-radius: 9px;
    border: 1px solid transparent;
    flex-wrap: wrap;
}
.cm-billing i[b-aosxgb3ytn] { font-size: 12px; }
.cm-billing-label[b-aosxgb3ytn] {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    flex-shrink: 0;
    margin: 0;
}
.cm-billing-plans[b-aosxgb3ytn] {
    font-size: 11px;
    color: var(--ec-sub);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
    margin: 0;
}
.cm-billing--auto[b-aosxgb3ytn] {
    background: color-mix(in srgb, var(--ec-green-lt) 80%, transparent);
    border-color: color-mix(in srgb, var(--ec-green) 30%, transparent);
}
.cm-billing--auto i[b-aosxgb3ytn], .cm-billing--auto .cm-billing-label[b-aosxgb3ytn] { color: var(--ec-green); }
.cm-billing--manual[b-aosxgb3ytn] {
    background: color-mix(in srgb, var(--ec-amber-lt) 80%, transparent);
    border-color: color-mix(in srgb, var(--ec-amber) 30%, transparent);
}
.cm-billing--manual i[b-aosxgb3ytn], .cm-billing--manual .cm-billing-label[b-aosxgb3ytn] { color: var(--ec-amber); }
.cm-billing--none[b-aosxgb3ytn] {
    background: color-mix(in srgb, var(--ec-red-lt) 80%, transparent);
    border-color: color-mix(in srgb, var(--ec-red) 30%, transparent);
}
.cm-billing--none i[b-aosxgb3ytn], .cm-billing--none .cm-billing-label[b-aosxgb3ytn] { color: var(--ec-red); }

/* Class roles (school only) */
.cm-roles[b-aosxgb3ytn] {
    display: flex;
    gap: 6px;
}
.cm-role[b-aosxgb3ytn] {
    flex: 1;
    padding: 6px 9px;
    background: var(--ec-bg);
    border-radius: 7px;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.cm-role i[b-aosxgb3ytn] { font-size: 12px; }
.cm-role p[b-aosxgb3ytn] {
    font-size: 11px;
    color: var(--ec-muted);
    font-weight: 700;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
    margin: 0;
}
.cm-role.is-on p[b-aosxgb3ytn] {
    color: var(--ec-text);
    font-style: normal;
}
.cm-role--president[b-aosxgb3ytn] { color: var(--ec-amber); }
.cm-role--president.is-on[b-aosxgb3ytn] {
    background: color-mix(in srgb, var(--ec-amber-lt) 80%, transparent);
}
.cm-role--vp[b-aosxgb3ytn] { color: var(--ec-purple); }
.cm-role--vp.is-on[b-aosxgb3ytn] {
    background: color-mix(in srgb, var(--ec-purple-lt) 80%, transparent);
}

/* ── Delete modal ───────────────────────────────────────────────────────── */
.cm-modal-overlay[b-aosxgb3ytn] {
    position: fixed;
    inset: 0;
    background: rgba(30, 50, 86, 0.32);
    backdrop-filter: blur(4px);
    z-index: 3100;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cm-modal[b-aosxgb3ytn] {
    background: #fff;
    border-radius: 14px;
    padding: 24px;
    width: 100%;
    max-width: 420px;
    margin: 16px;
    box-shadow: 0 24px 64px -12px rgba(30, 50, 86, 0.28);
}
.cm-modal-header[b-aosxgb3ytn] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.cm-modal-icon[b-aosxgb3ytn] {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ec-red) 10%, transparent);
    color: var(--ec-red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.cm-modal-title[b-aosxgb3ytn] { font-size: 15px; font-weight: 800; color: var(--ec-text); margin: 0 0 2px; }
.cm-modal-sub[b-aosxgb3ytn]   { font-size: 11.5px; color: var(--ec-muted); margin: 0; }
.cm-modal-body[b-aosxgb3ytn]  { font-size: 13px; color: var(--ec-sub); line-height: 1.55; margin-bottom: 18px; }
.cm-modal-footer[b-aosxgb3ytn] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.cm-modal-btn[b-aosxgb3ytn] {
    padding: 8px 16px;
    border: none;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}
.cm-modal-cancel[b-aosxgb3ytn] {
    background: var(--ec-bg);
    color: var(--ec-sub);
}
.cm-modal-cancel:hover[b-aosxgb3ytn] { background: var(--ec-border-soft); }
.cm-modal-confirm[b-aosxgb3ytn] {
    background: var(--ec-red);
    color: #fff;
}
.cm-modal-confirm:hover[b-aosxgb3ytn] { filter: brightness(0.94); }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
    .cm-kpis[b-aosxgb3ytn] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .cm-kpis[b-aosxgb3ytn] { grid-template-columns: 1fr; }
    .cm-filter-strip[b-aosxgb3ytn] { flex-direction: column; align-items: stretch; }
}
/* /Components/Pages/Classes/CoverageEditor.razor.rz.scp.css */
/* Coverage Editor — right slide-over.
   Substitute teacher assignment for a class: pick teacher, date range,
   grading permission, notify-parents toggle, and an optional note. */

/* MainLayout chrome sits at z-index: 1000; this overlay must clear it. */
.cvre-overlay[b-w5h87h4wjk] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 1100;
    display: flex;
    justify-content: flex-end;
    animation: cvre-fade-in-b-w5h87h4wjk 0.12s ease;
}
@keyframes cvre-fade-in-b-w5h87h4wjk { from { background: rgba(15, 23, 42, 0); } }

.cvre-panel[b-w5h87h4wjk] {
    width: min(680px, 96%);
    height: 100%;
    background: #fff;
    box-shadow: -12px 0 40px rgba(13, 23, 51, 0.16);
    display: flex;
    flex-direction: column;
}

.cvre-stripe[b-w5h87h4wjk] { height: 3px; flex-shrink: 0; background: var(--ec-purple); }

.cvre-hdr[b-w5h87h4wjk] {
    padding: 14px 22px;
    border-bottom: 1px solid var(--ec-border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.cvre-hdr-text[b-w5h87h4wjk] { display: flex; align-items: center; gap: 11px; }
.cvre-hdr-eyebrow[b-w5h87h4wjk] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-purple);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}
.cvre-hdr-title[b-w5h87h4wjk] {
    font-size: 17px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 2px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 480px;
}
.cvre-close[b-w5h87h4wjk] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--ec-border);
    font-size: 14px;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
}

.cvre-body[b-w5h87h4wjk] {
    flex: 1;
    overflow-y: auto;
    padding: 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--ec-bg);
}

.cvre-field-label[b-w5h87h4wjk] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 6px;
    display: block;
}
.cvre-input[b-w5h87h4wjk],
.cvre-select[b-w5h87h4wjk] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    font-size: 12.5px;
    font-family: inherit;
    background: #fff;
    color: var(--ec-text);
    outline: none;
    box-sizing: border-box;
}
.cvre-input:focus[b-w5h87h4wjk],
.cvre-select:focus[b-w5h87h4wjk] { border-color: var(--ec-purple); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ec-purple) 16%, transparent); }
.cvre-input:disabled[b-w5h87h4wjk],
.cvre-select:disabled[b-w5h87h4wjk] { background: var(--ec-bg); opacity: 0.55; }

.cvre-grid-2[b-w5h87h4wjk] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.cvre-footer[b-w5h87h4wjk] {
    padding: 12px 24px;
    border-top: 1px solid var(--ec-border-soft);
    display: flex;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0;
    background: #fff;
}
.cvre-btn[b-w5h87h4wjk] {
    border-radius: 9px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.cvre-btn:disabled[b-w5h87h4wjk] { cursor: not-allowed; }
.cvre-btn-ghost[b-w5h87h4wjk] {
    background: #fff;
    color: var(--ec-sub);
    border-color: var(--ec-border);
    font-weight: 700;
    font-size: 12.5px;
    padding: 9px 14px;
}
.cvre-btn-save[b-w5h87h4wjk] {
    background: var(--ec-primary);
    color: #fff;
    border: none;
}
.cvre-btn-save:disabled[b-w5h87h4wjk] { background: var(--ec-border-soft); color: var(--ec-muted); }
.cvre-btn-save:hover:not(:disabled)[b-w5h87h4wjk] { filter: brightness(0.93); }
/* /Components/Pages/Events/AdminEventsPage.razor.rz.scp.css */
/* AdminEventsPage — scoped CSS. Mirrors AWEvents (proto ~24904). */

.ae-body[b-rlb95sli3d] {
    background: var(--ec-bg);
    padding: 0;
    min-height: 100%;
}

/* ── KPI strip ──────────────────────────────────── */
.ae-kpis[b-rlb95sli3d] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}
@media (max-width: 768px) {
    .ae-kpis[b-rlb95sli3d] { grid-template-columns: repeat(2, 1fr); }
}
.ae-kpi[b-rlb95sli3d] {
    min-height: 96px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.ae-kpi-icon[b-rlb95sli3d] {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent, var(--ec-blue)) 8%, transparent);
    color: var(--accent, var(--ec-blue));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ae-kpi-body[b-rlb95sli3d] { flex: 1; min-width: 0; }
.ae-kpi-value[b-rlb95sli3d] {
    font-size: 22px;
    font-weight: 800;
    color: var(--ec-text);
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 0;
}
.ae-kpi-label[b-rlb95sli3d] {
    font-size: 10px;
    font-weight: 700;
    color: var(--ec-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 6px 0 0;
}
.ae-kpi-sub[b-rlb95sli3d] {
    font-size: 11px;
    color: var(--ec-sub);
    margin: 3px 0 0;
}

/* ── Toolbar ────────────────────────────────────── */
.ae-toolbar[b-rlb95sli3d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 10px;
}
.ae-filters[b-rlb95sli3d] {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.ae-chip[b-rlb95sli3d] {
    background: #fff;
    color: var(--ec-sub);
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ae-chip:hover[b-rlb95sli3d] { color: var(--ec-text); }
.ae-chip--active[b-rlb95sli3d] {
    background: var(--accent, var(--ec-text));
    color: #fff;
    border-color: var(--accent, var(--ec-text));
}
.ae-chip-count[b-rlb95sli3d] {
    font-size: 10px;
    font-weight: 800;
    background: var(--ec-border-soft);
    color: var(--ec-muted);
    padding: 1px 5px;
    border-radius: 4px;
}
.ae-chip--active .ae-chip-count[b-rlb95sli3d] {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}
/* page-level "New event" CTA now uses the shared .ec-btn-primary class */

/* ── Grid + Card ────────────────────────────────── */
.ae-grid[b-rlb95sli3d] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.ae-card[b-rlb95sli3d] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 13px;
    overflow: hidden;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}
.ae-card:hover[b-rlb95sli3d] {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px -8px rgba(13, 23, 51, .18);
}
.ae-card-cover[b-rlb95sli3d] {
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.ae-card-cover-img[b-rlb95sli3d] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ae-card-cover-icon[b-rlb95sli3d] {
    position: relative;
    z-index: 1;
    color: #fff;
}
.ae-card-pill[b-rlb95sli3d] {
    position: absolute;
    top: 9px;
    font-size: 9.5px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 5px;
    letter-spacing: 0.06em;
    background: rgba(255, 255, 255, .92);
}
.ae-card-pill--status[b-rlb95sli3d] {
    right: 9px;
    color: var(--accent);
    text-transform: uppercase;
}
.ae-card-pill--category[b-rlb95sli3d] {
    left: 9px;
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ae-card-body[b-rlb95sli3d] { padding: 12px 14px; }
.ae-card-title[b-rlb95sli3d] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    line-height: 1.3;
    margin: 0;
}
.ae-card-desc[b-rlb95sli3d] {
    font-size: 11px;
    color: var(--ec-sub);
    line-height: 1.5;
    margin: 5px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ae-card-meta[b-rlb95sli3d] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 7px 0 0;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.ae-card-meta--loc[b-rlb95sli3d] {
    font-size: 10px;
    margin-top: 3px;
    font-weight: 500;
}

.ae-card-foot[b-rlb95sli3d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid var(--ec-border-soft);
    gap: 8px;
}
.ae-card-rsvp[b-rlb95sli3d] {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    font-size: 10.5px;
    font-weight: 700;
}
.ae-card-rsvp-stat[b-rlb95sli3d] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.ae-card-rsvp-stat--ok[b-rlb95sli3d]    { color: var(--ec-green); }
.ae-card-rsvp-stat--warn[b-rlb95sli3d]  { color: var(--ec-amber); }
.ae-card-rsvp-stat--muted[b-rlb95sli3d] { color: var(--ec-muted); }

.ae-card-vis[b-rlb95sli3d] {
    font-size: 9px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Capacity bar */
.ae-card-cap[b-rlb95sli3d] { margin-top: 7px; }
.ae-card-cap-head[b-rlb95sli3d] {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--ec-muted);
    margin-bottom: 3px;
}
.ae-card-cap-pct[b-rlb95sli3d] { font-weight: 800; }
.ae-card-cap-pct--ok[b-rlb95sli3d]    { color: var(--ec-muted); }
.ae-card-cap-pct--warn[b-rlb95sli3d]  { color: var(--ec-amber); }
.ae-card-cap-pct--alert[b-rlb95sli3d] { color: var(--ec-red); }
.ae-card-cap-bar[b-rlb95sli3d] {
    height: 5px;
    background: var(--ec-border);
    border-radius: 99px;
    overflow: hidden;
}
.ae-card-cap-bar-fill[b-rlb95sli3d] { height: 100%; border-radius: 99px; }
.ae-card-cap-bar-fill--ok[b-rlb95sli3d]    { background: var(--ec-green); }
.ae-card-cap-bar-fill--warn[b-rlb95sli3d]  { background: var(--ec-amber); }
.ae-card-cap-bar-fill--alert[b-rlb95sli3d] { background: var(--ec-red); }

/* Empty state now uses the shared <WebEmpty> atom — see WebApp/CLAUDE.md. */
/* /Components/Pages/FoodMenu/FoodMenusPage.razor.rz.scp.css */
/* Admin Food Menus — transcribed from prototype AWFoodMenus
   (EduConnect All Roles.html lines 29688-30252).
   KPIs · menu tabs · weekly grid · meal slide-over · dish editor. */

.fm-page[b-r2pxg9qbkq] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Banner / loading / empty ───────────────────────────────────────── */
.fm-banner[b-r2pxg9qbkq] {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 13px; font-weight: 600;
}
.fm-banner-error[b-r2pxg9qbkq] {
    background: color-mix(in srgb, var(--ec-red) 8%, transparent);
    color: var(--ec-red);
    border: 1px solid color-mix(in srgb, var(--ec-red) 18%, transparent);
}
.fm-banner-close[b-r2pxg9qbkq] {
    margin-left: auto;
    background: none; border: none; cursor: pointer;
    color: inherit; font-size: 16px; padding: 0;
    line-height: 1;
}

.fm-loading[b-r2pxg9qbkq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px 24px;
    color: var(--ec-muted);
    gap: 14px;
}
.fm-spinner[b-r2pxg9qbkq] {
    width: 38px; height: 38px;
    border: 3px solid var(--ec-border-soft);
    border-top-color: var(--ec-purple);
    border-radius: 50%;
    animation: fm-spin-b-r2pxg9qbkq 0.75s linear infinite;
}
@keyframes fm-spin-b-r2pxg9qbkq { to { transform: rotate(360deg); } }

.fm-empty[b-r2pxg9qbkq] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    padding: 60px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--ec-muted);
    text-align: center;
}
.fm-empty-icon[b-r2pxg9qbkq] { font-size: 32px; opacity: 0.4; margin-bottom: 6px; color: var(--ec-purple); }
.fm-empty-title[b-r2pxg9qbkq] { font-size: 14px; font-weight: 800; color: var(--ec-text); margin: 0; }
.fm-empty-sub[b-r2pxg9qbkq]   { font-size: 12px; color: var(--ec-muted); margin: 0; max-width: 380px; }

/* ── KPIs ──────────────────────────────────────────────────────────── */
.fm-kpis[b-r2pxg9qbkq] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}
/* Prevent the "Week 19" value from wrapping to two lines on narrow columns. */
.fm-kpis[b-r2pxg9qbkq]  .ec-kpi-value {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 1180px) {
    .fm-kpis[b-r2pxg9qbkq] { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
    .fm-kpis[b-r2pxg9qbkq] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .fm-kpis[b-r2pxg9qbkq] { grid-template-columns: 1fr; }
}

/* ── Allergy conflict banner ───────────────────────────────────────── */
.fm-conflict-banner[b-r2pxg9qbkq] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--ec-red-lt);
    border: 1px solid color-mix(in srgb, var(--ec-red) 30%, transparent);
    border-radius: 11px;
    padding: 12px 16px;
}
.fm-conflict-banner > i[b-r2pxg9qbkq] {
    color: var(--ec-red);
    font-size: 16px;
    margin-top: 2px;
}
.fm-conflict-title[b-r2pxg9qbkq] {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--ec-red);
    letter-spacing: 0.04em;
    margin: 0 0 5px;
    text-transform: uppercase;
}
.fm-conflict-sub[b-r2pxg9qbkq] {
    font-size: 11.5px;
    color: var(--ec-sub);
    line-height: 1.5;
    margin: 0;
}

/* ── Toolbar (tabs + actions) ──────────────────────────────────────── */
.fm-toolbar[b-r2pxg9qbkq] {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    align-items: center;
}
.fm-toolbar-spacer[b-r2pxg9qbkq] { flex: 1; }

.fm-tabs[b-r2pxg9qbkq] {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}
.fm-tabs-empty[b-r2pxg9qbkq] {
    font-size: 11.5px;
    color: var(--ec-muted);
    font-style: italic;
    padding: 8px 4px;
}

.fm-tab[b-r2pxg9qbkq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 9px;
    border: none;
    background: #fff;
    color: var(--ec-sub);
    font-size: 12px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px var(--ec-border);
    transition: background 0.15s, color 0.15s, box-shadow 0.15s, transform 0.05s;
}
.fm-tab:hover[b-r2pxg9qbkq] { background: var(--ec-blue-gh); }
.fm-tab:active[b-r2pxg9qbkq] { transform: translateY(1px); }
.fm-tab.is-active[b-r2pxg9qbkq] {
    background: var(--ec-purple);
    color: #fff;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--ec-purple) 30%, transparent);
}
.fm-tab-label[b-r2pxg9qbkq] { line-height: 1; }
.fm-tab-dot[b-r2pxg9qbkq] {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--ec-amber);
    flex-shrink: 0;
}
.fm-tab.is-active .fm-tab-dot[b-r2pxg9qbkq] { background: #fff; opacity: 0.85; }

/* Stage badge on a tab (KG / School) — only shown when the menu isn't Both. */
.fm-tab-stage[b-r2pxg9qbkq] {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 5px;
    border-radius: 5px;
    line-height: 1;
    flex-shrink: 0;
}
.fm-tab-stage--kg[b-r2pxg9qbkq]     { color: #d63677; background: color-mix(in srgb, #d63677 14%, #fff); }
.fm-tab-stage--school[b-r2pxg9qbkq] { color: var(--ec-blue); background: var(--ec-blue-gh); }
.fm-tab.is-active .fm-tab-stage[b-r2pxg9qbkq] {
    color: #fff;
    background: rgba(255, 255, 255, 0.22);
}

/* Stage segmented control in the new/copy menu modal. */
.fm-stage-seg[b-r2pxg9qbkq] {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    border-radius: 9px;
    background: var(--ec-bg);
    box-shadow: inset 0 0 0 1px var(--ec-border);
}
.fm-stage-opt[b-r2pxg9qbkq] {
    border: none;
    background: transparent;
    color: var(--ec-sub);
    font-size: 12px;
    font-weight: 800;
    font-family: inherit;
    padding: 6px 12px;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.fm-stage-opt:hover[b-r2pxg9qbkq] { color: var(--ec-text); }
.fm-stage-opt.is-active[b-r2pxg9qbkq] {
    background: var(--ec-purple);
    color: #fff;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--ec-purple) 30%, transparent);
}

/* ── Buttons ───────────────────────────────────────────────────────── */
.fm-btn[b-r2pxg9qbkq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    border: none;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s, transform 0.05s;
}
.fm-btn:disabled[b-r2pxg9qbkq] { opacity: 0.55; cursor: not-allowed; }
.fm-btn:active:not(:disabled)[b-r2pxg9qbkq] { transform: translateY(1px); }
.fm-btn i[b-r2pxg9qbkq] { font-size: 13px; }

.fm-btn-primary[b-r2pxg9qbkq] {
    background: var(--ec-primary);
    color: #fff;
}
.fm-btn-primary:hover:not(:disabled)[b-r2pxg9qbkq] {
    filter: brightness(0.93);
}

.fm-btn-success[b-r2pxg9qbkq] {
    background: var(--ec-green);
    color: #fff;
}
.fm-btn-success:hover:not(:disabled)[b-r2pxg9qbkq] {
    background: color-mix(in srgb, var(--ec-green) 88%, black);
}

.fm-btn-danger[b-r2pxg9qbkq] {
    background: var(--ec-red);
    color: #fff;
}
.fm-btn-danger:hover:not(:disabled)[b-r2pxg9qbkq] {
    background: color-mix(in srgb, var(--ec-red) 88%, black);
}

.fm-btn-ghost[b-r2pxg9qbkq] {
    background: #fff;
    color: var(--ec-sub);
    border: 1px solid var(--ec-border);
    padding: 7px 13px;
    font-size: 11.5px;
    font-weight: 700;
}
.fm-btn-ghost:hover:not(:disabled)[b-r2pxg9qbkq] { background: var(--ec-bg); }

.fm-btn-danger-ghost[b-r2pxg9qbkq] {
    background: #fff;
    color: var(--ec-red);
    border: 1px solid var(--ec-border);
    padding: 7px 10px;
    font-size: 11.5px;
    font-weight: 700;
}
.fm-btn-danger-ghost:hover:not(:disabled)[b-r2pxg9qbkq] {
    background: color-mix(in srgb, var(--ec-red) 8%, white);
    border-color: color-mix(in srgb, var(--ec-red) 35%, var(--ec-border));
}

/* ── Notes banner (above the grid, matches prototype) ──────────────── */
.fm-notes-banner[b-r2pxg9qbkq] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--ec-blue-gh);
    border: 1px solid var(--ec-blue-lt);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 12px;
    color: var(--ec-text);
    line-height: 1.5;
}
.fm-notes-banner i[b-r2pxg9qbkq] {
    color: var(--ec-blue);
    font-size: 14px;
    flex-shrink: 0;
}

/* ── Weekly grid ───────────────────────────────────────────────────── */
.fm-grid-wrap[b-r2pxg9qbkq] {
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--ec-border);
    overflow: hidden;
}
.fm-grid-hdr[b-r2pxg9qbkq] {
    padding: 12px 18px;
    border-bottom: 1px solid var(--ec-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.fm-grid-title[b-r2pxg9qbkq] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.fm-grid-meta[b-r2pxg9qbkq] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 0;
}
.fm-grid-meta b[b-r2pxg9qbkq] { color: var(--ec-text); font-weight: 800; }

.fm-grid-scroll[b-r2pxg9qbkq] { overflow-x: auto; }
.fm-grid[b-r2pxg9qbkq] {
    display: grid;
    grid-template-columns: 130px repeat(5, minmax(170px, 1fr));
    min-width: 980px;
}
.fm-grid-cell[b-r2pxg9qbkq] {
    border-top: 1px solid var(--ec-border-soft);
    border-left: 1px solid var(--ec-border-soft);
    padding: 10px;
    background: #fff;
}
.fm-grid-cell.fm-grid-corner[b-r2pxg9qbkq] {
    background: var(--ec-bg);
    border-top: none;
    border-left: none;
    font-size: 10px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
}
.fm-grid-cell.fm-grid-day-hdr[b-r2pxg9qbkq] {
    padding: 10px 12px;
    background: var(--ec-bg);
    border-top: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.fm-day-hdr-label[b-r2pxg9qbkq] {
    font-size: 10px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.fm-edit-day-btn[b-r2pxg9qbkq] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 6px;
    padding: 2px 7px;
    font-size: 9.5px;
    font-weight: 800;
    color: var(--ec-purple);
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.04em;
    line-height: 1.5;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.fm-edit-day-btn:hover[b-r2pxg9qbkq] {
    background: var(--ec-purple-lt);
    border-color: color-mix(in srgb, var(--ec-purple) 35%, var(--ec-border));
}

.fm-grid-cell.fm-grid-meal-label[b-r2pxg9qbkq] {
    background: color-mix(in srgb, var(--ec-bg) 70%, white);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
}
.fm-grid-cell.fm-grid-meal-label i[b-r2pxg9qbkq] {
    font-size: 16px;
    flex-shrink: 0;
}
.fm-meal-name[b-r2pxg9qbkq] {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ec-sub);
    margin: 0;
    line-height: 1.2;
}

/* Cell (day × meal) */
.fm-cell[b-r2pxg9qbkq] {
    min-height: 92px;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.fm-cell:hover[b-r2pxg9qbkq] {
    background: var(--ec-blue-gh);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ec-purple) 30%, transparent);
}
.fm-cell.is-conflict:hover[b-r2pxg9qbkq] {
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ec-red) 50%, transparent);
}
.fm-cell-empty[b-r2pxg9qbkq] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 72px;
    color: var(--ec-muted);
    font-size: 11px;
    font-weight: 700;
}

/* Dish chip */
.fm-dish[b-r2pxg9qbkq] {
    border-left: 2px solid var(--ec-purple);
    padding-left: 7px;
    line-height: 1.25;
}
.fm-dish-name[b-r2pxg9qbkq] {
    font-size: 11px;
    font-weight: 700;
    color: var(--ec-text);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fm-dish.is-conflict .fm-dish-name[b-r2pxg9qbkq] { color: var(--ec-red); }

.fm-dish-meta[b-r2pxg9qbkq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}
.fm-dish-kcal[b-r2pxg9qbkq] {
    font-size: 9px;
    color: var(--ec-muted);
    font-weight: 600;
}
.fm-dish-tag[b-r2pxg9qbkq] {
    font-size: 8.5px;
    font-weight: 800;
    padding: 1px 4px;
    border-radius: 3px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.3;
}
.fm-dish-tag--veg[b-r2pxg9qbkq],
.fm-dish-tag--vegan[b-r2pxg9qbkq] {
    color: var(--ec-green);
    background: var(--ec-green-lt);
}
.fm-dish-tag--alert[b-r2pxg9qbkq] {
    color: var(--ec-red);
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--ec-red) 35%, transparent);
}
.fm-dish-more[b-r2pxg9qbkq] {
    font-size: 9.5px;
    color: var(--ec-muted);
    font-weight: 700;
    margin-top: 3px;
}

/* ── Slide-over (meal sheet) ───────────────────────────────────────── */
.fm-overlay[b-r2pxg9qbkq] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 1080;
    display: flex;
    justify-content: flex-end;
    animation: fm-overlay-in-b-r2pxg9qbkq 0.15s ease;
}
@keyframes fm-overlay-in-b-r2pxg9qbkq { from { background: rgba(15, 23, 42, 0); } }

.fm-sheet[b-r2pxg9qbkq] {
    width: min(580px, 95vw);
    height: 100%;
    background: #fff;
    box-shadow: -12px 0 40px rgba(13, 23, 51, 0.16);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: fm-sheet-in-b-r2pxg9qbkq 0.2s ease;
}
@keyframes fm-sheet-in-b-r2pxg9qbkq {
    from { transform: translateX(30px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

.fm-sheet-hdr[b-r2pxg9qbkq] {
    padding: 18px 26px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--ec-purple) 12%, white), #fff);
    border-bottom: 1px solid var(--ec-border);
    border-left: 4px solid var(--ec-purple);
    position: relative;
}
.fm-sheet-close[b-r2pxg9qbkq] {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--ec-border);
    cursor: pointer;
    font-size: 15px;
    color: var(--ec-sub);
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.fm-sheet-close:hover[b-r2pxg9qbkq] { background: var(--ec-bg); }
.fm-sheet-eyebrow[b-r2pxg9qbkq] {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.fm-sheet-eyebrow i[b-r2pxg9qbkq] { font-size: 13px; }
.fm-sheet-title[b-r2pxg9qbkq] {
    font-size: 18px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 3px 0 0;
}

.fm-sheet-body[b-r2pxg9qbkq] {
    padding: 14px 26px 26px;
    flex: 1;
    overflow-y: auto;
}

/* Dish row in sheet */
.fm-sheet-dish[b-r2pxg9qbkq] {
    background: var(--ec-bg);
    border: 1px solid var(--ec-border-soft);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 8px;
    transition: background 0.15s, border-color 0.15s;
}
.fm-sheet-dish.is-conflict[b-r2pxg9qbkq] {
    background: var(--ec-red-lt);
    border-color: color-mix(in srgb, var(--ec-red) 30%, transparent);
}
.fm-sheet-dish--add[b-r2pxg9qbkq] {
    background: #fff;
    border-style: dashed;
}
.fm-sheet-dish-row[b-r2pxg9qbkq] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    justify-content: space-between;
}
.fm-sheet-dish-body[b-r2pxg9qbkq] { flex: 1; min-width: 0; }
.fm-sheet-dish-name[b-r2pxg9qbkq] {
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.fm-sheet-dish-desc[b-r2pxg9qbkq] {
    font-size: 11.5px;
    color: var(--ec-sub);
    margin: 3px 0 0;
    line-height: 1.5;
}
.fm-sheet-dish-meta[b-r2pxg9qbkq] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 7px;
    align-items: center;
    font-size: 10.5px;
    color: var(--ec-sub);
}
.fm-sheet-dish-meta > span[b-r2pxg9qbkq] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fff;
    padding: 3px 7px;
    border-radius: 5px;
    font-weight: 700;
}
.fm-sheet-dish-meta > .fm-dish-tag[b-r2pxg9qbkq] {
    padding: 3px 7px;
    background: var(--ec-green-lt);
}
.fm-sheet-dish-meta i[b-r2pxg9qbkq] { font-size: 11px; }

.fm-sheet-dish-allergens[b-r2pxg9qbkq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 9px;
    padding: 7px 10px;
    background: #fff;
    border: 1px solid var(--ec-border-soft);
    border-radius: 8px;
    font-size: 11px;
    color: var(--ec-sub);
}
.fm-sheet-dish-allergens i[b-r2pxg9qbkq] { font-size: 13px; flex-shrink: 0; }
.fm-sheet-dish-allergens b[b-r2pxg9qbkq] { color: var(--ec-text); font-weight: 700; }

.fm-sheet-dish-allergens-pills[b-r2pxg9qbkq] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}
.fm-allg-pill[b-r2pxg9qbkq] {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border: 1px solid;
    border-radius: 99px;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1.4;
}
.fm-sheet-dish-atrisk[b-r2pxg9qbkq] {
    margin-left: auto;
    background: var(--ec-red);
    color: #fff;
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.fm-sheet-dish.is-conflict .fm-sheet-dish-allergens[b-r2pxg9qbkq] {
    border-color: color-mix(in srgb, var(--ec-red) 30%, transparent);
}

.fm-sheet-dish-actions[b-r2pxg9qbkq] {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.fm-icon-btn[b-r2pxg9qbkq] {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: #fff;
    border: 1px solid var(--ec-border);
    color: var(--ec-sub);
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.fm-icon-btn:hover:not(:disabled)[b-r2pxg9qbkq] {
    background: var(--ec-bg);
    color: var(--ec-text);
}
.fm-icon-btn:disabled[b-r2pxg9qbkq] { opacity: 0.45; cursor: not-allowed; }
.fm-icon-btn--danger[b-r2pxg9qbkq] { color: var(--ec-red); }
.fm-icon-btn--danger:hover:not(:disabled)[b-r2pxg9qbkq] {
    background: color-mix(in srgb, var(--ec-red) 10%, white);
    border-color: color-mix(in srgb, var(--ec-red) 35%, var(--ec-border));
}

.fm-add-dish-btn[b-r2pxg9qbkq] {
    width: 100%;
    padding: 10px;
    background: #fff;
    border: 1.5px dashed var(--ec-border);
    border-radius: 9px;
    font-size: 12px;
    font-weight: 800;
    color: var(--ec-purple);
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: background 0.15s, border-color 0.15s;
}
.fm-add-dish-btn:hover[b-r2pxg9qbkq] {
    background: var(--ec-blue-gh);
    border-color: color-mix(in srgb, var(--ec-purple) 45%, var(--ec-border));
}

/* ── Inline dish form ──────────────────────────────────────────────── */
.fm-dish-form[b-r2pxg9qbkq] {
    padding: 4px 0 2px;
}
.fm-form-row[b-r2pxg9qbkq] {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}
.fm-form-row--toggles[b-r2pxg9qbkq] {
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding-top: 2px;
}
.fm-field[b-r2pxg9qbkq] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.fm-field--grow[b-r2pxg9qbkq] { flex: 1; }
.fm-field--time[b-r2pxg9qbkq] { flex: 0 0 92px; }
.fm-field--cal[b-r2pxg9qbkq]  { flex: 0 0 100px; }

.fm-field-label[b-r2pxg9qbkq] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-sub);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 4px;
}
.fm-help-inline[b-r2pxg9qbkq] {
    font-weight: 600;
    color: var(--ec-muted);
    text-transform: none;
    letter-spacing: 0;
    margin-left: 4px;
}

.fm-input[b-r2pxg9qbkq] {
    padding: 8px 11px;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    font-size: 12.5px;
    font-family: inherit;
    color: var(--ec-text);
    outline: none;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.fm-input:focus[b-r2pxg9qbkq] {
    border-color: var(--ec-purple);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ec-purple) 18%, transparent);
}
.fm-input--time[b-r2pxg9qbkq] {
    /* .fm-field--time constrains the column to 92px; give the native time
       widget a fixed width so browser chrome (clock icon) doesn't overflow. */
    min-width: 92px;
    width: 92px;
    padding-right: 6px;
    cursor: pointer;
}
.fm-textarea[b-r2pxg9qbkq] {
    resize: vertical;
    min-height: 60px;
    line-height: 1.45;
}

.fm-check[b-r2pxg9qbkq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ec-sub);
    cursor: pointer;
    user-select: none;
}
.fm-check input[b-r2pxg9qbkq] { cursor: pointer; }

.fm-form-footer[b-r2pxg9qbkq] {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
    margin-top: 10px;
}

.fm-modal-err[b-r2pxg9qbkq] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 8px;
    color: var(--ec-red);
    background: color-mix(in srgb, var(--ec-red) 8%, white);
    border: 1px solid color-mix(in srgb, var(--ec-red) 30%, transparent);
    padding: 8px 11px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 700;
}

/* ── Modals (new / copy / delete) ──────────────────────────────────── */
.fm-modal-overlay[b-r2pxg9qbkq] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 1090;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: fm-overlay-in-b-r2pxg9qbkq 0.15s ease;
}
.fm-modal[b-r2pxg9qbkq] {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(13, 23, 51, 0.28);
    width: min(540px, 100%);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: fm-sheet-in-b-r2pxg9qbkq 0.18s ease;
}
.fm-modal--narrow[b-r2pxg9qbkq] { width: min(440px, 100%); }

.fm-modal-hdr[b-r2pxg9qbkq] {
    padding: 16px 22px;
    border-bottom: 1px solid var(--ec-border);
    background: linear-gradient(135deg, color-mix(in srgb, var(--ec-purple) 12%, white), #fff);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.fm-modal-hdr h3[b-r2pxg9qbkq] {
    font-size: 16px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.fm-modal-close[b-r2pxg9qbkq] {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: #fff;
    border: 1px solid var(--ec-border);
    cursor: pointer;
    font-size: 14px;
    color: var(--ec-sub);
    line-height: 1;
    font-family: inherit;
}
.fm-modal-close:hover[b-r2pxg9qbkq] { background: var(--ec-bg); }

.fm-modal-body[b-r2pxg9qbkq] {
    padding: 18px 22px;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.fm-modal-footer[b-r2pxg9qbkq] {
    padding: 12px 22px;
    border-top: 1px solid var(--ec-border-soft);
    background: var(--ec-bg);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.fm-help[b-r2pxg9qbkq] {
    font-size: 12px;
    color: var(--ec-sub);
    line-height: 1.55;
    margin: 0;
}
.fm-help--muted[b-r2pxg9qbkq] { color: var(--ec-muted); font-size: 11.5px; }
.fm-help b[b-r2pxg9qbkq] { color: var(--ec-text); font-weight: 700; }

/* ── Day editor slide-over ─────────────────────────────────────────── */
.fm-sheet--wide[b-r2pxg9qbkq] { width: min(680px, 95vw); }

.fm-sheet-hdr--purple[b-r2pxg9qbkq] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--ec-purple) 10%, white), #fff);
    border-left-color: var(--ec-purple);
}

.fm-sheet-title-sub[b-r2pxg9qbkq] {
    font-size: 13px;
    font-weight: 600;
    color: var(--ec-muted);
    margin-left: 6px;
}

.fm-day-nav[b-r2pxg9qbkq] {
    display: flex;
    gap: 6px;
    margin-top: 11px;
    flex-wrap: wrap;
}
.fm-day-nav .fm-btn[b-r2pxg9qbkq] { padding: 6px 11px; font-size: 11px; }

.fm-sheet-footer[b-r2pxg9qbkq] {
    padding: 12px 26px;
    border-top: 1px solid var(--ec-border-soft);
    background: var(--ec-bg);
    display: flex;
    justify-content: space-between;
    gap: 7px;
}

.fm-day-meal[b-r2pxg9qbkq] { margin-bottom: 22px; }
.fm-day-meal-hdr[b-r2pxg9qbkq] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 9px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--ec-border-soft);
}
.fm-day-meal-hdr i[b-r2pxg9qbkq] { font-size: 18px; flex-shrink: 0; }
.fm-day-meal-info[b-r2pxg9qbkq] { flex: 1; min-width: 0; }
.fm-day-meal-name[b-r2pxg9qbkq] {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin: 0;
}
.fm-day-meal-sub[b-r2pxg9qbkq] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 2px 0 0;
}

.fm-day-meal-list[b-r2pxg9qbkq] { margin-bottom: 10px; }
.fm-day-meal-dish[b-r2pxg9qbkq] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: var(--ec-bg);
    border-radius: 7px;
    margin-bottom: 4px;
}
.fm-day-meal-dish-body[b-r2pxg9qbkq] { flex: 1; min-width: 0; }
.fm-day-meal-dish-name[b-r2pxg9qbkq] {
    font-size: 12px;
    font-weight: 700;
    color: var(--ec-text);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fm-day-meal-dish-meta[b-r2pxg9qbkq] {
    font-size: 10px;
    color: var(--ec-muted);
    margin: 2px 0 0;
}
.fm-day-meal-dish-time[b-r2pxg9qbkq] {
    font-size: 9.5px;
    color: var(--ec-muted);
    font-weight: 700;
    flex-shrink: 0;
}

.fm-day-meal-help[b-r2pxg9qbkq] {
    font-size: 10px;
    font-weight: 700;
    color: var(--ec-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 4px;
}
.fm-day-meal-help code[b-r2pxg9qbkq] {
    background: var(--ec-bg);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 10.5px;
    text-transform: none;
    letter-spacing: 0;
}
.fm-day-bulk[b-r2pxg9qbkq] { min-height: 60px; margin-bottom: 6px; }
.fm-bulk-btn[b-r2pxg9qbkq] {
    color: #fff;
    border: none;
    padding: 7px 14px;
    font-size: 11.5px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.fm-bulk-btn:disabled[b-r2pxg9qbkq] {
    background: var(--ec-muted) !important;
    cursor: not-allowed;
    opacity: 0.85;
}
/* /Components/Pages/Grades/GradesPage.razor.rz.scp.css */
/* Admin Grades — transcribed from prototype AWGrades
   (EduConnect All Roles.html lines 21282-21486). */

.awgr-page[b-wiv1k25ymk] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Banner / loading / empty ───────────────────────────────────── */
.awgr-banner[b-wiv1k25ymk] {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 13px; font-weight: 600;
}
.awgr-banner-error[b-wiv1k25ymk] {
    background: color-mix(in srgb, var(--ec-red) 8%, transparent);
    color: var(--ec-red);
    border: 1px solid color-mix(in srgb, var(--ec-red) 18%, transparent);
}
.awgr-banner-close[b-wiv1k25ymk] {
    margin-left: auto;
    background: none; border: none; cursor: pointer;
    color: inherit; font-size: 16px; padding: 0; line-height: 1;
}

.awgr-loading[b-wiv1k25ymk] {
    display: flex; flex-direction: column; align-items: center;
    padding: 80px 24px;
    color: var(--ec-muted);
    gap: 14px;
}
.awgr-spinner[b-wiv1k25ymk] {
    width: 38px; height: 38px;
    border: 3px solid var(--ec-border-soft);
    border-top-color: var(--ec-blue);
    border-radius: 50%;
    animation: awgr-spin-b-wiv1k25ymk 0.75s linear infinite;
}
@keyframes awgr-spin-b-wiv1k25ymk { to { transform: rotate(360deg); } }

.awgr-empty[b-wiv1k25ymk] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    padding: 60px 24px;
    display: flex; flex-direction: column; align-items: center;
    gap: 6px;
    color: var(--ec-muted);
    text-align: center;
}
.awgr-empty-icon[b-wiv1k25ymk] { font-size: 32px; opacity: 0.4; color: var(--ec-blue); }
.awgr-empty-title[b-wiv1k25ymk] { font-size: 14px; font-weight: 800; color: var(--ec-text); margin: 0; }
.awgr-empty-sub[b-wiv1k25ymk]   { font-size: 12px; color: var(--ec-muted); margin: 0; max-width: 420px; }

/* ── KPIs ──────────────────────────────────────────────────────── */
.awgr-kpis[b-wiv1k25ymk] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
@media (max-width: 980px) { .awgr-kpis[b-wiv1k25ymk] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .awgr-kpis[b-wiv1k25ymk] { grid-template-columns: 1fr; } }

/* ── Class filter chips ────────────────────────────────────────── */
.awgr-chips[b-wiv1k25ymk] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.awgr-chip[b-wiv1k25ymk] {
    padding: 7px 13px;
    border-radius: 9px;
    border: none;
    background: #fff;
    color: var(--ec-sub);
    font-size: 12px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px var(--ec-border);
    transition: background 0.15s, color 0.15s, box-shadow 0.15s, transform 0.05s;
}
.awgr-chip:hover:not(.is-active)[b-wiv1k25ymk] { background: var(--ec-bg); }
.awgr-chip.is-active[b-wiv1k25ymk] { box-shadow: none; }
.awgr-chip:active[b-wiv1k25ymk] { transform: translateY(1px); }

/* ── Card shells ───────────────────────────────────────────────── */
.awgr-card[b-wiv1k25ymk] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 12px;
    overflow: hidden;
}
.awgr-card-hdr[b-wiv1k25ymk] {
    padding: 12px 18px;
    border-bottom: 1px solid var(--ec-border);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}
.awgr-card-hdr--green[b-wiv1k25ymk] { background: color-mix(in srgb, var(--ec-green-lt) 80%, transparent); }
.awgr-card-hdr--amber[b-wiv1k25ymk] { background: color-mix(in srgb, var(--ec-amber-lt) 80%, transparent); }
.awgr-card-hdr--audit[b-wiv1k25ymk] { /* sidebar-friendly muted look */ }

.awgr-card-title[b-wiv1k25ymk] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.awgr-card-title--green[b-wiv1k25ymk] { color: var(--ec-green); font-size: 13px; }
.awgr-card-title--amber[b-wiv1k25ymk] { color: var(--ec-amber); font-size: 13px; }
.awgr-card-sub[b-wiv1k25ymk] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 3px 0 0;
}
.awgr-card-aside[b-wiv1k25ymk] {
    font-size: 11px;
    color: var(--ec-muted);
    font-style: italic;
    margin: 0;
}
.awgr-card-aside b[b-wiv1k25ymk] { color: var(--ec-blue); font-style: normal; font-weight: 700; }
.awgr-card-empty[b-wiv1k25ymk] {
    padding: 22px 18px;
    color: var(--ec-muted);
    font-size: 12px;
    text-align: center;
}
.awgr-shield[b-wiv1k25ymk] { color: var(--ec-blue); font-size: 13px; }

/* ── Distribution histogram ────────────────────────────────────── */
.awgr-bars[b-wiv1k25ymk] {
    padding: 14px 22px 8px;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 200px;
    border-bottom: 1px solid var(--ec-border-soft);
}
.awgr-bar-wrap[b-wiv1k25ymk] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
    height: 100%;
}
.awgr-bar-count[b-wiv1k25ymk] {
    font-size: 11px;
    font-weight: 800;
    margin: 0;
}
.awgr-bar[b-wiv1k25ymk] {
    width: 100%;
    max-width: 60px;
    border-radius: 5px 5px 0 0;
    transition: height 0.3s;
}
.awgr-bands[b-wiv1k25ymk] {
    display: flex;
    gap: 6px;
    padding: 6px 22px 12px;
}
.awgr-band[b-wiv1k25ymk] {
    flex: 1;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--ec-muted);
    letter-spacing: 0.04em;
    margin: 0;
}

/* ── Split: per-class + outliers ───────────────────────────────── */
.awgr-split[b-wiv1k25ymk] {
    display: grid;
    grid-template-columns: 1.2fr 1.4fr;
    gap: 14px;
}
@media (max-width: 960px) { .awgr-split[b-wiv1k25ymk] { grid-template-columns: 1fr; } }

.awgr-outliers[b-wiv1k25ymk] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Per-class average rows */
.awgr-pc-row[b-wiv1k25ymk] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    border-top: 1px solid var(--ec-border-soft);
}
.awgr-pc-row:first-of-type[b-wiv1k25ymk] { border-top: none; }
.awgr-pc-bar[b-wiv1k25ymk] {
    width: 8px;
    height: 32px;
    border-radius: 3px;
    flex-shrink: 0;
}
.awgr-pc-body[b-wiv1k25ymk] { flex: 1; min-width: 0; }
.awgr-pc-name[b-wiv1k25ymk] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ec-text);
    margin: 0;
}
.awgr-pc-sub[b-wiv1k25ymk] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 2px 0 0;
}
.awgr-pc-avg[b-wiv1k25ymk] { text-align: right; }
.awgr-pc-num[b-wiv1k25ymk] {
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    margin: 0;
}
.awgr-pc-norm[b-wiv1k25ymk] {
    font-size: 10px;
    color: var(--ec-muted);
    font-weight: 700;
    margin: 3px 0 0;
}

/* Student row (top / bottom) */
.awgr-stu-row[b-wiv1k25ymk] {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 18px;
    border-top: 1px solid var(--ec-border-soft);
}
.awgr-stu-row:first-of-type[b-wiv1k25ymk] { border-top: none; }
.awgr-stu-rank[b-wiv1k25ymk] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-muted);
    min-width: 18px;
    margin: 0;
}
.awgr-stu-avatar[b-wiv1k25ymk] {
    width: 30px; height: 30px;
    border-radius: 50%;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.awgr-stu-body[b-wiv1k25ymk] { flex: 1; min-width: 0; }
.awgr-stu-name[b-wiv1k25ymk] {
    font-size: 12px;
    font-weight: 700;
    color: var(--ec-text);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.awgr-stu-sub[b-wiv1k25ymk] {
    font-size: 10px;
    color: var(--ec-muted);
    margin: 0;
}
.awgr-stu-avg[b-wiv1k25ymk] {
    font-size: 14px;
    font-weight: 800;
    margin: 0;
}

/* ── Audit strip ───────────────────────────────────────────────── */
.awgr-audit-row[b-wiv1k25ymk] {
    display: grid;
    grid-template-columns: 150px 1fr 90px 1fr;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    border-top: 1px solid var(--ec-border-soft);
    border-left: 3px solid var(--ec-green);
}
.awgr-audit-row:first-of-type[b-wiv1k25ymk] { border-top: none; }
.awgr-audit-time[b-wiv1k25ymk] {
    font-size: 10.5px;
    color: var(--ec-muted);
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
    white-space: nowrap;
}
.awgr-audit-student[b-wiv1k25ymk] { min-width: 0; }
.awgr-audit-name[b-wiv1k25ymk] {
    font-size: 12px;
    font-weight: 700;
    color: var(--ec-text);
    margin: 0;
}
.awgr-audit-class[b-wiv1k25ymk] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 1px 0 0;
}
.awgr-audit-pill[b-wiv1k25ymk] {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 3px 8px;
    border-radius: 5px;
    text-transform: uppercase;
    text-align: center;
    justify-self: start;
}
.awgr-audit-value[b-wiv1k25ymk] {
    font-size: 12px;
    color: var(--ec-text);
    font-weight: 600;
}
.awgr-audit-value b[b-wiv1k25ymk] { font-weight: 800; }

@media (max-width: 880px) {
    .awgr-audit-row[b-wiv1k25ymk] {
        grid-template-columns: 1fr 90px;
        grid-template-areas:
            "student pill"
            "value   value"
            "time    .";
        row-gap: 4px;
    }
    .awgr-audit-time[b-wiv1k25ymk]    { grid-area: time; }
    .awgr-audit-student[b-wiv1k25ymk] { grid-area: student; }
    .awgr-audit-pill[b-wiv1k25ymk]    { grid-area: pill; justify-self: end; }
    .awgr-audit-value[b-wiv1k25ymk]   { grid-area: value; }
}
/* /Components/Pages/GradingScales/GradingScalesPage.razor.rz.scp.css */
/* GradingScalesPage — customer-wide registry of grading scales.
   Source of truth: prototype EduConnect All Roles.html lines 16525-16722
   (AWGradingScales). Pixel values transcribed verbatim from the inline
   JSX so the Blazor render matches the prototype rather than drifting
   into rem approximations. */

.gs-page[b-k11qooro9n] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ── Banners ─────────────────────────────────────────────────────────── */
.gs-banner[b-k11qooro9n] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 600;
}
.gs-banner-error[b-k11qooro9n] { background: var(--ec-red-lt); color: var(--ec-red); }
.gs-banner-close[b-k11qooro9n] {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    font-size: 16px;
    line-height: 1;
    padding: 0;
}

.gs-loading[b-k11qooro9n], .gs-empty[b-k11qooro9n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 64px 32px;
    gap: 12px;
    color: var(--ec-muted);
    text-align: center;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 14px;
}
.gs-spinner[b-k11qooro9n] {
    width: 36px;
    height: 36px;
    border: 3px solid #e9eefb;
    border-top-color: var(--ec-blue);
    border-radius: 50%;
    animation: gs-spin-b-k11qooro9n 0.75s linear infinite;
}
@keyframes gs-spin-b-k11qooro9n { to { transform: rotate(360deg); } }
.gs-empty h3[b-k11qooro9n] { font-size: 15px; font-weight: 800; color: var(--ec-text); margin: 0; }
.gs-empty p[b-k11qooro9n] { font-size: 12.5px; margin: 0; }
.gs-empty-icon[b-k11qooro9n] { font-size: 38px; opacity: 0.35; color: var(--ec-amber); }

/* ── KPI grid (4 tiles) — prototype WebKPI 1306-1335 ─────────────────── */
.gs-kpi-grid[b-k11qooro9n] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.gs-kpi[b-k11qooro9n] {
    min-height: 96px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.gs-kpi-icon[b-k11qooro9n] {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 20px;
    color: var(--kpi-c, var(--ec-blue));
    background: color-mix(in srgb, var(--kpi-c, var(--ec-blue)) 14%, transparent);
}
.gs-kpi-body[b-k11qooro9n] { flex: 1; min-width: 0; }
.gs-kpi-value[b-k11qooro9n] {
    font-size: 22px;
    font-weight: 800;
    color: var(--ec-text);
    line-height: 1;
    letter-spacing: -0.02em;
}
.gs-kpi-label[b-k11qooro9n] {
    font-size: 10px;
    font-weight: 700;
    color: var(--ec-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 6px;
}
.gs-kpi-sub[b-k11qooro9n] {
    font-size: 11px;
    color: var(--ec-sub);
    margin-top: 3px;
}

@media (max-width: 880px) {
    .gs-kpi-grid[b-k11qooro9n] { grid-template-columns: repeat(2, 1fr); }
}

/* ── Toolbar (filter chips + Add button) — prototype 16649-16660 ─────── */
.gs-toolbar[b-k11qooro9n] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.gs-filters[b-k11qooro9n] { display: flex; gap: 5px; flex-wrap: wrap; }
.gs-filter[b-k11qooro9n] {
    background: #fff;
    color: var(--ec-sub);
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.gs-filter:hover[b-k11qooro9n] { background: var(--ec-bg); color: var(--ec-text); }
.gs-filter-on[b-k11qooro9n] {
    background: var(--ec-blue);
    color: #fff;
    border-color: var(--ec-blue);
}
.gs-filter-on:hover[b-k11qooro9n] { background: var(--ec-blue-dk); color: #fff; }
.gs-filter-count[b-k11qooro9n] {
    font-size: 10px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--ec-border-soft);
    color: var(--ec-muted);
}
.gs-filter-on .gs-filter-count[b-k11qooro9n] {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

/* page-level "New scale" CTA now uses the shared .ec-btn-primary class */

/* ── Cards grid ─────────────────────────────────────────────────────── */
.gs-grid[b-k11qooro9n] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 12px;
}
.gs-card[b-k11qooro9n] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 13px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
}
.gs-card-head[b-k11qooro9n] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.gs-kind-chip[b-k11qooro9n] {
    font-size: 10px;
    font-weight: 800;
    color: var(--ec-blue);
    background: var(--ec-blue-lt);
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.06em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.gs-kind-chip i[b-k11qooro9n] { font-size: 11px; }
.gs-code[b-k11qooro9n] {
    font-size: 10px;
    font-weight: 700;
    color: var(--ec-muted);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.gs-card-title[b-k11qooro9n] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    line-height: 1.3;
    margin: 0;
}
.gs-card-note[b-k11qooro9n] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 4px 0 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 33px;
}
.gs-card-note-muted[b-k11qooro9n] { font-style: italic; }

/* Preview chips — colour comes from the inline --c / --c-soft vars,
   set by the page based on the prototype's colorOf bucketing. */
.gs-preview[b-k11qooro9n] {
    display: flex;
    gap: 3px;
    margin-top: 9px;
    margin-bottom: 9px;
    flex-wrap: wrap;
}
.gs-pchip[b-k11qooro9n] {
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 5px;
    background: var(--c-soft);
    color: var(--c);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.gs-card-foot[b-k11qooro9n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 9px;
    border-top: 1px solid var(--ec-border-soft);
    margin-top: auto;
}
.gs-usage[b-k11qooro9n] {
    font-size: 11px;
    color: var(--ec-muted);
    font-weight: 700;
    margin: 0;
}
.gs-usage-used[b-k11qooro9n] { color: var(--ec-green); }

.gs-card-actions[b-k11qooro9n] { display: flex; gap: 5px; }
.gs-btn-edit[b-k11qooro9n], .gs-btn-del[b-k11qooro9n] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 7px;
    padding: 5px 11px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    color: var(--ec-text);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.gs-btn-edit:hover[b-k11qooro9n] { background: var(--ec-bg); }
.gs-btn-edit i[b-k11qooro9n] { font-size: 12px; }
.gs-btn-del[b-k11qooro9n] { color: var(--ec-red); }
.gs-btn-del:hover:not(:disabled)[b-k11qooro9n] { background: var(--ec-red-lt); }
.gs-btn-del:disabled[b-k11qooro9n] {
    color: var(--ec-muted);
    cursor: not-allowed;
    opacity: 0.5;
}
.gs-btn-del i[b-k11qooro9n] { font-size: 14px; }

/* ── Editor slide-over — prototype 16729-16862 ───────────────────────── */
.gs-editor-backdrop[b-k11qooro9n] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 3000;
    display: flex;
    justify-content: flex-end;
}
.gs-editor[b-k11qooro9n] {
    width: min(620px, 96%);
    height: 100%;
    background: #fff;
    box-shadow: -12px 0 40px rgba(13, 23, 51, 0.16);
    display: flex;
    flex-direction: column;
}
.gs-editor-accent[b-k11qooro9n] {
    height: 3px;
    background: var(--ec-blue);
    flex-shrink: 0;
}
.gs-editor-head[b-k11qooro9n] {
    padding: 14px 22px;
    border-bottom: 1px solid var(--ec-border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.gs-editor-kicker[b-k11qooro9n] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-blue);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}
.gs-editor-title[b-k11qooro9n] {
    font-size: 17px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 2px 0 0;
}
.gs-editor-close[b-k11qooro9n] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--ec-border);
    font-size: 16px;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
}
.gs-editor-close:hover[b-k11qooro9n] { background: var(--ec-bg); }

.gs-editor-body[b-k11qooro9n] {
    flex: 1;
    overflow-y: auto;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--ec-bg);
}

.gs-fld[b-k11qooro9n] { display: flex; flex-direction: column; }
.gs-fld-label[b-k11qooro9n] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 6px 0;
}
.gs-fld-hint[b-k11qooro9n] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 6px 0 0;
    font-style: italic;
    line-height: 1.5;
}
.gs-fld-input[b-k11qooro9n] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    font-size: 12.5px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    background: #fff;
}
.gs-fld-input:focus[b-k11qooro9n] { border-color: var(--ec-blue); box-shadow: 0 0 0 2px rgba(59, 95, 192, 0.15); }
.gs-fld-input-bold[b-k11qooro9n] { font-weight: 700; font-size: 13.5px; }
.gs-fld-input-mono[b-k11qooro9n] {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-weight: 700;
    font-size: 13px;
}
.gs-fld-input:disabled[b-k11qooro9n] { background: var(--ec-bg); color: var(--ec-muted); }
.gs-fld-grid-2[b-k11qooro9n] { display: grid; grid-template-columns: 2fr 1fr; gap: 11px; }

.gs-kind-grid[b-k11qooro9n] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.gs-kind-btn[b-k11qooro9n] {
    padding: 10px 11px;
    border-radius: 9px;
    border: 1px solid var(--ec-border);
    background: #fff;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 800;
}
.gs-kind-btn:hover[b-k11qooro9n] { background: var(--ec-bg); }
.gs-kind-btn-on[b-k11qooro9n],
.gs-kind-btn-on:hover[b-k11qooro9n] {
    border-color: var(--ec-blue);
    background: var(--ec-blue-lt);
    color: var(--ec-blue);
}
.gs-kind-btn i[b-k11qooro9n] { font-size: 18px; }

/* Inner colored panel hosting kind-specific inputs. */
.gs-panel[b-k11qooro9n] {
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--ec-border-soft);
    border-radius: 11px;
}
.gs-panel-label[b-k11qooro9n] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 9px 0;
}

.gs-numeric-grid[b-k11qooro9n] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.gs-mini-label[b-k11qooro9n] {
    font-size: 10px;
    color: var(--ec-muted);
    margin: 0 0 4px;
}
.gs-num-input[b-k11qooro9n] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--ec-border);
    border-radius: 7px;
    font-size: 13px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-weight: 800;
    outline: none;
    box-sizing: border-box;
    background: #fff;
}
.gs-num-input:focus[b-k11qooro9n] { border-color: var(--ec-blue); }
.gs-num-input-center[b-k11qooro9n] { text-align: center; }
.gs-num-input-fixed[b-k11qooro9n] { width: 120px; padding: 9px 11px; border-radius: 8px; }

.gs-letter-grid[b-k11qooro9n] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
}
.gs-letter-card[b-k11qooro9n] {
    padding: 9px 11px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
}
.gs-letter-card-pass[b-k11qooro9n] { border-color: var(--ec-green); }
.gs-letter-head[b-k11qooro9n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
}
.gs-letter-chip[b-k11qooro9n] {
    font-size: 13px;
    font-weight: 800;
    color: var(--c);
    background: var(--c-soft);
    padding: 2px 7px;
    border-radius: 4px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.gs-pass-btn[b-k11qooro9n] {
    padding: 2px 7px;
    background: #fff;
    color: var(--ec-muted);
    border: 1px solid var(--ec-border);
    border-radius: 5px;
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.06em;
}
.gs-pass-btn:hover[b-k11qooro9n] { background: var(--ec-bg); }
.gs-pass-btn-on[b-k11qooro9n],
.gs-pass-btn-on:hover[b-k11qooro9n] {
    background: var(--ec-green);
    color: #fff;
    border-color: var(--ec-green);
}
.gs-letter-weight-row[b-k11qooro9n] {
    display: flex;
    align-items: center;
    gap: 5px;
}
.gs-pct[b-k11qooro9n] {
    font-size: 11px;
    color: var(--ec-muted);
    font-weight: 700;
}

/* Footer — Save / Cancel / Delete buttons. */
.gs-editor-foot[b-k11qooro9n] {
    padding: 12px 22px;
    border-top: 1px solid var(--ec-border-soft);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    background: #fff;
    flex-shrink: 0;
}
.gs-foot-delete[b-k11qooro9n] {
    background: #fff;
    border: 1px solid rgba(220, 38, 38, 0.33);
    border-radius: 9px;
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ec-red);
    cursor: pointer;
    font-family: inherit;
    margin-right: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.gs-foot-delete:hover[b-k11qooro9n] { background: var(--ec-red-lt); }
.gs-foot-cancel[b-k11qooro9n] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    padding: 9px 14px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
}
.gs-foot-cancel:hover[b-k11qooro9n] { background: var(--ec-bg); color: var(--ec-text); }
.gs-foot-save[b-k11qooro9n] {
    background: var(--ec-blue);
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.gs-foot-save:hover:not(:disabled)[b-k11qooro9n] { background: var(--ec-blue-dk); }
.gs-foot-save:disabled[b-k11qooro9n] {
    background: var(--ec-border-soft);
    color: var(--ec-muted);
    cursor: not-allowed;
}
.gs-spinner-sm[b-k11qooro9n] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: gs-spin-b-k11qooro9n 0.7s linear infinite;
}
.gs-spinner-sm-dk[b-k11qooro9n] {
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
}

/* ── Delete-confirm dialog — prototype 16707-16719 ───────────────────── */
.gs-confirm-backdrop[b-k11qooro9n] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 3100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.gs-confirm-dialog[b-k11qooro9n] {
    background: #fff;
    border-radius: 14px;
    width: min(440px, 100%);
    padding: 22px 24px;
    box-shadow: 0 20px 60px -10px rgba(15, 23, 42, 0.3);
}
.gs-confirm-eyebrow[b-k11qooro9n] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-red);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.gs-confirm-eyebrow i[b-k11qooro9n] { font-size: 12px; }
.gs-confirm-body-title[b-k11qooro9n] {
    font-size: 16px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 6px 0 0;
    line-height: 1.4;
}
.gs-confirm-body-sub[b-k11qooro9n] {
    font-size: 12px;
    color: var(--ec-sub);
    margin: 8px 0 0;
    line-height: 1.55;
}
.gs-confirm-actions[b-k11qooro9n] {
    display: flex;
    gap: 8px;
    margin-top: 18px;
    justify-content: flex-end;
}
.gs-confirm-delete[b-k11qooro9n] {
    background: var(--ec-red);
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 9px 16px;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.gs-confirm-delete:hover:not(:disabled)[b-k11qooro9n] { background: #b91c1c; }
.gs-confirm-delete:disabled[b-k11qooro9n] { opacity: 0.7; cursor: not-allowed; }
/* /Components/Pages/Homework/HomeworkPage.razor.rz.scp.css */
/* Admin Homework — transcribed from prototype AWHomework
   (EduConnect All Roles.html lines 29692-29922). */

.awhw-page[b-jjoxyz2qdy] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Banner / loading / empty ───────────────────────────────────── */
.awhw-banner[b-jjoxyz2qdy] {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 13px; font-weight: 600;
}
.awhw-banner-error[b-jjoxyz2qdy] {
    background: color-mix(in srgb, var(--ec-red) 8%, transparent);
    color: var(--ec-red);
    border: 1px solid color-mix(in srgb, var(--ec-red) 18%, transparent);
}
.awhw-banner-close[b-jjoxyz2qdy] {
    margin-left: auto;
    background: none; border: none; cursor: pointer;
    color: inherit; font-size: 16px; padding: 0; line-height: 1;
}

.awhw-loading[b-jjoxyz2qdy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px 24px;
    color: var(--ec-muted);
    gap: 14px;
}
.awhw-spinner[b-jjoxyz2qdy] {
    width: 38px; height: 38px;
    border: 3px solid var(--ec-border-soft);
    border-top-color: var(--ec-blue);
    border-radius: 50%;
    animation: awhw-spin-b-jjoxyz2qdy 0.75s linear infinite;
}
@keyframes awhw-spin-b-jjoxyz2qdy { to { transform: rotate(360deg); } }

.awhw-empty[b-jjoxyz2qdy] {
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--ec-muted);
    text-align: center;
}
.awhw-empty-icon[b-jjoxyz2qdy] { font-size: 30px; opacity: 0.4; color: var(--ec-blue); }
.awhw-empty-title[b-jjoxyz2qdy] { font-size: 13px; font-weight: 800; color: var(--ec-text); margin: 0; }
.awhw-empty-sub[b-jjoxyz2qdy]   { font-size: 11.5px; color: var(--ec-muted); margin: 0; }

/* ── KPIs ──────────────────────────────────────────────────────── */
.awhw-kpis[b-jjoxyz2qdy] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}
.awhw-kpis[b-jjoxyz2qdy]  .ec-kpi-value {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 1180px) { .awhw-kpis[b-jjoxyz2qdy] { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .awhw-kpis[b-jjoxyz2qdy] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .awhw-kpis[b-jjoxyz2qdy] { grid-template-columns: 1fr; } }

/* ── Workload alert banner ─────────────────────────────────────── */
.awhw-workload[b-jjoxyz2qdy] {
    background: var(--ec-amber-lt);
    border: 1px solid #fde68a;
    border-radius: 11px;
    padding: 12px 16px;
}
.awhw-workload-title[b-jjoxyz2qdy] {
    font-size: 12.5px;
    font-weight: 800;
    color: #92400e;
    letter-spacing: 0.04em;
    margin: 0 0 6px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.awhw-workload-title i[b-jjoxyz2qdy] { color: #b45309; font-size: 13px; }
.awhw-workload-sub[b-jjoxyz2qdy] {
    font-size: 11.5px;
    color: var(--ec-sub);
    margin: 0 0 9px;
    line-height: 1.5;
}
.awhw-workload-chips[b-jjoxyz2qdy] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.awhw-workload-chip[b-jjoxyz2qdy] {
    padding: 4px 10px;
    background: #fff;
    border: 1px solid #fde68a;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: #92400e;
    cursor: pointer;
    font-family: inherit;
}
.awhw-workload-chip:hover[b-jjoxyz2qdy] { background: var(--ec-amber-lt); }
.awhw-workload-due[b-jjoxyz2qdy] {
    color: var(--ec-amber);
    font-weight: 800;
}

/* ── Card shell + toolbar ──────────────────────────────────────── */
.awhw-card[b-jjoxyz2qdy] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 12px;
    overflow: hidden;
}
.awhw-toolbar[b-jjoxyz2qdy] {
    padding: 12px 18px;
    border-bottom: 1px solid var(--ec-border);
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
/* Icon + input share one rounded shell — flex layout centres naturally, no
   absolute-positioning math. Focus state lifts onto the wrapper. */
.awhw-search[b-jjoxyz2qdy] {
    flex: 1;
    min-width: 200px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    background: var(--ec-bg);
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.awhw-search:focus-within[b-jjoxyz2qdy] {
    border-color: var(--ec-purple);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ec-purple) 18%, transparent);
}
.awhw-search > svg[b-jjoxyz2qdy] { flex-shrink: 0; color: var(--ec-muted); }
.awhw-search-input[b-jjoxyz2qdy] {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    padding: 8px 0;
    font-size: 13px;
    font-family: inherit;
    color: var(--ec-text);
    outline: none;
}
.awhw-search-input[b-jjoxyz2qdy]::placeholder { color: var(--ec-muted); }

.awhw-select[b-jjoxyz2qdy] {
    padding: 8px 12px;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ec-sub);
    font-family: inherit;
    background: #fff;
    outline: none;
    cursor: pointer;
}
.awhw-select:focus[b-jjoxyz2qdy] {
    border-color: var(--ec-purple);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ec-purple) 18%, transparent);
}

/* ── Table ─────────────────────────────────────────────────────── */
.awhw-thead[b-jjoxyz2qdy] {
    display: grid;
    grid-template-columns: 2.2fr 1.1fr 1fr 1fr 1.4fr 90px 110px;
    padding: 10px 18px;
    background: var(--ec-bg);
    font-size: 10px;
    font-weight: 700;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    gap: 8px;
}
.awhw-row[b-jjoxyz2qdy] {
    display: grid;
    grid-template-columns: 2.2fr 1.1fr 1fr 1fr 1.4fr 90px 110px;
    padding: 12px 18px;
    border-top: 1px solid var(--ec-border-soft);
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background 0.12s;
}
.awhw-row:hover[b-jjoxyz2qdy] { background: color-mix(in srgb, var(--ec-bg) 50%, transparent); }

.awhw-cell[b-jjoxyz2qdy] { min-width: 0; }
.awhw-cell-title[b-jjoxyz2qdy] {
    min-width: 0;
    border-left: 3px solid var(--ec-blue);
    padding-left: 9px;
}
.awhw-row-title[b-jjoxyz2qdy] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ec-text);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.awhw-row-sub[b-jjoxyz2qdy] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 2px 0 0;
}

.awhw-row-class[b-jjoxyz2qdy] {
    font-size: 12px;
    font-weight: 700;
    color: var(--ec-text);
}
.awhw-row-teacher[b-jjoxyz2qdy] {
    font-size: 11.5px;
    color: var(--ec-sub);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.awhw-row-due[b-jjoxyz2qdy] { min-width: 0; }
.awhw-due-date[b-jjoxyz2qdy] {
    font-size: 11.5px;
    color: var(--ec-sub);
    font-weight: 600;
    margin: 0;
}
.awhw-due-date.is-overdue[b-jjoxyz2qdy] { color: var(--ec-red); font-weight: 800; }
.awhw-due-date.is-soon[b-jjoxyz2qdy]    { color: var(--ec-amber); font-weight: 800; }

.awhw-tag[b-jjoxyz2qdy] {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin: 2px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.awhw-tag-red[b-jjoxyz2qdy]   { color: var(--ec-red); }
.awhw-tag-amber[b-jjoxyz2qdy] { color: var(--ec-amber); }

.awhw-row-sub-cell[b-jjoxyz2qdy] { min-width: 0; }
.awhw-progress[b-jjoxyz2qdy] {
    display: flex;
    align-items: center;
    gap: 6px;
}
.awhw-progress-bar[b-jjoxyz2qdy] {
    flex: 1;
    height: 6px;
    background: var(--ec-bg);
    border-radius: 3px;
    overflow: hidden;
}
.awhw-progress-fill[b-jjoxyz2qdy] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
}
.awhw-progress-text[b-jjoxyz2qdy] {
    font-size: 11px;
    color: var(--ec-sub);
    font-weight: 700;
    min-width: 42px;
    text-align: right;
}
.awhw-graded[b-jjoxyz2qdy] {
    font-size: 9.5px;
    color: var(--ec-purple);
    font-weight: 700;
    margin: 2px 0 0;
}

/* Pills */
.awhw-pill[b-jjoxyz2qdy] {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    justify-self: start;
}
.awhw-pill--green[b-jjoxyz2qdy]  { background: var(--ec-green-lt);  color: var(--ec-green); }
.awhw-pill--amber[b-jjoxyz2qdy]  { background: var(--ec-amber-lt);  color: var(--ec-amber); }
.awhw-pill--purple[b-jjoxyz2qdy] { background: var(--ec-purple-lt); color: var(--ec-purple); }
.awhw-pill--blue[b-jjoxyz2qdy]   { background: var(--ec-blue-lt);   color: var(--ec-blue); }
.awhw-pill--muted[b-jjoxyz2qdy]  { background: var(--ec-bg);        color: var(--ec-muted); }

/* ── Slide-over (drill-down) ───────────────────────────────────── */
.awhw-overlay[b-jjoxyz2qdy] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 1080;
    display: flex;
    justify-content: flex-end;
    animation: awhw-overlay-in-b-jjoxyz2qdy 0.15s ease;
}
@keyframes awhw-overlay-in-b-jjoxyz2qdy { from { background: rgba(15, 23, 42, 0); } }

.awhw-sheet[b-jjoxyz2qdy] {
    width: min(620px, 95vw);
    height: 100%;
    background: #fff;
    box-shadow: -12px 0 40px rgba(13, 23, 51, 0.16);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: awhw-sheet-in-b-jjoxyz2qdy 0.2s ease;
}
@keyframes awhw-sheet-in-b-jjoxyz2qdy {
    from { transform: translateX(30px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

.awhw-sheet-hdr[b-jjoxyz2qdy] {
    padding: 20px 26px 16px;
    border-bottom: 1px solid var(--ec-border);
    position: relative;
}
.awhw-sheet-close[b-jjoxyz2qdy] {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--ec-border);
    cursor: pointer;
    font-size: 15px;
    color: var(--ec-sub);
    font-family: inherit;
    line-height: 1;
}
.awhw-sheet-close:hover[b-jjoxyz2qdy] { background: var(--ec-bg); }
.awhw-sheet-eyebrow[b-jjoxyz2qdy] {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
}
.awhw-sheet-title[b-jjoxyz2qdy] {
    font-size: 17px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 5px 30px 0 0;
    line-height: 1.3;
}
.awhw-sheet-desc[b-jjoxyz2qdy] {
    font-size: 12px;
    color: var(--ec-sub);
    margin: 5px 0 0;
    line-height: 1.55;
    white-space: pre-wrap;
}
.awhw-sheet-pills[b-jjoxyz2qdy] {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.awhw-sheet-body[b-jjoxyz2qdy] {
    flex: 1;
    overflow-y: auto;
    padding: 16px 26px 26px;
}

.awhw-meta-grid[b-jjoxyz2qdy] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}
.awhw-meta-label[b-jjoxyz2qdy] {
    font-size: 10px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
}
.awhw-meta-value[b-jjoxyz2qdy] {
    font-size: 12px;
    color: var(--ec-text);
    margin: 2px 0 0;
    font-weight: 600;
}

.awhw-roll[b-jjoxyz2qdy] {
    background: var(--ec-bg);
    border: 1px solid var(--ec-border-soft);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
}
.awhw-roll-label[b-jjoxyz2qdy] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 7px;
}
.awhw-roll-bar-row[b-jjoxyz2qdy] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.awhw-roll-bar[b-jjoxyz2qdy] {
    flex: 1;
    height: 10px;
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
}
.awhw-roll-fill[b-jjoxyz2qdy] {
    height: 100%;
    border-radius: 5px;
    transition: width 0.3s;
}
.awhw-roll-num[b-jjoxyz2qdy] {
    font-size: 12px;
    font-weight: 800;
    color: var(--ec-text);
    min-width: 50px;
    text-align: right;
}
.awhw-roll-sub[b-jjoxyz2qdy] {
    font-size: 11px;
    color: var(--ec-sub);
    margin: 0;
}

.awhw-sec[b-jjoxyz2qdy] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 7px;
}
.awhw-help-muted[b-jjoxyz2qdy] {
    font-size: 12px;
    color: var(--ec-muted);
    font-style: italic;
    padding: 8px 0;
    margin: 0;
}

.awhw-sub-list[b-jjoxyz2qdy] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.awhw-sub-row[b-jjoxyz2qdy] {
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--ec-border-soft);
    border-radius: 9px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.awhw-sub-avatar[b-jjoxyz2qdy] {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--ec-blue-gh);
    color: var(--ec-blue);
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.awhw-sub-body[b-jjoxyz2qdy] { flex: 1; min-width: 0; }
.awhw-sub-name[b-jjoxyz2qdy] {
    font-size: 12px;
    font-weight: 700;
    color: var(--ec-text);
    margin: 0;
}
.awhw-sub-meta[b-jjoxyz2qdy] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 0;
}
.awhw-sub-late[b-jjoxyz2qdy] {
    color: var(--ec-red);
    font-weight: 800;
    letter-spacing: 0.04em;
}

.awhw-actions[b-jjoxyz2qdy] {
    display: flex;
    gap: 7px;
    padding-top: 14px;
    margin-top: 8px;
    border-top: 1px solid var(--ec-border-soft);
}
.awhw-btn[b-jjoxyz2qdy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid var(--ec-border);
    background: #fff;
}
.awhw-btn:disabled[b-jjoxyz2qdy] { opacity: 0.6; cursor: not-allowed; }
.awhw-btn-ghost[b-jjoxyz2qdy] { color: var(--ec-sub); flex: 1; justify-content: center; }
.awhw-btn-ghost:hover:not(:disabled)[b-jjoxyz2qdy] { background: var(--ec-bg); }
.awhw-btn-ghost-danger[b-jjoxyz2qdy] { color: var(--ec-red); }
.awhw-btn-ghost-danger:hover:not(:disabled)[b-jjoxyz2qdy] {
    background: color-mix(in srgb, var(--ec-red) 8%, white);
    border-color: color-mix(in srgb, var(--ec-red) 35%, var(--ec-border));
}

/* ── Responsive squeeze ────────────────────────────────────────── */
@media (max-width: 1100px) {
    .awhw-thead[b-jjoxyz2qdy], .awhw-row[b-jjoxyz2qdy] {
        grid-template-columns: 2fr 1fr 1fr 1fr 110px;
    }
    .awhw-thead > :nth-child(3)[b-jjoxyz2qdy],
    .awhw-row > .awhw-row-teacher[b-jjoxyz2qdy],
    .awhw-thead > :nth-child(6)[b-jjoxyz2qdy],
    .awhw-row > .awhw-pill--blue:not(:last-child)[b-jjoxyz2qdy] {
        display: none;
    }
}
/* /Components/Pages/Institutions/InstitutionSetup.razor.rz.scp.css */
/* InstitutionSetup — customer-wide setup · institution detail.
   Source: prototype EduConnect All Roles.html lines 17287-17716
   (AWInstitutionSetup). Class prefix `is-` (institution setup). */

.is-page[b-5b2v0bct9q] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Breadcrumb — prototype 17344-17350 ──────────────────────────────── */
.is-breadcrumb[b-5b2v0bct9q] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.is-back-btn[b-5b2v0bct9q] {
    padding: 7px 13px;
    background: var(--ec-panel);
    color: var(--ec-sub);
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
}
.is-back-btn:hover[b-5b2v0bct9q] { background: var(--ec-bg); color: var(--ec-text); }
.is-back-btn i[b-5b2v0bct9q] { font-size: 12px; }

.is-breadcrumb-name[b-5b2v0bct9q] {
    font-size: 11.5px;
    color: var(--ec-muted);
    font-weight: 600;
}

/* Save-state pill — lives inline in the breadcrumb. Three colour variants:
   amber for unsaved edits, blue for a freshly stub-created institution,
   neutral grey for the all-saved baseline. */
.is-breadcrumb-state[b-5b2v0bct9q] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 4px 9px;
    border-radius: 999px;
    line-height: 1;
    margin-left: 4px;
}
.is-breadcrumb-state i[b-5b2v0bct9q] { font-size: 10px; line-height: 1; }
.is-breadcrumb-state.is-hero-state-clean[b-5b2v0bct9q] {
    background: var(--ec-bg);
    color: var(--ec-muted);
    border: 1px solid var(--ec-border);
}
.is-breadcrumb-state.is-hero-state-dirty[b-5b2v0bct9q] {
    background: rgba(217, 119, 6, 0.12);
    color: var(--ec-amber);
    border: 1px solid rgba(217, 119, 6, 0.28);
}
.is-breadcrumb-state.is-hero-state-new[b-5b2v0bct9q] {
    background: rgba(37, 99, 235, 0.1);
    color: var(--ec-blue);
    border: 1px solid rgba(37, 99, 235, 0.25);
}

/* ── Loading / empty ─────────────────────────────────────────────────── */
.is-loading[b-5b2v0bct9q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 5rem 2rem;
    color: var(--ec-muted);
}
.is-spinner[b-5b2v0bct9q] {
    width: 36px;
    height: 36px;
    border: 3px solid var(--ec-border);
    border-top-color: var(--ec-blue);
    border-radius: 50%;
    animation: is-spin-b-5b2v0bct9q 0.75s linear infinite;
}
.is-spinner-sm[b-5b2v0bct9q] {
    width: 14px;
    height: 14px;
    border-width: 2px;
    border-color: rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
}
@keyframes is-spin-b-5b2v0bct9q { to { transform: rotate(360deg); } }

.is-empty[b-5b2v0bct9q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 5rem 2rem;
    background: var(--ec-panel);
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    color: var(--ec-muted);
    text-align: center;
}
.is-empty-icon[b-5b2v0bct9q] { font-size: 42px; opacity: 0.35; }
.is-empty h3[b-5b2v0bct9q] { font-size: 17px; font-weight: 800; color: var(--ec-text); margin: 0; }
.is-empty p[b-5b2v0bct9q]  { font-size: 13px; margin: 0; }

.is-banner-error[b-5b2v0bct9q] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 600;
    background: var(--ec-red-lt);
    color: var(--ec-red);
}

/* ── Hero strip — prototype 17352-17368 ──────────────────────────────── */
.is-hero[b-5b2v0bct9q] {
    position: relative;
    overflow: hidden;
    background: linear-gradient(120deg, var(--ec-blue-dk), var(--ec-blue) 70%, var(--ec-teal));
    color: #fff;
    border-radius: 14px;
    padding: 20px 24px;
    margin-bottom: 4px;
}

.is-hero-circle[b-5b2v0bct9q] {
    position: absolute;
    right: -50px;
    top: -50px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.is-hero-body[b-5b2v0bct9q] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.is-hero-icon[b-5b2v0bct9q] {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
}
.is-hero-icon img[b-5b2v0bct9q] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 12px;
}
.is-hero-icon i[b-5b2v0bct9q] { font-size: 44px; }
.is-hero-icon .is-hero-svg[b-5b2v0bct9q] { color: #fff; }
.is-hero-emoji[b-5b2v0bct9q] { font-size: 48px; line-height: 1; }

.is-hero-text[b-5b2v0bct9q] {
    flex: 1 1 280px;
    min-width: 0;
}

.is-hero-eyebrow[b-5b2v0bct9q] {
    font-size: 10.5px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0;
}

.is-hero-title[b-5b2v0bct9q] {
    font-size: 22px;
    font-weight: 800;
    margin: 4px 0 0;
    letter-spacing: -0.01em;
}

.is-hero-sub[b-5b2v0bct9q] {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.85);
    margin: 5px 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}
.is-hero-dot[b-5b2v0bct9q] { opacity: 0.75; }

/* Save-state chip — top-right of the hero. Mirrors the prototype's
   "all saved" / "unsaved changes" / "new institution" indicator. The
   colour scheme matches the action-bar at the bottom so the two stay
   visually coherent. */
/* `.is-hero-state-*` modifier classes are reused by `.is-breadcrumb-state`
   for its colour variants — see the `is-breadcrumb-state.*` rules above. */

.is-hero-stages[b-5b2v0bct9q] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.is-hero-stage[b-5b2v0bct9q] {
    font-size: 10.5px;
    font-weight: 800;
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    padding: 4px 9px;
    border-radius: 6px;
    letter-spacing: 0.06em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.is-hero-stage i[b-5b2v0bct9q] { font-size: 11px; }

/* ── Tabs — prototype 17370-17381 ────────────────────────────────────── */
.is-tabs[b-5b2v0bct9q] {
    display: flex;
    gap: 0;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--ec-border);
    overflow-x: auto;
    /* overflow-x:auto alone makes overflow-y compute to 'auto' too, so any 1px
       vertical overflow (tab focus ring / soon-badge) spawned a phantom vertical
       scrollbar on the right of the strip. Pin the cross-axis to hidden. */
    overflow-y: hidden;
}

.is-tab[b-5b2v0bct9q] {
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--ec-sub);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    margin-bottom: -1px;
}
.is-tab:hover:not(:disabled)[b-5b2v0bct9q] { color: var(--ec-text); }
.is-tab.is-active[b-5b2v0bct9q] {
    color: var(--ec-blue);
    border-bottom-color: var(--ec-blue);
}
.is-tab:disabled[b-5b2v0bct9q] {
    cursor: not-allowed;
    opacity: 0.65;
}
.is-tab i[b-5b2v0bct9q] { font-size: 14px; }

.is-tab-soon[b-5b2v0bct9q] {
    font-size: 9px;
    font-weight: 800;
    background: var(--ec-amber-lt);
    color: var(--ec-amber);
    padding: 1px 5px;
    border-radius: 4px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ── Save bar (dirty state) ──────────────────────────────────────────── */
.is-savebar[b-5b2v0bct9q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: var(--ec-amber-lt);
    border: 1px solid color-mix(in srgb, var(--ec-amber) 35%, transparent);
    border-radius: 11px;
    flex-wrap: wrap;
}
.is-savebar-error[b-5b2v0bct9q] {
    background: var(--ec-red-lt);
    border-color: color-mix(in srgb, var(--ec-red) 35%, transparent);
}

.is-savebar-left[b-5b2v0bct9q] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ec-amber);
}
.is-savebar-error .is-savebar-left[b-5b2v0bct9q] { color: var(--ec-red); }
.is-savebar-left i[b-5b2v0bct9q] { font-size: 13px; }

.is-savebar-actions[b-5b2v0bct9q] {
    display: flex;
    gap: 8px;
}

/* ── Buttons ────────────────────────────────────────────────────────── */
.is-btn-primary[b-5b2v0bct9q] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    background: var(--ec-blue);
    border: none;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
}
.is-btn-primary:hover:not(:disabled)[b-5b2v0bct9q] { background: var(--ec-blue-dk); }
.is-btn-primary:disabled[b-5b2v0bct9q] { opacity: 0.65; cursor: not-allowed; }
.is-btn-primary i[b-5b2v0bct9q] { font-size: 12px; }

.is-btn-ghost[b-5b2v0bct9q] {
    padding: 9px 14px;
    background: var(--ec-panel);
    color: var(--ec-sub);
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}
.is-btn-ghost:hover:not(:disabled)[b-5b2v0bct9q] { background: var(--ec-bg); color: var(--ec-text); }
.is-btn-ghost:disabled[b-5b2v0bct9q] { opacity: 0.6; cursor: not-allowed; }

/* ── Tab content layout — prototype 17385 ────────────────────────────── */
.is-tab-grid[b-5b2v0bct9q] {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 16px;
    align-items: flex-start;
}

.is-card[b-5b2v0bct9q] {
    background: var(--ec-panel);
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    padding: 18px 22px;
}

.is-card-title[b-5b2v0bct9q] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0 0 14px;
}
.is-card-title-sep[b-5b2v0bct9q] { margin-top: 22px; margin-bottom: 12px; }

.is-card-sub[b-5b2v0bct9q] {
    font-size: 11.5px;
    color: var(--ec-muted);
    line-height: 1.5;
    margin: -10px 0 14px;
}

.is-side-stack[b-5b2v0bct9q] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Fields ─────────────────────────────────────────────────────────── */
.is-field-stack[b-5b2v0bct9q] {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.is-field-label[b-5b2v0bct9q] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 6px;
}

.is-field-hint[b-5b2v0bct9q] {
    font-size: 10.5px;
    color: var(--ec-muted);
    font-style: italic;
    margin: 4px 0 0;
}

.is-input[b-5b2v0bct9q] {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    font-size: 12.5px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    background: var(--ec-panel);
    color: var(--ec-text);
}
.is-input:focus[b-5b2v0bct9q] { border-color: var(--ec-blue); }
.is-input-lg[b-5b2v0bct9q] {
    padding: 10px 12px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 700;
}

.is-contact-grid[b-5b2v0bct9q] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
}

/* ── Logo emoji picker — prototype 17400-17406 ───────────────────────── */
.is-logo-grid[b-5b2v0bct9q] {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.is-logo-swatch[b-5b2v0bct9q] {
    width: 42px;
    height: 42px;
    border-radius: 9px;
    background: var(--ec-panel);
    border: 1.5px solid var(--ec-border);
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.is-logo-swatch:hover[b-5b2v0bct9q] { border-color: var(--ec-faint); }
.is-logo-swatch.is-active[b-5b2v0bct9q] {
    background: var(--ec-blue-lt);
    border-color: var(--ec-blue);
}
.is-logo-swatch-svg[b-5b2v0bct9q],
.is-logo-swatch-icon[b-5b2v0bct9q] {
    color: var(--ec-sub);
    font-size: 22px;
    line-height: 1;
}
.is-logo-swatch.is-active .is-logo-swatch-svg[b-5b2v0bct9q],
.is-logo-swatch.is-active .is-logo-swatch-icon[b-5b2v0bct9q] {
    color: var(--ec-blue);
}

/* Hero icon — Bootstrap Icons variant sized to match the SVG mortarboard. */
.is-hero-bi[b-5b2v0bct9q] {
    font-size: 44px;
    color: #fff;
    line-height: 1;
}

/* ── Toggle row (locale / currency buttons) ──────────────────────────── */
.is-toggle-row[b-5b2v0bct9q] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.is-toggle[b-5b2v0bct9q] {
    padding: 7px 12px;
    border-radius: 8px;
    border: 1.5px solid var(--ec-border);
    background: var(--ec-panel);
    color: var(--ec-sub);
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
}
.is-toggle:hover:not(.is-active)[b-5b2v0bct9q] { border-color: var(--ec-faint); }
.is-toggle.is-active[b-5b2v0bct9q] {
    background: var(--ec-blue-lt);
    border-color: var(--ec-blue);
    color: var(--ec-blue);
}
.is-toggle-mono[b-5b2v0bct9q] {
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    padding: 7px 14px;
}

/* ── At a glance — prototype 17454-17468 ─────────────────────────────── */
.is-glance-stack[b-5b2v0bct9q] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.is-glance-row[b-5b2v0bct9q] {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 10px;
}

.is-glance-icon[b-5b2v0bct9q] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
}

.is-glance-text[b-5b2v0bct9q] { flex: 1; min-width: 0; }

.is-glance-label[b-5b2v0bct9q] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
}

.is-glance-sub[b-5b2v0bct9q] {
    font-size: 11.5px;
    color: var(--ec-sub);
    margin: 1px 0 0;
}

.is-glance-value[b-5b2v0bct9q] {
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    margin: 0;
}

/* ── Defaults stack ──────────────────────────────────────────────────── */
.is-defaults-stack[b-5b2v0bct9q] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Branding tab — prototype 17539-17716 ────────────────────────────── */
.is-branding-grid[b-5b2v0bct9q] {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 16px;
    align-items: flex-start;
}

.is-branding-left[b-5b2v0bct9q] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.is-branding-right[b-5b2v0bct9q] {
    position: sticky;
    top: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.is-branding-error[b-5b2v0bct9q] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--ec-red-lt);
    color: var(--ec-red);
    border-radius: 11px;
    font-size: 12.5px;
    font-weight: 700;
}
.is-branding-error i[b-5b2v0bct9q] { font-size: 13px; }

.is-branding-card-head[b-5b2v0bct9q] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.is-branding-card-head .is-card-title[b-5b2v0bct9q] { margin-bottom: 0; }

.is-branding-card-hint[b-5b2v0bct9q] {
    font-size: 10.5px;
    color: var(--ec-muted);
    font-style: italic;
    margin: 0;
}

.is-branding-blurb[b-5b2v0bct9q] {
    font-size: 11.5px;
    color: var(--ec-sub);
    line-height: 1.55;
    margin: 0 0 14px;
}

/* ── Logo upload ─────────────────────────────────────────────────────── */
.is-logo-upload[b-5b2v0bct9q] {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}

.is-logo-preview[b-5b2v0bct9q] {
    width: 104px;
    height: 104px;
    border-radius: 14px;
    border: 1.5px dashed var(--ec-border);
    background: var(--ec-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    color: var(--ec-sub);
}
.is-logo-preview.has-img[b-5b2v0bct9q] {
    border-color: transparent;
    background: #fff;
}
.is-logo-preview img[b-5b2v0bct9q] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.is-logo-preview-svg[b-5b2v0bct9q] { color: var(--ec-sub); }

.is-logo-upload-actions[b-5b2v0bct9q] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.is-btn-file[b-5b2v0bct9q] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
}
.is-btn-file[b-5b2v0bct9q]  input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.is-btn-ghost-danger[b-5b2v0bct9q] {
    color: var(--ec-red);
}
.is-btn-ghost-danger:hover:not(:disabled)[b-5b2v0bct9q] {
    background: var(--ec-red-lt);
    color: var(--ec-red);
}

.is-branding-fallback[b-5b2v0bct9q] {
    font-size: 11px;
    color: var(--ec-muted);
    font-style: italic;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
}
.is-branding-fallback svg[b-5b2v0bct9q] { color: var(--ec-muted); }

/* ── Banner upload ───────────────────────────────────────────────────── */
.is-banner-preview[b-5b2v0bct9q] {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 1;
    border-radius: 11px;
    overflow: hidden;
    border: 1.5px dashed var(--ec-border);
    background: var(--ec-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 11px;
}
.is-banner-preview.has-img[b-5b2v0bct9q] {
    border-color: transparent;
}
.is-banner-preview img[b-5b2v0bct9q] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.is-banner-empty[b-5b2v0bct9q] {
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
}
.is-banner-empty-title[b-5b2v0bct9q] {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0;
}
.is-banner-empty-sub[b-5b2v0bct9q] {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.75);
    margin: 3px 0 0;
}

.is-banner-actions[b-5b2v0bct9q] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Accent picker ───────────────────────────────────────────────────── */
.is-accent-grid[b-5b2v0bct9q] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}

.is-accent-swatch[b-5b2v0bct9q] {
    padding: 10px 8px;
    border-radius: 10px;
    background: var(--ec-panel);
    border: 1.5px solid var(--ec-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.12s, background 0.12s;
}
.is-accent-swatch:hover:not(.is-active)[b-5b2v0bct9q] { border-color: var(--ec-faint); }

.is-accent-strip[b-5b2v0bct9q] {
    width: 100%;
    height: 18px;
    border-radius: 6px;
}

.is-accent-name[b-5b2v0bct9q] {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--ec-sub);
    text-align: center;
}

.is-accent-custom[b-5b2v0bct9q] {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.is-accent-custom-label[b-5b2v0bct9q] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.is-accent-color[b-5b2v0bct9q] {
    width: 38px;
    height: 34px;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    padding: 0;
    cursor: pointer;
    background: var(--ec-panel);
}

.is-accent-hex[b-5b2v0bct9q] {
    width: 110px;
    padding: 8px 10px;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    font-size: 12px;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-weight: 700;
    outline: none;
    box-sizing: border-box;
    text-transform: uppercase;
    color: var(--ec-text);
    background: var(--ec-panel);
}
.is-accent-hex:focus[b-5b2v0bct9q] { border-color: var(--ec-blue); }

.is-accent-custom-hint[b-5b2v0bct9q] {
    font-size: 10.5px;
    color: var(--ec-muted);
    font-style: italic;
}

/* ── Live preview column ─────────────────────────────────────────────── */
.is-preview-card[b-5b2v0bct9q] {
    background: var(--ec-bg);
    padding: 16px 18px;
}

.is-preview-eyebrow[b-5b2v0bct9q] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 11px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.is-preview-eyebrow i[b-5b2v0bct9q] { font-size: 12px; }

.is-preview-label[b-5b2v0bct9q] {
    font-size: 10px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 6px;
}

/* sidebar header preview */
.is-preview-sb[b-5b2v0bct9q] {
    background: var(--ec-panel);
    border: 1px solid var(--ec-border);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.is-preview-sb-icon[b-5b2v0bct9q] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.is-preview-sb-icon img[b-5b2v0bct9q] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.is-preview-sb-text[b-5b2v0bct9q] { min-width: 0; flex: 1; }

.is-preview-sb-name[b-5b2v0bct9q] {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--ec-text);
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.is-preview-sb-portal[b-5b2v0bct9q] {
    font-size: 10px;
    margin: 3px 0 0;
    font-weight: 700;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 5px;
}

.is-preview-sb-dot[b-5b2v0bct9q] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

/* mobile top bar preview */
.is-preview-mobile[b-5b2v0bct9q] {
    border-radius: 11px;
    overflow: hidden;
    border: 1px solid var(--ec-border);
    margin-bottom: 14px;
    background: var(--ec-panel);
}

.is-preview-mobile-strip[b-5b2v0bct9q] { height: 2px; }

.is-preview-mobile-body[b-5b2v0bct9q] {
    height: 46px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.is-preview-mobile-menu[b-5b2v0bct9q] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--ec-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--ec-sub);
    flex-shrink: 0;
}

.is-preview-mobile-card[b-5b2v0bct9q] {
    flex: 1;
    min-width: 0;
    height: 34px;
    border-radius: 9px;
    background: var(--ec-bg);
    border: 1px solid var(--ec-border);
    padding: 0 6px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.is-preview-mobile-mark[b-5b2v0bct9q] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.is-preview-mobile-mark img[b-5b2v0bct9q] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.is-preview-mobile-text[b-5b2v0bct9q] { min-width: 0; flex: 1; }

.is-preview-mobile-name[b-5b2v0bct9q] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-text);
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.is-preview-mobile-sub[b-5b2v0bct9q] {
    font-size: 8.5px;
    color: var(--ec-muted);
    margin: 1px 0 0;
}

.is-preview-mobile-spacer[b-5b2v0bct9q] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--ec-bg);
    flex-shrink: 0;
}

/* welcome banner preview */
.is-preview-banner[b-5b2v0bct9q] {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 4 / 1;
}
.is-preview-banner img[b-5b2v0bct9q] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.is-preview-banner-scrim[b-5b2v0bct9q] {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(13, 23, 51, 0.55), transparent 60%);
}

.is-preview-banner-text[b-5b2v0bct9q] {
    position: relative;
    z-index: 1;
    padding: 0 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.is-preview-banner-eyebrow[b-5b2v0bct9q] {
    font-size: 9.5px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0;
}

.is-preview-banner-title[b-5b2v0bct9q] {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.01em;
    margin: 2px 0 0;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.is-where-card[b-5b2v0bct9q] {
    background: var(--ec-panel);
    border: 1px solid color-mix(in srgb, var(--ec-amber) 35%, transparent);
    border-radius: 12px;
    padding: 13px 15px;
    font-size: 11.5px;
    color: var(--ec-sub);
    line-height: 1.55;
}

.is-where-eyebrow[b-5b2v0bct9q] {
    color: var(--ec-amber);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 5px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.is-where-eyebrow i[b-5b2v0bct9q] { font-size: 12px; }

/* ── Stages & scales tab — prototype 17718-17843 ─────────────────────── */
.is-stages[b-5b2v0bct9q] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.is-stages-tip[b-5b2v0bct9q] {
    padding: 14px 18px;
    background: var(--ec-bg);
    border-radius: 11px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.is-stages-tip i[b-5b2v0bct9q] {
    font-size: 18px;
    color: var(--ec-amber);
    flex-shrink: 0;
}
.is-stages-tip p[b-5b2v0bct9q] {
    font-size: 12px;
    color: var(--ec-sub);
    flex: 1;
    min-width: 240px;
    line-height: 1.5;
    margin: 0;
}

.is-stages-warn[b-5b2v0bct9q] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--ec-amber-lt);
    border: 1px solid color-mix(in srgb, var(--ec-amber) 35%, transparent);
    border-radius: 11px;
    color: var(--ec-sub);
    font-size: 11.5px;
    line-height: 1.5;
    margin: 0;
}
.is-stages-warn i[b-5b2v0bct9q] {
    color: var(--ec-amber);
    font-size: 13px;
    flex-shrink: 0;
}

.is-stage-list[b-5b2v0bct9q] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.is-stage-card[b-5b2v0bct9q] {
    background: var(--ec-panel);
    border: 1px solid var(--ec-border);
    border-left: 5px solid var(--ec-border-soft);
    border-radius: 13px;
    padding: 16px 20px;
}
.is-stage-disabled[b-5b2v0bct9q] { opacity: 0.65; }

.is-stage-head[b-5b2v0bct9q] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}
.is-stage-disabled .is-stage-head[b-5b2v0bct9q] { margin-bottom: 0; }

.is-stage-icon[b-5b2v0bct9q] {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 22px;
}

.is-stage-title[b-5b2v0bct9q] { flex: 1; min-width: 0; }

.is-stage-name-row[b-5b2v0bct9q] {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.is-stage-name[b-5b2v0bct9q] {
    font-size: 16px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}

.is-stage-chip[b-5b2v0bct9q] {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 5px;
    letter-spacing: 0.08em;
}
.is-stage-chip-off[b-5b2v0bct9q] {
    color: var(--ec-muted);
    background: var(--ec-border-soft);
}

.is-stage-desc[b-5b2v0bct9q] {
    font-size: 11.5px;
    color: var(--ec-muted);
    line-height: 1.5;
    margin: 3px 0 0;
}

/* Toggle switch — pure CSS pill + knob */
.is-stage-toggle[b-5b2v0bct9q] {
    width: 48px;
    height: 26px;
    border-radius: 13px;
    background: var(--ec-border-soft);
    border: none;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
    padding: 0;
}
.is-stage-toggle-knob[b-5b2v0bct9q] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: left 0.2s;
}
.is-stage-toggle.is-on .is-stage-toggle-knob[b-5b2v0bct9q] { left: 24px; }

/* Body sections (stage name input, range, scale, cohort) */
.is-stage-section[b-5b2v0bct9q] {
    margin-bottom: 11px;
    padding: 13px 14px;
    background: var(--ec-bg);
    border-radius: 10px;
}
.is-stage-section-flat[b-5b2v0bct9q] {
    background: transparent;
    padding: 0;
    margin-bottom: 11px;
}
.is-stage-section:last-of-type[b-5b2v0bct9q] { margin-bottom: 0; }

.is-stage-section-head[b-5b2v0bct9q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 7px;
}

.is-stage-section-label[b-5b2v0bct9q] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 7px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.is-stage-section-head .is-stage-section-label[b-5b2v0bct9q] { margin-bottom: 0; }
.is-stage-section-label i[b-5b2v0bct9q] { font-size: 12px; }

.is-stage-section-aside[b-5b2v0bct9q] {
    font-size: 10px;
    color: var(--ec-muted);
    font-style: italic;
}

.is-stage-flat-note[b-5b2v0bct9q] {
    font-size: 12px;
    color: var(--ec-muted);
    font-style: italic;
    margin: 0;
}

.is-stage-name-input[b-5b2v0bct9q] {
    max-width: 380px;
    font-weight: 700;
}

/* Range */
.is-stage-range[b-5b2v0bct9q] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.is-stage-range-prefix[b-5b2v0bct9q] {
    font-size: 12px;
    color: var(--ec-sub);
    font-weight: 600;
}
.is-stage-range-input[b-5b2v0bct9q] {
    width: 64px;
    padding: 7px 9px;
    border: 1px solid var(--ec-border);
    border-radius: 7px;
    font-size: 13px;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-weight: 800;
    outline: none;
    text-align: center;
    box-sizing: border-box;
    background: var(--ec-panel);
    color: var(--ec-text);
}
.is-stage-range-input:focus[b-5b2v0bct9q] { border-color: var(--ec-blue); }
.is-stage-range-arrow[b-5b2v0bct9q] {
    font-size: 16px;
    color: var(--ec-muted);
}
.is-stage-range-meta[b-5b2v0bct9q] {
    flex: 1;
    min-width: 120px;
    font-size: 11px;
    color: var(--ec-muted);
    font-style: italic;
    text-align: right;
}
.is-stage-range-meta b[b-5b2v0bct9q] {
    color: var(--ec-text);
    font-style: normal;
}

/* Grade scale picker */
.is-stage-scales[b-5b2v0bct9q] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.is-stage-scale[b-5b2v0bct9q] {
    padding: 10px 12px;
    background: var(--ec-panel);
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    display: flex;
    align-items: center;
    gap: 11px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: border-color 0.12s, background 0.12s;
}
.is-stage-scale:hover:not(.is-picked)[b-5b2v0bct9q] { border-color: var(--ec-faint); }

.is-stage-radio[b-5b2v0bct9q] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--ec-border);
    background: var(--ec-panel);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.is-stage-radio-dot[b-5b2v0bct9q] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
}

.is-stage-scale-text[b-5b2v0bct9q] { flex: 1; min-width: 0; }
.is-stage-scale-label[b-5b2v0bct9q] {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.is-stage-scale-note[b-5b2v0bct9q] {
    font-size: 10.5px;
    color: var(--ec-muted);
    font-style: italic;
    margin: 1px 0 0;
}

.is-stage-scale-samples[b-5b2v0bct9q] {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.is-stage-scale-sample[b-5b2v0bct9q] {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--ec-bg);
    color: var(--ec-muted);
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
}

/* Cohort naming picker */
.is-stage-cohorts[b-5b2v0bct9q] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 6px;
}
.is-stage-cohort[b-5b2v0bct9q] {
    padding: 10px 12px;
    background: var(--ec-panel);
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}
.is-stage-cohort:hover:not(.is-picked)[b-5b2v0bct9q] { border-color: var(--ec-faint); }

.is-stage-cohort-label[b-5b2v0bct9q] {
    font-size: 12px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.is-stage-cohort-example[b-5b2v0bct9q] {
    font-size: 10.5px;
    color: var(--ec-muted);
    font-style: italic;
    margin: 3px 0 0;
}

/* ── Academic year tab — prototype 17846-17947 ───────────────────────── */
.is-year-grid[b-5b2v0bct9q] {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 16px;
    align-items: flex-start;
}
.is-year-left[b-5b2v0bct9q] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.is-year-head[b-5b2v0bct9q] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.is-year-head .is-card-title[b-5b2v0bct9q] { margin-bottom: 0; }

.is-year-aside[b-5b2v0bct9q] {
    font-size: 10.5px;
    color: var(--ec-muted);
    font-style: italic;
    margin: 0;
}
.is-year-aside b[b-5b2v0bct9q] {
    color: var(--ec-blue);
    font-style: normal;
    font-weight: 700;
}

.is-year-loading[b-5b2v0bct9q] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    color: var(--ec-muted);
    font-size: 12px;
}
.is-year-loading .is-spinner-sm[b-5b2v0bct9q] {
    border-color: var(--ec-border);
    border-top-color: var(--ec-blue);
}

.is-year-empty[b-5b2v0bct9q] {
    padding: 18px;
    background: var(--ec-bg);
    border-radius: 10px;
    text-align: center;
    font-size: 12px;
    color: var(--ec-muted);
    font-style: italic;
    margin: 0;
}
.is-year-empty b[b-5b2v0bct9q] {
    color: var(--ec-blue);
    font-style: normal;
    font-weight: 700;
}
.is-year-empty-error[b-5b2v0bct9q] {
    background: var(--ec-red-lt);
    color: var(--ec-red);
    font-style: normal;
}

.is-year-list[b-5b2v0bct9q] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.is-year-row[b-5b2v0bct9q] {
    padding: 12px 14px;
    border-radius: 10px;
    border: 1.5px solid var(--ec-border);
    background: var(--ec-panel);
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 11px;
    align-items: center;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}
.is-year-row:hover:not(.is-picked)[b-5b2v0bct9q] { border-color: var(--ec-faint); }
.is-year-row.is-picked[b-5b2v0bct9q] {
    border-color: var(--ec-blue);
    background: var(--ec-blue-lt);
}

.is-year-row-text[b-5b2v0bct9q] { min-width: 0; }
.is-year-row-name[b-5b2v0bct9q] {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.is-year-row-name.is-picked[b-5b2v0bct9q] { color: var(--ec-blue); }
.is-year-row-meta[b-5b2v0bct9q] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 2px 0 0;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
}

.is-year-status[b-5b2v0bct9q] {
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 5px;
    letter-spacing: 0.08em;
}

.is-year-in-use[b-5b2v0bct9q] {
    font-size: 10px;
    font-weight: 800;
    color: var(--ec-blue);
    letter-spacing: 0.08em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.is-year-in-use i[b-5b2v0bct9q] { font-size: 12px; }

.is-year-bounds[b-5b2v0bct9q] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
    margin-bottom: 14px;
}
.is-year-bound[b-5b2v0bct9q] {
    padding: 13px 16px;
    background: var(--ec-bg);
    border-radius: 11px;
}
.is-year-bound-label[b-5b2v0bct9q] {
    font-size: 9.5px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}
.is-year-bound-value[b-5b2v0bct9q] {
    font-size: 16px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 4px 0 0;
    line-height: 1;
}

.is-year-section-label[b-5b2v0bct9q] {
    font-size: 9.5px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 6px;
}

.is-year-terms[b-5b2v0bct9q] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.is-year-term[b-5b2v0bct9q] {
    padding: 9px 11px;
    background: var(--ec-bg);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 9px;
}
.is-year-term-chip[b-5b2v0bct9q] {
    font-size: 11.5px;
    font-weight: 800;
    color: var(--ec-blue);
    background: var(--ec-blue-lt);
    padding: 2px 8px;
    border-radius: 5px;
    min-width: 62px;
    text-align: center;
}
.is-year-term-dates[b-5b2v0bct9q] {
    font-size: 11px;
    color: var(--ec-sub);
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    margin: 0;
}

/* ── Facilities tab — prototype 17950-17994 ──────────────────────────── */
.is-facilities[b-5b2v0bct9q] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.is-fac-grid[b-5b2v0bct9q] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
}

.is-fac-card[b-5b2v0bct9q] {
    background: var(--ec-panel);
    border: 1px solid var(--ec-border);
    border-left: 4px solid var(--ec-blue);
    border-radius: 12px;
    padding: 15px 18px;
    display: flex;
    flex-direction: column;
}

.is-fac-head[b-5b2v0bct9q] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 11px;
}

.is-fac-icon[b-5b2v0bct9q] {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.is-fac-text[b-5b2v0bct9q] { flex: 1; min-width: 0; }
.is-fac-kind[b-5b2v0bct9q] {
    font-size: 9.5px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    margin: 0;
}
.is-fac-name[b-5b2v0bct9q] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    line-height: 1.3;
    margin: 2px 0 0;
}
.is-fac-address[b-5b2v0bct9q] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 3px 0 0;
}

.is-fac-stages[b-5b2v0bct9q] {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.is-fac-stage[b-5b2v0bct9q] {
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 5px;
    letter-spacing: 0.06em;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.is-fac-stage i[b-5b2v0bct9q] { font-size: 11px; }

.is-fac-foot[b-5b2v0bct9q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 9px;
    border-top: 1px solid var(--ec-border-soft);
    margin-top: auto;
}
.is-fac-stat[b-5b2v0bct9q] {
    font-size: 11.5px;
    color: var(--ec-sub);
    margin: 0;
}
.is-fac-edit[b-5b2v0bct9q] {
    padding: 5px 10px;
    font-size: 11px;
}

.is-fac-add[b-5b2v0bct9q] {
    background: var(--ec-panel);
    border: 2px dashed var(--ec-border);
    border-radius: 12px;
    padding: 30px 18px;
    text-align: center;
    cursor: pointer;
    font-family: inherit;
    color: var(--ec-muted);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: border-color 0.12s, color 0.12s;
}
.is-fac-add:hover[b-5b2v0bct9q] {
    border-color: var(--ec-blue);
    color: var(--ec-blue);
}
.is-fac-add i[b-5b2v0bct9q] { font-size: 16px; }

/* ── Placeholder tabs (slices 3-4) ───────────────────────────────────── */
.is-placeholder[b-5b2v0bct9q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 4rem 2rem;
    background: var(--ec-panel);
    border: 1px dashed var(--ec-border);
    border-radius: 14px;
    color: var(--ec-muted);
    text-align: center;
}
.is-placeholder-icon[b-5b2v0bct9q] { font-size: 38px; opacity: 0.4; color: var(--ec-amber); }
.is-placeholder h3[b-5b2v0bct9q] { font-size: 15px; font-weight: 800; color: var(--ec-text); margin: 0; }
.is-placeholder p[b-5b2v0bct9q]  { font-size: 12.5px; margin: 0; max-width: 460px; line-height: 1.5; }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .is-tab-grid[b-5b2v0bct9q] { grid-template-columns: 1fr; }
    .is-branding-grid[b-5b2v0bct9q] { grid-template-columns: 1fr; }
    .is-branding-right[b-5b2v0bct9q] { position: static; top: auto; }
    .is-year-grid[b-5b2v0bct9q] { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .is-contact-grid[b-5b2v0bct9q] { grid-template-columns: 1fr; }
    .is-hero[b-5b2v0bct9q] { padding: 16px 18px; }
    .is-hero-icon[b-5b2v0bct9q] { width: 48px; height: 48px; font-size: 36px; }
    .is-hero-icon i[b-5b2v0bct9q] { font-size: 32px; }
    .is-hero-emoji[b-5b2v0bct9q] { font-size: 36px; }
    .is-hero-title[b-5b2v0bct9q] { font-size: 19px; }
    .is-accent-grid[b-5b2v0bct9q] { grid-template-columns: repeat(2, 1fr); }
    .is-actionbar[b-5b2v0bct9q] { left: 12px; right: 12px; flex-direction: column; align-items: stretch; }
    .is-actionbar-icon[b-5b2v0bct9q] { align-self: flex-start; }
    .is-actionbar-buttons[b-5b2v0bct9q] { justify-content: flex-end; }
}

/* ── Bottom action bar ────────────────────────────────────────────────
   Fixed at the viewport bottom while the editor is mounted. Floats over
   the page content so users can save / discard from any tab. Width
   accounts for the 248px sidebar; on narrow screens (handled in the
   media query above) it collapses to full-width with stacked rows. */
.is-actionbar[b-5b2v0bct9q] {
    position: fixed;
    bottom: 16px;
    left: calc(248px + 18px);
    right: 18px;
    z-index: 50;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 10px 30px -8px rgba(15, 23, 42, 0.22);
}
.is-actionbar-dirty[b-5b2v0bct9q] {
    border-color: rgba(217, 119, 6, 0.45);
    box-shadow: 0 10px 30px -8px rgba(217, 119, 6, 0.32);
}

/* Yellow pencil/check/plus circle on the left — colour follows the state. */
.is-actionbar-icon[b-5b2v0bct9q] {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(217, 119, 6, 0.12);
    color: var(--ec-amber);
    font-size: 16px;
}
.is-actionbar:not(.is-actionbar-dirty) .is-actionbar-icon[b-5b2v0bct9q] {
    background: var(--ec-bg);
    color: var(--ec-muted);
}

.is-actionbar-msg[b-5b2v0bct9q] {
    flex: 1;
    min-width: 0;
}
.is-actionbar-title[b-5b2v0bct9q] {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--ec-text);
    line-height: 1.3;
}
.is-actionbar-sub[b-5b2v0bct9q] {
    font-size: 12px;
    color: var(--ec-sub);
    line-height: 1.45;
    margin-top: 2px;
}
.is-actionbar-sub b[b-5b2v0bct9q] { color: var(--ec-text); font-weight: 700; }

.is-actionbar-buttons[b-5b2v0bct9q] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    align-items: center;
}

/* Cancel / Close — neutral outline. */
.is-actionbar-cancel[b-5b2v0bct9q] {
    padding: 9px 16px;
    background: #fff;
    color: var(--ec-sub);
    border: 1px solid var(--ec-border);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}
.is-actionbar-cancel:hover:not(:disabled)[b-5b2v0bct9q] { background: var(--ec-bg); color: var(--ec-text); }
.is-actionbar-cancel:disabled[b-5b2v0bct9q]             { opacity: 0.6; cursor: not-allowed; }

/* Discard — red outline (destructive). Trash icon next to the label. */
.is-actionbar-discard[b-5b2v0bct9q] {
    padding: 9px 16px;
    background: #fff;
    color: var(--ec-red);
    border: 1px solid var(--ec-red-lt);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.is-actionbar-discard i[b-5b2v0bct9q] { font-size: 13px; }
.is-actionbar-discard:hover:not(:disabled)[b-5b2v0bct9q] { background: var(--ec-red-lt); border-color: var(--ec-red); }
.is-actionbar-discard:disabled[b-5b2v0bct9q]             { opacity: 0.6; cursor: not-allowed; }

/* Save — primary blue; disabled when there are no edits to commit. */
.is-actionbar-save[b-5b2v0bct9q] {
    padding: 9px 18px;
    background: var(--ec-blue);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 6px 18px -6px rgba(37, 99, 235, 0.5);
}
.is-actionbar-save:hover:not(:disabled)[b-5b2v0bct9q] { background: var(--ec-blue-dk); }
.is-actionbar-save:disabled[b-5b2v0bct9q] {
    background: var(--ec-border-soft);
    color: var(--ec-muted);
    cursor: not-allowed;
    box-shadow: none;
}

/* Discard-confirm dialog — overlay above the sidebar + top bar (both at z-index
   1000) so the whole chrome dims behind the dialog. Matches SecurityModal. */
.is-confirm-backdrop[b-5b2v0bct9q] {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.is-confirm-dialog[b-5b2v0bct9q] {
    background: #fff;
    border-radius: 14px;
    width: min(440px, 100%);
    padding: 22px 24px;
    box-shadow: 0 20px 60px -10px rgba(15, 23, 42, 0.3);
}
.is-confirm-eyebrow[b-5b2v0bct9q] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-amber);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.is-confirm-eyebrow i[b-5b2v0bct9q] { font-size: 12px; }
.is-confirm-body[b-5b2v0bct9q] {
    font-size: 13px;
    color: var(--ec-sub);
    line-height: 1.55;
    margin: 10px 0 0;
}
.is-confirm-actions[b-5b2v0bct9q] {
    display: flex;
    gap: 8px;
    margin-top: 18px;
    justify-content: flex-end;
}

/* Give the page some bottom padding so the fixed action bar never
   overlaps the last row of content. */
.is-page[b-5b2v0bct9q] {
    padding-bottom: 100px;
}

/* ── KG meal-anchor editor ───────────────────────────────────────────── */
.is-meals-card[b-5b2v0bct9q] {
    margin-top: 16px;
}

.is-meals-head[b-5b2v0bct9q] {
    margin-bottom: 12px;
}

.is-meals-title-wrap[b-5b2v0bct9q] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.is-meals-facility-name[b-5b2v0bct9q] {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ec-muted);
    background: var(--ec-bg);
    border: 1px solid var(--ec-border);
    border-radius: 999px;
    padding: 2px 9px;
    margin: 0;
}

.is-meals-loading[b-5b2v0bct9q] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
    font-size: 13px;
    color: var(--ec-muted);
}

.is-spinner-dark[b-5b2v0bct9q] {
    border-color: var(--ec-border);
    border-top-color: var(--ec-blue);
}

.is-meals-table[b-5b2v0bct9q] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.is-meals-thead[b-5b2v0bct9q] {
    display: grid;
    grid-template-columns: 1fr 120px 140px;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--ec-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0 2px 4px;
    border-bottom: 1px solid var(--ec-border-soft);
}

.is-meals-row[b-5b2v0bct9q] {
    display: grid;
    grid-template-columns: 1fr 120px 140px;
    gap: 8px;
    align-items: center;
}

.is-meals-label-input[b-5b2v0bct9q] {
    font-size: 13px;
}

.is-meals-time-input[b-5b2v0bct9q] {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.is-meals-dur-wrap[b-5b2v0bct9q] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.is-meals-dur-input[b-5b2v0bct9q] {
    width: 72px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.is-meals-dur-unit[b-5b2v0bct9q] {
    font-size: 12px;
    color: var(--ec-muted);
    font-weight: 600;
}

.is-meals-foot[b-5b2v0bct9q] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--ec-border-soft);
}

.is-meals-status[b-5b2v0bct9q] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
}

.is-meals-status-ok[b-5b2v0bct9q] {
    color: var(--ec-green);
}

.is-meals-status-error[b-5b2v0bct9q] {
    color: var(--ec-red);
}

.is-meals-save[b-5b2v0bct9q] {
    padding: 8px 16px;
    font-size: 13px;
}
/* /Components/Pages/Institutions/InstitutionsPage.razor.rz.scp.css */
/* InstitutionsPage — customer-wide setup, institutions list.
   Source of truth: prototype EduConnect All Roles.html lines 16869-17051
   (AWInstitutionsList). Inline JSX values are transcribed verbatim — pixel
   values, colors, gaps, font weights all match the prototype's W tokens. */

.ip-page[b-a4tjec6cqg] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ── Banners ─────────────────────────────────────────────────────────── */
.ip-banner[b-a4tjec6cqg] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 600;
}
.ip-banner-error[b-a4tjec6cqg]   { background: var(--ec-red-lt);   color: var(--ec-red); }
.ip-banner-success[b-a4tjec6cqg] { background: var(--ec-green-lt); color: var(--ec-green); }
.ip-banner-close[b-a4tjec6cqg] {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    font-size: 16px;
    padding: 0;
    line-height: 1;
}

/* ── KPI row (4 tiles) — prototype 16907-16912 ───────────────────────── */
.ip-kpis[b-a4tjec6cqg] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.ip-kpi[b-a4tjec6cqg] {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--ec-panel);
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    padding: 18px 20px;
    min-height: 96px;
}

.ip-kpi-icon[b-a4tjec6cqg] {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 19px;
    color: var(--kpi-accent);
    background: color-mix(in srgb, var(--kpi-accent) 14%, transparent);
}

.ip-kpi-body[b-a4tjec6cqg] { flex: 1; min-width: 0; }

.ip-kpi-value[b-a4tjec6cqg] {
    font-size: 22px;
    font-weight: 800;
    color: var(--ec-text);
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 0;
}

.ip-kpi-label[b-a4tjec6cqg] {
    font-size: 10px;
    font-weight: 700;
    color: var(--ec-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 7px 0 0;
}

.ip-kpi-sub[b-a4tjec6cqg] {
    font-size: 11px;
    color: var(--ec-sub);
    margin: 3px 0 0;
}

/* ── Section header — prototype 16914-16920 ──────────────────────────── */
.ip-section-head[b-a4tjec6cqg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.ip-section-title[b-a4tjec6cqg] {
    font-size: 22px;
    font-weight: 800;
    color: var(--ec-text);
    letter-spacing: -0.01em;
    margin: 0;
}

.ip-section-sub[b-a4tjec6cqg] {
    font-size: 12.5px;
    color: var(--ec-muted);
    margin: 3px 0 0;
}

/* ── Buttons (shared) ────────────────────────────────────────────────── */
.ip-btn-primary[b-a4tjec6cqg] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    background: var(--ec-blue);
    border: none;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
}
.ip-btn-primary:hover[b-a4tjec6cqg] { background: var(--ec-blue-dk); }
.ip-btn-primary span:first-child[b-a4tjec6cqg] { font-size: 15px; line-height: 1; }

.ip-btn-ghost[b-a4tjec6cqg] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    background: #fff;
    color: var(--ec-text);
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}
.ip-btn-ghost:hover[b-a4tjec6cqg] { background: var(--ec-bg); border-color: var(--ec-faint); }
.ip-btn-ghost i[b-a4tjec6cqg] { font-size: 12px; }

.ip-btn-success[b-a4tjec6cqg] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    background: var(--ec-green);
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
}
.ip-btn-success:hover[b-a4tjec6cqg] { filter: brightness(0.96); }

.ip-btn-danger[b-a4tjec6cqg] {
    padding: 9px 16px;
    background: var(--ec-red);
    color: #fff;
    border: none;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ip-btn-danger:hover:not(:disabled)[b-a4tjec6cqg] { filter: brightness(0.96); }
.ip-btn-danger:disabled[b-a4tjec6cqg] { opacity: 0.6; cursor: not-allowed; }

.ip-btn-warn[b-a4tjec6cqg] {
    padding: 9px 16px;
    background: var(--ec-amber);
    color: #fff;
    border: none;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ip-btn-warn:hover:not(:disabled)[b-a4tjec6cqg] { filter: brightness(0.96); }
.ip-btn-warn:disabled[b-a4tjec6cqg] { opacity: 0.5; cursor: not-allowed; }

.ip-btn-icon[b-a4tjec6cqg] {
    width: 32px;
    height: 32px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ip-btn-icon-danger[b-a4tjec6cqg] { color: var(--ec-red); }
.ip-btn-icon-danger:hover[b-a4tjec6cqg] { background: var(--ec-red-lt); border-color: var(--ec-red); }

/* ── Loading + empty states ──────────────────────────────────────────── */
.ip-loading[b-a4tjec6cqg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5rem 2rem;
    color: var(--ec-muted);
    gap: 12px;
}

.ip-spinner[b-a4tjec6cqg] {
    width: 36px;
    height: 36px;
    border: 3px solid var(--ec-border);
    border-top-color: var(--ec-blue);
    border-radius: 50%;
    animation: ip-spin-b-a4tjec6cqg 0.75s linear infinite;
}
.ip-spinner-sm[b-a4tjec6cqg] {
    width: 14px;
    height: 14px;
    border-width: 2px;
    border-color: rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
}
@keyframes ip-spin-b-a4tjec6cqg { to { transform: rotate(360deg); } }

.ip-empty[b-a4tjec6cqg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 5rem 2rem;
    background: var(--ec-panel);
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    color: var(--ec-muted);
    text-align: center;
}
.ip-empty-icon[b-a4tjec6cqg] { font-size: 42px; opacity: 0.35; }
.ip-empty h3[b-a4tjec6cqg] { font-size: 17px; font-weight: 800; color: var(--ec-text); margin: 0; }
.ip-empty p[b-a4tjec6cqg]  { font-size: 13px; margin: 0; }

/* ── Institution cards — prototype 16922-17013 ───────────────────────── */
.ip-inst-list[b-a4tjec6cqg] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ip-inst-card[b-a4tjec6cqg] {
    background: var(--ec-panel);
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    overflow: hidden;
}

.ip-inst-head[b-a4tjec6cqg] {
    padding: 18px 22px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    cursor: pointer;
}

.ip-inst-avatar[b-a4tjec6cqg] {
    width: 54px;
    height: 54px;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--ec-blue-lt), var(--ec-purple-lt));
    color: var(--ec-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    font-size: 28px;
}
.ip-inst-avatar img[b-a4tjec6cqg] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ip-inst-avatar i[b-a4tjec6cqg] { font-size: 24px; }
.ip-inst-avatar-svg[b-a4tjec6cqg],
.ip-inst-avatar-bi[b-a4tjec6cqg] { color: var(--ec-blue); }
.ip-inst-avatar-bi[b-a4tjec6cqg] { font-size: 28px; line-height: 1; }

.ip-inst-info[b-a4tjec6cqg] { flex: 1; min-width: 0; }

.ip-inst-name-row[b-a4tjec6cqg] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.ip-inst-name[b-a4tjec6cqg] {
    font-size: 18px;
    font-weight: 800;
    color: var(--ec-text);
    letter-spacing: -0.01em;
    margin: 0;
}

.ip-inst-code[b-a4tjec6cqg] {
    font-size: 10px;
    font-weight: 800;
    color: var(--ec-muted);
    background: var(--ec-bg);
    padding: 3px 8px;
    border-radius: 5px;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    letter-spacing: 0.05em;
}

.ip-inst-flag[b-a4tjec6cqg] { font-size: 13px; line-height: 1; }
.ip-inst-country[b-a4tjec6cqg] { font-size: 11.5px; color: var(--ec-sub); font-weight: 600; }

.ip-inst-address[b-a4tjec6cqg] {
    font-size: 11.5px;
    color: var(--ec-muted);
    margin: 0 0 9px;
}
.ip-inst-address > span:first-child[b-a4tjec6cqg] { color: var(--ec-sub); }
.ip-inst-address-sep[b-a4tjec6cqg] { margin: 0 6px; }

.ip-inst-stages[b-a4tjec6cqg] {
    display: flex;
    gap: 6px;
    margin-bottom: 9px;
    flex-wrap: wrap;
}

.ip-stage-chip[b-a4tjec6cqg] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 6px;
    letter-spacing: 0.04em;
}
.ip-stage-chip i[b-a4tjec6cqg] { font-size: 11px; }

.ip-stage-chip-warn[b-a4tjec6cqg] {
    color: var(--ec-red);
    background: var(--ec-red-lt);
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 5px;
}

.ip-inst-meta[b-a4tjec6cqg] {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 11.5px;
    color: var(--ec-sub);
    font-weight: 600;
}
.ip-inst-meta-item[b-a4tjec6cqg] { display: inline-flex; align-items: center; gap: 5px; }
.ip-inst-meta-item i[b-a4tjec6cqg] { font-size: 12px; }

.ip-inst-meta-ok[b-a4tjec6cqg] {
    color: var(--ec-green);
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.ip-inst-meta-issues[b-a4tjec6cqg] {
    color: var(--ec-amber);
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ip-inst-actions[b-a4tjec6cqg] {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    flex-shrink: 0;
}

/* ── Facility sub-cards — prototype 16986-17008 ──────────────────────── */
.ip-fac-grid[b-a4tjec6cqg] {
    padding: 14px 22px 18px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 11px;
    border-top: 1px solid var(--ec-border-soft);
}

.ip-fac-card[b-a4tjec6cqg] {
    background: var(--ec-panel);
    border: 1px solid var(--ec-border);
    border-radius: 10px;
    padding: 13px 15px;
    display: flex;
    flex-direction: column;
}

.ip-fac-top[b-a4tjec6cqg] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 9px;
}

.ip-fac-icon[b-a4tjec6cqg] {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 17px;
}

.ip-fac-title[b-a4tjec6cqg] { flex: 1; min-width: 0; }

.ip-fac-name[b-a4tjec6cqg] {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--ec-text);
    line-height: 1.2;
    margin: 0;
}

.ip-fac-code[b-a4tjec6cqg] {
    font-size: 10.5px;
    color: var(--ec-muted);
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    margin: 2px 0 0;
}

.ip-fac-status[b-a4tjec6cqg] {
    font-size: 9.5px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.06em;
    flex-shrink: 0;
}
.ip-fac-status.is-active[b-a4tjec6cqg]   { color: var(--ec-green); background: var(--ec-green-lt); }
.ip-fac-status.is-inactive[b-a4tjec6cqg] { color: var(--ec-red);   background: var(--ec-red-lt); }

.ip-fac-chips[b-a4tjec6cqg] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 9px;
}

.ip-fac-chip[b-a4tjec6cqg] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    color: var(--ec-sub);
    background: var(--ec-bg);
    padding: 2px 7px;
    border-radius: 4px;
}
.ip-fac-chip i[b-a4tjec6cqg] { font-size: 11px; }

.ip-fac-address[b-a4tjec6cqg] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 0 0 9px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.ip-fac-address i[b-a4tjec6cqg] { font-size: 12px; }

.ip-btn-edit-fac[b-a4tjec6cqg] {
    margin-top: auto;
    width: 100%;
    padding: 7px 10px;
    background: var(--ec-panel);
    color: var(--ec-text);
    border: 1px solid var(--ec-border);
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.ip-btn-edit-fac:hover[b-a4tjec6cqg] { background: var(--ec-bg); border-color: var(--ec-faint); }
.ip-btn-edit-fac i[b-a4tjec6cqg] { font-size: 12px; }

/* ── Modals ─────────────────────────────────────────────────────────── */
.ip-modal-backdrop[b-a4tjec6cqg] {
    position: fixed;
    inset: 0;
    z-index: 9500;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: ip-fade-b-a4tjec6cqg 0.15s ease;
}
@keyframes ip-fade-b-a4tjec6cqg { from { opacity: 0; } to { opacity: 1; } }

.ip-confirm-dialog[b-a4tjec6cqg] {
    background: var(--ec-panel);
    border-radius: 14px;
    width: min(440px, 100%);
    padding: 22px 24px;
    box-shadow: 0 20px 60px -10px rgba(15, 23, 42, 0.3);
    animation: ip-pop-b-a4tjec6cqg 0.18s ease;
}
@keyframes ip-pop-b-a4tjec6cqg {
    from { opacity: 0; transform: scale(0.94) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.ip-confirm-eyebrow[b-a4tjec6cqg] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-red);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}
.ip-confirm-eyebrow i[b-a4tjec6cqg] { font-size: 12px; }
.ip-eyebrow-info[b-a4tjec6cqg] { color: var(--ec-amber); }

.ip-confirm-title[b-a4tjec6cqg] {
    font-size: 16px;
    font-weight: 800;
    color: var(--ec-text);
    line-height: 1.4;
    margin: 6px 0 0;
}

.ip-confirm-body[b-a4tjec6cqg] {
    font-size: 12px;
    color: var(--ec-sub);
    line-height: 1.55;
    margin: 8px 0 0;
}

.ip-confirm-error[b-a4tjec6cqg] {
    font-size: 12px;
    color: var(--ec-red);
    font-weight: 600;
    margin: 8px 0 0;
}

.ip-confirm-actions[b-a4tjec6cqg] {
    display: flex;
    gap: 8px;
    margin-top: 18px;
    justify-content: flex-end;
}

.ip-move-field[b-a4tjec6cqg] {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ip-move-label[b-a4tjec6cqg] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ip-move-select[b-a4tjec6cqg] {
    padding: 9px 12px;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    font-size: 12.5px;
    font-family: inherit;
    font-weight: 600;
    background: var(--ec-panel);
    color: var(--ec-text);
    cursor: pointer;
}
.ip-move-select:focus[b-a4tjec6cqg] { outline: none; border-color: var(--ec-blue); }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .ip-kpis[b-a4tjec6cqg] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    .ip-inst-head[b-a4tjec6cqg] { flex-wrap: wrap; }
    .ip-inst-actions[b-a4tjec6cqg] { width: 100%; }
}
@media (max-width: 600px) {
    .ip-kpis[b-a4tjec6cqg] { grid-template-columns: 1fr; }
    .ip-section-head[b-a4tjec6cqg] { flex-direction: column; align-items: stretch; }
    .ip-fac-grid[b-a4tjec6cqg] { grid-template-columns: 1fr; padding: 14px 16px 18px; }
    .ip-inst-head[b-a4tjec6cqg] { padding: 14px 16px; }
}
/* /Components/Pages/Messages.razor.rz.scp.css */
/* ── Inbox filter chips ── */
.msg-filter-row[b-blc40kmsqb] { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px; }
.msg-filter[b-blc40kmsqb] { border: 1px solid var(--ec-border); background: #fff; color: var(--ec-sub); border-radius: 8px; padding: 5px 11px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; }
.msg-filter--on[b-blc40kmsqb] { background: var(--ec-primary, #2e5dab); border-color: var(--ec-primary, #2e5dab); color: #fff; }

/* ── Conversation-list row read tick ── */
.msg-conv-tick[b-blc40kmsqb] { font-size: 12px; color: var(--ec-muted); margin-left: 4px; }
.msg-conv-tick--read[b-blc40kmsqb] { color: var(--ec-primary, #2e5dab); }

/* ── Recipient-picker tabs (People / Classes / Programs) ── */
.msg-tabs[b-blc40kmsqb] { display: flex; gap: 4px; border-bottom: 1px solid var(--ec-border); margin-bottom: 10px; }
.msg-tab[b-blc40kmsqb] { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: none; border: none; border-bottom: 2.5px solid transparent; padding: 9px 8px; font-size: 12.5px; font-weight: 700; color: var(--ec-sub); cursor: pointer; font-family: inherit; }
.msg-tab--on[b-blc40kmsqb] { color: var(--ec-primary, #2e5dab); border-bottom-color: var(--ec-primary, #2e5dab); }

/* Bulk audience chips (selected classes/programs) */
.msg-bulk-chips[b-blc40kmsqb] { display: flex; flex-wrap: wrap; gap: 6px; }
.msg-bulk-chip[b-blc40kmsqb] { display: inline-flex; align-items: center; gap: 6px; background: color-mix(in srgb, var(--ec-primary, #2e5dab) 10%, #fff); color: var(--ec-primary, #2e5dab); border: 1px solid color-mix(in srgb, var(--ec-primary, #2e5dab) 35%, #fff); border-radius: 999px; padding: 4px 6px 4px 11px; font-size: 12px; font-weight: 700; }
.msg-bulk-count[b-blc40kmsqb] { font-size: 10.5px; font-weight: 800; background: var(--ec-primary, #2e5dab); color: #fff; border-radius: 6px; padding: 1px 5px; }
.msg-bulk-chip-x[b-blc40kmsqb] { border: none; background: transparent; color: inherit; cursor: pointer; padding: 0 2px; display: flex; align-items: center; }

/* Class card with All parents / All students bulk buttons */
.msg-class-card[b-blc40kmsqb] { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 11px; border: 1px solid var(--ec-border); border-radius: 9px; margin-bottom: 6px; }
.msg-class-name[b-blc40kmsqb] { font-size: 13px; font-weight: 800; color: var(--ec-text); }
.msg-class-bulk[b-blc40kmsqb] { display: flex; gap: 6px; }
.msg-bulk-btn[b-blc40kmsqb] { display: inline-flex; align-items: center; gap: 5px; background: #fff; border: 1px solid var(--ec-border); border-radius: 8px; padding: 6px 10px; font-size: 11.5px; font-weight: 700; color: var(--ec-sub); cursor: pointer; font-family: inherit; }
.msg-bulk-btn--on[b-blc40kmsqb] { background: var(--ec-primary, #2e5dab); border-color: var(--ec-primary, #2e5dab); color: #fff; }
.msg-bulk-btn:disabled[b-blc40kmsqb] { opacity: .55; cursor: default; }

/* Broadcast message body + privacy notice */
.msg-broadcast-body[b-blc40kmsqb] { resize: vertical; min-height: 84px; line-height: 1.5; }
.msg-broadcast-notice[b-blc40kmsqb] { display: flex; align-items: flex-start; gap: 7px; margin-top: 7px; padding: 8px 10px; background: var(--ec-amber-soft, #fff7ed); border: 1px solid var(--ec-amber, #f59e0b); border-radius: 8px; font-size: 11px; color: var(--ec-text); line-height: 1.5; }

/* Page wrapper — fills the content area EXACTLY so only the inner panes scroll.
   Height accounts for the sticky top bar + the .ec-app-content padding
   (1rem top + 2rem bottom); no margin (the content padding handles the gap).
   This is what guarantees a single right-hand scrollbar (the conversation),
   not a second window scrollbar from the page overflowing the viewport. */
.msg-page-wrap[b-blc40kmsqb] {
    display: flex;
    flex-direction: column;
    /* Cancel the .ec-app-content gutter (var(--ec-sp-6) = 24px) so the messages
       shell is flush to the content area like the prototype — no surrounding gap. */
    margin: calc(var(--ec-sp-6) * -1);
    /* Fill from the top bar's bottom to the viewport bottom. With the padding
       cancelled above, only the ~5rem sticky top bar is subtracted. */
    height: calc(100dvh - 5rem);
    min-height: 480px;
    overflow: hidden;
}
@media (max-width: 640.98px) {
    .msg-page-wrap[b-blc40kmsqb] { margin: calc(var(--ec-sp-4) * -1); }
}

/* Page header (root) — title + subtitle now ship through the top bar via
   <PageHeader>; this row only carries the trailing "New message" button. */
.msg-page-header[b-blc40kmsqb] {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 12px;
    flex-shrink: 0;
}

.msg-shell[b-blc40kmsqb] {
    display: flex;
    flex: 1;
    min-height: 0;
    background: var(--ec-bg);
    overflow: hidden;
    /* Flush, full-bleed panes (no rounded card) like the prototype; the only
       separators are the top border under the title and the inter-pane divider. */
    border-top: 1px solid var(--ec-border);
}

/* ── Left pane ── */
.msg-list-pane[b-blc40kmsqb] {
    width: 340px;
    flex-shrink: 0;
    background: var(--ec-card);
    border-right: 1px solid var(--ec-border);
    display: flex;
    flex-direction: column;
    min-height: 0;
}
/* Inbox column header — "Inbox" label + rounded New message pill (prototype).
   14px horizontal padding aligns the label/button with the search + filter rows. */
.msg-inbox-head[b-blc40kmsqb] { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 14px 10px; }
.msg-inbox-label[b-blc40kmsqb] { font-size: 1rem; font-weight: 800; color: var(--ec-text); }

/* page-level "New message" CTA now uses the shared .ec-btn-primary class;
   keep it from shrinking inside the space-between inbox header */
.msg-inbox-head .ec-btn-primary[b-blc40kmsqb] { flex-shrink: 0; white-space: nowrap; }

.msg-search[b-blc40kmsqb] {
    position: relative;
    padding: 10px 14px;
    border-bottom: 1px solid var(--ec-border-soft);
}
.msg-search-icon[b-blc40kmsqb] {
    position: absolute;
    left: 24px;
    top: 50%; transform: translateY(-50%);
    color: var(--ec-muted);
    font-size: 12px;
}
.msg-search-input[b-blc40kmsqb] {
    width: 100%;
    background: var(--ec-bg);
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    padding: 7px 12px 7px 32px;
    font-size: 12.5px;
    color: var(--ec-text);
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
}
.msg-search-input:focus[b-blc40kmsqb] { border-color: var(--ec-blue); }

.msg-list-scroll[b-blc40kmsqb] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* ── Conversation rows ── */
.msg-conv-row[b-blc40kmsqb] {
    width: 100%;
    display: flex; align-items: center; gap: 11px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--ec-border-soft);
    border-left: 3px solid transparent;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background .12s, border-color .12s;
}
.msg-conv-row:last-child[b-blc40kmsqb] { border-bottom: 0; }
.msg-conv-row:hover[b-blc40kmsqb] { background: var(--ec-bg); }
.msg-conv-row--unread[b-blc40kmsqb] {
    background: var(--ec-school-tint);
    border-left-color: var(--ec-blue);
}
.msg-conv-row--selected[b-blc40kmsqb] {
    background: var(--ec-school-tint);
    border-left-color: var(--ec-blue);
}
.ec-stage-kindergarten .msg-conv-row--unread[b-blc40kmsqb],
.ec-stage-kindergarten .msg-conv-row--selected[b-blc40kmsqb] {
    background: var(--ec-kg-tint);
    border-left-color: var(--ec-primary);
}
.msg-conv-avatar[b-blc40kmsqb] {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--ec-primary);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800;
    flex-shrink: 0;
    position: relative;
}
/* Profile photo fills the avatar circle (the wrapper keeps its bg for the
   initials fallback + the presence-dot ::after). */
.msg-avatar-img[b-blc40kmsqb] {
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.msg-conv-avatar[b-blc40kmsqb]::after {
    content: "";
    position: absolute;
    bottom: 0; right: 0;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--ec-ok);
    border: 2px solid var(--ec-card);
}
.msg-conv-body[b-blc40kmsqb] { flex: 1; min-width: 0; }
.msg-conv-top[b-blc40kmsqb] { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.msg-conv-name[b-blc40kmsqb] {
    font-size: 13px; font-weight: 700;
    color: var(--ec-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex: 1; min-width: 0;
}
/* Green GROUP pill on group conversation rows (parity with the mobile app). */
.msg-conv-grouppill[b-blc40kmsqb] {
    flex-shrink: 0;
    font-size: 9px; font-weight: 800; letter-spacing: 0.05em;
    color: #0d9488; background: color-mix(in srgb, #0d9488 14%, #fff);
    border-radius: 4px; padding: 1px 6px; white-space: nowrap;
}
.msg-conv-row--unread .msg-conv-name[b-blc40kmsqb] { font-weight: 800; }
.msg-conv-time[b-blc40kmsqb] { font-size: 11px; color: var(--ec-muted); flex-shrink: 0; }
.msg-conv-role[b-blc40kmsqb] {
    font-size: 11px; color: var(--ec-sub); margin: 2px 0 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Row meta line: class pill (+ optional subject), prototype "Class IV-B" look. */
.msg-conv-meta[b-blc40kmsqb] { display: flex; align-items: center; gap: 6px; margin: 3px 0 0; min-width: 0; }
.msg-conv-classpill[b-blc40kmsqb] { font-size: 9.5px; font-weight: 800; letter-spacing: 0.04em; color: var(--ec-primary, #2e5dab); background: color-mix(in srgb, var(--ec-primary, #2e5dab) 12%, #fff); border-radius: 4px; padding: 1px 6px; flex-shrink: 0; white-space: nowrap; }
.msg-conv-subject[b-blc40kmsqb] { font-size: 11px; color: var(--ec-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Group participants line on a conversation row — single line, ellipsis-trimmed. */
.msg-conv-participants[b-blc40kmsqb] { font-size: 11px; color: var(--ec-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.msg-conv-preview[b-blc40kmsqb] {
    font-size: 11.5px; color: var(--ec-sub);
    margin: 4px 0 0;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.msg-conv-unread[b-blc40kmsqb] {
    background: var(--ec-blue); color: #fff;
    font-size: 10px; font-weight: 800;
    padding: 2px 7px; border-radius: 999px;
    flex-shrink: 0;
}

/* ── Right pane (thread) ── */
.msg-thread-pane[b-blc40kmsqb] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--ec-card);
}
.msg-thread-empty[b-blc40kmsqb] {
    flex: 1;
    display: flex;
    align-items: center; justify-content: center;
}

.msg-chat-header[b-blc40kmsqb] {
    display: flex; align-items: center; gap: 11px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--ec-border-soft);
    flex-shrink: 0;
}
.msg-back-btn[b-blc40kmsqb] {
    background: transparent; border: none;
    color: var(--ec-text);
    font-size: 16px;
    cursor: pointer; font-family: inherit;
    width: 32px; height: 32px;
    display: none;
    align-items: center; justify-content: center;
    border-radius: 8px;
}
.msg-back-btn:hover[b-blc40kmsqb] { background: var(--ec-bg); }
.msg-chat-info-wrap[b-blc40kmsqb] { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; }
.msg-chat-avatar[b-blc40kmsqb] {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--ec-primary);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800;
    flex-shrink: 0;
}
.msg-chat-info[b-blc40kmsqb] { display: flex; flex-direction: column; min-width: 0; }
.msg-chat-name[b-blc40kmsqb] { font-size: 14px; font-weight: 800; color: var(--ec-text); }
.msg-chat-participants[b-blc40kmsqb] {
    display: block;
    font-size: 11.5px; color: var(--ec-sub);
    margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 520px;
}
.msg-chat-online-dot[b-blc40kmsqb] {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--ec-ok);
}
.msg-chat-menu[b-blc40kmsqb] {
    background: transparent; border: 1px solid var(--ec-border);
    width: 32px; height: 32px;
    border-radius: 8px;
    color: var(--ec-muted);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.msg-chat-menu:hover[b-blc40kmsqb] { background: var(--ec-bg); border-color: var(--ec-blue); }

.msg-chat-panel[b-blc40kmsqb] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--ec-bg);
}
.msg-messages[b-blc40kmsqb] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 18px;
    overscroll-behavior: contain;
}

/* ── Day separator ── */
.msg-day-sep[b-blc40kmsqb] {
    text-align: center;
    margin: 16px 0 12px;
}
.msg-day-sep span[b-blc40kmsqb] {
    display: inline-block;
    background: var(--ec-card);
    border: 1px solid var(--ec-border);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 11px; color: var(--ec-muted);
    font-weight: 600;
}

/* ── Typing indicator ── */
.msg-typing[b-blc40kmsqb] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin: 2px 0 8px;
    padding: 7px 13px;
    background: var(--ec-card);
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ec-muted);
}
.msg-typing-dots[b-blc40kmsqb] { display: inline-flex; gap: 3px; }
.msg-typing-dots > span[b-blc40kmsqb] {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--ec-muted);
    animation: msg-typing-bounce-b-blc40kmsqb 1.1s infinite ease-in-out;
}
.msg-typing-dots > span:nth-child(2)[b-blc40kmsqb] { animation-delay: .15s; }
.msg-typing-dots > span:nth-child(3)[b-blc40kmsqb] { animation-delay: .3s; }
@keyframes msg-typing-bounce-b-blc40kmsqb {
    0%, 80%, 100% { transform: translateY(0); opacity: .5; }
    40% { transform: translateY(-3px); opacity: 1; }
}

/* ── Bubbles ── */
.msg-bubble-wrap[b-blc40kmsqb] { display: flex; margin-bottom: 12px; }
.msg-bubble-wrap--mine[b-blc40kmsqb]   { justify-content: flex-end; }
.msg-bubble-wrap--theirs[b-blc40kmsqb] { justify-content: flex-start; }
.msg-bubble-col[b-blc40kmsqb] { display: flex; flex-direction: column; max-width: 70%; }
.msg-bubble[b-blc40kmsqb] {
    padding: 10px 14px;
    border-radius: 14px 14px 14px 4px;
    font-size: 13px;
    line-height: 1.5;
    word-wrap: break-word;
}
.msg-bubble--mine[b-blc40kmsqb] {
    background: var(--ec-blue);
    color: #fff;
    border-radius: 14px 14px 4px 14px;
    align-self: flex-end;
}
.ec-stage-kindergarten .msg-bubble--mine[b-blc40kmsqb] { background: var(--ec-primary); }
.msg-bubble--theirs[b-blc40kmsqb] {
    background: var(--ec-card);
    color: var(--ec-text);
    border: 1px solid var(--ec-border);
    align-self: flex-start;
}
.msg-bubble-text[b-blc40kmsqb] { white-space: pre-wrap; word-break: break-word; }
.msg-bubble-attach[b-blc40kmsqb] {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 6px;
    font-size: 11.5px; opacity: 0.9;
}
.msg-bubble-time[b-blc40kmsqb] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 4px 6px 0;
    align-self: flex-start;
}
.msg-bubble-time--mine[b-blc40kmsqb] { align-self: flex-end; }

/* ── Composer ── */
.msg-input-bar[b-blc40kmsqb] {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 18px;
    background: var(--ec-card);
    border-top: 1px solid var(--ec-border);
    flex-shrink: 0;
}
.msg-input-attach[b-blc40kmsqb] {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: var(--ec-bg);
    border: 1px solid var(--ec-border);
    color: var(--ec-muted);
    cursor: pointer;
    font-family: inherit;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.msg-input-attach:hover[b-blc40kmsqb] { background: var(--ec-card); border-color: var(--ec-blue); }
.msg-input[b-blc40kmsqb] {
    flex: 1;
    background: var(--ec-bg);
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    padding: 9px 14px;
    font-size: 13px;
    color: var(--ec-text);
    font-family: inherit;
    outline: none;
}
.msg-input:focus[b-blc40kmsqb] { border-color: var(--ec-blue); }
.msg-send-btn[b-blc40kmsqb] {
    background: var(--ec-blue);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 18px;
    font-size: 13px; font-weight: 700;
    cursor: pointer; font-family: inherit;
    flex-shrink: 0;
    min-width: 70px;
}
.msg-send-btn:disabled[b-blc40kmsqb] { opacity: 0.5; cursor: not-allowed; }
.ec-stage-kindergarten .msg-send-btn[b-blc40kmsqb] { background: var(--ec-primary); }

/* ── Responsive — stack panes on mobile ── */
@media (max-width: 900px) {
    .msg-shell[b-blc40kmsqb] { flex-direction: column; }
    .msg-list-pane[b-blc40kmsqb] { width: 100%; border-right: 0; border-bottom: 1px solid var(--ec-border); }
    .msg-back-btn[b-blc40kmsqb] { display: flex; }
    .msg-shell--has-thread .msg-list-pane[b-blc40kmsqb] { display: none; }
    .msg-shell:not(.msg-shell--has-thread) .msg-thread-pane[b-blc40kmsqb] { display: none; }
}

/* ── Loading / Empty ── */
.msg-loading[b-blc40kmsqb] {
    display: flex; flex-direction: column; align-items: center;
    padding: 5rem 2rem; gap: 1rem;
    color: var(--ec-sub);
}
.msg-spinner[b-blc40kmsqb] {
    width: 40px; height: 40px;
    border: 3px solid rgba(46,93,171,0.15);
    border-top-color: var(--ec-blue);
    border-radius: 50%;
    animation: msg-spin-b-blc40kmsqb 0.75s linear infinite;
}
@keyframes msg-spin-b-blc40kmsqb { to { transform: rotate(360deg); } }
.msg-send-spinner[b-blc40kmsqb] {
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: msg-spin-b-blc40kmsqb 0.7s linear infinite;
    display: inline-block;
}

/* ── Slide-over modal (right side — the app-wide form-dialog standard) ── */
.msg-modal-overlay[b-blc40kmsqb] {
    position: fixed; inset: 0;
    background: rgba(15,23,42,0.5);
    backdrop-filter: blur(2px);
    z-index: 9000;
    display: flex; justify-content: flex-end;
    animation: msg-fade-in-b-blc40kmsqb 0.15s ease;
}
@keyframes msg-fade-in-b-blc40kmsqb { from { opacity: 0; } to { opacity: 1; } }
.msg-modal[b-blc40kmsqb] {
    position: relative;
    background: var(--ec-card);
    width: min(560px, 96%); height: 100%;
    display: flex; flex-direction: column;
    overflow: hidden;
    box-shadow: -12px 0 40px rgba(13,23,51,0.16);
    animation: msg-slide-in-b-blc40kmsqb 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes msg-slide-in-b-blc40kmsqb {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}
.msg-modal-close[b-blc40kmsqb] {
    position: absolute; top: 1.25rem; right: 1.25rem;
    z-index: 1;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--ec-border-soft);
    border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--ec-sub);
    font-size: 0.8rem;
    transition: background 0.15s, color 0.15s;
}
.msg-modal-close:hover[b-blc40kmsqb] { background: var(--ec-bg); color: var(--ec-blue); }
.msg-modal-head[b-blc40kmsqb] {
    padding: 1.75rem 2rem 1.25rem;
    border-bottom: 1px solid rgba(46,93,171,0.08);
    flex-shrink: 0;
}
.msg-modal-title[b-blc40kmsqb] {
    font-size: 1.25rem; font-weight: 800;
    color: var(--ec-text);
    margin: 0 0 0.35rem; letter-spacing: -0.02em;
}
.msg-modal-subtitle[b-blc40kmsqb] {
    font-size: 0.85rem; color: var(--ec-sub);
    margin: 0; font-weight: 500;
}
.msg-modal-loading[b-blc40kmsqb] {
    display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
    padding: 2.5rem 0;
    color: var(--ec-sub);
    font-size: 0.85rem;
}
.msg-modal-form[b-blc40kmsqb] {
    display: flex; flex-direction: column; gap: 1.25rem;
    padding: 1.5rem 2rem;
    flex: 1; overflow-y: auto;
}
.msg-modal-field[b-blc40kmsqb] { display: flex; flex-direction: column; gap: 0.5rem; }
.msg-modal-label[b-blc40kmsqb] {
    font-size: 0.7rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--ec-sub);
}
.msg-modal-optional[b-blc40kmsqb] {
    text-transform: none; letter-spacing: 0;
    font-weight: 500; opacity: 0.65;
}
.msg-modal-input[b-blc40kmsqb] {
    padding: 0.875rem 1.25rem;
    background: var(--ec-bg);
    border: 1px solid rgba(159,178,221,0.3);
    border-radius: 14px;
    font-size: 0.875rem; color: var(--ec-text);
    outline: none; font-family: inherit;
    width: 100%; box-sizing: border-box;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.msg-modal-input:focus[b-blc40kmsqb] {
    background: var(--ec-card); border-color: var(--ec-blue);
    box-shadow: 0 0 0 3px rgba(46,93,171,0.12);
}

/* ── Recipient search box (People / Add-people pickers) ── */
.msg-modal-search-wrap[b-blc40kmsqb] { position: relative; }
.msg-modal-search-icon[b-blc40kmsqb] {
    position: absolute; left: 0.95rem; top: 50%; transform: translateY(-50%);
    color: var(--ec-muted); font-size: 0.8rem; pointer-events: none;
}
.msg-modal-search[b-blc40kmsqb] {
    width: 100%; box-sizing: border-box;
    padding: 0.7rem 1rem 0.7rem 2.4rem;
    background: var(--ec-bg);
    border: 1px solid rgba(159,178,221,0.3);
    border-radius: 12px;
    font-size: 0.85rem; color: var(--ec-text);
    outline: none; font-family: inherit;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.msg-modal-search[b-blc40kmsqb]::placeholder { color: var(--ec-muted); }
.msg-modal-search:focus[b-blc40kmsqb] {
    background: var(--ec-card); border-color: var(--ec-blue);
    box-shadow: 0 0 0 3px rgba(46,93,171,0.12);
}
.msg-modal-empty[b-blc40kmsqb] {
    font-size: 0.85rem; color: var(--ec-sub);
    margin: 0;
}
.msg-recipient-list[b-blc40kmsqb] {
    display: flex; flex-direction: column; gap: 0.5rem;
    max-height: 280px; overflow-y: auto;
}
.msg-recipient-row[b-blc40kmsqb] {
    display: flex; align-items: center; gap: 0.875rem;
    padding: 0.75rem 1rem;
    border: 2px solid transparent;
    border-radius: 1rem;
    background: var(--ec-bg);
    cursor: pointer; font-family: inherit; text-align: left;
    transition: border-color 0.15s, background 0.15s;
}
.msg-recipient-row:hover[b-blc40kmsqb] { background: var(--ec-border-soft); }
.msg-recipient-row--active[b-blc40kmsqb] {
    border-color: var(--ec-blue);
    background: rgba(46,93,171,0.04);
}
.msg-recipient-avatar[b-blc40kmsqb] {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--ec-blue); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem; font-weight: 800; flex-shrink: 0;
    text-transform: uppercase; overflow: hidden;
}
/* Photo variant — same disc, image instead of initials. */
img.msg-recipient-avatar--photo[b-blc40kmsqb] { object-fit: cover; }
.msg-recipient-info[b-blc40kmsqb] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.msg-recipient-name[b-blc40kmsqb] {
    font-size: 0.9rem; font-weight: 700;
    color: var(--ec-text);
}
.msg-recipient-role[b-blc40kmsqb] {
    font-size: 0.72rem;
    color: var(--ec-sub); font-weight: 600;
}
.msg-recipient-check[b-blc40kmsqb] {
    color: var(--ec-blue); font-size: 1.1rem; flex-shrink: 0;
}
.msg-modal-actions[b-blc40kmsqb] {
    display: flex; gap: 0.75rem;
    padding: 1.25rem 2rem;
    border-top: 1px solid rgba(46,93,171,0.08);
    flex-shrink: 0;
}
.msg-modal-cancel[b-blc40kmsqb] {
    flex: 1; padding: 0.875rem 1.25rem;
    background: var(--ec-card);
    color: var(--ec-sub);
    border: 1.5px solid rgba(46,93,171,0.15);
    border-radius: 1rem;
    font-size: 0.85rem; font-weight: 700;
    cursor: pointer; font-family: inherit;
    transition: background 0.15s;
}
.msg-modal-cancel:hover[b-blc40kmsqb] { background: var(--ec-bg); }
.msg-modal-send[b-blc40kmsqb] {
    flex: 2;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    background: var(--ec-blue); color: white;
    border: none; border-radius: 1rem;
    font-size: 0.85rem; font-weight: 700;
    cursor: pointer; font-family: inherit;
    box-shadow: 0 4px 14px -3px rgba(46,93,171,0.4);
    transition: opacity 0.15s, transform 0.15s;
}
.msg-modal-send:hover:not(:disabled)[b-blc40kmsqb] { opacity: 0.92; transform: translateY(-1px); }
.msg-modal-send:disabled[b-blc40kmsqb] { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

/* ── Connection-state banner (above input bar) ─────────────────────────── */
.msg-conn-banner[b-blc40kmsqb] {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.55rem 1rem;
    margin: 0 0.75rem 0.5rem;
    border-radius: 0.75rem;
    font-size: 0.78rem; font-weight: 600;
    border: 1px solid transparent;
    animation: msg-conn-fade-in-b-blc40kmsqb 0.2s ease-out;
}
.msg-conn-banner--warn[b-blc40kmsqb] {
    background: #fff7e6;
    color: #b25e09;
    border-color: rgba(245, 158, 11, 0.25);
}
.msg-conn-banner--down[b-blc40kmsqb] {
    background: #fde8e8;
    color: #b91c1c;
    border-color: rgba(220, 38, 38, 0.25);
}
.msg-conn-dot[b-blc40kmsqb] {
    width: 8px; height: 8px; border-radius: 50%;
    flex-shrink: 0;
    animation: msg-conn-pulse-b-blc40kmsqb 1.4s ease-in-out infinite;
}
.msg-conn-banner--warn .msg-conn-dot[b-blc40kmsqb] { background: #f59e0b; box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.6); }
.msg-conn-banner--down .msg-conn-dot[b-blc40kmsqb] { background: #dc2626; box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6); }

@keyframes msg-conn-pulse-b-blc40kmsqb {
    0%   { box-shadow: 0 0 0 0   rgba(245, 158, 11, 0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0); }
    100% { box-shadow: 0 0 0 0   rgba(245, 158, 11, 0); }
}
@keyframes msg-conn-fade-in-b-blc40kmsqb {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* Disabled compose state */
.msg-input:disabled[b-blc40kmsqb],
.msg-input-attach:disabled[b-blc40kmsqb] { opacity: 0.55; cursor: not-allowed; }
.msg-input-attach.disabled[b-blc40kmsqb] { opacity: 0.55; cursor: not-allowed; pointer-events: none; }

/* ── Type toggle (group vs direct) ─────────────────────────────────────── */
.msg-type-toggle[b-blc40kmsqb] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
}
.msg-type-btn[b-blc40kmsqb] {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    padding: 0.625rem 1rem;
    border: 1.5px solid var(--ec-border);
    border-radius: 0.75rem;
    background: var(--ec-bg);
    color: var(--ec-sub);
    font-size: 0.82rem; font-weight: 600;
    cursor: pointer; font-family: inherit;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.msg-type-btn:hover[b-blc40kmsqb] { border-color: var(--ec-blue); color: var(--ec-blue); background: rgba(46,93,171,0.04); }
.msg-type-btn--active[b-blc40kmsqb] {
    border-color: var(--ec-blue);
    background: rgba(46,93,171,0.08);
    color: var(--ec-blue);
}

/* ── Modal validation error ─────────────────────────────────────────────── */
.msg-modal-validation-err[b-blc40kmsqb] {
    display: flex; align-items: center; gap: 0.35rem;
    font-size: 0.78rem; color: var(--ec-danger, #b91c1c);
    margin-top: 0.25rem;
}

/* ── Recipient checkbox empty ring ─────────────────────────────────────── */
.msg-recipient-check-empty[b-blc40kmsqb] {
    color: var(--ec-border);
    font-size: 1.1rem; flex-shrink: 0;
}

/* ── Pending-file chips bar ─────────────────────────────────────────────── */
.msg-pending-bar[b-blc40kmsqb] {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    padding: 8px 18px 0;
    background: var(--ec-card);
    border-top: 1px solid var(--ec-border);
}
.msg-pending-chip[b-blc40kmsqb] {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--ec-bg);
    border: 1px solid var(--ec-border);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 11.5px; color: var(--ec-text);
    max-width: 220px;
}
.msg-pending-name[b-blc40kmsqb] {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 120px;
}
.msg-pending-size[b-blc40kmsqb] { color: var(--ec-muted); flex-shrink: 0; }
.msg-pending-remove[b-blc40kmsqb] {
    background: none; border: none; cursor: pointer;
    color: var(--ec-muted); font-family: inherit;
    display: flex; align-items: center;
    padding: 0; line-height: 1;
}
.msg-pending-remove:hover[b-blc40kmsqb] { color: var(--ec-danger, #b91c1c); }
.msg-attach-error[b-blc40kmsqb] {
    display: flex; align-items: center; gap: 5px;
    font-size: 11.5px; color: var(--ec-danger, #b91c1c);
    width: 100%;
}

/* ── Attachment rendering in bubbles ────────────────────────────────────── */
.msg-attachments[b-blc40kmsqb] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 7px;
}

/* Image thumbnail */
.msg-img-thumb[b-blc40kmsqb] {
    display: block;
    max-width: 240px; max-height: 180px;
    border-radius: 8px;
    cursor: pointer;
    object-fit: cover;
    border: 1px solid rgba(0,0,0,0.08);
    transition: opacity 0.15s;
}
.msg-img-thumb:hover[b-blc40kmsqb] { opacity: 0.88; }
.msg-img-placeholder[b-blc40kmsqb] {
    width: 240px; height: 120px;
    border-radius: 8px;
    background: var(--ec-bg);
    border: 1px solid var(--ec-border);
    display: flex; align-items: center; justify-content: center;
}
.msg-img-spinner[b-blc40kmsqb] {
    width: 24px; height: 24px;
    border: 2px solid rgba(46,93,171,0.15);
    border-top-color: var(--ec-blue);
    border-radius: 50%;
    animation: msg-spin-b-blc40kmsqb 0.75s linear infinite;
}

/* Document attachment card — mirrors prototype AttachmentList */
.msg-attach-card[b-blc40kmsqb] {
    display: flex; align-items: center; gap: 11px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 10px;
    padding: 11px 14px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    max-width: 320px;
}
.msg-attach-card:hover[b-blc40kmsqb] {
    border-color: rgba(46,93,171,0.5);
    background: rgba(46,93,171,0.03);
}
/* color-coded type badge */
.msg-attach-badge[b-blc40kmsqb] {
    width: 38px; height: 38px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 800;
    flex-shrink: 0;
}
.msg-attach-badge--pdf[b-blc40kmsqb]  { background: #fee2e2; color: #ef4444; }
.msg-attach-badge--doc[b-blc40kmsqb]  { background: #dbeafe; color: #3b82f6; }
.msg-attach-badge--xls[b-blc40kmsqb]  { background: #dcfce7; color: #22c55e; }
.msg-attach-badge--ppt[b-blc40kmsqb]  { background: #fed7aa; color: #f97316; }
.msg-attach-badge--img[b-blc40kmsqb]  { background: #ede9fe; color: #a855f7; }
.msg-attach-badge--other[b-blc40kmsqb] { background: var(--ec-bg); color: var(--ec-muted); }
.msg-attach-meta[b-blc40kmsqb] { flex: 1; min-width: 0; }
.msg-attach-name[b-blc40kmsqb] {
    font-size: 13px; font-weight: 700; color: var(--ec-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin: 0;
}
.msg-attach-size[b-blc40kmsqb] { font-size: 11px; color: var(--ec-muted); margin: 2px 0 0; }
.msg-attach-dl[b-blc40kmsqb] {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: rgba(46,93,171,0.06);
    border: 1px solid rgba(46,93,171,0.18);
    color: var(--ec-blue);
    cursor: pointer; font-family: inherit;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; flex-shrink: 0;
    transition: background 0.15s;
}
.msg-attach-dl:hover[b-blc40kmsqb] { background: rgba(46,93,171,0.12); }

/* ── Group members management ── */
.msg-member-row[b-blc40kmsqb] { cursor: default; }
.msg-member-remove[b-blc40kmsqb] {
    width: 30px; height: 30px; flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid rgba(239,68,68,0.25);
    background: #fff; color: #ef4444;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background 0.15s;
}
.msg-member-remove:hover[b-blc40kmsqb] { background: #fef2f2; }
.msg-member-remove:disabled[b-blc40kmsqb] { opacity: 0.5; cursor: default; }
.msg-member-delete[b-blc40kmsqb] {
    flex: 1; padding: 0.875rem 1.25rem;
    display: flex; align-items: center; justify-content: center; gap: 0.4rem;
    background: #fff; color: #ef4444;
    border: 1.5px solid rgba(239,68,68,0.35);
    border-radius: 1rem;
    font-weight: 700; font-family: inherit; cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.msg-member-delete:hover[b-blc40kmsqb] { background: #fef2f2; }
.msg-member-delete--confirm[b-blc40kmsqb] { background: #ef4444; color: #fff; border-color: #ef4444; }
.msg-member-delete--confirm:hover[b-blc40kmsqb] { background: #dc2626; }
.msg-member-delete:disabled[b-blc40kmsqb] { opacity: 0.6; cursor: default; }
/* /Components/Pages/Parent/AbsenceNoticesSheet.razor.rz.scp.css */
/* Absence-notices slide-over — port of ParentNoticesListModal (prototype 9173-9269).
   Blue-accented right-side sheet. Overlay/panel pattern mirrors
   ReportAbsenceSheet (.ras-*). */

.ans-overlay[b-n7380pxdpp] {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    display: flex; justify-content: flex-end;
    z-index: 1500;
    animation: ans-fade-b-n7380pxdpp .18s ease;
}
@keyframes ans-fade-b-n7380pxdpp { from { opacity: 0; } to { opacity: 1; } }

.ans-panel[b-n7380pxdpp] {
    width: min(640px, 96%);
    height: 100%;
    background: #fff;
    box-shadow: -12px 0 40px rgba(13, 23, 51, 0.16);
    display: flex; flex-direction: column;
    position: relative;
    overflow: hidden;
    animation: ans-slide-b-n7380pxdpp .22s ease-out;
}
@keyframes ans-slide-b-n7380pxdpp { from { transform: translateX(20px); opacity: 0.5; } to { transform: translateX(0); opacity: 1; } }

.ans-topbar[b-n7380pxdpp] {
    height: 3px;
    background: var(--ec-blue);
    flex-shrink: 0;
}

/* ── Header ──────────────────────────────────────────────────────── */
.ans-head[b-n7380pxdpp] {
    padding: 14px 22px;
    border-bottom: 1px solid var(--ec-border-soft);
    flex-shrink: 0;
    display: flex; align-items: center; gap: 11px;
}
.ans-tile[b-n7380pxdpp] {
    width: 42px; height: 42px; border-radius: 11px;
    background: color-mix(in srgb, var(--ec-blue) 12%, transparent);
    color: var(--ec-blue);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.ans-head-id[b-n7380pxdpp] { flex: 1; min-width: 0; }
.ans-eyebrow[b-n7380pxdpp] {
    font-size: 10.5px; font-weight: 800;
    color: var(--ec-blue);
    letter-spacing: 0.08em; text-transform: uppercase;
    margin: 0;
}
.ans-title[b-n7380pxdpp] {
    font-size: 17px; font-weight: 800;
    color: var(--ec-text);
    margin: 2px 0 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ans-new[b-n7380pxdpp] {
    padding: 8px 13px;
    background: var(--ec-blue);
    color: #fff;
    border: none; border-radius: 9px;
    font-size: 12px; font-weight: 800;
    cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 5px;
    flex-shrink: 0;
    transition: filter .12s, transform .12s;
}
.ans-new:hover[b-n7380pxdpp] { filter: brightness(1.05); transform: translateY(-1px); }
.ans-close[b-n7380pxdpp] {
    width: 32px; height: 32px; border-radius: 8px;
    background: #fff;
    border: 1px solid var(--ec-border);
    cursor: pointer; font-family: inherit;
    font-size: 13px; color: var(--ec-sub);
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .12s, color .12s, border-color .12s;
}
.ans-close:hover[b-n7380pxdpp] { background: var(--ec-bg); color: var(--ec-text); border-color: var(--ec-muted); }

/* ── Body ────────────────────────────────────────────────────────── */
.ans-body[b-n7380pxdpp] {
    flex: 1; overflow-y: auto;
    padding: 16px 22px;
    background: var(--ec-bg);
    display: flex; flex-direction: column; gap: 11px;
}

/* ── Empty state ── */
.ans-empty[b-n7380pxdpp] {
    padding: 40px 20px;
    text-align: center;
    background: #fff;
    border: 1px dashed var(--ec-border);
    border-radius: 12px;
}
.ans-empty-icon[b-n7380pxdpp] {
    width: 56px; height: 56px; border-radius: 14px;
    background: var(--ec-blue-lt);
    color: var(--ec-blue);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 10px;
}
.ans-empty-title[b-n7380pxdpp] {
    font-size: 14px; font-weight: 800; color: var(--ec-text);
    margin: 0 0 5px;
}
.ans-empty-body[b-n7380pxdpp] {
    font-size: 12px; color: var(--ec-muted); line-height: 1.5;
    margin: 0 0 14px;
}
.ans-empty-cta[b-n7380pxdpp] {
    padding: 10px 18px;
    background: var(--ec-blue); color: #fff;
    border: none; border-radius: 9px;
    font-size: 13px; font-weight: 800;
    cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 6px;
    transition: filter .12s, transform .12s;
}
.ans-empty-cta:hover[b-n7380pxdpp] { filter: brightness(1.05); transform: translateY(-1px); }

/* ── Notice cards ── */
.ans-card[b-n7380pxdpp] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-left-width: 4px;
    /* border-left-color is set inline per status */
    border-radius: 12px;
    padding: 13px 16px;
}

/* Top row: badge + reason + date */
.ans-card-top[b-n7380pxdpp] {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 6px; flex-wrap: wrap;
}
.ans-badge[b-n7380pxdpp] {
    font-size: 10px; font-weight: 800;
    /* color + background set inline */
    padding: 2px 8px; border-radius: 4px;
    letter-spacing: 0.06em;
}
.ans-reason-chip[b-n7380pxdpp] {
    font-size: 10px; font-weight: 800;
    color: var(--ec-amber);
    background: var(--ec-amber-lt);
    padding: 2px 7px; border-radius: 4px;
    letter-spacing: 0.04em;
}
.ans-date[b-n7380pxdpp] {
    font-size: 11.5px; color: var(--ec-text); font-weight: 700;
}

/* Status sub-line */
.ans-status-line[b-n7380pxdpp] {
    font-size: 11.5px; color: var(--ec-muted);
    margin: 0 0 7px;
}

/* Note box */
.ans-note[b-n7380pxdpp] {
    font-size: 12.5px; color: var(--ec-text); line-height: 1.55;
    padding: 9px 12px;
    background: var(--ec-bg);
    border-radius: 8px;
    border: 1px solid var(--ec-border-soft);
    margin-bottom: 7px;
    font-style: italic;
}

/* Attachment chip */
.ans-attach-wrap[b-n7380pxdpp] { margin-bottom: 7px; }
.ans-attach-chip[b-n7380pxdpp] {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 10px;
    background: var(--ec-bg);
    border: 1px solid var(--ec-border);
    border-radius: 7px;
    text-decoration: none;
    cursor: pointer; font-family: inherit;
    transition: background .12s, border-color .12s;
}
.ans-attach-chip:hover[b-n7380pxdpp] { background: var(--ec-border-soft); border-color: var(--ec-faint); }
.ans-attach-chip--nolink[b-n7380pxdpp] { cursor: default; }
.ans-attach-chip--nolink:hover[b-n7380pxdpp] { background: var(--ec-bg); border-color: var(--ec-border); }
.ans-attach-ic[b-n7380pxdpp] {
    width: 22px; height: 22px; border-radius: 5px;
    background: var(--ec-blue-lt); color: var(--ec-blue);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; flex-shrink: 0;
}
.ans-attach-name[b-n7380pxdpp] {
    font-size: 10.5px; font-weight: 800; color: var(--ec-text);
}
.ans-attach-size[b-n7380pxdpp] {
    font-size: 10px; color: var(--ec-muted);
}

/* Approved banner */
.ans-approved-banner[b-n7380pxdpp] {
    display: flex; align-items: center; gap: 7px;
    padding: 7px 11px;
    background: color-mix(in srgb, var(--ec-green-lt) 80%, transparent);
    border: 1px solid color-mix(in srgb, var(--ec-green) 30%, transparent);
    border-radius: 7px;
    margin-top: 3px;
}
.ans-approved-text[b-n7380pxdpp] {
    font-size: 10.5px; color: var(--ec-green); font-weight: 700;
    margin: 0;
}

/* ── Rejected: teacher's reply box + Resubmit CTA ── */
.ans-reply-box[b-n7380pxdpp] {
    padding: 10px 13px;
    background: color-mix(in srgb, var(--ec-red-lt) 40%, transparent);
    border: 1px solid color-mix(in srgb, var(--ec-red) 30%, transparent);
    border-radius: 8px;
    margin-top: 3px;
}
.ans-reply-label[b-n7380pxdpp] {
    font-size: 9.5px; font-weight: 800; color: var(--ec-red);
    letter-spacing: 0.08em; text-transform: uppercase;
    margin: 0 0 4px;
}
.ans-reply-text[b-n7380pxdpp] {
    font-size: 12px; color: var(--ec-text); line-height: 1.55;
    margin: 0;
}
.ans-resubmit[b-n7380pxdpp] {
    margin-top: 9px;
    padding: 7px 12px;
    background: var(--ec-red); color: #fff;
    border: none; border-radius: 7px;
    font-size: 11.5px; font-weight: 800;
    cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 5px;
    transition: filter .12s, transform .12s;
}
.ans-resubmit:hover[b-n7380pxdpp] { filter: brightness(1.05); transform: translateY(-1px); }

/* ── Footer ──────────────────────────────────────────────────────── */
.ans-foot[b-n7380pxdpp] {
    padding: 12px 22px;
    border-top: 1px solid var(--ec-border-soft);
    display: flex; justify-content: flex-end; gap: 8px;
    flex-shrink: 0;
    background: #fff;
}
.ans-close-btn[b-n7380pxdpp] {
    padding: 9px 16px;
    background: #fff; color: var(--ec-sub);
    border: 1px solid var(--ec-border); border-radius: 9px;
    font-size: 12.5px; font-weight: 700;
    cursor: pointer; font-family: inherit;
    transition: background .12s, border-color .12s;
}
.ans-close-btn:hover[b-n7380pxdpp] { background: var(--ec-bg); border-color: var(--ec-muted); }
/* /Components/Pages/Parent/ActivityFeed.razor.rz.scp.css */
.sf-page[b-r8af8z08f5] {
    padding: 0;
    /* 16px (1rem) gap so the whole feed — filters→first post AND post→post —
       shares one tight rhythm, matching the other KG parent pages. */
    display: flex; flex-direction: column; gap: 1rem;
    max-width: 1600px; margin: 0 auto;
}

/* ── Header ── [DEPRECATED - replaced by af-header styles] ──
   Keeping @media rule for responsive layout on remaining components */

/* ── Skeleton ── */
.sf-skeleton[b-r8af8z08f5] {
    display: flex; gap: 1rem; align-items: center;
    padding: 1.25rem;
    background: var(--ec-card); border-radius: 14px;
}
.sf-sk-avatar[b-r8af8z08f5] { width: 44px; height: 44px; border-radius: 50%; background: #e2e8f0; flex-shrink: 0; animation: sf-shimmer-b-r8af8z08f5 1.4s infinite; }
.sf-sk-lines[b-r8af8z08f5] { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; }
.sf-sk-line[b-r8af8z08f5] { height: 10px; border-radius: 99px; background: #e2e8f0; animation: sf-shimmer-b-r8af8z08f5 1.4s infinite; }
.sf-sk-line--w70[b-r8af8z08f5] { width: 70%; }
.sf-sk-line--w45[b-r8af8z08f5] { width: 45%; }
@keyframes sf-shimmer-b-r8af8z08f5 { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ── Post (prototype lines 1987-2073) ── */
.sf-post[b-r8af8z08f5] {
    background: var(--ec-card);
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    overflow: hidden;
}
.sf-post-header[b-r8af8z08f5] {
    display: flex; align-items: center; gap: 11px;
    padding: 14px 20px 10px;
}
.sf-avatar[b-r8af8z08f5] {
    width: 38px; height: 38px; border-radius: 50%;
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800;
    flex-shrink: 0;
    /* background set inline via AvatarColorFor */
}
.sf-post-meta[b-r8af8z08f5] { display: flex; flex-direction: column; gap: 1px; }
.sf-poster-name[b-r8af8z08f5] { font-size: 13px; font-weight: 800; color: var(--ec-text); }
.sf-post-sub[b-r8af8z08f5] { font-size: 11px; color: var(--ec-muted); }

/* ── Gallery ── */
.sf-gallery-wrap[b-r8af8z08f5] { padding: 0 20px 12px; }
.sf-gallery[b-r8af8z08f5] { width: 100%; overflow: hidden; cursor: pointer; border-radius: 10px; border: 1px solid var(--ec-border-soft); }
.sf-gallery--single[b-r8af8z08f5] { display: flex; align-items: center; justify-content: center; min-height: 320px; max-height: 70vh; background: var(--ec-bg); }
.sf-gallery--single .sf-gallery-cell[b-r8af8z08f5] { width: 100%; height: 100%; min-height: 320px; max-height: 70vh; display: flex; align-items: center; justify-content: center; }
.sf-gallery--single .sf-media-img[b-r8af8z08f5] { width: 100%; height: auto; max-height: 70vh; object-fit: contain; aspect-ratio: auto; }
.sf-gallery--duo[b-r8af8z08f5] { display: grid; grid-template-columns: 1fr 1fr; aspect-ratio: 2 / 1; gap: 4px; max-height: 380px; }
.sf-gallery--trio[b-r8af8z08f5] { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 3 / 2; gap: 4px; max-height: 420px; }
.sf-gallery--trio .sf-gallery-cell:first-child[b-r8af8z08f5] { grid-row: 1 / 3; }
.sf-gallery--quad[b-r8af8z08f5] { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 1 / 1; gap: 4px; max-height: 420px; }
.sf-gallery-cell[b-r8af8z08f5] { overflow: hidden; position: relative; }
.sf-media-img[b-r8af8z08f5] { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--ec-bg); }
.sf-gallery--single .sf-media-video[b-r8af8z08f5] { width: 100%; min-height: 320px; max-height: 70vh; }
.sf-media-video[b-r8af8z08f5] { background: #1e3256; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.sf-play-icon[b-r8af8z08f5] { font-size: 3rem; color: white; opacity: 0.9; }
.sf-gallery-more[b-r8af8z08f5] { position: absolute; inset: 0; background: rgba(30,50,86,0.55); display: flex; align-items: center; justify-content: center; color: white; font-size: 1.75rem; font-weight: 900; }
@media (min-width: 768px) {
    .sf-gallery--single[b-r8af8z08f5] { max-height: 560px; }
    .sf-gallery--single .sf-gallery-cell[b-r8af8z08f5] { max-height: 560px; }
    .sf-gallery--single .sf-media-img[b-r8af8z08f5] { max-height: 560px; }
}

/* ── Post body ── */
.sf-post-body[b-r8af8z08f5] {
    padding: 0 20px 12px;
    display: flex; flex-direction: column; gap: 6px;
}
.sf-post-title[b-r8af8z08f5] {
    font-size: 16px; font-weight: 800;
    color: var(--ec-text); margin: 0;
    letter-spacing: -0.005em;
}
.sf-post-desc[b-r8af8z08f5] {
    font-size: 13px; color: var(--ec-sub);
    line-height: 1.55; margin: 0;
}
.sf-post-desc--clamped[b-r8af8z08f5] { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sf-read-more[b-r8af8z08f5] { background: none; border: none; color: var(--ec-blue); font-size: 0.82rem; font-weight: 700; cursor: pointer; padding: 0; font-family: inherit; }
.sf-read-more:hover[b-r8af8z08f5] { text-decoration: underline; }
.sf-tags[b-r8af8z08f5] { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.25rem; }
.sf-tag[b-r8af8z08f5] {
    font-size: 0.72rem; font-weight: 700;
    color: var(--ec-blue); background: rgba(46,93,171,0.08);
    border-radius: 99px; padding: 0.2rem 0.65rem;
}

/* ── Reaction bar (prototype lines 2019-2044) ── */
.sf-reactions-bar[b-r8af8z08f5] {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 20px 14px;
    border-top: 1px solid var(--ec-border-soft);
    margin-top: 4px;
    gap: 6px;
}
.sf-reaction-btns[b-r8af8z08f5] { display: inline-flex; align-items: center; gap: 6px; }
.sf-reaction-btn[b-r8af8z08f5] {
    background: var(--ec-bg);
    border: 1px solid var(--ec-border);
    border-radius: 18px;
    padding: 4px 9px;
    color: var(--ec-sub);
    cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 13px; line-height: 1;
    transition: background .12s, border-color .12s, color .12s;
}
.sf-reaction-btn i[b-r8af8z08f5] { font-size: 13px; }
.sf-reaction-btn:hover[b-r8af8z08f5] { border-color: var(--ec-blue); color: var(--ec-blue); }
.sf-reaction-btn--active[b-r8af8z08f5] {
    background: var(--ec-blue-lt);
    border-color: var(--ec-blue);
    color: var(--ec-blue);
}
.sf-reaction-total[b-r8af8z08f5] {
    font-size: 11.5px; color: var(--ec-text);
    font-weight: 700; margin-left: 4px;
}
.sf-reaction-counts[b-r8af8z08f5] { display: inline-flex; align-items: center; gap: 6px; }
.sf-comment-count-btn[b-r8af8z08f5] {
    background: transparent; border: 1px solid transparent;
    border-radius: 9px; padding: 5px 11px;
    font-size: 12px; color: var(--ec-sub);
    font-weight: 700; cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 5px;
    transition: background .12s, color .12s, border-color .12s;
}
.sf-comment-count-btn:hover[b-r8af8z08f5] {
    background: var(--ec-blue-gh);
    border-color: var(--ec-blue-lt);
    color: var(--ec-blue);
}
.sf-comment-count-btn--active[b-r8af8z08f5] {
    background: var(--ec-blue-gh);
    border-color: var(--ec-blue-lt);
    color: var(--ec-blue);
}
.sf-comments-off[b-r8af8z08f5] {
    font-size: 11.5px; color: var(--ec-muted);
    display: inline-flex; align-items: center; gap: 4px;
}

/* ── Inline comments (prototype PWFeed lines 2058-2080) ── */
.sf-comments[b-r8af8z08f5] {
    padding: 4px 20px 16px;
    display: flex; flex-direction: column; gap: 12px;
}
.sf-comments-loading[b-r8af8z08f5] { display: flex; justify-content: center; padding: 1rem 0; }
.sf-comment[b-r8af8z08f5] { display: flex; gap: 10px; align-items: flex-start; }
.sf-comment-avatar[b-r8af8z08f5] {
    width: 32px; height: 32px; border-radius: 50%;
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; flex-shrink: 0;
    /* background set inline via AvatarColorFor */
}
.sf-comment-main[b-r8af8z08f5] { flex: 1; min-width: 0; }
.sf-comment-bubble[b-r8af8z08f5] {
    background: var(--ec-bg);
    border-radius: 14px 14px 14px 4px;
    padding: 10px 13px;
}
.sf-comment-name[b-r8af8z08f5] { font-size: 12px; font-weight: 800; color: var(--ec-text); margin: 0 0 3px; }
.sf-comment-body[b-r8af8z08f5] { font-size: 13px; color: var(--ec-sub); line-height: 1.5; margin: 0; word-break: break-word; white-space: pre-wrap; }
.sf-comment-actions[b-r8af8z08f5] { display: flex; gap: 14px; align-items: center; margin-top: 5px; padding-left: 13px; }
.sf-comment-action[b-r8af8z08f5] { background: none; border: none; padding: 0; font-size: 11px; font-weight: 700; color: var(--ec-muted); cursor: pointer; font-family: inherit; }
.sf-comment-action:hover[b-r8af8z08f5] { color: var(--ec-blue); }
.sf-comment-action--danger:hover[b-r8af8z08f5] { color: var(--ec-alert); }
.sf-comment-when[b-r8af8z08f5] { font-size: 11px; color: var(--ec-muted); }

/* edit mode */
.sf-comment-edit[b-r8af8z08f5] { display: flex; flex-direction: column; gap: 8px; }
.sf-comment-edit-input[b-r8af8z08f5] {
    width: 100%; resize: vertical; min-height: 44px;
    border: 1px solid var(--ec-border); border-radius: 10px;
    padding: 9px 12px; font-size: 13px; font-family: inherit;
    color: var(--ec-text); background: #fff; outline: none; line-height: 1.5;
}
.sf-comment-edit-input:focus[b-r8af8z08f5] { border-color: var(--ec-blue); box-shadow: 0 0 0 2px rgba(46,93,171,0.15); }
.sf-comment-edit-actions[b-r8af8z08f5] { display: flex; gap: 8px; justify-content: flex-end; }
.sf-comment-edit-cancel[b-r8af8z08f5] { background: transparent; border: none; padding: 6px 12px; font-size: 12px; font-weight: 700; color: var(--ec-sub); cursor: pointer; font-family: inherit; border-radius: 8px; }
.sf-comment-edit-cancel:hover[b-r8af8z08f5] { background: var(--ec-bg); }
.sf-comment-edit-save[b-r8af8z08f5] { background: var(--ec-blue); border: none; padding: 6px 14px; font-size: 12px; font-weight: 800; color: #fff; cursor: pointer; font-family: inherit; border-radius: 8px; }
.sf-comment-edit-save:disabled[b-r8af8z08f5] { background: var(--ec-border-soft); color: var(--ec-muted); cursor: not-allowed; }

/* reply composer (prototype ReplyComposer lines 2326+) */
.sf-composer[b-r8af8z08f5] { background: #fff; border: 1px solid var(--ec-border); border-radius: 12px; padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start; }
.sf-composer-avatar[b-r8af8z08f5] {
    width: 32px; height: 32px; border-radius: 50%;
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; flex-shrink: 0;
}
.sf-composer-main[b-r8af8z08f5] { flex: 1; min-width: 0; }
.sf-composer-input[b-r8af8z08f5] { width: 100%; resize: none; border: none; outline: none; background: transparent; font-family: inherit; font-size: 13px; color: var(--ec-text); line-height: 1.5; padding: 0; }
.sf-composer-footer[b-r8af8z08f5] { display: flex; align-items: center; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--ec-border-soft); }
.sf-composer-send[b-r8af8z08f5] { margin-left: auto; background: var(--ec-blue); color: #fff; border: none; border-radius: 8px; padding: 6px 14px; font-size: 12px; font-weight: 800; cursor: pointer; font-family: inherit; transition: opacity .15s; }
.sf-composer-send:disabled[b-r8af8z08f5] { background: var(--ec-border-soft); color: var(--ec-muted); cursor: not-allowed; }

/* ── Load more ── */
.sf-load-more[b-r8af8z08f5] {
    display: block; width: 100%;
    background: var(--ec-card);
    border: 1.5px solid rgba(46,93,171,0.2); border-radius: 1rem;
    padding: 0.875rem;
    font-size: 0.85rem; font-weight: 700;
    color: var(--ec-blue); cursor: pointer; font-family: inherit;
}
.sf-load-more:hover[b-r8af8z08f5] { background: rgba(46,93,171,0.06); }
.sf-mini-spinner[b-r8af8z08f5] {
    display: inline-block; width: 16px; height: 16px;
    border: 2px solid rgba(46,93,171,0.2); border-top-color: var(--ec-blue);
    border-radius: 50%; animation: sf-spin-b-r8af8z08f5 0.7s linear infinite;
}
@keyframes sf-spin-b-r8af8z08f5 { to { transform: rotate(360deg); } }

/* ── Lightbox (prototype Lightbox lines 2176-2277) ── */
.sf-lb[b-r8af8z08f5] { position: fixed; inset: 0; z-index: 2000; background: rgba(8,10,20,0.94); display: flex; align-items: center; justify-content: center; outline: none; animation: sf-lb-fade-b-r8af8z08f5 .2s ease; }
@keyframes sf-lb-fade-b-r8af8z08f5 { from { opacity: 0; } to { opacity: 1; } }
.sf-lb-top[b-r8af8z08f5] {
    position: absolute; top: 0; left: 0; right: 0; z-index: 5;
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 18px; color: #fff;
    background: linear-gradient(to bottom, rgba(0,0,0,0.55), transparent);
}
.sf-lb-poster[b-r8af8z08f5] { font-size: 13px; font-weight: 700; margin: 0; }
.sf-lb-count[b-r8af8z08f5] { font-size: 11px; color: rgba(255,255,255,0.7); margin: 2px 0 0; }
.sf-lb-top-actions[b-r8af8z08f5] { display: flex; gap: 8px; }
.sf-lb-icon-btn[b-r8af8z08f5] {
    width: 36px; height: 36px; border-radius: 10px;
    background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.18);
    color: #fff; cursor: pointer; text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px; backdrop-filter: blur(6px); transition: background .15s;
}
.sf-lb-icon-btn:hover[b-r8af8z08f5] { background: rgba(255,255,255,0.26); color: #fff; }
.sf-lb-arrow[b-r8af8z08f5] {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
    width: 48px; height: 48px; border-radius: 50%;
    background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18);
    color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; backdrop-filter: blur(6px); transition: background .15s;
}
.sf-lb-arrow:hover[b-r8af8z08f5] { background: rgba(255,255,255,0.26); }
.sf-lb-arrow--left[b-r8af8z08f5] { left: 20px; }
.sf-lb-arrow--right[b-r8af8z08f5] { right: 20px; }
.sf-lb-stage[b-r8af8z08f5] {
    width: min(720px, 80%); height: min(70vh, 540px);
    border-radius: 14px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: #000; box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.sf-lb-media[b-r8af8z08f5] { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.sf-lb-thumbs[b-r8af8z08f5] {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 5;
    display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
    padding: 18px 24px;
    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
}
.sf-lb-thumb[b-r8af8z08f5] {
    width: 48px; height: 36px; border-radius: 6px; overflow: hidden;
    border: 2px solid rgba(255,255,255,0.3); cursor: pointer; padding: 0;
    background: #000; opacity: 0.65; transition: opacity .15s, border-color .15s;
    display: inline-flex; align-items: center; justify-content: center;
}
.sf-lb-thumb img[b-r8af8z08f5] { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-lb-thumb--active[b-r8af8z08f5] { border-color: #fff; opacity: 1; }
.sf-lb-thumb-video[b-r8af8z08f5] { width: 100%; height: 100%; background: #1e3256; color: #fff; font-size: 16px; display: flex; align-items: center; justify-content: center; }

@media (max-width: 600px) {
    .sf-page[b-r8af8z08f5] { padding: 1rem; gap: 1rem; }
}

/* ── Filter chips ── */
/* Filters are the first .sf-page flex child (16px gap). -8px TOP only pulls the
   row tight to the page top (24px gutter → 16px); no bottom margin, so the 16px
   flex gap alone spaces it from the first post (a bottom margin would subtract
   from the gap and over-tighten filters→post to 8px). */
.af-filters[b-r8af8z08f5] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: -8px 0 0;
}
.af-filter-chip[b-r8af8z08f5] {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--ec-card);
    border: 1px solid var(--ec-border);
    color: var(--ec-sub);
    border-radius: 9px;
    padding: 7px 13px;
    font-size: 12px; font-weight: 700;
    cursor: pointer; font-family: inherit;
    transition: border-color .12s, background .12s;
}
.af-filter-chip:hover[b-r8af8z08f5] { border-color: var(--ec-blue); }
.af-filter-chip-active[b-r8af8z08f5] {
    background: var(--ec-blue);
    border-color: var(--ec-blue);
    color: #fff;
}
.af-filter-count[b-r8af8z08f5] {
    background: var(--ec-border-soft);
    color: var(--ec-muted);
    padding: 1px 6px;
    border-radius: 5px;
    font-size: 10px; font-weight: 700;
}
.af-filter-chip-active .af-filter-count[b-r8af8z08f5] {
    background: rgba(255,255,255,.22);
    color: #fff;
}
.ec-stage-kindergarten .af-filter-chip-active[b-r8af8z08f5] {
    background: var(--ec-primary);
    border-color: var(--ec-primary);
}

.af-post-tag[b-r8af8z08f5] {
    margin-left: auto;
    flex-shrink: 0;
}
/* /Components/Pages/Parent/AnnouncementDetailSheet.razor.rz.scp.css */
.ads-overlay[b-k3t08hq3w9] {
    position: fixed; inset: 0;
    background: rgba(13, 23, 51, 0.42);
    backdrop-filter: blur(2px);
    display: flex; justify-content: flex-end;
    z-index: 1500;
    animation: ads-fade-b-k3t08hq3w9 .18s ease;
}
@keyframes ads-fade-b-k3t08hq3w9 { from { opacity: 0; } to { opacity: 1; } }

.ads-panel[b-k3t08hq3w9] {
    width: min(560px, 92%);
    height: 100%;
    background: #fff;
    box-shadow: -12px 0 40px rgba(13, 23, 51, 0.16);
    display: flex; flex-direction: column;
    position: relative;
    overflow: hidden;
    animation: ads-slide-b-k3t08hq3w9 .25s ease;
}
@keyframes ads-slide-b-k3t08hq3w9 { from { transform: translateX(20px); opacity: 0.5; } to { transform: translateX(0); opacity: 1; } }

.ads-close[b-k3t08hq3w9] {
    position: absolute; top: 14px; right: 14px; z-index: 5;
    width: 34px; height: 34px; border-radius: 10px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
    border: 1px solid var(--ec-border);
    cursor: pointer; font-family: inherit;
    font-size: 14px; color: var(--ec-sub);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .12s, color .12s, border-color .12s;
}
.ads-close:hover[b-k3t08hq3w9] { background: var(--ec-bg); color: var(--ec-text); border-color: var(--ec-muted); }

/* ── Header ──────────────────────────────────────────────────────── */
.ads-head[b-k3t08hq3w9] {
    padding: 22px 26px 20px;
    border-bottom: 1px solid var(--ec-border);
    background: linear-gradient(135deg,
        color-mix(in oklab, var(--type-color) 14%, #fff) 0%,
        color-mix(in oklab, var(--type-color) 6%, #fff) 60%,
        #fff 100%);
}
.ads-head-row[b-k3t08hq3w9] {
    display: flex; align-items: flex-start; gap: 14px;
    padding-right: 48px;
}
.ads-tile[b-k3t08hq3w9] {
    width: 54px; height: 54px; border-radius: 14px;
    background: color-mix(in oklab, var(--type-color) 18%, transparent);
    color: var(--type-color);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    box-shadow: 0 4px 14px color-mix(in oklab, var(--type-color) 22%, transparent);
}
.ads-head-id[b-k3t08hq3w9] { flex: 1; min-width: 0; }
.ads-head-pills[b-k3t08hq3w9] {
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    margin-bottom: 5px;
}
.ads-type-pill[b-k3t08hq3w9] {
    font-size: 10px; font-weight: 800;
    color: var(--type-color);
    letter-spacing: 0.08em; text-transform: uppercase;
}
.ads-pin-pill[b-k3t08hq3w9] {
    background: #fff3e0; color: #b05900;
    font-size: 9px; font-weight: 800;
    padding: 2px 6px; border-radius: 4px;
    letter-spacing: 0.05em;
    display: inline-flex; align-items: center; gap: 3px;
}
.ads-prio-pill[b-k3t08hq3w9] {
    background: var(--prio-bg);
    color: var(--prio-fg);
    font-size: 9px; font-weight: 800;
    padding: 2px 6px; border-radius: 4px;
    letter-spacing: 0.05em;
}
.ads-unread-dot[b-k3t08hq3w9] {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--ec-blue);
}
.ads-title[b-k3t08hq3w9] {
    font-size: 22px; font-weight: 800;
    color: var(--ec-text);
    margin: 4px 0 0;
    letter-spacing: -0.01em;
    line-height: 1.25;
}
.ads-meta[b-k3t08hq3w9] {
    display: flex; align-items: center; gap: 7px;
    margin: 10px 0 0;
    font-size: 11.5px;
    color: var(--ec-muted);
    flex-wrap: wrap;
}
.ads-meta-avatar[b-k3t08hq3w9] {
    width: 22px; height: 22px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 800;
}
.ads-meta-sep[b-k3t08hq3w9] { color: var(--ec-faint); }
.ads-meta i[b-k3t08hq3w9] { font-size: 11px; }

/* ── Body ────────────────────────────────────────────────────────── */
.ads-body[b-k3t08hq3w9] {
    flex: 1; overflow-y: auto;
    padding: 18px 24px;
    background: var(--ec-bg);
    display: flex; flex-direction: column; gap: 12px;
}

.ads-content-card[b-k3t08hq3w9] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 12px;
    padding: 16px 20px;
}
.ads-content[b-k3t08hq3w9] {
    font-size: 14px;
    color: var(--ec-text);
    line-height: 1.65;
    margin: 0;
    white-space: pre-wrap;
}

.ads-card[b-k3t08hq3w9] { background: #fff; border: 1px solid var(--ec-border); border-radius: 12px; }
.ads-card--list[b-k3t08hq3w9] { padding: 14px 16px 16px; }
.ads-eyebrow[b-k3t08hq3w9] {
    font-size: 10px; font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.1em; text-transform: uppercase;
    margin: 0 0 10px;
}
.ads-eyebrow--padded[b-k3t08hq3w9] { margin: 0 0 10px; }

.ads-media-grid[b-k3t08hq3w9] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
.ads-media-tile[b-k3t08hq3w9] {
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    background: var(--ec-bg);
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    color: var(--ec-muted);
    font-size: 22px;
}
.ads-media-tile img[b-k3t08hq3w9] { width: 100%; height: 100%; object-fit: cover; }

/* ── Acknowledge card ────────────────────────────────────────────── */
.ads-ack-card[b-k3t08hq3w9] {
    background: linear-gradient(135deg, var(--ec-blue-gh), #fff);
    border: 1px solid var(--ec-blue-lt);
    border-radius: 12px;
    padding: 14px 18px;
}
.ads-ack-card--done[b-k3t08hq3w9] {
    background: linear-gradient(135deg, var(--ec-green-lt), #fff);
    border-color: rgba(22, 163, 74, 0.3);
}
.ads-ack-row[b-k3t08hq3w9] {
    display: flex; align-items: center; gap: 13px;
    flex-wrap: wrap;
}
.ads-ack-icon[b-k3t08hq3w9] {
    width: 42px; height: 42px; border-radius: 11px;
    background: var(--ec-blue);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.ads-ack-icon--done[b-k3t08hq3w9] {
    background: var(--ec-green);
}
.ads-ack-body[b-k3t08hq3w9] { flex: 1; min-width: 0; }
.ads-ack-title[b-k3t08hq3w9] { font-size: 13.5px; font-weight: 800; color: var(--ec-text); margin: 0; }
.ads-ack-sub[b-k3t08hq3w9] { font-size: 11.5px; color: var(--ec-sub); margin: 2px 0 0; line-height: 1.45; }

.ads-ack-btn[b-k3t08hq3w9] {
    background: var(--ec-blue);
    color: #fff;
    border: none; border-radius: 9px;
    padding: 9px 14px;
    font-size: 12.5px; font-weight: 800;
    cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 6px;
    transition: filter .12s, transform .12s;
}
.ads-ack-btn:hover:not(:disabled)[b-k3t08hq3w9] { filter: brightness(1.05); transform: translateY(-1px); }
.ads-ack-btn:disabled[b-k3t08hq3w9] { opacity: 0.65; cursor: not-allowed; }
.ads-spinner[b-k3t08hq3w9] {
    width: 14px; height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff; border-radius: 50%;
    animation: ads-spin-b-k3t08hq3w9 .7s linear infinite;
}
@keyframes ads-spin-b-k3t08hq3w9 { to { transform: rotate(360deg); } }

@media (max-width: 600px) {
    .ads-media-grid[b-k3t08hq3w9] { grid-template-columns: repeat(3, 1fr); }
}
/* /Components/Pages/Parent/ChildProfile.razor.rz.scp.css */
.cp-page[b-p41jrzw2hi] {
    padding: 0;
    display: flex; flex-direction: column; gap: 1.5rem;
    max-width: 1600px; margin: 0 auto;
}

/* ── Back ── */
.cp-back[b-p41jrzw2hi] { margin-bottom: 14px; }
.cp-back-btn[b-p41jrzw2hi] {
    display: inline-flex; align-items: center; gap: 7px;
    background: transparent; border: none;
    color: var(--ec-blue);
    font-size: 12.5px; font-weight: 700;
    cursor: pointer; font-family: inherit;
    padding: 0;
}
.cp-back-btn:hover[b-p41jrzw2hi] { text-decoration: underline; }

/* ── Loading ── */
.cp-loading[b-p41jrzw2hi] {
    display: flex; flex-direction: column; align-items: center;
    padding: 5rem 2rem; gap: 1rem;
    color: var(--ec-sub);
}
.cp-spinner[b-p41jrzw2hi] {
    width: 40px; height: 40px;
    border: 3px solid rgba(46,93,171,0.15);
    border-top-color: var(--ec-blue);
    border-radius: 50%;
    animation: cp-spin-b-p41jrzw2hi 0.75s linear infinite;
}
@keyframes cp-spin-b-p41jrzw2hi { to { transform: rotate(360deg); } }

/* ── Header ── */
.cp-header[b-p41jrzw2hi] {
    display: flex; align-items: center; gap: 18px;
    background: var(--ec-card);
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    padding: 20px 24px;
    margin-bottom: 18px;
}
.cp-avatar[b-p41jrzw2hi] {
    width: 80px; height: 80px;
    border-radius: 50%;
    background: var(--ec-school-tint);
    color: var(--ec-blue);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 800;
    overflow: hidden;
    flex-shrink: 0;
}
.cp-avatar img[b-p41jrzw2hi] { width: 100%; height: 100%; object-fit: cover; }
.ec-stage-kindergarten .cp-avatar[b-p41jrzw2hi] { background: var(--ec-kg-tint); color: var(--ec-primary); }
.cp-meta[b-p41jrzw2hi] { flex: 1; min-width: 0; }
.cp-name[b-p41jrzw2hi] { font-size: 24px; font-weight: 800; color: var(--ec-text); margin: 0; letter-spacing: -0.01em; }
.cp-meta-row[b-p41jrzw2hi] {
    display: flex; align-items: center; gap: 8px;
    margin-top: 8px; flex-wrap: wrap;
}
.cp-meta-text[b-p41jrzw2hi] { font-size: 12.5px; color: var(--ec-sub); font-weight: 600; }

@media (max-width: 900px) {
}
@media (max-width: 600px) {
    .cp-page[b-p41jrzw2hi] { padding: 1rem; gap: 1rem; }
    .cp-header[b-p41jrzw2hi] { padding: 1.25rem; }
}

/* ── Tab strip ── */
.cp-tabs[b-p41jrzw2hi] {
    display: flex; gap: 4px;
    background: var(--ec-card);
    border: 1px solid var(--ec-border);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 18px;
    overflow-x: auto;
}
.cp-tab[b-p41jrzw2hi] {
    display: inline-flex; align-items: center; gap: 7px;
    background: transparent;
    border: none;
    color: var(--ec-sub);
    font-size: 12.5px; font-weight: 700;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer; font-family: inherit;
    transition: background .12s, color .12s;
    white-space: nowrap;
}
.cp-tab:hover[b-p41jrzw2hi] { color: var(--ec-text); background: var(--ec-bg); }
.cp-tab--active[b-p41jrzw2hi] {
    background: var(--ec-blue); color: #fff;
}
.cp-tab--active:hover[b-p41jrzw2hi] { background: var(--ec-blue-dk); color: #fff; }
.ec-stage-kindergarten .cp-tab--active[b-p41jrzw2hi] {
    background: var(--ec-primary);
}
.ec-stage-kindergarten .cp-tab--active:hover[b-p41jrzw2hi] { background: var(--ec-primary-dk); }

/* ── Tab content ── */
.cp-tab-content[b-p41jrzw2hi] { display: flex; flex-direction: column; gap: 16px; }
.cp-tab-pane[b-p41jrzw2hi] {
    background: var(--ec-card);
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    padding: 22px 24px;
}
.cp-section-title[b-p41jrzw2hi] {
    font-size: 16px; font-weight: 800;
    color: var(--ec-text);
    margin: 0 0 16px;
    letter-spacing: -0.01em;
}
.cp-pane-text[b-p41jrzw2hi] { font-size: 13px; color: var(--ec-sub); line-height: 1.6; margin: 0 0 14px; }
.cp-pane-actions[b-p41jrzw2hi] { display: flex; gap: 8px; flex-wrap: wrap; }
.cp-link-btn[b-p41jrzw2hi] {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--ec-bg);
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    padding: 8px 14px;
    font-size: 12.5px; font-weight: 700;
    color: var(--ec-blue);
    cursor: pointer; font-family: inherit;
}
.cp-link-btn:hover[b-p41jrzw2hi] { border-color: var(--ec-blue); }

.cp-overview-grid[b-p41jrzw2hi] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@@media (max-width: 600px) { .cp-overview-grid[b-p41jrzw2hi] { grid-template-columns: 1fr; } }
.cp-tile[b-p41jrzw2hi] {
    background: var(--ec-bg);
    border: 1px solid var(--ec-border-soft);
    border-radius: 10px;
    padding: 12px 14px;
}
.cp-tile-label[b-p41jrzw2hi] { font-size: 10px; font-weight: 700; color: var(--ec-muted); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 4px; }
.cp-tile-value[b-p41jrzw2hi] { font-size: 13.5px; font-weight: 700; color: var(--ec-text); margin: 0; }

.cp-health-grid[b-p41jrzw2hi] { display: flex; flex-direction: column; gap: 12px; }
.cp-info-card[b-p41jrzw2hi] {
    background: var(--ec-bg);
    border: 1px solid var(--ec-border-soft);
    border-radius: 10px;
    padding: 14px 16px;
}
.cp-info-label[b-p41jrzw2hi] { font-size: 11px; font-weight: 700; color: var(--ec-muted); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 6px; }
.cp-info-value[b-p41jrzw2hi] { font-size: 13px; color: var(--ec-text); line-height: 1.5; margin: 0; }
.cp-info-muted[b-p41jrzw2hi] { color: var(--ec-muted); font-style: italic; }

.cp-people-list[b-p41jrzw2hi] { display: flex; flex-direction: column; gap: 10px; }
.cp-person[b-p41jrzw2hi] {
    display: flex; align-items: center; gap: 12px;
    background: var(--ec-bg);
    border: 1px solid var(--ec-border-soft);
    border-radius: 10px;
    padding: 11px 14px;
}
.cp-person-avatar[b-p41jrzw2hi] {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--ec-school-tint);
    color: var(--ec-blue);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800;
    flex-shrink: 0;
}
.cp-person-body[b-p41jrzw2hi] { flex: 1; min-width: 0; }
.cp-person-name[b-p41jrzw2hi] { font-size: 13px; font-weight: 700; color: var(--ec-text); margin: 0; }
.cp-person-role[b-p41jrzw2hi] { font-size: 11px; color: var(--ec-sub); margin: 2px 0 0; }
/* /Components/Pages/Parent/Documents/DocSigningPanel.razor.rz.scp.css */
/* DocSigningPanel — ported from DocSigningPanel inline styles in the prototype
   (~line 9597). Lives at the bottom of the document viewer slide-over. The
   accent is the parent-portal blue token. */

.dsp[b-jwsqon9e4z] {
    background: #fff;
    border-top: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

/* Header */
.dsp-head[b-jwsqon9e4z] {
    padding: 12px 18px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #f1f5f9;
}

.dsp-head-text[b-jwsqon9e4z] {
    flex: 1;
    min-width: 0;
}

.dsp-eyebrow[b-jwsqon9e4z] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-blue);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}

.dsp-sub[b-jwsqon9e4z] {
    font-size: 12.5px;
    color: #64748b;
    margin: 2px 0 0;
}

.dsp-cancel-link[b-jwsqon9e4z] {
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    padding: 4px 8px;
    text-decoration: underline;
}

/* Method tabs */
.dsp-tabs-wrap[b-jwsqon9e4z] {
    padding: 10px 18px 6px;
}

.dsp-tabs[b-jwsqon9e4z] {
    display: flex;
    background: #f1f5f9;
    border-radius: 9px;
    padding: 3px;
    gap: 2px;
}

.dsp-tab[b-jwsqon9e4z] {
    flex: 1;
    padding: 8px 14px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
    color: #64748b;
    cursor: pointer;
    font-family: inherit;
}

.dsp-tab--active[b-jwsqon9e4z] {
    background: #fff;
    color: var(--ec-blue);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}

/* Body */
.dsp-body[b-jwsqon9e4z] {
    padding: 10px 18px 6px;
}

/* Draw tab */
.dsp-canvas-wrap[b-jwsqon9e4z] {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    background: #f8fafc;
}

.dsp-canvas[b-jwsqon9e4z] {
    width: 100%;
    height: 180px;
    display: block;
    touch-action: none;
    cursor: crosshair;
}

.dsp-draw-actions[b-jwsqon9e4z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}

.dsp-clear[b-jwsqon9e4z] {
    padding: 5px 11px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    font-family: inherit;
}

.dsp-use-name[b-jwsqon9e4z] {
    padding: 5px 11px;
    background: transparent;
    border: none;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ec-blue);
    cursor: pointer;
    font-family: inherit;
    text-decoration: underline;
}

/* Type tab */
.dsp-name-input[b-jwsqon9e4z] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13.5px;
    font-family: inherit;
    color: #0f172a;
    box-sizing: border-box;
    outline: none;
}

.dsp-preview[b-jwsqon9e4z] {
    margin-top: 8px;
    padding: 14px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dsp-preview-text[b-jwsqon9e4z] {
    font-size: 38px;
    color: #0f172a;
    line-height: 1;
}

.dsp-fonts[b-jwsqon9e4z] {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.dsp-font-chip[b-jwsqon9e4z] {
    padding: 6px 12px;
    background: #fff;
    color: #475569;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}

.dsp-font-chip--active[b-jwsqon9e4z] {
    background: var(--ec-blue);
    color: #fff;
    border: 1px solid var(--ec-blue);
}

/* Identity confirmation */
.dsp-consent[b-jwsqon9e4z] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 10px 18px 6px;
    cursor: pointer;
}

.dsp-consent-box[b-jwsqon9e4z] {
    margin-top: 3px;
    flex-shrink: 0;
    accent-color: var(--ec-blue);
}

.dsp-consent-text[b-jwsqon9e4z] {
    font-size: 12px;
    color: #334155;
    line-height: 1.5;
}

/* Footer */
.dsp-footer[b-jwsqon9e4z] {
    padding: 10px 18px 14px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.dsp-btn-secondary[b-jwsqon9e4z] {
    padding: 9px 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    font-family: inherit;
}

.dsp-btn-primary[b-jwsqon9e4z] {
    padding: 9px 18px;
    background: var(--ec-blue);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
}

.dsp-btn-primary:disabled[b-jwsqon9e4z] {
    background: #cbd5e1;
    cursor: not-allowed;
}
/* /Components/Pages/Parent/Documents/ParentSchoolDocuments.razor.rz.scp.css */
/* ParentSchoolDocuments — "From the school" list card + document viewer
   slide-over. Ported from PWGeneratedDocs inline styles in the prototype
   (~line 9781). */

/* ── List card ── */
.psd-card[b-ba2lh4s23i] {
    background: #fff;
    border: 1px solid var(--ec-border-soft, #e5eaf2);
    border-radius: 16px;
    margin-bottom: 16px;
    overflow: hidden;
}

.psd-card-head[b-ba2lh4s23i] {
    padding: 16px 20px 12px;
}

.psd-card-title[b-ba2lh4s23i] {
    font-size: 15px;
    font-weight: 800;
    color: var(--ec-text, #0f172a);
    margin: 0;
}

.psd-card-sub[b-ba2lh4s23i] {
    font-size: 12px;
    color: var(--ec-muted, #64748b);
    margin: 3px 0 0;
}

.psd-list[b-ba2lh4s23i] {
    padding: 4px 0 8px;
}

.psd-row[b-ba2lh4s23i] {
    padding: 14px 20px;
    border-top: 1px solid var(--ec-border-soft, #e5eaf2);
    display: flex;
    gap: 12px;
    align-items: center;
}

.psd-row:first-child[b-ba2lh4s23i] {
    border-top: none;
}

.psd-row-icon[b-ba2lh4s23i] {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.psd-row-body[b-ba2lh4s23i] {
    flex: 1;
    min-width: 0;
}

.psd-row-name[b-ba2lh4s23i] {
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-text, #0f172a);
    margin: 0;
}

.psd-row-meta[b-ba2lh4s23i] {
    display: flex;
    gap: 6px;
    margin-top: 4px;
    align-items: center;
    flex-wrap: wrap;
}

.psd-chip[b-ba2lh4s23i] {
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 800;
}

.psd-chip--action[b-ba2lh4s23i] {
    background: #fee2e2;
    color: #b91c1c;
}

.psd-chip--signing[b-ba2lh4s23i] {
    background: #fef3c7;
    color: #92400e;
}

.psd-row-received[b-ba2lh4s23i] {
    font-size: 11px;
    color: var(--ec-muted, #64748b);
}

.psd-btn-view[b-ba2lh4s23i] {
    padding: 7px 14px;
    background: #fff;
    border: 1px solid var(--ec-border, #d8dfeb);
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ec-blue);
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
}

.psd-btn-sign[b-ba2lh4s23i] {
    padding: 7px 14px;
    background: var(--ec-blue);
    color: #fff;
    border: none;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
}

/* ── Viewer slide-over ── */
.psd-overlay[b-ba2lh4s23i] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    z-index: 1200;
    display: flex;
    justify-content: flex-end;
}

.psd-panel[b-ba2lh4s23i] {
    width: min(820px, 96%);
    height: 100%;
    background: #fff;
    box-shadow: -12px 0 40px rgba(13, 23, 51, .16);
    display: flex;
    flex-direction: column;
}

.psd-panel-head[b-ba2lh4s23i] {
    padding: 14px 22px;
    border-bottom: 1px solid var(--ec-border-soft, #e5eaf2);
    display: flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
}

.psd-panel-icon[b-ba2lh4s23i] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--ec-blue) 15%, transparent);
    color: var(--ec-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.psd-panel-head-text[b-ba2lh4s23i] {
    flex: 1;
    min-width: 0;
}

.psd-panel-eyebrow[b-ba2lh4s23i] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-blue);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}

.psd-panel-title[b-ba2lh4s23i] {
    font-size: 15px;
    font-weight: 800;
    color: var(--ec-text, #0f172a);
    margin: 2px 0 0;
}

.psd-panel-meta[b-ba2lh4s23i] {
    display: flex;
    gap: 6px;
    margin-top: 4px;
    align-items: center;
    flex-wrap: wrap;
}

.psd-panel-close[b-ba2lh4s23i] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--ec-border, #d8dfeb);
    font-size: 13px;
    color: var(--ec-sub, #64748b);
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.psd-panel-close:disabled[b-ba2lh4s23i] {
    color: #cbd5e1;
    cursor: not-allowed;
    opacity: .6;
}

.psd-panel-body[b-ba2lh4s23i] {
    flex: 1;
    overflow-y: auto;
    padding: 30px 42px;
    background: #f8fafc;
}

.psd-doc-sheet[b-ba2lh4s23i] {
    background: #fff;
    padding: 56px 64px;
    max-width: 720px;
    margin: 0 auto;
    box-shadow: 0 1px 4px rgba(13, 23, 51, .08);
    font-family: Georgia, Cambria, serif;
    font-size: 14px;
    line-height: 1.7;
    color: #0f172a;
}

.psd-signed-toast[b-ba2lh4s23i] {
    max-width: 720px;
    margin: 14px auto 0;
    padding: 12px 16px;
    background: #d1fae5;
    border: 1px solid #6ee7b7;
    border-radius: 10px;
    color: #065f46;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 9px;
}

.psd-signed-check[b-ba2lh4s23i] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #10b981;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.psd-panel-foot[b-ba2lh4s23i] {
    padding: 12px 22px;
    border-top: 1px solid var(--ec-border-soft, #e5eaf2);
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    flex-shrink: 0;
}

.psd-foot-note[b-ba2lh4s23i] {
    flex: 1;
    font-size: 11.5px;
    color: var(--ec-muted, #64748b);
}

.psd-foot-download[b-ba2lh4s23i] {
    padding: 8px 14px;
    background: #fff;
    border: 1px solid var(--ec-border, #d8dfeb);
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ec-text, #0f172a);
    cursor: pointer;
    font-family: inherit;
}

.psd-foot-download:disabled[b-ba2lh4s23i] {
    opacity: .6;
    cursor: default;
}

.psd-foot-close[b-ba2lh4s23i] {
    padding: 8px 14px;
    background: #fff;
    border: 1px solid var(--ec-border, #d8dfeb);
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ec-text, #0f172a);
    cursor: pointer;
    font-family: inherit;
}

.psd-foot-sign[b-ba2lh4s23i] {
    padding: 8px 16px;
    background: var(--ec-blue);
    color: #fff;
    border: none;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
}
/* /Components/Pages/Parent/FoodMenuPage.razor.rz.scp.css */
/* ── Page shell ── shell owns the gutter; full-width like the other pages
   (no max-width centering, which made this page look inconsistent). */
.pfm-page[b-sc5imr4yw6] { padding: 0; }

/* ── Header ── */
.pfm-header[b-sc5imr4yw6] { margin-bottom: 18px; }
.pfm-title[b-sc5imr4yw6] { font-size: 24px; font-weight: 800; color: var(--ec-text); margin: 0; letter-spacing: -0.01em; }
.pfm-subtitle[b-sc5imr4yw6] { font-size: 13px; color: var(--ec-sub); margin: 4px 0 0; }

/* ── Week header ── */
.pfm-week-head[b-sc5imr4yw6] {
    background: #fff; border: 1px solid var(--ec-border); border-radius: 14px;
    padding: 16px 20px; margin-bottom: 12px;
    display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
}
.pfm-week-head-left[b-sc5imr4yw6] { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.pfm-week-btn[b-sc5imr4yw6] {
    width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--ec-border);
    background: #fff; cursor: pointer; color: var(--ec-sub); font-size: 14px; font-family: inherit;
    display: flex; align-items: center; justify-content: center; line-height: 1; flex-shrink: 0;
}
.pfm-week-btn:disabled[b-sc5imr4yw6] { opacity: 0.35; cursor: not-allowed; }
.pfm-week-meta[b-sc5imr4yw6] { min-width: 0; }
.pfm-week-title[b-sc5imr4yw6] { font-size: 14px; font-weight: 800; color: var(--ec-text); margin: 0; }
.pfm-week-sub[b-sc5imr4yw6] { font-size: 11.5px; color: var(--ec-muted); margin: 2px 0 0; }
.pfm-week-sub .bi[b-sc5imr4yw6] { font-size: 11px; }
.pfm-download-btn[b-sc5imr4yw6] {
    background: #fff; border: 1px solid var(--ec-border); border-radius: 9px;
    padding: 8px 13px; font-size: 12px; font-weight: 700; color: var(--ec-sub);
    cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}

/* ── History chips ── */
.pfm-history-bar[b-sc5imr4yw6] { display: flex; gap: 6px; margin-bottom: 14px; overflow-x: auto; padding-bottom: 2px; }
.pfm-chip[b-sc5imr4yw6] {
    background: #fff; color: var(--ec-sub); border: 1px solid var(--ec-border); border-radius: 8px;
    padding: 6px 11px; font-size: 11.5px; font-weight: 700; cursor: pointer; font-family: inherit;
    white-space: nowrap; flex-shrink: 0; display: flex; align-items: center; gap: 6px;
}
.pfm-chip--active[b-sc5imr4yw6] { background: var(--ec-blue); color: #fff; border-color: var(--ec-blue); }
.pfm-chip-badge[b-sc5imr4yw6] {
    background: var(--ec-green-lt); color: var(--ec-green); font-size: 9.5px; font-weight: 800;
    padding: 1px 6px; border-radius: 4px; letter-spacing: 0.06em;
}
.pfm-chip--active .pfm-chip-badge[b-sc5imr4yw6] { background: rgba(255,255,255,0.22); color: #fff; }
.pfm-chip-empty[b-sc5imr4yw6] { font-size: 9.5px; font-weight: 600; color: var(--ec-muted); }
.pfm-chip--active .pfm-chip-empty[b-sc5imr4yw6] { color: rgba(255,255,255,0.7); }

/* ── Day pills ── */
.pfm-day-pills[b-sc5imr4yw6] { display: flex; gap: 8px; margin-bottom: 14px; }
.pfm-day-pill[b-sc5imr4yw6] {
    flex: 1; background: #fff; color: var(--ec-text); border: 1px solid var(--ec-border); border-radius: 11px;
    padding: 11px 8px 9px; cursor: pointer; font-family: inherit;
    display: flex; flex-direction: column; align-items: center; gap: 2px; position: relative;
}
.pfm-day-pill--active[b-sc5imr4yw6] { background: var(--ec-blue); color: #fff; border-color: var(--ec-blue); }
.pfm-day-pill--empty[b-sc5imr4yw6] { opacity: 0.65; }
.pfm-day-abbr[b-sc5imr4yw6] { font-size: 10.5px; font-weight: 700; opacity: 0.7; text-transform: uppercase; }
.pfm-day-num[b-sc5imr4yw6] { font-size: 16px; font-weight: 800; }
.pfm-day-dot[b-sc5imr4yw6] { position: absolute; top: 6px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--ec-pink); }
.pfm-day-pill--active .pfm-day-dot[b-sc5imr4yw6] { background: #fff; }
.pfm-day-nomeals[b-sc5imr4yw6] { font-size: 9px; font-weight: 700; color: var(--ec-muted); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 2px; }
.pfm-day-pill--active .pfm-day-nomeals[b-sc5imr4yw6] { color: rgba(255,255,255,0.85); }

/* ── KPI strip ── */
.pfm-kpis[b-sc5imr4yw6] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
@media (max-width: 1100px) { .pfm-kpis[b-sc5imr4yw6] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .pfm-kpis[b-sc5imr4yw6] { grid-template-columns: 1fr; } }

/* ── Menu note ── */
.pfm-note[b-sc5imr4yw6] {
    background: linear-gradient(135deg, var(--ec-blue-gh), #fff); border: 1px solid var(--ec-blue-lt);
    border-radius: 11px; padding: 12px 16px; display: flex; gap: 11px; align-items: flex-start; margin-bottom: 12px;
}
.pfm-note-icon[b-sc5imr4yw6] {
    width: 30px; height: 30px; border-radius: 8px; background: #fff; border: 1px solid var(--ec-blue-lt);
    display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--ec-blue); flex-shrink: 0;
}
.pfm-note-body[b-sc5imr4yw6] { flex: 1; min-width: 0; }
.pfm-note-label[b-sc5imr4yw6] { font-size: 10.5px; font-weight: 800; color: var(--ec-blue); letter-spacing: 0.1em; text-transform: uppercase; margin: 0; }
.pfm-note-text[b-sc5imr4yw6] { font-size: 13px; color: var(--ec-text); line-height: 1.5; margin: 3px 0 0; }

/* ── Allergy banner — 3 states ── */
.pfm-allergy[b-sc5imr4yw6] { border-radius: 11px; padding: 12px 16px; display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.pfm-allergy--unset[b-sc5imr4yw6] { background: linear-gradient(135deg, var(--ec-amber-lt), #fff); border: 1px solid #fde68a; }
.pfm-allergy--warn[b-sc5imr4yw6]  { background: linear-gradient(135deg, var(--ec-red-lt), #fff); border: 1px solid #fecaca; }
.pfm-allergy--safe[b-sc5imr4yw6]  { background: var(--ec-blue-gh); border: 1px solid var(--ec-blue-lt); padding: 11px 16px; }
.pfm-allergy-icon[b-sc5imr4yw6] {
    width: 32px; height: 32px; border-radius: 8px; background: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 15px; flex-shrink: 0;
}
.pfm-allergy--unset .pfm-allergy-icon[b-sc5imr4yw6] { border: 1px solid #fde68a; color: var(--ec-amber); }
.pfm-allergy--warn  .pfm-allergy-icon[b-sc5imr4yw6] { border: 1px solid #fecaca; color: var(--ec-red); }
.pfm-allergy-icon--safe[b-sc5imr4yw6] { width: 30px; height: 30px; border: 1px solid var(--ec-blue-lt); color: var(--ec-blue); font-size: 14px; }
.pfm-allergy-text[b-sc5imr4yw6] { font-size: 12.5px; color: var(--ec-text); font-weight: 600; flex: 1; margin: 0; }
.pfm-allergy-strong-red[b-sc5imr4yw6] { color: var(--ec-red); }
.pfm-allergy-btn-solid[b-sc5imr4yw6] {
    background: var(--ec-amber); border: none; border-radius: 8px; padding: 7px 12px; color: #fff;
    font-size: 11.5px; font-weight: 800; cursor: pointer; font-family: inherit; flex-shrink: 0;
}
.pfm-allergy-btn-link[b-sc5imr4yw6] { background: none; border: none; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; flex-shrink: 0; }
.pfm-allergy-link-red[b-sc5imr4yw6] { color: var(--ec-red); }
.pfm-allergy-link-blue[b-sc5imr4yw6] { color: var(--ec-blue); }

/* ── Meal sections ── */
.pfm-meals[b-sc5imr4yw6] { display: flex; flex-direction: column; gap: 12px; }
.pfm-meals-empty[b-sc5imr4yw6] { background: #fff; border-radius: 14px; border: 1px solid var(--ec-border); }
.pfm-meal-card[b-sc5imr4yw6] { background: #fff; border-radius: 14px; border: 1px solid var(--ec-border); overflow: hidden; }
.pfm-meal-head[b-sc5imr4yw6] { display: flex; align-items: center; gap: 13px; padding: 14px 18px; border-bottom: 1px solid var(--ec-border-soft); }
.pfm-meal-icon[b-sc5imr4yw6] { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pfm-meal-head-body[b-sc5imr4yw6] { flex: 1; min-width: 0; }
.pfm-meal-title-row[b-sc5imr4yw6] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pfm-meal-title[b-sc5imr4yw6] { font-size: 14px; font-weight: 800; color: var(--ec-text); margin: 0; }
.pfm-meal-sub[b-sc5imr4yw6] { font-size: 11.5px; color: var(--ec-muted); margin: 2px 0 0; }
.pfm-meal-kcal-box[b-sc5imr4yw6] { text-align: right; flex-shrink: 0; }
.pfm-meal-kcal-num[b-sc5imr4yw6] { font-size: 18px; font-weight: 800; line-height: 1; margin: 0; }
.pfm-meal-kcal-label[b-sc5imr4yw6] { font-size: 9.5px; color: var(--ec-muted); margin: 3px 0 0; font-weight: 700; letter-spacing: 0.08em; }

.pfm-eat-chip[b-sc5imr4yw6] {
    font-size: 9.5px; font-weight: 800; padding: 2px 7px; border-radius: 5px;
    letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
}
.pfm-eat-chip--pending[b-sc5imr4yw6] { background: var(--ec-bg); color: var(--ec-muted); border: 1px dashed var(--ec-border); }

.pfm-meal-items[b-sc5imr4yw6] { display: flex; flex-direction: column; }
.pfm-item[b-sc5imr4yw6] { display: flex; align-items: flex-start; gap: 13px; padding: 12px 18px; }
.pfm-item--divider[b-sc5imr4yw6] { border-top: 1px solid var(--ec-border-soft); }
.pfm-item--flagged[b-sc5imr4yw6] { background: color-mix(in srgb, var(--ec-red-lt) 55%, #fff); }
.pfm-item-dot[b-sc5imr4yw6] { width: 6px; height: 6px; border-radius: 50%; margin-top: 7px; flex-shrink: 0; }
.pfm-item-body[b-sc5imr4yw6] { flex: 1; min-width: 0; }
.pfm-item-name-row[b-sc5imr4yw6] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pfm-item-name[b-sc5imr4yw6] { font-size: 13.5px; font-weight: 700; color: var(--ec-text); margin: 0; }
.pfm-item-desc[b-sc5imr4yw6] { font-size: 12px; color: var(--ec-sub); line-height: 1.5; margin: 3px 0 0; }
.pfm-item-kcal[b-sc5imr4yw6] { font-size: 12px; font-weight: 700; color: var(--ec-muted); white-space: nowrap; padding-top: 1px; }

.pfm-tag[b-sc5imr4yw6] { font-size: 9.5px; font-weight: 800; padding: 2px 7px; border-radius: 4px; letter-spacing: 0.05em; white-space: nowrap; }
.pfm-tag--vegan[b-sc5imr4yw6] { background: var(--ec-green-lt); color: var(--ec-green); }
.pfm-tag--vegetarian[b-sc5imr4yw6] { background: var(--ec-teal-lt); color: var(--ec-teal); }
.pfm-tag--contains[b-sc5imr4yw6] { background: var(--ec-amber-lt); color: var(--ec-amber); }
.pfm-tag--contains-flagged[b-sc5imr4yw6] { background: var(--ec-red); color: #fff; }

@media (max-width: 600px) { .pfm-page[b-sc5imr4yw6] { padding: 0; } }
/* /Components/Pages/Parent/Grades.razor.rz.scp.css */
/* Top bar — term pills + export */
.gr-topbar[b-ilt1ljr3pd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    /* no margin-bottom — .pd-page flex gap (24px) owns section spacing */
}
.gr-term-pills[b-ilt1ljr3pd] {
    display: inline-flex;
    background: var(--ec-card);
    border: 1px solid var(--ec-border);
    border-radius: 11px;
    padding: 4px;
    gap: 4px;
}
.gr-term-pill[b-ilt1ljr3pd] {
    background: transparent; border: none;
    padding: 7px 16px; border-radius: 8px;
    font-size: 12.5px; font-weight: 700;
    color: var(--ec-sub);
    cursor: pointer; font-family: inherit;
    transition: background .12s, color .12s;
}
.gr-term-pill:hover[b-ilt1ljr3pd] { color: var(--ec-text); }
.gr-term-pill--active[b-ilt1ljr3pd] { background: var(--ec-blue); color: #fff; }
.ec-stage-kindergarten .gr-term-pill--active[b-ilt1ljr3pd] { background: var(--ec-primary); }
.gr-export-btn[b-ilt1ljr3pd] {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--ec-card);
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    padding: 9px 14px;
    font-size: 12.5px; font-weight: 700;
    color: var(--ec-text);
    cursor: pointer; font-family: inherit;
}
.gr-export-btn:hover[b-ilt1ljr3pd] { border-color: var(--ec-blue); }

/* KPI strip */
.gr-kpis[b-ilt1ljr3pd] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    /* no margin-bottom — .pd-page flex gap (24px) owns section spacing */
}
@media (max-width: 1100px) { .gr-kpis[b-ilt1ljr3pd] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .gr-kpis[b-ilt1ljr3pd] { grid-template-columns: 1fr; } }

/* Dimensions aligned to the WebKpi standard (see WebApp/CLAUDE.md → KPI cards).
   Markup kept (custom 3-state trend + band colours WebKpi doesn't model). */
.gr-kpi[b-ilt1ljr3pd] {
    min-height: 96px;
    display: flex; align-items: center; gap: 14px;
    background: var(--ec-card);
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    padding: 18px 20px;
}
.gr-kpi-icon[b-ilt1ljr3pd] {
    width: 42px; height: 42px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.gr-kpi-icon-green[b-ilt1ljr3pd]  { background: #dcfce7; color: var(--ec-ok); }
.gr-kpi-icon-amber[b-ilt1ljr3pd]  { background: #fef3c7; color: var(--ec-warn); }
.gr-kpi-icon-blue[b-ilt1ljr3pd]   { background: var(--ec-school-tint); color: var(--ec-blue); }
.gr-kpi-icon-purple[b-ilt1ljr3pd] { background: #ede9fe; color: var(--ec-subj-4); }
.gr-kpi-icon-ok[b-ilt1ljr3pd]     { background: #dcfce7; color: var(--ec-ok); }
.gr-kpi-icon-info[b-ilt1ljr3pd]   { background: var(--ec-blue-lt); color: var(--ec-blue); }
.gr-kpi-icon-warn[b-ilt1ljr3pd]   { background: var(--ec-amber-lt); color: var(--ec-amber); }
.gr-kpi-icon-alert[b-ilt1ljr3pd]  { background: var(--ec-red-lt); color: var(--ec-red); }
.gr-kpi-body[b-ilt1ljr3pd] { flex: 1; min-width: 0; }
.gr-kpi-row[b-ilt1ljr3pd] { display: flex; align-items: center; gap: 8px; }
.gr-kpi-value[b-ilt1ljr3pd] { font-size: 22px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.gr-kpi-green[b-ilt1ljr3pd]  { color: var(--ec-ok); }
.gr-kpi-amber[b-ilt1ljr3pd]  { color: var(--ec-warn); }
.gr-kpi-blue[b-ilt1ljr3pd]   { color: var(--ec-blue); }
.gr-kpi-purple[b-ilt1ljr3pd] { color: var(--ec-subj-4); }
.gr-kpi-ok[b-ilt1ljr3pd]     { color: var(--ec-ok); }
.gr-kpi-info[b-ilt1ljr3pd]   { color: var(--ec-blue); }
.gr-kpi-warn[b-ilt1ljr3pd]   { color: var(--ec-amber); }
.gr-kpi-alert[b-ilt1ljr3pd]  { color: var(--ec-red); }
/* Trend reads as plain coloured text next to the value (prototype WebKPI
   lines 1336-1340) — no filled pill. */
.gr-kpi-trend[b-ilt1ljr3pd] {
    color: var(--ec-ok);
    font-size: 11px; font-weight: 700;
}
.gr-kpi-trend.gr-trend-down[b-ilt1ljr3pd] { color: var(--ec-alert); }
.gr-kpi-trend.gr-trend-flat[b-ilt1ljr3pd] { color: var(--ec-muted); }
.gr-kpi-label[b-ilt1ljr3pd] {
    font-size: 10px; font-weight: 800;
    color: var(--ec-muted);
    text-transform: uppercase; letter-spacing: 0.1em;
    margin: 8px 0 2px;
}
.gr-kpi-sub[b-ilt1ljr3pd] { font-size: 11.5px; color: var(--ec-sub); margin: 0; }

/* Subject grades card */
.gr-table-card[b-ilt1ljr3pd] {
    background: var(--ec-card);
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    overflow: hidden;
}
.gr-table-head[b-ilt1ljr3pd] {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ec-border-soft);
}
.gr-table-title[b-ilt1ljr3pd] { font-size: 14px; font-weight: 800; color: var(--ec-text); margin: 0; }
.gr-table-hint[b-ilt1ljr3pd]  { font-size: 11.5px; color: var(--ec-muted); margin: 0; }

.gr-table-cols[b-ilt1ljr3pd], .gr-row[b-ilt1ljr3pd] {
    display: grid;
    grid-template-columns: 1.7fr 1fr 110px 130px 75px 60px 24px;
    align-items: center;
    gap: 12px;
}
.gr-table-cols[b-ilt1ljr3pd] {
    padding: 10px 20px;
    background: var(--ec-bg);
    font-size: 10px; font-weight: 800;
    color: var(--ec-muted);
    text-transform: uppercase; letter-spacing: 0.08em;
}
.gr-row[b-ilt1ljr3pd] {
    padding: 14px 20px;
    border-top: 1px solid var(--ec-border-soft);
    cursor: pointer;
    transition: background .1s;
}
.gr-row:hover[b-ilt1ljr3pd] { background: var(--ec-bg); }

.gr-row-subject[b-ilt1ljr3pd] { display: flex; align-items: center; gap: 12px; }
/* Solid subject-colour identity tile with a white glyph — matches the
   prototype's SubjectMonogram (EduConnect All Roles.html line 2973) and the
   admin Subjects catalog. NOT a faint tint (that's reserved for the
   detail-sheet header + homework cards per the prototype). */
.gr-row-tile[b-ilt1ljr3pd] {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: var(--subj-color);
    color: #fff;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--subj-color) 27%, transparent);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.gr-row-name[b-ilt1ljr3pd] { font-size: 13.5px; font-weight: 800; color: var(--ec-text); margin: 0; }

.gr-row-grades[b-ilt1ljr3pd] {
    display: flex; gap: 5px; flex-wrap: wrap;
}

/* Grade chip — prototype lines 2970-2984.
   Top color bar = subject color (identity), inside the chip the band color
   tints the value + faint background. Date is monospace under the value. */
.gr-chip[b-ilt1ljr3pd] {
    position: relative;
    display: inline-flex; flex-direction: column;
    align-items: center; gap: 1px;
    min-width: 44px;
    padding: 7px 8px 5px;
    border: 1px solid;
    border-radius: 8px;
    background: var(--ec-card);
    cursor: pointer; font-family: inherit;
    transition: transform .12s, box-shadow .12s;
}
.gr-chip:hover[b-ilt1ljr3pd] {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px -4px rgba(13, 23, 51, 0.18);
}
.gr-chip-bar[b-ilt1ljr3pd] {
    position: absolute;
    top: 0; left: 4px; right: 4px;
    height: 3px;
    background: var(--subj-color, var(--ec-blue));
    border-radius: 0 0 2px 2px;
}
.gr-chip-value[b-ilt1ljr3pd] { font-size: 13px; font-weight: 800; line-height: 1; }
.gr-chip-date[b-ilt1ljr3pd] {
    font-size: 8.5px; font-weight: 700;
    color: var(--ec-muted);
    font-family: ui-monospace, 'SF Mono', monospace;
    letter-spacing: 0;
}
.gr-chip-ok[b-ilt1ljr3pd]    { background: rgba(22, 163, 74, 0.08);  border-color: rgba(22, 163, 74, 0.30); }
.gr-chip-ok    .gr-chip-value[b-ilt1ljr3pd] { color: var(--ec-ok); }
.gr-chip-warn[b-ilt1ljr3pd]  { background: rgba(217, 119, 6, 0.08);  border-color: rgba(217, 119, 6, 0.30); }
.gr-chip-warn  .gr-chip-value[b-ilt1ljr3pd] { color: var(--ec-warn); }
.gr-chip-alert[b-ilt1ljr3pd] { background: rgba(220, 38, 38, 0.08);  border-color: rgba(220, 38, 38, 0.30); }
.gr-chip-alert .gr-chip-value[b-ilt1ljr3pd] { color: var(--ec-alert); }
.gr-chip-info[b-ilt1ljr3pd]  { background: var(--ec-blue-gh);        border-color: rgba(59, 95, 192, 0.30); }
.gr-chip-info  .gr-chip-value[b-ilt1ljr3pd] { color: var(--ec-blue); }

.gr-row-avg[b-ilt1ljr3pd] {
    font-size: 18px; font-weight: 800; letter-spacing: -0.01em;
}
.gr-row-avg-ok[b-ilt1ljr3pd]    { color: var(--ec-ok); }
.gr-row-avg-warn[b-ilt1ljr3pd]  { color: var(--ec-warn); }
.gr-row-avg-alert[b-ilt1ljr3pd] { color: var(--ec-alert); }
.gr-row-avg-muted[b-ilt1ljr3pd] { color: var(--ec-muted); }

/* Attendance column (prototype lines 2989-2998) */
.gr-row-att[b-ilt1ljr3pd] { min-width: 0; }
.gr-row-att-pct[b-ilt1ljr3pd] {
    font-size: 14px; font-weight: 800;
    line-height: 1; margin: 0;
}
.gr-row-att-ok[b-ilt1ljr3pd]    { color: var(--ec-green); }
.gr-row-att-info[b-ilt1ljr3pd]  { color: var(--ec-blue); }
.gr-row-att-warn[b-ilt1ljr3pd]  { color: var(--ec-amber); }
.gr-row-att-alert[b-ilt1ljr3pd] { color: var(--ec-red); }
.gr-row-att-muted[b-ilt1ljr3pd] { color: var(--ec-muted); }
.gr-row-att-bar[b-ilt1ljr3pd] {
    height: 4px;
    background: var(--ec-border-soft);
    border-radius: 2px;
    overflow: hidden;
    margin: 4px 0 3px;
}
.gr-row-att-bar-fill[b-ilt1ljr3pd] { height: 100%; border-radius: 2px; transition: width .2s; }
.gr-row-att-bar-fill.gr-row-att-bar-ok[b-ilt1ljr3pd]    { background: var(--ec-green); }
.gr-row-att-bar-fill.gr-row-att-bar-info[b-ilt1ljr3pd]  { background: var(--ec-blue); }
.gr-row-att-bar-fill.gr-row-att-bar-warn[b-ilt1ljr3pd]  { background: var(--ec-amber); }
.gr-row-att-bar-fill.gr-row-att-bar-alert[b-ilt1ljr3pd] { background: var(--ec-red); }
.gr-row-att-meta[b-ilt1ljr3pd] { font-size: 10px; color: var(--ec-muted); margin: 0; }

/* Absences column (prototype lines 3000-3030) */
.gr-row-abs[b-ilt1ljr3pd] { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.gr-row-abs-clean[b-ilt1ljr3pd] {
    font-size: 11px; font-weight: 700;
    color: var(--ec-green);
    display: inline-flex; align-items: center; gap: 5px;
    margin: 0;
}
.gr-row-abs-clean-dot[b-ilt1ljr3pd] {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--ec-green);
}
.gr-row-abs-line[b-ilt1ljr3pd] {
    display: inline-flex; align-items: center; gap: 6px;
}
.gr-row-abs-badge[b-ilt1ljr3pd] {
    font-size: 10px; font-weight: 800;
    padding: 2px 7px; border-radius: 5px;
    min-width: 22px; text-align: center;
    font-family: ui-monospace, 'SF Mono', monospace;
    white-space: nowrap;
}
.gr-row-abs-mot[b-ilt1ljr3pd] { background: var(--ec-amber-lt); color: var(--ec-amber); }
.gr-row-abs-un[b-ilt1ljr3pd]  { background: var(--ec-red-lt);   color: var(--ec-red); }
.gr-row-abs-label[b-ilt1ljr3pd] { font-size: 10.5px; color: var(--ec-sub); font-weight: 600; }

.gr-row-trend[b-ilt1ljr3pd] { font-size: 12px; font-weight: 700; }
.gr-row-trend-vs[b-ilt1ljr3pd] {
    font-size: 9.5px; font-weight: 600;
    color: var(--ec-muted);
    margin: 2px 0 0;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.gr-trend-up[b-ilt1ljr3pd]   { color: var(--ec-ok); }
.gr-trend-down[b-ilt1ljr3pd] { color: var(--ec-alert); }
.gr-trend-flat[b-ilt1ljr3pd] { color: var(--ec-muted); }

.gr-row-chev[b-ilt1ljr3pd] { color: var(--ec-muted); font-size: 12px; text-align: right; }

.gr-row-teacher[b-ilt1ljr3pd] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 2px 0 0;
    font-weight: 500;
}
/* /Components/Pages/Parent/Homework.razor.rz.scp.css */
/* ── KPI strip ── (no margin-bottom: the global .pd-page flex gap owns spacing) */
.hw-kpis[b-lykepgdsgc] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
@media (max-width: 1100px) { .hw-kpis[b-lykepgdsgc] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .hw-kpis[b-lykepgdsgc] { grid-template-columns: 1fr; } }
/* Tiles are <WebKpi> now — only the grid wrapper above remains. */

/* ── Filter chips ── */
.hw-filters[b-lykepgdsgc] {
    display: flex; gap: 8px; flex-wrap: wrap;
}
.hw-filter[b-lykepgdsgc] {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--ec-card);
    border: 1px solid var(--ec-border);
    color: var(--ec-sub);
    border-radius: 9px;
    padding: 7px 13px;
    font-size: 12.5px; font-weight: 700;
    cursor: pointer; font-family: inherit;
    transition: border-color .12s, background .12s, color .12s;
}
.hw-filter:hover[b-lykepgdsgc] { border-color: var(--ec-blue); }
.hw-filter--active[b-lykepgdsgc] {
    background: var(--ec-blue);
    border-color: var(--ec-blue);
    color: #fff;
}
.hw-filter--danger.hw-filter--active[b-lykepgdsgc] {
    background: var(--ec-red);
    border-color: var(--ec-red);
}
.hw-filter-count[b-lykepgdsgc] {
    font-size: 10px; font-weight: 800;
    background: var(--ec-border-soft);
    color: var(--ec-muted);
    padding: 1px 7px; border-radius: 5px;
}
.hw-filter--active .hw-filter-count[b-lykepgdsgc] {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}
.hw-filter--danger:not(.hw-filter--active) .hw-filter-count[b-lykepgdsgc] {
    background: var(--ec-red-lt);
    color: var(--ec-red);
}

/* ── List + card (prototype lines 3486-3559) ── */
.hw-list[b-lykepgdsgc] { display: flex; flex-direction: column; gap: 10px; }
.hw-card[b-lykepgdsgc] {
    display: grid;
    grid-template-columns: 4px 44px 1fr auto auto;
    gap: 14px;
    align-items: center;
    background: var(--ec-card);
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    padding: 14px 16px 14px 0;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.hw-card:hover[b-lykepgdsgc] {
    border-color: var(--subj-color);
}
.hw-card--done[b-lykepgdsgc] { opacity: 0.85; }
.hw-card-bar[b-lykepgdsgc] {
    height: 46px;
    background: var(--subj-color);
    border-radius: 0 4px 4px 0;
}
.hw-card-tile[b-lykepgdsgc] {
    width: 44px; height: 44px; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in oklab, var(--subj-color) 18%, transparent);
    color: var(--subj-color);
    font-size: 18px;
}
.hw-card-body[b-lykepgdsgc] { min-width: 0; }
.hw-card-head[b-lykepgdsgc] {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 3px;
}
.hw-card-subj[b-lykepgdsgc] {
    font-size: 10px; font-weight: 800;
    color: var(--subj-color);
    letter-spacing: 0.08em; text-transform: uppercase;
    margin: 0;
}
.hw-card-priority[b-lykepgdsgc] {
    background: var(--ec-red-lt);
    color: var(--ec-red);
    font-size: 9px; font-weight: 800;
    padding: 2px 6px; border-radius: 4px;
    letter-spacing: 0.05em;
}
.hw-card-title[b-lykepgdsgc] {
    font-size: 14px; font-weight: 800;
    color: var(--ec-text); line-height: 1.3;
    margin: 0;
}
.hw-card--done .hw-card-title[b-lykepgdsgc] { text-decoration: line-through; }
.hw-card-meta[b-lykepgdsgc] {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-top: 6px;
    font-size: 11.5px; color: var(--ec-muted);
    align-items: center;
}
.hw-card-meta-sep[b-lykepgdsgc] { color: var(--ec-faint); }

.hw-card-status[b-lykepgdsgc] {
    display: inline-flex; align-items: center; gap: 6px;
    padding-left: 10px;
}
.hw-card-status-dot[b-lykepgdsgc] {
    width: 7px; height: 7px; border-radius: 50%;
}
.hw-card-status-label[b-lykepgdsgc] {
    font-size: 11.5px; font-weight: 700;
    white-space: nowrap;
}

.hw-card-grade[b-lykepgdsgc] {
    background: var(--ec-green-lt);
    color: var(--ec-green);
    border: 1px solid rgba(22, 163, 74, 0.3);
    width: 48px; height: 42px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 17px; font-weight: 800;
}
.hw-card-due[b-lykepgdsgc] {
    padding: 6px 11px;
    border-radius: 10px;
    font-size: 11.5px; font-weight: 800;
    white-space: nowrap;
    min-width: 96px;
    text-align: center;
    border: 1px solid;
}
.hw-card-due--alert[b-lykepgdsgc] { background: var(--ec-red-lt);    color: var(--ec-red);    border-color: rgba(220, 38, 38, 0.3); }
.hw-card-due--warn[b-lykepgdsgc]  { background: var(--ec-amber-lt);  color: var(--ec-amber);  border-color: rgba(217, 119, 6, 0.3); }
.hw-card-due--info[b-lykepgdsgc]  { background: var(--ec-blue-lt);   color: var(--ec-blue);   border-color: rgba(59, 95, 192, 0.3); }
.hw-card-due--ok[b-lykepgdsgc]    { background: var(--ec-green-lt);  color: var(--ec-green);  border-color: rgba(22, 163, 74, 0.3); }

@media (max-width: 800px) {
    .hw-card[b-lykepgdsgc] { grid-template-columns: 4px 44px 1fr; }
    .hw-card-status[b-lykepgdsgc], .hw-card-grade[b-lykepgdsgc], .hw-card-due[b-lykepgdsgc] { grid-column: 2 / -1; padding-left: 0; }
}
/* /Components/Pages/Parent/HomeworkDetailSheet.razor.rz.scp.css */
/* ── Overlay + panel shell ───────────────────────────────────────── */
.hds-overlay[b-svgmmwh3fz] {
    position: fixed; inset: 0;
    background: rgba(13, 23, 51, 0.42);
    backdrop-filter: blur(2px);
    display: flex; justify-content: flex-end;
    z-index: 1500;
    animation: hds-fade-b-svgmmwh3fz .18s ease;
}
@keyframes hds-fade-b-svgmmwh3fz { from { opacity: 0; } to { opacity: 1; } }

.hds-panel[b-svgmmwh3fz] {
    width: min(580px, 92%);
    height: 100%;
    background: #fff;
    box-shadow: -12px 0 40px rgba(13, 23, 51, 0.16);
    display: flex; flex-direction: column;
    position: relative;
    overflow: hidden;
    animation: hds-slide-b-svgmmwh3fz .25s ease;
}
@keyframes hds-slide-b-svgmmwh3fz { from { transform: translateX(20px); opacity: 0.5; } to { transform: translateX(0); opacity: 1; } }

.hds-close[b-svgmmwh3fz] {
    position: absolute; top: 14px; right: 14px; z-index: 5;
    width: 34px; height: 34px; border-radius: 10px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
    border: 1px solid var(--ec-border);
    cursor: pointer; font-family: inherit;
    font-size: 14px; color: var(--ec-sub);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .12s, color .12s, border-color .12s;
}
.hds-close:hover[b-svgmmwh3fz] {
    background: var(--ec-bg);
    color: var(--ec-text);
    border-color: var(--ec-muted);
}

/* ── Header (subject-tinted gradient) ────────────────────────────── */
.hds-head[b-svgmmwh3fz] {
    padding: 22px 26px 20px;
    border-bottom: 1px solid var(--ec-border);
    background: linear-gradient(135deg,
        color-mix(in oklab, var(--subj-color) 14%, #fff) 0%,
        color-mix(in oklab, var(--subj-color) 6%, #fff) 60%,
        #fff 100%);
}
.hds-head-row[b-svgmmwh3fz] {
    display: flex; align-items: flex-start; gap: 14px;
    padding-right: 48px;
}
.hds-tile[b-svgmmwh3fz] {
    width: 54px; height: 54px; border-radius: 14px;
    background: color-mix(in oklab, var(--subj-color) 18%, transparent);
    color: var(--subj-color);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    box-shadow: 0 4px 14px color-mix(in oklab, var(--subj-color) 22%, transparent);
}
.hds-head-id[b-svgmmwh3fz] { flex: 1; min-width: 0; }
.hds-subj[b-svgmmwh3fz] {
    font-size: 10.5px; font-weight: 800;
    color: var(--subj-color);
    letter-spacing: 0.12em; text-transform: uppercase;
    margin: 0;
}
.hds-title[b-svgmmwh3fz] {
    font-size: 20px; font-weight: 800;
    color: var(--ec-text);
    margin: 3px 0 0;
    letter-spacing: -0.01em; line-height: 1.25;
}
.hds-teacher[b-svgmmwh3fz] {
    font-size: 13px; color: var(--ec-sub);
    margin: 5px 0 0;
}

/* ── Stat row ────────────────────────────────────────────────────── */
.hds-stats[b-svgmmwh3fz] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 16px;
}
.hds-stat[b-svgmmwh3fz] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 10px;
    padding: 9px 11px;
}
.hds-stat--alert[b-svgmmwh3fz] { background: var(--ec-red-lt);   border-color: rgba(220, 38, 38, 0.3); }
.hds-stat--warn[b-svgmmwh3fz]  { background: var(--ec-amber-lt); border-color: rgba(217, 119, 6, 0.3); }
.hds-stat--info[b-svgmmwh3fz]  { background: var(--ec-blue-lt);  border-color: rgba(59, 95, 192, 0.3); }
.hds-stat--ok[b-svgmmwh3fz]    { background: var(--ec-green-lt); border-color: rgba(22, 163, 74, 0.3); }
.hds-stat-label[b-svgmmwh3fz] {
    font-size: 9px; font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.1em; text-transform: uppercase;
    margin: 0;
}
.hds-stat-value[b-svgmmwh3fz] {
    font-size: 14px; font-weight: 800;
    color: var(--ec-text);
    margin: 3px 0 0; line-height: 1.1;
}
.hds-stat-value--alert[b-svgmmwh3fz] { color: var(--ec-red); }
.hds-stat-value--info[b-svgmmwh3fz]  { color: var(--ec-blue); }
.hds-stat-value--muted[b-svgmmwh3fz] { color: var(--ec-muted); }
.hds-stat-sub[b-svgmmwh3fz] {
    font-size: 10px; color: var(--ec-muted);
    margin: 3px 0 0;
}
.hds-stat--alert .hds-stat-value[b-svgmmwh3fz] { color: var(--ec-red); }
.hds-stat--warn  .hds-stat-value[b-svgmmwh3fz] { color: var(--ec-amber); }
.hds-stat--info  .hds-stat-value[b-svgmmwh3fz] { color: var(--ec-blue); }
.hds-stat--ok    .hds-stat-value[b-svgmmwh3fz] { color: var(--ec-green); }

/* ── Tabs ────────────────────────────────────────────────────────── */
.hds-tabs[b-svgmmwh3fz] {
    display: flex;
    border-bottom: 1px solid var(--ec-border);
    padding: 0 16px;
    background: #fff;
}
.hds-tab[b-svgmmwh3fz] {
    padding: 13px 14px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer; font-family: inherit;
    font-size: 13px; font-weight: 700;
    color: var(--ec-muted);
    margin-bottom: -1px;
    display: inline-flex; align-items: center; gap: 7px;
    transition: color .12s, border-color .12s;
}
.hds-tab:hover:not(:disabled)[b-svgmmwh3fz] { color: var(--ec-text); }
.hds-tab--active[b-svgmmwh3fz] {
    color: var(--subj-color);
    border-bottom-color: var(--subj-color);
}
.hds-tab--dim[b-svgmmwh3fz] {
    color: var(--ec-faint);
    cursor: not-allowed;
    opacity: 0.55;
}
.hds-tab-count[b-svgmmwh3fz] {
    font-size: 10px; font-weight: 800;
    background: var(--ec-border-soft);
    color: var(--ec-muted);
    padding: 1px 6px; border-radius: 5px;
}
.hds-tab--active .hds-tab-count[b-svgmmwh3fz] {
    background: color-mix(in oklab, var(--subj-color) 14%, transparent);
    color: var(--subj-color);
}

/* ── Body ────────────────────────────────────────────────────────── */
.hds-body[b-svgmmwh3fz] {
    flex: 1; overflow-y: auto;
    padding: 18px 24px;
    background: var(--ec-bg);
    display: flex; flex-direction: column; gap: 12px;
}

.hds-card[b-svgmmwh3fz] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 12px;
    padding: 16px 18px;
}
.hds-card--list[b-svgmmwh3fz] { padding: 0; overflow: hidden; }
.hds-card--rows[b-svgmmwh3fz] { padding: 14px 18px; }

.hds-eyebrow[b-svgmmwh3fz] {
    font-size: 10px; font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.1em; text-transform: uppercase;
    margin: 0 0 8px;
}
.hds-eyebrow--padded[b-svgmmwh3fz] { padding: 14px 18px 10px; margin: 0; }

.hds-prose[b-svgmmwh3fz] {
    font-size: 13.5px;
    color: var(--ec-text);
    line-height: 1.6;
    margin: 0;
    white-space: pre-wrap;
}
.hds-prose--quote[b-svgmmwh3fz] {
    font-style: italic;
    color: var(--ec-sub);
}

/* Rows card (Assigned / By / Class) */
.hds-row[b-svgmmwh3fz] {
    display: flex; justify-content: space-between; align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid var(--ec-border-soft);
}
.hds-row:last-child[b-svgmmwh3fz] { border-bottom: none; }
.hds-row-label[b-svgmmwh3fz] { font-size: 11.5px; color: var(--ec-muted); font-weight: 600; margin: 0; }
.hds-row-value[b-svgmmwh3fz] { font-size: 12.5px; color: var(--ec-text); font-weight: 600; margin: 0; }

/* Attachments */
.hds-attach-row[b-svgmmwh3fz] {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 18px;
    border-top: 1px solid var(--ec-border-soft);
}
.hds-attach-row:first-of-type[b-svgmmwh3fz] { border-top: 1px solid var(--ec-border-soft); }
.hds-attach-tile[b-svgmmwh3fz] {
    width: 38px; height: 38px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 800;
    flex-shrink: 0;
}
.hds-attach-body[b-svgmmwh3fz] { flex: 1; min-width: 0; }
.hds-attach-name[b-svgmmwh3fz] {
    font-size: 13px; font-weight: 700; color: var(--ec-text);
    margin: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hds-attach-meta[b-svgmmwh3fz] {
    font-size: 11px; color: var(--ec-muted);
    margin: 2px 0 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hds-attach-btn[b-svgmmwh3fz] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    padding: 6px 11px;
    font-size: 11.5px; font-weight: 700;
    color: var(--ec-blue);
    cursor: pointer; font-family: inherit;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 5px;
    white-space: nowrap;
}
.hds-attach-btn:hover[b-svgmmwh3fz] { border-color: var(--ec-blue); background: var(--ec-blue-gh); }

/* Submission status card */
.hds-status-card[b-svgmmwh3fz] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 12px;
    padding: 14px 18px;
    display: flex; align-items: center; gap: 13px;
}
.hds-status-icon[b-svgmmwh3fz] {
    width: 42px; height: 42px; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 800;
    flex-shrink: 0;
}
.hds-status-body[b-svgmmwh3fz] { flex: 1; min-width: 0; }
.hds-status-title[b-svgmmwh3fz] { font-size: 14px; font-weight: 800; color: var(--ec-text); margin: 0; }
.hds-status-sub[b-svgmmwh3fz] { font-size: 11.5px; color: var(--ec-muted); margin: 2px 0 0; }
.hds-status-grade[b-svgmmwh3fz] {
    background: var(--ec-green-lt);
    border: 1px solid rgba(22, 163, 74, 0.3);
    color: var(--ec-green);
    font-size: 18px; font-weight: 800;
    padding: 6px 14px; border-radius: 10px;
}

.hds-hint[b-svgmmwh3fz] {
    background: linear-gradient(135deg, var(--ec-blue-gh), #fff);
    border: 1px dashed var(--ec-blue-lt);
    border-radius: 12px;
    padding: 18px;
    text-align: center;
    font-size: 13px;
    color: var(--ec-sub);
    line-height: 1.55;
}

/* Feedback */
.hds-grade-card[b-svgmmwh3fz] {
    background: linear-gradient(135deg, var(--ec-green-lt), #fff);
    border: 1px solid rgba(22, 163, 74, 0.25);
    border-radius: 12px;
    padding: 16px 18px;
    display: flex; align-items: center; gap: 14px;
}
.hds-grade-circle[b-svgmmwh3fz] {
    width: 54px; height: 54px; border-radius: 14px;
    background: #fff;
    border: 2px solid var(--ec-green);
    color: var(--ec-green);
    font-size: 22px; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.hds-grade-eyebrow[b-svgmmwh3fz] {
    font-size: 11px; font-weight: 800;
    color: var(--ec-green);
    letter-spacing: 0.08em; text-transform: uppercase;
    margin: 0;
}
.hds-grade-title[b-svgmmwh3fz] { font-size: 14px; font-weight: 800; color: var(--ec-text); margin: 2px 0 0; }
.hds-grade-by[b-svgmmwh3fz] { font-size: 11.5px; color: var(--ec-muted); margin: 2px 0 0; }

.hds-feedback[b-svgmmwh3fz] {
    padding: 12px 14px;
    background: var(--ec-bg);
    border-radius: 10px;
    border-left: 3px solid var(--subj-color);
    font-size: 13.5px; color: var(--ec-text);
    line-height: 1.6; font-style: italic;
}

/* ── Footer ──────────────────────────────────────────────────────── */
.hds-foot[b-svgmmwh3fz] {
    padding: 14px 24px;
    border-top: 1px solid var(--ec-border);
    background: #fff;
    display: flex; gap: 10px;
}
.hds-foot-primary[b-svgmmwh3fz] {
    flex: 1;
    background: var(--subj-color);
    border: none; border-radius: 9px;
    padding: 11px;
    font-size: 13px; font-weight: 800;
    color: #fff;
    cursor: pointer; font-family: inherit;
    text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    transition: filter .12s;
}
.hds-foot-primary:hover[b-svgmmwh3fz] { filter: brightness(1.05); }
.hds-foot-secondary[b-svgmmwh3fz] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    padding: 11px 14px;
    font-size: 13px; font-weight: 700;
    color: var(--ec-sub);
    cursor: pointer; font-family: inherit;
}
.hds-foot-secondary:hover[b-svgmmwh3fz] { color: var(--ec-text); border-color: var(--ec-muted); }

@media (max-width: 600px) {
    .hds-stats[b-svgmmwh3fz] { grid-template-columns: repeat(2, 1fr); }
    .hds-head-row[b-svgmmwh3fz] { padding-right: 40px; }
}
/* /Components/Pages/Parent/JustifyAbsenceModal.razor.rz.scp.css */
/* Right-side slide-over (matches the documents pattern). */
.jam-overlay[b-drps0fh4sn] {
    position: fixed; inset: 0;
    background: rgba(13, 23, 51, 0.5);
    z-index: 1600;
    display: flex; justify-content: flex-end;
    animation: jam-fade-b-drps0fh4sn .15s ease;
}
@keyframes jam-fade-b-drps0fh4sn { from { opacity: 0; } to { opacity: 1; } }

.jam-panel[b-drps0fh4sn] {
    width: min(520px, 96%); height: 100%;
    background: #fff;
    box-shadow: -12px 0 40px rgba(13, 23, 51, 0.16);
    display: flex; flex-direction: column; overflow: hidden;
    animation: jam-slide-b-drps0fh4sn .22s ease-out;
}
@keyframes jam-slide-b-drps0fh4sn { from { transform: translateX(24px); opacity: .4; } to { transform: translateX(0); opacity: 1; } }

.jam-head[b-drps0fh4sn] {
    padding: 18px 22px;
    background: linear-gradient(135deg, var(--ec-red-lt), #fff5f5);
    border-bottom: 1px solid var(--ec-border);
    display: flex; align-items: flex-start; gap: 13px;
}
.jam-head-ic[b-drps0fh4sn] {
    width: 44px; height: 44px; border-radius: 11px;
    background: #fff; border: 1px solid #fecaca; color: var(--ec-red);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0;
}
.jam-head-id[b-drps0fh4sn] { flex: 1; min-width: 0; }
.jam-eyebrow[b-drps0fh4sn] {
    font-size: 10.5px; font-weight: 800; color: var(--ec-red);
    letter-spacing: 0.1em; text-transform: uppercase; margin: 0;
}
.jam-title[b-drps0fh4sn] { font-size: 18px; font-weight: 800; color: var(--ec-text); margin: 4px 0 0; line-height: 1.25; }
.jam-sub[b-drps0fh4sn] { font-size: 12px; color: var(--ec-muted); margin: 3px 0 0; }
.jam-sub-strong[b-drps0fh4sn] { color: var(--ec-red); }
.jam-close[b-drps0fh4sn] {
    width: 32px; height: 32px; border-radius: 9px;
    background: #fff; border: 1px solid var(--ec-border);
    font-size: 14px; color: var(--ec-muted);
    cursor: pointer; font-family: inherit; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.jam-close:hover[b-drps0fh4sn] { color: var(--ec-text); border-color: var(--ec-muted); }

.jam-body[b-drps0fh4sn] { padding: 18px 22px; overflow-y: auto; flex: 1; }
.jam-intro[b-drps0fh4sn] { font-size: 13px; color: var(--ec-text); line-height: 1.55; margin: 0 0 14px; }
.jam-label[b-drps0fh4sn] {
    font-size: 11px; font-weight: 800; color: var(--ec-muted);
    letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 6px;
}
.jam-textarea[b-drps0fh4sn] {
    width: 100%; min-height: 110px; padding: 12px 14px;
    border: 1px solid var(--ec-border); border-radius: 10px;
    background: #fff; font-size: 13px; color: var(--ec-text);
    font-family: inherit; line-height: 1.5; resize: vertical;
    outline: none; margin-bottom: 14px;
}
.jam-textarea:focus[b-drps0fh4sn] { border-color: var(--ec-blue); }

.jam-attach[b-drps0fh4sn] {
    width: 100%; padding: 14px; border-radius: 10px;
    border: 1.5px dashed var(--ec-border); background: #fff;
    cursor: pointer; font-family: inherit; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    position: relative; margin-bottom: 14px;
}
.jam-attach--done[b-drps0fh4sn] { border-style: solid; border-color: #bbf7d0; background: var(--ec-green-lt); }
.jam-attach--busy[b-drps0fh4sn] { opacity: .7; cursor: default; }
.jam-attach :deep(input[type=file])[b-drps0fh4sn] {
    position: absolute; inset: 0; opacity: 0; cursor: pointer;
}
.jam-attach--done :deep(input[type=file])[b-drps0fh4sn],
.jam-attach--busy :deep(input[type=file])[b-drps0fh4sn] { display: none; }
.jam-attach-ic[b-drps0fh4sn] { font-size: 22px; color: var(--ec-muted); }
.jam-attach-ic--done[b-drps0fh4sn] { color: var(--ec-green); }
.jam-attach-l[b-drps0fh4sn] { font-size: 12.5px; font-weight: 800; color: var(--ec-text); }
.jam-attach-l--done[b-drps0fh4sn] { color: var(--ec-green); }
.jam-attach-hint[b-drps0fh4sn] { font-size: 10.5px; color: var(--ec-muted); }

.jam-heads-up[b-drps0fh4sn] {
    margin-top: 0; padding: 10px 13px;
    background: var(--ec-amber-lt); border: 1px solid #fde68a; border-radius: 9px;
    font-size: 11.5px; color: var(--ec-text); line-height: 1.5;
}
.jam-heads-up-l[b-drps0fh4sn] {
    display: block; margin-bottom: 3px;
    color: var(--ec-amber); font-size: 9.5px; font-weight: 800;
    letter-spacing: 0.08em; text-transform: uppercase;
}
.jam-error[b-drps0fh4sn] {
    margin-top: 12px; display: flex; align-items: center; gap: 8px;
    color: var(--ec-red); font-size: 12.5px; font-weight: 600;
}

.jam-foot[b-drps0fh4sn] {
    padding: 14px 22px; border-top: 1px solid var(--ec-border);
    background: #fff; display: flex; gap: 10px;
}
.jam-cancel[b-drps0fh4sn] {
    flex: 0 0 auto; padding: 11px 18px;
    background: #fff; border: 1px solid var(--ec-border); border-radius: 10px;
    font-size: 13px; font-weight: 700; color: var(--ec-sub);
    cursor: pointer; font-family: inherit;
}
.jam-submit[b-drps0fh4sn] {
    flex: 1; padding: 11px; border: none; border-radius: 10px;
    background: var(--ec-red); color: #fff;
    font-size: 13px; font-weight: 800; letter-spacing: 0.02em;
    cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.jam-submit:disabled[b-drps0fh4sn] { background: var(--ec-border-soft); color: var(--ec-muted); cursor: not-allowed; }

.jam-spinner[b-drps0fh4sn] {
    width: 15px; height: 15px; border-radius: 50%;
    border: 2px solid var(--ec-border); border-top-color: var(--ec-muted);
    animation: jam-spin-b-drps0fh4sn .7s linear infinite; display: inline-block;
}
.jam-spinner--light[b-drps0fh4sn] { border-color: rgba(255,255,255,.4); border-top-color: #fff; }
@keyframes jam-spin-b-drps0fh4sn { to { transform: rotate(360deg); } }
/* /Components/Pages/Parent/KgAreaDetailSheet.razor.rz.scp.css */
/* KG development area-detail slide-over — milestone rows (chrome is the global psheet-*). */
.ad-head-id[b-mgksy1b1vr] { display: flex; align-items: center; gap: 11px; }
.ad-icon[b-mgksy1b1vr] {
    width: 38px; height: 38px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ad-desc[b-mgksy1b1vr] { font-size: 13px; color: var(--ec-muted); line-height: 1.55; margin: 0 0 14px; }

.ad-row[b-mgksy1b1vr] { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; }
.ad-row--bt[b-mgksy1b1vr] { border-top: 1px solid var(--ec-border-soft); }
.ad-badge[b-mgksy1b1vr] {
    font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    padding: 4px 8px; border-radius: 6px; white-space: nowrap; flex-shrink: 0;
}
.ad-body[b-mgksy1b1vr] { flex: 1; min-width: 0; }
.ad-text[b-mgksy1b1vr] { font-size: 13px; font-weight: 600; color: var(--ec-text); margin: 0; }
.ad-beh[b-mgksy1b1vr] { font-size: 12px; color: var(--ec-muted); margin: 3px 0 0; line-height: 1.5; }
.ad-note[b-mgksy1b1vr] { font-size: 12px; font-style: italic; color: var(--ec-sub); margin: 4px 0 0; line-height: 1.5; }
/* /Components/Pages/Parent/MarkAbsentModal.razor.rz.scp.css */
/* Right-side slide-over (matches the documents pattern). */
.mam-overlay[b-zvjsnecrus] {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 1200;
    display: flex; justify-content: flex-end;
    animation: mam-fade-b-zvjsnecrus .15s ease;
}
@keyframes mam-fade-b-zvjsnecrus { from { opacity: 0; } to { opacity: 1; } }

.mam-card[b-zvjsnecrus] {
    background: #fff;
    width: min(520px, 96%);
    height: 100%;
    overflow-y: auto;
    box-shadow: -12px 0 40px rgba(13, 23, 51, 0.16);
    display: flex; flex-direction: column;
    animation: mam-slide-b-zvjsnecrus .22s ease-out;
}
@keyframes mam-slide-b-zvjsnecrus { from { transform: translateX(24px); opacity: .4; } to { transform: translateX(0); opacity: 1; } }

.mam-head[b-zvjsnecrus] {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ec-border-soft);
    background: linear-gradient(135deg, var(--ec-blue-gh), #fff);
}
.mam-head-icon[b-zvjsnecrus] {
    width: 42px; height: 42px; border-radius: 11px;
    background: var(--ec-blue);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.mam-head-text[b-zvjsnecrus] { flex: 1; min-width: 0; }
.mam-eyebrow[b-zvjsnecrus] {
    font-size: 10px; font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.1em; text-transform: uppercase;
    margin: 0;
}
.mam-title[b-zvjsnecrus] {
    font-size: 18px; font-weight: 800;
    color: var(--ec-text);
    margin: 3px 0 0; letter-spacing: -0.01em;
}
.mam-close[b-zvjsnecrus] {
    width: 32px; height: 32px; border-radius: 8px;
    background: #fff; border: 1px solid var(--ec-border);
    color: var(--ec-sub);
    cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px;
}
.mam-close:hover[b-zvjsnecrus] { color: var(--ec-text); border-color: var(--ec-blue); }

.mam-body[b-zvjsnecrus] { padding: 18px 22px; }
.mam-hint[b-zvjsnecrus] { font-size: 12.5px; color: var(--ec-sub); line-height: 1.5; margin: 0 0 14px; }
.mam-error[b-zvjsnecrus] {
    display: flex; align-items: center; gap: 8px;
    background: var(--ec-red-lt); color: var(--ec-red);
    border: 1px solid rgba(220, 38, 38, 0.22);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 12px; font-weight: 600;
    margin-bottom: 12px;
}

.mam-label[b-zvjsnecrus] {
    font-size: 11px; font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.06em; text-transform: uppercase;
    margin: 12px 0 8px;
}
.mam-label:first-of-type[b-zvjsnecrus] { margin-top: 0; }
.mam-optional[b-zvjsnecrus] { color: var(--ec-faint); font-weight: 600; letter-spacing: 0; text-transform: none; margin-left: 4px; }

.mam-day-row[b-zvjsnecrus] { display: flex; gap: 8px; }
.mam-day[b-zvjsnecrus] {
    flex: 1;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer; font-family: inherit;
    display: flex; flex-direction: column; gap: 2px;
    text-align: left;
    transition: border-color .12s, background .12s;
}
.mam-day:hover[b-zvjsnecrus] { border-color: var(--ec-blue); }
.mam-day--active[b-zvjsnecrus] { background: var(--ec-blue-lt); border-color: var(--ec-blue); }
.mam-day-label[b-zvjsnecrus] { font-size: 12.5px; font-weight: 800; color: var(--ec-text); }
.mam-day--active .mam-day-label[b-zvjsnecrus] { color: var(--ec-blue); }
.mam-day-date[b-zvjsnecrus] { font-size: 10.5px; color: var(--ec-muted); }

.mam-reasons[b-zvjsnecrus] { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mam-reason[b-zvjsnecrus] {
    display: inline-flex; align-items: center; gap: 9px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer; font-family: inherit;
    font-size: 12.5px; font-weight: 700;
    color: var(--ec-sub);
    text-align: left;
    transition: border-color .12s, background .12s, color .12s;
}
.mam-reason:hover[b-zvjsnecrus] { border-color: var(--ec-blue); color: var(--ec-text); }
.mam-reason i[b-zvjsnecrus] { font-size: 14px; color: var(--ec-muted); }
.mam-reason--active[b-zvjsnecrus] { background: var(--ec-blue-lt); border-color: var(--ec-blue); color: var(--ec-blue); }
.mam-reason--active i[b-zvjsnecrus] { color: var(--ec-blue); }

.mam-note[b-zvjsnecrus] {
    width: 100%;
    background: var(--ec-blue-gh);
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px; font-family: inherit;
    color: var(--ec-text);
    resize: vertical; outline: none;
    box-sizing: border-box;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.mam-note:focus[b-zvjsnecrus] { background: #fff; border-color: var(--ec-blue); box-shadow: 0 0 0 3px rgba(59, 95, 192, .14); }
.mam-note-meta[b-zvjsnecrus] { font-size: 10.5px; color: var(--ec-faint); text-align: right; margin: 4px 0 0; }

.mam-foot[b-zvjsnecrus] {
    display: flex; gap: 8px; justify-content: flex-end;
    padding: 14px 22px 18px;
    border-top: 1px solid var(--ec-border-soft);
}
.mam-btn[b-zvjsnecrus] {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px; border-radius: 10px;
    font-size: 13px; font-weight: 800;
    cursor: pointer; font-family: inherit;
    transition: filter .12s, transform .12s, background .12s, border-color .12s;
}
.mam-btn:disabled[b-zvjsnecrus] { opacity: 0.55; cursor: not-allowed; }
.mam-btn-ghost[b-zvjsnecrus] { background: #fff; color: var(--ec-sub); border: 1px solid var(--ec-border); }
.mam-btn-ghost:hover:not(:disabled)[b-zvjsnecrus] { color: var(--ec-text); border-color: var(--ec-muted); }
.mam-btn-primary[b-zvjsnecrus] {
    background: linear-gradient(135deg, var(--ec-blue), var(--ec-blue-dk));
    color: #fff; border: none;
    box-shadow: 0 8px 22px -8px rgba(41, 68, 160, 0.5);
}
.mam-btn-primary:hover:not(:disabled)[b-zvjsnecrus] { transform: translateY(-1px); filter: brightness(1.04); }
.mam-spinner[b-zvjsnecrus] {
    width: 16px; height: 16px;
    border: 2.5px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff; border-radius: 50%;
    animation: mam-spin-b-zvjsnecrus 0.7s linear infinite;
}
@keyframes mam-spin-b-zvjsnecrus { to { transform: rotate(360deg); } }

@media (max-width: 480px) {
    .mam-reasons[b-zvjsnecrus] { grid-template-columns: 1fr; }
}

/* ── Attachment block ──────────────────────────────────────────────
   Three visual states: empty (file picker), busy (uploading spinner),
   ready (filename + size pill + remove button). InputFile is rendered
   inside the label so the whole tile is clickable. */
.mam-attach[b-zvjsnecrus] {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 11px;
    padding: 12px 14px;
    border: 1px dashed var(--ec-border);
    background: var(--ec-bg, #f8fafc);
    cursor: pointer;
    transition: border-color .12s, background .12s;
    font-size: 13px;
    color: var(--ec-text);
}
.mam-attach .bi[b-zvjsnecrus] { font-size: 18px; color: var(--ec-blue, #3b5fc0); flex-shrink: 0; }
.mam-attach--empty:hover[b-zvjsnecrus] {
    border-color: var(--ec-blue, #3b5fc0);
    background: color-mix(in srgb, var(--ec-blue, #3b5fc0) 4%, var(--ec-bg, #f8fafc));
}
.mam-attach-input[b-zvjsnecrus] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.mam-attach--busy[b-zvjsnecrus] {
    border-style: solid;
    border-color: var(--ec-border);
    color: var(--ec-muted);
}
.mam-attach-spin[b-zvjsnecrus] { animation: mam-spin-b-zvjsnecrus 1s linear infinite; }

.mam-attach--ready[b-zvjsnecrus] {
    border-style: solid;
    border-color: color-mix(in srgb, var(--ec-green, #16a34a) 35%, transparent);
    background: color-mix(in srgb, var(--ec-green, #16a34a) 6%, #fff);
    cursor: default;
}
.mam-attach--ready .bi-paperclip[b-zvjsnecrus] {
    color: var(--ec-green, #16a34a);
}
.mam-attach-text[b-zvjsnecrus] { flex: 1; min-width: 0; }
.mam-attach-name[b-zvjsnecrus] {
    margin: 0;
    font-weight: 700;
    font-size: 13px;
    color: var(--ec-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mam-attach-meta[b-zvjsnecrus] { margin: 1px 0 0; font-size: 11px; color: var(--ec-muted); }
.mam-attach-remove[b-zvjsnecrus] {
    background: transparent;
    border: none;
    color: var(--ec-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    flex-shrink: 0;
}
.mam-attach-remove:hover:not(:disabled)[b-zvjsnecrus] {
    background: rgba(15, 23, 42, 0.06);
    color: var(--ec-text);
}
.mam-attach-remove:disabled[b-zvjsnecrus] { opacity: 0.5; cursor: not-allowed; }
.mam-attach-remove .bi[b-zvjsnecrus] { font-size: 12px; color: inherit; }

.mam-attach-err[b-zvjsnecrus] {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--ec-red, #dc2626);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
/* /Components/Pages/Parent/MealMenuSheet.razor.rz.scp.css */
/* Meal detail slide-over — meal-specific content inside the shared psheet chrome.
   Source: prototype MealMenuSheet (EduConnect All Roles.html 11561-11665). */

.mms-panel[b-ako02wc624] { width: min(440px, 92%); }

.mms-head-id[b-ako02wc624] { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mms-icon[b-ako02wc624] { width: 44px; height: 44px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mms-time[b-ako02wc624] { color: var(--ec-muted); font-family: ui-monospace, "SF Mono", monospace; font-size: 13px; font-weight: 700; }

.mms-body[b-ako02wc624] { gap: 0; padding: 0; }

/* Status banner */
.mms-status[b-ako02wc624] { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-bottom: 1px solid; }
.mms-status-chip[b-ako02wc624] { background: #fff; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 6px; letter-spacing: .06em; text-transform: uppercase; border: 1px solid; flex-shrink: 0; }
.mms-status-text[b-ako02wc624] { font-size: 12px; color: var(--ec-text); font-weight: 600; margin: 0; }

/* Teacher note */
.mms-note[b-ako02wc624] { margin: 14px 20px 0; padding: 11px 13px; border: 1px solid; border-radius: 10px; }
.mms-note-label[b-ako02wc624] { font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 5px; }
.mms-note-text[b-ako02wc624] { font-size: 12.5px; color: var(--ec-text); line-height: 1.5; font-style: italic; margin: 0; }

/* Offered list */
.mms-offered-head[b-ako02wc624] { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 20px 10px; }
.mms-offered-title[b-ako02wc624] { font-size: 11px; font-weight: 800; color: var(--ec-muted); letter-spacing: .1em; text-transform: uppercase; margin: 0; }
.mms-offered-meta[b-ako02wc624] { font-size: 11.5px; color: var(--ec-muted); font-weight: 700; margin: 0; }

.mms-items[b-ako02wc624] { display: flex; flex-direction: column; gap: 8px; padding: 0 20px; }
.mms-item[b-ako02wc624] { background: #fff; border: 1px solid var(--ec-border); border-radius: 10px; padding: 11px 13px; }
.mms-item-top[b-ako02wc624] { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.mms-item-name[b-ako02wc624] { font-size: 13px; font-weight: 800; color: var(--ec-text); flex: 1; line-height: 1.35; margin: 0; }
.mms-item-kcal[b-ako02wc624] { font-size: 11px; color: var(--ec-muted); font-weight: 700; white-space: nowrap; margin: 0; }
.mms-item-desc[b-ako02wc624] { font-size: 11.5px; color: var(--ec-sub); line-height: 1.5; margin: 5px 0 0; }
.mms-tags[b-ako02wc624] { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.mms-tag[b-ako02wc624] { font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 4px; letter-spacing: .05em; }
.mms-tag--vegan[b-ako02wc624] { background: #dcfce7; color: #16a34a; }
.mms-tag--veg[b-ako02wc624] { background: #cffafe; color: #0891b2; }
.mms-tag--allergen[b-ako02wc624] { background: #fef3c7; color: #d97706; }

.mms-empty[b-ako02wc624] { margin: 0 20px; padding: 18px; text-align: center; background: #fff; border: 1px dashed var(--ec-border); border-radius: 10px; }
.mms-empty p[b-ako02wc624] { font-size: 12px; color: var(--ec-muted); margin: 0; }

.mms-allergens[b-ako02wc624] { margin: 14px 20px 18px; padding: 10px 13px; background: #fef3c7; border: 1px solid #fde68a; border-radius: 9px; font-size: 11.5px; color: var(--ec-text); line-height: 1.5; }
.mms-allergens b[b-ako02wc624] { color: #d97706; font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; display: block; margin-bottom: 3px; }

/* Footer CTA — full-width green */
.mms-foot[b-ako02wc624] { justify-content: stretch; }
.mms-week-btn[b-ako02wc624] { width: 100%; background: #16a34a; color: #fff; border: none; border-radius: 10px; padding: 11px; font-size: 12.5px; font-weight: 800; cursor: pointer; font-family: inherit; letter-spacing: .02em; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: filter .12s; }
.mms-week-btn:hover[b-ako02wc624] { filter: brightness(1.05); }
/* /Components/Pages/Parent/MyChildKg.razor.rz.scp.css */
/* Kindergarten "My Child" profile — isolated kgc-* styles (school path untouched). */

/* ── Hero ── */
.kgc-hero[b-49lrci6wxk] {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    padding: 24px 26px;
    background: linear-gradient(135deg, var(--ec-primary) 0%, var(--ec-primary-dk) 60%, var(--ec-primary-dk) 130%);
    color: #fff;
    /* NO margin-bottom: hero/tabs/content are all .pd-page flex children, so the
       24px flex gap alone spaces them. A margin here would STACK on the gap (48px). */
}
.kgc-hero-ring[b-49lrci6wxk] { position: absolute; border-radius: 50%; background: rgba(255,255,255,.07); pointer-events: none; }
.kgc-hero-ring-1[b-49lrci6wxk] { width: 320px; height: 320px; right: -90px; top: -120px; }
.kgc-hero-ring-2[b-49lrci6wxk] { width: 200px; height: 200px; right: 120px; bottom: -130px; }

.kgc-hero-row[b-49lrci6wxk] { position: relative; display: flex; gap: 22px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.kgc-hero-id[b-49lrci6wxk] { display: flex; gap: 16px; align-items: center; min-width: 280px; }

.kgc-avatar-wrap[b-49lrci6wxk] { position: relative; }
.kgc-avatar[b-49lrci6wxk] {
    width: 84px; height: 84px; border-radius: 20px;
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; font-weight: 800; color: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,.18); border: 2px solid rgba(255,255,255,.35);
}
.kgc-avatar--img[b-49lrci6wxk] { object-fit: cover; }
.kgc-avatar--busy[b-49lrci6wxk] { background: rgba(255,255,255,.18); font-size: 22px; }
.kgc-avatar-spin[b-49lrci6wxk] { animation: kgc-avatar-spin-b-49lrci6wxk .7s linear infinite; }
@keyframes kgc-avatar-spin-b-49lrci6wxk { to { transform: rotate(360deg); } }

/* Photo-edit affordance on the hero avatar */
.kgc-avatar-edit[b-49lrci6wxk] {
    position: absolute; right: -6px; bottom: -6px;
    width: 30px; height: 30px; border-radius: 50%;
    background: #fff; color: var(--ec-pink);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; cursor: pointer; border: 2px solid rgba(255,255,255,.6);
    box-shadow: 0 3px 10px rgba(0,0,0,.22);
    transition: transform .12s, filter .12s;
}
.kgc-avatar-edit:hover[b-49lrci6wxk] { transform: scale(1.06); filter: brightness(1.03); }
.kgc-avatar-edit[b-49lrci6wxk]  input[type="file"] {
    position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.kgc-mood[b-49lrci6wxk] {
    position: absolute; top: -8px; right: -8px;
    width: 30px; height: 30px; border-radius: 50%;
    background: #fff; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 10px rgba(0,0,0,.18);
}

.kgc-eyebrow[b-49lrci6wxk] { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .85; margin: 0 0 2px; font-weight: 700; }
.kgc-name[b-49lrci6wxk] { font-size: 28px; font-weight: 800; margin: 0 0 8px; line-height: 1.1; }
.kgc-tags[b-49lrci6wxk] { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.kgc-tag[b-49lrci6wxk] { font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: rgba(255,255,255,.18); letter-spacing: .03em; }
.kgc-tag--active[b-49lrci6wxk] { background: rgba(255,255,255,.92); color: var(--ec-primary); }
.kgc-id-line[b-49lrci6wxk] { font-size: 13px; opacity: .92; margin: 0; }
.kgc-id-code[b-49lrci6wxk] { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* KPI tiles */
.kgc-stats[b-49lrci6wxk] { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 10px; }
.kgc-stat[b-49lrci6wxk] {
    text-align: left; border: none; cursor: default;
    background: rgba(255,255,255,.13); border-radius: 12px; padding: 12px 13px; color: #fff;
    backdrop-filter: blur(4px);
}
button.kgc-stat[b-49lrci6wxk] { cursor: pointer; }
.kgc-stat-head[b-49lrci6wxk] { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.kgc-stat-label[b-49lrci6wxk] { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; opacity: .85; margin: 0; font-weight: 700; }
.kgc-stat-value[b-49lrci6wxk] { font-size: 24px; font-weight: 800; margin: 0; line-height: 1; }
.kgc-stat-value--sm[b-49lrci6wxk] { font-size: 17px; line-height: 1.15; }
.kgc-stat-sub[b-49lrci6wxk] { font-size: 11px; opacity: .85; margin: 4px 0 0; }

/* Toolbar */
.kgc-toolbar[b-49lrci6wxk] { position: relative; display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.kgc-tool[b-49lrci6wxk] {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 600; padding: 9px 14px; border-radius: 10px; cursor: pointer;
    border: 1px solid transparent;
}
.kgc-tool--solid[b-49lrci6wxk] { background: #fff; color: var(--ec-primary); }
.kgc-tool--glass[b-49lrci6wxk] { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.3); }

/* ── Tabs ── */
/* Tabs are a .pd-page flex child (24px gap). -8px top/bottom nets a tighter 16px
   above and below — matching the 16px internal rhythm of the tab content below —
   so the tab row hugs the hero + content instead of floating in a wide band.
   Deliberate small negative margin (NOT a positive one, which would stack to 48px). */
.kgc-tabs[b-49lrci6wxk] { display: flex; gap: 6px; background: var(--ec-card); border: 1px solid var(--ec-border); border-radius: 12px; padding: 5px; overflow-x: auto; margin: -8px 0; }
.kgc-tab[b-49lrci6wxk] {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--ec-sub);
    background: transparent; border: none; border-radius: 9px; padding: 9px 12px; cursor: pointer;
}
.kgc-tab--active[b-49lrci6wxk] { background: var(--ec-primary); color: #fff; }
.kgc-tab-icon[b-49lrci6wxk] { display: inline-flex; }

/* ── Cards / layout ── */
.kgc-tab-content[b-49lrci6wxk] { padding-bottom: 24px; }
.kgc-overview-grid[b-49lrci6wxk] { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }
.kgc-col[b-49lrci6wxk] { display: flex; flex-direction: column; gap: 16px; }
.kgc-card[b-49lrci6wxk] { background: var(--ec-card); border: 1px solid var(--ec-border); border-radius: 14px; overflow: hidden; }
.kgc-card-head[b-49lrci6wxk] { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 16px 18px 12px; }
.kgc-card-title[b-49lrci6wxk] { font-size: 15px; font-weight: 700; margin: 0; color: var(--ec-text); }
.kgc-card-sub[b-49lrci6wxk] { font-size: 12px; color: var(--ec-muted); margin: 2px 0 0; }
.kgc-card-body[b-49lrci6wxk] { padding: 4px 18px 18px; }

.kgc-inforow[b-49lrci6wxk] { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--ec-border-soft); gap: 12px; }
.kgc-inforow--last[b-49lrci6wxk] { border-bottom: none; }
.kgc-inforow-label[b-49lrci6wxk] { font-size: 12px; color: var(--ec-muted); margin: 0; text-transform: uppercase; letter-spacing: .04em; }
.kgc-inforow-value[b-49lrci6wxk] { font-size: 14px; font-weight: 600; color: var(--ec-text); margin: 0; text-align: right; }
.kgc-inforow-value.mono[b-49lrci6wxk] { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Live chip */
.kgc-live[b-49lrci6wxk] { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--ec-green); background: color-mix(in srgb, var(--ec-green) 10%, transparent); padding: 4px 9px; border-radius: 999px; }
.kgc-live-dot[b-49lrci6wxk] { width: 7px; height: 7px; border-radius: 50%; background: var(--ec-green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ec-green) 25%, transparent); }

/* Meals */
.kgc-meals-eyebrow[b-49lrci6wxk] { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ec-muted); margin: 4px 0 10px; }
.kgc-meal-grid[b-49lrci6wxk] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.kgc-meal-tile[b-49lrci6wxk] { border: 1px solid var(--ec-border); border-radius: 10px; padding: 10px 8px; text-align: center; }
.kgc-meal-label[b-49lrci6wxk] { font-size: 12px; font-weight: 700; color: var(--ec-text); margin: 0; }
.kgc-meal-time[b-49lrci6wxk] { font-size: 11px; color: var(--ec-muted); margin: 2px 0 6px; }
.kgc-meal-status[b-49lrci6wxk] { font-size: 11px; font-weight: 700; margin: 0; }

/* Nap row */
.kgc-nap-row[b-49lrci6wxk] { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px; border: 1px solid var(--ec-border-soft); border-radius: 10px; }
.kgc-nap-tile[b-49lrci6wxk] { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--ec-blue) 10%, transparent); }
.kgc-nap-body[b-49lrci6wxk] { flex: 1; }
.kgc-nap-title[b-49lrci6wxk] { font-size: 14px; font-weight: 700; color: var(--ec-text); margin: 0; }
.kgc-nap-sub[b-49lrci6wxk] { font-size: 12px; color: var(--ec-muted); margin: 2px 0 0; }
.kgc-nap-chip[b-49lrci6wxk] { font-size: 11px; font-weight: 700; color: var(--ec-green); background: color-mix(in srgb, var(--ec-green) 12%, transparent); padding: 4px 9px; border-radius: 999px; }

/* Photos row */
.kgc-photos-row[b-49lrci6wxk] { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 10px; padding: 12px; border: 1px solid var(--ec-border-soft); border-radius: 10px; background: transparent; cursor: pointer; text-align: left; }
.kgc-photos-tile[b-49lrci6wxk] { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--ec-primary) 10%, transparent); }
.kgc-photos-body[b-49lrci6wxk] { flex: 1; }
.kgc-photos-title[b-49lrci6wxk] { font-size: 14px; font-weight: 600; color: var(--ec-text); margin: 0; }
.kgc-photos-link[b-49lrci6wxk] { font-size: 12px; font-weight: 700; color: var(--ec-primary); }

/* Group card */
.kgc-group[b-49lrci6wxk] { background: linear-gradient(160deg, color-mix(in srgb, var(--ec-primary) 6%, var(--ec-card)), var(--ec-card)); border: 1px solid var(--ec-border); border-radius: 14px; padding: 16px 18px; }
.kgc-group-eyebrow[b-49lrci6wxk] { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ec-muted); font-weight: 700; margin: 0 0 10px; }
.kgc-group-eyebrow--inline[b-49lrci6wxk] { margin: 0 0 8px; }
.kgc-group-row[b-49lrci6wxk] { display: flex; align-items: center; gap: 12px; }
.kgc-group-tile[b-49lrci6wxk] { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--ec-primary), #7c3aed); }
.kgc-group-name[b-49lrci6wxk] { font-size: 15px; font-weight: 700; color: var(--ec-text); margin: 0; }
.kgc-group-sub[b-49lrci6wxk] { font-size: 12px; color: var(--ec-muted); margin: 2px 0 0; }
.kgc-group-divider[b-49lrci6wxk] { height: 1px; background: var(--ec-border-soft); margin: 14px 0; }

.kgc-teacher-row[b-49lrci6wxk] { display: flex; align-items: center; gap: 11px; }
.kgc-teacher-avatar[b-49lrci6wxk] { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 14px; }
.kgc-teacher-body[b-49lrci6wxk] { flex: 1; }
.kgc-teacher-name[b-49lrci6wxk] { font-size: 14px; font-weight: 700; color: var(--ec-text); margin: 0; }
.kgc-teacher-role[b-49lrci6wxk] { font-size: 12px; color: var(--ec-muted); margin: 2px 0 0; }
.kgc-teacher-msg[b-49lrci6wxk] { font-size: 12px; font-weight: 600; color: #fff; background: var(--ec-primary); border: none; border-radius: 8px; padding: 7px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
/* Assistant teacher — smaller row variant (prototype 11106-11116) */
.kgc-teacher-row--sm[b-49lrci6wxk] { margin-top: 11px; }
.kgc-teacher-avatar--sm[b-49lrci6wxk] { width: 34px; height: 34px; font-size: 11px; }
.kgc-teacher-row--sm .kgc-teacher-name[b-49lrci6wxk] { font-size: 12px; }
.kgc-teacher-row--sm .kgc-teacher-role[b-49lrci6wxk] { font-size: 10.5px; }

/* Attendance donut */
.kgc-attendance[b-49lrci6wxk] { display: flex; gap: 18px; align-items: center; }
.kgc-donut[b-49lrci6wxk] { position: relative; width: 88px; height: 88px; flex-shrink: 0; }
.kgc-donut-center[b-49lrci6wxk] { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.kgc-donut-pct[b-49lrci6wxk] { font-size: 20px; font-weight: 800; color: var(--ec-text); margin: 0; }
.kgc-donut-label[b-49lrci6wxk] { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--ec-muted); margin: 0; }
.kgc-legend[b-49lrci6wxk] { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.kgc-legend-row[b-49lrci6wxk] { display: flex; align-items: center; gap: 8px; }
.kgc-legend-dot[b-49lrci6wxk] { width: 9px; height: 9px; border-radius: 50%; }
.kgc-legend-label[b-49lrci6wxk] { flex: 1; font-size: 13px; color: var(--ec-sub); margin: 0; }
.kgc-legend-count[b-49lrci6wxk] { font-size: 13px; font-weight: 700; color: var(--ec-text); margin: 0; }

/* What teachers should know */
.kgc-know[b-49lrci6wxk] { background: linear-gradient(160deg, color-mix(in srgb, var(--ec-purple) 8%, var(--ec-card)), var(--ec-card)); border: 1px solid color-mix(in srgb, var(--ec-purple) 22%, var(--ec-border)); border-radius: 14px; padding: 14px 16px; }
.kgc-know-eyebrow[b-49lrci6wxk] { display: flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ec-purple); font-weight: 700; margin: 0 0 8px; }
.kgc-know-line[b-49lrci6wxk] { font-size: 13px; color: var(--ec-text); margin: 0 0 4px; }
.kgc-know-line--muted[b-49lrci6wxk] { color: var(--ec-muted); }

.kgc-soon[b-49lrci6wxk] { font-size: 13px; color: var(--ec-muted); text-align: center; padding: 24px 0; margin: 0; }

/* ── Development tab ── */
.kgc-dev[b-49lrci6wxk] { display: flex; flex-direction: column; gap: 16px; }
.kgc-dev-grid[b-49lrci6wxk] { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.kgc-dev-card[b-49lrci6wxk] { border: 1px solid var(--ec-border); border-radius: 12px; padding: 14px; }
/* Area card is a button (opens the area-detail slide-over) — reset + hover affordance. */
button.kgc-dev-card[b-49lrci6wxk] { width: 100%; text-align: left; background: var(--ec-card); cursor: pointer; font-family: inherit; transition: border-color .12s, box-shadow .12s; }
button.kgc-dev-card:hover[b-49lrci6wxk] { border-color: color-mix(in srgb, var(--ec-primary) 45%, var(--ec-border)); box-shadow: 0 4px 14px color-mix(in srgb, var(--ec-ink) 6%, transparent); }
.kgc-dev-view[b-49lrci6wxk] { font-size: 12px; font-weight: 700; margin: 10px 0 0; }
.kgc-dev-head[b-49lrci6wxk] { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.kgc-dev-icon[b-49lrci6wxk] { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.kgc-dev-name[b-49lrci6wxk] { font-size: 14px; font-weight: 700; color: var(--ec-text); margin: 0; }
.kgc-dev-pct[b-49lrci6wxk] { font-size: 26px; font-weight: 800; margin: 0 0 8px; color: var(--ec-text); }
.kgc-dev-pct-unit[b-49lrci6wxk] { font-size: 14px; font-weight: 700; color: var(--ec-muted); }
.kgc-dev-bar[b-49lrci6wxk] { height: 6px; border-radius: 999px; background: var(--ec-border-soft); overflow: hidden; }
.kgc-dev-bar-fill[b-49lrci6wxk] { height: 100%; border-radius: 999px; }
.kgc-dev-note[b-49lrci6wxk] { font-size: 12px; font-style: italic; color: var(--ec-muted); margin: 8px 0 0; }
.kgc-dev-overall[b-49lrci6wxk] { font-size: 12px; font-weight: 800; color: var(--ec-purple); white-space: nowrap; }

/* Milestones */
.kgc-msa[b-49lrci6wxk] { padding: 14px 16px; }
.kgc-msa + .kgc-msa[b-49lrci6wxk] { border-top: 1px solid var(--ec-border-soft); }
.kgc-msa-head[b-49lrci6wxk] { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.kgc-msa-name[b-49lrci6wxk] { font-size: 13.5px; font-weight: 800; color: var(--ec-text); margin: 0; }
.kgc-msa-count[b-49lrci6wxk] { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--ec-sub); }
.kgc-ms-row[b-49lrci6wxk] { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; }
.kgc-ms-row--bt[b-49lrci6wxk] { border-top: 1px solid var(--ec-border-soft); }
.kgc-ms-icon[b-49lrci6wxk] { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kgc-ms-body[b-49lrci6wxk] { flex: 1; min-width: 0; }
.kgc-ms-chip[b-49lrci6wxk] { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .05em; padding: 2px 7px; border-radius: 999px; margin-bottom: 3px; }
.kgc-ms-badge[b-49lrci6wxk] { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 800; letter-spacing: .03em; padding: 4px 10px; border-radius: 999px; flex-shrink: 0; white-space: nowrap; }
.kgc-ms-text[b-49lrci6wxk] { font-size: 14px; font-weight: 600; color: var(--ec-text); margin: 0; }
.kgc-ms-beh[b-49lrci6wxk] { font-size: 12px; color: var(--ec-sub); margin: 3px 0 0; line-height: 1.4; }
.kgc-ms-note[b-49lrci6wxk] { font-size: 12px; font-style: italic; color: var(--ec-text); background: color-mix(in srgb, var(--ec-purple) 7%, transparent); border-radius: 8px; padding: 6px 9px; margin: 6px 0 0; }
.kgc-ms-date[b-49lrci6wxk] { font-size: 12px; color: var(--ec-muted); margin: 0; flex-shrink: 0; }

/* Observations */
.kgc-obs-row[b-49lrci6wxk] { display: flex; gap: 12px; padding: 14px 0; }
.kgc-obs-row--bt[b-49lrci6wxk] { border-top: 1px solid var(--ec-border-soft); }
.kgc-obs-av[b-49lrci6wxk] { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.kgc-obs-body[b-49lrci6wxk] { flex: 1; min-width: 0; }
.kgc-obs-head[b-49lrci6wxk] { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kgc-obs-author[b-49lrci6wxk] { font-size: 13px; font-weight: 700; color: var(--ec-text); margin: 0; }
.kgc-obs-date[b-49lrci6wxk] { font-size: 12px; color: var(--ec-muted); margin: 0; }
.kgc-obs-text[b-49lrci6wxk] { font-size: 13px; font-style: italic; color: var(--ec-sub); margin: 4px 0 0; }

/* ── Health & Care tab ── */
.kgc-health-grid[b-49lrci6wxk] { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kgc-health-card[b-49lrci6wxk] { background: var(--ec-card); border: 1px solid var(--ec-border); border-radius: 14px; overflow: hidden; }
.kgc-health-card--span[b-49lrci6wxk] { grid-column: 1 / -1; }
.kgc-health-head[b-49lrci6wxk] { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.kgc-health-head--amber[b-49lrci6wxk] { background: color-mix(in srgb, var(--ec-amber) 7%, transparent); }
.kgc-health-head--green[b-49lrci6wxk] { background: color-mix(in srgb, var(--ec-green) 7%, transparent); }
.kgc-health-head--red[b-49lrci6wxk] { background: color-mix(in srgb, var(--ec-red) 7%, transparent); }
.kgc-health-tile[b-49lrci6wxk] { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 17px; }
.kgc-health-tile--amber[b-49lrci6wxk] { background: color-mix(in srgb, var(--ec-amber) 14%, transparent); color: var(--ec-amber); }
.kgc-health-tile--green[b-49lrci6wxk] { background: color-mix(in srgb, var(--ec-green) 14%, transparent); color: var(--ec-green); }
.kgc-health-tile--red[b-49lrci6wxk] { background: color-mix(in srgb, var(--ec-red) 14%, transparent); color: var(--ec-red); }
.kgc-health-eyebrow[b-49lrci6wxk] { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; margin: 0; }
.kgc-health-eyebrow--amber[b-49lrci6wxk] { color: var(--ec-amber); }
.kgc-health-eyebrow--green[b-49lrci6wxk] { color: var(--ec-green); }
.kgc-health-eyebrow--red[b-49lrci6wxk] { color: var(--ec-red); }
.kgc-health-headline[b-49lrci6wxk] { font-size: 15px; font-weight: 700; color: var(--ec-text); margin: 2px 0 0; }
.kgc-health-body[b-49lrci6wxk] { padding: 14px 16px; }
.kgc-health-text[b-49lrci6wxk] { font-size: 13px; color: var(--ec-sub); margin: 0; }
.kgc-health-updated[b-49lrci6wxk] { font-size: 12px; color: var(--ec-muted); margin: 8px 0 0; }

.kgc-snapshot[b-49lrci6wxk] { grid-column: 1 / -1; background: var(--ec-card); border: 1px solid var(--ec-border); border-radius: 14px; padding: 16px 18px; }
.kgc-snapshot-head[b-49lrci6wxk] { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.kgc-snapshot-title[b-49lrci6wxk] { font-size: 15px; font-weight: 700; color: var(--ec-text); margin: 0; }
.kgc-snapshot-meta[b-49lrci6wxk] { font-size: 12px; color: var(--ec-muted); margin: 0; }
.kgc-snapshot-grid[b-49lrci6wxk] { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.kgc-snapshot-tile[b-49lrci6wxk] { display: flex; align-items: center; gap: 11px; border: 1px solid var(--ec-border-soft); border-radius: 10px; padding: 11px 12px; }
.kgc-snapshot-icon[b-49lrci6wxk] { width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.kgc-snapshot-eyebrow[b-49lrci6wxk] { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ec-muted); margin: 0; }
.kgc-snapshot-value[b-49lrci6wxk] { font-size: 14px; font-weight: 700; color: var(--ec-text); margin: 2px 0 0; }

/* ── People tab ── */
.kgc-people[b-49lrci6wxk] { display: flex; flex-direction: column; gap: 16px; }
.kgc-pickup-grid[b-49lrci6wxk] { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kgc-people-empty[b-49lrci6wxk] { font-size: 13px; color: var(--ec-muted); padding: 14px 18px; margin: 0; }
.kgc-guardian-row[b-49lrci6wxk], .kgc-pickup-row[b-49lrci6wxk], .kgc-emergency-row[b-49lrci6wxk] { display: flex; align-items: center; gap: 12px; padding: 14px 18px; }
.kgc-guardian-row--bt[b-49lrci6wxk], .kgc-pickup-row--bt[b-49lrci6wxk], .kgc-emergency-row--bt[b-49lrci6wxk] { border-top: 1px solid var(--ec-border-soft); }
.kgc-guardian-av[b-49lrci6wxk], .kgc-pickup-av[b-49lrci6wxk] { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.kgc-guardian-body[b-49lrci6wxk], .kgc-pickup-body[b-49lrci6wxk], .kgc-emergency-body[b-49lrci6wxk] { flex: 1; min-width: 0; }
.kgc-guardian-namerow[b-49lrci6wxk] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kgc-guardian-name[b-49lrci6wxk], .kgc-pickup-name[b-49lrci6wxk], .kgc-emergency-name[b-49lrci6wxk] { font-size: 14px; font-weight: 700; color: var(--ec-text); margin: 0; }
.kgc-guardian-role[b-49lrci6wxk], .kgc-pickup-meta[b-49lrci6wxk], .kgc-emergency-meta[b-49lrci6wxk] { font-size: 12px; color: var(--ec-muted); margin: 2px 0 0; }
.kgc-guardian-contacts[b-49lrci6wxk] { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.kgc-guardian-contact[b-49lrci6wxk] { font-size: 12px; color: var(--ec-sub); margin: 0; display: inline-flex; align-items: center; gap: 5px; }
.kgc-guardian-msg[b-49lrci6wxk] { font-size: 12px; font-weight: 600; color: #fff; background: var(--ec-primary); border: none; border-radius: 8px; padding: 8px 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.kgc-emergency-tile[b-49lrci6wxk] { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--ec-red) 11%, transparent); color: var(--ec-red); flex-shrink: 0; }
.kgc-btn-red[b-49lrci6wxk] { font-size: 12px; font-weight: 600; color: #fff; background: var(--ec-red); border-radius: 8px; padding: 8px 13px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.kgc-emergency-footer[b-49lrci6wxk] { padding: 12px 18px 4px; }
.kgc-emergency-note[b-49lrci6wxk] { font-size: 12px; color: var(--ec-muted); margin: 0; }

/* ── Documents tab ── */
.kgc-docs-head-row[b-49lrci6wxk], .kgc-doc-row[b-49lrci6wxk] { display: grid; grid-template-columns: 2.4fr 1fr 1fr 1.2fr 0.8fr; gap: 12px; align-items: center; padding: 12px 18px; }
.kgc-docs-head-row[b-49lrci6wxk] { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--ec-muted); border-bottom: 1px solid var(--ec-border-soft); }
.kgc-doc-row[b-49lrci6wxk] { border-top: 1px solid var(--ec-border-soft); }
.kgc-doc-name-cell[b-49lrci6wxk] { display: flex; align-items: center; gap: 10px; min-width: 0; }
.kgc-doc-icon[b-49lrci6wxk] { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kgc-doc-name[b-49lrci6wxk] { font-size: 13px; font-weight: 600; color: var(--ec-text); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kgc-doc-type-chip[b-49lrci6wxk] { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 6px; justify-self: start; }
.kgc-doc-cell[b-49lrci6wxk] { font-size: 13px; color: var(--ec-sub); margin: 0; }
.kgc-doc-actions[b-49lrci6wxk] { display: flex; gap: 6px; justify-content: flex-end; }
.kgc-doc-iconbtn[b-49lrci6wxk] { width: 30px; height: 30px; border: 1px solid; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: transparent; cursor: pointer; text-decoration: none; }
.kgc-docs-empty[b-49lrci6wxk] { font-size: 13px; color: var(--ec-muted); padding: 18px; margin: 0; text-align: center; }

/* ── From the school (sign requests) ── */
.kgc-sdoc-row[b-49lrci6wxk] { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-top: 1px solid var(--ec-border-soft); }
.kgc-sdoc-row:first-child[b-49lrci6wxk] { border-top: none; }
.kgc-sdoc-icon[b-49lrci6wxk] { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.kgc-sdoc-body[b-49lrci6wxk] { flex: 1; min-width: 0; }
.kgc-sdoc-name[b-49lrci6wxk] { font-size: 14px; font-weight: 700; color: var(--ec-text); margin: 0 0 5px; }
.kgc-sdoc-meta[b-49lrci6wxk] { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.kgc-sdoc-chip[b-49lrci6wxk] { font-size: 10px; font-weight: 700; letter-spacing: .03em; padding: 3px 8px; border-radius: 999px; }
.kgc-sdoc-chip--action[b-49lrci6wxk] { color: var(--ec-red); background: color-mix(in srgb, var(--ec-red) 11%, transparent); }
.kgc-sdoc-received[b-49lrci6wxk] { font-size: 12px; color: var(--ec-muted); }
.kgc-sdoc-actions[b-49lrci6wxk] { display: flex; gap: 8px; flex-shrink: 0; }
.kgc-sdoc-view[b-49lrci6wxk] { font-size: 12px; font-weight: 600; color: var(--ec-text); background: var(--ec-card); border: 1px solid var(--ec-border); border-radius: 8px; padding: 7px 13px; cursor: pointer; }
.kgc-sdoc-sign[b-49lrci6wxk] { font-size: 12px; font-weight: 700; color: #fff; background: var(--ec-primary); border: none; border-radius: 8px; padding: 7px 13px; cursor: pointer; }

@media (max-width: 900px) {
    .kgc-health-grid[b-49lrci6wxk], .kgc-pickup-grid[b-49lrci6wxk] { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .kgc-overview-grid[b-49lrci6wxk] { grid-template-columns: 1fr; }
    .kgc-stats[b-49lrci6wxk] { grid-template-columns: repeat(2, 1fr); }
}

/* ── Multi-child switcher (shared shape with the school page) ── */
.mc-switcher[b-49lrci6wxk] {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
    overflow-x: auto;
}

.mc-chip[b-49lrci6wxk] {
    background: var(--ec-blue-gh);
    border: 1.5px solid var(--ec-border);
    border-radius: 12px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
    box-shadow: none;
}

.mc-chip--active[b-49lrci6wxk] {
    background: #fff;
    border-color: var(--ec-blue);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--ec-blue) 8%, transparent);
}

.mc-chip-avatar[b-49lrci6wxk] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
}

.mc-chip-body[b-49lrci6wxk] {
    text-align: left;
}

.mc-chip-name[b-49lrci6wxk] {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}

.mc-chip-meta[b-49lrci6wxk] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 1px 0 0 0;
}

.mc-chip-add[b-49lrci6wxk] {
    background: transparent;
    border: 1.5px dashed var(--ec-border);
    border-radius: 12px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    font-family: inherit;
    color: var(--ec-muted);
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

/* ── Phase 3 dialog-trigger controls (mirror school mc-* shapes, KG pink accent) ── */
.kgc-btn-ghost[b-49lrci6wxk] {
    background: none;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    padding: 6px 11px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ec-primary);
    cursor: pointer;
    font-family: inherit;
}
.kgc-btn-ghost-inner[b-49lrci6wxk] { display: inline-flex; align-items: center; gap: 4px; }
.kgc-btn-ghost--muted[b-49lrci6wxk] { color: var(--ec-sub); }

.kgc-btn-primary[b-49lrci6wxk] {
    background: var(--ec-primary);
    border: none;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
}

.kgc-btn-outline[b-49lrci6wxk] {
    margin-top: 14px;
    width: 100%;
    background: none;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    padding: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ec-primary);
    cursor: pointer;
    font-family: inherit;
}
.kgc-btn-outline-inner[b-49lrci6wxk] { display: inline-flex; align-items: center; gap: 5px; }

.kgc-more-btn[b-49lrci6wxk] {
    background: none;
    border: none;
    color: var(--ec-muted);
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
    line-height: 1;
}

/* Hero "marked absent today" pill (prototype 10953-10962) */
.kgc-absent-pill[b-49lrci6wxk] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(34, 197, 94, .22);
    border: 1px solid rgba(34, 197, 94, .4);
    border-radius: 9px;
    padding: 7px 14px 7px 11px;
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
}
.kgc-absent-undo[b-49lrci6wxk] {
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 10.5px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    margin-left: 3px;
}

/* Documents tab actions */
.kgc-docs-actions[b-49lrci6wxk] { display: flex; gap: 8px; flex-shrink: 0; }
.kgc-upload-label[b-49lrci6wxk] { display: inline-flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.kgc-upload-label--busy[b-49lrci6wxk] { opacity: .6; pointer-events: none; }
.kgc-upload-input[b-49lrci6wxk] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.kgc-docs-error[b-49lrci6wxk] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 16px 0;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ec-red);
    background: var(--ec-red-lt);
}
.kgc-doc-more[b-49lrci6wxk] { position: relative; }
.kgc-doc-menu[b-49lrci6wxk] {
    position: absolute;
    top: 34px;
    right: 0;
    z-index: 20;
    background: var(--ec-panel);
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--ec-ink) 14%, transparent);
    padding: 4px;
}
.kgc-doc-menu-item[b-49lrci6wxk] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: none;
    border: none;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ec-text);
    cursor: pointer;
    font-family: inherit;
}
.kgc-doc-menu-item:hover[b-49lrci6wxk] { background: var(--ec-bg); }
.kgc-doc-menu-item--danger[b-49lrci6wxk] { color: var(--ec-red); }
.kgc-doc-menu-item--danger:hover[b-49lrci6wxk] { background: var(--ec-red-lt); }
.kgc-doc-menu-item:disabled[b-49lrci6wxk] { opacity: .5; cursor: default; }

/* Bottom-centered success toast */
.mc-toast[b-49lrci6wxk] {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ec-primary);
    color: #fff;
    padding: 10px 18px;
    border-radius: 9px;
    box-shadow: 0 6px 24px rgba(13, 23, 51, 0.28);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    z-index: 300;
}
.mc-toast--err[b-49lrci6wxk] { background: var(--ec-red); }

/* Health "Update…" buttons tint to their card accent (prototype 11247-11290) */
.kgc-btn-outline--amber[b-49lrci6wxk] { color: var(--ec-amber); }
.kgc-btn-outline--green[b-49lrci6wxk] { color: var(--ec-green); }
.kgc-btn-outline--red[b-49lrci6wxk] { color: var(--ec-red); }
/* /Components/Pages/Parent/MyChildren.razor.rz.scp.css */
/* dispatcher — no styles; see MyChildSchool.razor.css / MyChildKg.razor.css */
/* /Components/Pages/Parent/MyChildSchool.razor.rz.scp.css */
/* MyChildren — port of PWChildren (prototype lines 9271-9485).
   Switcher + gradient hero + 5-tab strip. Values transcribed verbatim from
   the prototype's inline styles, mapped onto the --ec-* token set. */

/* ── Multi-child switcher (prototype 9333-9357) ── */
.mc-switcher[b-ofo9piimpf] {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
    overflow-x: auto;
}

.mc-chip[b-ofo9piimpf] {
    background: var(--ec-blue-gh);
    border: 1.5px solid var(--ec-border);
    border-radius: 12px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
    box-shadow: none;
}

.mc-chip--active[b-ofo9piimpf] {
    background: #fff;
    border-color: var(--ec-blue);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--ec-blue) 8%, transparent);
}

.mc-chip-avatar[b-ofo9piimpf] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
}

.mc-chip-body[b-ofo9piimpf] {
    text-align: left;
}

.mc-chip-name[b-ofo9piimpf] {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}

.mc-chip-meta[b-ofo9piimpf] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 1px 0 0 0;
}

.mc-chip-add[b-ofo9piimpf] {
    background: transparent;
    border: 1.5px dashed var(--ec-border);
    border-radius: 12px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    font-family: inherit;
    color: var(--ec-muted);
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

/* ── Hero header (prototype 9359-9462) ── */
.mc-hero[b-ofo9piimpf] {
    background: linear-gradient(120deg, var(--ec-blue-dk) 0%, var(--ec-blue) 60%, var(--ec-purple) 130%);
    border-radius: 16px;
    padding: 24px 26px;
    color: #fff;
    /* no margin-bottom — tabs are inside .pd-page, whose 24px flex gap gives
       equal spacing hero → tabs → content */
    position: relative;
    overflow: hidden;
}

.mc-hero-ring[b-ofo9piimpf] {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .07);
}

.mc-hero-ring-1[b-ofo9piimpf] {
    right: -50px;
    top: -60px;
    width: 240px;
    height: 240px;
}

.mc-hero-ring-2[b-ofo9piimpf] {
    right: 60px;
    bottom: -80px;
    width: 180px;
    height: 180px;
}

.mc-hero-row[b-ofo9piimpf] {
    position: relative;
    display: flex;
    gap: 22px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.mc-hero-id[b-ofo9piimpf] {
    display: flex;
    gap: 18px;
    align-items: center;
    flex: 1 1 320px;
    min-width: 0;
}

.mc-avatar-wrap[b-ofo9piimpf] {
    position: relative;
    flex-shrink: 0;
}

.mc-avatar--img[b-ofo9piimpf] { object-fit: cover; display: block; }
.mc-avatar[b-ofo9piimpf] {
    width: 88px;
    height: 88px;
    border-radius: 22px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.02em;
    border: 3px solid rgba(255, 255, 255, .85);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .25);
}

.mc-avatar-edit[b-ofo9piimpf] {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid rgba(255, 255, 255, .9);
    cursor: pointer;
    font-size: 13px;
    color: var(--ec-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}

.mc-id-text[b-ofo9piimpf] {
    min-width: 0;
    flex: 1;
}

.mc-eyebrow[b-ofo9piimpf] {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, .65);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0;
}

.mc-name[b-ofo9piimpf] {
    font-size: 28px;
    font-weight: 800;
    margin: 5px 0 8px 0;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: #fff;
}

.mc-tags[b-ofo9piimpf] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.mc-tag[b-ofo9piimpf] {
    background: rgba(255, 255, 255, .18);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.06em;
}

.mc-tag--active[b-ofo9piimpf] {
    background: rgba(34, 197, 94, .25);
    border-color: rgba(34, 197, 94, .4);
}

.mc-id-line[b-ofo9piimpf] {
    font-size: 13px;
    color: rgba(255, 255, 255, .85);
    line-height: 1.5;
    margin: 0;
}

.mc-id-code[b-ofo9piimpf] {
    color: #fff;
    font-family: ui-monospace, "SF Mono", monospace;
}

/* Stats strip (prototype 9402-9408 + ChildStat atom 9059-9072) */
.mc-stats[b-ofo9piimpf] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    flex: 1 1 480px;
    min-width: 0;
}

.mc-stat[b-ofo9piimpf] {
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 11px;
    padding: 12px 14px;
    min-width: 0;
}

.mc-stat-head[b-ofo9piimpf] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.mc-stat-bang[b-ofo9piimpf] {
    font-size: 13px;
    color: rgba(255, 255, 255, .85);
    display: inline-flex;
    align-items: center;
}

.mc-stat-label[b-ofo9piimpf] {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
    margin: 0;
}

.mc-stat-value[b-ofo9piimpf] {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 0;
}

.mc-stat-sub[b-ofo9piimpf] {
    font-size: 11px;
    color: rgba(255, 255, 255, .7);
    margin: 5px 0 0 0;
}

/* Quick action toolbar (prototype 9411-9461) */
.mc-toolbar[b-ofo9piimpf] {
    position: relative;
    display: flex;
    gap: 8px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.mc-tool[b-ofo9piimpf] {
    border-radius: 9px;
    padding: 9px 14px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    position: relative;
}

.mc-tool--solid[b-ofo9piimpf] {
    background: #fff;
    border: none;
    color: var(--ec-blue-dk);
    font-weight: 800;
}

.mc-tool--glass[b-ofo9piimpf] {
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
}

.mc-tool--ghost[b-ofo9piimpf] {
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
}

.mc-tool-spacer[b-ofo9piimpf] {
    flex: 1;
}

.mc-tool-count[b-ofo9piimpf] {
    font-size: 10px;
    font-weight: 800;
    background: rgba(255, 255, 255, .28);
    color: #fff;
    padding: 1px 6px;
    border-radius: 99px;
    margin-left: 1px;
}

.mc-tool-count--alert[b-ofo9piimpf] {
    background: var(--ec-red);
}

.mc-tool-dot[b-ofo9piimpf] {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ec-red);
    border: 2px solid #fff;
}

/* ── Tab strip (prototype 9464-9485) ── */
.mc-tabs[b-ofo9piimpf] {
    display: flex;
    gap: 4px;
    padding: 4px;
    /* no margin-bottom — the page flex gap owns equal top/bottom spacing */
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 11px;
    overflow-x: auto;
}

.mc-tab[b-ofo9piimpf] {
    flex: 1 1 auto;
    min-width: 120px;
    padding: 9px 14px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--ec-sub);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: all .15s;
    box-shadow: none;
    white-space: nowrap;
}

.mc-tab--active[b-ofo9piimpf] {
    background: var(--ec-blue);
    color: #fff;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--ec-blue) 19%, transparent);
}

.mc-tab-icon[b-ofo9piimpf] {
    display: inline-flex;
    align-items: center;
}

.mc-tab--active .mc-tab-icon i[b-ofo9piimpf] {
    color: #fff;
}

.mc-tab-content[b-ofo9piimpf] {
    min-width: 0;
}

/* ══════════ OVERVIEW TAB (prototype 9488-9629) ══════════ */

.mc-overview-grid[b-ofo9piimpf] {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 16px;
}

.mc-col[b-ofo9piimpf] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* ── SectionCard atom (prototype 9087-9100) ── */
.mc-card[b-ofo9piimpf] {
    background: var(--ec-panel);
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    overflow: hidden;
}

.mc-card-head[b-ofo9piimpf] {
    padding: 14px 20px;
    border-bottom: 1px solid var(--ec-border-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.mc-card-head-text[b-ofo9piimpf] {
    min-width: 0;
}

.mc-card-title[b-ofo9piimpf] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    letter-spacing: -0.005em;
    margin: 0;
}

.mc-card-sub[b-ofo9piimpf] {
    font-size: 11.5px;
    color: var(--ec-muted);
    margin: 2px 0 0 0;
}

.mc-card-body[b-ofo9piimpf] {
    padding: 16px 20px;
}

.mc-card-body--flush[b-ofo9piimpf] {
    padding: 0;
}

/* ── ghost / outline header action button ── */
.mc-btn-ghost[b-ofo9piimpf] {
    background: none;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    padding: 6px 11px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ec-blue);
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
    white-space: nowrap;
}

.mc-btn-ghost-inner[b-ofo9piimpf] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* "Download all" header action uses muted grey (prototype W.sub), not blue. */
.mc-btn-ghost--muted[b-ofo9piimpf] {
    color: var(--ec-sub);
}

/* ── InfoRow atom (prototype 9074-9085) ── */
.mc-inforow[b-ofo9piimpf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--ec-border-soft);
}

/* last row: no border, top padding only (prototype 9503) */
.mc-inforow--last[b-ofo9piimpf] {
    border-bottom: none;
    padding: 12px 0 0 0;
}

.mc-inforow-label[b-ofo9piimpf] {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ec-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex-shrink: 0;
    margin: 0;
}

.mc-inforow-val-wrap[b-ofo9piimpf] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.mc-inforow-value[b-ofo9piimpf] {
    font-size: 13px;
    font-weight: 600;
    color: var(--ec-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.mc-inforow-value.mono[b-ofo9piimpf] {
    font-family: ui-monospace, "SF Mono", monospace;
}

/* ── This term at a glance: 2×2 subject grid (prototype 9516-9537) ── */
.mc-subject-grid[b-ofo9piimpf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.mc-subject-cell[b-ofo9piimpf] {
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.mc-subject-cell--rt[b-ofo9piimpf] {
    border-right: 1px solid var(--ec-border-soft);
}

.mc-subject-cell--bb[b-ofo9piimpf] {
    border-bottom: 1px solid var(--ec-border-soft);
}


.mc-subject-body[b-ofo9piimpf] {
    flex: 1;
    min-width: 0;
}

.mc-subject-name[b-ofo9piimpf] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ec-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.mc-subject-tch[b-ofo9piimpf] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 1px 0 0 0;
}

.mc-subject-right[b-ofo9piimpf] {
    text-align: right;
    flex-shrink: 0;
}

.mc-subject-avg[b-ofo9piimpf] {
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    margin: 0;
}

.mc-subject-trend[b-ofo9piimpf] {
    font-size: 10.5px;
    font-weight: 700;
    margin: 3px 0 0 0;
}

/* ══════════ ACADEMIC TAB (prototype 9631-9679) ══════════ */

.mc-academic[b-ofo9piimpf] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mc-kpi-grid[b-ofo9piimpf] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

/* ── solid blue header action button (prototype 9644) ── */
.mc-btn-primary[b-ofo9piimpf] {
    background: var(--ec-blue);
    border: none;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
    white-space: nowrap;
}

/* ── subject row (prototype 9647-9675) ── */
.mc-subject-row[b-ofo9piimpf] {
    display: grid;
    grid-template-columns: 2.2fr 1fr 110px 80px 30px;
    padding: 14px 20px;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.mc-subject-row--bt[b-ofo9piimpf] {
    border-top: 1px solid var(--ec-border-soft);
}

.mc-subject-row:hover[b-ofo9piimpf] {
    background: var(--ec-blue-gh);
}

.mc-subject-row-main[b-ofo9piimpf] {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.mc-subject-row-id[b-ofo9piimpf] {
    min-width: 0;
}

.mc-subject-row-name[b-ofo9piimpf] {
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mc-subject-row-meta[b-ofo9piimpf] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 1px;
}

.mc-subject-row-tch[b-ofo9piimpf] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 0;
}

.mc-homeroom-chip[b-ofo9piimpf] {
    font-size: 8.5px;
    font-weight: 800;
    background: color-mix(in srgb, var(--ec-purple) 9%, transparent);
    color: var(--ec-purple);
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0.06em;
    flex-shrink: 0;
}

.mc-subject-row-term[b-ofo9piimpf] {
    font-size: 11.5px;
    color: var(--ec-sub);
    margin: 0;
}

.mc-gradebar[b-ofo9piimpf] {
    height: 6px;
    background: var(--ec-border-soft);
    border-radius: 3px;
    overflow: hidden;
}

.mc-gradebar-fill[b-ofo9piimpf] {
    height: 100%;
    border-radius: 3px;
}

.mc-subject-row-vs[b-ofo9piimpf] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 4px 0 0 0;
}

.mc-subject-rowavg[b-ofo9piimpf] {
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    margin: 0;
}

.mc-chevron[b-ofo9piimpf] {
    font-size: 14px;
    color: var(--ec-muted);
    text-align: right;
}

/* ── Classroom card (gradient, prototype 9544-9577) ── */
.mc-classroom[b-ofo9piimpf] {
    background: linear-gradient(135deg, var(--ec-blue-gh), #fff);
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    padding: 18px 20px;
}

.mc-classroom-eyebrow[b-ofo9piimpf] {
    font-size: 10px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 12px 0;
}

.mc-classroom-row[b-ofo9piimpf] {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
}

.mc-classroom-tile[b-ofo9piimpf] {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--ec-blue), var(--ec-blue-dk));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mc-classroom-name[b-ofo9piimpf] {
    font-size: 16px;
    font-weight: 800;
    color: var(--ec-text);
    line-height: 1.1;
    margin: 0;
}

.mc-classroom-sub[b-ofo9piimpf] {
    font-size: 12px;
    color: var(--ec-sub);
    margin: 3px 0 0 0;
}

.mc-classroom-divider[b-ofo9piimpf] {
    height: 1px;
    background: var(--ec-border-soft);
    margin: 12px -2px;
}

.mc-classroom-hr-head[b-ofo9piimpf] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.mc-classroom-eyebrow--inline[b-ofo9piimpf] {
    margin: 0;
}

.mc-keycontact[b-ofo9piimpf] {
    font-size: 9px;
    font-weight: 800;
    background: var(--ec-purple);
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.06em;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.mc-keycontact i[b-ofo9piimpf] {
    font-size: 9px;
}

.mc-teacher-row[b-ofo9piimpf] {
    display: flex;
    gap: 11px;
    align-items: center;
    padding: 10px 12px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--ec-purple) 6%, #fff), #fff);
    border: 1px solid color-mix(in srgb, var(--ec-purple) 15%, transparent);
    border-radius: 10px;
}

.mc-teacher-avatar-wrap[b-ofo9piimpf] {
    position: relative;
    flex-shrink: 0;
}

.mc-teacher-avatar[b-ofo9piimpf] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
}

.mc-teacher-online[b-ofo9piimpf] {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--ec-green);
    border: 2px solid #fff;
}

.mc-teacher-body[b-ofo9piimpf] {
    flex: 1;
    min-width: 0;
}

.mc-teacher-name[b-ofo9piimpf] {
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}

.mc-teacher-role[b-ofo9piimpf] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 1px 0 0 0;
}

.mc-teacher-msg[b-ofo9piimpf] {
    background: var(--ec-primary);
    border: none;
    border-radius: 9px;
    padding: 7px 12px;
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.mc-teacher-msg i[b-ofo9piimpf] {
    font-size: 12px;
}

.mc-teacher-none[b-ofo9piimpf] {
    font-size: 12px;
    color: var(--ec-muted);
    margin: 0;
}

.mc-classroom-note[b-ofo9piimpf] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 10px 0 0 0;
    line-height: 1.5;
}

/* ── Attendance card (prototype 9580-9610) ── */
.mc-attendance[b-ofo9piimpf] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.mc-donut[b-ofo9piimpf] {
    position: relative;
    width: 88px;
    height: 88px;
    flex-shrink: 0;
}

.mc-donut-center[b-ofo9piimpf] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.mc-donut-pct[b-ofo9piimpf] {
    font-size: 18px;
    font-weight: 800;
    color: var(--ec-text);
    line-height: 1;
    margin: 0;
}

.mc-donut-label[b-ofo9piimpf] {
    font-size: 9px;
    color: var(--ec-muted);
    font-weight: 700;
    margin: 2px 0 0 0;
}

.mc-legend[b-ofo9piimpf] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mc-legend-row[b-ofo9piimpf] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mc-legend-dot[b-ofo9piimpf] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mc-legend-label[b-ofo9piimpf] {
    font-size: 12px;
    color: var(--ec-sub);
    flex: 1;
    margin: 0;
}

.mc-legend-count[b-ofo9piimpf] {
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}

.mc-att-cal[b-ofo9piimpf] {
    width: 100%;
    background: var(--ec-blue-gh);
    border: 1px solid var(--ec-blue-lt);
    border-radius: 9px;
    padding: 9px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ec-blue);
    cursor: pointer;
    font-family: inherit;
}

/* ── Allergies banner (prototype 9613-9626) ── */
.mc-allergy-banner[b-ofo9piimpf] {
    background: linear-gradient(135deg, var(--ec-amber-lt), #fffbf2);
    border: 1px solid #fde68a;
    border-radius: 14px;
    padding: 14px 18px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.mc-allergy-tile[b-ofo9piimpf] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #fde68a;
    color: var(--ec-amber);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.mc-allergy-body[b-ofo9piimpf] {
    flex: 1;
    min-width: 0;
}

.mc-allergy-eyebrow[b-ofo9piimpf] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-amber);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}

.mc-allergy-text[b-ofo9piimpf] {
    font-size: 13px;
    font-weight: 700;
    color: var(--ec-text);
    margin: 3px 0 0 0;
}

.mc-allergy-link[b-ofo9piimpf] {
    background: none;
    border: none;
    padding: 0;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ec-amber);
    cursor: pointer;
    font-family: inherit;
    margin-top: 6px;
}

/* ════════════ HEALTH & CARE TAB (prototype 9682-9747) ════════════ */
.mc-health-grid[b-ofo9piimpf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.mc-health-card[b-ofo9piimpf] {
    background: var(--ec-panel);
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    overflow: hidden;
}

.mc-health-head[b-ofo9piimpf] {
    padding: 18px 20px;
    border-bottom: 1px solid var(--ec-border-soft);
    display: flex;
    align-items: center;
    gap: 11px;
}

.mc-health-head--amber[b-ofo9piimpf] {
    background: linear-gradient(135deg, var(--ec-amber-lt), #fffbf2);
}

.mc-health-head--red[b-ofo9piimpf] {
    background: linear-gradient(135deg, #fee2e2, #fff5f5);
}

.mc-health-tile[b-ofo9piimpf] {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--ec-panel);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.mc-health-tile--amber[b-ofo9piimpf] {
    border: 1px solid #fde68a;
    color: var(--ec-amber);
}

.mc-health-tile--red[b-ofo9piimpf] {
    border: 1px solid #fecaca;
    color: var(--ec-red);
}

.mc-health-eyebrow[b-ofo9piimpf] {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
}

.mc-health-eyebrow--amber[b-ofo9piimpf] {
    color: var(--ec-amber);
}

.mc-health-eyebrow--red[b-ofo9piimpf] {
    color: var(--ec-red);
}

.mc-health-headline[b-ofo9piimpf] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 2px 0 0 0;
}

.mc-health-body[b-ofo9piimpf] {
    padding: 18px 20px;
}

.mc-health-text[b-ofo9piimpf] {
    font-size: 13px;
    color: var(--ec-text);
    line-height: 1.6;
    margin: 0 0 10px 0;
}

.mc-health-note[b-ofo9piimpf] {
    font-size: 11.5px;
    color: var(--ec-sub);
    font-style: italic;
    line-height: 1.5;
    margin: 8px 0 0 0;
}

.mc-health-updated[b-ofo9piimpf] {
    font-size: 11.5px;
    color: var(--ec-muted);
    margin: 8px 0 0 0;
}

.mc-btn-outline[b-ofo9piimpf] {
    margin-top: 14px;
    width: 100%;
    background: none;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    padding: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ec-blue);
    cursor: pointer;
    font-family: inherit;
}

.mc-btn-outline-inner[b-ofo9piimpf] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.mc-snapshot[b-ofo9piimpf] {
    grid-column: span 2;
    background: var(--ec-panel);
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    padding: 18px 20px;
}

.mc-snapshot-head[b-ofo9piimpf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.mc-snapshot-title[b-ofo9piimpf] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}

.mc-snapshot-meta[b-ofo9piimpf] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 0;
}

.mc-snapshot-grid[b-ofo9piimpf] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.mc-snapshot-tile[b-ofo9piimpf] {
    background: var(--ec-bg);
    border: 1px solid var(--ec-border-soft);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    gap: 11px;
    align-items: center;
}

.mc-snapshot-icon[b-ofo9piimpf] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}

.mc-snapshot-text[b-ofo9piimpf] {
    min-width: 0;
}

.mc-snapshot-eyebrow[b-ofo9piimpf] {
    font-size: 10px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
}

.mc-snapshot-value[b-ofo9piimpf] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 2px 0 0 0;
}

/* Health grids collapse on narrow viewports. */
@media (max-width: 700px) {
    .mc-health-grid[b-ofo9piimpf] {
        grid-template-columns: 1fr;
    }

    .mc-snapshot[b-ofo9piimpf] {
        grid-column: span 1;
    }

    .mc-snapshot-grid[b-ofo9piimpf] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Overview grid collapses to single column on narrow viewports. */
@media (max-width: 900px) {
    .mc-overview-grid[b-ofo9piimpf] {
        grid-template-columns: 1fr;
    }
}

/* ── Responsive collapse — the hero row + stats grid wrap on narrow
   viewports (prototype uses flex 1 1 480px / grid repeat(4)). ── */
@media (max-width: 760px) {
    .mc-stats[b-ofo9piimpf] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .mc-kpi-grid[b-ofo9piimpf] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 460px) {
    .mc-stats[b-ofo9piimpf] {
        grid-template-columns: 1fr;
    }

    .mc-name[b-ofo9piimpf] {
        font-size: 24px;
    }
}

/* ════════════ PEOPLE TAB (prototype 9750-9831) ════════════ */
.mc-people[b-ofo9piimpf] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Parents & guardians rows ── */
.mc-guardian-row[b-ofo9piimpf] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    padding: 14px 20px;
    align-items: center;
}

.mc-guardian-row--bt[b-ofo9piimpf] {
    border-top: 1px solid var(--ec-border-soft);
}

.mc-guardian-av[b-ofo9piimpf] {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    flex-shrink: 0;
}

.mc-guardian-body[b-ofo9piimpf] {
    min-width: 0;
}

.mc-guardian-namerow[b-ofo9piimpf] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mc-guardian-name[b-ofo9piimpf] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}

.mc-guardian-role[b-ofo9piimpf] {
    font-size: 11.5px;
    color: var(--ec-muted);
    margin: 2px 0 0 0;
}

.mc-guardian-contacts[b-ofo9piimpf] {
    display: flex;
    gap: 14px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.mc-guardian-contact[b-ofo9piimpf] {
    font-size: 12px;
    color: var(--ec-sub);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.mc-guardian-contact i[b-ofo9piimpf] {
    font-size: 12px;
}

.mc-guardian-msg[b-ofo9piimpf] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 9px;
    padding: 8px 14px;
}

.mc-guardian-msg i[b-ofo9piimpf] {
    font-size: 12px;
}

/* ── Pickup + Emergency two-column grid ── */
.mc-pickup-grid[b-ofo9piimpf] {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 16px;
}

.mc-pickup-row[b-ofo9piimpf] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
}

.mc-pickup-row--bt[b-ofo9piimpf] {
    border-top: 1px solid var(--ec-border-soft);
}

.mc-pickup-av[b-ofo9piimpf] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
}

.mc-pickup-body[b-ofo9piimpf] {
    flex: 1;
    min-width: 0;
}

.mc-pickup-name[b-ofo9piimpf] {
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}

.mc-pickup-meta[b-ofo9piimpf] {
    font-size: 11.5px;
    color: var(--ec-muted);
    margin: 1px 0 0 0;
}

.mc-more-btn[b-ofo9piimpf] {
    background: none;
    border: none;
    color: var(--ec-muted);
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
    line-height: 1;
}

.mc-people-empty[b-ofo9piimpf] {
    font-size: 12px;
    color: var(--ec-muted);
    margin: 0;
    padding: 14px 20px;
}

/* ── Emergency contact rows ── */
.mc-emergency-row[b-ofo9piimpf] {
    padding: 14px 20px;
    background: linear-gradient(135deg, var(--ec-red-lt), #fff5f5);
    display: flex;
    align-items: center;
    gap: 12px;
}

.mc-emergency-row--bt[b-ofo9piimpf] {
    border-top: 1px solid var(--ec-border-soft);
}

.mc-emergency-tile[b-ofo9piimpf] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #fecaca;
    color: var(--ec-red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.mc-emergency-body[b-ofo9piimpf] {
    flex: 1;
    min-width: 0;
}

.mc-emergency-name[b-ofo9piimpf] {
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}

.mc-emergency-meta[b-ofo9piimpf] {
    font-size: 11.5px;
    color: var(--ec-muted);
    margin: 1px 0 0 0;
}

.mc-btn-red[b-ofo9piimpf] {
    background: var(--ec-red);
    border: none;
    border-radius: 9px;
    padding: 7px 12px;
    font-size: 11.5px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.mc-btn-red i[b-ofo9piimpf] {
    font-size: 12px;
}

.mc-emergency-footer[b-ofo9piimpf] {
    padding: 14px 20px;
    border-top: 1px solid var(--ec-border-soft);
}

.mc-emergency-note[b-ofo9piimpf] {
    font-size: 11.5px;
    color: var(--ec-sub);
    line-height: 1.55;
    margin: 0;
}

/* Pickup/Emergency grid collapses on narrow viewports. */
@media (max-width: 800px) {
    .mc-pickup-grid[b-ofo9piimpf] {
        grid-template-columns: 1fr;
    }
}

/* ════════════ DOCUMENTS TAB (prototype 9833-9872) ════════════ */

/* Header row — two ghost + primary buttons (prototype 9839-9842) */
.mc-docs-actions[b-ofo9piimpf] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Upload control: a styled <label> that visually matches the blue primary button
   while wrapping a visually-hidden <InputFile>, so clicking the label opens the
   native file picker. */
.mc-upload-label[b-ofo9piimpf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.mc-upload-label--busy[b-ofo9piimpf] {
    opacity: .6;
    pointer-events: none;
}

.mc-upload-input[b-ofo9piimpf] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Inline error beneath the documents header (size / type / network failures). */
.mc-docs-error[b-ofo9piimpf] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 16px 0;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ec-red);
    background: color-mix(in srgb, var(--ec-red) 8%, transparent);
}

/* Horizontal scroll wrapper so columns don't crush on narrow viewports.
   The prototype is a desktop-only view; we keep it scrollable. */
.mc-docs-scroll[b-ofo9piimpf] {
    overflow-x: auto;
    min-width: 0;
}

/* Column headers (prototype 9846-9848):
   grid: 2fr 100px 100px 130px 60px, 10px 20px padding,
   bg=var(--ec-bg), 10px/700 muted uppercase 0.08em */
.mc-docs-head-row[b-ofo9piimpf] {
    display: grid;
    grid-template-columns: 2fr 100px 100px 130px 60px;
    min-width: 560px;
    padding: 10px 20px;
    background: var(--ec-bg);
    font-size: 10px;
    font-weight: 700;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    gap: 12px;
    align-items: center;
}

/* Document row (prototype 9850-9869):
   same grid, 14px 20px padding, top border borderSoft, hover blueGh */
.mc-doc-row[b-ofo9piimpf] {
    display: grid;
    grid-template-columns: 2fr 100px 100px 130px 60px;
    min-width: 560px;
    padding: 14px 20px;
    border-top: 1px solid var(--ec-border-soft);
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: background .12s;
}

.mc-doc-row:hover[b-ofo9piimpf] {
    background: var(--ec-blue-gh);
}

/* Col 1: flex gap-11, icon tile + name (prototype 9858-9861) */
.mc-doc-name-cell[b-ofo9piimpf] {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

/* 36px rounded-9 icon tile (prototype 9859) */
.mc-doc-icon[b-ofo9piimpf] {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Document name (prototype 9860): 13px/700 text, ellipsis */
.mc-doc-name[b-ofo9piimpf] {
    font-size: 13px;
    font-weight: 700;
    color: var(--ec-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

/* Col 2: type chip (prototype 9862): 10px/800, radius 5, 3px 8px pad */
.mc-doc-type-chip[b-ofo9piimpf] {
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 5px;
    letter-spacing: 0.06em;
    justify-self: start;
    white-space: nowrap;
}

/* Cols 3 & 4: size / date (prototype 9863-9864): 12px sub */
.mc-doc-cell[b-ofo9piimpf] {
    font-size: 12px;
    color: var(--ec-sub);
    margin: 0;
    white-space: nowrap;
}

/* Col 5: action buttons row (prototype 9865-9868) */
.mc-doc-actions[b-ofo9piimpf] {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

/* 30×30 icon buttons (prototype 9866-9867): radius 7 */
.mc-doc-iconbtn[b-ofo9piimpf] {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: none;
    border: 1px solid var(--ec-border);
    color: var(--ec-muted);
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    text-decoration: none;
}

/* "⋯" more-menu (delete) */
.mc-doc-more[b-ofo9piimpf] {
    position: relative;
}
.mc-doc-menu[b-ofo9piimpf] {
    position: absolute;
    top: 34px;
    right: 0;
    z-index: 20;
    background: var(--ec-panel);
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--ec-ink) 14%, transparent);
    padding: 4px;
    min-width: 132px;
}
.mc-doc-menu-item[b-ofo9piimpf] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: none;
    border: none;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    color: var(--ec-text);
}
.mc-doc-menu-item:hover[b-ofo9piimpf] {
    background: var(--ec-bg);
}
.mc-doc-menu-item--danger[b-ofo9piimpf] {
    color: var(--ec-red);
}
.mc-doc-menu-item--danger:hover[b-ofo9piimpf] {
    background: var(--ec-red-lt);
}
.mc-doc-menu-item:disabled[b-ofo9piimpf] {
    opacity: .5;
    cursor: default;
}

/* Empty state */
.mc-docs-empty[b-ofo9piimpf] {
    font-size: 13px;
    color: var(--ec-muted);
    text-align: center;
    padding: 28px 20px;
    margin: 0;
}

/* Success toast (prototype 9888-9892) — bottom-centered floating chip flashed
   after a report-absence notice is filed. */
.mc-toast[b-ofo9piimpf] {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ec-blue);
    color: #fff;
    padding: 10px 18px;
    border-radius: 9px;
    box-shadow: 0 6px 24px rgba(13, 23, 51, 0.28);
    font-size: 12.5px;
    font-weight: 700;
    z-index: 1600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    animation: mc-toast-in-b-ofo9piimpf .2s ease;
}
@keyframes mc-toast-in-b-ofo9piimpf { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
/* /Components/Pages/Parent/NapsMealsKg.razor.rz.scp.css */
/* KG parent "Naps & Meals" — scoped styles, ported from prototype PWRoutine
   (EduConnect All Roles.html 11667-12175). W-palette hexes for the semantic
   colors; --ec-* tokens for neutrals. */

.rt-page[b-r4tq7s67jm] { display: flex; flex-direction: column; }

/* ── LIVE hero ── */
.rt-hero[b-r4tq7s67jm] { position: relative; overflow: hidden; border-radius: 16px; padding: 22px 26px; margin-bottom: 18px; color: #fff;
           background: linear-gradient(120deg, var(--ec-primary) 0%, var(--ec-primary-dk) 60%, var(--ec-primary-dk) 130%); }
.rt-hero-ring[b-r4tq7s67jm] { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.07); pointer-events: none; }
.rt-hero-ring--a[b-r4tq7s67jm] { right: -50px; top: -60px; width: 240px; height: 240px; }
.rt-hero-ring--b[b-r4tq7s67jm] { right: 60px; bottom: -80px; width: 180px; height: 180px; }
.rt-hero-grid[b-r4tq7s67jm] { position: relative; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.rt-hero-lead[b-r4tq7s67jm] { flex: 1 1 320px; min-width: 0; }
.rt-hero-live[b-r4tq7s67jm] { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.rt-hero-dot[b-r4tq7s67jm] { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.25); animation: rt-pulse-b-r4tq7s67jm 2s infinite; }
.rt-hero-live-label[b-r4tq7s67jm] { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.65); letter-spacing: .12em; text-transform: uppercase; margin: 0; }
.rt-hero-title[b-r4tq7s67jm] { font-size: 24px; font-weight: 800; margin: 0 0 6px; letter-spacing: -.01em; line-height: 1.1; }
.rt-hero-sub[b-r4tq7s67jm] { font-size: 13.5px; color: rgba(255,255,255,.85); line-height: 1.5; max-width: 540px; margin: 0; }
.rt-hero-sub b[b-r4tq7s67jm] { color: #fff; }
.rt-hero-sub[b-r4tq7s67jm]  svg { vertical-align: -2px; display: inline-block; }
.rt-hero-stats[b-r4tq7s67jm] { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; flex: 1 1 360px; min-width: 0; }
.rt-stat[b-r4tq7s67jm] { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); border-radius: 11px; padding: 12px 14px; min-width: 0; text-align: left; }
.rt-stat--btn[b-r4tq7s67jm] { cursor: pointer; font-family: inherit; transition: background .12s; }
.rt-stat--btn:hover[b-r4tq7s67jm] { background: rgba(255,255,255,.18); }
.rt-stat-top[b-r4tq7s67jm] { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.rt-stat-label[b-r4tq7s67jm] { font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.7); margin: 0; }
.rt-stat-value[b-r4tq7s67jm] { font-size: 22px; font-weight: 800; color: #fff; line-height: 1; letter-spacing: -.02em; margin: 0; }
.rt-stat-sub[b-r4tq7s67jm] { font-size: 11px; color: rgba(255,255,255,.7); margin: 5px 0 0; }

@keyframes rt-pulse-b-r4tq7s67jm { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

/* ── Day tabs ── */
.rt-tabs[b-r4tq7s67jm] { display: flex; gap: 8px; margin-bottom: 14px; }
.rt-tab[b-r4tq7s67jm] { flex: 1; background: var(--ec-bg); color: var(--ec-sub); border: 1.5px solid var(--ec-border); border-radius: 12px; padding: 10px 14px;
          cursor: pointer; font-family: inherit; text-align: left; display: flex; align-items: center; gap: 10px; transition: all .12s; }
.rt-tab--active[b-r4tq7s67jm] { background: #fff; color: var(--ec-text); border-color: var(--ec-primary); }
.rt-tab-icon[b-r4tq7s67jm] { width: 26px; height: 26px; border-radius: 7px; background: var(--ec-border-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rt-tab--active .rt-tab-icon[b-r4tq7s67jm] { background: color-mix(in srgb, var(--ec-primary) 16%, #fff); }
.rt-tab-text[b-r4tq7s67jm] { min-width: 0; }
.rt-tab-label[b-r4tq7s67jm] { display: block; font-size: 12.5px; font-weight: 800; }
.rt-tab-sub[b-r4tq7s67jm] { display: block; font-size: 10.5px; color: var(--ec-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Shared card chrome ── */
.rt-card[b-r4tq7s67jm] { background: #fff; border: 1px solid var(--ec-border); border-radius: 14px; overflow: hidden; }
.rt-card-head[b-r4tq7s67jm] { padding: 14px 20px; border-bottom: 1px solid var(--ec-border-soft); }
.rt-card-title[b-r4tq7s67jm] { font-size: 14px; font-weight: 800; color: var(--ec-text); margin: 0; }
.rt-card-sub[b-r4tq7s67jm] { font-size: 11.5px; color: var(--ec-muted); margin: 2px 0 0; }
.rt-card-eyebrow[b-r4tq7s67jm] { font-size: 10px; font-weight: 800; color: var(--ec-muted); letter-spacing: .1em; text-transform: uppercase; margin: 0; }

/* ── On today's menu ── */
.rt-menu[b-r4tq7s67jm] { background: linear-gradient(135deg, #dcfce7, #fff); border: 1px solid #bbf7d0; border-radius: 14px; padding: 14px 18px; margin-bottom: 14px; }
.rt-menu-head[b-r4tq7s67jm] { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.rt-menu-head-id[b-r4tq7s67jm] { display: flex; align-items: center; gap: 11px; }
.rt-menu-head-icon[b-r4tq7s67jm] { width: 32px; height: 32px; border-radius: 9px; background: #fff; border: 1px solid #bbf7d0; display: flex; align-items: center; justify-content: center; }
.rt-menu-eyebrow[b-r4tq7s67jm] { font-size: 11px; font-weight: 800; color: #16a34a; letter-spacing: .1em; text-transform: uppercase; margin: 0; }
.rt-menu-helper[b-r4tq7s67jm] { font-size: 11.5px; color: var(--ec-muted); margin: 1px 0 0; }
.rt-menu-week[b-r4tq7s67jm] { background: #fff; border: 1px solid #bbf7d0; color: #16a34a; font-size: 11.5px; font-weight: 800; cursor: pointer; font-family: inherit; padding: 7px 12px; border-radius: 8px; }
.rt-menu-grid[b-r4tq7s67jm] { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.rt-menu-tile[b-r4tq7s67jm] { background: #fff; border: 1px solid var(--ec-border-soft); border-radius: 10px; padding: 10px 12px; cursor: pointer; font-family: inherit; text-align: left; display: flex; align-items: flex-start; gap: 9px; }
.rt-menu-tile:hover[b-r4tq7s67jm] { border-color: var(--ec-muted); }
.rt-menu-tile-icon[b-r4tq7s67jm] { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rt-menu-tile-body[b-r4tq7s67jm] { min-width: 0; flex: 1; }
.rt-menu-tile-title[b-r4tq7s67jm] { font-size: 11.5px; font-weight: 800; color: var(--ec-text); margin: 0; }
.rt-menu-tile-time[b-r4tq7s67jm] { color: var(--ec-muted); font-weight: 700; font-family: ui-monospace, "SF Mono", monospace; font-size: 10.5px; }
.rt-menu-tile-items[b-r4tq7s67jm] { font-size: 11px; color: var(--ec-sub); line-height: 1.4; margin: 2px 0 0; }
.rt-menu-tile-empty[b-r4tq7s67jm] { color: var(--ec-muted); font-style: italic; }

/* ── Main 2-col ── */
.rt-main[b-r4tq7s67jm] { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; }
.rt-side[b-r4tq7s67jm] { display: flex; flex-direction: column; gap: 16px; }

/* Timeline */
.rt-timeline-head[b-r4tq7s67jm] { display: flex; justify-content: space-between; align-items: center; }
.rt-live-badge[b-r4tq7s67jm] { background: #dcfce7; color: #16a34a; font-size: 9px; font-weight: 800; padding: 3px 8px; border-radius: 5px; letter-spacing: .08em; display: inline-flex; align-items: center; gap: 4px; }
.rt-timeline-list[b-r4tq7s67jm] { padding: 12px 0; }
.rt-timeline-empty[b-r4tq7s67jm] { padding: 18px 20px; }
.rt-tl-row[b-r4tq7s67jm] { display: grid; grid-template-columns: 56px 36px 1fr; gap: 12px; padding: 9px 20px; align-items: flex-start; transition: background .12s; }
.rt-tl-row--future[b-r4tq7s67jm] { opacity: .55; }
.rt-tl-row--btn[b-r4tq7s67jm] { cursor: pointer; }
.rt-tl-row--btn:hover[b-r4tq7s67jm] { background: var(--ec-bg); }
.rt-tl-time[b-r4tq7s67jm] { font-size: 12px; font-weight: 800; color: var(--ec-text); font-family: ui-monospace, "SF Mono", monospace; padding-top: 5px; margin: 0; }
.rt-tl-row--future .rt-tl-time[b-r4tq7s67jm] { color: var(--ec-muted); }
.rt-tl-rail[b-r4tq7s67jm] { position: relative; display: flex; flex-direction: column; align-items: center; }
.rt-tl-dot[b-r4tq7s67jm] { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; z-index: 1; }
.rt-tl-line[b-r4tq7s67jm] { position: absolute; top: 32px; bottom: -9px; left: 50%; width: 2px; background: var(--ec-border-soft); transform: translateX(-50%); }
.rt-tl-body[b-r4tq7s67jm] { min-width: 0; padding-top: 3px; }
.rt-tl-titlerow[b-r4tq7s67jm] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
.rt-tl-label[b-r4tq7s67jm] { font-size: 13px; font-weight: 800; color: var(--ec-text); margin: 0; }
.rt-tl-see[b-r4tq7s67jm] { font-size: 10px; color: var(--ec-muted); font-weight: 700; margin-left: auto; }
.rt-tl-detail[b-r4tq7s67jm] { font-size: 12px; color: var(--ec-sub); line-height: 1.5; margin: 0; }

.rt-status[b-r4tq7s67jm] { font-size: 9.5px; font-weight: 800; padding: 2px 7px; border-radius: 5px; letter-spacing: .06em; text-transform: uppercase; border: 1px solid; white-space: nowrap; }

/* Nap card */
.rt-nap-head[b-r4tq7s67jm] { padding: 14px 18px; border-bottom: 1px solid var(--ec-border-soft); background: linear-gradient(135deg, #eef2ff, #fff); display: flex; align-items: center; gap: 11px; }
.rt-nap-head-icon[b-r4tq7s67jm] { width: 38px; height: 38px; border-radius: 10px; background: #fff; border: 1px solid #c7d2fe; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rt-nap-eyebrow[b-r4tq7s67jm] { font-size: 10px; font-weight: 800; color: #3b5fc0; letter-spacing: .1em; text-transform: uppercase; margin: 0; }
.rt-nap-headline[b-r4tq7s67jm] { font-size: 14px; font-weight: 800; color: var(--ec-text); margin: 2px 0 0; }
.rt-nap-body[b-r4tq7s67jm] { padding: 14px 18px; }
.rt-nap-times[b-r4tq7s67jm] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rt-nap-time[b-r4tq7s67jm] { background: var(--ec-bg); border-radius: 9px; padding: 9px 11px; }
.rt-nap-time-l[b-r4tq7s67jm] { font-size: 9.5px; font-weight: 800; color: var(--ec-muted); letter-spacing: .08em; text-transform: uppercase; margin: 0; }
.rt-nap-time-v[b-r4tq7s67jm] { font-size: 14px; font-weight: 800; color: var(--ec-text); margin: 3px 0 0; font-family: ui-monospace, "SF Mono", monospace; }
.rt-nap-note[b-r4tq7s67jm] { font-size: 12.5px; color: var(--ec-text); line-height: 1.55; font-style: italic; margin: 12px 0 0; }

/* Mood card */
.rt-mood-body[b-r4tq7s67jm] { padding: 14px 18px; display: flex; align-items: center; gap: 13px; }
.rt-mood-face[b-r4tq7s67jm] { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid; flex-shrink: 0; }
.rt-mood-face--muted[b-r4tq7s67jm] { background: var(--ec-bg); border-color: var(--ec-border); }
.rt-mood-label[b-r4tq7s67jm] { font-size: 15px; font-weight: 800; color: var(--ec-text); margin: 0; }
.rt-mood-label--muted[b-r4tq7s67jm] { color: var(--ec-muted); font-size: 13px; }
.rt-mood-cap[b-r4tq7s67jm] { font-size: 11.5px; color: var(--ec-muted); margin: 2px 0 0; }

/* Teacher notes */
.rt-notes-head[b-r4tq7s67jm] { padding: 14px 18px; border-bottom: 1px solid var(--ec-border-soft); display: flex; align-items: center; gap: 8px; }
.rt-notes-count[b-r4tq7s67jm] { font-size: 13px; font-weight: 700; color: var(--ec-text); margin: 2px 0 0; }
.rt-notes-list[b-r4tq7s67jm] { padding: 10px 18px 14px; display: flex; flex-direction: column; gap: 8px; }
.rt-note[b-r4tq7s67jm] { background: var(--ec-bg); border: 1px solid var(--ec-border-soft); border-radius: 10px; padding: 10px 12px; border-left: 3px solid; }
.rt-note-top[b-r4tq7s67jm] { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; flex-wrap: wrap; }
.rt-note-cat[b-r4tq7s67jm] { display: inline-flex; align-items: center; gap: 4px; border: 1px solid; border-radius: 6px; padding: 2px 7px; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.rt-note-time[b-r4tq7s67jm] { font-size: 10px; color: var(--ec-muted); font-weight: 700; font-family: ui-monospace, "SF Mono", monospace; margin-left: auto; }
.rt-note-text[b-r4tq7s67jm] { font-size: 12.5px; color: var(--ec-text); line-height: 1.55; margin: 0; }
.rt-note-by[b-r4tq7s67jm] { font-size: 10.5px; color: var(--ec-muted); margin: 5px 0 0; }

/* Arrival & departure */
.rt-arrival[b-r4tq7s67jm] { padding: 14px 18px; }
.rt-arrival .rt-card-eyebrow[b-r4tq7s67jm] { margin-bottom: 10px; }
.rt-arrival-row[b-r4tq7s67jm] { display: flex; justify-content: space-between; align-items: center; }
.rt-arrival-row--bb[b-r4tq7s67jm] { padding-bottom: 9px; border-bottom: 1px solid var(--ec-border-soft); margin-bottom: 9px; }
.rt-arrival-id[b-r4tq7s67jm] { display: flex; align-items: center; gap: 9px; }
.rt-arrival-id p[b-r4tq7s67jm] { font-size: 12px; font-weight: 700; color: var(--ec-text); margin: 0; }
.rt-arrival-v[b-r4tq7s67jm] { font-size: 12px; color: var(--ec-text); font-weight: 700; font-family: ui-monospace, "SF Mono", monospace; margin: 0; }
.rt-arrival-v--muted[b-r4tq7s67jm] { color: var(--ec-muted); }

/* How the child ate */
.rt-ate[b-r4tq7s67jm] { margin-top: 16px; }
.rt-ate-head[b-r4tq7s67jm] { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.rt-ate-week[b-r4tq7s67jm] { background: none; border: none; color: #16a34a; font-size: 12px; font-weight: 800; cursor: pointer; font-family: inherit; padding: 0; display: inline-flex; align-items: center; gap: 5px; }
.rt-ate-empty[b-r4tq7s67jm] { padding: 14px 20px; }
.rt-ate-grid[b-r4tq7s67jm] { padding: 14px 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.rt-ate-card[b-r4tq7s67jm] { background: #fff; border: 1.5px solid var(--ec-border); border-radius: 12px; padding: 14px 16px; cursor: pointer; font-family: inherit; text-align: left; transition: transform .12s, box-shadow .12s; }
.rt-ate-card:hover[b-r4tq7s67jm] { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(13,23,51,.10); }
.rt-ate-card-top[b-r4tq7s67jm] { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.rt-ate-card-id[b-r4tq7s67jm] { display: flex; align-items: center; gap: 11px; min-width: 0; }
.rt-ate-card-icon[b-r4tq7s67jm] { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rt-ate-card-title[b-r4tq7s67jm] { font-size: 13.5px; font-weight: 800; color: var(--ec-text); margin: 0; }
.rt-ate-card-time[b-r4tq7s67jm] { font-size: 11.5px; color: var(--ec-muted); margin: 2px 0 0; font-family: ui-monospace, "SF Mono", monospace; }
.rt-ate-card-see[b-r4tq7s67jm] { font-size: 11px; color: var(--ec-muted); font-weight: 700; display: flex; align-items: center; gap: 5px; margin: 0; }

/* ── Week view ── */
.rt-week[b-r4tq7s67jm] { display: flex; flex-direction: column; gap: 16px; }
.rt-week-kpis[b-r4tq7s67jm] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.rt-chart[b-r4tq7s67jm] { padding: 18px 24px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; align-items: end; height: 200px; }
.rt-bar-col[b-r4tq7s67jm] { display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; }
.rt-bar-area[b-r4tq7s67jm] { flex: 1; display: flex; align-items: flex-end; width: 100%; justify-content: center; }
.rt-bar[b-r4tq7s67jm] { width: 70%; border-radius: 7px 7px 0 0; position: relative; background: linear-gradient(180deg, var(--bar), color-mix(in srgb, var(--bar) 80%, transparent)); }
.rt-bar--today[b-r4tq7s67jm] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bar) 30%, transparent); }
.rt-bar-val[b-r4tq7s67jm] { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 800; font-family: ui-monospace, "SF Mono", monospace; }
.rt-bar-empty[b-r4tq7s67jm] { width: 70%; height: 14px; background: var(--ec-border-soft); border-radius: 7px 7px 0 0; display: flex; align-items: center; justify-content: center; }
.rt-bar-empty span[b-r4tq7s67jm] { font-size: 9px; font-weight: 700; color: var(--ec-muted); }
.rt-bar-label[b-r4tq7s67jm] { text-align: center; }
.rt-bar-day[b-r4tq7s67jm] { font-size: 11px; font-weight: 700; color: var(--ec-muted); margin: 0; }
.rt-bar-day--today[b-r4tq7s67jm] { font-size: 11px; font-weight: 800; color: var(--ec-text); margin: 0; }
.rt-bar-num[b-r4tq7s67jm] { font-size: 9.5px; color: var(--ec-muted); margin: 1px 0 0; }

.rt-chart--meals[b-r4tq7s67jm] { height: auto; align-items: stretch; }
.rt-mcol[b-r4tq7s67jm] { display: flex; flex-direction: column; gap: 8px; }
.rt-mstack[b-r4tq7s67jm] { display: flex; flex-direction: column; gap: 3px; height: 120px; justify-content: flex-end; }
.rt-mcell[b-r4tq7s67jm] { flex: 1; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #fff; min-height: 16px; }
.rt-mcell--eaten[b-r4tq7s67jm] { background: #16a34a; }
.rt-mcell--miss[b-r4tq7s67jm] { background: var(--ec-border-soft); }
.rt-mcell--empty[b-r4tq7s67jm] { background: var(--ec-border-soft); }
.rt-mcell--today[b-r4tq7s67jm] { box-shadow: 0 0 0 2px color-mix(in srgb, #16a34a 30%, transparent); }
.rt-legend[b-r4tq7s67jm] { display: flex; gap: 14px; margin: 0 24px 18px; padding-top: 12px; border-top: 1px solid var(--ec-border-soft); font-size: 11px; color: var(--ec-muted); }
.rt-legend-item[b-r4tq7s67jm] { display: flex; align-items: center; gap: 5px; }
.rt-legend-dot[b-r4tq7s67jm] { width: 10px; height: 10px; border-radius: 3px; }

/* ── Responsive ── */
@media (max-width: 900px) {
    .rt-main[b-r4tq7s67jm] { grid-template-columns: 1fr; }
    .rt-week-kpis[b-r4tq7s67jm] { grid-template-columns: repeat(2, 1fr); }
}
/* /Components/Pages/Parent/ParentAnnouncements.razor.rz.scp.css */
/* ── KPI strip ── tiles are <WebKpi>; this is just the grid wrapper.
   (no margin-bottom: the global .pd-page flex gap owns spacing) */
.pa-kpis[b-aatb9n2y5f] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 1100px) { .pa-kpis[b-aatb9n2y5f] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .pa-kpis[b-aatb9n2y5f] { grid-template-columns: 1fr; } }

/* ── Filter chips ── */
.pa-filters[b-aatb9n2y5f] { display: flex; gap: 8px; flex-wrap: wrap; }
.pa-filter[b-aatb9n2y5f] { display: inline-flex; align-items: center; gap: 7px; background: var(--ec-card); border: 1px solid var(--ec-border); color: var(--ec-sub); border-radius: 9px; padding: 7px 13px; font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit; transition: border-color .12s, background .12s, color .12s; }
.pa-filter:hover[b-aatb9n2y5f] { border-color: var(--ec-blue); }
.pa-filter--active[b-aatb9n2y5f] { background: var(--ec-blue); border-color: var(--ec-blue); color: #fff; }
.pa-filter--danger.pa-filter--active[b-aatb9n2y5f] { background: var(--ec-amber); border-color: var(--ec-amber); }
.pa-filter-count[b-aatb9n2y5f] { font-size: 10px; font-weight: 800; background: var(--ec-border-soft); color: var(--ec-muted); padding: 1px 7px; border-radius: 5px; }
.pa-filter--active .pa-filter-count[b-aatb9n2y5f] { background: rgba(255,255,255,0.22); color: #fff; }
.pa-filter--danger:not(.pa-filter--active) .pa-filter-count[b-aatb9n2y5f] { background: var(--ec-amber-lt); color: var(--ec-amber); }

/* ── List + card (prototype lines 4112-4205) ── */
.pa-list[b-aatb9n2y5f] { display: flex; flex-direction: column; gap: 10px; }
.pa-card[b-aatb9n2y5f] {
    display: grid;
    grid-template-columns: 4px 44px 1fr auto;
    gap: 14px;
    align-items: flex-start;
    background: var(--ec-card);
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    padding: 14px 16px 14px 0;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    position: relative;
}
.pa-card--unread[b-aatb9n2y5f] { border-color: color-mix(in oklab, var(--prio-fg) 30%, transparent); }
.pa-card:hover[b-aatb9n2y5f] { border-color: var(--type-color); box-shadow: 0 4px 14px color-mix(in oklab, var(--type-color) 15%, transparent); }
.pa-card-bar[b-aatb9n2y5f] { min-height: 64px; align-self: stretch; background: var(--prio-stripe); border-radius: 0 4px 4px 0; }
.pa-card-tile[b-aatb9n2y5f] {
    width: 44px; height: 44px; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px; margin-top: 2px;
}
.pa-card-body[b-aatb9n2y5f] { min-width: 0; padding-top: 1px; }
.pa-card-head[b-aatb9n2y5f] { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.pa-card-type[b-aatb9n2y5f] { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; margin: 0; }
.pa-card-pin[b-aatb9n2y5f] { background: #fff3e0; color: #b05900; font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 4px; letter-spacing: 0.05em; display: inline-flex; align-items: center; gap: 3px; }
.pa-card-prio[b-aatb9n2y5f] { font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 4px; letter-spacing: 0.05em; }
.pa-card-unread-dot[b-aatb9n2y5f] { width: 7px; height: 7px; border-radius: 50%; background: var(--ec-blue); }
.pa-card-title[b-aatb9n2y5f] { font-size: 14.5px; font-weight: 800; color: var(--ec-text); line-height: 1.3; margin: 0 0 6px; }
.pa-card-snippet[b-aatb9n2y5f] { font-size: 13px; color: var(--ec-sub); line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pa-card-meta[b-aatb9n2y5f] { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; font-size: 11.5px; color: var(--ec-muted); align-items: center; }
.pa-card-meta-sep[b-aatb9n2y5f] { color: var(--ec-faint); }
.pa-card-meta i[b-aatb9n2y5f] { font-size: 11px; }
.pa-card-author[b-aatb9n2y5f] { display: inline-flex; align-items: center; gap: 6px; }
.pa-card-author-av[b-aatb9n2y5f] { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 800; }

.pa-card-action[b-aatb9n2y5f] { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding-top: 1px; padding-right: 4px; }
.pa-card-read[b-aatb9n2y5f] { background: var(--ec-green-lt); color: var(--ec-green); border: 1px solid rgba(22,163,74,0.3); padding: 4px 9px; border-radius: 8px; font-size: 10.5px; font-weight: 800; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.pa-card-new[b-aatb9n2y5f] { border: 1px solid; padding: 4px 9px; border-radius: 8px; font-size: 10.5px; font-weight: 800; white-space: nowrap; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 5px; }
.pa-card-new-dot[b-aatb9n2y5f] { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

@media (max-width: 800px) {
    .pa-card[b-aatb9n2y5f] { grid-template-columns: 4px 44px 1fr; }
    .pa-card-action[b-aatb9n2y5f] { grid-column: 2 / -1; flex-direction: row; align-items: center; padding: 0; }
}
/* /Components/Pages/Parent/ParentCalendarPage.razor.rz.scp.css */
/* Parent Calendar — scoped styles. Ported from inline <style> block.
   Class names match the prototype's PWCalendar component (prototype lines
   ~3970-4240). Uses --ec-* tokens from app.css for theme alignment. */

/* Shell owns the gutter; drop the 2rem padding, the off-palette background, the
   100vh (caused an oversized scroll area), and the one-off Plus Jakarta override
   so the calendar matches the app's standard font/spacing. */
.cal-page[b-h6x251cxpt] { padding: 0; display: flex; flex-direction: column; gap: 1.5rem; min-height: 100%; }
.cal-header[b-h6x251cxpt] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.cal-title[b-h6x251cxpt] { font-size: 1.75rem; font-weight: 800; color: var(--ec-on-surface, #1a2744); margin: 0; }
.cal-subtitle[b-h6x251cxpt] { font-size: 0.875rem; color: var(--ec-on-surface-variant, #5c6b8a); margin: 0.25rem 0 0; }
.cal-nav-group[b-h6x251cxpt] { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.cal-view-toggle[b-h6x251cxpt] { display: flex; background: #fff; border: 1px solid rgba(159,178,221,0.25); border-radius: 0.625rem; padding: 3px; gap: 2px; }
.cal-tab[b-h6x251cxpt] { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.875rem; border: none; border-radius: 0.5rem; background: transparent; font-size: 0.82rem; font-weight: 600; color: var(--ec-on-surface-variant, #5c6b8a); cursor: pointer; transition: all 0.18s; font-family: inherit; }
.cal-tab--active[b-h6x251cxpt] { background: var(--ec-primary, #2e5dab); color: #fff; box-shadow: 0 2px 8px rgba(46,93,171,0.25); }
.cal-tab:hover:not(.cal-tab--active)[b-h6x251cxpt] { background: var(--ec-primary-container, #dce8ff); color: var(--ec-primary, #2e5dab); }
.cal-period-nav[b-h6x251cxpt] { display: flex; align-items: center; gap: 0.35rem; }
.cal-nav-btn[b-h6x251cxpt] { width: 34px; height: 34px; border-radius: 0.5rem; border: 1px solid rgba(159,178,221,0.3); background: #fff; color: var(--ec-on-surface-variant, #5c6b8a); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s; }
.cal-nav-btn:hover[b-h6x251cxpt] { border-color: var(--ec-primary, #2e5dab); color: var(--ec-primary, #2e5dab); background: var(--ec-primary-container, #dce8ff); }
.cal-today-btn[b-h6x251cxpt] { padding: 0.4rem 0.875rem; border: 1px solid rgba(159,178,221,0.3); border-radius: 0.5rem; background: #fff; color: var(--ec-on-surface, #1a2744); font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: all 0.15s; font-family: inherit; }
.cal-today-btn:hover[b-h6x251cxpt] { border-color: var(--ec-primary, #2e5dab); color: var(--ec-primary, #2e5dab); }
.cal-period-title[b-h6x251cxpt] { font-size: 1.35rem; font-weight: 800; color: var(--ec-on-surface, #1a2744); text-align: left; margin: 0; }
.cal-card[b-h6x251cxpt] { background: #fff; border-radius: 1rem; border: 1px solid rgba(159,178,221,0.15); box-shadow: 0 1px 4px rgba(30,50,86,0.07); overflow: hidden; }
.cal-card--no-pad[b-h6x251cxpt] { padding: 0; }
.cal-weekday-row[b-h6x251cxpt] { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid rgba(159,178,221,0.15); background: var(--ec-surface-low, #f4f6fb); }
.cal-weekday-cell[b-h6x251cxpt] { padding: 0.625rem; text-align: center; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ec-on-surface-variant, #5c6b8a); }
.cal-week-row[b-h6x251cxpt] { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid rgba(159,178,221,0.1); }
.cal-week-row:last-child[b-h6x251cxpt] { border-bottom: none; }
.cal-day-cell[b-h6x251cxpt] { border-right: 1px solid rgba(159,178,221,0.1); padding: 0.5rem; min-height: 110px; cursor: pointer; transition: background 0.15s; }
.cal-day-cell:last-child[b-h6x251cxpt] { border-right: none; }
.cal-day-cell:hover[b-h6x251cxpt] { background: rgba(46,93,171,0.03); }
.cal-day-cell--today[b-h6x251cxpt] { background: rgba(46,93,171,0.04); }
.cal-day-cell--other[b-h6x251cxpt] { opacity: 0.45; }
.cal-day-num[b-h6x251cxpt] { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 600; margin-bottom: 0.25rem; }
.cal-day-num--today[b-h6x251cxpt] { background: var(--ec-primary, #2e5dab); color: #fff; font-weight: 700; }
.cal-day-events[b-h6x251cxpt] { display: flex; flex-direction: column; gap: 2px; }
.cal-event[b-h6x251cxpt] { font-size: 0.7rem; padding: 0.15rem 0.4rem; border-radius: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cal-event--attendance[b-h6x251cxpt] { background: #e8f5ee; color: #006e2d; border-left: 2.5px solid #006e2d; }
.cal-event--activity[b-h6x251cxpt] { background: var(--ec-primary-container, #dce8ff); color: var(--ec-primary, #2e5dab); border-left: 2.5px solid var(--ec-primary, #2e5dab); }
.cal-event--event[b-h6x251cxpt] { background: #fff3e0; color: #b05900; border-left: 2.5px solid #b05900; }
.cal-event-more[b-h6x251cxpt] { font-size: 0.68rem; color: var(--ec-on-surface-variant, #5c6b8a); font-weight: 600; padding: 0.1rem 0.3rem; }
.cal-week-grid[b-h6x251cxpt] { display: grid; grid-template-columns: 60px repeat(7, 1fr); overflow-x: auto; }
.cal-time-col-header[b-h6x251cxpt] { border-bottom: 1px solid rgba(159,178,221,0.15); border-right: 1px solid rgba(159,178,221,0.15); }
.cal-week-day-header[b-h6x251cxpt] { padding: 0.625rem; text-align: center; border-bottom: 1px solid rgba(159,178,221,0.15); border-right: 1px solid rgba(159,178,221,0.1); display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.cal-week-day-header--today[b-h6x251cxpt] { background: rgba(46,93,171,0.05); }
.cal-week-day-name[b-h6x251cxpt] { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ec-on-surface-variant, #5c6b8a); }
.cal-week-day-num[b-h6x251cxpt] { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 700; color: var(--ec-on-surface, #1a2744); }
.cal-week-day-num--today[b-h6x251cxpt] { background: var(--ec-primary, #2e5dab); color: #fff; }
.cal-time-label[b-h6x251cxpt] { padding: 0.35rem 0.5rem; font-size: 0.7rem; font-weight: 600; color: var(--ec-on-surface-variant, #5c6b8a); border-right: 1px solid rgba(159,178,221,0.15); border-bottom: 1px solid rgba(159,178,221,0.08); height: 56px; display: flex; align-items: flex-start; justify-content: flex-end; }
.cal-week-slot[b-h6x251cxpt] { border-right: 1px solid rgba(159,178,221,0.1); border-bottom: 1px solid rgba(159,178,221,0.08); height: 56px; padding: 2px; }
.cal-week-slot--today[b-h6x251cxpt] { background: rgba(46,93,171,0.03); }
.cal-slot-event[b-h6x251cxpt] { font-size: 0.68rem; padding: 0.1rem 0.35rem; border-radius: 3px; font-weight: 600; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-day-view-title[b-h6x251cxpt] { font-size: 1rem; font-weight: 700; color: var(--ec-on-surface, #1a2744); padding: 1.25rem 1.5rem 0; }
.cal-day-list[b-h6x251cxpt] { display: flex; flex-direction: column; gap: 0; padding: 1rem 1.5rem; }
.cal-day-item[b-h6x251cxpt] { display: flex; align-items: flex-start; gap: 1rem; padding: 0.875rem 0; border-bottom: 1px solid rgba(159,178,221,0.1); }
.cal-day-item:last-child[b-h6x251cxpt] { border-bottom: none; }
.cal-day-item-time[b-h6x251cxpt] { font-size: 0.75rem; font-weight: 600; color: var(--ec-on-surface-variant, #5c6b8a); width: 42px; flex-shrink: 0; }
.cal-day-item-dot[b-h6x251cxpt] { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.cal-day-item-dot--attendance[b-h6x251cxpt] { background: #006e2d; }
.cal-day-item-dot--activity[b-h6x251cxpt] { background: var(--ec-primary, #2e5dab); }
.cal-day-item-dot--event[b-h6x251cxpt] { background: #b05900; }
.cal-day-item-body[b-h6x251cxpt] { flex: 1; }
.cal-day-item-title[b-h6x251cxpt] { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 600; color: var(--ec-on-surface, #1a2744); }
.cal-event-type-badge[b-h6x251cxpt] { padding: 0.15rem 0.5rem; border-radius: 9999px; font-size: 0.68rem; font-weight: 700; }
.cal-event-type-badge--attendance[b-h6x251cxpt] { background: #e8f5ee; color: #006e2d; }
.cal-event-type-badge--activity[b-h6x251cxpt] { background: var(--ec-primary-container, #dce8ff); color: var(--ec-primary, #2e5dab); }
.cal-event-type-badge--event[b-h6x251cxpt] { background: #fff3e0; color: #b05900; }
.cal-day-item-desc[b-h6x251cxpt] { margin: 0.25rem 0 0; font-size: 0.8rem; color: var(--ec-on-surface-variant, #5c6b8a); }
.cal-day-empty[b-h6x251cxpt] { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 3rem 2rem; color: var(--ec-on-surface-variant, #5c6b8a); }
.cal-day-empty svg[b-h6x251cxpt] { opacity: 0.25; }
.cal-day-empty p[b-h6x251cxpt] { margin: 0; font-size: 0.9rem; }
.cal-legend[b-h6x251cxpt] { display: flex; align-items: center; gap: 1.25rem; background: #fff; padding: 0.875rem 1.5rem; border-radius: 0.875rem; border: 1px solid rgba(159,178,221,0.15); flex-wrap: wrap; }
.cal-legend-title[b-h6x251cxpt] { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ec-on-surface-variant, #5c6b8a); }
.cal-legend-item[b-h6x251cxpt] { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 600; color: var(--ec-on-surface, #1a2744); }
.cal-legend-dot[b-h6x251cxpt] { width: 10px; height: 10px; border-radius: 50%; }
.cal-legend-dot--attendance[b-h6x251cxpt] { background: #006e2d; }
.cal-legend-dot--activity[b-h6x251cxpt] { background: var(--ec-primary, #2e5dab); }
.cal-legend-dot--event[b-h6x251cxpt] { background: #b05900; }
.cal-alert[b-h6x251cxpt] { display: flex; align-items: center; gap: 0.625rem; padding: 0.875rem 1.25rem; border-radius: 0.75rem; background: #fde8e8; color: #9b1d1d; border: 1px solid #f5c2c0; font-size: 0.875rem; }
.cal-alert-close[b-h6x251cxpt] { margin-left: auto; background: none; border: none; font-size: 1.15rem; cursor: pointer; opacity: 0.5; color: inherit; padding: 0; }
.cal-alert-close:hover[b-h6x251cxpt] { opacity: 1; }
.cal-loading[b-h6x251cxpt] { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 3rem; color: var(--ec-on-surface-variant, #5c6b8a); font-size: 0.875rem; }
.cal-spinner[b-h6x251cxpt] { width: 34px; height: 34px; border: 3px solid rgba(46,93,171,0.12); border-top-color: var(--ec-primary, #2e5dab); border-radius: 50%; animation: cal-spin-b-h6x251cxpt 0.8s linear infinite; }
@keyframes cal-spin-b-h6x251cxpt { to { transform: rotate(360deg); } }
@media (max-width: 768px) { .cal-page[b-h6x251cxpt] { gap: 1rem; } .cal-day-cell[b-h6x251cxpt] { min-height: 70px; } }

/* ── Day-detail modal (click a calendar cell) ── */
/* Right-side slide-over (matches the documents pattern). */
.cal-modal-overlay[b-h6x251cxpt] {
    position: fixed; inset: 0;
    background: rgba(13, 23, 51, 0.5);
    display: flex; justify-content: flex-end;
    z-index: 1500;
    animation: cal-modal-fade-b-h6x251cxpt .15s ease;
}
@keyframes cal-modal-fade-b-h6x251cxpt { from { opacity: 0; } to { opacity: 1; } }
.cal-modal[b-h6x251cxpt] {
    background: #fff;
    width: min(520px, 96%);
    height: 100%;
    box-shadow: -12px 0 40px rgba(13, 23, 51, 0.16);
    display: flex; flex-direction: column;
    animation: cal-modal-slide-b-h6x251cxpt .22s ease-out;
}
@keyframes cal-modal-slide-b-h6x251cxpt { from { transform: translateX(24px); opacity: .4; } to { transform: translateX(0); opacity: 1; } }
.cal-modal-head[b-h6x251cxpt] {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(159, 178, 221, 0.18);
}
.cal-modal-eyebrow[b-h6x251cxpt] {
    font-size: 11px; font-weight: 800;
    color: var(--ec-on-surface-variant, #5c6b8a);
    letter-spacing: 0.1em; text-transform: uppercase;
    margin: 0;
}
.cal-modal-title[b-h6x251cxpt] {
    font-size: 20px; font-weight: 800;
    color: var(--ec-on-surface, #1a2744);
    margin: 3px 0 0;
    letter-spacing: -0.01em;
}
.cal-modal-close[b-h6x251cxpt] {
    width: 34px; height: 34px; border-radius: 10px;
    background: #fff;
    border: 1px solid rgba(159, 178, 221, 0.25);
    color: var(--ec-on-surface-variant, #5c6b8a);
    cursor: pointer; font-family: inherit;
    font-size: 14px;
    display: inline-flex; align-items: center; justify-content: center;
}
.cal-modal-close:hover[b-h6x251cxpt] { background: #f4f6fb; color: var(--ec-on-surface, #1a2744); }
.cal-modal-body[b-h6x251cxpt] {
    flex: 1; overflow-y: auto;
    padding: 18px 22px 22px;
}
.cal-modal-count[b-h6x251cxpt] {
    font-size: 11px; font-weight: 800;
    color: var(--ec-on-surface-variant, #5c6b8a);
    letter-spacing: 0.1em; text-transform: uppercase;
    margin: 0 0 10px;
}
.cal-modal-list[b-h6x251cxpt] { display: flex; flex-direction: column; gap: 9px; }
.cal-modal-item[b-h6x251cxpt] {
    display: flex; gap: 12px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid rgba(159, 178, 221, 0.2);
    border-radius: 10px;
}
.cal-modal-item-pill[b-h6x251cxpt] {
    font-size: 9.5px; font-weight: 800;
    padding: 4px 8px; border-radius: 5px;
    letter-spacing: 0.06em; text-transform: uppercase;
    white-space: nowrap;
    align-self: flex-start;
}
.cal-modal-item-body[b-h6x251cxpt] { flex: 1; min-width: 0; }
.cal-modal-item-title[b-h6x251cxpt] {
    font-size: 13.5px; font-weight: 700;
    color: var(--ec-on-surface, #1a2744);
    margin: 0;
}
.cal-modal-item-desc[b-h6x251cxpt] {
    font-size: 12px;
    color: var(--ec-on-surface-variant, #5c6b8a);
    line-height: 1.45;
    margin: 4px 0 0;
}
.cal-modal-empty[b-h6x251cxpt] {
    text-align: center;
    padding: 28px 16px;
}
.cal-modal-empty-icon[b-h6x251cxpt] {
    font-size: 32px;
    color: var(--ec-on-surface-variant, #5c6b8a);
    opacity: 0.4;
    display: block;
    margin-bottom: 8px;
}
.cal-modal-empty-title[b-h6x251cxpt] { font-size: 14px; font-weight: 800; color: var(--ec-on-surface, #1a2744); margin: 0 0 4px; }
.cal-modal-empty-sub[b-h6x251cxpt] { font-size: 12.5px; color: var(--ec-on-surface-variant, #5c6b8a); margin: 0; }
/* /Components/Pages/Parent/ParentDashboardKg.razor.rz.scp.css */
/* ── Hero ── */
.pd-hero[b-mklot66tg3] {
    border-radius: 16px;
    padding: 22px 26px;
    color: #fff;
    position: relative;
    overflow: hidden;
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}
.pd-hero-kg[b-mklot66tg3] { background: linear-gradient(110deg, var(--ec-primary), var(--ec-primary-dk)); }
.pd-hero[b-mklot66tg3]::before, .pd-hero[b-mklot66tg3]::after {
    content: ""; position: absolute; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.08); pointer-events: none;
}
.pd-hero[b-mklot66tg3]::before { top: -40px; right: -40px; width: 180px; height: 180px; }
.pd-hero[b-mklot66tg3]::after  { bottom: -60px; right: 80px; width: 140px; height: 140px; }

.pd-hero-content[b-mklot66tg3] { flex: 1 1 320px; min-width: 0; position: relative; }
.pd-hero-eyebrow[b-mklot66tg3] {
    font-size: 11px; font-weight: 700;
    color: rgba(255,255,255,.6);
    letter-spacing: .12em; text-transform: uppercase;
    margin: 0;
}
.pd-hero-greeting[b-mklot66tg3] {
    font-size: 24px; font-weight: 800;
    margin: 5px 0 5px;
    letter-spacing: -0.01em;
}
.pd-hero-context[b-mklot66tg3] {
    font-size: 13.5px;
    color: rgba(255,255,255,.85);
    max-width: 540px; line-height: 1.5;
    margin: 0;
}
.pd-hero-context b[b-mklot66tg3] { color: #fff; }
.pd-hero-actions[b-mklot66tg3] {
    display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap;
}
.pd-hero-btn[b-mklot66tg3] {
    display: inline-flex; align-items: center; gap: 7px;
    border: none; border-radius: 9px;
    padding: 8px 14px; font-size: 12px; font-weight: 700;
    cursor: pointer; font-family: inherit;
}
.pd-hero-btn-primary[b-mklot66tg3] { background: #fff; color: var(--ec-primary-dk); font-weight: 800; }
.pd-hero-btn-ghost[b-mklot66tg3] {
    background: rgba(255,255,255,.14);
    color: #fff;
    border: 1px solid rgba(255,255,255,.2);
}
.pd-hero-btn-ghost:disabled[b-mklot66tg3] { opacity: 0.6; cursor: not-allowed; }

/* "Marked absent today" pill — replaces the Mark Sick button when a
   Pending notice exists for today. Green-tinted to read as confirmed. */
.pd-hero-absent-pill[b-mklot66tg3] {
    display: inline-flex; align-items: center; gap: 9px;
    background: rgba(34, 197, 94, 0.22);
    border: 1px solid rgba(34, 197, 94, 0.4);
    border-radius: 9px;
    padding: 7px 14px 7px 11px;
    font-size: 12px; font-weight: 700;
    color: #fff;
}
.pd-hero-absent-pill i[b-mklot66tg3] { font-size: 13px; }
.pd-hero-absent-undo[b-mklot66tg3] {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 10.5px; font-weight: 700;
    color: #fff;
    cursor: pointer; font-family: inherit;
    margin-left: 3px;
}
.pd-hero-absent-undo:hover[b-mklot66tg3] { background: rgba(255, 255, 255, 0.28); }
.pd-hero-absent-undo:disabled[b-mklot66tg3] { opacity: 0.5; cursor: not-allowed; }

/* ── Live status pod ── */
.pd-hero-pod[b-mklot66tg3] {
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 14px;
    padding: 14px 18px;
    min-width: 220px;
    position: relative;
}
.pd-hero-pod-eyebrow[b-mklot66tg3] {
    display: flex; align-items: center; gap: 7px;
    font-size: 10px; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255,255,255,.85);
    margin: 0 0 8px;
}
.pd-hero-pod-dot[b-mklot66tg3] {
    width: 8px; height: 8px; border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34,197,94,.25);
}
.pd-hero-pod-title[b-mklot66tg3] {
    display: flex; align-items: center; gap: 10px;
    font-size: 22px; font-weight: 800; line-height: 1.1; margin: 0 0 4px;
}
.pd-hero-pod-meta[b-mklot66tg3]  { font-size: 11.5px; color: rgba(255,255,255,.75); margin: 0; }
.pd-hero-pod-divider[b-mklot66tg3] { height: 1px; background: rgba(255,255,255,.15); margin: 12px 0; }
.pd-hero-pod-next[b-mklot66tg3]  {
    display: flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 700; margin: 0;
}

/* ── Loading ── */
.pd-loading[b-mklot66tg3] {
    display: flex; flex-direction: column; align-items: center;
    padding: 5rem 2rem; gap: 1rem;
    color: var(--ec-on-surface-variant);
}

/* ── Empty ── */
.pd-empty[b-mklot66tg3] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 4rem 2rem; text-align: center; gap: 0.5rem;
    background: white; border-radius: 1.5rem;
    color: var(--ec-on-surface-variant);
}
.pd-empty-icon[b-mklot66tg3] { font-size: 3rem; color: var(--ec-primary); opacity: 0.3; margin-bottom: 0.5rem; }
.pd-empty h3[b-mklot66tg3] { font-size: 1.1rem; font-weight: 800; color: var(--ec-on-surface); margin: 0; }
.pd-empty p[b-mklot66tg3]  { font-size: 0.875rem; max-width: 460px; margin: 0; }

/* ── Awaiting-RSVP banner ── */
.pd-rsvp-banner[b-mklot66tg3] {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 18px;
    background: linear-gradient(135deg, #fff7ed, #fffbeb);
    border: 1px solid rgba(217, 119, 6, 0.25);
    border-left: 4px solid var(--ec-amber);
    border-radius: 13px;
    flex-wrap: wrap;
}
.pd-rsvp-icon[b-mklot66tg3] {
    width: 42px; height: 42px; border-radius: 11px;
    background: var(--ec-amber); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 18px;
}
.pd-rsvp-body[b-mklot66tg3] { flex: 1 1 240px; min-width: 0; }
.pd-rsvp-title[b-mklot66tg3] { font-size: 13px; font-weight: 800; color: var(--ec-text); margin: 0; }
.pd-rsvp-meta[b-mklot66tg3] {
    font-size: 11.5px; color: var(--ec-sub); margin: 2px 0 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pd-rsvp-cta[b-mklot66tg3] {
    padding: 9px 16px;
    background: var(--ec-amber); color: #fff;
    border: none; border-radius: 9px;
    font-size: 12.5px; font-weight: 800;
    cursor: pointer; font-family: inherit;
    white-space: nowrap;
}
.pd-rsvp-cta:hover[b-mklot66tg3] { filter: brightness(1.05); }

/* ── KPI strip ── */
/* -8px top/bottom against the .pd-page 24px flex gap nets a tighter 16px above
   and below the KPI strip — matching the 16px internal rhythm (gap between the
   News and Day-rhythm cards) so the row reads as part of the dashboard, not a
   widely-spaced band. Deliberate exception to "no margins in a flex-gap wrapper". */
.pd-kpis[b-mklot66tg3] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: -8px 0; }
@media (max-width: 1100px) { .pd-kpis[b-mklot66tg3] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .pd-kpis[b-mklot66tg3] { grid-template-columns: 1fr; } }

/* ── Multi-child strip ── */
.pd-children-strip[b-mklot66tg3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

@media (max-width: 600px) { .pd-page[b-mklot66tg3] { padding: 1rem; gap: 1rem; } }

.pd-card[b-mklot66tg3] {
    background: var(--ec-card);
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    overflow: hidden;
}
.pd-section-card[b-mklot66tg3] { padding: 0; }
.pd-section-card .pd-section-head[b-mklot66tg3] {
    padding: 14px 18px;
    border-bottom: 1px solid var(--ec-border-soft);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.pd-section-card .pd-section-title[b-mklot66tg3] { font-size: 14px; font-weight: 800; color: var(--ec-text); margin: 0; }
.pd-section-sub[b-mklot66tg3] { font-size: 12px; color: var(--ec-muted); margin: 2px 0 0; }
.pd-link-btn[b-mklot66tg3] {
    background: transparent;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    padding: 5px 11px;
    font-size: 11px; font-weight: 700;
    color: var(--ec-blue);
    cursor: pointer; font-family: inherit;
}

.pd-grid[b-mklot66tg3] {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 16px;
}
.pd-grid-main[b-mklot66tg3] { display: flex; flex-direction: column; gap: 16px; }
.pd-grid-rail[b-mklot66tg3] { display: flex; flex-direction: column; gap: 14px; }
.pd-card-padded[b-mklot66tg3] { padding: 14px 18px; }

/* ── Today's news feed (main column) ── */
.pd-news[b-mklot66tg3] { display: flex; flex-direction: column; }
.pd-news-item[b-mklot66tg3] {
    display: flex; gap: 12px; padding: 14px 18px;
    border-top: 1px solid var(--ec-border-soft); cursor: pointer;
}
.pd-news-item:first-child[b-mklot66tg3] { border-top: none; }
.pd-news-item:hover[b-mklot66tg3] { background: var(--ec-kg-tint); }
.pd-news-avatar[b-mklot66tg3] {
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: 12px; flex-shrink: 0;
}
.pd-news-body[b-mklot66tg3] { flex: 1; min-width: 0; }
.pd-news-head[b-mklot66tg3] { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pd-news-author[b-mklot66tg3] { font-size: 11.5px; font-weight: 700; color: var(--ec-sub); margin: 0; }
.pd-news-title[b-mklot66tg3] { font-size: 13.5px; font-weight: 700; color: var(--ec-text); line-height: 1.4; margin: 3px 0 0; }
.pd-news-text[b-mklot66tg3] { font-size: 12px; color: var(--ec-sub); line-height: 1.5; margin: 4px 0 0; }
.pd-news-photos[b-mklot66tg3] { display: flex; gap: 6px; margin-top: 8px; }
.pd-news-photo[b-mklot66tg3] {
    width: 64px; height: 64px; border-radius: 8px;
    background-size: cover; background-position: center;
    background-color: var(--ec-border-soft); flex-shrink: 0;
}
.pd-news-photo-more[b-mklot66tg3] {
    display: flex; align-items: center; justify-content: center;
    background: var(--ec-bg); color: var(--ec-sub);
    font-size: 13px; font-weight: 800;
}
.pd-news-meta[b-mklot66tg3] {
    display: flex; align-items: center; gap: 11px;
    font-size: 11.5px; color: var(--ec-muted); margin: 8px 0 0;
}
.pd-news-react[b-mklot66tg3] { display: inline-flex; align-items: center; gap: 4px; }
.pd-news-react .bi-heart-fill[b-mklot66tg3] { color: #ef4444; }

/* ── Day rhythm timeline (rail) ── */
.pd-rhythm[b-mklot66tg3] { display: flex; flex-direction: column; padding: 8px 0; }
.pd-rhythm-row[b-mklot66tg3] {
    display: flex; align-items: center; gap: 11px;
    padding: 8px 18px; position: relative;
}
.pd-rhythm-now[b-mklot66tg3] { background: var(--ec-kg-tint); }
.pd-rhythm-now[b-mklot66tg3]::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px; background: var(--ec-primary);
}
.pd-rhythm-past[b-mklot66tg3] { opacity: 0.5; }
.pd-rhythm-emoji[b-mklot66tg3] {
    width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.pd-rhythm-body[b-mklot66tg3] { flex: 1; min-width: 0; }
.pd-rhythm-title[b-mklot66tg3] {
    font-size: 12.5px; font-weight: 700; color: var(--ec-text);
    display: flex; align-items: center; gap: 6px; margin: 0;
}
.pd-rhythm-meta[b-mklot66tg3] { font-size: 10.5px; color: var(--ec-muted); margin: 1px 0 0; }
.pd-row-badge-now[b-mklot66tg3] {
    background: var(--ec-primary); color: #fff;
    font-size: 9px; font-weight: 800;
    padding: 1px 5px; border-radius: 3px; letter-spacing: 0.05em;
}

/* ── Quick contact ── */
.pd-rail-contacts[b-mklot66tg3] { margin-top: 12px; display: flex; flex-direction: column; }
.pd-rail-contact[b-mklot66tg3] {
    display: flex; align-items: center; gap: 10px;
    border: none; background: transparent;
    padding: 8px 0;
    border-top: 1px solid var(--ec-border-soft);
    cursor: pointer; font-family: inherit; text-align: left;
}
.pd-rail-contact:first-child[b-mklot66tg3] { border-top: 0; }
.pd-rail-contact-avatar-wrap[b-mklot66tg3] { position: relative; flex-shrink: 0; }
.pd-rail-contact-avatar[b-mklot66tg3] {
    width: 32px; height: 32px; border-radius: 50%;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800;
}
.pd-rail-contact-online[b-mklot66tg3] {
    position: absolute; bottom: 0; right: 0;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--ec-green);
    border: 2px solid #fff;
}
.pd-rail-contact-body[b-mklot66tg3] { flex: 1; min-width: 0; }
.pd-rail-contact-name[b-mklot66tg3] { font-size: 12px; font-weight: 700; color: var(--ec-text); margin: 0; }
.pd-rail-contact-role[b-mklot66tg3] { font-size: 10.5px; color: var(--ec-muted); margin: 1px 0 0; }
.pd-rail-contact-chev[b-mklot66tg3] { font-size: 13px; color: var(--ec-muted); }
.pd-rail-empty[b-mklot66tg3] { font-size: 12.5px; color: var(--ec-muted); margin: 12px 0 0; }

@media (max-width: 1100px) {
    .pd-grid[b-mklot66tg3] { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .pd-hero[b-mklot66tg3] { padding: 18px 18px; gap: 18px; }
    .pd-hero-greeting[b-mklot66tg3] { font-size: 20px; }
    .pd-hero-context[b-mklot66tg3]  { font-size: 12.5px; }
    .pd-hero-pod[b-mklot66tg3]      { width: 100%; min-width: 0; }
    .pd-hero-actions[b-mklot66tg3]  { flex-direction: column; align-items: stretch; }
    .pd-hero-btn[b-mklot66tg3]      { justify-content: center; }
    .pd-page[b-mklot66tg3] { padding: 0 12px; gap: 14px; }
}
/* /Components/Pages/Parent/ParentDashboardSchool.razor.rz.scp.css */
/* ── Hero ── */
.pd-hero[b-hpevxyzchi] {
    border-radius: 16px;
    padding: 22px 26px;
    color: #fff;
    position: relative;
    overflow: hidden;
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}
.pd-hero-school[b-hpevxyzchi] { background: linear-gradient(110deg, var(--ec-blue), var(--ec-blue-dk)); }
.pd-hero[b-hpevxyzchi]::before, .pd-hero[b-hpevxyzchi]::after {
    content: ""; position: absolute; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.08); pointer-events: none;
}
.pd-hero[b-hpevxyzchi]::before { top: -40px; right: -40px; width: 180px; height: 180px; }
.pd-hero[b-hpevxyzchi]::after  { bottom: -60px; right: 80px; width: 140px; height: 140px; }

.pd-hero-content[b-hpevxyzchi] { flex: 1 1 320px; min-width: 0; position: relative; }
.pd-hero-eyebrow[b-hpevxyzchi] {
    font-size: 11px; font-weight: 700;
    color: rgba(255,255,255,.6);
    letter-spacing: .12em; text-transform: uppercase;
    margin: 0;
}
.pd-hero-greeting[b-hpevxyzchi] {
    font-size: 24px; font-weight: 800;
    margin: 5px 0 5px;
    letter-spacing: -0.01em;
}
.pd-hero-context[b-hpevxyzchi] {
    font-size: 13.5px;
    color: rgba(255,255,255,.85);
    max-width: 540px; line-height: 1.5;
    margin: 0;
}
.pd-hero-actions[b-hpevxyzchi] {
    display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap;
}
.pd-hero-btn[b-hpevxyzchi] {
    display: inline-flex; align-items: center; gap: 7px;
    border: none; border-radius: 9px;
    padding: 8px 14px; font-size: 12px; font-weight: 700;
    cursor: pointer; font-family: inherit;
}
.pd-hero-btn-primary[b-hpevxyzchi] { background: #fff; color: var(--ec-blue-dk); }
.pd-hero-btn-ghost[b-hpevxyzchi] {
    background: rgba(255,255,255,.14);
    color: #fff;
    border: 1px solid rgba(255,255,255,.2);
}
.pd-hero-btn-ghost:disabled[b-hpevxyzchi] { opacity: 0.6; cursor: not-allowed; }

/* "Marked absent today" pill — replaces the Mark Sick button when
   a Pending notice exists for today. Green-tinted to read as confirmed.
   Mirrors prototype lines 1677-1689. */
.pd-hero-absent-pill[b-hpevxyzchi] {
    display: inline-flex; align-items: center; gap: 9px;
    background: rgba(34, 197, 94, 0.22);
    border: 1px solid rgba(34, 197, 94, 0.4);
    border-radius: 9px;
    padding: 7px 14px 7px 11px;
    font-size: 12px; font-weight: 700;
    color: #fff;
}
.pd-hero-absent-pill i[b-hpevxyzchi] { font-size: 13px; }
.pd-hero-absent-undo[b-hpevxyzchi] {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 10.5px; font-weight: 700;
    color: #fff;
    cursor: pointer; font-family: inherit;
    margin-left: 3px;
}
.pd-hero-absent-undo:hover[b-hpevxyzchi] { background: rgba(255, 255, 255, 0.28); }
.pd-hero-absent-undo:disabled[b-hpevxyzchi] { opacity: 0.5; cursor: not-allowed; }

/* ── Loading ── */
.pd-loading[b-hpevxyzchi] {
    display: flex; flex-direction: column; align-items: center;
    padding: 5rem 2rem; gap: 1rem;
    color: var(--ec-on-surface-variant);
}
.pd-spinner[b-hpevxyzchi] {
    width: 40px; height: 40px;
    border: 3px solid rgba(46,93,171,0.15);
    border-top-color: var(--ec-primary);
    border-radius: 50%;
    animation: pd-spin-b-hpevxyzchi 0.75s linear infinite;
}
@keyframes pd-spin-b-hpevxyzchi { to { transform: rotate(360deg); } }

/* ── Empty ── */
.pd-empty[b-hpevxyzchi] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 4rem 2rem; text-align: center; gap: 0.5rem;
    background: white; border-radius: 1.5rem;
    color: var(--ec-on-surface-variant);
}
.pd-empty-icon[b-hpevxyzchi] { font-size: 3rem; color: var(--ec-primary); opacity: 0.3; margin-bottom: 0.5rem; }
.pd-empty h3[b-hpevxyzchi] { font-size: 1.1rem; font-weight: 800; color: var(--ec-on-surface); margin: 0; }
.pd-empty p[b-hpevxyzchi]  { font-size: 0.875rem; max-width: 460px; margin: 0; }

/* ── Awaiting-RSVP banner ── */
.pd-rsvp-banner[b-hpevxyzchi] {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 18px; margin-bottom: 18px;
    background: linear-gradient(135deg, #fff7ed, #fffbeb);
    border: 1px solid rgba(217, 119, 6, 0.25);
    border-left: 4px solid var(--ec-amber);
    border-radius: 13px;
    flex-wrap: wrap;
}
.pd-rsvp-icon[b-hpevxyzchi] {
    width: 42px; height: 42px; border-radius: 11px;
    background: var(--ec-amber); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 18px;
}
.pd-rsvp-body[b-hpevxyzchi] { flex: 1 1 240px; min-width: 0; }
.pd-rsvp-title[b-hpevxyzchi] {
    font-size: 13px; font-weight: 800; color: var(--ec-text); margin: 0;
}
.pd-rsvp-meta[b-hpevxyzchi] {
    font-size: 11.5px; color: var(--ec-sub); margin: 2px 0 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pd-rsvp-cta[b-hpevxyzchi] {
    padding: 9px 16px;
    background: var(--ec-amber); color: #fff;
    border: none; border-radius: 9px;
    font-size: 12.5px; font-weight: 800;
    cursor: pointer; font-family: inherit;
    white-space: nowrap;
}
.pd-rsvp-cta:hover[b-hpevxyzchi] { filter: brightness(1.05); }

/* ── KPI Strip ── */
.pd-kpis[b-hpevxyzchi] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

@media (max-width: 1100px) {
    .pd-kpis[b-hpevxyzchi] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px)  { .pd-kpis[b-hpevxyzchi] { grid-template-columns: 1fr; } }
/* ── Multi-child Strip ── */
.pd-children-strip[b-hpevxyzchi] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

@media (max-width: 600px) {
    .pd-page[b-hpevxyzchi] { padding: 1rem; gap: 1rem; }
}

.pd-card[b-hpevxyzchi] {
    background: var(--ec-card);
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    overflow: hidden;
}
.pd-section-card[b-hpevxyzchi] { padding: 0; }
.pd-section-card .pd-section-head[b-hpevxyzchi] {
    padding: 14px 18px;
    border-bottom: 1px solid var(--ec-border-soft);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.pd-section-card .pd-section-title[b-hpevxyzchi] { font-size: 14px; font-weight: 800; color: var(--ec-text); margin: 0; }
.pd-section-sub[b-hpevxyzchi]   { font-size: 12px; color: var(--ec-muted); margin: 2px 0 0; }
.pd-link-btn[b-hpevxyzchi] {
    background: transparent;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    padding: 5px 11px;
    font-size: 11px; font-weight: 700;
    color: var(--ec-blue);
    cursor: pointer; font-family: inherit;
}
/* ── Today's schedule (rewritten to match prototype PWDashboard lines 1758-1820) ── */
@keyframes pd-pulse-b-hpevxyzchi { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.pd-now-inline[b-hpevxyzchi] {
    color: var(--ec-green); font-weight: 800;
    display: inline-flex; align-items: center; gap: 5px;
}
.pd-now-dot[b-hpevxyzchi] {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--ec-green);
    animation: pd-pulse-b-hpevxyzchi 1.6s infinite;
    display: inline-block;
}
.pd-section-sub-strong[b-hpevxyzchi] { color: var(--ec-text); font-weight: 700; }
.pd-section-sub-muted[b-hpevxyzchi] { color: var(--ec-muted); }

.pd-sched[b-hpevxyzchi] { padding: 6px 0; }
.pd-sched-row[b-hpevxyzchi] {
    display: grid;
    grid-template-columns: 58px 40px 1fr 24px;
    gap: 12px; padding: 10px 18px;
    border-left: 3px solid transparent;
    align-items: center;
    transition: background 0.18s;
}
.pd-sched-row.is-now[b-hpevxyzchi] {
    background: rgba(22, 163, 74, 0.08);
    border-left-color: var(--ec-green);
}
.pd-sched-row.is-past[b-hpevxyzchi] { opacity: 0.55; }

/* Time column — monospace numerals */
.pd-sched-time[b-hpevxyzchi] { font-family: ui-monospace, 'SF Mono', monospace; }
.pd-sched-time-start[b-hpevxyzchi] { font-size: 12.5px; font-weight: 800; color: var(--ec-text); line-height: 1; margin: 0; }
.pd-sched-time-end[b-hpevxyzchi]   { font-size: 10px;   color: var(--ec-muted); margin: 2px 0 0; }

/* Subject tile — colored badge w/ generic book glyph */
.pd-sched-tile[b-hpevxyzchi] {
    width: 40px; height: 40px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 18px;
}

/* Info column */
.pd-sched-info[b-hpevxyzchi] { min-width: 0; }
.pd-sched-info-row[b-hpevxyzchi] {
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.pd-sched-title[b-hpevxyzchi] {
    font-size: 13.5px; font-weight: 700; color: var(--ec-text); margin: 0;
}
.pd-sched-row.is-now .pd-sched-title[b-hpevxyzchi] { font-weight: 800; }
.pd-sched-meta[b-hpevxyzchi] {
    font-size: 11px; color: var(--ec-muted); margin: 2px 0 0;
    display: inline-flex; align-items: center; gap: 5px;
}
.pd-sched-meta-sep[b-hpevxyzchi]  { color: var(--ec-faint); }
.pd-sched-meta-room[b-hpevxyzchi] {
    display: inline-flex; align-items: center; gap: 3px;
}
.pd-sched-meta-room i[b-hpevxyzchi] { font-size: 10px; }

/* Badges */
.pd-sched-badge[b-hpevxyzchi] {
    font-size: 9px; font-weight: 800;
    padding: 2px 7px; border-radius: 4px;
    letter-spacing: 0.06em;
    display: inline-flex; align-items: center; gap: 4px;
}
.pd-sched-badge-now[b-hpevxyzchi] {
    background: var(--ec-green); color: #fff;
}
.pd-sched-badge-dot[b-hpevxyzchi] {
    width: 5px; height: 5px; border-radius: 50%;
    background: #fff; display: inline-block;
    animation: pd-pulse-b-hpevxyzchi 1.6s infinite;
}
.pd-sched-badge-next[b-hpevxyzchi] {
    background: var(--ec-bg);
    color: var(--ec-sub);
    border: 1px solid var(--ec-border);
    padding: 1px 7px;
}

/* NOW progress bar */
.pd-sched-progress[b-hpevxyzchi] {
    margin-top: 6px;
    height: 3px;
    background: var(--ec-green-lt);
    border-radius: 2px;
    overflow: hidden;
    max-width: 240px;
}
.pd-sched-progress-bar[b-hpevxyzchi] {
    height: 100%;
    background: var(--ec-green);
    border-radius: 2px;
    transition: width 0.3s;
}

/* Right-side status column */
.pd-sched-status[b-hpevxyzchi] {
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    color: var(--ec-faint);
}
.pd-sched-check[b-hpevxyzchi] { color: var(--ec-green); font-size: 14px; font-weight: 700; }

.pd-grid[b-hpevxyzchi] {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 16px;
}
.pd-grid-main[b-hpevxyzchi] { display: flex; flex-direction: column; gap: 16px; }
.pd-grid-rail[b-hpevxyzchi] { display: flex; flex-direction: column; gap: 14px; }
.pd-card-padded[b-hpevxyzchi] { padding: 14px 18px; }

.pd-rail-feed[b-hpevxyzchi] { display: flex; flex-direction: column; }
.pd-rail-feed-item[b-hpevxyzchi] {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 12px 18px;
    border-bottom: 1px solid var(--ec-border-soft);
    cursor: pointer;
}
.pd-rail-feed-item:last-child[b-hpevxyzchi] { border-bottom: 0; }
.pd-rail-feed-item:hover[b-hpevxyzchi] { background: var(--ec-blue-gh); }
.pd-rail-feed-avatar[b-hpevxyzchi] {
    width: 30px; height: 30px; border-radius: 50%;
    color: #fff; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10.5px; font-weight: 800;
}
.pd-rail-feed-body[b-hpevxyzchi] { flex: 1; min-width: 0; }
.pd-rail-feed-head[b-hpevxyzchi] {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    margin-bottom: 3px;
}
.pd-rail-feed-author[b-hpevxyzchi] { font-size: 11px; font-weight: 700; color: var(--ec-sub); margin: 0; }
.pd-rail-feed-title[b-hpevxyzchi] { font-size: 12.5px; font-weight: 600; color: var(--ec-text); line-height: 1.4; margin: 0; }
.pd-rail-feed-meta[b-hpevxyzchi]  { font-size: 11px; color: var(--ec-muted); margin: 4px 0 0; }

.pd-rail-contacts[b-hpevxyzchi] { margin-top: 12px; display: flex; flex-direction: column; }
.pd-rail-contact[b-hpevxyzchi] {
    display: flex; align-items: center; gap: 10px;
    border: none; background: transparent;
    padding: 8px 0;
    border-top: 1px solid var(--ec-border-soft);
    cursor: pointer; font-family: inherit; text-align: left;
}
.pd-rail-contact:first-child[b-hpevxyzchi] { border-top: 0; }
.pd-rail-contact-avatar-wrap[b-hpevxyzchi] { position: relative; flex-shrink: 0; }
.pd-rail-contact-avatar[b-hpevxyzchi] {
    width: 32px; height: 32px; border-radius: 50%;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800;
}
.pd-rail-contact-online[b-hpevxyzchi] {
    position: absolute; bottom: 0; right: 0;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--ec-green);
    border: 2px solid #fff;
}
.pd-rail-contact-body[b-hpevxyzchi] { flex: 1; min-width: 0; }
.pd-rail-contact-name[b-hpevxyzchi] { font-size: 12px; font-weight: 700; color: var(--ec-text); margin: 0; }
.pd-rail-contact-role[b-hpevxyzchi] { font-size: 10.5px; color: var(--ec-muted); margin: 1px 0 0; }
.pd-rail-contact-chev[b-hpevxyzchi] { font-size: 13px; color: var(--ec-muted); }
.pd-rail-empty[b-hpevxyzchi] { font-size: 12.5px; color: var(--ec-muted); margin: 12px 0 0; }

@media (max-width: 1100px) {
    .pd-grid[b-hpevxyzchi] { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .pd-hero[b-hpevxyzchi] { padding: 18px 18px; gap: 18px; }
    .pd-hero-greeting[b-hpevxyzchi] { font-size: 20px; }
    .pd-hero-context[b-hpevxyzchi]  { font-size: 12.5px; }
    .pd-hero-actions[b-hpevxyzchi]  { flex-direction: column; align-items: stretch; }
    .pd-hero-btn[b-hpevxyzchi]      { justify-content: center; }
    .pd-page[b-hpevxyzchi] { padding: 0 12px; gap: 14px; }
}
/* /Components/Pages/Parent/ParentEventDetail.razor.rz.scp.css */
/* ParentEventDetail — scoped CSS for the right-slide-over event detail.
   Mirrors PWEventDetail prototype (lines 5011-5101).
   Per-instance accents flow through CSS custom properties:
     --accent  category eyebrow tint, RSVP button color                                */

/* ── Overlay + panel ────────────────────────────────────────────── */
.ped-overlay[b-8lmqnyjxwi] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .5);
    z-index: 1090;
    display: flex;
    justify-content: flex-end;
}
.ped-panel[b-8lmqnyjxwi] {
    width: min(620px, 96%);
    height: 100%;
    background: #fff;
    box-shadow: -12px 0 40px rgba(13, 23, 51, .16);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* ── Hero ──────────────────────────────────────────────────────── */
.ped-hero[b-8lmqnyjxwi] {
    height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
}
.ped-hero-img[b-8lmqnyjxwi] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ped-hero-icon[b-8lmqnyjxwi] {
    position: relative;
    z-index: 1;
    color: #fff;
}
.ped-close[b-8lmqnyjxwi] {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid var(--ec-border);
    font-size: 14px;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Body ──────────────────────────────────────────────────────── */
.ped-body[b-8lmqnyjxwi] { padding: 18px 24px; }

.ped-eyebrow[b-8lmqnyjxwi] {
    font-size: 10px;
    font-weight: 800;
    color: var(--accent, var(--ec-blue));
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.ped-title[b-8lmqnyjxwi] {
    font-size: 22px;
    font-weight: 800;
    color: var(--ec-text);
    letter-spacing: -0.01em;
    margin: 6px 0 0;
}
.ped-short[b-8lmqnyjxwi] {
    font-size: 13px;
    color: var(--ec-sub);
    line-height: 1.55;
    margin: 5px 0 0;
}

/* ── Info cards (When / Where / Capacity) ──────────────────────── */
.ped-info-grid[b-8lmqnyjxwi] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
    margin-top: 14px;
}
.ped-info-card[b-8lmqnyjxwi] {
    padding: 11px 13px;
    background: var(--ec-bg);
    border-radius: 10px;
}
.ped-info-card--standalone[b-8lmqnyjxwi] { margin-top: 11px; }
.ped-info-label[b-8lmqnyjxwi] {
    font-size: 10px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}
.ped-info-value[b-8lmqnyjxwi] {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 4px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.ped-info-sub[b-8lmqnyjxwi] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 3px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* ── Section heading + description ────────────────────────────── */
.ped-section-heading[b-8lmqnyjxwi] {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 18px 0 7px;
}
.ped-description[b-8lmqnyjxwi] {
    font-size: 13px;
    color: var(--ec-text);
    line-height: 1.65;
    white-space: pre-wrap;
    margin: 0;
}

/* ── RSVP block ────────────────────────────────────────────────── */
.ped-rsvp[b-8lmqnyjxwi] {
    margin-top: 20px;
    padding: 16px 18px;
    background: var(--ec-purple-lt);
    border: 1px solid color-mix(in srgb, var(--ec-purple) 25%, transparent);
    border-radius: 12px;
}
.ped-rsvp--replied[b-8lmqnyjxwi] {
    background: color-mix(in srgb, var(--ec-green-lt) 50%, transparent);
    border-color: color-mix(in srgb, var(--ec-green) 25%, transparent);
}
.ped-rsvp-eyebrow[b-8lmqnyjxwi] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}
.ped-rsvp-heading[b-8lmqnyjxwi] {
    font-size: 16px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 3px 0 0;
}
.ped-rsvp-buttons[b-8lmqnyjxwi] {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.ped-rsvp-btn[b-8lmqnyjxwi] {
    flex: 1 1 100px;
    padding: 9px 12px;
    background: #fff;
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.ped-rsvp-btn--on[b-8lmqnyjxwi] {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* ── Guests + dietary inputs ──────────────────────────────────── */
.ped-rsvp-extras[b-8lmqnyjxwi] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    margin-top: 11px;
    align-items: center;
}
.ped-rsvp-field-label[b-8lmqnyjxwi] {
    font-size: 11px;
    font-weight: 700;
    color: var(--ec-text);
    margin: 0;
}
.ped-rsvp-field-label--multiline[b-8lmqnyjxwi] {
    align-self: start;
    margin-top: 3px;
}
.ped-rsvp-input[b-8lmqnyjxwi] {
    width: 90px;
    padding: 7px 10px;
    border: 1px solid var(--ec-border);
    border-radius: 7px;
    font-size: 12.5px;
    font-family: inherit;
    box-sizing: border-box;
    outline: none;
    background: #fff;
}
.ped-rsvp-textarea[b-8lmqnyjxwi] {
    padding: 7px 10px;
    border: 1px solid var(--ec-border);
    border-radius: 7px;
    font-size: 12px;
    font-family: inherit;
    box-sizing: border-box;
    outline: none;
    background: #fff;
    resize: vertical;
}
.ped-rsvp-update-btn[b-8lmqnyjxwi] {
    margin-top: 10px;
    padding: 7px 14px;
    background: var(--ec-purple);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
}
.ped-rsvp-update-btn:disabled[b-8lmqnyjxwi] { opacity: 0.6; cursor: not-allowed; }
.ped-rsvp-change-hint[b-8lmqnyjxwi] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 9px 0 0;
    font-style: italic;
}

/* ── Past / Cancelled banners ─────────────────────────────────── */
.ped-banner[b-8lmqnyjxwi] {
    margin-top: 20px;
    border-radius: 12px;
}
.ped-banner--past[b-8lmqnyjxwi] {
    padding: 16px 18px;
    background: var(--ec-bg);
    border: 1px dashed var(--ec-border);
    text-align: center;
    color: var(--ec-muted);
    font-size: 13px;
}
.ped-banner--cancelled[b-8lmqnyjxwi] {
    padding: 14px 16px;
    background: var(--ec-red-lt);
    border: 1px solid color-mix(in srgb, var(--ec-red) 25%, transparent);
    border-left: 4px solid var(--ec-red);
    border-radius: 11px;
}
.ped-banner-title[b-8lmqnyjxwi] {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--ec-red);
    margin: 0;
}
.ped-banner-desc[b-8lmqnyjxwi] {
    font-size: 11.5px;
    color: var(--ec-sub);
    margin: 4px 0 0;
    line-height: 1.5;
}
/* /Components/Pages/Parent/ParentEventsPage.razor.rz.scp.css */
/* ParentEventsPage — scoped CSS. Mirrors PWEvents prototype (lines 4815-4958).
   Per-instance tints flow through CSS custom properties set on the element:
     --accent      role accent (KPI, filter, RSVP, category pill)
     --accent-bg   light wash background for RSVP pill
     --stripe      left stripe color on event card                                     */

/* ── Header ─────────────────────────────────────────────────────── */
.pe-header[b-ccl9osq5la] {
    padding: 22px 28px 0;
    background: var(--ec-bg);
}
.pe-title[b-ccl9osq5la] {
    font-size: 22px;
    font-weight: 800;
    color: var(--ec-text);
    letter-spacing: -0.01em;
    margin: 0;
}
.pe-subtitle[b-ccl9osq5la] {
    font-size: 12.5px;
    color: var(--ec-sub);
    margin: 4px 0 0;
    line-height: 1.5;
}

/* ── Body ───────────────────────────────────────────────────────── */
.pe-body[b-ccl9osq5la] {
    background: var(--ec-bg);
    padding: 0;
    min-height: 100%;
}

/* ── KPIs ───────────────────────────────────────────────────────── */
.pe-kpis[b-ccl9osq5la] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}
.pe-kpi[b-ccl9osq5la] {
    min-height: 96px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.pe-kpi-icon[b-ccl9osq5la] {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent, var(--ec-blue)) 8%, transparent);
    color: var(--accent, var(--ec-blue));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pe-kpi-body[b-ccl9osq5la] { flex: 1; min-width: 0; }
.pe-kpi-value[b-ccl9osq5la] {
    font-size: 22px;
    font-weight: 800;
    color: var(--ec-text);
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 0;
}
.pe-kpi-label[b-ccl9osq5la] {
    font-size: 10px;
    font-weight: 700;
    color: var(--ec-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 6px 0 0;
}
.pe-kpi-sub[b-ccl9osq5la] {
    font-size: 11px;
    color: var(--ec-sub);
    margin: 3px 0 0;
}

/* ── Filter chips ───────────────────────────────────────────────── */
.pe-filters[b-ccl9osq5la] {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.pe-filter[b-ccl9osq5la] {
    background: #fff;
    color: var(--ec-sub);
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.pe-filter--active[b-ccl9osq5la] {
    background: var(--accent, var(--ec-text));
    color: #fff;
    border-color: var(--accent, var(--ec-text));
}
.pe-filter-count[b-ccl9osq5la] {
    font-size: 10px;
    font-weight: 800;
    background: var(--ec-border-soft);
    color: var(--ec-muted);
    padding: 1px 6px;
    border-radius: 4px;
}
.pe-filter--active .pe-filter-count[b-ccl9osq5la] {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

/* ── Section eyebrow ────────────────────────────────────────────── */
.pe-section-eyebrow[b-ccl9osq5la] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 9px;
}
.pe-section-eyebrow--public[b-ccl9osq5la] { margin-top: 18px; }

/* ── Event list / card ──────────────────────────────────────────── */
.pe-list[b-ccl9osq5la] {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 18px;
}
.pe-card[b-ccl9osq5la] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-left: 4px solid var(--stripe, var(--ec-muted));
    border-radius: 12px;
    overflow: hidden;
}
.pe-card-head[b-ccl9osq5la] {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 0;
    cursor: pointer;
}
.pe-card-cover[b-ccl9osq5la] {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.pe-card-cover-img[b-ccl9osq5la] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pe-card-body[b-ccl9osq5la] { padding: 13px 16px; }
.pe-card-pills[b-ccl9osq5la] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 5px;
}
.pe-pill[b-ccl9osq5la] {
    font-size: 9px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.06em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.pe-pill--category[b-ccl9osq5la] {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.pe-pill--public[b-ccl9osq5la] {
    color: var(--ec-blue);
    background: var(--ec-blue-lt);
}
.pe-pill--awaiting[b-ccl9osq5la] {
    color: var(--ec-amber);
    background: var(--ec-amber-lt);
}
.pe-pill--rsvp[b-ccl9osq5la] {
    color: var(--accent);
    background: var(--accent-bg);
}
.pe-pill--past[b-ccl9osq5la] {
    color: var(--ec-muted);
    background: var(--ec-bg);
}
.pe-card-title[b-ccl9osq5la] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    line-height: 1.3;
    margin: 0;
}
.pe-card-meta[b-ccl9osq5la] {
    font-size: 11.5px;
    color: var(--ec-muted);
    margin: 5px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.pe-card-meta + .pe-card-meta[b-ccl9osq5la] {
    margin: 2px 0 0;
    font-size: 11px;
}
.pe-card-desc[b-ccl9osq5la] {
    font-size: 11.5px;
    color: var(--ec-sub);
    margin: 7px 0 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Card actions row (RSVP) ────────────────────────────────────── */
.pe-card-actions[b-ccl9osq5la] {
    padding: 10px 16px;
    border-top: 1px solid var(--ec-border-soft);
    background: var(--ec-bg);
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
.pe-card-actions-eyebrow[b-ccl9osq5la] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
}
.pe-card-actions-spacer[b-ccl9osq5la] { flex: 1; }
.pe-rsvp-btn[b-ccl9osq5la] {
    padding: 6px 12px;
    background: #fff;
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.pe-rsvp-btn--on[b-ccl9osq5la] {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.pe-details-btn[b-ccl9osq5la] {
    padding: 6px 12px;
    background: transparent;
    color: var(--ec-sub);
    border: 1px solid var(--ec-border);
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}

/* Empty state now uses the shared <WebEmpty> atom — see WebApp/CLAUDE.md. */
/* /Components/Pages/Parent/ParentHelp.razor.rz.scp.css */
.ph-page[b-34mwyt0crh] { padding: 0; background: var(--ec-bg); min-height: 100%; }

/* ── Hero with search ─────────────────────────────────────────────── */
.ph-hero[b-34mwyt0crh] {
    position: relative;
    background: linear-gradient(125deg, var(--ec-blue) 0%, var(--ec-blue-dk) 130%);
    border-radius: 16px;
    padding: 26px 28px 22px;
    color: #fff;
    margin-bottom: 16px;
    overflow: hidden;
}
.ph-hero-ring[b-34mwyt0crh] {
    position: absolute; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.07);
    pointer-events: none;
}
.ph-hero-ring-1[b-34mwyt0crh] { top: -60px; right: -50px; width: 240px; height: 240px; }
.ph-hero-ring-2[b-34mwyt0crh] { bottom: -80px; right: 60px; width: 180px; height: 180px; }
.ph-hero-body[b-34mwyt0crh] { position: relative; max-width: 600px; }
.ph-hero-eyebrow[b-34mwyt0crh] {
    font-size: 11px; font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.12em; text-transform: uppercase;
    margin: 0;
}
.ph-hero-title[b-34mwyt0crh] {
    font-size: 26px; font-weight: 800;
    margin: 5px 0 6px;
    letter-spacing: -0.01em; line-height: 1.1;
}
.ph-hero-sub[b-34mwyt0crh] {
    font-size: 13.5px; color: rgba(255, 255, 255, 0.85);
    line-height: 1.5; margin: 0;
}

.ph-search-wrap[b-34mwyt0crh] {
    margin-top: 14px;
    position: relative; max-width: 520px;
}
.ph-search-input[b-34mwyt0crh] {
    width: 100%;
    background: #fff;
    border: none;
    border-radius: 11px;
    padding: 12px 14px 12px 40px;
    font-size: 13.5px; font-family: inherit;
    outline: none; color: var(--ec-text);
    box-shadow: 0 4px 14px rgba(13, 23, 51, 0.14);
    box-sizing: border-box;
}
.ph-search-icon[b-34mwyt0crh] {
    position: absolute; left: 14px; top: 50%;
    transform: translateY(-50%);
    font-size: 14px; color: var(--ec-muted);
}
.ph-search-clear[b-34mwyt0crh] {
    position: absolute; right: 8px; top: 50%;
    transform: translateY(-50%);
    width: 28px; height: 28px; border-radius: 7px;
    background: var(--ec-bg);
    border: none; cursor: pointer; font-family: inherit;
    font-size: 12px; color: var(--ec-muted);
    display: inline-flex; align-items: center; justify-content: center;
}
.ph-search-clear:hover[b-34mwyt0crh] { color: var(--ec-text); }

/* ── Two-column body ──────────────────────────────────────────────── */
.ph-body[b-34mwyt0crh] {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 16px;
    align-items: flex-start;
}
.ph-col-main[b-34mwyt0crh] { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ph-col-side[b-34mwyt0crh] { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.ph-card[b-34mwyt0crh] {
    background: var(--ec-card);
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    overflow: hidden;
}
.ph-card--padded[b-34mwyt0crh] { padding: 14px 16px; }

.ph-section-eyebrow[b-34mwyt0crh] {
    font-size: 11px; font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.1em; text-transform: uppercase;
    margin: 0 0 10px;
}

/* ── Category chips ───────────────────────────────────────────────── */
.ph-cat-row[b-34mwyt0crh] { display: flex; gap: 7px; flex-wrap: wrap; }
.ph-cat[b-34mwyt0crh] {
    background: var(--ec-card);
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    padding: 7px 11px;
    font-size: 12.5px; font-weight: 700;
    color: var(--ec-sub);
    cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 6px;
    transition: border-color .12s, background .12s, color .12s;
}
.ph-cat:hover[b-34mwyt0crh] { border-color: var(--cat-color); color: var(--cat-color); }
.ph-cat--active[b-34mwyt0crh] {
    background: var(--cat-color);
    border-color: var(--cat-color);
    color: #fff;
}

/* ── Popular topics grid ──────────────────────────────────────────── */
.ph-popular-grid[b-34mwyt0crh] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.ph-popular[b-34mwyt0crh] {
    background: linear-gradient(135deg, var(--ec-blue-lt), #fff);
    border: 1px solid var(--ec-border);
    border-radius: 11px;
    padding: 12px 14px;
    cursor: pointer; font-family: inherit;
    text-align: left;
    display: flex; align-items: flex-start; gap: 10px;
    transition: border-color .12s, box-shadow .12s;
}
.ph-popular:hover[b-34mwyt0crh] {
    border-color: var(--ec-blue);
    box-shadow: 0 4px 10px rgba(59, 95, 192, 0.12);
}
.ph-popular-icon[b-34mwyt0crh] {
    width: 34px; height: 34px; border-radius: 9px;
    background: rgba(59, 95, 192, 0.15);
    color: var(--ec-blue);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
}
.ph-popular-body[b-34mwyt0crh] { flex: 1; min-width: 0; }
.ph-popular-title[b-34mwyt0crh] {
    font-size: 12.5px; font-weight: 800; color: var(--ec-text);
    line-height: 1.25; margin: 0 0 3px;
}
.ph-popular-summary[b-34mwyt0crh] {
    font-size: 11px; color: var(--ec-muted);
    line-height: 1.4; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Articles list ────────────────────────────────────────────────── */
.ph-list-head[b-34mwyt0crh] {
    padding: 13px 18px;
    border-bottom: 1px solid var(--ec-border-soft);
    display: flex; justify-content: space-between; align-items: center;
}
.ph-list-title[b-34mwyt0crh] { font-size: 13.5px; font-weight: 800; color: var(--ec-text); margin: 0; }
.ph-list-count[b-34mwyt0crh] { font-size: 11.5px; color: var(--ec-muted); margin: 0; }

.ph-topic[b-34mwyt0crh] {
    width: 100%;
    background: #fff;
    border: none;
    border-top: 1px solid var(--ec-border-soft);
    padding: 13px 18px;
    display: flex; align-items: center; gap: 13px;
    cursor: pointer; font-family: inherit; text-align: left;
    transition: background .12s;
}
.ph-topic:first-of-type[b-34mwyt0crh] { border-top: none; }
.ph-topic:hover[b-34mwyt0crh] { background: var(--ec-blue-gh); }
.ph-topic-icon[b-34mwyt0crh] {
    width: 34px; height: 34px; border-radius: 9px;
    background: var(--ec-blue-gh);
    color: var(--ec-text);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px; flex-shrink: 0;
}
.ph-topic-body[b-34mwyt0crh] { flex: 1; min-width: 0; }
.ph-topic-head[b-34mwyt0crh] { display: flex; align-items: center; gap: 7px; margin-bottom: 2px; }
.ph-topic-title[b-34mwyt0crh] { font-size: 13px; font-weight: 800; color: var(--ec-text); margin: 0; }
.ph-topic-pill[b-34mwyt0crh] {
    background: var(--ec-blue-lt);
    color: var(--ec-blue);
    font-size: 9px; font-weight: 800;
    padding: 2px 6px; border-radius: 4px;
    letter-spacing: 0.06em;
}
.ph-topic-sub[b-34mwyt0crh] { font-size: 11.5px; color: var(--ec-muted); line-height: 1.4; margin: 0; }
.ph-topic-chev[b-34mwyt0crh] { color: var(--ec-faint); font-size: 14px; }

/* ── Empty state ──────────────────────────────────────────────────── */
.ph-empty[b-34mwyt0crh] { padding: 34px 22px; text-align: center; }
.ph-empty-icon[b-34mwyt0crh] { font-size: 28px; color: var(--ec-muted); margin-bottom: 8px; display: block; }
.ph-empty-title[b-34mwyt0crh] { font-size: 13px; font-weight: 800; color: var(--ec-text); margin: 0 0 4px; }
.ph-empty-sub[b-34mwyt0crh] { font-size: 12px; color: var(--ec-muted); margin: 0 0 14px; }
.ph-empty-cta[b-34mwyt0crh] {
    background: var(--ec-blue); border: none; border-radius: 9px;
    padding: 9px 16px;
    font-size: 12.5px; font-weight: 800; color: #fff;
    cursor: pointer; font-family: inherit;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 5px;
}
.ph-empty-cta:hover[b-34mwyt0crh] { filter: brightness(1.05); }

/* ── Right sidebar — contact / status / version ───────────────────── */
.ph-contact-row[b-34mwyt0crh] {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 0;
    border-bottom: 1px solid var(--ec-border-soft);
}
.ph-contact-row:last-of-type[b-34mwyt0crh] { border-bottom: none; }
.ph-contact-icon[b-34mwyt0crh] {
    width: 36px; height: 36px; border-radius: 9px;
    background: var(--ec-blue-gh);
    color: var(--ec-blue);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px; flex-shrink: 0;
}
.ph-contact-body[b-34mwyt0crh] { flex: 1; min-width: 0; }
.ph-contact-title[b-34mwyt0crh] { font-size: 12.5px; font-weight: 800; color: var(--ec-text); line-height: 1.2; margin: 0; }
.ph-contact-meta[b-34mwyt0crh] { font-size: 11px; color: var(--ec-muted); margin: 2px 0 0; }
.ph-contact-cta[b-34mwyt0crh] {
    margin-top: 12px;
    background: var(--ec-blue); border: none; border-radius: 9px;
    padding: 10px 14px;
    font-size: 12.5px; font-weight: 800; color: #fff;
    cursor: pointer; font-family: inherit;
    text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%;
}
.ph-contact-cta:hover[b-34mwyt0crh] { filter: brightness(1.05); }

.ph-status[b-34mwyt0crh] {
    display: flex; align-items: center; gap: 11px;
}
.ph-status-dot[b-34mwyt0crh] {
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--ec-green);
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.18);
    flex-shrink: 0;
}
.ph-status-label[b-34mwyt0crh] { font-size: 12.5px; font-weight: 800; color: var(--ec-text); margin: 0; }
.ph-status-sub[b-34mwyt0crh] { font-size: 11px; color: var(--ec-muted); margin: 2px 0 0; }

.ph-version[b-34mwyt0crh] {
    font-size: 10.5px; color: var(--ec-muted);
    margin: 4px 0 0; text-align: center;
}

/* ── Topic detail view ────────────────────────────────────────────── */
.ph-detail[b-34mwyt0crh] {
    display: flex; flex-direction: column; gap: 12px;
}
.ph-detail-back[b-34mwyt0crh] {
    align-self: flex-start;
    background: transparent;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 12px; font-weight: 700;
    color: var(--ec-blue);
    cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 5px;
}
.ph-detail-back:hover[b-34mwyt0crh] { background: var(--ec-blue-gh); }
.ph-detail-card[b-34mwyt0crh] {
    background: var(--ec-card);
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    padding: 22px 26px;
}
.ph-detail-head[b-34mwyt0crh] {
    display: flex; align-items: flex-start; gap: 14px;
    margin-bottom: 14px;
}
.ph-detail-icon[b-34mwyt0crh] {
    width: 56px; height: 56px; border-radius: 14px;
    background: var(--ec-blue-lt);
    color: var(--ec-blue);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 24px; flex-shrink: 0;
}
.ph-detail-category[b-34mwyt0crh] {
    font-size: 10.5px; font-weight: 800; color: var(--ec-muted);
    letter-spacing: 0.1em; text-transform: uppercase;
    margin: 4px 0 4px;
}
.ph-detail-title[b-34mwyt0crh] {
    font-size: 22px; font-weight: 800; color: var(--ec-text);
    letter-spacing: -0.01em; margin: 0;
}
.ph-detail-summary[b-34mwyt0crh] {
    font-size: 14px; color: var(--ec-sub);
    line-height: 1.55; margin: 0 0 18px;
}
.ph-detail-body[b-34mwyt0crh] { display: flex; flex-direction: column; gap: 12px; }
.ph-detail-body p[b-34mwyt0crh] {
    font-size: 13.5px; color: var(--ec-text);
    line-height: 1.65; margin: 0;
}

@media (max-width: 1000px) {
    .ph-body[b-34mwyt0crh] { grid-template-columns: 1fr; }
    .ph-popular-grid[b-34mwyt0crh] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Parent/ParentPollDetail.razor.rz.scp.css */
/* ParentPollDetail — scoped CSS for the poll right-slide-over detail view.
   Mirrors PWPollDetail prototype (lines 13875-13951).
   Per-instance accents flow through CSS custom properties:
     --accent      anonymity badge accent color
     --accent-bg   light wash background for the anonymity banner                       */

/* ── Overlay + panel ────────────────────────────────────────────── */
.ppd-overlay[b-k0vntte52b] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .5);
    z-index: 1090;
    display: flex;
    justify-content: flex-end;
}
.ppd-panel[b-k0vntte52b] {
    width: min(700px, 96%);
    height: 100%;
    background: #fff;
    box-shadow: -12px 0 40px rgba(13, 23, 51, .16);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* ── Hero ──────────────────────────────────────────────────────── */
.ppd-hero[b-k0vntte52b] {
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}
.ppd-close[b-k0vntte52b] {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid var(--ec-border);
    font-size: 14px;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Body ──────────────────────────────────────────────────────── */
.ppd-body[b-k0vntte52b] { padding: 18px 24px; }

.ppd-title[b-k0vntte52b] {
    font-size: 22px;
    font-weight: 800;
    color: var(--ec-text);
    letter-spacing: -0.01em;
    margin: 0;
}
.ppd-description[b-k0vntte52b] {
    font-size: 13px;
    color: var(--ec-sub);
    margin: 6px 0 0;
    line-height: 1.6;
    white-space: pre-wrap;
}

/* ── Anonymity badge ───────────────────────────────────────────── */
.ppd-anon[b-k0vntte52b] {
    margin-top: 14px;
    padding: 12px 14px;
    background: var(--accent-bg);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 11px;
}
.ppd-anon-icon[b-k0vntte52b] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ppd-anon-body[b-k0vntte52b] { flex: 1; min-width: 0; }
.ppd-anon-title[b-k0vntte52b] {
    font-size: 13px;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: 0.04em;
    margin: 0;
}
.ppd-anon-desc[b-k0vntte52b] {
    font-size: 11px;
    color: var(--ec-text);
    margin: 3px 0 0;
    line-height: 1.5;
}

/* ── Your reply / Closing note (green stripe) ──────────────────── */
.ppd-reply[b-k0vntte52b] {
    margin-top: 14px;
    padding: 13px 15px;
    background: var(--ec-green-lt);
    border-radius: 11px;
    border-left: 4px solid var(--ec-green);
}
.ppd-reply-eyebrow[b-k0vntte52b] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-green);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 4px;
}
.ppd-reply-body[b-k0vntte52b] {
    font-size: 13px;
    color: var(--ec-text);
    line-height: 1.6;
    margin: 0;
}
.ppd-reply-quote[b-k0vntte52b] {
    font-size: 12.5px;
    color: var(--ec-text);
    line-height: 1.6;
    font-style: italic;
    margin: 0;
}
.ppd-reply-change[b-k0vntte52b] {
    background: none;
    border: none;
    color: var(--ec-green);
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    text-decoration: underline;
    padding: 0;
    margin-left: 4px;
}

/* ── Inline response form section ──────────────────────────────── */
.ppd-form[b-k0vntte52b] { margin-top: 14px; }
.ppd-form-eyebrow[b-k0vntte52b] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 9px;
}

/* ── Results section ───────────────────────────────────────────── */
.ppd-results[b-k0vntte52b] { margin-top: 18px; }
.ppd-results-eyebrow[b-k0vntte52b] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 9px;
}
.ppd-results-empty[b-k0vntte52b] {
    padding: 22px;
    text-align: center;
    color: var(--ec-muted);
    background: var(--ec-bg);
    border-radius: 11px;
    border: 1px dashed var(--ec-border);
    font-size: 12.5px;
}
.ppd-results-list[b-k0vntte52b] {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

/* Per-question card */
.ppd-result[b-k0vntte52b] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 11px;
    padding: 12px 14px;
}
.ppd-result-head[b-k0vntte52b] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 9px;
}
.ppd-result-num[b-k0vntte52b] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ec-purple);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
}
.ppd-result-q[b-k0vntte52b] {
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-text);
    line-height: 1.4;
    flex: 1;
    margin: 0;
}
.ppd-result-empty[b-k0vntte52b] {
    font-size: 11.5px;
    color: var(--ec-muted);
    font-style: italic;
    margin: 0;
}

/* Option bars */
.ppd-bars[b-k0vntte52b] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.ppd-bar-row[b-k0vntte52b] { width: 100%; }
.ppd-bar-head[b-k0vntte52b] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.ppd-bar-label[b-k0vntte52b] {
    font-size: 11.5px;
    color: var(--ec-text);
    font-weight: 600;
}
.ppd-bar-label--lead[b-k0vntte52b] { font-weight: 800; }
.ppd-bar-meta[b-k0vntte52b] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-muted);
    font-family: ui-monospace, 'SF Mono', monospace;
}
.ppd-bar-track[b-k0vntte52b] {
    height: 7px;
    background: var(--ec-border-soft);
    border-radius: 99px;
    overflow: hidden;
}
.ppd-bar[b-k0vntte52b] {
    height: 100%;
    background: var(--ec-border);
}
.ppd-bar--lead[b-k0vntte52b] { background: var(--ec-purple); }

/* Rating */
.ppd-rating[b-k0vntte52b] {
    display: flex;
    align-items: baseline;
    gap: 9px;
}
.ppd-rating-value[b-k0vntte52b] {
    font-size: 22px;
    font-weight: 800;
    color: var(--ec-amber);
    margin: 0;
}
.ppd-rating-meta[b-k0vntte52b] {
    font-size: 11px;
    color: var(--ec-muted);
    font-weight: 600;
    margin: 0;
}

/* Text answers */
.ppd-texts[b-k0vntte52b] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ppd-text[b-k0vntte52b] {
    padding: 8px 11px;
    background: var(--ec-bg);
    border-left: 3px solid var(--ec-purple);
    border-radius: 7px;
    font-size: 12px;
    color: var(--ec-text);
    font-style: italic;
    line-height: 1.5;
}
.ppd-text-more[b-k0vntte52b] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 0;
}

/* Results-visibility hint card */
.ppd-vis-card[b-k0vntte52b] {
    margin-top: 18px;
    padding: 13px 15px;
    background: var(--ec-bg);
    border-radius: 11px;
    border: 1px dashed var(--ec-border);
}
.ppd-vis-title[b-k0vntte52b] {
    font-size: 11.5px;
    color: var(--ec-muted);
    font-weight: 700;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.ppd-vis-hint[b-k0vntte52b] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 4px 0 0;
    line-height: 1.45;
}
/* /Components/Pages/Parent/ParentPollsPage.razor.rz.scp.css */
/* ParentPollsPage — scoped CSS. Mirrors PWPolls prototype (lines 13771-13872). */

/* ── Header ────────────────────────────────────────────────────── */
.pp-header[b-v2hm6odboo] {
    padding: 22px 28px 0;
    background: var(--ec-bg);
}
.pp-title[b-v2hm6odboo] {
    font-size: 22px;
    font-weight: 800;
    color: var(--ec-text);
    letter-spacing: -0.01em;
    margin: 0;
}
.pp-subtitle[b-v2hm6odboo] {
    font-size: 12.5px;
    color: var(--ec-sub);
    margin: 4px 0 0;
    line-height: 1.5;
}

/* ── Body ──────────────────────────────────────────────────────── */
.pp-body[b-v2hm6odboo] {
    background: var(--ec-bg);
    padding: 0;
    min-height: 100%;
}

/* ── KPIs ──────────────────────────────────────────────────────── */
.pp-kpis[b-v2hm6odboo] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}
.pp-kpi[b-v2hm6odboo] {
    min-height: 96px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.pp-kpi-icon[b-v2hm6odboo] {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent, var(--ec-blue)) 8%, transparent);
    color: var(--accent, var(--ec-blue));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pp-kpi-body[b-v2hm6odboo] { flex: 1; min-width: 0; }
.pp-kpi-value[b-v2hm6odboo] {
    font-size: 22px;
    font-weight: 800;
    color: var(--ec-text);
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 0;
}
.pp-kpi-label[b-v2hm6odboo] {
    font-size: 10px;
    font-weight: 700;
    color: var(--ec-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 6px 0 0;
}
.pp-kpi-sub[b-v2hm6odboo] {
    font-size: 11px;
    color: var(--ec-sub);
    margin: 3px 0 0;
}

/* ── Filter chips ──────────────────────────────────────────────── */
.pp-filters[b-v2hm6odboo] {
    display: flex;
    gap: 5px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.pp-filter[b-v2hm6odboo] {
    background: #fff;
    color: var(--ec-sub);
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.pp-filter--active[b-v2hm6odboo] {
    background: var(--accent, var(--ec-text));
    color: #fff;
    border-color: var(--accent, var(--ec-text));
}
.pp-filter-count[b-v2hm6odboo] {
    font-size: 10px;
    font-weight: 800;
    background: var(--ec-border-soft);
    color: var(--ec-muted);
    padding: 1px 5px;
    border-radius: 4px;
}
.pp-filter--active .pp-filter-count[b-v2hm6odboo] {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

/* Empty state now uses the shared <WebEmpty> atom — see WebApp/CLAUDE.md. */

/* ── Card list ─────────────────────────────────────────────────── */
.pp-list[b-v2hm6odboo] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pp-card[b-v2hm6odboo] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-left: 4px solid var(--stripe, var(--ec-muted));
    border-radius: 12px;
    padding: 13px 16px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    display: flex;
    gap: 14px;
    align-items: center;
}
.pp-card-cover[b-v2hm6odboo] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pp-card-body[b-v2hm6odboo] { flex: 1; min-width: 0; }
.pp-card-pills[b-v2hm6odboo] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.pp-pill[b-v2hm6odboo] {
    font-size: 9px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.06em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.pp-pill--public[b-v2hm6odboo] {
    color: var(--ec-blue);
    background: var(--ec-blue-lt);
}
.pp-pill--anon[b-v2hm6odboo] {
    color: var(--ec-sub);
    background: var(--ec-bg);
}
.pp-pill--closed[b-v2hm6odboo] {
    color: var(--ec-muted);
    background: var(--ec-bg);
}
.pp-pill--answered[b-v2hm6odboo] {
    color: var(--ec-green);
    background: var(--ec-green-lt);
}
.pp-pill--awaiting[b-v2hm6odboo] {
    color: var(--ec-amber);
    background: var(--ec-amber-lt);
}
.pp-card-title[b-v2hm6odboo] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    line-height: 1.3;
    margin: 0;
}
.pp-card-short[b-v2hm6odboo] {
    font-size: 11.5px;
    color: var(--ec-sub);
    margin: 4px 0 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pp-card-meta[b-v2hm6odboo] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 5px 0 0;
}
.pp-card-chev[b-v2hm6odboo] {
    font-size: 18px;
    color: var(--ec-muted);
}
/* /Components/Pages/Parent/ParentProfile.razor.rz.scp.css */
.pp-page[b-7m9dlqujus] { padding: 0; background: var(--ec-bg); min-height: 100%; }

/* ── Hero (purple → pink gradient) ─────────────────────────────────── */
.pp-hero[b-7m9dlqujus] {
    position: relative;
    background: linear-gradient(120deg, var(--ec-purple) 0%, #6b21a8 60%, var(--ec-pink) 130%);
    border-radius: 16px;
    padding: 24px 26px;
    color: #fff;
    margin-bottom: 18px;
    overflow: hidden;
}
.pp-hero-ring[b-7m9dlqujus] {
    position: absolute; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.07);
    pointer-events: none;
}
.pp-hero-ring-1[b-7m9dlqujus] { top: -60px; right: -50px; width: 240px; height: 240px; }
.pp-hero-ring-2[b-7m9dlqujus] { bottom: -80px; right: 60px; width: 180px; height: 180px; }
.pp-hero-row[b-7m9dlqujus] {
    position: relative;
    display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
}

.pp-avatar-wrap[b-7m9dlqujus] { position: relative; flex-shrink: 0; }
.pp-avatar[b-7m9dlqujus] {
    width: 88px; height: 88px; border-radius: 22px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 30px; font-weight: 800;
    letter-spacing: -0.02em;
    border: 3px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
}
.pp-avatar-edit[b-7m9dlqujus] {
    position: absolute; bottom: -2px; right: -2px;
    width: 30px; height: 30px; border-radius: 50%;
    background: #fff;
    border: 2px solid rgba(255, 255, 255, 0.9);
    cursor: pointer; font-family: inherit;
    color: var(--ec-purple);
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    font-size: 12px;
}
.pp-avatar-edit:disabled[b-7m9dlqujus] { opacity: 0.7; cursor: not-allowed; }

.pp-hero-body[b-7m9dlqujus] { flex: 1; min-width: 0; }
.pp-hero-eyebrow[b-7m9dlqujus] {
    font-size: 11px; font-weight: 700;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.12em; text-transform: uppercase;
    margin: 0;
}
.pp-hero-name[b-7m9dlqujus] {
    font-size: 26px; font-weight: 800;
    margin: 5px 0 0;
    letter-spacing: -0.02em; line-height: 1.05;
}
.pp-hero-pills[b-7m9dlqujus] {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-top: 8px;
}
.pp-pill[b-7m9dlqujus] {
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 10px; font-weight: 800;
    color: #fff;
    letter-spacing: 0.06em;
}
.pp-pill--active[b-7m9dlqujus] {
    background: rgba(34, 197, 94, 0.25);
    border-color: rgba(34, 197, 94, 0.4);
}
.pp-hero-meta[b-7m9dlqujus] {
    font-size: 13px; color: rgba(255, 255, 255, 0.85);
    margin: 10px 0 0;
}
.pp-hero-settings[b-7m9dlqujus] {
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 9px;
    padding: 10px 16px;
    color: #fff;
    font-size: 12.5px; font-weight: 700;
    cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 7px;
}
.pp-hero-settings:hover[b-7m9dlqujus] { background: rgba(255, 255, 255, 0.24); }

/* ── Two-column body ──────────────────────────────────────────────── */
.pp-body[b-7m9dlqujus] {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 16px;
    align-items: flex-start;
}
.pp-col[b-7m9dlqujus] { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* ── Section card ─────────────────────────────────────────────────── */
.pp-card[b-7m9dlqujus] {
    background: var(--ec-card);
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    padding: 16px 18px;
}
.pp-card-head[b-7m9dlqujus] {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.pp-card-title[b-7m9dlqujus] {
    font-size: 13.5px; font-weight: 800;
    color: var(--ec-text); margin: 0;
}
.pp-edit-btn[b-7m9dlqujus] {
    background: transparent;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    padding: 6px 11px;
    font-size: 11.5px; font-weight: 700;
    color: var(--ec-blue);
    cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 4px;
}
.pp-edit-btn:disabled[b-7m9dlqujus] { opacity: 0.55; cursor: not-allowed; }

/* ── Personal info / address rows ─────────────────────────────────── */
.pp-row[b-7m9dlqujus] {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--ec-border-soft);
}
.pp-row:last-child[b-7m9dlqujus] { border-bottom: none; }
.pp-row-label[b-7m9dlqujus] {
    font-size: 11px; font-weight: 700;
    color: var(--ec-muted);
    margin: 0;
    align-self: center;
}
.pp-row-value[b-7m9dlqujus] {
    font-size: 13px; font-weight: 600;
    color: var(--ec-text);
    margin: 0; line-height: 1.45;
}
.pp-row-value--multi[b-7m9dlqujus] { white-space: pre-wrap; }

/* ── Inline edit form ─────────────────────────────────────────────── */
.pp-form[b-7m9dlqujus] { display: flex; flex-direction: column; gap: 10px; }
.pp-form-row[b-7m9dlqujus] { display: flex; flex-direction: column; gap: 5px; }
/* Postal + City share a single row — postal is narrower so it doesn't
   eat all the slack from city names. Matches the prototype's
   `${postal} ${city}` rendering shape. */
.pp-form-row--split[b-7m9dlqujus] { flex-direction: row; gap: 10px; }
.pp-form-row--postal[b-7m9dlqujus] { flex: 0 0 130px; }
.pp-form-row--city[b-7m9dlqujus] { flex: 1; min-width: 0; }
.pp-form-label[b-7m9dlqujus] {
    font-size: 11px; font-weight: 700;
    color: var(--ec-muted);
    letter-spacing: 0.06em; text-transform: uppercase;
    margin: 0;
}
.pp-form-input[b-7m9dlqujus],
.pp-form-textarea[b-7m9dlqujus] {
    width: 100%;
    background: var(--ec-blue-gh);
    border: 1px solid transparent;
    border-radius: 9px;
    padding: 9px 12px;
    font-size: 13px;
    color: var(--ec-text);
    font-family: inherit;
    outline: none;
    transition: background .15s, border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
.pp-form-input:focus[b-7m9dlqujus],
.pp-form-textarea:focus[b-7m9dlqujus] {
    background: #fff;
    border-color: var(--ec-blue);
    box-shadow: 0 0 0 3px rgba(59, 95, 192, 0.14);
}
.pp-form-textarea[b-7m9dlqujus] { resize: vertical; min-height: 80px; line-height: 1.5; }
.pp-form-input:disabled[b-7m9dlqujus],
.pp-form-textarea:disabled[b-7m9dlqujus] { opacity: 0.55; cursor: not-allowed; }

.pp-form-readonly[b-7m9dlqujus] {
    display: flex; flex-direction: column; gap: 3px;
    padding: 6px 0 4px;
    border-top: 1px solid var(--ec-border-soft);
    margin: 6px 0 0;
}
.pp-readonly-note[b-7m9dlqujus] {
    font-size: 10px; color: var(--ec-muted); font-weight: 600;
    margin-left: 8px;
}

.pp-form-error[b-7m9dlqujus] {
    display: flex; align-items: center; gap: 8px;
    background: var(--ec-red-lt);
    color: var(--ec-red);
    border: 1px solid rgba(220, 38, 38, 0.22);
    border-radius: 9px;
    padding: 8px 12px;
    font-size: 12px; font-weight: 600;
}

.pp-form-actions[b-7m9dlqujus] {
    display: flex; gap: 8px; justify-content: flex-end;
    padding-top: 4px;
}
.pp-form-cancel[b-7m9dlqujus] {
    background: #fff; border: 1px solid var(--ec-border);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 12.5px; font-weight: 700;
    color: var(--ec-sub);
    cursor: pointer; font-family: inherit;
}
.pp-form-cancel:hover:not(:disabled)[b-7m9dlqujus] { color: var(--ec-text); border-color: var(--ec-muted); }
.pp-form-save[b-7m9dlqujus] {
    background: var(--ec-blue);
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 12.5px; font-weight: 800;
    color: #fff;
    cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 6px;
    box-shadow: 0 4px 12px -4px rgba(41, 68, 160, 0.4);
}
.pp-form-save:hover:not(:disabled)[b-7m9dlqujus] { filter: brightness(1.05); }
.pp-form-cancel:disabled[b-7m9dlqujus],
.pp-form-save:disabled[b-7m9dlqujus] { opacity: 0.55; cursor: not-allowed; }
.pp-form-spinner[b-7m9dlqujus] {
    width: 14px; height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff; border-radius: 50%;
    animation: pp-form-spin-b-7m9dlqujus 0.7s linear infinite;
}
@keyframes pp-form-spin-b-7m9dlqujus { to { transform: rotate(360deg); } }

/* ── Linked-child row ─────────────────────────────────────────────── */
.pp-child-row[b-7m9dlqujus] {
    width: 100%;
    display: flex; align-items: center; gap: 11px;
    padding: 12px 0;
    border-bottom: 1px solid var(--ec-border-soft);
    background: transparent; border-top: none; border-left: none; border-right: none;
    cursor: pointer; font-family: inherit; text-align: left;
}
.pp-child-row:last-child[b-7m9dlqujus] { border-bottom: none; }
.pp-child-row:hover[b-7m9dlqujus] { background: var(--ec-blue-gh); }
.pp-child-avatar[b-7m9dlqujus] {
    width: 42px; height: 42px; border-radius: 50%;
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800;
    flex-shrink: 0;
}
.pp-child-body[b-7m9dlqujus] { flex: 1; min-width: 0; }
.pp-child-name[b-7m9dlqujus] { font-size: 13.5px; font-weight: 800; color: var(--ec-text); margin: 0; }
.pp-child-meta[b-7m9dlqujus] { font-size: 11px; color: var(--ec-muted); margin: 2px 0 0; }
.pp-child-chev[b-7m9dlqujus] { color: var(--ec-muted); font-size: 13px; }

.pp-empty[b-7m9dlqujus] { font-size: 12.5px; color: var(--ec-muted); margin: 0; }

/* ── Security rows ────────────────────────────────────────────────── */
.pp-sec-row[b-7m9dlqujus] {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 0;
    border-bottom: 1px solid var(--ec-border-soft);
}
.pp-sec-row:last-child[b-7m9dlqujus] { border-bottom: none; }
.pp-sec-icon[b-7m9dlqujus] {
    width: 34px; height: 34px; border-radius: 9px;
    background: var(--ec-bg);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; color: var(--ec-sub); font-size: 14px;
}
.pp-sec-body[b-7m9dlqujus] { flex: 1; min-width: 0; }
.pp-sec-label[b-7m9dlqujus] { font-size: 12.5px; font-weight: 700; color: var(--ec-text); margin: 0; }
.pp-sec-sub[b-7m9dlqujus] { font-size: 10.5px; color: var(--ec-muted); margin: 2px 0 0; }
.pp-sec-sub--warn[b-7m9dlqujus] { color: var(--ec-amber); font-weight: 700; }
.pp-sec-cta[b-7m9dlqujus] {
    background: transparent;
    border: 1px solid var(--ec-border);
    border-radius: 7px;
    padding: 5px 10px;
    font-size: 11px; font-weight: 700;
    color: var(--ec-blue);
    cursor: pointer; font-family: inherit;
    text-decoration: none;
}
.pp-sec-cta:disabled[b-7m9dlqujus] { opacity: 0.6; cursor: not-allowed; }
.pp-sec-cta--warn[b-7m9dlqujus] {
    background: var(--ec-amber);
    border-color: var(--ec-amber);
    color: #fff;
    font-weight: 800;
}
.pp-sec-soon[b-7m9dlqujus] {
    font-size: 10px;
    font-weight: 800;
    color: var(--ec-muted);
    background: var(--ec-border-soft);
    padding: 5px 10px;
    border-radius: 6px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* When the avatar is a real photo, hide the initials underlay. */
.pp-avatar--img[b-7m9dlqujus] {
    object-fit: cover;
}

/* ── Sign-out CTA ─────────────────────────────────────────────────── */
.pp-signout[b-7m9dlqujus] {
    width: 100%;
    background: #fff;
    border: 1px solid #fecaca;
    border-radius: 11px;
    padding: 12px;
    font-size: 13px; font-weight: 700;
    color: var(--ec-red);
    cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.pp-signout:hover[b-7m9dlqujus] { background: var(--ec-red-lt); }

@media (max-width: 1000px) {
    .pp-body[b-7m9dlqujus] { grid-template-columns: 1fr; }
    .pp-row[b-7m9dlqujus] { grid-template-columns: 1fr; gap: 2px; }
    .pp-row-label[b-7m9dlqujus] { font-size: 10.5px; }
}
/* /Components/Pages/Parent/ParentProgramsPage.razor.rz.scp.css */
/* ParentProgramsPage — scoped CSS. Mirrors PWPrograms prototype (lines 4240-4490).
   Per-instance accents flow through CSS custom properties:
     --accent     category tint or status color (pills)                                 */

/* ── Header band wrapping the hero ─────────────────────────────── */
/* No side padding — the shell owns the gutter, so the hero aligns with the
   tabs/filters/cards below (was inset an extra 28px). */
.pgm-header-band[b-48jwoom7oq] {
    padding: 0;
    background: var(--ec-bg);
}

/* ── Hero banner ───────────────────────────────────────────────── */
/* Brand-accent hero — same institution gradient as Naps & Meals (.rt-hero) and
   Photo Gallery (.pg-hero); --ec-primary* is set per-institution by MainLayout. */
.pgm-hero[b-48jwoom7oq] {
    background: linear-gradient(120deg, var(--ec-primary) 0%, var(--ec-primary-dk) 60%, var(--ec-primary-dk) 130%);
    border-radius: 16px;
    padding: 22px 26px;
    color: #fff;
    margin-bottom: 18px;
    position: relative;
    overflow: hidden;
}
.pgm-hero-orb[b-48jwoom7oq] {
    position: absolute;
    right: -30px;
    top: -30px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .12);
}
.pgm-hero-inner[b-48jwoom7oq] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.pgm-hero-text[b-48jwoom7oq] { flex: 1 1 320px; }
.pgm-hero-eyebrow[b-48jwoom7oq] {
    font-size: 10.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, .7);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0;
}
.pgm-hero-title[b-48jwoom7oq] {
    font-size: 20px;
    font-weight: 800;
    margin: 4px 0 0;
    letter-spacing: -0.01em;
}
.pgm-hero-subtitle[b-48jwoom7oq] {
    font-size: 12.5px;
    color: rgba(255, 255, 255, .85);
    margin: 6px 0 0;
    line-height: 1.55;
    max-width: 580px;
}
.pgm-hero-kpis[b-48jwoom7oq] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.pgm-hero-kpi[b-48jwoom7oq] {
    padding: 10px 14px;
    background: rgba(255, 255, 255, .16);
    border-radius: 10px;
    min-width: 90px;
}
.pgm-hero-kpi-label[b-48jwoom7oq] {
    font-size: 9px;
    font-weight: 700;
    color: rgba(255, 255, 255, .75);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}
.pgm-hero-kpi-value[b-48jwoom7oq] {
    font-size: 22px;
    font-weight: 800;
    margin: 2px 0 0;
    line-height: 1;
}
.pgm-hero-kpi-trailing[b-48jwoom7oq] {
    font-size: 11px;
    font-weight: 700;
    opacity: 0.75;
}

/* ── Body ──────────────────────────────────────────────────────── */
.pgm-body[b-48jwoom7oq] {
    background: var(--ec-bg);
    padding: 0;
    min-height: 100%;
}

/* ── Tabs ──────────────────────────────────────────────────────── */
.pgm-tabs[b-48jwoom7oq] {
    display: flex;
    gap: 5px;
    border-bottom: 1px solid var(--ec-border);
    margin-bottom: 14px;
}
.pgm-tab[b-48jwoom7oq] {
    padding: 9px 14px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--ec-sub);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    margin-bottom: -1px;
}
.pgm-tab--active[b-48jwoom7oq] {
    border-bottom-color: var(--ec-primary);
    color: var(--ec-primary);
}

/* ── Filter chips ──────────────────────────────────────────────── */
.pgm-filters[b-48jwoom7oq] {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.pgm-filter[b-48jwoom7oq] {
    background: #fff;
    color: var(--ec-sub);
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    padding: 7px 13px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.pgm-filter--active[b-48jwoom7oq] {
    background: var(--ec-blue);
    color: #fff;
    border-color: var(--ec-blue);
}
.pgm-filter-count[b-48jwoom7oq] {
    font-size: 10px;
    font-weight: 800;
    background: var(--ec-border-soft);
    color: var(--ec-muted);
    padding: 1px 7px;
    border-radius: 5px;
}
.pgm-filter--active .pgm-filter-count[b-48jwoom7oq] {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

/* ── Empty states ──────────────────────────────────────────────── */
/* Empty states now use the shared <WebEmpty> atom; only the CTA button remains. */
.pgm-empty-btn[b-48jwoom7oq] {
    padding: 9px 18px;
    background: var(--ec-primary);
    color: #fff;
    border: none;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
}

/* ── Browse grid + cards ───────────────────────────────────────── */
.pgm-grid[b-48jwoom7oq] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.pgm-card[b-48jwoom7oq] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 13px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
}
.pgm-card--registered[b-48jwoom7oq] { border-color: var(--ec-green); }
.pgm-card-badge[b-48jwoom7oq] {
    position: absolute;
    top: 9px;
    right: 9px;
    z-index: 2;
    font-size: 9.5px;
    font-weight: 800;
    color: #fff;
    background: var(--ec-green);
    padding: 3px 9px;
    border-radius: 5px;
    letter-spacing: 0.06em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.pgm-card-cover[b-48jwoom7oq] {
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.pgm-card-cover-img[b-48jwoom7oq] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pgm-card-cover-icon[b-48jwoom7oq] {
    font-size: 38px;
    color: #fff;
}
.pgm-card-flag[b-48jwoom7oq] {
    position: absolute;
    top: 9px;
    font-size: 9.5px;
    font-weight: 800;
    background: rgba(255, 255, 255, .92);
    padding: 3px 9px;
    border-radius: 5px;
    letter-spacing: 0.06em;
}
.pgm-card-flag--free[b-48jwoom7oq] {
    left: 9px;
    color: var(--ec-green);
}
.pgm-card-flag--full[b-48jwoom7oq] {
    right: 9px;
    color: var(--ec-amber);
}
.pgm-card-body[b-48jwoom7oq] { padding: 12px 14px; }
.pgm-card-pills[b-48jwoom7oq] {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
    flex-wrap: wrap;
}
.pgm-card-title[b-48jwoom7oq] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    line-height: 1.3;
    margin: 0;
}
.pgm-card-short[b-48jwoom7oq] {
    font-size: 11px;
    color: var(--ec-sub);
    line-height: 1.5;
    margin: 5px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pgm-card-dates[b-48jwoom7oq] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 7px 0 0;
    font-weight: 600;
}
.pgm-card-foot[b-48jwoom7oq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid var(--ec-border-soft);
}
.pgm-card-meta[b-48jwoom7oq] {
    font-size: 10.5px;
    color: var(--ec-muted);
    font-weight: 700;
    margin: 0;
}

/* ── Pills (category + status) ─────────────────────────────────── */
.pgm-pill[b-48jwoom7oq] {
    font-size: 9.5px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.06em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.pgm-pill--category[b-48jwoom7oq] {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.pgm-pill--status[b-48jwoom7oq] {
    color: #fff;
    background: var(--accent);
    font-size: 9px;
}

/* ── My-registrations list ─────────────────────────────────────── */
.pgm-reg-list[b-48jwoom7oq] {
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.pgm-reg-row[b-48jwoom7oq] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 12px;
    padding: 13px 16px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
}
.pgm-reg-cover[b-48jwoom7oq] {
    width: 54px;
    height: 54px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}
.pgm-reg-cover-img[b-48jwoom7oq] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pgm-reg-cover-icon[b-48jwoom7oq] {
    font-size: 24px;
    color: #fff;
}
.pgm-reg-body[b-48jwoom7oq] { min-width: 0; }
.pgm-reg-head[b-48jwoom7oq] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.pgm-reg-title[b-48jwoom7oq] {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.pgm-reg-child[b-48jwoom7oq] {
    font-size: 11.5px;
    color: var(--ec-sub);
    margin: 3px 0 0;
}
.pgm-reg-dates[b-48jwoom7oq] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 2px 0 0;
}
.pgm-reg-actions[b-48jwoom7oq] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-end;
}
.pgm-reg-btn[b-48jwoom7oq] {
    padding: 5px 11px;
    background: #fff;
    color: var(--ec-text);
    border: 1px solid var(--ec-border);
    border-radius: 7px;
    font-size: 10.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}
/* /Components/Pages/Parent/ParentSettings.razor.rz.scp.css */
.ps-page[b-kyqyp0ni89] { padding: 0; background: var(--ec-bg); min-height: 100%; }

/* ── Toolbar (replaces the inline header) — only carries the "Back to
   profile" pill since the title + subtitle now ship through PageContext
   to the global top bar. Matches admin pages' approach. */
.ps-toolbar[b-kyqyp0ni89] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 14px;
}
.ps-back-btn[b-kyqyp0ni89] {
    background: var(--ec-card);
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    padding: 7px 13px;
    font-size: 12px; font-weight: 700;
    color: var(--ec-sub);
    cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 5px;
}
.ps-back-btn:hover[b-kyqyp0ni89] { color: var(--ec-text); border-color: var(--ec-blue); }

/* ── Two-column body ──────────────────────────────────────────────── */
.ps-body[b-kyqyp0ni89] {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 16px;
    align-items: flex-start;
}
.ps-col[b-kyqyp0ni89] { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* ── Card / section ───────────────────────────────────────────────── */
.ps-card[b-kyqyp0ni89] {
    background: var(--ec-card);
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    padding: 16px 18px;
}
.ps-card-head[b-kyqyp0ni89] { margin-bottom: 12px; }
.ps-card-title[b-kyqyp0ni89] {
    font-size: 13.5px; font-weight: 800;
    color: var(--ec-text); margin: 0;
}

/* ── Row ──────────────────────────────────────────────────────────── */
.ps-row[b-kyqyp0ni89] {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 0;
    border-bottom: 1px solid var(--ec-border-soft);
}
.ps-row:last-child[b-kyqyp0ni89] { border-bottom: none; }
.ps-row-icon[b-kyqyp0ni89] {
    width: 34px; height: 34px; border-radius: 9px;
    background: var(--ec-bg);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; color: var(--ec-sub); font-size: 14px;
}
.ps-row-body[b-kyqyp0ni89] { flex: 1; min-width: 0; }
.ps-row-label[b-kyqyp0ni89] { font-size: 12.5px; font-weight: 700; color: var(--ec-text); margin: 0; }
.ps-row-sub[b-kyqyp0ni89] { font-size: 10.5px; color: var(--ec-muted); margin: 2px 0 0; }
.ps-row-sub--warn[b-kyqyp0ni89] { color: var(--ec-amber); font-weight: 700; }
.ps-row-control[b-kyqyp0ni89] { flex-shrink: 0; }

.ps-row-cta[b-kyqyp0ni89] {
    background: transparent;
    border: 1px solid var(--ec-border);
    border-radius: 7px;
    padding: 5px 10px;
    font-size: 11px; font-weight: 700;
    color: var(--ec-blue);
    cursor: pointer; font-family: inherit;
    text-decoration: none;
}
.ps-row-cta:disabled[b-kyqyp0ni89] { opacity: 0.55; cursor: not-allowed; }
.ps-row-cta--danger[b-kyqyp0ni89] {
    background: transparent;
    border-color: #fecaca;
    color: var(--ec-red);
}

/* ── Sub-header inside Notifications ──────────────────────────────── */
.ps-sub-header[b-kyqyp0ni89] {
    font-size: 10.5px; font-weight: 800; color: var(--ec-muted);
    letter-spacing: 0.1em; text-transform: uppercase;
    margin: 18px 0 6px;
}

/* ── Event-types grid ─────────────────────────────────────────────── */
.ps-events[b-kyqyp0ni89] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}
.ps-event-row[b-kyqyp0ni89] {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 0;
    border-bottom: 1px solid var(--ec-border-soft);
}
.ps-event-icon[b-kyqyp0ni89] {
    width: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ec-sub); font-size: 14px;
}
.ps-event-label[b-kyqyp0ni89] { font-size: 12.5px; font-weight: 600; color: var(--ec-text); flex: 1; margin: 0; }

/* ── Toggle switch ────────────────────────────────────────────────── */
.ps-toggle[b-kyqyp0ni89] {
    width: 42px; height: 24px; border-radius: 12px;
    background: var(--ec-border-soft);
    border: none; cursor: pointer; font-family: inherit;
    position: relative; padding: 0;
    transition: background 0.2s;
}
.ps-toggle--on[b-kyqyp0ni89] { background: var(--ec-green); }
.ps-toggle-knob[b-kyqyp0ni89] {
    position: absolute;
    top: 2px; left: 2px;
    width: 20px; height: 20px; border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: left 0.2s;
}
.ps-toggle--on .ps-toggle-knob[b-kyqyp0ni89] { left: 20px; }

/* ── Segmented control ────────────────────────────────────────────── */
.ps-seg[b-kyqyp0ni89] {
    display: inline-flex; gap: 3px;
    background: var(--ec-bg);
    border-radius: 8px;
    padding: 3px;
}
.ps-seg-btn[b-kyqyp0ni89] {
    padding: 5px 11px;
    border-radius: 6px;
    border: none;
    cursor: pointer; font-family: inherit;
    font-size: 11.5px; font-weight: 700;
    background: transparent;
    color: var(--ec-muted);
}
.ps-seg-btn--active[b-kyqyp0ni89] {
    background: #fff;
    color: var(--ec-text);
    box-shadow: 0 1px 3px rgba(13, 23, 51, 0.08);
}

/* ── Native select ────────────────────────────────────────────────── */
.ps-select[b-kyqyp0ni89] {
    padding: 7px 11px;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    font-size: 12.5px; font-weight: 700;
    color: var(--ec-text);
    font-family: inherit; cursor: pointer;
    background: #fff; outline: none;
}
.ps-select:focus[b-kyqyp0ni89] { border-color: var(--ec-blue); }

@media (max-width: 1000px) {
    .ps-body[b-kyqyp0ni89] { grid-template-columns: 1fr; }
    .ps-events[b-kyqyp0ni89] { grid-template-columns: 1fr; }
}

/* ── Change-password modal — shape modelled on .ut-modal (UserTable's
   delete-confirm dialog) so the chrome is consistent across admin pages
   and this settings dialog. */
.ps-modal-overlay[b-kyqyp0ni89] {
    position: fixed;
    inset: 0;
    background: rgba(30, 50, 86, 0.32);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ps-modal[b-kyqyp0ni89] {
    background: #fff;
    border-radius: 18px;
    padding: 24px 26px;
    width: 100%;
    max-width: 440px;
    margin: 16px;
    box-shadow: 0 24px 64px -12px rgba(30, 50, 86, 0.25);
}
.ps-modal-header[b-kyqyp0ni89] {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 18px;
}
.ps-modal-icon[b-kyqyp0ni89] {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--ec-blue-gh, #f4f6fc);
    color: var(--ec-blue);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.ps-modal-title[b-kyqyp0ni89] { font-size: 15px; font-weight: 800; color: var(--ec-text); margin: 0 0 3px; }
.ps-modal-sub[b-kyqyp0ni89]   { font-size: 12px; color: var(--ec-muted); margin: 0; }
.ps-modal-body[b-kyqyp0ni89] { display: flex; flex-direction: column; gap: 12px; }
.ps-modal-field[b-kyqyp0ni89] { display: flex; flex-direction: column; gap: 5px; }
.ps-modal-label[b-kyqyp0ni89] {
    font-size: 11px; font-weight: 700;
    color: var(--ec-muted);
    letter-spacing: 0.06em; text-transform: uppercase;
    margin: 0;
}
.ps-modal-input[b-kyqyp0ni89] {
    width: 100%;
    background: var(--ec-blue-gh, #f4f6fc);
    border: 1px solid transparent;
    border-radius: 9px;
    padding: 10px 13px;
    font-size: 13.5px;
    color: var(--ec-text);
    font-family: inherit;
    outline: none;
    transition: background .15s, border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
.ps-modal-input:focus[b-kyqyp0ni89] {
    background: #fff;
    border-color: var(--ec-blue);
    box-shadow: 0 0 0 3px rgba(59, 95, 192, 0.14);
}
.ps-modal-input:disabled[b-kyqyp0ni89] { opacity: 0.55; cursor: not-allowed; }

.ps-modal-banner[b-kyqyp0ni89] {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 13px;
    border-radius: 9px;
    font-size: 12px; font-weight: 600;
}
.ps-modal-banner--alert[b-kyqyp0ni89] {
    background: var(--ec-red-lt);
    color: var(--ec-red);
    border: 1px solid rgba(220, 38, 38, 0.22);
}
.ps-modal-banner--ok[b-kyqyp0ni89] {
    background: var(--ec-green-lt);
    color: var(--ec-green);
    border: 1px solid rgba(34, 197, 94, 0.22);
}

.ps-modal-footer[b-kyqyp0ni89] {
    display: flex; gap: 8px; justify-content: flex-end;
    margin-top: 18px;
}
.ps-modal-btn[b-kyqyp0ni89] {
    padding: 9px 16px;
    border-radius: 9px;
    font-size: 12.5px; font-weight: 800;
    cursor: pointer; font-family: inherit;
    border: none;
    display: inline-flex; align-items: center; gap: 6px;
}
.ps-modal-btn:disabled[b-kyqyp0ni89] { opacity: 0.55; cursor: not-allowed; }
.ps-modal-cancel[b-kyqyp0ni89] {
    background: #fff;
    color: var(--ec-sub);
    border: 1px solid var(--ec-border);
    font-weight: 700;
}
.ps-modal-cancel:hover:not(:disabled)[b-kyqyp0ni89] { color: var(--ec-text); border-color: var(--ec-muted); }
.ps-modal-confirm[b-kyqyp0ni89] {
    background: var(--ec-blue);
    color: #fff;
    box-shadow: 0 4px 12px -4px rgba(41, 68, 160, 0.4);
}
.ps-modal-confirm:hover:not(:disabled)[b-kyqyp0ni89] { filter: brightness(1.05); }
.ps-modal-spinner[b-kyqyp0ni89] {
    width: 14px; height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff; border-radius: 50%;
    animation: ps-modal-spin-b-kyqyp0ni89 0.7s linear infinite;
}
@keyframes ps-modal-spin-b-kyqyp0ni89 { to { transform: rotate(360deg); } }
/* /Components/Pages/Parent/PhotoGallery.razor.rz.scp.css */
.pg-page[b-mjqsqti00b] { padding: 0; background: var(--ec-bg); min-height: 100%; }

/* ── Hero (pink → purple) ─────────────────────────────────────────── */
.pg-hero[b-mjqsqti00b] {
    position: relative;
    background: linear-gradient(120deg, var(--ec-primary) 0%, var(--ec-primary-dk) 60%, var(--ec-primary-dk) 130%);
    border-radius: 16px;
    padding: 22px 26px;
    color: #fff;
    margin-bottom: 16px;
    overflow: hidden;
}
.pg-hero-ring[b-mjqsqti00b] {
    position: absolute; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.07);
    pointer-events: none;
}
.pg-hero-ring-1[b-mjqsqti00b] { top: -60px; right: -50px; width: 240px; height: 240px; }
.pg-hero-ring-2[b-mjqsqti00b] { bottom: -80px; right: 60px; width: 180px; height: 180px; }
.pg-hero-row[b-mjqsqti00b] {
    position: relative;
    display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
}
.pg-hero-main[b-mjqsqti00b] { flex: 1 1 320px; min-width: 0; }
.pg-hero-eyebrow[b-mjqsqti00b] {
    font-size: 11px; font-weight: 700;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.12em; text-transform: uppercase;
    margin: 0;
}
.pg-hero-title[b-mjqsqti00b] {
    font-size: 24px; font-weight: 800;
    margin: 5px 0 6px;
    letter-spacing: -0.01em; line-height: 1.1;
}
.pg-hero-sub[b-mjqsqti00b] {
    font-size: 13.5px; color: rgba(255, 255, 255, 0.85);
    line-height: 1.5; max-width: 540px; margin: 0;
}
.pg-hero-sub b[b-mjqsqti00b] { color: #fff; }

.pg-hero-stats[b-mjqsqti00b] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    flex: 1 1 360px; min-width: 0;
}
.pg-stat[b-mjqsqti00b] {
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 11px;
    padding: 11px 13px;
    display: flex; gap: 9px; align-items: flex-start;
}
.pg-stat-icon[b-mjqsqti00b] {
    width: 32px; height: 32px; border-radius: 8px;
    background: rgba(255, 255, 255, 0.18);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 13px;
}
.pg-stat-body[b-mjqsqti00b] { min-width: 0; }
.pg-stat-value[b-mjqsqti00b] {
    font-size: 20px; font-weight: 800; color: #fff;
    line-height: 1; margin: 0;
    font-family: ui-monospace, 'SF Mono', monospace;
}
.pg-stat-label[b-mjqsqti00b] {
    font-size: 10px; font-weight: 800;
    color: rgba(255, 255, 255, 0.78);
    letter-spacing: 0.08em; text-transform: uppercase;
    margin: 5px 0 0;
}
.pg-stat-sub[b-mjqsqti00b] {
    font-size: 10.5px; color: rgba(255, 255, 255, 0.7);
    margin: 2px 0 0;
}

.pg-hero-actions[b-mjqsqti00b] {
    position: relative;
    display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap;
}
.pg-hero-pay[b-mjqsqti00b] {
    background: #fff; border: none; border-radius: 9px;
    padding: 9px 14px;
    color: var(--ec-primary);
    font-size: 12.5px; font-weight: 800;
    cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 7px;
}
.pg-hero-pay:disabled[b-mjqsqti00b] { opacity: 0.75; cursor: not-allowed; }
.pg-hero-ghost[b-mjqsqti00b] {
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 9px;
    padding: 9px 14px;
    color: #fff;
    font-size: 12.5px; font-weight: 700;
    cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 7px;
}
.pg-hero-ghost:disabled[b-mjqsqti00b] { opacity: 0.7; cursor: not-allowed; }

/* ── Filter chips ─────────────────────────────────────────────────── */
.pg-filters[b-mjqsqti00b] {
    display: flex; gap: 8px; flex-wrap: wrap;
    align-items: center;
    margin-bottom: 16px;
}
.pg-filter[b-mjqsqti00b] {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--ec-card);
    border: 1px solid var(--ec-border);
    color: var(--ec-sub);
    border-radius: 9px;
    padding: 7px 13px;
    font-size: 12.5px; font-weight: 700;
    cursor: pointer; font-family: inherit;
    transition: border-color .12s, background .12s, color .12s;
}
.pg-filter:hover[b-mjqsqti00b] { border-color: var(--ec-primary); }
.pg-filter--active[b-mjqsqti00b] {
    background: var(--ec-primary);
    border-color: var(--ec-primary);
    color: #fff;
}
.pg-filter-count[b-mjqsqti00b] {
    font-size: 10px; font-weight: 800;
    background: var(--ec-border-soft);
    color: var(--ec-muted);
    padding: 1px 7px; border-radius: 5px;
}
.pg-filter--active .pg-filter-count[b-mjqsqti00b] {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}
.pg-filters-spacer[b-mjqsqti00b] { flex: 1; }
.pg-filters-hint[b-mjqsqti00b] {
    font-size: 11px; color: var(--ec-muted); font-weight: 600;
    margin: 0;
    display: inline-flex; align-items: center; gap: 5px;
}

/* ── Day cards ────────────────────────────────────────────────────── */
.pg-days[b-mjqsqti00b] { display: flex; flex-direction: column; gap: 16px; }
.pg-day[b-mjqsqti00b] {
    background: var(--ec-card);
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    overflow: hidden;
}
.pg-day-head[b-mjqsqti00b] {
    padding: 14px 20px;
    border-bottom: 1px solid var(--ec-border-soft);
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 12px;
}
.pg-day-head-left[b-mjqsqti00b] {
    display: flex; align-items: center; gap: 9px;
    flex-wrap: wrap;
}
.pg-day-title[b-mjqsqti00b] { font-size: 15px; font-weight: 800; color: var(--ec-text); margin: 0; letter-spacing: -0.005em; }
.pg-day-live[b-mjqsqti00b] {
    background: var(--ec-green-lt); color: var(--ec-green);
    font-size: 9px; font-weight: 800;
    padding: 3px 8px; border-radius: 5px;
    letter-spacing: 0.08em;
}
.pg-day-count[b-mjqsqti00b] {
    background: rgba(214, 54, 119, 0.12);
    color: var(--ec-primary);
    font-size: 9.5px; font-weight: 800;
    padding: 3px 8px; border-radius: 5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pg-day-body[b-mjqsqti00b] { padding: 14px 20px; }
.pg-day-foot[b-mjqsqti00b] {
    padding: 10px 20px 14px;
    border-top: 1px solid var(--ec-border-soft);
    background: rgba(247, 248, 252, 0.5);
    display: flex; justify-content: space-between; align-items: center;
    font-size: 11px; color: var(--ec-muted);
    gap: 12px; flex-wrap: wrap;
}

/* ── Facebook-style photo grid ───────────────────────────────────── */
.pg-grid[b-mjqsqti00b] {
    display: grid;
    gap: 4px;
    border-radius: 10px; overflow: hidden;
    border: 1px solid var(--ec-border-soft);
}
.pg-grid--1[b-mjqsqti00b] { grid-template-columns: 1fr; aspect-ratio: 16 / 10; max-height: 480px; }
.pg-grid--2[b-mjqsqti00b] { grid-template-columns: 1fr 1fr; aspect-ratio: 2 / 1; max-height: 380px; }
.pg-grid--3[b-mjqsqti00b] {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    aspect-ratio: 3 / 2;
    max-height: 420px;
}
.pg-grid--3 .pg-cell:first-child[b-mjqsqti00b] { grid-row: 1 / 3; }
.pg-grid--4[b-mjqsqti00b] {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    aspect-ratio: 1 / 1;
    max-height: 420px;
}
.pg-cell[b-mjqsqti00b] {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: var(--ec-bg);
    border: none;
    padding: 0;
}
.pg-cell img[b-mjqsqti00b] {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .25s;
}
.pg-cell:hover img[b-mjqsqti00b] { transform: scale(1.03); }
.pg-cell-overflow[b-mjqsqti00b] {
    position: absolute; inset: 0;
    background: rgba(13, 23, 51, 0.55);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.6rem; font-weight: 900;
}

/* ── Load-more ───────────────────────────────────────────────────── */
.pg-loadmore[b-mjqsqti00b] {
    margin-top: 16px;
    padding: 18px 22px;
    background: linear-gradient(135deg, var(--ec-bg), #fff);
    border: 1.5px dashed var(--ec-border);
    border-radius: 14px;
    text-align: center;
}
.pg-loadmore-title[b-mjqsqti00b] { font-size: 13px; font-weight: 700; color: var(--ec-text); margin: 0 0 5px; }
.pg-loadmore-sub[b-mjqsqti00b] { font-size: 11.5px; color: var(--ec-muted); margin: 0 0 12px; }
.pg-loadmore-btn[b-mjqsqti00b] {
    background: var(--ec-primary); border: none; border-radius: 9px;
    padding: 9px 18px;
    font-size: 12.5px; font-weight: 800; color: #fff;
    cursor: pointer; font-family: inherit;
}
.pg-loadmore-btn:hover[b-mjqsqti00b] { filter: brightness(1.05); }

/* ── Lightbox ────────────────────────────────────────────────────── */
.pg-lightbox[b-mjqsqti00b] {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: blur(4px);
    z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.pg-lightbox-inner[b-mjqsqti00b] {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    max-width: 100%; max-height: 100%;
}
.pg-lightbox-close[b-mjqsqti00b] {
    position: absolute; top: 0; right: 0;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    width: 40px; height: 40px; border-radius: 50%;
    cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
    z-index: 2;
}
.pg-lightbox-close:hover[b-mjqsqti00b] { background: rgba(255, 255, 255, 0.22); }
.pg-lightbox-img[b-mjqsqti00b] {
    max-width: 92vw; max-height: 78vh;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}
.pg-lightbox-caption[b-mjqsqti00b] {
    margin-top: 12px;
    font-size: 13px; color: #fff;
    text-align: center; max-width: 720px;
}
.pg-lightbox-meta[b-mjqsqti00b] {
    margin-top: 6px;
    font-size: 11px; color: rgba(255, 255, 255, 0.65);
}

@media (max-width: 720px) {
    .pg-hero-stats[b-mjqsqti00b] { grid-template-columns: 1fr; }
    .pg-grid--3[b-mjqsqti00b] { grid-template-columns: 1fr; grid-template-rows: none; aspect-ratio: auto; }
    .pg-grid--3 .pg-cell:first-child[b-mjqsqti00b] { grid-row: auto; }
}
/* /Components/Pages/Parent/ProgramRegisterModal.razor.rz.scp.css */
/* ProgramRegisterModal — scoped CSS for the in-app register modal.
   Right-side slide-over (matches the documents pattern). Two-step wizard with
   a thin progress bar inside. */

.prm-overlay[b-m58pxohfux] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .5);
    z-index: 1100;
    display: flex;
    justify-content: flex-end;
    animation: prm-fade-b-m58pxohfux .15s ease;
}
@keyframes prm-fade-b-m58pxohfux { from { opacity: 0; } to { opacity: 1; } }

.prm-modal[b-m58pxohfux] {
    width: min(560px, 96%);
    height: 100%;
    background: #fff;
    box-shadow: -12px 0 40px rgba(13, 23, 51, .16);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: prm-slide-b-m58pxohfux .22s ease-out;
}
@keyframes prm-slide-b-m58pxohfux { from { transform: translateX(24px); opacity: .4; } to { transform: translateX(0); opacity: 1; } }

/* ── Header ─────────────────────────────────────────────────── */
.prm-head[b-m58pxohfux] {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 16px 18px;
    border-bottom: 1px solid var(--ec-border-soft);
}
.prm-head-cover[b-m58pxohfux] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
}
.prm-head-cover i[b-m58pxohfux] { color: #fff; font-size: 24px; }
.prm-head-body[b-m58pxohfux] { min-width: 0; }
.prm-head-eyebrow[b-m58pxohfux] {
    font-size: 10px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}
.prm-head-title[b-m58pxohfux] {
    font-size: 15px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 2px 0 0;
    line-height: 1.3;
}
.prm-close[b-m58pxohfux] {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #fff;
    border: 1px solid var(--ec-border);
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Progress bar ───────────────────────────────────────────── */
.prm-progress[b-m58pxohfux] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 12px 18px 0;
}
.prm-progress-bar[b-m58pxohfux] {
    height: 4px;
    border-radius: 3px;
    background: var(--ec-border-soft);
}
.prm-progress-bar--filled[b-m58pxohfux] { background: var(--ec-purple); }

/* ── Body ───────────────────────────────────────────────────── */
.prm-body[b-m58pxohfux] {
    padding: 16px 18px 18px;
    overflow-y: auto;
    flex: 1;
}
.prm-section-label[b-m58pxohfux] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 10px;
}

/* ── Mode toggle (My child / Other) ─────────────────────────── */
.prm-mode-toggle[b-m58pxohfux] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}
.prm-mode[b-m58pxohfux] {
    padding: 10px 14px;
    background: #fff;
    color: var(--ec-sub);
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
}
.prm-mode--active[b-m58pxohfux] {
    background: var(--ec-purple-lt);
    color: var(--ec-purple);
    border-color: var(--ec-purple);
}

/* ── Pick list (existing children) ──────────────────────────── */
.prm-pick-list[b-m58pxohfux] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 12px;
}
.prm-pick[b-m58pxohfux] {
    display: grid;
    grid-template-columns: 38px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}
.prm-pick--selected[b-m58pxohfux] {
    background: var(--ec-green-lt);
    border-color: var(--ec-green);
}
.prm-pick-avatar[b-m58pxohfux] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--ec-blue-lt);
    color: var(--ec-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
}
.prm-pick-body[b-m58pxohfux] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prm-pick-name[b-m58pxohfux] {
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-text);
}
.prm-pick-meta[b-m58pxohfux] {
    font-size: 11px;
    color: var(--ec-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.prm-pick-warn[b-m58pxohfux] {
    font-size: 9px;
    font-weight: 800;
    color: var(--ec-amber);
    background: var(--ec-amber-lt);
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.prm-pick-empty[b-m58pxohfux] {
    padding: 18px 14px;
    text-align: center;
    background: var(--ec-bg);
    border: 1px dashed var(--ec-border);
    border-radius: 10px;
    color: var(--ec-muted);
    font-size: 12px;
    margin-bottom: 12px;
}

/* ── Manual entry ───────────────────────────────────────────── */
.prm-manual[b-m58pxohfux] {
    display: grid;
    grid-template-columns: 1fr 100px;
    gap: 10px;
    margin-bottom: 12px;
}
.prm-field[b-m58pxohfux] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}
.prm-field-label[b-m58pxohfux] {
    font-size: 11px;
    font-weight: 700;
    color: var(--ec-text);
}
.prm-field input[b-m58pxohfux],
.prm-field textarea[b-m58pxohfux] {
    padding: 8px 11px;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    font-size: 12.5px;
    font-family: inherit;
    background: #fff;
    color: var(--ec-text);
    outline: none;
    resize: vertical;
}
.prm-field--age[b-m58pxohfux] { margin-bottom: 0; }

/* ── Step 2: summary card ───────────────────────────────────── */
.prm-summary[b-m58pxohfux] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
    padding: 13px 15px;
    background: var(--ec-bg);
    border-radius: 11px;
    margin-bottom: 14px;
}
.prm-summary-label[b-m58pxohfux] {
    font-size: 10px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}
.prm-summary-value[b-m58pxohfux] {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 4px 0 0;
    line-height: 1.4;
}
.prm-summary-sub[b-m58pxohfux] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--ec-muted);
    margin-top: 2px;
}

/* ── Consents ───────────────────────────────────────────────── */
.prm-consent[b-m58pxohfux] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 9px;
    align-items: flex-start;
    margin-bottom: 9px;
    cursor: pointer;
}
.prm-consent input[type="checkbox"][b-m58pxohfux] {
    width: 16px;
    height: 16px;
    accent-color: var(--ec-purple);
    margin-top: 2px;
}
.prm-consent-text[b-m58pxohfux] {
    font-size: 11.5px;
    color: var(--ec-text);
    line-height: 1.5;
}
.prm-consent-required[b-m58pxohfux] {
    color: var(--ec-red);
    font-weight: 800;
    margin-left: 2px;
}

.prm-error[b-m58pxohfux] {
    margin-top: 10px;
    padding: 8px 11px;
    background: var(--ec-red-lt);
    border-left: 3px solid var(--ec-red);
    border-radius: 7px;
    font-size: 11.5px;
    color: var(--ec-red);
}

/* ── Footer ─────────────────────────────────────────────────── */
.prm-foot[b-m58pxohfux] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 14px 18px;
    border-top: 1px solid var(--ec-border-soft);
    background: #fff;
}
.prm-btn[b-m58pxohfux] {
    padding: 9px 16px;
    font-size: 12.5px;
    font-weight: 800;
    border-radius: 9px;
    cursor: pointer;
    font-family: inherit;
    border: 1px solid var(--ec-border);
}
.prm-btn--cancel[b-m58pxohfux] {
    background: #fff;
    color: var(--ec-text);
}
.prm-btn--primary[b-m58pxohfux] {
    background: var(--ec-primary);
    color: #fff;
    border-color: var(--ec-primary);
}
.prm-btn--confirm[b-m58pxohfux] {
    background: var(--ec-green);
    color: #fff;
    border-color: var(--ec-green);
}
.prm-btn:disabled[b-m58pxohfux] {
    opacity: 0.55;
    cursor: not-allowed;
}
/* /Components/Pages/Parent/ReportAbsenceSheet.razor.rz.scp.css */
/* Report-absence slide-over — port of MarkAbsentModal (prototype 7625-7837).
   Orange-accented right-side sheet. Overlay/panel pattern mirrors
   AnnouncementDetailSheet (.ads-*). */

.ras-overlay[b-ytj4tr2lex] {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    display: flex; justify-content: flex-end;
    z-index: 1500;
    animation: ras-fade-b-ytj4tr2lex .18s ease;
}
@keyframes ras-fade-b-ytj4tr2lex { from { opacity: 0; } to { opacity: 1; } }

.ras-panel[b-ytj4tr2lex] {
    width: min(560px, 96%);
    height: 100%;
    background: #fff;
    box-shadow: -12px 0 40px rgba(13, 23, 51, 0.18);
    display: flex; flex-direction: column;
    position: relative;
    overflow: hidden;
    animation: ras-slide-b-ytj4tr2lex .22s ease-out;
}
@keyframes ras-slide-b-ytj4tr2lex { from { transform: translateX(20px); opacity: 0.5; } to { transform: translateX(0); opacity: 1; } }

.ras-topbar[b-ytj4tr2lex] {
    height: 3px;
    background: var(--ec-orange);
    flex-shrink: 0;
}

/* ── Header ──────────────────────────────────────────────────────── */
.ras-head[b-ytj4tr2lex] {
    padding: 16px 22px 14px;
    border-bottom: 1px solid var(--ec-border);
    flex-shrink: 0;
    background: linear-gradient(135deg, color-mix(in oklab, var(--ec-orange-lt) 50%, #fff), #fff);
    display: flex; align-items: center; gap: 13px;
}
.ras-tile[b-ytj4tr2lex] {
    width: 46px; height: 46px; border-radius: 12px;
    background: #fff;
    border: 1px solid #fde68a;
    color: var(--ec-orange);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.ras-head-id[b-ytj4tr2lex] { flex: 1; min-width: 0; }
.ras-eyebrow[b-ytj4tr2lex] {
    font-size: 10.5px; font-weight: 800;
    color: var(--ec-orange);
    letter-spacing: 0.12em; text-transform: uppercase;
    margin: 0;
}
.ras-title[b-ytj4tr2lex] {
    font-size: 17px; font-weight: 800;
    color: var(--ec-text);
    margin: 2px 0 0;
    letter-spacing: -0.01em;
}
.ras-sub[b-ytj4tr2lex] {
    font-size: 12px; color: var(--ec-sub);
    margin: 2px 0 0;
}
.ras-close[b-ytj4tr2lex] {
    width: 32px; height: 32px; border-radius: 8px;
    background: #fff;
    border: 1px solid var(--ec-border);
    cursor: pointer; font-family: inherit;
    font-size: 13px; color: var(--ec-sub);
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .12s, color .12s, border-color .12s;
}
.ras-close:hover[b-ytj4tr2lex] { background: var(--ec-bg); color: var(--ec-text); border-color: var(--ec-muted); }

/* ── Body ────────────────────────────────────────────────────────── */
.ras-body[b-ytj4tr2lex] {
    flex: 1; overflow-y: auto;
    padding: 18px 22px;
    background: #fff;
}
.ras-section[b-ytj4tr2lex] {
    font-size: 10.5px; font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.1em; text-transform: uppercase;
    margin: 0 0 9px;
}
.ras-section--sp[b-ytj4tr2lex] { margin-top: 14px; }
.ras-optional[b-ytj4tr2lex] { color: var(--ec-muted); font-weight: 600; }
.ras-required[b-ytj4tr2lex] { color: var(--ec-red); font-weight: 800; }
.ras-required-l[b-ytj4tr2lex] { color: var(--ec-red); font-weight: 700; }

/* ── Duration toggle ── */
.ras-duration[b-ytj4tr2lex] {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px;
    margin-bottom: 18px;
}
.ras-dur[b-ytj4tr2lex] {
    background: #fff;
    color: var(--ec-text);
    border: 1.5px solid var(--ec-border);
    border-radius: 11px;
    padding: 11px; cursor: pointer; font-family: inherit; text-align: center;
    transition: all .12s;
}
.ras-dur:hover:not(.ras-dur--active)[b-ytj4tr2lex] { border-color: var(--ec-faint); }
.ras-dur--active[b-ytj4tr2lex] {
    background: var(--ec-blue);
    color: #fff;
    border-color: var(--ec-blue);
}
.ras-dur-l[b-ytj4tr2lex] { font-size: 12.5px; font-weight: 800; margin: 0; }
.ras-dur-sub[b-ytj4tr2lex] { font-size: 10.5px; font-weight: 600; margin: 3px 0 0; opacity: 0.7; }
.ras-dur--active .ras-dur-sub[b-ytj4tr2lex] { opacity: 0.85; }

/* ── Range pickers ── */
.ras-range[b-ytj4tr2lex] {
    background: var(--ec-blue-gh);
    border: 1px solid var(--ec-border);
    border-radius: 11px;
    padding: 12px 13px;
    margin-bottom: 18px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    align-items: end;
}
.ras-range-l[b-ytj4tr2lex] {
    font-size: 10px; font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em; text-transform: uppercase;
    margin: 0 0 5px;
}
.ras-range-input[b-ytj4tr2lex] {
    width: 100%;
    padding: 9px 11px;
    border: 1.5px solid var(--ec-border);
    border-radius: 9px;
    font-size: 12.5px; color: var(--ec-text); font-family: inherit;
    outline: none; background: #fff; box-sizing: border-box;
}
.ras-range-input:focus[b-ytj4tr2lex] { border-color: var(--ec-blue); }
.ras-range-input--err[b-ytj4tr2lex] { border-color: var(--ec-red); }
.ras-range-err[b-ytj4tr2lex] {
    grid-column: 1 / -1;
    font-size: 10.5px; font-weight: 700; color: var(--ec-red);
    margin: -4px 0 0;
}
.ras-range-cap[b-ytj4tr2lex] {
    grid-column: 1 / -1;
    font-size: 11px; color: var(--ec-sub);
    margin: -2px 0 0;
}

/* ── Reason cards ── */
.ras-reasons[b-ytj4tr2lex] {
    display: flex; flex-direction: column; gap: 6px;
    margin-bottom: 18px;
}
.ras-reason[b-ytj4tr2lex] {
    background: #fff;
    border: 1.5px solid var(--ec-border);
    border-radius: 11px;
    padding: 11px 14px; cursor: pointer; font-family: inherit; text-align: left;
    display: flex; align-items: center; gap: 11px;
    transition: all .12s;
}
.ras-reason:hover[b-ytj4tr2lex] { border-color: var(--ec-faint); }
.ras-reason--sel[b-ytj4tr2lex] {
    background: var(--ec-blue-gh);
    border-color: var(--ec-blue);
}
.ras-reason-ic[b-ytj4tr2lex] {
    width: 34px; height: 34px; border-radius: 9px;
    background: var(--ec-bg);
    color: var(--ec-sub);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
}
.ras-reason--sel .ras-reason-ic[b-ytj4tr2lex] {
    background: #fff;
    color: var(--ec-blue);
    border: 1px solid var(--ec-blue-lt);
}
.ras-reason-body[b-ytj4tr2lex] { flex: 1; min-width: 0; }
.ras-reason-l[b-ytj4tr2lex] { font-size: 13px; font-weight: 800; color: var(--ec-text); margin: 0; }
.ras-reason--sel .ras-reason-l[b-ytj4tr2lex] { color: var(--ec-blue); }
.ras-reason-hint[b-ytj4tr2lex] { font-size: 11px; color: var(--ec-muted); margin: 2px 0 0; }
.ras-reason-check[b-ytj4tr2lex] {
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--ec-blue);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* ── Notes ── */
.ras-textarea[b-ytj4tr2lex] {
    width: 100%; resize: vertical;
    border: 1.5px solid var(--ec-border);
    border-radius: 11px;
    padding: 11px 14px;
    font-size: 13px; color: var(--ec-text); line-height: 1.5;
    background: #fff; outline: none; font-family: inherit;
    transition: border-color .12s;
    box-sizing: border-box;
}
.ras-textarea:focus[b-ytj4tr2lex] { border-color: var(--ec-blue); }

/* ── Attachment ── */
.ras-attach[b-ytj4tr2lex] {
    width: 100%;
    background: var(--ec-bg);
    border: 1.5px dashed var(--ec-border);
    border-radius: 11px;
    padding: 14px; cursor: pointer; font-family: inherit;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 12.5px; font-weight: 700; color: var(--ec-sub);
    transition: border-color .12s, background .12s;
    position: relative;
}
.ras-attach:hover[b-ytj4tr2lex] { border-color: var(--ec-faint); background: var(--ec-border-soft); }
.ras-attach--busy[b-ytj4tr2lex] { cursor: progress; }
.ras-attach :deep(input[type=file])[b-ytj4tr2lex] {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    opacity: 0; cursor: pointer;
}
.ras-attach--busy :deep(input[type=file])[b-ytj4tr2lex] { cursor: progress; }

.ras-attach-chip[b-ytj4tr2lex] {
    background: var(--ec-green-lt);
    border: 1.5px solid #bbf7d0;
    border-radius: 11px;
    padding: 10px 13px;
    display: flex; align-items: center; gap: 11px;
}
.ras-attach-chip-ic[b-ytj4tr2lex] {
    width: 32px; height: 32px; border-radius: 8px;
    background: #fff; border: 1px solid #bbf7d0;
    color: var(--ec-green);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; flex-shrink: 0;
}
.ras-attach-chip-body[b-ytj4tr2lex] { flex: 1; min-width: 0; }
.ras-attach-chip-name[b-ytj4tr2lex] {
    font-size: 12.5px; font-weight: 700; color: var(--ec-text); margin: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ras-attach-chip-sub[b-ytj4tr2lex] { font-size: 10.5px; color: var(--ec-muted); margin: 1px 0 0; }
.ras-attach-chip-x[b-ytj4tr2lex] {
    background: none; border: none; color: var(--ec-muted);
    cursor: pointer; font-size: 13px; font-family: inherit;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 2px;
}
.ras-attach-chip-x:hover[b-ytj4tr2lex] { color: var(--ec-text); }

/* ── Inline error ── */
.ras-error[b-ytj4tr2lex] {
    margin-top: 12px;
    display: flex; align-items: center; gap: 8px;
    background: color-mix(in srgb, var(--ec-red) 8%, #fff);
    border: 1px solid color-mix(in srgb, var(--ec-red) 30%, transparent);
    border-radius: 10px;
    padding: 10px 13px;
    font-size: 12px; font-weight: 600; color: var(--ec-red);
}

/* ── Footer ──────────────────────────────────────────────────────── */
.ras-foot[b-ytj4tr2lex] {
    padding: 14px 26px;
    border-top: 1px solid var(--ec-border);
    background: #fff;
    display: flex; gap: 10px; align-items: center;
    flex-shrink: 0;
}
.ras-foot-note[b-ytj4tr2lex] {
    font-size: 11px; color: var(--ec-muted);
    flex: 1; line-height: 1.5; margin: 0;
}
.ras-cancel[b-ytj4tr2lex] {
    background: #fff; border: 1px solid var(--ec-border); border-radius: 9px;
    padding: 10px 16px; font-size: 13px; font-weight: 700; color: var(--ec-sub);
    cursor: pointer; font-family: inherit;
    transition: background .12s, border-color .12s;
}
.ras-cancel:hover[b-ytj4tr2lex] { background: var(--ec-bg); border-color: var(--ec-muted); }
.ras-submit[b-ytj4tr2lex] {
    background: var(--ec-orange);
    color: #fff;
    border: none; border-radius: 9px;
    padding: 10px 18px;
    font-size: 13px; font-weight: 800;
    cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 7px;
    transition: filter .12s, transform .12s;
}
.ras-submit:hover:not(:disabled)[b-ytj4tr2lex] { filter: brightness(1.05); transform: translateY(-1px); }
.ras-submit:disabled[b-ytj4tr2lex] { opacity: 0.65; cursor: not-allowed; }

/* ── Spinner ── */
.ras-spinner[b-ytj4tr2lex] {
    width: 14px; height: 14px;
    border: 2px solid rgba(15, 23, 42, 0.2);
    border-top-color: var(--ec-sub);
    border-radius: 50%;
    animation: ras-spin-b-ytj4tr2lex .7s linear infinite;
}
.ras-spinner--light[b-ytj4tr2lex] {
    border-color: rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
}
@keyframes ras-spin-b-ytj4tr2lex { to { transform: rotate(360deg); } }
/* /Components/Pages/Parent/SubjectDetailSheet.razor.rz.scp.css */
/* ── Overlay + panel shell ───────────────────────────────────────── */
.sds-overlay[b-ubi07c4i8c] {
    position: fixed; inset: 0;
    background: rgba(13, 23, 51, 0.42);
    backdrop-filter: blur(2px);
    display: flex; justify-content: flex-end;
    z-index: 1500;
    animation: sds-fade-b-ubi07c4i8c .18s ease;
}
@keyframes sds-fade-b-ubi07c4i8c { from { opacity: 0; } to { opacity: 1; } }

.sds-panel[b-ubi07c4i8c] {
    width: min(560px, 92%);
    height: 100%;
    background: #fff;
    box-shadow: -12px 0 40px rgba(13, 23, 51, 0.16);
    display: flex; flex-direction: column;
    position: relative;
    overflow: hidden;
    animation: sds-slide-b-ubi07c4i8c .25s ease;
}
@keyframes sds-slide-b-ubi07c4i8c { from { transform: translateX(20px); opacity: 0.5; } to { transform: translateX(0); opacity: 1; } }

.sds-close[b-ubi07c4i8c] {
    position: absolute; top: 14px; right: 14px; z-index: 5;
    width: 34px; height: 34px; border-radius: 10px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
    border: 1px solid var(--ec-border);
    cursor: pointer; font-family: inherit;
    font-size: 14px; color: var(--ec-sub);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .12s, color .12s, border-color .12s;
}
.sds-close:hover[b-ubi07c4i8c] {
    background: var(--ec-bg);
    color: var(--ec-text);
    border-color: var(--ec-muted);
}

/* ── Header ──────────────────────────────────────────────────────── */
.sds-head[b-ubi07c4i8c] {
    padding: 22px 26px 20px;
    border-bottom: 1px solid var(--ec-border);
    background: linear-gradient(135deg,
        color-mix(in oklab, var(--subj-color) 14%, #fff) 0%,
        color-mix(in oklab, var(--subj-color) 6%, #fff) 60%,
        #fff 100%);
}
.sds-head-row[b-ubi07c4i8c] {
    display: flex; align-items: flex-start; gap: 14px;
    padding-right: 48px;
}
.sds-tile[b-ubi07c4i8c] {
    width: 54px; height: 54px; border-radius: 14px;
    background: color-mix(in oklab, var(--subj-color) 18%, transparent);
    color: var(--subj-color);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    box-shadow: 0 4px 14px color-mix(in oklab, var(--subj-color) 22%, transparent);
}
.sds-head-id[b-ubi07c4i8c] { flex: 1; min-width: 0; }
.sds-eyebrow[b-ubi07c4i8c] {
    font-size: 10.5px; font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.12em; text-transform: uppercase;
    margin: 0;
}
.sds-title[b-ubi07c4i8c] {
    font-size: 22px; font-weight: 800;
    color: var(--ec-text);
    margin: 3px 0 0;
    letter-spacing: -0.01em;
}
.sds-teacher[b-ubi07c4i8c] {
    font-size: 13px; color: var(--ec-sub);
    margin: 3px 0 0;
}

/* Big-number + stats row */
.sds-stats-row[b-ubi07c4i8c] {
    display: flex; align-items: flex-end; gap: 18px;
    margin-top: 18px;
}
.sds-hero-grade[b-ubi07c4i8c] { flex-shrink: 0; }
.sds-hero-line[b-ubi07c4i8c] { display: flex; align-items: baseline; gap: 8px; }
.sds-hero-value[b-ubi07c4i8c] {
    font-size: 42px; font-weight: 800;
    color: var(--ec-text);
    line-height: 0.95; letter-spacing: -0.03em;
}
.sds-trend-pill[b-ubi07c4i8c] {
    padding: 3px 8px; border-radius: 6px;
    font-size: 11px; font-weight: 800;
    white-space: nowrap;
}
.sds-trend-up[b-ubi07c4i8c] { background: var(--ec-green-lt); color: var(--ec-green); }
.sds-trend-down[b-ubi07c4i8c] { background: var(--ec-red-lt); color: var(--ec-red); }
.sds-trend-flat[b-ubi07c4i8c] { background: var(--ec-bg); color: var(--ec-muted); }
.sds-hero-label[b-ubi07c4i8c] {
    font-size: 10px; font-weight: 700;
    color: var(--ec-muted);
    letter-spacing: 0.1em; text-transform: uppercase;
    margin: 6px 0 0;
}

.sds-mini-grid[b-ubi07c4i8c] {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.sds-mini[b-ubi07c4i8c] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 10px;
    padding: 9px 11px;
}
.sds-mini-label[b-ubi07c4i8c] {
    font-size: 9px; font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.1em; text-transform: uppercase;
    margin: 0;
}
.sds-mini-value[b-ubi07c4i8c] {
    font-size: 16px; font-weight: 800;
    color: var(--ec-text);
    margin: 3px 0 0; line-height: 1;
}
.sds-mini-value--ok[b-ubi07c4i8c]    { color: var(--ec-green); }
.sds-mini-value--alert[b-ubi07c4i8c] { color: var(--ec-red); }
.sds-mini-sub[b-ubi07c4i8c] {
    font-size: 10px; color: var(--ec-muted);
    margin: 4px 0 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Tabs ────────────────────────────────────────────────────────── */
.sds-tabs[b-ubi07c4i8c] {
    display: flex;
    border-bottom: 1px solid var(--ec-border);
    padding: 0 16px;
    background: #fff;
}
.sds-tab[b-ubi07c4i8c] {
    padding: 13px 14px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer; font-family: inherit;
    font-size: 13px; font-weight: 700;
    color: var(--ec-muted);
    margin-bottom: -1px;
    display: inline-flex; align-items: center; gap: 7px;
}
.sds-tab:hover[b-ubi07c4i8c] { color: var(--ec-text); }
.sds-tab--active[b-ubi07c4i8c] {
    color: var(--subj-color);
    border-bottom-color: var(--subj-color);
}
.sds-tab-count[b-ubi07c4i8c] {
    font-size: 10px; font-weight: 800;
    background: var(--ec-border-soft);
    color: var(--ec-muted);
    padding: 1px 6px; border-radius: 5px;
}
.sds-tab--active .sds-tab-count[b-ubi07c4i8c] {
    background: color-mix(in oklab, var(--subj-color) 14%, transparent);
    color: var(--subj-color);
}

/* ── Body ────────────────────────────────────────────────────────── */
.sds-body[b-ubi07c4i8c] {
    flex: 1; overflow-y: auto;
    padding: 18px 24px;
    background: var(--ec-bg);
    display: flex; flex-direction: column; gap: 10px;
}

/* Grades list */
.sds-grade-list[b-ubi07c4i8c] { display: flex; flex-direction: column; gap: 10px; }
.sds-grade-card[b-ubi07c4i8c] {
    background: #fff;
    border: 1.5px solid var(--ec-border);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex; gap: 14px; align-items: flex-start;
}
.sds-grade-chip[b-ubi07c4i8c] {
    min-width: 46px; height: 46px; border-radius: 11px;
    padding: 0 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 800;
    border: 1px solid;
    flex-shrink: 0;
}
.sds-tone-ok    .sds-grade-chip[b-ubi07c4i8c] { background: rgba(22, 163, 74, 0.10); color: var(--ec-green);  border-color: rgba(22, 163, 74, 0.30); }
.sds-tone-info  .sds-grade-chip[b-ubi07c4i8c] { background: rgba(59, 95, 192, 0.10); color: var(--ec-blue);   border-color: rgba(59, 95, 192, 0.30); }
.sds-tone-warn  .sds-grade-chip[b-ubi07c4i8c] { background: rgba(217, 119, 6, 0.10); color: var(--ec-amber);  border-color: rgba(217, 119, 6, 0.30); }
.sds-tone-alert .sds-grade-chip[b-ubi07c4i8c] { background: rgba(220, 38, 38, 0.10); color: var(--ec-red);    border-color: rgba(220, 38, 38, 0.30); }
.sds-grade-body[b-ubi07c4i8c] { flex: 1; min-width: 0; }
.sds-grade-head[b-ubi07c4i8c] {
    display: flex; justify-content: space-between; gap: 10px;
    align-items: flex-start;
}
.sds-grade-titles[b-ubi07c4i8c] { min-width: 0; }
.sds-grade-title[b-ubi07c4i8c] { font-size: 13.5px; font-weight: 800; color: var(--ec-text); line-height: 1.3; margin: 0; }
.sds-grade-meta[b-ubi07c4i8c] { font-size: 11px; color: var(--ec-muted); margin: 3px 0 0; }
.sds-quality-pill[b-ubi07c4i8c] {
    font-size: 9.5px; font-weight: 800;
    padding: 3px 7px; border-radius: 5px;
    letter-spacing: 0.06em; text-transform: uppercase;
    white-space: nowrap; flex-shrink: 0;
    background: var(--ec-bg); color: var(--ec-sub);
}
.sds-tone-ok    .sds-quality-pill[b-ubi07c4i8c] { background: rgba(22, 163, 74, 0.12); color: var(--ec-green); }
.sds-tone-info  .sds-quality-pill[b-ubi07c4i8c] { background: rgba(59, 95, 192, 0.12); color: var(--ec-blue); }
.sds-tone-warn  .sds-quality-pill[b-ubi07c4i8c] { background: rgba(217, 119, 6, 0.12); color: var(--ec-amber); }
.sds-tone-alert .sds-quality-pill[b-ubi07c4i8c] { background: rgba(220, 38, 38, 0.12); color: var(--ec-red); }

/* ── Attendance card ─────────────────────────────────────────────── */
.sds-att-card[b-ubi07c4i8c] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 12px;
    display: flex; align-items: center; gap: 18px;
}
.sds-ring[b-ubi07c4i8c] {
    width: 64px; height: 64px; border-radius: 50%;
    background: conic-gradient(var(--ring-color) 0 var(--pct), var(--ec-border-soft) var(--pct) 100%);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.sds-ring-inner[b-ubi07c4i8c] {
    width: 50px; height: 50px; border-radius: 50%;
    background: #fff;
    display: inline-flex; align-items: center; justify-content: center;
}
.sds-ring-value[b-ubi07c4i8c] { font-size: 14px; font-weight: 800; color: var(--ring-color); }
.sds-att-body[b-ubi07c4i8c] { flex: 1; min-width: 0; }
.sds-att-title[b-ubi07c4i8c] { font-size: 14px; font-weight: 800; color: var(--ec-text); margin: 0; }
.sds-att-sub[b-ubi07c4i8c] { font-size: 12px; color: var(--ec-muted); margin: 3px 0 0; }
.sds-abs-pills[b-ubi07c4i8c] { display: flex; gap: 8px; margin-top: 8px; }
.sds-abs-pill[b-ubi07c4i8c] {
    font-size: 10px; font-weight: 800;
    padding: 3px 8px; border-radius: 5px;
    letter-spacing: 0.05em;
}
.sds-abs-pill--warn[b-ubi07c4i8c]  { background: var(--ec-amber-lt); color: var(--ec-amber); }
.sds-abs-pill--alert[b-ubi07c4i8c] { background: var(--ec-red-lt);   color: var(--ec-red); }

.sds-att-clean[b-ubi07c4i8c] {
    background: linear-gradient(135deg, var(--ec-green-lt), #fff);
    border: 1px solid rgba(22, 163, 74, 0.25);
    border-radius: 10px;
    padding: 14px 18px;
    display: flex; align-items: center; gap: 11px;
}
.sds-att-clean-icon[b-ubi07c4i8c] {
    width: 36px; height: 36px; border-radius: 9px;
    background: #fff;
    border: 1px solid rgba(22, 163, 74, 0.25);
    color: var(--ec-green);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; flex-shrink: 0;
}
.sds-att-clean-text[b-ubi07c4i8c] { font-size: 13px; color: var(--ec-text); font-weight: 600; margin: 0; }

/* Absence list */
.sds-abs-eyebrow[b-ubi07c4i8c] {
    font-size: 10px; font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.1em; text-transform: uppercase;
    margin: 4px 4px 8px;
}
.sds-abs-list[b-ubi07c4i8c] { display: flex; flex-direction: column; gap: 8px; }
.sds-abs-row[b-ubi07c4i8c] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-left: 3px solid transparent;
    border-radius: 10px;
    padding: 12px 14px;
    display: flex; align-items: center; gap: 12px;
}
.sds-abs-row--warn[b-ubi07c4i8c]  { border-left-color: var(--ec-amber); }
.sds-abs-row--alert[b-ubi07c4i8c] { border-left-color: var(--ec-red); }
.sds-abs-icon[b-ubi07c4i8c] {
    width: 32px; height: 32px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}
.sds-abs-row--warn  .sds-abs-icon[b-ubi07c4i8c] { background: var(--ec-amber-lt); color: var(--ec-amber); }
.sds-abs-row--alert .sds-abs-icon[b-ubi07c4i8c] { background: var(--ec-red-lt);   color: var(--ec-red); }
.sds-abs-body[b-ubi07c4i8c] { flex: 1; min-width: 0; }
.sds-abs-date[b-ubi07c4i8c] { font-size: 12.5px; font-weight: 700; color: var(--ec-text); margin: 0; }
.sds-abs-reason[b-ubi07c4i8c] { font-size: 11px; color: var(--ec-muted); margin: 2px 0 0; }
.sds-abs-tag[b-ubi07c4i8c] {
    font-size: 9.5px; font-weight: 800;
    padding: 3px 7px; border-radius: 5px;
    letter-spacing: 0.06em; text-transform: uppercase;
    white-space: nowrap;
}
.sds-abs-tag--warn[b-ubi07c4i8c]  { background: var(--ec-amber-lt); color: var(--ec-amber); }
.sds-abs-tag--alert[b-ubi07c4i8c] { background: var(--ec-red-lt);   color: var(--ec-red); }

/* Upcoming-tab empty state */
.sds-upcoming-empty[b-ubi07c4i8c] {
    background: #fff;
    border: 1px dashed var(--ec-border);
    border-radius: 12px;
    padding: 36px 28px;
    text-align: center;
}
.sds-upcoming-icon[b-ubi07c4i8c] { font-size: 34px; color: var(--ec-muted); margin-bottom: 10px; display: block; }
.sds-upcoming-title[b-ubi07c4i8c] { font-size: 14px; font-weight: 800; color: var(--ec-text); margin: 0 0 5px; }
.sds-upcoming-sub[b-ubi07c4i8c] { font-size: 12.5px; color: var(--ec-muted); margin: 0; line-height: 1.5; max-width: 360px; margin-left: auto; margin-right: auto; }

@media (max-width: 600px) {
    .sds-stats-row[b-ubi07c4i8c] { flex-direction: column; align-items: stretch; }
    .sds-mini-grid[b-ubi07c4i8c] { grid-template-columns: repeat(3, 1fr); }
}

/* ── Upcoming homework list ────────────────────────────────────── */
.sds-upcoming-list[b-ubi07c4i8c] {
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.sds-upcoming-card[b-ubi07c4i8c] {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 11px 14px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-left: 4px solid var(--ec-muted);
    border-radius: 11px;
}
.sds-upcoming-card--alert[b-ubi07c4i8c] { border-left-color: var(--ec-red); }
.sds-upcoming-card--warn[b-ubi07c4i8c]  { border-left-color: var(--ec-amber); }
.sds-upcoming-card--info[b-ubi07c4i8c]  { border-left-color: var(--ec-blue); }
.sds-upcoming-card--ok[b-ubi07c4i8c]    { border-left-color: var(--ec-green); }

.sds-upcoming-date[b-ubi07c4i8c] {
    text-align: center;
    background: var(--ec-bg);
    border-radius: 8px;
    padding: 6px 4px;
    line-height: 1;
}
.sds-upcoming-date-day[b-ubi07c4i8c] {
    font-size: 18px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.sds-upcoming-date-mon[b-ubi07c4i8c] {
    font-size: 9px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    margin: 2px 0 0;
}
.sds-upcoming-body[b-ubi07c4i8c] { min-width: 0; }
.sds-upcoming-title-row[b-ubi07c4i8c] {
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
    line-height: 1.3;
}
.sds-upcoming-meta[b-ubi07c4i8c] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 4px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.sds-upcoming-sep[b-ubi07c4i8c] { color: var(--ec-faint); }

.sds-upcoming-due[b-ubi07c4i8c] {
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.sds-upcoming-due--alert[b-ubi07c4i8c] {
    color: var(--ec-red);
    background: var(--ec-red-lt);
}
.sds-upcoming-due--warn[b-ubi07c4i8c] {
    color: var(--ec-amber);
    background: var(--ec-amber-lt);
}
.sds-upcoming-due--info[b-ubi07c4i8c] {
    color: var(--ec-blue);
    background: var(--ec-blue-lt);
}
.sds-upcoming-due--ok[b-ubi07c4i8c] {
    color: var(--ec-green);
    background: var(--ec-green-lt);
}

/* ── Footer ──────────────────────────────────────────────────────── */
.sds-footer[b-ubi07c4i8c] {
    padding: 14px 24px;
    border-top: 1px solid var(--ec-border);
    background: #fff;
    display: flex; gap: 10px;
    flex-shrink: 0;
}
.sds-foot-msg[b-ubi07c4i8c] {
    flex: 1;
    background: var(--subj-color, var(--ec-blue));
    border: none; border-radius: 9px;
    padding: 11px;
    font-size: 13px; font-weight: 800; color: #fff;
    cursor: pointer; font-family: inherit;
    transition: filter .12s;
}
.sds-foot-msg:hover[b-ubi07c4i8c] { filter: brightness(0.94); }
.sds-foot-hw[b-ubi07c4i8c] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    padding: 11px 14px;
    font-size: 13px; font-weight: 700; color: var(--ec-sub);
    cursor: pointer; font-family: inherit;
    transition: border-color .12s, color .12s;
}
.sds-foot-hw:hover[b-ubi07c4i8c] { border-color: var(--ec-muted); color: var(--ec-text); }

/* ── Justify-absence states (parent) ─────────────────────────────── */
.sds-abs-row--info[b-ubi07c4i8c] { border-left-color: var(--ec-blue); }
.sds-abs-row--info .sds-abs-icon[b-ubi07c4i8c] { background: var(--ec-blue-lt); color: var(--ec-blue); }
.sds-abs-tag--info[b-ubi07c4i8c] { background: var(--ec-blue-lt); color: var(--ec-blue); }

.sds-abs-actions[b-ubi07c4i8c] { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.sds-abs-justify-btn[b-ubi07c4i8c] {
    background: var(--ec-red); border: none; border-radius: 8px;
    padding: 6px 11px; font-size: 11px; font-weight: 800; color: #fff;
    cursor: pointer; font-family: inherit; white-space: nowrap;
}
.sds-abs-justify-btn:hover[b-ubi07c4i8c] { filter: brightness(0.95); }

.sds-abs-just[b-ubi07c4i8c] {
    margin-top: 7px; padding: 8px 10px; border-radius: 7px;
    font-size: 11.5px; line-height: 1.5;
}
.sds-abs-just--info[b-ubi07c4i8c]  { background: var(--ec-blue-gh); border-left: 3px solid var(--ec-blue); }
.sds-abs-just--alert[b-ubi07c4i8c] { background: var(--ec-red-lt);  border-left: 3px solid var(--ec-red); }
.sds-abs-just-l[b-ubi07c4i8c] {
    font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em;
    text-transform: uppercase; margin: 0 0 3px;
}
.sds-abs-just--info  .sds-abs-just-l[b-ubi07c4i8c] { color: var(--ec-blue); }
.sds-abs-just--alert .sds-abs-just-l[b-ubi07c4i8c] { color: var(--ec-red); }
.sds-abs-just-q[b-ubi07c4i8c] { color: var(--ec-sub); font-style: italic; margin: 0; }

.sds-action-banner[b-ubi07c4i8c] {
    background: linear-gradient(135deg, var(--ec-red-lt), #fff5f5);
    border: 1px solid #fecaca; border-radius: 11px;
    padding: 12px 14px; margin-bottom: 10px;
    display: flex; align-items: center; gap: 11px;
}
.sds-action-ic[b-ubi07c4i8c] {
    width: 34px; height: 34px; border-radius: 9px;
    background: #fff; border: 1px solid #fecaca; color: var(--ec-red);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 800; flex-shrink: 0;
}
.sds-action-body[b-ubi07c4i8c] { flex: 1; min-width: 0; }
.sds-action-eyebrow[b-ubi07c4i8c] {
    font-size: 11px; font-weight: 800; color: var(--ec-red);
    letter-spacing: 0.08em; text-transform: uppercase; margin: 0;
}
.sds-action-text[b-ubi07c4i8c] { font-size: 13px; font-weight: 700; color: var(--ec-text); margin: 2px 0 0; }
.sds-action-btn[b-ubi07c4i8c] {
    background: var(--ec-red); border: none; border-radius: 9px;
    padding: 8px 13px; font-size: 12px; font-weight: 800; color: #fff;
    cursor: pointer; font-family: inherit; flex-shrink: 0; white-space: nowrap;
}
.sds-action-btn:hover[b-ubi07c4i8c] { filter: brightness(0.95); }
/* /Components/Pages/Parent/UpdateAllergiesSheet.razor.rz.scp.css */
/* Update-allergies slide-over — port of ChildAllergyEditor (prototype 9116-9164).
   Amber-accented right-side sheet. Overlay/panel pattern mirrors
   ReportAbsenceSheet (.ras-*) and AbsenceNoticesSheet (.ans-*). */

.uas-overlay[b-4ftfp788v1] {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    display: flex; justify-content: flex-end;
    z-index: 1500;
    animation: uas-fade-b-4ftfp788v1 .18s ease;
}
@keyframes uas-fade-b-4ftfp788v1 { from { opacity: 0; } to { opacity: 1; } }

.uas-panel[b-4ftfp788v1] {
    width: min(560px, 96%);
    height: 100%;
    background: #fff;
    box-shadow: -12px 0 40px rgba(13, 23, 51, 0.16);
    display: flex; flex-direction: column;
    position: relative;
    overflow: hidden;
    animation: uas-slide-b-4ftfp788v1 .22s ease-out;
}
@keyframes uas-slide-b-4ftfp788v1 { from { transform: translateX(20px); opacity: 0.5; } to { transform: translateX(0); opacity: 1; } }

.uas-topbar[b-4ftfp788v1] {
    height: 3px;
    background: var(--ec-amber);
    flex-shrink: 0;
}

/* ── Header ──────────────────────────────────────────────────────── */
.uas-head[b-4ftfp788v1] {
    padding: 14px 22px;
    border-bottom: 1px solid var(--ec-border-soft);
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: space-between;
    background: color-mix(in srgb, var(--ec-amber) 5%, #fff);
}
.uas-head-id[b-4ftfp788v1] { min-width: 0; flex: 1; }
.uas-eyebrow[b-4ftfp788v1] {
    font-size: 10.5px; font-weight: 800;
    color: var(--ec-amber);
    letter-spacing: 0.1em; text-transform: uppercase;
    margin: 0;
}
.uas-title[b-4ftfp788v1] {
    font-size: 16px; font-weight: 800;
    color: var(--ec-text);
    margin: 3px 0 0;
}
.uas-close[b-4ftfp788v1] {
    width: 32px; height: 32px; border-radius: 8px;
    background: #fff;
    border: 1px solid var(--ec-border);
    cursor: pointer; font-family: inherit;
    font-size: 13px; color: var(--ec-sub);
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .12s, color .12s, border-color .12s;
}
.uas-close:hover[b-4ftfp788v1] { background: var(--ec-bg); color: var(--ec-text); border-color: var(--ec-muted); }

/* ── Body ────────────────────────────────────────────────────────── */
.uas-body[b-4ftfp788v1] {
    flex: 1; overflow-y: auto;
    padding: 18px 22px;
    display: flex; flex-direction: column; gap: 14px;
    background: var(--ec-bg);
}

.uas-section-block[b-4ftfp788v1] {
    display: flex; flex-direction: column;
}

.uas-section[b-4ftfp788v1] {
    font-size: 11px; font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.06em; text-transform: uppercase;
    margin: 0 0 5px;
}
.uas-optional[b-4ftfp788v1] { font-weight: 600; text-transform: none; letter-spacing: 0; }

.uas-helper[b-4ftfp788v1] {
    font-size: 11.5px; color: var(--ec-muted);
    margin: 0 0 8px;
    line-height: 1.5;
}


.uas-textarea[b-4ftfp788v1] {
    width: 100%; resize: vertical;
    border: 1.5px solid var(--ec-border);
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 12.5px; color: var(--ec-text); line-height: 1.5;
    background: #fff; outline: none; font-family: inherit;
    transition: border-color .12s;
    box-sizing: border-box;
}
.uas-textarea:focus[b-4ftfp788v1] { border-color: var(--ec-amber); }

/* ── No-allergies hint ── */
.uas-no-allergy[b-4ftfp788v1] {
    padding: 10px 13px;
    background: var(--ec-green-lt);
    border: 1px solid #bbf7d0;
    border-radius: 9px;
}
.uas-no-allergy-title[b-4ftfp788v1] {
    font-size: 11.5px; font-weight: 700; color: var(--ec-green);
    display: inline-flex; align-items: center; gap: 6px;
    margin: 0;
}
.uas-no-allergy-sub[b-4ftfp788v1] {
    font-size: 11px; color: var(--ec-sub);
    margin: 3px 0 0; line-height: 1.5;
}

/* ── Inline error ── */
.uas-error[b-4ftfp788v1] {
    display: flex; align-items: center; gap: 8px;
    background: color-mix(in srgb, var(--ec-red) 8%, #fff);
    border: 1px solid color-mix(in srgb, var(--ec-red) 30%, transparent);
    border-radius: 10px;
    padding: 10px 13px;
    font-size: 12px; font-weight: 600; color: var(--ec-red);
}

/* ── Footer ──────────────────────────────────────────────────────── */
.uas-foot[b-4ftfp788v1] {
    padding: 12px 22px;
    border-top: 1px solid var(--ec-border-soft);
    background: #fff;
    box-shadow: 0 -4px 14px rgba(13, 23, 51, 0.04);
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    flex-shrink: 0;
}
.uas-foot-count[b-4ftfp788v1] {
    font-size: 11px; color: var(--ec-muted);
    margin: 0;
}
.uas-foot-actions[b-4ftfp788v1] {
    display: flex; gap: 7px;
}
.uas-cancel[b-4ftfp788v1] {
    padding: 9px 15px;
    background: #fff; color: var(--ec-sub);
    border: 1px solid var(--ec-border); border-radius: 9px;
    font-size: 12.5px; font-weight: 700;
    cursor: pointer; font-family: inherit;
    transition: background .12s, border-color .12s;
}
.uas-cancel:hover[b-4ftfp788v1] { background: var(--ec-bg); border-color: var(--ec-muted); }
.uas-save[b-4ftfp788v1] {
    padding: 9px 18px;
    background: var(--ec-amber);
    color: #fff;
    border: none; border-radius: 9px;
    font-size: 13px; font-weight: 800;
    cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 5px;
    transition: filter .12s, transform .12s;
}
.uas-save:hover:not(:disabled)[b-4ftfp788v1] { filter: brightness(1.05); transform: translateY(-1px); }
.uas-save:disabled[b-4ftfp788v1] { opacity: 0.65; cursor: not-allowed; }

/* ── Spinner ── */
.uas-spinner[b-4ftfp788v1] {
    width: 14px; height: 14px;
    border: 2px solid rgba(15, 23, 42, 0.2);
    border-top-color: var(--ec-sub);
    border-radius: 50%;
    animation: uas-spin-b-4ftfp788v1 .7s linear infinite;
}
.uas-spinner--light[b-4ftfp788v1] {
    border-color: rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
}
@keyframes uas-spin-b-4ftfp788v1 { to { transform: rotate(360deg); } }
/* /Components/Pages/Polls/AdminPollsPage.razor.rz.scp.css */
/* AdminPollsPage — scoped CSS. Mirrors AWPolls (proto ~25746). */

.ap-body[b-s65dfa06sx] { background: var(--ec-bg); padding: 0; min-height: 100%; }

/* ── KPI ───────────────────────────────────────── */
.ap-kpis[b-s65dfa06sx] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}
@media (max-width: 768px) { .ap-kpis[b-s65dfa06sx] { grid-template-columns: repeat(2, 1fr); } }
.ap-kpi[b-s65dfa06sx] {
    min-height: 96px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.ap-kpi-icon[b-s65dfa06sx] {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent, var(--ec-blue)) 8%, transparent);
    color: var(--accent, var(--ec-blue));
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ap-kpi-body[b-s65dfa06sx] { flex: 1; min-width: 0; }
.ap-kpi-value[b-s65dfa06sx] { font-size: 22px; font-weight: 800; color: var(--ec-text); line-height: 1; letter-spacing: -0.02em; margin: 0; }
.ap-kpi-label[b-s65dfa06sx] { font-size: 10px; font-weight: 700; color: var(--ec-muted); text-transform: uppercase; letter-spacing: 0.1em; margin: 6px 0 0; }
.ap-kpi-sub[b-s65dfa06sx] { font-size: 11px; color: var(--ec-sub); margin: 3px 0 0; }

/* ── Toolbar ───────────────────────────────────── */
.ap-toolbar[b-s65dfa06sx] {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 14px; flex-wrap: wrap; gap: 10px;
}
.ap-filters[b-s65dfa06sx] { display: flex; gap: 5px; flex-wrap: wrap; }
.ap-chip[b-s65dfa06sx] {
    background: #fff;
    color: var(--ec-sub);
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex; align-items: center; gap: 6px;
}
.ap-chip:hover[b-s65dfa06sx] { color: var(--ec-text); }
.ap-chip--active[b-s65dfa06sx] {
    background: var(--accent, var(--ec-text));
    color: #fff;
    border-color: var(--accent, var(--ec-text));
}
.ap-chip-count[b-s65dfa06sx] {
    font-size: 10px; font-weight: 800;
    background: var(--ec-border-soft); color: var(--ec-muted);
    padding: 1px 5px; border-radius: 4px;
}
.ap-chip--active .ap-chip-count[b-s65dfa06sx] { background: rgba(255, 255, 255, .22); color: #fff; }
/* page-level "New poll" CTA now uses the shared .ec-btn-primary class */

/* ── Grid + Card ───────────────────────────────── */
.ap-grid[b-s65dfa06sx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 12px;
}
.ap-card[b-s65dfa06sx] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 13px;
    overflow: hidden;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}
.ap-card:hover[b-s65dfa06sx] {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px -8px rgba(13, 23, 51, .18);
}
.ap-card-strip[b-s65dfa06sx] { height: 8px; }
.ap-card-body[b-s65dfa06sx] { padding: 13px 15px; }

.ap-card-pills[b-s65dfa06sx] {
    display: flex; align-items: center; gap: 5px;
    margin-bottom: 7px; flex-wrap: wrap;
}
.ap-pill[b-s65dfa06sx] {
    font-size: 9.5px; font-weight: 800;
    padding: 2px 8px; border-radius: 4px;
    letter-spacing: 0.06em;
    display: inline-flex; align-items: center; gap: 4px;
}
.ap-pill--ok[b-s65dfa06sx]    { color: var(--ec-green); background: var(--ec-green-lt); }
.ap-pill--muted[b-s65dfa06sx] { color: var(--ec-muted); background: var(--ec-bg); }
.ap-pill--alert[b-s65dfa06sx] { color: var(--ec-red); background: var(--ec-red-lt); }
.ap-pill--anon[b-s65dfa06sx]  { color: var(--ec-sub); background: var(--ec-bg); text-transform: uppercase; }

.ap-card-title[b-s65dfa06sx] {
    font-size: 14.5px; font-weight: 800;
    color: var(--ec-text); line-height: 1.3; margin: 0;
}
.ap-card-desc[b-s65dfa06sx] {
    font-size: 11.5px; color: var(--ec-sub);
    line-height: 1.5; margin: 5px 0 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.ap-card-meta[b-s65dfa06sx] {
    font-size: 10.5px; color: var(--ec-muted);
    margin: 7px 0 0; font-weight: 600;
}

.ap-card-foot[b-s65dfa06sx] {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 9px; padding-top: 9px;
    border-top: 1px solid var(--ec-border-soft); gap: 8px;
}
.ap-card-resp[b-s65dfa06sx] { font-size: 11.5px; font-weight: 800; color: var(--ec-text); margin: 0; }
.ap-card-resp-count[b-s65dfa06sx] { color: var(--ec-green); }
.ap-card-resp-label[b-s65dfa06sx] { color: var(--ec-muted); font-weight: 600; margin-left: 3px; }
.ap-card-pct[b-s65dfa06sx] { font-size: 10.5px; color: var(--ec-muted); font-weight: 700; margin: 0; }

.ap-card-bar[b-s65dfa06sx] {
    margin-top: 5px;
    height: 5px;
    background: var(--ec-border);
    border-radius: 99px;
    overflow: hidden;
}
.ap-card-bar-fill[b-s65dfa06sx] { height: 100%; border-radius: 99px; }
.ap-card-bar-fill--ok[b-s65dfa06sx]    { background: var(--ec-green); }
.ap-card-bar-fill--warn[b-s65dfa06sx]  { background: var(--ec-amber); }
.ap-card-bar-fill--info[b-s65dfa06sx]  { background: var(--ec-purple); }

/* Empty state now uses the shared <WebEmpty> atom (CTA in its Action slot). */
/* /Components/Pages/Polls/AdminPollTemplatesGallery.razor.rz.scp.css */
/* AdminPollTemplatesGallery — scoped CSS. Mirrors AWPollTemplatesGallery (proto 26137-26175). */

.aptg-overlay[b-cv9ir480jb] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .6);
    z-index: 1115;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.aptg-modal[b-cv9ir480jb] {
    background: #fff;
    border-radius: 14px;
    width: min(820px, 96%);
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: 0 24px 60px rgba(13, 23, 51, .4);
    display: flex;
    flex-direction: column;
}

/* Header */
.aptg-head[b-cv9ir480jb] {
    padding: 18px 22px;
    border-bottom: 1px solid var(--ec-border-soft);
}
.aptg-eyebrow[b-cv9ir480jb] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
}
.aptg-title[b-cv9ir480jb] {
    font-size: 18px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 3px 0 0;
}
.aptg-sub[b-cv9ir480jb] {
    font-size: 12px;
    color: var(--ec-sub);
    margin: 5px 0 0;
    line-height: 1.5;
}

/* Grid */
.aptg-grid[b-cv9ir480jb] {
    padding: 18px 22px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 11px;
}

/* Tile */
.aptg-tile[b-cv9ir480jb] {
    padding: 0;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    min-height: 140px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .12s ease, box-shadow .12s ease;
}
.aptg-tile:hover[b-cv9ir480jb] {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px -8px rgba(13, 23, 51, .18);
}
.aptg-tile--blank[b-cv9ir480jb] {
    padding: 16px 14px;
    border: 2px dashed color-mix(in srgb, var(--ec-purple) 25%, transparent);
    justify-content: space-between;
}
.aptg-tile-icon-blank[b-cv9ir480jb] {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--ec-purple-lt);
    color: var(--ec-purple);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.aptg-tile-cover[b-cv9ir480jb] {
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.aptg-tile-body[b-cv9ir480jb] {
    padding: 10px 13px 13px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.aptg-tile-name[b-cv9ir480jb] {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.aptg-tile-desc[b-cv9ir480jb] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 4px 0 0;
    line-height: 1.45;
    flex: 1;
}
.aptg-tile-pills[b-cv9ir480jb] {
    display: flex;
    gap: 4px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.aptg-pill[b-cv9ir480jb] {
    font-size: 8.5px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: 0.06em;
}
.aptg-pill--purple[b-cv9ir480jb] { color: var(--ec-purple); background: var(--ec-purple-lt); }
.aptg-pill--blue[b-cv9ir480jb]   { color: var(--ec-blue);   background: var(--ec-blue-lt); }
.aptg-pill--green[b-cv9ir480jb]  { color: var(--ec-green);  background: var(--ec-green-lt); }
.aptg-pill--amber[b-cv9ir480jb]  { color: var(--ec-amber);  background: var(--ec-amber-lt); }

/* Footer */
.aptg-foot[b-cv9ir480jb] {
    padding: 12px 22px;
    border-top: 1px solid var(--ec-border-soft);
    display: flex;
    justify-content: flex-end;
}
.aptg-cancel[b-cv9ir480jb] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    padding: 9px 15px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
}
.aptg-cancel:hover[b-cv9ir480jb] { color: var(--ec-text); border-color: var(--ec-text); }
/* /Components/Pages/Programs/AdminProgramsPage.razor.rz.scp.css */
/* AdminProgramsPage — scoped CSS. Mirrors AWPrograms (proto ~23166). */

.apg-body[b-6hhfox5coj] { background: var(--ec-bg); padding: 0; min-height: 100%; }

/* ── KPI ───────────────────────────────────────── */
.apg-kpis[b-6hhfox5coj] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}
@media (max-width: 768px) { .apg-kpis[b-6hhfox5coj] { grid-template-columns: repeat(2, 1fr); } }
.apg-kpi[b-6hhfox5coj] {
    min-height: 96px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.apg-kpi-icon[b-6hhfox5coj] {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent, var(--ec-blue)) 8%, transparent);
    color: var(--accent, var(--ec-blue));
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.apg-kpi-body[b-6hhfox5coj] { flex: 1; min-width: 0; }
.apg-kpi-value[b-6hhfox5coj] { font-size: 22px; font-weight: 800; color: var(--ec-text); line-height: 1; letter-spacing: -0.02em; margin: 0; }
.apg-kpi-label[b-6hhfox5coj] { font-size: 10px; font-weight: 700; color: var(--ec-muted); text-transform: uppercase; letter-spacing: 0.1em; margin: 6px 0 0; }
.apg-kpi-sub[b-6hhfox5coj] { font-size: 11px; color: var(--ec-sub); margin: 3px 0 0; }

/* ── Toolbar ───────────────────────────────────── */
.apg-toolbar[b-6hhfox5coj] {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 14px; flex-wrap: wrap; gap: 10px;
}
.apg-filters[b-6hhfox5coj] { display: flex; gap: 5px; flex-wrap: wrap; }
.apg-chip[b-6hhfox5coj] {
    background: #fff;
    color: var(--ec-sub);
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex; align-items: center; gap: 6px;
}
.apg-chip:hover[b-6hhfox5coj] { color: var(--ec-text); }
.apg-chip--active[b-6hhfox5coj] {
    background: var(--accent, var(--ec-text));
    color: #fff;
    border-color: var(--accent, var(--ec-text));
}
.apg-chip-count[b-6hhfox5coj] {
    font-size: 10px; font-weight: 800;
    background: var(--ec-border-soft); color: var(--ec-muted);
    padding: 1px 5px; border-radius: 4px;
}
.apg-chip--active .apg-chip-count[b-6hhfox5coj] { background: rgba(255, 255, 255, .22); color: #fff; }
/* page-level "New program" CTA now uses the shared .ec-btn-primary class */

/* ── Grid + Card ───────────────────────────────── */
.apg-grid[b-6hhfox5coj] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.apg-card[b-6hhfox5coj] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 13px;
    overflow: hidden;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}
.apg-card:hover[b-6hhfox5coj] {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px -8px rgba(13, 23, 51, .18);
}

.apg-card-cover[b-6hhfox5coj] {
    height: 90px;
    display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
}
.apg-card-cover-img[b-6hhfox5coj] {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.apg-card-cover-icon[b-6hhfox5coj] { font-size: 38px; color: #fff; }
.apg-card-status[b-6hhfox5coj] {
    position: absolute; top: 9px; right: 9px;
    font-size: 9.5px; font-weight: 800;
    background: rgba(255, 255, 255, .92);
    padding: 3px 9px; border-radius: 5px;
    letter-spacing: 0.06em;
}
.apg-card-status--ok[b-6hhfox5coj]    { color: var(--ec-green); }
.apg-card-status--warn[b-6hhfox5coj]  { color: var(--ec-amber); }
.apg-card-status--alert[b-6hhfox5coj] { color: var(--ec-red); }
.apg-card-status--muted[b-6hhfox5coj] { color: var(--ec-muted); }

.apg-card-body[b-6hhfox5coj] { padding: 12px 14px; }
.apg-card-pills[b-6hhfox5coj] {
    display: flex; align-items: center; gap: 5px; margin-bottom: 5px;
    flex-wrap: wrap;
}
.apg-card-cat[b-6hhfox5coj] {
    font-size: 9.5px; font-weight: 800;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    padding: 2px 7px; border-radius: 4px;
    letter-spacing: 0.06em;
    display: inline-flex; align-items: center; gap: 4px;
}
.apg-card-title[b-6hhfox5coj] {
    font-size: 14px; font-weight: 800;
    color: var(--ec-text); line-height: 1.3; margin: 0;
}
.apg-card-desc[b-6hhfox5coj] {
    font-size: 11px; color: var(--ec-sub);
    line-height: 1.5; margin: 5px 0 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.apg-card-meta[b-6hhfox5coj] {
    font-size: 10.5px; color: var(--ec-muted);
    margin: 7px 0 0; font-weight: 600;
    display: inline-flex; align-items: center; gap: 5px;
    flex-wrap: wrap;
}

.apg-card-foot[b-6hhfox5coj] {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 9px; padding-top: 9px;
    border-top: 1px solid var(--ec-border-soft);
}
.apg-card-reg[b-6hhfox5coj] { font-size: 11.5px; font-weight: 800; color: var(--ec-text); margin: 0; }
.apg-card-reg-label[b-6hhfox5coj] { color: var(--ec-muted); font-size: 10px; font-weight: 700; }
.apg-card-extra[b-6hhfox5coj] { font-size: 9.5px; font-weight: 700; margin: 1px 0 0; }
.apg-card-extra--warn[b-6hhfox5coj]  { color: var(--ec-amber); }
.apg-card-extra--alert[b-6hhfox5coj] { color: var(--ec-red); }

.apg-card-vis[b-6hhfox5coj] {
    font-size: 9.5px; font-weight: 800;
    padding: 3px 9px; border-radius: 5px;
    letter-spacing: 0.06em;
    display: inline-flex; align-items: center; gap: 4px;
}
.apg-card-vis--ok[b-6hhfox5coj]    { color: var(--ec-green); background: var(--ec-green-lt); }
.apg-card-vis--muted[b-6hhfox5coj] { color: var(--ec-muted); background: var(--ec-bg); }

.apg-card-bar[b-6hhfox5coj] {
    margin-top: 7px;
    height: 5px;
    background: var(--ec-border);
    border-radius: 99px;
    overflow: hidden;
}
.apg-card-bar-fill[b-6hhfox5coj] { height: 100%; border-radius: 99px; }
.apg-card-bar-fill--ok[b-6hhfox5coj]    { background: var(--ec-green); }
.apg-card-bar-fill--warn[b-6hhfox5coj]  { background: var(--ec-amber); }
.apg-card-bar-fill--alert[b-6hhfox5coj] { background: var(--ec-red); }

/* ── Empty state ───────────────────────────────── */
.apg-empty[b-6hhfox5coj] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    padding: 48px;
    text-align: center;
}
.apg-empty-icon[b-6hhfox5coj] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--ec-purple) 10%, transparent);
    color: var(--ec-purple);
    margin-bottom: 12px;
}
.apg-empty-title[b-6hhfox5coj] { font-size: 16px; font-weight: 800; color: var(--ec-text); margin: 0; }
.apg-empty-sub[b-6hhfox5coj] { font-size: 12.5px; color: var(--ec-sub); margin: 6px 0 14px; }
/* /Components/Pages/Public/DocumentSignPage.razor.rz.scp.css */
/* Serif "paper" rendering for the document body — mirrors .psd-doc-sheet in
   ParentSchoolDocuments so the external signer sees the same document presentation. */
.doc-sign-paper[b-6iro0etuju] {
    background: #fff;
    padding: 48px 56px;
    font-family: Georgia, Cambria, serif;
    font-size: 14px;
    line-height: 1.7;
    color: #0f172a;
    overflow-x: auto;
}

.doc-sign-paper[b-6iro0etuju]  p {
    margin: 0 0 12px;
}

.doc-sign-paper[b-6iro0etuju]  h1,
.doc-sign-paper[b-6iro0etuju]  h2,
.doc-sign-paper[b-6iro0etuju]  h3 {
    color: #0f172a;
    margin: 18px 0 10px;
}
/* /Components/Pages/ReportsPage.razor.rz.scp.css */
/* Admin Reports — transcribed from prototype AWReports
   (EduConnect All Roles.html lines 32166-32418). Hero with executive
   narrative · 4 headline KPIs · "Needs your attention" panel ·
   "Browse all reports" grouped collapsible catalog · per-report detail
   slide-over. */

.awr-page[b-h5gh5donz8] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Hero / narrative ────────────────────────────────────────── */
.awr-hero[b-h5gh5donz8] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--ec-purple) 10%, white), color-mix(in srgb, var(--ec-blue) 8%, white), #fff 70%);
    border: 1px solid var(--ec-border-soft);
    border-radius: 14px;
    padding: 18px 22px;
    position: relative;
    overflow: hidden;
}
.awr-hero-glyph[b-h5gh5donz8] {
    position: absolute;
    top: 0;
    right: 0;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle at top right, color-mix(in srgb, var(--ec-purple) 15%, transparent), transparent 70%);
    pointer-events: none;
}
.awr-hero-eyebrow[b-h5gh5donz8] {
    font-size: 11px;
    font-weight: 700;
    color: var(--ec-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 4px;
}
.awr-hero-greeting[b-h5gh5donz8] {
    font-size: 20px;
    font-weight: 800;
    color: var(--ec-text);
    letter-spacing: -0.02em;
    margin: 0 0 8px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.awr-hero-narrative[b-h5gh5donz8] {
    font-size: 13px;
    color: var(--ec-sub);
    line-height: 1.6;
    max-width: 780px;
    margin: 0;
}
.awr-hero-narrative b[b-h5gh5donz8] { color: var(--ec-text); }
.awr-hero-actions[b-h5gh5donz8] {
    display: flex;
    gap: 8px;
    margin-top: 13px;
    flex-wrap: wrap;
}
.awr-hero-btn[b-h5gh5donz8] {
    border-radius: 8px;
    padding: 7px 13px;
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid transparent;
}
.awr-hero-btn-primary[b-h5gh5donz8] {
    background: var(--ec-primary);
    border: none;
    color: #fff;
}
.awr-hero-btn-primary:hover[b-h5gh5donz8] { filter: brightness(0.93); }
.awr-hero-btn-ghost[b-h5gh5donz8] {
    background: #fff;
    color: var(--ec-sub);
    border-color: var(--ec-border);
    font-weight: 700;
}
.awr-hero-btn-ghost:hover[b-h5gh5donz8] { background: var(--ec-bg); }

/* ── KPIs ────────────────────────────────────────────────────── */
.awr-kpis[b-h5gh5donz8] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
@media (max-width: 1080px) { .awr-kpis[b-h5gh5donz8] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .awr-kpis[b-h5gh5donz8] { grid-template-columns: 1fr; } }

/* ── Action items panel ──────────────────────────────────────── */
.awr-panel[b-h5gh5donz8] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 12px;
    overflow: hidden;
}
.awr-panel-hdr[b-h5gh5donz8] {
    padding: 12px 18px;
    border-bottom: 1px solid var(--ec-border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.awr-panel-title[b-h5gh5donz8] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.awr-panel-sub[b-h5gh5donz8] {
    font-size: 11.5px;
    color: var(--ec-muted);
    margin: 2px 0 0;
}
.awr-panel-btn[b-h5gh5donz8] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 7px;
    padding: 7px 12px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.awr-panel-btn:hover[b-h5gh5donz8] { background: var(--ec-bg); }

.awr-action-row[b-h5gh5donz8] {
    padding: 12px 18px;
    border-top: 1px solid var(--ec-border-soft);
    display: flex;
    align-items: center;
    gap: 13px;
    cursor: pointer;
    transition: background 0.12s;
    background: transparent;
    text-align: left;
    width: 100%;
    border-left: none;
    border-right: none;
    border-bottom: none;
    font-family: inherit;
}
.awr-action-row:first-of-type[b-h5gh5donz8] { border-top: none; }
.awr-action-row:hover[b-h5gh5donz8] { background: color-mix(in srgb, var(--ec-bg) 50%, transparent); }
.awr-action-icon[b-h5gh5donz8] {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.awr-action-text[b-h5gh5donz8] { flex: 1; min-width: 0; }
.awr-action-label[b-h5gh5donz8] {
    font-size: 13px;
    font-weight: 700;
    color: var(--ec-text);
    line-height: 1.3;
    margin: 0;
}
.awr-action-detail[b-h5gh5donz8] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 2px 0 0;
}
.awr-action-cta[b-h5gh5donz8] {
    padding: 6px 12px;
    color: #fff;
    border: none;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.awr-action-cta-red[b-h5gh5donz8]   { background: var(--ec-red); }
.awr-action-cta-amber[b-h5gh5donz8] { background: var(--ec-amber); }
.awr-action-cta-blue[b-h5gh5donz8]  { background: var(--ec-blue); }

.awr-all-clear[b-h5gh5donz8] {
    background: var(--ec-green-lt);
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 11px;
}
.awr-all-clear-text[b-h5gh5donz8] { flex: 1; }
.awr-all-clear-title[b-h5gh5donz8] {
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-green);
    margin: 0;
}
.awr-all-clear-sub[b-h5gh5donz8] {
    font-size: 11.5px;
    color: var(--ec-sub);
    margin: 2px 0 0;
}

/* ── Catalog ─────────────────────────────────────────────────── */
.awr-catalog-search-wrap[b-h5gh5donz8] {
    position: relative;
    width: 240px;
}
.awr-catalog-search-icon[b-h5gh5donz8] {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--ec-muted);
}
.awr-catalog-search[b-h5gh5donz8] {
    width: 100%;
    background: var(--ec-bg);
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    padding: 7px 11px 7px 32px;
    font-size: 12px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    color: var(--ec-text);
}

.awr-catalog-group[b-h5gh5donz8] { border-top: 1px solid var(--ec-border-soft); }
.awr-catalog-group:first-of-type[b-h5gh5donz8] { border-top: none; }
.awr-catalog-group-hdr[b-h5gh5donz8] {
    width: 100%;
    padding: 12px 18px;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 11px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}
.awr-catalog-group-hdr:hover[b-h5gh5donz8] { background: color-mix(in srgb, var(--ec-bg) 50%, transparent); }
.awr-group-icon[b-h5gh5donz8] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.awr-group-text[b-h5gh5donz8] { flex: 1; }
.awr-group-label[b-h5gh5donz8] {
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.awr-group-count[b-h5gh5donz8] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 1px 0 0;
}
.awr-group-chevron[b-h5gh5donz8] {
    color: var(--ec-muted);
    transition: transform 0.15s;
    display: inline-flex;
}
.awr-group-chevron.is-open[b-h5gh5donz8] { transform: rotate(180deg); }

.awr-catalog-items[b-h5gh5donz8] { padding-bottom: 8px; }
.awr-catalog-item[b-h5gh5donz8] {
    width: 100%;
    padding: 10px 18px 10px 59px;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 11px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background 0.12s;
}
.awr-catalog-item:hover[b-h5gh5donz8] { background: color-mix(in srgb, var(--ec-bg) 50%, transparent); }
.awr-catalog-item-icon[b-h5gh5donz8] {
    width: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.awr-catalog-item-text[b-h5gh5donz8] { flex: 1; min-width: 0; }
.awr-catalog-item-title[b-h5gh5donz8] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ec-text);
    margin: 0;
}
.awr-catalog-item-desc[b-h5gh5donz8] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 1px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.awr-catalog-item-cta[b-h5gh5donz8] {
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.awr-catalog-empty[b-h5gh5donz8] {
    padding: 40px 20px;
    text-align: center;
    color: var(--ec-muted);
    font-size: 13px;
}

/* ── Report detail slide-over ────────────────────────────────── */
.awr-d-overlay[b-h5gh5donz8] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 95;
    animation: awr-fade-b-h5gh5donz8 0.12s ease;
}
@keyframes awr-fade-b-h5gh5donz8 { from { background: rgba(15, 23, 42, 0); } }
.awr-d-panel[b-h5gh5donz8] {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(640px, 96vw);
    background: #fff;
    z-index: 96;
    overflow-y: auto;
    box-shadow: -12px 0 40px rgba(13, 23, 51, 0.16);
    display: flex;
    flex-direction: column;
}
.awr-d-hdr[b-h5gh5donz8] {
    padding: 18px 24px;
    border-bottom: 1px solid var(--ec-border-soft);
    display: flex;
    align-items: flex-start;
    gap: 13px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--ec-purple) 8%, white), #fff 70%);
}
.awr-d-icon[b-h5gh5donz8] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.awr-d-hdr-text[b-h5gh5donz8] { flex: 1; min-width: 0; }
.awr-d-pill[b-h5gh5donz8] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.awr-d-title[b-h5gh5donz8] {
    font-size: 19px;
    font-weight: 800;
    color: var(--ec-text);
    letter-spacing: -0.01em;
    margin: 0;
    line-height: 1.25;
}
.awr-d-desc[b-h5gh5donz8] {
    font-size: 11.5px;
    color: var(--ec-muted);
    margin: 2px 0 0;
}
.awr-d-close[b-h5gh5donz8] {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #fff;
    border: 1px solid var(--ec-border);
    font-size: 14px;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
}

.awr-d-toolbar[b-h5gh5donz8] {
    padding: 12px 24px;
    border-bottom: 1px solid var(--ec-border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    flex-wrap: wrap;
}
.awr-d-select[b-h5gh5donz8] {
    padding: 6px 10px;
    border: 1px solid var(--ec-border);
    border-radius: 7px;
    font-size: 11.5px;
    font-family: inherit;
    background: #fff;
    color: var(--ec-text);
    outline: none;
}
.awr-d-actions[b-h5gh5donz8] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.awr-d-action-btn[b-h5gh5donz8] {
    padding: 6px 11px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 7px;
    font-size: 11px;
    font-weight: 700;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.awr-d-action-btn:hover[b-h5gh5donz8] { background: var(--ec-bg); }
.awr-d-action-btn:disabled[b-h5gh5donz8] {
    color: var(--ec-muted);
    cursor: not-allowed;
    border-color: var(--ec-border-soft);
    opacity: 0.55;
}
.awr-d-action-btn:disabled:hover[b-h5gh5donz8] { background: #fff; }

.awr-d-body[b-h5gh5donz8] { padding: 18px 24px; }

.awr-section-label[b-h5gh5donz8] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 8px;
}

/* Generic table-ish rows used by most report bodies */
.awr-data-row[b-h5gh5donz8] {
    padding: 11px 13px;
    background: #fff;
    border: 1px solid var(--ec-border-soft);
    border-radius: 9px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.awr-data-row.is-red[b-h5gh5donz8]   { background: var(--ec-red-lt);   border-color: rgba(220, 38, 38, 0.2); }
.awr-data-row.is-amber[b-h5gh5donz8] { background: var(--ec-amber-lt); border-color: rgba(217, 119, 6, 0.2); }
.awr-data-row.is-green[b-h5gh5donz8] { background: var(--ec-green-lt); border-color: rgba(22, 163, 74, 0.18); }
.awr-data-row-name[b-h5gh5donz8] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ec-text);
    margin: 0;
}
.awr-data-row-meta[b-h5gh5donz8] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 2px 0 0;
}
.awr-data-row-value[b-h5gh5donz8] {
    font-size: 14px;
    font-weight: 800;
    margin: 0;
    white-space: nowrap;
}

.awr-data-empty[b-h5gh5donz8] {
    padding: 24px;
    text-align: center;
    color: var(--ec-muted);
    font-size: 12.5px;
    font-style: italic;
}

.awr-stat-tiles[b-h5gh5donz8] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    margin-bottom: 11px;
}
.awr-stat-tile[b-h5gh5donz8] {
    padding: 12px 14px;
    border-radius: 9px;
}
.awr-stat-tile-green[b-h5gh5donz8] { background: var(--ec-green-lt); }
.awr-stat-tile-amber[b-h5gh5donz8] { background: var(--ec-amber-lt); }
.awr-stat-tile-blue[b-h5gh5donz8]  { background: var(--ec-blue-gh); }
.awr-stat-tile-label[b-h5gh5donz8] {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0;
}
.awr-stat-tile-green .awr-stat-tile-label[b-h5gh5donz8]  { color: var(--ec-green); }
.awr-stat-tile-amber .awr-stat-tile-label[b-h5gh5donz8]  { color: var(--ec-amber); }
.awr-stat-tile-blue  .awr-stat-tile-label[b-h5gh5donz8]  { color: var(--ec-blue); }
.awr-stat-tile-value[b-h5gh5donz8] {
    font-size: 17px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 3px 0 0;
    font-family: ui-monospace, "SF Mono", monospace;
}

.awr-bar-track[b-h5gh5donz8] {
    height: 8px;
    background: var(--ec-bg);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 4px;
}
.awr-bar-fill[b-h5gh5donz8] {
    height: 100%;
    transition: width 0.3s;
}

.awr-insight[b-h5gh5donz8] {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 10px;
}
.awr-insight-green[b-h5gh5donz8] { background: var(--ec-green-lt); }
.awr-insight-amber[b-h5gh5donz8] { background: var(--ec-amber-lt); }
.awr-insight-blue[b-h5gh5donz8]  { background: var(--ec-blue-gh); }
.awr-insight p[b-h5gh5donz8] {
    font-size: 11.5px;
    color: var(--ec-sub);
    line-height: 1.55;
    margin: 0;
}
.awr-insight b.green[b-h5gh5donz8] { color: var(--ec-green); }
.awr-insight b.amber[b-h5gh5donz8] { color: var(--ec-amber); }
.awr-insight b.blue[b-h5gh5donz8]  { color: var(--ec-blue); }

.awr-d-soon[b-h5gh5donz8] {
    padding: 36px 20px;
    text-align: center;
    background: var(--ec-bg);
    border: 1px dashed var(--ec-border);
    border-radius: 11px;
}
.awr-d-soon-title[b-h5gh5donz8] {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 8px 0 0;
}
.awr-d-soon-body[b-h5gh5donz8] {
    font-size: 11.5px;
    color: var(--ec-muted);
    margin: 4px 0 0;
    line-height: 1.55;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
}
/* /Components/Pages/SchoolSubjects/SchoolSubjectsPage.razor.rz.scp.css */
/* SchoolSubjectsPage — customer-wide subject catalog.
   Source of truth: prototype EduConnect All Roles.html lines 19425-19748
   (AWSubjects). Pixel values transcribed from inline JSX so the Blazor
   render matches the prototype rather than drifting into rem
   approximations.

   The colour for code chips / stage chips / monogram tiles is set via
   inline `--c` / `--c-soft` CSS vars on each element, so the same class
   handles every accent without inflating the stylesheet. */

.ss-page[b-q08fgawlbp] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ── Banners ─────────────────────────────────────────────────────────── */
.ss-banner[b-q08fgawlbp] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 600;
}
.ss-banner-error[b-q08fgawlbp] { background: var(--ec-red-lt); color: var(--ec-red); }
.ss-banner-close[b-q08fgawlbp] {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    font-size: 16px;
    padding: 0;
    line-height: 1;
}

.ss-loading[b-q08fgawlbp], .ss-empty[b-q08fgawlbp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 64px 32px;
    gap: 12px;
    color: var(--ec-muted);
    text-align: center;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 14px;
}
.ss-spinner[b-q08fgawlbp] {
    width: 36px;
    height: 36px;
    border: 3px solid #e9eefb;
    border-top-color: var(--ec-blue);
    border-radius: 50%;
    animation: ss-spin-b-q08fgawlbp 0.75s linear infinite;
}
@keyframes ss-spin-b-q08fgawlbp { to { transform: rotate(360deg); } }
.ss-empty-icon[b-q08fgawlbp] { font-size: 40px; opacity: 0.35; }
.ss-empty-title[b-q08fgawlbp] { font-size: 15px; font-weight: 800; color: var(--ec-text); margin: 0; }

/* ── KPI strip ──────────────────────────────────────────────────────── */
.ss-kpi-grid[b-q08fgawlbp] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.ss-kpi[b-q08fgawlbp] {
    min-height: 96px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.ss-kpi-icon[b-q08fgawlbp] {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 20px;
    color: var(--kpi-c, var(--ec-blue));
    background: color-mix(in srgb, var(--kpi-c, var(--ec-blue)) 14%, transparent);
}
.ss-kpi-body[b-q08fgawlbp] { flex: 1; min-width: 0; }
.ss-kpi-value[b-q08fgawlbp] { font-size: 22px; font-weight: 800; color: var(--ec-text); line-height: 1; letter-spacing: -0.02em; }
.ss-kpi-label[b-q08fgawlbp] { font-size: 10px; font-weight: 700; color: var(--ec-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 6px; }

@media (max-width: 880px) {
    .ss-kpi-grid[b-q08fgawlbp] { grid-template-columns: repeat(2, 1fr); }
}

/* ── Panel + search + add ──────────────────────────────────────────── */
.ss-panel[b-q08fgawlbp] {
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--ec-border);
    overflow: hidden;
}
.ss-panel-head[b-q08fgawlbp] {
    padding: 12px 18px;
    border-bottom: 1px solid var(--ec-border);
    display: flex;
    gap: 10px;
    align-items: center;
}
.ss-search[b-q08fgawlbp] {
    flex: 1;
    position: relative;
}
.ss-search i[b-q08fgawlbp] {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ec-muted);
    font-size: 13px;
}
.ss-search input[b-q08fgawlbp] {
    width: 100%;
    background: var(--ec-bg);
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    padding: 8px 12px 8px 32px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
}
.ss-search input:focus[b-q08fgawlbp] { border-color: var(--ec-blue); box-shadow: 0 0 0 2px rgba(59, 95, 192, 0.12); }

/* page-level "Add subject" CTA now uses the shared .ec-btn-primary class */

/* ── Table — 6-column grid, header + rows. ─────────────────────────── */
.ss-table-head[b-q08fgawlbp],
.ss-row[b-q08fgawlbp] {
    display: grid;
    grid-template-columns: 80px 1fr 1.6fr 1.4fr 1.6fr 80px;
    align-items: center;
    gap: 8px;
}
.ss-table-head[b-q08fgawlbp] {
    padding: 10px 18px;
    background: var(--ec-bg);
    font-size: 10px;
    font-weight: 700;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.ss-th-actions[b-q08fgawlbp] { text-align: right; }

.ss-row[b-q08fgawlbp] {
    padding: 12px 18px;
    border-top: 1px solid var(--ec-border-soft);
    cursor: pointer;
}
.ss-row:hover[b-q08fgawlbp] { background: var(--ec-bg); }

.ss-row-empty[b-q08fgawlbp] {
    padding: 28px 18px;
    border-top: 1px solid var(--ec-border-soft);
    text-align: center;
    color: var(--ec-muted);
    font-size: 12px;
    font-style: italic;
}

.ss-code-chip[b-q08fgawlbp] {
    font-size: 11px;
    font-weight: 800;
    color: var(--c);
    background: var(--c-soft);
    padding: 3px 8px;
    border-radius: 5px;
    letter-spacing: 0.06em;
    display: inline-block;
    justify-self: flex-start;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.ss-name-cell[b-q08fgawlbp] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}
.ss-monogram[b-q08fgawlbp] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
    letter-spacing: -0.02em;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.ss-monogram i[b-q08fgawlbp] { font-size: 17px; font-family: bootstrap-icons; letter-spacing: 0; }
.ss-name[b-q08fgawlbp] {
    font-size: 13px;
    font-weight: 700;
    color: var(--ec-text);
    margin: 0;
    line-height: 1.25;
}
.ss-gpa[b-q08fgawlbp] {
    font-size: 10px;
    font-weight: 700;
    margin: 1px 0 0;
}
.ss-gpa-on[b-q08fgawlbp]  { color: var(--ec-green); }
.ss-gpa-off[b-q08fgawlbp] { color: var(--ec-muted); }

.ss-stages-cell[b-q08fgawlbp] { display: flex; flex-wrap: wrap; gap: 4px; }
.ss-not-offered[b-q08fgawlbp] { font-size: 10.5px; color: var(--ec-muted); font-style: italic; }
.ss-stage-chip[b-q08fgawlbp] {
    font-size: 9.5px;
    font-weight: 800;
    color: var(--c);
    background: var(--c-soft);
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ss-scale[b-q08fgawlbp] {
    font-size: 11px;
    font-weight: 700;
    color: var(--ec-sub);
}
.ss-scale-pf[b-q08fgawlbp] { color: var(--ec-muted); font-style: italic; }

.ss-hours[b-q08fgawlbp] {
    font-size: 11.5px;
    color: var(--ec-text);
    font-weight: 600;
}

.ss-row-actions[b-q08fgawlbp] {
    display: flex;
    justify-content: flex-end;
    gap: 5px;
}
.ss-icon-btn[b-q08fgawlbp] {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--ec-bg);
    border: 1px solid var(--ec-border);
    cursor: pointer;
    color: var(--ec-sub);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
}
.ss-icon-btn:hover[b-q08fgawlbp] { background: #fff; color: var(--ec-text); }
.ss-icon-btn i[b-q08fgawlbp] { font-size: 13px; }

/* ── Editor slide-over ──────────────────────────────────────────────── */
.ss-editor-backdrop[b-q08fgawlbp] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 3000;
    display: flex;
    justify-content: flex-end;
}
.ss-editor[b-q08fgawlbp] {
    width: min(580px, 95%);
    height: 100%;
    background: #fff;
    box-shadow: -12px 0 40px rgba(13, 23, 51, 0.16);
    display: flex;
    flex-direction: column;
}

.ss-editor-head[b-q08fgawlbp] {
    padding: 20px 26px 14px;
    border-bottom: 1px solid var(--ec-border);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    position: relative;
}
.ss-editor-close[b-q08fgawlbp] {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--ec-border);
    cursor: pointer;
    font-size: 15px;
    color: var(--ec-sub);
    font-family: inherit;
    line-height: 1;
}
.ss-editor-close:hover[b-q08fgawlbp] { background: var(--ec-bg); }
.ss-editor-monogram[b-q08fgawlbp] {
    width: 48px;
    height: 48px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    flex-shrink: 0;
    letter-spacing: -0.02em;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.ss-editor-monogram i[b-q08fgawlbp] { font-size: 24px; font-family: bootstrap-icons; letter-spacing: 0; }
.ss-editor-head-text[b-q08fgawlbp] {
    flex: 1;
    min-width: 0;
    padding-right: 36px;
}
.ss-editor-kicker[b-q08fgawlbp] {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
}
.ss-editor-title[b-q08fgawlbp] {
    font-size: 18px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 3px 0 0;
    letter-spacing: -0.01em;
}

.ss-editor-body[b-q08fgawlbp] {
    padding: 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 13px;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.ss-fld[b-q08fgawlbp] { display: flex; flex-direction: column; }
.ss-fld-label[b-q08fgawlbp] {
    font-size: 10px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 4px 0;
}
.ss-fld-headrow[b-q08fgawlbp] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.ss-fld-headrow .ss-fld-label[b-q08fgawlbp] { margin: 0; }
.ss-fld-headrow-hint[b-q08fgawlbp] {
    font-size: 10.5px;
    color: var(--ec-muted);
    font-style: italic;
    margin: 0;
}
.ss-fld-input[b-q08fgawlbp] {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    font-size: 12.5px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    background: #fff;
}
.ss-fld-input:focus[b-q08fgawlbp] { border-color: var(--ec-blue); box-shadow: 0 0 0 2px rgba(59, 95, 192, 0.15); }
.ss-fld-input-mono[b-q08fgawlbp] {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-weight: 800;
    text-transform: uppercase;
}
.ss-fld-hint[b-q08fgawlbp] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 5px 0 0;
    font-style: italic;
    line-height: 1.5;
}
.ss-fld-grid-2[b-q08fgawlbp] { display: grid; grid-template-columns: 1fr 2fr; gap: 11px; }

/* Icon / color tile grids — both 8 across. */
.ss-icon-grid[b-q08fgawlbp],
.ss-color-grid[b-q08fgawlbp] {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 8px;
}
.ss-icon-tile[b-q08fgawlbp] {
    aspect-ratio: 1;
    border-radius: 9px;
    background: #fff;
    border: 1px solid var(--ec-border);
    cursor: pointer;
    font-family: inherit;
    color: var(--ec-sub);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: -0.02em;
    padding: 0;
}
.ss-icon-tile i[b-q08fgawlbp] { font-size: 17px; }
.ss-icon-tile-on-letters[b-q08fgawlbp] { border-width: 2px; }
.ss-icon-tile-on[b-q08fgawlbp] { border-width: 2px; }

.ss-color-tile[b-q08fgawlbp] {
    aspect-ratio: 1;
    border-radius: 9px;
    border: 1px solid var(--ec-border);
    cursor: pointer;
    font-family: inherit;
    padding: 0;
}
.ss-color-tile-on[b-q08fgawlbp] { border: 3px solid #fff; }

.ss-passfail-note[b-q08fgawlbp] {
    padding: 10px 12px;
    background: var(--ec-bg);
    border-radius: 9px;
    border: 1px dashed var(--ec-border);
    font-size: 11.5px;
    color: var(--ec-sub);
    line-height: 1.55;
}
.ss-passfail-note b[b-q08fgawlbp] { color: var(--ec-text); font-weight: 800; }

/* Per-stage offering rows. */
.ss-stages-list[b-q08fgawlbp] {
    background: var(--ec-bg);
    border-radius: 10px;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ss-stage-row[b-q08fgawlbp] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--ec-border-soft);
}
.ss-stage-row-off[b-q08fgawlbp] { opacity: 0.7; }
.ss-stage-label[b-q08fgawlbp] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 170px;
}
.ss-stage-icon[b-q08fgawlbp] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ss-stage-icon i[b-q08fgawlbp] { font-size: 16px; }
.ss-stage-name[b-q08fgawlbp] {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.ss-stage-grades[b-q08fgawlbp] {
    font-size: 10.5px;
    color: var(--ec-muted);
    font-weight: 700;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    margin: 1px 0 0;
}
.ss-stage-hours[b-q08fgawlbp] {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ss-stage-hours input[b-q08fgawlbp] {
    width: 64px;
    padding: 8px 9px;
    border: 1px solid var(--ec-border);
    border-radius: 7px;
    font-size: 13px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-weight: 800;
    text-align: center;
    outline: none;
    box-sizing: border-box;
    background: #fff;
    color: var(--ec-text);
}
.ss-stage-hours input:disabled[b-q08fgawlbp] {
    background: var(--ec-bg);
    color: var(--ec-muted);
    border-color: var(--ec-border-soft);
}
.ss-stage-hours span[b-q08fgawlbp] {
    font-size: 11px;
    color: var(--ec-sub);
    font-weight: 700;
}
.ss-stage-row-off .ss-stage-hours span[b-q08fgawlbp] { color: var(--ec-muted); }

.ss-toggle[b-q08fgawlbp] {
    width: 42px;
    height: 24px;
    border-radius: 12px;
    background: var(--ec-border-soft);
    border: none;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
}
.ss-toggle-knob[b-q08fgawlbp] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: left 0.15s;
}
.ss-toggle-on .ss-toggle-knob[b-q08fgawlbp] { left: 20px; }

/* Gradeable checkbox row. */
.ss-gradeable-row[b-q08fgawlbp] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--ec-bg);
    border-radius: 10px;
    cursor: pointer;
}
.ss-gradeable-row input[type="checkbox"][b-q08fgawlbp] {
    margin-top: 3px;
    accent-color: var(--ec-blue);
}
.ss-gradeable-title[b-q08fgawlbp] {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.ss-gradeable-sub[b-q08fgawlbp] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 3px 0 0;
    line-height: 1.55;
}
.ss-gradeable-sub b[b-q08fgawlbp] { color: var(--ec-sub); font-weight: 700; }

/* Footer. */
.ss-editor-foot[b-q08fgawlbp] {
    padding: 12px 24px;
    border-top: 1px solid var(--ec-border-soft);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
    background: #fff;
}
.ss-foot-delete[b-q08fgawlbp] {
    background: #fff;
    border: 1px solid rgba(220, 38, 38, 0.33);
    border-radius: 9px;
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ec-red);
    cursor: pointer;
    font-family: inherit;
    margin-right: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.ss-foot-delete:hover:not(:disabled)[b-q08fgawlbp] { background: var(--ec-red-lt); }
.ss-foot-delete:disabled[b-q08fgawlbp] { opacity: 0.6; cursor: not-allowed; }

.ss-foot-cancel[b-q08fgawlbp] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
}
.ss-foot-cancel:hover[b-q08fgawlbp] { background: var(--ec-bg); color: var(--ec-text); }

.ss-foot-save[b-q08fgawlbp] {
    background: var(--ec-primary);
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 8px 16px;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
}
.ss-foot-save:hover:not(:disabled)[b-q08fgawlbp] { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14); }
.ss-foot-save:disabled[b-q08fgawlbp] {
    background: var(--ec-border-soft);
    color: var(--ec-muted);
    cursor: not-allowed;
    box-shadow: none;
}

.ss-spinner-sm[b-q08fgawlbp] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ss-spin-b-q08fgawlbp 0.7s linear infinite;
}
/* /Components/Pages/Students/StudentEditor.razor.rz.scp.css */
/* StudentEditor — dedicated student form. Source of truth:
   prototype EduConnect All Roles.html lines 18908-19220 (AWStudentEditor).
   Pixel values transcribed verbatim from the inline JSX so the Blazor
   render matches the prototype rather than drifting into rem
   approximations. */

.se-backdrop[b-e1gw7sfkvf] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 3000;
    display: flex;
    justify-content: flex-end;
}
.se-drawer[b-e1gw7sfkvf] {
    width: min(820px, 96%);
    height: 100%;
    background: #fff;
    box-shadow: -12px 0 40px rgba(13, 23, 51, 0.16);
    display: flex;
    flex-direction: column;
}
.se-accent[b-e1gw7sfkvf] {
    height: 3px;
    background: var(--ec-green);
    flex-shrink: 0;
}

/* ── Header ────────────────────────────────────────────────────────── */
.se-head[b-e1gw7sfkvf] {
    padding: 14px 22px;
    border-bottom: 1px solid var(--ec-border-soft);
    display: flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
}
.se-head-icon[b-e1gw7sfkvf] {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--ec-green) 18%, transparent);
    color: var(--ec-green);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 22px;
}
.se-head-text[b-e1gw7sfkvf] { flex: 1; min-width: 0; }
.se-head-kicker[b-e1gw7sfkvf] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-green);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
}
.se-head-title[b-e1gw7sfkvf] {
    font-size: 17px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 2px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.se-head-close[b-e1gw7sfkvf] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--ec-border);
    font-size: 14px;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
}
.se-head-close:hover[b-e1gw7sfkvf] { background: var(--ec-bg); }

/* ── Body ──────────────────────────────────────────────────────────── */
.se-body[b-e1gw7sfkvf] {
    flex: 1;
    overflow-y: auto;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--ec-bg);
    min-height: 0;
}

.se-banner-error[b-e1gw7sfkvf] {
    padding: 10px 12px;
    background: var(--ec-red-lt);
    border-radius: 9px;
    color: var(--ec-red);
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.se-section-with-divider[b-e1gw7sfkvf] {
    padding-top: 14px;
    border-top: 1px solid var(--ec-border-soft);
}
.se-section-label[b-e1gw7sfkvf] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 7px;
}

.se-fld-label[b-e1gw7sfkvf] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 5px;
}
.se-fld-label-req[b-e1gw7sfkvf] {
    font-weight: 700;
    color: var(--ec-sub);
    letter-spacing: normal;
    text-transform: none;
    font-style: italic;
    margin-left: 4px;
}
.se-fld-label-hint[b-e1gw7sfkvf] {
    font-weight: 600;
    color: var(--ec-sub);
    letter-spacing: normal;
    text-transform: none;
    font-style: italic;
    margin-left: 6px;
}
.se-fld-hint[b-e1gw7sfkvf] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 4px 0 0;
    font-style: italic;
    line-height: 1.5;
}
.se-fld-hint-block[b-e1gw7sfkvf] { display: block; }
.se-fld-hint-leading[b-e1gw7sfkvf] { margin: 0 0 10px; }

.se-input[b-e1gw7sfkvf] {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    font-size: 12.5px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    background: #fff;
    color: var(--ec-text);
    margin-bottom: 10px;
}
.se-input:last-child[b-e1gw7sfkvf] { margin-bottom: 0; }
.se-input:focus[b-e1gw7sfkvf] { border-color: var(--ec-green); box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.15); }
.se-input:disabled[b-e1gw7sfkvf] { background: var(--ec-bg); color: var(--ec-muted); cursor: not-allowed; }
.se-input-bold[b-e1gw7sfkvf] { font-weight: 700; font-size: 13.5px; }
.se-input-mono[b-e1gw7sfkvf] { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 700; }
.se-input-strong[b-e1gw7sfkvf] { font-weight: 700; }

.se-grid-2[b-e1gw7sfkvf] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.se-grid-2-tight[b-e1gw7sfkvf] { margin-top: 10px; }
.se-grid-enroll[b-e1gw7sfkvf] {
    display: grid;
    grid-template-columns: 1fr 110px 1fr;
    gap: 10px;
    align-items: center;
}

/* Additional class/program rows mirror the primary row but with a 32px
   remove-× column at the end. */
.se-grid-extra[b-e1gw7sfkvf] {
    display: grid;
    grid-template-columns: 1fr 110px 1fr 32px;
    gap: 8px;
    margin-top: 6px;
    align-items: center;
}
.se-extra-remove[b-e1gw7sfkvf] {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    background: #fff;
    color: var(--ec-red);
    border: 1px solid var(--ec-border);
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    line-height: 1;
}
.se-extra-remove:hover[b-e1gw7sfkvf] { background: var(--ec-red-lt); }

.se-add-extra[b-e1gw7sfkvf] {
    margin-top: 10px;
    padding: 7px 12px;
    background: #fff;
    color: var(--ec-blue);
    border: 1px dashed rgba(59, 95, 192, 0.4);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.se-add-extra:hover[b-e1gw7sfkvf] { background: var(--ec-blue-lt); }

.se-fld-label-with-top[b-e1gw7sfkvf] { margin-top: 12px; }

/* Grid items inside the enrollment row need the default bottom margin
   off so each column aligns to the same baseline. */
.se-grid-enroll .se-input[b-e1gw7sfkvf],
.se-grid-extra .se-input[b-e1gw7sfkvf] { margin-bottom: 0; }

/* Compact size variant used in row contexts where vertical density
   matters more than the standalone field rhythm. */
.se-input-tight[b-e1gw7sfkvf] { margin-bottom: 0; }
.se-input-sm[b-e1gw7sfkvf] { padding: 7px 10px; font-size: 12px; }

/* ── Meals ──────────────────────────────────────────────────────────── */
.se-meal-card[b-e1gw7sfkvf] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 13px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    cursor: pointer;
}
.se-meal-card input[type="checkbox"][b-e1gw7sfkvf] {
    width: 16px;
    height: 16px;
    accent-color: var(--ec-green);
    margin-top: 2px;
    flex-shrink: 0;
}
.se-meal-card > div[b-e1gw7sfkvf] { flex: 1; min-width: 0; }
.se-meal-title[b-e1gw7sfkvf] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ec-text);
    margin: 0;
}
.se-meal-sub[b-e1gw7sfkvf] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 3px 0 0;
    line-height: 1.5;
}
.se-meal-pill[b-e1gw7sfkvf] {
    font-size: 9.5px;
    font-weight: 800;
    color: var(--ec-amber);
    background: var(--ec-amber-lt);
    padding: 3px 7px;
    border-radius: 5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex-shrink: 0;
    align-self: center;
}

/* ── Parents & guardians ────────────────────────────────────────────── */
.se-parent-card[b-e1gw7sfkvf] {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 13px;
    background: #fff;
    border: 1px solid var(--ec-border-soft);
    border-radius: 9px;
    margin-bottom: 6px;
}
.se-parent-avatar[b-e1gw7sfkvf] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ec-purple);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
    letter-spacing: 0.04em;
}
.se-parent-text[b-e1gw7sfkvf] { flex: 1; min-width: 0; }
.se-parent-name[b-e1gw7sfkvf] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ec-text);
    margin: 0;
}
.se-parent-meta[b-e1gw7sfkvf] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 2px 0 0;
}
.se-parent-unlink[b-e1gw7sfkvf] {
    padding: 5px 11px;
    background: #fff;
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: 7px;
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-red);
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.04em;
}
.se-parent-unlink:hover[b-e1gw7sfkvf] { background: var(--ec-red-lt); }

.se-parent-picker[b-e1gw7sfkvf] {
    background: #fff;
    border: 1px solid var(--ec-border-soft);
    border-radius: 9px;
    padding: 10px;
    margin-bottom: 8px;
}
.se-parent-search[b-e1gw7sfkvf] {
    position: relative;
    margin-bottom: 8px;
}
.se-parent-search i[b-e1gw7sfkvf] {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ec-muted);
    font-size: 13px;
}
.se-parent-search input[b-e1gw7sfkvf] {
    width: 100%;
    padding: 8px 32px 8px 32px;
    background: var(--ec-bg);
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    font-size: 12.5px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
}
.se-parent-search input:focus[b-e1gw7sfkvf] { border-color: var(--ec-green); }
.se-parent-clear[b-e1gw7sfkvf] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ec-border-soft);
    border: none;
    cursor: pointer;
    color: var(--ec-sub);
    font-size: 11px;
    line-height: 1;
}
.se-parent-row[b-e1gw7sfkvf] {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 10px;
    border-radius: 8px;
}
.se-parent-row:hover[b-e1gw7sfkvf] { background: var(--ec-bg); }
.se-parent-link[b-e1gw7sfkvf] {
    padding: 5px 11px;
    background: #fff;
    border: 1px solid var(--ec-green);
    border-radius: 7px;
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-green);
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.04em;
}
.se-parent-link:hover[b-e1gw7sfkvf] { background: var(--ec-green-lt); }

.se-link-parent-btn[b-e1gw7sfkvf] {
    width: 100%;
    padding: 9px;
    background: #fff;
    border: 1px dashed var(--ec-green);
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--ec-green);
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.se-link-parent-btn:hover[b-e1gw7sfkvf] { background: var(--ec-green-lt); }

.se-parent-avatar-pending[b-e1gw7sfkvf] { background: var(--ec-amber); }

/* Invite-by-email block at the bottom of the parent picker. */
.se-invite-divider[b-e1gw7sfkvf] {
    height: 1px;
    background: var(--ec-border-soft);
    margin: 10px -10px;
}
.se-invite-label[b-e1gw7sfkvf] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 8px;
}
.se-invite-row[b-e1gw7sfkvf] {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 8px;
    align-items: center;
}
.se-invite-btn[b-e1gw7sfkvf] {
    padding: 8px 14px;
    background: var(--ec-border-soft);
    color: var(--ec-muted);
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    cursor: not-allowed;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.se-invite-btn:not(:disabled)[b-e1gw7sfkvf] {
    background: var(--ec-green);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(22, 163, 74, 0.25);
}
.se-invite-btn:not(:disabled):hover[b-e1gw7sfkvf] { transform: translateY(-1px); }
.se-invite-btn i[b-e1gw7sfkvf] { font-size: 12px; }

/* ── Care & safety ─────────────────────────────────────────────────── */
.se-photo-row[b-e1gw7sfkvf] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 11px;
    cursor: pointer;
}
.se-photo-row input[type="checkbox"][b-e1gw7sfkvf] {
    width: 16px;
    height: 16px;
    accent-color: var(--ec-amber);
}
.se-photo-title[b-e1gw7sfkvf] {
    font-size: 12px;
    font-weight: 700;
    color: var(--ec-text);
}
.se-photo-sub[b-e1gw7sfkvf] {
    font-size: 11px;
    color: var(--ec-muted);
}

/* ── Student login ─────────────────────────────────────────────────── */
.se-login-row[b-e1gw7sfkvf] {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
}
.se-login-row input[type="checkbox"][b-e1gw7sfkvf] {
    width: 16px;
    height: 16px;
    accent-color: var(--ec-blue);
}
.se-login-title[b-e1gw7sfkvf] {
    font-size: 12px;
    font-weight: 700;
    color: var(--ec-text);
}
.se-login-extra[b-e1gw7sfkvf] { margin-top: 10px; }

/* ── Footer ────────────────────────────────────────────────────────── */
.se-foot[b-e1gw7sfkvf] {
    padding: 12px 22px;
    border-top: 1px solid var(--ec-border-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    background: #fff;
    box-shadow: 0 -4px 14px rgba(13, 23, 51, 0.04);
    flex-shrink: 0;
}
.se-foot-status[b-e1gw7sfkvf] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 0;
}
.se-foot-buttons[b-e1gw7sfkvf] {
    display: flex;
    gap: 7px;
}
.se-cancel[b-e1gw7sfkvf] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    padding: 9px 15px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
}
.se-cancel:hover[b-e1gw7sfkvf] { background: var(--ec-bg); color: var(--ec-text); }

.se-save[b-e1gw7sfkvf] {
    background: var(--ec-green);
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 6px rgba(22, 163, 74, 0.25);
}
.se-save:hover:not(:disabled)[b-e1gw7sfkvf] { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(22, 163, 74, 0.4); }
.se-save:disabled[b-e1gw7sfkvf] {
    background: var(--ec-border-soft);
    color: var(--ec-muted);
    cursor: not-allowed;
    box-shadow: none;
}

.se-spinner[b-e1gw7sfkvf] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: se-spin-b-e1gw7sfkvf 0.7s linear infinite;
}
@keyframes se-spin-b-e1gw7sfkvf { to { transform: rotate(360deg); } }

/* ── Profile photo block ──────────────────────────────────────────────
   Visual parity with .ued-photo-* in UserEditor: tile + paired
   Upload/Change pill + 32×32 trash icon. Native InputFile is hidden
   so only the styled button is visible. Staged bytes push on Save. */
.se-photo-block[b-e1gw7sfkvf] {
    display: flex;
    align-items: center;
    gap: 14px;
}
.se-photo-tile[b-e1gw7sfkvf] {
    width: 72px;
    height: 72px;
    border-radius: 14px;
    background: var(--ec-bg);
    border: 1px dashed var(--ec-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.se-photo-tile img[b-e1gw7sfkvf] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.se-photo-letters[b-e1gw7sfkvf] {
    font-size: 22px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.04em;
}
.se-photo-controls[b-e1gw7sfkvf] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.se-photo-buttons[b-e1gw7sfkvf] {
    display: flex;
    align-items: center;
    gap: 8px;
}
.se-photo-upload[b-e1gw7sfkvf] {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
}
/* `::deep` is required — <InputFile> is a Blazor child component, so
   the scoped `[b-xxxx]` attribute Blazor injects never lands on its
   rendered <input>. Without ::deep the rule wouldn't match and the
   native "Choose File" button stays visible. */
.se-photo-upload[b-e1gw7sfkvf]  input[type="file"] { display: none; }
.se-photo-upload > span[b-e1gw7sfkvf] {
    padding: 7px 13px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.2;
}
.se-photo-upload > span:hover[b-e1gw7sfkvf] { background: var(--ec-bg); color: var(--ec-text); }
.se-photo-remove[b-e1gw7sfkvf] {
    width: 32px;
    height: 32px;
    padding: 0;
    background: #fff;
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: 8px;
    color: var(--ec-red);
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.se-photo-remove i[b-e1gw7sfkvf] { font-size: 13px; }
.se-photo-remove:hover[b-e1gw7sfkvf] { background: var(--ec-red-lt); }
.se-photo-error[b-e1gw7sfkvf] {
    font-size: 11px;
    color: var(--ec-red);
    margin: 0;
}
.se-photo-status[b-e1gw7sfkvf] {
    font-size: 10.5px;
    color: var(--ec-muted);
    font-style: italic;
    margin: 0;
}

/* ── Crop modal ──────────────────────────────────────────────────
   z-index 3001 stacks above the editor drawer (3000) so the
   admin crops the freshly-picked image in place. */
.se-crop-backdrop[b-e1gw7sfkvf] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 3001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.se-crop-dialog[b-e1gw7sfkvf] {
    background: #fff;
    border-radius: 16px;
    width: min(560px, 100%);
    box-shadow: 0 24px 64px -16px rgba(15, 23, 42, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.se-crop-head[b-e1gw7sfkvf] {
    padding: 16px 20px;
    border-bottom: 1px solid var(--ec-border-soft);
    display: flex;
    align-items: center;
    gap: 12px;
}
.se-crop-icon[b-e1gw7sfkvf] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--ec-green) 14%, transparent);
    color: var(--ec-green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.se-crop-title[b-e1gw7sfkvf] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.se-crop-sub[b-e1gw7sfkvf] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 2px 0 0;
}
.se-crop-canvas[b-e1gw7sfkvf] {
    background: #0f172a;
    padding: 16px;
    max-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.se-crop-canvas img[b-e1gw7sfkvf] {
    max-width: 100%;
    max-height: 56vh;
    display: block;
}
.se-crop-foot[b-e1gw7sfkvf] {
    padding: 12px 20px;
    border-top: 1px solid var(--ec-border-soft);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
/* /Components/Pages/Students/StudentsPage.razor.rz.scp.css */
/* StudentsPage — admin students directory.
   Source of truth: prototype EduConnect All Roles.html lines 15122-15295
   (AWStudents). Pixel values transcribed verbatim from the inline JSX so
   the Blazor render matches the prototype rather than drifting into rem
   approximations. */

.sp-page[b-hdsk3i241p] {
    /* Outer page padding matches UsersPage (.up2-page) so the Students
       and Users surfaces align visually as you switch between them.
       Values come from the prototype's WebPage chrome (line 1338). */
    padding: 0;
    background: var(--ec-bg);
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ── Banners ─────────────────────────────────────────────────────────── */
.sp-banner[b-hdsk3i241p] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 600;
}
.sp-banner-error[b-hdsk3i241p] { background: var(--ec-red-lt); color: var(--ec-red); }
.sp-banner-close[b-hdsk3i241p] {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    font-size: 16px;
    padding: 0;
    line-height: 1;
}

.sp-loading[b-hdsk3i241p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 64px 32px;
    gap: 12px;
    color: var(--ec-muted);
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 14px;
}
.sp-spinner[b-hdsk3i241p] {
    width: 36px;
    height: 36px;
    border: 3px solid #e9eefb;
    border-top-color: var(--ec-blue);
    border-radius: 50%;
    animation: sp-spin-b-hdsk3i241p 0.75s linear infinite;
}
@keyframes sp-spin-b-hdsk3i241p { to { transform: rotate(360deg); } }

/* ── KPI strip (5 tiles) — prototype 15212-15218 ─────────────────────── */
.sp-kpi-grid[b-hdsk3i241p] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}
.sp-kpi[b-hdsk3i241p] {
    min-height: 96px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.sp-kpi-button[b-hdsk3i241p] {
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.sp-kpi-button:hover[b-hdsk3i241p] {
    border-color: var(--kpi-c, var(--ec-blue));
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}
.sp-kpi-icon[b-hdsk3i241p] {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 20px;
    color: var(--kpi-c, var(--ec-blue));
    background: color-mix(in srgb, var(--kpi-c, var(--ec-blue)) 14%, transparent);
}
.sp-kpi-body[b-hdsk3i241p] { flex: 1; min-width: 0; }
.sp-kpi-value[b-hdsk3i241p] {
    font-size: 22px;
    font-weight: 800;
    color: var(--ec-text);
    line-height: 1;
    letter-spacing: -0.02em;
}
.sp-kpi-label[b-hdsk3i241p] {
    font-size: 10px;
    font-weight: 700;
    color: var(--ec-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 6px;
}
.sp-kpi-sub[b-hdsk3i241p] {
    font-size: 11px;
    color: var(--ec-sub);
    margin-top: 3px;
}

@media (max-width: 1100px) { .sp-kpi-grid[b-hdsk3i241p] { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .sp-kpi-grid[b-hdsk3i241p] { grid-template-columns: repeat(2, 1fr); } }

/* ── Panel: filters + table ──────────────────────────────────────────── */
.sp-panel[b-hdsk3i241p] {
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--ec-border);
    overflow: hidden;
}
.sp-panel-head[b-hdsk3i241p] {
    padding: 12px 18px;
    border-bottom: 1px solid var(--ec-border);
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.sp-search[b-hdsk3i241p] {
    flex: 1;
    min-width: 200px;
    position: relative;
}
.sp-search i[b-hdsk3i241p] {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ec-muted);
    font-size: 13px;
}
.sp-search input[b-hdsk3i241p] {
    width: 100%;
    background: var(--ec-bg);
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    padding: 8px 12px 8px 32px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
}
.sp-search input:focus[b-hdsk3i241p] { border-color: var(--ec-blue); box-shadow: 0 0 0 2px rgba(59, 95, 192, 0.12); }

.sp-filter[b-hdsk3i241p] {
    padding: 8px 12px;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ec-sub);
    font-family: inherit;
    background: #fff;
    outline: none;
    cursor: pointer;
}
.sp-filter:focus[b-hdsk3i241p] { border-color: var(--ec-blue); }

/* Primary "Add student" CTA now uses the shared .ec-btn-primary (institution accent). */

/* ── Table — 6-column grid, header + rows. ─────────────────────────── */
.sp-thead[b-hdsk3i241p],
.sp-row[b-hdsk3i241p] {
    display: grid;
    grid-template-columns: 1.8fr 1.1fr 1.3fr 1.4fr 0.7fr 80px;
    align-items: center;
    gap: 8px;
}
.sp-thead[b-hdsk3i241p] {
    padding: 10px 18px;
    background: var(--ec-bg);
    font-size: 10px;
    font-weight: 700;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.sp-thead-open[b-hdsk3i241p] { text-align: right; }

.sp-row[b-hdsk3i241p] {
    padding: 12px 18px;
    border-top: 1px solid var(--ec-border-soft);
    cursor: pointer;
    transition: background 0.1s;
}
/* Subtle wash on hover — the prototype omits a hover background, but a
   light tint helps users see the row they're about to open. Kept faint
   so it doesn't overpower the cell colours (class chip, allergy red). */
.sp-row:hover[b-hdsk3i241p] { background: #fbfcfe; }

.sp-row-empty[b-hdsk3i241p] {
    padding: 40px 20px;
    text-align: center;
    color: var(--ec-muted);
    font-size: 13px;
    border-top: 1px solid var(--ec-border-soft);
}

.sp-cell-student[b-hdsk3i241p] {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}
.sp-avatar[b-hdsk3i241p] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
    letter-spacing: 0.04em;
}
.sp-cell-text[b-hdsk3i241p] { min-width: 0; }
.sp-cell-name[b-hdsk3i241p] {
    font-size: 13px;
    font-weight: 700;
    color: var(--ec-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}
.sp-cell-meta[b-hdsk3i241p] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 1px 0 0;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    letter-spacing: 0.02em;
}
.sp-cell-meta span[b-hdsk3i241p] { font-family: inherit; }

.sp-class-name[b-hdsk3i241p] {
    font-size: 12px;
    font-weight: 700;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sp-class-sub[b-hdsk3i241p] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 1px 0 0;
}

.sp-needs-pill[b-hdsk3i241p] {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 800;
    color: var(--ec-amber);
    background: var(--ec-amber-lt);
    padding: 3px 7px;
    border-radius: 5px;
    letter-spacing: 0.04em;
}

.sp-guardians[b-hdsk3i241p] {
    font-size: 11.5px;
    color: var(--ec-sub);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}
.sp-guardians-none[b-hdsk3i241p] { color: var(--ec-muted); font-style: italic; }

.sp-health[b-hdsk3i241p] { min-width: 0; }
.sp-health-allergy[b-hdsk3i241p] {
    font-size: 10.5px;
    color: var(--ec-red);
    font-weight: 800;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.sp-health-medical[b-hdsk3i241p] {
    font-size: 10.5px;
    color: var(--ec-amber);
    font-weight: 700;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.sp-health-photo[b-hdsk3i241p] {
    font-size: 9.5px;
    color: #92400e;
    font-weight: 800;
    margin: 2px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.sp-health-none[b-hdsk3i241p] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 0;
}

.sp-pill[b-hdsk3i241p] {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    justify-self: flex-start;
}
.sp-pill-active[b-hdsk3i241p]   { background: var(--ec-green-lt); color: var(--ec-green); }
.sp-pill-inactive[b-hdsk3i241p] { background: var(--ec-border-soft); color: var(--ec-muted); }

.sp-chevron[b-hdsk3i241p] {
    text-align: right;
    color: var(--ec-muted);
    font-size: 18px;
    line-height: 1;
}

/* ── Detail drawer ───────────────────────────────────────────────────── */
.sp-drawer-backdrop[b-hdsk3i241p] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 3000;
    display: flex;
    justify-content: flex-end;
}
.sp-drawer[b-hdsk3i241p] {
    width: min(560px, 95%);
    height: 100%;
    background: #fff;
    box-shadow: -12px 0 40px rgba(13, 23, 51, 0.16);
    display: flex;
    flex-direction: column;
}
.sp-drawer-head[b-hdsk3i241p] {
    padding: 20px 26px 16px;
    border-bottom: 1px solid var(--ec-border);
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    position: relative;
}
.sp-drawer-close[b-hdsk3i241p] {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--ec-border);
    cursor: pointer;
    font-size: 15px;
    color: var(--ec-sub);
    line-height: 1;
}
.sp-drawer-close:hover[b-hdsk3i241p] { background: var(--ec-bg); }
.sp-drawer-avatar[b-hdsk3i241p] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    flex-shrink: 0;
    letter-spacing: 0.04em;
}
.sp-drawer-head-text[b-hdsk3i241p] { flex: 1; min-width: 0; padding-right: 36px; }
.sp-drawer-kicker[b-hdsk3i241p] {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
}
.sp-drawer-title[b-hdsk3i241p] {
    font-size: 19px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 3px 0 0;
    letter-spacing: -0.01em;
}
.sp-drawer-sub[b-hdsk3i241p] {
    font-size: 12px;
    color: var(--ec-sub);
    margin: 4px 0 0;
}

.sp-drawer-body[b-hdsk3i241p] {
    flex: 1;
    overflow-y: auto;
    padding: 18px 26px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-section[b-hdsk3i241p] { display: flex; flex-direction: column; gap: 6px; }
.sp-section-label[b-hdsk3i241p] {
    font-size: 10px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}
.sp-list[b-hdsk3i241p] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sp-list-item[b-hdsk3i241p] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 10px;
    background: var(--ec-bg);
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--ec-text);
    font-weight: 600;
}
.sp-list-meta[b-hdsk3i241p] {
    font-size: 10.5px;
    color: var(--ec-muted);
    font-weight: 600;
}
.sp-empty-line[b-hdsk3i241p] {
    font-size: 11.5px;
    color: var(--ec-muted);
    font-style: italic;
    margin: 0;
}

.sp-health-list[b-hdsk3i241p] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sp-health-list li[b-hdsk3i241p] {
    display: grid;
    grid-template-columns: 130px 1fr;
    align-items: baseline;
    padding: 8px 10px;
    background: var(--ec-bg);
    border-radius: 8px;
    font-size: 12px;
}
.sp-health-list-key[b-hdsk3i241p] {
    font-size: 10px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.sp-health-list-val[b-hdsk3i241p] { color: var(--ec-text); }
.sp-health-list-empty[b-hdsk3i241p]   { color: var(--ec-muted); }
.sp-health-list-allergy[b-hdsk3i241p] { color: var(--ec-red);   font-weight: 700; }
.sp-health-list-medical[b-hdsk3i241p] { color: var(--ec-amber); font-weight: 700; }
.sp-health-list-warn[b-hdsk3i241p]    { color: #92400e;         font-weight: 700; }

.sp-drawer-foot[b-hdsk3i241p] {
    padding: 12px 26px;
    border-top: 1px solid var(--ec-border-soft);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    background: #fff;
    flex-shrink: 0;
}
.sp-foot-cancel[b-hdsk3i241p] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    padding: 9px 16px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
}
.sp-foot-cancel:hover[b-hdsk3i241p] { background: var(--ec-bg); color: var(--ec-text); }

.sp-foot-save[b-hdsk3i241p] {
    background: var(--ec-purple);
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 9px 18px;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 6px rgba(124, 58, 237, 0.3);
}
.sp-foot-save:hover:not(:disabled)[b-hdsk3i241p] { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4); }
.sp-foot-save:disabled[b-hdsk3i241p] { background: var(--ec-border-soft); color: var(--ec-muted); cursor: not-allowed; box-shadow: none; }

/* ── Drawer wider + tab rail ─────────────────────────────────────────── */
.sp-drawer[b-hdsk3i241p] { width: min(720px, 95%); }

.sp-drawer-head[b-hdsk3i241p] {
    padding: 20px 26px 14px;
}
.sp-drawer-head-row[b-hdsk3i241p] { display: flex; align-items: center; gap: 13px; }
.sp-drawer-avatar[b-hdsk3i241p] {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 800;
    flex-shrink: 0;
    letter-spacing: 0.04em;
}
.sp-drawer-head-text[b-hdsk3i241p] { flex: 1; min-width: 0; padding-right: 36px; }
.sp-drawer-title-row[b-hdsk3i241p] {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}
.sp-drawer-title[b-hdsk3i241p] {
    font-size: 19px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
    letter-spacing: -0.01em;
}
.sp-drawer-sub[b-hdsk3i241p] {
    font-size: 12px;
    color: var(--ec-muted);
    margin: 4px 0 0;
}

/* Body wrap = rail (left) + content (right). */
.sp-drawer-body-wrap[b-hdsk3i241p] {
    flex: 1;
    display: flex;
    min-height: 0;
}
.sp-rail[b-hdsk3i241p] {
    width: 78px;
    flex-shrink: 0;
    background: var(--ec-bg);
    border-right: 1px solid var(--ec-border-soft);
    padding: 10px 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
}
.sp-rail-btn[b-hdsk3i241p] {
    padding: 10px 4px;
    border-radius: 9px;
    position: relative;
    background: transparent;
    border: 1px solid transparent;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    transition: all 0.12s;
}
.sp-rail-btn:hover[b-hdsk3i241p] { background: #fff; }
.sp-rail-btn i[b-hdsk3i241p] { font-size: 18px; }
.sp-rail-btn span[b-hdsk3i241p] {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-align: center;
}
.sp-rail-btn-on[b-hdsk3i241p] {
    background: #fff;
    border-color: rgba(124, 58, 237, 0.18);
    color: var(--ec-purple);
    box-shadow: 0 1px 4px rgba(124, 58, 237, 0.12);
}
.sp-rail-btn-on span[b-hdsk3i241p] { font-weight: 800; }
.sp-rail-indicator[b-hdsk3i241p] {
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--ec-purple);
}

.sp-tab-body[b-hdsk3i241p] {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px;
    min-width: 0;
}

/* ── Profile tab: ID card ───────────────────────────────────────────── */
.sp-idcard[b-hdsk3i241p] {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 14px 16px;
    border: 1px solid;
    border-radius: 12px;
    margin-bottom: 18px;
}
.sp-idcard-avatar[b-hdsk3i241p] {
    width: 84px;
    height: 84px;
    border-radius: 14px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 800;
    flex-shrink: 0;
}
.sp-idcard-text[b-hdsk3i241p] { flex: 1; min-width: 0; }
.sp-idcard-kicker[b-hdsk3i241p] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 3px 0;
}
.sp-idcard-id[b-hdsk3i241p] {
    font-size: 18px;
    font-weight: 800;
    color: var(--ec-text);
    letter-spacing: -0.01em;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    margin: 0;
}
.sp-idcard-fields[b-hdsk3i241p] {
    display: flex;
    gap: 14px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.sp-idcard-field-label[b-hdsk3i241p] {
    font-size: 10px;
    font-weight: 700;
    color: var(--ec-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0;
}
.sp-idcard-field-value[b-hdsk3i241p] {
    font-size: 13px;
    font-weight: 700;
    color: var(--ec-text);
    margin: 1px 0 0;
}

.sp-upload-btn[b-hdsk3i241p] {
    padding: 7px 12px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}
.sp-upload-btn:disabled[b-hdsk3i241p] { cursor: default; opacity: 0.7; }
.sp-upload-btn i[b-hdsk3i241p] { font-size: 12px; }
/* The label wraps an <InputFile> — hide its native file input; the label is
   the clickable affordance. ::deep is required because the <input> is rendered
   by the InputFile child component, so it doesn't carry this component's scope
   attribute. */
.sp-upload-btn[b-hdsk3i241p]  input[type="file"] { display: none; }

/* ── Profile tab: personal info + contact + notes ────────────────────── */
.sp-pi-block[b-hdsk3i241p] { margin-bottom: 18px; }
.sp-section-label-aux[b-hdsk3i241p] {
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ec-muted);
}

.sp-pi-grid[b-hdsk3i241p] { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.sp-pi-card[b-hdsk3i241p] {
    padding: 11px 13px;
    background: var(--ec-bg);
    border-radius: 9px;
}
.sp-pi-card-wide[b-hdsk3i241p] { margin-top: 9px; }
.sp-pi-card-head[b-hdsk3i241p] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}
.sp-pi-card-head i[b-hdsk3i241p] { font-size: 13px; color: var(--ec-muted); }
.sp-pi-card-head span[b-hdsk3i241p] {
    font-size: 10px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.sp-pi-card-value[b-hdsk3i241p] {
    font-size: 13px;
    font-weight: 700;
    color: var(--ec-text);
    margin: 0;
}
.sp-pi-card-value-muted[b-hdsk3i241p] { color: var(--ec-muted); font-weight: 500; }

.sp-contact-card[b-hdsk3i241p] {
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--ec-border-soft);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 8px;
}
.sp-contact-card-small[b-hdsk3i241p] {
    padding: 10px 13px;
    margin-bottom: 6px;
}
.sp-contact-avatar[b-hdsk3i241p] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
    letter-spacing: 0.04em;
}
.sp-contact-avatar-sm[b-hdsk3i241p] { width: 30px; height: 30px; font-size: 11px; }
.sp-contact-text[b-hdsk3i241p] { flex: 1; min-width: 0; }
.sp-contact-name-row[b-hdsk3i241p] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
    flex-wrap: wrap;
}
.sp-contact-name[b-hdsk3i241p] {
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.sp-contact-tag[b-hdsk3i241p] {
    font-size: 9px;
    font-weight: 800;
    color: var(--ec-pink, #d63677);
    background: rgba(214, 54, 119, 0.12);
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.04em;
}
.sp-contact-meta[b-hdsk3i241p] {
    font-size: 11.5px;
    color: var(--ec-sub);
    margin: 0;
}
.sp-message-btn[b-hdsk3i241p] {
    padding: 5px 10px;
    background: var(--ec-blue-gh, #f4f6fc);
    border: 1px solid var(--ec-blue-lt);
    border-radius: 7px;
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-blue);
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}
.sp-message-btn:disabled[b-hdsk3i241p] { cursor: default; opacity: 0.6; }

.sp-amber-callout[b-hdsk3i241p] {
    padding: 11px 14px;
    background: var(--ec-amber-lt);
    border: 1px solid #fde68a;
    border-radius: 10px;
    margin-bottom: 8px;
}
.sp-amber-title[b-hdsk3i241p] {
    font-size: 12px;
    font-weight: 700;
    color: #92400e;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.sp-amber-sub[b-hdsk3i241p] {
    font-size: 11px;
    color: var(--ec-sub);
    margin: 3px 0 0;
    line-height: 1.5;
}

.sp-own-contact[b-hdsk3i241p] {
    padding: 10px 13px;
    background: var(--ec-bg);
    border-radius: 9px;
    margin-top: 6px;
}
.sp-own-contact-label[b-hdsk3i241p] {
    font-size: 10px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 4px;
}
.sp-own-contact-value[b-hdsk3i241p] {
    font-size: 12px;
    color: var(--ec-text);
    margin: 0;
}
.sp-own-contact-note[b-hdsk3i241p] {
    font-size: 10px;
    color: var(--ec-muted);
    margin: 3px 0 0;
    font-style: italic;
}

.sp-notes-box[b-hdsk3i241p] {
    padding: 12px 14px;
    background: var(--ec-bg);
    border: 1px dashed var(--ec-border);
    border-radius: 10px;
    font-size: 13px;
    color: var(--ec-muted);
    line-height: 1.6;
    font-style: italic;
    min-height: 42px;
}

/* ── Enroll / Family / Health / Academic / Billing / Access tabs ─────── */
.sp-enroll-card[b-hdsk3i241p] {
    padding: 13px 14px;
    border: 1px solid;
    border-radius: 10px;
    margin-bottom: 8px;
}
.sp-enroll-card-main[b-hdsk3i241p] {
    background: var(--ec-blue-gh, #f4f6fc);
    border-color: var(--ec-blue-lt);
}
.sp-enroll-card-program[b-hdsk3i241p] {
    background: var(--ec-amber-lt);
    border-color: #fde68a;
}
.sp-enroll-card-head[b-hdsk3i241p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sp-enroll-card-name[b-hdsk3i241p] {
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.sp-enroll-card-kind[b-hdsk3i241p] {
    font-size: 9.5px;
    font-weight: 800;
    background: #fff;
    padding: 3px 7px;
    border-radius: 5px;
    letter-spacing: 0.04em;
}
.sp-enroll-kind-main[b-hdsk3i241p]    { color: var(--ec-blue); }
.sp-enroll-kind-program[b-hdsk3i241p] { color: var(--ec-amber); }

.sp-guardian-card[b-hdsk3i241p] {
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--ec-border-soft);
    border-radius: 10px;
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    gap: 11px;
}
.sp-guardian-text[b-hdsk3i241p] { flex: 1; min-width: 0; }
.sp-guardian-name[b-hdsk3i241p] {
    font-size: 13px;
    font-weight: 700;
    color: var(--ec-text);
    margin: 0;
}
.sp-guardian-meta[b-hdsk3i241p] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 2px 0 0;
}

.sp-empty-box[b-hdsk3i241p] {
    padding: 16px;
    background: var(--ec-bg);
    border-radius: 10px;
    text-align: center;
}
.sp-empty-box p[b-hdsk3i241p] {
    font-size: 12px;
    color: var(--ec-muted);
    font-style: italic;
    margin: 0;
}

.sp-field-row[b-hdsk3i241p] {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 11px;
    padding: 10px 0;
    border-top: 1px solid var(--ec-border-soft);
}
.sp-field-label[b-hdsk3i241p] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
}
.sp-field-value[b-hdsk3i241p] {
    font-size: 13px;
    color: var(--ec-text);
    line-height: 1.5;
    margin: 0;
}
.sp-field-value-empty[b-hdsk3i241p] { color: var(--ec-muted); }
.sp-field-value-red[b-hdsk3i241p]   { color: var(--ec-red);   font-weight: 700; }
.sp-field-value-amber[b-hdsk3i241p] { color: var(--ec-amber); font-weight: 700; }

.sp-amber-note[b-hdsk3i241p] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 14px 0 0;
    line-height: 1.55;
    padding: 12px 14px;
    background: var(--ec-amber-lt);
    border-radius: 9px;
}
.sp-amber-note b[b-hdsk3i241p] { color: #92400e; }

.sp-acad-grid[b-hdsk3i241p] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}
.sp-acad-tile[b-hdsk3i241p] { padding: 12px 14px; border-radius: 10px; }
.sp-acad-tile-blue[b-hdsk3i241p]   { background: var(--ec-blue-gh, #f4f6fc); }
.sp-acad-tile-green[b-hdsk3i241p]  { background: var(--ec-green-lt); }
.sp-acad-tile-purple[b-hdsk3i241p] { background: rgba(124, 58, 237, 0.1); }
.sp-acad-tile-label[b-hdsk3i241p] {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0;
}
.sp-acad-tile-blue   .sp-acad-tile-label[b-hdsk3i241p] { color: var(--ec-blue); }
.sp-acad-tile-green  .sp-acad-tile-label[b-hdsk3i241p] { color: var(--ec-green); }
.sp-acad-tile-purple .sp-acad-tile-label[b-hdsk3i241p] { color: var(--ec-purple); }
.sp-acad-tile-value[b-hdsk3i241p] {
    font-size: 20px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 3px 0 0;
}
.sp-academic-note[b-hdsk3i241p] {
    font-size: 11.5px;
    color: var(--ec-sub);
    line-height: 1.5;
    margin: 0;
}

.sp-access-actions[b-hdsk3i241p] { display: flex; gap: 7px; margin-top: 14px; }
.sp-access-btn[b-hdsk3i241p] {
    flex: 1;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
}
.sp-access-btn:disabled[b-hdsk3i241p] { cursor: default; opacity: 0.6; }
.sp-access-btn-amber[b-hdsk3i241p] { color: var(--ec-amber); }

/* Spinner used by the drawer's Save button. */
.sp-spinner-sm[b-hdsk3i241p] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: sp-spin-b-hdsk3i241p 0.7s linear infinite;
}

/* ── Confirm modal (Reset password + Activate/Deactivate from Access tab) ─ */
.sp-confirm-backdrop[b-hdsk3i241p] {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.6);
    z-index: 3100;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.sp-confirm-dialog[b-hdsk3i241p] {
    background: #fff;
    border-radius: 14px;
    width: min(460px, 100%);
    padding: 22px 24px;
    box-shadow: 0 20px 60px -10px rgba(15, 23, 42, 0.35);
}
.sp-confirm-eyebrow[b-hdsk3i241p] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-amber);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.sp-confirm-eyebrow i[b-hdsk3i241p] { font-size: 12px; }
.sp-confirm-title[b-hdsk3i241p] {
    font-size: 16px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 8px 0 0;
    line-height: 1.35;
}
.sp-confirm-body[b-hdsk3i241p] {
    font-size: 12.5px;
    color: var(--ec-sub);
    margin: 10px 0 0;
    line-height: 1.55;
}
.sp-confirm-actions[b-hdsk3i241p] {
    display: flex;
    gap: 8px;
    margin-top: 20px;
    justify-content: flex-end;
}

/* ── Absence Notices tab (admin student detail) ────────────────────────
   Read-only audit trail; mirrors the prototype's admin-scope panel. */

.sp-absence-head[b-hdsk3i241p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.sp-absence-title[b-hdsk3i241p] {
    margin: 0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--ec-text);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.sp-absence-pending-pill[b-hdsk3i241p] {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(59, 95, 192, 0.12);
    color: var(--ec-blue, #3b5fc0);
    border: 1px solid rgba(59, 95, 192, 0.25);
}
.sp-absence-loading[b-hdsk3i241p] {
    color: var(--ec-muted);
    font-size: 13px;
    text-align: center;
    padding: 24px 0;
}
.sp-absence-list[b-hdsk3i241p] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sp-absence-card[b-hdsk3i241p] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 11px;
    padding: 12px 14px;
}
.sp-absence-row[b-hdsk3i241p] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
}
.sp-absence-status[b-hdsk3i241p] {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
}
.sp-absence-status--pending[b-hdsk3i241p] { background: rgba(59, 95, 192, 0.10); color: #3b5fc0; border-color: rgba(59, 95, 192, 0.22); }
.sp-absence-status--ok[b-hdsk3i241p]      { background: rgba(22, 163, 74, 0.10); color: #16a34a; border-color: rgba(22, 163, 74, 0.22); }
.sp-absence-status--warn[b-hdsk3i241p]    { background: rgba(245, 158, 11, 0.12); color: #b45309; border-color: rgba(245, 158, 11, 0.28); }
.sp-absence-status--muted[b-hdsk3i241p]   { background: #f1f5f9; color: #64748b; border-color: #e2e8f0; }
.sp-absence-reason[b-hdsk3i241p] {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 2px 7px;
    border-radius: 5px;
    background: rgba(245, 158, 11, 0.10);
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, 0.25);
}
.sp-absence-date[b-hdsk3i241p] { font-weight: 700; color: var(--ec-text); }
.sp-absence-from[b-hdsk3i241p] { color: var(--ec-muted); }
.sp-absence-note[b-hdsk3i241p] {
    margin: 10px 0 0;
    font-style: italic;
    color: var(--ec-text);
    background: var(--ec-bg, #f8fafc);
    border-left: 3px solid #cbd5e1;
    padding: 8px 12px;
    border-radius: 0 6px 6px 0;
    font-size: 13px;
    line-height: 1.45;
}
.sp-absence-doc[b-hdsk3i241p] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 7px 12px;
    background: color-mix(in srgb, var(--ec-blue, #3b5fc0) 8%, #fff);
    border: 1px solid color-mix(in srgb, var(--ec-blue, #3b5fc0) 22%, transparent);
    border-radius: 8px;
    text-decoration: none;
    color: var(--ec-text);
    font-size: 13px;
    transition: background .12s;
}
.sp-absence-doc:hover[b-hdsk3i241p] { background: color-mix(in srgb, var(--ec-blue, #3b5fc0) 14%, #fff); }
.sp-absence-doc .bi-paperclip[b-hdsk3i241p] { color: var(--ec-blue, #3b5fc0); }
.sp-absence-doc-name[b-hdsk3i241p] { font-weight: 700; }
.sp-absence-doc-size[b-hdsk3i241p] { color: var(--ec-muted); }
.sp-absence-doc-arrow[b-hdsk3i241p] { color: var(--ec-muted); font-size: 11px; }
.sp-absence-nodoc[b-hdsk3i241p] {
    margin: 10px 0 0;
    font-size: 12px;
    color: #b45309;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.sp-absence-foot[b-hdsk3i241p] {
    margin: 10px 0 0;
    font-size: 11px;
    color: var(--ec-muted);
    display: flex;
    align-items: center;
    gap: 5px;
}
.sp-absence-scope[b-hdsk3i241p] {
    margin-top: 14px;
    padding: 12px 14px;
    background: rgba(59, 95, 192, 0.06);
    border: 1px solid rgba(59, 95, 192, 0.18);
    border-radius: 10px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 13px;
    color: var(--ec-text);
    line-height: 1.5;
}
.sp-absence-scope .bi[b-hdsk3i241p] { color: var(--ec-blue, #3b5fc0); font-size: 16px; flex-shrink: 0; margin-top: 2px; }
.sp-absence-scope p[b-hdsk3i241p] { margin: 0; }
/* /Components/Pages/Student/StudentClassmatesPage.razor.rz.scp.css */
/* StudentClassmatesPage — scoped CSS. Mirrors SWClassmates (proto 13701-13782). */

.scm-page[b-6ck6kpaxcv] {
    padding: 0;
    background: var(--ec-bg);
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.scm-title[b-6ck6kpaxcv] {
    font-size: 22px;
    font-weight: 800;
    color: var(--ec-text);
    letter-spacing: -0.01em;
    margin: 0;
}
.scm-subtitle[b-6ck6kpaxcv] {
    font-size: 12.5px;
    color: var(--ec-sub);
    margin: 4px 0 0;
}

.scm-meta[b-6ck6kpaxcv] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--ec-muted);
}
.scm-meta-count[b-6ck6kpaxcv] { font-weight: 800; color: var(--ec-text); }
.scm-meta-sep[b-6ck6kpaxcv] { color: var(--ec-faint); }
.scm-meta-class[b-6ck6kpaxcv] { font-weight: 700; }

/* ── Grid ─────────────────────────────────────────────── */
.scm-grid[b-6ck6kpaxcv] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}
.scm-tile[b-6ck6kpaxcv] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    padding: 18px 14px 14px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: transform .12s ease, box-shadow .12s ease;
}
.scm-tile:hover[b-6ck6kpaxcv] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px -8px rgba(13, 23, 51, .15);
}
.scm-avatar[b-6ck6kpaxcv] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--accent, var(--ec-blue));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    font-weight: 800;
    object-fit: cover;
}
.scm-avatar--img[b-6ck6kpaxcv] { background: var(--ec-bg); }
.scm-name[b-6ck6kpaxcv] {
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 4px 0 0;
    line-height: 1.3;
}
.scm-sub[b-6ck6kpaxcv] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 2px 0 0;
}
.scm-msg-btn[b-6ck6kpaxcv] {
    margin-top: 6px;
    padding: 7px 14px;
    background: var(--ec-blue-lt);
    color: var(--ec-blue);
    border: 1px solid color-mix(in srgb, var(--ec-blue) 25%, transparent);
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 800;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-family: inherit;
}
.scm-msg-btn:hover[b-6ck6kpaxcv] {
    background: var(--ec-blue);
    color: #fff;
    border-color: var(--ec-blue);
}
.scm-msg-btn--disabled[b-6ck6kpaxcv] {
    background: var(--ec-border-soft);
    color: var(--ec-muted);
    border-color: var(--ec-border);
    cursor: not-allowed;
}
.scm-msg-btn--disabled:hover[b-6ck6kpaxcv] { background: var(--ec-border-soft); color: var(--ec-muted); }

/* ── Empty state ─────────────────────────────────────── */
.scm-empty[b-6ck6kpaxcv] {
    background: #fff;
    border: 1px dashed var(--ec-border);
    border-radius: 14px;
    padding: 48px 28px;
    text-align: center;
}
.scm-empty-icon[b-6ck6kpaxcv] {
    font-size: 38px;
    color: var(--ec-faint);
    margin-bottom: 10px;
    display: block;
}
.scm-empty-title[b-6ck6kpaxcv] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.scm-empty-sub[b-6ck6kpaxcv] {
    font-size: 12px;
    color: var(--ec-muted);
    margin: 5px auto 0;
    max-width: 380px;
}
/* /Components/Pages/Student/StudentDashboard.razor.rz.scp.css */
/* StudentDashboard — scoped CSS. Pixel-faithful port of SWHome
   (prototype EduConnect All Roles.html, lines 12068–12471). */

.sw-page[b-yqjs6xi0ql] {
    padding: 0;
    background: var(--ec-bg);
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Rows / grids ─────────────────────────────── */
.sw-row[b-yqjs6xi0ql] { display: grid; gap: 14px; }
.sw-row1[b-yqjs6xi0ql] { grid-template-columns: 1.6fr 1fr; }
.sw-row2[b-yqjs6xi0ql] { grid-template-columns: 1.5fr 1fr 1.1fr; }
.sw-row3[b-yqjs6xi0ql] { grid-template-columns: 1.1fr 1.3fr 1fr; }
.sw-row4[b-yqjs6xi0ql] { grid-template-columns: 1.4fr 1fr; }
/* No announcement → study-plan card fills the row instead of floating narrow. */
.sw-row4--solo[b-yqjs6xi0ql] { grid-template-columns: 1fr; }

@media (max-width: 1100px) {
    .sw-row1[b-yqjs6xi0ql], .sw-row2[b-yqjs6xi0ql], .sw-row3[b-yqjs6xi0ql], .sw-row4[b-yqjs6xi0ql] { grid-template-columns: 1fr; }
}

/* ── Shared card ──────────────────────────────── */
.sw-card[b-yqjs6xi0ql] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    overflow: hidden;
}
.sw-card-head[b-yqjs6xi0ql] {
    padding: 14px 18px;
    border-bottom: 1px solid var(--ec-border-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.sw-card-head--plain[b-yqjs6xi0ql] { justify-content: flex-start; }
.sw-card-head--compact[b-yqjs6xi0ql] { padding: 12px 18px; }
.sw-card-title[b-yqjs6xi0ql] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.sw-card-sub[b-yqjs6xi0ql] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 2px 0 0;
}
.sw-card-link[b-yqjs6xi0ql] {
    background: none;
    border: none;
    color: var(--ec-blue);
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
}
.sw-card-link:hover[b-yqjs6xi0ql] { text-decoration: underline; }

.sw-muted[b-yqjs6xi0ql] { color: var(--ec-muted); }
.sw-text[b-yqjs6xi0ql] { color: var(--ec-text); }
.sw-mono[b-yqjs6xi0ql] { font-family: ui-monospace, "SF Mono", monospace; }
.sw-dot-sep[b-yqjs6xi0ql] { opacity: 0.6; margin: 0 1px; }
.sw-divider-top[b-yqjs6xi0ql] { border-top: 1px solid var(--ec-border-soft); }

/* ── 1) Hero ──────────────────────────────────── */
.sw-hero[b-yqjs6xi0ql] {
    background: linear-gradient(120deg, #0891b2 0%, #0e7490 55%, #1e40af 130%);
    border-radius: 16px;
    padding: 22px 26px;
    color: #fff;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 200px;
}
.sw-hero-grid[b-yqjs6xi0ql] {
    position: absolute;
    inset: 0;
    opacity: 0.08;
    pointer-events: none;
}
.sw-hero-top[b-yqjs6xi0ql] { position: relative; }
.sw-hero-eyebrow[b-yqjs6xi0ql] {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, .7);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0 0 8px;
}
.sw-hero-title[b-yqjs6xi0ql] {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin: 0 0 7px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.sw-wave[b-yqjs6xi0ql] { flex-shrink: 0; }
.sw-hero-sub[b-yqjs6xi0ql] {
    font-size: 14px;
    color: rgba(255, 255, 255, .85);
    line-height: 1.5;
    max-width: 480px;
    margin: 0;
}
.sw-hero-sub :deep(b)[b-yqjs6xi0ql] { color: #fff; }
.sw-hero-actions[b-yqjs6xi0ql] {
    position: relative;
    display: flex;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.sw-hero-btn[b-yqjs6xi0ql] {
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .28);
    color: #fff;
    border-radius: 9px;
    padding: 8px 13px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.sw-hero-btn:hover[b-yqjs6xi0ql] { background: rgba(255, 255, 255, .26); }
.sw-hero-btn i[b-yqjs6xi0ql] { font-size: 12px; }

/* ── 2) Right-now card ────────────────────────── */
.sw-rightnow[b-yqjs6xi0ql] {
    background: #fff;
    border-radius: 16px;
    padding: 18px 20px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.sw-rightnow-glow[b-yqjs6xi0ql] { position: absolute; inset: 0; pointer-events: none; }
.sw-rightnow-body[b-yqjs6xi0ql] { position: relative; }
.sw-status[b-yqjs6xi0ql] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
}
.sw-status-dot[b-yqjs6xi0ql] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ec-faint);
    flex-shrink: 0;
}
.sw-status-dot--inClass[b-yqjs6xi0ql] {
    background: var(--ec-green);
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .22);
    animation: sw-pulse-b-yqjs6xi0ql 2s infinite;
}
.sw-status-dot--onBreak[b-yqjs6xi0ql] { background: var(--ec-amber); }
.sw-status-dot--preSchool[b-yqjs6xi0ql] { background: var(--ec-blue); }
.sw-status-label[b-yqjs6xi0ql] {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ec-muted);
    margin: 0;
}
.sw-status-label--inClass[b-yqjs6xi0ql] { color: var(--ec-green); }
.sw-status-label--onBreak[b-yqjs6xi0ql] { color: var(--ec-amber); }
.sw-status-label--preSchool[b-yqjs6xi0ql] { color: var(--ec-blue); }

.sw-now-main[b-yqjs6xi0ql] {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 11px;
}
.sw-now-info[b-yqjs6xi0ql] { min-width: 0; flex: 1; }
.sw-now-kicker[b-yqjs6xi0ql] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 2px;
}
.sw-now-name[b-yqjs6xi0ql] {
    font-size: 18px;
    font-weight: 800;
    color: var(--ec-text);
    line-height: 1.1;
    margin: 0;
}
.sw-now-meta[b-yqjs6xi0ql] {
    font-size: 11.5px;
    color: var(--ec-muted);
    margin: 3px 0 0;
}
.sw-now-meta span[b-yqjs6xi0ql] { display: inline-flex; align-items: center; gap: 3px; }
.sw-now-meta i[b-yqjs6xi0ql] { font-size: 11px; }
.sw-now-band[b-yqjs6xi0ql] {
    border-radius: 9px;
    padding: 8px 11px;
    margin-bottom: 8px;
}
.sw-now-band--muted[b-yqjs6xi0ql] {
    background: var(--ec-bg);
    border: 1px solid var(--ec-border);
}
.sw-now-band-txt[b-yqjs6xi0ql] {
    font-size: 11.5px;
    color: var(--ec-text);
    font-weight: 600;
    line-height: 1.5;
    margin: 0;
}
.sw-now-noupcoming[b-yqjs6xi0ql] {
    font-size: 13.5px;
    color: var(--ec-text);
    font-weight: 700;
    line-height: 1.5;
    margin: 0;
}
.sw-now-footer[b-yqjs6xi0ql] {
    position: relative;
    border-top: 1px solid var(--ec-border-soft);
    padding-top: 11px;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 9px;
}
.sw-now-footer-tag[b-yqjs6xi0ql] {
    font-size: 9.5px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    flex-shrink: 0;
}
.sw-now-footer-txt[b-yqjs6xi0ql] {
    flex: 1;
    font-size: 12px;
    color: var(--ec-text);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

@keyframes sw-pulse-b-yqjs6xi0ql { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

/* ── 3) Today's classes ───────────────────────── */
.sw-classes[b-yqjs6xi0ql] { padding: 10px 0; }
.sw-class-row[b-yqjs6xi0ql] {
    display: grid;
    grid-template-columns: auto 32px 1fr auto;
    gap: 11px;
    padding: 8px 18px;
    align-items: center;
    border-left: 3px solid transparent;
}
.sw-class-row--past[b-yqjs6xi0ql] { opacity: 0.5; }
.sw-class-time[b-yqjs6xi0ql] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-text);
    font-family: ui-monospace, "SF Mono", monospace;
    white-space: nowrap;
    margin: 0;
}
.sw-class-info[b-yqjs6xi0ql] { min-width: 0; }
.sw-class-name[b-yqjs6xi0ql] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ec-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}
.sw-class-room[b-yqjs6xi0ql] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 1px 0 0;
}
.sw-badge-now[b-yqjs6xi0ql] {
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    padding: 3px 7px;
    border-radius: 4px;
    letter-spacing: 0.08em;
}
.sw-badge-next[b-yqjs6xi0ql] {
    background: var(--ec-amber-lt);
    color: var(--ec-amber);
    border: 1px solid #fde68a;
    font-size: 9px;
    font-weight: 800;
    padding: 3px 7px;
    border-radius: 4px;
    letter-spacing: 0.08em;
}
.sw-check[b-yqjs6xi0ql] { font-size: 14px; color: var(--ec-green); display: inline-flex; }

/* ── 4) This week ─────────────────────────────── */
.sw-week[b-yqjs6xi0ql] { display: flex; flex-direction: column; }
.sw-rings[b-yqjs6xi0ql] {
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: space-around;
}
.sw-ring[b-yqjs6xi0ql] { position: relative; width: 88px; height: 88px; flex-shrink: 0; }
.sw-ring-center[b-yqjs6xi0ql] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.sw-ring-label[b-yqjs6xi0ql] {
    font-size: 24px;
    font-weight: 800;
    color: var(--ec-text);
    line-height: 1;
    margin: 0;
}
.sw-ring-sub[b-yqjs6xi0ql] {
    font-size: 9px;
    font-weight: 700;
    color: var(--ec-muted);
    margin: 2px 0 0;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.sw-streak[b-yqjs6xi0ql] {
    padding: 14px 18px;
    border-top: 1px solid var(--ec-border-soft);
    display: flex;
    align-items: center;
    gap: 11px;
    background: linear-gradient(135deg, var(--ec-amber-lt), #fff);
    margin-top: auto;
}
.sw-streak-icon[b-yqjs6xi0ql] { line-height: 1; color: var(--ec-amber); font-size: 26px; display: inline-flex; }
.sw-streak-body[b-yqjs6xi0ql] { flex: 1; min-width: 0; }
.sw-streak-title[b-yqjs6xi0ql] { font-size: 13px; font-weight: 800; color: var(--ec-text); margin: 0; }
.sw-streak-sub[b-yqjs6xi0ql] { font-size: 10.5px; color: var(--ec-muted); margin: 2px 0 0; }

/* ── 5) Recent grades ─────────────────────────── */
.sw-grade-row[b-yqjs6xi0ql] {
    display: grid;
    grid-template-columns: 30px 1fr auto;
    gap: 10px;
    padding: 10px 18px;
    align-items: center;
}
.sw-grade-info[b-yqjs6xi0ql] { min-width: 0; }
.sw-grade-title[b-yqjs6xi0ql] {
    font-size: 12px;
    font-weight: 700;
    color: var(--ec-text);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}
.sw-grade-meta[b-yqjs6xi0ql] { font-size: 10.5px; color: var(--ec-muted); margin: 2px 0 0; }
.sw-grade-val[b-yqjs6xi0ql] { text-align: right; flex-shrink: 0; }
.sw-grade-num[b-yqjs6xi0ql] {
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    font-family: ui-monospace, "SF Mono", monospace;
    margin: 0;
}
.sw-grade-delta[b-yqjs6xi0ql] { font-size: 9.5px; font-weight: 700; margin: 2px 0 0; }

/* ── 6) Due soon ──────────────────────────────── */
.sw-due-row[b-yqjs6xi0ql] {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 11px;
    padding: 11px 18px;
    cursor: pointer;
    align-items: center;
}
.sw-due-row:hover[b-yqjs6xi0ql] { background: var(--ec-bg); }
.sw-due-info[b-yqjs6xi0ql] { min-width: 0; }
.sw-due-title[b-yqjs6xi0ql] {
    font-size: 12px;
    font-weight: 700;
    color: var(--ec-text);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}
.sw-due-meta[b-yqjs6xi0ql] { font-size: 10.5px; color: var(--ec-muted); margin: 3px 0 0; font-weight: 600; }
.sw-due-meta--urgent[b-yqjs6xi0ql] { color: var(--ec-red); font-weight: 700; }

/* ── 7) What teachers said ────────────────────── */
.sw-fb-row[b-yqjs6xi0ql] {
    padding: 12px 18px;
    display: flex;
    gap: 11px;
    align-items: flex-start;
}
.sw-fb-avatar[b-yqjs6xi0ql] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
}
.sw-fb-body[b-yqjs6xi0ql] { flex: 1; min-width: 0; }
.sw-fb-head[b-yqjs6xi0ql] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 3px;
    flex-wrap: wrap;
}
.sw-fb-name[b-yqjs6xi0ql] { font-size: 12px; font-weight: 800; color: var(--ec-text); margin: 0; }
.sw-fb-tag[b-yqjs6xi0ql] {
    font-size: 9px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 4px;
    letter-spacing: 0.05em;
}
.sw-fb-when[b-yqjs6xi0ql] { font-size: 10px; color: var(--ec-muted); }
.sw-fb-text[b-yqjs6xi0ql] {
    font-size: 11.5px;
    color: var(--ec-sub);
    line-height: 1.5;
    font-style: italic;
    margin: 0;
}

/* ── 8) Achievements ──────────────────────────── */
.sw-ach-grid[b-yqjs6xi0ql] {
    padding: 14px 18px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.sw-ach-tile[b-yqjs6xi0ql] {
    background: linear-gradient(135deg, var(--ec-amber-lt), #fff);
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 10px 11px;
    text-align: center;
}
.sw-ach-icon[b-yqjs6xi0ql] {
    margin-bottom: 3px;
    line-height: 1;
    display: flex;
    justify-content: center;
    font-size: 22px;
    color: var(--ec-amber);
}
.sw-ach-title[b-yqjs6xi0ql] { font-size: 10.5px; font-weight: 800; color: var(--ec-text); line-height: 1.2; margin: 0; }
.sw-ach-next[b-yqjs6xi0ql] {
    padding: 10px 18px;
    border-top: 1px solid var(--ec-border-soft);
    background: var(--ec-bg);
    display: flex;
    align-items: center;
    gap: 9px;
}
.sw-ach-next-icon[b-yqjs6xi0ql] { opacity: 0.5; color: var(--ec-purple); font-size: 20px; display: inline-flex; }
.sw-ach-next-body[b-yqjs6xi0ql] { flex: 1; min-width: 0; }
.sw-ach-next-title[b-yqjs6xi0ql] { font-size: 11px; font-weight: 800; color: var(--ec-text); margin: 0; }
.sw-ach-next-sub[b-yqjs6xi0ql] { font-size: 10px; color: var(--ec-muted); margin: 1px 0 0; }
.sw-ach-next-tag[b-yqjs6xi0ql] {
    font-size: 10px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ── 9) Latest announcement ───────────────────── */
.sw-announce[b-yqjs6xi0ql] {
    background: linear-gradient(135deg, var(--ec-purple-lt), #fff);
    border: 1px solid #ddd6fe;
    border-radius: 14px;
    padding: 14px 18px;
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}
.sw-announce--placeholder[b-yqjs6xi0ql] { background: transparent; border: none; }
.sw-announce-icon[b-yqjs6xi0ql] {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: #fff;
    border: 1px solid #ddd6fe;
    color: var(--ec-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 20px;
}
.sw-announce-body[b-yqjs6xi0ql] { flex: 1; min-width: 200px; }
.sw-announce-eyebrow[b-yqjs6xi0ql] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-purple);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}
.sw-announce-title[b-yqjs6xi0ql] {
    font-size: 13px;
    font-weight: 700;
    color: var(--ec-text);
    margin: 2px 0 0;
    line-height: 1.4;
}
.sw-announce-btn[b-yqjs6xi0ql] {
    background: var(--ec-purple);
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
}
.sw-announce-btn:hover[b-yqjs6xi0ql] { filter: brightness(1.06); }

/* ── 10) Study plan today ─────────────────────── */
.sw-plan-empty[b-yqjs6xi0ql] { padding: 14px 18px; }
.sw-plan-empty-txt[b-yqjs6xi0ql] { font-size: 12px; margin: 0; }
.sw-plan-row[b-yqjs6xi0ql] {
    display: flex;
    gap: 10px;
    padding: 8px 18px;
    border-top: 1px solid var(--ec-border-soft);
    align-items: center;
}
.sw-plan-box[b-yqjs6xi0ql] {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1.5px solid var(--ec-border);
    flex-shrink: 0;
}
.sw-plan-title[b-yqjs6xi0ql] {
    flex: 1;
    font-size: 12px;
    color: var(--ec-text);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}
.sw-plan-est[b-yqjs6xi0ql] { font-size: 10px; color: var(--ec-muted); font-weight: 700; }

/* ── Empty state (shared) ─────────────────────── */
.sw-empty[b-yqjs6xi0ql] {
    text-align: center;
    padding: 28px 18px;
    color: var(--ec-muted);
}
.sw-empty-icon[b-yqjs6xi0ql] {
    font-size: 30px;
    color: var(--ec-faint);
    margin-bottom: 8px;
    display: block;
}
.sw-empty-title[b-yqjs6xi0ql] { font-size: 13px; font-weight: 800; color: var(--ec-text); margin: 0; }
.sw-empty-sub[b-yqjs6xi0ql] { font-size: 11.5px; color: var(--ec-muted); margin: 4px 0 0; }

/* ── Error state ──────────────────────────────── */
.sw-error[b-yqjs6xi0ql] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    padding: 40px 24px;
    text-align: center;
}
.sw-error-icon[b-yqjs6xi0ql] {
    font-size: 30px;
    color: var(--ec-amber);
    margin-bottom: 10px;
    display: block;
}
.sw-error-title[b-yqjs6xi0ql] { font-size: 14px; font-weight: 800; color: var(--ec-text); margin: 0; }
.sw-error-sub[b-yqjs6xi0ql] { font-size: 12px; color: var(--ec-muted); margin: 5px 0 0; }
/* /Components/Pages/Student/StudentFeedPage.razor.rz.scp.css */
.sf-page[b-y5xsqsszik] {
    padding: 0;
    display: flex; flex-direction: column; gap: 1.5rem;
    max-width: 1600px; margin: 0 auto;
}

/* ── Header ── [DEPRECATED - replaced by af-header styles] ──
   Keeping @media rule for responsive layout on remaining components */

/* ── Skeleton ── */
.sf-skeleton[b-y5xsqsszik] {
    display: flex; gap: 1rem; align-items: center;
    padding: 1.25rem;
    background: var(--ec-card); border-radius: 14px;
}
.sf-sk-avatar[b-y5xsqsszik] { width: 44px; height: 44px; border-radius: 50%; background: #e2e8f0; flex-shrink: 0; animation: sf-shimmer-b-y5xsqsszik 1.4s infinite; }
.sf-sk-lines[b-y5xsqsszik] { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; }
.sf-sk-line[b-y5xsqsszik] { height: 10px; border-radius: 99px; background: #e2e8f0; animation: sf-shimmer-b-y5xsqsszik 1.4s infinite; }
.sf-sk-line--w70[b-y5xsqsszik] { width: 70%; }
.sf-sk-line--w45[b-y5xsqsszik] { width: 45%; }
@keyframes sf-shimmer-b-y5xsqsszik { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ── Post (prototype lines 1987-2073) ── */
.sf-post[b-y5xsqsszik] {
    background: var(--ec-card);
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    overflow: hidden;
}
.sf-post-header[b-y5xsqsszik] {
    display: flex; align-items: center; gap: 11px;
    padding: 14px 20px 10px;
}
.sf-avatar[b-y5xsqsszik] {
    width: 38px; height: 38px; border-radius: 50%;
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800;
    flex-shrink: 0;
    /* background set inline via AvatarColorFor */
}
.sf-post-meta[b-y5xsqsszik] { display: flex; flex-direction: column; gap: 1px; }
.sf-poster-name[b-y5xsqsszik] { font-size: 13px; font-weight: 800; color: var(--ec-text); }
.sf-post-sub[b-y5xsqsszik] { font-size: 11px; color: var(--ec-muted); }

/* ── Gallery ── */
.sf-gallery-wrap[b-y5xsqsszik] { padding: 0 20px 12px; }
.sf-gallery[b-y5xsqsszik] { width: 100%; overflow: hidden; cursor: pointer; border-radius: 10px; border: 1px solid var(--ec-border-soft); }
.sf-gallery--single[b-y5xsqsszik] { display: flex; align-items: center; justify-content: center; min-height: 320px; max-height: 70vh; background: var(--ec-bg); }
.sf-gallery--single .sf-gallery-cell[b-y5xsqsszik] { width: 100%; height: 100%; min-height: 320px; max-height: 70vh; display: flex; align-items: center; justify-content: center; }
.sf-gallery--single .sf-media-img[b-y5xsqsszik] { width: 100%; height: auto; max-height: 70vh; object-fit: contain; aspect-ratio: auto; }
.sf-gallery--duo[b-y5xsqsszik] { display: grid; grid-template-columns: 1fr 1fr; aspect-ratio: 2 / 1; gap: 4px; max-height: 380px; }
.sf-gallery--trio[b-y5xsqsszik] { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 3 / 2; gap: 4px; max-height: 420px; }
.sf-gallery--trio .sf-gallery-cell:first-child[b-y5xsqsszik] { grid-row: 1 / 3; }
.sf-gallery--quad[b-y5xsqsszik] { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 1 / 1; gap: 4px; max-height: 420px; }
.sf-gallery-cell[b-y5xsqsszik] { overflow: hidden; position: relative; }
.sf-media-img[b-y5xsqsszik] { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--ec-bg); }
.sf-gallery--single .sf-media-video[b-y5xsqsszik] { width: 100%; min-height: 320px; max-height: 70vh; }
.sf-media-video[b-y5xsqsszik] { background: #1e3256; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.sf-play-icon[b-y5xsqsszik] { font-size: 3rem; color: white; opacity: 0.9; }
.sf-gallery-more[b-y5xsqsszik] { position: absolute; inset: 0; background: rgba(30,50,86,0.55); display: flex; align-items: center; justify-content: center; color: white; font-size: 1.75rem; font-weight: 900; }
@media (min-width: 768px) {
    .sf-gallery--single[b-y5xsqsszik] { max-height: 560px; }
    .sf-gallery--single .sf-gallery-cell[b-y5xsqsszik] { max-height: 560px; }
    .sf-gallery--single .sf-media-img[b-y5xsqsszik] { max-height: 560px; }
}

/* ── Post body ── */
.sf-post-body[b-y5xsqsszik] {
    padding: 0 20px 12px;
    display: flex; flex-direction: column; gap: 6px;
}
.sf-post-title[b-y5xsqsszik] {
    font-size: 16px; font-weight: 800;
    color: var(--ec-text); margin: 0;
    letter-spacing: -0.005em;
}
.sf-post-desc[b-y5xsqsszik] {
    font-size: 13px; color: var(--ec-sub);
    line-height: 1.55; margin: 0;
}
.sf-post-desc--clamped[b-y5xsqsszik] { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sf-read-more[b-y5xsqsszik] { background: none; border: none; color: var(--ec-blue); font-size: 0.82rem; font-weight: 700; cursor: pointer; padding: 0; font-family: inherit; }
.sf-read-more:hover[b-y5xsqsszik] { text-decoration: underline; }
.sf-tags[b-y5xsqsszik] { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.25rem; }
.sf-tag[b-y5xsqsszik] {
    font-size: 0.72rem; font-weight: 700;
    color: var(--ec-blue); background: rgba(46,93,171,0.08);
    border-radius: 99px; padding: 0.2rem 0.65rem;
}

/* ── Reaction bar (prototype lines 2019-2044) ── */
.sf-reactions-bar[b-y5xsqsszik] {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 20px 14px;
    border-top: 1px solid var(--ec-border-soft);
    margin-top: 4px;
    gap: 6px;
}
.sf-reaction-btns[b-y5xsqsszik] { display: inline-flex; align-items: center; gap: 6px; }
.sf-reaction-btn[b-y5xsqsszik] {
    background: var(--ec-bg);
    border: 1px solid var(--ec-border);
    border-radius: 18px;
    padding: 4px 9px;
    color: var(--ec-sub);
    cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 13px; line-height: 1;
    transition: background .12s, border-color .12s, color .12s;
}
.sf-reaction-btn i[b-y5xsqsszik] { font-size: 13px; }
.sf-reaction-btn:hover[b-y5xsqsszik] { border-color: var(--ec-blue); color: var(--ec-blue); }
.sf-reaction-btn--active[b-y5xsqsszik] {
    background: var(--ec-blue-lt);
    border-color: var(--ec-blue);
    color: var(--ec-blue);
}
.sf-reaction-total[b-y5xsqsszik] {
    font-size: 11.5px; color: var(--ec-text);
    font-weight: 700; margin-left: 4px;
}
.sf-reaction-counts[b-y5xsqsszik] { display: inline-flex; align-items: center; gap: 6px; }
.sf-comment-count-btn[b-y5xsqsszik] {
    background: transparent; border: 1px solid transparent;
    border-radius: 9px; padding: 5px 11px;
    font-size: 12px; color: var(--ec-sub);
    font-weight: 700; cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 5px;
    transition: background .12s, color .12s, border-color .12s;
}
.sf-comment-count-btn:hover[b-y5xsqsszik] {
    background: var(--ec-blue-gh);
    border-color: var(--ec-blue-lt);
    color: var(--ec-blue);
}
.sf-comment-count-btn--active[b-y5xsqsszik] {
    background: var(--ec-blue-gh);
    border-color: var(--ec-blue-lt);
    color: var(--ec-blue);
}
.sf-comments-off[b-y5xsqsszik] {
    font-size: 11.5px; color: var(--ec-muted);
    display: inline-flex; align-items: center; gap: 4px;
}

/* ── Inline comments (prototype PWFeed lines 2058-2080) ── */
.sf-comments[b-y5xsqsszik] {
    padding: 4px 20px 16px;
    display: flex; flex-direction: column; gap: 12px;
}
.sf-comments-loading[b-y5xsqsszik] { display: flex; justify-content: center; padding: 1rem 0; }
.sf-comment[b-y5xsqsszik] { display: flex; gap: 10px; align-items: flex-start; }
.sf-comment-avatar[b-y5xsqsszik] {
    width: 32px; height: 32px; border-radius: 50%;
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; flex-shrink: 0;
    /* background set inline via AvatarColorFor */
}
.sf-comment-main[b-y5xsqsszik] { flex: 1; min-width: 0; }
.sf-comment-bubble[b-y5xsqsszik] {
    background: var(--ec-bg);
    border-radius: 14px 14px 14px 4px;
    padding: 10px 13px;
}
.sf-comment-name[b-y5xsqsszik] { font-size: 12px; font-weight: 800; color: var(--ec-text); margin: 0 0 3px; }
.sf-comment-body[b-y5xsqsszik] { font-size: 13px; color: var(--ec-sub); line-height: 1.5; margin: 0; word-break: break-word; white-space: pre-wrap; }
.sf-comment-actions[b-y5xsqsszik] { display: flex; gap: 14px; align-items: center; margin-top: 5px; padding-left: 13px; }
.sf-comment-action[b-y5xsqsszik] { background: none; border: none; padding: 0; font-size: 11px; font-weight: 700; color: var(--ec-muted); cursor: pointer; font-family: inherit; }
.sf-comment-action:hover[b-y5xsqsszik] { color: var(--ec-blue); }
.sf-comment-action--danger:hover[b-y5xsqsszik] { color: var(--ec-alert); }
.sf-comment-when[b-y5xsqsszik] { font-size: 11px; color: var(--ec-muted); }

/* edit mode */
.sf-comment-edit[b-y5xsqsszik] { display: flex; flex-direction: column; gap: 8px; }
.sf-comment-edit-input[b-y5xsqsszik] {
    width: 100%; resize: vertical; min-height: 44px;
    border: 1px solid var(--ec-border); border-radius: 10px;
    padding: 9px 12px; font-size: 13px; font-family: inherit;
    color: var(--ec-text); background: #fff; outline: none; line-height: 1.5;
}
.sf-comment-edit-input:focus[b-y5xsqsszik] { border-color: var(--ec-blue); box-shadow: 0 0 0 2px rgba(46,93,171,0.15); }
.sf-comment-edit-actions[b-y5xsqsszik] { display: flex; gap: 8px; justify-content: flex-end; }
.sf-comment-edit-cancel[b-y5xsqsszik] { background: transparent; border: none; padding: 6px 12px; font-size: 12px; font-weight: 700; color: var(--ec-sub); cursor: pointer; font-family: inherit; border-radius: 8px; }
.sf-comment-edit-cancel:hover[b-y5xsqsszik] { background: var(--ec-bg); }
.sf-comment-edit-save[b-y5xsqsszik] { background: var(--ec-blue); border: none; padding: 6px 14px; font-size: 12px; font-weight: 800; color: #fff; cursor: pointer; font-family: inherit; border-radius: 8px; }
.sf-comment-edit-save:disabled[b-y5xsqsszik] { background: var(--ec-border-soft); color: var(--ec-muted); cursor: not-allowed; }

/* reply composer (prototype ReplyComposer lines 2326+) */
.sf-composer[b-y5xsqsszik] { background: #fff; border: 1px solid var(--ec-border); border-radius: 12px; padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start; }
.sf-composer-avatar[b-y5xsqsszik] {
    width: 32px; height: 32px; border-radius: 50%;
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; flex-shrink: 0;
}
.sf-composer-main[b-y5xsqsszik] { flex: 1; min-width: 0; }
.sf-composer-input[b-y5xsqsszik] { width: 100%; resize: none; border: none; outline: none; background: transparent; font-family: inherit; font-size: 13px; color: var(--ec-text); line-height: 1.5; padding: 0; }
.sf-composer-footer[b-y5xsqsszik] { display: flex; align-items: center; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--ec-border-soft); }
.sf-composer-send[b-y5xsqsszik] { margin-left: auto; background: var(--ec-blue); color: #fff; border: none; border-radius: 8px; padding: 6px 14px; font-size: 12px; font-weight: 800; cursor: pointer; font-family: inherit; transition: opacity .15s; }
.sf-composer-send:disabled[b-y5xsqsszik] { background: var(--ec-border-soft); color: var(--ec-muted); cursor: not-allowed; }

/* ── Load more ── */
.sf-load-more[b-y5xsqsszik] {
    display: block; width: 100%;
    background: var(--ec-card);
    border: 1.5px solid rgba(46,93,171,0.2); border-radius: 1rem;
    padding: 0.875rem;
    font-size: 0.85rem; font-weight: 700;
    color: var(--ec-blue); cursor: pointer; font-family: inherit;
}
.sf-load-more:hover[b-y5xsqsszik] { background: rgba(46,93,171,0.06); }
.sf-mini-spinner[b-y5xsqsszik] {
    display: inline-block; width: 16px; height: 16px;
    border: 2px solid rgba(46,93,171,0.2); border-top-color: var(--ec-blue);
    border-radius: 50%; animation: sf-spin-b-y5xsqsszik 0.7s linear infinite;
}
@keyframes sf-spin-b-y5xsqsszik { to { transform: rotate(360deg); } }

/* ── Lightbox (prototype Lightbox lines 2176-2277) ── */
.sf-lb[b-y5xsqsszik] { position: fixed; inset: 0; z-index: 2000; background: rgba(8,10,20,0.94); display: flex; align-items: center; justify-content: center; outline: none; animation: sf-lb-fade-b-y5xsqsszik .2s ease; }
@keyframes sf-lb-fade-b-y5xsqsszik { from { opacity: 0; } to { opacity: 1; } }
.sf-lb-top[b-y5xsqsszik] {
    position: absolute; top: 0; left: 0; right: 0; z-index: 5;
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 18px; color: #fff;
    background: linear-gradient(to bottom, rgba(0,0,0,0.55), transparent);
}
.sf-lb-poster[b-y5xsqsszik] { font-size: 13px; font-weight: 700; margin: 0; }
.sf-lb-count[b-y5xsqsszik] { font-size: 11px; color: rgba(255,255,255,0.7); margin: 2px 0 0; }
.sf-lb-top-actions[b-y5xsqsszik] { display: flex; gap: 8px; }
.sf-lb-icon-btn[b-y5xsqsszik] {
    width: 36px; height: 36px; border-radius: 10px;
    background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.18);
    color: #fff; cursor: pointer; text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px; backdrop-filter: blur(6px); transition: background .15s;
}
.sf-lb-icon-btn:hover[b-y5xsqsszik] { background: rgba(255,255,255,0.26); color: #fff; }
.sf-lb-arrow[b-y5xsqsszik] {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
    width: 48px; height: 48px; border-radius: 50%;
    background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18);
    color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; backdrop-filter: blur(6px); transition: background .15s;
}
.sf-lb-arrow:hover[b-y5xsqsszik] { background: rgba(255,255,255,0.26); }
.sf-lb-arrow--left[b-y5xsqsszik] { left: 20px; }
.sf-lb-arrow--right[b-y5xsqsszik] { right: 20px; }
.sf-lb-stage[b-y5xsqsszik] {
    width: min(720px, 80%); height: min(70vh, 540px);
    border-radius: 14px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: #000; box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.sf-lb-media[b-y5xsqsszik] { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.sf-lb-thumbs[b-y5xsqsszik] {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 5;
    display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
    padding: 18px 24px;
    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
}
.sf-lb-thumb[b-y5xsqsszik] {
    width: 48px; height: 36px; border-radius: 6px; overflow: hidden;
    border: 2px solid rgba(255,255,255,0.3); cursor: pointer; padding: 0;
    background: #000; opacity: 0.65; transition: opacity .15s, border-color .15s;
    display: inline-flex; align-items: center; justify-content: center;
}
.sf-lb-thumb img[b-y5xsqsszik] { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-lb-thumb--active[b-y5xsqsszik] { border-color: #fff; opacity: 1; }
.sf-lb-thumb-video[b-y5xsqsszik] { width: 100%; height: 100%; background: #1e3256; color: #fff; font-size: 16px; display: flex; align-items: center; justify-content: center; }

@media (max-width: 600px) {
    .sf-page[b-y5xsqsszik] { padding: 1rem; gap: 1rem; }
}

/* ── Filter chips ── */
.af-filters[b-y5xsqsszik] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.af-filter-chip[b-y5xsqsszik] {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--ec-card);
    border: 1px solid var(--ec-border);
    color: var(--ec-sub);
    border-radius: 9px;
    padding: 7px 13px;
    font-size: 12px; font-weight: 700;
    cursor: pointer; font-family: inherit;
    transition: border-color .12s, background .12s;
}
.af-filter-chip:hover[b-y5xsqsszik] { border-color: var(--ec-blue); }
.af-filter-chip-active[b-y5xsqsszik] {
    background: var(--ec-blue);
    border-color: var(--ec-blue);
    color: #fff;
}
.af-filter-count[b-y5xsqsszik] {
    background: var(--ec-border-soft);
    color: var(--ec-muted);
    padding: 1px 6px;
    border-radius: 5px;
    font-size: 10px; font-weight: 700;
}
.af-filter-chip-active .af-filter-count[b-y5xsqsszik] {
    background: rgba(255,255,255,.22);
    color: #fff;
}
.ec-stage-kindergarten .af-filter-chip-active[b-y5xsqsszik] {
    background: var(--ec-primary);
    border-color: var(--ec-primary);
}

.af-post-tag[b-y5xsqsszik] {
    margin-left: auto;
    flex-shrink: 0;
}
/* /Components/Pages/Student/StudentFoodPage.razor.rz.scp.css */
/* StudentFoodPage (Cafeteria) — scoped CSS.
   Pixel-faithful port of the prototype's PWFood, which the StudentWeb router
   reuses verbatim for the student Cafeteria surface. Mirrors the Parent
   FoodMenuPage.razor.css so the two stay identical. */

/* ── Page shell ── */
.pfm-page[b-wd5xm6gz7u] { padding: 0; }

/* ── Week header ── */
.pfm-week-head[b-wd5xm6gz7u] {
    background: #fff; border: 1px solid var(--ec-border); border-radius: 14px;
    padding: 16px 20px; margin-bottom: 12px;
    display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
}
.pfm-week-head-left[b-wd5xm6gz7u] { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.pfm-week-btn[b-wd5xm6gz7u] {
    width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--ec-border);
    background: #fff; cursor: pointer; color: var(--ec-sub); font-size: 14px; font-family: inherit;
    display: flex; align-items: center; justify-content: center; line-height: 1; flex-shrink: 0;
}
.pfm-week-btn:disabled[b-wd5xm6gz7u] { opacity: 0.35; cursor: not-allowed; }
.pfm-week-meta[b-wd5xm6gz7u] { min-width: 0; }
.pfm-week-title[b-wd5xm6gz7u] { font-size: 14px; font-weight: 800; color: var(--ec-text); margin: 0; }
.pfm-week-sub[b-wd5xm6gz7u] { font-size: 11.5px; color: var(--ec-muted); margin: 2px 0 0; }
.pfm-week-sub .bi[b-wd5xm6gz7u] { font-size: 11px; }
.pfm-download-btn[b-wd5xm6gz7u] {
    background: #fff; border: 1px solid var(--ec-border); border-radius: 9px;
    padding: 8px 13px; font-size: 12px; font-weight: 700; color: var(--ec-sub);
    cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}

/* ── History chips ── */
.pfm-history-bar[b-wd5xm6gz7u] { display: flex; gap: 6px; margin-bottom: 14px; overflow-x: auto; padding-bottom: 2px; }
.pfm-chip[b-wd5xm6gz7u] {
    background: #fff; color: var(--ec-sub); border: 1px solid var(--ec-border); border-radius: 8px;
    padding: 6px 11px; font-size: 11.5px; font-weight: 700; cursor: pointer; font-family: inherit;
    white-space: nowrap; flex-shrink: 0; display: flex; align-items: center; gap: 6px;
}
.pfm-chip--active[b-wd5xm6gz7u] { background: var(--ec-blue); color: #fff; border-color: var(--ec-blue); }
.pfm-chip-badge[b-wd5xm6gz7u] {
    background: var(--ec-green-lt); color: var(--ec-green); font-size: 9.5px; font-weight: 800;
    padding: 1px 6px; border-radius: 4px; letter-spacing: 0.06em;
}
.pfm-chip--active .pfm-chip-badge[b-wd5xm6gz7u] { background: rgba(255,255,255,0.22); color: #fff; }
.pfm-chip-empty[b-wd5xm6gz7u] { font-size: 9.5px; font-weight: 600; color: var(--ec-muted); }
.pfm-chip--active .pfm-chip-empty[b-wd5xm6gz7u] { color: rgba(255,255,255,0.7); }

/* ── Day pills ── */
.pfm-day-pills[b-wd5xm6gz7u] { display: flex; gap: 8px; margin-bottom: 14px; }
.pfm-day-pill[b-wd5xm6gz7u] {
    flex: 1; background: #fff; color: var(--ec-text); border: 1px solid var(--ec-border); border-radius: 11px;
    padding: 11px 8px 9px; cursor: pointer; font-family: inherit;
    display: flex; flex-direction: column; align-items: center; gap: 2px; position: relative;
}
.pfm-day-pill--active[b-wd5xm6gz7u] { background: var(--ec-blue); color: #fff; border-color: var(--ec-blue); }
.pfm-day-pill--empty[b-wd5xm6gz7u] { opacity: 0.65; }
.pfm-day-abbr[b-wd5xm6gz7u] { font-size: 10.5px; font-weight: 700; opacity: 0.7; text-transform: uppercase; }
.pfm-day-num[b-wd5xm6gz7u] { font-size: 16px; font-weight: 800; }
.pfm-day-dot[b-wd5xm6gz7u] { position: absolute; top: 6px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--ec-pink); }
.pfm-day-pill--active .pfm-day-dot[b-wd5xm6gz7u] { background: #fff; }
.pfm-day-nomeals[b-wd5xm6gz7u] { font-size: 9px; font-weight: 700; color: var(--ec-muted); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 2px; }
.pfm-day-pill--active .pfm-day-nomeals[b-wd5xm6gz7u] { color: rgba(255,255,255,0.85); }

/* ── KPI strip ── */
.pfm-kpis[b-wd5xm6gz7u] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
@media (max-width: 1100px) { .pfm-kpis[b-wd5xm6gz7u] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .pfm-kpis[b-wd5xm6gz7u] { grid-template-columns: 1fr; } }

/* ── Menu note ── */
.pfm-note[b-wd5xm6gz7u] {
    background: linear-gradient(135deg, var(--ec-blue-gh), #fff); border: 1px solid var(--ec-blue-lt);
    border-radius: 11px; padding: 12px 16px; display: flex; gap: 11px; align-items: flex-start; margin-bottom: 12px;
}
.pfm-note-icon[b-wd5xm6gz7u] {
    width: 30px; height: 30px; border-radius: 8px; background: #fff; border: 1px solid var(--ec-blue-lt);
    display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--ec-blue); flex-shrink: 0;
}
.pfm-note-body[b-wd5xm6gz7u] { flex: 1; min-width: 0; }
.pfm-note-label[b-wd5xm6gz7u] { font-size: 10.5px; font-weight: 800; color: var(--ec-blue); letter-spacing: 0.1em; text-transform: uppercase; margin: 0; }
.pfm-note-text[b-wd5xm6gz7u] { font-size: 13px; color: var(--ec-text); line-height: 1.5; margin: 3px 0 0; }

/* ── Allergy banner — 3 states ── */
.pfm-allergy[b-wd5xm6gz7u] { border-radius: 11px; padding: 12px 16px; display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.pfm-allergy--unset[b-wd5xm6gz7u] { background: linear-gradient(135deg, var(--ec-amber-lt), #fff); border: 1px solid #fde68a; }
.pfm-allergy--warn[b-wd5xm6gz7u]  { background: linear-gradient(135deg, var(--ec-red-lt), #fff); border: 1px solid #fecaca; }
.pfm-allergy--safe[b-wd5xm6gz7u]  { background: var(--ec-blue-gh); border: 1px solid var(--ec-blue-lt); padding: 11px 16px; }
.pfm-allergy-icon[b-wd5xm6gz7u] {
    width: 32px; height: 32px; border-radius: 8px; background: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 15px; flex-shrink: 0;
}
.pfm-allergy--unset .pfm-allergy-icon[b-wd5xm6gz7u] { border: 1px solid #fde68a; color: var(--ec-amber); }
.pfm-allergy--warn  .pfm-allergy-icon[b-wd5xm6gz7u] { border: 1px solid #fecaca; color: var(--ec-red); }
.pfm-allergy-icon--safe[b-wd5xm6gz7u] { width: 30px; height: 30px; border: 1px solid var(--ec-blue-lt); color: var(--ec-blue); font-size: 14px; }
.pfm-allergy-text[b-wd5xm6gz7u] { font-size: 12.5px; color: var(--ec-text); font-weight: 600; flex: 1; margin: 0; }
.pfm-allergy-strong-red[b-wd5xm6gz7u] { color: var(--ec-red); }
.pfm-allergy-btn-solid[b-wd5xm6gz7u] {
    background: var(--ec-amber); border: none; border-radius: 8px; padding: 7px 12px; color: #fff;
    font-size: 11.5px; font-weight: 800; cursor: pointer; font-family: inherit; flex-shrink: 0;
}
.pfm-allergy-btn-link[b-wd5xm6gz7u] { background: none; border: none; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; flex-shrink: 0; }
.pfm-allergy-link-red[b-wd5xm6gz7u] { color: var(--ec-red); }
.pfm-allergy-link-blue[b-wd5xm6gz7u] { color: var(--ec-blue); }

/* ── Meal sections ── */
.pfm-meals[b-wd5xm6gz7u] { display: flex; flex-direction: column; gap: 12px; }
.pfm-meals-empty[b-wd5xm6gz7u] { background: #fff; border-radius: 14px; border: 1px solid var(--ec-border); }

/* Per-day empty state — mirrors the prototype's WebEmpty (food cutlery glyph) */
.pfm-empty[b-wd5xm6gz7u] { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px 24px; }
.pfm-empty-icon[b-wd5xm6gz7u] {
    width: 64px; height: 64px; border-radius: 50%; background: var(--ec-bg);
    display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.pfm-empty-title[b-wd5xm6gz7u] { font-size: 14px; font-weight: 800; color: var(--ec-text); margin: 0 0 5px; }
.pfm-empty-body[b-wd5xm6gz7u] { font-size: 13px; color: var(--ec-muted); max-width: 340px; line-height: 1.5; margin: 0; }
.pfm-meal-card[b-wd5xm6gz7u] { background: #fff; border-radius: 14px; border: 1px solid var(--ec-border); overflow: hidden; }
.pfm-meal-head[b-wd5xm6gz7u] { display: flex; align-items: center; gap: 13px; padding: 14px 18px; border-bottom: 1px solid var(--ec-border-soft); }
.pfm-meal-icon[b-wd5xm6gz7u] { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pfm-meal-head-body[b-wd5xm6gz7u] { flex: 1; min-width: 0; }
.pfm-meal-title-row[b-wd5xm6gz7u] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pfm-meal-title[b-wd5xm6gz7u] { font-size: 14px; font-weight: 800; color: var(--ec-text); margin: 0; }
.pfm-meal-sub[b-wd5xm6gz7u] { font-size: 11.5px; color: var(--ec-muted); margin: 2px 0 0; }
.pfm-meal-kcal-box[b-wd5xm6gz7u] { text-align: right; flex-shrink: 0; }
.pfm-meal-kcal-num[b-wd5xm6gz7u] { font-size: 18px; font-weight: 800; line-height: 1; margin: 0; }
.pfm-meal-kcal-label[b-wd5xm6gz7u] { font-size: 9.5px; color: var(--ec-muted); margin: 3px 0 0; font-weight: 700; letter-spacing: 0.08em; }

.pfm-eat-chip[b-wd5xm6gz7u] {
    font-size: 9.5px; font-weight: 800; padding: 2px 7px; border-radius: 5px;
    letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
}
.pfm-eat-chip--pending[b-wd5xm6gz7u] { background: var(--ec-bg); color: var(--ec-muted); border: 1px dashed var(--ec-border); }

.pfm-meal-items[b-wd5xm6gz7u] { display: flex; flex-direction: column; }
.pfm-item[b-wd5xm6gz7u] { display: flex; align-items: flex-start; gap: 13px; padding: 12px 18px; }
.pfm-item--divider[b-wd5xm6gz7u] { border-top: 1px solid var(--ec-border-soft); }
.pfm-item--flagged[b-wd5xm6gz7u] { background: color-mix(in srgb, var(--ec-red-lt) 55%, #fff); }
.pfm-item-dot[b-wd5xm6gz7u] { width: 6px; height: 6px; border-radius: 50%; margin-top: 7px; flex-shrink: 0; }
.pfm-item-body[b-wd5xm6gz7u] { flex: 1; min-width: 0; }
.pfm-item-name-row[b-wd5xm6gz7u] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pfm-item-name[b-wd5xm6gz7u] { font-size: 13.5px; font-weight: 700; color: var(--ec-text); margin: 0; }
.pfm-item-desc[b-wd5xm6gz7u] { font-size: 12px; color: var(--ec-sub); line-height: 1.5; margin: 3px 0 0; }
.pfm-item-kcal[b-wd5xm6gz7u] { font-size: 12px; font-weight: 700; color: var(--ec-muted); white-space: nowrap; padding-top: 1px; }

.pfm-tag[b-wd5xm6gz7u] { font-size: 9.5px; font-weight: 800; padding: 2px 7px; border-radius: 4px; letter-spacing: 0.05em; white-space: nowrap; }
.pfm-tag--vegan[b-wd5xm6gz7u] { background: var(--ec-green-lt); color: var(--ec-green); }
.pfm-tag--vegetarian[b-wd5xm6gz7u] { background: var(--ec-teal-lt); color: var(--ec-teal); }
.pfm-tag--contains[b-wd5xm6gz7u] { background: var(--ec-amber-lt); color: var(--ec-amber); }
.pfm-tag--contains-flagged[b-wd5xm6gz7u] { background: var(--ec-red); color: #fff; }

@media (max-width: 600px) { .pfm-page[b-wd5xm6gz7u] { padding: 0; } }
/* /Components/Pages/Student/StudentGradesPage.razor.rz.scp.css */
/* StudentGradesPage — scoped CSS. Pixel-faithful port of SWGrades + SWSubjectSheet
   (prototype EduConnect All Roles.html, lines 13705–14064). */

.swg-page[b-7tf6kcba85] {
    padding: 0;
    background: var(--ec-bg);
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Shared bits ─────────────────────────────── */
.swg-card[b-7tf6kcba85] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 16px;
}
.swg-kpi-cap[b-7tf6kcba85] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
}
.swg-empty-inline[b-7tf6kcba85] {
    font-size: 12px;
    color: var(--ec-muted);
    font-style: italic;
    padding: 14px 18px;
    margin: 0;
}

/* ── Error ───────────────────────────────────── */
.swg-error[b-7tf6kcba85] {
    text-align: center;
    padding: 60px 20px;
    color: var(--ec-muted);
}
.swg-error-icon[b-7tf6kcba85] { font-size: 32px; color: var(--ec-amber); }
.swg-error-title[b-7tf6kcba85] { font-size: 15px; font-weight: 800; color: var(--ec-text); margin: 10px 0 4px; }
.swg-error-sub[b-7tf6kcba85] { font-size: 12.5px; margin: 0; }

/* ── Row 1: hero / rank / attendance ─────────── */
.swg-hero-row[b-7tf6kcba85] {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 14px;
}
@media (max-width: 1100px) {
    .swg-hero-row[b-7tf6kcba85] { grid-template-columns: 1fr; }
}

/* GPA hero */
.swg-hero[b-7tf6kcba85] {
    background: linear-gradient(120deg, #0891b2 0%, #0e7490 100%);
    border-radius: 16px;
    padding: 20px 24px;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.swg-hero-ring[b-7tf6kcba85] {
    position: absolute;
    right: -50px;
    top: -60px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .07);
}
.swg-hero-eyebrow[b-7tf6kcba85] {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, .7);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 6px;
    position: relative;
}
.swg-hero-title[b-7tf6kcba85] {
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 14px;
    position: relative;
}
.swg-hero-body[b-7tf6kcba85] {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    position: relative;
    flex-wrap: wrap;
}
.swg-hero-cap[b-7tf6kcba85] {
    font-size: 9.5px;
    font-weight: 800;
    color: rgba(255, 255, 255, .7);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 4px;
}
.swg-hero-avg[b-7tf6kcba85] { display: flex; align-items: baseline; gap: 7px; }
.swg-hero-num[b-7tf6kcba85] {
    font-size: 48px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #fff;
    margin: 0;
    font-family: ui-monospace, "SF Mono", monospace;
}
.swg-hero-delta[b-7tf6kcba85] { font-size: 13px; font-weight: 800; color: #86efac; }
.swg-hero-prev[b-7tf6kcba85] { font-size: 11px; color: rgba(255, 255, 255, .7); margin: 4px 0 0; }
.swg-hero-spark[b-7tf6kcba85] { flex: 1; min-width: 120px; padding-bottom: 6px; }
.swg-hero-spark .swg-hero-cap[b-7tf6kcba85] { margin-bottom: 6px; }

/* Class rank */
.swg-rank[b-7tf6kcba85] {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.swg-rank-line[b-7tf6kcba85] { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; }
.swg-rank-num[b-7tf6kcba85] { font-size: 34px; font-weight: 800; color: var(--ec-text); line-height: 1; letter-spacing: -0.02em; margin: 0; }
.swg-rank-of[b-7tf6kcba85] { font-size: 14px; color: var(--ec-muted); font-weight: 700; margin: 0; }
.swg-rank-sub[b-7tf6kcba85] { font-size: 11px; color: var(--ec-muted); margin: 6px 0 0; }
.swg-rank-sub b[b-7tf6kcba85] { color: var(--ec-green); }
.swg-rank-bar[b-7tf6kcba85] { display: flex; gap: 2px; margin-top: 14px; }
.swg-rank-seg[b-7tf6kcba85] {
    flex: 1;
    height: 24px;
    border-radius: 2px;
    background: var(--ec-border-soft);
    opacity: .4;
}
.swg-rank-seg--on[b-7tf6kcba85] { background: #0891b2; opacity: 1; }
.swg-rank-scale[b-7tf6kcba85] {
    font-size: 9.5px;
    color: var(--ec-muted);
    margin: 6px 0 0;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.swg-rank-empty[b-7tf6kcba85] { font-size: 12px; color: var(--ec-muted); font-style: italic; margin: 10px 0 0; }

/* Attendance */
.swg-att[b-7tf6kcba85] { padding: 18px 20px; display: flex; align-items: center; gap: 16px; }
.swg-ring[b-7tf6kcba85] { position: relative; width: 92px; height: 92px; flex-shrink: 0; }
.swg-ring-svg[b-7tf6kcba85] { display: block; }
.swg-ring-label[b-7tf6kcba85] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.swg-ring-pct[b-7tf6kcba85] { font-size: 26px; font-weight: 800; color: var(--ec-text); line-height: 1; margin: 0; }
.swg-ring-sub[b-7tf6kcba85] { font-size: 9px; font-weight: 700; color: var(--ec-muted); margin: 2px 0 0; letter-spacing: 0.06em; text-transform: uppercase; }
.swg-att-info[b-7tf6kcba85] { min-width: 0; flex: 1; }
.swg-att-abs[b-7tf6kcba85] { font-size: 13px; font-weight: 800; color: var(--ec-text); margin: 5px 0 0; }
.swg-att-split[b-7tf6kcba85] { font-size: 11px; color: var(--ec-muted); margin: 3px 0 0; line-height: 1.45; }
.swg-att-unmot[b-7tf6kcba85] { color: var(--ec-red); font-weight: 700; }
.swg-att-btn[b-7tf6kcba85] {
    margin-top: 8px;
    background: var(--ec-bg);
    border: 1px solid var(--ec-border);
    border-radius: 7px;
    padding: 5px 9px;
    font-size: 11px;
    font-weight: 700;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
}
.swg-att-btn:hover[b-7tf6kcba85] { background: #fff; }
.swg-att-note[b-7tf6kcba85] {
    margin: 8px 0 0;
    font-size: 10.5px;
    color: var(--ec-sub);
    line-height: 1.45;
    background: var(--ec-bg);
    border-radius: 7px;
    padding: 7px 9px;
}

/* ── Recent grades strip ─────────────────────── */
.swg-recent[b-7tf6kcba85] { overflow: hidden; border-radius: 14px; }
.swg-recent-head[b-7tf6kcba85] {
    padding: 13px 18px;
    border-bottom: 1px solid var(--ec-border-soft);
}
.swg-recent-title[b-7tf6kcba85] { font-size: 14px; font-weight: 800; color: var(--ec-text); margin: 0; }
.swg-recent-sub[b-7tf6kcba85] { font-size: 11px; color: var(--ec-muted); margin: 2px 0 0; }
.swg-recent-grid[b-7tf6kcba85] { display: grid; gap: 0; }
.swg-recent-cell[b-7tf6kcba85] {
    padding: 14px 16px;
    /* Prototype sets borderTop:3px solid color but then border:'none' after it,
       so the colored top stripe never renders — only the vertical divider does. */
    border: none;
    border-right: 1px solid var(--ec-border-soft);
    background: #fff;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background .12s;
}
.swg-recent-cell:last-child[b-7tf6kcba85] { border-right: none; }
.swg-recent-cell:hover[b-7tf6kcba85] { background: var(--ec-bg); }
.swg-recent-cell-top[b-7tf6kcba85] { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.swg-recent-cell-name[b-7tf6kcba85] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-text);
    line-height: 1.2;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}
.swg-recent-cell-val[b-7tf6kcba85] { display: flex; align-items: baseline; gap: 5px; margin-bottom: 5px; }
.swg-recent-num[b-7tf6kcba85] {
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    font-family: ui-monospace, "SF Mono", monospace;
    letter-spacing: -0.02em;
    margin: 0;
}
.swg-recent-delta[b-7tf6kcba85] { font-size: 11px; font-weight: 800; }
.swg-recent-kind[b-7tf6kcba85] {
    font-size: 10.5px;
    color: var(--ec-muted);
    font-weight: 700;
    margin: 0 0 2px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.swg-recent-cell-title[b-7tf6kcba85] {
    font-size: 10.5px;
    color: var(--ec-sub);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}
.swg-recent-when[b-7tf6kcba85] { font-size: 10px; color: var(--ec-muted); margin: 4px 0 0; }

@media (max-width: 900px) {
    .swg-recent-grid[b-7tf6kcba85] { grid-template-columns: repeat(2, 1fr) !important; }
    .swg-recent-cell:nth-child(2n)[b-7tf6kcba85] { border-right: none; }
}

/* ── By subject ──────────────────────────────── */
.swg-by-head[b-7tf6kcba85] { display: flex; align-items: baseline; justify-content: space-between; margin: 0; gap: 10px; flex-wrap: wrap; }
.swg-by-title[b-7tf6kcba85] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0;
}
.swg-by-hint[b-7tf6kcba85] { font-size: 11px; color: var(--ec-muted); margin: 0; }

.swg-subjects[b-7tf6kcba85] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 12px;
}
.swg-subj[b-7tf6kcba85] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: box-shadow .15s;
}
.swg-subj:hover[b-7tf6kcba85] { box-shadow: 0 4px 14px color-mix(in srgb, var(--swg-subj) 20%, transparent); }
.swg-subj-head[b-7tf6kcba85] { display: flex; align-items: center; gap: 11px; margin-bottom: 11px; }
.swg-subj-id[b-7tf6kcba85] { flex: 1; min-width: 0; }
.swg-subj-name-row[b-7tf6kcba85] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.swg-subj-name[b-7tf6kcba85] { font-size: 13.5px; font-weight: 800; color: var(--ec-text); margin: 0; }
.swg-badge-homeroom[b-7tf6kcba85] {
    font-size: 8.5px;
    font-weight: 800;
    background: color-mix(in srgb, var(--ec-purple) 16%, transparent);
    color: var(--ec-purple);
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0.06em;
}
.swg-subj-meta[b-7tf6kcba85] { font-size: 10.5px; color: var(--ec-muted); margin: 2px 0 0; }
.swg-subj-avg[b-7tf6kcba85] { text-align: right; }
.swg-subj-avg-num[b-7tf6kcba85] { font-size: 22px; font-weight: 800; line-height: 1; font-family: ui-monospace, "SF Mono", monospace; margin: 0; }
.swg-top[b-7tf6kcba85] { font-size: 9px; font-weight: 800; color: var(--ec-amber); letter-spacing: 0.06em; }

.swg-bar[b-7tf6kcba85] {
    position: relative;
    height: 5px;
    background: var(--ec-border-soft);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 5px;
}
.swg-bar--sheet[b-7tf6kcba85] { height: 6px; margin-top: 6px; margin-bottom: 0; }
.swg-bar-class[b-7tf6kcba85] { position: absolute; left: 0; top: 0; height: 100%; background: var(--ec-faint); border-radius: 3px; }
.swg-bar-you[b-7tf6kcba85] { position: absolute; left: 0; top: 0; height: 100%; border-radius: 3px; }
.swg-subj-vsline[b-7tf6kcba85] { font-size: 10.5px; color: var(--ec-muted); margin: 0 0 11px; }

.swg-chips[b-7tf6kcba85] { display: flex; gap: 5px; flex-wrap: wrap; }
.swg-chip[b-7tf6kcba85] {
    background: color-mix(in srgb, var(--swg-tone) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--swg-tone) 30%, transparent);
    border-top: 3px solid var(--ec-blue);
    border-radius: 8px;
    padding: 5px 9px 6px;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-width: 46px;
    transition: transform .12s;
}
.swg-chip:hover[b-7tf6kcba85] { transform: translateY(-1px); }
.swg-chip-v[b-7tf6kcba85] { font-size: 14px; font-weight: 800; line-height: 1; font-family: ui-monospace, "SF Mono", monospace; }
.swg-chip-d[b-7tf6kcba85] { font-size: 8.5px; color: var(--ec-muted); font-weight: 700; font-family: ui-monospace, "SF Mono", monospace; }
.swg-chip-more[b-7tf6kcba85] {
    background: #fff;
    border: 1px dashed var(--ec-border);
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 700;
    color: var(--ec-muted);
    cursor: pointer;
    font-family: inherit;
}
.swg-subj-noGrades[b-7tf6kcba85] { font-size: 11px; color: var(--ec-muted); font-style: italic; padding: 8px 0; margin: 0; }

.swg-subj-foot[b-7tf6kcba85] {
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid var(--ec-border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.swg-subj-trend-cap[b-7tf6kcba85] { font-size: 10px; color: var(--ec-muted); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin: 0; }

/* ── Slide-over sheet ────────────────────────── */
.swg-sheet-backdrop[b-7tf6kcba85] {
    position: fixed;
    inset: 0;
    background: rgba(13, 23, 51, .42);
    backdrop-filter: blur(2px);
    display: flex;
    justify-content: flex-end;
    z-index: 1200;
    animation: swgFade-b-7tf6kcba85 .18s;
}
@keyframes swgFade-b-7tf6kcba85 { from { opacity: 0; } to { opacity: 1; } }
.swg-sheet[b-7tf6kcba85] {
    width: min(540px, 92%);
    height: 100%;
    background: #fff;
    box-shadow: -12px 0 40px rgba(13, 23, 51, .16);
    display: flex;
    flex-direction: column;
    animation: swgSlide-b-7tf6kcba85 .25s;
    position: relative;
    overflow: hidden;
}
@keyframes swgSlide-b-7tf6kcba85 { from { transform: translateX(40px); opacity: .6; } to { transform: translateX(0); opacity: 1; } }

.swg-sheet-head[b-7tf6kcba85] { padding: 22px 26px 18px; border-bottom: 1px solid var(--ec-border); position: relative; }
.swg-sheet-close[b-7tf6kcba85] {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .85);
    border: 1px solid var(--ec-border);
    cursor: pointer;
    font-size: 15px;
    color: var(--ec-sub);
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}
.swg-sheet-id[b-7tf6kcba85] { display: flex; align-items: flex-start; gap: 14px; padding-right: 48px; }
.swg-sheet-eyebrow[b-7tf6kcba85] { font-size: 10.5px; font-weight: 800; color: var(--ec-muted); letter-spacing: 0.12em; text-transform: uppercase; margin: 0; }
.swg-sheet-name[b-7tf6kcba85] { font-size: 22px; font-weight: 800; color: var(--ec-text); margin: 3px 0 0; letter-spacing: -0.01em; }
.swg-sheet-tch-row[b-7tf6kcba85] { display: flex; align-items: center; gap: 7px; margin-top: 4px; flex-wrap: wrap; }
.swg-sheet-tch[b-7tf6kcba85] { font-size: 13px; color: var(--ec-sub); margin: 0; }

.swg-sheet-avgs[b-7tf6kcba85] { display: flex; align-items: flex-end; gap: 18px; margin-top: 16px; flex-wrap: wrap; }
.swg-sheet-youavg[b-7tf6kcba85] { flex-shrink: 0; }
.swg-sheet-youavg-num[b-7tf6kcba85] { font-size: 42px; font-weight: 800; line-height: 1; font-family: ui-monospace, "SF Mono", monospace; letter-spacing: -0.02em; margin: 3px 0 0; }
.swg-sheet-classavg[b-7tf6kcba85] { flex: 1; min-width: 140px; padding-bottom: 6px; }
.swg-sheet-classavg-line[b-7tf6kcba85] { display: flex; align-items: baseline; gap: 6px; margin-top: 3px; }
.swg-sheet-classavg-num[b-7tf6kcba85] { font-size: 18px; font-weight: 800; color: var(--ec-text); line-height: 1; font-family: ui-monospace, "SF Mono", monospace; margin: 0; }
.swg-sheet-vsclass[b-7tf6kcba85] { font-size: 12px; font-weight: 800; }

.swg-sheet-body[b-7tf6kcba85] { flex: 1; overflow-y: auto; padding: 14px 22px 22px; }
.swg-sheet-kpis[b-7tf6kcba85] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 14px; }
.swg-sheet-kpi[b-7tf6kcba85] { background: #fff; border: 1px solid var(--ec-border); border-radius: 10px; padding: 10px 12px; }
.swg-sheet-kpi-num[b-7tf6kcba85] { font-size: 18px; font-weight: 800; line-height: 1; margin: 4px 0 0; font-family: ui-monospace, "SF Mono", monospace; }
.swg-sheet-kpi-d[b-7tf6kcba85] { font-size: 10px; color: var(--ec-muted); margin: 3px 0 0; }

.swg-sheet-allcap[b-7tf6kcba85] { font-size: 11px; font-weight: 800; color: var(--ec-muted); letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 8px; }
.swg-sheet-list[b-7tf6kcba85] { display: flex; flex-direction: column; gap: 8px; }
.swg-sheet-item[b-7tf6kcba85] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-left: 3px solid var(--swg-subj);
    border-radius: 11px;
    padding: 12px 14px;
}
.swg-sheet-item--focus[b-7tf6kcba85] {
    border-color: color-mix(in srgb, var(--swg-subj) 60%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--swg-subj) 15%, transparent);
}
.swg-sheet-item-row[b-7tf6kcba85] { display: flex; align-items: flex-start; gap: 11px; }
.swg-sheet-item-val[b-7tf6kcba85] {
    width: 48px;
    height: 48px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
    font-family: ui-monospace, "SF Mono", monospace;
    flex-shrink: 0;
}
.swg-sheet-item-body[b-7tf6kcba85] { flex: 1; min-width: 0; }
.swg-sheet-item-title[b-7tf6kcba85] { font-size: 13px; font-weight: 800; color: var(--ec-text); line-height: 1.3; margin: 0; }
.swg-sheet-item-meta[b-7tf6kcba85] { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.swg-pill[b-7tf6kcba85] { font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 5px; letter-spacing: 0.04em; text-transform: uppercase; }
.swg-sheet-item-weight[b-7tf6kcba85], .swg-sheet-item-date[b-7tf6kcba85] { font-size: 10.5px; color: var(--ec-muted); font-weight: 600; }
.swg-sheet-item-note[b-7tf6kcba85] {
    margin-top: 9px;
    padding: 9px 12px;
    background: var(--ec-bg);
    border-left: 3px solid var(--ec-blue);
    border-radius: 0 8px 8px 0;
    font-size: 11.5px;
    color: var(--ec-text);
    line-height: 1.55;
    font-style: italic;
}

.swg-sheet-empty[b-7tf6kcba85] { text-align: center; padding: 36px 20px; }
.swg-sheet-empty-title[b-7tf6kcba85] { font-size: 14px; font-weight: 800; color: var(--ec-text); margin: 0 0 4px; }
.swg-sheet-empty-sub[b-7tf6kcba85] { font-size: 12px; color: var(--ec-muted); margin: 0; }

.swg-sheet-foot[b-7tf6kcba85] { padding: 12px 22px; border-top: 1px solid var(--ec-border-soft); background: #fff; }
.swg-sheet-ask[b-7tf6kcba85] {
    width: 100%;
    border: none;
    border-radius: 10px;
    padding: 12px;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}
.swg-sheet-ask:hover[b-7tf6kcba85] { filter: brightness(.96); }
/* /Components/Pages/Student/StudentHomeworkDetailSheet.razor.rz.scp.css */
/* StudentHomeworkDetailSheet — scoped CSS. Pixel-faithful port of
   SWHomeworkDetail (prototype EduConnect All Roles.html, 13178–13702).
   The subject color drives the header tint, stepper, and primary CTA via
   the --subj-color custom property set on .swd-panel. */

.swd-overlay[b-7k99gl88og] {
    position: fixed;
    inset: 0;
    background: rgba(13, 23, 51, 0.42);
    backdrop-filter: blur(2px);
    display: flex;
    justify-content: flex-end;
    z-index: 1200;
    animation: swdFade-b-7k99gl88og 0.18s ease;
}
@keyframes swdFade-b-7k99gl88og { from { opacity: 0; } to { opacity: 1; } }
@keyframes swdSlide-b-7k99gl88og { from { transform: translateX(40px); } to { transform: translateX(0); } }

.swd-panel[b-7k99gl88og] {
    width: min(580px, 92%);
    height: 100%;
    background: var(--ec-panel);
    box-shadow: -12px 0 40px rgba(13, 23, 51, 0.16);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    animation: swdSlide-b-7k99gl88og 0.25s ease;
}
.swd-close[b-7k99gl88og] {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 5;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--ec-border);
    cursor: pointer;
    font-size: 14px;
    color: var(--ec-sub);
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Header band ── */
.swd-head[b-7k99gl88og] {
    padding: 22px 26px 14px;
    border-bottom: 1px solid var(--ec-border);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--subj-color) 8%, #fff),
        color-mix(in srgb, var(--subj-color) 3%, #fff) 60%, #fff);
}
.swd-head-row[b-7k99gl88og] { display: flex; align-items: flex-start; gap: 14px; padding-right: 48px; }
.swd-tile[b-7k99gl88og] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--subj-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    flex-shrink: 0;
}
.swd-head-id[b-7k99gl88og] { flex: 1; min-width: 0; }
.swd-head-eyebrow[b-7k99gl88og] { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; flex-wrap: wrap; }
.swd-subj[b-7k99gl88og] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--subj-color);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.swd-chip[b-7k99gl88og] {
    font-size: 9px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.swd-chip--kind[b-7k99gl88og] { background: var(--ec-bg); color: var(--ec-sub); }
.swd-chip--notgraded[b-7k99gl88og] { background: var(--ec-purple-lt); color: var(--ec-purple); }
.swd-title[b-7k99gl88og] { font-size: 19px; font-weight: 800; color: var(--ec-text); letter-spacing: -0.01em; line-height: 1.25; margin: 0; }
.swd-teacher[b-7k99gl88og] { font-size: 12.5px; color: var(--ec-sub); margin: 5px 0 0; }

/* ── Workflow stepper ── */
.swd-stepper[b-7k99gl88og] { display: flex; align-items: center; gap: 0; margin-top: 16px; padding-right: 40px; }
.swd-step[b-7k99gl88og] { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; }
.swd-step-dot[b-7k99gl88og] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--ec-border-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    transition: all 0.2s;
}
.swd-step-dot--on[b-7k99gl88og] { background: var(--subj-color); }
.swd-step-dot--current[b-7k99gl88og] {
    width: 22px;
    height: 22px;
    border: 3px solid color-mix(in srgb, var(--subj-color) 30%, transparent);
}
.swd-step-label[b-7k99gl88og] {
    font-size: 9.5px;
    font-weight: 600;
    color: var(--ec-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.swd-step-label--current[b-7k99gl88og] { font-weight: 800; color: var(--subj-color); }
.swd-step-line[b-7k99gl88og] { flex: 1; height: 2px; background: var(--ec-border-soft); margin-top: -13px; transition: background 0.3s; }
.swd-step-line--on[b-7k99gl88og] { background: var(--subj-color); }

/* ── Meta strip ── */
.swd-meta[b-7k99gl88og] {
    padding: 10px 26px;
    border-bottom: 1px solid var(--ec-border-soft);
    background: color-mix(in srgb, var(--ec-bg) 40%, #fff);
    display: flex;
    align-items: center;
    gap: 11px;
    flex-wrap: wrap;
}
.swd-meta-due[b-7k99gl88og] { display: flex; align-items: center; gap: 5px; }
.swd-meta-k[b-7k99gl88og] { font-size: 11px; font-weight: 800; color: var(--ec-muted); letter-spacing: 0.08em; text-transform: uppercase; }
.swd-due-chip[b-7k99gl88og] { font-size: 12px; font-weight: 800; padding: 2px 7px; border-radius: 6px; border: 1px solid transparent; }
.swd-due-chip--blue[b-7k99gl88og]   { background: var(--ec-blue-gh);  color: var(--ec-blue);   border-color: var(--ec-blue-lt); }
.swd-due-chip--orange[b-7k99gl88og] { background: var(--ec-orange-lt); color: var(--ec-orange); border-color: #fed7aa; }
.swd-due-chip--amber[b-7k99gl88og]  { background: var(--ec-amber-lt);  color: var(--ec-amber);  border-color: #fde68a; }
.swd-due-chip--red[b-7k99gl88og]    { background: var(--ec-red-lt);    color: var(--ec-red);    border-color: #fecaca; }
.swd-due-chip--green[b-7k99gl88og]  { background: var(--ec-green-lt);  color: var(--ec-green);  border-color: #bbf7d0; }
.swd-meta-sub[b-7k99gl88og] { font-size: 10.5px; color: var(--ec-muted); }
.swd-meta-right[b-7k99gl88og] { margin-left: auto; display: flex; gap: 11px; align-items: center; }
.swd-meta-prio[b-7k99gl88og] { font-size: 11px; font-weight: 800; }

/* ── Body ── */
.swd-body[b-7k99gl88og] { flex: 1; overflow-y: auto; padding: 18px 26px; display: flex; flex-direction: column; gap: 16px; }
.swd-section[b-7k99gl88og] { display: flex; flex-direction: column; }
.swd-eyebrow[b-7k99gl88og] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 7px;
}
.swd-prose[b-7k99gl88og] { padding: 13px 15px; background: var(--ec-bg); border-radius: 11px; font-size: 13px; color: var(--ec-text); line-height: 1.6; white-space: pre-wrap; }

/* Callouts (step intros) */
.swd-callout[b-7k99gl88og] { border-radius: 12px; padding: 14px 16px; display: flex; gap: 11px; align-items: flex-start; }
.swd-callout--subj[b-7k99gl88og] { background: linear-gradient(135deg, color-mix(in srgb, var(--subj-color) 10%, #fff), #fff); border: 1px solid color-mix(in srgb, var(--subj-color) 30%, transparent); }
.swd-callout--amber[b-7k99gl88og] { background: linear-gradient(135deg, var(--ec-amber-lt), #fff); border: 1px solid #fde68a; }
.swd-callout--teal[b-7k99gl88og] { background: linear-gradient(135deg, var(--ec-teal-lt), #fff); border: 1.5px solid color-mix(in srgb, var(--ec-teal) 40%, transparent); }
.swd-callout--blue[b-7k99gl88og] { background: var(--ec-blue-gh); border: 1px solid var(--ec-blue-lt); }
.swd-callout-ic[b-7k99gl88og] { font-size: 20px; color: var(--subj-color); display: flex; align-items: center; }
.swd-callout-ic--amber[b-7k99gl88og] { color: var(--ec-amber); }
.swd-callout-ic--teal[b-7k99gl88og] { color: var(--ec-teal); }
.swd-callout-ic--blue[b-7k99gl88og] { color: var(--ec-blue); }
.swd-callout-title[b-7k99gl88og] { font-size: 13px; font-weight: 800; color: var(--ec-text); margin: 0 0 3px; }
.swd-callout-title--blue[b-7k99gl88og] { color: var(--ec-blue); }
.swd-callout-sub[b-7k99gl88og] { font-size: 12px; color: var(--ec-sub); line-height: 1.5; margin: 0; }

/* Attachments / files */
.swd-attach-list[b-7k99gl88og] { display: flex; flex-direction: column; gap: 7px; }
.swd-attach[b-7k99gl88og], .swd-file-row[b-7k99gl88og] {
    background: var(--ec-panel);
    border: 1px solid var(--ec-border);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.swd-attach[b-7k99gl88og] { cursor: pointer; }
.swd-attach-badge[b-7k99gl88og] {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--subj-color) 14%, transparent);
    color: var(--subj-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
}
.swd-attach-badge--sm[b-7k99gl88og] { width: 30px; height: 30px; font-size: 10.5px; }
.swd-attach-body[b-7k99gl88og] { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.swd-attach-name[b-7k99gl88og] { font-size: 12.5px; font-weight: 700; color: var(--ec-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swd-attach-meta[b-7k99gl88og] { font-size: 10.5px; color: var(--ec-muted); margin-top: 1px; }
.swd-attach-dl[b-7k99gl88og] { font-size: 11px; font-weight: 800; color: var(--subj-color); letter-spacing: 0.06em; white-space: nowrap; }
.swd-file-row--review[b-7k99gl88og] { padding: 10px 12px; }
.swd-file-remove[b-7k99gl88og] { margin-left: auto; background: var(--ec-panel); border: 1px solid var(--ec-border); border-radius: 7px; padding: 5px 10px; font-size: 11px; font-weight: 700; color: var(--ec-red); cursor: pointer; font-family: inherit; }

/* Editable plan */
.swd-plan-head[b-7k99gl88og] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.swd-plan-pct[b-7k99gl88og] { font-size: 11.5px; font-weight: 800; color: var(--subj-color); margin: 0; }
.swd-plan-hint[b-7k99gl88og] { font-size: 11.5px; color: var(--ec-muted); line-height: 1.5; margin: 0 0 9px; font-style: italic; }
.swd-progress[b-7k99gl88og] { height: 6px; background: var(--ec-border-soft); border-radius: 3px; overflow: hidden; margin-bottom: 11px; }
.swd-progress-fill[b-7k99gl88og] { display: block; height: 100%; background: var(--subj-color); transition: width 0.3s; }
.swd-plan[b-7k99gl88og] { background: var(--ec-panel); border: 1px solid var(--ec-border); border-radius: 11px; overflow: hidden; }
.swd-plan-row[b-7k99gl88og] { display: flex; align-items: center; gap: 9px; padding: 8px 10px 8px 12px; border-top: 1px solid var(--ec-border-soft); }
.swd-plan-row:first-child[b-7k99gl88og] { border-top: none; }
.swd-plan-row--done[b-7k99gl88og] { background: color-mix(in srgb, var(--subj-color) 6%, transparent); }
.swd-plan-add[b-7k99gl88og] { background: color-mix(in srgb, var(--ec-bg) 40%, #fff); }
.swd-check[b-7k99gl88og] {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1.5px solid var(--ec-border);
    background: var(--ec-panel);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    color: #fff;
    font-size: 13px;
    transition: all 0.15s;
}
.swd-check--on[b-7k99gl88og] { background: var(--subj-color); border-color: var(--subj-color); }
.swd-check--add[b-7k99gl88og] { border-style: dashed; color: var(--ec-muted); font-weight: 800; }
.swd-plan-input[b-7k99gl88og] {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--ec-text);
    background: transparent;
    border: 1px solid transparent;
    padding: 6px 8px;
    border-radius: 6px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
}
.swd-plan-input:focus[b-7k99gl88og] { border-color: var(--ec-border); background: var(--ec-panel); }
.swd-plan-input--done[b-7k99gl88og] { color: var(--ec-muted); text-decoration: line-through; }
.swd-plan-del[b-7k99gl88og] {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--ec-muted);
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.swd-plan-del:hover[b-7k99gl88og] { background: var(--ec-red-lt); color: var(--ec-red); }
.swd-add-btn[b-7k99gl88og] {
    padding: 5px 11px;
    border-radius: 7px;
    border: none;
    background: var(--subj-color);
    color: #fff;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
}
.swd-add-btn:disabled[b-7k99gl88og] { background: var(--ec-border-soft); color: var(--ec-muted); cursor: default; }

.swd-textarea[b-7k99gl88og] {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--ec-border);
    border-radius: 10px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    min-height: 80px;
    resize: vertical;
    box-sizing: border-box;
}
.swd-textarea--sm[b-7k99gl88og] { min-height: 64px; }

/* Dropzone */
.swd-dropzone[b-7k99gl88og] {
    position: relative;
    width: 100%;
    padding: 18px 14px;
    background: var(--ec-panel);
    border: 1.5px dashed var(--ec-border);
    border-radius: 11px;
    cursor: pointer;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.swd-file-input[b-7k99gl88og] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.swd-dropzone-ic[b-7k99gl88og] { font-size: 20px; color: var(--ec-muted); }
.swd-dropzone-title[b-7k99gl88og] { font-size: 12.5px; font-weight: 800; color: var(--ec-text); }
.swd-dropzone-sub[b-7k99gl88og] { font-size: 10.5px; color: var(--ec-muted); }
.swd-add-more[b-7k99gl88og] { position: relative; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ec-teal); cursor: pointer; padding: 6px 2px; }
.swd-uploading[b-7k99gl88og] { font-size: 11.5px; color: var(--ec-muted); margin-top: 7px; }
.swd-upload-err[b-7k99gl88og] { font-size: 11.5px; color: var(--ec-red); margin-top: 7px; }

/* Collapsible reference */
.swd-details[b-7k99gl88og] { background: color-mix(in srgb, var(--ec-bg) 70%, #fff); border: 1px solid var(--ec-border-soft); border-radius: 11px; padding: 10px 14px; }
.swd-details summary[b-7k99gl88og] { cursor: pointer; font-size: 11.5px; font-weight: 800; color: var(--ec-sub); letter-spacing: 0.06em; text-transform: uppercase; }
.swd-details-body[b-7k99gl88og] { font-size: 12.5px; color: var(--ec-text); line-height: 1.6; margin: 9px 0 0; white-space: pre-wrap; }

/* Review recap */
.swd-recap[b-7k99gl88og] { background: var(--ec-panel); border: 1px solid var(--ec-border); border-radius: 11px; overflow: hidden; }
.swd-recap-row[b-7k99gl88og] { display: flex; align-items: center; gap: 11px; padding: 9px 14px; border-top: 1px solid var(--ec-border-soft); }
.swd-recap-row:first-child[b-7k99gl88og] { border-top: none; }
.swd-recap-box[b-7k99gl88og] { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--ec-border); color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.swd-recap-box--on[b-7k99gl88og] { background: var(--ec-green); border-color: var(--ec-green); }
.swd-recap-label[b-7k99gl88og] { font-size: 12.5px; color: var(--ec-text); font-weight: 600; }
.swd-recap-label--skip[b-7k99gl88og] { color: var(--ec-muted); text-decoration: line-through; }
.swd-warn[b-7k99gl88og] { font-size: 11px; color: var(--ec-amber); margin: 7px 0 0; font-weight: 600; }
.swd-muted-italic[b-7k99gl88og] { font-size: 12px; color: var(--ec-muted); font-style: italic; margin: 0; }

/* Submitted "what you sent" */
.swd-sent[b-7k99gl88og] { background: var(--ec-panel); border: 1px solid var(--ec-border); border-radius: 11px; overflow: hidden; }
.swd-sent-block[b-7k99gl88og] { padding: 11px 14px; border-top: 1px solid var(--ec-border-soft); }
.swd-sent-block:first-child[b-7k99gl88og] { border-top: none; }
.swd-sent-k[b-7k99gl88og] { font-size: 10.5px; font-weight: 800; color: var(--ec-muted); letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 6px; }
.swd-sent-quote[b-7k99gl88og] { font-size: 12.5px; color: var(--ec-text); line-height: 1.6; font-style: italic; margin: 0; }
.swd-sent-file[b-7k99gl88og] { font-size: 12px; color: var(--ec-text); margin: 0; }

/* Returned feedback */
.swd-feedback[b-7k99gl88og] { background: var(--ec-green-lt); border: 1px solid #bbf7d0; border-radius: 11px; padding: 13px 15px; display: flex; gap: 13px; align-items: flex-start; }
.swd-feedback-grade[b-7k99gl88og] { width: 50px; height: 50px; border-radius: 11px; background: var(--ec-green); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; font-family: ui-monospace, "SF Mono", monospace; flex-shrink: 0; }
.swd-feedback-body[b-7k99gl88og] { flex: 1; min-width: 0; }
.swd-feedback-by[b-7k99gl88og] { font-size: 11px; font-weight: 800; color: var(--ec-green); letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 4px; }
.swd-feedback-text[b-7k99gl88og] { font-size: 13px; color: var(--ec-text); line-height: 1.55; font-style: italic; margin: 0; }

/* Success */
.swd-success[b-7k99gl88og] { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px 24px; flex: 1; min-height: 300px; }
.swd-success-circle[b-7k99gl88og] { width: 90px; height: 90px; border-radius: 50%; background: linear-gradient(135deg, var(--ec-green), #15803d); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 42px; box-shadow: 0 12px 36px color-mix(in srgb, var(--ec-green) 40%, transparent); margin-bottom: 16px; }
.swd-success-title[b-7k99gl88og] { font-size: 20px; font-weight: 800; color: var(--ec-text); margin: 0 0 6px; }
.swd-success-sub[b-7k99gl88og] { font-size: 13px; color: var(--ec-sub); line-height: 1.55; max-width: 340px; margin: 0 0 18px; }
.swd-success-tip[b-7k99gl88og] { background: var(--ec-bg); border: 1px solid var(--ec-border); border-radius: 11px; padding: 12px 16px; display: flex; align-items: center; gap: 11px; font-size: 11.5px; color: var(--ec-muted); text-align: left; }
.swd-success-tip p[b-7k99gl88og] { margin: 0; line-height: 1.5; }

/* ── Footer ── */
.swd-foot[b-7k99gl88og] { padding: 12px 22px; border-top: 1px solid var(--ec-border-soft); background: var(--ec-panel); display: flex; gap: 8px; align-items: center; }
.swd-foot-hint[b-7k99gl88og] { flex: 1; font-size: 11px; color: var(--ec-muted); line-height: 1.4; margin: 0; }
.swd-foot-busy[b-7k99gl88og] { width: 100%; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--ec-muted); padding: 4px; }
.swd-btn[b-7k99gl88og] {
    padding: 11px 16px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}
.swd-btn--grow[b-7k99gl88og] { flex: 1; }
.swd-btn--grow2[b-7k99gl88og] { flex: 2; }
.swd-btn--full[b-7k99gl88og] { width: 100%; }
.swd-btn--ghost[b-7k99gl88og] { background: var(--ec-panel); border: 1px solid var(--ec-border); color: var(--ec-sub); font-weight: 700; }
.swd-btn--subj[b-7k99gl88og] { background: linear-gradient(135deg, var(--subj-color), color-mix(in srgb, var(--subj-color) 80%, #000)); color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--subj-color) 30%, transparent); }
.swd-btn--teal[b-7k99gl88og] { background: var(--ec-teal); color: #fff; }
.swd-btn--green[b-7k99gl88og] { background: linear-gradient(135deg, var(--ec-green), #15803d); color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--ec-green) 30%, transparent); }

@media (max-width: 600px) {
    .swd-panel[b-7k99gl88og] { width: 100%; }
}
/* /Components/Pages/Student/StudentHomeworkPage.razor.rz.scp.css */
/* StudentHomeworkPage — scoped CSS. Pixel-faithful port of SWHomework
   (prototype EduConnect All Roles.html, lines 12761–12889).
   SW_ACCENT = #0891b2 (--ec-teal). */

.swhw-page[b-otj7a9h70n] {
    padding: 0;
    background: var(--ec-bg);
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Tab toggle: To do / Submitted ───────────────── */
.swhw-tabs[b-otj7a9h70n] {
    display: flex;
    gap: 8px;
}
.swhw-tab[b-otj7a9h70n] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--ec-bg);
    border: 1.5px solid var(--ec-border);
    border-radius: 11px;
    padding: 10px 14px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
}
.swhw-tab--active[b-otj7a9h70n] {
    background: var(--ec-panel);
    border-color: var(--ec-teal);
}
.swhw-tab-count[b-otj7a9h70n] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--ec-border-soft);
    color: var(--ec-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    flex-shrink: 0;
}
.swhw-tab-count--active[b-otj7a9h70n] {
    background: rgba(8, 145, 178, 0.094);
    color: var(--ec-teal);
}
.swhw-tab-label[b-otj7a9h70n] {
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-sub);
}
.swhw-tab--active .swhw-tab-label[b-otj7a9h70n] { color: var(--ec-text); }

/* ── Card list ───────────────── */
.swhw-list[b-otj7a9h70n] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.swhw-card[b-otj7a9h70n] {
    width: 100%;
    background: var(--ec-panel);
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    padding: 14px 16px 14px 0;
    display: grid;
    grid-template-columns: 4px 44px 1fr auto auto;
    gap: 14px;
    align-items: center;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.swhw-card:hover[b-otj7a9h70n] {
    border-color: color-mix(in srgb, var(--subj-color) 50%, transparent);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--subj-color) 8%, transparent);
}
.swhw-card--urgent[b-otj7a9h70n] { border-color: rgba(220, 38, 38, 0.25); }

.swhw-card-stripe[b-otj7a9h70n] {
    height: 46px;
    background: var(--subj-color);
    border-radius: 0 4px 4px 0;
}
.swhw-card-tile[b-otj7a9h70n] {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: var(--subj-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex-shrink: 0;
}
.swhw-card-body[b-otj7a9h70n] { min-width: 0; display: flex; flex-direction: column; }
.swhw-card-head[b-otj7a9h70n] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
    flex-wrap: wrap;
}
.swhw-card-subj[b-otj7a9h70n] {
    font-size: 10px;
    font-weight: 800;
    color: var(--subj-color);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.swhw-badge[b-otj7a9h70n] {
    font-size: 9px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.swhw-badge--high[b-otj7a9h70n] { background: var(--ec-red-lt); color: var(--ec-red); }

.swhw-card-title[b-otj7a9h70n] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    line-height: 1.3;
}
.swhw-card-title--done[b-otj7a9h70n] { text-decoration: line-through; color: var(--ec-muted); }

.swhw-card-meta[b-otj7a9h70n] {
    display: flex;
    gap: 14px;
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--ec-muted);
    align-items: center;
    flex-wrap: wrap;
}
.swhw-card-meta i[b-otj7a9h70n] { margin-right: 1px; }
.swhw-card-meta-sep[b-otj7a9h70n] { margin-left: -10px; }

.swhw-card-status[b-otj7a9h70n] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 10px;
}
.swhw-card-status-dot[b-otj7a9h70n] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.swhw-card-status-label[b-otj7a9h70n] {
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.swhw-card-due[b-otj7a9h70n] {
    padding: 6px 11px;
    border-radius: 10px;
    font-size: 11.5px;
    font-weight: 800;
    white-space: nowrap;
    min-width: 96px;
    text-align: center;
    border: 1px solid transparent;
}
.swhw-card-due--blue[b-otj7a9h70n]   { background: var(--ec-blue-gh);  color: var(--ec-blue);   border-color: var(--ec-blue-lt); }
.swhw-card-due--orange[b-otj7a9h70n] { background: var(--ec-orange-lt); color: var(--ec-orange); border-color: #fed7aa; }
.swhw-card-due--amber[b-otj7a9h70n]  { background: var(--ec-amber-lt);  color: var(--ec-amber);  border-color: #fde68a; }
.swhw-card-due--red[b-otj7a9h70n]    { background: var(--ec-red-lt);    color: var(--ec-red);    border-color: #fecaca; }

.swhw-card-grade[b-otj7a9h70n] {
    background: var(--ec-green-lt);
    color: var(--ec-green);
    border: 1px solid #bbf7d0;
    width: 48px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
    font-family: ui-monospace, "SF Mono", monospace;
}

/* ── Empty state ───────────────── */
.swhw-empty[b-otj7a9h70n] {
    background: var(--ec-panel);
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    padding: 48px 28px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.swhw-empty-icon[b-otj7a9h70n] { font-size: 34px; color: var(--ec-teal); margin-bottom: 5px; }
.swhw-empty-title[b-otj7a9h70n] { font-size: 15px; font-weight: 800; color: var(--ec-text); }
.swhw-empty-sub[b-otj7a9h70n] { font-size: 12.5px; color: var(--ec-muted); max-width: 340px; line-height: 1.55; }

@media (max-width: 720px) {
    .swhw-card[b-otj7a9h70n] {
        grid-template-columns: 4px 40px 1fr;
        row-gap: 8px;
    }
    .swhw-card-status[b-otj7a9h70n] { grid-column: 2 / 4; padding-left: 0; }
    .swhw-card-due[b-otj7a9h70n], .swhw-card-grade[b-otj7a9h70n] { grid-column: 2 / 4; justify-self: start; }
}
/* /Components/Pages/Student/StudentProfilePage.razor.rz.scp.css */
/* StudentProfilePage — scoped CSS. Mirrors SWProfile (proto 13783-13834). */

.spp-page[b-3o6hyqsxym] {
    padding: 0;
    background: var(--ec-bg);
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 760px;
    margin: 0 auto;
}

/* ── Hero ─────────────────────────────────────── */
.spp-hero[b-3o6hyqsxym] {
    position: relative;
    background: linear-gradient(135deg, var(--ec-purple) 0%, var(--ec-blue) 100%);
    color: #fff;
    border-radius: 16px;
    padding: 26px 28px;
    overflow: hidden;
}
.spp-hero-ring[b-3o6hyqsxym] {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .14);
}
.spp-hero-ring-1[b-3o6hyqsxym] { right: -40px; top: -40px; width: 140px; height: 140px; }
.spp-hero-ring-2[b-3o6hyqsxym] { right: 40px; bottom: -60px; width: 100px; height: 100px; }
.spp-hero-row[b-3o6hyqsxym] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.spp-avatar-wrap[b-3o6hyqsxym] { position: relative; }
.spp-avatar[b-3o6hyqsxym] {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 800;
    object-fit: cover;
}
.spp-avatar--img[b-3o6hyqsxym] { background: var(--ec-bg); }
.spp-avatar-edit[b-3o6hyqsxym] {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    color: var(--ec-text);
    border: 2px solid var(--ec-purple);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
}
.spp-hero-eyebrow[b-3o6hyqsxym] {
    font-size: 10px;
    font-weight: 800;
    color: rgba(255, 255, 255, .7);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0;
}
.spp-hero-name[b-3o6hyqsxym] {
    font-size: 22px;
    font-weight: 800;
    margin: 4px 0 0;
    letter-spacing: -0.01em;
}
.spp-hero-sub[b-3o6hyqsxym] {
    font-size: 12.5px;
    color: rgba(255, 255, 255, .85);
    margin: 5px 0 0;
}

/* ── Banners ──────────────────────────────────── */
.spp-banner[b-3o6hyqsxym] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 700;
}
.spp-banner--alert[b-3o6hyqsxym] { background: var(--ec-red-lt); color: var(--ec-red); border-left: 3px solid var(--ec-red); }
.spp-banner--ok[b-3o6hyqsxym]    { background: var(--ec-green-lt); color: var(--ec-green); border-left: 3px solid var(--ec-green); }

/* ── Card ─────────────────────────────────────── */
.spp-card[b-3o6hyqsxym] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    padding: 18px 20px;
}
.spp-card-head[b-3o6hyqsxym] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}
.spp-card-title[b-3o6hyqsxym] {
    font-size: 15px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.spp-edit-btn[b-3o6hyqsxym] {
    padding: 6px 12px;
    background: transparent;
    color: var(--ec-blue);
    border: 1px solid var(--ec-border);
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.spp-edit-btn:hover[b-3o6hyqsxym] { border-color: var(--ec-blue); }

/* Read-only rows */
.spp-rows[b-3o6hyqsxym] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.spp-row[b-3o6hyqsxym] {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 14px;
    align-items: baseline;
}
.spp-row-label[b-3o6hyqsxym] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0;
}
.spp-row-value[b-3o6hyqsxym] {
    font-size: 13px;
    color: var(--ec-text);
    margin: 0;
    font-weight: 600;
}

/* Edit form */
.spp-form[b-3o6hyqsxym] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.spp-field[b-3o6hyqsxym] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.spp-label[b-3o6hyqsxym] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-text);
}
.spp-input[b-3o6hyqsxym] {
    padding: 9px 12px;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    color: var(--ec-text);
    background: #fff;
    outline: none;
}
.spp-input:focus[b-3o6hyqsxym] { border-color: var(--ec-blue); }
.spp-input--disabled[b-3o6hyqsxym] { background: var(--ec-bg); color: var(--ec-muted); }
.spp-hint[b-3o6hyqsxym] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 0;
}

.spp-foot[b-3o6hyqsxym] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.spp-btn[b-3o6hyqsxym] {
    padding: 9px 17px;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    border: 1px solid var(--ec-border);
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.spp-btn--cancel[b-3o6hyqsxym] { background: #fff; color: var(--ec-text); }
/* .spp-btn--primary removed — page-level primary Save now uses shared .ec-btn-primary */
.spp-btn:disabled[b-3o6hyqsxym] { opacity: 0.55; cursor: not-allowed; }
/* /Components/Pages/Student/StudentSchedulePage.razor.rz.scp.css */
/* StudentSchedulePage — scoped CSS. Pixel-faithful port of SWSchedule
   (prototype EduConnect All Roles.html, lines 12473–12697).
   Week-grid view intentionally omitted. SW_ACCENT = #0891b2 (teal). */

.sched-page[b-kp6xgb9ua2] {
    padding: 0;
    background: var(--ec-bg);
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Toolbar: tabs + week subline ───────────────── */
.sched-toolbar[b-kp6xgb9ua2] {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}
.sched-tabs[b-kp6xgb9ua2] {
    display: flex;
    gap: 4px;
    background: var(--ec-bg);
    border: 1px solid var(--ec-border);
    border-radius: 10px;
    padding: 3px;
}
.sched-tab[b-kp6xgb9ua2] {
    padding: 6px 12px;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: var(--ec-muted);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.sched-tab i[b-kp6xgb9ua2] { font-size: 13px; }
.sched-tab--active[b-kp6xgb9ua2] {
    background: #fff;
    color: var(--ec-text);
    box-shadow: 0 1px 3px rgba(13, 23, 51, 0.08);
}
.sched-subline[b-kp6xgb9ua2] {
    font-size: 12px;
    color: var(--ec-muted);
    margin: 0;
}
.sched-subline b[b-kp6xgb9ua2] {
    color: var(--ec-text);
    font-weight: 800;
}

/* ── Timeline layout ────────────────────────────── */
.sched-timeline-wrap[b-kp6xgb9ua2] {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 14px;
    align-items: start;
}

.sched-tl-card[b-kp6xgb9ua2],
.sched-subj-card[b-kp6xgb9ua2] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    overflow: hidden;
}
.sched-card-head[b-kp6xgb9ua2] {
    padding: 14px 20px;
    border-bottom: 1px solid var(--ec-border-soft);
}
.sched-card-title[b-kp6xgb9ua2] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.sched-card-sub[b-kp6xgb9ua2] {
    font-size: 11.5px;
    color: var(--ec-muted);
    margin: 2px 0 0;
}

/* ── Vertical timeline grid ─────────────────────── */
.sched-tl-grid[b-kp6xgb9ua2] {
    display: grid;
    grid-template-columns: 56px repeat(5, 1fr);
}

.sched-tl-railcol[b-kp6xgb9ua2] {
    border-right: 1px solid var(--ec-border-soft);
    position: relative;
    padding-top: 36px;
}
.sched-tl-raillabel[b-kp6xgb9ua2] {
    position: absolute;
    left: 0;
    right: 0;
    padding-right: 7px;
    text-align: right;
    transform: translateY(-7px);
}
.sched-tl-raillabel span[b-kp6xgb9ua2] {
    font-size: 9.5px;
    color: var(--ec-muted);
    font-weight: 700;
    font-family: ui-monospace, "SF Mono", monospace;
}

.sched-tl-daycol[b-kp6xgb9ua2] {
    position: relative;
}
.sched-tl-daycol--bordered[b-kp6xgb9ua2] {
    border-right: 1px solid var(--ec-border-soft);
}
.sched-tl-dayhead[b-kp6xgb9ua2] {
    padding: 8px 6px;
    text-align: center;
    border-bottom: 1px solid var(--ec-border-soft);
    background: var(--ec-bg);
    height: 36px;
    box-sizing: border-box;
}
.sched-tl-dayname[b-kp6xgb9ua2] {
    font-size: 10px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}
.sched-tl-hourline[b-kp6xgb9ua2] {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px dashed var(--ec-border-soft);
    opacity: 0.5;
    pointer-events: none;
}

/* Class block */
.sched-block[b-kp6xgb9ua2] {
    position: absolute;
    left: 3px;
    right: 3px;
    border-radius: 7px;
    padding: 4px 7px;
    overflow: hidden;
    cursor: pointer;
}
.sched-block--past[b-kp6xgb9ua2] { opacity: 0.45; }
.sched-block-head[b-kp6xgb9ua2] {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 2px;
}
.sched-block-name[b-kp6xgb9ua2] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-text);
    line-height: 1;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}
.sched-block-dot[b-kp6xgb9ua2] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ec-green);
    flex-shrink: 0;
    animation: sched-pulse-b-kp6xgb9ua2 2s infinite;
}
.sched-block-time[b-kp6xgb9ua2] {
    font-size: 9px;
    color: var(--ec-muted);
    font-weight: 700;
    font-family: ui-monospace, "SF Mono", monospace;
    margin: 0;
}
.sched-block-room[b-kp6xgb9ua2] {
    font-size: 9px;
    color: var(--ec-sub);
    margin: 1px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sched-block-room i[b-kp6xgb9ua2] { font-size: 9px; }

@keyframes sched-pulse-b-kp6xgb9ua2 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* NOW indicator */
.sched-now-line[b-kp6xgb9ua2] {
    position: absolute;
    left: -6px;
    right: -6px;
    border-top: 2px solid var(--ec-red);
    z-index: 5;
    pointer-events: none;
}
.sched-now-dot[b-kp6xgb9ua2] {
    position: absolute;
    left: -2px;
    top: -5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ec-red);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ec-red) 25%, transparent);
}
.sched-now-label[b-kp6xgb9ua2] {
    position: absolute;
    right: 0;
    top: -15px;
    font-size: 9px;
    font-weight: 800;
    color: #fff;
    background: var(--ec-red);
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0.06em;
}

/* ── Sidebar ────────────────────────────────────── */
.sched-side[b-kp6xgb9ua2] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.sched-subj-body[b-kp6xgb9ua2] { padding: 12px 18px; }
.sched-subj-row[b-kp6xgb9ua2] { margin-bottom: 10px; }
.sched-subj-row:last-child[b-kp6xgb9ua2] { margin-bottom: 0; }
.sched-subj-rowtop[b-kp6xgb9ua2] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.sched-subj-name[b-kp6xgb9ua2] {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ec-text);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}
.sched-subj-hours[b-kp6xgb9ua2] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-muted);
    font-family: ui-monospace, "SF Mono", monospace;
    margin: 0;
}
.sched-subj-bar[b-kp6xgb9ua2] {
    height: 4px;
    background: var(--ec-border-soft);
    border-radius: 2px;
    overflow: hidden;
}
.sched-subj-fill[b-kp6xgb9ua2] {
    height: 100%;
    border-radius: 2px;
}

.sched-week-card[b-kp6xgb9ua2] {
    background: linear-gradient(135deg, #0891b210, #fff);
    border: 1px solid #0891b240;
    border-radius: 14px;
    padding: 14px 18px;
}
.sched-week-eyebrow[b-kp6xgb9ua2] {
    font-size: 10.5px;
    font-weight: 800;
    color: #0891b2;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 5px;
}
.sched-week-big[b-kp6xgb9ua2] {
    font-size: 24px;
    font-weight: 800;
    color: var(--ec-text);
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 0;
}
.sched-week-sub[b-kp6xgb9ua2] {
    font-size: 11.5px;
    color: var(--ec-muted);
    margin: 5px 0 0;
}

/* ── Today list ─────────────────────────────────── */
.sched-today-card[b-kp6xgb9ua2] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    overflow: hidden;
}
.sched-today-head[b-kp6xgb9ua2] {
    padding: 14px 20px;
    border-bottom: 1px solid var(--ec-border-soft);
    background: linear-gradient(135deg, #0891b210, #fff);
}
.sched-today-title[b-kp6xgb9ua2] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.sched-today-sub[b-kp6xgb9ua2] {
    font-size: 11.5px;
    color: var(--ec-muted);
    margin: 2px 0 0;
}
.sched-today-list[b-kp6xgb9ua2] { padding: 12px 0; }
.sched-today-row[b-kp6xgb9ua2] {
    display: grid;
    grid-template-columns: 90px 38px 1fr;
    gap: 14px;
    padding: 12px 20px;
    align-items: center;
}
.sched-today-row--divider[b-kp6xgb9ua2] { border-top: 1px solid var(--ec-border-soft); }
.sched-today-time[b-kp6xgb9ua2] {
    font-size: 12px;
    font-weight: 800;
    color: var(--ec-text);
    font-family: ui-monospace, "SF Mono", monospace;
    margin: 0;
}
.sched-today-info[b-kp6xgb9ua2] { min-width: 0; }
.sched-today-name[b-kp6xgb9ua2] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.sched-today-meta[b-kp6xgb9ua2] {
    font-size: 11.5px;
    color: var(--ec-muted);
    margin: 3px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}
.sched-today-meta i[b-kp6xgb9ua2] { font-size: 11px; }
.sched-today-sep[b-kp6xgb9ua2] { color: var(--ec-faint); }
.sched-today-empty[b-kp6xgb9ua2] {
    padding: 18px 20px;
    font-size: 12px;
    color: var(--ec-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ── Empty (no class) ───────────────────────────── */
.sched-empty[b-kp6xgb9ua2] {
    background: #fff;
    border: 1px dashed var(--ec-border);
    border-radius: 14px;
    padding: 48px 28px;
    text-align: center;
}
.sched-empty-icon[b-kp6xgb9ua2] {
    font-size: 38px;
    color: var(--ec-faint);
    margin-bottom: 10px;
    display: block;
}
.sched-empty-title[b-kp6xgb9ua2] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.sched-empty-sub[b-kp6xgb9ua2] {
    font-size: 12px;
    color: var(--ec-muted);
    margin: 5px auto 0;
    max-width: 380px;
}

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 1100px) {
    .sched-timeline-wrap[b-kp6xgb9ua2] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Student/StudentStudyPlannerPage.razor.rz.scp.css */
/* StudentStudyPlannerPage — scoped CSS. Pixel-faithful port of SWStudyPlanner +
   SWAddTaskModal (proto ~12891-13167). Accent is SW_ACCENT = teal. */

.ssp-page[b-2zpusiwg39] {
    padding: 0;
    background: var(--ec-bg);
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 860px;
    margin: 0 auto;
}

/* ── Hero ─────────────────────────────────────── */
.ssp-hero[b-2zpusiwg39] {
    position: relative;
    background: linear-gradient(135deg, #5b21b6 0%, var(--ec-teal) 100%);
    color: #fff;
    border-radius: 16px;
    padding: 22px 26px;
    overflow: hidden;
}
.ssp-hero-ring[b-2zpusiwg39] {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .07);
    pointer-events: none;
}
.ssp-hero-ring--1[b-2zpusiwg39] { right: -50px; top: -60px; width: 240px; height: 240px; }
.ssp-hero-ring--2[b-2zpusiwg39] { right: 60px; bottom: -80px; width: 180px; height: 180px; }
.ssp-hero-mark[b-2zpusiwg39] {
    position: absolute;
    right: 24px;
    top: 18px;
    font-size: 54px;
    opacity: .12;
    color: #fff;
    pointer-events: none;
}

.ssp-hero-top[b-2zpusiwg39] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.ssp-hero-copy[b-2zpusiwg39] {
    flex: 1 1 320px;
    min-width: 0;
}
.ssp-hero-eyebrow[b-2zpusiwg39] {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, .7);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0;
}
.ssp-hero-title[b-2zpusiwg39] {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin: 5px 0 6px;
}
.ssp-hero-sub[b-2zpusiwg39] {
    font-size: 13px;
    color: rgba(255, 255, 255, .85);
    line-height: 1.5;
    max-width: 520px;
    margin: 0;
}
.ssp-hero-sub b[b-2zpusiwg39] { color: #fff; }

.ssp-hero-stats[b-2zpusiwg39] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.ssp-hero-stat[b-2zpusiwg39] {
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 11px;
    padding: 10px 14px;
    min-width: 90px;
    text-align: center;
}
.ssp-hero-stat-label[b-2zpusiwg39] {
    font-size: 9.5px;
    font-weight: 800;
    color: rgba(255, 255, 255, .7);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
}
.ssp-hero-stat-value[b-2zpusiwg39] {
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    margin: 5px 0 0;
}
.ssp-hero-stat-sub[b-2zpusiwg39] {
    font-size: 10px;
    color: rgba(255, 255, 255, .7);
    margin: 3px 0 0;
}

.ssp-hero-actions[b-2zpusiwg39] {
    position: relative;
    margin-top: 14px;
    display: flex;
    gap: 8px;
}
.ssp-hero-add[b-2zpusiwg39] {
    background: #fff;
    border: none;
    border-radius: 9px;
    padding: 9px 15px;
    color: #5b21b6;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ssp-hero-hw[b-2zpusiwg39] {
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 9px;
    padding: 9px 13px;
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ssp-hero-hw:hover[b-2zpusiwg39] { background: rgba(255, 255, 255, .26); }

/* ── Banner ───────────────────────────────────── */
.ssp-banner[b-2zpusiwg39] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 700;
}
.ssp-banner--alert[b-2zpusiwg39] {
    background: var(--ec-red-lt);
    color: var(--ec-red);
    border-left: 3px solid var(--ec-red);
}

/* ── Filter chips ─────────────────────────────── */
.ssp-filters[b-2zpusiwg39] {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}
.ssp-chip[b-2zpusiwg39] {
    padding: 6px 12px;
    background: #fff;
    color: var(--ec-sub);
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ssp-chip:hover[b-2zpusiwg39] { color: var(--ec-text); }
.ssp-chip--active[b-2zpusiwg39] {
    background: var(--ec-teal);
    color: #fff;
    border-color: var(--ec-teal);
}
.ssp-chip-count[b-2zpusiwg39] {
    font-size: 10px;
    font-weight: 800;
    background: var(--ec-border-soft);
    color: var(--ec-muted);
    padding: 1px 5px;
    border-radius: 4px;
}
.ssp-chip--active .ssp-chip-count[b-2zpusiwg39] {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}
.ssp-filters-spacer[b-2zpusiwg39] { flex: 1; }
.ssp-completion[b-2zpusiwg39],
.ssp-completion-hint[b-2zpusiwg39] {
    font-size: 11px;
    font-weight: 600;
    color: var(--ec-muted);
}

/* ── Tasks card (all buckets in one card) ─────── */
.ssp-card[b-2zpusiwg39] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    overflow: hidden;
}
.ssp-bucket-head[b-2zpusiwg39] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px 7px;
    background: var(--ec-bg);
    border-top: 1px solid var(--ec-border-soft);
}
.ssp-bucket-label[b-2zpusiwg39] {
    font-size: 10px;
    font-weight: 800;
    color: var(--ec-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0;
}
.ssp-bucket-count[b-2zpusiwg39] {
    font-size: 10px;
    font-weight: 700;
    color: var(--ec-muted);
    margin: 0;
}

/* ── Task row ─────────────────────────────────── */
.ssp-task[b-2zpusiwg39] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 20px;
    border-top: 1px solid var(--ec-border-soft);
}
.ssp-task-check[b-2zpusiwg39] {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1.5px solid var(--ec-border);
    background: #fff;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    padding: 0;
    font-size: 13px;
    transition: all .15s;
}
.ssp-task-check--on[b-2zpusiwg39] {
    background: var(--ec-teal);
    border-color: var(--ec-teal);
}
.ssp-task-title[b-2zpusiwg39] {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--ec-text);
    margin: 0;
    cursor: pointer;
    min-width: 0;
}
.ssp-task--done .ssp-task-title[b-2zpusiwg39] {
    text-decoration: line-through;
    color: var(--ec-muted);
}
.ssp-task-prio[b-2zpusiwg39] {
    font-size: 9px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    flex-shrink: 0;
}
.ssp-task-prio--ok[b-2zpusiwg39]    { background: var(--ec-green-lt); color: var(--ec-green); }
.ssp-task-prio--warn[b-2zpusiwg39]  { background: var(--ec-amber-lt); color: var(--ec-amber); }
.ssp-task-prio--alert[b-2zpusiwg39] { background: var(--ec-red-lt); color: var(--ec-red); }
.ssp-task-min[b-2zpusiwg39] {
    font-size: 11px;
    color: var(--ec-muted);
    font-weight: 700;
    font-family: ui-monospace, "SF Mono", monospace;
    min-width: 32px;
    text-align: right;
    flex-shrink: 0;
}
.ssp-task-del[b-2zpusiwg39] {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: #fff;
    border: 1px solid var(--ec-border);
    color: var(--ec-muted);
    cursor: pointer;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ssp-task-del:hover[b-2zpusiwg39] {
    background: var(--ec-red-lt);
    color: var(--ec-red);
    border-color: color-mix(in srgb, var(--ec-red) 25%, transparent);
}

/* ── Empty state ─────────────────────────────── */
.ssp-empty[b-2zpusiwg39] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    padding: 48px 28px;
    text-align: center;
}
.ssp-empty-icon[b-2zpusiwg39] {
    font-size: 36px;
    color: var(--ec-faint);
    margin-bottom: 11px;
    display: block;
}
.ssp-empty-title[b-2zpusiwg39] {
    font-size: 15px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0 0 6px;
}
.ssp-empty-sub[b-2zpusiwg39] {
    font-size: 12.5px;
    color: var(--ec-muted);
    margin: 0 auto 16px;
    max-width: 340px;
    line-height: 1.55;
}
.ssp-empty-btn[b-2zpusiwg39] {
    background: linear-gradient(135deg, var(--ec-teal), #0e7490);
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--ec-teal) 30%, transparent);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ── Privacy + tip footer ────────────────────── */
.ssp-foot[b-2zpusiwg39] {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 16px;
    background: var(--ec-bg);
    border: 1px dashed var(--ec-border);
    border-radius: 11px;
}
.ssp-foot-icon[b-2zpusiwg39] {
    color: var(--ec-purple);
    font-size: 18px;
    display: inline-flex;
    align-items: center;
}
.ssp-foot-copy[b-2zpusiwg39] { flex: 1; min-width: 0; }
.ssp-foot-title[b-2zpusiwg39] {
    font-size: 12px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0 0 2px;
}
.ssp-foot-sub[b-2zpusiwg39] {
    font-size: 11.5px;
    color: var(--ec-muted);
    line-height: 1.5;
    margin: 0;
}
.ssp-foot-link[b-2zpusiwg39] {
    color: var(--ec-teal);
    font-weight: 800;
    text-decoration: underline;
}

/* ── Add-task modal ──────────────────────────── */
.ssp-overlay[b-2zpusiwg39] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .6);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.ssp-modal[b-2zpusiwg39] {
    width: min(480px, 100%);
    max-height: 92vh;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(13, 23, 51, .4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ssp-modal-head[b-2zpusiwg39] {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--ec-border-soft);
    background: linear-gradient(135deg, color-mix(in srgb, var(--ec-teal) 10%, #fff), #fff);
}
.ssp-modal-icon[b-2zpusiwg39] {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--ec-teal);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.ssp-modal-heading[b-2zpusiwg39] { flex: 1; min-width: 0; }
.ssp-modal-eyebrow[b-2zpusiwg39] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-teal);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
}
.ssp-modal-title[b-2zpusiwg39] {
    font-size: 18px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 3px 0 0;
}
.ssp-modal-close[b-2zpusiwg39] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: #fff;
    border: 1px solid var(--ec-border);
    color: var(--ec-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    flex-shrink: 0;
}
.ssp-modal-close:hover[b-2zpusiwg39] { background: var(--ec-border-soft); color: var(--ec-text); }
.ssp-modal-body[b-2zpusiwg39] {
    flex: 1;
    overflow-y: auto;
    padding: 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ssp-field[b-2zpusiwg39] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ssp-field-label[b-2zpusiwg39] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.ssp-field-input[b-2zpusiwg39] {
    padding: 10px 13px;
    border: 1px solid var(--ec-border);
    border-radius: 10px;
    font-size: 13.5px;
    font-family: inherit;
    color: var(--ec-text);
    background: #fff;
    outline: none;
    box-sizing: border-box;
}
.ssp-field-input:focus[b-2zpusiwg39] { border-color: var(--ec-teal); }
.ssp-field-hint[b-2zpusiwg39] { font-size: 11px; color: var(--ec-muted); }
.ssp-field-hint--err[b-2zpusiwg39] { color: var(--ec-red); }

.ssp-chip-group[b-2zpusiwg39] {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.ssp-chip-group--when[b-2zpusiwg39] { gap: 6px; }

/* When-bucket chips */
.ssp-pick-chip[b-2zpusiwg39] {
    flex: 1;
    min-width: 100px;
    padding: 10px;
    background: #fff;
    color: var(--ec-sub);
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}
.ssp-pick-chip:hover[b-2zpusiwg39] { color: var(--ec-text); }
.ssp-pick-chip--active[b-2zpusiwg39] {
    background: var(--ec-teal);
    color: #fff;
    border-color: var(--ec-teal);
}

/* Priority — segmented track */
.ssp-prio-track[b-2zpusiwg39] {
    display: flex;
    gap: 3px;
    background: var(--ec-bg);
    padding: 3px;
    border-radius: 8px;
}
.ssp-prio-btn[b-2zpusiwg39] {
    flex: 1;
    padding: 8px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--ec-muted);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
}
.ssp-prio-btn--ok.ssp-prio-btn--active[b-2zpusiwg39]    { background: var(--ec-green); color: #fff; }
.ssp-prio-btn--warn.ssp-prio-btn--active[b-2zpusiwg39]  { background: var(--ec-amber); color: #fff; }
.ssp-prio-btn--alert.ssp-prio-btn--active[b-2zpusiwg39] { background: var(--ec-red);   color: #fff; }

/* Quick-minute chips */
.ssp-time-btn[b-2zpusiwg39] {
    min-width: 54px;
    padding: 6px 13px;
    background: #fff;
    color: var(--ec-sub);
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    font-family: ui-monospace, "SF Mono", monospace;
}
.ssp-time-btn:hover[b-2zpusiwg39] { color: var(--ec-text); }
.ssp-time-btn--active[b-2zpusiwg39] {
    background: var(--ec-teal);
    color: #fff;
    border-color: var(--ec-teal);
}

.ssp-modal-privacy[b-2zpusiwg39] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    background: var(--ec-bg);
    border: 1px solid var(--ec-border-soft);
    border-radius: 9px;
    font-size: 11px;
    color: var(--ec-muted);
    line-height: 1.5;
    margin: 0;
}

.ssp-modal-foot[b-2zpusiwg39] {
    display: flex;
    gap: 7px;
    justify-content: flex-end;
    padding: 12px 24px;
    border-top: 1px solid var(--ec-border-soft);
}
.ssp-btn[b-2zpusiwg39] {
    padding: 9px 18px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ssp-btn--cancel[b-2zpusiwg39] {
    background: #fff;
    color: var(--ec-sub);
    border-color: var(--ec-border);
    font-weight: 700;
    font-size: 12.5px;
}
.ssp-btn--primary[b-2zpusiwg39] {
    background: linear-gradient(135deg, var(--ec-teal), #0e7490);
    color: #fff;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--ec-teal) 30%, transparent);
}
.ssp-btn--primary:disabled[b-2zpusiwg39] {
    background: var(--ec-border-soft);
    color: var(--ec-muted);
    box-shadow: none;
    cursor: not-allowed;
}
/* /Components/Pages/SuperAdmin/PlatformBannerPage.razor.rz.scp.css */
.pb-page[b-oj650ogaul] {
    max-width: 980px;
    margin: 0 auto;
    padding: 0; /* shell owns the gutter */
}

.pb-header[b-oj650ogaul] {
    margin-bottom: 1.5rem;
}
.pb-title[b-oj650ogaul] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
    color: var(--ec-text, #1a1a2e);
}
.pb-subtitle[b-oj650ogaul] {
    margin: 0;
    color: var(--ec-text-muted, #6b7280);
    font-size: 0.9rem;
}

.pb-loading[b-oj650ogaul] {
    color: var(--ec-text-muted, #6b7280);
    padding: 2rem 0;
}

.pb-toast[b-oj650ogaul] {
    border-radius: 0.625rem;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
}
.pb-toast-ok[b-oj650ogaul] {
    background: rgba(34, 139, 84, 0.10);
    color: #1c7a48;
    border: 1px solid rgba(34, 139, 84, 0.25);
}
.pb-toast-err[b-oj650ogaul] {
    background: rgba(172, 52, 52, 0.10);
    color: #8f2b2b;
    border: 1px solid rgba(172, 52, 52, 0.25);
}

.pb-grid[b-oj650ogaul] {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 820px) {
    .pb-grid[b-oj650ogaul] { grid-template-columns: 1fr; }
}

.pb-card[b-oj650ogaul],
.pb-preview[b-oj650ogaul] {
    background: var(--ec-surface, #fff);
    border: 1px solid var(--ec-border, #e5e7eb);
    border-radius: 0.875rem;
    padding: 1.25rem;
}

/* ── Enable switch ── */
.pb-switch[b-oj650ogaul] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    padding-bottom: 1.1rem;
    margin-bottom: 1.1rem;
    border-bottom: 1px solid var(--ec-border, #eee);
}
.pb-switch input[b-oj650ogaul] { display: none; }
.pb-switch-track[b-oj650ogaul] {
    flex-shrink: 0;
    width: 2.6rem;
    height: 1.5rem;
    border-radius: 1rem;
    background: #cfd4dc;
    position: relative;
    transition: background 0.15s ease;
}
.pb-switch-thumb[b-oj650ogaul] {
    position: absolute;
    top: 0.15rem;
    left: 0.15rem;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.15s ease;
}
.pb-switch input:checked + .pb-switch-track[b-oj650ogaul] {
    background: #2e5dab;
}
.pb-switch input:checked + .pb-switch-track .pb-switch-thumb[b-oj650ogaul] {
    transform: translateX(1.1rem);
}
.pb-switch-label[b-oj650ogaul] { display: flex; flex-direction: column; }
.pb-switch-label strong[b-oj650ogaul] { font-size: 0.92rem; }
.pb-switch-label small[b-oj650ogaul] { color: var(--ec-text-muted, #6b7280); font-size: 0.78rem; }

/* ── Fields ── */
.pb-field[b-oj650ogaul] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1rem;
}
.pb-field > label[b-oj650ogaul] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ec-text, #374151);
}
.pb-input[b-oj650ogaul] {
    width: 100%;
    border: 1px solid var(--ec-border, #d1d5db);
    border-radius: 0.5rem;
    padding: 0.55rem 0.7rem;
    font-size: 0.88rem;
    font-family: inherit;
    background: #fff;
    color: var(--ec-text, #1a1a2e);
}
.pb-input:focus[b-oj650ogaul] {
    outline: none;
    border-color: #2e5dab;
    box-shadow: 0 0 0 3px rgba(46, 93, 171, 0.12);
}
textarea.pb-input[b-oj650ogaul] { resize: vertical; }
.pb-hint[b-oj650ogaul] {
    color: var(--ec-text-muted, #9ca3af);
    font-size: 0.74rem;
}

.pb-expiry-row[b-oj650ogaul] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.pb-clear[b-oj650ogaul] {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--ec-border, #d1d5db);
    border-radius: 0.5rem;
    padding: 0.45rem 0.7rem;
    font-size: 0.8rem;
    cursor: pointer;
    color: var(--ec-text-muted, #6b7280);
}
.pb-clear:hover[b-oj650ogaul] { background: #f3f4f6; }

.pb-actions[b-oj650ogaul] {
    margin-top: 0.5rem;
}
.pb-save[b-oj650ogaul] {
    background: #2e5dab;
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    padding: 0.6rem 1.4rem;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}
.pb-save:hover[b-oj650ogaul] { background: #244a8a; }
.pb-save:disabled[b-oj650ogaul] { opacity: 0.6; cursor: default; }

/* ── Preview ── */
.pb-preview-label[b-oj650ogaul] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ec-text-muted, #9ca3af);
    margin-bottom: 0.75rem;
}
.pb-preview-empty[b-oj650ogaul] {
    color: var(--ec-text-muted, #9ca3af);
    font-size: 0.85rem;
    font-style: italic;
    padding: 1rem;
    border: 1px dashed var(--ec-border, #e5e7eb);
    border-radius: 0.625rem;
    text-align: center;
}
.pb-preview-note[b-oj650ogaul] {
    margin-top: 0.6rem;
    color: var(--ec-text-muted, #9ca3af);
    font-size: 0.76rem;
}
/* /Components/Pages/Teacher/DayRhythm.razor.rz.scp.css */
/* ── DayRhythm.razor.css ─────────────────────────────────────────────────
   Scoped styles for the Teacher KG Day Rhythm grid page.
   Visual reference: prototype TWDayRhythm (EduConnect All Roles.html ~43908-44544).
   Token aliases:
     W.bg          → var(--ec-bg)         #f7f8fc
     W.border      → var(--ec-border)     #e7eaf3
     W.borderSoft  → var(--ec-border-soft) #eef0f6
     W.text        → var(--ec-text)        #1a2540
     W.sub         → var(--ec-sub)         #5b6b8c
     W.muted       → var(--ec-muted)       #8b95ad
     W.purple      → var(--ec-purple)      #7c3aed
     W.purpleLt    → var(--ec-purple-lt)   #ede9fe
     W.amber       → var(--ec-amber)       #d97706
     W.amberLt     → var(--ec-amber-lt)    #fef3c7
     W.red         → var(--ec-red)         #dc2626
   ─────────────────────────────────────────────────────────────────────── */

/* ── Not-KG / no-groups placeholder ──────────────────────────────────────── */
.dr-not-kg[b-f36f6p707q] {
    background: #fff;
    border: 1px dashed var(--ec-border);
    border-radius: 14px;
    padding: 48px 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
}

.dr-not-kg-icon[b-f36f6p707q] {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: var(--ec-purple-lt);
    color: var(--ec-purple);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dr-not-kg-title[b-f36f6p707q] {
    font-size: 15px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}

.dr-not-kg-desc[b-f36f6p707q] {
    font-size: 12px;
    color: var(--ec-muted);
    max-width: 380px;
    line-height: 1.55;
    margin: 0;
}

/* ── Group picker tabs ──────────────────────────────────────────────────── */
/* Group selector now uses the shared <WebSegmentedControl>; this wrapper only
   carries the spacing to the header card below. */
.dr-group-tabs[b-f36f6p707q] {
    margin-bottom: var(--ec-sp-3);
}

/* ── Header card ─────────────────────────────────────────────────────────── */
.dr-header-card[b-f36f6p707q] {
    background: #fff;
    border-radius: 14px;
    border: 1px solid var(--ec-border);
    padding: 14px 18px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.dr-header-body[b-f36f6p707q] {
    min-width: 0;
}

.dr-eyebrow[b-f36f6p707q] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}

.dr-title[b-f36f6p707q] {
    font-size: 20px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 2px 0 0;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 9px;
}

.dr-kg-badge[b-f36f6p707q] {
    font-size: 11px;
    font-weight: 800;
    background: var(--ec-purple-lt);
    color: var(--ec-purple);
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: 0.04em;
}

.dr-desc[b-f36f6p707q] {
    font-size: 12px;
    color: var(--ec-muted);
    margin: 4px 0 0;
}

.dr-last-edited[b-f36f6p707q] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 6px 0 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

.dr-header-actions[b-f36f6p707q] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Shared button styles ────────────────────────────────────────────────── */
.dr-btn-secondary[b-f36f6p707q] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    padding: 8px 13px;
    font-size: 12px;
    font-weight: 800;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dr-btn-secondary:hover[b-f36f6p707q] {
    background: var(--ec-bg);
}

.dr-btn-amber[b-f36f6p707q] {
    background: var(--ec-amber);
    border: none;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 11.5px;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
}

/* ── Week navigator ──────────────────────────────────────────────────────── */
.dr-week-nav[b-f36f6p707q] {
    background: #fff;
    border-radius: 14px;
    border: 1px solid var(--ec-border);
    padding: 10px 14px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.dr-week-nav-left[b-f36f6p707q] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dr-nav-btn[b-f36f6p707q] {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #fff;
    border: 1px solid var(--ec-border);
    cursor: pointer;
    font-family: inherit;
    color: var(--ec-sub);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Flip the arrow-right for the "previous" button */
.dr-week-nav-left .dr-nav-btn:first-child[b-f36f6p707q]  svg {
    transform: rotate(180deg);
}

.dr-nav-btn:hover[b-f36f6p707q] {
    background: var(--ec-bg);
}

.dr-week-label[b-f36f6p707q] {
    min-width: 200px;
    text-align: center;
}

.dr-week-range[b-f36f6p707q] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}

.dr-week-sub[b-f36f6p707q] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 1px 0 0;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 700;
}

.dr-week-nav-right[b-f36f6p707q] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.dr-week-chip[b-f36f6p707q] {
    background: #fff;
    color: var(--ec-sub);
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    padding: 6px 11px;
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
}

.dr-week-chip--active[b-f36f6p707q] {
    background: var(--ec-primary);
    color: #fff;
    border-color: var(--ec-primary);
}

.dr-week-pick-label[b-f36f6p707q] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    position: relative;
}

.dr-week-pick-input[b-f36f6p707q] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: auto;
    left: 0;
    top: 0;
}

/* ── Empty-week banner ───────────────────────────────────────────────────── */
.dr-empty-banner[b-f36f6p707q] {
    background: var(--ec-amber-lt);
    border: 1px solid var(--ec-amber);
    border-radius: 11px;
    padding: 12px 16px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.dr-empty-banner-left[b-f36f6p707q] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.dr-empty-banner-icon[b-f36f6p707q] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #fff;
    color: var(--ec-amber);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dr-empty-banner-title[b-f36f6p707q] {
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}

.dr-empty-banner-sub[b-f36f6p707q] {
    font-size: 11.5px;
    color: var(--ec-sub);
    margin: 1px 0 0;
}

/* ── Grid ─────────────────────────────────────────────────────────────────── */
.dr-grid-wrap[b-f36f6p707q] {
    background: #fff;
    border-radius: 14px;
    border: 1px solid var(--ec-border);
    overflow: hidden;
    margin-bottom: 0;
}

.dr-grid[b-f36f6p707q] {
    display: grid;
    grid-template-columns: 120px repeat(5, 1fr);
    overflow-x: auto;
}

/* Shared cell */
.dr-cell[b-f36f6p707q] {
    padding: 10px 12px;
    border-bottom: 1px solid var(--ec-border-soft);
    min-height: 78px;
    box-sizing: border-box;
    vertical-align: top;
}

.dr-cell--not-last[b-f36f6p707q] {
    border-right: 1px solid var(--ec-border-soft);
}

.dr-cell--time-col[b-f36f6p707q] {
    background: var(--ec-bg);
}

/* Header row cells */
.dr-cell--head[b-f36f6p707q] {
    background: var(--ec-bg);
    min-height: 64px;
    padding: 12px 12px;
}

.dr-col-label[b-f36f6p707q] {
    font-size: 10px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
}

.dr-day-head[b-f36f6p707q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.dr-day-name[b-f36f6p707q] {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}

.dr-day-num[b-f36f6p707q] {
    font-size: 10px;
    font-weight: 700;
    color: var(--ec-muted);
    margin: 1px 0 0;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.dr-copy-day-btn[b-f36f6p707q] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 6px;
    padding: 3px 7px;
    font-size: 10px;
    font-weight: 800;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Time cells */
.dr-cell--time[b-f36f6p707q] {
    padding: 12px 12px;
}

.dr-time-start[b-f36f6p707q] {
    font-size: 12px;
    font-weight: 800;
    color: var(--ec-text);
    font-variant-numeric: tabular-nums;
    margin: 0;
}

.dr-time-end[b-f36f6p707q] {
    font-size: 11px;
    font-weight: 700;
    color: var(--ec-muted);
    margin: 1px 0 0;
    font-variant-numeric: tabular-nums;
}

.dr-fixed-pill[b-f36f6p707q] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 5px;
    font-size: 8.5px;
    font-weight: 800;
    background: #fff;
    color: var(--ec-amber);
    border: 1px solid var(--ec-amber);
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.06em;
}

.dr-fixed-icon[b-f36f6p707q] {
    font-size: 8px;
}

/* Locked day cells */
.dr-cell--locked[b-f36f6p707q] {
    padding: 10px 12px;
}

.dr-locked-inner[b-f36f6p707q] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.dr-locked-icon[b-f36f6p707q] {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dr-locked-text[b-f36f6p707q] {
    min-width: 0;
    flex: 1;
}

.dr-locked-label[b-f36f6p707q] {
    font-size: 11.5px;
    font-weight: 800;
    color: var(--ec-text);
    line-height: 1.25;
    margin: 0;
}

.dr-locked-dishes[b-f36f6p707q] {
    font-size: 10px;
    color: var(--ec-muted);
    margin: 3px 0 0;
    line-height: 1.4;
}

.dr-no-menu[b-f36f6p707q] {
    font-size: 9.5px;
    color: var(--ec-muted);
    margin: 3px 0 0;
    font-style: italic;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Gap day cells */
.dr-cell--gap[b-f36f6p707q] {
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: #fff;
}

.dr-add-btn[b-f36f6p707q] {
    width: 100%;
    height: 100%;
    min-height: 66px;
    border: 2px dashed var(--ec-border);
    border-radius: 8px;
    background: transparent;
    color: var(--ec-muted);
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 6px;
    box-sizing: border-box;
}

.dr-add-btn:hover[b-f36f6p707q] {
    border-color: var(--ec-purple);
    color: var(--ec-purple);
}

/* Activity cards in gap cells */
.dr-act-card[b-f36f6p707q] {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 7px 8px;
    background: #fff;
    border: 1px solid var(--ec-border-soft);
    border-left: 3px solid var(--ec-border); /* overridden inline */
    border-radius: 7px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}

.dr-act-card:hover[b-f36f6p707q] {
    border-color: var(--ec-border);
}

.dr-act-icon[b-f36f6p707q] {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.dr-act-body[b-f36f6p707q] {
    min-width: 0;
    flex: 1;
}

.dr-act-label[b-f36f6p707q] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-text);
    line-height: 1.25;
    margin: 0;
}

.dr-act-time[b-f36f6p707q] {
    font-size: 9.5px;
    color: var(--ec-muted);
    margin: 1px 0 0;
    font-variant-numeric: tabular-nums;
}

.dr-act-detail[b-f36f6p707q] {
    font-size: 9.5px;
    color: var(--ec-muted);
    margin: 2px 0 0;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dr-add-another-btn[b-f36f6p707q] {
    width: 100%;
    padding: 4px 6px;
    border: 1px dashed var(--ec-border);
    border-radius: 6px;
    background: transparent;
    color: var(--ec-muted);
    cursor: pointer;
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.dr-add-another-btn:hover[b-f36f6p707q] {
    border-color: var(--ec-purple);
    color: var(--ec-purple);
}

/* Grid footer hint */
.dr-grid-hint[b-f36f6p707q] {
    font-size: 11px;
    color: var(--ec-muted);
    margin-top: 12px;
    line-height: 1.5;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Slide-over scrim + sheet ────────────────────────────────────────────── */
.dr-scrim[b-f36f6p707q] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 1100;
    display: flex;
    justify-content: flex-end;
}

.dr-sheet[b-f36f6p707q] {
    width: min(520px, 96%);
    height: 100%;
    background: #fff;
    box-shadow: -12px 0 40px rgba(13, 23, 51, 0.16);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dr-sheet--fw[b-f36f6p707q] {
    width: min(460px, 96%);
}

.dr-sheet-bar[b-f36f6p707q] {
    height: 3px;
    background: var(--ec-purple);
    flex-shrink: 0;
}

.dr-sheet-head[b-f36f6p707q] {
    padding: 14px 22px;
    border-bottom: 1px solid var(--ec-border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.dr-sheet-eyebrow[b-f36f6p707q] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-purple);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}

.dr-sheet-title[b-f36f6p707q] {
    font-size: 17px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 2px 0 0;
}

.dr-sheet-close[b-f36f6p707q] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--ec-border);
    font-size: 14px;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dr-sheet-body[b-f36f6p707q] {
    flex: 1;
    overflow-y: auto;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--ec-bg);
}

.dr-sheet-foot[b-f36f6p707q] {
    padding: 12px 22px;
    border-top: 1px solid var(--ec-border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0;
}

.dr-sheet-foot--end[b-f36f6p707q] {
    justify-content: flex-end;
}

.dr-foot-right[b-f36f6p707q] {
    display: flex;
    gap: 7px;
}

/* ── Form fields ─────────────────────────────────────────────────────────── */
.dr-field[b-f36f6p707q] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dr-field-label[b-f36f6p707q] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}

.dr-field-label--sm[b-f36f6p707q] {
    font-size: 10.5px;
    margin-bottom: 5px;
}

.dr-field-grid[b-f36f6p707q] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.dr-input[b-f36f6p707q] {
    padding: 10px 12px;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    font-size: 13px;
    font-family: inherit;
    font-weight: 700;
    outline: none;
    box-sizing: border-box;
    background: #fff;
    color: var(--ec-text);
}

.dr-input:focus[b-f36f6p707q] {
    border-color: var(--ec-purple);
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.1);
}

.dr-input--full[b-f36f6p707q] {
    width: 100%;
}

.dr-textarea[b-f36f6p707q] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    resize: vertical;
    background: #fff;
    color: var(--ec-text);
}

.dr-textarea:focus[b-f36f6p707q] {
    border-color: var(--ec-purple);
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.1);
}

.dr-gap-hint[b-f36f6p707q] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: -6px 0 0;
}

.dr-gap-hint b[b-f36f6p707q] {
    color: var(--ec-sub);
}

.dr-error[b-f36f6p707q] {
    font-size: 11.5px;
    color: var(--ec-red);
    font-weight: 700;
    margin: 0;
    padding: 8px 12px;
    background: #fee2e2;
    border-radius: 7px;
}

/* Icon grid */
.dr-icon-grid[b-f36f6p707q] {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 5px;
}

.dr-icon-btn[b-f36f6p707q] {
    padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--ec-border);
    background: #fff;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dr-icon-btn--active[b-f36f6p707q] {
    border-color: var(--ec-primary);
    background: color-mix(in srgb, var(--ec-primary) 12%, #fff);
    color: var(--ec-primary);
}

/* Color pills */
.dr-color-pills[b-f36f6p707q] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.dr-color-pill[b-f36f6p707q] {
    padding: 7px 11px;
    border-radius: 8px;
    border: 1px solid var(--ec-border);
    background: #fff;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dr-color-pill--active[b-f36f6p707q] {
    border-color: var(--pill-color, var(--ec-purple));
    background: color-mix(in srgb, var(--pill-color, var(--ec-purple)) 9%, #fff);
    color: var(--pill-color, var(--ec-purple));
}

.dr-color-swatch[b-f36f6p707q] {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    background: var(--pill-color, var(--ec-purple));
    display: inline-block;
}

/* Preview card */
.dr-preview[b-f36f6p707q] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-left: 3px solid var(--ec-border); /* overridden inline */
    border-radius: 9px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.dr-preview-icon[b-f36f6p707q] {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dr-preview-body[b-f36f6p707q] {
    min-width: 0;
    flex: 1;
}

.dr-preview-label[b-f36f6p707q] {
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}

.dr-preview-detail[b-f36f6p707q] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 2px 0 0;
}

.dr-preview-time[b-f36f6p707q] {
    font-size: 11px;
    color: var(--ec-sub);
    font-weight: 800;
    margin: 0;
    flex-shrink: 0;
}

/* Framework note */
.dr-fw-note[b-f36f6p707q] {
    font-size: 12px;
    color: var(--ec-sub);
    line-height: 1.5;
    margin: 0;
}

.dr-fw-row[b-f36f6p707q] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 10px;
    padding: 12px 14px;
}

.dr-fw-row-label[b-f36f6p707q] {
    font-size: 12px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0 0 8px;
}

/* Sheet action buttons */
.dr-btn-delete[b-f36f6p707q] {
    background: #fff;
    color: var(--ec-red);
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    padding: 9px 13px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
}

.dr-btn-save[b-f36f6p707q] {
    background: var(--ec-primary);
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 9px 15px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
}

.dr-btn-save:disabled[b-f36f6p707q] {
    background: var(--ec-border);
    cursor: not-allowed;
}

/* ── Teacher multi-select (editor + card chips) ─────────────────────────── */
.dr-teacher-list[b-f36f6p707q] { display: flex; flex-wrap: wrap; gap: 6px; }
.dr-teacher-chip[b-f36f6p707q] {
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff; border: 1px solid var(--ec-border); border-radius: 999px;
    padding: 4px 10px 4px 4px; font-size: 12px; font-weight: 700;
    color: var(--ec-sub); cursor: pointer; font-family: inherit;
}
.dr-teacher-chip--active[b-f36f6p707q] { border-color: var(--ec-purple); color: var(--ec-purple); background: var(--ec-purple-lt); }
.dr-teacher-ava[b-f36f6p707q], .dr-act-teacher-ava[b-f36f6p707q] {
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--ec-purple-lt); color: var(--ec-purple);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 800;
}
.dr-act-teachers[b-f36f6p707q] { display: flex; gap: 3px; margin-top: 4px; }

/* ── Toast ───────────────────────────────────────────────────────────────── */
.dr-toast[b-f36f6p707q] {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: #0f172a;
    color: #fff;
    border-radius: 9px;
    padding: 10px 16px;
    font-size: 12.5px;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25);
    z-index: 200;
    pointer-events: none;
}
/* /Components/Pages/Teacher/Development.razor.rz.scp.css */
/* Page body wrapper + group selector + section titles now come from the shared
   standard (<WebPage> + <WebSegmentedControl> + <WebSectionHeader>). This wrapper
   only carries the spacing below the selector. */
.tdv-group-tabs[b-dt9un035ht] {
    margin-bottom: var(--ec-sp-4);
}

/* ── KPI strip ── */
.tdv-kpis[b-dt9un035ht] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

@media (max-width: 900px) { .tdv-kpis[b-dt9un035ht] { grid-template-columns: repeat(2, 1fr); } }

/* ── Sections ── */
.tdv-section[b-dt9un035ht] { display: flex; flex-direction: column; gap: 12px; }

/* ── Areas at a glance ── */
.tdv-glance-grid[b-dt9un035ht] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

@media (max-width: 1000px) { .tdv-glance-grid[b-dt9un035ht] { grid-template-columns: repeat(2, 1fr); } }

.tdv-glance-card[b-dt9un035ht] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 13px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.tdv-glance-top[b-dt9un035ht] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tdv-glance-icon[b-dt9un035ht] {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tdv-glance-pct[b-dt9un035ht] {
    font-size: 19px;
    font-weight: 800;
}

.tdv-glance-code[b-dt9un035ht] {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.07em;
    margin: 2px 0 0;
}

.tdv-glance-name[b-dt9un035ht] {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ec-text);
    margin: 0;
}

.tdv-glance-bar[b-dt9un035ht] {
    height: 6px;
    border-radius: 999px;
    background: var(--ec-border-soft);
    overflow: hidden;
    margin-top: 2px;
}

.tdv-glance-bar-fill[b-dt9un035ht] {
    height: 100%;
    border-radius: 999px;
}

.tdv-glance-foot[b-dt9un035ht] {
    font-size: 11px;
    color: var(--ec-sub);
    margin: 2px 0 0;
    line-height: 1.4;
}

/* ── Children ── */
.tdv-child-list[b-dt9un035ht] {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 13px;
    overflow: hidden;
}

.tdv-child-row[b-dt9un035ht] {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    font-family: inherit;
    background: #fff;
    border: none;
    border-bottom: 1px solid var(--ec-border-soft);
    padding: 12px 16px;
    cursor: pointer;
}

.tdv-child-row:last-child[b-dt9un035ht] { border-bottom: none; }
.tdv-child-row:hover[b-dt9un035ht] { background: var(--ec-bg); }

.tdv-child-av[b-dt9un035ht] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tdv-child-body[b-dt9un035ht] { flex: 1; min-width: 0; }

.tdv-child-name[b-dt9un035ht] {
    font-size: 14px;
    font-weight: 700;
    color: var(--ec-text);
    margin: 0;
}

.tdv-child-meta[b-dt9un035ht] {
    font-size: 12px;
    color: var(--ec-sub);
    margin: 2px 0 0;
}

.tdv-child-dots[b-dt9un035ht] {
    display: flex;
    gap: 9px;
    flex-shrink: 0;
}

.tdv-dot-cell[b-dt9un035ht] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.tdv-dot[b-dt9un035ht] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.tdv-dot-label[b-dt9un035ht] {
    font-size: 8.5px;
    font-weight: 700;
    color: var(--ec-muted);
    letter-spacing: 0.03em;
}

/* ── Slide-over ── */
.tdv-scrim[b-dt9un035ht] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 1500;
    display: flex;
    justify-content: flex-end;
}

.tdv-sheet[b-dt9un035ht] {
    width: min(720px, 96%);
    height: 100%;
    background: #fff;
    box-shadow: -12px 0 40px rgba(13, 23, 51, 0.16);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tdv-sheet-head[b-dt9un035ht] {
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--ec-border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-shrink: 0;
}

.tdv-sheet-headrow[b-dt9un035ht] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.tdv-sheet-headtext[b-dt9un035ht] {
    flex: 1;
    min-width: 0;
}

.tdv-sheet-av[b-dt9un035ht] {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tdv-sheet-eyebrow[b-dt9un035ht] {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ec-pink);
    margin: 0;
}

.tdv-sheet-title[b-dt9un035ht] {
    font-size: 18px;
    font-weight: 800;
    color: var(--ec-text);
    letter-spacing: -0.01em;
    margin: 3px 0 0;
}

.tdv-sheet-close[b-dt9un035ht] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--ec-border);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tdv-sheet-body[b-dt9un035ht] {
    flex: 1;
    overflow-y: auto;
    padding: 14px 22px 80px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    background: var(--ec-bg);
}

.tdv-sheet-help[b-dt9un035ht] {
    font-size: 11.5px;
    color: var(--ec-muted);
    margin: 2px 0 0;
    line-height: 1.45;
}

/* ── Accordion ── */
.tdv-acc[b-dt9un035ht] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 12px;
    overflow: hidden;
    /* The body is a flex column; without this, collapsed cards get
       compressed (and clipped by overflow:hidden) when expanded areas
       overflow the panel, instead of the panel scrolling. */
    flex-shrink: 0;
}

.tdv-acc-head[b-dt9un035ht] {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    text-align: left;
    font-family: inherit;
    background: #fff;
    border: none;
    padding: 12px 14px;
    cursor: pointer;
}

.tdv-acc-icon[b-dt9un035ht] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tdv-acc-text[b-dt9un035ht] { flex: 1; min-width: 0; }

.tdv-acc-name[b-dt9un035ht] {
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}

.tdv-acc-meta[b-dt9un035ht] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 2px 0 0;
}

.tdv-acc-chev[b-dt9un035ht] {
    color: var(--ec-sub);
    font-size: 13px;
    flex-shrink: 0;
}

.tdv-acc-body[b-dt9un035ht] {
    border-top: 1px solid var(--ec-border-soft);
    padding: 8px 14px 12px;
    background: var(--ec-bg);
    display: flex;
    flex-direction: column;
    gap: 7px;
}

/* ── Milestone row ── */
.tdv-ms[b-dt9un035ht] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 10px;
    padding: 10px 12px;
}

.tdv-status[b-dt9un035ht] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 800;
    border-radius: 8px;
    padding: 6px 11px;
    cursor: pointer;
    border: 1px solid transparent;
    flex-shrink: 0;
    white-space: nowrap;
}

.tdv-status--notyet[b-dt9un035ht] {
    background: var(--ec-border-soft);
    border-color: var(--ec-border);
    color: var(--ec-muted);
}

.tdv-status--progress[b-dt9un035ht] {
    background: #fef3c7;
    border-color: color-mix(in srgb, var(--ec-amber) 30%, transparent);
    color: var(--ec-amber);
}

.tdv-status--achieved[b-dt9un035ht] {
    background: #dcfce7;
    border-color: color-mix(in srgb, var(--ec-green) 30%, transparent);
    color: var(--ec-green);
}

.tdv-ms-body[b-dt9un035ht] { flex: 1; min-width: 0; }

.tdv-ms-title[b-dt9un035ht] {
    font-size: 13px;
    font-weight: 700;
    color: var(--ec-text);
    margin: 0;
}

.tdv-ms-beh[b-dt9un035ht] {
    font-size: 12px;
    color: var(--ec-sub);
    margin: 2px 0 0;
    line-height: 1.4;
}

.tdv-ms-note[b-dt9un035ht] {
    font-size: 12px;
    font-style: italic;
    color: var(--ec-text);
    background: color-mix(in srgb, var(--ec-purple) 7%, transparent);
    border-radius: 8px;
    padding: 7px 10px;
    margin: 6px 0 0;
}

.tdv-note-link[b-dt9un035ht] {
    display: inline-flex;
    margin-top: 6px;
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--ec-muted);
    background: transparent;
    border: 1px dashed var(--ec-border);
    border-radius: 6px;
    padding: 3px 8px;
    cursor: pointer;
}

.tdv-note-link:hover[b-dt9un035ht] { border-color: var(--ec-muted); color: var(--ec-sub); }

.tdv-note-edit[b-dt9un035ht] {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tdv-note-area[b-dt9un035ht] {
    font-family: inherit;
    font-size: 12.5px;
    color: var(--ec-text);
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    padding: 7px 9px;
    width: 100%;
    resize: vertical;
    line-height: 1.4;
}

.tdv-note-area:focus[b-dt9un035ht] { outline: none; border-color: var(--ec-purple); }

.tdv-note-foot[b-dt9un035ht] {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
}

.tdv-mini-btn[b-dt9un035ht] {
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    border-radius: 7px;
    padding: 6px 12px;
    cursor: pointer;
    border: 1px solid var(--ec-border);
    background: #fff;
    color: var(--ec-text);
}

.tdv-mini-btn--pink[b-dt9un035ht] {
    background: var(--ec-pink);
    border-color: var(--ec-pink);
    color: #fff;
}

.tdv-mini-btn:disabled[b-dt9un035ht] { opacity: .55; cursor: default; }
/* /Components/Pages/Teacher/ProgramAttendancePanel.razor.rz.scp.css */
/* TeacherAttendancePage — scoped CSS. Mirrors TWAttendance (proto 38341+). */

.tat-page[b-ftqtaziq4m] {
    padding: 0; /* dead rule (class unused); neutralized so it can never compound */
    background: var(--ec-bg);
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Page title + subtitle ship via PageContext to the global top-bar — no
   inline header on this page. (Old .tat-title / .tat-subtitle rules removed
   alongside the markup.) */

/* ── Top context bar ─────────────────────────────────────
   Single white card hosting date stepper + mode toggle. Adopts an amber
   left stripe on past dates so the late-entry case is hard to miss. */
.tat-context[b-ftqtaziq4m] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.tat-context--past[b-ftqtaziq4m] {
    border-color: color-mix(in srgb, var(--ec-amber) 60%, transparent);
    border-left: 4px solid var(--ec-amber);
}
.tat-context-spacer[b-ftqtaziq4m] { flex: 1; }
.tat-context-hint[b-ftqtaziq4m] {
    font-size: 11px;
    color: var(--ec-sub);
    font-style: italic;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.tat-context-hint i[b-ftqtaziq4m] { color: var(--ec-amber); }

.tat-datestep[b-ftqtaziq4m] {
    display: flex;
    align-items: center;
    gap: 5px;
}
.tat-datestep-nav[b-ftqtaziq4m] {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: 1px solid var(--ec-border);
    background: var(--ec-bg);
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}
.tat-datestep-nav:hover:not(:disabled)[b-ftqtaziq4m] {
    color: var(--ec-text);
    border-color: var(--ec-text);
}
.tat-datestep-nav:disabled[b-ftqtaziq4m] { opacity: .5; cursor: default; }

.tat-datestep-pill[b-ftqtaziq4m] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-radius: 8px;
    background: var(--ec-bg);
    border: 1px solid var(--ec-border);
    cursor: pointer;
    position: relative;
}
.tat-datestep-pill--today[b-ftqtaziq4m] {
    background: var(--ec-green-lt);
    border-color: color-mix(in srgb, var(--ec-green) 40%, transparent);
}
.tat-datestep-pill--today i[b-ftqtaziq4m] { color: var(--ec-green); }
.tat-datestep-pill--past[b-ftqtaziq4m] {
    background: var(--ec-amber-lt);
    border-color: color-mix(in srgb, var(--ec-amber) 40%, transparent);
}
.tat-datestep-pill--past i[b-ftqtaziq4m] { color: var(--ec-amber); }
.tat-datestep-pill i[b-ftqtaziq4m] {
    font-size: 13px;
    color: var(--ec-muted);
}
.tat-datestep-label[b-ftqtaziq4m] {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--ec-text);
    white-space: nowrap;
}
.tat-datestep-tag[b-ftqtaziq4m] {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ec-muted);
}
.tat-datestep-pill--today .tat-datestep-tag[b-ftqtaziq4m] { color: var(--ec-green); }
.tat-datestep-pill--past .tat-datestep-tag[b-ftqtaziq4m] { color: var(--ec-amber); }
.tat-datestep-input[b-ftqtaziq4m] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: 0;
    padding: 0;
}
.tat-datestep-jump[b-ftqtaziq4m] {
    padding: 6px 10px;
    margin-left: 4px;
    background: #fff;
    color: var(--ec-blue);
    border: 1px solid var(--ec-blue-lt);
    border-radius: 7px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
}
.tat-datestep-jump:hover[b-ftqtaziq4m] { background: var(--ec-blue-lt); }

/* ── Mode toggle (Classes / Programs) ────────────────── */
.tat-modetoggle[b-ftqtaziq4m] {
    display: flex;
    gap: 3px;
    background: var(--ec-bg);
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    padding: 3px;
}
.tat-modechip[b-ftqtaziq4m] {
    padding: 5px 11px;
    border-radius: 6px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--ec-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tat-modechip:disabled[b-ftqtaziq4m] { cursor: not-allowed; opacity: .55; }
.tat-modechip--active[b-ftqtaziq4m] {
    background: #fff;
    color: var(--ec-text);
    box-shadow: 0 1px 3px rgba(13, 23, 51, .08);
}
.tat-modechip-count[b-ftqtaziq4m] {
    font-size: 9.5px;
    font-weight: 800;
    color: var(--ec-faint);
    padding: 0 4px;
}
.tat-modechip--active .tat-modechip-count[b-ftqtaziq4m] { color: var(--ec-muted); }

/* ── KPI strip — 6 tiles: Marking | Marked | Present | Absent | Late | Excused
   (matches prototype 38479-38531; Late and Excused are independent tiles, not
   a split-pane). */
.tat-kpis[b-ftqtaziq4m] {
    display: grid;
    grid-template-columns: 1.4fr 1.6fr 1fr 1fr 1fr 1fr;
    gap: 10px;
}
@media (max-width: 1280px) {
    .tat-kpis[b-ftqtaziq4m] { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
    .tat-kpis[b-ftqtaziq4m] { grid-template-columns: repeat(2, 1fr); }
}
.tat-kpi[b-ftqtaziq4m] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 11px;
    padding: 11px 14px;
    min-width: 0;
}
.tat-kpi-label[b-ftqtaziq4m] {
    font-size: 9.5px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}
.tat-kpi-value[b-ftqtaziq4m] {
    font-size: 20px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 4px 0 0;
    line-height: 1;
    white-space: nowrap;
}
.tat-kpi-value-sm[b-ftqtaziq4m] {
    font-size: 18px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 3px 0 0;
    line-height: 1;
}
.tat-kpi-value--mono[b-ftqtaziq4m] {
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", monospace;
    font-variant-numeric: tabular-nums;
}
.tat-kpi-value--warn[b-ftqtaziq4m] { color: var(--ec-amber); }
.tat-kpi-value--info[b-ftqtaziq4m] { color: var(--ec-blue); }

.tat-kpi-row[b-ftqtaziq4m] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tat-kpi-icon-ok[b-ftqtaziq4m]    { color: var(--ec-green); font-size: 13px; }
.tat-kpi-icon-alert[b-ftqtaziq4m] { color: var(--ec-red);   font-size: 13px; }
.tat-kpi-icon-warn[b-ftqtaziq4m]  { color: var(--ec-amber); font-size: 11px; }
.tat-kpi-icon-info[b-ftqtaziq4m]  { color: var(--ec-blue);  font-size: 11px; }

.tat-kpi--marking[b-ftqtaziq4m] { border-left: 4px solid var(--accent, var(--ec-blue)); }
.tat-kpi-marking-head[b-ftqtaziq4m] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 4px;
    flex-wrap: wrap;
}
.tat-kpi-marking-name[b-ftqtaziq4m] {
    font-size: 15px;
    font-weight: 800;
    color: var(--ec-text);
    line-height: 1.1;
}
.tat-kpi-marking-hr[b-ftqtaziq4m] {
    font-size: 8.5px;
    font-weight: 800;
    background: color-mix(in srgb, var(--accent, var(--ec-blue)) 18%, transparent);
    color: var(--accent, var(--ec-blue));
    padding: 1px 5px;
    border-radius: 4px;
    letter-spacing: 0.06em;
}
.tat-kpi-marking-sub[b-ftqtaziq4m] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 3px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tat-kpi--marked .tat-kpi-marked-head[b-ftqtaziq4m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
.tat-kpi-marked-tag[b-ftqtaziq4m] {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--ec-muted);
    margin: 0;
}
.tat-kpi-marked-tag--ok[b-ftqtaziq4m]   { color: var(--ec-green); }
.tat-kpi-marked-tag--warn[b-ftqtaziq4m] { color: var(--ec-amber); }
.tat-kpi-marked-total[b-ftqtaziq4m] {
    color: var(--ec-muted);
    font-size: 13px;
    font-weight: 700;
}
.tat-kpi-marked-bar[b-ftqtaziq4m] {
    margin-top: 7px;
    height: 5px;
    background: var(--ec-border-soft);
    border-radius: 3px;
    overflow: hidden;
}
.tat-kpi-marked-fill[b-ftqtaziq4m] {
    height: 100%;
    background: var(--accent, var(--ec-blue));
    border-radius: 3px;
    transition: width .25s ease;
}
.tat-kpi-marked-fill--ok[b-ftqtaziq4m] { background: var(--ec-green); }

.tat-kpi--ok    .tat-kpi-value[b-ftqtaziq4m] { color: var(--ec-green); }
.tat-kpi--alert .tat-kpi-value[b-ftqtaziq4m] { color: var(--ec-red); }

/* ── Pick-a-class onboarding card (no class picked yet) ── */
.tat-pick[b-ftqtaziq4m] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 13px;
}
.tat-pick-icon[b-ftqtaziq4m] {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--ec-blue-lt);
    color: var(--ec-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.tat-pick-title[b-ftqtaziq4m] {
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.tat-pick-sub[b-ftqtaziq4m] {
    font-size: 11.5px;
    color: var(--ec-muted);
    margin: 3px 0 0;
}

/* ── 2-column layout ─────────────────────────────────── */
.tat-layout[b-ftqtaziq4m] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 16px;
    align-items: start;
}
.tat-main[b-ftqtaziq4m] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.tat-rail-wrap[b-ftqtaziq4m] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 12px;
}
@media (max-width: 1100px) {
    .tat-layout[b-ftqtaziq4m] { grid-template-columns: 1fr; }
    .tat-rail-wrap[b-ftqtaziq4m] { position: static; }
}

/* ── Marking card (left side) ────────────────────────── */
.tat-mark[b-ftqtaziq4m] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 12px;
    overflow: hidden;
}
.tat-mark-head[b-ftqtaziq4m] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--ec-border-soft);
    flex-wrap: wrap;
}
.tat-mark-head-text[b-ftqtaziq4m] { flex: 1; min-width: 200px; }
.tat-mark-title[b-ftqtaziq4m] {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}
.tat-mark-hr[b-ftqtaziq4m] {
    font-size: 9px;
    font-weight: 800;
    background: color-mix(in srgb, var(--ec-purple, #7c3aed) 14%, transparent);
    color: var(--ec-purple, #7c3aed);
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.08em;
}
.tat-mark-sub[b-ftqtaziq4m] {
    font-size: 11.5px;
    color: var(--ec-muted);
    margin: 4px 0 0;
}
.tat-mark-actions[b-ftqtaziq4m] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}
.tat-mark-motivate[b-ftqtaziq4m] {
    padding: 7px 13px;
    border: none;
    border-radius: 8px;
    background: var(--ec-orange, #ea7025);
    color: #fff;
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.tat-mark-motivate:hover[b-ftqtaziq4m] { filter: brightness(.95); }

/* "View absence history" — the quiet CTA shown when unexcused == 0 but
   some absences were motivated this term. White / muted instead of amber
   so it doesn't compete visually for attention with the marking actions. */
.tat-mark-history[b-ftqtaziq4m] {
    padding: 7px 13px;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    background: #fff;
    color: var(--ec-sub);
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tat-mark-history:hover[b-ftqtaziq4m] {
    border-color: var(--ec-text);
    color: var(--ec-text);
}
.tat-mark-history-count[b-ftqtaziq4m] {
    font-size: 10px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--ec-border-soft);
    color: var(--ec-muted);
}
.tat-mark-history .bi[b-ftqtaziq4m] { color: var(--ec-green); font-size: 13px; }

.tat-mark-reset[b-ftqtaziq4m] {
    padding: 7px 13px;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    background: #fff;
    color: var(--ec-sub);
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.tat-mark-reset .bi[b-ftqtaziq4m] { font-size: 12px; line-height: 1; }
.tat-mark-reset:hover[b-ftqtaziq4m] { border-color: var(--ec-text); color: var(--ec-text); }
.tat-mark-reset:disabled[b-ftqtaziq4m] { opacity: .5; cursor: not-allowed; }
.tat-mark-save[b-ftqtaziq4m] {
    padding: 7px 13px;
    border: none;
    border-radius: 8px;
    background: var(--save, var(--ec-green));
    color: #fff;
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.tat-mark-save:hover[b-ftqtaziq4m] { filter: brightness(.95); }
.tat-mark-save:disabled[b-ftqtaziq4m] { opacity: .5; cursor: not-allowed; }

/* Blue "N parent notices →" CTA — parent-submitted absence notices. */
.tat-mark-notices[b-ftqtaziq4m] {
    padding: 7px 13px;
    border: none;
    border-radius: 8px;
    background: var(--ec-blue);
    color: #fff;
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.tat-mark-notices:hover[b-ftqtaziq4m] { filter: brightness(.95); }

/* Subject pill in the class marking-header (MATH / SCIENCE) — tinted by the
   subject colour, mirrors the prototype's activeSubject badge. */
.tat-mark-subjpill[b-ftqtaziq4m] {
    font-size: 9.5px;
    font-weight: 800;
    background: color-mix(in srgb, var(--accent, var(--ec-blue)) 18%, transparent);
    color: var(--accent, var(--ec-blue));
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.06em;
}

/* Program header badge — COORDINATOR / YOUR GROUP / READ-ONLY. */
.tat-mark-badge[b-ftqtaziq4m] {
    font-size: 9.5px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.06em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.tat-mark-badge--coord[b-ftqtaziq4m] {
    background: color-mix(in srgb, var(--ec-green) 18%, transparent);
    color: var(--ec-green);
}
.tat-mark-badge--group[b-ftqtaziq4m] {
    background: color-mix(in srgb, var(--ec-purple, #7c3aed) 18%, transparent);
    color: var(--ec-purple, #7c3aed);
}
.tat-mark-badge--readonly[b-ftqtaziq4m] {
    background: var(--ec-bg);
    color: var(--ec-muted);
}

/* ── Slot chips (inside the marking card) ─────────────── */
.tat-chips[b-ftqtaziq4m] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 11px 16px;
    border-bottom: 1px solid var(--ec-border-soft);
}
.tat-chip[b-ftqtaziq4m] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 11px;
    background: #fff;
    color: var(--ec-text);
    border: 1px solid var(--ec-border);
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}
.tat-chip:hover[b-ftqtaziq4m] { border-color: var(--accent, var(--ec-blue)); }
.tat-chip--active[b-ftqtaziq4m] {
    background: var(--accent, var(--ec-blue));
    border-color: var(--accent, var(--ec-blue));
    color: #fff;
}
.tat-chip-name[b-ftqtaziq4m] { font-weight: 800; }
.tat-chip-count[b-ftqtaziq4m] {
    font-size: 10px;
    font-weight: 800;
    color: var(--ec-muted);
    background: var(--ec-border-soft);
    padding: 1px 6px;
    border-radius: 4px;
}
.tat-chip--active .tat-chip-count[b-ftqtaziq4m] {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}
.tat-chip-hr[b-ftqtaziq4m] {
    font-size: 8.5px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--accent, var(--ec-blue)) 18%, transparent);
    color: var(--accent, var(--ec-blue));
    letter-spacing: 0.06em;
}
.tat-chip--active .tat-chip-hr[b-ftqtaziq4m] {
    background: rgba(255, 255, 255, .25);
    color: #fff;
}
.tat-chip-time[b-ftqtaziq4m] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-muted);
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", monospace;
    background: var(--ec-border-soft);
    padding: 1px 6px;
    border-radius: 4px;
}
.tat-chip--active .tat-chip-time[b-ftqtaziq4m] {
    background: rgba(255, 255, 255, .25);
    color: #fff;
}
.tat-chip-dot[b-ftqtaziq4m] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ec-green);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ec-green) 25%, transparent);
    animation: tat-pulse-b-ftqtaziq4m 1.8s ease-in-out infinite;
}
@keyframes tat-pulse-b-ftqtaziq4m {
    50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ec-green) 0%, transparent); }
}

/* ── Banner (save result) ─────────────────────────────── */
.tat-banner[b-ftqtaziq4m] {
    margin: 11px 16px 0;
    padding: 10px 13px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
}
.tat-banner--ok[b-ftqtaziq4m]    { background: var(--ec-green-lt); color: var(--ec-green); border-left: 3px solid var(--ec-green); }
.tat-banner--warn[b-ftqtaziq4m]  { background: var(--ec-amber-lt); color: var(--ec-amber); border-left: 3px solid var(--ec-amber); }
.tat-banner--alert[b-ftqtaziq4m] { background: var(--ec-red-lt); color: var(--ec-red); border-left: 3px solid var(--ec-red); }

/* ── Roster ─────────────────────────────────────────── */
.tat-table[b-ftqtaziq4m] {
    /* no border — sits inside the marking card */
}
.tat-row[b-ftqtaziq4m] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 11px 16px;
    border-top: 1px solid var(--ec-border-soft);
}
.tat-row-student[b-ftqtaziq4m] {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}
.tat-row-avatar[b-ftqtaziq4m] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ec-blue);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
    font-weight: 800;
    flex-shrink: 0;
    letter-spacing: -.02em;
}
.tat-row-text[b-ftqtaziq4m] { min-width: 0; }
.tat-row-name[b-ftqtaziq4m] {
    font-size: 13px;
    font-weight: 700;
    color: var(--ec-text);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tat-row-meta[b-ftqtaziq4m] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 2px 0 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.tat-row-warn[b-ftqtaziq4m] {
    font-size: 10px;
    font-weight: 800;
    color: var(--ec-amber);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    letter-spacing: 0.02em;
}

.tat-row-pills[b-ftqtaziq4m] {
    display: inline-flex;
    gap: 4px;
    flex-wrap: nowrap;
    justify-content: flex-end;
}
.tat-pill[b-ftqtaziq4m] {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", monospace;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    background: var(--ec-bg);
    color: var(--ec-muted);
}
.tat-pill:hover[b-ftqtaziq4m] { border-color: var(--ec-text); color: var(--ec-text); }

.tat-pill--ok.tat-pill--active[b-ftqtaziq4m]    { background: var(--ec-green); color: #fff; }
.tat-pill--alert.tat-pill--active[b-ftqtaziq4m] { background: var(--ec-red);   color: #fff; }
.tat-pill--warn.tat-pill--active[b-ftqtaziq4m]  { background: var(--ec-amber); color: #fff; }
.tat-pill--info.tat-pill--active[b-ftqtaziq4m]  { background: var(--ec-blue);  color: #fff; }

/* ── Empty state ──────────────────────────────────────── */
.tat-empty[b-ftqtaziq4m] {
    background: #fff;
    border: 1px dashed var(--ec-border);
    border-radius: 14px;
    padding: 48px 28px;
    text-align: center;
}
.tat-empty-icon[b-ftqtaziq4m] {
    font-size: 38px;
    color: var(--ec-faint);
    margin-bottom: 10px;
    display: block;
}
.tat-empty-title[b-ftqtaziq4m] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.tat-empty-sub[b-ftqtaziq4m] {
    font-size: 12px;
    color: var(--ec-muted);
    margin: 5px auto 0;
    max-width: 380px;
}

/* ── Right rail: Today's lessons ──────────────────────── */
.tat-rail[b-ftqtaziq4m] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 12px;
    padding: 14px 16px;
}
.tat-rail-head[b-ftqtaziq4m] {
    margin-bottom: 11px;
}
.tat-rail-title[b-ftqtaziq4m] {
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.tat-rail-empty[b-ftqtaziq4m] {
    text-align: center;
    color: var(--ec-muted);
    padding: 20px 8px;
}
.tat-rail-empty i[b-ftqtaziq4m] {
    font-size: 22px;
    color: var(--ec-faint);
    display: block;
    margin-bottom: 6px;
}
.tat-rail-empty p[b-ftqtaziq4m] {
    font-size: 12px;
    margin: 0;
}
.tat-rail-list[b-ftqtaziq4m] {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.tat-rail-row[b-ftqtaziq4m] {
    display: grid;
    grid-template-columns: 4px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 9px 0;
    border-top: 1px solid var(--ec-border-soft);
}
.tat-rail-row:first-child[b-ftqtaziq4m] { border-top: none; padding-top: 0; }
.tat-rail-row-bar[b-ftqtaziq4m] {
    width: 3px;
    height: 28px;
    background: var(--accent, var(--ec-blue));
    border-radius: 2px;
}
.tat-rail-row--done[b-ftqtaziq4m]    { opacity: 0.55; }
.tat-rail-row--now .tat-rail-row-bar[b-ftqtaziq4m] {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, var(--ec-blue)) 25%, transparent);
}

.tat-rail-row-body[b-ftqtaziq4m] { min-width: 0; }
.tat-rail-row-subject[b-ftqtaziq4m] {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}
.tat-rail-row-meta[b-ftqtaziq4m] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 3px 0 0;
    font-variant-numeric: tabular-nums;
}
.tat-rail-row-sep[b-ftqtaziq4m] { color: var(--ec-faint); margin: 0 4px; }
.tat-rail-row-status[b-ftqtaziq4m] {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", monospace;
}
.tat-rail-row-status--now[b-ftqtaziq4m]      { background: var(--accent, var(--ec-blue)); color: #fff; }
.tat-rail-row-status--done[b-ftqtaziq4m]     { background: var(--ec-border-soft); color: var(--ec-muted); }
.tat-rail-row-status--upcoming[b-ftqtaziq4m] { background: var(--ec-border-soft); color: var(--ec-muted); }
.tat-rail-row-lock[b-ftqtaziq4m] {
    color: var(--ec-faint);
    font-size: 12px;
}

/* ── 7-day chart (sits under the rail) ───────────────── */
.tat-history[b-ftqtaziq4m] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 12px;
    padding: 13px 16px;
}
.tat-history-head[b-ftqtaziq4m] {
    margin-bottom: 11px;
}
.tat-history-title[b-ftqtaziq4m] {
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
/* 7-day heatmap — fixed-size solid square tiles, status grid rather than a
   comparative-height chart. Day label (Wed) + day number (29) stack above
   the tile, percentage sits below. Today's tile gets a blue outline ring
   so it's the obvious "you are here" cue. (Proto figure 39085-39097.) */
.tat-history-bars[b-ftqtaziq4m] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    align-items: start;
}
.tat-history-col[b-ftqtaziq4m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;
}
.tat-history-day[b-ftqtaziq4m] {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--ec-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
}
.tat-history-num[b-ftqtaziq4m] {
    font-size: 11px;
    font-weight: 700;
    color: var(--ec-muted);
    margin: 0;
    font-variant-numeric: tabular-nums;
}
.tat-history-col--today .tat-history-day[b-ftqtaziq4m],
.tat-history-col--today .tat-history-num[b-ftqtaziq4m],
.tat-history-col--today .tat-history-pct[b-ftqtaziq4m] {
    color: var(--ec-blue);
    font-weight: 800;
}
.tat-history-bar[b-ftqtaziq4m] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    transition: transform .12s ease;
}
.tat-history-col:hover .tat-history-bar[b-ftqtaziq4m] { transform: translateY(-1px); }
.tat-history-bar--ok[b-ftqtaziq4m]    { background: var(--ec-green); }
.tat-history-bar--warn[b-ftqtaziq4m]  { background: var(--ec-amber); }
.tat-history-bar--alert[b-ftqtaziq4m] { background: var(--ec-red); }
.tat-history-bar--empty[b-ftqtaziq4m] {
    background: var(--ec-border-soft);
    border: 1px solid var(--ec-border);
}
.tat-history-col--today .tat-history-bar[b-ftqtaziq4m] {
    outline: 2px solid var(--ec-blue);
    outline-offset: 2px;
}
.tat-history-pct[b-ftqtaziq4m] {
    font-size: 11.5px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", monospace;
}
.tat-history-bar--empty + .tat-history-pct[b-ftqtaziq4m] { color: var(--ec-faint); }

/* ── Subject / Group chip row (sits under the class/program chips) ────── */
.tat-subjects[b-ftqtaziq4m] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 9px 16px 11px;
    border-bottom: 1px solid var(--ec-border-soft);
}
.tat-subjects-label[b-ftqtaziq4m] {
    font-size: 10px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-right: 3px;
}

/* Subject chip — white by default, fills with the subject colour when on. */
.tat-subchip[b-ftqtaziq4m] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: #fff;
    color: var(--ec-sub);
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}
.tat-subchip:hover[b-ftqtaziq4m] { border-color: var(--accent, var(--ec-blue)); }
.tat-subchip--on[b-ftqtaziq4m] {
    background: var(--accent, var(--ec-blue));
    border-color: var(--accent, var(--ec-blue));
    color: #fff;
}
.tat-subchip-dot[b-ftqtaziq4m] {
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: var(--accent, var(--ec-blue));
    flex-shrink: 0;
}
.tat-subchip--on .tat-subchip-dot[b-ftqtaziq4m] { background: #fff; }
.tat-subchip-time[b-ftqtaziq4m] {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--ec-muted);
    font-variant-numeric: tabular-nums;
}
.tat-subchip--on .tat-subchip-time[b-ftqtaziq4m] { color: rgba(255, 255, 255, .78); }

/* ── Program chips (Programs mode) ───────────────────────────────────── */
.tat-chip--program.tat-chip--active[b-ftqtaziq4m] {
    background: var(--ec-purple, #7c3aed);
    border-color: var(--ec-purple, #7c3aed);
}
.tat-chip-tag[b-ftqtaziq4m] {
    font-size: 8.5px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 4px;
    letter-spacing: 0.06em;
}
.tat-chip-tag--coord[b-ftqtaziq4m] { background: color-mix(in srgb, var(--ec-green) 18%, transparent); color: var(--ec-green); }
.tat-chip-tag--group[b-ftqtaziq4m] { background: color-mix(in srgb, var(--ec-purple, #7c3aed) 18%, transparent); color: var(--ec-purple, #7c3aed); }
.tat-chip-tag--read[b-ftqtaziq4m]  { background: var(--ec-bg); color: var(--ec-muted); }
.tat-chip-tag--run[b-ftqtaziq4m]   { background: var(--ec-border-soft); color: var(--ec-muted); }
.tat-chip--active .tat-chip-tag[b-ftqtaziq4m] {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

/* ── Group chips (Programs mode, under the program chips) ────────────── */
.tat-groupchip[b-ftqtaziq4m] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: #fff;
    color: var(--ec-sub);
    border: 1px solid var(--ec-border);
    border-radius: 7px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
}
.tat-groupchip:disabled[b-ftqtaziq4m] { cursor: not-allowed; opacity: .55; }
.tat-groupchip-dot[b-ftqtaziq4m] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent, var(--ec-muted));
    flex-shrink: 0;
}
.tat-groupchip-count[b-ftqtaziq4m] { opacity: .7; }
.tat-groupchip--mine[b-ftqtaziq4m] {
    background: color-mix(in srgb, var(--accent, var(--ec-blue)) 12%, #fff);
    border-color: transparent;
    color: var(--accent, var(--ec-blue));
}
.tat-groupchip--on[b-ftqtaziq4m] {
    background: var(--accent, var(--ec-blue));
    border-color: var(--accent, var(--ec-blue));
    color: #fff;
}
.tat-groupchip--on .tat-groupchip-dot[b-ftqtaziq4m] { background: #fff; }
.tat-groupchip--all-on[b-ftqtaziq4m] {
    background: var(--ec-text);
    border-color: var(--ec-text);
    color: #fff;
}
.tat-groupchip-mine[b-ftqtaziq4m] {
    font-size: 8px;
    font-weight: 800;
    background: var(--accent, var(--ec-blue));
    color: #fff;
    padding: 0 4px;
    border-radius: 3px;
    margin-left: 2px;
}

/* ── Program roster row: child age suffix ────────────────────────────── */
.tat-row-age[b-ftqtaziq4m] {
    font-size: 10.5px;
    color: var(--ec-muted);
    font-weight: 600;
}

/* ── Sessions sidebar (Programs mode right rail) ─────────────────────── */
.tat-rail-sub[b-ftqtaziq4m] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 2px 0 0;
}
.tat-rail-head[b-ftqtaziq4m] { display: block; }
.tat-sess[b-ftqtaziq4m] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 0;
    background: transparent;
    border: none;
    border-top: 1px solid var(--ec-border-soft);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    border-radius: 8px;
}
.tat-rail-list .tat-sess:first-child[b-ftqtaziq4m] { border-top: none; }
.tat-sess--active[b-ftqtaziq4m] { background: var(--ec-purple-lt, #ede9fe); padding-left: 10px; padding-right: 10px; }
.tat-sess-day[b-ftqtaziq4m] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", monospace;
}
.tat-sess-day--today[b-ftqtaziq4m]  { background: var(--ec-green); color: #fff; }
.tat-sess-day--past[b-ftqtaziq4m]   { background: var(--ec-bg); color: var(--ec-muted); }
.tat-sess-day--future[b-ftqtaziq4m] { background: var(--ec-amber-lt); color: var(--ec-amber); }
.tat-sess-body[b-ftqtaziq4m] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tat-sess-date[b-ftqtaziq4m] {
    font-size: 12px;
    font-weight: 700;
    color: var(--ec-text);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tat-sess-today[b-ftqtaziq4m] {
    font-size: 9px;
    font-weight: 800;
    color: var(--ec-green);
    background: var(--ec-green-lt);
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0.06em;
}
.tat-sess-meta[b-ftqtaziq4m] { font-size: 10.5px; color: var(--ec-muted); font-weight: 600; }
.tat-sess-meta--pending[b-ftqtaziq4m] { color: var(--ec-amber); font-weight: 700; }
.tat-sess-check[b-ftqtaziq4m] { color: var(--ec-purple, #7c3aed); font-size: 14px; }
/* /Components/Pages/Teacher/TeacherActivitiesPage.razor.rz.scp.css */
/* TeacherActivitiesPage — thin page shell only. All Activities UI styling
   lives in ClassActivities.razor.css (the shared component this page
   delegates to). */

.tap[b-ftkuhxy2m9] {
    padding: 0;
    background: var(--ec-bg);
    min-height: 100%;
}

.tap-empty[b-ftkuhxy2m9] {
    background: #fff;
    border: 1px dashed var(--ec-border);
    border-radius: 14px;
    padding: 48px 28px;
    text-align: center;
}
.tap-empty-title[b-ftkuhxy2m9] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
/* /Components/Pages/Teacher/TeacherAttendancePage.razor.rz.scp.css */
/* TeacherAttendancePage — scoped CSS. Mirrors TWAttendance (proto 38341+). */

.tat-page[b-qk9msi8db8] {
    padding: 0;
    background: var(--ec-bg);
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Page title + subtitle ship via PageContext to the global top-bar — no
   inline header on this page. (Old .tat-title / .tat-subtitle rules removed
   alongside the markup.) */

/* ── Top context bar ─────────────────────────────────────
   Single white card hosting date stepper + mode toggle. Adopts an amber
   left stripe on past dates so the late-entry case is hard to miss. */
.tat-context[b-qk9msi8db8] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.tat-context--past[b-qk9msi8db8] {
    border-color: color-mix(in srgb, var(--ec-amber) 60%, transparent);
    border-left: 4px solid var(--ec-amber);
}
.tat-context-spacer[b-qk9msi8db8] { flex: 1; }
.tat-context-hint[b-qk9msi8db8] {
    font-size: 11px;
    color: var(--ec-sub);
    font-style: italic;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.tat-context-hint i[b-qk9msi8db8] { color: var(--ec-amber); }

.tat-datestep[b-qk9msi8db8] {
    display: flex;
    align-items: center;
    gap: 5px;
}
.tat-datestep-nav[b-qk9msi8db8] {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: 1px solid var(--ec-border);
    background: var(--ec-bg);
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}
.tat-datestep-nav:hover:not(:disabled)[b-qk9msi8db8] {
    color: var(--ec-text);
    border-color: var(--ec-text);
}
.tat-datestep-nav:disabled[b-qk9msi8db8] { opacity: .5; cursor: default; }

.tat-datestep-pill[b-qk9msi8db8] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-radius: 8px;
    background: var(--ec-bg);
    border: 1px solid var(--ec-border);
    cursor: pointer;
    position: relative;
}
.tat-datestep-pill--today[b-qk9msi8db8] {
    background: var(--ec-green-lt);
    border-color: color-mix(in srgb, var(--ec-green) 40%, transparent);
}
.tat-datestep-pill--today i[b-qk9msi8db8] { color: var(--ec-green); }
.tat-datestep-pill--past[b-qk9msi8db8] {
    background: var(--ec-amber-lt);
    border-color: color-mix(in srgb, var(--ec-amber) 40%, transparent);
}
.tat-datestep-pill--past i[b-qk9msi8db8] { color: var(--ec-amber); }
.tat-datestep-pill i[b-qk9msi8db8] {
    font-size: 13px;
    color: var(--ec-muted);
}
.tat-datestep-label[b-qk9msi8db8] {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--ec-text);
    white-space: nowrap;
}
.tat-datestep-tag[b-qk9msi8db8] {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ec-muted);
}
.tat-datestep-pill--today .tat-datestep-tag[b-qk9msi8db8] { color: var(--ec-green); }
.tat-datestep-pill--past .tat-datestep-tag[b-qk9msi8db8] { color: var(--ec-amber); }
.tat-datestep-input[b-qk9msi8db8] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: 0;
    padding: 0;
}
.tat-datestep-jump[b-qk9msi8db8] {
    padding: 6px 10px;
    margin-left: 4px;
    background: #fff;
    color: var(--ec-blue);
    border: 1px solid var(--ec-blue-lt);
    border-radius: 7px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
}
.tat-datestep-jump:hover[b-qk9msi8db8] { background: var(--ec-blue-lt); }

/* ── Mode toggle (Classes / Programs) ────────────────── */
.tat-modetoggle[b-qk9msi8db8] {
    display: flex;
    gap: 3px;
    background: var(--ec-bg);
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    padding: 3px;
}
.tat-modechip[b-qk9msi8db8] {
    padding: 5px 11px;
    border-radius: 6px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--ec-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tat-modechip:disabled[b-qk9msi8db8] { cursor: not-allowed; opacity: .55; }
.tat-modechip--active[b-qk9msi8db8] {
    background: #fff;
    color: var(--ec-text);
    box-shadow: 0 1px 3px rgba(13, 23, 51, .08);
}
.tat-modechip-count[b-qk9msi8db8] {
    font-size: 9.5px;
    font-weight: 800;
    color: var(--ec-faint);
    padding: 0 4px;
}
.tat-modechip--active .tat-modechip-count[b-qk9msi8db8] { color: var(--ec-muted); }

/* ── KPI strip — 6 tiles: Marking | Marked | Present | Absent | Late | Excused
   (matches prototype 38479-38531; Late and Excused are independent tiles, not
   a split-pane). */
.tat-kpis[b-qk9msi8db8] {
    display: grid;
    grid-template-columns: 1.4fr 1.6fr 1fr 1fr 1fr 1fr;
    gap: 10px;
}
@media (max-width: 1280px) {
    .tat-kpis[b-qk9msi8db8] { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
    .tat-kpis[b-qk9msi8db8] { grid-template-columns: repeat(2, 1fr); }
}
.tat-kpi[b-qk9msi8db8] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 11px;
    padding: 11px 14px;
    min-width: 0;
}
.tat-kpi-label[b-qk9msi8db8] {
    font-size: 9.5px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}
.tat-kpi-value[b-qk9msi8db8] {
    font-size: 20px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 4px 0 0;
    line-height: 1;
    white-space: nowrap;
}
.tat-kpi-value-sm[b-qk9msi8db8] {
    font-size: 18px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 3px 0 0;
    line-height: 1;
}
.tat-kpi-value--mono[b-qk9msi8db8] {
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", monospace;
    font-variant-numeric: tabular-nums;
}
.tat-kpi-value--warn[b-qk9msi8db8] { color: var(--ec-amber); }
.tat-kpi-value--info[b-qk9msi8db8] { color: var(--ec-blue); }

.tat-kpi-row[b-qk9msi8db8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tat-kpi-icon-ok[b-qk9msi8db8]    { color: var(--ec-green); font-size: 13px; }
.tat-kpi-icon-alert[b-qk9msi8db8] { color: var(--ec-red);   font-size: 13px; }
.tat-kpi-icon-warn[b-qk9msi8db8]  { color: var(--ec-amber); font-size: 11px; }
.tat-kpi-icon-info[b-qk9msi8db8]  { color: var(--ec-blue);  font-size: 11px; }

.tat-kpi--marking[b-qk9msi8db8] { border-left: 4px solid var(--accent, var(--ec-blue)); }
.tat-kpi-marking-head[b-qk9msi8db8] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 4px;
    flex-wrap: wrap;
}
.tat-kpi-marking-name[b-qk9msi8db8] {
    font-size: 15px;
    font-weight: 800;
    color: var(--ec-text);
    line-height: 1.1;
}
.tat-kpi-marking-hr[b-qk9msi8db8] {
    font-size: 8.5px;
    font-weight: 800;
    background: color-mix(in srgb, var(--accent, var(--ec-blue)) 18%, transparent);
    color: var(--accent, var(--ec-blue));
    padding: 1px 5px;
    border-radius: 4px;
    letter-spacing: 0.06em;
}
.tat-kpi-marking-sub[b-qk9msi8db8] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 3px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tat-kpi--marked .tat-kpi-marked-head[b-qk9msi8db8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
.tat-kpi-marked-tag[b-qk9msi8db8] {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--ec-muted);
    margin: 0;
}
.tat-kpi-marked-tag--ok[b-qk9msi8db8]   { color: var(--ec-green); }
.tat-kpi-marked-tag--warn[b-qk9msi8db8] { color: var(--ec-amber); }
.tat-kpi-marked-total[b-qk9msi8db8] {
    color: var(--ec-muted);
    font-size: 13px;
    font-weight: 700;
}
.tat-kpi-marked-bar[b-qk9msi8db8] {
    margin-top: 7px;
    height: 5px;
    background: var(--ec-border-soft);
    border-radius: 3px;
    overflow: hidden;
}
.tat-kpi-marked-fill[b-qk9msi8db8] {
    height: 100%;
    background: var(--accent, var(--ec-blue));
    border-radius: 3px;
    transition: width .25s ease;
}
.tat-kpi-marked-fill--ok[b-qk9msi8db8] { background: var(--ec-green); }

.tat-kpi--ok    .tat-kpi-value[b-qk9msi8db8] { color: var(--ec-green); }
.tat-kpi--alert .tat-kpi-value[b-qk9msi8db8] { color: var(--ec-red); }

/* ── Pick-a-class onboarding card (no class picked yet) ── */
.tat-pick[b-qk9msi8db8] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 13px;
}
.tat-pick-icon[b-qk9msi8db8] {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--ec-blue-lt);
    color: var(--ec-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.tat-pick-title[b-qk9msi8db8] {
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.tat-pick-sub[b-qk9msi8db8] {
    font-size: 11.5px;
    color: var(--ec-muted);
    margin: 3px 0 0;
}

/* ── 2-column layout ─────────────────────────────────── */
.tat-layout[b-qk9msi8db8] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 16px;
    align-items: start;
}
.tat-main[b-qk9msi8db8] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.tat-rail-wrap[b-qk9msi8db8] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 12px;
}
@media (max-width: 1100px) {
    .tat-layout[b-qk9msi8db8] { grid-template-columns: 1fr; }
    .tat-rail-wrap[b-qk9msi8db8] { position: static; }
}

/* ── Marking card (left side) ────────────────────────── */
.tat-mark[b-qk9msi8db8] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 12px;
    overflow: hidden;
}
.tat-mark-head[b-qk9msi8db8] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--ec-border-soft);
    flex-wrap: wrap;
}
.tat-mark-head-text[b-qk9msi8db8] { flex: 1; min-width: 200px; }
.tat-mark-title[b-qk9msi8db8] {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}
.tat-mark-hr[b-qk9msi8db8] {
    font-size: 9px;
    font-weight: 800;
    background: color-mix(in srgb, var(--ec-purple, #7c3aed) 14%, transparent);
    color: var(--ec-purple, #7c3aed);
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.08em;
}
.tat-mark-sub[b-qk9msi8db8] {
    font-size: 11.5px;
    color: var(--ec-muted);
    margin: 4px 0 0;
}
.tat-mark-actions[b-qk9msi8db8] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}
.tat-mark-motivate[b-qk9msi8db8] {
    padding: 7px 13px;
    border: none;
    border-radius: 8px;
    background: var(--ec-orange, #ea7025);
    color: #fff;
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.tat-mark-motivate:hover[b-qk9msi8db8] { filter: brightness(.95); }

/* "View absence history" — the quiet CTA shown when unexcused == 0 but
   some absences were motivated this term. White / muted instead of amber
   so it doesn't compete visually for attention with the marking actions. */
.tat-mark-history[b-qk9msi8db8] {
    padding: 7px 13px;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    background: #fff;
    color: var(--ec-sub);
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tat-mark-history:hover[b-qk9msi8db8] {
    border-color: var(--ec-text);
    color: var(--ec-text);
}
.tat-mark-history-count[b-qk9msi8db8] {
    font-size: 10px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--ec-border-soft);
    color: var(--ec-muted);
}
.tat-mark-history .bi[b-qk9msi8db8] { color: var(--ec-green); font-size: 13px; }

.tat-mark-reset[b-qk9msi8db8] {
    padding: 7px 13px;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    background: #fff;
    color: var(--ec-sub);
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.tat-mark-reset .bi[b-qk9msi8db8] { font-size: 12px; line-height: 1; }
.tat-mark-reset:hover[b-qk9msi8db8] { border-color: var(--ec-text); color: var(--ec-text); }
.tat-mark-reset:disabled[b-qk9msi8db8] { opacity: .5; cursor: not-allowed; }
.tat-mark-save[b-qk9msi8db8] {
    padding: 7px 13px;
    border: none;
    border-radius: 8px;
    background: var(--save, var(--ec-green));
    color: #fff;
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.tat-mark-save:hover[b-qk9msi8db8] { filter: brightness(.95); }
.tat-mark-save:disabled[b-qk9msi8db8] { opacity: .5; cursor: not-allowed; }

/* Blue "N parent notices →" CTA — parent-submitted absence notices. */
.tat-mark-notices[b-qk9msi8db8] {
    padding: 7px 13px;
    border: none;
    border-radius: 8px;
    background: var(--ec-blue);
    color: #fff;
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.tat-mark-notices:hover[b-qk9msi8db8] { filter: brightness(.95); }

/* Subject pill in the class marking-header (MATH / SCIENCE) — tinted by the
   subject colour, mirrors the prototype's activeSubject badge. */
.tat-mark-subjpill[b-qk9msi8db8] {
    font-size: 9.5px;
    font-weight: 800;
    background: color-mix(in srgb, var(--accent, var(--ec-blue)) 18%, transparent);
    color: var(--accent, var(--ec-blue));
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.06em;
}

/* Program header badge — COORDINATOR / YOUR GROUP / READ-ONLY. */
.tat-mark-badge[b-qk9msi8db8] {
    font-size: 9.5px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.06em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.tat-mark-badge--coord[b-qk9msi8db8] {
    background: color-mix(in srgb, var(--ec-green) 18%, transparent);
    color: var(--ec-green);
}
.tat-mark-badge--group[b-qk9msi8db8] {
    background: color-mix(in srgb, var(--ec-purple, #7c3aed) 18%, transparent);
    color: var(--ec-purple, #7c3aed);
}
.tat-mark-badge--readonly[b-qk9msi8db8] {
    background: var(--ec-bg);
    color: var(--ec-muted);
}

/* ── Slot chips (inside the marking card) ─────────────── */
.tat-chips[b-qk9msi8db8] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 11px 16px;
    border-bottom: 1px solid var(--ec-border-soft);
}
.tat-chip[b-qk9msi8db8] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 11px;
    background: #fff;
    color: var(--ec-text);
    border: 1px solid var(--ec-border);
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}
.tat-chip:hover[b-qk9msi8db8] { border-color: var(--accent, var(--ec-blue)); }
.tat-chip--active[b-qk9msi8db8] {
    background: var(--accent, var(--ec-blue));
    border-color: var(--accent, var(--ec-blue));
    color: #fff;
}
.tat-chip-name[b-qk9msi8db8] { font-weight: 800; }
.tat-chip-count[b-qk9msi8db8] {
    font-size: 10px;
    font-weight: 800;
    color: var(--ec-muted);
    background: var(--ec-border-soft);
    padding: 1px 6px;
    border-radius: 4px;
}
.tat-chip--active .tat-chip-count[b-qk9msi8db8] {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}
.tat-chip-hr[b-qk9msi8db8] {
    font-size: 8.5px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--accent, var(--ec-blue)) 18%, transparent);
    color: var(--accent, var(--ec-blue));
    letter-spacing: 0.06em;
}
.tat-chip--active .tat-chip-hr[b-qk9msi8db8] {
    background: rgba(255, 255, 255, .25);
    color: #fff;
}
.tat-chip-time[b-qk9msi8db8] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-muted);
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", monospace;
    background: var(--ec-border-soft);
    padding: 1px 6px;
    border-radius: 4px;
}
.tat-chip--active .tat-chip-time[b-qk9msi8db8] {
    background: rgba(255, 255, 255, .25);
    color: #fff;
}
.tat-chip-dot[b-qk9msi8db8] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ec-green);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ec-green) 25%, transparent);
    animation: tat-pulse-b-qk9msi8db8 1.8s ease-in-out infinite;
}
@keyframes tat-pulse-b-qk9msi8db8 {
    50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ec-green) 0%, transparent); }
}

/* ── Banner (save result) ─────────────────────────────── */
.tat-banner[b-qk9msi8db8] {
    margin: 11px 16px 0;
    padding: 10px 13px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
}
.tat-banner--ok[b-qk9msi8db8]    { background: var(--ec-green-lt); color: var(--ec-green); border-left: 3px solid var(--ec-green); }
.tat-banner--warn[b-qk9msi8db8]  { background: var(--ec-amber-lt); color: var(--ec-amber); border-left: 3px solid var(--ec-amber); }
.tat-banner--alert[b-qk9msi8db8] { background: var(--ec-red-lt); color: var(--ec-red); border-left: 3px solid var(--ec-red); }

/* ── Roster ─────────────────────────────────────────── */
.tat-table[b-qk9msi8db8] {
    /* no border — sits inside the marking card */
}
.tat-row[b-qk9msi8db8] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 11px 16px;
    border-top: 1px solid var(--ec-border-soft);
}
.tat-row-student[b-qk9msi8db8] {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}
.tat-row-avatar[b-qk9msi8db8] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ec-blue);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
    font-weight: 800;
    flex-shrink: 0;
    letter-spacing: -.02em;
}
.tat-row-text[b-qk9msi8db8] { min-width: 0; }
.tat-row-name[b-qk9msi8db8] {
    font-size: 13px;
    font-weight: 700;
    color: var(--ec-text);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tat-row-meta[b-qk9msi8db8] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 2px 0 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.tat-row-warn[b-qk9msi8db8] {
    font-size: 10px;
    font-weight: 800;
    color: var(--ec-amber);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    letter-spacing: 0.02em;
}

.tat-row-pills[b-qk9msi8db8] {
    display: inline-flex;
    gap: 4px;
    flex-wrap: nowrap;
    justify-content: flex-end;
}
.tat-pill[b-qk9msi8db8] {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", monospace;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    background: var(--ec-bg);
    color: var(--ec-muted);
}
.tat-pill:hover[b-qk9msi8db8] { border-color: var(--ec-text); color: var(--ec-text); }

.tat-pill--ok.tat-pill--active[b-qk9msi8db8]    { background: var(--ec-green); color: #fff; }
.tat-pill--alert.tat-pill--active[b-qk9msi8db8] { background: var(--ec-red);   color: #fff; }
.tat-pill--warn.tat-pill--active[b-qk9msi8db8]  { background: var(--ec-amber); color: #fff; }
.tat-pill--info.tat-pill--active[b-qk9msi8db8]  { background: var(--ec-blue);  color: #fff; }

/* ── Empty state ──────────────────────────────────────── */
.tat-empty[b-qk9msi8db8] {
    background: #fff;
    border: 1px dashed var(--ec-border);
    border-radius: 14px;
    padding: 48px 28px;
    text-align: center;
}
.tat-empty-icon[b-qk9msi8db8] {
    font-size: 38px;
    color: var(--ec-faint);
    margin-bottom: 10px;
    display: block;
}
.tat-empty-title[b-qk9msi8db8] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.tat-empty-sub[b-qk9msi8db8] {
    font-size: 12px;
    color: var(--ec-muted);
    margin: 5px auto 0;
    max-width: 380px;
}

/* ── Right rail: Today's lessons ──────────────────────── */
.tat-rail[b-qk9msi8db8] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 12px;
    padding: 14px 16px;
}
.tat-rail-head[b-qk9msi8db8] {
    margin-bottom: 11px;
}
.tat-rail-title[b-qk9msi8db8] {
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.tat-rail-empty[b-qk9msi8db8] {
    text-align: center;
    color: var(--ec-muted);
    padding: 20px 8px;
}
.tat-rail-empty i[b-qk9msi8db8] {
    font-size: 22px;
    color: var(--ec-faint);
    display: block;
    margin-bottom: 6px;
}
.tat-rail-empty p[b-qk9msi8db8] {
    font-size: 12px;
    margin: 0;
}
.tat-rail-list[b-qk9msi8db8] {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.tat-rail-row[b-qk9msi8db8] {
    display: grid;
    grid-template-columns: 4px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 9px 0;
    border-top: 1px solid var(--ec-border-soft);
}
.tat-rail-row:first-child[b-qk9msi8db8] { border-top: none; padding-top: 0; }
.tat-rail-row-bar[b-qk9msi8db8] {
    width: 3px;
    height: 28px;
    background: var(--accent, var(--ec-blue));
    border-radius: 2px;
}
.tat-rail-row--done[b-qk9msi8db8]    { opacity: 0.55; }
.tat-rail-row--now .tat-rail-row-bar[b-qk9msi8db8] {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, var(--ec-blue)) 25%, transparent);
}

.tat-rail-row-body[b-qk9msi8db8] { min-width: 0; }
.tat-rail-row-subject[b-qk9msi8db8] {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}
.tat-rail-row-meta[b-qk9msi8db8] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 3px 0 0;
    font-variant-numeric: tabular-nums;
}
.tat-rail-row-sep[b-qk9msi8db8] { color: var(--ec-faint); margin: 0 4px; }
.tat-rail-row-status[b-qk9msi8db8] {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", monospace;
}
.tat-rail-row-status--now[b-qk9msi8db8]      { background: var(--accent, var(--ec-blue)); color: #fff; }
.tat-rail-row-status--done[b-qk9msi8db8]     { background: var(--ec-border-soft); color: var(--ec-muted); }
.tat-rail-row-status--upcoming[b-qk9msi8db8] { background: var(--ec-border-soft); color: var(--ec-muted); }
.tat-rail-row-lock[b-qk9msi8db8] {
    color: var(--ec-faint);
    font-size: 12px;
}

/* ── 7-day chart (sits under the rail) ───────────────── */
.tat-history[b-qk9msi8db8] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 12px;
    padding: 13px 16px;
}
.tat-history-head[b-qk9msi8db8] {
    margin-bottom: 11px;
}
.tat-history-title[b-qk9msi8db8] {
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
/* 7-day heatmap — fixed-size solid square tiles, status grid rather than a
   comparative-height chart. Day label (Wed) + day number (29) stack above
   the tile, percentage sits below. Today's tile gets a blue outline ring
   so it's the obvious "you are here" cue. (Proto figure 39085-39097.) */
.tat-history-bars[b-qk9msi8db8] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    align-items: start;
}
.tat-history-col[b-qk9msi8db8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;
}
.tat-history-day[b-qk9msi8db8] {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--ec-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
}
.tat-history-num[b-qk9msi8db8] {
    font-size: 11px;
    font-weight: 700;
    color: var(--ec-muted);
    margin: 0;
    font-variant-numeric: tabular-nums;
}
.tat-history-col--today .tat-history-day[b-qk9msi8db8],
.tat-history-col--today .tat-history-num[b-qk9msi8db8],
.tat-history-col--today .tat-history-pct[b-qk9msi8db8] {
    color: var(--ec-blue);
    font-weight: 800;
}
.tat-history-bar[b-qk9msi8db8] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    transition: transform .12s ease;
}
.tat-history-col:hover .tat-history-bar[b-qk9msi8db8] { transform: translateY(-1px); }
.tat-history-bar--ok[b-qk9msi8db8]    { background: var(--ec-green); }
.tat-history-bar--warn[b-qk9msi8db8]  { background: var(--ec-amber); }
.tat-history-bar--alert[b-qk9msi8db8] { background: var(--ec-red); }
.tat-history-bar--empty[b-qk9msi8db8] {
    background: var(--ec-border-soft);
    border: 1px solid var(--ec-border);
}
.tat-history-col--today .tat-history-bar[b-qk9msi8db8] {
    outline: 2px solid var(--ec-blue);
    outline-offset: 2px;
}
.tat-history-pct[b-qk9msi8db8] {
    font-size: 11.5px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", monospace;
}
.tat-history-bar--empty + .tat-history-pct[b-qk9msi8db8] { color: var(--ec-faint); }

/* ── Subject / Group chip row (sits under the class/program chips) ────── */
.tat-subjects[b-qk9msi8db8] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 9px 16px 11px;
    border-bottom: 1px solid var(--ec-border-soft);
}
.tat-subjects-label[b-qk9msi8db8] {
    font-size: 10px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-right: 3px;
}

/* Subject chip — white by default, fills with the subject colour when on. */
.tat-subchip[b-qk9msi8db8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: #fff;
    color: var(--ec-sub);
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}
.tat-subchip:hover[b-qk9msi8db8] { border-color: var(--accent, var(--ec-blue)); }
.tat-subchip--on[b-qk9msi8db8] {
    background: var(--accent, var(--ec-blue));
    border-color: var(--accent, var(--ec-blue));
    color: #fff;
}
.tat-subchip-dot[b-qk9msi8db8] {
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: var(--accent, var(--ec-blue));
    flex-shrink: 0;
}
.tat-subchip--on .tat-subchip-dot[b-qk9msi8db8] { background: #fff; }
.tat-subchip-time[b-qk9msi8db8] {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--ec-muted);
    font-variant-numeric: tabular-nums;
}
.tat-subchip--on .tat-subchip-time[b-qk9msi8db8] { color: rgba(255, 255, 255, .78); }

/* ── Program chips (Programs mode) ───────────────────────────────────── */
.tat-chip--program.tat-chip--active[b-qk9msi8db8] {
    background: var(--ec-purple, #7c3aed);
    border-color: var(--ec-purple, #7c3aed);
}
.tat-chip-tag[b-qk9msi8db8] {
    font-size: 8.5px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 4px;
    letter-spacing: 0.06em;
}
.tat-chip-tag--coord[b-qk9msi8db8] { background: color-mix(in srgb, var(--ec-green) 18%, transparent); color: var(--ec-green); }
.tat-chip-tag--group[b-qk9msi8db8] { background: color-mix(in srgb, var(--ec-purple, #7c3aed) 18%, transparent); color: var(--ec-purple, #7c3aed); }
.tat-chip-tag--read[b-qk9msi8db8]  { background: var(--ec-bg); color: var(--ec-muted); }
.tat-chip-tag--run[b-qk9msi8db8]   { background: var(--ec-border-soft); color: var(--ec-muted); }
.tat-chip--active .tat-chip-tag[b-qk9msi8db8] {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

/* ── Group chips (Programs mode, under the program chips) ────────────── */
.tat-groupchip[b-qk9msi8db8] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: #fff;
    color: var(--ec-sub);
    border: 1px solid var(--ec-border);
    border-radius: 7px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
}
.tat-groupchip:disabled[b-qk9msi8db8] { cursor: not-allowed; opacity: .55; }
.tat-groupchip-dot[b-qk9msi8db8] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent, var(--ec-muted));
    flex-shrink: 0;
}
.tat-groupchip-count[b-qk9msi8db8] { opacity: .7; }
.tat-groupchip--mine[b-qk9msi8db8] {
    background: color-mix(in srgb, var(--accent, var(--ec-blue)) 12%, #fff);
    border-color: transparent;
    color: var(--accent, var(--ec-blue));
}
.tat-groupchip--on[b-qk9msi8db8] {
    background: var(--accent, var(--ec-blue));
    border-color: var(--accent, var(--ec-blue));
    color: #fff;
}
.tat-groupchip--on .tat-groupchip-dot[b-qk9msi8db8] { background: #fff; }
.tat-groupchip--all-on[b-qk9msi8db8] {
    background: var(--ec-text);
    border-color: var(--ec-text);
    color: #fff;
}
.tat-groupchip-mine[b-qk9msi8db8] {
    font-size: 8px;
    font-weight: 800;
    background: var(--accent, var(--ec-blue));
    color: #fff;
    padding: 0 4px;
    border-radius: 3px;
    margin-left: 2px;
}

/* ── Program roster row: child age suffix ────────────────────────────── */
.tat-row-age[b-qk9msi8db8] {
    font-size: 10.5px;
    color: var(--ec-muted);
    font-weight: 600;
}

/* ── Sessions sidebar (Programs mode right rail) ─────────────────────── */
.tat-rail-sub[b-qk9msi8db8] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 2px 0 0;
}
.tat-rail-head[b-qk9msi8db8] { display: block; }
.tat-sess[b-qk9msi8db8] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 0;
    background: transparent;
    border: none;
    border-top: 1px solid var(--ec-border-soft);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    border-radius: 8px;
}
.tat-rail-list .tat-sess:first-child[b-qk9msi8db8] { border-top: none; }
.tat-sess--active[b-qk9msi8db8] { background: var(--ec-purple-lt, #ede9fe); padding-left: 10px; padding-right: 10px; }
.tat-sess-day[b-qk9msi8db8] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", monospace;
}
.tat-sess-day--today[b-qk9msi8db8]  { background: var(--ec-green); color: #fff; }
.tat-sess-day--past[b-qk9msi8db8]   { background: var(--ec-bg); color: var(--ec-muted); }
.tat-sess-day--future[b-qk9msi8db8] { background: var(--ec-amber-lt); color: var(--ec-amber); }
.tat-sess-body[b-qk9msi8db8] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tat-sess-date[b-qk9msi8db8] {
    font-size: 12px;
    font-weight: 700;
    color: var(--ec-text);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tat-sess-today[b-qk9msi8db8] {
    font-size: 9px;
    font-weight: 800;
    color: var(--ec-green);
    background: var(--ec-green-lt);
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0.06em;
}
.tat-sess-meta[b-qk9msi8db8] { font-size: 10.5px; color: var(--ec-muted); font-weight: 600; }
.tat-sess-meta--pending[b-qk9msi8db8] { color: var(--ec-amber); font-weight: 700; }
.tat-sess-check[b-qk9msi8db8] { color: var(--ec-purple, #7c3aed); font-size: 14px; }
/* /Components/Pages/Teacher/TeacherClassDetailPage.razor.rz.scp.css */
/* TeacherClassDetailPage — scoped CSS. Mirrors TWClassDetail (proto 35876-37625). */

/* Official-document download buttons sitting on the colored header band. */
.tcd-header-docs[b-b1ylqoeys5] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.tcd-doc-btn[b-b1ylqoeys5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.tcd-doc-btn:hover[b-b1ylqoeys5] {
    background: rgba(255, 255, 255, 0.28);
}

.tcd-doc-select[b-b1ylqoeys5] {
    padding: 6px 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 8px;
    cursor: pointer;
    max-width: 200px;
}

/* Options render in the native popup (dark text on white) for readability. */
.tcd-doc-select option[b-b1ylqoeys5] {
    color: #1a2540;
}

.tcd-page[b-b1ylqoeys5] {
    padding: 0;
    background: var(--ec-bg);
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Header band — one gradient card hosts the back-link, the title /
   meta block, the KPI tiles overlay, and the tabs at the bottom edge.
   Mirrors prototype 35876-35950. ───────────────────────────────────── */
.tcd-header[b-b1ylqoeys5] {
    position: relative;
    background: linear-gradient(135deg,
        var(--accent, var(--ec-blue)) 0%,
        color-mix(in srgb, var(--accent, var(--ec-blue)) 75%, #000) 100%);
    color: #fff;
    border-radius: 16px;
    padding: 16px 24px 0;
    /* `clip` is stricter than `hidden` — it suppresses the scroll container
       entirely so the decorative ::after circle (positioned out of bounds)
       can never produce scrollbar arrow chrome on Windows Edge / Chrome. */
    overflow: clip;
    scrollbar-width: none;
}
.tcd-header[b-b1ylqoeys5]::-webkit-scrollbar { display: none; }
/* Decorative circle in the top-right corner — matches the proto's
   subtle accent ring. */
.tcd-header[b-b1ylqoeys5]::after {
    content: "";
    position: absolute;
    right: -60px;
    top: -90px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .12);
    pointer-events: none;
}

/* Back-link pill — inside the header, translucent white bg. */
.tcd-back[b-b1ylqoeys5] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    padding: 5px 11px;
    border-radius: 7px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .18);
    width: fit-content;
}
.tcd-back:hover[b-b1ylqoeys5] { background: rgba(255, 255, 255, .22); color: #fff; }

.tcd-header-grid[b-b1ylqoeys5] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    padding: 14px 0 18px;
}
@media (max-width: 980px) {
    .tcd-header-grid[b-b1ylqoeys5] {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

.tcd-titlerow[b-b1ylqoeys5] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.tcd-title[b-b1ylqoeys5] {
    font-size: 28px;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.015em;
    line-height: 1;
}
.tcd-pill[b-b1ylqoeys5] {
    font-size: 10px;
    font-weight: 800;
    background: rgba(255, 255, 255, .22);
    color: #fff;
    padding: 4px 9px;
    border-radius: 6px;
    letter-spacing: 0.1em;
    display: inline-flex;
    align-items: center;
}
.tcd-meta[b-b1ylqoeys5] {
    font-size: 13px;
    color: rgba(255, 255, 255, .88);
    margin: 8px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.tcd-meta-sep[b-b1ylqoeys5] { opacity: 0.45; }
.tcd-meta i[b-b1ylqoeys5] { font-size: 12px; }

/* KPI row — 4 slim tiles, translucent white bg, on the right side. */
.tcd-kpis[b-b1ylqoeys5] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 10px;
    overflow: hidden;
}
@media (max-width: 980px) {
    .tcd-kpis[b-b1ylqoeys5] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.tcd-kpi[b-b1ylqoeys5] {
    padding: 10px 14px;
    border-right: 1px solid rgba(255, 255, 255, .14);
    min-width: 110px;
}
.tcd-kpi:last-child[b-b1ylqoeys5] { border-right: none; }
.tcd-kpi-label[b-b1ylqoeys5] {
    font-size: 9.5px;
    font-weight: 800;
    color: rgba(255, 255, 255, .8);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
    white-space: nowrap;
}
.tcd-kpi-value[b-b1ylqoeys5] {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    margin: 4px 0 0;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.tcd-kpi-sub[b-b1ylqoeys5] {
    font-size: 10px;
    color: rgba(255, 255, 255, .68);
    margin: 4px 0 0;
}
.tcd-kpi--alert .tcd-kpi-value[b-b1ylqoeys5] { color: #fff7c4; }

/* Tabs — white pills sitting at the bottom of the header band, with the
   active tab fully white + accent-colored text. */
.tcd-tabs[b-b1ylqoeys5] {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 0;
    /* Hide horizontal scrollbar chrome — the row uses scroll-on-overflow only
       as a safety net for very narrow viewports; we don't want WebKit's
       horizontal scrollbar buttons bleeding into the gradient header. */
    scrollbar-width: none;
}
.tcd-tabs[b-b1ylqoeys5]::-webkit-scrollbar { display: none; }
.tcd-tab[b-b1ylqoeys5] {
    padding: 10px 18px;
    background: transparent;
    border: none;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom: none;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, .82);
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    margin-bottom: -1px;
    transition: background-color .12s ease, color .12s ease;
}
/* Hover only applies to non-active tabs — without the :not() guard, hovering
   the active tab paints its text white-on-white because the active tab's
   background is already #fff. (Prototype 35947-35954 — the proto has no hover
   state on tabs, so we add only a subtle background hint here.) */
.tcd-tab:not(.tcd-tab--active):hover[b-b1ylqoeys5] {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}
.tcd-tab--active[b-b1ylqoeys5] {
    background: #fff;
    color: var(--accent, var(--ec-blue));
    font-weight: 800;
}
.tcd-tab--active:hover[b-b1ylqoeys5] { color: var(--accent, var(--ec-blue)); }

/* ── Body shared card style ──────────────────────────────── */
.tcd-body[b-b1ylqoeys5] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.tcd-card[b-b1ylqoeys5] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    padding: 18px;
}
.tcd-card-head[b-b1ylqoeys5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.tcd-card-title[b-b1ylqoeys5] {
    font-size: 15px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.tcd-card-sub[b-b1ylqoeys5] {
    font-size: 12px;
    color: var(--ec-muted);
    margin: 4px 0 14px;
}
.tcd-card-link[b-b1ylqoeys5] {
    font-size: 11.5px;
    font-weight: 800;
    color: var(--ec-blue);
    text-decoration: none;
}
.tcd-card-link:hover[b-b1ylqoeys5] { text-decoration: underline; }

/* ── Overview tab ─────────────────────────────────────────── */
.tcd-overview[b-b1ylqoeys5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 900px) {
    .tcd-overview[b-b1ylqoeys5] { grid-template-columns: 1fr; }
}
.tcd-quick[b-b1ylqoeys5] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.tcd-quick-btn[b-b1ylqoeys5] {
    padding: 11px 13px;
    background: var(--ec-bg);
    color: var(--ec-text);
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.tcd-quick-btn:hover[b-b1ylqoeys5] {
    border-color: var(--ec-blue);
    color: var(--ec-blue);
}
.tcd-overview-list[b-b1ylqoeys5] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tcd-overview-row[b-b1ylqoeys5] {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: 9px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}
.tcd-overview-row:hover[b-b1ylqoeys5] { background: var(--ec-border-soft); }
.tcd-overview-icon[b-b1ylqoeys5] {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--accent, var(--ec-blue)) 10%, transparent);
    color: var(--accent, var(--ec-blue));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.tcd-overview-title[b-b1ylqoeys5] {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--ec-text);
    display: block;
}
.tcd-overview-sub[b-b1ylqoeys5] {
    font-size: 11px;
    color: var(--ec-muted);
    display: block;
    margin-top: 2px;
}
.tcd-overview-chev[b-b1ylqoeys5] { color: var(--ec-faint); }

/* ── Students tab ────────────────────────────────────────── */
.tcd-student-grid[b-b1ylqoeys5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 9px;
}
.tcd-student[b-b1ylqoeys5] {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 10px;
    align-items: center;
    padding: 9px 11px;
    background: var(--ec-bg);
    border-radius: 9px;
}
.tcd-student-avatar[b-b1ylqoeys5] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ec-blue-lt);
    color: var(--ec-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
}
.tcd-student-name[b-b1ylqoeys5] {
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.tcd-student-meta[b-b1ylqoeys5] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 2px 0 0;
}

/* ── Attendance tab ──────────────────────────────────────── */
.tcd-att-list[b-b1ylqoeys5] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tcd-att-row[b-b1ylqoeys5] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 14px;
    align-items: center;
    padding: 10px 14px;
    background: var(--ec-bg);
    border-radius: 9px;
}
.tcd-att-date[b-b1ylqoeys5] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ec-text);
    margin: 0;
}
.tcd-att-pct[b-b1ylqoeys5] {
    font-size: 16px;
    font-weight: 800;
    margin: 0;
    font-variant-numeric: tabular-nums;
}
.tcd-att-pct--ok[b-b1ylqoeys5]    { color: var(--ec-green); }
.tcd-att-pct--info[b-b1ylqoeys5]  { color: var(--ec-blue); }
.tcd-att-pct--warn[b-b1ylqoeys5]  { color: var(--ec-amber); }
.tcd-att-pct--alert[b-b1ylqoeys5] { color: var(--ec-red); }
.tcd-att-meta[b-b1ylqoeys5] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 0;
}

/* ── Grades tab ──────────────────────────────────────────── */
.tcd-grade-kpis[b-b1ylqoeys5] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}
.tcd-grade-kpi[b-b1ylqoeys5] {
    background: var(--ec-bg);
    border-radius: 11px;
    padding: 11px 14px;
}
.tcd-grade-kpi-label[b-b1ylqoeys5] {
    font-size: 10px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}
.tcd-grade-kpi-value[b-b1ylqoeys5] {
    font-size: 22px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 6px 0 0;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", monospace;
}
.tcd-grade-kpi-sub[b-b1ylqoeys5] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 5px 0 0;
}

.tcd-grade-list[b-b1ylqoeys5] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tcd-grade-card[b-b1ylqoeys5] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 12px;
    overflow: hidden;
}
.tcd-grade-card-head[b-b1ylqoeys5] {
    display: grid;
    grid-template-columns: 38px 1fr auto;
    gap: 11px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--ec-border-soft);
}
.tcd-grade-avatar[b-b1ylqoeys5] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--ec-blue-lt);
    color: var(--ec-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
}
.tcd-grade-card-name[b-b1ylqoeys5] {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.tcd-grade-card-meta[b-b1ylqoeys5] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 2px 0 0;
}
.tcd-grade-card-avg[b-b1ylqoeys5] { text-align: right; }
.tcd-grade-card-avg-label[b-b1ylqoeys5] {
    font-size: 9.5px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}
.tcd-grade-card-avg-value[b-b1ylqoeys5] {
    font-size: 18px;
    font-weight: 800;
    margin: 3px 0 0;
    line-height: 1;
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", monospace;
}
.tcd-grade-card-empty[b-b1ylqoeys5] {
    font-size: 11px;
    color: var(--ec-muted);
    font-style: italic;
    margin: 0;
}

.tcd-grade-subjects[b-b1ylqoeys5] {
    display: flex;
    flex-direction: column;
}
.tcd-grade-subject[b-b1ylqoeys5] {
    display: grid;
    grid-template-columns: minmax(180px, 220px) 1fr;
    gap: 14px;
    align-items: center;
    padding: 11px 16px;
    border-top: 1px solid var(--ec-border-soft);
}
.tcd-grade-subject:first-child[b-b1ylqoeys5] { border-top: none; }
.tcd-grade-subject-label[b-b1ylqoeys5] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}
.tcd-grade-subject-icon[b-b1ylqoeys5] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--stripe, var(--ec-blue)) 14%, transparent);
    color: var(--stripe, var(--ec-blue));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 15px;
}
.tcd-grade-subject-name[b-b1ylqoeys5] {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tcd-grade-subject-meta[b-b1ylqoeys5] {
    font-size: 10.5px;
    color: var(--ec-muted);
    font-weight: 600;
    margin: 2px 0 0;
}
.tcd-grade-subject-meta b[b-b1ylqoeys5] {
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", monospace;
}

.tcd-grade-chips[b-b1ylqoeys5] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
}
.tcd-grade-chip[b-b1ylqoeys5] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 5px 9px 6px;
    border-radius: 8px;
    border-top: 3px solid var(--stripe, var(--ec-blue));
    background: var(--ec-bg);
    min-width: 46px;
    cursor: default;
}
.tcd-grade-chip-value[b-b1ylqoeys5] {
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", monospace;
}
.tcd-grade-chip-date[b-b1ylqoeys5] {
    font-size: 8.5px;
    font-weight: 700;
    color: var(--ec-muted);
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", monospace;
}

/* Band coloring — shared with student averages above. Numeric/letter/qual all
   collapse onto the same ok/warn/alert/muted token set via GradeAggregator. */
.tcd-band--ok[b-b1ylqoeys5]    { color: var(--ec-green); }
.tcd-band--warn[b-b1ylqoeys5]  { color: var(--ec-amber); }
.tcd-band--alert[b-b1ylqoeys5] { color: var(--ec-red); }
.tcd-band--muted[b-b1ylqoeys5] { color: var(--ec-muted); }
.tcd-band--info[b-b1ylqoeys5]  { color: var(--ec-blue); }

.tcd-grade-chip.tcd-band--ok[b-b1ylqoeys5]    { background: var(--ec-green-lt); }
.tcd-grade-chip.tcd-band--warn[b-b1ylqoeys5]  { background: var(--ec-amber-lt); }
.tcd-grade-chip.tcd-band--alert[b-b1ylqoeys5] { background: var(--ec-red-lt); }
.tcd-grade-chip.tcd-band--info[b-b1ylqoeys5]  { background: var(--ec-blue-lt); }

@media (max-width: 720px) {
    .tcd-grade-kpis[b-b1ylqoeys5] { grid-template-columns: 1fr 1fr; }
    .tcd-grade-subject[b-b1ylqoeys5] {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}


/* ── Empty states ────────────────────────────────────────── */
.tcd-empty[b-b1ylqoeys5] {
    text-align: center;
    padding: 28px 18px;
    color: var(--ec-muted);
}
.tcd-empty-card[b-b1ylqoeys5] {
    background: #fff;
    border: 1px dashed var(--ec-border);
    padding: 48px 28px;
    text-align: center;
}
.tcd-empty-icon[b-b1ylqoeys5] {
    font-size: 38px;
    color: var(--ec-faint);
    margin-bottom: 10px;
    display: block;
}
.tcd-empty-title[b-b1ylqoeys5] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.tcd-empty-sub[b-b1ylqoeys5] {
    font-size: 12px;
    color: var(--ec-muted);
    margin: 5px auto 0;
    max-width: 380px;
    line-height: 1.5;
}
.tcd-empty-cta[b-b1ylqoeys5] {
    display: inline-block;
    margin-top: 14px;
    padding: 9px 16px;
    background: var(--ec-blue);
    color: #fff;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 800;
    text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   Prototype-faithful tab styles — added alongside the legacy ones above
   so the swap-in is non-breaking. The new tabs use these "v2" classes
   exclusively; old classes (.tcd-quick, .tcd-att-list, etc.) stay in
   place until/unless we delete them.
   ═══════════════════════════════════════════════════════════════════ */

/* Card title inline subtitle — "Homework · 4 assignments" pattern */
.tcd-card-sub-inline[b-b1ylqoeys5] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ec-muted);
    margin-left: 4px;
}

/* Card-head action button (Export roster, + Post photos, + Assign hw, …) */
.tcd-card-action[b-b1ylqoeys5] {
    padding: 7px 13px;
    background: #fff;
    color: var(--ec-text);
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tcd-card-action:hover:not(:disabled)[b-b1ylqoeys5] { border-color: var(--ec-text); color: var(--ec-text); }
.tcd-card-action:disabled[b-b1ylqoeys5] { opacity: .55; cursor: not-allowed; }
.tcd-card-action--primary[b-b1ylqoeys5] {
    background: var(--ec-blue);
    color: #fff;
    border-color: var(--ec-blue);
}
.tcd-card-action--primary:hover:not(:disabled)[b-b1ylqoeys5] {
    background: color-mix(in srgb, var(--ec-blue) 88%, #000);
    border-color: color-mix(in srgb, var(--ec-blue) 88%, #000);
    color: #fff;
}

/* Status band color modifiers — used by AVG cells, Class avg KPI, etc. */
.tcd-band--ok[b-b1ylqoeys5]    { color: var(--ec-green); }
.tcd-band--warn[b-b1ylqoeys5]  { color: var(--ec-amber); }
.tcd-band--alert[b-b1ylqoeys5] { color: var(--ec-red); }
.tcd-band--info[b-b1ylqoeys5]  { color: var(--ec-blue); }
.tcd-band--muted[b-b1ylqoeys5] { color: var(--ec-muted); }

/* ── Overview tab — "Recent activity" rows (left col) ─────── */
.tcd-activity-row[b-b1ylqoeys5] {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 11px;
    align-items: center;
    padding: 10px 12px;
    background: var(--ec-bg);
    border-radius: 9px;
}
.tcd-activity-icon[b-b1ylqoeys5] {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--accent, var(--ec-blue)) 14%, transparent);
    color: var(--accent, var(--ec-blue));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}
.tcd-activity-body[b-b1ylqoeys5] { min-width: 0; }
.tcd-activity-title[b-b1ylqoeys5] {
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
    line-height: 1.3;
}
.tcd-activity-sub[b-b1ylqoeys5] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 3px 0 0;
}
.tcd-activity-when[b-b1ylqoeys5] {
    font-size: 10.5px;
    color: var(--ec-muted);
    font-weight: 700;
    white-space: nowrap;
}

/* ── Overview tab — "Quick actions" rows (right col) ─────── */
.tcd-action-list[b-b1ylqoeys5] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tcd-action-row[b-b1ylqoeys5] {
    display: grid;
    grid-template-columns: 38px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 11px 14px;
    background: transparent;
    border: 1px solid var(--ec-border-soft);
    border-radius: 10px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}
.tcd-action-row:hover[b-b1ylqoeys5] {
    background: var(--ec-bg);
    border-color: var(--ec-border);
}
.tcd-action-icon[b-b1ylqoeys5] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent, var(--ec-blue)) 14%, transparent);
    color: var(--accent, var(--ec-blue));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.tcd-action-body[b-b1ylqoeys5] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.tcd-action-title[b-b1ylqoeys5] {
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-text);
    display: block;
}
.tcd-action-sub[b-b1ylqoeys5] {
    font-size: 11px;
    color: var(--ec-muted);
    display: block;
    margin-top: 2px;
}
.tcd-action-chev[b-b1ylqoeys5] { color: var(--ec-faint); font-size: 14px; }

/* ── Students tab — Class roles banner ──────────────────
   Mirrors prototype 36056-36085: one flex row with an amber star icon +
   "Class roles" label, then both role chips (always rendered, even when
   empty), then the purple "Manage roles" CTA when the homeroom teacher
   is viewing. Chips show role short + assigned student or "Not assigned
   yet". ─────────────────────────────────────────────────────────────── */
.tcd-roles[b-b1ylqoeys5] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 18px;
}
.tcd-roles-head[b-b1ylqoeys5] {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
}
.tcd-roles-icon[b-b1ylqoeys5] {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--ec-amber) 14%, transparent);
    color: var(--ec-amber);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}
.tcd-roles-text[b-b1ylqoeys5] { min-width: 0; }
.tcd-roles-title[b-b1ylqoeys5] { font-size: 13px; font-weight: 800; color: var(--ec-text); margin: 0; }
.tcd-roles-sub[b-b1ylqoeys5] { font-size: 10.5px; color: var(--ec-muted); margin: 1px 0 0; letter-spacing: 0.04em; }
.tcd-roles-slots[b-b1ylqoeys5] {
    flex: 1;
    min-width: 200px;
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
}
.tcd-roles-chip[b-b1ylqoeys5] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    background: color-mix(in srgb, var(--role-accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--role-accent) 30%, transparent);
    border-radius: 9px;
    min-width: 200px;
}
.tcd-roles-chip-icon[b-b1ylqoeys5] {
    color: var(--role-accent);
    display: inline-flex;
    font-size: 14px;
    flex-shrink: 0;
}
.tcd-roles-chip-text[b-b1ylqoeys5] { min-width: 0; }
.tcd-roles-chip-label[b-b1ylqoeys5] {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--role-accent);
    margin: 0;
}
.tcd-roles-chip-name[b-b1ylqoeys5] {
    font-size: 12px;
    font-weight: 700;
    color: var(--ec-text);
    margin: 1px 0 0;
}
.tcd-roles-chip-name--empty[b-b1ylqoeys5] {
    color: var(--ec-muted);
    font-style: italic;
}
.tcd-roles-manage[b-b1ylqoeys5] {
    padding: 8px 14px;
    background: var(--ec-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.04em;
    flex: 0 0 auto;
}
.tcd-roles-manage:hover[b-b1ylqoeys5] { filter: brightness(0.93); }
.tcd-roles-manage:disabled[b-b1ylqoeys5] { opacity: .5; cursor: not-allowed; }

/* ── Students tab — roster ──────────────────────────────
   The roster card is flush — head + rows reach the card edges, divided
   by a single bottom border between them and top borders between rows.
   Row layout matches prototype: auto / 1fr / 100px / 100px / 100px /
   auto (avatar / name+email / Avg / Absences / Parent-msg / chev). ─── */
.tcd-card--flush[b-b1ylqoeys5] { padding: 0; }
.tcd-card-head--padded[b-b1ylqoeys5] {
    padding: 12px 18px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--ec-border-soft);
}
.tcd-student-list[b-b1ylqoeys5] {
    display: flex;
    flex-direction: column;
}
.tcd-student-row[b-b1ylqoeys5] {
    display: grid;
    /* avatar · name (flex) · Avg · Absences · Parent · chevron.
       The name column's `minmax(0, 1fr)` absorbs all the leftover space
       so the stat triplet + chevron sit flush right against the card's
       padding. Breathing room between cells comes from column-gap (24px),
       not an extra spacer column — that earlier attempt left an empty
       gutter to the right of the chevron on wide screens. */
    grid-template-columns:
        auto                /* avatar */
        minmax(0, 1fr)      /* name + email — flexes */
        110px               /* Avg */
        110px               /* Absences */
        120px               /* Parent · Message */
        20px;               /* chevron column */
    column-gap: 24px;
    align-items: center;
    padding: 12px 22px;
    border-top: 1px solid var(--ec-border-soft);
    cursor: pointer;
    background: #fff;
}
.tcd-student-row:first-child[b-b1ylqoeys5] { border-top: none; }
.tcd-student-row:hover[b-b1ylqoeys5] { background: color-mix(in srgb, var(--ec-bg) 60%, transparent); }
@media (max-width: 1180px) {
    /* Tablet — tighter gaps, slightly narrower stat columns. */
    .tcd-student-row[b-b1ylqoeys5] {
        grid-template-columns: auto minmax(0, 1fr) 100px 100px 110px 18px;
        column-gap: 16px;
        padding: 10px 18px;
    }
}
@media (max-width: 760px) {
    .tcd-student-row[b-b1ylqoeys5] {
        grid-template-columns: auto minmax(0, 1fr) auto;
        column-gap: 12px;
    }
    .tcd-student-row .tcd-student-stat:not(.tcd-student-stat--msg)[b-b1ylqoeys5] { display: none; }
    .tcd-student-chev[b-b1ylqoeys5] { display: none; }
}
.tcd-student-avatar[b-b1ylqoeys5] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
}
.tcd-student-name-col[b-b1ylqoeys5] { min-width: 0; }
.tcd-student-namerow[b-b1ylqoeys5] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.tcd-student-row .tcd-student-name[b-b1ylqoeys5] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ec-text);
    margin: 0;
}
.tcd-student-role[b-b1ylqoeys5] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 800;
    color: var(--role-accent);
    background: color-mix(in srgb, var(--role-accent) 14%, transparent);
    padding: 2px 7px;
    border-radius: 5px;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.tcd-student-role i[b-b1ylqoeys5] { font-size: 10px; }
.tcd-pillchip[b-b1ylqoeys5] {
    display: inline-flex;
    align-items: center;
    font-size: 9px;
    font-weight: 800;
    padding: 3px 7px;
    border-radius: 5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.tcd-pillchip--warn[b-b1ylqoeys5] {
    background: color-mix(in srgb, var(--ec-amber) 14%, transparent);
    color: var(--ec-amber);
}
.tcd-pillchip--alert[b-b1ylqoeys5] {
    background: color-mix(in srgb, var(--ec-red) 14%, transparent);
    color: var(--ec-red);
}
.tcd-student-email[b-b1ylqoeys5] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 1px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.tcd-student-stat[b-b1ylqoeys5] { text-align: center; }
.tcd-student-stat-label[b-b1ylqoeys5] {
    font-size: 9px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}
.tcd-student-stat-value[b-b1ylqoeys5] {
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 1px 0 0;
    font-variant-numeric: tabular-nums;
}
.tcd-student-stat-value--warn[b-b1ylqoeys5] { color: var(--ec-red); }
.tcd-student-stat--msg[b-b1ylqoeys5] { text-align: center; }
.tcd-student-msg[b-b1ylqoeys5] {
    font-size: 11px;
    font-weight: 700;
    color: var(--ec-blue);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}
.tcd-student-msg:hover[b-b1ylqoeys5] { text-decoration: underline; }
.tcd-student-chev[b-b1ylqoeys5] { color: var(--ec-faint); font-size: 18px; }

/* ── Manage Roles modal ─────────────────────────────────
   Mirrors TWClassRolesModal (proto 36148-36300): centered card on a
   blurred backdrop, with a landing pane (both slots + ASSIGN/CHANGE/
   REMOVE) and a picker pane (search + filtered student list). The
   picker uses --role-accent so the current-student highlight + button
   colors track the role being managed. ─────────────────────────── */
/* Right-side slide-over (matches the documents pattern). */
.tcd-roles-backdrop[b-b1ylqoeys5] {
    position: fixed;
    inset: 0;
    background: rgba(13, 23, 51, 0.5);
    /* Same bump as .tcd-qg-backdrop — above the sticky topbar (1000) so
       the dim layer covers the chrome too, below SecurityModal (3000). */
    z-index: 1500;
    display: flex;
    justify-content: flex-end;
    animation: tcd-roles-fade-b-b1ylqoeys5 .15s ease;
}
@keyframes tcd-roles-fade-b-b1ylqoeys5 { from { opacity: 0; } to { opacity: 1; } }
.tcd-roles-modal[b-b1ylqoeys5] {
    width: min(560px, 96%);
    height: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: -12px 0 40px rgba(13, 23, 51, 0.16);
    animation: tcd-roles-slide-b-b1ylqoeys5 .22s ease-out;
}
@keyframes tcd-roles-slide-b-b1ylqoeys5 { from { transform: translateX(24px); opacity: .4; } to { transform: translateX(0); opacity: 1; } }
.tcd-roles-modal-head[b-b1ylqoeys5] {
    position: relative;
    padding: 18px 22px;
    border-bottom: 1px solid var(--ec-border);
    background: linear-gradient(135deg, color-mix(in srgb, var(--ec-purple) 6%, transparent), #fff);
    display: flex;
    align-items: center;
    gap: 11px;
}
.tcd-roles-modal-head-icon[b-b1ylqoeys5] {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--ec-purple) 14%, transparent);
    color: var(--ec-purple);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.tcd-roles-modal-head-text[b-b1ylqoeys5] { flex: 1; min-width: 0; }
.tcd-roles-modal-head-text h3[b-b1ylqoeys5] {
    font-size: 16px;
    font-weight: 800;
    color: var(--ec-text);
    letter-spacing: -0.01em;
    margin: 0;
}
.tcd-roles-modal-head-text p[b-b1ylqoeys5] {
    font-size: 12px;
    color: var(--ec-sub);
    margin: 2px 0 0;
}
.tcd-roles-modal-close[b-b1ylqoeys5] {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: #fff;
    border: 1px solid var(--ec-border);
    cursor: pointer;
    font-size: 18px;
    color: var(--ec-sub);
    font-family: inherit;
    line-height: 1;
}
.tcd-roles-modal-close:hover[b-b1ylqoeys5] { color: var(--ec-text); border-color: var(--ec-text); }
.tcd-roles-modal-body[b-b1ylqoeys5] {
    flex: 1;
    overflow-y: auto;
    padding: 18px 22px;
}
.tcd-roles-modal-banner[b-b1ylqoeys5] {
    padding: 9px 13px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 12px;
}
.tcd-roles-modal-banner--alert[b-b1ylqoeys5] {
    background: var(--ec-red-lt);
    color: var(--ec-red);
    border-left: 3px solid var(--ec-red);
}
.tcd-roles-modal-list[b-b1ylqoeys5] {
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.tcd-roles-modal-slot[b-b1ylqoeys5] {
    border: 1px solid var(--ec-border);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 13px;
    background: #fff;
}
.tcd-roles-modal-slot--filled[b-b1ylqoeys5] {
    background: color-mix(in srgb, var(--role-accent) 5%, transparent);
}
.tcd-roles-modal-slot-icon[b-b1ylqoeys5] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--role-accent) 14%, transparent);
    color: var(--role-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.tcd-roles-modal-slot-text[b-b1ylqoeys5] { flex: 1; min-width: 0; }
.tcd-roles-modal-slot-label[b-b1ylqoeys5] {
    font-size: 9.5px;
    font-weight: 800;
    color: var(--role-accent);
    letter-spacing: 0.08em;
    margin: 0;
}
.tcd-roles-modal-slot-stu[b-b1ylqoeys5] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 5px;
}
.tcd-roles-modal-slot-stu p[b-b1ylqoeys5] {
    font-size: 13px;
    font-weight: 700;
    color: var(--ec-text);
    margin: 0;
}
.tcd-roles-modal-slot-avatar[b-b1ylqoeys5] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    flex-shrink: 0;
}
.tcd-roles-modal-slot-empty[b-b1ylqoeys5] {
    font-size: 12.5px;
    color: var(--ec-muted);
    margin: 4px 0 0;
    font-style: italic;
}
.tcd-roles-modal-slot-actions[b-b1ylqoeys5] {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.tcd-roles-modal-btn[b-b1ylqoeys5] {
    border-radius: 7px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.04em;
    border: none;
}
.tcd-roles-modal-btn:disabled[b-b1ylqoeys5] { opacity: .55; cursor: not-allowed; }
.tcd-roles-modal-btn--ghost[b-b1ylqoeys5] {
    background: #fff;
    border: 1px solid var(--ec-border);
    color: var(--ec-red);
}
.tcd-roles-modal-btn--ghost:hover:not(:disabled)[b-b1ylqoeys5] { border-color: var(--ec-red); }
.tcd-roles-modal-btn--primary[b-b1ylqoeys5] {
    background: var(--role-accent);
    color: #fff;
}
.tcd-roles-modal-btn--primary:hover:not(:disabled)[b-b1ylqoeys5] {
    filter: brightness(0.93);
}
.tcd-roles-modal-foot[b-b1ylqoeys5] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 6px 0 0;
    line-height: 1.5;
    font-style: italic;
}
.tcd-roles-modal-picker[b-b1ylqoeys5] {
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.tcd-roles-modal-back[b-b1ylqoeys5] {
    align-self: flex-start;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    color: var(--ec-sub);
    font-family: inherit;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.tcd-roles-modal-back:hover[b-b1ylqoeys5] { color: var(--ec-text); }
.tcd-roles-modal-picker-head[b-b1ylqoeys5] {
    display: flex;
    align-items: center;
    gap: 9px;
}
.tcd-roles-modal-picker-head p[b-b1ylqoeys5] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.tcd-roles-modal-picker-icon[b-b1ylqoeys5] {
    color: var(--role-accent);
    font-size: 18px;
    display: inline-flex;
}
.tcd-roles-modal-search[b-b1ylqoeys5] {
    width: 100%;
    padding: 10px 13px;
    border: 1px solid var(--ec-border);
    border-radius: 10px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
}
.tcd-roles-modal-search:focus[b-b1ylqoeys5] { border-color: var(--ec-purple); }
.tcd-roles-modal-results[b-b1ylqoeys5] {
    border: 1px solid var(--ec-border);
    border-radius: 11px;
    overflow: hidden;
    max-height: 340px;
    overflow-y: auto;
}
.tcd-roles-modal-empty[b-b1ylqoeys5] {
    padding: 18px;
    font-size: 12.5px;
    color: var(--ec-muted);
    text-align: center;
    font-style: italic;
    margin: 0;
}
.tcd-roles-modal-result[b-b1ylqoeys5] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 14px;
    background: #fff;
    border: none;
    border-top: 1px solid var(--ec-border-soft);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}
.tcd-roles-modal-result:first-child[b-b1ylqoeys5] { border-top: none; }
.tcd-roles-modal-result:hover:not(:disabled)[b-b1ylqoeys5] {
    background: color-mix(in srgb, var(--role-accent) 6%, transparent);
}
.tcd-roles-modal-result:disabled[b-b1ylqoeys5] { opacity: .55; cursor: not-allowed; }
.tcd-roles-modal-result--current[b-b1ylqoeys5] {
    background: color-mix(in srgb, var(--role-accent) 10%, transparent);
}
.tcd-roles-modal-result-avatar[b-b1ylqoeys5] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    flex-shrink: 0;
}
.tcd-roles-modal-result-text[b-b1ylqoeys5] { flex: 1; min-width: 0; }
.tcd-roles-modal-result-text p[b-b1ylqoeys5] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ec-text);
    margin: 0;
}
.tcd-roles-modal-result-warn[b-b1ylqoeys5] {
    font-size: 10.5px !important;
    color: var(--ec-amber) !important;
    margin-top: 1px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
}
.tcd-roles-modal-result-current[b-b1ylqoeys5] {
    font-size: 10px;
    font-weight: 800;
    color: var(--role-accent);
    background: color-mix(in srgb, var(--role-accent) 18%, transparent);
    padding: 3px 8px;
    border-radius: 5px;
    letter-spacing: 0.06em;
}
.tcd-roles-modal-foot-bar[b-b1ylqoeys5] {
    padding: 12px 22px;
    border-top: 1px solid var(--ec-border);
    background: color-mix(in srgb, var(--ec-bg) 40%, #fff);
    display: flex;
    justify-content: flex-end;
}
.tcd-roles-modal-done[b-b1ylqoeys5] {
    background: var(--ec-text);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 18px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.04em;
}
.tcd-roles-modal-done:hover[b-b1ylqoeys5] { background: #000; }

/* ── Attendance tab v2 — Today's lesson scope + colored KPI tiles ── */
.tcd-att-head[b-b1ylqoeys5] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
    margin-bottom: 14px;
}
@media (max-width: 720px) {
    .tcd-att-head[b-b1ylqoeys5] { grid-template-columns: 1fr; }
}
.tcd-att-head-title[b-b1ylqoeys5] {
    font-size: 15px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.tcd-att-subject[b-b1ylqoeys5] {
    font-size: 9.5px;
    font-weight: 800;
    /* Active subject's accent — set as --active-subject on the .tcd-card
       wrapper from the page. Pill is a soft tint with the same color text. */
    background: color-mix(in srgb, var(--active-subject, var(--ec-blue)) 14%, transparent);
    color: var(--active-subject, var(--ec-blue));
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.08em;
}
.tcd-att-head-sub[b-b1ylqoeys5] {
    font-size: 12px;
    color: var(--ec-muted);
    margin: 5px 0 0;
}
.tcd-att-head-actions[b-b1ylqoeys5] {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Motivate-absences CTAs — amber urgent + quiet history variants. Same
   pair lives on /teacher/attendance under .tat-mark-* names; the class-
   detail page uses .tcd-att-* to keep the styling scoped here. */
.tcd-att-motivate[b-b1ylqoeys5] {
    padding: 8px 14px;
    border: none;
    border-radius: 9px;
    background: var(--ec-amber, #f59e0b);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--ec-amber, #f59e0b) 30%, transparent);
}
.tcd-att-motivate:hover[b-b1ylqoeys5] { filter: brightness(1.06); }
.tcd-att-history[b-b1ylqoeys5] {
    padding: 8px 14px;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    background: #fff;
    color: var(--ec-sub);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tcd-att-history:hover[b-b1ylqoeys5] {
    border-color: var(--ec-text);
    color: var(--ec-text);
}
.tcd-att-history-count[b-b1ylqoeys5] {
    font-size: 10.5px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--ec-border-soft);
    color: var(--ec-muted);
}
.tcd-att-history .bi[b-b1ylqoeys5] { color: var(--ec-green); font-size: 13px; }

/* ─────────────────────────────────────────────────────────────────────
   Inline motivator panels — homeroom-only. The amber "Absences to
   motivate" card + the white "Recently motivated · N" card sit BELOW
   the daily marking card on the Attendance tab. Faithful port of
   proto 36488-36554.
   ───────────────────────────────────────────────────────────────────── */
.tcd-mot[b-b1ylqoeys5] {
    margin-top: 14px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--ec-amber, #f59e0b) 12%, #fff),
        #fff);
    border: 1.5px solid color-mix(in srgb, var(--ec-amber, #f59e0b) 35%, transparent);
    border-radius: 14px;
    overflow: hidden;
}
.tcd-mot-head[b-b1ylqoeys5] {
    padding: 14px 18px;
    border-bottom: 1px solid var(--ec-border-soft);
    display: flex;
    align-items: center;
    gap: 11px;
}
.tcd-mot-head-icon[b-b1ylqoeys5] {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: var(--ec-amber, #f59e0b);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tcd-mot-head-icon .bi[b-b1ylqoeys5] { font-size: 15px; }
.tcd-mot-head-text[b-b1ylqoeys5] { flex: 1; min-width: 0; }
.tcd-mot-head-text h3[b-b1ylqoeys5] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.tcd-mot-head-pill[b-b1ylqoeys5] {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 2px 7px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--ec-blue) 14%, transparent);
    color: var(--ec-blue);
}
.tcd-mot-head-text p[b-b1ylqoeys5] {
    font-size: 11.5px;
    color: var(--ec-muted);
    margin: 3px 0 0;
}
.tcd-mot-bulk[b-b1ylqoeys5] {
    background: var(--ec-amber, #f59e0b);
    border: none;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 11.5px;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--ec-amber, #f59e0b) 30%, transparent);
}
.tcd-mot-bulk:hover[b-b1ylqoeys5] { filter: brightness(1.06); }

.tcd-mot-row[b-b1ylqoeys5] {
    display: grid;
    grid-template-columns: 18px auto 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 11px 18px;
    border-top: 1px solid var(--ec-border-soft);
}
.tcd-mot-row:first-of-type[b-b1ylqoeys5] { border-top: none; }
.tcd-mot-row input[type="checkbox"][b-b1ylqoeys5] {
    width: 16px;
    height: 16px;
    accent-color: var(--ec-amber, #f59e0b);
    cursor: pointer;
}
.tcd-mot-row-av[b-b1ylqoeys5] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
}
.tcd-mot-row-text[b-b1ylqoeys5] { min-width: 0; }
.tcd-mot-row-name[b-b1ylqoeys5] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ec-text);
    margin: 0;
}
.tcd-mot-row-meta[b-b1ylqoeys5] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 2px 0 0;
}
.tcd-mot-row-meta b[b-b1ylqoeys5] { color: var(--ec-text); font-weight: 700; }
.tcd-mot-row-sub[b-b1ylqoeys5] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 2px 0 0;
}
.tcd-mot-row-pill[b-b1ylqoeys5] {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--ec-red-lt, color-mix(in srgb, var(--ec-red, #dc2626) 14%, #fff));
    color: var(--ec-red, #dc2626);
}
.tcd-mot-row-cta[b-b1ylqoeys5] {
    background: var(--ec-amber, #f59e0b);
    border: none;
    border-radius: 7px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
}
.tcd-mot-row-cta:hover[b-b1ylqoeys5] { filter: brightness(1.06); }

/* "Recently motivated · N" — quiet white card listing last 4 motivated rows. */
.tcd-mot-recent[b-b1ylqoeys5] {
    margin-top: 14px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    overflow: hidden;
}
.tcd-mot-recent-head[b-b1ylqoeys5] {
    padding: 12px 18px;
    border-bottom: 1px solid var(--ec-border-soft);
}
.tcd-mot-recent-head h3[b-b1ylqoeys5] {
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.tcd-mot-recent-row[b-b1ylqoeys5] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 18px;
    border-top: 1px solid var(--ec-border-soft);
}
.tcd-mot-recent-row:first-of-type[b-b1ylqoeys5] { border-top: none; }
.tcd-mot-recent-av[b-b1ylqoeys5] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10.5px;
    font-weight: 800;
    flex-shrink: 0;
}
.tcd-mot-recent-text[b-b1ylqoeys5] { min-width: 0; }
.tcd-mot-recent-name[b-b1ylqoeys5] {
    font-size: 12px;
    font-weight: 700;
    color: var(--ec-text);
    margin: 0;
}
.tcd-mot-recent-meta[b-b1ylqoeys5] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 2px 0 0;
}
.tcd-mot-recent-ok[b-b1ylqoeys5] {
    color: var(--ec-green, #16a34a);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.tcd-mot-recent-date[b-b1ylqoeys5] {
    font-size: 10.5px;
    color: var(--ec-muted);
    font-weight: 600;
    margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────
   MotivateAbsenceModal — centered modal matching proto 36583-36650.
   "HOMEROOM TEACHER ACTION" eyebrow + Motivate-N title +
   AFFECTED ABSENCES list + reason chips + note + green banner +
   Cancel/Motivate footer.
   ───────────────────────────────────────────────────────────────────── */
/* Right-side slide-over (matches the documents pattern). */
.tcd-mot-modal-backdrop[b-b1ylqoeys5] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .5);
    z-index: 2000;
    display: flex;
    justify-content: flex-end;
    animation: tcd-mot-fade-b-b1ylqoeys5 .15s ease;
}
@keyframes tcd-mot-fade-b-b1ylqoeys5 { from { opacity: 0; } to { opacity: 1; } }
.tcd-mot-modal[b-b1ylqoeys5] {
    background: #fff;
    width: min(540px, 96%);
    height: 100%;
    box-shadow: -12px 0 40px rgba(13, 23, 51, .16);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: tcd-mot-slide-b-b1ylqoeys5 .22s ease-out;
}
@keyframes tcd-mot-slide-b-b1ylqoeys5 { from { transform: translateX(24px); opacity: .4; } to { transform: translateX(0); opacity: 1; } }
.tcd-mot-modal-head[b-b1ylqoeys5] {
    padding: 18px 24px;
    border-bottom: 1px solid var(--ec-border-soft);
    display: flex;
    align-items: center;
    gap: 11px;
}
.tcd-mot-modal-head-icon[b-b1ylqoeys5] {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--ec-amber, #f59e0b);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tcd-mot-modal-head-icon .bi[b-b1ylqoeys5] { font-size: 18px; }
.tcd-mot-modal-head-text[b-b1ylqoeys5] { flex: 1; min-width: 0; }
.tcd-mot-modal-eyebrow[b-b1ylqoeys5] {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ec-amber, #f59e0b);
    margin: 0;
}
.tcd-mot-modal-head-text h2[b-b1ylqoeys5] {
    font-size: 18px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 3px 0 0;
}

.tcd-mot-modal-affected[b-b1ylqoeys5] {
    padding: 14px 24px;
    border-bottom: 1px solid var(--ec-border-soft);
    background: color-mix(in srgb, var(--ec-bg) 40%, #fff);
}
.tcd-mot-modal-affected-list[b-b1ylqoeys5] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 140px;
    overflow-y: auto;
    margin-top: 6px;
}
.tcd-mot-modal-affected-row[b-b1ylqoeys5] {
    display: flex;
    align-items: center;
    gap: 9px;
}
.tcd-mot-modal-affected-av[b-b1ylqoeys5] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    flex-shrink: 0;
}
.tcd-mot-modal-affected-row p[b-b1ylqoeys5] {
    font-size: 11.5px;
    color: var(--ec-sub);
    margin: 0;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tcd-mot-modal-affected-row p b[b-b1ylqoeys5] { color: var(--ec-text); font-weight: 700; }

.tcd-mot-modal-body[b-b1ylqoeys5] {
    padding: 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 13px;
}
.tcd-mot-modal-label[b-b1ylqoeys5] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}
.tcd-mot-modal-label span[b-b1ylqoeys5] {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}
.tcd-mot-modal-chips[b-b1ylqoeys5] {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.tcd-mot-modal-chip[b-b1ylqoeys5] {
    background: #fff;
    color: var(--ec-sub);
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    padding: 6px 11px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}
.tcd-mot-modal-chip--on[b-b1ylqoeys5] {
    background: var(--ec-amber, #f59e0b);
    color: #fff;
    border-color: var(--ec-amber, #f59e0b);
}
.tcd-mot-modal-note[b-b1ylqoeys5] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    min-height: 70px;
    resize: vertical;
    box-sizing: border-box;
}
.tcd-mot-modal-banner[b-b1ylqoeys5] {
    padding: 10px 12px;
    background: var(--ec-green-lt, color-mix(in srgb, var(--ec-green, #16a34a) 12%, #fff));
    border: 1px solid color-mix(in srgb, var(--ec-green, #16a34a) 40%, transparent);
    border-radius: 9px;
    display: flex;
    gap: 9px;
    align-items: flex-start;
}
.tcd-mot-modal-banner .bi[b-b1ylqoeys5] {
    color: var(--ec-green, #16a34a);
    font-size: 16px;
    line-height: 1.4;
    flex-shrink: 0;
}
.tcd-mot-modal-banner p[b-b1ylqoeys5] {
    font-size: 11.5px;
    color: var(--ec-text);
    line-height: 1.55;
    margin: 0;
}
.tcd-mot-modal-banner b[b-b1ylqoeys5] { color: var(--ec-text); font-weight: 700; }

.tcd-mot-modal-foot[b-b1ylqoeys5] {
    padding: 12px 24px;
    border-top: 1px solid var(--ec-border-soft);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.tcd-mot-modal-cancel[b-b1ylqoeys5] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
}
.tcd-mot-modal-save[b-b1ylqoeys5] {
    background: var(--ec-amber, #f59e0b);
    border: none;
    border-radius: 9px;
    padding: 8px 16px;
    font-size: 12.5px;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.tcd-mot-modal-save:disabled[b-b1ylqoeys5] {
    background: var(--ec-border-soft);
    color: var(--ec-muted);
    cursor: not-allowed;
}

.tcd-att-reset[b-b1ylqoeys5] {
    padding: 8px 14px;
    background: #fff;
    color: var(--ec-sub);
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tcd-att-reset .bi[b-b1ylqoeys5] { font-size: 13px; line-height: 1; }
.tcd-att-reset:disabled[b-b1ylqoeys5] { opacity: .5; cursor: not-allowed; }
.tcd-att-reset:hover:not(:disabled)[b-b1ylqoeys5] { border-color: var(--ec-text); color: var(--ec-text); }
.tcd-att-save[b-b1ylqoeys5] {
    padding: 8px 16px;
    /* Save button tracks the active subject's color — set as --active-subject
       on the .tcd-card wrapper. Matches the prototype's
       `background: activeSubjectColor` on the save button (proto 36391). */
    background: var(--active-subject, var(--ec-blue));
    color: #fff;
    border: none;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: filter .12s ease;
}
.tcd-att-save:hover:not(:disabled)[b-b1ylqoeys5] { filter: brightness(1.06); }
.tcd-att-save:disabled[b-b1ylqoeys5] { opacity: .5; cursor: not-allowed; }

/* ── MARK FOR subject chip row — between the header and the KPI tiles.
   Only renders when the teacher teaches >1 subject in this class.
   Each chip carries its subject's accent (--subj-color set inline)
   and an optional "marked / total" counter pill. */
.tcd-att-subjbar[b-b1ylqoeys5] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 14px;
    margin-bottom: 14px;
    background: var(--ec-bg);
    border: 1px solid var(--ec-border);
    border-radius: 11px;
}
.tcd-att-subjbar-label[b-b1ylqoeys5] {
    font-size: 10px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.tcd-att-subjbar-chips[b-b1ylqoeys5] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.tcd-att-subjchip[b-b1ylqoeys5] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--ec-border);
    background: #fff;
    color: var(--ec-sub);
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.tcd-att-subjchip:hover:not(.tcd-att-subjchip--on)[b-b1ylqoeys5] {
    border-color: var(--subj-color);
    color: var(--ec-text);
}
.tcd-att-subjchip--on[b-b1ylqoeys5] {
    background: var(--subj-color);
    border-color: var(--subj-color);
    color: #fff;
}
.tcd-att-subjchip-dot[b-b1ylqoeys5] {
    width: 8px; height: 8px;
    border-radius: 2px;
    background: var(--subj-color);
    flex-shrink: 0;
}
.tcd-att-subjchip--on .tcd-att-subjchip-dot[b-b1ylqoeys5] { background: #fff; }
.tcd-att-subjchip-label[b-b1ylqoeys5] { font-weight: 800; }
.tcd-att-subjchip-time[b-b1ylqoeys5] {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--ec-muted);
    font-variant-numeric: tabular-nums;
}
.tcd-att-subjchip--on .tcd-att-subjchip-time[b-b1ylqoeys5] { color: rgba(255, 255, 255, .78); }
.tcd-att-subjchip-count[b-b1ylqoeys5] {
    font-size: 10px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--ec-green-lt);
    color: var(--ec-green);
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}
.tcd-att-subjchip--on .tcd-att-subjchip-count[b-b1ylqoeys5] {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

.tcd-att-kpis[b-b1ylqoeys5] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.tcd-att-kpi[b-b1ylqoeys5] {
    padding: 16px 18px;
    border-radius: 11px;
    text-align: center;
}
.tcd-att-kpi-value[b-b1ylqoeys5] {
    font-size: 26px;
    font-weight: 800;
    margin: 0;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.tcd-att-kpi-label[b-b1ylqoeys5] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.1em;
    margin: 8px 0 0;
}
/* Each KPI tile gets a 1px border in its tone — matches the prototype's
   `border: 1px solid ${color}30` ring around the soft tint. */
.tcd-att-kpi--ok[b-b1ylqoeys5]    { background: var(--ec-green-lt); border: 1px solid color-mix(in srgb, var(--ec-green) 30%, transparent); }
.tcd-att-kpi--ok    .tcd-att-kpi-value[b-b1ylqoeys5] { color: var(--ec-green); }
.tcd-att-kpi--ok    .tcd-att-kpi-label[b-b1ylqoeys5] { color: var(--ec-green); }
.tcd-att-kpi--alert[b-b1ylqoeys5] { background: var(--ec-red-lt); border: 1px solid color-mix(in srgb, var(--ec-red) 30%, transparent); }
.tcd-att-kpi--alert .tcd-att-kpi-value[b-b1ylqoeys5] { color: var(--ec-red); }
.tcd-att-kpi--alert .tcd-att-kpi-label[b-b1ylqoeys5] { color: var(--ec-red); }
.tcd-att-kpi--warn[b-b1ylqoeys5]  { background: var(--ec-amber-lt); border: 1px solid color-mix(in srgb, var(--ec-amber) 30%, transparent); }
.tcd-att-kpi--warn  .tcd-att-kpi-value[b-b1ylqoeys5] { color: var(--ec-amber); }
.tcd-att-kpi--warn  .tcd-att-kpi-label[b-b1ylqoeys5] { color: var(--ec-amber); }
.tcd-att-kpi--info[b-b1ylqoeys5]  { background: var(--ec-blue-lt); border: 1px solid color-mix(in srgb, var(--ec-blue) 30%, transparent); }
.tcd-att-kpi--info  .tcd-att-kpi-value[b-b1ylqoeys5] { color: var(--ec-blue); }
.tcd-att-kpi--info  .tcd-att-kpi-label[b-b1ylqoeys5] { color: var(--ec-blue); }

.tcd-att-banner[b-b1ylqoeys5] {
    padding: 9px 13px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 10px;
}
.tcd-att-banner--ok[b-b1ylqoeys5]    { background: var(--ec-green-lt); color: var(--ec-green); border-left: 3px solid var(--ec-green); }
.tcd-att-banner--warn[b-b1ylqoeys5]  { background: var(--ec-amber-lt); color: var(--ec-amber); border-left: 3px solid var(--ec-amber); }
.tcd-att-banner--alert[b-b1ylqoeys5] { background: var(--ec-red-lt);   color: var(--ec-red);   border-left: 3px solid var(--ec-red); }

.tcd-att-rows[b-b1ylqoeys5] {
    display: flex;
    flex-direction: column;
}
.tcd-att-stu-row[b-b1ylqoeys5] {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 10px 4px;
    border-top: 1px solid var(--ec-border-soft);
}
.tcd-att-stu-row:first-child[b-b1ylqoeys5] { border-top: none; }
.tcd-att-stu-avatar[b-b1ylqoeys5] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--ec-blue);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 800;
}
.tcd-att-stu-name[b-b1ylqoeys5] {
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.tcd-att-pills[b-b1ylqoeys5] {
    display: inline-flex;
    gap: 4px;
}
/* Idle pill — neutral background, muted grey letter. Per the prototype's
   segmented-pill group: only the SELECTED pill carries the tone color;
   the rest are flat so the eye locks onto the active one (proto 36442-36450).
   The wrap is the tinted "track"; individual idle pills are transparent. */
.tcd-att-pills[b-b1ylqoeys5] {
    background: var(--ec-bg);
    padding: 3px;
    border-radius: 8px;
}
.tcd-att-pill[b-b1ylqoeys5] {
    width: 30px;
    height: 26px;
    padding: 0;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--ec-muted);
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", monospace;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .12s ease, color .12s ease;
}
.tcd-att-pill:hover:not(.tcd-att-pill--active)[b-b1ylqoeys5] { color: var(--ec-text); }
.tcd-att-pill--ok.tcd-att-pill--active[b-b1ylqoeys5]    { background: var(--ec-green); color: #fff; }
.tcd-att-pill--alert.tcd-att-pill--active[b-b1ylqoeys5] { background: var(--ec-red);   color: #fff; }
.tcd-att-pill--warn.tcd-att-pill--active[b-b1ylqoeys5]  { background: var(--ec-amber); color: #fff; }
.tcd-att-pill--info.tcd-att-pill--active[b-b1ylqoeys5]  { background: var(--ec-blue);  color: #fff; }

/* /Components/Pages/Teacher/TeacherClassesPage.razor.rz.scp.css */
/* TeacherClassesPage — scoped CSS. Faithful port of TWClasses
   (prototype lines 35801-35897). Per-card accent flows through --accent
   (ClassDto.Color). The page title comes from PageContext so this file
   has no header block of its own. */

.tcl-page[b-aqkea7d72q] {
    padding: 0;
    background: var(--ec-bg);
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Grid ─────────────────────────────────────────────────── */
.tcl-grid[b-aqkea7d72q] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
@media (max-width: 900px) {
    .tcl-grid[b-aqkea7d72q] { grid-template-columns: 1fr; }
}

/* ── Card ─────────────────────────────────────────────────── */
.tcl-card[b-aqkea7d72q] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.tcl-card:hover[b-aqkea7d72q] {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent, var(--ec-blue)) 35%, var(--ec-border));
    box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--accent, var(--ec-blue)) 45%, transparent);
}
.tcl-card:focus-visible[b-aqkea7d72q] {
    outline: 2px solid var(--accent, var(--ec-blue));
    outline-offset: 2px;
}

/* ── Header band ─────────────────────────────────────────── */
/* 135° gradient from accent to accent×0.8. The right column carries the
   large student count; the left column carries name + HOMEROOM pill +
   subtitle (grade + subjects). */
.tcl-card-band[b-aqkea7d72q] {
    padding: 14px 18px;
    color: #fff;
    background: linear-gradient(135deg,
        var(--accent, var(--ec-blue)) 0%,
        color-mix(in srgb, var(--accent, var(--ec-blue)) 80%, #000) 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.tcl-card-band-main[b-aqkea7d72q] {
    flex: 1 1 auto;
    min-width: 0;
}
.tcl-card-band-row[b-aqkea7d72q] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 3px;
}
.tcl-card-name[b-aqkea7d72q] {
    font-size: 17px;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.005em;
    color: #fff;
}
/* White pill with accent text — exactly per prototype line 35841. */
.tcl-card-pill[b-aqkea7d72q] {
    background: #fff;
    color: var(--accent, var(--ec-blue));
    font-size: 9px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 5px;
    letter-spacing: 0.08em;
    line-height: 1.4;
}
.tcl-card-band-sub[b-aqkea7d72q] {
    font-size: 11.5px;
    margin: 0;
    color: rgba(255, 255, 255, .85);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tcl-card-band-count[b-aqkea7d72q] {
    text-align: right;
    flex-shrink: 0;
}
.tcl-card-band-count-value[b-aqkea7d72q] {
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    margin: 0;
    color: #fff;
}
.tcl-card-band-count-label[b-aqkea7d72q] {
    font-size: 10px;
    color: rgba(255, 255, 255, .78);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 3px 0 0;
    font-weight: 700;
}

/* ── Stats row ───────────────────────────────────────────── */
.tcl-card-stats[b-aqkea7d72q] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--ec-border-soft);
}
/* KG variant has 3 columns. */
.tcl-card-stats:has(> .tcl-card-stat:nth-child(3):last-child)[b-aqkea7d72q] {
    grid-template-columns: repeat(3, 1fr);
}
.tcl-card-stat[b-aqkea7d72q] {
    padding: 12px 10px;
    text-align: center;
    background: #fff;
    border-right: 1px solid var(--ec-border-soft);
}
.tcl-card-stat:last-child[b-aqkea7d72q] { border-right: none; }
.tcl-card-stat-label[b-aqkea7d72q] {
    font-size: 9.5px;
    font-weight: 800;
    color: var(--ec-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0;
}
.tcl-card-stat-value[b-aqkea7d72q] {
    font-size: 15px;
    font-weight: 800;
    color: var(--ec-text);
    line-height: 1.1;
    margin: 2px 0 0;
}
.tcl-card-stat-value--sm[b-aqkea7d72q] {
    font-size: 13px;
    margin-top: 3px;
}
.tcl-card-stat--alert .tcl-card-stat-value[b-aqkea7d72q] {
    color: var(--ec-amber, #f59e0b);
}

/* ── Avatar footer ───────────────────────────────────────── */
.tcl-card-foot[b-aqkea7d72q] {
    padding: 12px 18px;
    background: #fff;
    border-top: 1px solid var(--ec-border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.tcl-card-avstack[b-aqkea7d72q] {
    display: flex;
    align-items: center;
}
.tcl-card-avatar[b-aqkea7d72q] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: #fff;
    border: 2px solid #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    flex-shrink: 0;
}
.tcl-card-avatar--more[b-aqkea7d72q] {
    background: var(--ec-border-soft);
    color: var(--ec-sub);
    font-size: 9.5px;
}
.tcl-card-chev[b-aqkea7d72q] {
    color: var(--ec-faint);
    font-size: 22px;
    line-height: 1;
    font-weight: 400;
}

/* ── Empty state ──────────────────────────────────────────── */
.tcl-empty[b-aqkea7d72q] {
    background: #fff;
    border: 1px dashed var(--ec-border);
    border-radius: 14px;
    padding: 48px 28px;
    text-align: center;
}
.tcl-empty-icon[b-aqkea7d72q] {
    font-size: 38px;
    color: var(--ec-faint);
    margin-bottom: 10px;
    display: block;
}
.tcl-empty-title[b-aqkea7d72q] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.tcl-empty-sub[b-aqkea7d72q] {
    font-size: 12px;
    color: var(--ec-muted);
    margin: 5px auto 0;
    max-width: 380px;
    line-height: 1.5;
}
/* /Components/Pages/Teacher/TeacherDashboard.razor.rz.scp.css */
/* TeacherDashboard — scoped CSS. Port of TWHome (proto 35511-35775).

   Layout sections:
     · .thp-greet       — small eyebrow + name block above the hero
     · .thp-hero        — gradient live-period card with the IN THE ROOM panel
     · .thp-grid        — 1.4fr / 1fr two-column grid: queue + schedule strip
     · .thp-classes     — My classes preview row (3 cards inside a .thp-card)

   Card / common chrome:
     · .thp-card        — white panel with border + radius
     · .thp-card-head   — header bar with title + meta + optional tag/link
*/

.thp-page[b-tqmmio2lrd] {
    padding: 0;
    background: var(--ec-bg);
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Greeting strip ────────────────────────────────────────────────── */
.thp-greet[b-tqmmio2lrd] { margin-bottom: 2px; }
.thp-greet-eyebrow[b-tqmmio2lrd] {
    font-size: 10.5px; font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0;
}
.thp-greet-title[b-tqmmio2lrd] {
    font-size: 22px; font-weight: 800;
    color: var(--ec-text);
    letter-spacing: -0.015em;
    margin: 4px 0 0;
}

/* ── Hero (live period) ──────────────────────────────────────────────
   Gradient bg with two decorative rings clipped at the edges; 2-col
   inner layout (main + IN THE ROOM panel). */
.thp-hero[b-tqmmio2lrd] {
    position: relative;
    background: linear-gradient(135deg,
        var(--accent, var(--ec-blue)) 0%,
        var(--accent-dk, #2944a0) 65%,
        var(--accent-brand, #0d1733) 130%);
    border-radius: 16px;
    padding: 22px 26px;
    color: #fff;
    overflow: clip;
}
.thp-hero-ring[b-tqmmio2lrd] {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .07);
    pointer-events: none;
}
.thp-hero-ring-1[b-tqmmio2lrd] { top: -60px; right: -50px; width: 240px; height: 240px; }
.thp-hero-ring-2[b-tqmmio2lrd] { bottom: -80px; right: 60px; width: 180px; height: 180px; }

.thp-hero-row[b-tqmmio2lrd] {
    position: relative;
    display: flex;
    gap: 18px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.thp-hero-main[b-tqmmio2lrd] { flex: 1 1 380px; min-width: 0; }

/* NOW pill + "X min left" line — sits above the title */
.thp-hero-pillrow[b-tqmmio2lrd] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.thp-hero-pill[b-tqmmio2lrd] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, .18);
    border-radius: 18px;
    padding: 4px 11px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
}
.thp-hero-dot[b-tqmmio2lrd] {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 4px rgba(52, 211, 153, .25);
}
.thp-hero-remaining[b-tqmmio2lrd] {
    font-size: 11.5px; font-weight: 600;
    color: rgba(255, 255, 255, .75);
    margin: 0;
}
.thp-hero-eyebrow-dim[b-tqmmio2lrd] {
    font-size: 11px; font-weight: 800;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, .75);
}

.thp-hero-title[b-tqmmio2lrd] {
    font-size: 26px; font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin: 0 0 6px;
}
.thp-hero-sub[b-tqmmio2lrd] {
    font-size: 13.5px;
    color: rgba(255, 255, 255, .85);
    line-height: 1.5;
    margin: 0;
}
.thp-hero-sub i[b-tqmmio2lrd] { font-size: 12px; }
.thp-hero-sub b[b-tqmmio2lrd] { color: #fff; }
.thp-hero-sep[b-tqmmio2lrd] {
    margin: 0 6px;
    color: rgba(255, 255, 255, .5);
}

.thp-hero-progress[b-tqmmio2lrd] {
    margin-top: 14px;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .18);
    overflow: hidden;
}
.thp-hero-progress-fill[b-tqmmio2lrd] {
    height: 100%;
    background: #fff;
    border-radius: 3px;
    transition: width .3s;
}

.thp-hero-actions[b-tqmmio2lrd] {
    display: flex;
    gap: 7px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.thp-hero-btn[b-tqmmio2lrd] {
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 9px;
    padding: 9px 14px;
    color: #fff;
    font-size: 12.5px; font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.thp-hero-btn:hover[b-tqmmio2lrd] { background: rgba(255, 255, 255, .24); }
.thp-hero-btn--solid[b-tqmmio2lrd] {
    background: #fff;
    border-color: #fff;
    color: var(--accent, var(--ec-blue));
    font-weight: 800;
}
.thp-hero-btn--solid:hover[b-tqmmio2lrd] { filter: brightness(.96); background: #fff; }

/* IN THE ROOM panel — translucent card on the right of the hero */
.thp-hero-room[b-tqmmio2lrd] {
    flex: 0 1 240px;
    min-width: 200px;
    background: rgba(255, 255, 255, .13);
    border-radius: 12px;
    padding: 13px 14px;
    backdrop-filter: blur(4px);
}
.thp-hero-room-label[b-tqmmio2lrd] {
    font-size: 10px; font-weight: 800;
    color: rgba(255, 255, 255, .7);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 8px;
}
.thp-hero-room-avatars[b-tqmmio2lrd] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 9px;
}
.thp-hero-room-avatar[b-tqmmio2lrd] {
    width: 30px; height: 30px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px; font-weight: 800;
    border: 2px solid rgba(255, 255, 255, .3);
    box-sizing: border-box;
}
.thp-hero-room-avatar--more[b-tqmmio2lrd] {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}
.thp-hero-room-meta[b-tqmmio2lrd] {
    font-size: 11px;
    color: rgba(255, 255, 255, .78);
    line-height: 1.4;
    margin: 0;
}

/* ── Two-column grid (queue + schedule) ─────────────────────────────── */
.thp-grid[b-tqmmio2lrd] {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 16px;
    align-items: stretch; /* both columns equal height (esp. when empty) */
}
@media (max-width: 1100px) {
    .thp-grid[b-tqmmio2lrd] { grid-template-columns: 1fr; }
    .thp-hero-row[b-tqmmio2lrd] { flex-direction: column; }
    .thp-hero-room[b-tqmmio2lrd] { flex: 1 1 100%; }
}

/* ── Card chrome (shared by queue, schedule, classes preview) ──────── */
.thp-card[b-tqmmio2lrd] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column; /* lets the empty state fill + centre in equal-height cards */
}
.thp-card-head[b-tqmmio2lrd] {
    padding: 14px 18px;
    border-bottom: 1px solid var(--ec-border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.thp-card-title[b-tqmmio2lrd] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    letter-spacing: -0.005em;
    margin: 0;
}
.thp-card-sub[b-tqmmio2lrd] {
    font-size: 11.5px;
    color: var(--ec-muted);
    margin: 2px 0 0;
}
.thp-card-tag[b-tqmmio2lrd] {
    font-size: 9.5px;
    font-weight: 800;
    color: var(--ec-muted);
    background: var(--ec-border-soft);
    padding: 3px 8px;
    border-radius: 5px;
    letter-spacing: 0.08em;
}
.thp-card-link[b-tqmmio2lrd] {
    font-size: 11.5px;
    font-weight: 800;
    /* Prototype renders "Week view →" / "See all →" in the facility accent
       (proto 41685, 41724). The page sets --accent (pink) for KG; school
       leaves it unset and falls back to ec-blue. */
    color: var(--accent, var(--ec-blue));
    text-decoration: none;
}
.thp-card-link:hover[b-tqmmio2lrd] { text-decoration: underline; }

/* ── Action queue rows ─────────────────────────────────────────────── */
.thp-queue[b-tqmmio2lrd] {
    display: flex;
    flex-direction: column;
}
.thp-queue-row[b-tqmmio2lrd] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 18px;
    background: #fff;
    border: none;
    border-top: 1px solid var(--ec-border-soft);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background .12s ease;
}
.thp-queue-row:first-child[b-tqmmio2lrd] { border-top: none; }
.thp-queue-row:hover[b-tqmmio2lrd] { background: color-mix(in srgb, var(--ec-bg) 60%, transparent); }
.thp-queue-icon[b-tqmmio2lrd] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.thp-queue-body[b-tqmmio2lrd] { flex: 1; min-width: 0; }
.thp-queue-titlerow[b-tqmmio2lrd] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 2px;
    flex-wrap: wrap;
}
.thp-queue-title[b-tqmmio2lrd] {
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.thp-queue-urgent[b-tqmmio2lrd] {
    font-size: 9px;
    font-weight: 800;
    background: var(--ec-red);
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.06em;
}
.thp-queue-hr[b-tqmmio2lrd] {
    font-size: 9px;
    font-weight: 800;
    background: color-mix(in srgb, var(--ec-amber) 16%, transparent);
    color: var(--ec-amber);
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.06em;
}
.thp-queue-sub[b-tqmmio2lrd] {
    font-size: 11.5px;
    color: var(--ec-muted);
    margin: 0;
}
.thp-queue-count-col[b-tqmmio2lrd] {
    text-align: right;
    flex-shrink: 0;
}
.thp-queue-count[b-tqmmio2lrd] {
    font-size: 18px;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
    margin: 0;
}
.thp-queue-unit[b-tqmmio2lrd] {
    font-size: 9.5px;
    color: var(--ec-muted);
    margin: 3px 0 0;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
}
.thp-queue-chev[b-tqmmio2lrd] {
    color: var(--ec-faint);
    font-size: 18px;
    margin-left: 6px;
}

/* ── Schedule strip rows ──────────────────────────────────────────── */
.thp-sched[b-tqmmio2lrd] {
    padding: 4px 0;
}
.thp-sched-row[b-tqmmio2lrd] {
    width: 100%;
    display: grid;
    grid-template-columns: 70px 4px 1fr;
    gap: 10px;
    padding: 10px 18px;
    background: transparent;
    border: none;
    border-top: 1px solid var(--ec-border-soft);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    align-items: center;
    transition: background .12s ease;
}
.thp-sched-row:first-child[b-tqmmio2lrd] { border-top: none; }
.thp-sched-row:hover[b-tqmmio2lrd] { background: color-mix(in srgb, var(--ec-bg) 60%, transparent); }
.thp-sched-row--past[b-tqmmio2lrd] { opacity: 0.5; }
.thp-sched-time[b-tqmmio2lrd] { line-height: 1.2; }
.thp-sched-time-start[b-tqmmio2lrd] {
    font-size: 12px;
    font-weight: 800;
    color: var(--ec-text);
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", monospace;
    margin: 0;
}
.thp-sched-row--past .thp-sched-time-start[b-tqmmio2lrd] { color: var(--ec-muted); }
.thp-sched-row--now .thp-sched-time-start[b-tqmmio2lrd] { color: var(--accent); }
.thp-sched-time-end[b-tqmmio2lrd] {
    font-size: 10.5px;
    color: var(--ec-muted);
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", monospace;
    margin: 0;
}
.thp-sched-bar[b-tqmmio2lrd] {
    border-radius: 2px;
    align-self: stretch;
    min-height: 28px;
}
.thp-sched-body[b-tqmmio2lrd] { min-width: 0; }
.thp-sched-titlerow[b-tqmmio2lrd] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 1px;
    flex-wrap: wrap;
}
.thp-sched-title[b-tqmmio2lrd] {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.thp-sched-badge[b-tqmmio2lrd] {
    font-size: 9px;
    font-weight: 800;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.06em;
}
.thp-sched-meta[b-tqmmio2lrd] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 0;
}

/* ── Empty states ─────────────────────────────────────────────────── */
.thp-empty[b-tqmmio2lrd] {
    padding: 30px 22px;
    text-align: center;
    flex: 1; /* fill the card so both columns' empties sit centred at equal height */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.thp-empty-icon[b-tqmmio2lrd] {
    font-size: 26px;
    color: var(--ec-faint);
    display: block;
    margin-bottom: 8px;
}
.thp-empty-title[b-tqmmio2lrd] {
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.thp-empty-sub[b-tqmmio2lrd] {
    font-size: 11.5px;
    color: var(--ec-muted);
    margin: 4px 0 0;
}

/* ── My classes preview (inside a .thp-card) ──────────────────────── */
.thp-classes[b-tqmmio2lrd] {
    padding: 12px 14px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
@media (max-width: 900px) {
    .thp-classes[b-tqmmio2lrd] { grid-template-columns: 1fr; }
}
.thp-class-card[b-tqmmio2lrd] {
    border: 1px solid var(--ec-border);
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: box-shadow .15s ease, transform .15s ease;
}
.thp-class-card:hover[b-tqmmio2lrd] {
    box-shadow: 0 6px 18px -8px rgba(13, 23, 51, .14);
    transform: translateY(-1px);
}
.thp-class-head[b-tqmmio2lrd] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.thp-class-avatar[b-tqmmio2lrd] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}
.thp-class-headbody[b-tqmmio2lrd] { flex: 1; min-width: 0; }
.thp-class-name[b-tqmmio2lrd] {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--ec-text);
    line-height: 1.1;
    margin: 0;
}
.thp-class-meta[b-tqmmio2lrd] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 2px 0 0;
}
.thp-class-hr[b-tqmmio2lrd] {
    font-size: 9px;
    font-weight: 800;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.06em;
}
.thp-class-subjects[b-tqmmio2lrd] {
    font-size: 11px;
    color: var(--ec-sub);
    font-weight: 600;
    margin: 6px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* /Components/Pages/Teacher/TeacherGradebookPage.razor.rz.scp.css */
/* TeacherGradebookPage — page-level shell + class-tab chip row only.
   All gradebook UI styling lives in ClassGradebook.razor.css (the
   shared component the chip row swaps into below). */

.tgp[b-a9ojoa0qrp] {
    padding: 0;
    background: var(--ec-bg);
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tgp-loading[b-a9ojoa0qrp] {
    display: flex;
    justify-content: center;
    padding: 48px 0;
}

/* ── Class chip tabs ─────────────────────────────────────────────── */
.tgp-tabs[b-a9ojoa0qrp] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Class tab — same shape as the prototype TWGradebook chips:
   - Background flips to the class color when active (filled chip).
   - HR pill on the right when the teacher is the class's homeroom.
   - Subject-list short on the far right.
   --tab is set inline on each chip with that class's color. */
.tgp-tab[b-a9ojoa0qrp] {
    background: #fff;
    color: var(--ec-sub);
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    padding: 7px 13px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.tgp-tab:hover[b-a9ojoa0qrp] {
    border-color: var(--tab, var(--ec-blue));
    color: var(--tab, var(--ec-blue));
}
.tgp-tab-name[b-a9ojoa0qrp] {
    font-size: 12.5px;
    font-weight: 700;
}
.tgp-tab-hr[b-a9ojoa0qrp] {
    font-size: 9px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 4px;
    letter-spacing: 0.06em;
    background: color-mix(in srgb, var(--tab, var(--ec-blue)) 14%, transparent);
    color: var(--tab, var(--ec-blue));
}
.tgp-tab-subs[b-a9ojoa0qrp] {
    font-size: 10px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 5px;
    background: var(--ec-border-soft);
    color: var(--ec-muted);
}
.tgp-tab--on[b-a9ojoa0qrp] {
    background: var(--tab, var(--ec-blue));
    color: #fff;
    border-color: var(--tab, var(--ec-blue));
}
.tgp-tab--on:hover[b-a9ojoa0qrp] { color: #fff; }
.tgp-tab--on .tgp-tab-hr[b-a9ojoa0qrp],
.tgp-tab--on .tgp-tab-subs[b-a9ojoa0qrp] {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

/* ── Empty state ──────────────────────────────────────────────────── */
.tgp-empty[b-a9ojoa0qrp] {
    background: #fff;
    border: 1px dashed var(--ec-border);
    border-radius: 14px;
    padding: 48px 28px;
    text-align: center;
}
.tgp-empty-icon[b-a9ojoa0qrp] {
    font-size: 38px;
    color: var(--ec-faint);
    margin-bottom: 10px;
    display: block;
}
.tgp-empty-title[b-a9ojoa0qrp] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.tgp-empty-sub[b-a9ojoa0qrp] {
    font-size: 12px;
    color: var(--ec-muted);
    margin: 5px auto 0;
    max-width: 380px;
    line-height: 1.5;
}
/* /Components/Pages/Teacher/TeacherHomeworkPage.razor.rz.scp.css */
/* TeacherHomeworkPage — thin page shell only. All homework UI styling
   lives in ClassHomework.razor.css (the shared component this page
   delegates to). */

.thp[b-2yxrsz2abk] {
    padding: 0;
    background: var(--ec-bg);
    min-height: 100%;
}

.thp-empty[b-2yxrsz2abk] {
    background: #fff;
    border: 1px dashed var(--ec-border);
    border-radius: 14px;
    padding: 48px 28px;
    text-align: center;
}
.thp-empty-title[b-2yxrsz2abk] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
/* /Components/Pages/Teacher/TeacherKgAttendance.razor.rz.scp.css */
/* Kindergarten daily care log — pixel-faithful port of the prototype's
   TWKgCareLogInline + TWKgCareEditSheet (W design tokens, literal hex). */

.tkg[b-3u56kgfbzu] { display: flex; flex-direction: column; gap: 14px; }

/* ── Empty / loader states ───────────────────────────────────────────── */
.tkg-empty[b-3u56kgfbzu] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 48px 20px; text-align: center; }
.tkg-empty-icon[b-3u56kgfbzu] { font-size: 30px; color: #b9c1d4; }
.tkg-empty-title[b-3u56kgfbzu] { font-size: 14px; font-weight: 800; color: #1a2540; }
.tkg-empty-sub[b-3u56kgfbzu] { font-size: 12px; color: #8b95ad; }

/* ── Context bar — date stepper + mode toggle ────────────────────────── */
.tkg-context[b-3u56kgfbzu] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: #fff; border: 1px solid #e7eaf3; border-radius: 14px; padding: 10px 14px; }
.tkg-context--past[b-3u56kgfbzu] { background: #fffdf5; border-color: #fde8c4; }
.tkg-context-spacer[b-3u56kgfbzu] { flex: 1; }
.tkg-datestep[b-3u56kgfbzu] { display: flex; align-items: center; gap: 8px; }
.tkg-datestep-nav[b-3u56kgfbzu] { width: 32px; height: 32px; border-radius: 8px; border: 1px solid #e7eaf3; background: #fff; color: #5b6b8c; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.tkg-datestep-nav:disabled[b-3u56kgfbzu] { opacity: .4; cursor: not-allowed; }
.tkg-datestep-pill[b-3u56kgfbzu] { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 10px; border: 1px solid #e7eaf3; background: #f7f8fc; color: #1a2540; font-weight: 700; font-size: 13px; cursor: pointer; }
.tkg-datestep-pill--today[b-3u56kgfbzu] { background: #ecfdf3; border-color: #b7f0cb; color: #15803d; }
.tkg-datestep-pill--past[b-3u56kgfbzu] { background: #fff7ed; border-color: #fed7aa; color: #c2410c; }
.tkg-datestep-label[b-3u56kgfbzu] { font-weight: 800; }
.tkg-datestep-tag[b-3u56kgfbzu] { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.tkg-datestep-input[b-3u56kgfbzu] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.tkg-datestep-jump[b-3u56kgfbzu] { border: none; background: #eef0f6; color: #3b5fc0; font-weight: 800; font-size: 11px; border-radius: 8px; padding: 7px 11px; cursor: pointer; }
/* Segmented Care / Programs toggle — light container, white active pill with a
   tinted inset ring (pink for Care, purple for Programs). Matches prototype. */
.tkg-modetoggle[b-3u56kgfbzu] { display: flex; gap: 4px; background: #f5f6fa; border: 1.5px solid #e7eaf3; border-radius: 11px; padding: 4px; box-shadow: 0 1px 2px rgba(13,23,51,.04); }
.tkg-modechip[b-3u56kgfbzu] { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 8px; border: none; background: transparent; color: #8b95ad; font-weight: 800; font-size: 12.5px; cursor: pointer; font-family: inherit; }
.tkg-modechip i[b-3u56kgfbzu] { font-size: 13px; }
.tkg-modechip-count[b-3u56kgfbzu] { font-size: 10px; font-weight: 800; color: #b3bacb; padding: 1px 6px; border-radius: 4px; letter-spacing: .02em; }
.tkg-modechip--care.tkg-modechip--active[b-3u56kgfbzu] { background: #fff; color: #1a2540; box-shadow: 0 1px 4px rgba(13,23,51,.10), inset 0 0 0 1px rgba(214,54,119,.19); }
.tkg-modechip--care.tkg-modechip--active i[b-3u56kgfbzu] { color: #d63677; }
.tkg-modechip--care.tkg-modechip--active .tkg-modechip-count[b-3u56kgfbzu] { color: #d63677; background: rgba(214,54,119,.12); }
.tkg-modechip--program.tkg-modechip--active[b-3u56kgfbzu] { background: #fff; color: #1a2540; box-shadow: 0 1px 4px rgba(13,23,51,.10), inset 0 0 0 1px rgba(124,58,237,.19); }
.tkg-modechip--program.tkg-modechip--active i[b-3u56kgfbzu] { color: #7c3aed; }
.tkg-modechip--program.tkg-modechip--active .tkg-modechip-count[b-3u56kgfbzu] { color: #7c3aed; background: rgba(124,58,237,.12); }

/* Horizontal group picker — mirrors the Meals / Day rhythm pill rows. */
.tkg-group-pills[b-3u56kgfbzu] { display: flex; gap: 7px; flex-wrap: wrap; }
.tkg-group-pill[b-3u56kgfbzu] { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; background: #fff; color: #5b6b8c; border: 1px solid #e7eaf3; border-radius: 9px; font-size: 12px; font-weight: 800; font-family: inherit; cursor: pointer; }
.tkg-group-pill:hover[b-3u56kgfbzu] { border-color: var(--accent, #d63677); }
.tkg-group-swatch[b-3u56kgfbzu] { width: 8px; height: 8px; border-radius: 2px; background: var(--accent, #d63677); flex-shrink: 0; }
.tkg-group-pill--active[b-3u56kgfbzu] { background: var(--accent, #d63677); color: #fff; border-color: var(--accent, #d63677); }
.tkg-group-pill--active .tkg-group-swatch[b-3u56kgfbzu] { background: #fff; }

/* ── KPI strip ───────────────────────────────────────────────────────── */
.tkg-kpis[b-3u56kgfbzu] { display: grid; grid-template-columns: 1.4fr 1.6fr 1fr 1fr 1.2fr; gap: 10px; }
@media (max-width: 1280px) { .tkg-kpis[b-3u56kgfbzu] { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .tkg-kpis[b-3u56kgfbzu] { grid-template-columns: repeat(2, 1fr); } }
.tkg-kpi[b-3u56kgfbzu] { background: #fff; border: 1px solid #e7eaf3; border-radius: 14px; padding: 12px 14px; min-width: 0; }
/* Combined Late | Excused tile — two halves split by a thin divider (proto 46961). */
.tkg-kpi--split[b-3u56kgfbzu] { display: flex; align-items: center; gap: 14px; }
.tkg-kpi-half[b-3u56kgfbzu] { flex: 1; min-width: 0; }
.tkg-kpi-divider[b-3u56kgfbzu] { width: 1px; height: 30px; background: #eef0f6; flex-shrink: 0; }
.tkg-kpi--split .tkg-kpi-value[b-3u56kgfbzu] { font-size: 18px; margin-top: 3px; }
.tkg-kpi-label[b-3u56kgfbzu] { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8b95ad; }
.tkg-kpi-value[b-3u56kgfbzu] { font-size: 22px; font-weight: 800; color: #1a2540; line-height: 1.05; margin-top: 4px; }
.tkg-kpi-value--mono[b-3u56kgfbzu] { font-family: ui-monospace, "SF Mono", monospace; }
.tkg-kpi-row[b-3u56kgfbzu] { display: flex; align-items: center; gap: 6px; }
.tkg-kpi--marking[b-3u56kgfbzu] { border-left: 3px solid var(--accent); }
.tkg-kpi-marking-head[b-3u56kgfbzu] { display: flex; align-items: center; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.tkg-kpi-marking-name[b-3u56kgfbzu] { font-size: 14px; font-weight: 800; color: #1a2540; }
.tkg-kpi-marking-kg[b-3u56kgfbzu] { font-size: 9px; font-weight: 800; letter-spacing: .06em; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, #fff); padding: 1px 6px; border-radius: 4px; }
.tkg-kpi-marking-sub[b-3u56kgfbzu] { font-size: 11.5px; color: #8b95ad; margin-top: 4px; }
.tkg-kpi-marked-head[b-3u56kgfbzu] { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tkg-kpi-marked-tag[b-3u56kgfbzu] { font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 5px; }
.tkg-kpi-marked-tag--warn[b-3u56kgfbzu] { background: #fef3c7; color: #b45309; }
.tkg-kpi-marked-tag--ok[b-3u56kgfbzu] { background: #dcfce7; color: #15803d; }
.tkg-kpi-marked-total[b-3u56kgfbzu] { font-size: 13px; color: #b9c1d4; font-weight: 700; }
.tkg-kpi-marked-bar[b-3u56kgfbzu] { height: 5px; border-radius: 3px; background: #eef0f6; margin-top: 8px; overflow: hidden; }
.tkg-kpi-marked-fill[b-3u56kgfbzu] { height: 100%; border-radius: 3px; background: var(--accent); }
.tkg-kpi-icon-ok[b-3u56kgfbzu] { color: #16a34a; } .tkg-kpi--ok .tkg-kpi-value[b-3u56kgfbzu] { color: #16a34a; }
.tkg-kpi-icon-alert[b-3u56kgfbzu] { color: #dc2626; font-size: 12px; } .tkg-kpi--alert .tkg-kpi-value[b-3u56kgfbzu] { color: #dc2626; }
.tkg-kpi-icon-warn[b-3u56kgfbzu] { color: #d97706; } .tkg-kpi-icon-info[b-3u56kgfbzu] { color: #3b5fc0; }

/* ── Layout ──────────────────────────────────────────────────────────── */
.tkg-layout[b-3u56kgfbzu] { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
@media (max-width: 1100px) { .tkg-layout[b-3u56kgfbzu] { grid-template-columns: 1fr; } }
.tkg-main[b-3u56kgfbzu] { min-width: 0; }

/* ── Care log card ───────────────────────────────────────────────────── */
.tkg-card[b-3u56kgfbzu] { background: #fff; border: 1px solid #e7eaf3; border-radius: 14px; overflow: hidden; }
.tkg-card-head[b-3u56kgfbzu] { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, #fff), #fff); border-bottom: 1px solid #eef0f6; }
.tkg-card-title[b-3u56kgfbzu] { font-size: 14px; font-weight: 800; color: #1a2540; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; }
.tkg-card-kg[b-3u56kgfbzu] { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; background: color-mix(in srgb, var(--accent) 14%, #fff); color: var(--accent); padding: 2px 7px; border-radius: 4px; }
.tkg-card-sub[b-3u56kgfbzu] { font-size: 12px; color: #8b95ad; margin-top: 3px; }
.tkg-pills[b-3u56kgfbzu] { display: flex; gap: 8px; flex-wrap: wrap; }
.tkg-pill[b-3u56kgfbzu] { border-radius: 10px; padding: 8px 12px; min-width: 96px; }
.tkg-pill-label[b-3u56kgfbzu] { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.tkg-pill-value[b-3u56kgfbzu] { font-size: 18px; font-weight: 800; line-height: 1.1; margin-top: 3px; }
.tkg-pill--green[b-3u56kgfbzu] { background: rgba(22,163,74,.08); border: 1px solid rgba(22,163,74,.19); }
.tkg-pill--green .tkg-pill-label[b-3u56kgfbzu], .tkg-pill--green .tkg-pill-value[b-3u56kgfbzu] { color: #16a34a; }
.tkg-pill--blue[b-3u56kgfbzu] { background: rgba(59,95,192,.08); border: 1px solid rgba(59,95,192,.19); }
.tkg-pill--blue .tkg-pill-label[b-3u56kgfbzu], .tkg-pill--blue .tkg-pill-value[b-3u56kgfbzu] { color: #3b5fc0; }
.tkg-pill--purple[b-3u56kgfbzu] { background: rgba(124,58,237,.08); border: 1px solid rgba(124,58,237,.19); }
.tkg-pill--purple .tkg-pill-label[b-3u56kgfbzu], .tkg-pill--purple .tkg-pill-value[b-3u56kgfbzu] { color: #7c3aed; }

/* ── Grid table ──────────────────────────────────────────────────────── */
.tkg-grid-head[b-3u56kgfbzu], .tkg-row[b-3u56kgfbzu] { display: grid; grid-template-columns: minmax(180px, 1.4fr) 1fr 1.2fr 1fr auto; gap: 10px; padding: 10px 16px; align-items: center; }
.tkg-grid-head[b-3u56kgfbzu] { background: #f7f8fc; border-bottom: 1px solid #eef0f6; }
.tkg-col[b-3u56kgfbzu] { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8b95ad; }
.tkg-col--in[b-3u56kgfbzu] { color: #16a34a; } .tkg-col--nap[b-3u56kgfbzu] { color: #3b5fc0; } .tkg-col--out[b-3u56kgfbzu] { color: #7c3aed; }
.tkg-row[b-3u56kgfbzu] { border-top: 1px solid #eef0f6; }
.tkg-row:first-of-type[b-3u56kgfbzu] { border-top: none; }
.tkg-row--absent[b-3u56kgfbzu] { opacity: .55; }
.tkg-row-student[b-3u56kgfbzu] { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tkg-avatar[b-3u56kgfbzu] { width: 34px; height: 34px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 800; flex-shrink: 0; }
.tkg-row-text[b-3u56kgfbzu] { min-width: 0; }
.tkg-row-name[b-3u56kgfbzu] { font-size: 12.5px; font-weight: 700; color: #1a2540; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tkg-row-allergy[b-3u56kgfbzu] { font-size: 10px; color: #d97706; font-weight: 700; margin-top: 1px; }

.tkg-cell[b-3u56kgfbzu] { text-align: left; border-radius: 9px; padding: 8px 10px; cursor: pointer; font-family: inherit; min-width: 0; border: 1px dashed #e7eaf3; background: #f7f8fc; }
.tkg-cell:disabled[b-3u56kgfbzu] { cursor: not-allowed; }
.tkg-cell-add[b-3u56kgfbzu] { font-size: 11.5px; color: #8b95ad; font-weight: 700; }
.tkg-cell-time[b-3u56kgfbzu] { font-size: 13px; font-weight: 800; line-height: 1.1; font-family: ui-monospace, "SF Mono", monospace; }
.tkg-cell-time--green[b-3u56kgfbzu] { color: #16a34a; } .tkg-cell-time--blue[b-3u56kgfbzu] { color: #3b5fc0; } .tkg-cell-time--purple[b-3u56kgfbzu] { color: #7c3aed; }
.tkg-cell-strong[b-3u56kgfbzu] { font-size: 12.5px; font-weight: 800; line-height: 1.1; }
.tkg-cell-strong--blue[b-3u56kgfbzu] { color: #3b5fc0; } .tkg-cell-strong--muted[b-3u56kgfbzu] { color: #8b95ad; }
.tkg-cell-by[b-3u56kgfbzu] { font-size: 10.5px; color: #5b6b8c; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tkg-mono[b-3u56kgfbzu] { font-family: ui-monospace, "SF Mono", monospace; }
.tkg-cell--in-on[b-3u56kgfbzu] { background: #dcfce7; border-color: #bbf7d0; }
.tkg-cell--nap-on[b-3u56kgfbzu] { background: rgba(59,95,192,.08); border-color: rgba(59,95,192,.4); }
.tkg-cell--nap-done[b-3u56kgfbzu] { background: rgba(59,95,192,.05); border-color: #bfdbfe; }
.tkg-cell--out-on[b-3u56kgfbzu] { background: rgba(124,58,237,.07); border-color: rgba(124,58,237,.33); }

.tkg-absent[b-3u56kgfbzu] { justify-self: end; background: #fff; color: #8b95ad; border: 1px solid #e7eaf3; border-radius: 7px; padding: 6px 10px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; cursor: pointer; font-family: inherit; white-space: nowrap; }
.tkg-absent--on[b-3u56kgfbzu] { background: #dc2626; color: #fff; border-color: #dc2626; }

/* ── Right rail ──────────────────────────────────────────────────────── */
.tkg-rail-wrap[b-3u56kgfbzu] { display: flex; flex-direction: column; gap: 14px; }
.tkg-rail[b-3u56kgfbzu] { background: #fff; border: 1px solid #e7eaf3; border-radius: 14px; overflow: hidden; }
.tkg-rail-head[b-3u56kgfbzu] { padding: 12px 18px; border-bottom: 1px solid #eef0f6; }
.tkg-rail-title[b-3u56kgfbzu] { font-size: 13px; font-weight: 800; color: #1a2540; }
.tkg-rail-sub[b-3u56kgfbzu] { font-size: 11px; color: #8b95ad; margin-top: 2px; }
.tkg-rail-list[b-3u56kgfbzu] { display: flex; flex-direction: column; }
.tkg-group[b-3u56kgfbzu] { display: flex; align-items: center; gap: 11px; padding: 11px 18px; background: transparent; border: none; border-top: 1px solid #eef0f6; cursor: pointer; font-family: inherit; text-align: left; width: 100%; }
.tkg-group:first-child[b-3u56kgfbzu] { border-top: none; }
.tkg-group--active[b-3u56kgfbzu] { background: color-mix(in srgb, var(--accent) 8%, #fff); }
.tkg-group-bar[b-3u56kgfbzu] { width: 4px; height: 38px; border-radius: 2px; background: var(--accent); flex-shrink: 0; }
.tkg-group-body[b-3u56kgfbzu] { flex: 1; min-width: 0; }
.tkg-group-top[b-3u56kgfbzu] { display: flex; align-items: center; gap: 6px; margin-bottom: 1px; flex-wrap: wrap; }
.tkg-group-name[b-3u56kgfbzu] { font-size: 12px; font-weight: 800; color: #1a2540; }
.tkg-group-hr[b-3u56kgfbzu] { font-size: 9px; font-weight: 800; letter-spacing: .06em; color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, #fff); padding: 1px 6px; border-radius: 4px; }
.tkg-group-meta[b-3u56kgfbzu] { font-size: 11px; color: #8b95ad; }
.tkg-group-check[b-3u56kgfbzu] { color: var(--accent); font-size: 14px; }

.tkg-history[b-3u56kgfbzu] { background: #fff; border: 1px solid #e7eaf3; border-radius: 14px; overflow: hidden; }
.tkg-history-head[b-3u56kgfbzu] { padding: 12px 18px; border-bottom: 1px solid #eef0f6; }
.tkg-history-title[b-3u56kgfbzu] { font-size: 13px; font-weight: 800; color: #1a2540; }
.tkg-history-bars[b-3u56kgfbzu] { padding: 14px 18px; display: flex; gap: 6px; }
.tkg-history-col[b-3u56kgfbzu] { flex: 1; text-align: center; }
.tkg-history-day[b-3u56kgfbzu] { font-size: 9px; font-weight: 800; letter-spacing: .06em; color: #8b95ad; }
.tkg-history-num[b-3u56kgfbzu] { font-size: 10px; color: #8b95ad; font-weight: 600; margin-top: 2px; }
.tkg-history-col--today .tkg-history-num[b-3u56kgfbzu] { color: #d63677; font-weight: 800; }
.tkg-history-bar[b-3u56kgfbzu] { height: 42px; margin-top: 4px; border-radius: 6px; }
.tkg-history-bar--empty[b-3u56kgfbzu] { background: #eef0f6; }
.tkg-history-bar--ok[b-3u56kgfbzu] { background: rgba(22,163,74,.3); }
.tkg-history-bar--warn[b-3u56kgfbzu] { background: rgba(217,119,6,.3); }
.tkg-history-bar--alert[b-3u56kgfbzu] { background: rgba(220,38,38,.3); }
.tkg-history-col--today .tkg-history-bar[b-3u56kgfbzu] { outline: 2px solid #d63677; outline-offset: -2px; }
.tkg-history-pct[b-3u56kgfbzu] { font-size: 10px; font-weight: 700; color: #1a2540; margin-top: 3px; }

/* ── Slide-over editor ───────────────────────────────────────────────── */
.tkg-scrim[b-3u56kgfbzu] { position: fixed; inset: 0; background: rgba(15,23,42,.42); backdrop-filter: blur(2px); display: flex; justify-content: flex-end; z-index: 1090; }
.tkg-sheet[b-3u56kgfbzu] { width: min(440px, 92%); height: 100%; background: #fff; box-shadow: -12px 0 40px rgba(15,23,42,.18); overflow-y: auto; display: flex; flex-direction: column; }
.tkg-sheet-head[b-3u56kgfbzu] { padding: 18px 22px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, #fff), #fff); border-bottom: 1px solid #eef0f6; display: flex; align-items: center; gap: 12px; }
.tkg-sheet-avatar[b-3u56kgfbzu] { width: 42px; height: 42px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; flex-shrink: 0; }
.tkg-sheet-head-text[b-3u56kgfbzu] { flex: 1; min-width: 0; }
.tkg-sheet-eyebrow[b-3u56kgfbzu] { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.tkg-sheet-name[b-3u56kgfbzu] { font-size: 16px; font-weight: 800; color: #1a2540; margin-top: 2px; }
.tkg-sheet-close[b-3u56kgfbzu] { width: 32px; height: 32px; border-radius: 8px; border: 1px solid #e7eaf3; background: #fff; color: #8b95ad; cursor: pointer; }
.tkg-sheet-body[b-3u56kgfbzu] { padding: 22px; display: flex; flex-direction: column; gap: 18px; flex: 1; }
.tkg-field[b-3u56kgfbzu] { display: flex; flex-direction: column; }
.tkg-field-grid[b-3u56kgfbzu] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tkg-label[b-3u56kgfbzu] { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8b95ad; }
.tkg-field-row[b-3u56kgfbzu] { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.tkg-input[b-3u56kgfbzu] { flex: 1; min-width: 0; border: 1px solid #e7eaf3; border-radius: 9px; padding: 10px 12px; font-size: 14px; font-family: inherit; font-weight: 700; color: #1a2540; box-sizing: border-box; }
.tkg-input--full[b-3u56kgfbzu] { width: 100%; margin-top: 6px; font-weight: 400; font-size: 13px; }
.tkg-now[b-3u56kgfbzu] { border: none; border-radius: 9px; padding: 10px 14px; font-size: 12px; font-weight: 800; color: #fff; cursor: pointer; font-family: inherit; flex-shrink: 0; }
.tkg-now--accent[b-3u56kgfbzu] { background: var(--accent); }
.tkg-now--blue[b-3u56kgfbzu] { background: #3b5fc0; padding: 10px 12px; font-size: 11px; }
.tkg-help[b-3u56kgfbzu] { font-size: 10.5px; color: #8b95ad; margin-top: 5px; }
.tkg-duration[b-3u56kgfbzu] { font-size: 11.5px; color: #8b95ad; }
.tkg-duration b[b-3u56kgfbzu] { color: #1a2540; }
.tkg-chips[b-3u56kgfbzu] { display: flex; gap: 5px; margin-top: 6px; flex-wrap: wrap; }
.tkg-chip[b-3u56kgfbzu] { background: #fff; color: #5b6b8c; border: 1px solid #e7eaf3; border-radius: 8px; padding: 7px 12px; font-size: 11.5px; font-weight: 700; cursor: pointer; font-family: inherit; }
.tkg-chip--on[b-3u56kgfbzu] { background: #3b5fc0; color: #fff; border-color: #3b5fc0; }
.tkg-textarea[b-3u56kgfbzu] { width: 100%; border: 1px solid #e7eaf3; border-radius: 9px; padding: 10px 12px; font-size: 13px; font-family: inherit; margin-top: 6px; box-sizing: border-box; resize: vertical; }
.tkg-sheet-foot[b-3u56kgfbzu] { padding: 14px 22px; border-top: 1px solid #eef0f6; background: #f7f8fc; display: flex; gap: 8px; justify-content: space-between; align-items: center; }
.tkg-foot-right[b-3u56kgfbzu] { display: flex; gap: 7px; }
.tkg-btn-clear[b-3u56kgfbzu] { background: #fff; border: 1px solid #e7eaf3; border-radius: 9px; padding: 9px 14px; font-size: 12px; font-weight: 700; color: #dc2626; cursor: pointer; font-family: inherit; }
.tkg-btn-cancel[b-3u56kgfbzu] { background: #fff; border: 1px solid #e7eaf3; border-radius: 9px; padding: 9px 14px; font-size: 12px; font-weight: 700; color: #5b6b8c; cursor: pointer; font-family: inherit; }
.tkg-btn-save[b-3u56kgfbzu] { background: var(--accent); border: none; border-radius: 9px; padding: 9px 18px; font-size: 13px; font-weight: 800; color: #fff; cursor: pointer; font-family: inherit; }
/* /Components/Pages/Teacher/TeacherMealsPage.razor.rz.scp.css */
/* TeacherMealsPage — scoped CSS. Mirrors TWMeals (proto 38278-38340).
   Outer wrapper + KG group selector now come from the shared standard
   (<WebPage> + <WebSegmentedControl>) — see WebApp/CLAUDE.md. */

/* ── KG classes strip ─────────────────────────────────── */
.tml-classes-strip[b-lo28eu91dh] {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
}
.tml-class-chip[b-lo28eu91dh] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    background: #fff;
    color: var(--ec-text);
    border: 1px solid var(--ec-border);
    border-left: 4px solid var(--accent, var(--ec-blue));
    border-radius: 10px;
    font-family: inherit;
    cursor: pointer;
}
.tml-class-chip:hover[b-lo28eu91dh] {
    border-color: var(--accent, var(--ec-blue));
    background: color-mix(in srgb, var(--accent, var(--ec-blue)) 6%, #fff);
}
.tml-class-chip-name[b-lo28eu91dh] {
    font-size: 13px;
    font-weight: 800;
}
.tml-class-chip-count[b-lo28eu91dh] {
    font-size: 11px;
    color: var(--ec-muted);
    font-weight: 600;
}
.tml-class-chip-arrow[b-lo28eu91dh] {
    color: var(--accent, var(--ec-blue));
    font-size: 13px;
}

/* ── Menu card ────────────────────────────────────────── */
.tml-card[b-lo28eu91dh] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    overflow: hidden;
}
.tml-card-head[b-lo28eu91dh] {
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--ec-border-soft);
}
.tml-card-title[b-lo28eu91dh] {
    font-size: 17px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
    letter-spacing: -0.01em;
}
.tml-card-sub[b-lo28eu91dh] {
    font-size: 12px;
    color: var(--ec-muted);
    margin: 4px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.tml-card-sep[b-lo28eu91dh] { color: var(--ec-faint); }

/* ── Day chips ────────────────────────────────────────── */
.tml-day-chips[b-lo28eu91dh] {
    display: flex;
    gap: 4px;
    padding: 12px 16px;
    background: var(--ec-bg);
    border-bottom: 1px solid var(--ec-border-soft);
    flex-wrap: wrap;
}
.tml-day-chip[b-lo28eu91dh] {
    padding: 7px 13px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.tml-day-chip--active[b-lo28eu91dh] {
    background: var(--ec-blue);
    color: #fff;
    border-color: var(--ec-blue);
}
.tml-day-today[b-lo28eu91dh] {
    color: var(--ec-amber);
    font-weight: 800;
    margin-left: 2px;
}

/* ── Meal sections ────────────────────────────────────── */
.tml-meal[b-lo28eu91dh] {
    padding: 14px 20px 16px;
    border-bottom: 1px solid var(--ec-border-soft);
}
.tml-meal:last-child[b-lo28eu91dh] { border-bottom: none; }
.tml-meal-eyebrow[b-lo28eu91dh] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 9px;
}
.tml-meal-list[b-lo28eu91dh] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 9px;
}

/* Item card */
.tml-item[b-lo28eu91dh] {
    background: var(--ec-bg);
    border-radius: 10px;
    padding: 11px 13px;
}
.tml-item-head[b-lo28eu91dh] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.tml-item-name[b-lo28eu91dh] {
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.tml-item-flags[b-lo28eu91dh] {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.tml-flag[b-lo28eu91dh] {
    font-size: 9px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.06em;
}
.tml-flag--vegan[b-lo28eu91dh]      { background: var(--ec-green-lt); color: var(--ec-green); }
.tml-flag--vegetarian[b-lo28eu91dh] { background: var(--ec-teal-lt); color: var(--ec-teal); }
.tml-flag--cal[b-lo28eu91dh]        { background: var(--ec-border-soft); color: var(--ec-muted); }
.tml-item-desc[b-lo28eu91dh] {
    font-size: 11.5px;
    color: var(--ec-sub);
    margin: 5px 0 0;
    line-height: 1.45;
}
.tml-item-allergens[b-lo28eu91dh] {
    font-size: 10.5px;
    color: var(--ec-amber);
    margin: 6px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 700;
}

/* ── Empty states ─────────────────────────────────────── */
.tml-empty[b-lo28eu91dh] {
    background: #fff;
    border: 1px dashed var(--ec-border);
    border-radius: 14px;
    padding: 48px 28px;
    text-align: center;
}
.tml-empty--inset[b-lo28eu91dh] {
    background: var(--ec-bg);
    margin: 14px;
    padding: 24px 16px;
}
.tml-empty-icon[b-lo28eu91dh] {
    font-size: 38px;
    color: var(--ec-faint);
    margin-bottom: 10px;
    display: block;
}
.tml-empty-title[b-lo28eu91dh] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.tml-empty-sub[b-lo28eu91dh] {
    font-size: 12px;
    color: var(--ec-muted);
    margin: 5px auto 0;
    max-width: 380px;
}
/* /Components/Pages/Teacher/TeacherProfile.razor.rz.scp.css */
/* TeacherProfile — scoped CSS. Mirrors PWProfile (proto 7823-7952).
   Shape kept aligned with ParentProfile.razor.css so the two roles
   share a visual language; the .tp-* prefix is its own scope so
   teacher-specific tweaks (HR pill color, "My classes" tile shape)
   stay isolated from the parent page. */

.tp-page[b-56lu8cdvq5] { padding: 0; background: var(--ec-bg); min-height: 100%; }

/* ── Hero (purple → pink gradient) ─────────────────────────────────── */
.tp-hero[b-56lu8cdvq5] {
    position: relative;
    background: linear-gradient(120deg, var(--ec-purple) 0%, #6b21a8 60%, var(--ec-pink) 130%);
    border-radius: 16px;
    padding: 24px 26px;
    color: #fff;
    margin-bottom: 18px;
    overflow: clip;
}
.tp-hero-ring[b-56lu8cdvq5] {
    position: absolute; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.07);
    pointer-events: none;
}
.tp-hero-ring-1[b-56lu8cdvq5] { top: -60px; right: -50px; width: 240px; height: 240px; }
.tp-hero-ring-2[b-56lu8cdvq5] { bottom: -80px; right: 60px; width: 180px; height: 180px; }
.tp-hero-row[b-56lu8cdvq5] {
    position: relative;
    display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
}

.tp-avatar-wrap[b-56lu8cdvq5] { position: relative; flex-shrink: 0; }
.tp-avatar[b-56lu8cdvq5] {
    width: 88px; height: 88px; border-radius: 22px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 30px; font-weight: 800;
    letter-spacing: -0.02em;
    border: 3px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
}
.tp-avatar--img[b-56lu8cdvq5] { object-fit: cover; }
.tp-avatar-edit[b-56lu8cdvq5] {
    position: absolute; bottom: -2px; right: -2px;
    width: 30px; height: 30px; border-radius: 50%;
    background: #fff;
    border: 2px solid rgba(255, 255, 255, 0.9);
    cursor: pointer; font-family: inherit;
    color: var(--ec-purple);
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    font-size: 12px;
}
.tp-avatar-edit[aria-disabled="true"][b-56lu8cdvq5] { opacity: 0.7; cursor: not-allowed; }

.tp-hero-body[b-56lu8cdvq5] { flex: 1; min-width: 0; }
.tp-hero-eyebrow[b-56lu8cdvq5] {
    font-size: 11px; font-weight: 700;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.12em; text-transform: uppercase;
    margin: 0;
}
.tp-hero-name[b-56lu8cdvq5] {
    font-size: 26px; font-weight: 800;
    margin: 5px 0 0;
    letter-spacing: -0.02em; line-height: 1.05;
}
.tp-hero-pills[b-56lu8cdvq5] {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-top: 8px;
}
.tp-pill[b-56lu8cdvq5] {
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 10px; font-weight: 800;
    color: #fff;
    letter-spacing: 0.06em;
}
.tp-pill--homeroom[b-56lu8cdvq5] {
    background: rgba(245, 158, 11, 0.28);
    border-color: rgba(245, 158, 11, 0.45);
}
.tp-pill--active[b-56lu8cdvq5] {
    background: rgba(34, 197, 94, 0.25);
    border-color: rgba(34, 197, 94, 0.4);
}
.tp-hero-meta[b-56lu8cdvq5] {
    font-size: 13px; color: rgba(255, 255, 255, 0.85);
    margin: 10px 0 0;
}
.tp-hero-settings[b-56lu8cdvq5] {
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 9px;
    padding: 10px 16px;
    color: #fff;
    font-size: 12.5px; font-weight: 700;
    cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 7px;
}
.tp-hero-settings:hover[b-56lu8cdvq5] { background: rgba(255, 255, 255, 0.24); }

/* ── Two-column body ──────────────────────────────────────────────── */
.tp-body[b-56lu8cdvq5] {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 16px;
    align-items: flex-start;
}
.tp-col[b-56lu8cdvq5] { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* ── Section card ─────────────────────────────────────────────────── */
.tp-card[b-56lu8cdvq5] {
    background: var(--ec-card, #fff);
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    padding: 16px 18px;
}
.tp-card-head[b-56lu8cdvq5] {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.tp-card-title[b-56lu8cdvq5] {
    font-size: 13.5px; font-weight: 800;
    color: var(--ec-text); margin: 0;
}
.tp-edit-btn[b-56lu8cdvq5] {
    background: transparent;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    padding: 6px 11px;
    font-size: 11.5px; font-weight: 700;
    color: var(--ec-blue);
    cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 4px;
}
.tp-edit-btn:disabled[b-56lu8cdvq5] { opacity: 0.55; cursor: not-allowed; }

/* ── Personal info / address rows ─────────────────────────────────── */
.tp-row[b-56lu8cdvq5] {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--ec-border-soft);
}
.tp-row:last-child[b-56lu8cdvq5] { border-bottom: none; }
.tp-row-label[b-56lu8cdvq5] {
    font-size: 11px; font-weight: 700;
    color: var(--ec-muted);
    margin: 0;
    align-self: center;
}
.tp-row-value[b-56lu8cdvq5] {
    font-size: 13px; font-weight: 600;
    color: var(--ec-text);
    margin: 0; line-height: 1.45;
    text-align: right;
}
.tp-row-value--multi[b-56lu8cdvq5] { white-space: pre-wrap; }

/* ── Inline edit form ─────────────────────────────────────────────── */
.tp-form[b-56lu8cdvq5] { display: flex; flex-direction: column; gap: 10px; }
.tp-form-row[b-56lu8cdvq5] { display: flex; flex-direction: column; gap: 5px; }
/* Postal + City share a single row — postal is narrower so it doesn't
   eat all the slack from city names. Matches the prototype's
   `${postal} ${city}` rendering shape. */
.tp-form-row--split[b-56lu8cdvq5] { flex-direction: row; gap: 10px; }
.tp-form-row--postal[b-56lu8cdvq5] { flex: 0 0 130px; }
.tp-form-row--city[b-56lu8cdvq5] { flex: 1; min-width: 0; }
.tp-form-label[b-56lu8cdvq5] {
    font-size: 11px; font-weight: 700;
    color: var(--ec-muted);
    letter-spacing: 0.06em; text-transform: uppercase;
    margin: 0;
}
.tp-form-input[b-56lu8cdvq5],
.tp-form-textarea[b-56lu8cdvq5] {
    width: 100%;
    background: var(--ec-blue-gh, #f4f6fc);
    border: 1px solid transparent;
    border-radius: 9px;
    padding: 9px 12px;
    font-size: 13px;
    color: var(--ec-text);
    font-family: inherit;
    outline: none;
    transition: background .15s, border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
.tp-form-input:focus[b-56lu8cdvq5],
.tp-form-textarea:focus[b-56lu8cdvq5] {
    background: #fff;
    border-color: var(--ec-blue);
    box-shadow: 0 0 0 3px rgba(59, 95, 192, 0.14);
}
.tp-form-textarea[b-56lu8cdvq5] { resize: vertical; min-height: 80px; line-height: 1.5; }
.tp-form-input:disabled[b-56lu8cdvq5],
.tp-form-textarea:disabled[b-56lu8cdvq5] { opacity: 0.55; cursor: not-allowed; }

.tp-form-readonly[b-56lu8cdvq5] {
    display: flex; flex-direction: column; gap: 3px;
    padding: 6px 0 4px;
    border-top: 1px solid var(--ec-border-soft);
    margin: 6px 0 0;
}
.tp-readonly-note[b-56lu8cdvq5] {
    font-size: 10px; color: var(--ec-muted); font-weight: 600;
    margin-left: 8px;
}

.tp-form-error[b-56lu8cdvq5] {
    display: flex; align-items: center; gap: 8px;
    background: var(--ec-red-lt);
    color: var(--ec-red);
    border: 1px solid rgba(220, 38, 38, 0.22);
    border-radius: 9px;
    padding: 8px 12px;
    font-size: 12px; font-weight: 600;
}

.tp-form-actions[b-56lu8cdvq5] {
    display: flex; gap: 8px; justify-content: flex-end;
    padding-top: 4px;
}
.tp-form-cancel[b-56lu8cdvq5] {
    background: #fff; border: 1px solid var(--ec-border);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 12.5px; font-weight: 700;
    color: var(--ec-sub);
    cursor: pointer; font-family: inherit;
}
.tp-form-cancel:hover:not(:disabled)[b-56lu8cdvq5] { color: var(--ec-text); border-color: var(--ec-muted); }
.tp-form-save[b-56lu8cdvq5] {
    background: var(--ec-blue);
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 12.5px; font-weight: 800;
    color: #fff;
    cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 6px;
    box-shadow: 0 4px 12px -4px rgba(41, 68, 160, 0.4);
}
.tp-form-save:hover:not(:disabled)[b-56lu8cdvq5] { filter: brightness(1.05); }
.tp-form-cancel:disabled[b-56lu8cdvq5],
.tp-form-save:disabled[b-56lu8cdvq5] { opacity: 0.55; cursor: not-allowed; }
.tp-form-spinner[b-56lu8cdvq5] {
    width: 14px; height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff; border-radius: 50%;
    animation: tp-form-spin-b-56lu8cdvq5 0.7s linear infinite;
}
@keyframes tp-form-spin-b-56lu8cdvq5 { to { transform: rotate(360deg); } }

/* ── My-classes row ───────────────────────────────────────────────── */
.tp-class-row[b-56lu8cdvq5] {
    width: 100%;
    display: flex; align-items: center; gap: 11px;
    padding: 12px 0;
    border-bottom: 1px solid var(--ec-border-soft);
    background: transparent;
    border-top: none; border-left: none; border-right: none;
    cursor: pointer; font-family: inherit; text-align: left;
}
.tp-class-row:last-child[b-56lu8cdvq5] { border-bottom: none; }
.tp-class-row:hover[b-56lu8cdvq5] { background: var(--ec-blue-gh, #f4f6fc); }
.tp-class-avatar[b-56lu8cdvq5] {
    width: 42px; height: 42px; border-radius: 11px;
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12.5px; font-weight: 800;
    flex-shrink: 0;
    letter-spacing: 0.04em;
}
.tp-class-body[b-56lu8cdvq5] { flex: 1; min-width: 0; }
.tp-class-name[b-56lu8cdvq5] {
    font-size: 13.5px; font-weight: 800;
    color: var(--ec-text); margin: 0;
    display: inline-flex; align-items: center; gap: 7px;
}
.tp-class-hr[b-56lu8cdvq5] {
    font-size: 9px; font-weight: 800;
    background: rgba(245, 158, 11, .14);
    color: var(--ec-amber);
    padding: 1px 5px; border-radius: 4px;
    letter-spacing: 0.06em;
}
.tp-class-meta[b-56lu8cdvq5] {
    font-size: 11px; color: var(--ec-muted); margin: 2px 0 0;
}
.tp-class-chev[b-56lu8cdvq5] { color: var(--ec-muted); font-size: 13px; }

.tp-empty[b-56lu8cdvq5] { font-size: 12.5px; color: var(--ec-muted); margin: 0; }

/* ── Security rows ────────────────────────────────────────────────── */
.tp-sec-row[b-56lu8cdvq5] {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 0;
    border-bottom: 1px solid var(--ec-border-soft);
}
.tp-sec-row:last-child[b-56lu8cdvq5] { border-bottom: none; }
.tp-sec-icon[b-56lu8cdvq5] {
    width: 34px; height: 34px; border-radius: 9px;
    background: var(--ec-bg);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; color: var(--ec-sub); font-size: 14px;
}
.tp-sec-body[b-56lu8cdvq5] { flex: 1; min-width: 0; }
.tp-sec-label[b-56lu8cdvq5] { font-size: 12.5px; font-weight: 700; color: var(--ec-text); margin: 0; }
.tp-sec-sub[b-56lu8cdvq5] { font-size: 10.5px; color: var(--ec-muted); margin: 2px 0 0; }
.tp-sec-sub--warn[b-56lu8cdvq5] { color: var(--ec-amber); font-weight: 700; }
.tp-sec-cta[b-56lu8cdvq5] {
    background: transparent;
    border: 1px solid var(--ec-border);
    border-radius: 7px;
    padding: 5px 10px;
    font-size: 11px; font-weight: 700;
    color: var(--ec-blue);
    cursor: pointer; font-family: inherit;
    text-decoration: none;
}
.tp-sec-cta:disabled[b-56lu8cdvq5] { opacity: 0.6; cursor: not-allowed; }
.tp-sec-cta--warn[b-56lu8cdvq5] {
    background: var(--ec-amber);
    border-color: var(--ec-amber);
    color: #fff;
    font-weight: 800;
}
.tp-sec-soon[b-56lu8cdvq5] {
    font-size: 10px; font-weight: 800;
    color: var(--ec-muted);
    background: var(--ec-border-soft);
    padding: 5px 10px;
    border-radius: 6px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ── Sign-out CTA ─────────────────────────────────────────────────── */
.tp-signout[b-56lu8cdvq5] {
    width: 100%;
    background: #fff;
    border: 1px solid #fecaca;
    border-radius: 11px;
    padding: 12px;
    font-size: 13px; font-weight: 700;
    color: var(--ec-red);
    cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.tp-signout:hover[b-56lu8cdvq5] { background: var(--ec-red-lt); }

@media (max-width: 1000px) {
    .tp-body[b-56lu8cdvq5] { grid-template-columns: 1fr; }
    .tp-row[b-56lu8cdvq5] { grid-template-columns: 1fr; gap: 2px; }
    .tp-row-label[b-56lu8cdvq5] { font-size: 10.5px; }
    .tp-row-value[b-56lu8cdvq5] { text-align: left; }
}
/* /Components/Pages/Teacher/TeacherProgramsPage.razor.rz.scp.css */
.tpr[b-xty2243gif] { padding: 0; }

/* ── Empty ───────────────────────────────────────────────────────── */
.tpr-empty[b-xty2243gif] {
    text-align: center;
    padding: 64px 24px;
    color: var(--ec-muted);
}
.tpr-empty-icon[b-xty2243gif] { font-size: 40px; color: var(--ec-border); display: block; margin-bottom: 12px; }
.tpr-empty-title[b-xty2243gif] { font-size: 16px; font-weight: 800; color: var(--ec-text); margin: 0 0 4px; }
.tpr-empty-sub[b-xty2243gif] { font-size: 13px; max-width: 460px; margin: 0 auto; }

/* ── Card grid ───────────────────────────────────────────────────── */
.tpr-grid[b-xty2243gif] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.tpr-card[b-xty2243gif] {
    text-align: left;
    background: #fff;
    border: 1px solid var(--ec-border-soft);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.tpr-card:hover[b-xty2243gif] {
    box-shadow: 0 10px 28px rgba(13, 23, 51, .12);
    transform: translateY(-2px);
    border-color: var(--ec-blue);
}
.tpr-card-cover[b-xty2243gif] {
    position: relative;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.tpr-card-cover img[b-xty2243gif] { width: 100%; height: 100%; object-fit: cover; }
.tpr-card-glyph[b-xty2243gif] { font-size: 30px; color: rgba(255, 255, 255, .92); }
.tpr-card-status[b-xty2243gif] {
    position: absolute;
    top: 9px;
    right: 9px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .92);
    color: var(--ec-text);
}
.tpr-card-status--open[b-xty2243gif] { color: #15803d; }
.tpr-card-status--full[b-xty2243gif] { color: #b45309; }
.tpr-card-status--draft[b-xty2243gif] { color: var(--ec-muted); }
.tpr-card-status--closed[b-xty2243gif] { color: #b91c1c; }
.tpr-card-status--past[b-xty2243gif] { color: var(--ec-muted); }

.tpr-card-body[b-xty2243gif] { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.tpr-card-eyebrow[b-xty2243gif] { display: flex; align-items: center; gap: 8px; }
.tpr-badge[b-xty2243gif] {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 99px;
}
.tpr-badge--green[b-xty2243gif] { background: #dcfce7; color: #15803d; }
.tpr-badge--blue[b-xty2243gif] { background: #dbeafe; color: #1d4ed8; }
.tpr-badge--muted[b-xty2243gif] { background: var(--ec-bg); color: var(--ec-muted); }
.tpr-card-cat[b-xty2243gif] { font-size: 11px; color: var(--ec-muted); font-weight: 600; }
.tpr-card-title[b-xty2243gif] { font-size: 15px; font-weight: 800; color: var(--ec-text); margin: 0; line-height: 1.25; }
.tpr-card-when[b-xty2243gif] { font-size: 12px; color: var(--ec-sub); margin: 0; display: inline-flex; align-items: center; gap: 5px; }
.tpr-card-foot[b-xty2243gif] { display: flex; gap: 12px; margin-top: 2px; flex-wrap: wrap; }
.tpr-card-stat[b-xty2243gif] { font-size: 11.5px; color: var(--ec-muted); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }

/* ── Detail sheet ────────────────────────────────────────────────── */
.tpr-sheet-backdrop[b-xty2243gif] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    z-index: 1700;
    display: flex;
    justify-content: flex-end;
}
.tpr-sheet[b-xty2243gif] {
    background: #fff;
    width: 100%;
    max-width: 520px;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: -16px 0 48px rgba(13, 23, 51, .3);
}
.tpr-sheet-head[b-xty2243gif] {
    padding: 16px 20px;
    border-bottom: 1px solid var(--ec-border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tpr-sheet-eyebrow[b-xty2243gif] { display: inline-flex; align-items: center; gap: 8px; }
.tpr-sheet-close[b-xty2243gif] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 1px solid var(--ec-border);
    background: #fff;
    font-size: 18px;
    color: var(--ec-muted);
    cursor: pointer;
}
.tpr-sheet-body[b-xty2243gif] { flex: 1; overflow-y: auto; padding: 18px 20px 28px; }
.tpr-sheet-title[b-xty2243gif] { font-size: 20px; font-weight: 800; color: var(--ec-text); margin: 0 0 4px; }
.tpr-sheet-sub[b-xty2243gif] { font-size: 13px; color: var(--ec-sub); margin: 0 0 8px; }
.tpr-sheet-when[b-xty2243gif] { font-size: 12px; color: var(--ec-muted); margin: 0 0 14px; display: inline-flex; align-items: center; gap: 5px; }

.tpr-sheet-actions[b-xty2243gif] { display: flex; gap: 9px; margin-bottom: 18px; }
.tpr-action[b-xty2243gif] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 14px;
    border: 1px solid var(--ec-border);
    border-radius: 10px;
    background: #fff;
    color: var(--ec-text);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}
.tpr-action:hover[b-xty2243gif] { border-color: var(--ec-blue); color: var(--ec-blue); }
.tpr-action--primary[b-xty2243gif] { background: var(--ec-blue); color: #fff; border-color: var(--ec-blue); }
.tpr-action--primary:hover[b-xty2243gif] { color: #fff; filter: brightness(1.05); }

.tpr-sheet-loading[b-xty2243gif], .tpr-muted[b-xty2243gif] { font-size: 12.5px; color: var(--ec-muted); }
.tpr-sec-label[b-xty2243gif] {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ec-muted);
    margin: 18px 0 8px;
}
.tpr-sec-head[b-xty2243gif] { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.tpr-sec-head .tpr-sec-label[b-xty2243gif] { margin: 18px 0 8px; }

.tpr-roster[b-xty2243gif] { display: flex; flex-direction: column; gap: 4px; }
.tpr-roster-row[b-xty2243gif] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--ec-border-soft);
    border-radius: 9px;
}
.tpr-roster-name[b-xty2243gif] { font-size: 13px; font-weight: 700; color: var(--ec-text); flex: 1; }
.tpr-roster-meta[b-xty2243gif] { font-size: 11.5px; color: var(--ec-muted); }
.tpr-roster-group[b-xty2243gif] {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--ec-sub);
    background: var(--ec-bg);
    padding: 2px 8px;
    border-radius: 99px;
}

.tpr-session-select[b-xty2243gif] {
    padding: 7px 10px;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    font-size: 12px;
    font-family: inherit;
    background: #fff;
    color: var(--ec-text);
}

.tpr-note-compose[b-xty2243gif] { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 12px; }
.tpr-note-input[b-xty2243gif] {
    flex: 1;
    padding: 9px 11px;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    min-height: 44px;
    box-sizing: border-box;
}
.tpr-note-add[b-xty2243gif] {
    background: var(--ec-blue);
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 9px 14px;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.tpr-note-add:disabled[b-xty2243gif] { background: var(--ec-border-soft); color: var(--ec-muted); cursor: not-allowed; }

.tpr-notes[b-xty2243gif] { display: flex; flex-direction: column; gap: 8px; }
.tpr-note[b-xty2243gif] {
    padding: 10px 12px;
    background: var(--ec-bg);
    border-radius: 9px;
    border: 1px solid var(--ec-border-soft);
}
.tpr-note-text[b-xty2243gif] { font-size: 13px; color: var(--ec-text); margin: 0 0 4px; white-space: pre-wrap; }
.tpr-note-meta[b-xty2243gif] { font-size: 11px; color: var(--ec-muted); margin: 0; }

@media (max-width: 560px) {
    .tpr-sheet[b-xty2243gif] { max-width: 100%; }
    .tpr-sheet-actions[b-xty2243gif] { flex-direction: column; }
}
/* /Components/Pages/Teacher/TeacherReportsPage.razor.rz.scp.css */
/* TeacherReportsPage — scoped CSS. Mirrors TWReports (proto 40960-41100). */

.trp-page[b-znkpy60obv] {
    padding: 0;
    background: var(--ec-bg);
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── KPI strip ────────────────────────────────────────── */
.trp-kpis[b-znkpy60obv] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
@media (max-width: 768px) {
    .trp-kpis[b-znkpy60obv] { grid-template-columns: repeat(2, 1fr); }
}
.trp-kpi[b-znkpy60obv] {
    min-height: 96px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.trp-kpi-icon[b-znkpy60obv] {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent, var(--ec-blue)) 10%, transparent);
    color: var(--accent, var(--ec-blue));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.trp-kpi-value[b-znkpy60obv] {
    font-size: 22px;
    font-weight: 800;
    color: var(--ec-text);
    line-height: 1;
    margin: 0;
}
.trp-kpi-label[b-znkpy60obv] {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--ec-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 5px 0 0;
}
.trp-kpi--alert .trp-kpi-value[b-znkpy60obv] { color: var(--ec-red); }

/* ── Card shell ───────────────────────────────────────── */
.trp-card[b-znkpy60obv] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    overflow: hidden;
}
.trp-card-head[b-znkpy60obv] {
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--ec-border-soft);
}
.trp-card-title[b-znkpy60obv] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.trp-card-sub[b-znkpy60obv] {
    font-size: 11.5px;
    color: var(--ec-muted);
    margin: 4px 0 0;
}

/* ── Per-class table ──────────────────────────────────── */
.trp-table[b-znkpy60obv] {
    display: flex;
    flex-direction: column;
}
.trp-thead[b-znkpy60obv] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) 90px minmax(0, 2fr) 90px 90px;
    gap: 12px;
    padding: 11px 18px;
    background: var(--ec-bg);
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid var(--ec-border-soft);
}
.trp-thead > span:nth-child(n+2)[b-znkpy60obv] { text-align: right; }
.trp-row[b-znkpy60obv] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) 90px minmax(0, 2fr) 90px 90px;
    gap: 12px;
    padding: 12px 18px;
    align-items: center;
    border-bottom: 1px solid var(--ec-border-soft);
    cursor: pointer;
}
.trp-row:last-child[b-znkpy60obv] { border-bottom: none; }
.trp-row:hover[b-znkpy60obv] { background: var(--ec-bg); }

.trp-row-class[b-znkpy60obv] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.trp-row-band[b-znkpy60obv] {
    width: 4px;
    height: 26px;
    background: var(--accent, var(--ec-blue));
    border-radius: 2px;
    flex-shrink: 0;
}
.trp-row-name[b-znkpy60obv] {
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-text);
}
.trp-row-num[b-znkpy60obv] {
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-text);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.trp-row-num--alert[b-znkpy60obv] {
    color: var(--ec-red);
    background: var(--ec-red-lt);
    padding: 3px 8px;
    border-radius: 6px;
}
.trp-row-att[b-znkpy60obv] {
    display: flex;
    align-items: center;
    gap: 9px;
    justify-content: flex-end;
}
.trp-row-pct[b-znkpy60obv] {
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.trp-row-pct--ok[b-znkpy60obv]    { color: var(--ec-green); }
.trp-row-pct--info[b-znkpy60obv]  { color: var(--ec-blue); }
.trp-row-pct--warn[b-znkpy60obv]  { color: var(--ec-amber); }
.trp-row-pct--alert[b-znkpy60obv] { color: var(--ec-red); }
.trp-row-bar[b-znkpy60obv] {
    flex: 1;
    height: 6px;
    background: var(--ec-border-soft);
    border-radius: 99px;
    overflow: hidden;
}
.trp-row-bar-fill[b-znkpy60obv] {
    height: 100%;
    border-radius: 99px;
}
.trp-row-bar-fill--ok[b-znkpy60obv]    { background: var(--ec-green); }
.trp-row-bar-fill--info[b-znkpy60obv]  { background: var(--ec-blue); }
.trp-row-bar-fill--warn[b-znkpy60obv]  { background: var(--ec-amber); }
.trp-row-bar-fill--alert[b-znkpy60obv] { background: var(--ec-red); }

/* ── Documents catalog ────────────────────────────────── */
.trp-docs[b-znkpy60obv] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 16px 18px 18px;
}
@media (max-width: 880px) {
    .trp-docs[b-znkpy60obv] { grid-template-columns: 1fr; }
}
.trp-doc[b-znkpy60obv] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    transition: border-color .12s, box-shadow .12s, transform .12s;
}
.trp-doc:hover[b-znkpy60obv] {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--ec-border));
    box-shadow: 0 4px 14px rgba(13, 23, 51, 0.06);
}
.trp-doc-icon[b-znkpy60obv] {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
}
.trp-doc-body[b-znkpy60obv] { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.trp-doc-title[b-znkpy60obv] { font-size: 13px; font-weight: 800; color: var(--ec-text); }
.trp-doc-desc[b-znkpy60obv] { font-size: 11.5px; color: var(--ec-muted); line-height: 1.35; }
.trp-doc-chev[b-znkpy60obv] { color: var(--ec-faint, var(--ec-muted)); font-size: 13px; flex-shrink: 0; }

/* ── Parameter slide-over ─────────────────────────────── */
.trp-scrim[b-znkpy60obv] {
    position: fixed;
    inset: 0;
    background: rgba(13, 23, 51, 0.32);
    z-index: 1400;
    animation: trp-fade-b-znkpy60obv .12s ease;
}
.trp-sheet[b-znkpy60obv] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 440px;
    max-width: 92vw;
    background: #fff;
    z-index: 1401;
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 28px rgba(13, 23, 51, 0.18);
    animation: trp-slide-b-znkpy60obv .16s ease;
}
@keyframes trp-fade-b-znkpy60obv { from { opacity: 0; } to { opacity: 1; } }
@keyframes trp-slide-b-znkpy60obv { from { transform: translateX(20px); opacity: .6; } to { transform: translateX(0); opacity: 1; } }

.trp-sheet-head[b-znkpy60obv] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--ec-border-soft);
}
.trp-sheet-title[b-znkpy60obv] { font-size: 15px; font-weight: 800; color: var(--ec-text); margin: 0; }
.trp-sheet-sub[b-znkpy60obv] { font-size: 11.5px; color: var(--ec-muted); margin: 2px 0 0; line-height: 1.35; }
.trp-sheet-x[b-znkpy60obv] {
    margin-left: auto;
    align-self: flex-start;
    background: transparent;
    border: none;
    color: var(--ec-muted);
    font-size: 15px;
    cursor: pointer;
    padding: 4px;
}
.trp-sheet-x:hover[b-znkpy60obv] { color: var(--ec-text); }

.trp-sheet-body[b-znkpy60obv] {
    flex: 1;
    overflow-y: auto;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.trp-field-label[b-znkpy60obv] {
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ec-muted);
    margin: 8px 0 2px;
}
.trp-input[b-znkpy60obv] {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    font-size: 13px;
    color: var(--ec-text);
    background: #fff;
}
.trp-input:focus[b-znkpy60obv] { outline: none; border-color: var(--ec-blue); }

.trp-presets[b-znkpy60obv] { display: flex; flex-wrap: wrap; gap: 8px; }
.trp-preset[b-znkpy60obv] {
    padding: 7px 13px;
    border: 1px solid var(--ec-border);
    border-radius: 99px;
    background: #fff;
    font-size: 12px;
    font-weight: 700;
    color: var(--ec-sub, var(--ec-text));
    cursor: pointer;
}
.trp-preset--on[b-znkpy60obv] { background: var(--ec-blue); border-color: var(--ec-blue); color: #fff; }

.trp-dates[b-znkpy60obv] { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.trp-dates-sep[b-znkpy60obv] { color: var(--ec-muted); font-weight: 700; }

.trp-warn[b-znkpy60obv] {
    font-size: 11.5px;
    color: var(--ec-red);
    background: var(--ec-red-lt);
    border-radius: 8px;
    padding: 8px 10px;
    margin: 6px 0 0;
}

.trp-sheet-foot[b-znkpy60obv] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--ec-border-soft);
}
.trp-btn[b-znkpy60obv] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border: none;
    border-radius: 9px;
    background: var(--accent, var(--ec-blue));
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}
.trp-btn:disabled[b-znkpy60obv] { opacity: 0.55; cursor: default; }
.trp-btn-ghost[b-znkpy60obv] {
    padding: 9px 16px;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    background: #fff;
    color: var(--ec-text);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

/* ── Empty state ──────────────────────────────────────── */
.trp-empty[b-znkpy60obv] {
    text-align: center;
    padding: 32px 18px;
    color: var(--ec-muted);
}
.trp-empty-title[b-znkpy60obv] {
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
/* /Components/Pages/Teacher/TeacherStudentSafetySheet.razor.rz.scp.css */
/* Teacher student-safety slide-over. Reuses the global psheet-* chrome
   (parent-sheets.css) for the panel/overlay; these rules style the
   safety-specific header avatar + the read-only care cards. */

/* ── Header: avatar with photo-edit affordance ── */
.tss-head[b-66bd511np1] { align-items: flex-start; }
.tss-head-id[b-66bd511np1] { display: flex; gap: 13px; align-items: flex-start; min-width: 0; }

.tss-avatar-wrap[b-66bd511np1] { position: relative; flex-shrink: 0; }
.tss-avatar[b-66bd511np1] {
    width: 56px; height: 56px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: 18px;
    box-shadow: 0 4px 12px rgba(13, 23, 51, .14);
}
.tss-avatar--img[b-66bd511np1] { object-fit: cover; }
.tss-avatar--busy[b-66bd511np1] { background: var(--ec-muted); }
.tss-spin[b-66bd511np1] { animation: tss-spin-b-66bd511np1 0.7s linear infinite; }
@keyframes tss-spin-b-66bd511np1 { to { transform: rotate(360deg); } }

.tss-avatar-edit[b-66bd511np1] {
    position: absolute; right: -4px; bottom: -4px;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--ps-accent); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; cursor: pointer; border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(13, 23, 51, .2);
    transition: filter .12s, transform .12s;
}
.tss-avatar-edit:hover[b-66bd511np1] { filter: brightness(1.08); transform: scale(1.05); }
/* The InputFile renders a real <input type=file>; hide it, the icon is the UI. */
.tss-avatar-edit[b-66bd511np1]  input[type="file"] {
    position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}

.tss-head-text[b-66bd511np1] { min-width: 0; }
.tss-tags[b-66bd511np1] { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.tss-tag[b-66bd511np1] {
    font-size: 10px; font-weight: 800; letter-spacing: .04em;
    color: var(--ps-accent);
    background: color-mix(in srgb, var(--ps-accent) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--ps-accent) 28%, transparent);
    border-radius: 999px; padding: 2px 9px; text-transform: uppercase;
}

/* ── Body ── */
.tss-body[b-66bd511np1] { gap: 13px; }

.tss-photo-error[b-66bd511np1] {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; color: var(--ec-red);
    background: color-mix(in srgb, var(--ec-red) 8%, #fff);
    border: 1px solid color-mix(in srgb, var(--ec-red) 25%, transparent);
    border-radius: 9px; padding: 8px 11px;
}
.tss-remove-photo[b-66bd511np1] {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 700; color: var(--ec-sub);
    background: #fff; border: 1px solid var(--ec-border);
    border-radius: 9px; padding: 7px 12px; cursor: pointer; font-family: inherit;
    transition: background .12s, color .12s, border-color .12s;
}
.tss-remove-photo:hover:not(:disabled)[b-66bd511np1] { color: var(--ec-red); border-color: color-mix(in srgb, var(--ec-red) 40%, transparent); }
.tss-remove-photo:disabled[b-66bd511np1] { opacity: .5; cursor: default; }

/* ── Care cards ── */
.tss-card[b-66bd511np1] {
    background: #fff; border: 1px solid var(--ec-border-soft);
    border-radius: 14px; overflow: hidden;
}
.tss-card--warn[b-66bd511np1] {
    border-color: color-mix(in srgb, var(--ec-amber) 45%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ec-amber) 25%, transparent);
}

.tss-card-head[b-66bd511np1] { display: flex; gap: 11px; align-items: center; padding: 13px 15px; }
.tss-card-tile[b-66bd511np1] {
    width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px; color: var(--ps-accent);
    background: color-mix(in srgb, var(--ps-accent) 11%, transparent);
}
.tss-card-tile--warn[b-66bd511np1] { color: var(--ec-amber); background: color-mix(in srgb, var(--ec-amber) 13%, transparent); }
.tss-card-tile--red[b-66bd511np1] { color: var(--ec-red); background: color-mix(in srgb, var(--ec-red) 11%, transparent); }

.tss-card-eyebrow[b-66bd511np1] {
    font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ec-sub); margin: 0;
}
.tss-card-eyebrow--warn[b-66bd511np1] { color: var(--ec-amber); }
.tss-card-eyebrow--red[b-66bd511np1] { color: var(--ec-red); }
.tss-card-headline[b-66bd511np1] { font-size: 13.5px; font-weight: 700; color: var(--ec-text); margin: 2px 0 0; }

.tss-card-body[b-66bd511np1] { padding: 0 15px 14px; display: flex; flex-direction: column; gap: 9px; }
.tss-card-body--flush[b-66bd511np1] { padding: 0; }

.tss-card-text[b-66bd511np1] { font-size: 13px; color: var(--ec-text); margin: 0; line-height: 1.45; white-space: pre-wrap; }
.tss-card-text--strong[b-66bd511np1] { font-weight: 700; }
.tss-card-text--muted[b-66bd511np1] { color: var(--ec-sub); }

.tss-subblock[b-66bd511np1] { border-top: 1px solid var(--ec-border-soft); padding-top: 9px; }
.tss-subblock-label[b-66bd511np1] {
    font-size: 10px; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ec-muted); margin: 0 0 3px;
}

.tss-empty[b-66bd511np1] { font-size: 12.5px; color: var(--ec-sub); margin: 0; padding: 13px 15px; }

/* ── Person rows (guardians / pickup / emergency) ── */
.tss-person[b-66bd511np1] { display: flex; gap: 11px; align-items: flex-start; padding: 12px 15px; }
.tss-person--bt[b-66bd511np1] { border-top: 1px solid var(--ec-border-soft); }
.tss-person-av[b-66bd511np1] {
    width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: 13px;
}
.tss-person-tile[b-66bd511np1] {
    width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center; font-size: 16px;
}
.tss-person-tile--red[b-66bd511np1] { color: var(--ec-red); background: color-mix(in srgb, var(--ec-red) 11%, transparent); }

.tss-person-body[b-66bd511np1] { min-width: 0; flex: 1; }
.tss-person-name[b-66bd511np1] { font-size: 13.5px; font-weight: 700; color: var(--ec-text); margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tss-person-pill[b-66bd511np1] {
    font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    color: var(--ec-green); background: color-mix(in srgb, var(--ec-green) 12%, transparent);
    border-radius: 999px; padding: 1px 7px;
}
.tss-person-role[b-66bd511np1] { font-size: 12px; color: var(--ec-sub); margin: 1px 0 0; }
.tss-person-contacts[b-66bd511np1] { display: flex; flex-direction: column; gap: 3px; margin-top: 5px; }
.tss-person-contact[b-66bd511np1] {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--ps-accent); text-decoration: none; width: fit-content;
}
.tss-person-contact:hover[b-66bd511np1] { text-decoration: underline; }

.tss-call[b-66bd511np1] {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 700; color: var(--ec-red);
    background: color-mix(in srgb, var(--ec-red) 8%, #fff);
    border: 1px solid color-mix(in srgb, var(--ec-red) 28%, transparent);
    border-radius: 9px; padding: 6px 10px; text-decoration: none;
}
.tss-call:hover[b-66bd511np1] { background: color-mix(in srgb, var(--ec-red) 14%, #fff); }
/* /Components/Pages/Teacher/TeacherTimetablePage.razor.rz.scp.css */
/* TeacherTimetablePage — scoped CSS. Mirrors TWSchedule (proto 38159-38268). */

.ts-page[b-pdwtaf6rqa] {
    padding: 0;
    background: var(--ec-bg);
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Week heading row ─────────────────────────────────── */
.ts-weekhead[b-pdwtaf6rqa] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.ts-weekhead-text[b-pdwtaf6rqa] {
    flex: 1;
    min-width: 0;
}
.ts-weekhead-title[b-pdwtaf6rqa] {
    font-size: 18px;
    font-weight: 800;
    color: var(--ec-text);
    letter-spacing: -0.01em;
    margin: 0;
}
.ts-weekhead-sub[b-pdwtaf6rqa] {
    font-size: 12px;
    color: var(--ec-muted);
    margin: 3px 0 0;
}
.ts-weekhead-nav[b-pdwtaf6rqa] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ts-nav-btn[b-pdwtaf6rqa] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    padding: 7px 13px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.ts-nav-btn:hover:not(:disabled)[b-pdwtaf6rqa] {
    border-color: var(--ec-text);
    color: var(--ec-text);
}
.ts-nav-btn:disabled[b-pdwtaf6rqa] {
    opacity: 0.5;
    cursor: default;
}
.ts-nav-btn--today[b-pdwtaf6rqa] {
    color: var(--ec-text);
    font-weight: 800;
}

/* ── Calendar grid ────────────────────────────────────── */
.ts-grid[b-pdwtaf6rqa] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    overflow: hidden;
    display: grid;
    grid-template-columns: var(--ts-grid-cols, 60px repeat(5, minmax(0, 1fr)));
    position: relative;
}

/* Header row — sits on a faintly-tinted strip (proto: row bg = W.bg+'70'),
   with the darker `--ec-border` rule underneath it. */
.ts-grid-corner[b-pdwtaf6rqa] {
    background: color-mix(in srgb, var(--ec-bg) 70%, #fff);
    border-bottom: 1px solid var(--ec-border);
}
.ts-day-head[b-pdwtaf6rqa] {
    padding: 12px 14px;
    text-align: center;
    background: color-mix(in srgb, var(--ec-bg) 70%, #fff);
    border-bottom: 1px solid var(--ec-border);
    border-left: 1px solid var(--ec-border-soft);
}
.ts-day-head--today[b-pdwtaf6rqa] {
    background: color-mix(in srgb, var(--ts-accent, var(--ec-blue)) 10%, #fff);
}
.ts-day-name[b-pdwtaf6rqa] {
    font-size: 9.5px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.1em;
    margin: 0;
}
.ts-day-head--today .ts-day-name[b-pdwtaf6rqa] {
    color: var(--ts-accent, var(--ec-blue));
}
.ts-day-num[b-pdwtaf6rqa] {
    font-size: 18px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 4px 0 0;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.ts-day-today[b-pdwtaf6rqa] {
    font-size: 9px;
    font-weight: 800;
    color: var(--ts-accent, var(--ec-blue));
    margin: 3px 0 0;
    letter-spacing: 0.06em;
}

/* Time cells (left column) — transparent over the white grid body, matching
   the prototype's bare hour-label column. */
.ts-time-cell[b-pdwtaf6rqa] {
    background: transparent;
    border-top: 1px solid var(--ec-border-soft);
    padding: 6px 8px 0 0;
    text-align: right;
    height: 64px;
    box-sizing: border-box;
}
.ts-time-label[b-pdwtaf6rqa] {
    font-size: 10px;
    font-weight: 700;
    color: var(--ec-muted);
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", monospace;
}

/* Day cells (one hour) */
.ts-cell[b-pdwtaf6rqa] {
    background: #fff;
    border-top: 1px solid var(--ec-border-soft);
    border-left: 1px solid var(--ec-border-soft);
    height: 64px;
    position: relative;
    box-sizing: border-box;
}
.ts-cell--today[b-pdwtaf6rqa] {
    background: color-mix(in srgb, var(--ts-accent, var(--ec-blue)) 6%, #fff);
}

/* Lesson card — absolutely-positioned button filling the cell */
.ts-lesson[b-pdwtaf6rqa] {
    position: absolute;
    inset: 2px 4px;
    border-radius: 8px;
    padding: 5px 8px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
    transition: transform .12s ease, box-shadow .12s ease;
}
.ts-lesson:hover[b-pdwtaf6rqa] {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(13, 23, 51, .12);
}

/* Inactive lesson card — soft 10% tinted bg with the class color as text +
   a 3-px left stripe (mirrors proto 38214: background = cls.color+'18',
   borderLeft = 3px solid cls.color). */
.ts-lesson--upcoming[b-pdwtaf6rqa],
.ts-lesson--past[b-pdwtaf6rqa] {
    background: color-mix(in srgb, var(--accent, var(--ec-blue)) 10%, #fff);
    color: var(--accent, var(--ec-blue));
    border-left: 3px solid var(--accent, var(--ec-blue));
}
.ts-lesson--past[b-pdwtaf6rqa] {
    opacity: 0.4;
}
.ts-lesson--now[b-pdwtaf6rqa] {
    background: linear-gradient(135deg,
        var(--accent, var(--ec-blue)),
        color-mix(in srgb, var(--accent, var(--ec-blue)) 87%, transparent));
    color: #fff;
    box-shadow: 0 4px 12px rgba(13, 23, 51, .15);
}

.ts-lesson-top[b-pdwtaf6rqa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
}
.ts-lesson-subject[b-pdwtaf6rqa] {
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.ts-lesson-now-pill[b-pdwtaf6rqa] {
    font-size: 8px;
    font-weight: 800;
    background: rgba(255, 255, 255, .22);
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0.06em;
    flex-shrink: 0;
}
.ts-lesson-class[b-pdwtaf6rqa] {
    font-size: 9.5px;
    font-weight: 700;
    opacity: 0.85;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ts-lesson-room[b-pdwtaf6rqa] {
    font-size: 8.5px;
    opacity: 0.7;
    margin: 1px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── NOW indicator line — horizontal accent bar spanning today's column at
   the wall-clock-time vertical offset. The grid is a CSS grid so the line
   participates in the same column track via grid-column, then absolute-
   positions itself vertically via a calc that skips the 65px header row.
   ─────────────────────────────────────────────────────── */
.ts-now-line[b-pdwtaf6rqa] {
    position: absolute;
    grid-column: var(--ts-now-col, 2) / span 1;
    top: calc(65px + (100% - 65px) * var(--ts-now-top, 0) / 100);
    height: 2px;
    background: var(--ts-accent, var(--ec-blue));
    z-index: 5;
    pointer-events: none;
    left: 0;
    right: 0;
}
.ts-now-dot[b-pdwtaf6rqa] {
    position: absolute;
    left: -5px;
    top: -5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--ts-accent, var(--ec-blue));
    border: 2px solid #fff;
}
.ts-now-label[b-pdwtaf6rqa] {
    position: absolute;
    right: 6px;
    top: -10px;
    font-size: 9.5px;
    font-weight: 800;
    color: var(--ts-accent, var(--ec-blue));
    background: #fff;
    padding: 2px 7px;
    border-radius: 4px;
    border: 1px solid var(--ts-accent, var(--ec-blue));
    letter-spacing: 0.06em;
}

/* ── Bottom legend "THIS WEEK'S CLASSES" ─────────────── */
.ts-legend[b-pdwtaf6rqa] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    padding: 14px 18px;
}
.ts-legend-head[b-pdwtaf6rqa] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 10px;
}
.ts-legend-row[b-pdwtaf6rqa] {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
}
.ts-legend-chip[b-pdwtaf6rqa] {
    background: color-mix(in srgb, var(--accent, var(--ec-blue)) 10%, #fff);
    border: none;
    border-radius: 9px;
    padding: 6px 11px;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: background .12s ease;
}
.ts-legend-chip:hover[b-pdwtaf6rqa] {
    background: color-mix(in srgb, var(--accent, var(--ec-blue)) 18%, #fff);
}
.ts-legend-dot[b-pdwtaf6rqa] {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--accent, var(--ec-blue));
    display: inline-block;
    flex-shrink: 0;
}
.ts-legend-name[b-pdwtaf6rqa] {
    font-size: 12px;
    font-weight: 700;
    color: var(--ec-text);
}
.ts-legend-sub[b-pdwtaf6rqa] {
    font-size: 11px;
    color: var(--ec-muted);
}

/* ── Empty state ──────────────────────────────────────── */
.ts-empty[b-pdwtaf6rqa] {
    background: #fff;
    border: 1px dashed var(--ec-border);
    border-radius: 14px;
    padding: 48px 28px;
    text-align: center;
}
.ts-empty-icon[b-pdwtaf6rqa] {
    font-size: 38px;
    color: var(--ec-faint);
    display: block;
    margin-bottom: 10px;
}
.ts-empty-title[b-pdwtaf6rqa] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.ts-empty-sub[b-pdwtaf6rqa] {
    font-size: 12px;
    color: var(--ec-muted);
    margin: 5px auto 0;
    max-width: 380px;
    line-height: 1.5;
}

/* ── Narrow viewport: collapse to single-column day list ─ */
@media (max-width: 760px) {
    .ts-grid[b-pdwtaf6rqa] {
        grid-template-columns: 56px minmax(0, 1fr);
    }
    .ts-day-head:not(.ts-day-head--today)[b-pdwtaf6rqa] {
        display: none;
    }
    .ts-cell:not(.ts-cell--today)[b-pdwtaf6rqa] {
        display: none;
    }
}

/* ── KG Schedule: read-only Day Rhythm grid ──────────────────────────────
   Class names intentionally mirror DayRhythm.razor.css (scoped, no clash).
   ──────────────────────────────────────────────────────────────────────── */

.dr-grid-wrap[b-pdwtaf6rqa] {
    background: #fff;
    border-radius: 14px;
    border: 1px solid var(--ec-border);
    overflow: hidden;
    margin-bottom: 0;
}

.dr-grid[b-pdwtaf6rqa] {
    display: grid;
    grid-template-columns: 120px repeat(5, 1fr);
    overflow-x: auto;
}

/* Shared cell */
.dr-cell[b-pdwtaf6rqa] {
    padding: 10px 12px;
    border-bottom: 1px solid var(--ec-border-soft);
    min-height: 78px;
    box-sizing: border-box;
    vertical-align: top;
    position: relative;
}

/* ── Today column highlight + NOW cursor (mirrors the school grid) ── */
.dr-cell--today[b-pdwtaf6rqa] {
    box-shadow: inset 0 0 0 9999px rgba(124, 58, 237, 0.06);
}

.dr-day-head--today .dr-day-name[b-pdwtaf6rqa] {
    color: var(--ec-purple);
}

.dr-day-today[b-pdwtaf6rqa] {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--ec-purple);
    background: var(--ec-purple-lt);
    padding: 2px 6px;
    border-radius: 5px;
    align-self: flex-start;
}

.dr-now-line[b-pdwtaf6rqa] {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 2px solid var(--ec-purple);
    z-index: 4;
    pointer-events: none;
}

.dr-now-dot[b-pdwtaf6rqa] {
    position: absolute;
    left: -3px;
    top: -4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ec-purple);
}

.dr-now-label[b-pdwtaf6rqa] {
    position: absolute;
    right: 3px;
    top: -8px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #fff;
    background: var(--ec-purple);
    padding: 1px 5px;
    border-radius: 5px;
}

.dr-cell--not-last[b-pdwtaf6rqa] {
    border-right: 1px solid var(--ec-border-soft);
}

.dr-cell--time-col[b-pdwtaf6rqa] {
    background: var(--ec-bg);
}

/* Header row cells */
.dr-cell--head[b-pdwtaf6rqa] {
    background: var(--ec-bg);
    min-height: 64px;
    padding: 12px 12px;
}

.dr-col-label[b-pdwtaf6rqa] {
    font-size: 10px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
}

.dr-day-head[b-pdwtaf6rqa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.dr-day-name[b-pdwtaf6rqa] {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}

.dr-day-num[b-pdwtaf6rqa] {
    font-size: 10px;
    font-weight: 700;
    color: var(--ec-muted);
    margin: 1px 0 0;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Time cells */
.dr-cell--time[b-pdwtaf6rqa] {
    padding: 12px 12px;
}

.dr-time-start[b-pdwtaf6rqa] {
    font-size: 12px;
    font-weight: 800;
    color: var(--ec-text);
    font-variant-numeric: tabular-nums;
    margin: 0;
}

.dr-time-end[b-pdwtaf6rqa] {
    font-size: 11px;
    font-weight: 700;
    color: var(--ec-muted);
    margin: 1px 0 0;
    font-variant-numeric: tabular-nums;
}

.dr-fixed-pill[b-pdwtaf6rqa] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 5px;
    font-size: 8.5px;
    font-weight: 800;
    background: #fff;
    color: var(--ec-amber);
    border: 1px solid var(--ec-amber);
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.06em;
}

.dr-fixed-icon[b-pdwtaf6rqa] {
    font-size: 8px;
}

/* Locked day cells */
.dr-cell--locked[b-pdwtaf6rqa] {
    padding: 10px 12px;
}

.dr-locked-inner[b-pdwtaf6rqa] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.dr-locked-icon[b-pdwtaf6rqa] {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dr-locked-text[b-pdwtaf6rqa] {
    min-width: 0;
    flex: 1;
}

.dr-locked-label[b-pdwtaf6rqa] {
    font-size: 11.5px;
    font-weight: 800;
    color: var(--ec-text);
    line-height: 1.25;
    margin: 0;
}

.dr-locked-dishes[b-pdwtaf6rqa] {
    font-size: 10px;
    color: var(--ec-muted);
    margin: 3px 0 0;
    line-height: 1.4;
}

.dr-no-menu[b-pdwtaf6rqa] {
    font-size: 9.5px;
    color: var(--ec-muted);
    margin: 3px 0 0;
    font-style: italic;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Gap day cells */
.dr-cell--gap[b-pdwtaf6rqa] {
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: #fff;
}

/* Activity cards in gap cells */
.dr-act-card[b-pdwtaf6rqa] {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 7px 8px;
    background: #fff;
    border: 1px solid var(--ec-border-soft);
    border-left: 3px solid var(--ec-border);
    border-radius: 7px;
    font-family: inherit;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}

.dr-act-icon[b-pdwtaf6rqa] {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.dr-act-body[b-pdwtaf6rqa] {
    min-width: 0;
    flex: 1;
}

.dr-act-label[b-pdwtaf6rqa] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-text);
    line-height: 1.25;
    margin: 0;
}

.dr-act-time[b-pdwtaf6rqa] {
    font-size: 9.5px;
    color: var(--ec-muted);
    margin: 1px 0 0;
    font-variant-numeric: tabular-nums;
}

.dr-act-detail[b-pdwtaf6rqa] {
    font-size: 9.5px;
    color: var(--ec-muted);
    margin: 2px 0 0;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Program session card modifier */
.dr-act-card--program[b-pdwtaf6rqa] {
    background: color-mix(in srgb, var(--ec-blue) 5%, #fff);
}

.dr-act-prog-tag[b-pdwtaf6rqa] {
    display: inline-block;
    margin-top: 3px;
    font-size: 8px;
    font-weight: 800;
    color: var(--ec-muted);
    background: var(--ec-bg);
    border: 1px solid var(--ec-border);
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0.05em;
}

/* ── School grid: program session block ─────────────────── */

/* When a cell has both a lesson and a program, allow them to
   stack vertically (each shrinks to share the 64px row). */
.ts-cell--stacked[b-pdwtaf6rqa] {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 64px;
    overflow: visible;
}
.ts-cell--stacked .ts-lesson[b-pdwtaf6rqa] {
    position: relative;
    inset: unset;
    flex: 1;
    min-height: 28px;
}
.ts-lesson--compact[b-pdwtaf6rqa] {
    padding: 3px 6px;
}

/* Program session block — accent-border card, non-clickable */
.ts-program[b-pdwtaf6rqa] {
    position: absolute;
    inset: 2px 4px;
    border-radius: 8px;
    padding: 5px 8px;
    border-left: 3px solid var(--accent, var(--ec-blue));
    background: color-mix(in srgb, var(--accent, var(--ec-blue)) 10%, #fff);
    font-family: inherit;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
}
/* When stacked alongside a lesson, program block is relative */
.ts-cell--stacked .ts-program[b-pdwtaf6rqa] {
    position: relative;
    inset: unset;
    flex: 1;
    min-height: 28px;
}
.ts-program--compact[b-pdwtaf6rqa] {
    padding: 3px 6px;
}

.ts-program-top[b-pdwtaf6rqa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    min-width: 0;
}
.ts-program-title[b-pdwtaf6rqa] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--accent, var(--ec-blue));
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.ts-program-tag[b-pdwtaf6rqa] {
    font-size: 7.5px;
    font-weight: 800;
    color: var(--accent, var(--ec-blue));
    background: color-mix(in srgb, var(--accent, var(--ec-blue)) 15%, #fff);
    border: 1px solid color-mix(in srgb, var(--accent, var(--ec-blue)) 30%, transparent);
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0.05em;
    flex-shrink: 0;
    white-space: nowrap;
}
.ts-program-time[b-pdwtaf6rqa] {
    font-size: 9px;
    font-weight: 700;
    color: var(--accent, var(--ec-blue));
    opacity: 0.75;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ts-program-room[b-pdwtaf6rqa] {
    font-size: 8.5px;
    color: var(--accent, var(--ec-blue));
    opacity: 0.6;
    margin: 1px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* /Components/Pages/Timetable/TimetablePage.razor.rz.scp.css */
/* Timetable — transcribed from prototype AWTimetable (EduConnect All Roles.html
   lines 20605-20880). Px units / token colors match the prototype 1:1. */

.tt-page[b-37puwpkwrt] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── KPI row ─────────────────────────────────────────────────────────── */
.tt-kpis[b-37puwpkwrt] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
@media (max-width: 980px) {
    .tt-kpis[b-37puwpkwrt] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .tt-kpis[b-37puwpkwrt] { grid-template-columns: 1fr; }
}

/* ── Conflict banner ────────────────────────────────────────────────── */
.tt-conflict-banner[b-37puwpkwrt] {
    background: color-mix(in srgb, var(--ec-red-lt) 90%, transparent);
    border: 1px solid color-mix(in srgb, var(--ec-red) 25%, transparent);
    border-radius: 11px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.tt-conflict-banner > i[b-37puwpkwrt] {
    font-size: 18px;
    color: var(--ec-red);
    flex-shrink: 0;
}
.tt-conflict-title[b-37puwpkwrt] {
    font-size: 13px;
    font-weight: 800;
    color: var(--ec-red);
    margin: 0;
}
.tt-conflict-sub[b-37puwpkwrt] {
    font-size: 11.5px;
    color: var(--ec-sub);
    margin: 2px 0 0;
}

/* ── Generic banner (load error) ────────────────────────────────────── */
.tt-banner[b-37puwpkwrt] {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
}
.tt-banner-error[b-37puwpkwrt] {
    background: color-mix(in srgb, var(--ec-red) 8%, transparent);
    color: var(--ec-red);
}
.tt-banner-close[b-37puwpkwrt] {
    margin-left: auto;
    background: none; border: none; cursor: pointer;
    color: inherit; font-size: 16px; padding: 0;
}

/* ── Toolbar (class tabs + edit button) ─────────────────────────────── */
.tt-toolbar[b-37puwpkwrt] {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    align-items: center;
}
.tt-toolbar-spacer[b-37puwpkwrt] { flex: 1; }
.tt-tabs[b-37puwpkwrt] {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}
.tt-tab[b-37puwpkwrt] {
    padding: 8px 12px;
    border-radius: 9px;
    border: none;
    background: #fff;
    color: var(--ec-sub);
    font-size: 12px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px var(--ec-border);
}
.tt-tab:hover[b-37puwpkwrt] { background: var(--ec-bg); }
.tt-tab.is-active[b-37puwpkwrt] {
    color: #fff;
    box-shadow: none;
}

.tt-edit-btn[b-37puwpkwrt] {
    background: var(--ec-purple);
    border: none;
    border-radius: 9px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tt-edit-btn:hover[b-37puwpkwrt] { filter: brightness(0.95); }
.tt-edit-btn.is-on[b-37puwpkwrt] { background: var(--ec-green); }

/* ── Grid container ─────────────────────────────────────────────────── */
.tt-grid-wrap[b-37puwpkwrt] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 12px;
    overflow: hidden;
}
.tt-grid-wrap.is-editing[b-37puwpkwrt] {
    border-color: color-mix(in srgb, var(--ec-purple) 38%, transparent);
}
.tt-grid-hdr[b-37puwpkwrt] {
    padding: 12px 18px;
    border-bottom: 1px solid var(--ec-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
}
.tt-grid-hdr.is-editing[b-37puwpkwrt] {
    background: color-mix(in srgb, var(--ec-purple) 5%, transparent);
}
.tt-grid-title[b-37puwpkwrt] {
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}
.tt-edit-pill[b-37puwpkwrt] {
    font-size: 11px;
    font-weight: 700;
    color: var(--ec-purple);
    margin-left: 8px;
    letter-spacing: 0.04em;
}
.tt-grid-help[b-37puwpkwrt] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 0;
}

.tt-loading[b-37puwpkwrt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 70px 24px;
    gap: 12px;
    color: var(--ec-muted);
}
.tt-spinner[b-37puwpkwrt] {
    width: 36px; height: 36px;
    border: 3px solid var(--ec-border-soft);
    border-top-color: var(--ec-blue);
    border-radius: 50%;
    animation: tt-spin-b-37puwpkwrt 0.75s linear infinite;
}
@keyframes tt-spin-b-37puwpkwrt { to { transform: rotate(360deg); } }

/* ── Grid layout ────────────────────────────────────────────────────── */
.tt-grid-scroll[b-37puwpkwrt] { overflow-x: auto; }
.tt-grid[b-37puwpkwrt] {
    display: grid;
    grid-template-columns: 120px repeat(5, minmax(150px, 1fr));
    min-width: 850px;
}
.tt-grid-cell[b-37puwpkwrt] {
    padding: 10px 12px;
    box-sizing: border-box;
}
.tt-grid-period-hdr[b-37puwpkwrt],
.tt-grid-day-hdr[b-37puwpkwrt] {
    background: var(--ec-bg);
    font-size: 10px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.tt-grid-day-hdr[b-37puwpkwrt] {
    border-left: 1px solid var(--ec-border-soft);
}
.tt-grid-day-hdr.is-today[b-37puwpkwrt] {
    color: var(--ec-purple);
}

.tt-grid-period-label[b-37puwpkwrt] {
    padding: 12px;
    border-top: 1px solid var(--ec-border-soft);
    background: color-mix(in srgb, var(--ec-bg) 50%, transparent);
    font-size: 11px;
    font-weight: 700;
    color: var(--ec-sub);
}

.tt-cell[b-37puwpkwrt] {
    padding: 10px;
    border-top: 1px solid var(--ec-border-soft);
    border-left: 1px solid var(--ec-border-soft);
    min-height: 78px;
    position: relative;
    background: color-mix(in srgb, var(--ec-bg) 25%, transparent);
}
.tt-cell.is-clickable[b-37puwpkwrt] { cursor: pointer; }
.tt-cell.is-empty-editing:hover[b-37puwpkwrt] {
    background: color-mix(in srgb, var(--ec-purple) 5%, transparent);
}

.tt-cell-body[b-37puwpkwrt] {
    border-left: 3px solid var(--ec-blue);
    padding-left: 8px;
}
.tt-cell-subject[b-37puwpkwrt] {
    font-size: 12px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0 0 2px;
}
.tt-cell-meta[b-37puwpkwrt] {
    font-size: 10px;
    color: var(--ec-muted);
    margin: 0 0 1px;
    display: flex;
    align-items: center;
    gap: 3px;
}
.tt-cell-meta i[b-37puwpkwrt] { font-size: 10px; }

.tt-cell-empty[b-37puwpkwrt] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--ec-purple);
    font-size: 11px;
    font-weight: 700;
    opacity: 0.5;
}

.tt-cell-badges[b-37puwpkwrt] {
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tt-cell-badge[b-37puwpkwrt] {
    font-size: 9px;
    font-weight: 800;
    color: var(--ec-red);
    letter-spacing: 0.04em;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.tt-cell-badge i[b-37puwpkwrt] { font-size: 11px; }

/* ── Modals ─────────────────────────────────────────────────────────── */
.tt-modal-overlay[b-37puwpkwrt] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    z-index: 3100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.tt-modal[b-37puwpkwrt] {
    background: #fff;
    border-radius: 14px;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 24px 60px rgba(13, 23, 51, 0.4);
    overflow: hidden;
}
.tt-modal-hdr[b-37puwpkwrt] {
    padding: 16px 22px;
    border-bottom: 1px solid var(--ec-border-soft);
    border-left: 4px solid var(--ec-blue);
}
.tt-modal-hdr--edit[b-37puwpkwrt] {
    background: color-mix(in srgb, var(--ec-purple) 6%, transparent);
    border-left: none;
}
.tt-modal-eyebrow[b-37puwpkwrt] {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
}
.tt-modal-title[b-37puwpkwrt] {
    font-size: 17px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 3px 0 0;
}
.tt-modal-sub[b-37puwpkwrt] {
    font-size: 11.5px;
    color: var(--ec-sub);
    margin: 3px 0 0;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.tt-modal-sub i[b-37puwpkwrt] { font-size: 11px; }

.tt-modal-conflicts[b-37puwpkwrt] {
    padding: 14px 22px;
    background: color-mix(in srgb, var(--ec-red-lt) 90%, transparent);
}
.tt-modal-conflicts-title[b-37puwpkwrt] {
    font-size: 11.5px;
    font-weight: 800;
    color: var(--ec-red);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 7px;
    display: flex; align-items: center; gap: 5px;
}
.tt-modal-conflict[b-37puwpkwrt] {
    padding: 9px 11px;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--ec-red) 25%, transparent);
    border-radius: 8px;
    margin-bottom: 6px;
}
.tt-modal-conflict:last-child[b-37puwpkwrt] { margin-bottom: 0; }
.tt-modal-conflict-headline[b-37puwpkwrt] {
    font-size: 11.5px;
    font-weight: 800;
    color: var(--ec-red);
    margin: 0;
    display: flex; align-items: center; gap: 5px;
}
.tt-modal-conflict-headline i[b-37puwpkwrt] { font-size: 12px; }
.tt-modal-conflict-body[b-37puwpkwrt] {
    font-size: 11px;
    color: var(--ec-sub);
    margin: 2px 0 0;
    line-height: 1.5;
}

.tt-modal-body[b-37puwpkwrt] {
    padding: 16px 22px;
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.tt-field[b-37puwpkwrt] { display: flex; flex-direction: column; gap: 4px; }
.tt-field-label[b-37puwpkwrt] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-sub);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0;
}
.tt-input[b-37puwpkwrt] {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    font-size: 13px;
    font-family: inherit;
    background: var(--ec-bg);
    color: var(--ec-text);
    outline: none;
    box-sizing: border-box;
}
.tt-input:focus[b-37puwpkwrt] {
    border-color: var(--ec-purple);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ec-purple) 18%, transparent);
}
.tt-field-ok[b-37puwpkwrt] {
    font-size: 10px;
    color: var(--ec-green);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.tt-field-warn[b-37puwpkwrt] {
    font-size: 10.5px;
    color: var(--ec-red);
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.tt-modal-err[b-37puwpkwrt] {
    font-size: 12px;
    color: var(--ec-red);
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

.tt-modal-footer[b-37puwpkwrt] {
    padding: 12px 22px;
    border-top: 1px solid var(--ec-border-soft);
    display: flex;
    justify-content: flex-end;
    gap: 7px;
    background: #fff;
}
.tt-modal-footer--edit[b-37puwpkwrt] {
    background: var(--ec-bg);
    justify-content: space-between;
}
.tt-modal-footer-right[b-37puwpkwrt] {
    display: flex;
    gap: 7px;
}

.tt-btn[b-37puwpkwrt] {
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.tt-btn-cancel[b-37puwpkwrt] {
    background: #fff;
    color: var(--ec-sub);
    border-color: var(--ec-border);
}
.tt-btn-cancel:hover[b-37puwpkwrt] { background: var(--ec-bg); }
.tt-btn-edit[b-37puwpkwrt] {
    background: var(--ec-purple);
    color: #fff;
    font-weight: 800;
}
.tt-btn-edit:hover[b-37puwpkwrt] { filter: brightness(0.95); }
.tt-btn-save[b-37puwpkwrt] {
    padding: 8px 18px;
    background: var(--ec-primary);
    color: #fff;
    font-weight: 800;
}
.tt-btn-save:hover:not(.is-disabled)[b-37puwpkwrt] { filter: brightness(0.95); }
.tt-btn-save.is-disabled[b-37puwpkwrt],
.tt-btn-save:disabled[b-37puwpkwrt] {
    background: var(--ec-muted);
    cursor: not-allowed;
}
.tt-btn-delete[b-37puwpkwrt] {
    background: #fff;
    color: var(--ec-red);
    border-color: color-mix(in srgb, var(--ec-red) 30%, transparent);
}
.tt-btn-delete:hover[b-37puwpkwrt] {
    background: color-mix(in srgb, var(--ec-red) 8%, transparent);
}

/* Responsive nudges */
@media (max-width: 600px) {
    .tt-modal[b-37puwpkwrt] { max-width: 100%; }
}
/* /Components/Pages/Users/UserEditor.razor.rz.scp.css */
/* User editor slide-over — prototype AWUserEditor visual structure. */

.ued-backdrop[b-0r0o1pu2me] {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 1090;
    animation: ued-fade-b-0r0o1pu2me 0.15s ease-out;
}
@keyframes ued-fade-b-0r0o1pu2me { from { opacity: 0; } to { opacity: 1; } }

.ued-sheet[b-0r0o1pu2me] {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(620px, 95vw);
    background: #fff;
    box-shadow: -12px 0 40px rgba(13, 23, 51, 0.16);
    z-index: 1091;
    display: flex;
    flex-direction: column;
    animation: ued-slide-b-0r0o1pu2me 0.22s ease-out;
}
@keyframes ued-slide-b-0r0o1pu2me { from { transform: translateX(100%); } to { transform: translateX(0); } }

/* Header */
.ued-hdr[b-0r0o1pu2me] {
    padding: 18px 24px 16px;
    border-bottom: 1px solid var(--ec-border);
    position: relative;
    flex-shrink: 0;
}

.ued-close[b-0r0o1pu2me] {
    position: absolute; top: 14px; right: 14px;
    width: 32px; height: 32px;
    border-radius: 9px;
    background: #fff;
    border: 1px solid var(--ec-border);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: var(--ec-sub);
    font-family: inherit;
}
.ued-close:hover[b-0r0o1pu2me] { background: var(--ec-bg); color: var(--ec-text); }

.ued-hdr-row[b-0r0o1pu2me] {
    display: flex;
    gap: 13px;
    align-items: center;
    padding-right: 42px;
}

.ued-hdr-icon[b-0r0o1pu2me] {
    width: 46px; height: 46px;
    border-radius: 12px;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.ued-hdr-body[b-0r0o1pu2me] { flex: 1; min-width: 0; }

.ued-hdr-title-row[b-0r0o1pu2me] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ued-hdr-title[b-0r0o1pu2me] {
    font-size: 18px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
    letter-spacing: -0.01em;
}

.ued-hdr-rolepill[b-0r0o1pu2me] {
    font-size: 9.5px;
    font-weight: 800;
    padding: 3px 7px;
    border-radius: 5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ued-hdr-sub[b-0r0o1pu2me] {
    font-size: 12px;
    color: var(--ec-muted);
    margin: 4px 0 0;
}

/* Body */
.ued-body[b-0r0o1pu2me] {
    flex: 1;
    overflow-y: auto;
    padding: 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ued-field[b-0r0o1pu2me] { display: flex; flex-direction: column; }

.ued-label[b-0r0o1pu2me] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-sub);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ued-required[b-0r0o1pu2me] { color: var(--ec-red); }
.ued-label-hint[b-0r0o1pu2me] {
    font-size: 9.5px;
    color: var(--ec-muted);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.ued-help[b-0r0o1pu2me] {
    font-size: 11px;
    color: var(--ec-muted);
    margin: 5px 0 0;
}

/* "More details" expander layout */
.ued-field-grid[b-0r0o1pu2me] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 520px) {
    .ued-field-grid[b-0r0o1pu2me] { grid-template-columns: 1fr; }
}

.ued-section-divider[b-0r0o1pu2me] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-purple);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 6px 0 -4px;
    padding-top: 8px;
    border-top: 1px solid var(--ec-border-soft);
}

.ued-textarea[b-0r0o1pu2me] {
    resize: vertical;
    min-height: 70px;
    line-height: 1.45;
}

.ued-input[b-0r0o1pu2me] {
    background: var(--ec-bg);
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    padding: 10px 12px;
    font-size: 13px;
    font-family: inherit;
    color: var(--ec-text);
    outline: none;
    transition: border-color 0.15s, background 0.15s;
}
.ued-input:focus[b-0r0o1pu2me] { border-color: var(--ec-blue); background: #fff; }

.ued-select[b-0r0o1pu2me] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    padding: 8px 10px;
    font-size: 12.5px;
    font-family: inherit;
    color: var(--ec-text);
    outline: none;
    cursor: pointer;
    min-width: 120px;
}
.ued-select:focus[b-0r0o1pu2me] { border-color: var(--ec-blue); }
.ued-select-wide[b-0r0o1pu2me] { flex: 1; min-width: 180px; }

/* Toggle */
.ued-toggle-field[b-0r0o1pu2me] {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    background: var(--ec-bg);
    border: 1px solid var(--ec-border);
    border-radius: 10px;
    padding: 11px 14px;
}
.ued-toggle-body[b-0r0o1pu2me] { flex: 1; }
.ued-toggle-body .ued-label[b-0r0o1pu2me] { margin: 0; }
.ued-toggle-body .ued-help[b-0r0o1pu2me] { margin: 3px 0 0; }

.ued-toggle[b-0r0o1pu2me] {
    width: 38px; height: 22px;
    border-radius: 999px;
    background: var(--ec-border);
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
    transition: background 0.15s;
    flex-shrink: 0;
}
.ued-toggle span[b-0r0o1pu2me] {
    position: absolute;
    top: 3px; left: 3px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.15s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.ued-toggle.is-on[b-0r0o1pu2me] { background: var(--ec-blue); }
.ued-toggle.is-on span[b-0r0o1pu2me] { transform: translateX(16px); }

/* Assignments */
.ued-assignments[b-0r0o1pu2me] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ued-assignment[b-0r0o1pu2me] {
    border: 1px solid;
    border-radius: 10px;
    padding: 10px;
    background: #fff;
}

.ued-assignment-row[b-0r0o1pu2me] {
    display: flex;
    gap: 7px;
    align-items: center;
    flex-wrap: wrap;
}

.ued-assignment-remove[b-0r0o1pu2me] {
    width: 28px; height: 28px;
    border-radius: 7px;
    background: #fff;
    border: 1px solid var(--ec-border);
    color: var(--ec-sub);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
}
.ued-assignment-remove:hover[b-0r0o1pu2me] { background: #fef2f2; color: var(--ec-red); }

.ued-warn[b-0r0o1pu2me] {
    margin: 7px 0 0;
    font-size: 11px;
    color: var(--ec-amber);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
}

.ued-nested[b-0r0o1pu2me] {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--ec-border);
}
.ued-nested-label[b-0r0o1pu2me] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 5px;
}

/* ── Chip pickers (subjects / classes / children) ── */
.ued-chips[b-0r0o1pu2me] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ued-chip[b-0r0o1pu2me] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 7px;
    padding: 5px 9px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.ued-chip:hover[b-0r0o1pu2me] { background: var(--ec-bg); border-color: var(--ec-faint); }
.ued-chip.is-on[b-0r0o1pu2me] {
    background: var(--ec-blue);
    border-color: var(--ec-blue);
    color: #fff;
}

.ued-chip-code[b-0r0o1pu2me] {
    font-size: 9px;
    font-weight: 800;
    padding: 1px 4px;
    border-radius: 3px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.ued-chip.is-on .ued-chip-code[b-0r0o1pu2me] { background: rgba(255,255,255,0.22); color: #fff; }

.ued-chip-meta[b-0r0o1pu2me] {
    font-size: 10px;
    font-weight: 600;
    color: var(--ec-muted);
}
.ued-chip.is-on .ued-chip-meta[b-0r0o1pu2me] { color: rgba(255,255,255,0.85); }

.ued-chip-emoji[b-0r0o1pu2me] {
    font-size: 13px;
    line-height: 1;
}

.ued-help--warn[b-0r0o1pu2me] { color: var(--ec-amber); font-weight: 700; }

.ued-nested-label--sub[b-0r0o1pu2me] {
    margin-top: 10px;
}

/* Permission-level chooser (only visible when the assignment role is in the
   admin tier). Three card-style choices: Principal / Coordinator / Finance. */
.ued-permission-level[b-0r0o1pu2me] {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--ec-border);
}
.ued-permission-choices[b-0r0o1pu2me] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}
.ued-permission-choice[b-0r0o1pu2me] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 7px 9px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background 0.1s, border-color 0.1s;
}
.ued-permission-choice:hover[b-0r0o1pu2me] {
    background: var(--ec-bg);
}
.ued-permission-choice.is-on[b-0r0o1pu2me] {
    border-width: 1.5px;
}
.ued-permission-choice-title[b-0r0o1pu2me] {
    font-size: 12px;
    font-weight: 800;
    color: var(--ec-fg);
    letter-spacing: 0.01em;
}
.ued-permission-choice-hint[b-0r0o1pu2me] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--ec-muted);
}

/* Kind toggle (Main enrolment / Program-only) */
.ued-pill-toggle[b-0r0o1pu2me] {
    display: inline-flex;
    background: var(--ec-bg);
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    padding: 3px;
    margin-bottom: 4px;
}
.ued-pill-toggle-btn[b-0r0o1pu2me] {
    padding: 5px 11px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--ec-muted);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}
.ued-pill-toggle-btn.is-on[b-0r0o1pu2me] {
    background: #fff;
    color: var(--ec-text);
    box-shadow: 0 1px 3px rgba(13,23,51,0.08);
}

.ued-conflict[b-0r0o1pu2me] {
    margin-top: 8px;
    padding: 9px 12px;
    background: var(--ec-amber-lt);
    border: 1px solid #fde68a;
    border-radius: 9px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 11.5px;
    color: #92400e;
    line-height: 1.5;
}
.ued-conflict i[b-0r0o1pu2me] { font-size: 13px; flex-shrink: 0; margin-top: 1px; }

.ued-add-assignment[b-0r0o1pu2me] {
    width: 100%;
    padding: 9px;
    border: 1px dashed var(--ec-border);
    background: transparent;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ec-blue);
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.ued-add-assignment:hover[b-0r0o1pu2me] { background: var(--ec-blue-gh); border-color: var(--ec-blue); }

.ued-more-toggle[b-0r0o1pu2me] {
    background: none;
    border: none;
    color: var(--ec-sub);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}
.ued-more-toggle:hover[b-0r0o1pu2me] { color: var(--ec-text); }

/* Footer */
.ued-footer[b-0r0o1pu2me] {
    padding: 14px 24px;
    border-top: 1px solid var(--ec-border);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    background: #fff;
}

.ued-footer-status[b-0r0o1pu2me] {
    flex: 1;
    font-size: 11.5px;
    color: var(--ec-muted);
    margin: 0;
}

.ued-footer-actions[b-0r0o1pu2me] {
    display: flex;
    gap: 8px;
}

.ued-btn[b-0r0o1pu2me] {
    border-radius: 9px;
    padding: 10px 18px;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: filter 0.15s, background 0.15s;
}
.ued-btn:disabled[b-0r0o1pu2me] { opacity: 0.55; cursor: not-allowed; }

.ued-btn-cancel[b-0r0o1pu2me] {
    background: #fff;
    color: var(--ec-sub);
    border-color: var(--ec-border);
}
.ued-btn-cancel:hover[b-0r0o1pu2me] { background: var(--ec-bg); color: var(--ec-text); }

.ued-btn-save[b-0r0o1pu2me] {
    background: var(--ec-primary);
    color: #fff;
}
.ued-btn-save:hover:not(:disabled)[b-0r0o1pu2me] { filter: brightness(0.93); }

.ued-spinner[b-0r0o1pu2me] {
    width: 14px; height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ued-spin-b-0r0o1pu2me 0.7s linear infinite;
}
@keyframes ued-spin-b-0r0o1pu2me { to { transform: rotate(360deg); } }

/* ── Profile-picture row (optional "More details" section) ─────────── */
.ued-photo-row[b-0r0o1pu2me] {
    display: flex;
    align-items: center;
    gap: 14px;
}
.ued-photo-tile[b-0r0o1pu2me] {
    width: 72px;
    height: 72px;
    border-radius: 14px;
    background: var(--ec-bg);
    border: 1px dashed var(--ec-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.ued-photo-tile img[b-0r0o1pu2me] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ued-photo-letters[b-0r0o1pu2me] {
    font-size: 22px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.04em;
}
.ued-photo-actions[b-0r0o1pu2me] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Upload + Remove side-by-side. The native file input is rendered by
   <InputFile> inside the .ued-photo-upload label — we hide it with
   `display: none` (Blazor's InputFile generator outputs the input as
   a direct child of the label, but a stray label class on the input
   itself can defeat the older `position: absolute` clip trick, so
   `display: none` is the safest). The label + styled span carry the
   visible click target. */
.ued-photo-buttons[b-0r0o1pu2me] {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ued-photo-upload[b-0r0o1pu2me] {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
}
/* `::deep` is required because <InputFile> is a child component, so the
   scoped attribute selector Blazor injects (`[b-xxxx]`) never lands on
   the rendered <input>. Without ::deep the rule above wouldn't match
   and the native "Choose File" button stays visible. */
.ued-photo-upload[b-0r0o1pu2me]  input[type="file"] { display: none; }
.ued-photo-upload > span[b-0r0o1pu2me] {
    padding: 7px 13px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.2;
}
.ued-photo-upload > span:hover[b-0r0o1pu2me] { background: var(--ec-bg); color: var(--ec-text); }

.ued-photo-remove[b-0r0o1pu2me] {
    /* Icon-only button — the upload-photo button next to it carries
       the labelled action; Remove is destructive so a tighter, red-
       tinted icon button reads as the secondary affordance. */
    width: 32px;
    height: 32px;
    padding: 0;
    background: #fff;
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: 8px;
    color: var(--ec-red);
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ued-photo-remove i[b-0r0o1pu2me] { font-size: 13px; }
.ued-photo-remove:hover[b-0r0o1pu2me] { background: var(--ec-red-lt); }

.ued-photo-error[b-0r0o1pu2me] {
    font-size: 11px;
    color: var(--ec-red);
    margin: 0;
}
.ued-photo-status[b-0r0o1pu2me] {
    font-size: 10.5px;
    color: var(--ec-muted);
    font-style: italic;
    margin: 0;
}

/* Inline save-error banner — shown at the top of the body when the
   API rejects the create/update payload. Keeps the admin in the
   editor so they can fix the field without losing their work. */
.ued-error-banner[b-0r0o1pu2me] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--ec-red-lt);
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: 9px;
    color: var(--ec-red);
    font-size: 12.5px;
    font-weight: 600;
}
.ued-error-banner i[b-0r0o1pu2me] { font-size: 14px; flex-shrink: 0; }
.ued-error-banner span[b-0r0o1pu2me] { flex: 1; }
.ued-error-close[b-0r0o1pu2me] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ec-red);
    font-size: 16px;
    line-height: 1;
    padding: 0 4px;
    opacity: 0.7;
}
.ued-error-close:hover[b-0r0o1pu2me] { opacity: 1; }
/* /Components/Pages/Users/UsersPage.razor.rz.scp.css */
/* Users page — mirrors prototype AWUsers (EduConnect All Roles.html 17943-18262).
   Prefix `up2-` to avoid clashing with legacy `up-` classes that the previous
   page+modal markup may have left in scoped bundles. */

.up2-page[b-d8d7c3zqof] {
    padding: 0;
    background: var(--ec-bg);
    min-height: 100%;
}

/* ── KPIs ── */
.up2-kpis[b-d8d7c3zqof] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}

.up2-kpi[b-d8d7c3zqof] {
    min-height: 96px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 13px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.up2-kpi--btn[b-d8d7c3zqof] { cursor: pointer; font-family: inherit; text-align: left; }
.up2-kpi:hover[b-d8d7c3zqof] { border-color: var(--ec-blue); box-shadow: 0 4px 14px rgba(59, 95, 192, 0.08); }

.up2-kpi-icon[b-d8d7c3zqof] {
    width: 42px; height: 42px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.up2-kpi-body[b-d8d7c3zqof] { flex: 1; min-width: 0; }
.up2-kpi-value[b-d8d7c3zqof] { font-size: 22px; font-weight: 800; color: var(--ec-text); line-height: 1; letter-spacing: -0.02em; margin: 0; }
.up2-kpi-label[b-d8d7c3zqof] { font-size: 10px; font-weight: 700; color: var(--ec-muted); text-transform: uppercase; letter-spacing: 0.1em; margin: 5px 0 0; }
.up2-kpi-sub[b-d8d7c3zqof]   { font-size: 11px; color: var(--ec-sub); margin: 3px 0 0; }

/* ── Table panel ── */
.up2-panel[b-d8d7c3zqof] {
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--ec-border);
    overflow: hidden;
}

.up2-toolbar[b-d8d7c3zqof] {
    padding: 12px 18px;
    border-bottom: 1px solid var(--ec-border);
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.up2-tabs[b-d8d7c3zqof] { display: flex; gap: 5px; flex-wrap: wrap; }

.up2-tab[b-d8d7c3zqof] {
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--ec-border);
    background: #fff;
    color: var(--ec-sub);
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.up2-tab:hover:not(.is-active)[b-d8d7c3zqof] { border-color: var(--ec-faint); }

.up2-tab-count[b-d8d7c3zqof] {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    background: var(--ec-border-soft);
    border-radius: 4px;
}

.up2-search[b-d8d7c3zqof] {
    flex: 1;
    min-width: 200px;
    position: relative;
}
.up2-search i[b-d8d7c3zqof] {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    color: var(--ec-muted); font-size: 13px;
}
.up2-search input[b-d8d7c3zqof] {
    width: 100%;
    background: var(--ec-bg);
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    padding: 8px 12px 8px 32px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    color: var(--ec-text);
}
.up2-search input:focus[b-d8d7c3zqof] { border-color: var(--ec-blue); background: #fff; }

.up2-btn[b-d8d7c3zqof] {
    border-radius: 9px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    transition: filter 0.15s;
}
.up2-btn:hover[b-d8d7c3zqof] { filter: brightness(0.95); }
/* Primary "Add user" CTA now uses the shared .ec-btn-primary (institution accent). */
.up2-btn-import[b-d8d7c3zqof] { background: #fff; color: var(--ec-sub); border: 1px solid var(--ec-border); font-weight: 700; padding: 8px 12px; font-size: 11.5px; }

/* ── Table ── */
.up2-thead[b-d8d7c3zqof] {
    display: grid;
    padding: 10px 18px;
    background: var(--ec-bg);
    font-size: 10px;
    font-weight: 700;
    color: var(--ec-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.up2-thead-actions[b-d8d7c3zqof] { text-align: right; }

.up2-row[b-d8d7c3zqof] {
    display: grid;
    padding: 12px 18px;
    border-top: 1px solid var(--ec-border-soft);
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background 0.1s;
}
.up2-row:hover[b-d8d7c3zqof] { background: var(--ec-bg); }

.up2-row-teacher[b-d8d7c3zqof], .up2-row-parent[b-d8d7c3zqof], .up2-row-admin[b-d8d7c3zqof] {
    grid-template-columns: 1.4fr 1.6fr 1.6fr 100px 100px 80px;
}
.up2-row-invites[b-d8d7c3zqof] {
    grid-template-columns: 1.4fr 1.6fr 1fr 130px 110px;
}

.up2-cell-name[b-d8d7c3zqof] {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.up2-av[b-d8d7c3zqof] {
    width: 34px; height: 34px;
    border-radius: 50%;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800;
    flex-shrink: 0;
}
/* Avatar rendered as a profile picture (when the user has one).
   Same circle dimensions as the initials tile so rows don't reflow
   when some users have photos and others don't. */
.up2-av-img[b-d8d7c3zqof] {
    object-fit: cover;
    background: var(--ec-bg);
}

.up2-cell-name-body[b-d8d7c3zqof] { min-width: 0; flex: 1; }
.up2-cell-name-main[b-d8d7c3zqof] { font-size: 12.5px; font-weight: 700; color: var(--ec-text); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up2-cell-name-sub[b-d8d7c3zqof]  { font-size: 10px; color: var(--ec-muted); margin: 2px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.up2-cell-stack[b-d8d7c3zqof] { min-width: 0; }
.up2-cell-stack-main[b-d8d7c3zqof] { font-size: 12px; font-weight: 600; color: var(--ec-text); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up2-cell-stack-sub[b-d8d7c3zqof]  { font-size: 10.5px; color: var(--ec-muted); margin: 2px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up2-cell-stack-row[b-d8d7c3zqof]  { display: flex; align-items: center; gap: 5px; margin-top: 2px; min-width: 0; }
.up2-cell-stack-row .up2-cell-stack-sub[b-d8d7c3zqof] { flex: 1; margin: 0; }

.up2-cell-multi[b-d8d7c3zqof] {
    font-size: 9px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 4px;
    flex-shrink: 0;
    letter-spacing: 0.04em;
}

.up2-pill[b-d8d7c3zqof] {
    font-size: 9.5px;
    font-weight: 800;
    padding: 3px 7px;
    border-radius: 5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    text-align: center;
    align-self: center;
    justify-self: start;
}
.up2-pill-active[b-d8d7c3zqof]   { background: var(--ec-green-lt); color: var(--ec-green); }
.up2-pill-inactive[b-d8d7c3zqof] { background: var(--ec-border-soft); color: var(--ec-muted); }

.up2-cell-joined[b-d8d7c3zqof] { font-size: 11px; color: var(--ec-muted); margin: 0; }

.up2-cell-actions[b-d8d7c3zqof] {
    display: flex;
    justify-content: flex-end;
    gap: 5px;
}

.up2-iconbtn[b-d8d7c3zqof] {
    width: 28px; height: 28px;
    border-radius: 7px;
    background: var(--ec-bg);
    border: 1px solid var(--ec-border);
    cursor: pointer;
    font-size: 11px;
    color: var(--ec-sub);
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.1s, color 0.1s;
}
.up2-iconbtn:hover[b-d8d7c3zqof] { background: var(--ec-blue-gh); color: var(--ec-blue); }

.up2-iconbtn-text[b-d8d7c3zqof] {
    padding: 4px 9px;
    border-radius: 7px;
    background: var(--ec-blue-gh);
    border: 1px solid var(--ec-blue-lt);
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    color: var(--ec-blue);
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.up2-iconbtn-text:hover[b-d8d7c3zqof] { background: var(--ec-blue-lt); }
.up2-iconbtn-danger[b-d8d7c3zqof] {
    background: #fff;
    border: 1px solid var(--ec-border);
    color: var(--ec-red);
}
.up2-iconbtn-danger:hover[b-d8d7c3zqof] { background: #fef2f2; }

.up2-empty[b-d8d7c3zqof] {
    padding: 40px 20px;
    text-align: center;
    font-size: 13px;
    color: var(--ec-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.up2-spinner[b-d8d7c3zqof] {
    width: 16px; height: 16px;
    border: 2px solid var(--ec-border);
    border-top-color: var(--ec-blue);
    border-radius: 50%;
    animation: up2-spin-b-d8d7c3zqof 0.7s linear infinite;
}
@keyframes up2-spin-b-d8d7c3zqof { to { transform: rotate(360deg); } }

.up2-banner[b-d8d7c3zqof] {
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 700;
}
.up2-banner-ok[b-d8d7c3zqof]  { background: var(--ec-green-lt); color: var(--ec-green); border: 1px solid #bbf7d0; }
.up2-banner-err[b-d8d7c3zqof] { background: var(--ec-red-lt);   color: var(--ec-red);   border: 1px solid #fecaca; }

@media (max-width: 1200px) {
    .up2-kpis[b-d8d7c3zqof] { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px) {
    .up2-kpis[b-d8d7c3zqof] { grid-template-columns: repeat(2, 1fr); }
    .up2-row-teacher[b-d8d7c3zqof], .up2-row-parent[b-d8d7c3zqof], .up2-row-admin[b-d8d7c3zqof], .up2-row-invites[b-d8d7c3zqof] {
        grid-template-columns: 1fr;
        gap: 5px;
    }
    .up2-thead[b-d8d7c3zqof] { display: none; }
}

/* ── Confirm modal (reset password + activate/deactivate) ────────── */
.up2-confirm-backdrop[b-d8d7c3zqof] {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 3200;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.up2-confirm-dialog[b-d8d7c3zqof] {
    background: #fff;
    border-radius: 14px;
    width: min(460px, 100%);
    padding: 22px 24px;
    box-shadow: 0 20px 60px -10px rgba(15, 23, 42, 0.35);
}
.up2-confirm-kicker[b-d8d7c3zqof] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-amber);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.up2-confirm-kicker i[b-d8d7c3zqof] { font-size: 12px; }
.up2-confirm-title[b-d8d7c3zqof] {
    font-size: 16px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 8px 0 0;
    line-height: 1.35;
}
.up2-confirm-body[b-d8d7c3zqof] {
    font-size: 12.5px;
    color: var(--ec-sub);
    margin: 10px 0 0;
    line-height: 1.55;
}
.up2-confirm-actions[b-d8d7c3zqof] {
    display: flex;
    gap: 8px;
    margin-top: 20px;
    justify-content: flex-end;
}
.up2-btn-secondary[b-d8d7c3zqof] {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 9px;
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ec-sub);
    cursor: pointer;
    font-family: inherit;
}
.up2-btn-secondary:hover[b-d8d7c3zqof] { background: var(--ec-bg); color: var(--ec-text); }
.up2-btn-primary[b-d8d7c3zqof] {
    background: var(--ec-purple);
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 8px 16px;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 2px 6px rgba(124, 58, 237, 0.25);
}
.up2-btn-primary:hover[b-d8d7c3zqof] { transform: translateY(-1px); }
.up2-btn-primary.up2-btn-danger[b-d8d7c3zqof] { background: #dc2626; box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25); }
.up2-btn-primary.up2-btn-danger:disabled[b-d8d7c3zqof] { background: #f87171; box-shadow: none; cursor: not-allowed; transform: none; }

/* danger icon button (Reset 2FA shield-x) */
.up2-iconbtn--danger[b-d8d7c3zqof] { color: #dc2626; }
.up2-iconbtn--danger:hover[b-d8d7c3zqof] { background: #fef2f2; }

/* Reset 2FA checklist */
.up2-reset2fa-list[b-d8d7c3zqof] {
    margin: 6px 0 4px 18px;
    padding: 0;
    font-size: 12.5px;
    color: var(--ec-sub);
    line-height: 1.8;
}
/* /Components/Pages/Users/UserViewSheet.razor.rz.scp.css */
/* User view slide-over — prototype AWUserSheet styles. */

.uvs-backdrop[b-wo3kxkg11l] {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 1090;
    animation: uvs-fade-b-wo3kxkg11l 0.15s ease-out;
}
@keyframes uvs-fade-b-wo3kxkg11l { from { opacity: 0; } to { opacity: 1; } }

.uvs-sheet[b-wo3kxkg11l] {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(560px, 95vw);
    background: #fff;
    box-shadow: -12px 0 40px rgba(13, 23, 51, 0.16);
    z-index: 1091;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    animation: uvs-slide-b-wo3kxkg11l 0.22s ease-out;
}
@keyframes uvs-slide-b-wo3kxkg11l { from { transform: translateX(100%); } to { transform: translateX(0); } }

/* Header */
.uvs-hdr[b-wo3kxkg11l] {
    padding: 22px 26px 18px;
    border-bottom: 1px solid var(--ec-border);
    position: relative;
    flex-shrink: 0;
}

.uvs-close[b-wo3kxkg11l] {
    position: absolute; top: 14px; right: 14px;
    width: 32px; height: 32px;
    border-radius: 9px;
    background: #fff;
    border: 1px solid var(--ec-border);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: var(--ec-sub);
    font-family: inherit;
}
.uvs-close:hover[b-wo3kxkg11l] { background: var(--ec-bg); color: var(--ec-text); }

.uvs-hdr-row[b-wo3kxkg11l] {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    padding-right: 42px;
}

.uvs-av[b-wo3kxkg11l] {
    width: 56px; height: 56px;
    border-radius: 50%;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; font-weight: 800;
    flex-shrink: 0;
    overflow: hidden;
}
.uvs-av-img[b-wo3kxkg11l] { width: 100%; height: 100%; object-fit: cover; }

.uvs-hdr-body[b-wo3kxkg11l] { flex: 1; min-width: 0; }

.uvs-hdr-name-row[b-wo3kxkg11l] {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.uvs-hdr-name[b-wo3kxkg11l] {
    font-size: 18px;
    font-weight: 800;
    color: var(--ec-text);
    margin: 0;
}

.uvs-hdr-contact[b-wo3kxkg11l] {
    font-size: 12px;
    color: var(--ec-muted);
    margin: 4px 0 0;
}

.uvs-pill[b-wo3kxkg11l] {
    font-size: 9.5px;
    font-weight: 800;
    padding: 3px 7px;
    border-radius: 5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.uvs-pill-active[b-wo3kxkg11l]   { background: var(--ec-green-lt); color: var(--ec-green); }
.uvs-pill-inactive[b-wo3kxkg11l] { background: var(--ec-border-soft); color: var(--ec-muted); }

/* Body */
.uvs-body[b-wo3kxkg11l] {
    padding: 18px 26px 26px;
    display: flex;
    flex-direction: column;
}

.uvs-section[b-wo3kxkg11l] { margin-bottom: 14px; }
.uvs-section-label[b-wo3kxkg11l] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 7px;
}

.uvs-assignments[b-wo3kxkg11l] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.uvs-assignment[b-wo3kxkg11l] {
    padding: 10px 12px;
    border: 1px solid;
    border-radius: 9px;
}

.uvs-assignment-role[b-wo3kxkg11l] {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin: 0 0 3px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.uvs-assignment-loc[b-wo3kxkg11l] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ec-text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}
.uvs-assignment-loc i[b-wo3kxkg11l] { color: var(--ec-sub); }

.uvs-assignment-inst[b-wo3kxkg11l] {
    font-size: 10.5px;
    color: var(--ec-muted);
    margin: 2px 0 0;
}

.uvs-assignment-detail[b-wo3kxkg11l] {
    font-size: 11.5px;
    color: var(--ec-sub);
    margin: 5px 0 0;
    line-height: 1.4;
}

.uvs-assignment-detail-label[b-wo3kxkg11l] {
    font-weight: 700;
    color: var(--ec-text);
    margin-right: 4px;
}

.uvs-tag-mini[b-wo3kxkg11l] {
    display: inline-block;
    margin-left: 6px;
    font-size: 9px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--ec-amber-lt);
    color: var(--ec-amber);
    letter-spacing: 0.04em;
}

/* Field rows */
.uvs-fields[b-wo3kxkg11l] {
    display: flex;
    flex-direction: column;
    margin-top: 4px;
}

.uvs-field[b-wo3kxkg11l] {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 11px;
    padding: 10px 0;
    border-top: 1px solid var(--ec-border-soft);
}
.uvs-field:first-child[b-wo3kxkg11l] { border-top: none; }

.uvs-field-label[b-wo3kxkg11l] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ec-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
}

.uvs-field-value[b-wo3kxkg11l] {
    font-size: 13px;
    color: var(--ec-text);
    line-height: 1.5;
    margin: 0;
}

/* Footer actions */
.uvs-actions[b-wo3kxkg11l] {
    display: flex;
    gap: 7px;
    padding-top: 14px;
    margin-top: 8px;
    border-top: 1px solid var(--ec-border-soft);
}

.uvs-btn[b-wo3kxkg11l] {
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    padding: 10px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid transparent;
    transition: filter 0.15s, background 0.15s, color 0.15s;
}

.uvs-btn-primary[b-wo3kxkg11l] {
    flex: 1;
    background: var(--ec-primary);
    color: #fff;
}
.uvs-btn-primary:hover[b-wo3kxkg11l] { filter: brightness(0.93); }

.uvs-btn-ghost[b-wo3kxkg11l] {
    background: #fff;
    color: var(--ec-amber);
    border-color: var(--ec-border);
    font-weight: 700;
}
.uvs-btn-ghost:hover[b-wo3kxkg11l] { background: var(--ec-bg); }

.uvs-btn-danger[b-wo3kxkg11l] {
    background: #fff;
    color: var(--ec-red);
    border-color: var(--ec-border);
    padding: 10px 12px;
}
.uvs-btn-danger:hover[b-wo3kxkg11l] { background: #fef2f2; }