/* Small overrides on top of Tailwind. Keep this file minimal — prefer utility classes. */

/* ---- Design tokens ----
   Single source of truth for the palette. New code (toasts, broadcast panel,
   flatpickr/Tom Select skins) reads these.

   The --zinc-* variables are the load-bearing part of the light/dark theme
   toggle: every existing template already writes literal Tailwind utilities
   like bg-zinc-950, text-zinc-100, border-zinc-800 (~30 templates, hundreds
   of call sites — see the grep tally in the commit message). Rather than
   rewriting all of that, _head.html's tailwind.config points the "zinc" and
   "black" color families at these variables instead of Tailwind's built-in
   hex values. Every utility class then just inherits whatever the variables
   currently resolve to — flipping the theme is a matter of overriding the
   variables once (below), not touching a single template.

   The trick that makes this a straight find-and-replace-free flip: the
   scale is mirrored end-to-end (50↔950, 100↔900, 200↔800, ..., 500 stays put)
   using Tailwind's own zinc hex values in both directions. Since dark mode
   already followed the convention "text uses the light end of the scale,
   surfaces use the dark end", mirroring the *variables* means text-zinc-100
   (near-white, for text, in dark mode) automatically becomes near-black in
   light mode — still correct for text — without knowing or caring that a
   given utility class was "for text" versus "for a background" at the CSS
   level.

   `black` gets the same treatment (dark theme: true black surfaces — page
   background, inputs — flip to white). `white` is deliberately NOT part of
   this system: every current bg-white/text-white use is white text sitting
   on a colored, non-neutral surface (buttons: bg-brand-600, bg-emerald-600,
   a notification badge) that keeps its own color regardless of theme, so
   the text should stay white in both. */
:root {
  --brand-400: #a78bfa;
  --brand-500: #8b5cf6;
  --brand-600: #7c3aed;

  --zinc-50:  #fafafa;
  --zinc-100: #f4f4f5;
  --zinc-200: #e4e4e7;
  --zinc-300: #d4d4d8;
  --zinc-400: #a1a1aa;
  --zinc-500: #71717a;
  --zinc-600: #52525b;
  --zinc-700: #3f3f46;
  --zinc-800: #27272a;
  --zinc-900: #18181b;
  --zinc-950: #09090b;
  --color-black: #000000;

  --color-surface-1: var(--zinc-950);
  --color-surface-2: var(--zinc-900);
  --color-border-1: var(--zinc-800);
  --color-border-2: var(--zinc-900);
  --color-text-2: var(--zinc-400);

  /* ---- RGB-triplet twins, for Tailwind's opacity-modifier utilities ----
     Templates use bg-brand-600/90, bg-zinc-950/80, bg-zinc-900/50, etc. all
     over the place. Tailwind implements that "/N" alpha suffix by emitting
     `rgb(var(--x) / <alpha-value>)` — which needs --x to hold bare "R G B"
     numbers, not a hex string. Every plain hex variable above was silently
     producing an invalid rgb() call for any class using a "/N" suffix (the
     browser drops the whole declaration), which is why the sidebar's
     "active page" pill (bg-brand-600/90) and every bg-zinc-950/NN sticky
     header rendered with NO background at all — invisible against a
     same-toned page in dark mode, and white-on-white once light mode made
     the fallback background actually contrast. These twins are used ONLY
     from tailwind.config (_head.html); every existing var(--zinc-N) /
     var(--color-*) reference elsewhere in this file and in the flatpickr/
     Tom Select skins keeps using the plain hex ones above, untouched. */
  --brand-400-rgb: 167 139 250;
  --brand-500-rgb: 139 92 246;
  --brand-600-rgb: 124 58 237;
  --zinc-50-rgb:  250 250 250;
  --zinc-100-rgb: 244 244 245;
  --zinc-200-rgb: 228 228 231;
  --zinc-300-rgb: 212 212 216;
  --zinc-400-rgb: 161 161 170;
  --zinc-500-rgb: 113 113 122;
  --zinc-600-rgb: 82 82 91;
  --zinc-700-rgb: 63 63 70;
  --zinc-800-rgb: 39 39 42;
  --zinc-900-rgb: 24 24 27;
  --zinc-950-rgb: 9 9 11;
  --color-black-rgb: 0 0 0;
}

:root[data-theme="light"] {
  --zinc-50:  #09090b;  /* was 950 */
  --zinc-100: #18181b;  /* was 900 */
  --zinc-200: #27272a;  /* was 800 */
  --zinc-300: #3f3f46;  /* was 700 */
  --zinc-400: #52525b;  /* was 600 */
  --zinc-500: #71717a;  /* unchanged — the scale's midpoint */
  --zinc-600: #a1a1aa;  /* was 400 */
  --zinc-700: #d4d4d8;  /* was 300 */
  --zinc-800: #e4e4e7;  /* was 200 */
  --zinc-900: #f4f4f5;  /* was 100 */
  --zinc-950: #fafafa;  /* was 50 */
  --color-black: #ffffff;
  /* The derived surface/border/text-2 tokens need no re-declaration here —
     they're defined once above as var(--zinc-N) references, which re-resolve
     automatically against whichever --zinc-N is in scope. */

  /* Same mirrored scale, RGB-triplet form. brand-*-rgb isn't re-declared —
     brand doesn't change between themes. */
  --zinc-50-rgb:  9 9 11;
  --zinc-100-rgb: 24 24 27;
  --zinc-200-rgb: 39 39 42;
  --zinc-300-rgb: 63 63 70;
  --zinc-400-rgb: 82 82 91;
  --zinc-500-rgb: 113 113 122;
  --zinc-600-rgb: 161 161 170;
  --zinc-700-rgb: 212 212 216;
  --zinc-800-rgb: 228 228 231;
  --zinc-900-rgb: 244 244 245;
  --zinc-950-rgb: 250 250 250;
  --color-black-rgb: 255 255 255;
}

/* Root-cause fix for the date/select dark-scheme inconsistency that used to be
   patched per-instance with `[color-scheme:dark]` on some inputs and not
   others (e.g. onboarding_new.html had it, _card_field.html didn't). */
input, select, textarea { color-scheme: dark; }

/* Smooth scroll for in-page anchors */
html { scroll-behavior: smooth; }

/* Slightly tighter focus rings for keyboard nav */
:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Tabular numbers in KPI values render nicer */
.tabular-nums { font-variant-numeric: tabular-nums; }

/* Scrollbar polish on long tables (WebKit) */
.scroll-pretty::-webkit-scrollbar { height: 10px; width: 10px; }
.scroll-pretty::-webkit-scrollbar-thumb { background: var(--zinc-700); border-radius: 8px; }
.scroll-pretty::-webkit-scrollbar-thumb:hover { background: var(--zinc-600); }
.scroll-pretty::-webkit-scrollbar-track { background: transparent; }

/* ---- Custom checkbox (used as class="cb") ----
   The single checkbox style for the whole app — including the bulk-select
   table checkboxes in control_db.html, which used to be a THIRD, different
   style (`accent-brand-500`, a native-tinted checkbox) alongside this one and
   a broken Tailwind-forms-plugin style elsewhere. One visual language now. */
input[type="checkbox"].cb {
  appearance: none;
  -webkit-appearance: none;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 0.35rem;
  border: 1.5px solid var(--zinc-600);
  background: var(--color-surface-1);
  cursor: pointer;
  position: relative;
  transition: border-color .15s, background .15s, box-shadow .15s;
  flex-shrink: 0;
}
input[type="checkbox"].cb:hover { border-color: var(--brand-500); }
input[type="checkbox"].cb:checked {
  background: var(--brand-600);
  border-color: var(--brand-600);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}
input[type="checkbox"].cb:indeterminate {
  background: var(--brand-600);
  border-color: var(--brand-600);
}
input[type="checkbox"].cb:indeterminate::after {
  content: "";
  position: absolute;
  left: 0.22rem; top: 0.5rem;
  width: 0.65rem; height: 2px;
  background: #fff;
}
input[type="checkbox"].cb:checked::after {
  content: "";
  position: absolute;
  left: 0.37rem; top: 0.14rem;
  width: 0.32rem; height: 0.62rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input[type="checkbox"].cb:focus-visible { outline: 2px solid #8b5cf680; outline-offset: 1px; }

/* ---- Custom radio (used as class="radio") — same treatment as .cb, round. ---- */
input[type="radio"].radio {
  appearance: none;
  -webkit-appearance: none;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 999px;
  border: 1.5px solid var(--zinc-600);
  background: var(--color-surface-1);
  cursor: pointer;
  position: relative;
  transition: border-color .15s, background .15s, box-shadow .15s;
  flex-shrink: 0;
}
input[type="radio"].radio:hover { border-color: var(--brand-500); }
input[type="radio"].radio:checked {
  border-color: var(--brand-600);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}
input[type="radio"].radio:checked::after {
  content: "";
  position: absolute;
  inset: 0.22rem;
  border-radius: 999px;
  background: var(--brand-600);
}
input[type="radio"].radio:focus-visible { outline: 2px solid #8b5cf680; outline-offset: 1px; }

/* ---- Buttons ----
   A real button system — solid chrome (background + border), not just
   colored text — so a clickable action reads as a button, not a stray label.
   `.btn-sm` shrinks padding/font for dense contexts (table rows, panels). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, opacity .15s;
  line-height: 1.2;
  white-space: nowrap;
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-sm { padding: 0.3rem 0.65rem; font-size: 0.75rem; border-radius: 0.4rem; }

.btn-primary { background: var(--brand-600); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--brand-500); }

.btn-secondary { background: var(--color-surface-2); border-color: var(--color-border-1); color: var(--zinc-200); }
.btn-secondary:hover:not(:disabled) { background: var(--zinc-800); border-color: var(--zinc-700); }

.btn-danger { background: rgba(239, 68, 68, 0.14); border-color: rgba(239, 68, 68, 0.35); color: #fca5a5; }
.btn-danger:hover:not(:disabled) { background: rgba(239, 68, 68, 0.24); border-color: rgba(239, 68, 68, 0.5); }

.btn-success { background: rgba(16, 185, 129, 0.14); border-color: rgba(16, 185, 129, 0.35); color: #6ee7b7; }
.btn-success:hover:not(:disabled) { background: rgba(16, 185, 129, 0.24); border-color: rgba(16, 185, 129, 0.5); }

/* Ghost: for actions that must stay unobtrusive in a busy row, but still
   reads as interactive (border on hover) instead of plain-text-that-happens-
   to-be-clickable. */
.btn-ghost { background: transparent; border-color: var(--color-border-1); color: var(--color-text-2); }
.btn-ghost:hover:not(:disabled) { color: var(--zinc-200); background: var(--color-surface-2); border-color: var(--zinc-700); }