@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

/* Design tokens (color palette, surfaces, borders, text, focus, shadows,
   z-index, button family, kendo remaps, layout) — see
   _content/GlobalEdTech.Web.Shared/css/sf-tokens.css */

/* DM Sans on every non-icon element */
body,
body *:not(i):not([class*="fa-"]):not([class*="fab "]):not([class*="fas "]):not([class*="far "]):not([class*="fal "]):not([class*="k-icon"]):not([class*="k-i-"]):not([class*="oi-"]) {
    font-family: var(--sf-font-family);
}

/* Scoped fix for Telerik's hardcoded `z-index: 100` on .k-animation-container.
   Limited to the student-header context (the multi-enrollment PanelBar that
   inspired the original report) so we don't change stacking for every
   dropdown, calendar, tooltip, and context-menu globally. The PanelBar's
   expand/collapse animation container is rendered in-tree (descendant of
   .sf-student-header), so the descendant selector reliably catches it.

   If another component reports the same "Telerik popup vaults above a modal"
   symptom, prefer adding its parent class to this selector list rather than
   broadening to a bare .k-animation-container — the global override has
   non-trivial blast radius across animated Telerik components. */
.sf-student-header .k-animation-container {
    z-index: inherit !important;
}

/* ── Universal focus indicator — double-ring pattern (WCAG 2.4.7) ──
   Works on all surfaces: blue inner ring (#1D4ED8) shows on light bg,
   white outer ring shows on the dark sidebar. :where() keeps specificity at 0
   so component-specific :focus-visible rules always win over this base layer.
   DO NOT remove --sf-focus-ring-inner during royal-blue cleanup — it's the
   designated focus color, not a legacy brand blue. */
:where(button, a, [role="button"], [role="link"], input, select, textarea, [tabindex]):focus-visible {
    outline: var(--sf-focus-inner-width) solid var(--sf-focus-ring-inner);
    outline-offset: var(--sf-focus-offset);
    box-shadow: 0 0 0 var(--sf-focus-width) var(--sf-focus-ring-outer);
}

/* Header icon buttons (.icon-button) — Help, Notifications, Contact Center, etc.
   The :where() rule above can be overridden by browser UA styles on plain
   <button> elements; this explicit higher-specificity rule guarantees a
   visible focus ring on the top-row header controls. */
.icon-button:focus-visible {
    outline: var(--sf-focus-inner-width) solid var(--sf-focus-ring-inner);
    outline-offset: var(--sf-focus-offset);
    box-shadow: 0 0 0 var(--sf-focus-width) var(--sf-focus-ring-outer);
    border-radius: 6px;
}

/* Inline tooltip-trigger buttons (the small "?" icons next to form labels).
   Replaces aria-hidden <i> elements that weren't keyboard reachable. The
   button is styled to match the original icon visually — no border/bg —
   while remaining focusable so screen readers and keyboard users can
   activate it. The companion JS in wcag-aria-fixes.js dispatches
   mouseenter/mouseleave on focus/blur so the existing TelerikTooltip
   (configured for hover) also opens via keyboard. */
.sf-tooltip-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    cursor: help;
    line-height: 1;
    vertical-align: middle;
    border-radius: 50%;
}
.sf-tooltip-btn:focus-visible {
    outline: var(--sf-focus-inner-width) solid var(--sf-focus-ring-inner);
    outline-offset: var(--sf-focus-offset);
    box-shadow: 0 0 0 var(--sf-focus-width) var(--sf-focus-ring-outer);
}

/* ── Brand-themed button focus rings ────────────────────────────────
   The .sf-btn-* rules below keep per-brand focus outlines (save=primary,
   cancel=secondary-text, accent=accent, delete=destructive) and explicitly
   set `box-shadow: none` to suppress the universal white outer ring.
   This is an intentional deviation from the universal double-ring pattern
   defined in the :where() rule at the top of this file — the brand colors
   reinforce each action's semantic meaning and their contrast on the
   button's own fill is already authored. Do not "fix" these to blue without
   an accessibility review; the universal pattern applies everywhere else.
   ─────────────────────────────────────────────────────────────────── */

/* SfButton role/grid/group/icon-tone rules and the .btn-plain / class-name
   reference comment are all extracted to:
       _content/GlobalEdTech.Web.Shared/css/sf-buttons.css
   See <link> in index.html. The token --sf-btn-size also moved with them. */

/* ── Header search (GlobalSearchComponent) ─────────────────── */
.sf-header-search.k-input,
.sf-header-search.k-textbox {
    border: 1px solid var(--sf-border-subtle) !important; /* beats .k-input-solid's #949494 */
    min-height: var(--sf-interactive-min);
}

.sf-header-search .k-input-inner {
    line-height: calc(var(--sf-interactive-min) - 8px);
    padding-block: 0;
}

.sf-search-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--sf-interactive-min);
    min-height: var(--sf-interactive-min);
    padding: 6px 8px;
    background: none;
    border: none;
    cursor: pointer;
}

/* Icon-only button inside a text input — outline-with-offset would extend past
   the input wrapper. Use stacked box-shadow rings flush against the element. */
.sf-search-submit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--sf-focus-ring-inner),
                0 0 0 4px var(--sf-focus-ring-outer);
}

/* TelerikForm renders an empty .k-form-buttons wrapper (with margin-top) for
   the empty <FormButtons/>. We keep the Form for its accessibility semantics
   but suppress the unused buttons container. */
.sf-header-search-form .k-form-buttons {
    display: none;
}

/* Hide the up/down spinner arrows on Telerik numeric inputs system-wide */
.k-input-spinner {
    display: none !important;
}

/* Editable grid cell placeholder — shows "Select ..." + caret when empty so
   users know there's a dropdown (used in Incell-edit grids like Template
   Registration's Term Selection). */
.sf-cell-select-placeholder {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--sf-color-accent);
    font-style: italic;
}

/* ── Recent Students / Student Group Members row layout ────────
   Shared between RecentStudentsTile and StudentGroupMembersTile so
   both the "Recent Students" and "Students in Group" views render
   with the same Option A redesign. See the original Claude Design
   bundle: recent-students/project/option-a-refined.jsx. */
.sf-recent-list {
    height: 98%;
    overflow-y: auto;
    scroll-behavior: smooth;
}

.sf-recent-loading {
    padding: 12px 14px;
    color: var(--sf-color-accent);
    font-size: 12px;
}

.sf-recent-row {
    position: relative;
    padding: 10px 14px 10px 16px;
    border-bottom: 1px solid var(--sf-color-accent-light);
    background: #fff;
    cursor: pointer;
    transition: background 0.12s ease;
}
.sf-recent-row:hover {
    background: #f8fafc;
}

.sf-recent-rail {
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 2px 2px 0;
}
.sf-recent-row.tone-success .sf-recent-rail { background: var(--sf-color-success); }
.sf-recent-row.tone-danger  .sf-recent-rail { background: var(--sf-color-destructive); }
.sf-recent-row.tone-warning .sf-recent-rail { background: var(--sf-color-warning); }
.sf-recent-row.tone-info    .sf-recent-rail { background: #0369a1; }
.sf-recent-row.tone-purple  .sf-recent-rail { background: #7c3aed; }
.sf-recent-row.tone-neutral .sf-recent-rail { background: var(--sf-color-accent); }

/* Recent Students row — name on line 1 (full width, no truncation),
   status pill on line 2 under the name so long names never truncate. */
.sf-recent-row-top {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    grid-template-rows: auto auto;
    gap: 4px 10px;
    align-items: center;
}
.sf-recent-row-top .sf-recent-avatar   { grid-row: 1 / 3; grid-column: 1; align-self: start; margin-top: 2px; }
.sf-recent-row-top .sf-recent-name     { grid-row: 1; grid-column: 2; }
.sf-recent-row-top .sf-recent-unread   { grid-row: 1; grid-column: 3; }
.sf-recent-row-top .sf-recent-folder-btn { grid-row: 1; grid-column: 4; }
.sf-recent-row-top .sf-status-pill     { grid-row: 2; grid-column: 2 / -1; justify-self: start; }

.sf-recent-avatar {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: linear-gradient(135deg, #64748b, #475569);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sf-recent-name {
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--sf-color-dark);
    letter-spacing: -0.1px;
    line-height: 1.3;
}

.sf-recent-unread {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--sf-color-destructive);
    cursor: pointer;
    padding: 0;
}

.sf-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
    line-height: 1.4;
}
.sf-status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
}
.sf-status-pill.tone-success { background: #ecfdf5; color: var(--sf-color-success); }
.sf-status-pill.tone-danger  { background: #fef2f2; color: var(--sf-color-destructive); }
.sf-status-pill.tone-warning { background: #fffbeb; color: var(--sf-color-warning); }
.sf-status-pill.tone-info    { background: #f0f9ff; color: #0369a1; }
.sf-status-pill.tone-purple  { background: #f5f3ff; color: #7c3aed; }
.sf-status-pill.tone-neutral { background: var(--sf-color-accent-light); color: var(--sf-color-dark); }

.sf-recent-folder-btn {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--sf-color-primary);
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.12s ease, background 0.12s ease, border-color 0.12s ease;
    padding: 0;
}
.sf-recent-row:hover .sf-recent-folder-btn {
    opacity: 1;
    background: #fff;
    border-color: var(--sf-color-border);
}

.sf-recent-row-meta {
    margin-left: 38px;
    margin-top: 4px;
    font-size: 11px;
    color: var(--sf-color-accent);
    white-space: nowrap;
    overflow: hidden;
}

.sf-recent-id-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--sf-font-family);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    color: var(--sf-color-accent);
    background: transparent;
    border: none;
    padding: 1px 2px;
    border-radius: 4px;
    cursor: pointer;
}
.sf-recent-id-chip:hover {
    color: var(--sf-color-dark);
}

.sf-recent-row-sub {
    margin-left: 38px;
    margin-top: 2px;
    font-size: 11px;
    color: var(--sf-color-accent);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Icon-only button with an outline (primary grey border, transparent fill).
   Pair with .sf-btn-icon-24 for the 24×24 target size. */
.sf-btn-icon-outline {
    border: 1px solid var(--sf-color-primary) !important;
    border-radius: 6px !important;
    background-color: transparent !important;
    padding: 4px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sf-btn-icon-outline:hover:not(:disabled):not(.k-disabled) {
    background-color: var(--sf-color-primary) !important;
    color: #fff !important;
}
.sf-btn-icon-outline:hover:not(:disabled):not(.k-disabled) i {
    color: #fff !important;
}

/* Stepper / Wizard — use SF branded green instead of default Telerik blue
   for completed/current step indicators and the connecting progress line.
   Completed steps are filled green; current/upcoming steps are white with
   a green border and green icon (white bg so the connecting line doesn't
   show through the checkmark). The current step also pulses subtly so
   users can see where they are. */
.k-stepper .k-step-indicator {
    background-color: #fff !important;
    border-color: var(--sf-color-success) !important;
    color: var(--sf-color-success) !important;
}
.k-stepper .k-step-done .k-step-indicator,
.k-stepper .k-step.k-step-done .k-step-indicator {
    background-color: var(--sf-color-success) !important;
    border-color: var(--sf-color-success) !important;
    color: #fff !important;
}
@keyframes sf-stepper-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.5); }
    70%  { box-shadow: 0 0 0 10px rgba(5, 150, 105, 0); }
    100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0); }
}
.k-stepper .k-step-current .k-step-indicator,
.k-stepper .k-step.k-step-current .k-step-indicator {
    animation: sf-stepper-pulse 2s infinite;
}

/* Stepper labels should show the full step name — no ellipsis truncation. */
.k-stepper .k-step-label,
.k-stepper .k-step-label .k-step-text,
.k-stepper .k-step-link .k-step-label {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: none !important;
}

/* Checked and indeterminate checkboxes use SF primary grey instead of
   Telerik default blue. Covers Telerik's k-checkbox (grid selection,
   forms) and the native :checked fallback. */
.k-checkbox:checked,
.k-checkbox.k-checked,
.k-checkbox:indeterminate,
.k-checkbox.k-indeterminate {
    background-color: var(--sf-color-primary) !important;
    border-color: var(--sf-color-primary) !important;
    color: #fff !important;
}
.k-checkbox:focus-visible,
.k-checkbox.k-focus {
    outline-color: var(--sf-color-primary) !important;
    box-shadow: 0 0 0 2px rgba(71, 85, 105, 0.25) !important;
}
.k-stepper .k-progressbar,
.k-stepper .k-progressbar .k-progressbar-value,
.k-stepper .k-step-list-horizontal .k-progressbar .k-progressbar-value,
.k-stepper .k-step-list-vertical .k-progressbar .k-progressbar-value {
    background-color: var(--sf-color-success) !important;
    color: var(--sf-color-success) !important;
}
.k-stepper .k-step-link:focus-visible .k-step-indicator,
.k-stepper .k-step-link.k-focus .k-step-indicator {
    outline-color: var(--sf-color-success) !important;
    box-shadow: 0 0 0 2px var(--sf-color-success) !important;
}

/* Grid column header sort arrows + column-menu (vertical ellipsis) use
   SF primary grey instead of Telerik default blue */
.k-grid .k-sort-icon,
.k-grid .k-sort-icon .k-icon,
.k-grid .k-sort-icon .k-svg-icon {
    color: var(--sf-color-primary) !important;
}
.k-grid .k-grid-column-menu,
.k-grid .k-grid-header-menu {
    color: var(--sf-color-primary) !important;
}
.k-grid .k-grid-column-menu.k-active,
.k-grid .k-grid-header-menu.k-active,
.k-grid .k-grid-column-menu:hover,
.k-grid .k-grid-header-menu:hover {
    background-color: var(--sf-color-primary) !important;
    color: #fff !important;
}

/* Grid column header focused/selected outline uses SF primary grey */
.k-grid .k-table-th.k-focus,
.k-grid .k-table-th:focus,
.k-grid .k-table-th:focus-visible,
.k-grid th.k-header.k-focus,
.k-grid th.k-header:focus,
.k-grid th.k-header:focus-visible,
.k-grid .k-table-td.k-focus,
.k-grid .k-table-td:focus,
.k-grid .k-table-td:focus-visible,
.k-grid td.k-focus,
.k-grid td:focus,
.k-grid td:focus-visible {
    outline-color: var(--sf-color-primary) !important;
    box-shadow: inset 0 0 0 2px var(--sf-color-primary) !important;
    border-color: var(--sf-color-primary) !important;
}

/* ── Telerik blue-elimination sweep ───────────────────────────────
   Components below hardcode colors rather than pulling from
   --kendo-color-primary, so they need scoped overrides. Keep each
   block minimal (just background/border/color) to avoid breaking
   layout. */

/* TabStrip active tab — underline + text use primary grey */
.k-tabstrip .k-tabstrip-items .k-item.k-active,
.k-tabstrip .k-tabstrip-items .k-item.k-selected,
.k-tabstrip .k-tabstrip-items .k-tab.k-active,
.k-tabstrip .k-tabstrip-items .k-tab.k-selected {
    border-color: var(--sf-color-primary) !important;
    color: var(--sf-color-primary) !important;
}

/* Radio button checked state (the inner dot) uses primary grey */
.k-radio:checked,
.k-radio.k-checked {
    background-color: var(--sf-color-primary) !important;
    border-color: var(--sf-color-primary) !important;
}
.k-radio:focus-visible,
.k-radio.k-focus {
    box-shadow: 0 0 0 2px rgba(71, 85, 105, 0.25) !important;
    border-color: var(--sf-color-primary) !important;
}

/* Switch "on" track + thumb */
.k-switch-on .k-switch-track,
.k-switch.k-switch-on .k-switch-track {
    background-color: var(--sf-color-primary) !important;
    border-color: var(--sf-color-primary) !important;
}

/* ProgressBar fill (non-stepper) */
.k-progressbar:not(.k-stepper-progressbar) .k-progressbar-value,
.k-progressbar:not(.k-stepper-progressbar) .k-selected {
    background-color: var(--sf-color-primary) !important;
}

/* Slider selection track + drag handle */
.k-slider .k-slider-selection,
.k-slider .k-slider-range {
    background-color: var(--sf-color-primary) !important;
}
.k-slider .k-draghandle {
    background-color: var(--sf-color-primary) !important;
    border-color: var(--sf-color-primary) !important;
}

/* Pager active page number */
.k-pager .k-pager-numbers .k-link.k-selected,
.k-pager .k-pager-numbers .k-link.k-state-selected,
.k-pager-numbers .k-button.k-selected,
.k-pager-numbers .k-button-flat.k-selected {
    background-color: var(--sf-color-primary) !important;
    color: #fff !important;
    border-color: var(--sf-color-primary) !important;
}

/* Grid selected row(s) */
.k-grid .k-master-row.k-selected,
.k-grid .k-master-row.k-selected > td,
.k-grid tr.k-selected,
.k-grid tr.k-selected > td,
.k-grid .k-table-row.k-selected,
.k-grid .k-table-row.k-selected > .k-table-td {
    background-color: var(--sf-bg-row-selected) !important;
    color: inherit !important;
}

/* TreeView / TreeList selected node */
.k-treeview .k-in.k-selected,
.k-treeview .k-treeview-leaf.k-selected,
.k-treelist .k-table-row.k-selected,
.k-treelist .k-table-row.k-selected > .k-table-td {
    background-color: var(--sf-bg-row-selected) !important;
    color: inherit !important;
}

/* Force white text inside hovered/selected/active menu items so nested
   .k-link children (which Telerik uses for the item's text) invert along
   with the primary-grey background. Higher specificity than a bare
   .k-link rule so it wins cleanly. */
.k-popup .k-menu-item:hover .k-link,
.k-popup .k-menu-item.k-focus .k-link,
.k-popup .k-menu-item.k-selected .k-link,
.k-popup .k-menu-item.k-active .k-link,
.k-popup .k-menu-item:active .k-link,
.k-menu-group .k-menu-item:hover .k-link,
.k-menu-group .k-menu-item.k-focus .k-link,
.k-menu-group .k-menu-item.k-selected .k-link,
.k-menu-group .k-menu-item.k-active .k-link,
.k-menu-group .k-menu-item:active .k-link,
.k-list .k-list-item:hover .k-link,
.k-list .k-list-item.k-selected .k-link,
.k-columnmenu-item:hover .k-link,
.k-columnmenu-item.k-selected .k-link,
.k-columnmenu-item.k-focus .k-link,
.k-columnmenu-item.k-active .k-link {
    color: #fff !important;
}

/* TimePicker / DateTimePicker popup — selected hour/minute list item */
.k-timeselector .k-time-list .k-item.k-selected,
.k-timeselector .k-time-list li.k-selected,
.k-list .k-list-item.k-selected {
    background-color: var(--sf-color-primary) !important;
    color: #fff !important;
}

/* Telerik Avatar (initials/text) uses SF primary grey instead of default blue.
   Extra-specific selectors to beat Telerik's own themed rules in the header. */
.k-avatar,
.k-avatar.k-avatar-text,
.k-avatar-solid,
.k-avatar-solid-primary,
.k-avatar-solid-base,
.k-avatar.k-avatar-solid-primary,
.k-avatar.k-avatar-md.k-avatar-solid,
#avatar-menu-button .k-avatar,
#avatar-menu-button .k-avatar-solid-primary {
    background-color: var(--sf-color-primary) !important;
    border-color: var(--sf-color-primary) !important;
    color: #fff !important;
}

/* Column menu, menu popup, dropdown list, and DropDownButton actions all use
   SF primary grey for selected / hover / focus / active / mousedown states
   instead of Telerik default blue or light grey. Casts a wide net over both
   the item container and any nested .k-link / .k-menu-link the item uses to
   render its clickable surface. */
.k-columnmenu-item:hover:not(.k-disabled),
.k-columnmenu-item.k-selected,
.k-columnmenu-item.k-focus,
.k-columnmenu-item.k-active,
.k-columnmenu-item.k-hover,
.k-columnmenu-item:active,
.k-menu-popup .k-menu-item:hover:not(.k-disabled),
.k-menu-popup .k-menu-item.k-selected,
.k-menu-popup .k-menu-item.k-focus,
.k-menu-popup .k-menu-item.k-active,
.k-menu-popup .k-menu-item.k-hover,
.k-menu-popup .k-menu-item:active,
.k-popup .k-menu-item:hover:not(.k-disabled),
.k-popup .k-menu-item.k-selected,
.k-popup .k-menu-item.k-focus,
.k-popup .k-menu-item.k-active,
.k-popup .k-menu-item.k-hover,
.k-popup .k-menu-item:active,
.k-popup .k-menu-item:hover:not(.k-disabled) > .k-link,
.k-popup .k-menu-item:hover:not(.k-disabled) > .k-menu-link,
.k-popup .k-menu-item.k-selected > .k-link,
.k-popup .k-menu-item.k-selected > .k-menu-link,
.k-popup .k-menu-item.k-focus > .k-link,
.k-popup .k-menu-item.k-focus > .k-menu-link,
.k-popup .k-menu-item.k-active > .k-link,
.k-popup .k-menu-item.k-active > .k-menu-link,
.k-popup .k-menu-item:active > .k-link,
.k-popup .k-menu-item:active > .k-menu-link,
.k-menu-group .k-menu-item:hover:not(.k-disabled),
.k-menu-group .k-menu-item.k-selected,
.k-menu-group .k-menu-item.k-focus,
.k-menu-group .k-menu-item.k-active,
.k-menu-group .k-menu-item.k-hover,
.k-menu-group .k-menu-item:active,
.k-menu-group .k-menu-item:hover:not(.k-disabled) > .k-link,
.k-menu-group .k-menu-item.k-focus > .k-link,
.k-menu-group .k-menu-item.k-active > .k-link,
.k-menu-group .k-menu-item:active > .k-link,
.k-list .k-list-item:hover:not(.k-disabled),
.k-list .k-list-item.k-selected,
.k-list .k-list-item.k-focus,
.k-list .k-list-item.k-hover,
.k-list .k-list-item:active,
/* Telerik DropDownButton renders each item as a .k-button inside the popup */
.k-popup .k-actions .k-button:hover:not(.k-disabled),
.k-popup .k-actions .k-button.k-selected,
.k-popup .k-actions .k-button.k-focus,
.k-popup .k-actions .k-button.k-active,
.k-popup .k-actions .k-button.k-hover,
.k-popup .k-actions .k-button:active,
.k-popup .k-group-item:hover:not(.k-disabled),
.k-popup .k-group-item.k-selected,
.k-popup .k-group-item.k-focus,
.k-popup .k-group-item.k-active,
.k-popup .k-group-item:active {
    background-color: var(--sf-color-primary) !important;
    background: var(--sf-color-primary) !important;
    color: #fff !important;
}
/* Let inline icons inside the hovered/active item inherit the white text
   instead of keeping their hard-coded brand colors. */
.k-popup .k-menu-item:hover i,
.k-popup .k-menu-item.k-focus i,
.k-popup .k-menu-item.k-active i,
.k-popup .k-menu-item:active i,
.k-menu-group .k-menu-item:hover i,
.k-menu-group .k-menu-item.k-focus i,
.k-menu-group .k-menu-item.k-active i,
.k-menu-group .k-menu-item:active i,
.k-popup .k-actions .k-button:hover i,
.k-popup .k-actions .k-button.k-focus i,
.k-popup .k-actions .k-button.k-active i,
.k-popup .k-actions .k-button:active i {
    color: inherit !important;
}

/* Telerik PanelBar headers use SF primary grey text (instead of default
   Telerik blue) in the collapsed state, and primary grey background with
   white text when expanded/selected. */
.k-panelbar > .k-panelbar-item > .k-link,
.k-panelbar .k-panelbar-header > .k-link {
    color: var(--sf-color-primary) !important;
}
.k-panelbar > .k-panelbar-item > .k-link.k-selected,
.k-panelbar > .k-panelbar-item > .k-link.k-active,
.k-panelbar .k-panelbar-header > .k-link.k-selected,
.k-panelbar .k-panelbar-header > .k-link.k-active,
.k-panelbar .k-panelbar-header.k-selected > .k-link,
.k-panelbar .k-panelbar-header.k-active > .k-link {
    background-color: var(--sf-color-primary) !important;
    color: #fff !important;
    border-color: var(--sf-color-primary) !important;
}

/* Calendar selected date uses SF primary grey instead of default blue */
.k-calendar .k-calendar-td.k-selected,
.k-calendar .k-calendar-td.k-selected:hover,
.k-calendar .k-calendar-td.k-selected.k-focus {
    color: var(--sf-color-primary) !important;
    box-shadow: inset 0 0 0 2px var(--sf-color-primary) !important;
}
.k-calendar .k-calendar-td.k-selected .k-link,
.k-calendar .k-calendar-td.k-selected:hover .k-link,
.k-calendar .k-calendar-td.k-selected.k-focus .k-link {
    background-color: transparent !important;
    border-color: var(--sf-color-primary) !important;
    color: var(--sf-color-primary) !important;
}

/* Replace default Telerik primary-button blue with SF accent grey for any
   button that doesn't opt into one of our explicit sf-btn-* classes
   (scheduler view switcher, selected button-group buttons, built-in search
   buttons, etc.). Covers k-button-solid-primary (default primary color),
   k-selected (selected state in button groups / tab strips), and k-active. */
.k-button-solid-primary:not(.sf-btn-save):not(.sf-btn-cancel):not(.sf-btn-accent):not(.sf-btn-secondary):not(.sf-btn-delete):not(.sf-btn-cautionary):not(.sf-btn-icon):not(.sf-btn-warning),
.k-button.k-selected:not(.sf-btn-save):not(.sf-btn-cancel):not(.sf-btn-accent):not(.sf-btn-secondary):not(.sf-btn-delete):not(.sf-btn-cautionary):not(.sf-btn-icon):not(.sf-btn-warning),
.k-button.k-active:not(.sf-btn-save):not(.sf-btn-cancel):not(.sf-btn-accent):not(.sf-btn-secondary):not(.sf-btn-delete):not(.sf-btn-cautionary):not(.sf-btn-icon):not(.sf-btn-warning) {
    background-color: var(--sf-accent-button-bg) !important;
    border-color: var(--sf-accent-button-bg) !important;
    color: #fff !important;
}
.k-button-solid-primary:not(.sf-btn-save):not(.sf-btn-cancel):not(.sf-btn-accent):not(.sf-btn-secondary):not(.sf-btn-delete):not(.sf-btn-cautionary):not(.sf-btn-icon):not(.sf-btn-warning):hover:not(.k-disabled),
.k-button.k-selected:not(.sf-btn-save):not(.sf-btn-cancel):not(.sf-btn-accent):not(.sf-btn-secondary):not(.sf-btn-delete):not(.sf-btn-cautionary):not(.sf-btn-icon):not(.sf-btn-warning):hover:not(.k-disabled),
.k-button.k-active:not(.sf-btn-save):not(.sf-btn-cancel):not(.sf-btn-accent):not(.sf-btn-secondary):not(.sf-btn-delete):not(.sf-btn-cautionary):not(.sf-btn-icon):not(.sf-btn-warning):hover:not(.k-disabled) {
    background-color: var(--sf-accent-button-hover) !important;
    border-color: var(--sf-accent-button-hover) !important;
}

/* Grid toolbar buttons use secondary styling (except Add which uses accent).
   Visible slate-500 border reads as the same visual weight as form fields. */
.k-grid .k-grid-toolbar .k-button:not(.sf-btn-accent):not(.sf-btn-save):not(.sf-btn-cancel):not(.sf-btn-delete):not(.sf-btn-cautionary):not(.sf-btn-warning) {
    background-color: var(--sf-secondary-button-bg) !important;
    border: 1px solid var(--sf-border-subtle) !important;
    color: var(--sf-secondary-button-text) !important;
    border-radius: 8px !important;
    height: var(--sf-btn-size);
    padding: 4px 4px !important;
    min-width: unset !important;
    box-shadow: var(--sf-shadow-md);
    transition: all 200ms ease;
}

/* Icon-only toolbar buttons: reduce padding and min-width so they don't appear elongated */
.k-grid .k-grid-toolbar .k-button:not(.sf-btn-accent):not(.sf-btn-save):not(.sf-btn-cancel):not(.sf-btn-delete):not(.sf-btn-cautionary):not(.sf-btn-warning).k-button-icon,
.k-grid .k-grid-toolbar .k-button:not(.sf-btn-accent):not(.sf-btn-save):not(.sf-btn-cancel):not(.sf-btn-delete):not(.sf-btn-cautionary):not(.sf-btn-warning).sf-btn-icon {
    min-width: unset !important;
    padding: 4px 4px !important;
}

/* Icon-only secondary buttons (outside grid toolbars, e.g. sticky form headers): tighter horizontal padding */
.sf-btn-secondary.k-button.k-button-icon,
.sf-btn-icon.k-button {
    min-width: unset !important;
    padding: 4px 8px !important;
}

/* ── 24×24 canonical icon-button target size (WCAG 2.2 AA target-size) ─ */
/* Apply .sf-btn-icon-24 to icon-only buttons (show/hide, email, view/hide, pop-out, export, refresh, recent-student icons, pagination nav) */
.sf-btn-icon-24,
.sf-btn-icon-24.k-button,
button.sf-btn-icon-24 {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    flex-shrink: 0;
}

/* SfButton.Grid.* sizing, command-cell padding, toolbar overflow,
   icon-tone helpers — see _content/GlobalEdTech.Web.Shared/css/sf-buttons.css */

/* Pop-out icon buttons — screen readers announce "Pop-out" via aria-label on the element */
.sf-btn-pop-out {
    width: 24px;
    height: 24px;
    min-width: 24px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--sf-color-accent);
    border-radius: 6px;
}

.sf-btn-pop-out:hover {
    background: var(--sf-color-accent-light);
    color: var(--sf-color-primary);
}

.sf-btn-pop-out:focus-visible {
    outline: 2px solid var(--sf-color-accent);
    outline-offset: 2px;
}

.k-grid .k-grid-toolbar .k-button:not(.sf-btn-accent):not(.sf-btn-save):not(.sf-btn-cancel):not(.sf-btn-delete):not(.sf-btn-cautionary):not(.sf-btn-warning):hover:not(.k-disabled) {
    background-color: var(--sf-secondary-button-hover) !important;
}

.k-grid .k-grid-toolbar .k-button:not(.sf-btn-accent):not(.sf-btn-save):not(.sf-btn-cancel):not(.sf-btn-delete):not(.sf-btn-cautionary):not(.sf-btn-warning):focus-visible {
    outline: var(--sf-focus-inner-width) solid var(--sf-focus-ring-inner) !important;
    outline-offset: var(--sf-focus-offset);
    box-shadow: 0 0 0 var(--sf-focus-width) var(--sf-focus-ring-outer) !important;
}

.k-grid .k-grid-toolbar .k-button:not(.sf-btn-accent):not(.sf-btn-save):not(.sf-btn-cancel):not(.sf-btn-delete):not(.sf-btn-cautionary):not(.sf-btn-warning).k-disabled {
    background-color: var(--sf-secondary-button-disabled-bg) !important;
    color: var(--sf-secondary-button-disabled-text) !important;
    cursor: not-allowed;
    opacity: 1;
}

/* SfButton.Accent / Destructive / Cautionary roles — see
   _content/GlobalEdTech.Web.Shared/css/sf-buttons.css */

/* ── Sticky Form Layout ────────────────────────────────────── */
.sf-form-layout-container {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
}

/* Wrapper for sticky form: fixed height + flex chain so scroll container gets constrained height. */
.sf-sticky-form-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.sf-sticky-form-wrapper .k-card {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.sf-sticky-form-wrapper .k-card-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Scroll container for sticky header/footer: place inside CardBody as direct parent of StickyFormLayout. */
.sf-sticky-scroll-container {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

.sf-sticky-scroll-container > .sf-form-layout {
    flex: 1;
    min-height: 0;
}

/* Grid wrapper that fills the available horizontal space and scrolls on overflow.
   Replaces the inline `width: calc(100vw - Xrem)` pattern that re-derived viewport
   math already handled by MainLayout's `.main` rule. Pair with `sf-grid-fill-height`
   (or an inline `height: calc(100vh - Yrem)` until vertical layout is migrated to flex). */
.sf-grid-fill-width {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
}

/* Base form layout: overflow visible so position:sticky works against page scroll */
.sf-form-layout {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: visible;
}

.sf-form-layout-container .sf-form-layout {
    flex: 1;
    min-height: 0;
}

/* When inside a scroll container, use clip so sticky works within that container */
.sf-sticky-scroll-container > .sf-form-layout {
    overflow: clip;
}

/* contentwrapper overrides: let content flow with main page scroll */
.contentwrapper .sf-form-layout-container {
    min-height: min-content;
}

.contentwrapper .sf-form-layout {
    flex: none;
}

.contentwrapper .sf-form-content {
    flex: none;
    min-height: auto;
    overflow: visible;
    overflow-x: clip;
}

/* Inside contentwrapper (config/student pages), the scroll container is the
   content area itself — sticky header should stick to its top, not 56px down. */
.contentwrapper .sf-sticky-header {
    top: 0;
}

.sf-sticky-header {
    position: sticky;
    top: 56px; /* below the 56px sticky .top-row nav bar */
    z-index: var(--sf-z-sticky-header);
    background-color: var(--sf-color-bg);
    border-bottom: 1px solid var(--sf-border-subtle);
    box-shadow: var(--sf-shadow-sm);
    height: 44px;
    padding: 8px 16px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Header with title: title left, buttons right (per mockup) */
.sf-sticky-header.sf-sticky-header--with-title {
    justify-content: space-between;
}

.sf-sticky-header-title {
    color: var(--sf-color-dark);
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
}

.sf-sticky-footer {
    position: sticky;
    bottom: 0;
    z-index: var(--sf-z-sticky-footer);
    background-color: var(--sf-bg-white);
    border-top: 1px solid var(--sf-border-subtle);
    box-shadow: var(--sf-shadow-sm);
    height: 44px;
    padding: 8px 16px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.sf-form-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 24px 24px 24px;
}

/* Form button toolbar spacing */
.sf-form-buttons {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ── Student Account header (above grid) ────────────────────────── */
.sf-student-account-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.5rem 2rem;
    padding: 0.25rem 0;
}

.sf-student-account-header .sf-account-section {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.sf-student-account-header .sf-account-section-title {
    color: var(--sf-color-accent);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.sf-student-account-header .sf-account-balance {
    color: var(--sf-color-dark);
    line-height: 1.5;
}

.sf-student-account-header .sf-account-balance button {
    color: #0366d6;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sf-student-account-header .sf-account-balance button:hover {
    color: var(--sf-color-dark);
}

.sf-student-account-header .sf-account-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sf-student-account-header .sf-account-edit-icon {
    background: none;
    border: none;
    color: var(--sf-color-accent);
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
}

.sf-student-account-header .sf-account-edit-icon:hover {
    color: var(--sf-primary-button-bg);
}

/* ── Notes list (card-based) ───────────────────────────────────── */
.sf-notes-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sf-note-card {
    background-color: var(--sf-bg-white);
    border: 1px solid var(--sf-border-subtle);
    border-radius: 8px;
    box-shadow: var(--sf-shadow-sm);
    overflow: hidden;
}

.sf-note-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--sf-border-subtle);
}

.sf-note-card-title {
    color: var(--sf-color-dark);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    padding: 0;
}

.sf-note-card-title:hover {
    color: var(--sf-primary-button-bg);
}

.sf-note-card-delete {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--sf-color-accent);
}

.sf-note-card-delete:hover {
    color: var(--sf-color-destructive);
}

.sf-note-card-body {
    padding: 12px 16px;
    color: var(--sf-color-primary);
    white-space: pre-wrap;
}

/* ── Typography Scale (all DM Sans) ──────────────────────────── */
.sf-text-student-name { font-weight: 700; font-size: 1.125rem; color: var(--sf-color-dark); }
.sf-text-detail { font-weight: 400; font-size: 0.6875rem; color: var(--sf-color-primary); }
.sf-text-badge { font-weight: 600; font-size: 0.6875rem; }
.sf-text-table-header { font-weight: 600; font-size: 0.6875rem; text-transform: uppercase; color: var(--sf-color-accent); }
.sf-text-table-body { font-weight: 400; font-size: 0.8125rem; }
.sf-text-nav { font-weight: 400; font-size: 0.8125rem; }

/* ── Stat Cards ──────────────────────────────────────────────── */
.sf-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sf-stat-card {
    padding: 24px;
    border-radius: 8px;
    background: var(--sf-color-white);
    box-shadow: var(--sf-shadow-sm);
    text-align: center;
    border: 1px solid var(--sf-border-subtle);
}
.sf-stat-card[role="group"] { position: relative; }
.sf-stat-value { font-weight: 700; font-size: 2.25rem; color: var(--sf-color-dark); line-height: 1.2; }
.sf-stat-value--warning { color: var(--sf-color-destructive); }
.sf-stat-label { font-weight: 600; font-size: 0.625rem; text-transform: uppercase; color: var(--sf-color-primary); margin-top: 4px; }
.sf-stat-subtitle { font-weight: 400; font-size: 0.6875rem; color: var(--sf-color-accent); margin-top: 2px; }
.sf-stat-icon { font-size: 1.25rem; color: var(--sf-color-accent); text-align: center; margin-bottom: 4px; }
.sf-stat-progress { height: 6px; max-width: 140px; border-radius: 3px; background: var(--sf-color-accent-light); margin-top: 8px; }
.sf-stat-progress-fill { height: 100%; border-radius: 3px; background: var(--sf-color-success); }
.sf-stat-value-unit { font-size: 1rem; font-weight: 500; color: var(--sf-color-accent); }
.sf-stat-badge--warning {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    font-weight: 600;
    font-size: 0.625rem;
}

/* ── Overview Page ───────────────────────────────────────────── */
.sf-overview-title {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--sf-color-dark);
    margin: 0 0 16px 0;
}

/* ── Enrollment Details Section ──────────────────────────────── */
.sf-enrollment-section {
    background: var(--sf-color-white);
    border: 1px solid var(--sf-border-subtle);
    border-radius: 8px;
    padding: 24px;
    box-shadow: var(--sf-shadow-sm);
}

.sf-enrollment-title {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--sf-color-dark);
    margin: 0 0 16px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--sf-border-subtle);
}

.sf-enrollment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 24px;
}

.sf-enrollment-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sf-enrollment-label {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--sf-color-accent);
    letter-spacing: 0.05em;
}

.sf-enrollment-value {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--sf-color-dark);
}

.sf-enrollment-link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-weight: 500;
    font-size: 13px;
    color: var(--sf-color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    text-align: left;
}
.sf-enrollment-link:hover { color: var(--sf-color-dark); }
.sf-enrollment-link:focus-visible {
    outline: var(--sf-focus-inner-width) solid var(--sf-focus-ring-inner);
    outline-offset: var(--sf-focus-offset);
    box-shadow: 0 0 0 var(--sf-focus-width) var(--sf-focus-ring-outer);
    border-radius: 2px;
}

/* ── Student Profile Card (Overview header) ──────────────────── */
.sf-profile-photo {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--sf-color-primary);
    color: var(--sf-color-white);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 24px;
    letter-spacing: 1px;
}
.sf-profile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sf-profile-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sf-profile-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.sf-profile-name,
.sf-profile-name-link {
    font-weight: 700;
    font-size: 18px;
    color: var(--sf-color-dark);
    line-height: 1.2;
}

.sf-profile-name-link {
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.sf-profile-name-link:hover { color: var(--sf-color-primary); }
.sf-profile-name-link:focus-visible {
    outline: var(--sf-focus-inner-width) solid var(--sf-focus-ring-inner);
    outline-offset: var(--sf-focus-offset);
    box-shadow: 0 0 0 var(--sf-focus-width) var(--sf-focus-ring-outer);
    border-radius: 2px;
}

.sf-multi-enrollment-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: #f5f3ff;
    color: #6d28d9;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

.sf-profile-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.sf-profile-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--sf-color-accent);
}

.sf-profile-id-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--sf-color-accent-light);
    color: var(--sf-color-dark);
    font-size: 12px;
    font-weight: 600;
    border: 0;
    cursor: pointer;
    font-family: inherit;
}
.sf-profile-id-chip:hover { background: #cbd5e1; }
.sf-profile-id-chip:focus-visible {
    outline: 2px solid var(--sf-color-primary);
    outline-offset: 2px;
}

.sf-profile-phones {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.sf-profile-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--sf-color-dark);
}

.sf-profile-phone-label {
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    color: var(--sf-color-accent);
    letter-spacing: 0.05em;
}

.sf-profile-phone-value { font-weight: 500; }

.sf-profile-phone-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 0;
    background: var(--sf-color-success);
    color: var(--sf-color-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 120ms ease, transform 120ms ease;
}
.sf-profile-phone-btn:hover { background: #047857; transform: scale(1.05); }
.sf-profile-phone-btn:focus-visible {
    outline: var(--sf-focus-inner-width) solid var(--sf-focus-ring-inner);
    outline-offset: var(--sf-focus-offset);
    box-shadow: 0 0 0 var(--sf-focus-width) var(--sf-focus-ring-outer);
}
.sf-profile-phone-btn i { font-size: 12px; }

/* ── Stat-card "View on Account Summary" link ────────────────── */
.sf-stat-link {
    margin-top: 8px;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    color: var(--sf-color-primary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.sf-stat-link:hover { color: var(--sf-color-dark); text-decoration: underline; }
.sf-stat-link i { font-size: 10px; }

/* ── Generic overview sections (Holds / Courses) ─────────────── */
.sf-overview-section {
    background: var(--sf-color-white);
    border: 1px solid var(--sf-border-light);
    border-radius: 8px;
    padding: 24px;
    box-shadow: var(--sf-shadow-sm);
    margin-top: 16px;
}

.sf-overview-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--sf-border-light);
}
.sf-overview-section-head .sf-enrollment-title {
    margin: 0;
    padding: 0;
    border: 0;
}

.sf-section-actions { display: inline-flex; gap: 12px; }
.sf-section-link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--sf-color-primary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.sf-section-link:hover { color: var(--sf-color-dark); text-decoration: underline; }
.sf-section-link i { font-size: 11px; }

/* Holds list */
.sf-hold-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.sf-hold-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-left: 3px solid var(--sf-color-accent-light);
    background: var(--sf-color-bg);
    border-radius: 4px;
}
.sf-hold-item.is-active {
    border-left-color: var(--sf-color-destructive);
    background: #fef2f2;
}
.sf-hold-title { font-weight: 600; font-size: 13px; color: var(--sf-color-dark); }
.sf-hold-meta { display: flex; gap: 12px; font-size: 11px; color: var(--sf-color-accent); flex-wrap: wrap; }

/* Courses summary */
.sf-courses-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--sf-color-dark);
}
.sf-courses-summary-item { display: inline-flex; align-items: center; gap: 8px; }
.sf-courses-summary-item i { color: var(--sf-color-accent); }
.sf-courses-summary-empty { color: var(--sf-color-accent); font-style: italic; }

/* ── Student Overview — two-column layout (PBI 23227 + Claude Design tokens)
   Adopted: comfortable density (24/20/20 spacing), uppercase eyebrow, amberwash
   on Holds card when active. See /tmp/sf-design-overview/ bundle. ── */
.sf-overview-page { padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.sf-overview-page .sf-overview-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.3px;
    line-height: 1.2;
    color: var(--sf-color-dark);
    margin: 0;
}

.sf-summary-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
@media (max-width: 1100px) {
    .sf-summary-grid { grid-template-columns: minmax(0, 1fr); }
}

.sf-summary-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.sf-summary-card {
    background: var(--sf-color-white);
    border: 1px solid var(--sf-border-light);
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: var(--sf-shadow-sm);
}
/* Amberwash — Holds card warn variant (active holds present) */
.sf-summary-card--warn {
    background: #fffbeb;
    border-color: #fde68a;
}

/* Uppercase eyebrow — single source of truth for section labels */
.sf-summary-card-eyebrow {
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--sf-color-accent);
    margin: 0 0 12px 0;
}

/* Card head row (eyebrow + actions) */
.sf-summary-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.sf-summary-card-head .sf-summary-card-eyebrow { margin: 0; }
.sf-summary-card-actions { display: flex; gap: 14px; align-items: center; }

.sf-summary-card-body { display: flex; flex-direction: column; gap: 10px; }

/* Profile — definition-list pattern (110px label / 1fr value) */
.sf-profile-card { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start; }
.sf-dl {
    display: grid;
    grid-template-columns: 110px 1fr;
    row-gap: 10px;
    column-gap: 12px;
    font-size: 13px;
    align-items: baseline;
    margin: 0;
}
.sf-dl dt { color: var(--sf-color-accent); font-weight: 500; margin: 0; }
.sf-dl dd { margin: 0; color: var(--sf-color-dark); font-weight: 500; display: flex; align-items: center; gap: 6px; }
.sf-dl dd .sf-mono { font-family: var(--sf-font-family); font-variant-numeric: tabular-nums; font-size: 12.5px; }

/* Profile photo — square-rounded, comfortable size */
.sf-profile-card .sf-profile-photo {
    width: 104px;
    height: 104px;
    border-radius: 12px;
    background: linear-gradient(135deg, #64748b, #334155);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 1px;
    flex-shrink: 0;
}
.sf-profile-card .sf-profile-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }

/* Profile name link inside <dd> */
.sf-profile-name-link-inline {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-weight: 500;
    color: var(--sf-color-info);
    cursor: pointer;
    text-decoration: none;
}
.sf-profile-name-link-inline:hover { text-decoration: underline; }
.sf-profile-name-link-inline:focus-visible {
    outline: var(--sf-focus-inner-width) solid var(--sf-focus-ring-inner);
    outline-offset: var(--sf-focus-offset);
    box-shadow: 0 0 0 var(--sf-focus-width) var(--sf-focus-ring-outer);
    border-radius: 2px;
}

/* Phone link with inline icon — wraps the phone-call button */
.sf-phone-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--sf-color-info);
    font-weight: 500;
}

/* Account Summary rows — value column right-aligned, monospaced */
.sf-account-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
}
.sf-account-row__label { color: var(--sf-color-dark); font-weight: 600; font-size: 13px; }
.sf-account-row__value {
    font-family: var(--sf-font-family);
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    color: var(--sf-color-dark);
    font-weight: 600;
}
.sf-account-row__value.is-due { color: var(--sf-color-destructive); }
.sf-account-row__value--muted { color: var(--sf-color-text-muted); font-weight: 500; font-family: inherit; }
.sf-account-row__inline-link { margin-left: 8px; font-size: 12px; font-weight: 500; }

/* Generic "view"-style link reused across summary cards */
.sf-summary-link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sf-color-info);
    cursor: pointer;
}
.sf-summary-link:hover { text-decoration: underline; }
.sf-summary-link:focus-visible {
    outline: var(--sf-focus-inner-width) solid var(--sf-focus-ring-inner);
    outline-offset: var(--sf-focus-offset);
    box-shadow: 0 0 0 var(--sf-focus-width) var(--sf-focus-ring-outer);
    border-radius: 2px;
}

/* Multi-enrollment banner inside Enrollment card */
.sf-multi-enrollment-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #f5f3ff;
    color: #6d28d9;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    margin: 10px 0 14px;
}

/* Enrollment header (Institution · Program link) */
.sf-enroll-header {
    font-size: 15px;
    font-weight: 700;
    color: var(--sf-color-dark);
    letter-spacing: -0.2px;
    margin-bottom: 4px;
}
.sf-enroll-header a, .sf-enroll-header .sf-enrollment-link { color: var(--sf-color-info); font-weight: 700; }
.sf-enroll-sub { font-size: 12px; color: var(--sf-color-text-muted); margin-bottom: 14px; }

/* Enrollment field grid */
.sf-enroll-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
    margin-top: 10px;
}
.sf-enroll-field { display: flex; flex-direction: column; gap: 2px; }
.sf-enroll-field__label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--sf-color-accent);
}
.sf-enroll-field__value {
    font-size: 13px;
    color: var(--sf-color-dark);
    font-weight: 500;
}
.sf-enroll-field__value a, .sf-enroll-field__value .sf-enrollment-link {
    color: var(--sf-color-info);
    font-weight: 500;
}
.sf-enroll-field__value.muted { color: #94a3b8; }
.sf-enroll-field--full { grid-column: 1 / -1; }
@media (max-width: 700px) { .sf-enroll-grid { grid-template-columns: 1fr; } }

/* Academics — prominent GPA, credits progress block, divided SAP row */
.sf-gpa-block { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 10px; }
.sf-gpa-value {
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -1px;
    color: var(--sf-color-dark);
    line-height: 1;
}
.sf-gpa-scale { font-size: 13px; color: var(--sf-color-accent); }
.sf-gpa-empty { font-size: 36px; font-weight: 700; color: #cbd5e1; line-height: 1; letter-spacing: -1px; }
.sf-gpa-eyebrow {
    font-size: 12px;
    font-weight: 600;
    color: var(--sf-color-dark);
    margin: 4px 0 0;
}

.sf-progress-block { margin-top: 14px; }
.sf-progress-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--sf-color-dark);
}
.sf-progress-header strong { color: var(--sf-color-dark); font-weight: 600; }
.sf-progress {
    height: 6px;
    background: var(--sf-color-accent-light);
    border-radius: 999px;
    overflow: hidden;
}
.sf-progress__fill {
    height: 100%;
    background: linear-gradient(90deg, #475569, #334155);
    border-radius: 999px;
    transition: width 0.4s ease;
}

.sf-sap {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--sf-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.sf-sap-label { font-size: 13px; color: var(--sf-color-dark); }
.sf-sap-label strong { font-weight: 600; color: var(--sf-color-dark); }

/* Student Courses */
.sf-courses-subtitle {
    font-size: 12.5px;
    color: var(--sf-color-accent);
    margin-bottom: 12px;
    font-weight: 500;
}

.sf-empty-line {
    font-size: 13px;
    color: var(--sf-color-accent);
    font-style: italic;
    padding: 4px 0;
}

/* ── Student Courses — next scheduled class list ───────────────── */
.sf-course-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sf-course-item {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--sf-color-border);
    border-radius: var(--sf-radius-md);
    background: var(--sf-color-surface);
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: default;
    transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.sf-course-item.is-clickable { cursor: pointer; }
.sf-course-item.is-clickable:hover,
.sf-course-item.is-clickable:focus-visible {
    border-color: var(--sf-color-accent);
    background: var(--sf-color-accent-light);
}
.sf-course-item:focus-visible {
    outline: var(--sf-focus-inner-width) solid var(--sf-focus-ring-inner);
    outline-offset: var(--sf-focus-offset);
    box-shadow: 0 0 0 var(--sf-focus-width) var(--sf-focus-ring-outer);
}
.sf-course-item[disabled] {
    opacity: 1; /* keep readable — disabled only removes click */
    cursor: default;
}
.sf-course-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.sf-course-code {
    font-weight: 700;
    font-size: 13px;
    color: var(--sf-color-dark);
}
.sf-course-title {
    font-size: 12.5px;
    color: var(--sf-color-text-muted);
}
.sf-course-meta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 11.5px;
    color: var(--sf-color-accent);
}
.sf-course-meta i { margin-right: 4px; }

/* Holds — friendlier empty state w/ inline check */
.sf-holds-empty {
    padding: 8px 0 4px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--sf-color-success);
    font-weight: 600;
    font-size: 13px;
}
.sf-holds-empty__sub { color: var(--sf-color-accent); font-weight: 400; font-size: 12px; }

.sf-holds-footer { text-align: center; padding-top: 6px; }
.sf-holds-footer .sf-summary-link { font-size: 12.5px; }

/* ── Pulsing SAP-status pill ─────────────────────────────────── */
.sf-status-pill.sf-status-pulse {
    position: relative;
    animation: sf-status-pulse 2s ease-in-out infinite;
}
.sf-status-pill.sf-status-pulse .sf-status-dot {
    position: relative;
}
.sf-status-pill.sf-status-pulse .sf-status-dot::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid currentColor;
    opacity: 0.7;
    animation: sf-status-dot-pulse 1.6s ease-out infinite;
}

@keyframes sf-status-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
    50%      { box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent); }
}
@keyframes sf-status-dot-pulse {
    0%   { transform: scale(0.8); opacity: 0.7; }
    100% { transform: scale(2.0); opacity: 0; }
}

html, body {
    font-size: 100%;
    font-family: var(--sf-font-family);
    background-color: var(--sf-color-bg) !important;
    overflow-x: hidden;
    /* Bound the document so descendants can flex-fill without resorting to
       calc(100vh - Nrem) magic constants. The MainLayout chain (.page →
       .main → main.content) propagates this height so page content fills
       the viewport precisely. */
    height: 100%;
}

.document-preview-window.k-window {
    max-height: 85vh;
}





a, .btn-link {
    color: #0366d6;
}

.btn-inline {
    padding-top: 0px;
    padding-bottom: 0px;
    font-size: 11pt;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.content {
    padding-top: 0;
    background-color: var(--sf-color-bg) !important;
    overflow-x: hidden;
    /* Vertical scroll on overflow — flex chain (see MainLayout.razor.css)
       bounds the height now, so explicit max-height is unnecessary. */
    overflow-y: auto;
    /* The visual separator between the top-row and content comes from
       .top-row's border-bottom; a duplicate border-top here previously
       added a phantom 1px to the box and contributed to a sub-pixel
       body-scroll wiggle when combined with .top-row's border-bottom
       (content-box sizing made `height: 3.5rem` actually render at 57px). */
}

/* Ensure catalog details page can scroll (QA 22246 — /academics/catalogs/162 was clipping) */
.catalog-details {
    overflow-y: visible;
    min-height: 0;
}

/* 22246: override Telerik Wizard primary button (default royal blue) with style-guide primary.
   Affects Template Registration "Next" and similar wizard-navigation primary actions. */
.k-stepper + .k-actions .k-button-solid-primary,
.k-wizard .k-button-solid-primary,
.k-wizard-buttons .k-button-solid-primary {
    background-color: var(--sf-color-primary) !important;
    border-color: var(--sf-color-primary) !important;
    color: var(--sf-color-white) !important;
    border-radius: 8px !important;
}

.k-stepper + .k-actions .k-button-solid-primary:hover,
.k-wizard .k-button-solid-primary:hover,
.k-wizard-buttons .k-button-solid-primary:hover {
    background-color: var(--sf-color-dark) !important;
    border-color: var(--sf-color-dark) !important;
}

.k-stepper + .k-actions .k-button-solid-primary:focus-visible,
.k-wizard .k-button-solid-primary:focus-visible,
.k-wizard-buttons .k-button-solid-primary:focus-visible {
    outline: var(--sf-focus-inner-width) solid var(--sf-focus-ring-inner) !important;
    outline-offset: var(--sf-focus-offset);
    box-shadow: 0 0 0 var(--sf-focus-width) var(--sf-focus-ring-outer) !important;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: #dc3545;
    margin-top: 4px;
    display: -ms-flexbox;
    display: flex;
    font-size: 0.75rem;
    font-style: normal;
}


.main {
    flex: 1;
}

    .main .top-row {
        background-color: var(--sf-color-bg);
        justify-content: flex-end;
    }

        .main .top-row > a, .main .top-row .btn-link {
            white-space: nowrap;
            margin-left: 1.5rem;
        }

        .main .top-row div:first-child {
            overflow: hidden;
            text-overflow: ellipsis;
            margin-right: auto;
        }

/* Systemic fix: override inline viewport-based heights ONLY inside config-detail-content
   (settings pages). The flex chain there uses min-height: 0 so height: 100% resolves
   to the actual container height. Student pages (StudentLayout's contentwrapper) still use
   their original calc heights because their chain uses min-height: min-content. */
.config-detail-content .sf-sticky-form-wrapper[style*="calc(100vh"],
.config-detail-content [style*="height: calc(100vh"] {
    height: 100% !important;
    min-height: 0;
}

/* Designations page: 3 grids share viewport, no scrollbar */
.sf-designations-grids {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sf-designations-grid-card {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.sf-designations-grid-card .k-card-body,
.sf-designations-grid-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.k-grid-search {
    width: 13em !important;
}

.k-drawer-item {
    padding-top: 0.1rem !important;
    padding-bottom: 0.1rem !important;
    padding-inline-start: 0rem !important;
}

.k-drawer-item > .k-drawer-link {
    padding-top: 0.1rem !important;
    padding-bottom: 0.1rem !important;
}

.subnav-container {
    padding-top: 0.0rem;
    padding-bottom: 0.8rem;
}

.subnav {
    height: 100vh;
}

.subnav .k-drawer {
    background-color: var(--sf-color-bg);
}

.subnav .k-drawer-left.k-drawer-expanded .k-drawer {
    border-right-width: 0px;
}

.subnav li.pushpin {
    cursor: pointer; position: relative; top: 4px; left: 208px;
}

.subnav-content-header {
    padding-bottom: 0.4rem;
}

.subnav-content-body {
    border: 1px solid var(--sf-color-accent-light);
    border-radius: 6px;
    min-height: 80vh;
}

.horizontal-menu-content {
    padding: 0.8rem;
    padding-left: 1.2rem;
}

#blazor-error-ui {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-top: 3px solid #dc3545;
    bottom: 0;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
    display: none;
    left: 0;
    padding: 1.5rem 2rem;
    position: fixed;
    width: 100%;
    z-index: 999999991;
    font-family: var(--sf-font-family);
}

#blazor-error-ui .error-content {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
}

#blazor-error-ui .error-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

#blazor-error-ui .error-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #212529;
    margin-bottom: 0.25rem;
    white-space: nowrap;
}

#blazor-error-ui .error-message {
    color: #6c757d;
    font-size: 0.95rem;
    line-height: 1.4;
    margin-bottom: 1rem;
}

#blazor-error-ui .error-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

#blazor-error-ui .reload {
    background-color: var(--sf-color-primary);
    color: var(--sf-color-white);
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

#blazor-error-ui .reload:hover {
    background-color: #0b5ed7;
    color: white;
    text-decoration: none;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    font-size: 1.5rem;
    color: #6c757d;
    transition: color 0.15s ease-in-out;
    padding: 0.25rem;
    line-height: 1;
    background: none;
    border: none;
}

#blazor-error-ui .dismiss:hover {
    color: #dc3545;
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
    #blazor-error-ui {
        padding: 1rem;
    }

    #blazor-error-ui .error-content {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }

    #blazor-error-ui .error-actions {
        justify-content: center;
    }
}


.btn-link {
    border: none;
    background: transparent;
}
.btn-link:focus:not(:focus-visible) {
    border: none;
    outline: none;
    background: transparent;
}

/* Bootstrap's `.btn:focus { outline: 0 }` has specificity (0,2,0) and beats
   our universal :where(...):focus-visible (0,1,0), so SetupLabel's
   <button class="btn btn-link"> loses its focus ring on keyboard nav. Match
   Bootstrap's specificity here and restore the universal double-ring. */
.btn-link:focus-visible {
    outline: var(--sf-focus-inner-width) solid var(--sf-focus-ring-inner);
    outline-offset: var(--sf-focus-offset);
    box-shadow: 0 0 0 var(--sf-focus-width) var(--sf-focus-ring-outer);
}

/* .btn-plain (SfButton.Link / SfButton.Close foundation) — see
   _content/GlobalEdTech.Web.Shared/css/sf-buttons.css */

.k-card {
    font-size: 10pt !important;
}

.k-card-title {
    font-size: 1rem !important;
}

/* Grids: fill full horizontal space in all layouts */
.k-grid {
    font-size: 10pt !important;
    width: 100% !important;
    min-width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Grid wrapper and table - ensure full width when in flex/splitter layouts */
.k-grid .k-grid-wrap,
.k-grid .k-grid-content,
.k-grid .k-grid-table-wrap {
    width: 100% !important;
    max-width: 100%;
}
.k-table-md {
    font-size: 10pt !important;
    line-height: 1.2 !important;
}

/*.k-button-md {
    padding: 0.375rem 0.75rem !important;
    font-size: 10pt !important;
    line-height: 1.5;
}
*/
.k-tabstrip {
    font-size: 10pt !important;
}

.k-drawer-item {
    font-size: 10pt !important;
}

.k-grid-table .btn {
    font-size: 10pt !important;
}

.k-pager-md .k-pager-sizes .k-dropdown-list, .k-pager-md .k-pager-sizes .k-dropdown,
.k-pager-md .k-pager-sizes .k-dropdownlist,
.k-pager-md .k-pager-sizes > select {
    width: 6.2em !important;
}

.hold-notification {
    color: var(--sf-color-destructive);
    font-weight: 700;
    border-radius: 5px;
    border: 1px solid var(--sf-color-border);
    margin-left: 0.5rem;
}

    .hold-notification.large {
        color: var(--sf-color-destructive);
        font-weight: 700;
        padding: 8px;
        border-radius: 5px;
        border: 1px solid var(--sf-color-border);
        margin-left: 0.5rem;
    }




.GridSettings .k-input {
    width: 20em;
}



.frame-src {
    flex-grow: 1;
    border: none;
    margin: 0;
    padding: 0;
}

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #FFBF44;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #0B8250;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

/* --------------------------------------------------------------------------- */
/* WCAG 2.4.7 — Focus Visible: keyboard focus indicators for Telerik Grid     */
/* :focus-visible fires on keyboard nav only. .k-focus is Telerik's own class  */
/* for items tracked by roving tabindex (toolbar, grid cells).                 */
/* --------------------------------------------------------------------------- */

/* Toolbar buttons & items — Telerik tracks the active item with .k-focus */
.k-toolbar .k-button.k-focus,
.k-toolbar .k-button:focus-visible,
.k-toolbar .k-toolbar-item.k-focus,
.k-toolbar > .k-toolbar-item:focus-visible,
.k-toolbar > *:focus-visible {
    outline: var(--sf-focus-inner-width) solid var(--sf-focus-ring-inner) !important;
    outline-offset: -1px;
    box-shadow: 0 0 0 var(--sf-focus-width) var(--sf-focus-ring-outer) !important;
    border-radius: 4px;
}

/* Search box — outline on wrapper when inner input has focus */
.k-grid-search:focus-within {
    outline: var(--sf-focus-inner-width) solid var(--sf-focus-ring-inner) !important;
    outline-offset: -1px;
    box-shadow: 0 0 0 var(--sf-focus-width) var(--sf-focus-ring-outer) !important;
    border-radius: 4px;
}

/* Search input — no double outline, wrapper handles it */
.k-grid-search .k-input-inner:focus {
    outline: none !important;
}

/* Pager navigation buttons */
.k-pager-nav:focus-visible,
.k-pager-nav.k-focus {
    outline: var(--sf-focus-inner-width) solid var(--sf-focus-ring-inner) !important;
    outline-offset: -1px;
    box-shadow: 0 0 0 var(--sf-focus-width) var(--sf-focus-ring-outer) !important;
    border-radius: 4px;
}

/* Pager page number buttons */
.k-pager-numbers .k-button:focus-visible,
.k-pager-numbers .k-button.k-focus {
    outline: var(--sf-focus-inner-width) solid var(--sf-focus-ring-inner) !important;
    outline-offset: -1px;
    box-shadow: 0 0 0 var(--sf-focus-width) var(--sf-focus-ring-outer) !important;
}

/* Pager items-per-page dropdown */
.k-pager-sizes .k-dropdownlist:focus-visible,
.k-pager-sizes .k-dropdownlist:focus,
.k-pager-sizes .k-dropdownlist.k-focus,
.k-pager-sizes select:focus-visible {
    outline: var(--sf-focus-inner-width) solid var(--sf-focus-ring-inner) !important;
    outline-offset: -1px;
    box-shadow: 0 0 0 var(--sf-focus-width) var(--sf-focus-ring-outer) !important;
    border-radius: 4px;
}

/* Pager page input */
.k-pager-input .k-input-inner:focus-visible,
.k-pager-input .k-input-inner:focus,
.k-pager-input input:focus-visible {
    outline: var(--sf-focus-inner-width) solid var(--sf-focus-ring-inner) !important;
    outline-offset: 0;
    box-shadow: 0 0 0 var(--sf-focus-width) var(--sf-focus-ring-outer) !important;
}

/* Grid header cells when navigable */
.k-grid-header th:focus-visible,
.k-grid-header th.k-focus {
    outline: var(--sf-focus-inner-width) solid var(--sf-focus-ring-inner) !important;
    outline-offset: -2px;
    box-shadow: 0 0 0 var(--sf-focus-width) var(--sf-focus-ring-outer) !important;
}

/* Row command buttons (Edit, Delete, etc.) inside grid cells */
.k-grid .k-command-cell .k-button:focus-visible,
.k-grid .k-command-cell .k-button.k-focus,
.k-grid td .k-button:focus-visible,
.k-grid td .k-button.k-focus {
    outline: var(--sf-focus-inner-width) solid var(--sf-focus-ring-inner) !important;
    outline-offset: -1px;
    box-shadow: 0 0 0 var(--sf-focus-width) var(--sf-focus-ring-outer) !important;
    border-radius: 4px;
}

/* Grid td/th focus ring is defined in the Telerik overrides block below
   (covers both td and th with outline-offset: -2px). */

/* Checkbox column — visible focus ring */
.k-grid .k-checkbox:focus-visible {
    outline: var(--sf-focus-inner-width) solid var(--sf-focus-ring-inner) !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 var(--sf-focus-width) var(--sf-focus-ring-outer) !important;
}

/* Grid checkboxes — default blue, consistent across all grids */
.k-grid .k-checkbox,
.k-grid .k-checkbox:checked {
    border-color: var(--sf-color-accent) !important;
}

.k-grid .k-checkbox:checked {
    background-color: var(--sf-color-accent) !important;
}

/* 22246: fix "space bar takes 2 presses to toggle checkbox".
   Telerik renders .k-checkbox-wrap around the <input>. Making the wrapper
   non-interactive for clicks forwards interactions directly to the inner input,
   so a single space press toggles. */
.k-grid .k-checkbox-wrap {
    pointer-events: none;
}
.k-grid .k-checkbox-wrap .k-checkbox {
    pointer-events: auto;
    position: relative;
    z-index: 1;
}

/* Student name focus ring — consistent with rest of header */
h2.sf-student-header-name .btn-plain:focus-visible,
.sf-student-header-name:focus-visible {
    outline: var(--sf-focus-inner-width) solid var(--sf-focus-ring-inner);
    outline-offset: var(--sf-focus-offset);
    box-shadow: 0 0 0 var(--sf-focus-width) var(--sf-focus-ring-outer);
    border-radius: 4px;
}

/* Focus ring via box-shadow so it isn't clipped by overflow:hidden containers
   (e.g. Document Management grid cells where the ring was hiding behind a field) */
.sf-focus-ring-inset:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 2px var(--sf-focus-ring-inner), 0 0 0 4px var(--sf-focus-ring-outer) !important;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

/* ── Student Header ──────────────────────────────────────────── */
.sf-student-header {
    position: relative;
    z-index: var(--sf-z-student-header);
    /* Gradient extends full-width to abut the Main Menu bar (WCAG/UX feedback 22246) */
    background: linear-gradient(to right, var(--sf-color-border), #f1f5f9);
    border-radius: 0 12px 12px 0;
    margin: 8px 12px 0 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
    padding: 0;
    overflow: visible;
    max-width: calc(100% - 12px);
}

/* Make enrollment grid transparent so gradient shows through.
   Telerik + inline styles set .k-panelbar bg white !important.
   Double class specificity + !important to override. */
header.sf-student-header .k-panelbar.k-panelbar {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
header.sf-student-header .k-panelbar-item.k-panelbar-item {
    background-color: transparent !important;
    background: transparent !important;
}
header.sf-student-header .k-link,
header.sf-student-header .k-panelbar .k-link,
header.sf-student-header .k-panelbar > .k-panelbar-header > .k-link {
    background-color: transparent !important;
    background: transparent !important;
    color: var(--sf-color-dark) !important;
    font-size: 0.75rem;
    padding: 6px 24px;
    border: none !important;
}
header.sf-student-header .k-link:hover,
header.sf-student-header .k-panelbar .k-link:hover {
    background-color: rgba(0,0,0,0.04) !important;
}

.sf-student-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 24px;
    min-height: 56px;
}

/* Quick-access nav trigger in student header */
.sf-student-nav-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--sf-interactive-min);
    height: var(--sf-interactive-min);
    border: none;
    border-radius: 6px;
    background: rgba(0,0,0,0.06);
    color: var(--sf-color-dark);
    cursor: pointer;
    flex-shrink: 0;
    font-size: 0.75rem;
    transition: background 150ms;
}

.sf-student-nav-trigger:hover {
    background: rgba(0,0,0,0.12);
}

.sf-student-nav-trigger:focus-visible {
    outline: var(--sf-focus-inner-width) solid var(--sf-focus-ring-inner);
    outline-offset: var(--sf-focus-offset);
    box-shadow: 0 0 0 var(--sf-focus-width) var(--sf-focus-ring-outer);
}

/* ── Student nav popup (flyout from hamburger) ──────────────── */

.sf-student-nav-trigger-wrapper {
    position: relative;
    flex-shrink: 0;
}

.sf-student-nav-trigger--active {
    background: rgba(0,0,0,0.15);
}

.sf-student-nav-popup {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 220px;
    max-height: calc(100vh - 180px);
    background: var(--sf-nav-student-bg, #e2e8f0);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.06);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 50;
    display: flex;
    flex-direction: column;
    animation: sf-popup-enter 150ms ease-out;
}

@keyframes sf-popup-enter {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sf-student-nav-popup {
        animation: none;
    }
}

.sf-student-header-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.sf-student-header-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--sf-color-primary);
    color: var(--sf-color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.sf-student-header-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* Tighter gap — QA 22246: remove whitespace between name and detail line */
    gap: 0;
}

.sf-student-header-info .sf-text-detail {
    font-size: 0.8125rem;
    line-height: 1.2;
    margin-top: 0;
}

/* Student number rendered alongside status badge on the right — 22246.
   Whole pill is a click-to-copy button; styled identical to the read-only
   variant but with hover/focus affordances. */
.sf-student-header-number {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 28px;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid var(--sf-border-subtle);
    background: var(--sf-color-white);
    color: var(--sf-color-primary);
    /* Match badge typography */
    font-weight: 600;
    font-size: 0.8125rem;
    white-space: nowrap;
    /* Reset browser <button> defaults so the pill looks identical regardless
       of whether the element is rendered as <span> or <button>. */
    font-family: inherit;
    cursor: pointer;
    transition: box-shadow 0.3s ease-in-out;
}

.sf-student-header-number:hover {
    box-shadow: var(--sf-shadow-md);
}

.sf-student-header-number:focus-visible {
    outline: 2px solid var(--sf-focus-ring-inner);
    outline-offset: 0;
}

h2.sf-student-header-name {
    margin: 0;
    padding: 0;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.3px;
    flex-shrink: 1;
}

/* WCAG 2.5.8 — force a 32px hit area on the underlying button; vertical
   padding absorbs the extra height so the visible name row doesn't grow. */
h2.sf-student-header-name .btn-plain {
    display: inline-flex;
    align-items: center;
    min-height: var(--sf-interactive-min);
    padding: 4px 0;
}

.sf-student-header-name:hover {
    text-decoration: underline;
}

.sf-student-header-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.sf-student-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 28px;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid var(--sf-border-subtle);
    background: var(--sf-color-accent-light);
    color: var(--sf-color-primary);
    font-weight: 600;
    font-size: 0.8125rem;
    cursor: pointer;
    white-space: nowrap;
    transition: box-shadow 0.2s ease-in-out;
}

.sf-student-header-badge:hover {
    box-shadow: var(--sf-shadow-md);
}

/* Pill-shaped badge — outline sits flush on the border so it follows the
   rounded shape without a visible gap. */
.sf-student-header-badge:focus-visible {
    outline: 2px solid var(--sf-focus-ring-inner);
    outline-offset: 0;
}

.sf-student-header-badge--danger {
    background: #fecaca;
    color: #991b1b;
    border-color: #991b1b; /* Matches text — 6.76:1 boundary on page (was 1.38:1) */
}

.sf-student-header-badge--warning {
    background: #fef3c7;
    color: #92400e;
    border-color: #fef3c7;
}

/* Status accent — left border stripe (preserves rounded corners) */
.sf-student-header.applicant { border-left: 4px solid var(--sf-color-warning); }     /* #d97706 amber */
.sf-student-header.active    { border-left: 4px solid var(--sf-color-success); }     /* #059669 green */
.sf-student-header.inactive  { border-left: 4px solid var(--sf-color-destructive); } /* #dc2626 red */
.sf-student-header.complete  { border-left: 4px solid navy; }                        /* #000080 navy */
.sf-student-header.rejected  { border-left: 4px solid var(--sf-color-destructive); } /* #dc2626 red */

/* Scroll padding so focused elements don't hide behind sticky form header (44px) */
.contentwrapper {
    scroll-padding-top: 44px;
}

/* CrudGrid wrapper. Two modes:
   sf-grid-fill-height: flex-fill the available vertical space inside the layout's
           main.content flex column. Replaces the legacy
           `calc(100vh - HeightOffsetrem)` magic constant.
   sf-grid-fill-auto: size to grid content (used when AutoHeight=true, e.g. when
           the grid is embedded inside a card with its own scrolling). */
.crud-grid-wrapper {
    width: 100%;
}
.sf-grid-fill-height {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}


.k-card {
    border-style: none !important;
    background-color: transparent !important;
}

    .k-card .recent-student:hover {
        background-color: var(--sf-color-bg);
        cursor: pointer;
    }


.k-card-body {
    border-style: solid;
    border-width: 1px;
    border-color: white;
    border-radius: 10px;
    background-color: white;
}

.k-card-header {
    border-style: none !important;
    background-color: transparent;
}

.k-splitter {
    background-color: var(--sf-color-bg) !important;
}

.k-pane {
    background-color: var(--sf-color-bg);
}

.isir-no-action-needed {
    color: #054FB9;
}

.isir-action-needed {
    color: #5928ED;
    font-weight: bold;
}

.isir-fpsc-flag {
    color: #00274D;
}

.k-scrollview-next .k-icon,
.k-scrollview-prev .k-icon {
    font-size: 2.5em;
}

/* Override DropDownList background to match ComboBox */
.k-dropdownlist .k-input-inner {
    background-color: #ffffff !important;
}

.k-dropdownlist.k-disabled .k-input-inner,
.k-dropdownlist.k-readonly .k-input-inner {
    background-color: #ffffff !important;
}

/* Accessibility: visually hidden but available to screen readers */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =========================================================================
   Accessibility: Telerik component overrides (WCAG 2.2 AA)
   These load after studentfirst.css (compiled Telerik theme) in index.html
   ========================================================================= */

/* 1. Grid checkbox targets too small (16px → 24px)
   WCAG 2.5.8 Target Size — minimum 24×24px */
.k-checkbox {
    min-width: 24px !important;
    min-height: 24px !important;
}

/* 2. Input border contrast fails (~1.17:1 → 3:1 minimum)
   WCAG 1.4.11 Non-text Contrast — borders need 3:1 against background
   Default Telerik uses rgba(0,0,0,0.08) which is nearly invisible */
.k-input-solid {
    border-color: #949494 !important;
}
.k-input-solid:hover,
.k-input-solid.k-hover {
    border-color: #6e6e6e !important;
}
.k-input-solid.k-invalid,
.k-input-solid.ng-invalid.ng-touched,
.k-input-solid.ng-invalid.ng-dirty {
    border-color: #e13929 !important;
}

/* 3. Interactive control colors (REQ-006) — replace royal blue with design system */

/* Toggle/Switch ON state */
.k-switch-on .k-switch-track {
    border-color: var(--sf-color-primary) !important;
    background-color: var(--sf-color-primary) !important;
    color: var(--sf-color-white) !important;
}
/* Toggle/Switch OFF state */
.k-switch-off .k-switch-track {
    border-color: #949494 !important;
    background-color: var(--sf-color-accent-light) !important;
}
.k-switch-off .k-switch-thumb {
    border-color: #949494 !important;
    background-color: var(--sf-color-white) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Checkbox checked state */
.k-checkbox:checked,
.k-checkbox.k-checked {
    background-color: var(--sf-color-primary) !important;
    border-color: var(--sf-color-primary) !important;
    color: var(--sf-color-white) !important;
}
/* Checkbox unchecked */
.k-checkbox {
    border: 1.5px solid var(--sf-color-accent-light) !important;
    border-radius: 4px !important;
}

/* Radio button selected state */
.k-radio:checked,
.k-radio.k-checked {
    border-color: var(--sf-color-primary) !important;
    background-color: var(--sf-color-white) !important;
    color: var(--sf-color-primary) !important;
}
/* Radio unchecked */
.k-radio {
    border: 1.5px solid var(--sf-color-accent-light) !important;
}

/* Tab strip active/inactive — override Telerik theme.
   Telerik's studentfirst.css loads AFTER app.css and uses !important on
   .k-tabstrip-top > .k-tabstrip-items-wrapper .k-item.k-active { border-bottom-color: transparent }
   We double the .k-tabstrip-top specificity to win at equal !important. */
.k-tabstrip-top.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item.k-active,
.k-tabstrip-top.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item:active {
    border-bottom-width: 2px !important;
    border-bottom-style: solid !important;
    border-bottom-color: #475569 !important;
    color: #475569 !important;
    font-weight: 600 !important;
}
.k-tabstrip-items-wrapper .k-item.k-active {
    color: #475569 !important;
    font-weight: 600 !important;
}
.k-tabstrip-items .k-item:not(.k-active) {
    color: #64748b;
    font-weight: 400;
}
.k-tabstrip-items .k-item:not(.k-active):hover {
    color: #334155;
}

/* 4. NumericTextBox spinner buttons undersized (28×14px → 24×24px)
   WCAG 2.5.8 Target Size */
.k-input-spinner .k-spinner-increase,
.k-input-spinner .k-spinner-decrease {
    min-width: 24px !important;
    min-height: 24px !important;
}

/* 5. Focus indicators — Telerik uses near-invisible box-shadow (8% opacity)
   WCAG 2.4.7 Focus Visible — must have clear visible indicator
   Add outline on :focus-visible for all Telerik interactive elements */
.k-input-solid:focus-visible,
.k-input-solid:focus-within,
.k-picker-solid:focus-visible,
.k-picker-solid:focus-within {
    outline: var(--sf-focus-inner-width) solid var(--sf-focus-ring-inner) !important;
    box-shadow: 0 0 0 var(--sf-focus-width) var(--sf-focus-ring-outer) !important;
    outline-offset: -1px;
}
.k-button:focus-visible,
.k-button.k-focus {
    outline: var(--sf-focus-inner-width) solid var(--sf-focus-ring-inner) !important;
    box-shadow: 0 0 0 var(--sf-focus-width) var(--sf-focus-ring-outer) !important;
    outline-offset: 2px;
}
.k-switch:focus-visible .k-switch-track,
.k-switch.k-focus .k-switch-track {
    outline: var(--sf-focus-inner-width) solid var(--sf-focus-ring-inner) !important;
    box-shadow: 0 0 0 var(--sf-focus-width) var(--sf-focus-ring-outer) !important;
    outline-offset: 2px;
}
.k-checkbox:focus-visible,
.k-radio:focus-visible {
    outline: var(--sf-focus-inner-width) solid var(--sf-focus-ring-inner) !important;
    box-shadow: 0 0 0 var(--sf-focus-width) var(--sf-focus-ring-outer) !important;
    outline-offset: 2px;
}
.k-grid td:focus-visible,
.k-grid th:focus-visible {
    outline: var(--sf-focus-inner-width) solid var(--sf-focus-ring-inner) !important;
    box-shadow: 0 0 0 var(--sf-focus-width) var(--sf-focus-ring-outer) !important;
    outline-offset: -2px;
}
.k-tabstrip-items .k-item:focus-visible,
.k-tabstrip-items .k-item.k-focus {
    outline: var(--sf-focus-inner-width) solid var(--sf-focus-ring-inner) !important;
    box-shadow: 0 0 0 var(--sf-focus-width) var(--sf-focus-ring-outer) !important;
    outline-offset: -2px;
}

/* 6. Defensive form-field focus rings — catches wrapper classes Telerik uses that
   aren't tagged with .k-input-solid / .k-picker-solid (e.g., older textbox markup
   or third-party variants). :focus-within covers the common case where the wrapper
   is a <span> around an <input>, so focusing the input paints the ring on the span. */
.k-textbox:focus-visible,
.k-textbox:focus-within,
.k-input:focus-visible,
.k-input:focus-within,
.k-dropdown:focus-visible,
.k-dropdown:focus-within,
.k-combobox:focus-visible,
.k-combobox:focus-within,
textarea.k-textbox:focus-visible {
    outline: var(--sf-focus-inner-width) solid var(--sf-focus-ring-inner) !important;
    outline-offset: var(--sf-focus-offset);
    box-shadow: 0 0 0 var(--sf-focus-width) var(--sf-focus-ring-outer) !important;
}

/* Hides the <legend> of a <FormGroup Class="k-form-fieldset--hidden-legend">
   visually while keeping it in the accessibility tree. Use when the
   FormGroup has a semantic label but no room for a visible section header.
   Direct-child selector so legends in nested FormGroups are not affected. */
.k-form-fieldset--hidden-legend > .k-form-legend {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Enrollments chart card (PBI 23227 — redesigned Telerik pie) ───────────
   Wraps the existing TelerikChart donut with a proper card shell:
   header (title + subtitle + segmented variant toolbar), body (donut
   with breakdown table / bar / stacked strip + legend), footer
   (source meta + Refresh / Full view actions). Palette is slate +
   semantic accents; the top three buckets sit on slate 800/500/400
   so the dominant "Enrolled" group anchors visual hierarchy. */
.sf-chart-card {
    background: var(--sf-color-surface, #ffffff);
    border: 1px solid var(--sf-color-border);
    border-radius: 12px;
    box-shadow: var(--sf-shadow-header);
    overflow: hidden;
    /* Match the sibling home tiles exactly — the outer wrapper in Index.razor
       no longer adds its own chrome. */
    margin: 0;
}
.sf-chart-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #eef2f7;
    flex-wrap: wrap;
}
.sf-chart-card__title-block {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.sf-chart-card__icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: var(--sf-color-primary);
    font-size: 13px;
}
.sf-chart-card__icon.t-blue { background: #eff6ff; color: #2563eb; }
.sf-chart-card__title-text { min-width: 0; }
.sf-chart-card__title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--sf-color-dark);
    margin: 0;
    line-height: 1.2;
}
.sf-chart-card__subtitle {
    font-size: 11px;
    color: var(--sf-color-accent);
    margin: 2px 0 0;
}
.sf-chart-card__toolbar {
    display: flex;
    gap: 2px;
    background: var(--sf-color-accent-light);
    border-radius: var(--sf-radius-md);
    padding: 2px;
    flex-shrink: 0;
}
.sf-chart-card__toolbar .sf-seg-btn {
    appearance: none;
    border: 0;
    background: transparent;
    font: 500 12px/1 var(--sf-font-sans);
    color: var(--sf-color-primary);
    padding: 0 10px;
    height: 24px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    letter-spacing: 0.1px;
}
.sf-chart-card__toolbar .sf-seg-btn:hover { color: var(--sf-color-dark); }
.sf-chart-card__toolbar .sf-seg-btn[aria-pressed="true"] {
    background: var(--sf-color-primary);
    color: var(--sf-color-white);
    box-shadow: var(--sf-shadow-sm);
}
.sf-chart-card__toolbar .sf-seg-btn[aria-pressed="true"]:hover {
    color: var(--sf-color-white);
}
.sf-chart-card__toolbar .sf-seg-btn:focus-visible {
    outline: 2px solid var(--sf-color-accent);
    outline-offset: 1px;
}
.sf-chart-card__body { padding: 20px; }
.sf-chart-card__empty {
    padding: 40px 0;
    text-align: center;
    color: var(--sf-color-text-muted);
    font-style: italic;
}

/* Donut + right-hand breakdown table side-by-side */
.sf-chart-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
.sf-donut-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    max-width: 260px;
    margin: 0 auto;
}
.sf-donut-wrap > .k-chart,
.sf-donut-wrap > .telerik-blazor {
    width: 100%;
    height: 100%;
}
.sf-donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    text-align: center;
}
.sf-donut-center__eyebrow {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--sf-color-text-muted);
    margin-bottom: 4px;
}
.sf-donut-center__value {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -1px;
    color: var(--sf-color-dark);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.sf-donut-center__label {
    margin-top: 6px;
    font-size: 12px;
    color: var(--sf-color-text-muted);
    max-width: 140px;
    line-height: 1.3;
}
.sf-donut-center__label strong {
    color: var(--sf-color-dark);
    font-weight: 600;
}

/* Breakdown table (replaces leader-line spaghetti labels) */
.sf-breakdown {
    font-size: var(--sf-fs-sm);
    color: var(--sf-color-text);
}
.sf-breakdown__row {
    display: grid;
    grid-template-columns: 12px 1fr auto auto;
    gap: 10px;
    align-items: center;
    padding: 7px 8px;
    border-radius: 6px;
    width: 100%;
    background: transparent;
    border: 0;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: background 0.12s;
}
.sf-breakdown__row:hover,
.sf-breakdown__row.is-active { background: var(--sf-color-bg); }
.sf-breakdown__row:focus-visible { outline: 2px solid var(--sf-color-accent); outline-offset: 1px; }
.sf-swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
    display: inline-block;
}
.sf-breakdown__label {
    color: var(--sf-color-text);
    font-weight: 500;
}
.sf-breakdown__value {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--sf-color-dark);
    font-size: 12px;
}
.sf-breakdown__pct {
    font-variant-numeric: tabular-nums;
    color: var(--sf-color-text-muted);
    font-size: 11px;
    min-width: 36px;
    text-align: right;
}
.sf-breakdown__divider {
    height: 1px;
    background: var(--sf-color-border);
    margin: 6px 8px;
}
.sf-breakdown__footer {
    display: grid;
    grid-template-columns: 12px 1fr auto auto;
    gap: 10px;
    padding: 7px 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--sf-color-text-muted);
}
.sf-breakdown__footer-val {
    font-variant-numeric: tabular-nums;
    color: var(--sf-color-dark);
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
}

/* Horizontal bar variant */
.sf-hbar-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sf-hbar-row {
    display: grid;
    grid-template-columns: 180px 1fr 80px;
    gap: 12px;
    align-items: center;
    padding: 4px 0;
    width: 100%;
    background: transparent;
    border: 0;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
.sf-hbar-row:focus-visible { outline: 2px solid var(--sf-color-accent); outline-offset: 1px; border-radius: 4px; }
.sf-hbar-label {
    font-size: var(--sf-fs-sm);
    color: var(--sf-color-text);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sf-hbar-track {
    height: 18px;
    background: var(--sf-color-accent-light);
    border-radius: 3px;
    position: relative;
    overflow: hidden;
}
.sf-hbar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s cubic-bezier(.2,.8,.2,1);
}
.sf-hbar-value {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
}
.sf-hbar-value__n { font-weight: 600; color: var(--sf-color-dark); }
.sf-hbar-value__p { color: var(--sf-color-text-muted); font-size: 11px; min-width: 34px; text-align: right; }

/* Stacked strip variant */
.sf-stacked-strip {
    display: flex;
    height: 42px;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px var(--sf-color-border);
    margin-bottom: 20px;
}
.sf-stacked-strip__seg {
    min-width: 2px;
    transition: opacity 0.15s;
}
.sf-stacked-strip__seg:hover { opacity: 0.85; }
.sf-stacked-legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 4px;
}

/* Feedback row sits between body and footer. The FeedbackWidget adds its
   own vertical padding, so we just give it a thin top border + horizontal
   gutter to match the card's 20px rhythm. */
.sf-chart-card__feedback {
    padding: 4px 20px 6px;
    border-top: 1px solid var(--sf-color-border);
    background: var(--sf-color-surface);
}
.sf-chart-card__feedback .feedback-widget { padding: 4px 0; }

/* Card footer (source meta + Refresh / Full view actions) */
.sf-chart-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sf-space-3);
    padding: 10px 20px;
    border-top: 1px solid var(--sf-color-border);
    background: var(--sf-color-bg);
    font-size: 11px;
    color: var(--sf-color-text-muted);
    letter-spacing: 0.2px;
}
.sf-chart-card__footer-actions { display: flex; gap: 6px; }
.sf-chart-card__footer-actions .sf-ghost-btn {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    font: 500 11px/1 var(--sf-font-sans);
    color: var(--sf-color-primary);
    padding: 0 8px;
    height: 22px;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 0.12s, color 0.12s;
}
.sf-chart-card__footer-actions .sf-ghost-btn:hover {
    background: var(--sf-color-accent-light);
    color: var(--sf-color-dark);
}
.sf-chart-card__footer-actions .sf-ghost-btn:focus-visible {
    outline: 2px solid var(--sf-color-accent);
    outline-offset: 1px;
}

/* Recent Students dashboard tile — rows wrap tight without a floor, so
   force a 430px minimum so the student card (avatar, name, status chip,
   campus row, open-folder action) fits on one line. */
#recentStudentsTile,
.k-tilelayout-item#recentStudentsTile {
    min-width: 430px;
}

/* ── SIS Home redesign (PBI 23227 — Claude Design SIS Home Redesign) ────────
   Replaces the dragger/resizer TelerikTileLayout with a static 3-col grid:
     LEFT  420px  — Recent Students rail (full-column height)
     CENTER 1fr   — Reports chart, Advising, (Classes if faculty)
     RIGHT 340px  — Profile, Notifications, Announcements
   Hello block sits above the grid with the active institution/campus/term
   context on the left and a live-date chip on the right. */
.sf-home-page {
    padding: 22px 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1680px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.sf-home-hello {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.sf-home-hello__text { min-width: 0; }
.sf-home-hello__title {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: var(--sf-color-dark);
    margin: 0;
    line-height: 1.15;
}
.sf-home-hello__dim { color: var(--sf-color-accent); font-weight: 500; }
.sf-home-hello__sub {
    font-size: 13px;
    color: var(--sf-color-accent);
    margin-top: 4px;
}
.sf-home-switcher {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
    position: relative;
}
.sf-home-switcher__item {
    cursor: pointer;
    border-radius: 6px;
    padding: 2px 6px;
    transition: background 0.15s, color 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: relative;
}
.sf-home-switcher__item:hover {
    background: var(--sf-color-accent-light);
    color: var(--sf-color-dark);
}
.sf-home-switcher__caret {
    font-size: 9px;
    opacity: 0;
    transition: opacity 0.15s;
}
.sf-home-switcher__item:hover .sf-home-switcher__caret {
    opacity: 1;
}
.sf-home-switcher__dot {
    margin: 0 2px;
    user-select: none;
}
.sf-home-switcher__popup {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--sf-z-toast);
    margin-top: 4px;
}
.sf-home-hello__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: var(--sf-color-surface, #ffffff);
    border: 1px solid var(--sf-color-border);
    border-radius: 999px;
    font-size: 12px;
    color: var(--sf-color-dark);
    font-weight: 500;
    white-space: nowrap;
}
.sf-home-hello__chip-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--sf-color-success);
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15);
}

/* TileLayout card chrome — match the existing tile design */
.sf-home-tiles .k-tilelayout-item {
    border-radius: 12px;
    border: 1px solid var(--sf-color-border);
    box-shadow: var(--sf-shadow-header);
    overflow: hidden;
}
.sf-home-tiles .k-tilelayout-item-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid #eef2f7;
}
.sf-home-tiles .k-tilelayout-item-body {
    overflow: auto;
}
/* Chart card inside TileLayout — suppress outer chrome and duplicate header;
   the TileLayout item already provides card border + drag-handle header. */
.sf-home-tiles .sf-chart-card {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.sf-home-tiles .sf-chart-card__header .sf-chart-card__title-block {
    display: none;
}

.sf-home-tile__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #eef2f7;
    gap: 12px;
}
.sf-home-tile__title-block {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.sf-home-tile__icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: var(--sf-color-primary);
    font-size: 13px;
}
/* Tinted icon chips — slate default, plus semantic accents. */
.sf-home-tile__icon.t-blue   { background: #eff6ff; color: #2563eb; }
.sf-home-tile__icon.t-green  { background: #ecfdf5; color: var(--sf-color-success); }
.sf-home-tile__icon.t-orange { background: #fff7ed; color: var(--sf-color-warning); }
.sf-home-tile__icon.t-purple { background: #f5f3ff; color: #7c3aed; }
.sf-home-tile__icon.t-cyan   { background: #ecfeff; color: #0891b2; }
.sf-home-tile__icon.t-red    { background: #fef2f2; color: var(--sf-color-destructive); }
.sf-home-tile__icon.t-slate  { background: #f1f5f9; color: var(--sf-color-primary); }

.sf-home-tile__title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--sf-color-dark);
    margin: 0;
    line-height: 1.2;
}
.sf-home-tile__sub {
    font-size: 11px;
    color: var(--sf-color-accent);
    margin-top: 2px;
}
.sf-home-tile__actions { display: flex; align-items: center; gap: 4px; }
.sf-home-tile__ic-btn {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: transparent;
    border: none;
    color: var(--sf-color-accent);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sf-home-tile__ic-btn:hover { background: #f1f5f9; color: var(--sf-color-dark); }
.sf-home-tile__ic-btn:focus-visible { outline: 2px solid var(--sf-color-accent); outline-offset: 1px; }

.sf-home-tile__body {
    padding: 14px 16px;
    overflow: hidden;
    min-width: 0;
}
/* --flush: inner tile content provides its own padding (lists, ListViews). */
.sf-home-tile__body--flush { padding: 0; }

@media (max-width: 768px) {
    .sf-home-page { padding: 14px 14px 28px; }
}

/* ── Your-Day tile (Claude Design "TodayTile") — static day strip + empty
   state until a real schedule source is wired. ────────────────────────────── */
.sf-day-strip {
    display: flex;
    gap: 6px;
    padding: 12px 16px;
    border-bottom: 1px solid #eef2f7;
    flex-wrap: wrap;
}
.sf-day-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 10px;
    border-radius: 8px;
    min-width: 46px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: background 0.12s;
}
.sf-day-pill:hover:not(.is-today) { background: #f1f5f9; }
.sf-day-pill:focus-visible { outline: 2px solid var(--sf-color-accent); outline-offset: 1px; }
.sf-day-pill__dow {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.6px;
    color: var(--sf-color-accent);
    text-transform: uppercase;
}
.sf-day-pill__num {
    font-size: 14px;
    font-weight: 700;
    color: var(--sf-color-dark);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.sf-day-pill.is-today {
    background: var(--sf-color-dark);
}
.sf-day-pill.is-today .sf-day-pill__dow,
.sf-day-pill.is-today .sf-day-pill__num {
    color: var(--sf-color-white);
}

.sf-day-empty {
    padding: 32px 20px;
    text-align: center;
    color: var(--sf-color-accent);
}
.sf-day-empty i {
    font-size: 24px;
    color: #cbd5e1;
    display: block;
    margin-bottom: 10px;
}
.sf-day-empty__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--sf-color-dark);
    margin-bottom: 2px;
}
.sf-day-empty__sub {
    font-size: 11px;
    color: var(--sf-color-accent);
}

/* Month calendar view inside Your Day tile */
.sf-home-calendar-wrap {
    display: flex;
    justify-content: center;
    padding: 12px 16px;
}

/* ── Student Messages Redesign (PBI 23227) ─────────────────────────────────
   Split-view inbox — toolbar + segmented filter + two-pane layout. Data
   still flows through IPeopleService.GetWebRequestsAsync; this is purely
   a visual redesign of /students/{id}/messages. */
.sf-msg-page {
    padding: 16px 20px 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 1680px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* Toolbar */
.sf-msg-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.sf-msg-toolbar__title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.sf-msg-toolbar__title h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--sf-color-dark);
    margin: 0;
    letter-spacing: -0.3px;
}
.sf-msg-toolbar__icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f1f5f9;
    color: var(--sf-color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}
.sf-msg-toolbar__spacer { flex: 1; min-width: 20px; }
.sf-msg-unread-pill {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--sf-color-destructive);
    color: var(--sf-color-white);
}

.sf-msg-search {
    position: relative;
    display: flex;
    align-items: center;
}
.sf-msg-search i {
    position: absolute;
    left: 10px;
    color: var(--sf-color-accent);
    pointer-events: none;
    font-size: 12px;
}
.sf-msg-search input {
    height: 30px;
    width: 280px;
    padding: 0 10px 0 30px;
    border: 1px solid var(--sf-color-border);
    border-radius: 8px;
    font: inherit;
    font-size: 12px;
    background: #f8fafc;
    color: var(--sf-color-text);
}
.sf-msg-search input:focus {
    outline: 2px solid var(--sf-color-accent);
    outline-offset: 1px;
    background: var(--sf-color-white);
}

/* Segmented filter tabs */
.sf-msg-filters {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 2px 0;
}
.sf-msg-segment {
    display: inline-flex;
    background: #f1f5f9;
    border: 1px solid var(--sf-color-border);
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
}
.sf-msg-segment button {
    height: 26px;
    padding: 0 12px;
    border: 0;
    background: transparent;
    border-radius: 6px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--sf-color-accent);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.12s, color 0.12s;
}
.sf-msg-segment button:hover:not(.is-active) { color: var(--sf-color-dark); }
.sf-msg-segment button.is-active {
    background: var(--sf-color-primary);
    color: var(--sf-color-white);
    box-shadow: var(--sf-shadow-sm);
}
.sf-msg-segment button:focus-visible {
    outline: 2px solid var(--sf-color-accent);
    outline-offset: 1px;
}
.sf-msg-segment .count {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--sf-color-accent-light);
    color: var(--sf-color-dark);
}
.sf-msg-segment .is-active .count {
    background: rgba(255, 255, 255, 0.2);
    color: var(--sf-color-white);
}

/* Inline compose host — wraps the shared PostNewMessageComponent. */
.sf-msg-compose-host {
    background: var(--sf-color-white);
    border: 1px solid var(--sf-color-border);
    border-radius: 12px;
    box-shadow: var(--sf-shadow-header);
    padding: 14px 16px;
}

/* Split view */
.sf-msg-split {
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
    min-height: 560px;
}
@media (max-width: 960px) {
    .sf-msg-split { grid-template-columns: 1fr; }
}

/* List pane */
.sf-msg-list-pane {
    background: var(--sf-color-white);
    border: 1px solid var(--sf-color-border);
    border-radius: 12px;
    box-shadow: var(--sf-shadow-header);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.sf-msg-list-pane__head {
    padding: 10px 14px;
    border-bottom: 1px solid #eef2f7;
    font-size: 11px;
    color: var(--sf-color-accent);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sf-msg-list {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    max-height: calc(100vh - 340px);
}
.sf-msg-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--sf-color-accent);
    font-size: 13px;
}

/* Message row — clickable button spanning a 2-row grid:
     [avatar  sender+time]
     [-       subject+preview  (count)] */
.sf-msg-row {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
        "avatar head   count"
        "avatar body   count";
    gap: 4px 10px;
    width: 100%;
    padding: 12px 14px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #f1f5f9;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: background 0.12s;
    align-items: start;
}
.sf-msg-row:last-child { border-bottom: none; }
.sf-msg-row:hover { background: #f8fafc; }
.sf-msg-row:focus-visible {
    outline: 2px solid var(--sf-color-accent);
    outline-offset: -2px;
}
.sf-msg-row.is-selected { background: #f1f5f9; }
.sf-msg-row.is-unread .sf-msg-row__subject { font-weight: 700; color: var(--sf-color-dark); }
.sf-msg-row.is-unread .sf-msg-row__sender { color: var(--sf-color-dark); font-weight: 700; }

.sf-msg-row__avatar {
    grid-area: avatar;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    color: var(--sf-color-white);
    font-weight: 700;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: -0.2px;
    flex-shrink: 0;
    position: relative;
}
.sf-msg-row__unread-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--sf-color-destructive);
    border: 2px solid var(--sf-color-white);
}

.sf-msg-row__head {
    grid-area: head;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.sf-msg-row__sender {
    font-size: 13px;
    font-weight: 500;
    color: var(--sf-color-dark);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.sf-msg-row__time {
    font-size: 11px;
    color: var(--sf-color-accent);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.sf-msg-row__body {
    grid-area: body;
    min-width: 0;
}
.sf-msg-row__subject {
    font-size: 12.5px;
    color: var(--sf-color-text);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 2px;
}
.sf-msg-row__preview {
    font-size: 11.5px;
    color: var(--sf-color-accent);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sf-msg-row.is-selected .sf-msg-row__preview { color: #475569; }

.sf-msg-row__thread-count {
    grid-area: count;
    align-self: start;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--sf-color-accent-light);
    color: var(--sf-color-dark);
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}

/* Detail pane */
.sf-msg-detail-pane {
    background: var(--sf-color-white);
    border: 1px solid var(--sf-color-border);
    border-radius: 12px;
    box-shadow: var(--sf-shadow-header);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.sf-msg-detail-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    color: var(--sf-color-accent);
}
.sf-msg-detail-empty i {
    font-size: 36px;
    color: #cbd5e1;
    margin-bottom: 14px;
}
.sf-msg-detail-empty__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--sf-color-dark);
    margin-bottom: 4px;
}
.sf-msg-detail-empty__sub {
    font-size: 12px;
    color: var(--sf-color-accent);
}

.sf-msg-detail__header {
    padding: 18px 20px 12px;
    border-bottom: 1px solid #eef2f7;
}
.sf-msg-detail__subject {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 700;
    color: var(--sf-color-dark);
    letter-spacing: -0.3px;
    line-height: 1.25;
    margin-bottom: 6px;
}
.sf-msg-detail__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--sf-color-accent);
}
.sf-msg-detail__meta b { color: var(--sf-color-dark); font-weight: 700; }

.sf-msg-detail__body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 20px;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 420px);
}

/* Message bubble */
.sf-msg-bubble {
    display: flex;
    gap: 10px;
    max-width: 82%;
}
.sf-msg-bubble--me { flex-direction: row-reverse; margin-left: auto; }
.sf-msg-bubble__avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    color: var(--sf-color-white);
    font-weight: 700;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sf-msg-bubble__body {
    background: var(--sf-color-white);
    border: 1px solid var(--sf-color-border);
    border-radius: 12px;
    padding: 10px 14px;
    min-width: 0;
    box-shadow: var(--sf-shadow-sm);
}
.sf-msg-bubble--me .sf-msg-bubble__body {
    background: var(--sf-color-primary);
    color: var(--sf-color-white);
    border-color: var(--sf-color-primary);
}
.sf-msg-bubble__head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 4px;
}
.sf-msg-bubble__sender {
    font-size: 12px;
    font-weight: 700;
    color: var(--sf-color-dark);
}
.sf-msg-bubble--me .sf-msg-bubble__sender { color: var(--sf-color-white); }
.sf-msg-bubble__time {
    margin-left: auto;
    font-size: 10.5px;
    color: var(--sf-color-accent);
    white-space: nowrap;
}
.sf-msg-bubble--me .sf-msg-bubble__time { color: rgba(255, 255, 255, 0.75); }
.sf-msg-bubble__content {
    font-size: 13px;
    line-height: 1.5;
    color: var(--sf-color-text);
    white-space: pre-wrap;
    word-wrap: break-word;
}
.sf-msg-bubble--me .sf-msg-bubble__content { color: var(--sf-color-white); }

/* Inline reply composer */
.sf-msg-reply {
    padding: 14px 20px 18px;
    border-top: 1px solid #eef2f7;
    background: var(--sf-color-white);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sf-msg-reply__head {
    font-size: 11px;
    color: var(--sf-color-accent);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
}
.sf-msg-reply__head b {
    color: var(--sf-color-dark);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 4px;
}
.sf-msg-reply__footer {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
}
.sf-msg-reply__shortcut {
    margin-right: auto;
    font-size: 11px;
    color: var(--sf-color-accent);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.sf-msg-reply__shortcut kbd {
    background: var(--sf-color-accent-light);
    border: 1px solid var(--sf-color-border);
    border-radius: 4px;
    padding: 1px 5px;
    font-family: var(--sf-font-family);
    font-variant-numeric: tabular-nums;
    font-size: 10px;
    color: var(--sf-color-dark);
}

/* Admin Communications — jump-to-student-record button in detail header meta. */
.sf-msg-detail__jump {
    background: transparent;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 11px;
    color: var(--sf-color-primary);
    font-weight: 600;
    cursor: pointer;
}
.sf-msg-detail__jump:hover { text-decoration: underline; }
.sf-msg-detail__jump:focus-visible { outline: 2px solid var(--sf-color-accent); outline-offset: 2px; }

/* Enrollment tile — list of other enrollments for this person with a
   clickable row per enrollment. Clicking navigates to /students/{id}/home
   for the chosen enrollment so the whole context (student rail, overview,
   balances, etc.) swaps to it. */
.sf-enroll-switch {
    border-top: 1px dashed var(--sf-color-border);
    margin-top: 14px;
    padding-top: 12px;
}
.sf-enroll-switch__label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--sf-color-text-muted);
    margin-bottom: 8px;
}
.sf-enroll-switch__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sf-enroll-switch__item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--sf-color-surface, #ffffff);
    border: 1px solid var(--sf-color-border);
    border-radius: 8px;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.12s ease, background-color 0.12s ease;
}
.sf-enroll-switch__item:hover {
    border-color: var(--sf-color-accent);
    background: var(--sf-color-accent-light);
}
.sf-enroll-switch__item:focus-visible {
    outline: var(--sf-focus-inner-width) solid var(--sf-focus-ring-inner);
    outline-offset: var(--sf-focus-offset);
    box-shadow: 0 0 0 var(--sf-focus-width) var(--sf-focus-ring-outer);
}
.sf-enroll-switch__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sf-enroll-switch__program {
    font-size: 13px;
    font-weight: 600;
    color: var(--sf-color-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sf-enroll-switch__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 11.5px;
    color: var(--sf-color-text-muted);
}
.sf-enroll-switch__chev {
    font-size: 11px;
    color: var(--sf-color-accent);
    flex-shrink: 0;
}

/* SF loader — replaces Telerik's Kendo-blue loader with a primary-slate
   spinning ring that matches the rest of the design system. */
.sf-loader-ring {
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 3px solid var(--sf-color-accent-light);
    border-top-color: var(--sf-color-primary);
    animation: sf-loader-spin 0.9s linear infinite;
    vertical-align: middle;
}
@keyframes sf-loader-spin {
    to { transform: rotate(360deg); }
}

/* Full-page overlay loader used by StudentLayout while the viewed
   student record boots. Dark translucent scrim + centered card so the
   spinner reads against any background. */
.sf-loader-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.55);
    animation: sf-loader-fadein 120ms ease-out both;
}
.sf-loader-card {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 14px 22px;
    background: var(--sf-color-surface, #ffffff);
    border: 1px solid var(--sf-color-border);
    border-radius: 12px;
    box-shadow: var(--sf-shadow-md, 0 4px 12px rgba(15, 23, 42, 0.18));
    font-size: 13px;
    font-weight: 600;
    color: var(--sf-color-dark);
}
.sf-loader-card .sf-loader-ring {
    width: 22px;
    height: 22px;
    border-width: 2.5px;
}
.sf-loader-text { letter-spacing: -0.2px; }
@keyframes sf-loader-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Message bubble — linked sender (student), per-message mark-read, and
   a subtle unread state so readers can still tell which messages haven't
   been marked read yet. */
.sf-msg-bubble__sender--link {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    cursor: pointer;
}
.sf-msg-bubble__sender--link:hover { color: var(--sf-color-primary); }
.sf-msg-bubble--me .sf-msg-bubble__sender--link:hover { color: rgba(255,255,255,0.8); }
.sf-msg-bubble__sender--link:focus-visible {
    outline: 2px solid var(--sf-color-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

.sf-msg-bubble__mark-read {
    margin-left: 8px;
    background: transparent;
    border: 1px solid var(--sf-color-border);
    border-radius: 6px;
    padding: 2px 6px;
    color: var(--sf-color-accent);
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.sf-msg-bubble__mark-read:hover {
    background: var(--sf-color-accent-light);
    color: var(--sf-color-dark);
    border-color: var(--sf-color-accent);
}
.sf-msg-bubble__mark-read:focus-visible {
    outline: 2px solid var(--sf-color-accent);
    outline-offset: 1px;
}

.sf-msg-bubble.is-unread .sf-msg-bubble__body {
    box-shadow: 0 0 0 2px rgba(71, 85, 105, 0.12), var(--sf-shadow-sm);
}
.sf-msg-bubble.is-unread.sf-msg-bubble--them .sf-msg-bubble__body {
    border-color: var(--sf-color-accent);
}

/* Plain <textarea> used by the message reply composer — Telerik's wrapper
   swallowed the @onkeydown event, so we go native here. Styled to match
   the surrounding tile. */
.sf-msg-reply__textarea {
    width: 100%;
    min-height: 88px;
    padding: 10px 12px;
    font-family: var(--sf-font-family);
    font-size: 13px;
    line-height: 1.5;
    color: var(--sf-color-text);
    background: var(--sf-color-surface, #ffffff);
    border: 1px solid var(--sf-color-border);
    border-radius: 8px;
    resize: vertical;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.sf-msg-reply__textarea:focus {
    outline: none;
    border-color: var(--sf-color-accent);
    box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.18);
}
.sf-msg-reply__textarea::placeholder { color: var(--sf-color-accent); }

/* ── Academics Summary (PBI 23227, Claude Design Academics Summary) ────────
   Redesigned analytics page — filter toolbar, KPI row, two breakdown
   bar-lists, and a status × term matrix. Picks up existing .sf-btn-*
   primitives and adds the academics-specific layout / card chrome. */
.sf-acad-page {
    padding: 16px 20px 48px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 1680px;
    margin: 0 auto;
    box-sizing: border-box;
}
.sf-acad-header {
    background: var(--sf-color-surface, #ffffff);
    border: 1px solid var(--sf-color-border);
    border-radius: 12px;
    padding: 18px 22px 14px;
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    box-shadow: var(--sf-shadow-header);
}
.sf-acad-breadcrumb {
    list-style: none;
    padding: 0;
    margin: 0 0 6px;
    font-size: 12px;
    color: var(--sf-color-accent);
    display: flex;
    gap: 6px;
    align-items: center;
    letter-spacing: 0.2px;
}
.sf-acad-breadcrumb b { color: var(--sf-color-dark); font-weight: 600; }
.sf-acad-title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--sf-color-dark);
    margin: 0;
    line-height: 1.2;
}
.sf-acad-subtitle {
    font-size: 13px;
    color: var(--sf-color-accent);
    margin-top: 4px;
}
.sf-acad-header__spacer { flex: 1; }

/* Filter toolbar */
.sf-acad-toolbar {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--sf-color-surface, #ffffff);
    border: 1px solid var(--sf-color-border);
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: var(--sf-shadow-header);
}
.sf-acad-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 180px;
}
.sf-acad-field > label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--sf-color-accent);
}
.sf-acad-select {
    height: 30px;
    padding: 0 28px 0 10px;
    border: 1px solid var(--sf-color-border);
    border-radius: 8px;
    background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
    font-family: var(--sf-font-family);
    font-size: 12px;
    color: var(--sf-color-text);
    appearance: none;
    cursor: pointer;
    min-width: 180px;
}
.sf-acad-select:focus-visible {
    outline: 2px solid var(--sf-color-accent);
    outline-offset: 1px;
    border-color: var(--sf-color-accent);
}
.sf-acad-toolbar__spacer { flex: 1; }

/* KPI row */
.sf-acad-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
@media (max-width: 960px) {
    .sf-acad-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sf-acad-stat {
    background: var(--sf-color-surface, #ffffff);
    border: 1px solid var(--sf-color-border);
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: var(--sf-shadow-header);
    position: relative;
    overflow: hidden;
}
.sf-acad-stat__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--sf-color-accent);
}
.sf-acad-stat__value {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: var(--sf-color-dark);
    margin-top: 4px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.sf-acad-stat__delta {
    font-size: 12px;
    color: #047857;
    margin-top: 4px;
    font-weight: 600;
}
.sf-acad-stat__delta--neutral {
    color: var(--sf-color-accent);
    font-weight: 500;
}
.sf-acad-stat__accent {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    background: var(--sf-color-primary);
}
.sf-acad-stat--blue   .sf-acad-stat__accent { background: #2563eb; }
.sf-acad-stat--green  .sf-acad-stat__accent { background: var(--sf-color-success); }
.sf-acad-stat--amber  .sf-acad-stat__accent { background: var(--sf-color-warning); }
.sf-acad-stat--purple .sf-acad-stat__accent { background: #7c3aed; }

/* Two breakdown cards */
.sf-acad-grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 1500px) {
    .sf-acad-grid-2 { grid-template-columns: 1fr 1fr; }
}
.sf-acad-card {
    background: var(--sf-color-surface, #ffffff);
    border: 1px solid var(--sf-color-border);
    border-radius: 12px;
    box-shadow: var(--sf-shadow-header);
    overflow: hidden;
}
.sf-acad-card__header {
    padding: 14px 18px 10px;
    border-bottom: 1px solid #eef2f7;
}
.sf-acad-card__eyebrow {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--sf-color-accent);
}
.sf-acad-card__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--sf-color-dark);
    letter-spacing: -0.2px;
    margin: 2px 0 2px;
}
.sf-acad-card__sub {
    font-size: 11px;
    color: var(--sf-color-accent);
}
.sf-acad-card__body { padding: 14px 18px 6px; }
.sf-acad-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    border-top: 1px solid #eef2f7;
    font-size: 12px;
    color: var(--sf-color-accent);
}
.sf-acad-link {
    background: transparent;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--sf-color-primary);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.sf-acad-link:focus-visible {
    outline: 2px solid var(--sf-color-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Bar list */
.sf-acad-empty {
    padding: 32px 20px;
    text-align: center;
    color: var(--sf-color-accent);
    font-size: 13px;
}
.sf-acad-barlist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.sf-acad-barlist__row {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr) 64px 52px;
    grid-template-areas:
        "sw name count pct"
        "sw bar  count pct";
    column-gap: 10px;
    row-gap: 4px;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid #f1f5f9;
}
.sf-acad-barlist__row:last-child { border-bottom: 0; }
.sf-acad-barlist__swatch {
    grid-area: sw;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    align-self: center;
}
.sf-acad-barlist__name {
    grid-area: name;
    font-size: 12.5px;
    color: var(--sf-color-text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}
.sf-acad-barlist__bar {
    grid-area: bar;
    height: 6px;
    background: #f1f5f9;
    border-radius: 999px;
    overflow: hidden;
    min-width: 0;
}
.sf-acad-barlist__fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sf-acad-barlist__count {
    grid-area: count;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--sf-color-dark);
    text-align: right;
    align-self: center;
}
.sf-acad-barlist__pct {
    grid-area: pct;
    font-size: 11px;
    color: var(--sf-color-accent);
    text-align: right;
    font-variant-numeric: tabular-nums;
    align-self: center;
}

/* Status × term matrix */
.sf-acad-table-wrap {
    overflow: auto;
    max-height: 340px;
}
.sf-acad-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.sf-acad-table th {
    text-align: left;
    padding: 8px 14px;
    background: #f1f5f9;
    color: var(--sf-color-dark);
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 1px solid var(--sf-color-border);
    position: sticky;
    top: 0;
}
.sf-acad-table th.num,
.sf-acad-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.sf-acad-table td {
    padding: 9px 14px;
    border-bottom: 1px solid #e2e8f0;
    color: var(--sf-color-text);
}
.sf-acad-table tbody tr:hover td { background: #f8fafc; }
.sf-acad-table__swatch {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    margin-right: 8px;
    vertical-align: middle;
}

/* LeadDetails (/admissions/leads/{id}) — scoped override for the sticky
   header. Default .sf-sticky-header sits at top:56px to clear the shared
   top-row nav, but on this page the topbar is shorter and there's a
   visible gap. Pin the header flush to the viewport top here; other
   pages keep the default 56px offset. */
.sf-lead-details-page .sf-sticky-header { top: 0; }

/* Academics Summary — segmented chart-type switcher, donut/pie SVG
   wrappers, and the "Updated" pill on the page header. */
.sf-acad-header { position: relative; }
.sf-acad-updated {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--sf-color-border);
    border-radius: 999px;
    background: var(--sf-color-surface, #ffffff);
    font-size: 11px;
    color: var(--sf-color-accent);
    white-space: nowrap;
}
.sf-acad-updated b { color: var(--sf-color-dark); font-weight: 600; }

.sf-acad-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.sf-acad-seg {
    display: inline-flex;
    background: #f1f5f9;
    border: 1px solid var(--sf-color-border);
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
    flex-shrink: 0;
}
.sf-acad-seg button {
    appearance: none;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--sf-color-accent);
    min-width: 44px;
    height: 26px;
    padding: 0 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.sf-acad-seg button:hover:not(.is-active) { color: var(--sf-color-dark); }
.sf-acad-seg button.is-active {
    background: var(--sf-color-primary);
    color: var(--sf-color-white);
    box-shadow: var(--sf-shadow-sm);
}
.sf-acad-seg button:focus-visible { outline: 2px solid var(--sf-color-accent); outline-offset: 1px; }

/* Donut / pie chart wrap — chart on left, legend on right (wraps on narrow). */
.sf-acad-chart-wrap {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    flex-wrap: wrap;
    position: relative;
}
.sf-acad-chart-svg { flex-shrink: 0; }
.sf-acad-chart-center {
    position: absolute;
    left: 100px;
    top: 100px;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
}
.sf-acad-chart-center__val {
    font-size: 28px;
    font-weight: 700;
    color: var(--sf-color-dark);
    letter-spacing: -0.4px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.sf-acad-chart-center__label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.6px;
    color: var(--sf-color-accent);
    margin-top: 3px;
}
.sf-acad-chart-legend {
    flex: 1;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 300px;
    overflow-y: auto;
}
.sf-acad-chart-legend__row {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) 64px 52px;
    gap: 10px;
    align-items: center;
    padding: 5px 6px;
    border-radius: 6px;
    font-size: 12px;
}
.sf-acad-chart-legend__row:hover { background: #f8fafc; }
.sf-acad-chart-legend__sw { width: 10px; height: 10px; border-radius: 2px; }
.sf-acad-chart-legend__name {
    color: var(--sf-color-text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sf-acad-chart-legend__count {
    font-weight: 600;
    color: var(--sf-color-dark);
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.sf-acad-chart-legend__pct {
    color: var(--sf-color-accent);
    font-variant-numeric: tabular-nums;
    text-align: right;
    font-size: 11px;
}

/* Pages where the sticky form header should sit flush against the site
   header (no 56px gap). Scoped by a marker class on the page wrapper so
   other pages keep the default offset. */
.sf-sticky-flush-page .sf-sticky-header { top: 0; }

/* Telerik loader / loader-container — force SF primary slate on the
   spinner dots, the overlay text, and the pulsing-dot animation so
   they don't render in Telerik's default blue. */
.k-loader-canvas .k-loader-segment,
.k-loader .k-loader-segment {
    background-color: var(--sf-color-primary) !important;
}
.k-loader-container .k-loader-container-label,
.k-loader-container-label {
    color: var(--sf-color-primary) !important;
    font-family: var(--sf-font-family);
    font-weight: 600;
}
.k-loader-container-panel,
.k-loader-container .k-loader-container-panel {
    border-color: var(--sf-color-border) !important;
    box-shadow: var(--sf-shadow-md) !important;
    border-radius: 12px !important;
}

/* ── Admissions Summary — clickable status rows ───────────────────────────── */
.sf-adm-status-row {
    background: var(--sf-color-surface, #ffffff);
    display: grid;
    grid-template-columns: 16px 1fr 180px 58px;
    align-items: center;
    gap: 12px;
    padding: 9px 16px;
    cursor: pointer;
    border: 0;
    text-align: left;
    font: inherit;
    color: inherit;
    width: 100%;
    position: relative;
    transition: background 0.12s;
}
.sf-adm-status-row:hover { background: #f8fafc; }
.sf-adm-status-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--sf-color-accent); }
.sf-adm-status-row.is-active { background: #eef2f7; }
.sf-adm-status-row.is-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--sf-color-primary);
}
.sf-adm-status-row__dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--sf-color-accent);
}
.sf-adm-status-row.is-active .sf-adm-status-row__dot { background: var(--sf-color-primary); }
.sf-adm-status-row__name {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--sf-color-text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sf-adm-status-row__bar {
    height: 14px;
    position: relative;
    border-radius: 3px;
    background: #f1f5f9;
    overflow: hidden;
    display: flex;
}
.sf-adm-bar-seg { height: 100%; min-width: 0; }
.sf-adm-bar-seg--dep { background: var(--sf-color-success); }
.sf-adm-bar-seg--nodep { background: var(--sf-color-warning); }
.sf-adm-status-row__total {
    font-size: 13px;
    font-weight: 600;
    color: var(--sf-color-dark);
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.sf-adm-status-row__counts {
    font-size: 10.5px;
    color: var(--sf-color-accent);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

/* WCAG fixes — scrollable regions + focus, clear-filter target size */
.sf-acad-table-wrap:focus-visible {
    outline: 2px solid var(--sf-color-accent);
    outline-offset: -2px;
    border-radius: 4px;
}
/* RecentStudentsTile row keyboard focus ring */
.sf-recent-row:focus-visible {
    outline: 2px solid var(--sf-color-accent);
    outline-offset: -2px;
    border-radius: 4px;
}

/* ── Empty-state patterns (Claude Design empty-state-design bundle) ────────
   Option A (Notifications): centered green check + reassurance text.
   Option C (Announcements): skeleton ghost row teaching the format. */
.sf-empty-state { padding: 14px 16px; }
.sf-empty-state--centered { padding: 24px 16px 20px; text-align: center; }
.sf-empty-state__icon {
    width: 36px;
    height: 36px;
    margin: 0 auto 10px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.sf-empty-state__icon--success {
    background: #ecfdf5;
    color: var(--sf-color-success);
    border: 1px solid #a7f3d0;
}
.sf-empty-state__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--sf-color-dark);
    margin-bottom: 2px;
}
.sf-empty-state__sub {
    font-size: 12px;
    color: var(--sf-color-accent);
}

/* Skeleton ghost (Announcements Option C) */
.sf-empty-state--skeleton { padding: 14px 16px 16px; }
.sf-empty-state__ghost {
    padding: 10px 12px;
    border: 1px dashed var(--sf-color-border);
    border-radius: 8px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.sf-empty-state__ghost-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
}
.sf-empty-state__ghost-bar {
    height: 8px;
    border-radius: 3px;
    background: var(--sf-color-accent-light);
}
.sf-empty-state__ghost-bar--light { background: #eef2f7; }

/* ── 404 Not Found ─────────────────────────────────────────── */
.sf-404-stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px 80px;
    position: relative;
    overflow: hidden;
}
.sf-404 {
    width: 100%;
    max-width: 980px;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 64px;
    align-items: center;
}
@media (max-width: 880px) {
    .sf-404 { grid-template-columns: 1fr; gap: 32px; }
}

.sf-404__copy { min-width: 0; }
.sf-404__eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--sf-color-primary);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--sf-color-white);
    border: 1px solid var(--sf-color-border);
    border-radius: 999px;
    padding: 5px 12px 5px 9px;
}
.sf-404__dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--sf-color-warning);
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.16);
}
.sf-404__title {
    font-family: var(--sf-font-family);
    font-size: 38px;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -0.6px;
    color: var(--sf-color-dark);
    margin: 18px 0 12px;
    text-wrap: balance;
}
.sf-404__sub {
    font-size: 14px;
    line-height: 1.55;
    color: var(--sf-color-primary);
    max-width: 44ch;
    text-wrap: pretty;
}

.sf-404__url-line {
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--sf-color-white);
    border: 1px solid var(--sf-color-border);
    border-radius: 10px;
    padding: 6px 6px 6px 12px;
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--sf-color-primary);
    overflow: hidden;
    max-width: 460px;
}
.sf-404__url-method {
    font-weight: 600;
    color: var(--sf-color-dark);
    margin-right: 8px;
}
.sf-404__url-path {
    color: var(--sf-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.sf-404__url-status {
    margin-left: 8px;
    flex-shrink: 0;
    background: #fef2f2;
    color: var(--sf-color-destructive);
    border-radius: 6px;
    padding: 3px 8px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.sf-404__actions {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
/* Playful blocks illustration */
.sf-404__visual {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 0.85;
    max-width: 420px;
    justify-self: end;
}
@media (max-width: 880px) {
    .sf-404__visual { justify-self: start; max-width: 360px; }
}

.sf-404__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(100, 116, 139, 0.10) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(100, 116, 139, 0.10) 1px, transparent 1px);
    background-size: 40px 40px;
    border-radius: 16px;
    mask-image: radial-gradient(ellipse at center, #000 50%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 50%, transparent 85%);
}

.sf-404__num {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sf-font-family);
    font-weight: 700;
    color: var(--sf-color-dark);
    font-size: clamp(140px, 22vw, 220px);
    line-height: 1;
    letter-spacing: -8px;
    user-select: none;
}
.sf-404__digit { display: inline-block; }
.sf-404__digit--zero {
    position: relative;
    color: transparent;
}
.sf-404__digit--zero::before {
    content: "";
    position: absolute;
    inset: 14% 12%;
    border-radius: 50%;
    border: 14px solid var(--sf-color-dark);
    box-sizing: border-box;
}

.sf-404__floater {
    position: absolute;
    border-radius: 8px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14), 0 2px 4px rgba(15, 23, 42, 0.08);
    will-change: transform;
    transition: transform 0.6s cubic-bezier(.2, .7, .2, 1);
}
.sf-404__floater--1 { width: 40px; height: 40px; background: #059669; top: 6%;  left: 8%;   border-radius: 10px; animation: sf404bob1 4.8s ease-in-out infinite; }
.sf-404__floater--2 { width: 28px; height: 28px; background: #7c3aed; top: 16%; right: 10%; border-radius: 999px; animation: sf404bob2 5.4s ease-in-out infinite; }
.sf-404__floater--3 { width: 22px; height: 22px; background: #d97706; bottom: 18%; left: 4%; border-radius: 4px; transform: rotate(12deg); animation: sf404bob3 6.1s ease-in-out infinite; }
.sf-404__floater--4 { width: 34px; height: 34px; background: #dc2626; bottom: 8%; right: 14%; border-radius: 10px; transform: rotate(-8deg); animation: sf404bob4 5.2s ease-in-out infinite; }
.sf-404__floater--5 { width: 16px; height: 16px; background: #0891b2; top: 42%;  left: -2%; border-radius: 999px; animation: sf404bob5 4.2s ease-in-out infinite; }
.sf-404__floater--6 { width: 18px; height: 18px; background: #2563eb; top: 50%;  right: -2%; border-radius: 4px; transform: rotate(20deg); animation: sf404bob6 4.6s ease-in-out infinite; }

@keyframes sf404bob1 { 0%,100% { transform: translateY(0) rotate(0) }    50% { transform: translateY(-10px) rotate(6deg) } }
@keyframes sf404bob2 { 0%,100% { transform: translateY(0) }               50% { transform: translateY(8px) } }
@keyframes sf404bob3 { 0%,100% { transform: translateY(0) rotate(12deg) } 50% { transform: translateY(-6px) rotate(20deg) } }
@keyframes sf404bob4 { 0%,100% { transform: translateY(0) rotate(-8deg) } 50% { transform: translateY(-12px) rotate(-2deg) } }
@keyframes sf404bob5 { 0%,100% { transform: translateY(0) translateX(0) } 50% { transform: translateY(-6px) translateX(4px) } }
@keyframes sf404bob6 { 0%,100% { transform: translateY(0) rotate(20deg) } 50% { transform: translateY(8px) rotate(28deg) } }

.sf-404__missing-tag {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%) rotate(-3deg);
    background: var(--sf-color-white);
    border: 1px solid var(--sf-color-border);
    box-shadow: var(--sf-shadow-md);
    border-radius: 8px;
    padding: 8px 14px 8px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
}
.sf-404__missing-swatch {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background: #d97706;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.sf-404__missing-label { color: var(--sf-color-dark); font-weight: 600; }
.sf-404__missing-meta { color: var(--sf-color-primary); font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 11px; }

.sf-404__confetti {
    position: fixed;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    pointer-events: none;
    z-index: 9999;
}

@media (prefers-reduced-motion: reduce) {
    .sf-404__floater { animation: none !important; }
}

/* studentfirst.css (Kendo Theme Builder export) sets outline-style: solid on
   .k-checkbox-label, producing a black outline. Erase it here. */
.k-checkbox-label {
    outline-color: transparent !important;
}