/* ==========================================================================
   Smart LMS — design tokens, theme variables, reset and typography.
   Every color in the UI comes from these variables so Light/Dark Mode
   switch instantly by changing [data-theme] on <html>.
   ========================================================================== */

:root {
    color-scheme: light;

    /* Brand: emerald, with neutrals tinted slightly green so surfaces match the sidebar. */
    --bg-primary: #f3f7f5;
    --bg-secondary: #ffffff;
    --bg-tertiary: #eaf1ed;
    --bg-hover: #eef5f1;
    --bg-inset: #f7faf8;

    --text-primary: #15221d;
    --text-secondary: #55665e;
    --text-muted: #86968e;
    --text-inverse: #ffffff;

    --border-color: #dfe8e3;
    --border-strong: #cad7d0;

    --primary: #047857;
    --primary-hover: #065f46;
    --primary-soft: #dcf5ea;
    --primary-text: #047857;
    --on-primary: #ffffff;

    --success: #13855b;
    --success-soft: #e3f5ec;
    --warning: #b26a00;
    --warning-soft: #fdf1dc;
    --danger: #c8322d;
    --danger-soft: #fde8e7;
    --info: #0b73a8;
    --info-soft: #e1f2fa;

    /* Sidebar: dark emerald in both themes */
    --sidebar-bg: #03261e;
    --sidebar-glow: rgba(16, 185, 129, 0.20);
    --sidebar-text: #a9cdbf;
    --sidebar-text-active: #ffffff;
    --sidebar-hover: rgba(167, 243, 208, 0.07);
    --sidebar-active: rgba(16, 185, 129, 0.18);
    --sidebar-accent: #34d399;
    --sidebar-border: rgba(167, 243, 208, 0.08);
    --sidebar-muted: #5f917f;
    /* Sidebar brand: emerald ribbon holding the logo, the name's letters as small tiles */
    --brand-ribbon: linear-gradient(160deg, #34d399, #059669 55%, #047857);
    --brand-ribbon-shadow: rgba(0, 0, 0, 0.45);
    --brand-on-ribbon: #ffffff;
    --brand-on-ribbon-soft: rgba(255, 255, 255, 0.16);
    --brand-letter-bg: rgba(52, 211, 153, 0.14);
    --brand-letter-bg-hover: rgba(52, 211, 153, 0.26);
    --brand-letter: #6ee7b7;

    --chart-1: #059669;
    --chart-2: #0284c7;
    --chart-3: #b26a00;
    --chart-4: #7c3aed;
    --chart-5: #c8322d;
    --chart-track: #e5ede9;
    /* Attendance status marks, in this order (validated for color-vision deficiency with gaps + labels). */
    --att-present: #13855b;
    --att-late: #b26a00;
    --att-excused: #86968e;
    --att-absent: #c8322d;
    /* Class ranking places #1-#3 (records/ranking.js), eGradeBook's shared ranking page colors */
    --medal-gold: #c98f00;
    --medal-silver: #7d8899;
    --medal-bronze: #b0652e;

    /* The dark emerald hero of the sign-in page and the Download page, in both themes. */
    --hero-bg:
        radial-gradient(60% 55% at 10% 5%, rgba(16, 185, 129, 0.22), transparent 70%),
        radial-gradient(50% 50% at 100% 100%, rgba(20, 184, 166, 0.14), transparent 70%),
        radial-gradient(40% 40% at 75% 30%, rgba(52, 211, 153, 0.05), transparent 70%),
        linear-gradient(160deg, #033a2d 0%, #032b22 50%, #021f18 100%);
    --hero-text: #ecfdf5;
    --hero-muted: rgba(236, 253, 245, 0.72);
    --hero-glass: rgba(255, 255, 255, 0.07);
    --hero-line: rgba(255, 255, 255, 0.14);

    /* The phones on the Download page (.phone3d in pages.css), and the FormFlow app's colors on one. */
    --device-bezel: #05070a;
    --device-frame: linear-gradient(140deg, #1d2925, #5f736c 46%, #222e2a);
    --device-edge-light: #8ea29b;
    --device-edge-dark: #232f2b;
    --device-shadow: rgba(0, 0, 0, 0.5);
    --device-metal: linear-gradient(135deg, #e6efeb, #7b8f88 22%, #f5f9f7 48%, #687c75 72%, #cbd7d2);
    --device-glare: rgba(255, 255, 255, 0.2);
    --formflow-night: #0a0a0f;
    --formflow-text: #f4f2ff;
    --formflow-violet: #7c3aed;
    --formflow-violet-end: #9d46ff;
    --formflow-lilac: #b794ff;
    --formflow-cyan: #67e8f9;

    --shadow-sm: 0 1px 2px rgba(12, 32, 24, 0.06);
    --shadow-md: 0 4px 14px rgba(12, 32, 24, 0.08);
    --shadow-lg: 0 18px 48px rgba(12, 32, 24, 0.18);
    --overlay: rgba(6, 20, 15, 0.5);
    /* Tooltips (core/tooltip.js): a dark chip on the light theme */
    --tooltip-bg: #10231c;
    --tooltip-text: #ecfdf5;
    --tooltip-border: rgba(255, 255, 255, 0.06);
    --tooltip-shadow: 0 8px 24px -6px rgba(6, 20, 15, 0.35);
    --skeleton: #e5ede9;
    --skeleton-shine: #f3f7f5;
    /* The theme switch (partials/theme-menu.php): a sunken track, the choice on a raised thumb */
    --switch-track: #e7eeea;
    --switch-thumb: #ffffff;
    --switch-thumb-shadow: 0 1px 2px rgba(12, 32, 24, 0.16), 0 0 0 0.5px rgba(12, 32, 24, 0.08);
    /* The dashboard welcome's numbers (pages.css): panes of frosted glass lit from the top left, soft lights behind */
    --glass-pane: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.42));
    --glass-rim: rgba(255, 255, 255, 0.9);
    --glass-shadow: 0 1px 2px rgba(4, 47, 36, 0.05), 0 8px 22px -10px rgba(4, 47, 36, 0.18);
    --glass-light: rgba(16, 185, 129, 0.24);
    --glass-light-2: rgba(20, 184, 166, 0.18);
    --focus-ring: 0 0 0 3px rgba(16, 185, 129, 0.28);

    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 14px;
    --sidebar-width: 256px;
    --topbar-height: 64px;
    --font-sans: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "Cascadia Code", Consolas, monospace;
    --transition: 160ms ease;
}

[data-theme="dark"] {
    color-scheme: dark;

    --bg-primary: #0a100e;
    --bg-secondary: #111916;
    --bg-tertiary: #17211d;
    --bg-hover: #1a2521;
    --bg-inset: #0d1411;

    --text-primary: #e5ede9;
    --text-secondary: #a3b4ac;
    --text-muted: #7a8b83;
    --text-inverse: #0a100e;

    --border-color: #1f2c27;
    --border-strong: #2d3d36;

    --primary: #10b981;
    --primary-hover: #34d399;
    --primary-soft: rgba(16, 185, 129, 0.15);
    --primary-text: #6ee7b7;
    --on-primary: #022c22;

    --success: #3cc68a;
    --success-soft: rgba(60, 198, 138, 0.14);
    --warning: #f0b048;
    --warning-soft: rgba(240, 176, 72, 0.14);
    --danger: #f2716b;
    --danger-soft: rgba(242, 113, 107, 0.15);
    --info: #4cb8e8;
    --info-soft: rgba(76, 184, 232, 0.14);

    --sidebar-bg: #021a14;
    --sidebar-glow: rgba(16, 185, 129, 0.14);
    --sidebar-text: #9cc2b3;
    --sidebar-hover: rgba(167, 243, 208, 0.06);
    --sidebar-active: rgba(16, 185, 129, 0.15);
    --sidebar-border: rgba(167, 243, 208, 0.07);
    --sidebar-muted: #4f8070;

    --chart-1: #34d399;
    --chart-2: #38bdf8;
    --chart-3: #f0b048;
    --chart-4: #b388ff;
    --chart-5: #f2716b;
    --chart-track: #1e2b26;
    --att-present: #2fae78;
    --att-late: #c4861f;
    --att-excused: #5c6b64;
    --att-absent: #e4655f;
    --medal-gold: #f5b301;
    --medal-silver: #a9b4c6;
    --medal-bronze: #d0834a;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.55);
    --overlay: rgba(0, 0, 0, 0.62);
    /* Tooltips: a raised surface with a soft edge, lighter than any card */
    --tooltip-bg: #24342e;
    --tooltip-text: #f0fdf4;
    --tooltip-border: rgba(167, 243, 208, 0.14);
    --tooltip-shadow: 0 10px 28px -6px rgba(0, 0, 0, 0.7);
    --skeleton: #18221e;
    --skeleton-shine: #21302a;
    --switch-track: #0b120f;
    --switch-thumb: #23312b;
    --switch-thumb-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --glass-pane: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
    --glass-rim: rgba(255, 255, 255, 0.12);
    --glass-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --glass-light: rgba(16, 185, 129, 0.26);
    --glass-light-2: rgba(20, 184, 166, 0.16);
    --focus-ring: 0 0 0 3px rgba(52, 211, 153, 0.35);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-primary);
    background: var(--bg-primary);
    -webkit-font-smoothing: antialiased;
}

/* Avoid transition flashes while the theme is applied on load/switch. */
.theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none !important; }

h1, h2, h3, h4 { margin: 0 0 .5rem; line-height: 1.25; font-weight: 650; color: var(--text-primary); }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.02rem; }
h4 { font-size: .92rem; }
p { margin: 0 0 .75rem; }
small { font-size: .82rem; }

a { color: var(--primary-text); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { max-width: 100%; }
svg.icon { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }

code, pre { font-family: var(--font-mono); font-size: .88em; }
pre { white-space: pre-wrap; }
hr { border: 0; border-top: 1px solid var(--border-color); margin: 1rem 0; }

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

::selection { background: var(--primary-soft); color: var(--text-primary); }

/* Components that set their own display (e.g. .alert { display: flex }) must still honor [hidden]. */
[hidden] { display: none !important; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger { color: var(--danger); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }
.mono { font-family: var(--font-mono); }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; }
.flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; }
.gap-1 { gap: .5rem; } .gap-2 { gap: 1rem; } .flex-wrap { flex-wrap: wrap; } .grow { flex: 1; min-width: 0; }
.pre-line { white-space: pre-line; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}