/* ================================================================
   Accent colour themes — user-selectable, matching the "Colour
   Theme" picker in views/shared/header.php.

   Single source of truth: each theme only sets --brand-500/600/700
   (layout.css's original sidebar-brand tokens). Everything else that
   needs to follow the chosen accent — app.css's --primary family,
   Bootstrap's own --bs-primary/--bs-primary-rgb/--bs-link-color (so
   plain Bootstrap utility classes like text-primary/bg-primary/
   btn-outline-primary/border-primary, used all over the view layer,
   repaint too, not just this app's own .btn-primary/.tb-icon-btn
   etc.) — is DERIVED from --brand-500/600/700 in app.css's :root
   block via var(), so it updates automatically for every theme below
   without needing its own per-theme block here.

   No [data-accent] attribute set = the original app blue (kept as
   the literal default in layout.css's :root, not duplicated here).
   Works identically in light and dark mode — dark mode only changes
   page background/text/border tokens (see app.css), never the accent
   hue itself, so every one of these reads fine in both. ================================================================ */

:root[data-accent="teal"] {
  --brand-500: #0d9488; --brand-600: #0f766e; --brand-700: #115e59;
  --brand-500-rgb: 13, 148, 136;
}
:root[data-accent="steel"] {
  --brand-500: #475569; --brand-600: #334155; --brand-700: #1e293b;
  --brand-500-rgb: 71, 85, 105;
}
:root[data-accent="ocean"] {
  --brand-500: #2563eb; --brand-600: #1d4ed8; --brand-700: #1e40af;
  --brand-500-rgb: 37, 99, 235;
}
:root[data-accent="graphite"] {
  --brand-500: #334155; --brand-600: #1e293b; --brand-700: #0f172a;
  --brand-500-rgb: 51, 65, 85;
}
:root[data-accent="forest"] {
  --brand-500: #15803d; --brand-600: #166534; --brand-700: #14532d;
  --brand-500-rgb: 21, 128, 61;
}
:root[data-accent="sandstone"] {
  --brand-500: #a16207; --brand-600: #854d0e; --brand-700: #713f12;
  --brand-500-rgb: 161, 98, 7;
}
:root[data-accent="copper"] {
  --brand-500: #c2410c; --brand-600: #9a3412; --brand-700: #7c2d12;
  --brand-500-rgb: 194, 65, 12;
}
:root[data-accent="gold"] {
  --brand-500: #ca8a04; --brand-600: #a16207; --brand-700: #854d0e;
  --brand-500-rgb: 202, 138, 4;
}
:root[data-accent="ruby"] {
  --brand-500: #be123c; --brand-600: #9f1239; --brand-700: #881337;
  --brand-500-rgb: 190, 18, 60;
}
:root[data-accent="amethyst"] {
  --brand-500: #7c3aed; --brand-600: #6d28d9; --brand-700: #5b21b6;
  --brand-500-rgb: 124, 58, 237;
}
:root[data-accent="indigo"] {
  --brand-500: #4338ca; --brand-600: #3730a3; --brand-700: #312e81;
  --brand-500-rgb: 67, 56, 202;
}

/* ── Colour Theme picker (topbar) ─────────────────────────────────
   Swatch-grid popover — see views/shared/header.php for the markup
   and assets/js/app.js's applyAccent()/toggleAccentPicker() for the
   behaviour. Deliberately a hand-rolled popover, not a Bootstrap
   dropdown-menu, so its layout (label under each swatch, 4-per-row
   grid) doesn't have to fight Bootstrap's dropdown-item list styles. */
.accent-picker {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1200;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0;
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
  padding: 16px;
  width: 268px;
  display: none;
}
.accent-picker.show { display: block; }
.accent-picker-title {
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--muted); margin-bottom: 12px;
}
.accent-picker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 10px;
}
.accent-swatch-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.accent-swatch-dot {
  position: relative;
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  transition: transform .12s ease, border-color .12s ease;
}
.accent-swatch-btn:hover .accent-swatch-dot { transform: scale(1.08); }
.accent-swatch-btn[aria-pressed="true"] .accent-swatch-dot {
  border-color: var(--text);
  box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--text);
}
.accent-swatch-btn[aria-pressed="true"] .accent-swatch-dot::after {
  content: "\f633"; /* bootstrap-icons check-lg */
  font-family: "bootstrap-icons";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px;
}
.accent-swatch-label { font-size: 11px; color: var(--muted); }