/* =============================================================================
   Zark's Online Tutor — Design System
   =============================================================================
   Canonical design tokens for every surface (landing, auth, student, teacher,
   admin, developer, chat, quiz, session room).

   - Light theme tokens live on :root
   - Dark theme tokens live on html[data-theme="dark"]
   - Legacy per-stylesheet variable prefixes (--sd-*, --ad-*, --msg-*, --quiz-*,
     --sr-*, --dev-*, --landing-*) are remapped onto the canonical --zt-* tokens
     below, so changing a token here restyles the whole app.
   - This file must be the LAST stylesheet loaded in every layout so its :root
     definitions win the cascade over the per-portal files.
   ========================================================================== */

/* ── 1. Canonical tokens (light) ─────────────────────────────────────────── */
:root {
    /* Brand */
    --zt-primary: #5B50F0;
    --zt-primary-dark: #4638D6;
    --zt-primary-light: #EEEDFE;
    --zt-primary-soft: #F5F3FF;
    --zt-primary-contrast: #FFFFFF;

    /* Playful accents (landing / kid-facing surfaces) */
    --zt-sun: #FBBF24;
    --zt-sun-bg: #FEF9C3;
    --zt-coral: #FB7185;
    --zt-coral-bg: #FFE4E6;
    --zt-teal: #2DD4BF;
    --zt-teal-bg: #CCFBF1;
    --zt-sky: #38BDF8;
    --zt-sky-bg: #E0F2FE;
    --zt-grape: #A78BFA;
    --zt-grape-bg: #EDE9FE;

    /* Semantic */
    --zt-success: #22C55E;
    --zt-success-bg: #DCFCE7;
    --zt-success-ink: #15803D;
    --zt-warning: #F59E0B;
    --zt-warning-bg: #FEF3C7;
    --zt-warning-ink: #B45309;
    --zt-danger: #EF4444;
    --zt-danger-bg: #FEE2E2;
    --zt-danger-ink: #B91C1C;
    --zt-info: #3B82F6;
    --zt-info-bg: #DBEAFE;
    --zt-info-ink: #1D4ED8;

    /* Neutrals / surfaces */
    --zt-bg: #F7F8FC;
    --zt-bg-accent: #F3F4FF;
    --zt-surface: #FFFFFF;
    --zt-surface-2: #F8FAFC;
    --zt-surface-3: #F1F5F9;
    --zt-text: #1E293B;
    --zt-text-strong: #0F172A;
    --zt-muted: #64748B;
    --zt-muted-2: #94A3B8;
    --zt-border: #E2E8F0;
    --zt-border-strong: #CBD5E1;

    /* Shape */
    --zt-radius-xs: 8px;
    --zt-radius-sm: 12px;
    --zt-radius: 16px;
    --zt-radius-lg: 22px;
    --zt-radius-pill: 999px;

    /* Elevation */
    --zt-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
    --zt-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
    --zt-shadow: 0 4px 24px rgba(30, 41, 59, 0.07);
    --zt-shadow-lg: 0 12px 40px rgba(30, 41, 59, 0.12);
    --zt-shadow-primary: 0 8px 24px rgba(91, 80, 240, 0.28);

    /* Type */
    --zt-font-display: 'Poppins', 'Nunito', system-ui, sans-serif;
    --zt-font-body: 'Poppins', 'Nunito', system-ui, sans-serif;
    --zt-font-ui: 'Inter', system-ui, sans-serif;
    --zt-font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, monospace;

    /* Motion */
    --zt-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --zt-transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* Focus ring */
    --zt-ring: 0 0 0 3px rgba(91, 80, 240, 0.35);

    color-scheme: light;
}

/* ── 2. Canonical tokens (dark) ──────────────────────────────────────────── */
html[data-theme="dark"] {
    --zt-primary: #7C73F5;
    --zt-primary-dark: #6A60F0;
    --zt-primary-light: rgba(124, 115, 245, 0.16);
    --zt-primary-soft: rgba(124, 115, 245, 0.10);
    --zt-primary-contrast: #FFFFFF;

    --zt-sun-bg: rgba(251, 191, 36, 0.14);
    --zt-coral-bg: rgba(251, 113, 133, 0.14);
    --zt-teal-bg: rgba(45, 212, 191, 0.14);
    --zt-sky-bg: rgba(56, 189, 248, 0.14);
    --zt-grape-bg: rgba(167, 139, 250, 0.14);

    --zt-success: #34D399;
    --zt-success-bg: rgba(52, 211, 153, 0.14);
    --zt-success-ink: #6EE7B7;
    --zt-warning: #FBBF24;
    --zt-warning-bg: rgba(251, 191, 36, 0.14);
    --zt-warning-ink: #FCD34D;
    --zt-danger: #F87171;
    --zt-danger-bg: rgba(248, 113, 113, 0.14);
    --zt-danger-ink: #FCA5A5;
    --zt-info: #60A5FA;
    --zt-info-bg: rgba(96, 165, 250, 0.14);
    --zt-info-ink: #93C5FD;

    --zt-bg: #0B1220;
    --zt-bg-accent: #0E1628;
    --zt-surface: #151E31;
    --zt-surface-2: #1B2540;
    --zt-surface-3: #22304E;
    --zt-text: #E2E8F0;
    --zt-text-strong: #F8FAFC;
    --zt-muted: #94A3B8;
    --zt-muted-2: #64748B;
    --zt-border: #2A3550;
    --zt-border-strong: #3B4A6B;

    --zt-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
    --zt-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --zt-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
    --zt-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);
    --zt-shadow-primary: 0 8px 24px rgba(108, 99, 255, 0.35);

    --zt-ring: 0 0 0 3px rgba(124, 115, 245, 0.45);

    color-scheme: dark;
}

/* ── 3. Legacy prefix remaps ─────────────────────────────────────────────── */
/* Loaded last, these win over the :root blocks inside the per-portal files.
   Layout dimensions (sidebar widths, nav heights) are intentionally NOT
   remapped — they stay portal-specific. */
:root {
    /* student.css (--sd-*) */
    --sd-primary: var(--zt-primary);
    --sd-primary-dark: var(--zt-primary-dark);
    --sd-primary-light: var(--zt-primary-light);
    --sd-primary-soft: var(--zt-primary-soft);
    --sd-text: var(--zt-text);
    --sd-muted: var(--zt-muted);
    --sd-border: var(--zt-border);
    --sd-white: var(--zt-surface);
    --sd-green: var(--zt-success);
    --sd-green-bg: var(--zt-success-bg);
    --sd-blue: var(--zt-info);
    --sd-blue-bg: var(--zt-info-bg);
    --sd-yellow: var(--zt-warning);
    --sd-yellow-bg: var(--zt-warning-bg);
    --sd-red: var(--zt-danger);
    --sd-radius: var(--zt-radius);
    --sd-radius-sm: var(--zt-radius-sm);
    --sd-shadow: var(--zt-shadow);
    --sd-shadow-sm: var(--zt-shadow-sm);

    /* admin.css + teacher.css (--ad-*) */
    --ad-primary: var(--zt-primary);
    --ad-primary-dark: var(--zt-primary-dark);
    --ad-primary-light: var(--zt-primary-light);
    --ad-bg: var(--zt-bg-accent);
    --ad-text: var(--zt-text);
    --ad-muted: var(--zt-muted);
    --ad-border: var(--zt-border);
    --ad-white: var(--zt-surface);
    --ad-green: var(--zt-success);
    --ad-green-bg: var(--zt-success-bg);
    --ad-orange: var(--zt-warning);
    --ad-orange-bg: var(--zt-warning-bg);
    --ad-red: var(--zt-danger);
    --ad-red-bg: var(--zt-danger-bg);
    --ad-radius: var(--zt-radius);
    --ad-shadow: var(--zt-shadow);

    /* messages.css (--msg-*) */
    --msg-primary: var(--zt-primary);
    --msg-primary-dark: var(--zt-primary-dark);
    --msg-primary-light: var(--zt-primary-light);
    --msg-primary-soft: var(--zt-primary-soft);
    --msg-text: var(--zt-text);
    --msg-muted: var(--zt-muted);
    --msg-border: var(--zt-border);
    --msg-white: var(--zt-surface);
    --msg-green: var(--zt-success);
    --msg-radius: var(--zt-radius);
    --msg-radius-sm: var(--zt-radius-sm);
    --msg-shadow-sm: var(--zt-shadow-sm);

    /* quiz.css (--quiz-*) */
    --quiz-accent: var(--zt-primary);
    --quiz-accent-soft: var(--zt-primary-light);
    --quiz-border: var(--zt-border);
    --quiz-ink: var(--zt-text);
    --quiz-muted: var(--zt-muted);
    --quiz-green: var(--zt-success);
    --quiz-orange: var(--zt-warning);
    --quiz-red: var(--zt-danger);

    /* session-room.css (--sr-*) */
    --sr-primary: var(--zt-primary);
    --sr-primary-soft: var(--zt-primary-light);
    --sr-bg: var(--zt-bg);
    --sr-surface: var(--zt-surface);
    --sr-text: var(--zt-text-strong);
    --sr-muted: var(--zt-muted);
    --sr-border: var(--zt-border);
    --sr-danger: var(--zt-danger);
    --sr-success: var(--zt-success);
    --sr-session-id: var(--zt-success-ink);

    /* developer-portal.css (--dev-*) */
    --dev-bg: var(--zt-bg);

    /* landing.css (--landing-*) — landing stays light for guests, but tokens
       route through the system so brand changes propagate */
    --landing-primary: var(--zt-primary);
    --landing-primary-dark: var(--zt-primary-dark);
    --landing-primary-light: var(--zt-primary-light);
    --landing-text: var(--zt-text);
    --landing-muted: var(--zt-muted);
    --landing-yellow: var(--zt-sun);
    --landing-yellow-bg: var(--zt-sun-bg);
    --landing-green: var(--zt-success);
    --landing-shadow: var(--zt-shadow);
    --landing-shadow-sm: var(--zt-shadow-sm);
}

/* ── 4. Global dark-theme portal shells ──────────────────────────────────── */
/* Per-portal stylesheets hardcode a few body/background colors; these
   overrides keep every portal shell coherent in dark mode. */
html[data-theme="dark"] body.student-portal,
html[data-theme="dark"] body.teacher-portal,
html[data-theme="dark"] body.admin-portal,
html[data-theme="dark"] body.developer-portal,
html[data-theme="dark"] body.role-student,
html[data-theme="dark"] body.role-teacher,
html[data-theme="dark"] body.role-admin,
html[data-theme="dark"] body.role-developer {
    background: var(--zt-bg);
    color: var(--zt-text);
}

/* ── 5. Base polish (all surfaces) ───────────────────────────────────────── */
::selection {
    background: var(--zt-primary);
    color: var(--zt-primary-contrast);
}

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

/* Slim, theme-aware scrollbars */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--zt-border-strong) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--zt-border-strong);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--zt-muted-2); }

html {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Comfortable tap targets on touch devices */
@media (pointer: coarse) {
    button, a.btn, input[type="submit"], .nav-link {
        min-height: 44px;
    }
}

/* Respect reduced-motion preferences everywhere */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =============================================================================
   ── Portal refresh layer ──
   Shared visual polish for student / teacher / admin / developer shells.
   ========================================================================== */

/* Sidebar nav links: rounded pill hover + active accent bar */
.student-nav-link,
.admin-nav-link {
    border-radius: var(--zt-radius-sm);
    transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
    position: relative;
}

.student-nav-link:hover,
.admin-nav-link:hover {
    background: var(--zt-primary-soft);
    color: var(--zt-primary);
}

.student-nav-link:active,
.admin-nav-link:active {
    transform: scale(0.985);
}

.student-nav-link.active,
.admin-nav-link.active {
    background: var(--zt-primary-light);
    color: var(--zt-primary);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--zt-primary);
}

/* Topbars: keep content visible under them with a soft blur.
   position + z-index puts the topbar (and therefore its profile-menu
   dropdown) above dashboard cards — backdrop-filter creates a stacking
   context that would otherwise trap the dropdown behind cards. */
.student-topbar,
.admin-topbar {
    position: relative;
    z-index: 50;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* Profile menu itself needs to escape any parent stacking context so its
   panel paints above every card, table, and modal-adjacent element. */
.profile-menu {
    position: relative;
    z-index: 60;
}

.profile-menu__panel {
    z-index: 1000;
}

/* Cards: consistent borders + gentle hover lift on interactive ones */
.stg-card,
.admin-card,
.admin-kpi-card,
.wal-card,
.ssn-panel,
.ssn-widget,
.tx-panel,
.tx-widget {
    border: 1px solid var(--zt-border);
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

a.admin-kpi-card:hover,
a.stg-card:hover,
.admin-kpi-card[onclick]:hover {
    transform: translateY(-3px);
    box-shadow: var(--zt-shadow-lg);
    border-color: var(--zt-border-strong);
}

/* Tables: airy rows, hover highlight, rounded container */
.admin-table-wrap {
    border: 1px solid var(--zt-border);
    border-radius: var(--zt-radius);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.admin-table tbody tr {
    transition: background 0.15s ease;
}

.admin-table tbody tr:hover {
    background: var(--zt-primary-soft);
}

.admin-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--zt-surface-2);
}

/* Alerts: soft cards with accent bars */
.alert,
.admin-alert {
    border-radius: var(--zt-radius-sm);
    box-shadow: var(--zt-shadow-xs);
}

/* Notification badge pulse */
.student-notify-badge,
.admin-notify-badge {
    animation: zt-badge-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes zt-badge-pop {
    from { transform: scale(0.4); }
    to { transform: scale(1); }
}

/* ── Dark-mode gap fixes for portal shells ── */
html[data-theme="dark"] .student-topbar,
html[data-theme="dark"] .admin-topbar {
    background: rgba(21, 30, 49, 0.85);
    border-color: var(--zt-border);
}

html[data-theme="dark"] .admin-table thead th {
    background: var(--zt-surface-2);
    color: var(--zt-muted);
}

html[data-theme="dark"] .admin-table tbody tr:hover {
    background: var(--zt-primary-soft);
}

html[data-theme="dark"] .student-sidebar-card,
html[data-theme="dark"] .teacher-sidebar-card,
html[data-theme="dark"] .sidebar-account-card {
    background: var(--zt-surface-2);
    border-color: var(--zt-border);
    color: var(--zt-text);
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background-color: var(--zt-surface-2);
    border-color: var(--zt-border);
    color: var(--zt-text);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--zt-muted-2);
}