/* ============================================================
   Brain Box — Design System refresh (Phase U1, 2026-05-28)
   ------------------------------------------------------------
   Loaded AFTER style.css in the 4 base templates, so these rules
   win at equal specificity without !important. Goal: clean, white,
   easy-to-read admin UI. Reskins every screen via the shared
   classes (container/layout/sidebar/nav/cards/buttons/tables/forms)
   without touching the 167 Jinja templates.

   Reversible: remove the <link> in the base templates to fall back
   to the old look. Per-screen inline styles (e.g. gradient page
   headers) are cleaned up in later phases (U2+).
   ============================================================ */

:root {
  /* Surfaces */
  --bb-bg: #ffffff;              /* main canvas — white */
  --bb-surface: #ffffff;         /* cards */
  --bb-surface-2: #f7f8fb;       /* subtle fills, table headers */
  --bb-sidebar: #ffffff;         /* light sidebar */
  --bb-sidebar-border: #ecedf3;

  /* Ink */
  --bb-ink: #1f2230;             /* primary text */
  --bb-ink-soft: #5b6170;        /* secondary text */
  --bb-ink-faint: #9aa1ad;       /* hints */

  /* Brand */
  --bb-primary: #1d4ed8;         /* navy/blue accent */
  --bb-primary-strong: #1e3a8a;
  --bb-primary-soft: #eef2ff;
  --bb-accent: #0ea5e9;

  /* Status */
  --bb-success: #15803d;
  --bb-warning: #b45309;
  --bb-danger: #b91c1c;

  /* Lines + shadow + radius */
  --bb-border: #ecedf3;
  --bb-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05);
  --bb-shadow-md: 0 6px 18px rgba(15, 23, 42, 0.08);
  --bb-radius: 14px;
  --bb-radius-sm: 10px;
}

/* ── Canvas ────────────────────────────────────────────── */
body {
  background-color: var(--bb-bg);
  color: var(--bb-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.container.has-sidebar .content-area {
  background: var(--bb-bg);
}

/* The whole app canvas reads as one clean white sheet; the very
   light grey only appears behind cards on dense report pages. */
.layout {
  background: var(--bb-bg);
  gap: 0;
}

/* ── Sidebar (light, clean) ────────────────────────────── */
.layout nav.nav-links {
  background: var(--bb-sidebar);
  border-right: 1px solid var(--bb-sidebar-border);
  box-shadow: none;
  gap: 0.5rem;
  padding: 0 0.75rem 1.25rem;
}

.nav-group {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0.4rem 0 0.6rem;
  gap: 0.15rem;
}

.nav-group + .nav-group {
  border-top: 1px solid var(--bb-sidebar-border);
  margin-top: 0.3rem;
  padding-top: 0.7rem;
}

.nav-heading {
  color: var(--bb-ink-faint);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 0 0.85rem;
  margin: 0.2rem 0 0.35rem;
}

.layout nav.nav-links a {
  color: var(--bb-ink-soft);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.6rem 0.85rem;
  border-radius: var(--bb-radius-sm);
  gap: 0.65rem;
}

.layout nav.nav-links a:hover {
  color: var(--bb-primary);
  background-color: var(--bb-primary-soft);
  transform: none;
  box-shadow: none;
}

/* Drop the decorative dot bullets — cleaner, more legible list. */
.layout nav.nav-links a::before { display: none; }

/* Active item (templates can add aria-current="page" or .active). */
.layout nav.nav-links a.active,
.layout nav.nav-links a[aria-current="page"] {
  background: var(--bb-primary);
  color: #ffffff;
}

/* ── Brand header in the sidebar ───────────────────────── */
.nav-app-name { color: var(--bb-ink); font-weight: 800; }
.nav-app-subtitle { color: var(--bb-ink-faint); }
.nav-user-card {
  background: var(--bb-surface-2);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius-sm);
}
.nav-user-name { color: var(--bb-ink); }
.nav-user-role { color: var(--bb-ink-faint); }

/* ── Typography ────────────────────────────────────────── */
h1 { color: var(--bb-ink); font-weight: 800; letter-spacing: -0.01em; }
h2, h3 { color: var(--bb-ink); font-weight: 700; }
a { color: var(--bb-primary); }

/* ── Cards (all the *-card variants share a clean base) ── */
.stat-card,
.curriculum-card,
.subject-card,
.topic-card,
.recent-topics,
.curriculum-section,
.topics-section {
  background: var(--bb-surface);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius);
  box-shadow: var(--bb-shadow-sm);
}

.stat-card:hover,
.curriculum-card:hover,
.subject-card:hover,
.topic-card:hover {
  box-shadow: var(--bb-shadow-md);
  border-color: #dfe2ee;
  transform: translateY(-2px);
}

.stat-card h3 {
  color: var(--bb-ink-faint);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
}

/* ── Buttons ───────────────────────────────────────────── */
.btn {
  border-radius: var(--bb-radius-sm);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.6rem 1.1rem;
  transition: background-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--bb-primary); color: #fff; border: none; }
.btn-primary:hover { background: var(--bb-primary-strong); box-shadow: var(--bb-shadow-md); }
.btn-small { padding: 0.4rem 0.8rem; font-size: 0.82rem; }

/* ── Tables ────────────────────────────────────────────── */
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bb-surface);
  border-radius: var(--bb-radius);
  overflow: hidden;
}
th {
  background: var(--bb-surface-2);
  color: var(--bb-ink-soft);
  text-align: left;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 700;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--bb-border);
}
td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid #f3f4f8;
  color: var(--bb-ink);
  font-size: 0.9rem;
}
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--bb-surface-2); }

/* ── Forms ─────────────────────────────────────────────── */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="date"],
input[type="tel"], select, textarea {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1px solid #d8dae2;
  border-radius: var(--bb-radius-sm);
  font-size: 0.92rem;
  color: var(--bb-ink);
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--bb-primary);
  box-shadow: 0 0 0 3px var(--bb-primary-soft);
}
label { color: var(--bb-ink-soft); font-weight: 600; font-size: 0.85rem; }

/* ── Status chips ──────────────────────────────────────── */
.status, .status-active, .status-inactive {
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 0.25rem 0.7rem;
}
.status-active { background: #dcfce7; color: var(--bb-success); }
.status-inactive { background: #fee2e2; color: var(--bb-danger); }

/* ── Breadcrumb ────────────────────────────────────────── */
.breadcrumb { color: var(--bb-ink-faint); font-size: 0.85rem; }
.breadcrumb a { color: var(--bb-ink-soft); }
.breadcrumb a:hover { color: var(--bb-primary); }

/* ── Remove the gradient page-header banners across screens ──
   The sidebar already tells you where you are, so the big coloured
   banner is redundant. `!important` because these are defined in
   per-template inline <style> blocks that otherwise win on source
   order. Reversible: delete this rule. */
.admin-header { display: none !important; }

/* Legacy `.hero` section header softened to a plain title (kept for
   the few content-browse pages that use it for orientation). */
.hero {
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--bb-ink);
  padding: 0 0 0.5rem;
}
.hero h1 { color: var(--bb-ink); }
.hero p { color: var(--bb-ink-soft); }