/* ==========================================================================
   AI-LMS Admin — Design System
   Indigo on a light-gray canvas: the page itself is a soft neutral gray,
   and every working surface — sidebar, top nav, cards, tables — is white
   and sits visibly above it, so structure is read through elevation
   (borders + a soft shadow) rather than background-color changes. One
   indigo accent (#6156E3) carries all interaction: selected nav items get
   a solid indigo fill, everything else gets a pale indigo tint on hover.
   Deliberately restrained: no gradients on content, no saturated "startup"
   color, nothing that dates quickly. The one exception is the AI insights
   panel, which stays a dark indigo "spotlight" card by design — enterprise
   dashboards commonly break one panel out this way for emphasis.
   Muted gold is reserved strictly for AI-generated content, semantic
   colors carry status, everything else is neutral gray.
   Built as a layer on top of Bootstrap 5 (utilities + grid), overriding
   Bootstrap's defaults via CSS custom properties rather than fighting them.
   ========================================================================== */

:root {
  /* ---- Color tokens -------------------------------------------------- */
  /* Neutral scale — Tailwind gray, chosen to match --border exactly (the
     spec's #E5E7EB is gray-200), so every neutral in the system sits on
     the same, well-known scale as the one gray value we were handed. */
  --ink-900: #111827;      /* primary text — gray-900 */
  --ink-700: #4b5563;      /* secondary text — gray-600 */
  --ink-500: #9ca3af;      /* tertiary text / placeholders — gray-400 */

  /* Brand accent — the one themeable, and the one saturated, scale in
     this system (gold and semantic colors are fixed-meaning, not brand).
     Every other token stays fixed across themes; only these swap. To add
     a new theme, add another :root[data-theme="…"] block below that
     redefines just this group.
     Default: "Indigo" — locked to the supplied primary (#6156E3).
     --accent-800/600/100/050 fill the gap the spec didn't cover — a
     darker hover shade, a mid tone for icons/bars/focus, and two tint
     steps for hovers/badges — built on the same hue so the whole scale
     reads as one color family, not four unrelated ones. */
  --accent-800: #4a3fc4;     /* brand — hover/active */
  --accent-700: #6156e3;     /* brand — primary interactive (spec: Primary) */
  --accent-600: #8176ea;     /* brand — icons, bars, focus, dots */
  --accent-100: #e4e1fb;     /* tint — badges, avatar backgrounds */
  --accent-050: #f2f1fd;     /* tint — menu hover, subtle surfaces */
  --accent-rgb: 129, 118, 234;   /* --accent-600 as r,g,b for rgba() use */
  --accent-glow: #b3abf3;       /* light accent for icons on the dark AI panel */
  --theme-label: "Indigo";

  /* AI accent stays gold in every theme — it's a fixed signal meaning
     "the model produced this," not a brand color, so it never swaps. Gold
     against a cool blue system also just reads as premium/considered. */
  --gold-700: #8a6222;     /* AI accent — text on light */
  --gold-600: #a6752b;     /* AI accent — icons/borders */
  --gold-100: #f3e6cd;     /* AI accent — tint bg */

  --success-700: #216b48;
  --success-100: #dcefe3;
  --warning-700: #a15a05;
  --warning-100: #faecd6;
  --danger-700: #a3352b;
  --danger-100: #f7e0dd;
  --info-700: #285a82;
  --info-100: #dde9f2;

  --paper-050: #f5f7fa;    /* page background (spec) */
  --surface: #ffffff;      /* sidebar / top nav / card surface (spec) */
  --surface-sunken: #f3f4f6;   /* gray-100 — nested surfaces inside a card */
  --border: #e5e7eb;       /* spec */
  --border-strong: #d1d5db;    /* gray-300 */

  /* ---- Type ------------------------------------------------------------ */
  --font-display: "Segoe UI Semibold", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Code", "Consolas", "SFMono-Regular", Menlo, monospace;

  /* ---- Elevation --------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06);
  --shadow-md: 0 4px 16px rgba(17, 24, 39, 0.08);
  --shadow-lg: 0 12px 32px rgba(17, 24, 39, 0.12);

  --radius: 8px;
  --radius-sm: 5px;
  --sidebar-w: 264px;
  --topbar-h: 64px;
}

/* ---- Theme: Slate ------------------------------------------------------
   Secondary theme. A muted, desaturated blue-graphite — the "neutral"
   option enterprise consoles typically offer alongside a brand color, for
   teams that want the same system with less color. The grayscale base
   doesn't move at all, only the one accent scale, which is the whole
   point of this token architecture: switching themes is a one-hue
   decision, not a repaint. Same lightness relationships as the default
   Indigo scale (800 darkest → 050 palest) so contrast and
   hierarchy hold without touching a single component rule. Toggled via
   [data-theme="slate"] on <html>. */
:root[data-theme="slate"] {
  --accent-800: #26364a;
  --accent-700: #3a4e66;
  --accent-600: #4f6885;
  --accent-100: #e2e8ee;
  --accent-050: #f1f4f7;
  --accent-rgb: 79, 104, 133;
  --accent-glow: #a3b6c9;
  --theme-label: "Slate";
}

/* ==========================================================================
   Base
   ========================================================================== */

body {
  font-family: var(--font-body);
  color: var(--ink-900);
  background: var(--paper-050);
  font-size: 0.9375rem;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.font-display {
  font-family: var(--font-display);
  color: var(--ink-900);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.text-secondary-ink { color: var(--ink-700) !important; }
.text-tertiary-ink { color: var(--ink-500) !important; }

.tabular-nums { font-variant-numeric: tabular-nums; }

code, .font-mono { font-family: var(--font-mono); font-size: 0.85em; }

a { color: var(--accent-700); }
a:hover { color: var(--accent-800); }

::selection { background: var(--accent-100); }

/* Focus visibility (keyboard) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.nav-link:focus-visible {
  outline: 2px solid var(--accent-600);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ==========================================================================
   App shell — sidebar + topbar + content
   ========================================================================== */

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

.sidebar {
  background: var(--surface);
  color: var(--ink-700);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 1.25rem 0.9rem 1.5rem;
  border-right: 1px solid var(--border);
  overscroll-behavior: contain;

  /* Slim scrollbar that blends with the white sidebar at rest and only
     darkens on hover — Firefox gets the closest thin equivalent since
     it has no hover-only scrollbar API. */
  scrollbar-width: thin;
  scrollbar-color: rgba(17, 24, 39, 0.14) transparent;
}

.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 999px;
  transition: background-color 150ms ease;
}
.sidebar:hover::-webkit-scrollbar-thumb { background-color: rgba(17, 24, 39, 0.14); }
.sidebar::-webkit-scrollbar-thumb:hover { background-color: rgba(17, 24, 39, 0.24); }

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.6rem 1.25rem;
  color: var(--ink-900);
  text-decoration: none;
}

.sidebar-brand .mark {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: linear-gradient(155deg, var(--accent-600), var(--accent-800));
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  flex-shrink: 0;
}
    .sidebar-brand .brand-logo {
        width: 50px;
        height: 50px;
    }
.sidebar-brand .name { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--ink-900); line-height: 1.1; }
.sidebar-brand .tagline { font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); }

.sidebar-group-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-500);
  padding: 1.1rem 0.7rem 0.4rem;
}

.sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--ink-700);
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  margin-bottom: 2px;
  transition: background-color 120ms ease, color 120ms ease;
}

.sidebar-nav .nav-link i { font-size: 1rem; width: 1.1rem; text-align: center; color: var(--ink-500); }

/* Menu Hover: light-blue background, blue icon, dark text stays legible */
.sidebar-nav .nav-link:hover { background: var(--accent-050); color: var(--ink-900); }
.sidebar-nav .nav-link:hover i { color: var(--accent-700); }

/* Selected Menu: solid blue fill, white text/icon */
.sidebar-nav .nav-link.active {
  background: var(--accent-700);
  color: #fff;
}
.sidebar-nav .nav-link.active i { color: #fff; }

.sidebar-nav .nav-link .badge-count {
  margin-left: auto;
  font-size: 0.68rem;
}

.topbar {
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.5rem;
  position: sticky;
  top: 0;
  z-index: 20;
}

.topbar-search {
  position: relative;
  max-width: 420px;
  flex: 1;
}

.topbar-search input {
  padding-left: 2.25rem;
  background: var(--surface-sunken);
  border-color: var(--border);
}

.topbar-search i {
  position: absolute;
  left: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-500);
}

.topbar-search kbd {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--ink-500);
  font-size: 0.7rem;
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
}

.topbar-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--ink-700);
  border: 1px solid transparent;
  position: relative;
  background: transparent;
}
.topbar-icon-btn:hover { background: var(--surface-sunken); border-color: var(--border); }

.topbar-icon-btn .dot {
  position: absolute;
  top: 6px; right: 7px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-600);
  border: 1.5px solid var(--surface);
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.3rem 0.5rem 0.3rem 0.3rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.user-chip .avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent-100); color: var(--accent-800);
  display: grid; place-items: center; font-weight: 600; font-size: 0.8rem;
  font-family: var(--font-display);
}
.user-chip .role { font-size: 0.72rem; color: var(--ink-500); line-height: 1; }
.user-chip .who { font-size: 0.82rem; font-weight: 600; line-height: 1.3; }

.content {
  padding: 1.75rem 2rem 3rem;
  max-width: 1440px;
}

/* Mobile sidebar */
@media (max-width: 991.98px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-w);
    z-index: 40;
    transform: translateX(-100%);
    transition: transform 180ms ease;
    box-shadow: var(--shadow-lg);
  }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar-backdrop {
    display: none;
    position: fixed; inset: 0; background: rgba(15, 23, 27, 0.45); z-index: 35;
  }
  .sidebar-backdrop.is-open { display: block; }
  .content { padding: 1.25rem 1.1rem 2.5rem; }
  .topbar { padding: 0 1rem; }
}

.sidebar-toggle { display: none; }
@media (max-width: 991.98px) { .sidebar-toggle { display: grid; } }

/* ==========================================================================
   Page header / breadcrumbs
   ========================================================================== */

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.breadcrumb-trail {
  font-size: 0.78rem;
  color: var(--ink-500);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
}
.breadcrumb-trail a { color: var(--ink-500); text-decoration: none; }
.breadcrumb-trail a:hover { color: var(--accent-700); }
.breadcrumb-trail .sep { color: var(--border-strong); }

.page-title { margin: 0; font-size: 1.55rem; }
.page-subtitle { color: var(--ink-700); font-size: 0.88rem; margin-top: 0.2rem; max-width: 60ch; }

/* ==========================================================================
   Buttons — restrained overrides on Bootstrap
   ========================================================================== */

.btn { font-weight: 500; border-radius: var(--radius-sm); font-size: 0.875rem; }

.btn-primary {
  background: var(--accent-700);
  border-color: var(--accent-700);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--accent-800);
  border-color: var(--accent-800);
}

.btn-outline-primary { color: var(--accent-700); border-color: var(--accent-700); }
.btn-outline-primary:hover { background: var(--accent-700); border-color: var(--accent-700); }

.btn-ai {
  background: var(--gold-100);
  border: 1px solid #e5cd9e;
  color: var(--gold-700);
}
.btn-ai:hover { background: #ecdbb2; color: var(--gold-700); }

.btn-light-outline {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink-700);
}
.btn-light-outline:hover { background: var(--surface-sunken); }

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  background: var(--surface);
}

.card-panel-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.15rem;
}

/* ---- Stat widgets ---- */

.stat-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1.1rem 1.2rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 150ms ease, transform 150ms ease;
}
.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

.stat-card .stat-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.stat-icon {
  width: 34px; height: 34px;
  border-radius: 8px;
  display: grid; place-items: center;
  font-size: 1rem;
}
.stat-icon.accent { background: var(--accent-100); color: var(--accent-800); }
.stat-icon.gold { background: var(--gold-100); color: var(--gold-700); }
.stat-icon.success { background: var(--success-100); color: var(--success-700); }
.stat-icon.danger { background: var(--danger-100); color: var(--danger-700); }
.stat-icon.info { background: var(--info-100); color: var(--info-700); }

.stat-value {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.1;
  margin-top: 0.65rem;
}
.stat-label { font-size: 0.8rem; color: var(--ink-700); margin-top: 0.2rem; }

.stat-delta { font-size: 0.76rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.2rem; }
.stat-delta.up { color: var(--success-700); }
.stat-delta.down { color: var(--danger-700); }
.stat-delta.flat { color: var(--ink-500); }

/* ==========================================================================
   Badges / status pills
   ========================================================================== */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.24rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.pill-success { background: var(--success-100); color: var(--success-700); }
.pill-warning { background: var(--warning-100); color: var(--warning-700); }
.pill-danger { background: var(--danger-100); color: var(--danger-700); }
.pill-info { background: var(--info-100); color: var(--info-700); }
.pill-neutral { background: var(--surface-sunken); color: var(--ink-700); border-color: var(--border); }
.pill-ai { background: var(--gold-100); color: var(--gold-700); }
.pill-ai::before { background: var(--gold-600); }

/* Faculty triage 3-color system: Stable=grey, Attention=amber, Critical=red. Deliberately
   reuses the existing warning/danger tokens for Attention/Critical and adds only a neutral
   "Stable" variant — never introduce a 4th color or a green/success state in faculty views. */
.pill-stable { background: var(--surface-sunken); color: var(--ink-700); border-color: var(--border-strong); }
.pill-attention { background: var(--warning-100); color: var(--warning-700); }
.pill-critical { background: var(--danger-100); color: var(--danger-700); }

.risk-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 0.4rem; }
.risk-dot-stable { background: var(--ink-500); }
.risk-dot-attention { background: var(--warning-700); }
.risk-dot-critical { background: var(--danger-700); }

/* ==========================================================================
   Tables
   ========================================================================== */

.table-panel { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }

.table-scroll { overflow-x: auto; }

table.table-modern {
  margin-bottom: 0;
  font-size: 0.875rem;
}
table.table-modern thead th {
  background: var(--surface-sunken);
  color: var(--ink-700);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  padding: 0.75rem 1rem;
  white-space: nowrap;
}
table.table-modern td {
  padding: 0.75rem 1rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
  color: var(--ink-900);
}
table.table-modern tbody tr:last-child td { border-bottom: none; }
table.table-modern tbody tr:hover { background: var(--surface-sunken); }

.row-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent-100); color: var(--accent-800);
  display: grid; place-items: center; font-weight: 600; font-size: 0.75rem;
  font-family: var(--font-display);
  flex-shrink: 0;
}

.sortable-th { cursor: pointer; user-select: none; }
.sortable-th i { font-size: 0.7rem; margin-left: 0.2rem; color: var(--ink-500); }
.sortable-th:hover { color: var(--ink-900); }
.sortable-th.active { color: var(--ink-900); }
.sortable-th.active i { color: var(--accent-700); }

/* ==========================================================================
   Row action icon buttons — compact square icon buttons for table rows
   (view / edit / delete), plus the active/inactive switch that sits
   alongside them.
   ========================================================================== */

.icon-btn {
  width: 30px; height: 30px;
  display: inline-grid; place-items: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-700);
  font-size: 0.85rem;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.icon-btn:hover { background: var(--surface-sunken); color: var(--ink-900); border-color: var(--border-strong); }
.icon-btn:focus-visible { outline: 2px solid var(--accent-600); outline-offset: 1px; }
.icon-btn.danger:hover { background: var(--danger-100); color: var(--danger-700); border-color: var(--danger-100); }
.icon-btn.accent:hover { background: var(--accent-050); color: var(--accent-700); border-color: var(--accent-100); }
.icon-btn:disabled { opacity: 0.45; pointer-events: none; }

.row-actions { display: inline-flex; align-items: center; gap: 0.35rem; }

.status-switch { display: inline-flex; align-items: center; gap: 0.5rem; }
.status-switch .form-check-input {
  width: 2.1rem; height: 1.15rem;
  cursor: pointer;
  border-color: var(--border-strong);
}
.status-switch .form-check-input:checked {
  background-color: var(--accent-700);
  border-color: var(--accent-700);
}
.status-switch .form-check-input:focus {
  border-color: var(--accent-600);
  box-shadow: 0 0 0 3px var(--accent-100);
}
.status-switch .form-check-input:disabled { opacity: 0.4; cursor: not-allowed; }
.status-switch .switch-label { font-size: 0.78rem; color: var(--ink-700); min-width: 3.2em; }

/* ==========================================================================
   Forms
   ========================================================================== */

.form-label { font-size: 0.82rem; font-weight: 600; color: var(--ink-700); }
.form-control, .form-select {
  border-color: var(--border-strong);
  font-size: 0.875rem;
  border-radius: var(--radius-sm);
}
.form-control:focus, .form-select:focus {
  border-color: var(--accent-600);
  box-shadow: 0 0 0 3px var(--accent-100);
}
.form-text { font-size: 0.76rem; }

.form-section-title {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

/* ==========================================================================
   Filters / toolbar
   ========================================================================== */

.filter-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.filter-bar .form-select,
.filter-bar .form-control { width: auto; }

/* Standard "filter toolbar" — labeled fields + explicit Apply/Reset actions,
   rather than filtering live on every keystroke/select change. */
.filter-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.9rem 1.25rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-sunken);
}
.filter-toolbar-fields {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.9rem 1.1rem;
  flex: 1 1 auto;
}
.filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
}
.filter-field .form-label {
  margin-bottom: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-700);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.filter-field .form-select,
.filter-field .form-control { width: auto; min-width: 200px; }
.filter-field.search-field .form-control { min-width: 240px; }
/* select2 replaces the native <select> with its own container sized to 100% of
   this div, so the div itself — not the hidden <select> — must carry the width
   bound; without it, a long "Code - Title" option can stretch the whole toolbar. */
.filter-field.select-field { min-width: 200px; max-width: 320px; }
.filter-field.select-field .select2-container { max-width: 100%; }
.filter-field.check-field {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.4rem;
}
.filter-field.check-field .form-label {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink-900);
}
.filter-toolbar-actions {
  display: flex;
  gap: 0.5rem;
  flex: 0 0 auto;
}

.chip-toggle {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink-700);
  font-size: 0.78rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}
.chip-toggle.active { background: var(--accent-700); border-color: var(--accent-700); color: #fff; }

/* ==========================================================================
   AI insights panel
   ========================================================================== */

.ai-panel {
  border-radius: var(--radius);
  background: linear-gradient(180deg, #322a7a, #1e1a4d 65%);
  color: #ded9fb;
  padding: 1.25rem 1.3rem;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.ai-panel::after {
  content: "";
  position: absolute;
  right: -60px; top: -60px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(166, 117, 43, 0.16), transparent 70%);
}
.ai-panel .ai-eyebrow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: #d9b877;
  font-weight: 600;
}
.ai-panel h3 { color: #fff; font-size: 1.05rem; margin: 0.4rem 0 0.9rem; }

.ai-insight-item {
  display: flex;
  gap: 0.65rem;
  padding: 0.65rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.ai-insight-item:first-of-type { border-top: none; }
.ai-insight-item i { color: #d9b877; margin-top: 0.15rem; }
.ai-insight-item .txt { font-size: 0.82rem; line-height: 1.45; color: #ded9fb; }
.ai-insight-item .txt strong { color: #fff; }

/* ==========================================================================
   Timeline (recent activity)
   ========================================================================== */

.timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.timeline::before {
  content: "";
  position: absolute; left: 15px; top: 4px; bottom: 4px;
  width: 1px; background: var(--border);
}
.timeline-item { position: relative; padding: 0 0 1.15rem 2.6rem; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
  position: absolute; left: 8px; top: 2px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--accent-600);
  display: grid; place-items: center;
}
.timeline-dot.gold { border-color: var(--gold-600); }
.timeline-dot.danger { border-color: var(--danger-700); }
.timeline-time { font-size: 0.72rem; color: var(--ink-500); }
.timeline-text { font-size: 0.85rem; color: var(--ink-900); margin-top: 0.1rem; }
.timeline-text strong { font-weight: 600; }

/* ==========================================================================
   Progress / mastery bars
   ========================================================================== */

.mastery-bar { height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
.mastery-bar > span { display: block; height: 100%; background: var(--accent-600); border-radius: 999px; }
.mastery-bar.low > span { background: var(--danger-700); }
.mastery-bar.mid > span { background: var(--warning-700); }

/* ==========================================================================
   Chart placeholders
   ========================================================================== */

.chart-placeholder {
  height: 220px;
  border-radius: var(--radius-sm);
  background:
    linear-gradient(180deg, transparent 0%, transparent calc(100% - 1px), var(--border) 100%),
    repeating-linear-gradient(0deg, var(--border) 0, var(--border) 1px, transparent 1px, transparent 25%);
  position: relative;
}

.sparkline { display: block; width: 100%; height: 44px; }

/* ==========================================================================
   Empty states
   ========================================================================== */

.empty-state {
  text-align: center;
  padding: 3.5rem 1.5rem;
  color: var(--ink-700);
}
.empty-state .icon-wrap {
  width: 56px; height: 56px; border-radius: 14px;
  background: var(--accent-050); color: var(--accent-700);
  display: grid; place-items: center; margin: 0 auto 1rem;
  font-size: 1.5rem;
}
.empty-state h4 { font-size: 1rem; margin-bottom: 0.35rem; }
.empty-state p { font-size: 0.85rem; max-width: 36ch; margin: 0 auto 1.1rem; }

/* ==========================================================================
   Loading skeletons
   ========================================================================== */

.skeleton {
  background: linear-gradient(90deg, var(--surface-sunken) 25%, #e3e9f0 37%, var(--surface-sunken) 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
  border-radius: 6px;
}
@keyframes skeleton-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: var(--surface-sunken); }
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.pagination-modern { display: flex; align-items: center; gap: 0.3rem; }
.pagination-modern .page-btn {
  min-width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-700);
  font-size: 0.82rem;
}
.pagination-modern .page-btn.active { background: var(--accent-700); border-color: var(--accent-700); color: #fff; }
.pagination-modern .page-btn:not(.active):not(:disabled):hover { background: var(--surface-sunken); }
.pagination-modern .page-btn:disabled { color: var(--ink-500); opacity: 0.5; }

/* ==========================================================================
   Alerts (banner variant)
   ========================================================================== */

.alert-modern {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-600);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 0.8rem 1rem;
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.85rem;
}
.alert-modern.warning { border-left-color: var(--warning-700); }
.alert-modern.danger { border-left-color: var(--danger-700); }
.alert-modern.success { border-left-color: var(--success-700); }
.alert-modern i { margin-top: 0.15rem; }

/* ==========================================================================
   Nav tabs
   ========================================================================== */

.nav-tabs-modern { border-bottom: 1px solid var(--border); gap: 0.25rem; }
.nav-tabs-modern .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--ink-700);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.6rem 0.2rem;
  margin-right: 1.2rem;
  border-radius: 0;
}
.nav-tabs-modern .nav-link.active { color: var(--accent-700); border-bottom-color: var(--accent-700); background: none; }

/* ==========================================================================
   Modal polish
   ========================================================================== */

.modal-content { border-radius: var(--radius); border: 1px solid var(--border); }
.modal-header { border-bottom: 1px solid var(--border); }
.modal-footer { border-top: 1px solid var(--border); }

/* ==========================================================================
   Utility rails
   ========================================================================== */

.avatar-stack { display: flex; }
.avatar-stack .row-avatar { margin-left: -8px; border: 2px solid var(--surface); }
.avatar-stack .row-avatar:first-child { margin-left: 0; }

/* ==========================================================================
   Theme switcher
   ========================================================================== */

.theme-switch-menu { padding: 0.6rem; min-width: 210px; }
.theme-switch-menu .theme-switch-label {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-500); padding: 0 0.3rem 0.5rem;
}
.theme-option {
  display: flex; align-items: center; gap: 0.6rem;
  width: 100%; border: 1px solid transparent; background: none;
  border-radius: var(--radius-sm); padding: 0.45rem 0.5rem;
  font-size: 0.83rem; color: var(--ink-900); text-align: left;
}
.theme-option:hover { background: var(--surface-sunken); }
.theme-option.active { border-color: var(--border-strong); background: var(--surface-sunken); font-weight: 600; }
.theme-option .swatch {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border-strong);
}
.theme-option .swatch.swatch-indigo { background: linear-gradient(135deg, #6156e3, #4a3fc4); }
.theme-option .swatch.swatch-slate { background: linear-gradient(135deg, #4f6885, #26364a); }
.theme-option .check { margin-left: auto; color: var(--accent-700); visibility: hidden; }
.theme-option.active .check { visibility: visible; }

/* ==========================================================================
   Select2 — reskinned to match the rest of the form controls (Select2
   ships its own "default" theme visually unrelated to Bootstrap; only the
   parts below are overridden, everything else — dropdown positioning,
   search box behaviour, keyboard nav — is stock Select2).
   ========================================================================== */

.select2-container--default .select2-selection--single {
  height: calc(1.5em + 0.75rem + 2px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  display: flex;
  align-items: center;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--ink-900);
  font-size: 0.875rem;
  line-height: 1.4;
  padding-left: 0.75rem;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--ink-500); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: calc(100% - 2px); right: 0.4rem; }
.select2-container--default.select2-container--disabled .select2-selection--single { background: var(--surface-sunken); color: var(--ink-500); }

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--accent-600);
  box-shadow: 0 0 0 3px var(--accent-100);
}

.select2-dropdown {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.select2-search--dropdown { padding: 0.5rem; border-bottom: 1px solid var(--border); }
.select2-search--dropdown .select2-search__field {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.6rem;
  font-size: 0.85rem;
}
.select2-search--dropdown .select2-search__field:focus {
  outline: none;
  border-color: var(--accent-600);
  box-shadow: 0 0 0 3px var(--accent-100);
}

.select2-results__option {
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--accent-700);
  color: #fff;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
  background: var(--accent-050);
  color: var(--ink-900);
}
.select2-results__option .select2-results__group { font-weight: 600; color: var(--ink-700); }

/* ==========================================================================
   Login (empty layout)
   ========================================================================== */
.empty-layout {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-sunken);
}
.login-shell { width: 100%; padding: 1.5rem; }
.login-card {
  max-width: 380px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.login-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.login-brand .brand-logo { height: 28px; }
.login-brand .name { font-weight: 700; color: var(--ink-900); }