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

/* ── 2026 UI Revamp: Design Tokens ────────────────────────────── */
:root {
    /* Typography */
    --sf-font-family: 'DM Sans', sans-serif;

    /* Core palette (raw slate values — source of truth for colors;
       prefer the semantic tokens below in new code) */
    --sf-color-primary: #475569;       /* slate-600 */
    --sf-color-dark: #334155;          /* slate-700 */
    --sf-color-accent: #64748b;        /* slate-500 */
    --sf-color-accent-light: #e2e8f0;  /* slate-200 */
    --sf-color-destructive: #dc2626;
    --sf-color-warning: #d97706;
    --sf-color-success: #059669;
    --sf-color-bg: #f8fafc;            /* slate-50 */
    --sf-color-white: #ffffff;
    --sf-color-border: #cbd5e1;        /* slate-300 */

    /* ── Surfaces ──────────────────────────────────────────────── */
    --sf-bg-page:    var(--sf-color-bg);           /* #f8fafc */
    --sf-bg-card:    var(--sf-color-white);        /* #ffffff */
    --sf-bg-panel:   var(--sf-color-accent-light); /* #e2e8f0 */
    --sf-bg-sidebar: var(--sf-color-dark);         /* #334155 slate-700 */

    /* ── Borders ───────────────────────────────────────────────── */
    --sf-border-subtle: var(--sf-color-accent);  /* slate-500 — 4.76:1 on white, 4.55:1 on page */
    --sf-border-strong: var(--sf-color-primary); /* slate-600 — 6.15:1 on panel */

    /* ── Text ──────────────────────────────────────────────────── */
    --sf-text-primary:       #0f172a;                 /* slate-900 — 17.85:1 on white */
    --sf-text-secondary:     var(--sf-color-dark);    /* slate-700 — 10.35:1 on white, 8.40:1 on panel */
    --sf-text-muted:         var(--sf-color-primary); /* slate-600 — 7.58:1 on white, 6.15:1 on panel */
    /* Aliases used by Claude Design token sheets — map to the canonical tokens above. */
    --sf-color-text:         var(--sf-text-primary);
    --sf-color-text-muted:   var(--sf-text-muted);
    --sf-color-surface:      var(--sf-bg-card);
    --sf-text-on-dark:       #f1f5f9;                 /* slate-100 — 9.45:1 on sidebar */
    --sf-text-on-dark-muted: var(--sf-color-border);  /* slate-300 — 6.97:1 on sidebar */

    /* ── Focus — universal double-ring pattern (works on all surfaces) ── */
    --sf-focus-ring-inner: #1d4ed8;               /* blue-700 — 6.70:1 on white, 5.44:1 on panel */
    --sf-focus-ring-outer: var(--sf-color-white); /* 10.35:1 on sidebar; inner vs outer 6.70:1 */
    --sf-focus-width:       3px;
    --sf-focus-inner-width: 2px;
    --sf-focus-offset:      2px;

    /* Shadows */
    --sf-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --sf-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
    --sf-shadow-header: 0 1px 3px rgba(0, 0, 0, 0.08);

    /* Z-index hierarchy (REQ-005) */
    --sf-z-modal: 50;
    --sf-z-toast: 40;
    --sf-z-student-header: 30;
    --sf-z-sticky-header: 25;
    --sf-z-main-menu: 20;
    --sf-z-student-menu: 10;
    --sf-z-sticky-footer: 5;

    /* Buttons — primary */
    --sf-primary-button-bg: var(--sf-color-primary);
    --sf-primary-button-hover: var(--sf-color-dark);
    --sf-secondary-text: var(--sf-color-primary);
    --sf-bg-white: var(--sf-color-white);

    /* Buttons — secondary */
    --sf-secondary-button-bg: #f3f4f6;   /* gray-100 */
    --sf-secondary-button-text: #374151;  /* gray-700 */
    --sf-secondary-button-hover: #e5e7eb; /* gray-200 */
    --sf-secondary-button-disabled-bg: #e5e7eb;   /* gray-200 */
    --sf-secondary-button-disabled-text: #9ca3af; /* gray-400 */

    /* Buttons — accent */
    --sf-accent-button-bg: var(--sf-color-accent);
    --sf-accent-button-hover: var(--sf-color-primary);

    /* Buttons — destructive */
    --sf-delete-button-bg: var(--sf-color-destructive);
    --sf-delete-button-hover: #b91c1c;

    /* Buttons — disabled */
    --sf-disabled-button-bg: #d1d5db;   /* gray-300 */
    --sf-disabled-button-text: #6b7280;  /* gray-500 */

    /* ── Telerik theme token remap ──────────────────────────────
       Telerik Blazor renders every "primary-tone" state (selected
       rows, active tabs, progress bars, switches, pager numbers,
       link colors, etc.) through these variables. Remap them to
       the SF primary slate so we get global brand coverage without
       per-component CSS. */
    --kendo-color-primary:                 var(--sf-color-primary);
    --kendo-color-primary-hover:           var(--sf-color-dark);
    --kendo-color-primary-active:          var(--sf-color-dark);
    --kendo-color-primary-emphasis:        var(--sf-color-dark);
    --kendo-color-primary-subtle:          var(--sf-color-accent-light);
    --kendo-color-primary-subtle-hover:    #cbd5e1;
    --kendo-color-primary-subtle-active:   #cbd5e1;
    --kendo-color-primary-on-subtle:       var(--sf-color-dark);
    --kendo-color-primary-contrast:        #ffffff;
    --kendo-color-primary-contrast-hover:  #ffffff;
    --kendo-color-primary-contrast-active: #ffffff;

    /* Force DM Sans on every Telerik widget */
    --kendo-font-family:             'DM Sans', sans-serif;
    --kendo-font-family-sans:        'DM Sans', sans-serif;
    --kendo-font-family-sans-serif:  'DM Sans', sans-serif;
    --kendo-font-family-serif:       'DM Sans', sans-serif;
    --kendo-font-family-monospace:   'DM Sans', sans-serif;

    /* Interactive minimums (WCAG 2.5.8 target size) */
    --sf-interactive-min: 32px;

    /* Layout */
    --sf-header-h:                    56px;
    --sf-sidebar-primary-w:           240px;
    --sf-sidebar-primary-w-collapsed:  64px;
    --sf-sidebar-secondary-w:         216px;
    --sf-top-row-height: var(--sf-header-h);

    --sf-bp-md:  768px;
    --sf-bp-lg: 1024px;
    --sf-bp-xl: 1280px;
}

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

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

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

/* ── Standardized Save Button (Telerik override) ───────────── */
/* ── Accent button (primary action — Run Now, Go, Apply, etc.) ──── */
.sf-btn-accent.k-button {
    background-color: var(--sf-primary-button-bg) !important;
    border-color: var(--sf-primary-button-bg) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    height: 28px;
    padding: 4px 16px !important;
    min-width: 64px;
    box-shadow: var(--sf-shadow-md);
    transition: all 200ms ease;
}
.sf-btn-accent.k-button:hover:not(.k-disabled) {
    background-color: var(--sf-primary-button-hover) !important;
    border-color: var(--sf-primary-button-hover) !important;
}
.sf-btn-accent.k-button.k-disabled { opacity: 0.6; }
.sf-btn-accent.k-button:focus-visible {
    outline: 2px solid var(--sf-primary-button-bg);
    outline-offset: 2px;
    box-shadow: none;
}

/* ── Save button (primary form submit) ──────────────────────────── */
.sf-btn-save.k-button {
    background-color: var(--sf-primary-button-bg) !important;
    border-color: var(--sf-primary-button-bg) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    height: 28px;
    padding: 4px 16px !important;
    min-width: 64px;
    box-shadow: var(--sf-shadow-md);
    transition: all 200ms ease;
}

.sf-btn-save.k-button:hover:not(.k-disabled) {
    background-color: var(--sf-primary-button-hover) !important;
    border-color: var(--sf-primary-button-hover) !important;
}

.sf-btn-save.k-button.k-disabled {
    opacity: 0.6;
}

.sf-btn-save.k-button:focus-visible {
    outline: 2px solid var(--sf-primary-button-bg);
    outline-offset: 2px;
    box-shadow: none;
}

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

/* ── Standardized Cancel Button (Telerik override) ─────────── */
/* Border is --sf-secondary-text (#475569, equal to --sf-border-strong) by design,
   NOT --sf-border-subtle. Keeping cancel darker than form-input borders preserves
   the visual hierarchy of toolbar (subtle) < cancel (strong) < primary actions.
   This is an intentional deviation from the "ghost buttons match input borders"
   rule; toolbar buttons carry that pattern instead. */
.sf-btn-cancel.k-button {
    background-color: var(--sf-bg-white) !important;
    border: 1px solid var(--sf-secondary-text) !important;
    color: var(--sf-secondary-text) !important;
    border-radius: 8px !important;
    height: 28px;
    padding: 4px 16px !important;
    min-width: 64px;
    box-shadow: var(--sf-shadow-md);
    transition: all 200ms ease;
}

.sf-btn-cancel.k-button:hover:not(.k-disabled) {
    background-color: #f8f9fa !important;
}

.sf-btn-cancel.k-button:focus-visible {
    outline: 2px solid var(--sf-secondary-text);
    outline-offset: 2px;
    box-shadow: none;
}

/* ── Secondary Button (low emphasis actions, e.g. Password Recovery, Preview) ── */
.sf-btn-secondary.k-button {
    background-color: var(--sf-secondary-button-bg) !important;
    border: 1px solid transparent !important;
    color: var(--sf-secondary-button-text) !important;
    border-radius: 8px !important;
    height: 28px;
    padding: 4px 16px !important;
    min-width: 64px;
    box-shadow: var(--sf-shadow-md);
    transition: all 200ms ease;
}

.sf-btn-secondary.k-button:hover:not(.k-disabled) {
    background-color: var(--sf-secondary-button-hover) !important;
}

.sf-btn-secondary.k-button:focus-visible {
    outline: 2px solid var(--sf-secondary-button-text);
    outline-offset: 2px;
    box-shadow: none;
}

.sf-btn-secondary.k-button.k-disabled {
    background-color: var(--sf-secondary-button-disabled-bg) !important;
    color: var(--sf-secondary-button-disabled-text) !important;
    cursor: not-allowed;
    opacity: 1;
}

/* Inside an input wrapper (e.g. Telerik search/combo group), tighten the secondary button */
.k-input .sf-btn-secondary.k-button {
    min-width: unset !important;
    padding: 4px 4px !important;
}

/* 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: rgba(71, 85, 105, 0.12) !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: rgba(71, 85, 105, 0.12) !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-icon),
.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-icon),
.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-icon) {
    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-icon):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-icon):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-icon):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) {
    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: 28px;
    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).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).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;
}

/* 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 + .k-button {
    margin-left: 4px;
}

.k-grid .k-grid-toolbar .k-button:not(.sf-btn-accent):not(.sf-btn-save):not(.sf-btn-cancel):not(.sf-btn-delete):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):focus-visible {
    outline: 2px solid var(--sf-secondary-button-text);
    outline-offset: 2px;
    box-shadow: none;
}

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

/* ── Accent Button (Add buttons, secondary actions) ─────────── */
.sf-btn-accent.k-button {
    background-color: var(--sf-accent-button-bg) !important;
    border-color: var(--sf-accent-button-bg) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    height: 28px;
    padding: 4px 16px !important;
    min-width: 64px;
    box-shadow: var(--sf-shadow-md);
    transition: all 200ms ease;
}

.sf-btn-accent.k-button:hover:not(.k-disabled) {
    background-color: var(--sf-accent-button-hover) !important;
    border-color: var(--sf-accent-button-hover) !important;
}

.sf-btn-accent.k-button:focus-visible {
    outline: 2px solid var(--sf-accent-button-bg);
    outline-offset: 2px;
    box-shadow: none;
}

/* ── Delete / Danger button (destructive actions) ───────────── */
.sf-btn-delete.k-button {
    background-color: var(--sf-delete-button-bg) !important;
    border-color: var(--sf-delete-button-bg) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    height: 28px;
    padding: 4px 16px !important;
    min-width: 64px;
    box-shadow: var(--sf-shadow-md);
    transition: all 200ms ease;
}

.sf-btn-delete.k-button:hover:not(.k-disabled) {
    background-color: var(--sf-delete-button-hover) !important;
    border-color: var(--sf-delete-button-hover) !important;
}

.sf-btn-delete.k-button.k-disabled {
    background-color: var(--sf-disabled-button-bg) !important;
    border-color: var(--sf-disabled-button-bg) !important;
    color: var(--sf-disabled-button-text) !important;
    cursor: not-allowed;
    opacity: 1;
}

.sf-btn-delete.k-button:focus-visible {
    outline: 2px solid var(--sf-delete-button-bg);
    outline-offset: 2px;
    box-shadow: none;
}

/* ── 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 an inline
   `height: calc(100vh - Yrem)` until vertical layout is migrated to flex. */
.sf-grid-fill {
    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: 2px solid var(--sf-color-primary);
    outline-offset: 2px;
    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: 2px solid var(--sf-color-primary);
    outline-offset: 2px;
    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: 2px solid var(--sf-color-success);
    outline-offset: 2px;
}
.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: 2px solid var(--sf-color-info);
    outline-offset: 2px;
    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: 2px solid var(--sf-color-info);
    outline-offset: 2px;
    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: none;
    box-shadow: var(--sf-focus-ring);
}
.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;
}

.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;
    border-top: 1px solid var(--sf-color-border);
    background-color: var(--sf-color-bg) !important;
    overflow-x: hidden;
    /* 22246: ensure long settings pages (e.g. /settings/config/.../academics/catalogs/*)
       can scroll vertically — without this, inner overflow:hidden ancestors clip content */
    overflow-y: auto;
    max-height: calc(100vh - var(--sf-top-row-height, 52px));
}

/* 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: 2px solid var(--sf-color-primary) !important;
    outline-offset: 2px;
}

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

/* Semantic <button> that visually behaves as inline text.
   Use where a11y fixes converted <span @onclick> to <button> but the
   element should read as part of the surrounding text (not a link).
   Keeps :focus-visible outline for keyboard accessibility. */
.btn-plain {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: inherit;
    text-align: inherit;
    text-decoration: none;
    vertical-align: baseline;
    cursor: pointer;
}
.btn-plain:hover,
.btn-plain:focus {
    color: inherit;
    text-decoration: none;
}
.btn-plain:focus:not(:focus-visible) {
    outline: none;
}
.btn-plain: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);
}


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

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

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

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

/* 32×32 hit area (WCAG 2.5.8 target size). Icon stays visually small and
   centered via flex; negative vertical margins absorb the height increase so
   the pill doesn't grow. The button background is transparent — only the icon
   is drawn, so the larger hit area is invisible. */
.sf-student-header-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: -8px 0 -8px 4px;
    cursor: pointer;
    opacity: 0.6;
}

.sf-student-header-copy:hover {
    opacity: 1;
}

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

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

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


.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. */
.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: none;
    box-shadow: var(--sf-focus-ring, 0 0 0 2px #fff, 0 0 0 4px var(--sf-color-accent));
}
.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;
}