/* ══════════════════════════════════════════════════════════════════════════
   ADMIN COMPAT REMAP — kit playbook §2 ("token-first for big legacy
   surfaces") applied to Tailwind utility classes.

   The admin console was authored dark (gray-950/900/800 + text-white).
   Rather than hand-rewriting ~50 views, this maps the ~15 workhorse
   utilities onto design-system tokens, so every admin screen becomes
   THEME-AWARE at once: tokens render it light or dark per the kit.
   !important is required to beat the Tailwind CDN's runtime-injected rules.

   Per-screen polish then happens view-by-view (replacing utilities with
   real DS classes), after which a screen stops needing this shim. Delete
   the file when the last admin view is fully migrated.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Grounds + surfaces ── */
.bg-gray-950 { background-color: var(--paper) !important; }
.bg-gray-900 { background-color: var(--surface) !important; }
.bg-gray-800 { background-color: var(--mist) !important; }
.bg-gray-700 { background-color: color-mix(in srgb, var(--mist) 85%, var(--ink) 10%) !important; }
.hover\:bg-gray-800:hover { background-color: var(--mist) !important; }
.hover\:bg-gray-700:hover { background-color: color-mix(in srgb, var(--mist) 85%, var(--ink) 10%) !important; }
/* translucent panel variants (bg-gray-900/30 etc.) */
[class*="bg-gray-900/"] { background-color: color-mix(in srgb, var(--surface) 70%, transparent) !important; }
[class*="bg-gray-800/"] { background-color: color-mix(in srgb, var(--mist) 60%, transparent) !important; }

/* ── Hairlines ── */
.border-gray-600, .border-gray-700, .border-gray-800,
[class*="border-gray-800/"], [class*="border-gray-700/"] { border-color: var(--border) !important; }
.divide-gray-800 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border) !important; }

/* ── Text ── */
.text-white, .text-gray-100, .text-gray-200 { color: var(--ink) !important; }
.text-gray-300 { color: color-mix(in srgb, var(--ink) 82%, var(--text)) !important; }
.text-gray-400, .text-gray-500 { color: var(--text) !important; }
.text-gray-600 { color: color-mix(in srgb, var(--text) 55%, transparent) !important; }
.hover\:text-white:hover { color: var(--ink) !important; }
.placeholder-gray-500::placeholder, .placeholder-gray-600::placeholder { color: #8B95A3 !important; }

/* ── ON-COLOR text stays literal white (kit gotcha #1) — ONLY on SOLID
      mid-tone fills (buttons/chips). Translucent -900/NN tinted panels are
      surfaces, not fills: their text must flip to ink like everything else. ── */
.bg-blue-500.text-white, .bg-blue-600.text-white, .bg-blue-700.text-white,
.bg-blue-500 .text-white, .bg-blue-600 .text-white, .bg-blue-700 .text-white,
.bg-purple-600.text-white, .bg-purple-700.text-white,
.bg-purple-600 .text-white, .bg-purple-700 .text-white,
.bg-emerald-600.text-white, .bg-emerald-700.text-white,
.bg-emerald-600 .text-white, .bg-emerald-700 .text-white,
.bg-green-600.text-white, .bg-green-700.text-white,
.bg-green-600 .text-white, .bg-green-700 .text-white,
.bg-red-600.text-white, .bg-red-700.text-white,
.bg-red-600 .text-white, .bg-red-700 .text-white,
.bg-amber-600.text-white, .bg-amber-700.text-white,
.bg-amber-600 .text-white, .bg-amber-700 .text-white,
.bg-indigo-600.text-white, .bg-indigo-700.text-white,
.bg-indigo-600 .text-white, .bg-indigo-700 .text-white,
.bg-teal-600.text-white, .bg-teal-700.text-white,
.bg-teal-600 .text-white, .bg-teal-700 .text-white {
  color: var(--white) !important;
}

/* Solid -800 accents (badges like "Recommended") become tinted surfaces. */
.bg-blue-800 { background-color: color-mix(in srgb, var(--primary) 22%, var(--surface)) !important; }
.bg-purple-800 { background-color: color-mix(in srgb, #7C3AED 20%, var(--surface)) !important; }

/* ── Primary actions → brand primary ── */
.bg-blue-600, .bg-blue-700 { background-color: var(--primary) !important; }
.hover\:bg-blue-500:hover, .hover\:bg-blue-600:hover { background-color: var(--blue-deep) !important; }
.text-blue-300, .text-blue-400 { color: var(--primary) !important; }
.hover\:text-blue-300:hover { color: var(--blue-deep) !important; }
.focus\:ring-blue-500:focus { --tw-ring-color: var(--primary) !important; }

/* Purple (Preview et al.) folds into the blue family — no purple in the DS. */
.bg-purple-700 { background-color: var(--blue-deep) !important; }
.hover\:bg-purple-600:hover { background-color: var(--primary) !important; }

/* ── High-contrast CTA (was bg-white text-gray-900) → --fill/--white ── */
.bg-white.text-gray-900, button.bg-white, a.bg-white.font-semibold {
  background-color: var(--fill) !important; color: var(--white) !important;
}
.hover\:bg-gray-100:hover { background-color: var(--primary) !important; }

/* Semantic states (green/amber/red/emerald/etc.) intentionally NOT remapped —
   success/warning/danger keep their conventional hues in both themes. */

/* ── Semantic hue panels + text (authored dark-translucent; must read on BOTH
      grounds). Panels tint the surface with the hue; text mixes the hue with
      --ink, so it darkens in light mode and lightens in dark mode. ── */
[class*="bg-blue-900/"]    { background-color: color-mix(in srgb, #296CAC 14%, var(--surface)) !important; }
[class*="bg-indigo-900/"]  { background-color: color-mix(in srgb, #6366F1 12%, var(--surface)) !important; }
[class*="bg-purple-900/"]  { background-color: color-mix(in srgb, #7C3AED 12%, var(--surface)) !important; }
[class*="bg-emerald-900/"], [class*="bg-green-900/"] { background-color: color-mix(in srgb, #059669 12%, var(--surface)) !important; }
[class*="bg-amber-900/"]   { background-color: color-mix(in srgb, #D97706 14%, var(--surface)) !important; }
[class*="bg-red-900/"]     { background-color: color-mix(in srgb, #DC2626 12%, var(--surface)) !important; }
[class*="bg-teal-900/"]    { background-color: color-mix(in srgb, #0D9488 12%, var(--surface)) !important; }
[class*="bg-orange-900/"]  { background-color: color-mix(in srgb, #EA580C 12%, var(--surface)) !important; }

.text-blue-100, .text-blue-200, .text-blue-300, .text-blue-400, .text-blue-500 { color: var(--primary) !important; }
.text-red-100, .text-red-200, .text-red-300, .text-red-400 { color: color-mix(in srgb, #DC2626 65%, var(--ink)) !important; }
.text-green-100, .text-green-200, .text-green-300, .text-green-400,
.text-emerald-100, .text-emerald-200, .text-emerald-300, .text-emerald-400 { color: color-mix(in srgb, #059669 65%, var(--ink)) !important; }
.text-amber-100, .text-amber-200, .text-amber-300, .text-amber-400 { color: color-mix(in srgb, #B45309 70%, var(--ink)) !important; }
.text-purple-200, .text-purple-300, .text-purple-400 { color: color-mix(in srgb, #7C3AED 65%, var(--ink)) !important; }
.text-indigo-200, .text-indigo-300, .text-indigo-400 { color: color-mix(in srgb, #6366F1 65%, var(--ink)) !important; }
.text-teal-200, .text-teal-300, .text-teal-400    { color: color-mix(in srgb, #0D9488 65%, var(--ink)) !important; }
.text-orange-200, .text-orange-300, .text-orange-400 { color: color-mix(in srgb, #EA580C 65%, var(--ink)) !important; }

/* Hue hairlines follow the same trick. */
[class*="border-blue-7"], [class*="border-blue-8"]     { border-color: color-mix(in srgb, #296CAC 45%, var(--border)) !important; }
[class*="border-purple-7"], [class*="border-purple-8"] { border-color: color-mix(in srgb, #7C3AED 40%, var(--border)) !important; }
[class*="border-emerald-7"], [class*="border-green-7"] { border-color: color-mix(in srgb, #059669 40%, var(--border)) !important; }
[class*="border-amber-7"], [class*="border-amber-8"]   { border-color: color-mix(in srgb, #D97706 40%, var(--border)) !important; }
[class*="border-red-7"], [class*="border-red-8"]       { border-color: color-mix(in srgb, #DC2626 40%, var(--border)) !important; }
[class*="border-indigo-7"], [class*="border-teal-7"], [class*="border-orange-7"] { border-color: var(--border) !important; }

/* Gradient panels authored to end on gray-900 end on the surface instead. */
.to-gray-900 { --tw-gradient-to: var(--surface) !important; }
.from-gray-900 { --tw-gradient-from: var(--surface) !important; }

/* ── Theme-aware wordmark (kit gotcha #5: a half-white logo vanishes on
      white). _sidebar renders both PNGs; exactly one shows per theme. ── */
.lb-logo-light { display: none; }
:root[data-theme="light"] .lb-logo-dark { display: none; }
:root[data-theme="light"] .lb-logo-light { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .lb-logo-dark { display: none; }
  :root:not([data-theme="dark"]) .lb-logo-light { display: block; }
}

/* Yellow family (the "running" status chips) — was missing from the hue remap,
   leaving in-flight pipeline runs near-invisible in light mode. */
[class*="bg-yellow-900/"] { background-color: color-mix(in srgb, #CA8A04 14%, var(--surface)) !important; }
.text-yellow-100, .text-yellow-200, .text-yellow-300, .text-yellow-400 { color: color-mix(in srgb, #A16207 70%, var(--ink)) !important; }
[class*="border-yellow-7"], [class*="border-yellow-8"] { border-color: color-mix(in srgb, #CA8A04 40%, var(--border)) !important; }

/* Cyan family (newsletter "Poll inbox now" button et al.), violet (persona
   chips), and pink — the remaining hues absent from the remap. Attribute
   selectors catch opacity-suffixed classes like text-violet-400/70. */
[class*="bg-cyan-900/"] { background-color: color-mix(in srgb, #0891B2 14%, var(--surface)) !important; }
.text-cyan-100, .text-cyan-200, .text-cyan-300, .text-cyan-400 { color: color-mix(in srgb, #0E7490 70%, var(--ink)) !important; }
[class*="border-cyan-7"], [class*="border-cyan-8"] { border-color: color-mix(in srgb, #0891B2 40%, var(--border)) !important; }
/* -950/NN translucent slabs (expanded log rows, error boxes, info panels) —
   authored as near-black washes; unremapped they render as dark slabs on the
   light theme. Recessed surface for gray; soft hue tints for the rest. */
[class*="bg-gray-950/"]   { background-color: color-mix(in srgb, var(--mist) 55%, var(--paper)) !important; }
[class*="bg-blue-950/"]   { background-color: color-mix(in srgb, #296CAC 10%, var(--surface)) !important; }
[class*="bg-red-950/"]    { background-color: color-mix(in srgb, #DC2626 10%, var(--surface)) !important; }
[class*="bg-purple-950/"] { background-color: color-mix(in srgb, #7C3AED 10%, var(--surface)) !important; }
[class*="bg-amber-950/"]  { background-color: color-mix(in srgb, #D97706 10%, var(--surface)) !important; }
[class*="bg-emerald-950/"] { background-color: color-mix(in srgb, #059669 10%, var(--surface)) !important; }
[class*="bg-violet-900/"], [class*="bg-violet-800/"] { background-color: color-mix(in srgb, #7C3AED 12%, var(--surface)) !important; }
[class*="text-violet-1"], [class*="text-violet-2"], [class*="text-violet-3"], [class*="text-violet-4"] { color: color-mix(in srgb, #7C3AED 65%, var(--ink)) !important; }
[class*="border-violet-7"] { border-color: color-mix(in srgb, #7C3AED 40%, var(--border)) !important; }
.text-pink-400 { color: color-mix(in srgb, #DB2777 65%, var(--ink)) !important; }