/*
 * edcomatic — Theme Palette System
 * ─────────────────────────────────────────────────────────────────────────────
 * Four professional palettes, each expressed as a [data-theme="..."] block.
 * To switch the active theme:
 *   Option A (site-wide):  change ACTIVE_THEME in edcomatic/settings.py
 *   Option B (per-session): use the theme switcher in the Admin Panel
 *
 * Every palette overrides the same set of design tokens so swapping is safe
 * and total — no palette-specific CSS exists anywhere else.
 *
 * Usage in base.html:  <html data-theme="{{ active_theme }}">
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── P1: Clinical Blue — traditional pharma / hospital ───────────────────── */
[data-theme="clinical-blue"] {
  /* Navigation */
  --nav-bg:          #1a2b4a;
  --nav-bg-hover:    #22365e;
  --nav-text:        #e2e8f0;
  --nav-text-muted:  #94a3b8;
  --nav-border:      #243455;
  --nav-active-bg:   #2563eb;

  /* Bootstrap primary override */
  --bs-primary:      #2563eb;
  --bs-primary-rgb:  37, 99, 235;
  --bs-link-color:   #2563eb;

  /* Accent / highlight */
  --accent:          #0ea5e9;
  --accent-rgb:      14, 165, 233;

  /* Admin panel / offcanvas sidebar */
  --panel-bg:        #f0f4ff;
  --panel-border:    #bfdbfe;

  /* Status badge overrides (inherit Bootstrap defaults unless listed) */
  --badge-primary-bg: #2563eb;

  /* Chart.js palette — injected as JS via template */
  --chart-1: #2563eb;
  --chart-2: #0ea5e9;
  --chart-3: #06b6d4;
  --chart-4: #3b82f6;
}

/* ── P2: Slate + Teal — modern SaaS / CRO ───────────────────────────────── */
[data-theme="slate-teal"] {
  --nav-bg:          #1e293b;
  --nav-bg-hover:    #273548;
  --nav-text:        #e2e8f0;
  --nav-text-muted:  #94a3b8;
  --nav-border:      #2d3f56;
  --nav-active-bg:   #0d9488;

  --bs-primary:      #0d9488;
  --bs-primary-rgb:  13, 148, 136;
  --bs-link-color:   #0d9488;

  --accent:          #14b8a6;
  --accent-rgb:      20, 184, 166;

  --panel-bg:        #f0fdfb;
  --panel-border:    #99f6e4;

  --badge-primary-bg: #0d9488;

  --chart-1: #0d9488;
  --chart-2: #14b8a6;
  --chart-3: #2dd4bf;
  --chart-4: #06b6d4;
}

/* ── P3: Charcoal + Violet — premium / enterprise ───────────────────────── */
[data-theme="charcoal-violet"] {
  --nav-bg:          #18181b;
  --nav-bg-hover:    #27272a;
  --nav-text:        #e4e4e7;
  --nav-text-muted:  #a1a1aa;
  --nav-border:      #3f3f46;
  --nav-active-bg:   #7c3aed;

  --bs-primary:      #7c3aed;
  --bs-primary-rgb:  124, 58, 237;
  --bs-link-color:   #7c3aed;

  --accent:          #a78bfa;
  --accent-rgb:      167, 139, 250;

  --panel-bg:        #faf5ff;
  --panel-border:    #ddd6fe;

  --badge-primary-bg: #7c3aed;

  --chart-1: #7c3aed;
  --chart-2: #a78bfa;
  --chart-3: #c4b5fd;
  --chart-4: #8b5cf6;
}

/* ── P4: Forest + Amber — health / clinical trials ──────────────────────── */
[data-theme="forest-amber"] {
  --nav-bg:          #1c3a2a;
  --nav-bg-hover:    #254d38;
  --nav-text:        #ecfdf5;
  --nav-text-muted:  #6ee7b7;
  --nav-border:      #2d5940;
  --nav-active-bg:   #059669;

  --bs-primary:      #059669;
  --bs-primary-rgb:  5, 150, 105;
  --bs-link-color:   #059669;

  --accent:          #f59e0b;
  --accent-rgb:      245, 158, 11;

  --panel-bg:        #f0fdf4;
  --panel-border:    #bbf7d0;

  --badge-primary-bg: #059669;

  --chart-1: #059669;
  --chart-2: #f59e0b;
  --chart-3: #10b981;
  --chart-4: #34d399;
}

/* ── Bootstrap component overrides — use tokens, works for all themes ─────── */

/* Primary buttons */
.btn-primary {
  background-color: var(--bs-primary) !important;
  border-color:     var(--bs-primary) !important;
  color:            #fff !important;
}
.btn-primary:hover,
.btn-primary:focus {
  filter: brightness(0.88);
}

/* Outline primary buttons */
.btn-outline-primary {
  color:        var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}
.btn-outline-primary:hover {
  background-color: var(--bs-primary) !important;
  color: #fff !important;
}

/* Links */
a { color: var(--bs-link-color); }

/* Badge — bg-primary */
.badge.bg-primary:not([class*="bg-opacity"]) { background-color: var(--bs-primary) !important; } /* a tinted badge (bg-opacity-10) keeps its tint, else its text vanishes */

/* Navbar */
.navbar-edcomatic {
  background-color: var(--nav-bg) !important;
  border-bottom: 1px solid var(--nav-border);
}
.navbar-edcomatic .nav-link {
  color: var(--nav-text) !important;
  font-size: 0.8125rem;
  padding: 0.3rem 0.65rem;
  border-radius: 4px;
  transition: background 0.15s;
}
.navbar-edcomatic .nav-link:hover,
.navbar-edcomatic .nav-link.active {
  background-color: var(--nav-bg-hover);
  color: #fff !important;
}
.navbar-edcomatic .navbar-brand {
  color: #fff !important;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.navbar-edcomatic .navbar-text { color: var(--nav-text-muted) !important; }
.navbar-edcomatic .dropdown-menu {
  border-color: var(--nav-border);
}
.navbar-edcomatic .dropdown-item:hover {
  background-color: var(--panel-bg);
}

/* Study selector in navbar */
.study-selector select {
  background-color: var(--nav-bg-hover) !important;
  color: var(--nav-text) !important;
  border-color: var(--nav-border) !important;
  font-size: 0.8rem;
}

/* Admin panel */
.admin-panel-bg {
  background-color: var(--panel-bg);
  border-left: 3px solid var(--panel-border);
}

/* Active study badge in navbar */
.study-badge {
  background-color: var(--nav-active-bg);
  color: #fff;
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}