/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* The silent reconnect (owner, 2026-10-09 «صمت تام»): Blazor needs the #components-reconnect-modal
   element to raise its reconnect states, and it toggles state classes on it - every one of them stays
   invisible. ReconnectModal.razor.js does the reconnecting, resuming and idle reloading. */
#components-reconnect-modal[b-cu1g6a19ei],
#components-reconnect-modal[open][b-cu1g6a19ei],
#components-reconnect-modal.components-reconnect-show[b-cu1g6a19ei],
#components-reconnect-modal.components-reconnect-retrying[b-cu1g6a19ei],
#components-reconnect-modal.components-reconnect-failed[b-cu1g6a19ei],
#components-reconnect-modal.components-reconnect-rejected[b-cu1g6a19ei],
#components-reconnect-modal.components-reconnect-paused[b-cu1g6a19ei],
#components-reconnect-modal.components-reconnect-resume-failed[b-cu1g6a19ei] {
    display: none !important;
}
/* /Components/Pages/AbsenceReport.razor.rz.scp.css */
.st-chip[b-p4pigejsz5] {
    min-width: 32px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid rgba(143, 155, 186, .35);
    border-radius: 8px;
    background: var(--card);
    color: var(--text-muted);
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    transition: all .12s ease;
}

.st-chip:hover[b-p4pigejsz5] {
    border-color: rgba(143, 155, 186, .7);
}

.st-chip.on[b-p4pigejsz5] {
    color: #fff;
    background: var(--blue);
    border-color: var(--blue);
}

.prep-line[b-p4pigejsz5] { font-size: 12px; margin-top: 8px; }

/* the attention card (the staff report's sheet, the student report's codes) */
.attention[b-p4pigejsz5] { border-radius: 20px; box-shadow: var(--shadow); border-inline-start: 4px solid var(--red); }
.attention__title[b-p4pigejsz5] { font-weight: 800; font-size: 14px; margin-bottom: 6px; }
.attention__line[b-p4pigejsz5] { font-size: 13px; padding: 3px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; }
.attention__line a[b-p4pigejsz5] { color: inherit; text-decoration: none; }

/* reason tags and the Bradford band pill */
.pill[b-p4pigejsz5] { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 6px; margin-inline-start: 4px; white-space: nowrap; }
.band-Act[b-p4pigejsz5] { background: rgba(185, 28, 28, .12); color: var(--fx-fg-b91c1c); }
.band-Watch[b-p4pigejsz5] { background: rgba(245, 158, 11, .16); color: #b45309; }
.band-Low[b-p4pigejsz5] { background: rgba(143, 155, 186, .14); color: var(--text-muted); }
.band-Grey[b-p4pigejsz5] { background: rgba(143, 155, 186, .14); color: var(--text-muted); }

/* the pattern row */
.patterns[b-p4pigejsz5]  .mud-expand-panel { border-radius: 20px; box-shadow: var(--shadow); }
.patterns__grid[b-p4pigejsz5] { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.panel[b-p4pigejsz5] { background: var(--bg); border-radius: 14px; padding: 12px 14px; min-height: 120px; }
.panel__title[b-p4pigejsz5] { font-size: 12.5px; font-weight: 700; color: var(--text-muted); margin-bottom: 8px; }

.hbar[b-p4pigejsz5] { display: grid; grid-template-columns: minmax(90px, 1.2fr) 2fr minmax(70px, auto); align-items: center; gap: 8px; font-size: 12px; padding: 2px 0; cursor: pointer; }
.hbar__label[b-p4pigejsz5] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.hbar__track[b-p4pigejsz5] { height: 8px; background: rgba(143, 155, 186, .18); border-radius: 4px; overflow: hidden; }
.hbar__fill[b-p4pigejsz5] { height: 100%; border-radius: 4px; background: var(--red); }
.hbar__fill.band-Watch[b-p4pigejsz5] { background: var(--amber); }
.hbar__fill.band-Low[b-p4pigejsz5] { background: var(--text-muted); }
.hbar__value[b-p4pigejsz5] { text-align: end; font-weight: 700; white-space: nowrap; }

.vbars[b-p4pigejsz5] { display: flex; align-items: flex-end; gap: 6px; height: 96px; }
.vbar[b-p4pigejsz5] { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; height: 100%; }
.vbar__value[b-p4pigejsz5] { font-size: 10.5px; color: var(--text-muted); height: 14px; }
.vbar__track[b-p4pigejsz5] { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.vbar__fill[b-p4pigejsz5] { width: 100%; background: var(--red); border-radius: 3px 3px 0 0; min-height: 0; }
.vbar__label[b-p4pigejsz5] { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; margin-top: 3px; }

/* the table */
.abs-table th.sortable[b-p4pigejsz5] { cursor: pointer; user-select: none; }
.abs-table tr.quiet td[b-p4pigejsz5] { color: var(--text-muted); font-weight: 400; }
.rate[b-p4pigejsz5] { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; font-weight: 700; }
.rate__track[b-p4pigejsz5] { width: 64px; height: 5px; background: rgba(143, 155, 186, .18); border-radius: 3px; overflow: hidden; }
.rate__fill[b-p4pigejsz5] { height: 100%; background: currentColor; border-radius: 3px; }
.rate.band-Low[b-p4pigejsz5] { background: none; color: inherit; }
.rate.band-Watch[b-p4pigejsz5] { background: none; color: #b45309; }
.rate.band-Act[b-p4pigejsz5] { background: none; color: var(--fx-fg-b91c1c); }
.delta[b-p4pigejsz5] { font-weight: 700; margin-inline-start: 4px; }

/* the expander: date chips beside the mini calendar (weeks as rows, the PDF's seven cell codes) */
.expander[b-p4pigejsz5] { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: start; }
.minical[b-p4pigejsz5] { display: grid; grid-template-columns: repeat(7, 30px); gap: 2px; }
.minical__head[b-p4pigejsz5] { font-size: 9.5px; color: var(--text-muted); text-align: center; }
.minical__cell[b-p4pigejsz5] { height: 24px; border-radius: 4px; font-size: 10px; display: flex; align-items: center; justify-content: center; gap: 2px; background: var(--card); border: 1px solid rgba(143, 155, 186, .25); }
.minical__cell small[b-p4pigejsz5] { font-size: 8.5px; font-weight: 800; }
.minical__cell.blank[b-p4pigejsz5] { background: none; border: none; }
.minical__cell.c-N[b-p4pigejsz5] { border-style: dotted; color: rgba(143, 155, 186, .6); }
.minical__cell.c-O[b-p4pigejsz5] { background: rgba(143, 155, 186, .14); border-color: transparent; color: var(--text-muted); }
.minical__cell.c-H[b-p4pigejsz5] { background: rgba(143, 155, 186, .3); border-color: transparent; color: var(--text-muted); }
.minical__cell.c-A[b-p4pigejsz5] { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.minical__cell.c-L[b-p4pigejsz5] { background: #f59e0b; border-color: #f59e0b; color: #fff; }
.minical__cell.c-E[b-p4pigejsz5] { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.minical__cell.c-U[b-p4pigejsz5] { background: var(--amber-soft); border-color: var(--amber); border-style: dashed; color: var(--text-muted); }

@media (max-width: 900px) {
    .hide-sm[b-p4pigejsz5] { display: none; }
    .patterns[b-p4pigejsz5] { display: none; }
    .expander[b-p4pigejsz5] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Communication.razor.rz.scp.css */
/* Communication.razor.css — the staff messaging workspace (the owner's desktop mockup, 2026-10-18;
   D:/tmp/ux-design-spec.md §4 §6 §7). Three panes: the list (360px), the thread (flexible), the
   details (320px). Colours come from the app's own tokens in wwwroot/app.css (--bg, --card, --border,
   --text, --primary and the data-theme="dark" palette) so the theme toggle keeps working; the only
   value of the spec's own is the secondary-text grey, because the app's --text-muted (#8f9bba) reads
   2.6:1 on white and WCAG AA wants 4.5:1. Logical properties only — the page is RTL for ar/ku —
   and motion is transform/opacity at 150-220 ms, shortened to a fade under prefers-reduced-motion. */

.cm-page[b-r6z2t9jx2a] {
    --cm-bg: var(--bg);
    --cm-card: var(--card);
    --cm-border: var(--border);
    --cm-border-soft: var(--border-soft);
    --cm-text: var(--text);
    --cm-muted: #6b7280;
    --cm-accent: var(--primary);          /* fills under white text */
    --cm-accent-ink: var(--primary-ink);  /* the accent as text and lines (bright in dark mode) */
    --cm-accent-soft: var(--primary-soft);
    --cm-accent-light: var(--primary-light);
    --cm-success: #0f766e;
    --cm-warning: #b45309;
    --cm-danger: #e5484d;
    --cm-surface-2: var(--surface-2);
    --cm-in: var(--card);
    --cm-out: var(--primary-soft);
    --cm-radius: 8px;
    --cm-radius-sm: 6px;
    --cm-slide: 100%;
    --cm-ease: cubic-bezier(.2, .7, .2, 1);
    --cm-shadow: 0 10px 30px rgba(16, 24, 40, .14);
    color: var(--cm-text);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

[data-theme="dark"] .cm-page[b-r6z2t9jx2a] {
    --cm-muted: var(--text-muted);
    --cm-success: #2dd4bf;
    --cm-warning: #fbbf24;
    --cm-danger: #f87171;
    --cm-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}

[dir="rtl"] .cm-page[b-r6z2t9jx2a] { --cm-slide: -100%; }

/* ───────────── header row ───────────── */
.cm-head[b-r6z2t9jx2a] { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 6px 0 16px; }
.cm-head__actions[b-r6z2t9jx2a] { display: flex; gap: 8px; flex-wrap: wrap; }

/* ───────────── the three panes ───────────── */
.cm-work[b-r6z2t9jx2a] {
    position: relative;
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr) 320px;
    height: calc(100vh - 190px);
    height: calc(100dvh - 190px);
    min-height: 540px;
    background: var(--cm-card);
    border: 1px solid var(--cm-border);
    border-radius: 12px;
    overflow: hidden;
}

.cm-list[b-r6z2t9jx2a], .cm-thread[b-r6z2t9jx2a], .cm-details[b-r6z2t9jx2a] { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.cm-list[b-r6z2t9jx2a] { border-inline-end: 1px solid var(--cm-border); background: var(--cm-card); }
.cm-thread[b-r6z2t9jx2a] { background: var(--cm-bg); position: relative; }
.cm-details[b-r6z2t9jx2a] { border-inline-start: 1px solid var(--cm-border); background: var(--cm-card); }

/* ───────────── shared atoms ───────────── */
.cm-ibtn[b-r6z2t9jx2a] {
    width: 36px; height: 36px; border-radius: var(--cm-radius); border: none; background: transparent;
    color: var(--cm-muted); display: inline-grid; place-items: center; cursor: pointer; flex: none;
    transition: background .15s var(--cm-ease), color .15s var(--cm-ease), transform .15s var(--cm-ease);
    font-family: inherit;
}
.cm-ibtn:hover[b-r6z2t9jx2a] { background: var(--cm-surface-2); color: var(--cm-text); }
.cm-ibtn:active[b-r6z2t9jx2a] { transform: scale(.94); }
.cm-ibtn--on[b-r6z2t9jx2a] { background: var(--cm-accent-soft); color: var(--cm-accent-ink); }
.cm-ibtn--sm[b-r6z2t9jx2a] { width: 30px; height: 30px; }
.cm-ibtn[b-r6z2t9jx2a]  svg { width: 20px; height: 20px; }
.cm-ibtn--sm[b-r6z2t9jx2a]  svg { width: 18px; height: 18px; }
.cm-ibtn:focus-visible[b-r6z2t9jx2a], .cm-row__btn:focus-visible[b-r6z2t9jx2a], .cm-tab:focus-visible[b-r6z2t9jx2a], .cm-chip:focus-visible[b-r6z2t9jx2a],
.cm-act:focus-visible[b-r6z2t9jx2a], .cm-send:focus-visible[b-r6z2t9jx2a], .cm-new:focus-visible[b-r6z2t9jx2a], .cm-link:focus-visible[b-r6z2t9jx2a],
.cm-menu__item:focus-visible[b-r6z2t9jx2a], .cm-person:focus-visible[b-r6z2t9jx2a], .cm-img:focus-visible[b-r6z2t9jx2a], .cm-primary-btn:focus-visible[b-r6z2t9jx2a],
.cm-seg__btn:focus-visible[b-r6z2t9jx2a], .cm-row__pin:focus-visible[b-r6z2t9jx2a], .cm-emoji__btn:focus-visible[b-r6z2t9jx2a], .cm-reactbar__btn:focus-visible[b-r6z2t9jx2a] {
    outline: 2px solid var(--cm-accent-ink); outline-offset: 2px;
}

[dir="rtl"] .cm-mirror[b-r6z2t9jx2a]  svg { transform: scaleX(-1); }

.cm-ava[b-r6z2t9jx2a] {
    width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none;
    color: #fff; font-weight: 700; font-size: 14px; position: relative; letter-spacing: .02em;
}
.cm-ava--sm[b-r6z2t9jx2a] { width: 30px; height: 30px; font-size: 11px; }
.cm-ava--lg[b-r6z2t9jx2a] { width: 56px; height: 56px; font-size: 18px; }
.cm-ava[b-r6z2t9jx2a]  svg { width: 20px; height: 20px; }
.cm-dot[b-r6z2t9jx2a] {
    position: absolute; bottom: 0; inset-inline-end: 0; width: 11px; height: 11px; border-radius: 50%;
    background: var(--cm-success); border: 2px solid var(--cm-card);
}
.cm-ava--lg .cm-dot[b-r6z2t9jx2a] { width: 14px; height: 14px; }

.cm-badge[b-r6z2t9jx2a] {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--cm-accent);
    color: #fff; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; line-height: 1;
}

.cm-input[b-r6z2t9jx2a] {
    width: 100%; border: 1px solid var(--cm-border); border-radius: var(--cm-radius); padding: 8px 12px;
    font-size: 13px; outline: none; background: var(--cm-card); color: var(--cm-text); font-family: inherit;
    transition: border-color .15s var(--cm-ease), box-shadow .15s var(--cm-ease);
}
.cm-input:focus[b-r6z2t9jx2a] { border-color: var(--cm-accent-ink); box-shadow: 0 0 0 3px var(--cm-accent-light); }
.cm-input[b-r6z2t9jx2a]::placeholder { color: var(--cm-muted); }

.cm-primary-btn[b-r6z2t9jx2a] {
    background: var(--cm-accent); color: #fff; border: none; border-radius: var(--cm-radius); padding: 10px 14px;
    font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit; transition: opacity .15s, transform .15s var(--cm-ease);
}
.cm-primary-btn:hover[b-r6z2t9jx2a] { opacity: .92; }
.cm-primary-btn:active[b-r6z2t9jx2a] { transform: scale(.98); }
.cm-primary-btn:disabled[b-r6z2t9jx2a] { background: var(--cm-border); color: var(--cm-muted); cursor: default; transform: none; }

.cm-empty[b-r6z2t9jx2a] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--cm-muted); padding: 40px 16px; font-size: 13px; text-align: center; }
.cm-empty__ic[b-r6z2t9jx2a] { color: var(--cm-muted); opacity: .7; }
.cm-empty__ic[b-r6z2t9jx2a]  svg { width: 40px; height: 40px; }

.cm-sr[b-r6z2t9jx2a] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* popover menus */
.cm-menu[b-r6z2t9jx2a] {
    position: absolute; z-index: 40; min-width: 220px; background: var(--cm-card); border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius); box-shadow: var(--cm-shadow); padding: 6px; display: flex; flex-direction: column; gap: 2px;
    animation: cmPop-b-r6z2t9jx2a .16s var(--cm-ease) both;
}
.cm-menu__item[b-r6z2t9jx2a] {
    display: flex; align-items: center; gap: 10px; width: 100%; border: none; background: transparent; color: var(--cm-text);
    padding: 9px 10px; border-radius: var(--cm-radius-sm); font-size: 13.5px; font-weight: 600; cursor: pointer; text-align: start;
    font-family: inherit; text-decoration: none;
}
.cm-menu__item:hover[b-r6z2t9jx2a] { background: var(--cm-surface-2); }
.cm-menu__item[b-r6z2t9jx2a]  svg { width: 18px; height: 18px; color: var(--cm-muted); }
.cm-menu__item--danger[b-r6z2t9jx2a] { color: var(--cm-danger); }
.cm-backdrop[b-r6z2t9jx2a] { position: fixed; inset: 0; z-index: 35; background: transparent; border: none; cursor: default; }
.cm-backdrop--dim[b-r6z2t9jx2a] { background: rgba(16, 24, 40, .35); animation: cmFade-b-r6z2t9jx2a .2s var(--cm-ease) both; }

/* ───────────── left pane: the list ───────────── */
.cm-list__top[b-r6z2t9jx2a] { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 8px; position: relative; }
.cm-list__title[b-r6z2t9jx2a] { font-size: 18px; font-weight: 800; margin: 0; }
.cm-new[b-r6z2t9jx2a] {
    width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--cm-accent); color: #fff; cursor: pointer;
    display: grid; place-items: center; box-shadow: 0 4px 12px rgb(var(--primary-rgb) / .28); transition: transform .15s var(--cm-ease), opacity .15s;
}
.cm-new:hover[b-r6z2t9jx2a] { opacity: .92; }
.cm-new:active[b-r6z2t9jx2a] { transform: scale(.94); }
.cm-new[b-r6z2t9jx2a]  svg { width: 20px; height: 20px; }
.cm-list__top .cm-menu[b-r6z2t9jx2a] { top: 52px; inset-inline-end: 16px; }

.cm-tabs[b-r6z2t9jx2a] { display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--cm-border); }
.cm-tab[b-r6z2t9jx2a] {
    position: relative; border: none; background: transparent; color: var(--cm-muted); font-size: 13px; font-weight: 700;
    padding: 10px 10px 11px; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    transition: color .15s var(--cm-ease);
}
.cm-tab[b-r6z2t9jx2a]::after { content: ""; position: absolute; inset-inline: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--cm-accent); transform: scaleX(0); transition: transform .15s var(--cm-ease); }
.cm-tab:hover[b-r6z2t9jx2a] { color: var(--cm-text); }
.cm-tab--on[b-r6z2t9jx2a] { color: var(--cm-accent-ink); }
.cm-tab--on[b-r6z2t9jx2a]::after { transform: scaleX(1); }
.cm-tab__n[b-r6z2t9jx2a] { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--cm-surface-2); color: var(--cm-muted); font-size: 11px; display: inline-grid; place-items: center; }
.cm-tab--on .cm-tab__n[b-r6z2t9jx2a] { background: var(--cm-accent-soft); color: var(--cm-accent-ink); }

.cm-search[b-r6z2t9jx2a] { padding: 10px 12px 6px; position: relative; display: flex; align-items: center; gap: 6px; }
.cm-search .cm-input[b-r6z2t9jx2a] { padding-inline-start: 34px; }
.cm-search__ic[b-r6z2t9jx2a] { position: absolute; inset-inline-start: 22px; top: 50%; transform: translateY(-50%); color: var(--cm-muted); display: grid; pointer-events: none; }
.cm-search__ic[b-r6z2t9jx2a]  svg { width: 18px; height: 18px; }
.cm-search--picker[b-r6z2t9jx2a] { padding-top: 12px; }
.cm-search--picker .cm-input[b-r6z2t9jx2a] { padding-inline-start: 12px; }

.cm-chips[b-r6z2t9jx2a] { display: flex; gap: 6px; padding: 4px 12px 8px; overflow-x: auto; scrollbar-width: none; align-items: center; position: relative; }
.cm-chips[b-r6z2t9jx2a]::-webkit-scrollbar { display: none; }
.cm-chip[b-r6z2t9jx2a] {
    border: 1px solid var(--cm-border); background: var(--cm-card); color: var(--cm-muted); font-size: 12.5px; font-weight: 600;
    padding: 5px 11px; border-radius: 999px; cursor: pointer; white-space: nowrap; font-family: inherit; flex: none;
    transition: background .15s var(--cm-ease), color .15s var(--cm-ease), border-color .15s var(--cm-ease); text-decoration: none;
    display: inline-flex; align-items: center; gap: 4px;
}
.cm-chip:hover[b-r6z2t9jx2a] { border-color: var(--cm-accent-ink); color: var(--cm-accent-ink); }
.cm-chip--on[b-r6z2t9jx2a] { background: var(--cm-accent); border-color: var(--cm-accent); color: #fff; }
.cm-chip--on:hover[b-r6z2t9jx2a] { color: #fff; }
.cm-chip[b-r6z2t9jx2a]  svg { width: 14px; height: 14px; }
.cm-filter-btn[b-r6z2t9jx2a] { position: relative; margin-inline-start: auto; }
.cm-filter-btn__dot[b-r6z2t9jx2a] { position: absolute; top: 6px; inset-inline-end: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--cm-accent); border: 2px solid var(--cm-card); }
.cm-pop-anchor[b-r6z2t9jx2a] { position: relative; height: 0; }
.cm-pop[b-r6z2t9jx2a] { position: absolute; top: 0; inset-inline-end: 12px; z-index: 40; width: 280px; max-width: calc(100% - 24px); background: var(--cm-card); border: 1px solid var(--cm-border); border-radius: var(--cm-radius); box-shadow: var(--cm-shadow); padding: 12px; display: flex; flex-direction: column; gap: 8px; animation: cmPop-b-r6z2t9jx2a .16s var(--cm-ease) both; }
.cm-pop__label[b-r6z2t9jx2a] { font-size: 11.5px; font-weight: 700; color: var(--cm-muted); }

.cm-scope[b-r6z2t9jx2a] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 0 12px 8px; font-size: 11.5px; color: var(--cm-muted); }
.cm-scope .cm-chip[b-r6z2t9jx2a] { font-size: 11.5px; padding: 3px 9px; }
.cm-scope__info[b-r6z2t9jx2a] { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--cm-muted); cursor: help; margin-inline-start: auto; border: none; background: transparent; }
.cm-scope__info[b-r6z2t9jx2a]  svg { width: 16px; height: 16px; }

.cm-rows[b-r6z2t9jx2a] { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.cm-rows[b-r6z2t9jx2a]::-webkit-scrollbar, .cm-body[b-r6z2t9jx2a]::-webkit-scrollbar, .cm-details__body[b-r6z2t9jx2a]::-webkit-scrollbar, .cm-people[b-r6z2t9jx2a]::-webkit-scrollbar { width: 7px; }
.cm-rows[b-r6z2t9jx2a]::-webkit-scrollbar-thumb, .cm-body[b-r6z2t9jx2a]::-webkit-scrollbar-thumb, .cm-details__body[b-r6z2t9jx2a]::-webkit-scrollbar-thumb, .cm-people[b-r6z2t9jx2a]::-webkit-scrollbar-thumb { background: var(--cm-border); border-radius: 4px; }

.cm-row[b-r6z2t9jx2a] { position: relative; border-radius: var(--cm-radius); }
.cm-row__btn[b-r6z2t9jx2a] {
    width: 100%; min-height: 64px; display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: none; border-radius: var(--cm-radius);
    background: transparent; color: var(--cm-text); text-align: start; cursor: pointer; font-family: inherit; position: relative;
    transition: background .15s var(--cm-ease);
}
.cm-row__btn[b-r6z2t9jx2a]::before { content: ""; position: absolute; inset-inline-start: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--cm-accent); transform: scaleY(0); transition: transform .15s var(--cm-ease); }
.cm-row__btn:hover[b-r6z2t9jx2a] { background: var(--cm-surface-2); }
.cm-row--on .cm-row__btn[b-r6z2t9jx2a] { background: var(--cm-accent-soft); }
.cm-row--on .cm-row__btn[b-r6z2t9jx2a]::before { transform: scaleY(1); }
.cm-row__body[b-r6z2t9jx2a] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cm-row__name[b-r6z2t9jx2a] { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-row__sub[b-r6z2t9jx2a] { font-size: 11.5px; color: var(--cm-accent-ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-row__sub--staff[b-r6z2t9jx2a] { color: var(--cm-muted); }
.cm-row__snip[b-r6z2t9jx2a] { font-size: 12.5px; color: var(--cm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-row--unread .cm-row__snip[b-r6z2t9jx2a] { color: var(--cm-text); font-weight: 600; }
.cm-row__meta[b-r6z2t9jx2a] { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; min-width: 42px; padding-inline-end: 30px; }
.cm-row__time[b-r6z2t9jx2a] { font-size: 11px; color: var(--cm-muted); white-space: nowrap; }
.cm-row__flags[b-r6z2t9jx2a] { display: flex; align-items: center; gap: 4px; }
.cm-await[b-r6z2t9jx2a] { color: var(--cm-warning); display: grid; }
.cm-await[b-r6z2t9jx2a]  svg, .cm-mute[b-r6z2t9jx2a]  svg { width: 16px; height: 16px; }
.cm-mute[b-r6z2t9jx2a] { color: var(--cm-muted); display: grid; }
.cm-row__pin[b-r6z2t9jx2a] {
    position: absolute; inset-inline-end: 8px; top: 8px; width: 26px; height: 26px; border-radius: 50%; border: none; background: transparent;
    color: var(--cm-muted); display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .15s var(--cm-ease), transform .15s var(--cm-ease);
}
.cm-row__pin[b-r6z2t9jx2a]  svg { width: 16px; height: 16px; }
.cm-row:hover .cm-row__pin[b-r6z2t9jx2a], .cm-row:focus-within .cm-row__pin[b-r6z2t9jx2a], .cm-row__pin--on[b-r6z2t9jx2a] { opacity: 1; }
.cm-row__pin--on[b-r6z2t9jx2a] { color: var(--cm-accent-ink); }
.cm-row__pin:active[b-r6z2t9jx2a] { transform: scale(.9); }

.cm-skel[b-r6z2t9jx2a] { display: flex; align-items: center; gap: 12px; padding: 12px 10px; }
.cm-skel__ava[b-r6z2t9jx2a] { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.cm-skel__line[b-r6z2t9jx2a] { height: 10px; border-radius: 5px; margin: 6px 0; }
.cm-skel__ava[b-r6z2t9jx2a], .cm-skel__line[b-r6z2t9jx2a] { background: linear-gradient(90deg, var(--cm-surface-2) 25%, var(--cm-border-soft) 37%, var(--cm-surface-2) 63%); background-size: 400% 100%; animation: cmShimmer-b-r6z2t9jx2a 1.2s ease infinite; }

/* pickers (new family thread / colleague / new group) */
.cm-picker[b-r6z2t9jx2a] { display: flex; flex-direction: column; gap: 8px; padding: 6px 12px 12px; flex: 1; min-height: 0; }
.cm-picker__head[b-r6z2t9jx2a] { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; padding: 8px 12px 0; }
.cm-picker__hint[b-r6z2t9jx2a] { font-size: 11.5px; line-height: 1.5; color: var(--cm-muted); padding: 0 12px; }
.cm-seg[b-r6z2t9jx2a] { display: flex; gap: 6px; }
.cm-seg__btn[b-r6z2t9jx2a] { flex: 1; border: 1px solid var(--cm-border); background: var(--cm-card); color: var(--cm-muted); font-size: 12.5px; font-weight: 600; padding: 6px 8px; border-radius: var(--cm-radius-sm); cursor: pointer; font-family: inherit; transition: background .15s, color .15s, border-color .15s; }
.cm-seg__btn--on[b-r6z2t9jx2a] { background: var(--cm-accent); border-color: var(--cm-accent); color: #fff; }
.cm-people[b-r6z2t9jx2a] { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overflow-y: auto; }
.cm-people__group[b-r6z2t9jx2a] { font-size: 11px; font-weight: 800; color: var(--cm-muted); padding: 8px 10px 2px; }
.cm-person[b-r6z2t9jx2a] {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--cm-radius); cursor: pointer; border: none; background: transparent;
    width: 100%; text-align: start; color: var(--cm-text); font-family: inherit;
}
.cm-person:hover[b-r6z2t9jx2a] { background: var(--cm-surface-2); }
.cm-person--off[b-r6z2t9jx2a] { opacity: .55; cursor: default; }
.cm-person__name[b-r6z2t9jx2a] { font-size: 13.5px; font-weight: 700; }
.cm-person__sub[b-r6z2t9jx2a] { font-size: 11.5px; color: var(--cm-muted); }
.cm-person input[type=checkbox][b-r6z2t9jx2a] { width: 17px; height: 17px; accent-color: var(--cm-accent); cursor: pointer; flex: none; }

/* ───────────── center pane: the thread ───────────── */
.cm-thread__head[b-r6z2t9jx2a] { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--cm-card); border-bottom: 1px solid var(--cm-border); position: relative; z-index: 5; }
.cm-thread__who[b-r6z2t9jx2a] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cm-thread__name[b-r6z2t9jx2a] { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-thread__sub[b-r6z2t9jx2a] { font-size: 12px; color: var(--cm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-thread__sub--kids[b-r6z2t9jx2a] { color: var(--cm-accent-ink); font-weight: 600; }
.cm-thread__sub--online[b-r6z2t9jx2a] { color: var(--cm-success); font-weight: 600; }
.cm-thread__acts[b-r6z2t9jx2a] { display: flex; align-items: center; gap: 2px; flex: none; position: relative; }
.cm-thread__acts .cm-menu[b-r6z2t9jx2a] { top: 42px; inset-inline-end: 0; }
.cm-back[b-r6z2t9jx2a] { display: none; }

.cm-searchbar[b-r6z2t9jx2a] { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--cm-card); border-bottom: 1px solid var(--cm-border); animation: cmDrop-b-r6z2t9jx2a .15s var(--cm-ease) both; }
.cm-searchbar .cm-input[b-r6z2t9jx2a] { flex: 1; }
.cm-searchbar__n[b-r6z2t9jx2a] { font-size: 12px; color: var(--cm-muted); font-weight: 700; white-space: nowrap; }

.cm-body[b-r6z2t9jx2a] { flex: 1; min-height: 0; overflow-y: auto; padding: 16px clamp(14px, 5%, 48px) 12px; display: flex; flex-direction: column; gap: 2px; }
.cm-day[b-r6z2t9jx2a] { align-self: center; background: var(--cm-card); border: 1px solid var(--cm-border); color: var(--cm-muted); font-size: 11.5px; font-weight: 700; padding: 3px 12px; border-radius: 999px; margin: 12px 0 8px; }

.cm-msg[b-r6z2t9jx2a] { display: flex; align-items: flex-end; gap: 8px; align-self: flex-start; max-width: min(78%, 640px); position: relative; animation: cmRise-b-r6z2t9jx2a .18s var(--cm-ease) both; }
.cm-msg--out[b-r6z2t9jx2a] { align-self: flex-end; flex-direction: row-reverse; }
.cm-msg--start[b-r6z2t9jx2a] { margin-top: 10px; }
.cm-bubble[b-r6z2t9jx2a] {
    position: relative; background: var(--cm-in); color: var(--cm-text); border: 1px solid var(--cm-border); border-radius: var(--cm-radius);
    padding: 10px 14px 8px; font-size: 14px; line-height: 1.45; min-width: 0; max-width: 100%;
}
.cm-msg--out .cm-bubble[b-r6z2t9jx2a] { background: var(--cm-out); border-color: transparent; }
.cm-msg--start.cm-msg--in .cm-bubble[b-r6z2t9jx2a] { border-start-start-radius: 2px; }
.cm-msg--start.cm-msg--out .cm-bubble[b-r6z2t9jx2a] { border-start-end-radius: 2px; }
.cm-bubble__sender[b-r6z2t9jx2a] { font-size: 12px; font-weight: 700; color: var(--cm-accent-ink); margin-bottom: 2px; }
.cm-quote[b-r6z2t9jx2a] { border-inline-start: 3px solid var(--cm-accent-ink); background: rgba(127, 127, 127, .10); padding: 4px 8px; border-radius: var(--cm-radius-sm); font-size: 12.5px; color: var(--cm-muted); margin-bottom: 6px; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-text[b-r6z2t9jx2a] { white-space: pre-wrap; word-break: break-word; }
.cm-text[b-r6z2t9jx2a]  a, .cm-text a[b-r6z2t9jx2a] { color: var(--cm-accent-ink); text-decoration: underline; }
.cm-meta[b-r6z2t9jx2a] { display: flex; align-items: center; justify-content: flex-end; gap: 4px; font-size: 10.5px; color: var(--cm-muted); margin-top: 4px; }
.cm-edited[b-r6z2t9jx2a] { font-style: italic; }
.cm-ticks[b-r6z2t9jx2a] { display: inline-grid; color: var(--cm-muted); transition: color .15s var(--cm-ease); }
.cm-ticks[b-r6z2t9jx2a]  svg { width: 15px; height: 15px; }
.cm-ticks--seen[b-r6z2t9jx2a] { color: var(--cm-accent-ink); }
.cm-removed[b-r6z2t9jx2a] { font-style: italic; color: var(--cm-muted); display: flex; align-items: center; gap: 4px; }
.cm-removed[b-r6z2t9jx2a]  svg { width: 14px; height: 14px; }

.cm-img[b-r6z2t9jx2a] { border: none; background: transparent; padding: 0; cursor: zoom-in; display: block; border-radius: var(--cm-radius); overflow: hidden; }
.cm-img img[b-r6z2t9jx2a] { display: block; max-width: 280px; max-height: 280px; width: auto; border-radius: var(--cm-radius); }
.cm-video[b-r6z2t9jx2a] { max-width: 300px; border-radius: var(--cm-radius); display: block; background: #000; }
.cm-file[b-r6z2t9jx2a] { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--cm-border); border-radius: var(--cm-radius); background: var(--cm-card); color: inherit; text-decoration: none; min-width: 200px; max-width: 320px; }
.cm-file:hover[b-r6z2t9jx2a] { border-color: var(--cm-accent-ink); }
.cm-file__ic[b-r6z2t9jx2a] { width: 36px; height: 36px; border-radius: var(--cm-radius-sm); background: var(--cm-accent-soft); color: var(--cm-accent-ink); display: grid; place-items: center; flex: none; }
.cm-file__ic[b-r6z2t9jx2a]  svg { width: 20px; height: 20px; }
.cm-file__name[b-r6z2t9jx2a] { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-file__kind[b-r6z2t9jx2a] { font-size: 11px; color: var(--cm-muted); font-weight: 500; }
.cm-file__dl[b-r6z2t9jx2a] { color: var(--cm-muted); display: grid; flex: none; }
.cm-file__dl[b-r6z2t9jx2a]  svg { width: 18px; height: 18px; }

/* voice note — chat.js drives .vnote / .vnote-play / .vnote-wave / .vnote-time / .vnote-speed / audio; the names stay */
.vnote[b-r6z2t9jx2a] { display: inline-flex; align-items: center; gap: 10px; min-width: 220px; padding: 4px 6px 4px 4px; border-radius: 999px; background: rgba(127, 127, 127, .10); }
.vnote-play[b-r6z2t9jx2a] { width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer; display: grid; place-items: center; font-size: 12px; line-height: 1; flex: none; background: var(--cm-accent); color: #fff; }
.vnote-wave[b-r6z2t9jx2a] { flex: 1; min-width: 100px; height: 24px; display: flex; align-items: center; gap: 2px; cursor: pointer; }
.vnote-wave i[b-r6z2t9jx2a] { flex: 1; min-height: 3px; border-radius: 2px; background: rgba(107, 114, 128, .45); transition: background .15s var(--cm-ease); }
.vnote-wave i.on[b-r6z2t9jx2a] { background: var(--cm-accent); }
.vnote-time[b-r6z2t9jx2a] { font-size: 11px; color: var(--cm-muted); min-width: 32px; text-align: end; font-variant-numeric: tabular-nums; }
.vnote-speed[b-r6z2t9jx2a] { border: 1px solid var(--cm-border); background: var(--cm-card); color: var(--cm-text); border-radius: 999px; padding: 2px 8px; font-size: 10.5px; font-weight: 800; cursor: pointer; flex: none; line-height: 1.3; font-family: inherit; }

.cm-react[b-r6z2t9jx2a] { position: absolute; bottom: -12px; inset-inline-start: 10px; background: var(--cm-card); border: 1px solid var(--cm-border); border-radius: 999px; padding: 1px 7px; font-size: 13px; line-height: 20px; box-shadow: 0 1px 4px rgba(16, 24, 40, .12); animation: cmPress-b-r6z2t9jx2a .15s var(--cm-ease) both; }
.cm-msg--out .cm-react[b-r6z2t9jx2a] { inset-inline-start: auto; inset-inline-end: 10px; }
.cm-msg--reacted[b-r6z2t9jx2a] { margin-bottom: 12px; }

.cm-msg__acts[b-r6z2t9jx2a] { position: absolute; top: -30px; inset-inline-end: 4px; display: flex; gap: 2px; background: var(--cm-card); border: 1px solid var(--cm-border); border-radius: 999px; padding: 2px 4px; box-shadow: 0 2px 10px rgba(16, 24, 40, .12); opacity: 0; transform: translateY(4px); transition: opacity .15s var(--cm-ease), transform .15s var(--cm-ease); z-index: 6; pointer-events: none; }
.cm-msg--out .cm-msg__acts[b-r6z2t9jx2a] { inset-inline-end: auto; inset-inline-start: 4px; }
.cm-msg:hover .cm-msg__acts[b-r6z2t9jx2a], .cm-msg:focus-within .cm-msg__acts[b-r6z2t9jx2a] { opacity: 1; transform: none; pointer-events: auto; }
.cm-act[b-r6z2t9jx2a] { width: 26px; height: 26px; border-radius: 50%; border: none; background: transparent; color: var(--cm-muted); display: grid; place-items: center; cursor: pointer; font-family: inherit; }
.cm-act:hover[b-r6z2t9jx2a] { background: var(--cm-surface-2); color: var(--cm-text); }
.cm-act[b-r6z2t9jx2a]  svg { width: 16px; height: 16px; }
.cm-act--danger:hover[b-r6z2t9jx2a] { color: var(--cm-danger); }
.cm-reactbar[b-r6z2t9jx2a] { position: absolute; top: -48px; inset-inline-start: 0; display: flex; gap: 4px; background: var(--cm-card); border: 1px solid var(--cm-border); border-radius: 999px; padding: 5px 8px; box-shadow: var(--cm-shadow); z-index: 25; animation: cmPop-b-r6z2t9jx2a .16s var(--cm-ease) both; }
.cm-msg--out .cm-reactbar[b-r6z2t9jx2a] { inset-inline-start: auto; inset-inline-end: 0; }
.cm-reactbar__btn[b-r6z2t9jx2a] { border: none; background: transparent; font-size: 20px; cursor: pointer; border-radius: 50%; width: 34px; height: 34px; display: grid; place-items: center; transition: transform .15s var(--cm-ease); }
.cm-reactbar__btn:hover[b-r6z2t9jx2a] { transform: scale(1.2); }
.cm-reactbar__btn:active[b-r6z2t9jx2a] { animation: cmPress-b-r6z2t9jx2a .15s var(--cm-ease); }

.cm-typing[b-r6z2t9jx2a] { display: flex; align-items: center; gap: 8px; padding: 4px 18px; font-size: 12px; color: var(--cm-muted); min-height: 24px; }
.cm-typing__dots[b-r6z2t9jx2a] { display: inline-flex; gap: 3px; }
.cm-typing__dots i[b-r6z2t9jx2a] { width: 6px; height: 6px; border-radius: 50%; background: var(--cm-muted); animation: cmBreathe-b-r6z2t9jx2a .6s ease-in-out infinite; }
.cm-typing__dots i:nth-child(2)[b-r6z2t9jx2a] { animation-delay: .15s; }
.cm-typing__dots i:nth-child(3)[b-r6z2t9jx2a] { animation-delay: .3s; }

.cm-replybar[b-r6z2t9jx2a] { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--cm-card); border-top: 1px solid var(--cm-border); animation: cmDrop-b-r6z2t9jx2a .15s var(--cm-ease) both; }
.cm-replybar__q[b-r6z2t9jx2a] { flex: 1; min-width: 0; border-inline-start: 3px solid var(--cm-accent-ink); padding-inline-start: 10px; display: flex; flex-direction: column; gap: 1px; }
.cm-replybar__label[b-r6z2t9jx2a] { font-size: 11.5px; font-weight: 700; color: var(--cm-accent-ink); }
.cm-replybar__text[b-r6z2t9jx2a] { font-size: 12.5px; color: var(--cm-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cm-panel[b-r6z2t9jx2a] { background: var(--cm-card); border-top: 1px solid var(--cm-border); animation: cmDrop-b-r6z2t9jx2a .15s var(--cm-ease) both; }
.cm-panel__head[b-r6z2t9jx2a] { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 6px 14px; font-size: 13px; font-weight: 700; border-bottom: 1px solid var(--cm-border-soft); }
.cm-fwd[b-r6z2t9jx2a] { max-height: 240px; overflow-y: auto; padding: 4px; }
.cm-emoji[b-r6z2t9jx2a] { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; padding: 8px; }
.cm-emoji__btn[b-r6z2t9jx2a] { border: none; background: transparent; font-size: 20px; padding: 4px; border-radius: var(--cm-radius-sm); cursor: pointer; }
.cm-emoji__btn:hover[b-r6z2t9jx2a] { background: var(--cm-surface-2); }
.cm-quick[b-r6z2t9jx2a] { display: flex; flex-direction: column; gap: 2px; padding: 6px; max-height: 40vh; overflow-y: auto; }
.cm-quick__item[b-r6z2t9jx2a] { border: none; background: transparent; text-align: start; font-size: 13px; line-height: 1.35; white-space: pre-wrap; padding: 8px 10px; border-radius: var(--cm-radius-sm); cursor: pointer; color: var(--cm-text); font-family: inherit; }
.cm-quick__item:hover[b-r6z2t9jx2a] { background: var(--cm-surface-2); }
.cm-quick__empty[b-r6z2t9jx2a] { font-size: 13px; color: var(--cm-muted); padding: 10px; }

.cm-composer[b-r6z2t9jx2a] { display: flex; align-items: center; gap: 2px; padding: 10px 12px; background: var(--cm-card); border-top: 1px solid var(--cm-border); }
.cm-composer__field[b-r6z2t9jx2a] { flex: 1; min-width: 0; margin: 0 6px; }
.cm-composer__field[b-r6z2t9jx2a]  .mud-input-control { margin: 0; }
.cm-composer__field[b-r6z2t9jx2a]  .mud-input-outlined-border { border-radius: var(--cm-radius); }
.cm-composer__field[b-r6z2t9jx2a]  .mud-input.mud-input-outlined { background: var(--cm-surface-2); }
.cm-send[b-r6z2t9jx2a] { width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--cm-accent); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; transition: transform .15s var(--cm-ease), opacity .15s; }
.cm-send:hover[b-r6z2t9jx2a] { opacity: .92; }
.cm-send:active[b-r6z2t9jx2a] { transform: scale(.94); }
.cm-send:disabled[b-r6z2t9jx2a] { opacity: .5; cursor: default; }
.cm-send[b-r6z2t9jx2a]  svg { width: 20px; height: 20px; }
.cm-rec[b-r6z2t9jx2a] { display: flex; align-items: center; gap: 10px; width: 100%; padding: 2px 6px; }
.cm-rec__dot[b-r6z2t9jx2a] { width: 11px; height: 11px; border-radius: 50%; background: var(--cm-danger); flex: none; animation: cmBreathe-b-r6z2t9jx2a 1s ease-in-out infinite; }
.cm-rec__time[b-r6z2t9jx2a] { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--cm-danger); min-width: 42px; }
.cm-rec__hint[b-r6z2t9jx2a] { flex: 1; color: var(--cm-danger); font-weight: 600; font-size: 13px; }

.cm-scrollbtn[b-r6z2t9jx2a] { position: absolute; inset-inline-end: 22px; bottom: 90px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--cm-border); background: var(--cm-card); color: var(--cm-text); box-shadow: var(--cm-shadow); display: grid; place-items: center; cursor: pointer; z-index: 20; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .18s var(--cm-ease), transform .18s var(--cm-ease); }
.cm-scrollbtn[b-r6z2t9jx2a]  svg { width: 20px; height: 20px; }
.cm-scrollbtn.show[b-r6z2t9jx2a] { opacity: 1; pointer-events: auto; transform: none; }

.cm-thread__empty[b-r6z2t9jx2a] { flex: 1; display: grid; place-items: center; color: var(--cm-muted); font-size: 14px; padding: 24px; text-align: center; }

/* the gallery (media, files & links) replaces the message body */
.cm-gallery[b-r6z2t9jx2a] { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.cm-gallery__head[b-r6z2t9jx2a] { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 800; }
.cm-gallery__grid[b-r6z2t9jx2a] { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 6px; }
.cm-gallery__grid img[b-r6z2t9jx2a], .cm-gallery__grid video[b-r6z2t9jx2a] { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--cm-radius); background: var(--cm-border-soft); display: block; }
.cm-gallery__files[b-r6z2t9jx2a] { display: flex; flex-direction: column; gap: 6px; }
.cm-gallery__files .cm-file[b-r6z2t9jx2a] { max-width: none; }
.cm-gallery__time[b-r6z2t9jx2a] { font-size: 11px; color: var(--cm-muted); flex: none; }

/* ───────────── right pane: the details ───────────── */
.cm-details__head[b-r6z2t9jx2a] { display: flex; align-items: center; justify-content: space-between; padding: 12px 10px 12px 16px; border-bottom: 1px solid var(--cm-border); }
.cm-details__title[b-r6z2t9jx2a] { font-size: 14px; font-weight: 800; margin: 0; }
.cm-details__close[b-r6z2t9jx2a] { display: none; }
.cm-details__body[b-r6z2t9jx2a] { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.cm-contact[b-r6z2t9jx2a] { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 16px 18px; text-align: center; border-bottom: 1px solid var(--cm-border-soft); }
.cm-contact__name[b-r6z2t9jx2a] { font-size: 16px; font-weight: 800; }
.cm-contact__status[b-r6z2t9jx2a] { font-size: 12px; color: var(--cm-muted); }
.cm-contact__status--online[b-r6z2t9jx2a] { color: var(--cm-success); font-weight: 600; }
.cm-sec[b-r6z2t9jx2a] { padding: 12px 16px; border-bottom: 1px solid var(--cm-border-soft); display: flex; flex-direction: column; gap: 6px; }
.cm-sec__title[b-r6z2t9jx2a] { font-size: 11.5px; font-weight: 800; color: var(--cm-muted); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 2px; display: flex; align-items: center; justify-content: space-between; }
.cm-kid[b-r6z2t9jx2a] { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.cm-kid__ic[b-r6z2t9jx2a] { width: 30px; height: 30px; border-radius: var(--cm-radius-sm); background: var(--cm-accent-soft); color: var(--cm-accent-ink); display: grid; place-items: center; flex: none; }
.cm-kid__ic[b-r6z2t9jx2a]  svg { width: 17px; height: 17px; }
.cm-kid__name[b-r6z2t9jx2a] { font-weight: 700; }
.cm-kid__class[b-r6z2t9jx2a] { font-size: 11.5px; color: var(--cm-muted); }
.cm-member[b-r6z2t9jx2a] { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.cm-member__body[b-r6z2t9jx2a] { flex: 1; min-width: 0; }
.cm-member__name[b-r6z2t9jx2a] { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-member__role[b-r6z2t9jx2a] { font-size: 11.5px; color: var(--cm-muted); }
.cm-member__admin[b-r6z2t9jx2a] { font-size: 10px; background: var(--cm-accent-soft); color: var(--cm-accent-ink); border-radius: 6px; padding: 1px 6px; margin-inline-start: 4px; font-weight: 700; }
.cm-member__add[b-r6z2t9jx2a] { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; }
.cm-member__list[b-r6z2t9jx2a] { max-height: 26vh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.cm-link[b-r6z2t9jx2a] { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 16px; border: none; background: transparent; color: var(--cm-text); font-size: 13.5px; font-weight: 600; cursor: pointer; text-align: start; font-family: inherit; text-decoration: none; }
.cm-link:hover[b-r6z2t9jx2a] { background: var(--cm-surface-2); }
.cm-link__ic[b-r6z2t9jx2a] { width: 32px; height: 32px; border-radius: var(--cm-radius-sm); background: var(--cm-surface-2); color: var(--cm-muted); display: grid; place-items: center; flex: none; }
.cm-link__ic[b-r6z2t9jx2a]  svg { width: 18px; height: 18px; }
.cm-link__chev[b-r6z2t9jx2a] { margin-inline-start: auto; color: var(--cm-muted); display: grid; }
.cm-link__chev[b-r6z2t9jx2a]  svg { width: 18px; height: 18px; }
.cm-links[b-r6z2t9jx2a] { padding: 6px 0; }

/* ───────────── overlays ───────────── */
.cm-lightbox[b-r6z2t9jx2a] { position: fixed; inset: 0; background: rgba(0, 0, 0, .82); z-index: 1400; display: grid; place-items: center; cursor: zoom-out; animation: cmFade-b-r6z2t9jx2a .15s var(--cm-ease) both; outline: none; }
.cm-lightbox__img[b-r6z2t9jx2a] { max-width: 92vw; max-height: 92vh; border-radius: var(--cm-radius); box-shadow: 0 10px 40px rgba(0, 0, 0, .5); cursor: default; }
.cm-lightbox__close[b-r6z2t9jx2a] { position: absolute; top: 18px; inset-inline-end: 24px; color: #fff; background: rgba(255, 255, 255, .12); border: none; border-radius: 50%; width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer; }
.cm-lightbox__close[b-r6z2t9jx2a]  svg { width: 22px; height: 22px; }
.cm-modal[b-r6z2t9jx2a] { position: fixed; inset: 0; background: rgba(16, 24, 40, .5); z-index: 1300; display: grid; place-items: center; padding: 16px; animation: cmFade-b-r6z2t9jx2a .15s var(--cm-ease) both; outline: none; }
.cm-modal__card[b-r6z2t9jx2a] { width: min(680px, 94vw); max-height: 92vh; overflow-y: auto; background: var(--cm-card); border: 1px solid var(--cm-border); border-radius: 12px; padding: 20px; animation: cmRise-b-r6z2t9jx2a .2s var(--cm-ease) both; }
.cm-modal__head[b-r6z2t9jx2a] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cm-modal__title[b-r6z2t9jx2a] { font-size: 17px; font-weight: 800; margin: 0; }
.cm-modal__help[b-r6z2t9jx2a] { font-size: 13px; color: var(--cm-muted); margin-bottom: 14px; }
.cm-pill[b-r6z2t9jx2a] { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.cm-pill--ok[b-r6z2t9jx2a] { background: var(--green-soft); color: var(--cm-success); }
.cm-pill--bad[b-r6z2t9jx2a] { background: var(--red-soft); color: var(--cm-danger); }
.cm-pill--warn[b-r6z2t9jx2a] { background: var(--amber-soft); color: var(--cm-warning); }

/* ───────────── motion ───────────── */
@keyframes cmRise-b-r6z2t9jx2a { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes cmDrop-b-r6z2t9jx2a { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes cmPop-b-r6z2t9jx2a { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes cmFade-b-r6z2t9jx2a { from { opacity: 0; } to { opacity: 1; } }
@keyframes cmPress-b-r6z2t9jx2a { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes cmBreathe-b-r6z2t9jx2a { 0%, 100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
@keyframes cmShimmer-b-r6z2t9jx2a { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ───────────── responsive: two panes (details as a slide-over), then one pane at a time ───────────── */
@media (max-width: 1279px) {
    .cm-work[b-r6z2t9jx2a] { grid-template-columns: 320px minmax(0, 1fr); }
    .cm-details[b-r6z2t9jx2a] {
        position: absolute; top: 0; bottom: 0; inset-inline-end: 0; width: 320px; max-width: 92%; z-index: 50;
        box-shadow: var(--cm-shadow); transform: translateX(var(--cm-slide)); visibility: hidden;
        transition: transform .2s var(--cm-ease), visibility 0s linear .2s;
    }
    .cm-work--details .cm-details[b-r6z2t9jx2a] { transform: none; visibility: visible; transition: transform .2s var(--cm-ease), visibility 0s; }
    .cm-details__close[b-r6z2t9jx2a] { display: inline-grid; }
}

@media (min-width: 1280px) {
    .cm-only-narrow[b-r6z2t9jx2a] { display: none !important; }
}

@media (max-width: 899px) {
    .cm-work[b-r6z2t9jx2a] { grid-template-columns: minmax(0, 1fr); height: calc(100vh - 150px); height: calc(100dvh - 150px); }
    .cm-list[b-r6z2t9jx2a], .cm-thread[b-r6z2t9jx2a] { display: none; }
    .cm-work[data-view="list"] .cm-list[b-r6z2t9jx2a] { display: flex; }
    .cm-work[data-view="thread"] .cm-thread[b-r6z2t9jx2a], .cm-work[data-view="details"] .cm-thread[b-r6z2t9jx2a] { display: flex; }
    .cm-list[b-r6z2t9jx2a] { border-inline-end: none; }
    .cm-details[b-r6z2t9jx2a] { width: 100%; max-width: 100%; }
    .cm-back[b-r6z2t9jx2a] { display: inline-grid; }
    .cm-msg[b-r6z2t9jx2a] { max-width: 88%; }
    .cm-head[b-r6z2t9jx2a] { margin-bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .cm-page *[b-r6z2t9jx2a], .cm-page *[b-r6z2t9jx2a]::before, .cm-page *[b-r6z2t9jx2a]::after { animation-duration: .08s !important; transition-duration: .08s !important; }
    .cm-typing__dots i[b-r6z2t9jx2a], .cm-rec__dot[b-r6z2t9jx2a], .cm-skel__ava[b-r6z2t9jx2a], .cm-skel__line[b-r6z2t9jx2a] { animation: none !important; }
    .cm-msg[b-r6z2t9jx2a], .cm-menu[b-r6z2t9jx2a], .cm-pop[b-r6z2t9jx2a], .cm-reactbar[b-r6z2t9jx2a] { animation-name: cmFade-b-r6z2t9jx2a !important; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 1279px) {
    .cm-details[b-r6z2t9jx2a] { transition: opacity .08s linear, visibility 0s !important; transform: none !important; opacity: 0; }
    .cm-work--details .cm-details[b-r6z2t9jx2a] { opacity: 1; }
}

/* FocusOnNavigate (Routes.razor) lands on the heading after navigation; the landmark stays, the browser's box goes. */
.page-title:focus[b-r6z2t9jx2a] { outline: none; }

/* who writes on the family side - father / mother / guardian (2026-10-20) */
.cm-rel[b-r6z2t9jx2a] { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--cm-muted); background: rgba(127, 127, 127, .10); border-radius: 999px; padding: 2px 9px 2px 6px; margin-bottom: 4px; }
.cm-rel__icon[b-r6z2t9jx2a] { font-size: 14px; line-height: 1; }
.cm-rel b[b-r6z2t9jx2a] { color: var(--cm-accent-ink); font-weight: 700; }


/* ───────────── the class-roster group builder (2026-10-27) ───────────── */
.cm-grp[b-r6z2t9jx2a] { gap: 8px; }
.cm-grp__steps[b-r6z2t9jx2a] { display: flex; gap: 6px; padding: 8px 12px 0; }
.cm-grp__step[b-r6z2t9jx2a] { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--cm-muted); padding: 3px 10px 3px 4px; border-radius: 999px; border: 1px solid var(--cm-border); background: var(--cm-card); }
.cm-grp__step b[b-r6z2t9jx2a] { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--cm-surface-2); color: var(--cm-muted); font-size: 11px; }
.cm-grp__step--on[b-r6z2t9jx2a] { color: var(--cm-accent-ink); border-color: var(--cm-accent-ink); }
.cm-grp__step--on b[b-r6z2t9jx2a] { background: var(--cm-accent); color: #fff; }
.cm-grp__step--done[b-r6z2t9jx2a] { color: var(--cm-text); }
.cm-grp__step--done b[b-r6z2t9jx2a] { background: var(--cm-accent-soft); color: var(--cm-accent-ink); }
.cm-grp__filters[b-r6z2t9jx2a] { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cm-grp__filters select[b-r6z2t9jx2a] { padding: 6px 8px; font-size: 12.5px; }
.cm-grp__chips[b-r6z2t9jx2a] { display: flex; flex-wrap: wrap; gap: 6px; }
.cm-chip--picked[b-r6z2t9jx2a] { border-color: var(--cm-accent-ink); color: var(--cm-accent-ink); }
.cm-grp__chipn[b-r6z2t9jx2a] { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: rgba(127, 127, 127, .18); font-size: 10.5px; display: inline-grid; place-items: center; }
.cm-chip--on .cm-grp__chipn[b-r6z2t9jx2a] { background: rgba(255, 255, 255, .25); }
.cm-grp__list[b-r6z2t9jx2a] { flex: 1; min-height: 0; overflow-y: auto; border: 1px solid var(--cm-border-soft); border-radius: var(--cm-radius); }
.cm-grp__bulk[b-r6z2t9jx2a] { display: flex; justify-content: flex-end; padding: 6px 10px; border-bottom: 1px solid var(--cm-border-soft); position: sticky; top: 0; background: var(--cm-card); z-index: 1; }
.cm-grp__bulkitem[b-r6z2t9jx2a] { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--cm-muted); cursor: pointer; white-space: nowrap; }
.cm-grp__bulkitem input[b-r6z2t9jx2a], .cm-grp__td-tick input[b-r6z2t9jx2a], .cm-grp__adm input[b-r6z2t9jx2a] { width: 17px; height: 17px; accent-color: var(--cm-accent); cursor: pointer; flex: none; margin: 0; }
.cm-grp__bulkitem input:disabled[b-r6z2t9jx2a], .cm-grp__td-tick input:disabled[b-r6z2t9jx2a] { cursor: default; opacity: .4; }
.cm-grp__tbl[b-r6z2t9jx2a] { width: 100%; border-collapse: collapse; font-size: 13px; }
.cm-grp__tbl thead th[b-r6z2t9jx2a] { position: sticky; top: 0; background: var(--cm-card); z-index: 1; border-bottom: 1px solid var(--cm-border); padding: 6px 8px; font-size: 11px; font-weight: 800; color: var(--cm-muted); text-align: start; }
.cm-grp__th-tick[b-r6z2t9jx2a] { width: 64px; text-align: center !important; }
.cm-grp__th-tick .cm-grp__bulkitem[b-r6z2t9jx2a] { justify-content: center; width: 100%; }
.cm-grp__tbl tbody tr:hover[b-r6z2t9jx2a] { background: var(--cm-surface-2); }
.cm-grp__td-name[b-r6z2t9jx2a] { padding: 5px 8px; }
.cm-grp__td-tick[b-r6z2t9jx2a] { text-align: center; padding: 5px 4px; }
.cm-grp__pupil[b-r6z2t9jx2a] { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cm-grp__who[b-r6z2t9jx2a] { min-width: 0; flex: 1; }
.cm-grp__who .cm-person__name[b-r6z2t9jx2a], .cm-grp__who .cm-person__sub[b-r6z2t9jx2a] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-grp__sum[b-r6z2t9jx2a] { display: flex; align-items: center; gap: 8px; padding: 8px 0 0; border-top: 1px solid var(--cm-border-soft); position: sticky; bottom: 0; background: var(--cm-card); }
.cm-grp__sumtext[b-r6z2t9jx2a] { flex: 1; min-width: 0; font-size: 12px; font-weight: 700; color: var(--cm-accent-ink); }
.cm-grp__next[b-r6z2t9jx2a] { flex: none; padding: 8px 14px; }
.cm-grp__alt[b-r6z2t9jx2a] { border: none; background: transparent; color: var(--cm-muted); font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; text-decoration: underline; padding: 2px 0; align-self: flex-start; }
.cm-grp__alt:hover[b-r6z2t9jx2a] { color: var(--cm-accent-ink); }
.cm-grp__card[b-r6z2t9jx2a] { border: 1px solid var(--cm-border); border-radius: var(--cm-radius); background: var(--cm-surface-2); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.cm-grp__cardtitle[b-r6z2t9jx2a] { font-size: 11px; font-weight: 800; color: var(--cm-muted); text-transform: uppercase; letter-spacing: .03em; }
.cm-grp__cardtitle--gap[b-r6z2t9jx2a] { margin-top: 8px; }
.cm-grp__line[b-r6z2t9jx2a] { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cm-grp__line--toggle[b-r6z2t9jx2a] { cursor: pointer; }
.cm-grp__linen[b-r6z2t9jx2a] { color: var(--cm-muted); font-size: 12px; white-space: nowrap; }
.cm-grp__adm[b-r6z2t9jx2a] { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--cm-muted); font-weight: 600; }
.cm-grp__note[b-r6z2t9jx2a] { display: flex; align-items: flex-start; gap: 6px; font-size: 11.5px; line-height: 1.45; color: var(--cm-muted); }
.cm-grp__note[b-r6z2t9jx2a]  svg { flex: none; margin-top: 1px; }
/* /Components/Pages/HelpCenter.razor.rz.scp.css */
.help-grid[b-lbu2c6wtpq] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
}

.help-card[b-lbu2c6wtpq] {
    text-align: start;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--card);
    border-radius: 18px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: var(--shadow-sm);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    font-family: inherit;
}

.help-card:hover[b-lbu2c6wtpq] {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: var(--primary-ink);
}

.help-ic[b-lbu2c6wtpq] {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #fff;
    box-shadow: 0 8px 18px rgb(var(--primary-rgb) / .25);
}

.help-ic[b-lbu2c6wtpq]  svg {
    width: 26px;
    height: 26px;
}

.help-title[b-lbu2c6wtpq] {
    font-weight: 800;
    font-size: 16px;
    color: var(--text);
}

.help-desc[b-lbu2c6wtpq] {
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-muted);
    flex: 1;
}

.help-go[b-lbu2c6wtpq] {
    font-weight: 800;
    font-size: 13px;
    color: var(--primary-ink);
}

.help-section[b-lbu2c6wtpq] {
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
    margin: 26px 0 14px;
}
/* /Components/Pages/HrSettings.razor.rz.scp.css */
.hint[b-7t4q6tbkj3] {
    font-size: 12px;
    color: var(--text-muted);
    margin: 6px 0 12px;
}
/* /Components/Pages/LeaveManagement.razor.rz.scp.css */
.lv-chip[b-sb7lzc1c2k] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
/* /Components/Pages/Login.razor.rz.scp.css */
.login-wrap[b-t9qdaga5v2] {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    min-height: 100vh;
    background: url('/img/login-bg.svg') center bottom / cover no-repeat,
                linear-gradient(135deg, var(--primary-soft) 0%, #f6f3fb 45%, #fdeef4 100%);
    font-family: 'Cairo', 'Inter', 'Segoe UI', Tahoma, sans-serif;
}

/* ---- Brand panel ---- */
.login-brand[b-t9qdaga5v2] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 28px 44px 20px;
}
.brand-top[b-t9qdaga5v2] { display: flex; align-items: center; gap: 14px; }
.brand-shield[b-t9qdaga5v2] {
    width: 54px; height: 54px; border-radius: 14px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff;
    display: grid; place-items: center; box-shadow: 0 10px 24px rgb(var(--primary-rgb) / .35);
}
.brand-name[b-t9qdaga5v2] { font-weight: 800; font-size: 19px; line-height: 1.15; color: var(--fx-fg-1b2559); }
.brand-tag[b-t9qdaga5v2] { font-size: 12px; color: #8a93b5; margin-top: 2px; }
.brand-mid[b-t9qdaga5v2] { margin-top: 22px; }
.brand-mid h1[b-t9qdaga5v2] { font-size: 42px; font-weight: 800; color: var(--fx-fg-2a2a6a); margin: 0; letter-spacing: -1px; outline: none; }
.brand-mid p[b-t9qdaga5v2] { font-size: 16px; color: #6b7299; margin-top: 14px; max-width: 360px; line-height: 1.5; }
.brand-scene[b-t9qdaga5v2] { flex: 1; display: flex; align-items: flex-end; justify-content: center; min-height: 0; margin-top: 6px; }
.scene-img[b-t9qdaga5v2] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    animation: scene-float-b-t9qdaga5v2 5s ease-in-out infinite;
}
.brand-credit[b-t9qdaga5v2] { font-size: 12.5px; color: #9aa2cb; text-align: center; padding-top: 6px; }
.brand-credit b[b-t9qdaga5v2] { color: var(--primary-ink); font-weight: 700; }
@keyframes scene-float-b-t9qdaga5v2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

@media (prefers-reduced-motion: reduce) { .scene-img[b-t9qdaga5v2] { animation: none; } }
.brand-steps[b-t9qdaga5v2] { display: flex; align-items: flex-start; gap: 6px; }
.step-i[b-t9qdaga5v2] { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; width: 96px; }
.si-dot[b-t9qdaga5v2] { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--fx-bg-e3e6f8); color: #9aa2cb; }
.si-dot.active[b-t9qdaga5v2] {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff;
    box-shadow: 0 8px 18px rgb(var(--primary-rgb) / .35);
}
.step-i b[b-t9qdaga5v2] { font-size: 13.5px; color: var(--fx-fg-2a2a6a); }
.step-i small[b-t9qdaga5v2] { font-size: 11.5px; color: #9aa2cb; }
.step-line[b-t9qdaga5v2] { height: 2px; flex: 1; background: var(--fx-bg-dce0f3); margin-top: 22px; }

/* ---- Login card ---- */
.login-panel[b-t9qdaga5v2] { display: grid; place-items: center; padding: 32px; }
.login-card[b-t9qdaga5v2] {
    width: 100%; max-width: 640px; background: var(--fx-bg-ffffff); border-radius: 30px;
    padding: 42px 60px; box-shadow: 0 40px 100px rgba(46,54,120,.22); position: relative;
}
.login-lang[b-t9qdaga5v2] {
    position: absolute; top: 24px; inset-inline-end: 28px;
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--fx-bg-fbfbfe); border: 1px solid var(--fx-bd-e6e9f5); border-radius: 22px; padding: 5px 8px;
}
.login-lang a[b-t9qdaga5v2] { display: inline-flex; padding: 3px; border-radius: 8px; opacity: .5; transition: all .15s ease; }
.login-lang a:hover[b-t9qdaga5v2], .login-lang a.on[b-t9qdaga5v2] { opacity: 1; }
.login-lang .flag[b-t9qdaga5v2] {
    width: 26px; height: 17px; border-radius: 3px; display: block; overflow: hidden;
    box-shadow: 0 0 0 1px rgba(0,0,0,.12);
}
.login-lang a.on .flag[b-t9qdaga5v2] { box-shadow: 0 0 0 2px var(--primary-ink), 0 2px 5px rgba(0,0,0,.20); }
.login-logo[b-t9qdaga5v2] {
    width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 8px; display: grid; place-items: center;
    background: radial-gradient(circle at 50% 40%, var(--primary-soft), #f6f4fb); color: var(--primary-ink);
}
.login-logo svg[b-t9qdaga5v2] { width: 26px; height: 26px; }
.login-card h2[b-t9qdaga5v2] { text-align: center; font-size: 24px; font-weight: 800; color: var(--fx-fg-1b2559); margin: 0; }
.login-subtitle[b-t9qdaga5v2] { text-align: center; color: #8a93b5; font-size: 13px; margin: 5px 0 12px; }
.login-alert[b-t9qdaga5v2] {
    background: var(--fx-bg-fde8e8); color: var(--fx-fg-dd3333); border: 1px solid #f6caca; border-radius: 12px;
    padding: 10px 14px; font-size: 13px; margin-bottom: 16px; text-align: center;
}
.lf-label[b-t9qdaga5v2] { display: block; font-size: 12.5px; font-weight: 600; color: var(--fx-fg-3a4068); margin: 9px 0 4px; }
.lf-wrap[b-t9qdaga5v2] { position: relative; display: flex; align-items: center; }
.lf-ic[b-t9qdaga5v2] { position: absolute; inset-inline-start: 14px; color: #9aa2cb; display: grid; place-items: center; pointer-events: none; }
.lf[b-t9qdaga5v2] {
    width: 100%; height: 44px; border: 1px solid var(--fx-bd-e6e9f5); border-radius: 13px; background: var(--fx-bg-fbfbfe);
    padding-inline: 44px 16px; font-size: 14px; color: var(--fx-fg-1b2559); outline: none; font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
}
.lf:focus[b-t9qdaga5v2] { border-color: var(--primary-ink); box-shadow: 0 0 0 4px rgb(var(--primary-rgb) / .12); background: var(--fx-bg-ffffff); }
select.lf[b-t9qdaga5v2] { appearance: none; cursor: pointer; }
.lf-eye[b-t9qdaga5v2] {
    position: absolute; inset-inline-end: 12px; background: none; border: none; color: #9aa2cb;
    cursor: pointer; display: grid; place-items: center; padding: 6px;
}
.lf-row[b-t9qdaga5v2] { display: flex; align-items: center; justify-content: space-between; margin: 11px 0 13px; }
.lf-remember[b-t9qdaga5v2] { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fx-fg-3a4068); cursor: pointer; }
.lf-remember input[b-t9qdaga5v2] { width: 17px; height: 17px; accent-color: var(--primary); }
.lf-forgot[b-t9qdaga5v2] { font-size: 13px; color: var(--primary-ink); text-decoration: none; font-weight: 600; }
.login-submit[b-t9qdaga5v2] {
    width: 100%; height: 48px; border: none; border-radius: 13px; font-family: inherit;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; font-size: 15.5px; font-weight: 700;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px;
    box-shadow: 0 12px 26px rgb(var(--primary-rgb) / .4); transition: transform .1s, box-shadow .15s;
}
.login-submit:hover[b-t9qdaga5v2] { transform: translateY(-1px); box-shadow: 0 16px 32px rgb(var(--primary-rgb) / .5); }
.login-or[b-t9qdaga5v2] { text-align: center; position: relative; margin: 13px 0; }
.login-or[b-t9qdaga5v2]::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--fx-bg-eceef7); }
.login-or span[b-t9qdaga5v2] { position: relative; background: var(--fx-bg-ffffff); padding: 0 14px; font-size: 12.5px; color: #9aa2cb; }
.login-social[b-t9qdaga5v2] { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.soc-btn[b-t9qdaga5v2] {
    height: 44px; border: 1px solid var(--fx-bd-e6e9f5); border-radius: 13px; background: var(--fx-bg-ffffff); cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 13.5px; font-weight: 600;
    color: var(--fx-fg-3a4068); font-family: inherit;
}
.soc-btn:hover[b-t9qdaga5v2] { background: var(--fx-bg-fafaff); border-color: var(--fx-bd-d8ddf2); }
.soc-g[b-t9qdaga5v2] { color: #ea4335; font-weight: 800; }
.soc-m[b-t9qdaga5v2] { color: #3a86ff; }
.login-contact[b-t9qdaga5v2] { text-align: center; font-size: 13px; color: #6b7299; margin-top: 13px; }
.login-contact a[b-t9qdaga5v2] { color: var(--primary-ink); font-weight: 700; text-decoration: none; }
.login-hint[b-t9qdaga5v2] { text-align: center; font-size: 11.5px; color: #b3b9d4; margin-top: 14px; }
.login-hint b[b-t9qdaga5v2] { color: #7a82ad; }
.login-credit[b-t9qdaga5v2] { text-align: center; font-size: 12px; color: #8a93b5; margin-top: 8px; }
.login-credit b[b-t9qdaga5v2] { color: var(--primary-ink); font-weight: 700; }
.login-credit a[b-t9qdaga5v2] { color: inherit; text-decoration: none; }
.login-credit a:hover b[b-t9qdaga5v2] { text-decoration: underline; }

@media (max-width: 900px) {
    .login-wrap[b-t9qdaga5v2] { grid-template-columns: 1fr; }
    .login-brand[b-t9qdaga5v2] { display: none; }
    .login-panel[b-t9qdaga5v2] { padding: 16px; }
    .login-card[b-t9qdaga5v2] { max-width: 760px; }
}

/* ---- Phones ----
   The desktop card kept its 42px/60px padding all the way down: at a 390px viewport the inputs
   were squeezed to ~238px, and at 320px the eye toggle sat on top of the password text. Padding
   now steps down with the viewport; remember-me / forgot-password wrap instead of colliding. */
@media (max-width: 480px) {
    .login-panel[b-t9qdaga5v2] { padding: 12px; }
    .login-card[b-t9qdaga5v2] { padding: 26px 20px 20px; border-radius: 22px; }
    .login-lang[b-t9qdaga5v2] { top: 12px; inset-inline-end: 12px; padding: 4px 6px; }
    .login-card h2[b-t9qdaga5v2] { font-size: 21px; }
    .login-subtitle[b-t9qdaga5v2] { margin-bottom: 10px; }
    /* Wrap cleanly when translations run long (Kurdish/German labels). */
    .lf-row[b-t9qdaga5v2] { flex-wrap: wrap; gap: 8px; }
    /* Comfortable touch targets (≥40px) for the password eye and language flags. */
    .lf-eye[b-t9qdaga5v2] { padding: 10px; }
    .login-lang a[b-t9qdaga5v2] { padding: 6px; }
}

@media (max-width: 360px) {
    .login-panel[b-t9qdaga5v2] { padding: 8px; }
    .login-card[b-t9qdaga5v2] { padding: 22px 14px 16px; }
    .login-social[b-t9qdaga5v2] { grid-template-columns: 1fr; }
}

/* Keyboard users get the same affordance pointer users get from hover. */
.login-submit:focus-visible[b-t9qdaga5v2], .soc-btn:focus-visible[b-t9qdaga5v2], .lf-eye:focus-visible[b-t9qdaga5v2],
.lf-forgot:focus-visible[b-t9qdaga5v2], .login-lang a:focus-visible[b-t9qdaga5v2] {
    outline: 3px solid rgb(var(--primary-rgb) / .55); outline-offset: 2px;
}

/* ---- Aesthetic polish: entrance + micro-interactions ---- */
.login-card[b-t9qdaga5v2] { animation: login-rise-b-t9qdaga5v2 .55s cubic-bezier(.2, .7, .2, 1) both; }
.brand-top[b-t9qdaga5v2] { animation: login-fade-b-t9qdaga5v2 .6s ease both; }
.brand-mid[b-t9qdaga5v2] { animation: login-fade-b-t9qdaga5v2 .6s ease .08s both; }
@keyframes login-rise-b-t9qdaga5v2 { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes login-fade-b-t9qdaga5v2 { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.lf:hover:not(:focus)[b-t9qdaga5v2] { border-color: #cfd5ee; }
.login-submit:active[b-t9qdaga5v2] { transform: translateY(0); box-shadow: 0 8px 18px rgb(var(--primary-rgb) / .4); }
.login-lang[b-t9qdaga5v2], .soc-btn[b-t9qdaga5v2], .lf-forgot[b-t9qdaga5v2], .login-contact a[b-t9qdaga5v2] { transition: all .15s ease; }
.login-lang:hover[b-t9qdaga5v2] { background: var(--fx-bg-ffffff); border-color: var(--fx-bd-d8ddf2); color: var(--fx-fg-1b2559); }
.lf-forgot:hover[b-t9qdaga5v2], .login-contact a:hover[b-t9qdaga5v2] { color: var(--fx-fg-4a3fe0); }

@media (prefers-reduced-motion: reduce) {
    .login-card[b-t9qdaga5v2], .brand-top[b-t9qdaga5v2], .brand-mid[b-t9qdaga5v2] { animation: none; }
}

/* ---- Dark mode ---- theme.js sets data-theme on <html> before first paint, so the
   login page follows the saved theme with no flash and no extra script. ---- */
[data-theme="dark"] .login-wrap[b-t9qdaga5v2] { background: linear-gradient(135deg, #0b1020 0%, #0f1430 45%, #161226 100%); }
[data-theme="dark"] .login-card[b-t9qdaga5v2] { background: #141b2e; box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }
[data-theme="dark"] .brand-name[b-t9qdaga5v2],
[data-theme="dark"] .brand-mid h1[b-t9qdaga5v2],
[data-theme="dark"] .login-card h2[b-t9qdaga5v2],
[data-theme="dark"] .step-i b[b-t9qdaga5v2] { color: #e6e9f5; }
[data-theme="dark"] .brand-mid p[b-t9qdaga5v2] { color: #aab2d5; }
[data-theme="dark"] .lf-label[b-t9qdaga5v2] { color: #c2c9e0; }
[data-theme="dark"] .login-logo[b-t9qdaga5v2] { background: radial-gradient(circle at 50% 40%, #20284a, #161d33); color: var(--primary-ink); }
[data-theme="dark"] .login-lang[b-t9qdaga5v2] { background: #0f1626; border-color: #28324c; color: #c2c9e0; }
[data-theme="dark"] .lf[b-t9qdaga5v2] { background: #0f1626; border-color: #28324c; color: #e6e9f5; }
[data-theme="dark"] .lf:focus[b-t9qdaga5v2] { background: #141b2e; border-color: var(--primary-ink); box-shadow: 0 0 0 4px rgb(var(--primary-rgb) / .35); }
[data-theme="dark"] .lf:hover:not(:focus)[b-t9qdaga5v2] { border-color: #3a4668; }
[data-theme="dark"] .login-or span[b-t9qdaga5v2] { background: #141b2e; }
[data-theme="dark"] .login-or[b-t9qdaga5v2]::before { background: #28324c; }
[data-theme="dark"] .soc-btn[b-t9qdaga5v2] { background: #1a2236; border-color: #28324c; color: #c2c9e0; }
[data-theme="dark"] .soc-btn:hover[b-t9qdaga5v2] { background: #222c46; border-color: #3a4668; }
[data-theme="dark"] .lf-remember[b-t9qdaga5v2] { color: #c2c9e0; }
[data-theme="dark"] .lf-forgot[b-t9qdaga5v2],
[data-theme="dark"] .login-contact a[b-t9qdaga5v2] { color: var(--primary-ink); }
[data-theme="dark"] .login-contact[b-t9qdaga5v2] { color: #aab2d5; }
[data-theme="dark"] .login-alert[b-t9qdaga5v2] { background: #3a1a18; border-color: #5a2a26; color: #ff9b92; }

/* Shared-screen sign-in (a smart board): the QR the teacher's phone scans. */
.login-qr[b-t9qdaga5v2] { margin-top: 14px; text-align: center; }
.login-qr-btn[b-t9qdaga5v2] { width: 100%; padding: 12px; border-radius: 14px; border: 1.5px solid var(--primary-ink); background: var(--fx-bg-ffffff); color: var(--primary-ink); font-weight: 800; font-size: 14px; cursor: pointer; }
.login-qr-btn:hover[b-t9qdaga5v2] { background: var(--primary-soft); }
.login-qr-svg[b-t9qdaga5v2] { display: inline-block; padding: 10px; background: #fff; border-radius: 16px; box-shadow: 0 10px 30px rgba(27,37,89,.12); margin-top: 12px; }
.login-qr-svg[b-t9qdaga5v2]  svg { width: 220px; height: 220px; display: block; }
.login-qr-hint[b-t9qdaga5v2] { font-size: 12.5px; color: #5c6480; line-height: 1.5; margin: 10px 0 4px; }
.login-qr-state[b-t9qdaga5v2] { font-size: 13px; font-weight: 700; color: var(--primary-ink); margin: 0; }

/* /Components/Pages/Payroll.razor.rz.scp.css */
.pay-in[b-e5hjjgq28c] {
    width: 110px;
    padding: 6px 8px;
    border: 1px solid rgba(143, 155, 186, .35);
    border-radius: 8px;
    font-size: 13px;
    text-align: end;
    background: var(--card);
    color: var(--text);
    font-family: inherit;
}

.pay-in:focus[b-e5hjjgq28c] {
    outline: none;
    border-color: var(--blue);
}
/* /Components/Pages/Social.razor.rz.scp.css */
/* The school feed (owner's mockups, 2026-10-18): a three-column workspace and a side drawer for
   creating a post. Every colour is a page token that reads the app's own variables, so the dark
   switch (theme.js sets data-theme on <html>) follows; every offset is logical, so Arabic and
   Kurdish mirror for free. Motion is transform/opacity only, 150-220 ms, and collapses to a fade
   under prefers-reduced-motion. CSS isolation: child components (StoriesBar, InputFile, MudBlazor)
   are reached through ::deep. */

.sf[b-2au7oaloj9] {
    --sf-page: var(--bg, #f7f8fa);
    --sf-card: var(--card, #ffffff);
    --sf-surface: var(--surface-2, #f3f4f6);
    --sf-border: var(--border, #e5e7eb);
    --sf-text: var(--text, #1f2937);
    --sf-muted: #6b7280;              /* 4.6:1 on white - the app's own muted (#8f9bba) is too light for body text */
    --sf-accent: var(--primary);          /* the app colour: fills under white text, both themes */
    --sf-accent-ink: var(--primary-ink);  /* the app colour as text and lines (bright in dark mode) */
    --sf-accent-soft: var(--primary-soft);
    --sf-success: #0f766e;
    --sf-success-soft: #e6f4f1;
    --sf-warn: #b45309;
    --sf-warn-soft: #fdf3e7;
    --sf-danger: #e5484d;
    --sf-danger-soft: #fdecec;
    --sf-radius: 8px;
    --sf-radius-sm: 6px;
    --sf-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    --sf-ease: 180ms ease-out;
    color: var(--sf-text);
}

:root[data-theme="dark"] .sf[b-2au7oaloj9] {
    --sf-muted: #a3adc8;
    --sf-accent-soft: var(--primary-light);
    --sf-success: #5fd3c4;
    --sf-success-soft: #103226;
    --sf-warn: #f5b85c;
    --sf-warn-soft: #3a2e12;
    --sf-danger: #ff8a8e;
    --sf-danger-soft: #3a1a18;
    --sf-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}

/* ---- the three columns ------------------------------------------------------------------ */
.sf-grid[b-2au7oaloj9] { display: grid; grid-template-columns: 240px minmax(0, 760px) 320px; gap: 20px; justify-content: center; align-items: start; }
.sf-left[b-2au7oaloj9], .sf-right[b-2au7oaloj9] { position: sticky; top: 14px; display: flex; flex-direction: column; gap: 14px; }
.sf-left-body[b-2au7oaloj9] { display: block; }
.sf-right-body[b-2au7oaloj9] { display: flex; flex-direction: column; gap: 14px; }
.sf-center[b-2au7oaloj9] { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.sf-fold[b-2au7oaloj9] { display: none; }

@media (max-width: 1279px) {
    .sf-grid[b-2au7oaloj9] { grid-template-columns: 240px minmax(0, 1fr); }
    .sf-left[b-2au7oaloj9] { grid-column: 1; grid-row: 1 / span 2; }
    .sf-right[b-2au7oaloj9] { grid-column: 2; grid-row: 1; position: static; }
    .sf-center[b-2au7oaloj9] { grid-column: 2; grid-row: 2; }
    .sf-right .sf-fold[b-2au7oaloj9] { display: flex; }
    .sf-right-body[b-2au7oaloj9] { display: none; }
    .sf-right.open .sf-right-body[b-2au7oaloj9] { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
}

@media (max-width: 899px) {
    .sf-grid[b-2au7oaloj9] { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .sf-left[b-2au7oaloj9] { grid-column: 1; grid-row: 1; position: static; }
    .sf-right[b-2au7oaloj9] { grid-column: 1; grid-row: 2; }
    .sf-center[b-2au7oaloj9] { grid-column: 1; grid-row: 3; }
    .sf-left .sf-fold[b-2au7oaloj9] { display: flex; }
    .sf-left-body[b-2au7oaloj9] { display: none; }
    .sf-left.open .sf-left-body[b-2au7oaloj9] { display: block; }
}

/* ---- cards ------------------------------------------------------------------------------- */
.sf-card[b-2au7oaloj9] { background: var(--sf-card); border: 1px solid var(--sf-border); border-radius: var(--sf-radius); padding: 14px 16px; box-shadow: var(--sf-shadow); }
.sf-card-head[b-2au7oaloj9] { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.sf-card-t[b-2au7oaloj9] { font-size: 13.5px; font-weight: 800; margin: 0 0 8px; color: var(--sf-text); }
.sf-card-head .sf-card-t[b-2au7oaloj9] { margin: 0; }
.sf-row[b-2au7oaloj9] { display: flex; flex-direction: column; padding: 7px 0; border-block-end: 1px solid var(--sf-border); }
.sf-row:last-child[b-2au7oaloj9] { border-block-end: none; }
.sf-row-name[b-2au7oaloj9] { font-weight: 700; font-size: 13px; color: var(--sf-text); }
.sf-row-meta[b-2au7oaloj9] { font-size: 11.5px; color: var(--sf-muted); }
.sf-empty-sm[b-2au7oaloj9] { font-size: 12.5px; color: var(--sf-muted); padding: 6px 0; }
.sf-empty[b-2au7oaloj9] { color: var(--sf-muted); font-size: 14px; text-align: center; padding: 28px; background: var(--sf-card); border: 1px solid var(--sf-border); border-radius: var(--sf-radius); }

.sf-fold[b-2au7oaloj9] { align-items: center; justify-content: space-between; gap: 8px; width: 100%; background: var(--sf-card); border: 1px solid var(--sf-border); border-radius: var(--sf-radius); padding: 10px 14px; font: inherit; font-weight: 800; font-size: 13.5px; color: var(--sf-text); cursor: pointer; text-align: start; }
.sf-fold-chev[b-2au7oaloj9] { transition: transform 150ms ease-out; }
.open > .sf-fold .sf-fold-chev[b-2au7oaloj9] { transform: rotate(180deg); }

/* ---- left column: the lens ------------------------------------------------------------ */
.sf-nav[b-2au7oaloj9] { display: flex; flex-direction: column; gap: 2px; }
.sf-nav-h[b-2au7oaloj9] { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--sf-muted); margin: 12px 8px 4px; }
.sf-nav-row[b-2au7oaloj9] { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--sf-radius-sm); background: transparent; font: inherit; font-weight: 700; font-size: 13.5px; color: var(--sf-text); text-decoration: none; text-align: start; cursor: pointer; transition: background var(--sf-ease); }
.sf-nav-row:hover[b-2au7oaloj9] { background: var(--sf-surface); }
.sf-nav-row.on[b-2au7oaloj9] { background: var(--sf-accent-soft); color: var(--sf-accent-ink); }
.sf-nav-row .sf-nav-lbl[b-2au7oaloj9] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-nav-ic[b-2au7oaloj9] { width: 20px; text-align: center; flex: 0 0 auto; }
.sf-count[b-2au7oaloj9] { font-size: 11.5px; font-weight: 800; color: var(--sf-muted); background: var(--sf-surface); border-radius: 999px; padding: 1px 7px; }
.sf-nav-row.on .sf-count[b-2au7oaloj9] { color: var(--sf-accent-ink); background: var(--sf-card); }
.sf-nav-list[b-2au7oaloj9] { max-height: 44vh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.sf-nav-sep[b-2au7oaloj9] { border-block-start: 1px solid var(--sf-border); margin: 8px 4px; }

/* ---- stories card ------------------------------------------------------------------------ */
.sf-stories[b-2au7oaloj9]  .stories-tray { background: transparent; box-shadow: none; border-radius: 0; margin: 0; padding: 2px 0 0; }

/* ---- composer entry ---------------------------------------------------------------------- */
.sf-entry-row[b-2au7oaloj9] { display: flex; align-items: center; gap: 12px; }
.sf-av[b-2au7oaloj9] { width: 40px; height: 40px; border-radius: 50%; background: var(--sf-accent); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px; flex: 0 0 auto; letter-spacing: .02em; }
.sf-entry-field[b-2au7oaloj9] { flex: 1; min-width: 0; border: 1px solid var(--sf-border); background: var(--sf-surface); border-radius: 999px; padding: 11px 16px; font: inherit; font-size: 14px; color: var(--sf-muted); text-align: start; cursor: text; transition: background var(--sf-ease), border-color var(--sf-ease); }
.sf-entry-field:hover[b-2au7oaloj9], .sf-entry-field:focus-visible[b-2au7oaloj9] { border-color: var(--sf-accent-ink); background: var(--sf-card); outline: none; }
.sf-entry-actions[b-2au7oaloj9] { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 10px; border-block-start: 1px solid var(--sf-border); flex-wrap: wrap; }
.sf-entry-ic[b-2au7oaloj9] { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; border-radius: var(--sf-radius-sm); padding: 7px 10px; font: inherit; font-size: 13px; font-weight: 700; color: var(--sf-muted); cursor: pointer; transition: background var(--sf-ease), color var(--sf-ease); }
.sf-entry-ic:hover[b-2au7oaloj9] { background: var(--sf-surface); color: var(--sf-text); }
.sf-entry-actions .sf-btn-primary[b-2au7oaloj9] { margin-inline-start: auto; }

/* ---- buttons ----------------------------------------------------------------------------- */
.sf-btn-primary[b-2au7oaloj9] { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--sf-accent); background: var(--sf-accent); color: #fff; border-radius: var(--sf-radius-sm); padding: 9px 16px; font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; transition: opacity var(--sf-ease), transform var(--sf-ease); }
.sf-btn-primary:hover:enabled[b-2au7oaloj9] { opacity: .92; }
.sf-btn-primary:disabled[b-2au7oaloj9] { opacity: .5; cursor: not-allowed; }
.sf-btn[b-2au7oaloj9] { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--sf-border); background: var(--sf-card); color: var(--sf-text); border-radius: var(--sf-radius-sm); padding: 9px 14px; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: background var(--sf-ease); }
.sf-btn:hover:enabled[b-2au7oaloj9] { background: var(--sf-surface); }
.sf-btn:disabled[b-2au7oaloj9] { opacity: .5; cursor: not-allowed; }
.sf-link[b-2au7oaloj9] { border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--sf-accent-ink); cursor: pointer; text-decoration: none; }
.sf-link:hover[b-2au7oaloj9] { text-decoration: underline; }
.sf-link-danger[b-2au7oaloj9] { color: var(--sf-danger); }

/* ---- skeleton while the feed loads ------------------------------------------------------- */
.sf-skel[b-2au7oaloj9] { position: relative; overflow: hidden; }
.sf-skel-line[b-2au7oaloj9] { height: 12px; border-radius: 6px; background: var(--sf-surface); margin: 8px 0; }
.sf-skel-line.w40[b-2au7oaloj9] { width: 40%; } .sf-skel-line.w70[b-2au7oaloj9] { width: 70%; } .sf-skel-line.w90[b-2au7oaloj9] { width: 90%; }
.sf-skel-box[b-2au7oaloj9] { height: 180px; border-radius: var(--sf-radius-sm); background: var(--sf-surface); margin-top: 10px; }
.sf-skel[b-2au7oaloj9]::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); transform: translateX(-100%); animation: sf-shimmer-b-2au7oaloj9 1.2s linear infinite; }
:root[data-theme="dark"] .sf-skel[b-2au7oaloj9]::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent); }
@keyframes sf-shimmer-b-2au7oaloj9 { to { transform: translateX(100%); } }

/* ---- post card --------------------------------------------------------------------------- */
.sf-post[b-2au7oaloj9] { background: var(--sf-card); border: 1px solid var(--sf-border); border-radius: var(--sf-radius); padding: 14px 16px; box-shadow: var(--sf-shadow); }
.sf-post-h[b-2au7oaloj9] { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.sf-post-who[b-2au7oaloj9] { flex: 1; min-width: 0; }
.sf-post-author[b-2au7oaloj9] { font-weight: 800; font-size: 14px; color: var(--sf-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-post-meta[b-2au7oaloj9] { font-size: 12px; color: var(--sf-muted); margin-top: 1px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.sf-moment[b-2au7oaloj9] { color: var(--sf-accent-ink); font-weight: 700; }
.sf-flag[b-2au7oaloj9] { font-size: 15px; flex: 0 0 auto; }
.sf-hw[b-2au7oaloj9] { display: inline-block; margin: 2px 0 8px; padding: 3px 10px; border-radius: 999px; background: var(--sf-warn-soft); color: var(--sf-warn); font-size: 12.5px; font-weight: 700; }
.sf-post-body[b-2au7oaloj9] { font-size: 14px; line-height: 1.6; color: var(--sf-text); white-space: pre-wrap; word-break: break-word; margin-bottom: 8px; }
.sf-post-body.clamped[b-2au7oaloj9] { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; margin-bottom: 2px; }
/* The router focuses the page heading after every navigation (FocusOnNavigate, Routes.razor): a screen
   reader lands on the title, but a sighted reader got the browser's black focus box around «School Feed»
   (owner's screenshot, 2026-10-18). Script focus keeps the landmark; only the box goes. */
.page-title:focus[b-2au7oaloj9] { outline: none; }
.sf-readmore[b-2au7oaloj9] { display: block; margin-bottom: 8px; }

/* media: up to three tiles, the last one carries the «+N» */
.sf-grid-media[b-2au7oaloj9] { display: grid; gap: 4px; border-radius: var(--sf-radius-sm); overflow: hidden; margin-bottom: 8px; }
.sf-grid-media.n1[b-2au7oaloj9] { grid-template-columns: 1fr; }
.sf-grid-media.n2[b-2au7oaloj9] { grid-template-columns: 1fr 1fr; }
.sf-grid-media.n3[b-2au7oaloj9] { grid-template-columns: 1fr 1fr; }
.sf-grid-media.n3 .sf-cell:first-child[b-2au7oaloj9] { grid-column: span 2; }
.sf-cell[b-2au7oaloj9] { position: relative; display: block; cursor: pointer; background: var(--sf-surface); }
.sf-cell:focus-visible[b-2au7oaloj9] { outline: 2px solid var(--sf-accent-ink); outline-offset: -2px; }
.sf-img[b-2au7oaloj9] { width: 100%; max-height: 460px; object-fit: cover; display: block; }
.sf-grid-media.n2 .sf-img[b-2au7oaloj9], .sf-grid-media.n3 .sf-cell:not(:first-child) .sf-img[b-2au7oaloj9] { height: 220px; }
.sf-grid-media.n3 .sf-cell:first-child .sf-img[b-2au7oaloj9] { max-height: 320px; }
.sf-more-count[b-2au7oaloj9] { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(17, 24, 39, .5); color: #fff; font-size: 26px; font-weight: 800; }
.sf-media[b-2au7oaloj9] { position: relative; border-radius: var(--sf-radius-sm); overflow: hidden; margin-bottom: 8px; background: #000; }
.sf-media-legacy[b-2au7oaloj9] { background: var(--sf-surface); }
.sf-badge-count[b-2au7oaloj9] { position: absolute; inset-inline-end: 10px; inset-block-end: 10px; background: rgba(17, 24, 39, .65); color: #fff; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.sf-video[b-2au7oaloj9] { width: 100%; max-height: 460px; display: block; background: #000; }
.sf-yt[b-2au7oaloj9] { display: block; }
.sf-play[b-2au7oaloj9] { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(17, 24, 39, .22); }
.sf-play span[b-2au7oaloj9] { width: 54px; height: 54px; border-radius: 50%; background: rgba(17, 24, 39, .7); display: grid; place-items: center; font-size: 22px; padding-inline-start: 4px; }
.sf-vid-note[b-2au7oaloj9] { font-size: 14px; background: var(--sf-surface); border-radius: var(--sf-radius-sm); padding: 16px; text-align: center; color: var(--sf-muted); margin-bottom: 8px; }

/* PDF chips */
.sf-docs[b-2au7oaloj9] { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.sf-doc[b-2au7oaloj9] { display: flex; align-items: center; gap: 8px; background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-sm); padding: 8px 12px; }
.sf-doc-open[b-2au7oaloj9] { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; color: var(--sf-text); text-decoration: none; font-size: 13.5px; font-weight: 700; }
.sf-doc-open:hover[b-2au7oaloj9] { color: var(--sf-accent-ink); }
.sf-doc-name[b-2au7oaloj9] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-doc-size[b-2au7oaloj9] { color: var(--sf-muted); font-weight: 500; font-size: 12px; flex: 0 0 auto; }
.sf-doc-dl[b-2au7oaloj9] { flex: 0 0 auto; text-decoration: none; font-size: 16px; color: var(--sf-accent-ink); padding: 0 4px; }

/* poll (read-only on the web: the app votes) */
.sf-poll[b-2au7oaloj9] { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.sf-poll-opt[b-2au7oaloj9] { position: relative; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-sm); padding: 7px 10px; font-size: 13px; overflow: hidden; display: flex; justify-content: space-between; gap: 8px; }
.sf-poll-opt.mine[b-2au7oaloj9] { border-color: var(--sf-accent-ink); }
.sf-poll-bar[b-2au7oaloj9] { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--sf-accent-soft); z-index: 0; }
.sf-poll-opt span[b-2au7oaloj9] { position: relative; z-index: 1; }
.sf-poll-n[b-2au7oaloj9] { color: var(--sf-muted); font-weight: 700; flex: 0 0 auto; }
.sf-poll-total[b-2au7oaloj9] { font-size: 12px; color: var(--sf-muted); }

/* reactions + counts + footer */
.sf-stats[b-2au7oaloj9] { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--sf-muted); padding: 4px 2px 8px; border-block-end: 1px solid var(--sf-border); }
.sf-react[b-2au7oaloj9] { display: inline-flex; align-items: center; gap: 4px; }
.sf-react-chips[b-2au7oaloj9] { display: inline-flex; }
.sf-react-chips span[b-2au7oaloj9] { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--sf-card); border: 1px solid var(--sf-border); font-size: 12px; margin-inline-end: -5px; }
.sf-react-n[b-2au7oaloj9] { margin-inline-start: 8px; font-weight: 700; }
.sf-foot[b-2au7oaloj9] { display: flex; gap: 6px; padding-top: 6px; }
.sf-act[b-2au7oaloj9] { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; background: transparent; border-radius: var(--sf-radius-sm); padding: 8px 0; font: inherit; font-size: 13px; font-weight: 800; color: var(--sf-muted); cursor: pointer; transition: background var(--sf-ease), color var(--sf-ease); }
.sf-act:hover[b-2au7oaloj9] { background: var(--sf-surface); color: var(--sf-text); }
.sf-act.on[b-2au7oaloj9] { color: var(--sf-accent-ink); }
.sf-act.on .sf-act-ic[b-2au7oaloj9] { animation: sf-pop-b-2au7oaloj9 150ms ease-out; }
@keyframes sf-pop-b-2au7oaloj9 { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } }
.sf-act-ic[b-2au7oaloj9] { display: inline-block; }

/* comments */
.sf-comments[b-2au7oaloj9] { margin-top: 10px; border-block-start: 1px solid var(--sf-border); padding-top: 10px; }
.sf-cmt[b-2au7oaloj9] { display: flex; gap: 10px; margin-bottom: 10px; }
.sf-cmt-av[b-2au7oaloj9] { width: 30px; height: 30px; border-radius: 50%; background: var(--sf-accent); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 800; flex: 0 0 auto; }
.sf-cmt-bd[b-2au7oaloj9] { background: var(--sf-surface); border-radius: var(--sf-radius); padding: 8px 12px; flex: 1; min-width: 0; }
.sf-cmt-name[b-2au7oaloj9] { font-weight: 800; font-size: 13px; color: var(--sf-text); margin-inline-end: 6px; }
.sf-cmt-txt[b-2au7oaloj9] { font-size: 14px; color: var(--sf-text); white-space: pre-wrap; word-break: break-word; }
.sf-cmt-date[b-2au7oaloj9] { display: block; font-size: 11px; color: var(--sf-muted); margin-top: 2px; }
.sf-cmt-add[b-2au7oaloj9] { display: flex; gap: 8px; margin-top: 8px; }
.sf-cmt-in[b-2au7oaloj9] { flex: 1; min-width: 0; border: 1px solid var(--sf-border); background: var(--sf-card); color: var(--sf-text); border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 14px; }
.sf-cmt-in:focus[b-2au7oaloj9] { outline: 2px solid var(--sf-accent-ink); outline-offset: -1px; }
.sf-more[b-2au7oaloj9] { display: flex; justify-content: center; padding: 4px 0 12px; }

/* drafts view in the centre */
.sf-draft-row[b-2au7oaloj9] { display: flex; align-items: center; gap: 8px; }
.sf-draft-row > div[b-2au7oaloj9] { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* album */
.sf-album[b-2au7oaloj9] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sf-album-tile[b-2au7oaloj9] { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--sf-radius-sm); display: block; background: var(--sf-surface); }
@media (max-width: 599px) { .sf-album[b-2au7oaloj9] { grid-template-columns: repeat(3, 1fr); } }

/* ---- right column: status pills --------------------------------------------------------- */
.sf-status-row[b-2au7oaloj9] { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-block-end: 1px solid var(--sf-border); }
.sf-status-row:last-child[b-2au7oaloj9] { border-block-end: none; }
.sf-status-row > div[b-2au7oaloj9] { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sf-pill[b-2au7oaloj9] { flex: 0 0 auto; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 2px 8px; border: 1px solid transparent; }
.sf-pill-scheduled[b-2au7oaloj9] { color: var(--sf-warn); background: var(--sf-warn-soft); }
.sf-pill-draft[b-2au7oaloj9] { color: var(--sf-muted); background: var(--sf-surface); border-color: var(--sf-border); }
.sf-clip[b-2au7oaloj9] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- the create-post drawer -------------------------------------------------------------- */
.sf-scrim[b-2au7oaloj9] { position: fixed; inset: 0; background: rgba(17, 24, 39, .5); z-index: 2400; animation: sf-fade-b-2au7oaloj9 200ms ease-out; }
.sf-drawer[b-2au7oaloj9] { position: fixed; inset-block: 0; inset-inline-end: 0; width: min(800px, 100vw); background: var(--sf-card); color: var(--sf-text); z-index: 2401; display: flex; flex-direction: column; border-inline-start: 1px solid var(--sf-border); box-shadow: 0 0 40px rgba(0, 0, 0, .25); animation: sf-slide-b-2au7oaloj9 200ms ease-out; outline: none; }
[dir="rtl"] .sf-drawer[b-2au7oaloj9] { animation-name: sf-slide-rtl-b-2au7oaloj9; }
@keyframes sf-fade-b-2au7oaloj9 { from { opacity: 0; } to { opacity: 1; } }
@keyframes sf-slide-b-2au7oaloj9 { from { transform: translateX(100%); } to { transform: none; } }
@keyframes sf-slide-rtl-b-2au7oaloj9 { from { transform: translateX(-100%); } to { transform: none; } }
@media (max-width: 899px) { .sf-drawer[b-2au7oaloj9] { width: 100vw; border-inline-start: 0; } }

.sf-drawer-h[b-2au7oaloj9] { padding: 12px 20px 0; border-block-end: 1px solid var(--sf-border); }
.sf-drawer-h-row[b-2au7oaloj9] { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sf-drawer-title[b-2au7oaloj9] { font-size: 17px; font-weight: 800; margin: 0; }
.sf-x[b-2au7oaloj9] { border: 0; background: transparent; border-radius: 50%; width: 34px; height: 34px; font-size: 17px; color: var(--sf-muted); cursor: pointer; transition: background var(--sf-ease); }
.sf-x:hover[b-2au7oaloj9] { background: var(--sf-surface); color: var(--sf-text); }
.sf-tabs[b-2au7oaloj9] { display: flex; gap: 4px; margin-top: 6px; position: relative; }
.sf-tab[b-2au7oaloj9] { position: relative; border: 0; background: transparent; padding: 9px 14px; font: inherit; font-size: 13.5px; font-weight: 800; color: var(--sf-muted); cursor: pointer; border-radius: var(--sf-radius-sm) var(--sf-radius-sm) 0 0; }
.sf-tab[b-2au7oaloj9]::after { content: ""; position: absolute; inset-inline: 10px; inset-block-end: -1px; height: 2px; background: var(--sf-accent); transform: scaleX(0); transition: transform 150ms ease-out; }
.sf-tab.on[b-2au7oaloj9] { color: var(--sf-accent-ink); }
.sf-tab.on[b-2au7oaloj9]::after { transform: scaleX(1); }
.sf-tab:hover[b-2au7oaloj9] { color: var(--sf-text); }

.sf-drawer-body[b-2au7oaloj9] { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 20px 16px; }
.sf-sec[b-2au7oaloj9] { padding: 14px 0; border-block-end: 1px solid var(--sf-border); }
.sf-sec:last-child[b-2au7oaloj9] { border-block-end: none; }
.sf-sec-t[b-2au7oaloj9] { font-size: 12.5px; font-weight: 800; margin: 0 0 8px; color: var(--sf-text); }
.sf-hint[b-2au7oaloj9] { font-size: 12px; color: var(--sf-muted); margin-top: 6px; }
.sf-hint a[b-2au7oaloj9] { color: var(--sf-accent-ink); font-weight: 700; text-decoration: none; }
.sf-end[b-2au7oaloj9] { text-align: end; }
.sf-input[b-2au7oaloj9], .sf-textarea[b-2au7oaloj9] { width: 100%; border: 1px solid var(--sf-border); background: var(--sf-card); color: var(--sf-text); border-radius: var(--sf-radius-sm); padding: 9px 12px; font: inherit; font-size: 14px; }
.sf-input:focus[b-2au7oaloj9], .sf-textarea:focus[b-2au7oaloj9] { outline: 2px solid var(--sf-accent-ink); outline-offset: -1px; }
.sf-textarea[b-2au7oaloj9] { resize: vertical; min-height: 120px; line-height: 1.5; }
.sf-input-sm[b-2au7oaloj9] { max-width: 420px; }

/* audience */
.sf-chips[b-2au7oaloj9] { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sf-chip[b-2au7oaloj9] { display: inline-flex; align-items: center; gap: 4px; background: var(--sf-accent-soft); color: var(--sf-accent-ink); border-radius: 999px; padding: 3px 6px 3px 10px; font-size: 12.5px; font-weight: 700; }
.sf-chip-x[b-2au7oaloj9] { border: 0; background: transparent; color: inherit; font: inherit; font-size: 12px; width: 20px; height: 20px; border-radius: 50%; cursor: pointer; }
.sf-chip-x:hover[b-2au7oaloj9] { background: rgba(0, 0, 0, .08); }
.sf-checklist[b-2au7oaloj9] { margin-top: 8px; max-height: 200px; overflow-y: auto; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-sm); padding: 4px; }
.sf-check[b-2au7oaloj9] { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: var(--sf-radius-sm); cursor: pointer; font-size: 13.5px; }
.sf-check:hover[b-2au7oaloj9] { background: var(--sf-surface); }
.sf-check.on[b-2au7oaloj9] { background: var(--sf-accent-soft); }
.sf-check input[b-2au7oaloj9] { accent-color: var(--sf-accent); margin: 0; }
.sf-check-name[b-2au7oaloj9] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.sf-check-meta[b-2au7oaloj9] { font-size: 12px; color: var(--sf-muted); flex: 0 0 auto; }
/* «لمن هذا المنشور؟» (owner, 2026-10-27): three choices, then the stages with «the whole stage» and each class. */
.sf-aud-opts[b-2au7oaloj9] { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 8px; }
.sf-aud-opt[b-2au7oaloj9] { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: start; padding: 9px 11px; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-sm); background: var(--sf-card); color: var(--sf-text); font: inherit; cursor: pointer; transition: border-color var(--sf-ease), background var(--sf-ease); }
.sf-aud-opt:hover[b-2au7oaloj9] { background: var(--sf-surface); }
.sf-aud-opt.on[b-2au7oaloj9] { border-color: var(--sf-accent-ink); background: var(--sf-accent-soft); }
.sf-aud-opt:focus-visible[b-2au7oaloj9] { outline: 2px solid var(--sf-accent-ink); outline-offset: 2px; }
.sf-aud-opt-t[b-2au7oaloj9] { font-weight: 800; font-size: 13.5px; }
.sf-aud-opt-h[b-2au7oaloj9] { font-size: 12px; color: var(--sf-muted); }
.sf-stages[b-2au7oaloj9] { max-height: 280px; }
.sf-stage + .sf-stage[b-2au7oaloj9] { border-block-start: 1px dashed var(--sf-border); margin-block-start: 4px; padding-block-start: 4px; }
.sf-stage-class[b-2au7oaloj9] { padding-inline-start: 26px; }
.sf-stage-all[b-2au7oaloj9] { font-weight: 600; color: var(--sf-muted); font-size: 12px; }
.sf-aud-sum[b-2au7oaloj9] { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 12.5px; color: var(--sf-muted); font-weight: 700; }

/* media in the drawer */
.sf-media-grid[b-2au7oaloj9] { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.sf-tile[b-2au7oaloj9] { position: relative; aspect-ratio: 1; border-radius: var(--sf-radius-sm); overflow: hidden; background: var(--sf-surface); border: 1px solid var(--sf-border); }
.sf-tile img[b-2au7oaloj9], .sf-tile video[b-2au7oaloj9] { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-tile-x[b-2au7oaloj9] { position: absolute; inset-block-start: 4px; inset-inline-end: 4px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(17, 24, 39, .7); color: #fff; font-size: 12px; cursor: pointer; }
.sf-tile-play[b-2au7oaloj9] { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 20px; background: rgba(17, 24, 39, .2); pointer-events: none; }
.sf-tile-add[b-2au7oaloj9] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-style: dashed; cursor: pointer; color: var(--sf-accent-ink); font-size: 12.5px; font-weight: 800; text-align: center; padding: 6px; transition: background var(--sf-ease); }
.sf-tile-add:hover[b-2au7oaloj9] { background: var(--sf-accent-soft); }
.sf-tile-add .sf-plus[b-2au7oaloj9] { font-size: 24px; line-height: 1; }
.sf-tile-add[b-2au7oaloj9]  input[type=file], .sf-pick-pdf[b-2au7oaloj9]  input[type=file] { display: none; }
.sf-doc-rows[b-2au7oaloj9] { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.sf-doc-row[b-2au7oaloj9] { display: flex; align-items: center; gap: 8px; background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-sm); padding: 6px 10px; font-size: 13px; }
.sf-doc-row .sf-doc-name[b-2au7oaloj9] { flex: 1; min-width: 0; font-weight: 700; }
.sf-doc-x[b-2au7oaloj9] { border: 0; background: none; cursor: pointer; color: var(--sf-danger); font: inherit; font-size: 13px; }
.sf-pick-pdf[b-2au7oaloj9] { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; cursor: pointer; font-size: 13.5px; color: var(--sf-accent-ink); font-weight: 800; }
.sf-pick-pdf.busy[b-2au7oaloj9] { color: var(--sf-muted); cursor: progress; }
.sf-progress[b-2au7oaloj9] { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 12.5px; color: var(--sf-muted); font-weight: 700; }
.sf-progress-bar[b-2au7oaloj9] { flex: 1; height: 6px; border-radius: 3px; background: var(--sf-surface); overflow: hidden; position: relative; }
.sf-progress-bar span[b-2au7oaloj9] { position: absolute; inset-block: 0; inset-inline-start: 0; width: 40%; border-radius: 3px; background: var(--sf-accent); animation: sf-indeterminate-b-2au7oaloj9 1.2s ease-in-out infinite; }
@keyframes sf-indeterminate-b-2au7oaloj9 { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
[dir="rtl"] .sf-progress-bar span[b-2au7oaloj9] { animation-name: sf-indeterminate-rtl-b-2au7oaloj9; }
@keyframes sf-indeterminate-rtl-b-2au7oaloj9 { 0% { transform: translateX(100%); } 100% { transform: translateX(-250%); } }

/* post options */
.sf-opt[b-2au7oaloj9] { margin-top: 8px; }
.sf-poll-edit[b-2au7oaloj9] { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.sf-poll-edit-row[b-2au7oaloj9] { display: flex; align-items: center; gap: 6px; }
.sf-poll-edit-row .sf-input[b-2au7oaloj9] { flex: 1; }
.sf-poll-actions[b-2au7oaloj9] { display: flex; gap: 14px; margin-top: 6px; }

/* sticky footer */
.sf-drawer-f[b-2au7oaloj9] { border-block-start: 1px solid var(--sf-border); padding: 12px 20px; background: var(--sf-card); display: flex; flex-direction: column; gap: 10px; }
.sf-seg[b-2au7oaloj9] { display: inline-flex; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-sm); overflow: hidden; }
.sf-seg button[b-2au7oaloj9] { border: 0; background: transparent; padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 700; color: var(--sf-muted); cursor: pointer; transition: background var(--sf-ease), color var(--sf-ease); }
.sf-seg button + button[b-2au7oaloj9] { border-inline-start: 1px solid var(--sf-border); }
.sf-seg button.on[b-2au7oaloj9] { background: var(--sf-accent-soft); color: var(--sf-accent-ink); }
.sf-drawer-f-row[b-2au7oaloj9] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sf-drawer-f-btns[b-2au7oaloj9] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sf-status[b-2au7oaloj9] { flex: 1; min-width: 0; font-size: 12.5px; color: var(--sf-muted); font-weight: 700; }
.sf-drawer-f-btns .sf-btn-primary[b-2au7oaloj9] { min-width: 140px; }

/* ---- the edit box ------------------------------------------------------------------------ */
.sf-modal[b-2au7oaloj9] { position: fixed; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%); width: min(520px, 94vw); background: var(--sf-card); color: var(--sf-text); border: 1px solid var(--sf-border); border-radius: var(--sf-radius); padding: 16px 20px; z-index: 2401; box-shadow: 0 20px 50px rgba(0, 0, 0, .3); animation: sf-fade-b-2au7oaloj9 150ms ease-out; display: flex; flex-direction: column; gap: 8px; }
[dir="rtl"] .sf-modal[b-2au7oaloj9] { transform: translate(50%, -50%); }

/* ---- lightbox ---------------------------------------------------------------------------- */
.sf-lb[b-2au7oaloj9] { position: fixed; inset: 0; background: rgba(8, 10, 20, .92); z-index: 2500; display: flex; align-items: center; justify-content: center; animation: sf-fade-b-2au7oaloj9 150ms ease-out; }
.sf-lb-img[b-2au7oaloj9] { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: var(--sf-radius-sm); }
.sf-lb-x[b-2au7oaloj9] { position: fixed; inset-block-start: 16px; inset-inline-end: 20px; background: rgba(255, 255, 255, .12); color: #fff; border: 0; border-radius: 50%; width: 40px; height: 40px; font-size: 17px; cursor: pointer; z-index: 2501; }
.sf-lb-nav[b-2au7oaloj9] { position: fixed; inset-block-start: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, .12); color: #fff; border: 0; border-radius: 50%; width: 46px; height: 46px; display: grid; place-items: center; cursor: pointer; z-index: 2501; }
.sf-lb-nav:hover[b-2au7oaloj9], .sf-lb-x:hover[b-2au7oaloj9] { background: rgba(255, 255, 255, .28); }
.sf-lb-prev[b-2au7oaloj9] { inset-inline-start: 18px; }
.sf-lb-next[b-2au7oaloj9] { inset-inline-end: 18px; }
[dir="rtl"] .sf-lb-nav svg[b-2au7oaloj9] { transform: scaleX(-1); }
.sf-lb-counter[b-2au7oaloj9] { position: fixed; inset-block-end: 20px; inset-inline-start: 50%; transform: translateX(-50%); color: #fff; font-size: 13px; font-weight: 700; background: rgba(255, 255, 255, .14); border-radius: 999px; padding: 4px 14px; }
[dir="rtl"] .sf-lb-counter[b-2au7oaloj9] { transform: translateX(50%); }

/* ---- utilities + motion ----------------------------------------------------------------- */
.sf-sr[b-2au7oaloj9] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
    .sf-drawer[b-2au7oaloj9], .sf-scrim[b-2au7oaloj9], .sf-modal[b-2au7oaloj9], .sf-lb[b-2au7oaloj9] { animation: sf-fade-b-2au7oaloj9 80ms ease-out; }
    .sf-skel[b-2au7oaloj9]::after, .sf-progress-bar span[b-2au7oaloj9], .sf-act.on .sf-act-ic[b-2au7oaloj9] { animation: none; }
    .sf-tab[b-2au7oaloj9]::after, .sf-fold-chev[b-2au7oaloj9], .sf-nav-row[b-2au7oaloj9], .sf-act[b-2au7oaloj9], .sf-entry-field[b-2au7oaloj9], .sf-btn-primary[b-2au7oaloj9], .sf-btn[b-2au7oaloj9] { transition: none; }
}

/* a YouTube playlist on a post (2026-10-20): a card where YouTube gives no thumbnail, a badge where it does */
.sf-yt-list[b-2au7oaloj9] { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 140px; background: linear-gradient(135deg, #1f1f1f, #3a0a0a); border-radius: 14px; }
.sf-yt-badge[b-2au7oaloj9] { position: absolute; inset-inline-end: 10px; bottom: 10px; background: rgba(0,0,0,.72); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.sf-yt-list .sf-yt-badge[b-2au7oaloj9] { position: static; font-size: 14px; }

/* /Components/Pages/StaffAbsenceReport.razor.rz.scp.css */
.st-chip[b-kzr4x5b34s] {
    min-width: 32px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid rgba(143, 155, 186, .35);
    border-radius: 8px;
    background: var(--card);
    color: var(--text-muted);
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    transition: all .12s ease;
}

.st-chip:hover[b-kzr4x5b34s] {
    border-color: rgba(143, 155, 186, .7);
}

.st-chip.on[b-kzr4x5b34s] {
    color: #fff;
    background: var(--blue);
    border-color: var(--blue);
}

.prep-line[b-kzr4x5b34s] { font-size: 12px; margin-top: 8px; }

/* the attention card */
.attention[b-kzr4x5b34s] { border-radius: 20px; box-shadow: var(--shadow); border-inline-start: 4px solid var(--red); }
.attention__title[b-kzr4x5b34s] { font-weight: 800; font-size: 14px; margin-bottom: 6px; }
.attention__line[b-kzr4x5b34s] { font-size: 13px; padding: 3px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; }
.attention__line a[b-kzr4x5b34s] { color: inherit; text-decoration: none; }

/* reason tags and the Bradford band pill */
.pill[b-kzr4x5b34s] { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 6px; margin-inline-start: 4px; white-space: nowrap; }
.band-Act[b-kzr4x5b34s] { background: rgba(185, 28, 28, .12); color: var(--fx-fg-b91c1c); }
.band-Watch[b-kzr4x5b34s] { background: rgba(245, 158, 11, .16); color: #b45309; }
.band-Low[b-kzr4x5b34s] { background: rgba(143, 155, 186, .14); color: var(--text-muted); }
.band-Grey[b-kzr4x5b34s] { background: rgba(143, 155, 186, .14); color: var(--text-muted); }

/* the pattern row */
.patterns[b-kzr4x5b34s]  .mud-expand-panel { border-radius: 20px; box-shadow: var(--shadow); }
.patterns__grid[b-kzr4x5b34s] { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.panel[b-kzr4x5b34s] { background: var(--bg); border-radius: 14px; padding: 12px 14px; min-height: 120px; }
.panel__title[b-kzr4x5b34s] { font-size: 12.5px; font-weight: 700; color: var(--text-muted); margin-bottom: 8px; }

.hbar[b-kzr4x5b34s] { display: grid; grid-template-columns: minmax(90px, 1.2fr) 2fr minmax(70px, auto); align-items: center; gap: 8px; font-size: 12px; padding: 2px 0; cursor: pointer; }
.hbar__label[b-kzr4x5b34s] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.hbar__track[b-kzr4x5b34s] { height: 8px; background: rgba(143, 155, 186, .18); border-radius: 4px; overflow: hidden; }
.hbar__fill[b-kzr4x5b34s] { height: 100%; border-radius: 4px; background: var(--red); }
.hbar__fill.band-Watch[b-kzr4x5b34s] { background: var(--amber); }
.hbar__fill.band-Low[b-kzr4x5b34s] { background: var(--text-muted); }
.hbar__value[b-kzr4x5b34s] { text-align: end; font-weight: 700; white-space: nowrap; }

.vbars[b-kzr4x5b34s] { display: flex; align-items: flex-end; gap: 6px; height: 96px; }
.vbar[b-kzr4x5b34s] { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; height: 100%; }
.vbar__value[b-kzr4x5b34s] { font-size: 10.5px; color: var(--text-muted); height: 14px; }
.vbar__track[b-kzr4x5b34s] { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.vbar__fill[b-kzr4x5b34s] { width: 100%; background: var(--red); border-radius: 3px 3px 0 0; min-height: 0; }
.vbar__label[b-kzr4x5b34s] { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; margin-top: 3px; }

/* the table */
.abs-table th.sortable[b-kzr4x5b34s] { cursor: pointer; user-select: none; }
.abs-table tr.quiet td[b-kzr4x5b34s] { color: var(--text-muted); font-weight: 400; }
.rate[b-kzr4x5b34s] { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; font-weight: 700; }
.rate__track[b-kzr4x5b34s] { width: 64px; height: 5px; background: rgba(143, 155, 186, .18); border-radius: 3px; overflow: hidden; }
.rate__fill[b-kzr4x5b34s] { height: 100%; background: currentColor; border-radius: 3px; }
.rate.band-Low[b-kzr4x5b34s] { background: none; color: inherit; }
.rate.band-Watch[b-kzr4x5b34s] { background: none; color: #b45309; }
.rate.band-Act[b-kzr4x5b34s] { background: none; color: var(--fx-fg-b91c1c); }
.delta[b-kzr4x5b34s] { font-weight: 700; margin-inline-start: 4px; }

/* the expander: date chips beside the mini calendar (weeks as rows, the PDF's nine cell codes) */
.expander[b-kzr4x5b34s] { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: start; }
.minical[b-kzr4x5b34s] { display: grid; grid-template-columns: repeat(7, 30px); gap: 2px; }
.minical__head[b-kzr4x5b34s] { font-size: 9.5px; color: var(--text-muted); text-align: center; }
.minical__cell[b-kzr4x5b34s] { height: 24px; border-radius: 4px; font-size: 10px; display: flex; align-items: center; justify-content: center; gap: 2px; background: var(--card); border: 1px solid rgba(143, 155, 186, .25); }
.minical__cell small[b-kzr4x5b34s] { font-size: 8.5px; font-weight: 800; }
.minical__cell.blank[b-kzr4x5b34s] { background: none; border: none; }
.minical__cell.c-N[b-kzr4x5b34s] { border-style: dotted; color: rgba(143, 155, 186, .6); }
.minical__cell.c-O[b-kzr4x5b34s] { background: rgba(143, 155, 186, .14); border-color: transparent; color: var(--text-muted); }
.minical__cell.c-H[b-kzr4x5b34s] { background: rgba(143, 155, 186, .3); border-color: transparent; color: var(--text-muted); }
.minical__cell.c-A[b-kzr4x5b34s] { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.minical__cell.c-F[b-kzr4x5b34s] { background: linear-gradient(90deg, #b91c1c 50%, #fdecec 50%); border-color: #b91c1c; color: var(--fx-fg-b91c1c); }
.minical__cell.c-L[b-kzr4x5b34s] { background: #f59e0b; border-color: #f59e0b; color: #fff; }
.minical__cell.c-V[b-kzr4x5b34s] { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.minical__cell.c-X[b-kzr4x5b34s] { background: var(--fx-bg-f3e8ff); border-color: #7c3aed; color: var(--fx-fg-7c3aed); }
.st-chip.warn[b-kzr4x5b34s] { margin-inline-start: 6px; font-size: 11px; color: var(--fx-fg-b91c1c); border-color: rgba(185, 28, 28, .35); }
.st-chip.person[b-kzr4x5b34s] { margin-inline-start: 6px; min-width: 26px; height: 24px; padding: 0 6px; font-size: 12px; line-height: 1; }
.st-chip.person:hover[b-kzr4x5b34s] { background: rgba(79, 70, 229, .08); border-color: var(--blue); }
.st-chip.warn:hover[b-kzr4x5b34s] { background: rgba(185, 28, 28, .08); }
.minical__cell.c-Q[b-kzr4x5b34s] { border: 1px dashed var(--text-muted); color: var(--text-muted); }

@media (max-width: 900px) {
    .hide-sm[b-kzr4x5b34s] { display: none; }
    .patterns[b-kzr4x5b34s] { display: none; }
    .expander[b-kzr4x5b34s] { grid-template-columns: 1fr; }
}
/* /Components/Pages/StaffAttendanceRegister.razor.rz.scp.css */
.st-chip[b-7cv0wihu0l] {
    min-width: 32px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid rgba(143, 155, 186, .35);
    border-radius: 8px;
    background: var(--card);
    color: var(--text-muted);
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    transition: all .12s ease;
}

.st-chip:hover[b-7cv0wihu0l] {
    border-color: rgba(143, 155, 186, .7);
}

.st-chip.on[b-7cv0wihu0l] {
    color: #fff;
}

.hr-in[b-7cv0wihu0l] {
    padding: 6px 8px;
    border: 1px solid rgba(143, 155, 186, .35);
    border-radius: 8px;
    font-size: 13px;
    background: var(--card);
    color: var(--text);
    font-family: inherit;
}

.hr-in:focus[b-7cv0wihu0l] {
    outline: none;
    border-color: var(--blue);
}

.hr-in.note[b-7cv0wihu0l] {
    width: 100%;
    min-width: 150px;
}
/* /Components/Shared/AvatarRenderer.razor.rz.scp.css */
.avr[b-u2qr70w7oc] {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 14px;
    background: var(--surface-2, var(--bg));
}

.avr-round[b-u2qr70w7oc] {
    border-radius: 50%;
}

/* the rig's fixed 512 x 512 coordinate space; the component scales and offsets it once to show its crop */
.avr-canvas[b-u2qr70w7oc] {
    position: absolute;
    left: 0;
    top: 0;
    width: 512px;
    height: 512px;
    transform-origin: 0 0;
}

/* every part fills the whole canvas: no per-layer fit, no trimming */
.avr-canvas img[b-u2qr70w7oc] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
}
/* /Components/Shared/AvatarStudioDialog.razor.rz.scp.css */
.ast[b-34fnocazgq] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    width: min(560px, 100%);
}

.ast-empty[b-34fnocazgq] {
    padding: 18px 4px;
    color: var(--text-muted);
}

.ast-preview[b-34fnocazgq] {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 6px 0;
    background: var(--surface-2);
    border-radius: 18px;
}

/* stacked in the top corner: a phone-width preview leaves ~56px either side of the art, so a column of
   38px buttons never covers it (side by side at the bottom they hid the shoulder at 420px) */
.ast-tools[b-34fnocazgq] {
    position: absolute;
    inset-inline-end: 10px;
    top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ast-tool[b-34fnocazgq] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    font-size: 17px;
    cursor: pointer;
}

.ast-tool:disabled[b-34fnocazgq] {
    opacity: .4;
    cursor: default;
}

.ast-alert[b-34fnocazgq] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--primary-soft);
    color: var(--text);
    font-size: 13px;
}

.ast-alert button[b-34fnocazgq] {
    border: 0;
    border-radius: 999px;
    padding: 6px 12px;
    background: var(--primary);
    color: var(--card);
    font-weight: 700;
    cursor: pointer;
}

.ast-tabs[b-34fnocazgq] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid var(--border);
}

.ast-tab[b-34fnocazgq] {
    padding: 10px 4px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-weight: 700;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ast-tab.on[b-34fnocazgq] {
    color: var(--primary-ink);
    border-bottom-color: var(--primary-ink);
}

.ast-chips[b-34fnocazgq] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ast-chip[b-34fnocazgq] {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    cursor: pointer;
}

.ast-chip.on[b-34fnocazgq] {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--card);
}

.ast-hint[b-34fnocazgq] {
    font-size: 12.5px;
    color: var(--text-muted);
}

.ast-grid[b-34fnocazgq] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 10px;
    max-height: 320px;
    overflow-y: auto;
    padding: 2px;
}

.ast-tile[b-34fnocazgq] {
    position: relative;
    aspect-ratio: 1;
    max-width: 100%;
    display: grid;
    place-items: center;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--card);
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.ast-tile.on[b-34fnocazgq] {
    border: 2.5px solid var(--primary-ink);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

.ast-tile:disabled[b-34fnocazgq] {
    opacity: .4;
    cursor: default;
}

.ast-tile:focus-visible[b-34fnocazgq],
.ast-tab:focus-visible[b-34fnocazgq],
.ast-chip:focus-visible[b-34fnocazgq],
.ast-tool:focus-visible[b-34fnocazgq] {
    outline: 3px solid var(--primary-ink);
    outline-offset: 2px;
}

.ast-none[b-34fnocazgq] {
    font-size: 28px;
    color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
    .ast-tile[b-34fnocazgq] {
        transition: none;
    }
}

/* "none" is a familiar icon with its word, never a bald avatar */
.ast-tile-none[b-34fnocazgq] {
    align-content: center;
    gap: 2px;
}

.ast-none-label[b-34fnocazgq] {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.1;
}
.ast-size[b-34fnocazgq] { display:flex; align-items:center; gap:10px; padding:2px 6px 6px; }
.ast-size-label[b-34fnocazgq] { font-weight:700; font-size:13px; }
.ast-size-pct[b-34fnocazgq] { width:46px; text-align:end; font-weight:700; font-size:12.5px; opacity:.75; }
/* /Components/Shared/PostTranslationAction.razor.rz.scp.css */
/* The «Translate» line under a class post (owner, 2026-10-22). Colours are the feed's own tokens (they inherit from the
   .sf page in both themes), falling back to the app's theme variables; spacing is logical so Arabic and Kurdish mirror. */

.ptr[b-8gzimwj3tu] { margin: -2px 0 8px; }

.ptr-text[b-8gzimwj3tu] {
    font-size: 14px;
    line-height: 1.6;
    color: var(--sf-text, var(--text));
    white-space: pre-wrap;
    word-break: break-word;
    user-select: text;
    padding-inline-start: 10px;
    border-inline-start: 3px solid var(--sf-accent-soft, var(--primary-soft));
    margin-bottom: 6px;
    unicode-bidi: plaintext;
}

.ptr-row[b-8gzimwj3tu] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; min-height: 24px; }

.ptr-link[b-8gzimwj3tu] {
    border: 0;
    background: none;
    padding: 2px 0;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--sf-accent-ink, var(--primary-ink));
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ptr-link:hover[b-8gzimwj3tu] { text-decoration: underline; }

.ptr-link:focus-visible[b-8gzimwj3tu] { outline: 2px solid var(--sf-accent-ink, var(--primary-ink)); outline-offset: 2px; border-radius: 4px; }

.ptr-icon[b-8gzimwj3tu] { font-size: 13px; }

.ptr-label[b-8gzimwj3tu], .ptr-status[b-8gzimwj3tu], .ptr-dot[b-8gzimwj3tu] { color: var(--sf-muted, var(--text-muted)); }

.ptr-status[b-8gzimwj3tu] { display: inline-flex; align-items: center; gap: 6px; }

.ptr-muted[b-8gzimwj3tu] { font-style: italic; }

.ptr-spinner[b-8gzimwj3tu] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--sf-border, var(--border));
    border-top-color: var(--sf-accent-ink, var(--primary-ink));
    animation: ptr-spin-b-8gzimwj3tu 0.8s linear infinite;
}

@keyframes ptr-spin-b-8gzimwj3tu { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .ptr-spinner[b-8gzimwj3tu] { animation: none; }
}
/* /Components/Shared/PostTranslationControlCard.razor.rz.scp.css */
/* The translation control card (owner, 2026-10-22): theme variables only, so light and dark both read. */

.ptc[b-3l8pntkbip] {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
    margin-top: 18px;
    color: var(--text);
}

.ptc-head[b-3l8pntkbip] { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.ptc-title[b-3l8pntkbip] { font-size: 17px; font-weight: 800; margin: 0; }

.ptc-intro[b-3l8pntkbip], .ptc-meta[b-3l8pntkbip] { color: var(--text-muted); font-size: 13px; margin: 6px 0; }

.ptc-note[b-3l8pntkbip] { font-size: 13px; margin: 6px 0; color: var(--text); background: var(--surface-2); border-radius: 8px; padding: 6px 10px; }

.ptc-school[b-3l8pntkbip] { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 12px; }

.ptc-school-head[b-3l8pntkbip] { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.ptc-school-head > div:first-child[b-3l8pntkbip] { flex: 1 1 200px; min-width: 0; }

.ptc-school-name[b-3l8pntkbip] { font-weight: 800; font-size: 15px; }

.ptc-school-code[b-3l8pntkbip] { font-family: monospace; font-size: 12px; color: var(--text-muted); }

.ptc-pill[b-3l8pntkbip] { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 10px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }

.ptc-pill-ok[b-3l8pntkbip] { background: var(--primary-soft); color: var(--primary-ink); border-color: transparent; }

.ptc-pill-warn[b-3l8pntkbip] { border-color: var(--primary-ink); }

.ptc-pill-bad[b-3l8pntkbip] { border-color: var(--text); font-weight: 800; }

.ptc-pill-off[b-3l8pntkbip] { color: var(--text-muted); }

.ptc-bar[b-3l8pntkbip] { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin: 10px 0; }

.ptc-fill[b-3l8pntkbip] { display: block; height: 100%; background: var(--primary); border-radius: 999px; }

.ptc-fill-warn[b-3l8pntkbip] { opacity: 0.75; }

.ptc-fill-bad[b-3l8pntkbip] { background: var(--text); }

.ptc-stats[b-3l8pntkbip] { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 14px; margin: 0 0 10px; }

.ptc-stats div[b-3l8pntkbip] { min-width: 0; }

.ptc-stats dt[b-3l8pntkbip] { font-size: 11.5px; color: var(--text-muted); }

.ptc-stats dd[b-3l8pntkbip] { margin: 0; font-weight: 700; font-size: 13.5px; overflow-wrap: anywhere; }

.ptc-edit[b-3l8pntkbip] { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.ptc-error[b-3l8pntkbip] { color: var(--text); font-weight: 700; margin: 6px 0 0; }
/* /Components/Shared/RepBars.razor.rz.scp.css */
.rbars[b-0b4bcmzmlc] { display: flex; align-items: stretch; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.rbar[b-0b4bcmzmlc] { flex: 1 0 34px; display: flex; flex-direction: column; min-width: 34px; }
.rbar__pair[b-0b4bcmzmlc] { flex: 1; display: flex; align-items: flex-end; gap: 2px; }
.rbar__col[b-0b4bcmzmlc] { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; min-width: 0; }
.rbar__value[b-0b4bcmzmlc] { font-size: 10px; color: var(--text-muted); text-align: center; white-space: nowrap; height: 14px; }
.rbar__fill[b-0b4bcmzmlc] { border-radius: 3px 3px 0 0; min-height: 0; }
.rbar__label[b-0b4bcmzmlc] { font-size: 10.5px; color: var(--text-muted); text-align: center; white-space: nowrap; margin-top: 4px; }
.rbars__legend[b-0b4bcmzmlc] { display: flex; gap: 14px; font-size: 12px; color: var(--text-muted); margin-top: 8px; flex-wrap: wrap; }
.rbars__legend i[b-0b4bcmzmlc] { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 5px; vertical-align: -1px; }
/* /Components/Shared/RepHBars.razor.rz.scp.css */
.rh[b-9nc98p2u7m] { display: flex; flex-direction: column; gap: 4px; }
.rh__row[b-9nc98p2u7m] { display: grid; grid-template-columns: minmax(90px, 1.3fr) 2fr minmax(64px, auto); align-items: center; gap: 8px; font-size: 12.5px; padding: 2px 0; }
.rh__row.click[b-9nc98p2u7m] { cursor: pointer; }
.rh__row.click:hover .rh__label[b-9nc98p2u7m] { text-decoration: underline; }
.rh__label[b-9nc98p2u7m] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; min-width: 0; }
.rh__track[b-9nc98p2u7m] { height: 8px; background: rgba(143, 155, 186, .18); border-radius: 4px; overflow: hidden; }
.rh__fill[b-9nc98p2u7m] { height: 100%; border-radius: 4px; }
.rh__value[b-9nc98p2u7m] { text-align: end; font-weight: 700; white-space: nowrap; }
/* /Components/Shared/ReportsHub.razor.rz.scp.css */
.hub-group[b-je058m9ema] { margin-bottom: 22px; }
.hub-group__title[b-je058m9ema] { font-size: 13px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; }
.hub-grid[b-je058m9ema] { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.hub-card[b-je058m9ema] { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--card); border-radius: 16px; box-shadow: var(--shadow); text-decoration: none; color: inherit; border: 1px solid transparent; transition: border-color .15s, transform .15s; min-width: 0; }
.hub-card:hover[b-je058m9ema] { border-color: var(--primary-ink); transform: translateY(-1px); }
.hub-card.new[b-je058m9ema] { border-color: rgba(5, 205, 153, .45); }
.hub-card__ic[b-je058m9ema] { font-size: 22px; line-height: 1; }
.hub-card__text[b-je058m9ema] { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hub-card__title[b-je058m9ema] { font-weight: 800; font-size: 14px; }
.hub-card__desc[b-je058m9ema] { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.hub-card__new[b-je058m9ema] { font-size: 10px; font-weight: 800; color: var(--green); background: var(--green-soft); border-radius: 6px; padding: 1px 6px; margin-inline-start: 6px; vertical-align: 1px; }