html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: var(--text-body);
}

a, .btn-link {
    color: var(--text-link);
}

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

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.page > .content {
    background-color: var(--bg-page) !important;
}

h1:focus {
    outline: none;
}

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

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* Auto-height dropdown popup - fits content without extra space */
.auto-height-dropdown + .k-animation-container {
    height: fit-content !important;
}

.auto-height-dropdown + .k-animation-container .k-list-container {
    height: fit-content !important;
}

.auto-height-dropdown + .k-animation-container .k-list-scroller {
    height: fit-content !important;
    max-height: 300px;
}

/* Override Bootstrap .bg-white to use CSS variable — auto-adapts to all themes */
.bg-white {
    background-color: var(--bg-white) !important;
}

/* ===== Dark Mode — CSS Variable Overrides ===== */
html.dark-mode {
    --text-dark: #e0e0e0;
    --text-secondary: #a0a0a5;
    --text-muted: #8a8a90;
    --border-light: #404040;
    --border-lighter: #353535;
    --bg-light: #242424;
    --bg-white: #2d2d2d;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.5);
    --bg-page: #1e1e1e;
    --bg-surface: #353535;
    --bg-hover: #353535;
    --text-body: #cccccc;
    --text-heading: #e0e0e0;
    --text-link: #6db3f2;
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-default: rgba(255, 255, 255, 0.08);
    --border-medium: #404040;
    --border-input: #505050;
    --border-input-hover: #666666;
    --border-decorative: #353535;
    --skeleton-gradient: linear-gradient(90deg, #333 25%, #3d3d3d 50%, #333 75%);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.2);
    --shadow-section: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-popup: 0 4px 16px rgba(0, 0, 0, 0.5);
    --sidebar-gradient: linear-gradient(180deg, #1a1a1a 0%, #151515 70%);
}

/* ===== Dark Mode — Telerik Form Controls ===== */
html.dark-mode .k-dropdown,
html.dark-mode .k-datepicker,
html.dark-mode .k-textbox,
html.dark-mode .k-textarea,
html.dark-mode .k-combobox,
html.dark-mode .k-numerictextbox {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-input) !important;
    color: var(--text-dark) !important;
}

html.dark-mode .k-input-inner,
html.dark-mode .k-input-value-text {
    color: var(--text-dark) !important;
}

html.dark-mode textarea,
html.dark-mode input[type="text"],
html.dark-mode input[type="number"],
html.dark-mode select {
    background-color: var(--bg-surface) !important;
    color: var(--text-dark) !important;
    border-color: var(--border-input) !important;
}

html.dark-mode .k-dropdown:hover,
html.dark-mode .k-datepicker:hover,
html.dark-mode .k-textbox:hover,
html.dark-mode .k-textarea:hover,
html.dark-mode .k-combobox:hover {
    border-color: var(--border-input-hover) !important;
    background-color: #3a3a3a !important;
}

/* ===== Dark Mode — Toolbar ===== */
html.dark-mode .toolBar .k-button {
    background: linear-gradient(180deg, #3a3a3a 0%, #303030 100%) !important;
    border-color: #555 !important;
    color: var(--text-dark) !important;
    box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .toolBar .k-button:hover {
    background: linear-gradient(180deg, #444 0%, #383838 100%) !important;
    border-color: var(--border-input-hover) !important;
}

html.dark-mode .toolBar .k-dropdown,
html.dark-mode .toolBar .toolbarDropdown,
html.dark-mode .toolBar .k-dropdown-wrap {
    background: linear-gradient(180deg, #3a3a3a 0%, #303030 100%) !important;
    border-color: #555 !important;
}

html.dark-mode .toolBar .k-dropdown .k-input-value-text,
html.dark-mode .toolBar .k-dropdown .k-input,
html.dark-mode .toolBar .toolbarDropdown .k-input {
    color: var(--text-dark) !important;
}

html.dark-mode .toolBar span { color: #ccc !important; }

/* ===== Dark Mode — Telerik Popup/Dropdown ===== */
html.dark-mode .k-animation-container,
html.dark-mode .k-popup { background: var(--bg-white) !important; }

html.dark-mode .k-animation-container .k-list-ul,
html.dark-mode .k-popup .k-list-ul,
html.dark-mode .k-animation-container .k-list,
html.dark-mode .k-popup .k-list { background: var(--bg-white) !important; }

html.dark-mode .k-list-item,
html.dark-mode .k-list .k-item { color: var(--text-dark) !important; }

html.dark-mode .k-list-item:hover,
html.dark-mode .k-list .k-item:hover,
html.dark-mode .k-list-item.k-selected,
html.dark-mode .k-list-item.k-focus { background-color: var(--border-medium) !important; }

html.dark-mode .k-popup .k-menu-item,
html.dark-mode .k-animation-container .k-menu-item,
html.dark-mode .k-popup .k-item,
html.dark-mode .k-animation-container .k-item { color: var(--text-dark) !important; }

html.dark-mode .k-popup .k-menu-item:hover,
html.dark-mode .k-popup .k-item:hover,
html.dark-mode .k-animation-container .k-menu-item:hover,
html.dark-mode .k-animation-container .k-item:hover,
html.dark-mode .k-popup .k-menu-item.k-focus:hover,
html.dark-mode .k-popup .k-item.k-focus:hover {
    background-color: var(--border-medium) !important;
    color: var(--text-dark) !important;
}

html.dark-mode .k-popup .k-menu-item.delete-menu-item:hover,
html.dark-mode .k-animation-container .k-menu-item.delete-menu-item:hover,
html.dark-mode .k-popup .k-item.delete-menu-item:hover,
html.dark-mode .k-animation-container .k-item.delete-menu-item:hover {
    background-color: #3a2020 !important;
    color: #f88 !important;
}

html.dark-mode .k-popup .k-menu-item.responsive-separator,
html.dark-mode .k-popup .k-item.responsive-separator {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .k-animation-container.telerik-blazor {
    border-color: var(--border-input) !important;
    box-shadow: var(--shadow-popup) !important;
}

/* ===== Dark Mode — Telerik Grid ===== */
html.dark-mode .k-grid { background-color: var(--bg-white); }
html.dark-mode .k-grid td, html.dark-mode .k-grid th { border-color: var(--border-medium); }
html.dark-mode .courses-grid .k-grid { border-color: var(--border-medium); }
html.dark-mode .courses-grid .k-grid-content { background: var(--bg-white) !important; }
html.dark-mode .courses-grid .k-grid-header { background: var(--bg-white) !important; border-bottom-color: var(--border-medium); }
html.dark-mode .k-grid-toolbar { background: var(--bg-surface) !important; border-color: var(--border-medium) !important; color: var(--text-dark) !important; }
html.dark-mode .k-grid .k-filter-row th { background: var(--bg-white) !important; border-color: var(--border-medium) !important; }
html.dark-mode .k-grid .k-filter-row .k-textbox,
html.dark-mode .k-grid .k-filter-row .k-input { background: var(--bg-surface) !important; border-color: var(--border-input) !important; color: var(--text-dark) !important; }
html.dark-mode .k-grid .k-master-row.k-alt { background-color: #262626 !important; }
html.dark-mode .k-grid .k-master-row:hover,
html.dark-mode .k-grid .k-master-row.k-alt:hover { background-color: var(--bg-surface) !important; }
html.dark-mode .k-grid .k-selected,
html.dark-mode .k-grid .k-selected:hover { background-color: #2a3a50 !important; color: var(--text-dark) !important; }
html.dark-mode .scale-grid .k-grid-content,
html.dark-mode .no-scroll .k-grid-content { background: var(--bg-white) !important; }

/* ===== Dark Mode — Telerik Pager ===== */
html.dark-mode .k-pager,
html.dark-mode .k-pager-wrap { background: var(--bg-surface) !important; border-color: var(--border-medium) !important; color: #ccc !important; }
html.dark-mode .k-pager .k-button,
html.dark-mode .k-pager-wrap .k-button { color: #ccc !important; }
html.dark-mode .k-pager .k-button:hover,
html.dark-mode .k-pager-wrap .k-button:hover { background: var(--border-medium) !important; }

/* ===== Dark Mode — Telerik Checkbox ===== */
html.dark-mode .k-checkbox { background-color: var(--bg-surface) !important; border-color: var(--border-input) !important; }
html.dark-mode .k-checkbox:checked { background-color: #ff6358 !important; border-color: #ff6358 !important; }

/* ===== Dark Mode — Telerik Button (generic) ===== */
html.dark-mode .k-button:not(.k-primary):not(.k-button-solid-primary):not(.k-button-solid-error):not(.k-button-solid-success) {
    background: var(--bg-surface) !important;
    border-color: var(--border-input) !important;
    color: var(--text-dark) !important;
}
html.dark-mode .k-button:not(.k-primary):not(.k-button-solid-primary):not(.k-button-solid-error):not(.k-button-solid-success):hover {
    background: var(--border-medium) !important;
    border-color: var(--border-input-hover) !important;
}

/* ===== Dark Mode — Telerik TabStrip ===== */
html.dark-mode .k-tabstrip-items { background: var(--bg-surface) !important; border-color: var(--border-medium) !important; }
html.dark-mode .k-tabstrip-items .k-item { background: var(--bg-white) !important; border-color: var(--border-medium) !important; color: #ccc !important; }
html.dark-mode .k-tabstrip-items .k-item.k-active,
html.dark-mode .k-tabstrip-items .k-item.k-selected { background: var(--bg-white) !important; border-bottom-color: var(--bg-white) !important; color: var(--text-dark) !important; }
html.dark-mode .k-tabstrip > .k-content { background: var(--bg-white) !important; border-color: var(--border-medium) !important; color: var(--text-dark) !important; }

/* ===== Dark Mode — Telerik Notification ===== */
html.dark-mode .k-notification { box-shadow: var(--shadow-popup) !important; }

/* ===== Dark Mode — Telerik Window/Dialog ===== */
html.dark-mode .k-window { background: var(--bg-white) !important; border-color: var(--border-input) !important; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6) !important; }
html.dark-mode .k-window-titlebar,
html.dark-mode .k-window-titlebar-actions { background: var(--bg-surface) !important; color: var(--text-dark) !important; border-bottom-color: var(--border-medium) !important; }
html.dark-mode .k-window-title { color: var(--text-dark) !important; }
html.dark-mode .k-window-content { background: var(--bg-white) !important; color: var(--text-dark) !important; }
html.dark-mode .k-window-titlebar .k-button { color: #ccc !important; }
html.dark-mode .k-window-titlebar .k-button:hover { background: rgba(255, 255, 255, 0.1) !important; color: var(--text-dark) !important; }

/* ===== Dark Mode — Bootstrap List Group ===== */
html.dark-mode .list-group { background: var(--bg-white); border-color: var(--border-medium); }
html.dark-mode .list-group-item { background: var(--bg-white) !important; border-color: var(--border-medium) !important; color: var(--text-dark); }
html.dark-mode .list-group-item:hover { background: var(--bg-surface) !important; }
html.dark-mode .list-group-item-action { color: var(--text-link); }

/* ===== Dark Mode — Skeleton Backgrounds ===== */
html.dark-mode .skeleton-toolbar,
html.dark-mode .skeleton-title,
html.dark-mode .skeleton-field,
html.dark-mode .skeleton-text,
html.dark-mode .skeleton-grid {
    background: var(--skeleton-gradient) !important;
    background-size: 200% 100%;
}

/* ===== Dark Mode — Status Badges (semantic) ===== */
html.dark-mode .status-badge.draft { background: #3d3520; color: #f0d060; }
html.dark-mode .status-badge.in-progress { background: #1a3a40; color: #60c0d0; }
html.dark-mode .status-badge.completed { background: #1a3a20; color: #60d080; }

/* ===== Dark Mode — HR Dividers (semantic) ===== */
html.dark-mode hr.gold { border-top-color: #8a7a30; }
html.dark-mode hr.black { border-top-color: #555; }
html.dark-mode hr.brown { border-top-color: #6b3a2a; }

/* ===== Dark Mode — Delete Button (danger semantics) ===== */
html.dark-mode .toolBar .k-button.delete-button { border-color: #c44 !important; color: #f66 !important; }
html.dark-mode .toolBar .k-button.delete-button:hover {
    background: linear-gradient(180deg, #3a2020 0%, #302020 100%) !important;
    border-color: #c44 !important;
}

/* ===== Dark Mode — AI Status Messages (semantic) ===== */
html.dark-mode .ai-status-loading { background: #242830; border-color: #3a4050; }
html.dark-mode .ai-status-loading .ai-status-text { color: #8aa0b8; }
html.dark-mode .ai-status-success { background: #1a2e1a; border-color: #2a5a2a; }
html.dark-mode .ai-status-success .ai-status-text { color: #60d080; }
html.dark-mode .ai-status-error { background: #2e1a1a; border-color: #5a2a2a; }
html.dark-mode .ai-status-error .ai-status-text { color: #f88; }

/* ===== Dark Mode — Form Navigation Sidebar (brand accent) ===== */
html.dark-mode .form-nav-link:hover { background: #3a2020; color: #ff7a70; border-left-color: #ff7a70; }
html.dark-mode .form-nav-link.active { background: #3a2020; color: #ff7a70; border-left-color: #ff7a70; }
html.dark-mode .form-nav-subitem:hover { background: #3a2020; color: #ff7a70; }
html.dark-mode .form-nav-subitem-nested:hover { background: #3a2020; color: #ff7a70; }
html.dark-mode .nav-toggle-btn:hover { background: var(--border-medium); color: #ff7a70; }

/* ===== Dark Mode — Miscellaneous (standalone) ===== */
html.dark-mode .institution-number { background: #e0e0e0; color: #1e1e1e; }
html.dark-mode .left-menu { background-color: #1a1a1a; }
html.dark-mode .left-menu a { color: #c0c0c0; }
html.dark-mode .left-menu a:hover { color: var(--text-link); }
html.dark-mode .blazor-error-boundary { background-color: #4a1a1a; }
html.dark-mode .toolBar .k-dropdown-button.user-menu-button,
html.dark-mode .toolBar .user-menu-button { color: #ccc !important; }
html.dark-mode .toolBar .k-dropdown-button.user-menu-button:hover,
html.dark-mode .toolBar .user-menu-button:hover { background: rgba(255, 255, 255, 0.08) !important; color: var(--text-dark) !important; }

/* ===== Dark Mode — AI Import Dialog ===== */
html.dark-mode .document-item.previewing {
    background: var(--bg-hover);
}

html.dark-mode .document-item.selected {
    border-color: var(--scholaro-orange);
    box-shadow: 4px 3px 3px rgba(0, 0, 0, 0.3);
}

/* ===== Dark Mode — HTML Tables (customTable, Bootstrap .table) ===== */
html.dark-mode .customTable th,
html.dark-mode .customTable td,
html.dark-mode .table th,
html.dark-mode .table td { color: var(--text-dark) !important; border-color: var(--border-medium) !important; }
html.dark-mode .customTable th,
html.dark-mode .table thead th { background-color: var(--bg-surface) !important; }
html.dark-mode .customTable tbody tr,
html.dark-mode .table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--bg-white) !important; }
html.dark-mode .table-striped > tbody > tr:nth-of-type(even) { background-color: var(--bg-light) !important; }
html.dark-mode .customTable tbody tr:hover,
html.dark-mode .table-striped > tbody > tr:hover { background-color: var(--bg-hover) !important; }

/* ============================================================
   Ocean Blue Theme — Variable overrides only
   ============================================================ */
html[data-theme="ocean-blue"] {
    --bg-light: #eef3f8;
    --bg-white: #f5f8fc;
    --border-light: #c4d4e4;
    --border-lighter: #d8e4f0;
    --text-dark: #1a2b40;
    --text-secondary: #4a6178;
    --text-muted: #6a8299;
    --bg-page: #e8eef5;
    --bg-surface: #dce6f0;
    --bg-hover: #e8eef5;
    --text-body: #2a3f57;
    --text-heading: #1a2b40;
    --text-link: #2563a8;
    --border-subtle: rgba(0, 40, 100, 0.06);
    --border-default: rgba(0, 40, 100, 0.08);
    --border-medium: #c4d4e4;
    --border-input: rgba(0, 40, 100, 0.12);
    --border-input-hover: rgba(0, 40, 100, 0.2);
    --border-decorative: #dce6f0;
    --skeleton-gradient: linear-gradient(90deg, #c4d4e4 25%, #d8e4f0 50%, #c4d4e4 75%);
    --shadow-card: 0 1px 2px rgba(0, 30, 80, 0.04), 0 2px 6px rgba(0, 30, 80, 0.04);
    --shadow-section: 0 2px 8px rgba(0, 30, 80, 0.06);
    --shadow-popup: 0 4px 12px rgba(0, 30, 80, 0.15);
    --scholaro-orange: #2563a8;
}

/* ============================================================
   Material Theme — Variable overrides only
   ============================================================ */
html[data-theme="material"] {
    --bg-light: #f0f0f0;
    --bg-white: #fafafa;
    --border-light: #c8c8c8;
    --border-lighter: #e0e0e0;
    --text-dark: #212121;
    --text-secondary: #616161;
    --text-muted: #9e9e9e;
    --bg-page: #eeeeee;
    --bg-surface: #e4e4e4;
    --bg-hover: #e8e8e8;
    --text-body: #333333;
    --text-heading: #212121;
    --text-link: #1565c0;
    --border-subtle: rgba(0, 0, 0, 0.06);
    --border-default: rgba(0, 0, 0, 0.08);
    --border-medium: #c8c8c8;
    --border-input: rgba(0, 0, 0, 0.12);
    --border-input-hover: rgba(0, 0, 0, 0.2);
    --border-decorative: #e0e0e0;
    --skeleton-gradient: linear-gradient(90deg, #c8c8c8 25%, #e0e0e0 50%, #c8c8c8 75%);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.06);
    --shadow-section: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-popup: 0 4px 12px rgba(0, 0, 0, 0.18);
    --scholaro-orange: #6750A4;
}

/* ============================================================
   Fluent Theme — Variable overrides only
   ============================================================ */
html[data-theme="fluent"] {
    --bg-light: #f3f3f3;
    --bg-white: #fafafa;
    --border-light: #d1d1d1;
    --border-lighter: #e1e1e1;
    --text-dark: #242424;
    --text-secondary: #616161;
    --text-muted: #8a8a8a;
    --bg-page: #f0f0f0;
    --bg-surface: #e6e6e6;
    --bg-hover: #ebebeb;
    --text-body: #323232;
    --text-heading: #242424;
    --text-link: #0f6cbd;
    --border-subtle: rgba(0, 0, 0, 0.06);
    --border-default: rgba(0, 0, 0, 0.08);
    --border-medium: #d1d1d1;
    --border-input: rgba(0, 0, 0, 0.12);
    --border-input-hover: rgba(0, 0, 0, 0.2);
    --border-decorative: #e1e1e1;
    --skeleton-gradient: linear-gradient(90deg, #d1d1d1 25%, #e1e1e1 50%, #d1d1d1 75%);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 6px rgba(0, 0, 0, 0.05);
    --shadow-section: 0 2px 8px rgba(0, 0, 0, 0.07);
    --shadow-popup: 0 4px 12px rgba(0, 0, 0, 0.14);
    --scholaro-orange: #0f6cbd;
}

/* ============================================================
   Lavender Theme — Variable overrides (dark variant)
   Derived from the Telerik Material dark swatch color tokens
   (--kendo-color-surface, surface-alt, base, etc.) to ensure
   the custom UI matches the Telerik component palette.
   ============================================================ */
html[data-theme="lavender"] {
    --bg-page: #1C1B1F;
    --bg-light: #211F26;
    --bg-white: #2B2930;
    --bg-surface: #36343B;
    --bg-hover: #3E3B44;
    --text-dark: #E6E0E9;
    --text-secondary: #CAC4D0;
    --text-muted: #938F99;
    --text-body: #D6D0DA;
    --text-heading: #E6E0E9;
    --text-link: #D0BCFF;
    --border-light: #49454F;
    --border-lighter: #36343B;
    --border-subtle: rgba(230, 224, 233, 0.06);
    --border-default: rgba(230, 224, 233, 0.08);
    --border-medium: #49454F;
    --border-input: #49454F;
    --border-input-hover: #5B5661;
    --border-decorative: #36343B;
    --skeleton-gradient: linear-gradient(90deg, #2B2930 25%, #36343B 50%, #2B2930 75%);
    --shadow-card: 0 1px 3px rgba(20, 18, 24, 0.3), 0 2px 6px rgba(20, 18, 24, 0.2);
    --shadow-section: 0 2px 8px rgba(20, 18, 24, 0.4);
    --shadow-popup: 0 4px 16px rgba(20, 18, 24, 0.5);
    --sidebar-gradient: linear-gradient(180deg, #211F26 0%, #1C1B1F 70%);
    /* Brand accent — Material primary instead of Scholaro orange */
    --scholaro-orange: #D0BCFF;
    /* Kendo/Telerik Material swatch overrides */
    --kendo-input-border: #49454F;
    --kendo-input-hover-border: #5B5661;
    --kendo-input-focus-border: #D0BCFF;
    --kendo-input-focus-shadow: none;
    --kendo-button-border: #5B5661;
    --kendo-button-text: #CAC4D0;
    --kendo-button-bg: #3E3B44;
    --kendo-button-hover-bg: #49454F;
    --kendo-button-hover-border: #7B7585;
    --kendo-button-hover-text: #E6E0E9;
}

/* ===== Lavender Theme — Hardcoded color overrides =====
   The html.dark-mode rules use hardcoded neutral grays (#3a3a3a, #555, #ccc, etc.)
   that don't adapt via CSS variables. These overrides replace them with warm
   purple-gray equivalents from the Material dark swatch palette. */

/* Form control hover */
html[data-theme="lavender"] .k-dropdown:hover,
html[data-theme="lavender"] .k-datepicker:hover,
html[data-theme="lavender"] .k-textbox:hover,
html[data-theme="lavender"] .k-textarea:hover,
html[data-theme="lavender"] .k-combobox:hover {
    background-color: var(--bg-hover) !important;
}

/* Toolbar buttons (top bar + grid/transcript toolbar) */
html[data-theme="lavender"] .toolBar .k-button,
html[data-theme="lavender"] .k-grid-toolbar .k-button,
html[data-theme="lavender"] .transcript-toolbar .k-button {
    background: linear-gradient(180deg, #3E3B44 0%, #36343B 100%) !important;
    border-color: #5B5661 !important;
    color: #CAC4D0 !important;
}

html[data-theme="lavender"] .toolBar .k-button:hover,
html[data-theme="lavender"] .k-grid-toolbar .k-button:hover,
html[data-theme="lavender"] .transcript-toolbar .k-button:hover {
    background: linear-gradient(180deg, #49454F 0%, #3E3B44 100%) !important;
}

/* Transcript toolbar numeric input — override Material swatch border */
html[data-theme="lavender"] .transcript-toolbar .k-numerictextbox,
html[data-theme="lavender"] .k-grid-toolbar .k-numerictextbox {
    border-color: #49454F !important;
}

html[data-theme="lavender"] .transcript-toolbar .k-numerictextbox:focus-within,
html[data-theme="lavender"] .k-grid-toolbar .k-numerictextbox:focus-within {
    border-color: #D0BCFF !important;
}

/* Toolbar dropdowns */
html[data-theme="lavender"] .toolBar .k-dropdown,
html[data-theme="lavender"] .toolBar .toolbarDropdown,
html[data-theme="lavender"] .toolBar .k-dropdown-wrap {
    background: linear-gradient(180deg, #3E3B44 0%, #36343B 100%) !important;
    border-color: #5B5661 !important;
}

/* Toolbar text */
html[data-theme="lavender"] .toolBar span { color: #CAC4D0 !important; }

/* Popup separator */
html[data-theme="lavender"] .k-popup .k-menu-item.responsive-separator,
html[data-theme="lavender"] .k-popup .k-item.responsive-separator {
    border-bottom-color: rgba(230, 224, 233, 0.1) !important;
}

/* Grid alternating row */
html[data-theme="lavender"] .k-grid .k-master-row.k-alt {
    background-color: #211F26 !important;
}

/* Pager text */
html[data-theme="lavender"] .k-pager,
html[data-theme="lavender"] .k-pager-wrap { color: #CAC4D0 !important; }
html[data-theme="lavender"] .k-pager .k-button,
html[data-theme="lavender"] .k-pager-wrap .k-button { color: #CAC4D0 !important; }

/* Checkbox — brighter unchecked border for visibility on dark toolbar */
html[data-theme="lavender"] .k-checkbox {
    border-color: #7B7585 !important;
}

/* Checkbox checked — Material primary instead of Default accent */
html[data-theme="lavender"] .k-checkbox:checked {
    background-color: #D0BCFF !important;
    border-color: #D0BCFF !important;
}

/* Transcript toolbar — Material swatch has taller components (~36px vs 32px) */
html[data-theme="lavender"] .transcript-toolbar .total-credits-group {
    border-color: #49454F;
    height: 36px;
}

html[data-theme="lavender"] .transcript-toolbar .toolbar-right .k-radio-list {
    height: 36px;
    border-color: #49454F;
}

html[data-theme="lavender"] .transcript-toolbar .toolbar-right .k-radio-list-item {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 0.75rem !important;
    border-right: 1px solid #49454F;
    height: 100%;
}

html[data-theme="lavender"] .transcript-toolbar .toolbar-right .k-radio-list-item:last-child {
    border-right: none;
}

html[data-theme="lavender"] .transcript-toolbar .toolbar-right .k-radio-wrap {
    display: inline-flex !important;
    align-self: center !important;
    margin: 0 !important;
}

html[data-theme="lavender"] .transcript-toolbar .toolbar-right .k-radio-label {
    display: inline-flex !important;
    align-self: center !important;
    margin: 0 !important;
    line-height: 1 !important;
    color: #CAC4D0 !important;
}

html[data-theme="lavender"] .transcript-toolbar .toolbar-middle .k-checkbox-wrap {
    display: inline-flex !important;
    align-items: center !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

html[data-theme="lavender"] .transcript-toolbar .toolbar-middle .k-checkbox {
    margin: 0 !important;
}

html[data-theme="lavender"] .transcript-toolbar .toolbar-middle label {
    display: inline-flex !important;
    align-items: center !important;
    align-self: center !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* TabStrip text */
html[data-theme="lavender"] .k-tabstrip-items .k-item { color: #CAC4D0 !important; }

/* Numeric textbox — Material swatch uses wider Roboto font; reduce inner padding to prevent digit clipping */
html[data-theme="lavender"] .k-numerictextbox .k-input-inner {
    padding-inline: 4px !important;
}

/* Window titlebar button */
html[data-theme="lavender"] .k-window-titlebar .k-button { color: #CAC4D0 !important; }

/* Form navigation sidebar — lavender accent instead of coral */
html[data-theme="lavender"] .form-nav-link:hover { background: #2D2540; color: #D0BCFF; border-left-color: #D0BCFF; }
html[data-theme="lavender"] .form-nav-link.active { background: #2D2540; color: #D0BCFF; border-left-color: #D0BCFF; }
html[data-theme="lavender"] .form-nav-subitem:hover { background: #2D2540; color: #D0BCFF; }
html[data-theme="lavender"] .form-nav-subitem-nested:hover { background: #2D2540; color: #D0BCFF; }
html[data-theme="lavender"] .nav-toggle-btn:hover { background: #49454F; color: #D0BCFF; }

/* Left menu */
html[data-theme="lavender"] .left-menu { background-color: #1C1B1F; }
html[data-theme="lavender"] .left-menu a { color: #CAC4D0; }

/* Institution number badge */
html[data-theme="lavender"] .institution-number { background: #E6E0E9; color: #1C1B1F; }

/* User menu */
html[data-theme="lavender"] .toolBar .k-dropdown-button.user-menu-button,
html[data-theme="lavender"] .toolBar .user-menu-button { color: #CAC4D0 !important; }

/* Delete button — white text on red bg for lavender palette */
html[data-theme="lavender"] .k-button-solid-error {
    color: #fff !important;
}

/* Evaluation Summary ribbon — black text on light purple (#D0BCFF) background */
html[data-theme="lavender"] .ribbon {
    color: #1C1B1F;
}

/* Scrollbar — warm tones */
html[data-theme="lavender"] * { scrollbar-color: #5B5661 #2B2930; }
html[data-theme="lavender"] ::-webkit-scrollbar { background-color: #2B2930; }
html[data-theme="lavender"] ::-webkit-scrollbar-thumb { background-color: #5B5661; }
html[data-theme="lavender"] ::-webkit-scrollbar-thumb:hover { background-color: #6D6873; }

/* ===== Lavender Theme — Report accent color overrides =====
   Hardcoded #ff6358 (scholaro-orange) in reports.css that don't use
   var(--scholaro-orange). These adapt the brand accent to Material primary. */

/* Evaluation Summary border */
html[data-theme="lavender"] .summary-content {
    border-color: #D0BCFF;
}

/* Ribbon fold pseudo-elements (darker shade of lavender primary) */
html[data-theme="lavender"] .ribbon:before {
    border-color: transparent #9A82DB transparent transparent;
}

html[data-theme="lavender"] .ribbon:after {
    border-color: #9A82DB transparent transparent transparent;
}

/* AI loading bar */
html[data-theme="lavender"] .grid-ai-loading-bar {
    background: linear-gradient(90deg, transparent, #D0BCFF, transparent);
}

/* Section divider lines (credential-transcript) */
html[data-theme="lavender"] .credential-transcript-divider h4::before {
    background: linear-gradient(to right, transparent, #D0BCFF);
}

html[data-theme="lavender"] .credential-transcript-divider h4::after {
    background: linear-gradient(to left, transparent, #D0BCFF);
}

/* AI Import tab */
html[data-theme="lavender"] .ai-import-tab {
    background: #D0BCFF;
    color: #1C1B1F;
}

html[data-theme="lavender"] .ai-import-tab:hover {
    background: #C4AFF4;
}

/* Form nav subitem dot indicators */
html[data-theme="lavender"] .form-nav-subitem:hover::before {
    background: #D0BCFF;
}

html[data-theme="lavender"] .form-nav-subitem-nested:hover::before {
    background: #D0BCFF;
}

/* Document reorder button accent */
html[data-theme="lavender"] .document-order-controls .reorder-btn {
    color: #D0BCFF;
}

/* HR dividers — lavender-tinted instead of neutral */
html[data-theme="lavender"] hr.gold { border-top-color: #9A82DB; }
html[data-theme="lavender"] hr.black { border-top-color: #5B5661; }
html[data-theme="lavender"] hr.brown { border-top-color: #9A82DB; }

/* Footer bar — dark surface instead of using --text-dark (which is light in dark themes) */
html[data-theme="lavender"] .footer-bar {
    background: #36343B;
    color: #CAC4D0;
}

html[data-theme="dark"] .footer-bar {
    background: #1e1e1e;
    color: #ccc;
}

/* ============================================================
   Ocean Blue Theme — Hardcoded accent color overrides
   Replaces hardcoded #ff6358 with ocean blue (#2563a8)
   ============================================================ */

/* Evaluation Summary border */
html[data-theme="ocean-blue"] .summary-content { border-color: #2563a8; }

/* Ribbon fold pseudo-elements */
html[data-theme="ocean-blue"] .ribbon:before { border-color: transparent #1d4f85 transparent transparent; }
html[data-theme="ocean-blue"] .ribbon:after { border-color: #1d4f85 transparent transparent transparent; }

/* AI loading bar */
html[data-theme="ocean-blue"] .grid-ai-loading-bar { background: linear-gradient(90deg, transparent, #2563a8, transparent); }

/* Section divider lines */
html[data-theme="ocean-blue"] .credential-transcript-divider h4::before { background: linear-gradient(to right, transparent, #2563a8); }
html[data-theme="ocean-blue"] .credential-transcript-divider h4::after { background: linear-gradient(to left, transparent, #2563a8); }

/* AI Import tab */
html[data-theme="ocean-blue"] .ai-import-tab { background: #2563a8; }
html[data-theme="ocean-blue"] .ai-import-tab:hover { background: #1d4f85; }

/* Form nav sidebar — ocean blue accent */
html[data-theme="ocean-blue"] .form-nav-link:hover { background: #dce8f5; color: #2563a8; border-left-color: #2563a8; }
html[data-theme="ocean-blue"] .form-nav-link.active { background: #dce8f5; color: #2563a8; border-left-color: #2563a8; }
html[data-theme="ocean-blue"] .form-nav-subitem:hover { background: #dce8f5; color: #2563a8; }
html[data-theme="ocean-blue"] .form-nav-subitem:hover::before { background: #2563a8; }
html[data-theme="ocean-blue"] .form-nav-subitem-nested:hover { background: #dce8f5; color: #2563a8; }
html[data-theme="ocean-blue"] .form-nav-subitem-nested:hover::before { background: #2563a8; }
html[data-theme="ocean-blue"] .nav-toggle-btn:hover { color: #2563a8; }

/* Document reorder button */
html[data-theme="ocean-blue"] .document-order-controls .reorder-btn { color: #2563a8; }

/* HR dividers */
html[data-theme="ocean-blue"] hr.gold { border-top-color: #2563a8; }
html[data-theme="ocean-blue"] hr.brown { border-top-color: #2563a8; }

/* ============================================================
   Material Theme — Hardcoded accent color overrides
   Replaces hardcoded #ff6358 with Material primary (#6750A4)
   ============================================================ */

/* Evaluation Summary border */
html[data-theme="material"] .summary-content { border-color: #6750A4; }

/* Ribbon fold pseudo-elements */
html[data-theme="material"] .ribbon:before { border-color: transparent #533f8a transparent transparent; }
html[data-theme="material"] .ribbon:after { border-color: #533f8a transparent transparent transparent; }

/* AI loading bar */
html[data-theme="material"] .grid-ai-loading-bar { background: linear-gradient(90deg, transparent, #6750A4, transparent); }

/* Section divider lines */
html[data-theme="material"] .credential-transcript-divider h4::before { background: linear-gradient(to right, transparent, #6750A4); }
html[data-theme="material"] .credential-transcript-divider h4::after { background: linear-gradient(to left, transparent, #6750A4); }

/* AI Import tab */
html[data-theme="material"] .ai-import-tab { background: #6750A4; }
html[data-theme="material"] .ai-import-tab:hover { background: #533f8a; }

/* Form nav sidebar — material purple accent */
html[data-theme="material"] .form-nav-link:hover { background: #ede7f6; color: #6750A4; border-left-color: #6750A4; }
html[data-theme="material"] .form-nav-link.active { background: #ede7f6; color: #6750A4; border-left-color: #6750A4; }
html[data-theme="material"] .form-nav-subitem:hover { background: #ede7f6; color: #6750A4; }
html[data-theme="material"] .form-nav-subitem:hover::before { background: #6750A4; }
html[data-theme="material"] .form-nav-subitem-nested:hover { background: #ede7f6; color: #6750A4; }
html[data-theme="material"] .form-nav-subitem-nested:hover::before { background: #6750A4; }
html[data-theme="material"] .nav-toggle-btn:hover { color: #6750A4; }

/* Document reorder button */
html[data-theme="material"] .document-order-controls .reorder-btn { color: #6750A4; }

/* HR dividers */
html[data-theme="material"] hr.gold { border-top-color: #6750A4; }
html[data-theme="material"] hr.brown { border-top-color: #6750A4; }

/* ============================================================
   Fluent Theme — Hardcoded accent color overrides
   Replaces hardcoded #ff6358 with Fluent primary (#0f6cbd)
   ============================================================ */

/* Evaluation Summary border */
html[data-theme="fluent"] .summary-content { border-color: #0f6cbd; }

/* Ribbon fold pseudo-elements */
html[data-theme="fluent"] .ribbon:before { border-color: transparent #0a5299 transparent transparent; }
html[data-theme="fluent"] .ribbon:after { border-color: #0a5299 transparent transparent transparent; }

/* AI loading bar */
html[data-theme="fluent"] .grid-ai-loading-bar { background: linear-gradient(90deg, transparent, #0f6cbd, transparent); }

/* Section divider lines */
html[data-theme="fluent"] .credential-transcript-divider h4::before { background: linear-gradient(to right, transparent, #0f6cbd); }
html[data-theme="fluent"] .credential-transcript-divider h4::after { background: linear-gradient(to left, transparent, #0f6cbd); }

/* AI Import tab */
html[data-theme="fluent"] .ai-import-tab { background: #0f6cbd; }
html[data-theme="fluent"] .ai-import-tab:hover { background: #0a5299; }

/* Form nav sidebar — fluent blue accent */
html[data-theme="fluent"] .form-nav-link:hover { background: #e0eef8; color: #0f6cbd; border-left-color: #0f6cbd; }
html[data-theme="fluent"] .form-nav-link.active { background: #e0eef8; color: #0f6cbd; border-left-color: #0f6cbd; }
html[data-theme="fluent"] .form-nav-subitem:hover { background: #e0eef8; color: #0f6cbd; }
html[data-theme="fluent"] .form-nav-subitem:hover::before { background: #0f6cbd; }
html[data-theme="fluent"] .form-nav-subitem-nested:hover { background: #e0eef8; color: #0f6cbd; }
html[data-theme="fluent"] .form-nav-subitem-nested:hover::before { background: #0f6cbd; }
html[data-theme="fluent"] .nav-toggle-btn:hover { color: #0f6cbd; }

/* Document reorder button */
html[data-theme="fluent"] .document-order-controls .reorder-btn { color: #0f6cbd; }

/* HR dividers */
html[data-theme="fluent"] hr.gold { border-top-color: #0f6cbd; }
html[data-theme="fluent"] hr.brown { border-top-color: #0f6cbd; }