/* ==========================================================================
   Education ERP — design tokens + base refinements
   --------------------------------------------------------------------------
   Phase B: the whole palette is now token-driven so light and dark themes
   resolve from one place. `:root` holds the complete light palette; the dark
   palette redefines ONLY the tokens (never component rules) under both a
   `prefers-color-scheme` guard and an explicit `[data-theme="dark"]` guard,
   so the OS setting and the in-app toggle both win in their own direction.
   Bootstrap's own components follow via `data-bs-theme`, set alongside
   `data-theme` by config.js.
   ========================================================================== */

:root {
    /* --- Brand: deep maroon ------------------------------------------------ */
    --erp-brand: #7a1128;          /* primary fill (buttons, active nav)      */
    --erp-brand-dark: #58101f;     /* hover/active fill                       */
    --erp-brand-light: #a83b52;    /* focus ring base, subtle accents         */
    --erp-brand-text: #7a1128;     /* brand as text/link on a light surface   */
    --erp-brand-tint: #f6e7eb;     /* avatar / chip backgrounds               */
    --erp-brand-wash: #fdf7f8;     /* faint gradient wash on hero cards       */
    --erp-on-brand: #ffffff;       /* text on a brand fill                    */

    /* --- Neutrals: warm grey biased toward the brand --------------------- */
    --erp-body-bg: #f4f2f3;
    --erp-surface: #ffffff;        /* cards, modals, table body               */
    --erp-surface-2: #faf8f9;      /* table head, raised strips, hover ghost  */
    --erp-surface-3: #f0ecee;      /* skeleton base, pressed states           */
    --erp-border: #e4dee0;
    --erp-border-strong: #d3c9cd;
    --erp-text: #241f21;
    --erp-text-soft: #4e4649;
    --erp-muted: #6b6469;

    /* --- Semantic (kept distinct from the brand accent) ------------------ */
    --erp-success: #1f7a4d;
    --erp-success-bg: #e7f4ee;
    --erp-warning: #8a5d00;
    --erp-warning-bg: #fbf1db;
    --erp-danger: #b0233b;
    --erp-danger-bg: #fbe9ec;
    --erp-info: #1f6f8b;
    --erp-info-bg: #e6f2f5;

    /* --- Sidebar: charcoal, deliberately its own scale ------------------- */
    --erp-sidebar-bg: #161616;
    --erp-sidebar-bg-alt: #1f1f1f;
    --erp-sidebar-text: #e9e6e7;
    --erp-sidebar-muted: #9a9296;
    --erp-sidebar-border: #2c2c2c;

    /* --- Elevation ------------------------------------------------------- */
    --erp-shadow-sm: 0 1px 2px rgba(31, 20, 24, .06), 0 1px 3px rgba(31, 20, 24, .05);
    --erp-shadow-md: 0 .2rem .7rem rgba(31, 20, 24, .09);
    --erp-shadow-lg: 0 1rem 3rem rgba(31, 20, 24, .18);

    /* --- Shape --------------------------------------------------------- */
    --erp-radius-sm: .4rem;
    --erp-radius: .6rem;
    --erp-radius-lg: .9rem;

    /* --- Focus ring (single source for every interactive control) ------ */
    --erp-focus-ring: 0 0 0 .2rem rgba(122, 17, 40, .35);

    /* --- Layout metrics ---------------------------------------------- */
    --erp-sidebar-width: 248px;
    --erp-sidebar-collapsed-width: 68px;
    --erp-topbar-height: 4rem;
    --erp-bottomnav-height: 3.75rem;
    --erp-content-width: 1520px;

    /* --- Stacking (kept above Bootstrap's modal at 1055 where needed) -- */
    --erp-z-bottomnav: 1030;
    --erp-z-slideover: 1060;
    --erp-z-toast: 1090;

    --erp-transition: 160ms ease;

    color-scheme: light;
}

/* Dark palette — redefine tokens only. Guarded so an explicit light choice
   beats a dark OS, and the explicit dark toggle beats a light OS. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --erp-brand: #8f2138;
        --erp-brand-dark: #74172b;
        --erp-brand-light: #c76d81;
        --erp-brand-text: #e79aac;
        --erp-brand-tint: #3a2229;
        --erp-brand-wash: #221a1d;
        --erp-on-brand: #ffffff;

        --erp-body-bg: #151317;
        --erp-surface: #1e1b20;
        --erp-surface-2: #26222a;
        --erp-surface-3: #2f2a33;
        --erp-border: #37323d;
        --erp-border-strong: #4a444f;
        --erp-text: #ece7ec;
        --erp-text-soft: #c6bfc7;
        --erp-muted: #978f99;

        --erp-success: #4cc38a;
        --erp-success-bg: #12281f;
        --erp-warning: #e0a137;
        --erp-warning-bg: #2e2410;
        --erp-danger: #e78a9b;
        --erp-danger-bg: #2f1820;
        --erp-info: #66b8cf;
        --erp-info-bg: #10262c;

        --erp-sidebar-bg: #121114;
        --erp-sidebar-bg-alt: #1c1a1f;
        --erp-sidebar-text: #e9e6e7;
        --erp-sidebar-muted: #928a94;
        --erp-sidebar-border: #2b2830;

        --erp-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
        --erp-shadow-md: 0 .2rem .7rem rgba(0, 0, 0, .5);
        --erp-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, .6);

        --erp-focus-ring: 0 0 0 .2rem rgba(231, 154, 172, .4);

        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --erp-brand: #8f2138;
    --erp-brand-dark: #74172b;
    --erp-brand-light: #c76d81;
    --erp-brand-text: #e79aac;
    --erp-brand-tint: #3a2229;
    --erp-brand-wash: #221a1d;
    --erp-on-brand: #ffffff;

    --erp-body-bg: #151317;
    --erp-surface: #1e1b20;
    --erp-surface-2: #26222a;
    --erp-surface-3: #2f2a33;
    --erp-border: #37323d;
    --erp-border-strong: #4a444f;
    --erp-text: #ece7ec;
    --erp-text-soft: #c6bfc7;
    --erp-muted: #978f99;

    --erp-success: #4cc38a;
    --erp-success-bg: #12281f;
    --erp-warning: #e0a137;
    --erp-warning-bg: #2e2410;
    --erp-danger: #e78a9b;
    --erp-danger-bg: #2f1820;
    --erp-info: #66b8cf;
    --erp-info-bg: #10262c;

    --erp-sidebar-bg: #121114;
    --erp-sidebar-bg-alt: #1c1a1f;
    --erp-sidebar-text: #e9e6e7;
    --erp-sidebar-muted: #928a94;
    --erp-sidebar-border: #2b2830;

    --erp-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --erp-shadow-md: 0 .2rem .7rem rgba(0, 0, 0, .5);
    --erp-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, .6);

    --erp-focus-ring: 0 0 0 .2rem rgba(231, 154, 172, .4);

    color-scheme: dark;
}

/* ==========================================================================
   Base
   ========================================================================== */

html,
body {
    background: var(--erp-body-bg);
    color: var(--erp-text);
}

body {
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1.5;
}

a {
    color: var(--erp-brand-text);
}

/* One focus style for every keyboard-reachable control. Mouse clicks keep
   Bootstrap's quiet look via :focus-visible. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.page-link:focus-visible,
.dropdown-item:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--erp-focus-ring);
    border-radius: var(--erp-radius-sm);
}

/* Respect a reduced-motion preference everywhere, including Bootstrap's own
   transitions and any CSS animation added by the component library. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Keyboard-only skip link, revealed on focus (markup in components.js). */
.erp-skip-link {
    position: fixed;
    top: .5rem;
    left: .5rem;
    z-index: 2000;
    padding: .5rem .9rem;
    background: var(--erp-brand);
    color: var(--erp-on-brand);
    border-radius: var(--erp-radius-sm);
    font-weight: 600;
    transform: translateY(-160%);
    transition: transform var(--erp-transition);
}

.erp-skip-link:focus {
    transform: translateY(0);
    color: var(--erp-on-brand);
}

/* ==========================================================================
   Bootstrap refinements (token-driven)
   ========================================================================== */

.btn,
.card,
.alert,
.form-control,
.form-select {
    border-radius: var(--erp-radius);
}

.btn {
    font-weight: 600;
    min-height: 2.35rem;
}

.form-control,
.form-select {
    background-color: var(--erp-surface);
    border-color: var(--erp-border);
    color: var(--erp-text);
    min-height: 2.55rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--erp-brand-light);
    box-shadow: var(--erp-focus-ring);
}

.form-control::placeholder {
    color: var(--erp-muted);
    opacity: 1;
}

.card {
    background-color: var(--erp-surface);
    border-color: var(--erp-border);
    color: var(--erp-text);
    box-shadow: var(--erp-shadow-sm) !important;
}

.table {
    margin-bottom: 0;
    --bs-table-bg: transparent;
    color: var(--erp-text);
}

.table > :not(caption) > * > * {
    padding: .7rem .8rem;
    vertical-align: middle;
}

.table thead th {
    background: var(--erp-surface-2);
    color: var(--erp-text-soft);
    font-size: .74rem;
    letter-spacing: .035em;
    text-transform: uppercase;
    border-bottom-color: var(--erp-border);
}

.form-label {
    color: var(--erp-text-soft);
    font-size: .82rem;
    font-weight: 700;
    margin-bottom: .35rem;
}

.form-text {
    color: var(--erp-muted);
}

.modal-content {
    border: 0;
    border-radius: var(--erp-radius-lg);
    background: var(--erp-surface);
    color: var(--erp-text);
    box-shadow: var(--erp-shadow-lg);
}

.modal-header,
.modal-footer {
    border-color: var(--erp-border);
    padding: 1rem 1.25rem;
}

.modal-body {
    padding: 1.25rem;
}

.modal-title {
    font-weight: 700;
}

.dropdown-menu {
    background: var(--erp-surface);
    border-color: var(--erp-border);
    box-shadow: var(--erp-shadow-md);
}

.dropdown-item {
    color: var(--erp-text);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--erp-surface-2);
    color: var(--erp-text);
}

.list-group-item {
    background: transparent;
    border-color: var(--erp-border);
    color: var(--erp-text);
}

.breadcrumb {
    --bs-breadcrumb-divider-color: var(--erp-muted);
}

.page-link {
    color: var(--erp-brand-text);
    background: var(--erp-surface);
    border-color: var(--erp-border);
}

.page-item.active .page-link {
    background: var(--erp-brand);
    border-color: var(--erp-brand);
    color: var(--erp-on-brand);
}

.page-item.disabled .page-link {
    background: var(--erp-surface);
    border-color: var(--erp-border);
    color: var(--erp-muted);
}

/* Semantic alerts routed through the tokens so they hold on both grounds. */
.alert-success {
    --bs-alert-color: var(--erp-success);
    --bs-alert-bg: var(--erp-success-bg);
    --bs-alert-border-color: var(--erp-success);
}

.alert-warning {
    --bs-alert-color: var(--erp-warning);
    --bs-alert-bg: var(--erp-warning-bg);
    --bs-alert-border-color: var(--erp-warning);
}

.alert-danger {
    --bs-alert-color: var(--erp-danger);
    --bs-alert-bg: var(--erp-danger-bg);
    --bs-alert-border-color: var(--erp-danger);
}

.alert-info {
    --bs-alert-color: var(--erp-info);
    --bs-alert-bg: var(--erp-info-bg);
    --bs-alert-border-color: var(--erp-info);
}

/* Bootstrap's own .btn-primary override — every existing "Save"/"Add X"/primary
   action button across every module picks this up automatically. */
.btn-primary {
    --bs-btn-bg: var(--erp-brand);
    --bs-btn-border-color: var(--erp-brand);
    --bs-btn-color: var(--erp-on-brand);
    --bs-btn-hover-bg: var(--erp-brand-dark);
    --bs-btn-hover-border-color: var(--erp-brand-dark);
    --bs-btn-hover-color: var(--erp-on-brand);
    --bs-btn-active-bg: var(--erp-brand-dark);
    --bs-btn-active-border-color: var(--erp-brand-dark);
    --bs-btn-active-color: var(--erp-on-brand);
    --bs-btn-disabled-bg: var(--erp-brand);
    --bs-btn-disabled-border-color: var(--erp-brand);
    --bs-btn-disabled-color: var(--erp-on-brand);
}

.btn-outline-primary {
    --bs-btn-color: var(--erp-brand-text);
    --bs-btn-border-color: var(--erp-brand);
    --bs-btn-hover-bg: var(--erp-brand);
    --bs-btn-hover-border-color: var(--erp-brand);
    --bs-btn-hover-color: var(--erp-on-brand);
    --bs-btn-active-bg: var(--erp-brand-dark);
    --bs-btn-active-border-color: var(--erp-brand-dark);
}

.btn-outline-secondary {
    --bs-btn-color: var(--erp-text-soft);
    --bs-btn-border-color: var(--erp-border-strong);
    --bs-btn-hover-bg: var(--erp-surface-2);
    --bs-btn-hover-border-color: var(--erp-border-strong);
    --bs-btn-hover-color: var(--erp-text);
    --bs-btn-active-bg: var(--erp-surface-3);
    --bs-btn-active-border-color: var(--erp-border-strong);
    --bs-btn-active-color: var(--erp-text);
}

.navbar-brand {
    color: var(--erp-brand-text) !important;
}

.text-muted {
    color: var(--erp-muted) !important;
}

/* ---------------------------------------------------------------------------
   Compatibility remaps. Existing page templates use `.bg-white`, `.bg-light`
   and `.table-light` as "surface" tokens (loading/empty/error state boxes,
   table heads). Rebinding them here to the theme tokens is what lets the dark
   theme work without editing 36 static HTML files. Every current use of these
   classes in this project is a surface, never a deliberate always-white block.
   --------------------------------------------------------------------------- */
.bg-white {
    background-color: var(--erp-surface) !important;
}

.bg-light {
    background-color: var(--erp-surface-2) !important;
}

.table-light {
    --bs-table-bg: var(--erp-surface-2);
    --bs-table-color: var(--erp-text-soft);
}

.text-bg-light {
    background-color: var(--erp-surface-3) !important;
    color: var(--erp-text) !important;
}

/* ==========================================================================
   Login page (standalone shell — no app chrome)
   ========================================================================== */

.erp-login-page {
    min-height: 100vh;
    background: radial-gradient(circle at top left, var(--erp-brand-tint) 0, transparent 34rem), var(--erp-body-bg);
}

.erp-login-card {
    max-width: 440px;
    border-top: 4px solid var(--erp-brand);
}

.erp-login-mark {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--erp-radius);
    display: inline-grid;
    place-items: center;
    background: var(--erp-brand);
    color: var(--erp-on-brand);
    font-weight: 800;
    letter-spacing: -.05em;
}