/*
 * TeachMetrics theme system (card #84 Phase 2).
 *
 * A semantic token layer over Bulma 1.0.2, loaded AFTER bulma.min.css so it can both
 * remap Bulma's CSS custom properties and correct its low-contrast utility classes
 * site-wide without editing templates. CSP-safe (static file from `self`), no build step.
 *
 * Design direction (operator-approved /impeccable shape brief):
 *   - Voice: Linear / Vercel — monochrome-dominant, crisp, ONE accent used sparingly.
 *   - Accent: TeachMetrics blue (#3b82f6), inherited from the reference extension.
 *   - Co-equal light + dark, both WCAG AA. Tinted neutrals (cooled toward the brand hue).
 *
 * Bulma derives nearly everything from a fixed scheme hue/sat + per-shade *lightness*
 * variables, and swaps the lightness vars in dark mode. So we override those primitives
 * (themes every component in both modes at once) and pin a few values for guaranteed AA.
 */

/* ============================================================ *
 *  1. Brand + semantic primitives (mode-independent)
 * ============================================================ */
:root {
    /* Accent: brand blue for marks/focus; a slightly deeper blue carries AA text/fills. */
    --tm-accent: #3b82f6;            /* brand mark / focus ring (non-text) */
    --tm-accent-strong: #2563eb;     /* AA when paired with white */

    /* Type. Bulma already ships an Inter/system stack; we lead with the native UI font
       (instant load, zero FOUT) and add a real monospace token for SQL / raw payloads. */
    --bulma-family-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
    --bulma-family-secondary: var(--bulma-family-primary);
    --tm-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    --bulma-family-code: var(--tm-mono);
    --bulma-family-monospace: var(--tm-mono);

    /* Accent (primary + link) blue. Bulma derives hover/active/invert from these. */
    --bulma-primary-h: 217deg;
    --bulma-primary-s: 83%;
    --bulma-primary-l: 49%;          /* white text on primary ~= AA */
    --bulma-link-h: 217deg;
    --bulma-link-s: 83%;
    --bulma-link-l: 49%;

    /* Severity hues (info reuses the accent blue). */
    --bulma-info-h: 217deg;  --bulma-info-s: 83%;  --bulma-info-l: 49%;
    --bulma-success-h: 150deg; --bulma-success-s: 62%; --bulma-success-l: 30%;
    --bulma-warning-h: 35deg;  --bulma-warning-s: 88%; --bulma-warning-l: 46%;
    --bulma-danger-h: 354deg;  --bulma-danger-s: 70%;  --bulma-danger-l: 49%;
    /* Keep severity text legible on its own light tint (warning especially). */
    --bulma-warning-invert-l: 16%;

    /* Button text on the blue fills. Bulma assigns each colour's invert from its ORIGINAL
       palette (teal primary -> dark text, blue link -> white), so after rebranding primary,
       link, and info all to one blue they disagreed (is-primary/is-info read dark, is-link
       read white). Pin all three to WHITE — AA-verified on this blue in both modes — so every
       solid-blue button is consistent and legible. */
    --bulma-primary-invert-l: 100%;
    --bulma-link-invert-l: 100%;
    --bulma-info-invert-l: 100%;
}

/* ============================================================ *
 *  2. Light scheme — tinted-cool neutrals + AA text scale
 * ============================================================ */
:root {
    --bulma-scheme-h: 221;
    --bulma-scheme-s: 16%;

    --bulma-scheme-main-l: 99%;       /* page surface — off-white, not #fff */
    --bulma-scheme-main-bis-l: 97%;   /* raised */
    --bulma-scheme-main-ter-l: 94%;   /* sunken / hover */
    --bulma-background-l: 95.5%;       /* tag / subtle fills */

    --bulma-text-strong-l: 18%;       /* headings / strongest */
    --bulma-text-l: 27%;              /* body */
    --bulma-text-weak-l: 41%;         /* muted — AA on the surface */

    --bulma-border-l: 87%;
    --bulma-border-weak-l: 92%;

    --bulma-link-on-scheme-l: 43%;    /* link text on light — darkened for AA */
}

/* ============================================================ *
 *  3. Dark scheme — soft ink (never pure black), lifted accents
 *     Applied for an explicit dark cookie AND for OS-dark when no cookie is set
 *     (matching the existing server seam: no cookie => follow prefers-color-scheme).
 * ============================================================ */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bulma-scheme-main-l: 12%;       /* soft black, blue-tinted */
        --bulma-scheme-main-bis-l: 15%;
        --bulma-scheme-main-ter-l: 19%;
        --bulma-background-l: 18%;

        --bulma-text-strong-l: 96%;
        --bulma-text-l: 82%;
        --bulma-text-weak-l: 63%;         /* muted on dark — AA */

        --bulma-border-l: 26%;
        --bulma-border-weak-l: 20%;

        --bulma-link-on-scheme-l: 72%;    /* link text on dark — lifted for AA */
        --bulma-primary-l: 52%;
        --bulma-link-l: 52%;
        --bulma-info-l: 52%;
    }
}

[data-theme="dark"] {
    --bulma-scheme-main-l: 12%;
    --bulma-scheme-main-bis-l: 15%;
    --bulma-scheme-main-ter-l: 19%;
    --bulma-background-l: 18%;

    --bulma-text-strong-l: 96%;
    --bulma-text-l: 82%;
    --bulma-text-weak-l: 63%;

    --bulma-border-l: 26%;
    --bulma-border-weak-l: 20%;

    --bulma-link-on-scheme-l: 72%;
    --bulma-primary-l: 52%;
    --bulma-link-l: 52%;
    --bulma-info-l: 52%;
}

/* ============================================================ *
 *  4. Correct Bulma's low-contrast utility classes site-wide
 *     `has-text-grey*` (306 + 15 uses) and the `*-white-*` backgrounds map to FIXED,
 *     non-theme-aware palette values that fail AA on the surface and break in dark mode.
 *     Repoint them at the theme-aware, AA-verified tokens. One rule, whole site.
 * ============================================================ */
.has-text-grey,
.has-text-grey-light {
    color: var(--bulma-text-weak) !important;
}
.has-text-grey-dark {
    color: var(--bulma-text) !important;
}
.has-background-white-bis {
    background-color: var(--bulma-scheme-main-bis) !important;
}
.has-background-white-ter {
    background-color: var(--bulma-scheme-main-ter) !important;
}
/* Neutral `is-light` chips/banners (notification / tag with NO colour modifier) hard-code a light
 * background that isn't theme-aware, so in dark mode they render light-on-light (unreadable — e.g. the
 * /dashboard/reports "Live data" banner + each report's format badge). Repoint them at theme-aware
 * tokens so they read correctly in both modes; leave COLOURED is-light variants (is-warning/is-info/…)
 * alone so they keep their tint. One rule, whole site (card #151). */
.notification.is-light:not(.is-primary):not(.is-link):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger):not(.is-dark),
.tag.is-light:not(.is-primary):not(.is-link):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger):not(.is-dark) {
    background-color: var(--bulma-background) !important;
    color: var(--bulma-text) !important;
}

/* ============================================================ *
 *  5. Typography polish — tabular numerics for an operator console
 * ============================================================ */
body {
    font-feature-settings: "kern", "liga";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
/* Numbers must align: tables, KPI titles, metrics, change badges. */
.table td,
.table th,
.title,
.subtitle,
.tag,
.tm-num {
    font-variant-numeric: tabular-nums;
}
pre,
code,
.is-family-monospace,
.is-family-code {
    font-family: var(--tm-mono);
}

/* ============================================================ *
 *  6. Surfaces — quiet, flat panels (Linear/Vercel), not heavy cards
 * ============================================================ */
.box {
    box-shadow: none;
    border: 1px solid var(--bulma-border-weak);
    background-color: var(--bulma-scheme-main);
}
.notification {
    border: 1px solid var(--bulma-border-weak);
}

/* ============================================================ *
 *  7. Top bar — adaptive surface with the TeachMetrics mark
 *     (layouts drop `is-dark`; the bar now follows the scheme in both modes)
 * ============================================================ */
.navbar {
    background-color: var(--bulma-scheme-main);
    border-bottom: 1px solid var(--bulma-border);
}
.navbar-item.tm-brand {
    gap: 0.55rem;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}
.tm-brand .tm-mark {
    height: 1.6rem;
    width: 1.6rem;
}
/* Base display lives on the mark itself at single-class specificity, BEFORE the
   theme hide/show rules — so the container rule above can never out-rank a hide
   (card #237: two marks visible on light dashboards). */
.tm-mark, .tm-mark-lg { display: block; }
/* Brand mark (card #109): the exact marketing artwork, light/dark raster pair — the dark
   variant recolors the book strokes light (derived pixel-for-pixel from the original).
   Selection mirrors Bulma 1.x's own theme logic: an explicit [data-theme] pin wins (admin pages,
   cookie-driven); with no pin (login/home) the OS prefers-color-scheme decides — the miss that
   left a dark-stroke mark on a dark OS-driven hero. */
.tm-mark--dark { display: none; }
[data-theme="dark"] .tm-mark--light { display: none; }
[data-theme="dark"] .tm-mark--dark { display: block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .tm-mark--light { display: none; }
    :root:not([data-theme="light"]) .tm-mark--dark { display: block; }
}
.tm-brand .tm-word-teach { color: var(--tm-accent-strong); }
.tm-brand .tm-word-metrics { color: var(--bulma-text-strong); }
[data-theme="dark"] .tm-brand .tm-word-teach,
.navbar .tm-brand .tm-word-teach { color: var(--bulma-primary); }

/* Active nav — muted "you are here": Bulma fills the selected item with the link colour
   (a loud blue block). Replace it with neutral-strong text + a thin accent underline for
   top-level items, and a quiet neutral tint for items inside an open dropdown. */
.navbar-item.is-active,
.navbar-link.is-active {
    background-color: transparent !important;
    color: var(--bulma-text-strong) !important;
    font-weight: 600;
    box-shadow: inset 0 -2px 0 0 var(--tm-accent);
}
.navbar-item.is-active:hover,
.navbar-link.is-active:hover {
    background-color: var(--bulma-scheme-main-ter) !important;
}
.navbar-dropdown .navbar-item.is-active {
    background-color: var(--bulma-scheme-main-ter) !important;
    color: var(--bulma-link) !important;
    box-shadow: none;
}

/* ============================================================ *
 *  8. Focus — one visible, consistent accent ring (a11y)
 * ============================================================ */
:focus-visible {
    outline: 2px solid var(--tm-accent);
    outline-offset: 2px;
    border-radius: 3px;
}
.button:focus-visible,
.input:focus-visible,
.select select:focus-visible,
.textarea:focus-visible {
    outline: 2px solid var(--tm-accent);
    outline-offset: 1px;
}

/* ============================================================ *
 *  9. Tables — calm header, readable row hover
 * ============================================================ */
.table {
    --bulma-table-cell-border-color: var(--bulma-border-weak);
}
.table thead th {
    color: var(--bulma-text-weak);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: none;
}
.table.is-hoverable tbody tr:hover {
    background-color: var(--bulma-scheme-main-ter);
}

/* ============================================================ *
 *  10. Brand lockup (login / home) — the SVG mark + a tokenized wordmark.
 *     Built from type + the vector mark (not a raster lockup) so it stays crisp
 *     and themes correctly in both modes.
 * ============================================================ */
.tm-brand-lg {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}
.tm-brand-lg .tm-mark-lg {
    height: 3.25rem;
    width: 3.25rem;
}
.tm-brand-lg .tm-word-lg {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
}
.tm-word-lg .tm-word-teach { color: var(--bulma-primary); }
.tm-word-lg .tm-word-metrics { color: var(--bulma-text-strong); }

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

/* Bubble-chart rich tooltip (card #128) — used by the Course Matrix + Engagement bubbles. */
/* Rich tooltips own their colors explicitly (card #240 follow-up): inherited chart
   foreColor is deliberately muted and the Apex container theme can disagree with the
   app pin — so background and text come straight from the theme-pinned Bulma vars. */
.tm-tt { padding: 0.5rem 0.65rem; font-size: 0.8rem; min-width: 12rem;
         background: var(--bulma-scheme-main-bis); color: var(--bulma-text-strong); }
.tm-tt-title { font-weight: 600; margin-bottom: 0.35rem; color: var(--bulma-text-strong); }
.tm-tt-row { display: flex; justify-content: space-between; gap: 1.25rem; line-height: 1.5; }
.tm-tt-k { color: var(--bulma-text-weak, #6b7280); margin-right: 0.5rem; }
.tm-tt-v { font-variant-numeric: tabular-nums; color: var(--bulma-text-strong); }

/* Email template preview (#134a). The preview simulates a WHITE email, so its text must use fixed email colors
   regardless of the app's light/dark theme — otherwise dark mode's near-white strong/headings/links inherit
   into the white preview and render invisibly (white-on-white). Mirrors EmailShell's inlined email CSS. */
#pv_content { color: #27272a; }
#pv_content strong, #pv_content b { color: #27272a; }
#pv_content h1, #pv_content h2, #pv_content h3, #pv_content h4 { color: #18181b; }
#pv_content a { color: #2563eb; }

/* "What it means" summary boxes on /dashboard/license (card #226). Bulma scheme vars keep them
   readable in both themes; the boxes are visually distinct from the legal text they summarize. */
.eula-tldr {
  background: var(--bulma-scheme-main-bis);
  border-left: 3px solid var(--bulma-link);
  border-radius: 4px;
  padding: 0.75rem 1rem;
  margin: 0.75rem 0 1.25rem;
}
.eula-tldr p { margin: 0; }
.eula-tldr-label { font-weight: 600; color: var(--bulma-link); }
.eula-tldr-tag { font-size: 0.85em; color: var(--bulma-text-weak); }
.eula-tldr-note { font-size: 0.9em; font-style: italic; color: var(--bulma-text-weak); }