/*
 * School Platform Design System
 * This file is the single visual source of truth for every application surface.
 * It intentionally loads after component-isolated CSS so existing and future pages
 * inherit the same palette, spacing, states, controls, and elevation language.
 */

:root {
    color-scheme: dark;

    /* Core palette */
    --ds-background: #0f1724;
    --ds-background-subtle: #121c2a;
    --ds-surface: #172231;
    --ds-surface-raised: #1d2a3b;
    --ds-panel: #202e40;
    --ds-card: var(--ds-surface);
    --ds-sidebar: #101927;
    --ds-sidebar-raised: #162235;
    --ds-input: #111b29;
    --ds-overlay: rgb(4 9 18 / 68%);
    --ds-overlay-subtle: rgb(4 9 18 / 24%);
    --ds-hero-overlay: rgb(7 14 27 / 72%);
    --ds-hero-overlay-soft: rgb(7 14 27 / 42%);
    --ds-surface-translucent: rgb(23 34 49 / 94%);
    --ds-window-surface: #0b1422;
    --ds-window-surface-raised: #0d1726;
    --ds-window-border: #223044;
    --ds-window-overlay: rgb(2 6 15 / 78%);
    --ds-window-text: #d7e0ea;
    --ds-window-muted: #94a3b8;

    /* Text */
    --ds-text-primary: #edf3f8;
    --ds-text-secondary: #a9b6c6;
    --ds-text-tertiary: #8190a4;
    --ds-text-disabled: #657387;
    --ds-text-on-accent: #f8fbfd;
    --ds-text-on-bright: #0b1c23;
    --ds-control-on-accent-soft: rgb(248 251 253 / 10%);
    --ds-control-on-accent-hover: rgb(248 251 253 / 20%);
    --ds-control-on-accent-border: rgb(248 251 253 / 35%);

    /* Borders and interaction */
    --ds-border: #2f3d50;
    --ds-border-strong: #405169;
    --ds-control-border: #5c7088;
    --ds-hover: #293950;
    --ds-selected: #2d5867;
    --ds-selected-strong: #315f6f;
    --ds-disabled: #253246;
    --ds-focus: #80cbd3;
    --ds-focus-ring: rgb(107 184 195 / 24%);

    /* Brand and accent */
    --ds-primary: #6bb8c3;
    --ds-primary-hover: #80c9d1;
    --ds-primary-active: #54a5b1;
    --ds-primary-solid: #285f69;
    --ds-primary-solid-hover: #32727d;
    --ds-primary-gradient-end: #32727d;
    --ds-primary-soft: #193640;
    --ds-action-bg: #164e63;
    --ds-action-hover: #155e75;
    --ds-action-active: #123f50;
    --ds-action-border: #26677a;
    --ds-action-border-hover: #32788b;
    --ds-action-text: #d7e0ea;
    --ds-action-text-hover: #e2e8f0;
    --ds-action-outline-text: #8fb8c4;
    --ds-action-focus: rgb(45 212 191 / 28%);
    --ds-accent: #93a9d8;
    --ds-accent-soft: #252e4b;

    /* Functional states */
    --ds-success: #66c294;
    --ds-success-strong: #86d2ab;
    --ds-success-soft: #17352a;
    --ds-success-action: #246747;
    --ds-success-action-hover: #2d7a56;
    --ds-success-border: #2b5b47;
    --ds-warning: #ddb665;
    --ds-warning-strong: #edca80;
    --ds-warning-soft: #3a301d;
    --ds-warning-border: #65542d;
    --ds-danger: #e47b86;
    --ds-danger-strong: #f39aa3;
    --ds-danger-soft: #3a2028;
    --ds-danger-action: #8f3945;
    --ds-danger-action-hover: #a74451;
    --ds-danger-border: #6a3844;
    --ds-info: #6cb9d4;
    --ds-info-strong: #8ccce1;
    --ds-info-soft: #17333d;
    --ds-info-action: #286781;
    --ds-info-border: #2d5865;
    --ds-text-on-warning: #211a0c;
    --ds-text-on-info: #0b1c23;

    /* Shape and elevation */
    --ds-radius-sm: 0.5rem;
    --ds-radius-md: 0.75rem;
    --ds-radius-lg: 1rem;
    --ds-radius-xl: 1.25rem;
    --ds-radius-pill: 999px;
    --ds-shadow-sm: 0 0.25rem 0.8rem rgb(2 8 18 / 16%);
    --ds-shadow-md: 0 0.8rem 2rem rgb(2 8 18 / 24%);
    --ds-shadow-lg: 0 1.25rem 3rem rgb(2 8 18 / 32%);
    --ds-shadow-color: rgb(2 8 18 / 32%);
    --ds-shadow-color-soft: rgb(2 8 18 / 16%);
    --ds-danger-ring: rgb(228 123 134 / 14%);
    --ds-grade-failed: #ff5f62;
    --ds-grade-failed-shadow:
        0 0 4px rgb(255 38 42 / 90%),
        0 0 9px rgb(255 38 42 / 65%),
        0 0 14px rgb(255 38 42 / 35%);
    --ds-tree-glow: rgb(107 184 195 / 8%);
    --ds-transition: 150ms ease;

    /* Backward-compatible platform aliases */
    --sp-ink: var(--ds-text-primary);
    --sp-muted: var(--ds-text-secondary);
    --sp-primary: var(--ds-primary);
    --sp-primary-dark: var(--ds-primary-active);
    --sp-accent: var(--ds-accent);
    --sp-surface: var(--ds-surface);
    --sp-soft: var(--ds-background);
    --sp-border: var(--ds-border);
    --sp-font-family: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;

    /* Bootstrap design-token bridge */
    --bs-body-color: var(--ds-text-primary);
    --bs-body-bg: var(--ds-background);
    --bs-emphasis-color: var(--ds-text-primary);
    --bs-secondary-color: var(--ds-text-secondary);
    --bs-secondary-bg: var(--ds-surface-raised);
    --bs-tertiary-color: var(--ds-text-tertiary);
    --bs-tertiary-bg: var(--ds-panel);
    --bs-border-color: var(--ds-border);
    --bs-border-color-translucent: var(--ds-border);
    --bs-link-color: var(--ds-primary);
    --bs-link-hover-color: var(--ds-primary-hover);
    --bs-heading-color: var(--ds-text-primary);
    --bs-focus-ring-color: var(--ds-focus-ring);
    --bs-form-valid-color: var(--ds-success);
    --bs-form-invalid-color: var(--ds-danger);
    --bs-primary-bg-subtle: var(--ds-primary-soft);
    --bs-primary-border-subtle: var(--ds-primary-solid);
    --bs-primary-text-emphasis: var(--ds-primary-hover);
    --bs-secondary-bg-subtle: var(--ds-panel);
    --bs-secondary-border-subtle: var(--ds-border-strong);
    --bs-secondary-text-emphasis: var(--ds-text-secondary);
    --bs-success-bg-subtle: var(--ds-success-soft);
    --bs-success-border-subtle: var(--ds-success-border);
    --bs-success-text-emphasis: var(--ds-success-strong);
    --bs-warning-bg-subtle: var(--ds-warning-soft);
    --bs-warning-border-subtle: var(--ds-warning-border);
    --bs-warning-text-emphasis: var(--ds-warning-strong);
    --bs-danger-bg-subtle: var(--ds-danger-soft);
    --bs-danger-border-subtle: var(--ds-danger-border);
    --bs-danger-text-emphasis: var(--ds-danger-strong);
    --bs-info-bg-subtle: var(--ds-info-soft);
    --bs-info-border-subtle: var(--ds-info-border);
    --bs-info-text-emphasis: var(--ds-info-strong);
    --bs-primary-rgb: 107, 184, 195;
    --bs-secondary-rgb: 129, 144, 164;
    --bs-success-rgb: 102, 194, 148;
    --bs-danger-rgb: 228, 123, 134;
    --bs-warning-rgb: 221, 182, 101;
    --bs-info-rgb: 108, 185, 212;
    --bs-light-rgb: 29, 42, 59;
    --bs-dark-rgb: 15, 23, 36;
    /* Shared visualization accents and neutral shadow base. */
    --ds-chart-violet: #9b5cff;
    --ds-chart-violet-text: #b99aff;
    --ds-chart-pink: #ec4899;
    --ds-chart-pink-deep: #c83279;
    --ds-shadow-base: #000000;
}

html,
body.sp-design-system {
    min-height: 100%;
    color: var(--ds-text-primary);
    background: var(--ds-background);
    font-family: var(--sp-font-family);
}

body.sp-design-system {
    accent-color: var(--ds-primary);
}

body.sp-design-system ::selection {
    color: var(--ds-text-on-accent);
    background: var(--ds-selected-strong);
}

body.sp-design-system :where(h1, h2, h3, h4, h5, h6, label, legend, th) {
    color: var(--ds-text-primary);
}

body.sp-design-system :where(strong) {
    color: inherit;
}

body.sp-design-system :where(.text-muted, .text-secondary) {
    color: var(--ds-text-secondary) !important;
}

body.sp-design-system :where(a) {
    color: var(--ds-primary);
    text-underline-offset: 0.2em;
    transition: color var(--ds-transition);
}

body.sp-design-system :where(a:hover) {
    color: var(--ds-primary-hover);
}

body.sp-design-system.sp-design-system.sp-design-system :where(:focus-visible) {
    outline: 0.15rem solid var(--ds-focus);
    outline-offset: 0.15rem;
}

/* Application shells */
body.sp-design-system.sp-design-system.sp-design-system :where(
    .site-shell,
    .home-shell,
    .principal-shell,
    .teacher-shell,
    .principal-surface,
    .teacher-surface,
    .site-main,
    .home-main,
    .principal-content,
    .teacher-content,
    .page-section
) {
    color: var(--ds-text-primary);
    background-color: var(--ds-background);
}

/* Keep school page names on the same responsive type scale as the school name. */
body.sp-design-system.sp-design-system.sp-design-system :where(
    .principal-content,
    .teacher-content
) h1 {
    font-size: clamp(1.15rem, 1.7vw, 1.45rem);
}

@media (max-width: 1199.98px) {
    body.sp-design-system.sp-design-system.sp-design-system :where(
        .principal-content,
        .teacher-content
    ) h1 {
        font-size: 1.08rem;
    }
}

@media (max-width: 767.98px) {
    body.sp-design-system.sp-design-system.sp-design-system :where(
        .principal-content,
        .teacher-content
    ) h1 {
        font-size: 1rem;
    }
}

@media (max-width: 575.98px) {
    body.sp-design-system.sp-design-system.sp-design-system :where(
        .principal-content,
        .teacher-content
    ) h1 {
        font-size: .9rem;
    }
}

body.sp-design-system.sp-design-system.sp-design-system :where(
    .site-header,
    .home-header,
    .principal-topbar,
    .teacher-topbar
) {
    color: var(--topbar-shell-color, var(--ds-text-primary));
    background: var(--topbar-shell-background, var(--ds-surface-translucent));
    border-color: var(--topbar-shell-border, var(--ds-border));
    box-shadow: var(--topbar-shell-shadow, var(--ds-shadow-sm));
    backdrop-filter: var(--topbar-shell-filter, blur(14px));
}

/* A backdrop filter creates a containing block for fixed descendants. Disable it
   only while the owner dialog is open so the modal is positioned against the viewport. */
body.sp-design-system.sp-design-system.sp-design-system .site-header:has(.owner-account-modal) {
    backdrop-filter: none;
}

/* The owner dialogs also render inside the school top bar. Its blur creates a
   containing block for fixed descendants, while the sidebar has a higher
   stacking level. Remove that containing block and lift the whole top bar only
   while a dialog is open so its modal and backdrop cover the full viewport. */
body.sp-design-system.sp-design-system.sp-design-system .principal-topbar:has(.owner-account-modal) {
    z-index: 1200;
    backdrop-filter: none;
}

body.sp-design-system:has(.owner-account-modal) {
    overflow: hidden;
}

body.sp-design-system.sp-design-system.sp-design-system :where(
    .site-footer,
    .home-footer
) {
    color: var(--ds-text-secondary);
    background: var(--ds-background-subtle);
    border-color: var(--ds-border);
}

/* Sidebars and navigation */
.navigation-loading-overlay {
    --loading-accent: var(--ds-primary);
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: grid;
    padding: 1rem;
    visibility: hidden;
    opacity: 0;
    color: var(--ds-text-primary);
    background: color-mix(in srgb, var(--ds-background) 78%, transparent);
    backdrop-filter: blur(4px);
    pointer-events: none;
    place-items: center;
    transition: opacity 140ms ease, visibility 140ms ease;
}

.navigation-loading-overlay.is-visible {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.navigation-loading-card {
    display: grid;
    width: min(18rem, calc(100vw - 2rem));
    padding: 1.25rem 1.35rem;
    background: linear-gradient(145deg, var(--ds-window-surface-raised), var(--ds-window-surface));
    border: 1px solid var(--ds-window-border);
    border-radius: 1rem;
    box-shadow: 0 18px 46px color-mix(in srgb, var(--ds-shadow-base) 28%, transparent),
        inset 0 1px color-mix(in srgb, var(--ds-text-on-accent) 3%, transparent);
    justify-items: center;
    gap: 0.72rem;
}

.navigation-loading-spinner {
    width: 2rem;
    height: 2rem;
    border: 0.2rem solid var(--ds-window-border);
    border-top-color: var(--loading-accent);
    border-radius: 50%;
    animation: navigation-loading-spin 0.75s linear infinite;
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--loading-accent) 22%, transparent));
}

.navigation-loading-text {
    color: var(--ds-text-primary);
    font-size: 0.95rem;
    font-weight: 700;
    text-align: center;
}

.navigation-loading-bar {
    width: 100%;
    height: 0.3rem;
    overflow: hidden;
    background: var(--ds-surface-raised);
    border: 1px solid var(--ds-window-border);
    border-radius: 999px;
}

.navigation-loading-bar > span {
    display: block;
    width: 42%;
    height: 100%;
    background: var(--loading-accent);
    border-radius: inherit;
    animation: navigation-loading-progress 1.1s ease-in-out infinite;
    box-shadow: 0 0 7px color-mix(in srgb, var(--loading-accent) 28%, transparent);
}

.navigation-loading-status {
    display: grid;
    min-height: 3.15rem;
    padding: 0.55rem 0.7rem;
    color: var(--ds-window-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--ds-radius-md);
    align-content: center;
    justify-items: center;
    gap: 0.15rem;
    text-align: center;
    transition:
        color var(--ds-transition),
        background-color var(--ds-transition),
        border-color var(--ds-transition);
}

.navigation-loading-status > span,
.navigation-loading-status > small {
    display: block;
}

.navigation-loading-status > span {
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.45;
}

.navigation-loading-status > small {
    font-size: 0.7rem;
    line-height: 1.4;
}

.navigation-loading-overlay[data-loading-state="slow"] {
    --loading-accent: var(--ds-warning);
}

.navigation-loading-overlay[data-loading-state="slow"] .navigation-loading-status {
    color: var(--ds-warning);
    background: color-mix(in srgb, var(--ds-warning) 8%, transparent);
    border-color: color-mix(in srgb, var(--ds-warning) 30%, transparent);
}

.navigation-loading-overlay[data-loading-state="offline"],
.navigation-loading-overlay[data-loading-state="connection-problem"] {
    --loading-accent: var(--ds-danger);
}

.navigation-loading-overlay[data-loading-state="offline"] .navigation-loading-status,
.navigation-loading-overlay[data-loading-state="connection-problem"] .navigation-loading-status {
    color: var(--ds-danger);
    background: color-mix(in srgb, var(--ds-danger) 8%, transparent);
    border-color: color-mix(in srgb, var(--ds-danger) 30%, transparent);
}

.navigation-loading-overlay[data-loading-state="restored"] {
    --loading-accent: var(--ds-success);
}

.navigation-loading-overlay[data-loading-state="restored"] .navigation-loading-status {
    color: var(--ds-success);
    background: color-mix(in srgb, var(--ds-success) 8%, transparent);
    border-color: color-mix(in srgb, var(--ds-success) 30%, transparent);
}

.navigation-loading-overlay[data-loading-state="offline"] .navigation-loading-bar > span {
    animation-play-state: paused;
}

.navigation-loading-overlay[data-operation-kind="read"][data-loading-state="connection-problem"]
    .navigation-loading-spinner,
.navigation-loading-overlay[data-operation-kind="read"][data-loading-state="connection-problem"]
    .navigation-loading-bar > span {
    animation-play-state: paused;
}

@keyframes navigation-loading-spin {
    to { transform: rotate(360deg); }
}

@keyframes navigation-loading-progress {
    from { transform: translateX(150%); }
    to { transform: translateX(-240%); }
}

html[data-navigation-busy="true"],
html[data-navigation-busy="true"] body {
    overflow: hidden;
}

body.sp-design-system.sp-design-system.sp-design-system :where(
    .principal-sidebar,
    .teacher-sidebar
) {
    color: var(--sidebar-shell-color, var(--ds-text-secondary));
    background: var(--sidebar-shell-background, linear-gradient(180deg, var(--ds-sidebar), var(--ds-sidebar-raised)));
    border-color: var(--sidebar-shell-border, var(--ds-border));
    box-shadow: var(--sidebar-shell-shadow, var(--ds-shadow-md));
}

body.sp-design-system.sp-design-system.sp-design-system :where(
    .principal-nav-link,
    .principal-logout,
    .teacher-nav-link,
    .teacher-logout
) {
    color: var(--sidebar-link-color, var(--ds-text-secondary));
    background: var(--sidebar-link-background, transparent);
    border-color: var(--sidebar-link-border, transparent);
    border-radius: var(--sidebar-link-radius, var(--ds-radius-md));
    transition: color var(--ds-transition), background-color var(--ds-transition), border-color var(--ds-transition);
}

body.sp-design-system.sp-design-system.sp-design-system :where(
    .principal-nav-link:hover,
    .principal-logout:hover,
    .teacher-nav-link:hover,
    .teacher-logout:hover
) {
    color: var(--sidebar-link-hover-color, var(--ds-text-primary));
    background: var(--sidebar-link-hover-background, var(--ds-hover));
}

[data-sidebar-navigation][data-navigation-busy="true"] :where(a, button) {
    pointer-events: none;
}

[data-sidebar-navigation][data-navigation-busy="true"] a:not([data-navigation-target="true"]) {
    opacity: 0.55;
}

[data-sidebar-navigation][data-navigation-busy="true"] [data-navigation-target="true"] {
    color: var(--ds-text-primary);
    background: var(--ds-hover);
}

@media (prefers-reduced-motion: reduce) {
    .navigation-loading-overlay {
        transition: none;
    }

    .navigation-loading-spinner,
    .navigation-loading-bar > span {
        animation: none;
    }

    .navigation-loading-spinner {
        border-top-color: var(--ds-window-border);
        background: var(--loading-accent);
    }

    .navigation-loading-bar > span {
        width: 65%;
        margin-inline: auto;
    }
}

@media (max-width: 420px) {
    .navigation-loading-card {
        padding: 1.05rem;
    }

    .navigation-loading-status {
        min-height: 3.5rem;
    }
}

body.sp-design-system.sp-design-system.sp-design-system :where(
    .principal-nav-link.active,
    .teacher-nav-link.active,
    .principal-nav-link[aria-current="page"],
    .teacher-nav-link[aria-current="page"]
) {
    color: var(--ds-text-on-accent);
    background: var(--ds-selected);
    border-inline-start: 0.2rem solid var(--ds-primary);
    box-shadow: none;
}

body.sp-design-system.sp-design-system.sp-design-system :where(
    .school-brand,
    .teacher-brand,
    .brand,
    .home-brand,
    .school-brand-copy strong,
    .teacher-brand-copy strong,
    .school-context strong,
    .teacher-context strong,
    .principal-copy strong,
    .teacher-account-copy strong
) {
    color: var(--ds-text-primary);
}

body.sp-design-system.sp-design-system.sp-design-system :where(
    .school-brand-copy small,
    .teacher-brand-copy small,
    .school-context-label,
    .principal-copy small,
    .teacher-account-copy small
) {
    color: var(--ds-text-secondary);
}

body.sp-design-system.sp-design-system.sp-design-system :where(
    .school-brand-mark,
    .teacher-brand-mark,
    .brand-mark,
    .home-brand-mark,
    .avatar,
    .teacher-avatar
) {
    color: var(--ds-text-on-accent);
    background: var(--ds-primary-solid);
    border-color: var(--ds-border-strong);
}

/* Shared surfaces: cards, panels, dialogs, lists */
body.sp-design-system.sp-design-system.sp-design-system :where(
    .card,
    .card-header,
    .card-body,
    .card-footer,
    .form-card,
    .school-card,
    .empty-state,
    .list-group-item,
    .accordion-item,
    .accordion-button,
    .offcanvas,
    .toast,
    .popover,
    .dropdown-menu,
    .confirmation-dialog
) {
    color: var(--ds-text-primary);
    background-color: var(--ds-surface);
    border-color: var(--ds-border);
}

body.sp-design-system.sp-design-system.sp-design-system :where(
    .card,
    .form-card,
    .school-card,
    .empty-state
) {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-sm);
}

body.sp-design-system.sp-design-system.sp-design-system :where(
    .card-header,
    .card-footer,
    .modal-header,
    .modal-footer,
    .offcanvas-header
) {
    background: var(--ds-surface-raised);
    border-color: var(--ds-border);
}

body.sp-design-system.sp-design-system.sp-design-system :where(
    .bg-white,
    .bg-light,
    .table-light,
    .list-group-item-light
) {
    color: var(--ds-text-primary) !important;
    background-color: var(--ds-surface-raised) !important;
}

body.sp-design-system.sp-design-system.sp-design-system :where(
    .text-dark,
    .text-body,
    .text-body-emphasis
) {
    color: var(--ds-text-primary) !important;
}

body.sp-design-system.sp-design-system.sp-design-system :where(
    .border,
    .border-top,
    .border-bottom,
    .border-start,
    .border-end
) {
    border-color: var(--ds-border) !important;
}

/* Buttons */
body.sp-design-system :where(.btn) {
    min-height: 2.35rem;
    border-radius: var(--ds-radius-md);
    font-weight: 700;
    box-shadow: none;
    transition: color var(--ds-transition), background-color var(--ds-transition), border-color var(--ds-transition), transform var(--ds-transition);
}

body.sp-design-system :where(.btn:hover:not(:disabled)) {
    transform: translateY(-1px);
}

body.sp-design-system :where(.btn-primary) {
    --bs-btn-color: var(--ds-action-text);
    --bs-btn-bg: var(--ds-action-bg);
    --bs-btn-border-color: var(--ds-action-border);
    --bs-btn-hover-color: var(--ds-action-text-hover);
    --bs-btn-hover-bg: var(--ds-action-hover);
    --bs-btn-hover-border-color: var(--ds-action-border-hover);
    --bs-btn-active-color: var(--ds-action-text-hover);
    --bs-btn-active-bg: var(--ds-action-active);
    --bs-btn-active-border-color: var(--ds-action-border);
    --bs-btn-disabled-color: var(--ds-text-disabled);
    --bs-btn-disabled-bg: var(--ds-disabled);
    --bs-btn-disabled-border-color: var(--ds-border);
    box-shadow: none;
}

body.sp-design-system :where(.btn-secondary) {
    --bs-btn-color: var(--ds-text-primary);
    --bs-btn-bg: var(--ds-panel);
    --bs-btn-border-color: var(--ds-border-strong);
    --bs-btn-hover-color: var(--ds-text-primary);
    --bs-btn-hover-bg: var(--ds-hover);
    --bs-btn-hover-border-color: var(--ds-primary);
    --bs-btn-active-color: var(--ds-text-primary);
    --bs-btn-active-bg: var(--ds-selected);
    --bs-btn-active-border-color: var(--ds-primary);
}

body.sp-design-system :where(.btn-light) {
    --bs-btn-color: var(--ds-text-primary);
    --bs-btn-bg: var(--ds-surface-raised);
    --bs-btn-border-color: var(--ds-border-strong);
    --bs-btn-hover-color: var(--ds-text-primary);
    --bs-btn-hover-bg: var(--ds-hover);
    --bs-btn-hover-border-color: var(--ds-primary);
    --bs-btn-active-color: var(--ds-text-primary);
    --bs-btn-active-bg: var(--ds-selected);
    --bs-btn-active-border-color: var(--ds-primary);
}

body.sp-design-system :where(.btn-link) {
    --bs-btn-color: var(--ds-primary-hover);
    --bs-btn-hover-color: var(--ds-primary);
    --bs-btn-active-color: var(--ds-primary-active);
}

body.sp-design-system :where(.btn-success) {
    --bs-btn-color: var(--ds-text-on-accent);
    --bs-btn-bg: var(--ds-success-action);
    --bs-btn-border-color: var(--ds-success-action);
    --bs-btn-hover-color: var(--ds-text-on-accent);
    --bs-btn-hover-bg: var(--ds-success-action-hover);
    --bs-btn-hover-border-color: var(--ds-success-action-hover);
    --bs-btn-active-color: var(--ds-text-on-accent);
    --bs-btn-active-bg: var(--ds-success-action);
    --bs-btn-active-border-color: var(--ds-success-action);
}

body.sp-design-system :where(.btn-danger) {
    --bs-btn-color: var(--ds-text-on-accent);
    --bs-btn-bg: var(--ds-danger-action);
    --bs-btn-border-color: var(--ds-danger-action);
    --bs-btn-hover-color: var(--ds-text-on-accent);
    --bs-btn-hover-bg: var(--ds-danger-action-hover);
    --bs-btn-hover-border-color: var(--ds-danger-action-hover);
    --bs-btn-active-color: var(--ds-text-on-accent);
    --bs-btn-active-bg: var(--ds-danger-action);
    --bs-btn-active-border-color: var(--ds-danger-action);
}

body.sp-design-system :where(.btn-warning) {
    --bs-btn-color: var(--ds-text-on-warning);
    --bs-btn-bg: var(--ds-warning);
    --bs-btn-border-color: var(--ds-warning);
    --bs-btn-hover-color: var(--ds-text-on-warning);
    --bs-btn-hover-bg: var(--ds-warning-strong);
    --bs-btn-hover-border-color: var(--ds-warning-strong);
    --bs-btn-active-color: var(--ds-text-on-warning);
    --bs-btn-active-bg: var(--ds-warning);
    --bs-btn-active-border-color: var(--ds-warning);
}

body.sp-design-system :where(.btn-info) {
    --bs-btn-color: var(--ds-text-on-info);
    --bs-btn-bg: var(--ds-info);
    --bs-btn-border-color: var(--ds-info);
    --bs-btn-hover-color: var(--ds-text-on-info);
    --bs-btn-hover-bg: var(--ds-info-strong);
    --bs-btn-hover-border-color: var(--ds-info-strong);
    --bs-btn-active-color: var(--ds-text-on-info);
    --bs-btn-active-bg: var(--ds-info);
    --bs-btn-active-border-color: var(--ds-info);
}

body.sp-design-system.sp-design-system.sp-design-system :where(.btn-warning.text-dark) {
    color: var(--ds-text-on-warning) !important;
}

body.sp-design-system.sp-design-system.sp-design-system :where(.btn-info.text-dark) {
    color: var(--ds-text-on-info) !important;
}

body.sp-design-system :where(
    .btn-outline-secondary,
    .btn-outline-dark
) {
    --bs-btn-color: var(--ds-text-secondary);
    --bs-btn-border-color: var(--ds-border-strong);
    --bs-btn-hover-color: var(--ds-text-primary);
    --bs-btn-hover-bg: var(--ds-hover);
    --bs-btn-hover-border-color: var(--ds-border-strong);
    --bs-btn-active-color: var(--ds-text-primary);
    --bs-btn-active-bg: var(--ds-selected);
    --bs-btn-active-border-color: var(--ds-border-strong);
}

body.sp-design-system :where(.btn-outline-primary) {
    --bs-btn-color: var(--ds-action-outline-text);
    --bs-btn-border-color: var(--ds-action-border);
    --bs-btn-hover-color: var(--ds-action-text);
    --bs-btn-hover-bg: var(--ds-action-bg);
    --bs-btn-hover-border-color: var(--ds-action-border-hover);
    --bs-btn-active-color: var(--ds-action-text-hover);
    --bs-btn-active-bg: var(--ds-action-active);
    --bs-btn-active-border-color: var(--ds-action-border);
    box-shadow: none;
}

body.sp-design-system.sp-design-system.sp-design-system :where(
    .btn-primary,
    .btn-outline-primary
):focus-visible {
    outline: 1px solid var(--ds-action-focus);
    outline-offset: 1px;
    box-shadow: none;
}

body.sp-design-system :where(.btn-outline-success) {
    --bs-btn-color: var(--ds-success-strong);
    --bs-btn-border-color: var(--ds-success);
    --bs-btn-hover-color: var(--ds-success-strong);
    --bs-btn-hover-bg: var(--ds-success-soft);
    --bs-btn-hover-border-color: var(--ds-success-strong);
    --bs-btn-active-color: var(--ds-success-strong);
    --bs-btn-active-bg: var(--ds-success-soft);
    --bs-btn-active-border-color: var(--ds-success-strong);
}

body.sp-design-system :where(.btn-outline-warning) {
    --bs-btn-color: var(--ds-warning-strong);
    --bs-btn-border-color: var(--ds-warning);
    --bs-btn-hover-color: var(--ds-warning-strong);
    --bs-btn-hover-bg: var(--ds-warning-soft);
    --bs-btn-hover-border-color: var(--ds-warning-strong);
    --bs-btn-active-color: var(--ds-warning-strong);
    --bs-btn-active-bg: var(--ds-warning-soft);
    --bs-btn-active-border-color: var(--ds-warning-strong);
}

body.sp-design-system.sp-design-system.sp-design-system :where(.btn-outline-warning.text-dark) {
    color: var(--ds-warning-strong) !important;
}

body.sp-design-system :where(.btn-outline-danger) {
    --bs-btn-color: var(--ds-danger-strong);
    --bs-btn-border-color: var(--ds-danger);
    --bs-btn-hover-color: var(--ds-danger-strong);
    --bs-btn-hover-bg: var(--ds-danger-soft);
    --bs-btn-hover-border-color: var(--ds-danger-strong);
    --bs-btn-active-color: var(--ds-danger-strong);
    --bs-btn-active-bg: var(--ds-danger-soft);
    --bs-btn-active-border-color: var(--ds-danger-strong);
}

body.sp-design-system :where(.btn-outline-info) {
    --bs-btn-color: var(--ds-info-strong);
    --bs-btn-border-color: var(--ds-info);
    --bs-btn-hover-color: var(--ds-info-strong);
    --bs-btn-hover-bg: var(--ds-info-soft);
    --bs-btn-hover-border-color: var(--ds-info-strong);
    --bs-btn-active-color: var(--ds-info-strong);
    --bs-btn-active-bg: var(--ds-info-soft);
    --bs-btn-active-border-color: var(--ds-info-strong);
}

body.sp-design-system :where(button, .btn, input, select, textarea):disabled {
    color: var(--ds-text-disabled) !important;
    background-color: var(--ds-disabled) !important;
    border-color: var(--ds-border) !important;
    box-shadow: none !important;
    opacity: 0.78;
    cursor: not-allowed;
    transform: none;
}

/* Forms */
body.sp-design-system.sp-design-system.sp-design-system :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    select,
    textarea,
    .form-control,
    .form-select,
    .input-group-text
) {
    color: var(--ds-text-primary);
    background-color: var(--ds-input);
    border-color: var(--ds-control-border);
    border-radius: var(--ds-radius-md);
}

body.sp-design-system.sp-design-system.sp-design-system :where(input, textarea)::placeholder {
    color: var(--ds-text-tertiary);
    opacity: 1;
}

body.sp-design-system.sp-design-system.sp-design-system :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    select,
    textarea,
    .form-control,
    .form-select
):focus {
    color: var(--ds-text-primary);
    background-color: var(--ds-input);
    border-color: var(--ds-focus);
    box-shadow: 0 0 0 0.2rem var(--ds-focus-ring);
}

body.sp-design-system.sp-design-system.sp-design-system :where(.form-check-input) {
    background-color: var(--ds-input);
    border-color: var(--ds-control-border);
}

body.sp-design-system.sp-design-system.sp-design-system :where(.form-check-input:checked) {
    background-color: var(--ds-primary-solid);
    border-color: var(--ds-primary);
}

body.sp-design-system.sp-design-system.sp-design-system :where(.form-control.is-invalid, .form-select.is-invalid, .invalid) {
    border-color: var(--ds-danger);
    box-shadow: 0 0 0 0.18rem var(--ds-danger-ring);
}

body.sp-design-system.sp-design-system.sp-design-system :where(.form-control.is-valid, .form-select.is-valid, .valid.modified:not([type="checkbox"])) {
    border-color: var(--ds-success);
}

body.sp-design-system :where(.validation-message, .invalid-feedback) {
    color: var(--ds-danger-strong);
}

/* Tables */
body.sp-design-system :where(.table) {
    --bs-table-color: var(--ds-text-primary);
    --bs-table-bg: var(--ds-surface);
    --bs-table-border-color: var(--ds-border);
    --bs-table-striped-color: var(--ds-text-primary);
    --bs-table-striped-bg: var(--ds-surface-raised);
    --bs-table-hover-color: var(--ds-text-primary);
    --bs-table-hover-bg: var(--ds-hover);
    --bs-table-active-color: var(--ds-text-primary);
    --bs-table-active-bg: var(--ds-selected);
    color: var(--ds-text-primary);
    border-color: var(--ds-border);
}

body.sp-design-system :where(.table > :not(caption) > * > *) {
    color: inherit;
    background-color: transparent;
    border-color: var(--ds-border);
}

body.sp-design-system :where(.table thead, .table-light) {
    --bs-table-color: var(--ds-text-secondary);
    --bs-table-bg: var(--ds-surface-raised);
    color: var(--ds-text-secondary);
    background: var(--ds-surface-raised);
}

body.sp-design-system :where(.table-success) {
    --bs-table-color: var(--ds-success-strong);
    --bs-table-bg: var(--ds-success-soft);
    --bs-table-border-color: var(--ds-success-border);
}

body.sp-design-system :where(.table-warning) {
    --bs-table-color: var(--ds-warning-strong);
    --bs-table-bg: var(--ds-warning-soft);
    --bs-table-border-color: var(--ds-warning-border);
}

body.sp-design-system :where(.table-danger) {
    --bs-table-color: var(--ds-danger-strong);
    --bs-table-bg: var(--ds-danger-soft);
    --bs-table-border-color: var(--ds-danger-border);
}

/* Modals, dialogs, menus */
body.sp-design-system :where(.modal) {
    --bs-modal-color: var(--ds-window-text);
    --bs-modal-bg: var(--ds-window-surface);
    --bs-modal-border-color: var(--ds-window-border);
    --bs-modal-header-border-color: var(--ds-window-border);
    --bs-modal-footer-border-color: var(--ds-window-border);
}

body.sp-design-system.sp-design-system.sp-design-system :where(
    .modal-content,
    dialog,
    .confirmation-dialog,
    .teacher-subjects-dialog,
    .student-search-dialog,
    [class*="picker-modal"],
    [class*="dialog-card"],
    .dropdown-menu,
    .offcanvas
) {
    --ds-text-primary: var(--ds-window-text);
    --ds-text-secondary: var(--ds-window-muted);
    --bs-body-color: var(--ds-window-text);
    color: var(--ds-window-text);
    background: var(--ds-window-surface);
    background-image: linear-gradient(145deg, var(--ds-window-surface-raised), var(--ds-window-surface));
    border: 1px solid var(--ds-window-border);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-lg);
}

body.sp-design-system.sp-design-system.sp-design-system :where(
    .modal-header,
    .modal-footer,
    .sp-admin-modal-header,
    .sp-admin-modal-footer,
    [class*="picker-header"],
    [class*="dialog-header"]
) {
    color: var(--ds-window-text);
    background: var(--ds-window-surface-raised);
    border-color: var(--ds-window-border);
}

body.sp-design-system.sp-design-system.sp-design-system :where(
    .modal-content,
    dialog,
    .confirmation-dialog,
    .teacher-subjects-dialog,
    .student-search-dialog,
    [class*="picker-modal"],
    [class*="dialog-card"]
) :where(p, small, .form-text, .records-muted) {
    color: var(--ds-window-muted);
}

body.sp-design-system :where(.modal-backdrop) {
    background: var(--ds-window-overlay);
}

body.sp-design-system dialog::backdrop {
    background: var(--ds-window-overlay);
}

body.sp-design-system :where(.sp-modal-overlay) {
    background: var(--ds-window-overlay);
}

/* Opt-in administrative modal layout: fixed chrome with one scrollable body. */
body.sp-design-system :where(.sp-admin-modal-shell) {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow: hidden;
}

body.sp-design-system :where(.sp-admin-modal-header, .sp-admin-modal-footer) {
    flex: 0 0 auto;
}

body.sp-design-system :where(.sp-admin-modal-form) {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

body.sp-design-system :where(.sp-admin-modal-body) {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

body.sp-design-system :where(.sp-admin-modal-footer) {
    padding-top: 1rem;
    margin-top: 0;
    border-top: 1px solid var(--ds-border);
    background: var(--ds-surface);
}

@media (max-width: 575.98px), (max-height: 575.98px) {
    body.sp-design-system :where(.sp-admin-modal-shell) {
        max-height: calc(100vh - 1rem);
        max-height: calc(100dvh - 1rem);
    }
}

body.sp-design-system :where(.dropdown-item) {
    color: var(--ds-text-secondary);
    border-radius: var(--ds-radius-sm);
}

body.sp-design-system :where(.dropdown-item:hover, .dropdown-item:focus, .dropdown-item.active) {
    color: var(--ds-text-primary);
    background: var(--ds-hover);
}

body.sp-design-system :where(.btn-close) {
    filter: invert(1) grayscale(100%) brightness(170%);
}

/* One sizing contract for owner, school-user, and platform-administrator sign-in. */
body.sp-design-system .identity-login-page--standard {
    min-height: 0;
    font-size: 1rem;
}

body.sp-design-system .identity-login-page--standard .identity-login-container {
    padding-block: 1rem;
}

body.sp-design-system .identity-login-page--standard .identity-login-panel {
    width: min(100%, 34rem);
    min-height: 34rem;
}

body.sp-design-system .identity-login-page--standard .identity-login-heading,
body.sp-design-system .identity-login-page--standard .identity-login-content {
    padding: 1rem 1.25rem;
}

body.sp-design-system .identity-login-page--standard .identity-login-logo {
    width: 3.5rem;
    height: 3.5rem;
    flex-shrink: 0;
}

body.sp-design-system .identity-login-page--standard .identity-login-heading h1 {
    font-size: 1rem;
}

body.sp-design-system .identity-login-page--standard .identity-login-brand strong {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

body.sp-design-system .identity-login-page--standard .identity-login-brand span {
    font-size: .875rem;
}

body.sp-design-system .identity-login-page--standard :is(.form-label, .form-control, .form-select, .btn) {
    font-size: 1rem;
}

@media (max-height: 700px) {
    body.sp-design-system .identity-login-page--standard .identity-login-container {
        padding-block: .5rem;
    }

    body.sp-design-system .identity-login-page--standard .identity-login-panel {
        min-height: 32.5rem;
    }

    body.sp-design-system .identity-login-page--standard .identity-login-heading,
    body.sp-design-system .identity-login-page--standard .identity-login-content {
        padding-block: .75rem;
    }
}

/* Shared dimensions for the public home/login header actions. */
body.sp-design-system .header-navigation-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 9rem;
    min-height: 2.8rem;
    padding: .5rem 1rem;
    border-radius: .8rem;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    body.sp-design-system .header-navigation-action {
        width: 8rem;
        min-height: 2.75rem;
        padding-inline: .75rem;
        font-size: .9rem;
    }
}

/* Alerts and badges */
body.sp-design-system :where(.alert) {
    border-radius: var(--ds-radius-md);
    border-width: 1px;
}

body.sp-design-system :where(.alert-success, .bg-success-subtle) {
    color: var(--ds-success-strong) !important;
    background: var(--ds-success-soft) !important;
    border-color: var(--ds-success-border) !important;
}

body.sp-design-system :where(.alert-danger, .bg-danger-subtle) {
    color: var(--ds-danger-strong) !important;
    background: var(--ds-danger-soft) !important;
    border-color: var(--ds-danger-border) !important;
}

body.sp-design-system :where(.alert-warning, .bg-warning-subtle) {
    color: var(--ds-warning-strong) !important;
    background: var(--ds-warning-soft) !important;
    border-color: var(--ds-warning-border) !important;
}

body.sp-design-system :where(.system-toast) {
    padding: 1rem 1.125rem;
    border: 1px solid transparent;
    border-radius: var(--ds-radius-md);
    line-height: 1.65;
}

body.sp-design-system :where(.system-toast-warning) {
    color: var(--ds-warning-strong);
    background: var(--ds-warning-soft);
    border-color: var(--ds-warning-border);
}

body.sp-design-system :where(.alert-info, .bg-info-subtle) {
    color: var(--ds-info-strong) !important;
    background: var(--ds-info-soft) !important;
    border-color: var(--ds-info-border) !important;
}

body.sp-design-system :where(.system-alert-managed) {
    position: fixed !important;
    inset-block-start: var(--system-alert-offset, 1rem);
    inset-inline: 0;
    z-index: 1090;
    width: min(28rem, calc(100vw - 2rem));
    margin-inline: auto !important;
    margin-block: 0 !important;
    padding-inline-end: 3rem;
    opacity: 1;
    box-shadow: var(--ds-shadow-lg);
    animation: system-alert-enter 220ms ease-out both;
    transition: inset-block-start 180ms ease, opacity 180ms ease, transform 180ms ease;
}

body.sp-design-system.sp-design-system :where(.system-alert-managed > .btn-close) {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 1rem;
    transform: translateY(-50%);
}

body.sp-design-system :where(.system-alert-hiding) {
    opacity: 0;
    transform: translateY(-0.65rem) scale(0.98);
    pointer-events: none;
}

/* Static SSR success notice: compact, RTL-safe, and independent of Bootstrap display utilities. */
body.sp-design-system .registration-page > .registration-success-toast {
    width: fit-content;
    max-width: min(28rem, calc(100vw - 2rem));
    padding-inline-end: 3rem;
    overflow-wrap: anywhere;
}

body.sp-design-system .registration-success-toast[hidden] {
    display: none !important;
}

@keyframes system-alert-enter {
    from {
        opacity: 0;
        transform: translateY(-0.75rem) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.sp-design-system :where(.system-alert-managed) {
        animation: none;
        transition: none;
    }
}

body.sp-design-system :where(.badge) {
    border-radius: var(--ds-radius-pill);
    font-weight: 700;
}

body.sp-design-system.sp-design-system.sp-design-system :where(.bg-secondary, .text-bg-secondary) {
    color: var(--ds-text-primary) !important;
    background-color: var(--ds-panel) !important;
}

body.sp-design-system.sp-design-system.sp-design-system :where(.bg-primary, .text-bg-primary) {
    color: var(--ds-text-on-accent) !important;
    background-color: var(--ds-primary-solid) !important;
}

body.sp-design-system.sp-design-system.sp-design-system :where(.bg-success, .text-bg-success) {
    color: var(--ds-text-on-accent) !important;
    background-color: var(--ds-success-action) !important;
}

body.sp-design-system.sp-design-system.sp-design-system :where(.bg-danger, .text-bg-danger) {
    color: var(--ds-text-on-accent) !important;
    background-color: var(--ds-danger-action) !important;
}

body.sp-design-system.sp-design-system.sp-design-system :where(.bg-warning, .text-bg-warning) {
    color: var(--ds-text-on-warning) !important;
    background-color: var(--ds-warning) !important;
}

body.sp-design-system.sp-design-system.sp-design-system :where(.bg-info, .text-bg-info) {
    color: var(--ds-text-on-info) !important;
    background-color: var(--ds-info) !important;
}

body.sp-design-system.sp-design-system.sp-design-system :where(.bg-dark, .text-bg-dark) {
    color: var(--ds-text-primary) !important;
    background-color: var(--ds-sidebar) !important;
}

body.sp-design-system.sp-design-system.sp-design-system :where(.bg-dark.bg-opacity-50) {
    background-color: var(--ds-overlay) !important;
}

body.sp-design-system :where(.text-primary) {
    color: var(--ds-primary-hover) !important;
}

body.sp-design-system :where(.text-success) {
    color: var(--ds-success-strong) !important;
}

body.sp-design-system :where(.text-danger) {
    color: var(--ds-danger-strong) !important;
}

body.sp-design-system :where(.text-warning) {
    color: var(--ds-warning-strong) !important;
}

body.sp-design-system :where(.text-info) {
    color: var(--ds-info-strong) !important;
}

body.sp-design-system :where(.text-primary-emphasis) {
    color: var(--ds-primary-hover) !important;
}

body.sp-design-system :where(.text-secondary-emphasis) {
    color: var(--ds-text-secondary) !important;
}

body.sp-design-system :where(.text-success-emphasis) {
    color: var(--ds-success-strong) !important;
}

body.sp-design-system :where(.text-warning-emphasis) {
    color: var(--ds-warning-strong) !important;
}

body.sp-design-system :where(.text-danger-emphasis) {
    color: var(--ds-danger-strong) !important;
}

body.sp-design-system :where(.text-info-emphasis) {
    color: var(--ds-info-strong) !important;
}

body.sp-design-system.sp-design-system.sp-design-system :where(.border-primary) {
    border-color: var(--ds-primary) !important;
}

body.sp-design-system.sp-design-system.sp-design-system :where(.border-success) {
    border-color: var(--ds-success-border) !important;
}

body.sp-design-system.sp-design-system.sp-design-system :where(.border-danger) {
    border-color: var(--ds-danger-border) !important;
}

body.sp-design-system.sp-design-system.sp-design-system :where(.border-warning) {
    border-color: var(--ds-warning-border) !important;
}

body.sp-design-system.sp-design-system.sp-design-system :where(.border-info) {
    border-color: var(--ds-info-border) !important;
}

/* Breadcrumbs, pagination, tabs */
body.sp-design-system.sp-design-system.sp-design-system :where(
    .breadcrumb,
    .settings-breadcrumb,
    .final-results-breadcrumb,
    .student-result-breadcrumb
) {
    color: var(--ds-text-secondary);
}

body.sp-design-system.sp-design-system.sp-design-system .records-card.records-confirmation {
    background: var(--ds-danger-soft);
    border-color: var(--ds-danger-border);
}

body.sp-design-system.sp-design-system.sp-design-system .records-card.records-confirmation.warning {
    background: var(--ds-warning-soft);
    border-color: var(--ds-warning-border);
}

body.sp-design-system :where(.page-link, .nav-tabs .nav-link) {
    color: var(--ds-text-secondary);
    background: var(--ds-surface);
    border-color: var(--ds-border);
}

body.sp-design-system :where(.page-link:hover, .nav-tabs .nav-link:hover) {
    color: var(--ds-text-primary);
    background: var(--ds-hover);
    border-color: var(--ds-border-strong);
}

body.sp-design-system :where(.page-item.active .page-link, .nav-tabs .nav-link.active) {
    color: var(--ds-text-on-accent);
    background: var(--ds-selected);
    border-color: var(--ds-primary);
}

/* School settings tree */
body.sp-design-system .principal-settings-page {
    --tree-surface: var(--ds-sidebar);
    --tree-surface-raised: var(--ds-sidebar-raised);
    --tree-border: var(--ds-border);
    --tree-divider: var(--ds-border);
    --tree-text: var(--ds-text-primary);
    --tree-muted: var(--ds-text-secondary);
    --tree-hover: var(--ds-hover);
    --tree-focus: var(--ds-focus);
    --tree-grade: var(--ds-accent);
    --tree-grade-soft: var(--ds-accent-soft);
    --tree-subjects: var(--ds-info);
    --tree-subjects-soft: var(--ds-info-soft);
    --tree-classrooms: var(--ds-success);
    --tree-classrooms-soft: var(--ds-success-soft);
    --tree-assessments: var(--ds-warning);
    --tree-assessments-soft: var(--ds-warning-soft);
}

body.sp-design-system.sp-design-system.sp-design-system :where(
    .settings-workspace,
    .settings-work-panel,
    .management-section,
    .settings-tree,
    .tree-node-detail-panel,
    .explorer-card,
    .subject-card,
    .classroom-card,
    .assessment-period-card,
    .assessment-item-card,
    .assessment-period-detail,
    .assessment-summary-bar,
    .settings-dialog
) {
    color: var(--ds-text-primary);
    background: var(--ds-surface);
    border-color: var(--ds-border);
}

body.sp-design-system.sp-design-system.sp-design-system :where(.settings-tree) {
    background:
        radial-gradient(circle at 100% 0, var(--ds-tree-glow), transparent 14rem),
        var(--ds-sidebar);
    box-shadow: var(--ds-shadow-sm);
    scrollbar-color: var(--ds-border-strong) transparent;
}

body.sp-design-system.sp-design-system.sp-design-system :where(
    .tree-stage > summary,
    .tree-section,
    .tree-leaf,
    .tree-period > summary
):hover {
    color: var(--ds-text-primary);
    background: var(--ds-hover);
    border-color: var(--ds-border-strong);
}

body.sp-design-system.sp-design-system.sp-design-system :where(
    .tree-stage > summary.selected,
    .tree-section.selected,
    .tree-leaf.selected,
    .tree-leaf[aria-current="page"]
) {
    color: var(--ds-text-primary);
    background: var(--ds-selected);
    border-inline-start-color: var(--ds-primary);
}

body.sp-design-system.sp-design-system.sp-design-system .assessment-item-card.is-result-item {
    border-color: var(--ds-warning-border);
    box-shadow: inset 0 3px 0 var(--ds-warning), var(--ds-shadow-sm);
}

/* Results and records */
body.sp-design-system.sp-design-system.sp-design-system :where(
    .final-results-grade-card,
    .final-results-scope-heading,
    .final-results-scope-summary > span,
    .student-result-heading,
    .student-result-summary > div,
    .student-search-dialog,
    .student-search-result,
    .student-search-empty,
    .focused-student-result,
    .focused-result-summary,
    .focused-result-grades,
    .focused-result-empty,
    .records-card,
    .records-checkbox-item,
    .records-summary-item,
    .records-selected-students,
    .records-linked-students
) {
    color: var(--ds-text-primary);
    background: var(--ds-surface);
    border-color: var(--ds-border);
}

body.sp-design-system.sp-design-system.sp-design-system :where(
    .grade-card-classrooms,
    .grade-card-stats > span,
    .classroom-flat-buttons a,
    .focused-result-summary,
    .focused-result-grades,
    .records-selected-students li,
    .records-linked-students li
) {
    color: var(--ds-text-primary);
    background: var(--ds-surface-raised);
    border-color: var(--ds-border);
}

body.sp-design-system.sp-design-system.sp-design-system :where(
    .classroom-flat-buttons a:hover,
    .student-search-result:hover
) {
    color: var(--ds-text-primary);
    background: var(--ds-hover);
    border-color: var(--ds-primary);
}

body.sp-design-system.sp-design-system.sp-design-system :where(
    .student-search-dialog-header,
    .student-search-trigger,
    .search-submit,
    .authentication-confirmation-header
) {
    color: var(--ds-text-on-accent);
    background: linear-gradient(135deg, var(--ds-primary-solid), var(--ds-primary-gradient-end));
    border-color: var(--ds-primary);
}

/* Scrollbars */
body.sp-design-system * {
    scrollbar-width: thin;
    scrollbar-color: var(--ds-border-strong) transparent;
}

body.sp-design-system *::-webkit-scrollbar {
    width: 0.65rem;
    height: 0.65rem;
}

body.sp-design-system *::-webkit-scrollbar-thumb {
    background: var(--ds-border-strong);
    border: 0.15rem solid transparent;
    border-radius: var(--ds-radius-pill);
    background-clip: padding-box;
}

body.sp-design-system *::-webkit-scrollbar-thumb:hover {
    background-color: var(--ds-text-tertiary);
}

@media (prefers-reduced-motion: reduce) {
    body.sp-design-system *,
    body.sp-design-system *::before,
    body.sp-design-system *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}
.grade-failed {
    color: var(--ds-grade-failed) !important;
    font-weight: 700;
    text-shadow: var(--ds-grade-failed-shadow);
}
body.sp-design-system:has(.teacher-action-dialog) {
    overflow: hidden;
}