/* Eurobillr — design tokens & component overrides
 * Tailwind handles the bulk of the work via CDN; this file holds:
 *   - Brand color tokens
 *   - Typography refinements
 *   - Dark mode tweaks
 *   - Print rules for invoice PDFs
 */

/* Required for Alpine.js x-cloak directive */
[x-cloak] { display: none !important; }

:root {
  --eb-navy:    #0c1527;
  --eb-blue:    #2563eb;
  --eb-blue-2:  #1d4ed8;
  --eb-mint:    #d1fae5;
  --eb-success: #16a34a;
  --eb-danger:  #dc2626;
  --eb-warning: #f59e0b;
  --eb-border:  #e2e8f0;
}

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-feature-settings: 'cv02','cv03','cv04','cv11'; }

/* Tabular numbers for monetary columns */
.tabular-nums, table td.right, table td:last-child { font-variant-numeric: tabular-nums; }

/* Subtle scrollbar in app shell */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Dark mode (toggled via .dark on body) */
.dark { background: #0b1224 !important; color: #e2e8f0; }
.dark .bg-white          { background-color: #0f172a !important; }
.dark .bg-slate-50       { background-color: #0b1224 !important; }
.dark .bg-slate-100      { background-color: #1e293b !important; }
.dark .bg-slate-200      { background-color: #334155 !important; }
.dark .border-slate-200  { border-color: #1e293b !important; }
.dark .border-slate-300  { border-color: #334155 !important; }
.dark .text-slate-900    { color: #f8fafc !important; }
.dark .text-slate-800    { color: #e2e8f0 !important; }
.dark .text-slate-700    { color: #cbd5e1 !important; }
.dark .text-slate-600    { color: #94a3b8 !important; }
.dark .text-slate-500    { color: #94a3b8 !important; }
.dark .text-slate-400    { color: #64748b !important; }
.dark thead.bg-slate-50  { background-color: #111c33 !important; }

/* Tinted status backgrounds — keep the brand hue but darken so the
   matching dark text below still has contrast. */
.dark .bg-emerald-50, .dark .bg-emerald-100 { background-color: rgba(16, 185, 129, .15) !important; }
.dark .bg-blue-50,    .dark .bg-blue-100    { background-color: rgba(59, 130, 246, .15) !important; }
.dark .bg-brand-50                          { background-color: rgba(37,  99, 235, .15) !important; }
.dark .bg-amber-50,   .dark .bg-amber-100   { background-color: rgba(245, 158,  11, .15) !important; }
.dark .bg-rose-50,    .dark .bg-rose-100    { background-color: rgba(244,  63,  94, .15) !important; }
.dark .bg-red-50,     .dark .bg-red-100     { background-color: rgba(239,  68,  68, .15) !important; }
.dark .bg-violet-50,  .dark .bg-violet-100  { background-color: rgba(139,  92, 246, .15) !important; }
.dark .bg-indigo-50,  .dark .bg-indigo-100  { background-color: rgba( 99, 102, 241, .15) !important; }
.dark .bg-yellow-50,  .dark .bg-yellow-100  { background-color: rgba(234, 179,   8, .15) !important; }
.dark .bg-purple-50,  .dark .bg-purple-100  { background-color: rgba(168,  85, 247, .15) !important; }
.dark .bg-pink-50,    .dark .bg-pink-100    { background-color: rgba(236,  72, 153, .15) !important; }
.dark .bg-cyan-50,    .dark .bg-cyan-100    { background-color: rgba(6,   182, 212, .15) !important; }
.dark .bg-teal-50,    .dark .bg-teal-100    { background-color: rgba(20,  184, 166, .15) !important; }
.dark .bg-orange-50,  .dark .bg-orange-100  { background-color: rgba(249, 115,  22, .15) !important; }
.dark .bg-sky-50,     .dark .bg-sky-100     { background-color: rgba(14,  165, 233, .15) !important; }
.dark .bg-lime-50,    .dark .bg-lime-100    { background-color: rgba(132, 204,  22, .15) !important; }
.dark .bg-fuchsia-50, .dark .bg-fuchsia-100 { background-color: rgba(217,  70, 239, .15) !important; }

/* Tinted text — lift to the 300/400 band so it reads on the dark
   background without losing the colour cue. */
.dark .text-emerald-500, .dark .text-emerald-600, .dark .text-emerald-700,
.dark .text-emerald-800                          { color: #6ee7b7 !important; }
.dark .text-blue-500,    .dark .text-blue-600,    .dark .text-blue-700,
.dark .text-blue-800                              { color: #93c5fd !important; }
.dark .text-brand-500,   .dark .text-brand-600                            { color: #93c5fd !important; }
.dark .text-amber-500,   .dark .text-amber-600,   .dark .text-amber-700,
.dark .text-amber-800,   .dark .text-amber-900                            { color: #fcd34d !important; }
.dark .text-rose-500,    .dark .text-rose-600,    .dark .text-rose-700,
.dark .text-rose-800                              { color: #fda4af !important; }
.dark .text-red-500,     .dark .text-red-600,     .dark .text-red-700,
.dark .text-red-800                               { color: #fca5a5 !important; }
.dark .text-violet-500,  .dark .text-violet-600,  .dark .text-violet-700,
.dark .text-violet-800                            { color: #c4b5fd !important; }
.dark .text-indigo-500,  .dark .text-indigo-600,  .dark .text-indigo-700  { color: #a5b4fc !important; }
.dark .text-purple-600,  .dark .text-purple-700,  .dark .text-purple-800  { color: #d8b4fe !important; }
.dark .text-pink-600,    .dark .text-pink-700                             { color: #f9a8d4 !important; }
.dark .text-cyan-600,    .dark .text-cyan-700                             { color: #67e8f9 !important; }
.dark .text-teal-600,    .dark .text-teal-700                             { color: #5eead4 !important; }
.dark .text-orange-600,  .dark .text-orange-700                           { color: #fdba74 !important; }
.dark .text-yellow-600,  .dark .text-yellow-700                           { color: #fde047 !important; }
.dark .text-lime-600,    .dark .text-lime-700                             { color: #bef264 !important; }
.dark .text-fuchsia-600, .dark .text-fuchsia-700                          { color: #f0abfc !important; }
.dark .text-sky-600,     .dark .text-sky-700                              { color: #7dd3fc !important; }

/* Coloured borders — soften so they don't clash with the dark surface */
.dark .border-red-200    { border-color: rgba(239, 68, 68, .35) !important; }
.dark .border-amber-200  { border-color: rgba(245, 158, 11, .35) !important; }
.dark .border-emerald-200{ border-color: rgba(16, 185, 129, .35) !important; }
.dark .border-blue-200   { border-color: rgba(59, 130, 246, .35) !important; }

/* Hover bg-* utilities — make sure hover doesn't flash a bright tint */
.dark .hover\:bg-slate-50:hover  { background-color: #1e293b !important; }
.dark .hover\:bg-slate-100:hover { background-color: #334155 !important; }
.dark .hover\:bg-red-50:hover    { background-color: rgba(239, 68, 68, .25) !important; }

/* Inputs in dark mode */
.dark input, .dark select, .dark textarea {
  background-color: #1e293b;
  color: #f8fafc;
  border-color: #334155;
}
.dark input::placeholder, .dark textarea::placeholder { color: #64748b; }

/* Buttons inherit body / parent text colour in dark mode (browser
   defaults ship `color: ButtonText` which renders as black on dark
   surfaces and made the "Manage in Stripe portal" button look empty).
   Explicit text-X-Y utility classes below still win via class
   specificity. */
.dark button { color: inherit; }

/* Headings without an explicit text-* class default to body colour in
   dark mode rather than the browser's near-black default. */
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 { color: #f8fafc; }

/* Generic links inside the app shell: keep brand-blue but lift the
   shade so it reads on a dark surface. Explicit text-* classes still
   override this. */
.dark a:not([class*="text-"]) { color: #93c5fd; }

/* ── Dark-mode catch-alls for content that has no explicit text-* class ──
   The hand-written templates often lean on the body's text-slate-900
   default for table cells, paragraphs and amount displays. In dark
   mode those inherit from `body.app-shell` (overridden above), but
   browser default styles for some elements (TD, TH, P inside complex
   ancestors) sometimes break the inheritance chain. These rules
   guarantee that money values, table data and paragraph text stay
   readable across every page. */
.dark table, .dark thead, .dark tbody, .dark tfoot,
.dark tr, .dark th, .dark td               { color: inherit; }
.dark .tabular-nums                        { color: inherit; }
.dark p, .dark span, .dark dd, .dark dt,
.dark li, .dark label                      { color: inherit; }

/* Native form-control accent colour & color scheme so checkboxes,
   radios, range sliders and date pickers don't render a bright white
   widget on the dark surface. */
.dark { color-scheme: dark; }
.dark input[type="checkbox"],
.dark input[type="radio"]                  { accent-color: #2563eb; }

/* Striped / hover rows on tables. Without these the alternate-row
   shading is invisible on dark mode (white-on-white). */
.dark tbody tr:nth-child(even)             { background-color: rgba(148, 163, 184, .04); }
.dark .hover\:bg-blue-50:hover             { background-color: rgba(59, 130, 246, .15) !important; }
.dark .hover\:bg-emerald-50:hover          { background-color: rgba(16, 185, 129, .15) !important; }
.dark .hover\:bg-amber-50:hover            { background-color: rgba(245, 158, 11, .15) !important; }
.dark .hover\:bg-rose-50:hover             { background-color: rgba(244,  63,  94, .15) !important; }
.dark .hover\:bg-violet-50:hover           { background-color: rgba(139,  92, 246, .15) !important; }
.dark .hover\:bg-purple-50:hover           { background-color: rgba(168,  85, 247, .15) !important; }
.dark .hover\:bg-indigo-50:hover           { background-color: rgba( 99, 102, 241, .15) !important; }
.dark .hover\:bg-brand-500\/40:hover       { background-color: rgba(37,  99, 235, .25) !important; }

/* Card surfaces that aren't strictly bg-white but use a tinted slate */
.dark .bg-slate-800, .dark .bg-slate-900   { background-color: #0f172a !important; }

/* Divide-y lines between rows */
.dark .divide-slate-100 > * + *,
.dark .divide-slate-200 > * + *            { border-color: #1e293b !important; }

/* Disabled / placeholder states */
.dark .text-slate-400                      { color: #64748b !important; }
.dark [disabled], .dark .opacity-50,
.dark .text-slate-300                      { color: #475569 !important; }

/* Dark-mode borders for tinted callouts */
.dark .border-rose-200                     { border-color: rgba(244,  63,  94, .35) !important; }
.dark .border-violet-200                   { border-color: rgba(139,  92, 246, .35) !important; }
.dark .border-purple-200                   { border-color: rgba(168,  85, 247, .35) !important; }
.dark .border-brand-500\/40                { border-color: rgba(37,  99, 235, .50) !important; }

/* Selects keep the dropdown arrow from disappearing in dark mode */
.dark select { background-image: none; }

/* Money value emphasis — when tabular-nums sits inside a colored bg, still readable */
.dark .text-2xl.tabular-nums,
.dark .text-3xl.tabular-nums,
.dark .text-xl.tabular-nums { color: inherit; }

/* Status pill `bg-purple-50 text-purple-700` (refunded invoice etc.) */
.dark .text-purple-700, .dark .text-purple-800 { color: #d8b4fe !important; }

/* The "Manage in Stripe portal" / billing buttons — explicit overrides
   make sure a light-gray button surface flips to a slate one. */
.dark .bg-gray-100                         { background-color: #1e293b !important; }
.dark .bg-gray-200                         { background-color: #334155 !important; }
.dark .text-gray-600, .dark .text-gray-700,
.dark .text-gray-800, .dark .text-gray-900 { color: #e2e8f0 !important; }

/* Subtle hover lift for cards on landing */
.lift { transition: transform .25s ease, box-shadow .25s ease; }
.lift:hover { transform: translateY(-2px); box-shadow: 0 25px 50px -12px rgba(15, 23, 42, .15); }

/* ── Modern app shell — premium UI utilities ───────────────────── */

/* Smooth page enter animation: every authenticated page fades + lifts on
   first paint so navigations feel instant rather than blank-then-pop. */
@keyframes app-page-enter {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0);   }
}
.app-page-enter { animation: app-page-enter .28s cubic-bezier(.2,.8,.2,1) both; }

/* Skeleton shimmer for loading states. Apply .skeleton to any block to
   get a soft pulsing placeholder. */
@keyframes app-skeleton {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, #e2e8f0 0%, #f1f5f9 50%, #e2e8f0 100%);
  background-size: 200% 100%;
  animation: app-skeleton 1.4s ease-in-out infinite;
  border-radius: 8px;
}

/* Sidebar collapse — width transitions for a smooth icon-only mode */
.app-sidebar              { transition: width .25s cubic-bezier(.4,0,.2,1); }
.app-sidebar-label        { transition: opacity .15s ease, max-width .25s ease; }
.app-sidebar.is-collapsed .app-sidebar-label { opacity: 0; max-width: 0; pointer-events: none; }
.app-sidebar.is-collapsed .app-sidebar-tooltip { display: block; }
.app-sidebar-tooltip      {
  display: none; position: absolute; left: calc(100% + 12px); top: 50%;
  transform: translateY(-50%); background: #0f172a; color: #fff;
  font-size: 11px; padding: 4px 8px; border-radius: 6px; white-space: nowrap;
  z-index: 50; box-shadow: 0 8px 24px -8px rgba(0,0,0,.4);
  opacity: 0; transition: opacity .15s ease;
}
.app-sidebar.is-collapsed .app-sidebar-link:hover .app-sidebar-tooltip { opacity: 1; }
.app-sidebar.is-collapsed .app-sidebar-section-label { opacity: 0; height: 0; margin: 0; padding: 0; pointer-events: none; }
.app-sidebar.is-collapsed .app-sidebar-section { padding-top: 8px; padding-bottom: 8px; }
.app-sidebar.is-collapsed .app-sidebar-link { justify-content: center; padding-left: 0; padding-right: 0; }

/* Active-link accent: bright solid bar on the left edge with a halo —
   non-tech users scan by recognition, not reading, so the active page
   needs to "pop" at a glance against the navy rail. */
.app-sidebar-link[aria-current="page"]::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 4px;
  background: #60a5fa; /* light blue-400 — high contrast on navy */
  border-radius: 0 4px 4px 0;
  box-shadow: 0 0 12px 0 rgba(96, 165, 250, .55);
}
.app-sidebar-link[aria-current="page"] svg { color: #93c5fd; } /* blue-300 */
.app-sidebar.is-collapsed .app-sidebar-link[aria-current="page"]::before {
  /* Collapsed rail: bar moves to the bottom as an underline since the
     left edge is touching the viewport and gets clipped visually. */
  left: 50%; top: auto; bottom: 4px; width: 16px; height: 2px;
  transform: translateX(-50%); border-radius: 2px;
}
.app-sidebar.is-collapsed .app-sidebar-link[aria-current="page"] svg { color: #93c5fd; }

/* Focus rings — consistent, accessible, subtle */
:where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .35);
  border-radius: 6px;
}

/* Smooth hover lift on cards inside the app, not just the landing */
.card-hover { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card-hover:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -12px rgba(15, 23, 42, .12); }

/* Pretty backdrop for the mobile drawer overlay */
.app-mobile-backdrop { backdrop-filter: blur(2px); background: rgba(15, 23, 42, .45); }

/* Slim scrollbar inside the dark sidebar */
.app-sidebar nav::-webkit-scrollbar       { width: 6px; }
.app-sidebar nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); }
.app-sidebar nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.16); }

/* Print: invoice PDF */
@media print {
  body { background: #fff; }
  nav, aside, header.h-16, .no-print { display: none !important; }
  main { padding: 0; }
}

/* ────────────────────────────────────────────────────────────────
   Dark-mode NUCLEAR fallback. Catches every pattern the explicit
   rules above don't cover: black inline styles, Tailwind colour
   scales (gray/zinc/neutral/stone/950), buttons that ship a default
   black `color`, SVG icons that render dark via currentColor, and
   any element whose direct ancestor was a tinted card.

   Rule: anything that ends up dark on dark gets nudged into the
   readable band. Anything that already has an explicit *light*
   colour (text-white, text-slate-100/200/300 on dark surfaces) is
   left alone via attribute matching.
   ──────────────────────────────────────────────────────────────── */

/* 1. text-black / text-gray-* / text-zinc-* / text-neutral-* /
      text-stone-*  — Tailwind's neutral scales aren't slate.
      Force every dark shade (700+) to the body's light colour. */
.dark .text-black,
.dark .text-slate-950,
.dark .text-gray-900, .dark .text-gray-800, .dark .text-gray-700,
.dark .text-zinc-900, .dark .text-zinc-800, .dark .text-zinc-700,
.dark .text-neutral-900, .dark .text-neutral-800, .dark .text-neutral-700,
.dark .text-stone-900, .dark .text-stone-800, .dark .text-stone-700 {
  color: #f8fafc !important;
}
.dark .text-gray-600, .dark .text-zinc-600,
.dark .text-neutral-600, .dark .text-stone-600 { color: #cbd5e1 !important; }
.dark .text-gray-500, .dark .text-zinc-500,
.dark .text-neutral-500, .dark .text-stone-500 { color: #94a3b8 !important; }
.dark .text-gray-400, .dark .text-zinc-400,
.dark .text-neutral-400, .dark .text-stone-400 { color: #64748b !important; }

/* 2. Inline styles — phpMyAdmin / OCR / PDF preview pages emit
      `style="color:#000"` or `color:#0f172a` from their own renderers.
      Override any near-black inline style. We only target the most
      common literals because inline styles can't be matched by colour
      value in CSS. */
.dark [style*="color:#000"],
.dark [style*="color: #000"],
.dark [style*="color:#0f172a"],
.dark [style*="color: #0f172a"],
.dark [style*="color:#0c1527"],
.dark [style*="color: #0c1527"],
.dark [style*="color:#1e293b"],
.dark [style*="color: #1e293b"],
.dark [style*="color:black"],
.dark [style*="color: black"]                     { color: #f8fafc !important; }
.dark [style*="background-color:#fff"],
.dark [style*="background-color: #fff"],
.dark [style*="background-color:#ffffff"],
.dark [style*="background-color: #ffffff"],
.dark [style*="background:#fff"],
.dark [style*="background: #fff"],
.dark [style*="background:white"],
.dark [style*="background: white"]                { background-color: #0f172a !important; }

/* 3. SVG icons — fill="currentColor" inherits from the closest
      `color`. If a parent has no explicit text-* class it falls back
      to body, which is now light. But SVGs with fill="#0f172a" (some
      brand glyphs) bypass currentColor — neutralise that too. */
.dark svg[fill="#000"],
.dark svg[fill="black"],
.dark svg[fill="#0f172a"],
.dark svg[fill="#0c1527"]                         { fill: #f8fafc !important; }
.dark svg[stroke="#000"],
.dark svg[stroke="black"],
.dark svg[stroke="#0f172a"],
.dark svg[stroke="#0c1527"]                       { stroke: #f8fafc !important; }
.dark svg path[fill="#000"],
.dark svg path[fill="black"]                      { fill: currentColor !important; }

/* 4. Buttons & inputs — browser defaults ship `color: ButtonText`
      (system black). We covered button{} earlier; extend to summary,
      details, fieldset, legend that browsers also style with
      ButtonText / Canvas defaults. */
.dark button, .dark summary, .dark details,
.dark fieldset, .dark legend, .dark optgroup,
.dark option                                       { color: inherit; background-color: inherit; }
.dark option { background-color: #1e293b; color: #f8fafc; }

/* 5. Catch-all for any descendant of a `.bg-white` card whose own
      colour wasn't explicitly set. Without this, deeply nested
      <span>/<div> can keep a near-black colour from a parent that
      had `class="text-slate-900"` set by Tailwind's reset. */
.dark .bg-white *:not(svg):not(path):not(circle):not(rect):not(line):not(polygon):not(g) {
  color: inherit;
}

/* 6. Tooltip / popover bubbles built with hardcoded backgrounds —
      keep them dark but readable. */
.dark [role="tooltip"], .dark .tooltip                { background: #1e293b !important; color: #f8fafc !important; }

/* 7. Numbers: total, subtotal, balance — typical pattern is
      <p class="text-2xl font-semibold tabular-nums"> with no colour
      class. They inherit from card body which is now light. Force
      `currentColor` to make sure no inherited dark literal sneaks in. */
.dark .tabular-nums, .dark .font-mono, .dark .font-semibold, .dark .font-bold {
  color: inherit;
}

/* 8. The bg-slate-100 chip backgrounds (used for tag pills like
      "Office Supplies" or category labels in tables) — already
      defined above but ensure their CHILD text is also legible. */
.dark .bg-slate-100 *, .dark .bg-slate-200 *,
.dark .bg-slate-50 *                              { color: inherit; }

/* 9. PRE / CODE blocks (audit-log JSON, raw payloads on inbound
      detail pages) keep their monospace identity but flip palette. */
.dark pre, .dark code                             { background-color: #1e293b !important; color: #e2e8f0 !important; }

/* 10. Dropdown menus / modal panels that stack on top of dark cards.
       Tailwind's `bg-white shadow-xl` becomes invisible chrome — keep
       the slate surface but lift the shadow opacity. */
.dark .shadow, .dark .shadow-md, .dark .shadow-lg,
.dark .shadow-xl, .dark .shadow-2xl, .dark .shadow-soft {
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .6) !important;
}

/* 11. Action-bar buttons that use bg-white as their resting state
       and only flip on hover. The bg gets covered above; ensure the
       text inside stays readable irrespective of nested classes. */
.dark .bg-white { color: #e2e8f0; }
.dark .bg-white .text-slate-900,
.dark .bg-white .text-slate-800,
.dark .bg-white .text-slate-700                   { color: #f1f5f9 !important; }

/* 12. Status pills / badges that build with `bg-{color}-50 text-{color}-700`.
       Already handled above — but ensure the parent .bg-{color}-50
       doesn't override its child colour when the child is currentColor. */
.dark .inline-flex *, .dark .inline-block *       { color: inherit; }

/* 13. RING utilities — Tailwind's `ring-X-200` family creates a 2-3px
       coloured outline. In dark mode the light pastel shades disappear
       against the navy surface; the original ring colour is kept but
       its alpha is lowered so it reads as a subtle accent rather than
       a glowing band. Covers every colour used across status pills,
       cards and badges. */
.dark .ring-slate-100,    .dark .ring-slate-200    { --tw-ring-color: rgba(148, 163, 184, .25) !important; box-shadow: 0 0 0 1px rgba(148, 163, 184, .25) !important; }
.dark .ring-slate-300                              { --tw-ring-color: rgba(148, 163, 184, .35) !important; }
.dark .ring-emerald-100, .dark .ring-emerald-200   { --tw-ring-color: rgba( 16, 185, 129, .35) !important; }
.dark .ring-blue-100,    .dark .ring-blue-200      { --tw-ring-color: rgba( 59, 130, 246, .35) !important; }
.dark .ring-sky-100,     .dark .ring-sky-200       { --tw-ring-color: rgba( 14, 165, 233, .35) !important; }
.dark .ring-amber-100,   .dark .ring-amber-200     { --tw-ring-color: rgba(245, 158,  11, .35) !important; }
.dark .ring-rose-100,    .dark .ring-rose-200      { --tw-ring-color: rgba(244,  63,  94, .35) !important; }
.dark .ring-red-100,     .dark .ring-red-200       { --tw-ring-color: rgba(239,  68,  68, .35) !important; }
.dark .ring-violet-100,  .dark .ring-violet-200    { --tw-ring-color: rgba(139,  92, 246, .35) !important; }
.dark .ring-purple-100,  .dark .ring-purple-200    { --tw-ring-color: rgba(168,  85, 247, .35) !important; }
.dark .ring-indigo-100,  .dark .ring-indigo-200    { --tw-ring-color: rgba( 99, 102, 241, .35) !important; }
.dark .ring-yellow-100,  .dark .ring-yellow-200    { --tw-ring-color: rgba(234, 179,   8, .35) !important; }
.dark .ring-pink-100,    .dark .ring-pink-200      { --tw-ring-color: rgba(236,  72, 153, .35) !important; }
.dark .ring-cyan-100,    .dark .ring-cyan-200      { --tw-ring-color: rgba(  6, 182, 212, .35) !important; }
.dark .ring-teal-100,    .dark .ring-teal-200      { --tw-ring-color: rgba( 20, 184, 166, .35) !important; }
.dark .ring-orange-100,  .dark .ring-orange-200    { --tw-ring-color: rgba(249, 115,  22, .35) !important; }
.dark .ring-lime-100,    .dark .ring-lime-200      { --tw-ring-color: rgba(132, 204,  22, .35) !important; }

/* 14. ICON-ONLY action buttons (eye, pencil, download, etc.) live inside
       table action cells with no explicit text-* class — they style via
       `text-slate-500 hover:bg-slate-100 hover:text-slate-700`. The 500
       shade on dark navy is borderline invisible. Lift one stop. */
.dark .text-slate-500                              { color: #cbd5e1 !important; }

/* 15. Ghost / outline buttons: `border border-slate-300 text-slate-700
       bg-white hover:bg-slate-50` — the border softens, bg flips, but
       the text needs to be the lighter slate-100 band on dark surface,
       not the muted 700 that's already overridden to 300. Re-pin the
       ghost-button text colour explicitly. */
.dark button.border, .dark a.border, .dark .btn-ghost,
.dark [class*="border-slate-300"][class*="bg-white"] { color: #e2e8f0 !important; }

/* 16. Solid coloured buttons (bg-emerald-600 / bg-amber-600 /
       bg-rose-600 / bg-brand-navy etc. with text-white) are visible
       in both modes by design. But hover states shouldn't darken them
       further on the already-dark surface. */
.dark .hover\:bg-amber-700:hover   { background-color: #b45309 !important; }
.dark .hover\:bg-emerald-700:hover { background-color: #047857 !important; }
.dark .hover\:bg-rose-700:hover    { background-color: #be123c !important; }
.dark .hover\:bg-brand-600:hover   { background-color: #1e40af !important; }

/* 17. Disabled buttons / "cursor-not-allowed" state — keep the muted
       look but don't make them completely invisible. */
.dark .cursor-not-allowed,
.dark [disabled],
.dark button:disabled, .dark a[aria-disabled="true"] { color: #64748b !important; opacity: .7; }

/* 18. Form labels & legend (template-level <label class="text-xs uppercase
       tracking-wider text-slate-500"> patterns are everywhere). */
.dark label, .dark legend                          { color: #cbd5e1 !important; }

/* 19. Disabled-look chrome: `text-slate-400` chips, footnote text under
       totals, helper text under inputs. Slate-400 on navy reads as
       a faded ghost — bump it to slate-300. */
.dark .text-slate-400 { color: #94a3b8 !important; }

/* 20. Selects rendered by Tailwind without explicit color — the option
       text in dark mode goes black-on-dark on Chromium. We already set
       `option { background: #1e293b; color: #f8fafc }` above; also set
       the closed-state text on the <select> itself. */
.dark select                                       { color: #e2e8f0 !important; }

/* 21. PRIMARY ACTION BUTTONS — the most visible dark-mode regression.
       Templates use `bg-brand-navy text-white` (or `bg-slate-900
       text-white` for the secondary slate variant) for "Save", "New
       invoice", "Download", "Send", "Submit" buttons everywhere. In
       light mode the navy reads as a confident dark CTA; in dark mode
       it merges into the body (#0b1224) and the user sees only the
       white text floating in space.

       Flip these surfaces to brand-500 (#2563eb) so the primary action
       remains the visual anchor. Target ONLY anchor/button elements —
       never plain `bg-slate-900` blocks (modal backdrops, video boxes,
       decorative panels) which still want to be near-black on dark.

       The `.bg-slate-900\/50` modal-overlay class doesn't match these
       selectors (different escaped class name due to the alpha
       modifier), so overlays keep their semi-transparent dimming. */
.dark a.bg-brand-navy,
.dark button.bg-brand-navy,
.dark a.bg-slate-900,
.dark button.bg-slate-900               { background-color: #2563eb !important; color: #ffffff !important; }
.dark a.bg-brand-navy:hover,
.dark button.bg-brand-navy:hover,
.dark a.bg-slate-900:hover,
.dark button.bg-slate-900:hover         { background-color: #1d4ed8 !important; }

/* 22. Hover-only utilities that flip TO dark slate. Buttons whose
       resting bg is brighter become invisible on hover — route the
       hover to a darker brand blue instead of slate-900. */
.dark .hover\:bg-slate-900:hover        { background-color: #1d4ed8 !important; }
.dark .hover\:bg-slate-800:hover        { background-color: #1e40af !important; }
.dark .hover\:bg-brand-navy:hover       { background-color: #2563eb !important; }

/* 23. PROGRESS BARS / GAUGE FILLS — bg-brand-500 stays bright on the
       dark surface; without this rule the gradient mapping for
       brand-500 (an internal Tailwind alpha multiplier) could lift it
       to a washed-out tint. Pin the canonical hex. */
.dark .bg-brand-500                     { background-color: #3b82f6 !important; }

/* 24. Tinted callout borders we hadn't covered yet (used on the
       expenses "Heal totals" button and similar accent containers). */
.dark .border-amber-300                 { border-color: rgba(245, 158, 11, .45) !important; }
.dark .border-emerald-300               { border-color: rgba( 16, 185, 129, .45) !important; }
.dark .border-rose-300                  { border-color: rgba(244,  63,  94, .45) !important; }
.dark .border-blue-300                  { border-color: rgba( 59, 130, 246, .45) !important; }
.dark .border-violet-300                { border-color: rgba(139,  92, 246, .45) !important; }

/* 25. EXPORT-POPOVER anchors. The dropdown is `bg-white border
       border-slate-200 shadow-xl rounded-2xl` — bg flipped, border
       softened, shadow lifted. Inside live <a> links with no explicit
       text-* class; force them to the lifted link colour. */
.dark .rounded-2xl.bg-white a:not([class*="text-"]),
.dark .rounded-xl.bg-white  a:not([class*="text-"]),
.dark .rounded-lg.bg-white  a:not([class*="text-"]) { color: #93c5fd !important; }

/* 26. STEP-INDICATOR FOLLOW-UP — the active step uses bg-brand-navy
       text-white (covered by 21). The completed step uses
       bg-emerald-500 text-white — fine. The inactive step uses
       bg-slate-200 text-slate-500 — both already lifted, but make
       sure the chip remains a distinct shape against the body. */
.dark .bg-slate-200 + .bg-slate-200,
.dark .bg-slate-200                     { box-shadow: 0 0 0 1px rgba(148, 163, 184, .2); }

/* 27. TRANSLUCENT WHITE BACKGROUNDS — sticky bars, marketing nav,
       backdrops and the assistant composer use bg-white/70..95 +
       backdrop-blur to overlay a frosted card on the page. In dark
       mode the literal white at 70-95% opacity prints near-white over
       the dark slate body, which destroys contrast for any text or
       border drawn over it. Flip to slate-900-with-alpha so the
       frosted effect survives the theme change. */
.dark .bg-white\/70                     { background-color: rgba(15, 23, 42, .70) !important; }
.dark .bg-white\/80                     { background-color: rgba(15, 23, 42, .78) !important; }
.dark .bg-white\/85                     { background-color: rgba(15, 23, 42, .85) !important; }
.dark .bg-white\/90                     { background-color: rgba(15, 23, 42, .90) !important; }
.dark .bg-white\/95                     { background-color: rgba(15, 23, 42, .95) !important; }
.dark .bg-slate-50\/50                  { background-color: rgba(30, 41, 59, .50) !important; }
.dark .bg-slate-50\/30                  { background-color: rgba(30, 41, 59, .30) !important; }
/* Translucent borders that piggyback on the frosted bars — the
   slate-200/80 reads as light cream over dark slate, so soften it. */
.dark .border-slate-200\/80             { border-color: rgba(30, 41, 59, .80) !important; }
.dark .border-slate-200\/60             { border-color: rgba(30, 41, 59, .60) !important; }

/* 28. GRADIENTS using the slate-700/900 ramp — the assistant avatar,
       any "header glass" panels — already render dark. But the
       light-end gradient `bg-gradient-to-b from-white to-slate-50`
       used on hero sections washes out in dark mode. Re-anchor to
       the body palette so the gradient stays visible. */
.dark .bg-gradient-to-b.from-white      { --tw-gradient-from: #0f172a !important; }
.dark .bg-gradient-to-b.to-slate-50,
.dark .bg-gradient-to-r.to-slate-50     { --tw-gradient-to: #0b1224 !important; }

/* 29. ASSISTANT-SPECIFIC: the user's own bubbles use bg-brand-navy +
       text-white which is already routed through rule 21 (primary
       button override) so they print as brand-blue + white in dark
       mode. The inline `<code>` inside model replies uses bg-slate-100
       — already covered, but explicitly nudge the foreground so it
       reads on the slightly translucent surface. */
.dark code.bg-slate-100,
.dark code[class*="bg-slate-100"]       { background-color: rgba(148, 163, 184, .18) !important; color: #f1f5f9 !important; }

/* 30. MARKETING NAV / TOPBAR — both use bg-white/8x with backdrop blur.
       The above rules already retint the background; ensure text and
       SVG icons inside flip to readable colours when their wrappers
       were left at slate-900-by-class (covered by rules 1 + 9.1). */

/* 31. DISABLED BUTTON SURFACES — the original dark-mode pass remapped
       bg-slate-{50,100,200} but stopped before slate-300 / slate-400.
       That left the most common "submit disabled" pattern across the
       app — `bg-slate-300 text-white cursor-not-allowed` — printing
       as light-grey-on-light-grey-text (effectively invisible) once
       the body flipped to dark. Used by the Send/Save/Dispatch buttons
       on invoices/show, expenses/edit, expenses/scan, einvoicing,
       peppol_lookup. Tag chips on /blog use hover:bg-slate-200 which
       has the same issue: the hover preview was a bright cream pill
       on an otherwise dark surface.
       Map to a mid-dark slate (#475569) so:
         • white text on top stays at ~5.5:1 contrast (WCAG AA),
         • the chip is visibly distinct from the surrounding card,
         • a still-disabled button reads as muted, not active. */
.dark .bg-slate-300                        { background-color: #475569 !important; }
.dark .bg-slate-400                        { background-color: #64748b !important; }
.dark .disabled\:bg-slate-300:disabled,
.dark .disabled\:bg-slate-400:disabled     { background-color: #475569 !important; }

.dark .hover\:bg-slate-200:hover           { background-color: #475569 !important; }
.dark .hover\:bg-slate-300:hover           { background-color: #475569 !important; }
.dark .hover\:bg-slate-400:hover           { background-color: #64748b !important; }

/* And the matching border ramp — slate-400/500 borders are used as
   "dimmed input" outlines on a few forms; without an override they
   print as the original light slate which is invisible on dark. */
.dark .border-slate-400                    { border-color: #475569 !important; }
.dark .border-slate-500                    { border-color: #64748b !important; }

/* ────────────────────────────────────────────────────────────────
   Round 4 — patches caught by the post-redesign visibility audit.
   The previous 31 rules handled bg/text/border families and primary
   buttons. The new templates (notification bell, search results, Create
   dropdown, avatar dropdown, welcome tour, undo toast) plus older
   surfaces (status pills, icon-only action buttons, disabled forms)
   left a handful of patterns where the foreground was still hidden
   or marginal on the dark surface.
   ──────────────────────────────────────────────────────────────── */

/* 32. ICON-ONLY ACTION BUTTONS — the eye / pencil / download / trash
       icons in invoice + expense tables wrap inside
       `<button class="text-slate-500 hover:bg-slate-100 hover:text-slate-700">`.
       Rule 14 already lifted text-slate-500 to #cbd5e1, but the hover
       background lands on #1e293b (rule for bg-slate-100), so the
       hover state never paints a perceptible chip. Use a mid-slate
       hover that's visibly distinct from the card body. Mirrored for
       text-slate-400 + text-slate-600 variants used elsewhere. */
.dark .text-slate-400.hover\:bg-slate-100:hover,
.dark .text-slate-500.hover\:bg-slate-100:hover,
.dark .text-slate-600.hover\:bg-slate-100:hover    { background-color: #334155 !important; }
.dark .text-slate-400.hover\:bg-slate-50:hover,
.dark .text-slate-500.hover\:bg-slate-50:hover,
.dark .text-slate-600.hover\:bg-slate-50:hover     { background-color: #1e293b !important; }
/* And ensure the icon ITSELF lights up to white on hover, not just the chip. */
.dark .text-slate-400.hover\:text-slate-700:hover,
.dark .text-slate-500.hover\:text-slate-700:hover  { color: #f8fafc !important; }

/* 33. STATUS PILLS / CATEGORY CHIPS — `bg-slate-100 text-slate-500/600/700`
       lives on every Draft / Cancelled / Ignored / 0%-delta badge across
       the dashboard, invoice list, peppol logs and expense pages. With
       bg-slate-100 remapped to #1e293b and text-slate-500 remapped to
       #94a3b8, the contrast is only ~3:1 — readable but well below WCAG
       AA. Lift the foreground inside slate-100 chips to the bright band. */
.dark .bg-slate-100.text-slate-500,
.dark .bg-slate-100.text-slate-600,
.dark .bg-slate-100.text-slate-700                 { color: #f1f5f9 !important; }
.dark .bg-slate-50.text-slate-500,
.dark .bg-slate-50.text-slate-600                  { color: #e2e8f0 !important; }

/* 34. DISABLED BUTTON SAFETY NET — rule 31 covers the canonical
       `disabled:bg-slate-300:disabled` form Tailwind generates. But a
       few templates set `class="bg-slate-300"` on the element and rely
       on the markup-level `disabled` attribute alone to communicate
       state. Cover that fallthrough so a "Send" / "Save" stuck in the
       disabled state still reads as muted, not invisible. */
.dark [disabled].bg-slate-300,
.dark [disabled].bg-slate-200,
.dark [aria-disabled="true"].bg-slate-300,
.dark [aria-disabled="true"].bg-slate-200          { background-color: #475569 !important; color: #cbd5e1 !important; }

/* 35. DROPDOWN-MENU ITEMS — the Create / avatar / language / notification
       dropdowns I added all share the pattern
       `<a class="flex ... text-sm text-slate-700 hover:bg-slate-50 transition">`.
       text-slate-700 is already lifted (rule 44) but the hover bg
       (#1e293b) sits ON TOP OF the dropdown surface which is ALSO
       slate-flipped from white → #0f172a (rule 36). The two surfaces
       are only 0.5 stops apart, so the hover feels flat. Bump the
       hover one stop brighter to make selection feedback obvious. */
.dark .rounded-xl.bg-white a.hover\:bg-slate-50:hover,
.dark .rounded-xl.bg-white button.hover\:bg-slate-50:hover,
.dark .rounded-2xl.bg-white a.hover\:bg-slate-50:hover,
.dark .rounded-2xl.bg-white button.hover\:bg-slate-50:hover { background-color: #1e293b !important; }

/* 36. SEARCH RESULTS ROWS — same dropdown logic for /search list items.
       Their parent card is `bg-white rounded-xl border border-slate-200
       shadow-soft`, hover row is `hover:bg-slate-50`. Already covered
       by rule 35 via the rounded-xl + bg-white prefix, but pin the
       text colour inside hovered rows so the truncated client name
       doesn't dim when the user moves their cursor over the row. */
.dark .bg-white a:hover .text-slate-900,
.dark .bg-white a:hover .font-medium                { color: #ffffff !important; }

/* 37. NOTIFICATION-BELL "NEEDS ATTENTION" TAG — the small rose-tinted
       header label `text-[10px] uppercase tracking-wider font-semibold
       text-rose-600`. Rule 79 lifts text-rose-600 to #fda4af, which is
       fine on the bell-dropdown surface but reads as a warning rather
       than an urgent flag. No change needed — kept here as a marker
       so a future audit doesn't undo it. */

/* 38. UNDO TOAST — `bg-slate-900 text-white` on a plain <div> survives
       rule 21 (which only flips anchors/buttons) so the toast stays
       dark navy. But the dismiss "×" inside uses `text-slate-400
       hover:text-white` — slate-400 is lifted (rule 19) to #94a3b8,
       which reads correctly. The CSRF-protected Undo form button uses
       `bg-white/10 hover:bg-white/20 text-white text-xs font-semibold`
       — works in both themes. No additional rule needed for the toast. */

/* 39. SIDEBAR ACTIVE-PAGE BACKGROUND on the always-dark navy rail —
       the `bg-white/[0.12]` chip behind the active item is set with
       arbitrary value syntax; Tailwind generates an inline opacity
       multiplier that already works in both themes. No override needed
       (kept here so a future audit doesn't re-introduce one). */

/* 40. EMOJI FLAGS in the language picker — emojis have intrinsic
       colour and don't need theming. Left as-is. */

/* 41. NOTIFICATION BELL BADGE ring — the rose-500 badge wears
       `ring-2 ring-white` which against the dark topbar looks like a
       bright halo. Soften the ring colour to the topbar surface so the
       badge reads as "embedded in" the bell button, not floating. */
.dark .ring-white                                  { --tw-ring-color: #0b1224 !important; box-shadow: 0 0 0 2px #0b1224 !important; }

/* 42. GRADIENT-STOP CTAS — the new topbar Create button uses
       `bg-gradient-to-r from-brand-navy to-slate-800`. Rule 21 only
       targets SOLID bg-brand-navy / bg-slate-900 anchors+buttons, not
       gradient `from-` / `to-` stops, which are CSS variables. Result:
       the Create button is dark navy → slate-800 sitting on a dark
       slate topbar — same colour family, the chip disappears and the
       user sees only "+ Create" floating white text. Map both stops
       (and the hover stops) into the brand-blue ramp so the CTA stays
       visually distinct on the dark topbar. */
.dark .from-brand-navy                             { --tw-gradient-from: #3b82f6 !important; }
.dark .to-slate-800                                { --tw-gradient-to:   #1d4ed8 !important; }
.dark .hover\:from-slate-900:hover                 { --tw-gradient-from: #2563eb !important; }
.dark .hover\:to-slate-900:hover                   { --tw-gradient-to:   #1e40af !important; }

/* 43. NOTIFICATION-BELL OPEN STATE — when the dropdown opens, the bell
       button gets `bg-slate-50 text-slate-700` via `:class`. Rule 37
       already remaps bg-slate-50 to #0b1224, which is the same as the
       body — so the "I'm active" affordance disappears. Force the
       active bell into the same brighter slate as a hovered icon. */
.dark button.bg-slate-50.text-slate-700,
.dark button[aria-expanded="true"].bg-slate-50     { background-color: #334155 !important; color: #f1f5f9 !important; }

/* ════════════════════════════════════════════════════════════════
   ROUND 5 — comprehensive coverage. A catalog of every text/bg/
   border class actually used across the templates revealed dozens of
   shades (text-blue-900, text-amber-900, text-green-700/8/9,
   text-emerald-900, text-rose-900, bg-amber-50/30, bg-emerald-500/10,
   focus:ring-brand-500, placeholder-slate-400 …) that had NO
   dark-mode override. Per-page complaints kept resurfacing because
   the previous rules only covered the most common shades per family;
   any utility one stop darker stayed near-black on the dark surface.

   The block below systematically covers EVERY shade in EVERY colour
   family the codebase touches, plus alpha variants, plus focus +
   placeholder + group-hover. Use !important throughout so Tailwind's
   CDN-injected utility CSS (which loads after this file) can't
   reassert the original light-mode shade.
   ════════════════════════════════════════════════════════════════ */

/* --- 5A. TEXT — every {color}-900 (darkest shade) flips to {color}-200 (light) --- */
.dark .text-slate-950, .dark .text-slate-900    { color: #f8fafc !important; }
.dark .text-blue-900,  .dark .text-sky-900      { color: #bfdbfe !important; }
.dark .text-emerald-900, .dark .text-green-900,
.dark .text-lime-900, .dark .text-teal-900      { color: #bbf7d0 !important; }
.dark .text-amber-900, .dark .text-orange-900,
.dark .text-yellow-900                          { color: #fde68a !important; }
.dark .text-red-900, .dark .text-rose-900,
.dark .text-pink-900                            { color: #fecdd3 !important; }
.dark .text-violet-900, .dark .text-purple-900,
.dark .text-indigo-900, .dark .text-fuchsia-900 { color: #ddd6fe !important; }
.dark .text-cyan-900                            { color: #a5f3fc !important; }
.dark .text-brand-700                           { color: #bfdbfe !important; }

/* --- 5B. TEXT — every "light" 200/300/400 stays usable (light on dark = good).
        But text-{color}-300/400 used on bright tinted backgrounds reads as
        muted; lift to the 200 band when sitting on a dark tinted bg. --- */
.dark .text-blue-300        { color: #93c5fd !important; }
.dark .text-emerald-300, .dark .text-emerald-400 { color: #6ee7b7 !important; }
.dark .text-rose-400        { color: #fda4af !important; }

/* --- 5C. TEXT — green family wasn't covered (codebase uses it alongside
        emerald). Map to the same light-green ramp. --- */
.dark .text-green-500, .dark .text-green-600,
.dark .text-green-700, .dark .text-green-800    { color: #86efac !important; }

/* --- 5D. BACKGROUNDS — alpha-modifier tinted callouts. The codebase uses
        bg-{color}-50/30, /40, /60, /80, bg-{color}-100/60, bg-{color}-500/10,
        bg-{color}-500/20, bg-{color}-500/30. The slash-N suffix in Tailwind
        emits a class like `bg-emerald-500\/10`. We need to enumerate the
        actual classes used (catalogued from `grep` across templates). --- */

/* Slash-30 / 40 / 60 / 80 light-tint callouts → match the regular /50 mapping */
.dark .bg-amber-50\/30, .dark .bg-amber-50\/40   { background-color: rgba(245, 158,  11, .10) !important; }
.dark .bg-blue-50\/30,  .dark .bg-blue-50\/40    { background-color: rgba( 59, 130, 246, .10) !important; }
.dark .bg-blue-100\/60                           { background-color: rgba( 59, 130, 246, .14) !important; }
.dark .bg-emerald-50\/40                         { background-color: rgba( 16, 185, 129, .12) !important; }
.dark .bg-rose-50\/30, .dark .bg-rose-50\/40     { background-color: rgba(244,  63,  94, .10) !important; }
.dark .bg-violet-50\/40                          { background-color: rgba(139,  92, 246, .12) !important; }

/* Slash-N on the 500 band — used as accent overlays in cards / charts */
.dark .bg-emerald-500\/10  { background-color: rgba( 16, 185, 129, .15) !important; }
.dark .bg-emerald-500\/20  { background-color: rgba( 16, 185, 129, .25) !important; }
.dark .bg-brand-500\/20    { background-color: rgba( 37,  99, 235, .25) !important; }
.dark .bg-brand-500\/30    { background-color: rgba( 37,  99, 235, .35) !important; }

/* --- 5E. BACKGROUNDS — solid mid-shades that aren't already buttons:
        bg-amber-200, bg-amber-400, bg-blue-700 — these print as bright
        chips on light mode (badges, progress fills). Keep them visible
        on dark by lifting one stop so they sit on the brighter end. --- */
.dark .bg-amber-200        { background-color: rgba(245, 158,  11, .35) !important; }
.dark .bg-amber-400        { background-color: rgba(245, 158,  11, .50) !important; }
.dark .bg-blue-700         { background-color: #2563eb !important; }

/* --- 5F. BACKGROUNDS — green family was completely missing (only emerald
        was mapped). The codebase uses bg-green-50 / 100 on a few success
        callouts in older templates. Map to the same dark-emerald tint. --- */
.dark .bg-green-50, .dark .bg-green-100  { background-color: rgba( 16, 185, 129, .15) !important; }
.dark .bg-green-500, .dark .bg-green-600 { background-color: #16a34a !important; }

/* --- 5G. BORDERS — every shade in every colour family the codebase uses.
        Without these, the original light shade prints invisible on
        dark slate. --- */
.dark .border-slate-100        { border-color: #1e293b !important; }
.dark .border-amber-100        { border-color: rgba(245, 158,  11, .25) !important; }
.dark .border-amber-300        { border-color: rgba(245, 158,  11, .45) !important; }
.dark .border-amber-500        { border-color: rgba(245, 158,  11, .65) !important; }
.dark .border-blue-100         { border-color: rgba( 59, 130, 246, .25) !important; }
.dark .border-blue-400         { border-color: rgba( 59, 130, 246, .55) !important; }
.dark .border-blue-500         { border-color: rgba( 59, 130, 246, .70) !important; }
.dark .border-brand-100        { border-color: rgba( 37,  99, 235, .25) !important; }
.dark .border-brand-300        { border-color: rgba( 37,  99, 235, .45) !important; }
.dark .border-brand-400        { border-color: rgba( 37,  99, 235, .55) !important; }
.dark .border-brand-500        { border-color: rgba( 37,  99, 235, .70) !important; }
.dark .border-brand-600        { border-color: rgba( 37,  99, 235, .80) !important; }
.dark .border-emerald-500      { border-color: rgba( 16, 185, 129, .65) !important; }
.dark .border-rose-100         { border-color: rgba(244,  63,  94, .25) !important; }
.dark .border-indigo-300       { border-color: rgba( 99, 102, 241, .45) !important; }

/* --- 5H. FOCUS variants — `focus:border-brand-500`, `focus:ring-brand-500/30`,
        `focus:ring-rose-500/30`. These create the accent outline when the
        user tabs into an input. On dark mode the light shade keeps the
        outline visible (rings/borders ARE visible on dark) — but pin the
        shade so it doesn't drift via Tailwind's CDN-emitted opacity
        multipliers. --- */
.dark .focus\:border-brand-500:focus  { border-color: #3b82f6 !important; }
.dark .focus\:border-rose-400:focus   { border-color: #fb7185 !important; }
.dark .focus\:border-rose-500:focus   { border-color: #f43f5e !important; }
.dark .focus\:ring-brand-500\/30:focus    { --tw-ring-color: rgba( 59, 130, 246, .40) !important; }
.dark .focus\:ring-emerald-500\/30:focus,
.dark .focus\:ring-emerald-500:focus      { --tw-ring-color: rgba( 16, 185, 129, .40) !important; }
.dark .focus\:ring-rose-200:focus,
.dark .focus\:ring-rose-500:focus,
.dark .focus\:ring-rose-500\/30:focus     { --tw-ring-color: rgba(244,  63,  94, .40) !important; }

/* --- 5I. PLACEHOLDER text in inputs — `placeholder-slate-400` prints the
        Tailwind grey on a dark input bg (rule 108 ships #1e293b). The
        placeholder reads as black-on-near-black. Lift to a softer mid-slate
        so the hint is legible but doesn't compete with real input. --- */
.dark .placeholder-slate-400::placeholder,
.dark .placeholder-slate-400::-webkit-input-placeholder,
.dark .placeholder-slate-400::-moz-placeholder    { color: #64748b !important; opacity: 1; }

/* --- 5J. GROUP-HOVER text shifts — `group-hover:text-slate-700/900`
        used on cards that highlight their content when the row is
        hovered. On dark mode the destination needs to be the lifted
        light band, not the original near-black. --- */
.dark .group:hover .group-hover\:text-slate-700,
.dark .group:hover .group-hover\:text-slate-800,
.dark .group:hover .group-hover\:text-slate-900   { color: #f1f5f9 !important; }
.dark .group:hover .group-hover\:text-brand-600,
.dark .group:hover .group-hover\:text-brand-700   { color: #93c5fd !important; }

/* --- 5K. NESTED bg-{color}-50 INSIDE a bg-white CARD — the catch-all rule
        (line 371) sets color: inherit for descendants of .bg-white. But
        a tinted icon chip inside the card (e.g. `<span class="bg-amber-50
        text-amber-600">`) doesn't want to inherit — it wants to keep its
        amber colour cue. The chip-text rules (5A/5B/etc.) handle that, but
        the chip's BACKGROUND was being overridden to inherit too, leaving
        only a tinted icon floating on the card bg. Block inherit on chips. --- */
.dark .bg-white .bg-amber-50, .dark .bg-white .bg-amber-100,
.dark .bg-white .bg-blue-50,  .dark .bg-white .bg-blue-100,
.dark .bg-white .bg-emerald-50, .dark .bg-white .bg-emerald-100,
.dark .bg-white .bg-rose-50,  .dark .bg-white .bg-rose-100,
.dark .bg-white .bg-violet-50, .dark .bg-white .bg-violet-100,
.dark .bg-white .bg-indigo-50, .dark .bg-white .bg-indigo-100,
.dark .bg-white .bg-purple-50, .dark .bg-white .bg-purple-100,
.dark .bg-white .bg-yellow-50, .dark .bg-white .bg-yellow-100,
.dark .bg-white .bg-brand-50,  .dark .bg-white .bg-slate-100,
.dark .bg-white .bg-slate-50                          { color: inherit; }

/* --- 5L. SAFE-NET: anything still rendering near-black inside a dark
        body. This is the nuclear option — applies to ANY element whose
        computed colour is one of the common literal black shades the
        codebase emits via inline style or via Tailwind's reset. Covers
        cases where a third-party widget (PhpSpreadsheet preview, OCR
        result block, JSON pretty-print) drops in markup that doesn't
        use Tailwind classes at all. --- */
.dark .prose, .dark .prose * { color: #e2e8f0; }
.dark .prose strong          { color: #f8fafc; }
.dark .prose a               { color: #93c5fd; }
.dark .prose code            { background-color: #1e293b; color: #f1f5f9; }
.dark .prose blockquote      { border-left-color: #334155; color: #cbd5e1; }
.dark .prose hr              { border-color: #334155; }
.dark .prose h1, .dark .prose h2, .dark .prose h3,
.dark .prose h4, .dark .prose h5, .dark .prose h6 { color: #f8fafc; }

/* --- 5M. STRIPED tables / zebra rows from the .even:bg-slate-50 utility --- */
.dark .even\:bg-slate-50:nth-child(even),
.dark .odd\:bg-slate-50:nth-child(odd)            { background-color: rgba(148, 163, 184, .04) !important; }

/* --- 5N. <fieldset>, <hr>, native <details> — browser-default colours
        that no Tailwind class touches. --- */
.dark fieldset       { border-color: #334155; }
.dark hr             { border-color: #334155; }
.dark mark           { background-color: rgba(234, 179, 8, .30); color: #fef3c7; }