/* ---------- Design tokens (dark is default; [data-theme="light"] overrides) ---------- */

:root {
  --bg: #0A1B28;
  --surface: #12293A;
  --surface2: #1B3548;
  --border: #26445A;
  --rail-bg: #0D2233;

  --ink: #EDEEE9;
  --muted: #8CA0AC;
  --faint: #6E8493;

  --navy: #6FADD6;
  --orange: #ED8B00;
  --teal: #3FBFA3;

  --tint-orange: rgba(237,139,0,0.14);
  --tint-orange-border: rgba(237,139,0,0.32);
  --tint-teal: rgba(63,191,163,0.14);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3), 0 4px 14px -4px rgba(0,0,0,0.5);
  --shadow-md: 0 1px 2px rgba(0,0,0,0.25), 0 12px 24px -14px rgba(0,0,0,0.55);
}

:root[data-theme="light"] {
  --bg: #F7F5F2;
  --surface: #FFFFFF;
  --surface2: #EDEAE5;
  --border: #E4E0D8;
  --rail-bg: #FBFAF8;

  --ink: #1A2530;
  --muted: #5F6B75;
  --faint: #9B9187;

  --navy: #003B5C;
  --orange: #ED8B00;
  --teal: #00816D;

  --tint-orange: #FFF3E3;
  --tint-orange-border: #F0DEC0;
  --tint-teal: #E1F3EF;

  --shadow-sm: 0 1px 2px rgba(26,37,48,0.04), 0 4px 12px -4px rgba(26,37,48,0.14);
  --shadow-md: 0 1px 2px rgba(26,37,48,0.03), 0 10px 22px -12px rgba(26,37,48,0.14);

  /* Accent used as text (the bright accent is fill-only in light mode). */
  --accent-ink: #A84C08;

  /* Status text. All pass 4.5:1 on --surface, --bg and the top of .ts-card. */
  --status-bad: #B91C1C;
  --status-good: #047857;
  --status-warn: #A84C08;
  --status-rose: #BE123C;
  --status-orange: #B83A0B;
  --status-info: #1D4ED8;
  --status-violet: #7E22CE;
  --status-bad-hover: #7F1D1D;
  --status-good-hover: #065F46;
}

/* ---------- Light-mode status text ----------
   Templates colour scores, risk flags and pass/fail with Tailwind's -200/-300/-400
   shades, which are tuned for the dark theme (red-400 is 2.8:1 on white, amber-400
   1.7:1). Remap them here once rather than per template. tests/test_light_mode_status_colors.py
   fails if a template uses a shade this block doesn't cover. */
:root[data-theme="light"] :is(.text-red-200, .text-red-300, .text-red-400) { color: var(--status-bad); }
:root[data-theme="light"] :is(.text-emerald-200, .text-emerald-300, .text-emerald-400,
                              .text-green-300, .text-green-400, .text-green-300\/70, .text-green-400\/80) { color: var(--status-good); }
:root[data-theme="light"] :is(.text-amber-200, .text-amber-300, .text-amber-400,
                              .text-yellow-300, .text-yellow-400, .text-amber-300\/70, .text-amber-400\/80) { color: var(--status-warn); }
:root[data-theme="light"] :is(.text-rose-200, .text-rose-300, .text-rose-400) { color: var(--status-rose); }
:root[data-theme="light"] .text-orange-400 { color: var(--status-orange); }
:root[data-theme="light"] :is(.text-blue-400, .text-sky-300) { color: var(--status-info); }
:root[data-theme="light"] :is(.text-purple-400, .text-pink-400) { color: var(--status-violet); }
/* The orange accent (#ED8B00) is fine as a fill but only 2.6:1 as small text, which is how
   labels and pills use it (41 places). Fills and borders keep the bright orange. */
:root[data-theme="light"] .text-\[var\(--orange\)\] { color: var(--accent-ink); }
/* A panel that stays dark in every theme (the login hero) keeps the bright accent: the dark ink above is unreadable on navy. */
:root[data-theme="light"] .on-dark .text-\[var\(--orange\)\] { color: var(--orange); }
/* Destructive hover (delete buttons) still needs a visible change in light mode. */
:root[data-theme="light"] :is(.hover\:text-red-200, .hover\:text-red-300, .hover\:text-red-400):hover { color: var(--status-bad-hover); }
:root[data-theme="light"] .hover\:text-green-300:hover { color: var(--status-good-hover); }

/* ---------- Hover tooltip (admin screens: what an error reference code means) ---------- */
.ts-tip {
  position: relative;
  cursor: help;
  border-bottom: 1px dotted var(--muted);
  outline: none;
}

.ts-tip::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  z-index: 60;
  width: max-content;
  max-width: 320px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.ts-tip:hover::after,
.ts-tip:focus::after {
  opacity: 1;
}

/* ---------- Card ---------- */

.ts-card {
  background: linear-gradient(180deg, var(--surface2) 0%, var(--bg) 100%);
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}

/* Text inside cards */
.ts-card h2 {
  color: var(--ink);
}

.ts-card p {
  color: var(--muted);
}

/* ---------- Button ---------- */

.ts-primary-btn {
  background: var(--orange);
  color: white;
  padding: 0.6rem 1.2rem;
  border-radius: 10px;
  font-weight: 600;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ts-primary-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 25px var(--tint-orange-border);
}

.ts-secondary-btn {
  background: transparent;
  color: var(--muted);
  padding: 0.6rem 1.2rem;
  border-radius: 10px;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}

.ts-secondary-btn:hover {
  color: var(--ink);
  background: var(--surface2);
}

/* ---------- Tabs (role="tab" content-switching tab bar) ---------- */
/* Shape (padding/radius/size/transition) comes from the same Tailwind
   utilities every call site already shares — this class owns only the
   color states, which is the part that had drifted between templates. */

.ts-tab {
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
}

.ts-tab:hover {
  color: var(--ink);
  background: var(--surface2);
}

.ts-tab.active-tab {
  color: #ffffff;
  background: var(--orange);
  border-color: var(--border);
  box-shadow: 0 -8px 28px var(--tint-orange-border);
}

/* ---------- Filter pills (range/status selector — <a> nav or JS-driven <button>) ---------- */

.ts-filter-pill {
  padding: 0.25rem 0.75rem;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  transition: background 0.15s ease, color 0.15s ease;
}

.ts-filter-pill:hover {
  background: var(--surface2);
}

.ts-filter-pill.active-filter {
  background: var(--orange);
  border-color: var(--orange);
  color: #ffffff;
}