/* ════════════════════════════════════════════════════════
   STRIX brand theme — overrides over the CORVUS design system
   ════════════════════════════════════════════════════════

   STRIX and CORVUS share one component library (apps/shared_ui, vendored from
   CORVUS). This file is the ONLY STRIX-specific styling: it re-points the
   design-system tokens to the STRIX brand (navy + gold) and adapts the shell
   for a sidebar-less layout. The vendored corvus-*.css files are left
   untouched, so the library can later be promoted to a shared package and both
   products theme it from their own override file.

   Load LAST (after every corvus-*.css) so these win.
   ──────────────────────────────────────────────────────── */

:root {
  /* ── STRIX brand primitives ──────────────────────────────
     CORVUS's brand/primary primitive is --cv-blue. STRIX re-points it to
     navy; components that reference the semantic --cv-color-primary (which
     aliases --cv-blue in corvus-tokens.css) follow automatically. */
  --cv-blue:        #1b3a6b;   /* STRIX navy — primary / links / buttons */
  --cv-blue-soft:   #e7eef7;   /* tinted navy — soft fills, hovers */
  --cv-blue-dark:   #142c52;   /* navy hover/active */
  --cv-navy:        #14264a;   /* deep navy — dark surfaces, avatars */
  --cv-navy-mid:    #1b3a6b;

  /* STRIX gold accent (CORVUS has no equivalent — additive). */
  --cv-gold:        #c9a84c;
  --cv-gold-soft:   #faf3dd;
  --cv-gold-dark:   #a98a32;

  /* Re-assert the semantic aliases so any token that captured the old
     primitive value at parse time is refreshed to the STRIX brand. */
  --cv-color-primary:        var(--cv-blue);
  --cv-color-primary-hover:  var(--cv-blue-dark);
  --cv-color-primary-soft:   var(--cv-blue-soft);
  --cv-color-text-link:      var(--cv-blue);
  --cv-color-text-link-hover: var(--cv-blue-dark);
  --cv-color-focus-ring:     var(--cv-blue);
}

/* ── Re-skin the hard-coded blue hovers in corvus.css (tailwind.src.css
   hard-codes #1558c0 rather than a token, so token overrides alone miss
   them). Keep this list in sync if upstream adds more. ──────────────── */
a:hover { color: var(--cv-blue-dark); }
.btn-primary,
.cv-btn-primary { background: var(--cv-blue); border-color: var(--cv-blue); }
.btn-primary:hover,
.cv-btn-primary:hover { background: var(--cv-blue-dark); border-color: var(--cv-blue-dark); }

/* ── Gold accent: the STRIX wordmark's second half + section accents ── */
.cv-topbar-brand-mark { color: var(--cv-gold); }
.strix-accent { color: var(--cv-gold); }
.strix-accent-bar { border-top: 3px solid var(--cv-gold); }

/* ════════════════════════════════════════════════════════
   Sidebar-less shell — STRIX is a flatter app than CORVUS, so it uses a
   simple sticky topbar + centred container instead of the cv-shell grid.
   ════════════════════════════════════════════════════════ */

/* The CORVUS topbar reserves a sidebar-width brand column; reclaim it. */
.cv-topbar-brand { min-width: auto; margin-right: 1.5rem; }

.strix-topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.5rem;
  height: 3.5rem;
  background: var(--cv-color-bg-card, #fff);
  border-bottom: 1px solid var(--cv-color-border, #e2e8f0);
  position: sticky;
  top: 0;
  z-index: 50;
}
.strix-topbar .cv-topbar-nav {
  display: flex;
  align-items: center;
  gap: .25rem;
  flex: 1;
}
.strix-topbar .cv-topbar-actions { margin-left: auto; }

/* Brand wordmark — DM Serif Display, navy with a gold second half. */
.strix-brand {
  display: inline-flex;
  align-items: baseline;
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 1.25rem;
  letter-spacing: -.01em;
  color: var(--cv-navy);
  text-decoration: none;
}
.strix-brand b { font-weight: 400; }
.strix-brand .mark { color: var(--cv-gold); }

/* Logout button rendered as a borderless ghost in the topbar. */
.strix-logout {
  background: none;
  border: 0;
  padding: .375rem .625rem;
  font: inherit;
  font-size: .85rem;
  color: var(--cv-color-text-muted, #475569);
  cursor: pointer;
  border-radius: var(--cv-radius-md, .5rem);
}
.strix-logout:hover { background: var(--cv-color-bg-alt, #f0f4f8); color: var(--cv-color-text, #0f172a); }

/* Page footer. */
.strix-footer {
  text-align: center;
  color: var(--cv-color-text-muted, #475569);
  font-size: .8rem;
  padding: 2rem 1.5rem 2.5rem;
}

/* Constrain the main content column for reading-heavy pages. */
.strix-main { padding: 1.75rem 0 1rem; }
.strix-narrow { max-width: 900px; }

/* ════════════════════════════════════════════════════════
   STRIX page helpers — small, self-contained patterns built on the cv-*
   primitives so templates stay clean and don't depend on Tailwind purge.
   ════════════════════════════════════════════════════════ */

/* Padded content card (cv-card has chrome but no padding). */
.strix-card {
  background: var(--cv-white);
  border: 1px solid var(--cv-color-border, #e2e8f0);
  border-radius: var(--cv-radius-xl, .75rem);
  box-shadow: var(--cv-shadow);
  padding: 1.5rem 1.75rem;
}
.strix-card + .strix-card { margin-top: 1.25rem; }

/* Page heading group. */
.strix-head { margin-bottom: 1.25rem; }
.strix-head h1 { margin: .35rem 0 .25rem; }
.strix-lead { color: var(--cv-color-text-muted, #475569); margin: .25rem 0 0; max-width: 65ch; }

/* Action button row. */
.strix-actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.strix-actions.mt { margin-top: 1.25rem; }

/* Role / status pills. */
.strix-role {
  display: inline-block; padding: .15rem .6rem; border-radius: 999px;
  background: var(--cv-blue-soft); color: var(--cv-navy);
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
.strix-pill {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .1rem .55rem; border-radius: 999px;
  background: #e6f4ea; color: #166534; font-size: .78rem; font-weight: 700;
}
.strix-pill-review { background: var(--cv-gold-soft); color: var(--cv-gold-dark); }
.strix-pill-muted  { background: #f1f5f9; color: #475569; }

/* List rows (homework / banks). */
.strix-row {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .9rem 1.1rem; border: 1px solid var(--cv-color-border, #e2e8f0);
  border-radius: var(--cv-radius-lg, .625rem); background: var(--cv-white);
  box-shadow: var(--cv-shadow); margin-bottom: .7rem;
}
.strix-row:hover { border-color: var(--cv-border-mid, #cbd5e1); }
.strix-row-meta { font-size: .82rem; color: var(--cv-color-text-muted, #475569); margin-top: .15rem; }
.strix-row-actions { display: flex; gap: .6rem; align-items: center; flex-shrink: 0; }

/* Section heading between lists. */
.strix-section-h { margin: 1.5rem 0 .7rem; }

/* Dashboard stat grid. */
.strix-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }

/* ── Base form-field styling — Django renders widgets without a class, and
   Tailwind preflight strips native styling, so style the elements directly. */
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="date"], input[type="search"],
input[type="url"], textarea, select {
  display: block; width: 100%; font: inherit; font-size: .9rem;
  padding: .55rem .75rem; color: var(--cv-text);
  background: var(--cv-white);
  border: 1px solid var(--cv-color-border, #e2e8f0);
  border-radius: var(--cv-radius-md, .5rem);
  transition: border-color .12s, box-shadow .12s;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus,
input[type="number"]:focus, input[type="date"]:focus, input[type="search"]:focus,
input[type="url"]:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--cv-blue);
  box-shadow: 0 0 0 3px var(--cv-blue-soft);
}
.strix-field { margin-bottom: 1rem; }
.strix-field > label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: .35rem; }

/* ── Help page (teacher guide) ──────────────────────────── */
.strix-toc { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.strix-toc a {
  display: inline-block; padding: .4rem .85rem; border-radius: 999px;
  background: var(--cv-blue-soft); color: var(--cv-navy);
  font-size: .9rem; font-weight: 600; text-decoration: none;
}
.strix-toc a:hover { background: #d8e4f3; }
ol.strix-steps { margin: .6rem 0 0; padding-left: 0; list-style: none; counter-reset: step; }
ol.strix-steps > li { position: relative; padding: .15rem 0 .9rem 2.6rem; margin: 0; counter-increment: step; }
ol.strix-steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 1.8rem; height: 1.8rem; border-radius: 50%;
  background: var(--cv-navy); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center; font-size: .95rem;
}
ol.strix-steps > li:not(:last-child)::after {
  content: ""; position: absolute; left: .9rem; top: 1.8rem; bottom: 0;
  width: 2px; background: var(--cv-color-border, #e2e8f0);
}
.strix-callout {
  border-left: 4px solid var(--cv-gold); background: var(--cv-gold-soft);
  padding: .8rem 1.1rem; border-radius: 0 8px 8px 0; margin-top: 1rem; color: #3a2e08;
}
.strix-ui { font-weight: 700; color: var(--cv-navy); }

/* ── Language switch (segmented pill) ───────────────────── */
.strix-lang { display: inline-flex; border: 1px solid var(--cv-color-border, #e2e8f0);
  border-radius: 999px; overflow: hidden; background: var(--cv-white); }
.strix-lang-btn { border: 0; background: none; cursor: pointer; font: inherit;
  font-size: .8rem; font-weight: 600; padding: .3rem .8rem; color: var(--cv-color-text-muted, #475569); }
.strix-lang-btn + .strix-lang-btn { border-left: 1px solid var(--cv-color-border, #e2e8f0); }
.strix-lang-btn:hover { background: var(--cv-blue-soft); color: var(--cv-navy); }
.strix-lang-btn.active { background: var(--cv-navy); color: #fff; }
.strix-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }