/* All selectable themes stay inside Red / Orange / Blue / White. */

:root[data-theme="classic-blue"],
:root[data-theme="bright-campus"],
:root[data-theme="orange-blue"],
:root[data-theme="modern-teal"],
:root[data-theme="academic-green"],
:root[data-theme="warm-burgundy"] {
    --theme-primary: #1e5eff;
    --theme-primary-strong: #0b3fd9;
    --theme-accent: #ff6a00;
    --theme-danger: #e63946;
    --theme-page: #f4f7ff;
    --theme-sidebar: #ffffff;
    --theme-sidebar-end: #e8f0ff;
    --theme-text: #0f172a;
    --theme-muted: #475569;
    --theme-border: #dbe4f5;
    --theme-radius: 8px;
}

:root[data-theme="bright-campus"] {
    --theme-page: #ffffff;
    --theme-sidebar-end: #fff1e6;
}

:root[data-theme="orange-white"] {
    --theme-primary: #ff6a00;
    --theme-primary-strong: #e85d00;
    --theme-accent: #1e5eff;
    --theme-danger: #e63946;
    --theme-page: #fffaf5;
    --theme-sidebar: #ffffff;
    --theme-sidebar-end: #fff1e6;
    --theme-text: #0f172a;
    --theme-muted: #475569;
    --theme-border: #ffe0c2;
    --theme-radius: 8px;
}

:root[data-theme="red-white"] {
    --theme-primary: #e63946;
    --theme-primary-strong: #c62828;
    --theme-accent: #ff6a00;
    --theme-danger: #e63946;
    --theme-page: #fff7f6;
    --theme-sidebar: #ffffff;
    --theme-sidebar-end: #ffe8ea;
    --theme-text: #0f172a;
    --theme-muted: #475569;
    --theme-border: #ffd0d4;
    --theme-radius: 8px;
}

:root[data-theme="red-blue"] {
    --theme-primary: #e63946;
    --theme-primary-strong: #c62828;
    --theme-accent: #1e5eff;
    --theme-danger: #e63946;
    --theme-page: #f4f7ff;
    --theme-sidebar: #ffffff;
    --theme-sidebar-end: #e8f0ff;
    --theme-text: #0f172a;
    --theme-muted: #475569;
    --theme-border: #dbe4f5;
    --theme-radius: 8px;
}

body {
    background: var(--theme-page);
    color: var(--theme-text);
}

body .app-shell {
    color: var(--theme-text);
    background: var(--theme-page);
}

body .app-shell .app-content {
    background: linear-gradient(135deg, color-mix(in srgb, var(--theme-primary) 7%, var(--theme-page)), var(--theme-page) 42%);
}

body .app-shell .app-sidebar {
    border-color: var(--theme-border);
    background: linear-gradient(180deg, var(--theme-sidebar), var(--theme-sidebar-end));
}

body .app-shell .app-topbar {
    border-bottom: 3px solid var(--theme-primary);
    background: #ffffff;
    box-shadow: 0 3px 14px color-mix(in srgb, var(--theme-primary) 10%, transparent);
}

body .app-shell .app-chrome {
    background: var(--theme-sidebar);
}

body .app-shell .topbar-menu {
    border-bottom-color: var(--theme-border);
    background: linear-gradient(90deg, color-mix(in srgb, var(--theme-primary) 8%, #ffffff), color-mix(in srgb, var(--theme-accent) 6%, #ffffff));
}

body .app-shell .topbar-menu-item {
    border-color: var(--theme-border);
    background: #ffffff;
}

body .app-shell .topbar-menu-item > i:first-child {
    color: var(--theme-primary);
}

body .app-shell .topbar-menu-item:hover,
body .app-shell .topbar-drop.open > .topbar-menu-item,
body .app-shell .topbar-menu-item.active,
body .app-shell .topbar-drop.active > .topbar-menu-item {
    border-color: color-mix(in srgb, var(--theme-accent) 45%, var(--theme-border));
    color: var(--theme-primary-strong);
    background: color-mix(in srgb, var(--theme-accent) 10%, #ffffff);
}

body .app-shell .topbar-drop-panel,
body .app-shell .topbar-drop-flyout {
    border-color: var(--theme-border);
}

body .app-shell .topbar-drop-item:hover,
body .app-shell .topbar-drop-item.active {
    color: var(--theme-primary-strong);
    background: color-mix(in srgb, var(--theme-primary) 10%, #ffffff);
}

body .app-shell .topbar-drop-item:hover > i,
body .app-shell .topbar-drop-item.active > i {
    color: var(--theme-primary);
}

body .app-shell .brand-block,
body .app-shell .sidebar-footer,
body .app-shell .submenu-list {
    border-color: var(--theme-border);
}

body .app-shell .brand-block strong,
body .app-shell .app-topbar strong,
body .app-shell h1,
body .app-shell h2,
body .app-shell h3 {
    color: var(--theme-text);
}

body .app-shell .brand-block p,
body .app-shell .app-topbar p {
    color: var(--theme-muted);
}

body .app-shell .brand-mark,
body .app-shell .user-avatar,
body .app-shell .sidebar-help:hover,
body .app-shell .sidebar-help[aria-expanded="true"] {
    color: #ffffff;
    border-color: var(--theme-accent);
    background: linear-gradient(135deg, var(--theme-accent), var(--theme-danger));
}

body .app-shell .sidebar-search:focus-within,
body .app-shell input:focus,
body .app-shell select:focus,
body .app-shell textarea:focus {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary) 16%, transparent);
    outline: 0;
}

body .app-shell .menu-item:hover,
body .app-shell .submenu-item:hover {
    color: var(--theme-primary-strong);
    border-color: var(--theme-border);
    background: color-mix(in srgb, var(--theme-primary) 7%, #ffffff);
}

body .app-shell .menu-item.active {
    color: #ffffff;
    border-color: var(--theme-primary);
    background: var(--theme-primary);
    box-shadow: 0 5px 16px color-mix(in srgb, var(--theme-primary) 24%, transparent);
}

body .app-shell .menu-item.active::before {
    background: var(--theme-accent);
}

body .app-shell .submenu-item.active {
    color: var(--theme-primary-strong);
    border-color: color-mix(in srgb, var(--theme-primary) 35%, var(--theme-border));
    border-left: 3px solid var(--theme-danger);
    background: color-mix(in srgb, var(--theme-primary) 14%, #ffffff);
}

body .app-shell .workspace-tabs {
    border-color: var(--theme-border);
    background: color-mix(in srgb, var(--theme-primary) 7%, #ffffff);
}

body .app-shell .workspace-tab {
    border-color: var(--theme-border);
    background: color-mix(in srgb, var(--theme-primary) 6%, #ffffff);
}

body .app-shell .workspace-tab.active {
    color: var(--theme-primary-strong);
    border-color: color-mix(in srgb, var(--theme-primary) 35%, var(--theme-border));
    background: #ffffff;
}

body .app-shell .workspace-tab.active::before,
body .app-shell .identity-preview {
    border-color: var(--theme-primary);
    background-color: color-mix(in srgb, var(--theme-primary) 8%, #ffffff);
}

body .app-shell .workspace-tab.active::before {
    background: var(--theme-primary);
}

body .app-shell .module-tabs {
    border-color: var(--theme-border);
    background: color-mix(in srgb, var(--theme-primary) 7%, #ffffff);
}

body .app-shell .module-context,
body .app-shell .module-context i,
body .app-shell .eyebrow,
body .app-shell [class*="-head"] > span:first-child {
    color: var(--theme-accent) !important;
}

body .app-shell .module-tab.active,
body .app-shell .btn-primary,
body .app-shell .profile-actions button,
body .app-shell button[type="submit"]:not(.btn-danger):not(.secondary):not(.btn-outline-secondary) {
    color: #ffffff;
    border-color: var(--theme-accent);
    background: var(--theme-accent);
}

body .app-shell .profile-head,
body .app-shell .profile-panel,
body .app-shell .panel {
    border-color: var(--theme-border);
}

body .app-shell .school-brand-copy strong {
    color: var(--theme-text);
}

body .app-shell .school-brand-copy span,
body .app-shell label,
body .app-shell label small {
    color: var(--theme-muted);
}

body .app-shell button,
body .app-shell input,
body .app-shell select,
body .app-shell textarea,
body .app-shell .panel {
    border-radius: var(--theme-radius);
}

body .app-shell a,
body .app-shell input,
body .app-shell select {
    accent-color: var(--theme-primary);
}

body .app-shell .app-content :is(.primary, .btn-primary, button[type="submit"]:not(.btn-danger):not(.secondary), .icon-button.primary) {
    color: #ffffff !important;
    border-color: var(--theme-accent) !important;
    background: var(--theme-accent) !important;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--theme-accent) 28%, transparent);
}

body .app-shell .app-content :is(.primary, .btn-primary, button[type="submit"]:not(.btn-danger):not(.secondary), .icon-button.primary):hover {
    background: color-mix(in srgb, var(--theme-accent) 88%, #000000) !important;
    border-color: color-mix(in srgb, var(--theme-accent) 88%, #000000) !important;
}

body .app-shell .app-content :is(.secondary, .records-link, .back-link) {
    color: var(--theme-primary-strong) !important;
    border-color: var(--theme-primary) !important;
    background: #ffffff !important;
}

body .app-shell .app-content table thead th {
    color: var(--theme-primary-strong) !important;
    background: color-mix(in srgb, var(--theme-primary) 10%, #ffffff) !important;
    border-bottom-color: var(--theme-border) !important;
}

body .app-shell .app-content .page-head,
body .app-shell .app-content .panel.page-head {
    border-top: 3px solid var(--theme-primary);
}

body .app-shell .topbar-journey {
    color: #ffffff !important;
    background: var(--theme-accent) !important;
    border: 0 !important;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--theme-accent) 28%, transparent);
}

body .app-shell .topbar-journey:hover {
    color: #ffffff !important;
    background: color-mix(in srgb, var(--theme-accent) 88%, #000000) !important;
}

body .app-shell .submenu-item.active {
    border-left: 3px solid var(--theme-danger);
}

body .app-shell .btn-danger,
body .app-shell .danger,
body .app-shell button.delete,
body .app-shell .icon-button.danger {
    color: #ffffff !important;
    border-color: var(--theme-danger) !important;
    background: var(--theme-danger) !important;
}