/* ============================================================
   CaseLead.ai — Core Design System
   Shared styles for the investigative workspace
   Dual-theme: command-center dark + analyst-grade light
   ============================================================ */

:root, :root[data-theme="dark"] {
  /* Surfaces */
  --cl-bg: #0b1220;
  --cl-bg-elevated: #0f172a;
  --cl-surface: #1e293b;
  --cl-surface-2: #334155;
  --cl-panel: #131c2e;
  --cl-overlay: rgba(0, 0, 0, 0.6);

  /* Borders */
  --cl-border: #475569;
  --cl-border-subtle: #28344a;
  --cl-border-strong: #5a6c87;

  /* Text */
  --cl-text: #f1f5f9;
  --cl-text-secondary: #b0bcd0;
  --cl-text-muted: #8997b1;

  /* Brand / accent */
  --cl-accent: #3b82f6;
  --cl-accent-strong: #2563eb;
  --cl-accent-soft: rgba(59, 130, 246, 0.14);

  /* Semantic core */
  --cl-blue: #3b82f6;
  --cl-blue-dim: #1e3a5f;
  --cl-green: #22c55e;
  --cl-green-dim: #14532d;
  --cl-amber: #f59e0b;
  --cl-amber-dim: #78350f;
  --cl-red: #ef4444;
  --cl-red-dim: #7f1d1d;
  --cl-purple: #a855f7;
  --cl-purple-dim: #3b0764;
  --cl-cyan: #06b6d4;

  /* Domain-specific */
  --cl-warn: var(--cl-amber);
  --cl-danger: var(--cl-red);
  --cl-success: var(--cl-green);
  --cl-review: #fbbf24;
  --cl-evidence: #60a5fa;
  --cl-ai-highlight: #a78bfa;

  /* Effects */
  --cl-shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --cl-shadow-md: 0 4px 12px rgba(0,0,0,0.45);
  --cl-shadow-lg: 0 12px 32px rgba(0,0,0,0.55);
  --cl-row-hover: rgba(255,255,255,0.04);
  --cl-row-stripe: rgba(255,255,255,0.02);
  --cl-input-bg: #0f172a;
  --cl-input-border: #334155;
  --cl-scrollbar: #334155;
  color-scheme: dark;
}

:root[data-theme="light"] {
  /* Surfaces — clean, professional, analyst-grade */
  --cl-bg: #f4f6fb;
  --cl-bg-elevated: #ffffff;
  --cl-surface: #ffffff;
  --cl-surface-2: #eef2f8;
  --cl-panel: #ffffff;
  --cl-overlay: rgba(15, 23, 42, 0.45);

  /* Borders */
  --cl-border: #c8d2e0;
  --cl-border-subtle: #e3e9f2;
  --cl-border-strong: #94a3b8;

  /* Text */
  --cl-text: #0f172a;
  --cl-text-secondary: #334155;
  --cl-text-muted: #64748b;

  /* Brand / accent */
  --cl-accent: #1d4ed8;
  --cl-accent-strong: #1e3a8a;
  --cl-accent-soft: rgba(29, 78, 216, 0.10);

  /* Semantic */
  --cl-blue: #1d4ed8;
  --cl-blue-dim: #dbeafe;
  --cl-green: #15803d;
  --cl-green-dim: #dcfce7;
  --cl-amber: #b45309;
  --cl-amber-dim: #fef3c7;
  --cl-red: #b91c1c;
  --cl-red-dim: #fee2e2;
  --cl-purple: #7c3aed;
  --cl-purple-dim: #ede9fe;
  --cl-cyan: #0e7490;

  /* Domain-specific */
  --cl-warn: var(--cl-amber);
  --cl-danger: var(--cl-red);
  --cl-success: var(--cl-green);
  --cl-review: #b45309;
  --cl-evidence: #1d4ed8;
  --cl-ai-highlight: #6d28d9;

  /* Effects */
  --cl-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
  --cl-shadow-md: 0 6px 20px rgba(15, 23, 42, 0.10);
  --cl-shadow-lg: 0 18px 36px rgba(15, 23, 42, 0.16);
  --cl-row-hover: rgba(15, 23, 42, 0.04);
  --cl-row-stripe: rgba(15, 23, 42, 0.02);
  --cl-input-bg: #ffffff;
  --cl-input-border: #c8d2e0;
  --cl-scrollbar: #c8d2e0;
  color-scheme: light;
}

/* Smooth theme transitions */
html { transition: background-color 0.18s ease, color 0.18s ease; }
body { background: var(--cl-bg); color: var(--cl-text); }

/* Scrollbar tinting */
* { scrollbar-color: var(--cl-scrollbar) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--cl-scrollbar); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   Tailwind utility overrides for theme-aware behavior
   Comprehensive — every common slate/blue-hardcoded class used
   across the workspace is remapped so the toggle visibly switches
   the whole UI, not just headers.
   ============================================================ */

/* TEXT */
:root[data-theme="light"] .text-slate-50,
:root[data-theme="light"] .text-slate-100,
:root[data-theme="light"] .text-slate-200,
:root[data-theme="light"] .text-slate-300,
:root[data-theme="light"] .text-white { color: var(--cl-text) !important; }
:root[data-theme="light"] .text-slate-400 { color: var(--cl-text-secondary) !important; }
:root[data-theme="light"] .text-slate-500,
:root[data-theme="light"] .text-slate-600,
:root[data-theme="light"] .text-slate-700 { color: var(--cl-text-muted) !important; }

/* SURFACES */
:root[data-theme="light"] .bg-slate-700,
:root[data-theme="light"] .bg-slate-800,
:root[data-theme="light"] .bg-slate-900 { background-color: var(--cl-surface) !important; }
:root[data-theme="light"] .bg-slate-800\/40,
:root[data-theme="light"] .bg-slate-800\/50,
:root[data-theme="light"] .bg-slate-800\/60,
:root[data-theme="light"] .bg-slate-900\/40,
:root[data-theme="light"] .bg-slate-900\/50,
:root[data-theme="light"] .bg-slate-900\/60,
:root[data-theme="light"] .bg-slate-900\/70,
:root[data-theme="light"] .bg-slate-900\/80 { background-color: color-mix(in srgb, var(--cl-bg-elevated) 92%, transparent) !important; }
:root[data-theme="light"] .bg-black,
:root[data-theme="light"] .bg-black\/50 { background-color: rgba(15, 23, 42, 0.45) !important; }

/* BORDERS */
:root[data-theme="light"] .border-slate-500,
:root[data-theme="light"] .border-slate-600,
:root[data-theme="light"] .border-slate-700,
:root[data-theme="light"] .border-slate-800 { border-color: var(--cl-border-subtle) !important; }

/* PLACEHOLDERS */
:root[data-theme="light"] .placeholder-slate-400::placeholder,
:root[data-theme="light"] .placeholder-slate-500::placeholder,
:root[data-theme="light"] .placeholder-slate-600::placeholder { color: var(--cl-text-muted) !important; }

/* ACCENT COLOURS */
:root[data-theme="light"] .text-blue-300,
:root[data-theme="light"] .text-blue-400,
:root[data-theme="light"] .text-blue-500 { color: var(--cl-accent) !important; }
:root[data-theme="light"] .bg-blue-500,
:root[data-theme="light"] .bg-blue-600 { background-color: var(--cl-accent) !important; }
:root[data-theme="light"] .border-blue-500 { border-color: var(--cl-accent) !important; }
:root[data-theme="light"] .text-amber-300,
:root[data-theme="light"] .text-amber-400,
:root[data-theme="light"] .text-yellow-400 { color: var(--cl-warn) !important; }
:root[data-theme="light"] .text-red-300,
:root[data-theme="light"] .text-red-400,
:root[data-theme="light"] .text-red-500 { color: var(--cl-danger) !important; }
:root[data-theme="light"] .text-green-300,
:root[data-theme="light"] .text-green-400,
:root[data-theme="light"] .text-emerald-400 { color: var(--cl-success) !important; }
:root[data-theme="light"] .text-purple-300,
:root[data-theme="light"] .text-purple-400 { color: var(--cl-ai-highlight) !important; }

/* HOVERS */
:root[data-theme="light"] .hover\:text-slate-100:hover,
:root[data-theme="light"] .hover\:text-slate-200:hover,
:root[data-theme="light"] .hover\:text-slate-300:hover,
:root[data-theme="light"] .hover\:text-blue-300:hover,
:root[data-theme="light"] .hover\:text-blue-400:hover { color: var(--cl-text) !important; }
:root[data-theme="light"] .hover\:bg-slate-700:hover,
:root[data-theme="light"] .hover\:bg-slate-800:hover { background-color: var(--cl-surface-2) !important; }

/* BACKDROP / GRADIENTS */
:root[data-theme="light"] [class*="from-slate-"],
:root[data-theme="light"] [class*="to-slate-"],
:root[data-theme="light"] [class*="via-slate-"] { --tw-gradient-from: var(--cl-bg-elevated) !important; --tw-gradient-to: var(--cl-surface) !important; }

/* PROSE - if any markdown rendering uses prose-* */
:root[data-theme="light"] .prose-sm { color: var(--cl-text-secondary); }
:root[data-theme="light"] .prose-sm h1, :root[data-theme="light"] .prose-sm h2, :root[data-theme="light"] .prose-sm h3 { color: var(--cl-text); }
:root[data-theme="light"] .prose-sm strong { color: var(--cl-text); }
:root[data-theme="light"] .prose-sm a { color: var(--cl-accent); }

/* ============================================================
   FULL-COVERAGE LIGHT MODE — every Tailwind palette used
   so the toggle truly switches the whole app: dashboards,
   tables, modals, dropdowns, cards, selects, panels.
   ============================================================ */

/* TEXT — all slate / zinc / gray / neutral shades */
:root[data-theme="light"] .text-slate-50,
:root[data-theme="light"] .text-slate-100,
:root[data-theme="light"] .text-slate-200,
:root[data-theme="light"] .text-zinc-100,
:root[data-theme="light"] .text-zinc-200,
:root[data-theme="light"] .text-zinc-300,
:root[data-theme="light"] .text-gray-100,
:root[data-theme="light"] .text-gray-200,
:root[data-theme="light"] .text-neutral-100,
:root[data-theme="light"] .text-neutral-200,
:root[data-theme="light"] .text-stone-100,
:root[data-theme="light"] .text-white { color: var(--cl-text) !important; }

:root[data-theme="light"] .text-slate-300,
:root[data-theme="light"] .text-zinc-400,
:root[data-theme="light"] .text-gray-300,
:root[data-theme="light"] .text-gray-400,
:root[data-theme="light"] .text-neutral-300,
:root[data-theme="light"] .text-neutral-400 { color: var(--cl-text-secondary) !important; }

:root[data-theme="light"] .text-slate-500,
:root[data-theme="light"] .text-slate-600,
:root[data-theme="light"] .text-slate-700,
:root[data-theme="light"] .text-zinc-500,
:root[data-theme="light"] .text-zinc-600,
:root[data-theme="light"] .text-gray-500,
:root[data-theme="light"] .text-gray-600,
:root[data-theme="light"] .text-neutral-500,
:root[data-theme="light"] .text-neutral-600,
:root[data-theme="light"] .text-stone-500 { color: var(--cl-text-muted) !important; }

/* SURFACES — every dark slate / zinc / gray bg, including transparency variants */
:root[data-theme="light"] .bg-slate-700,
:root[data-theme="light"] .bg-slate-800,
:root[data-theme="light"] .bg-slate-900,
:root[data-theme="light"] .bg-slate-950,
:root[data-theme="light"] .bg-zinc-700,
:root[data-theme="light"] .bg-zinc-800,
:root[data-theme="light"] .bg-zinc-900,
:root[data-theme="light"] .bg-gray-700,
:root[data-theme="light"] .bg-gray-800,
:root[data-theme="light"] .bg-gray-900,
:root[data-theme="light"] .bg-neutral-800,
:root[data-theme="light"] .bg-neutral-900 { background-color: var(--cl-surface) !important; }

:root[data-theme="light"] .bg-slate-700\/40,
:root[data-theme="light"] .bg-slate-700\/50,
:root[data-theme="light"] .bg-slate-800\/30,
:root[data-theme="light"] .bg-slate-800\/40,
:root[data-theme="light"] .bg-slate-800\/50,
:root[data-theme="light"] .bg-slate-800\/60,
:root[data-theme="light"] .bg-slate-800\/70,
:root[data-theme="light"] .bg-slate-800\/80,
:root[data-theme="light"] .bg-slate-900\/30,
:root[data-theme="light"] .bg-slate-900\/40,
:root[data-theme="light"] .bg-slate-900\/50,
:root[data-theme="light"] .bg-slate-900\/60,
:root[data-theme="light"] .bg-slate-900\/70,
:root[data-theme="light"] .bg-slate-900\/80,
:root[data-theme="light"] .bg-slate-900\/90,
:root[data-theme="light"] .bg-zinc-800\/50,
:root[data-theme="light"] .bg-zinc-900\/50,
:root[data-theme="light"] .bg-zinc-900\/80 { background-color: color-mix(in srgb, var(--cl-bg-elevated) 92%, transparent) !important; }

:root[data-theme="light"] .bg-black,
:root[data-theme="light"] .bg-black\/30,
:root[data-theme="light"] .bg-black\/40,
:root[data-theme="light"] .bg-black\/50,
:root[data-theme="light"] .bg-black\/60,
:root[data-theme="light"] .bg-black\/70 { background-color: rgba(15, 23, 42, 0.45) !important; }

/* BORDERS — every shade */
:root[data-theme="light"] .border-slate-500,
:root[data-theme="light"] .border-slate-600,
:root[data-theme="light"] .border-slate-700,
:root[data-theme="light"] .border-slate-800,
:root[data-theme="light"] .border-slate-900,
:root[data-theme="light"] .border-zinc-700,
:root[data-theme="light"] .border-zinc-800,
:root[data-theme="light"] .border-gray-700,
:root[data-theme="light"] .border-gray-800,
:root[data-theme="light"] .border-neutral-700 { border-color: var(--cl-border-subtle) !important; }

/* PLACEHOLDERS */
:root[data-theme="light"] .placeholder-slate-300::placeholder,
:root[data-theme="light"] .placeholder-slate-400::placeholder,
:root[data-theme="light"] .placeholder-slate-500::placeholder,
:root[data-theme="light"] .placeholder-slate-600::placeholder,
:root[data-theme="light"] .placeholder-zinc-400::placeholder,
:root[data-theme="light"] .placeholder-gray-400::placeholder { color: var(--cl-text-muted) !important; }

/* SEMANTIC COLOURS — translate dark-tuned semantics to light-mode equivalents */
:root[data-theme="light"] .text-blue-200,
:root[data-theme="light"] .text-blue-300,
:root[data-theme="light"] .text-blue-400,
:root[data-theme="light"] .text-blue-500,
:root[data-theme="light"] .text-sky-300,
:root[data-theme="light"] .text-sky-400,
:root[data-theme="light"] .text-cyan-300,
:root[data-theme="light"] .text-cyan-400 { color: var(--cl-accent) !important; }

:root[data-theme="light"] .bg-blue-500,
:root[data-theme="light"] .bg-blue-600,
:root[data-theme="light"] .bg-blue-700,
:root[data-theme="light"] .bg-sky-600 { background-color: var(--cl-accent) !important; color: #ffffff !important; }

:root[data-theme="light"] .bg-blue-500\/10,
:root[data-theme="light"] .bg-blue-500\/20,
:root[data-theme="light"] .bg-blue-900\/10,
:root[data-theme="light"] .bg-blue-900\/20,
:root[data-theme="light"] .bg-blue-900\/30,
:root[data-theme="light"] .bg-blue-900\/40 { background-color: var(--cl-blue-dim) !important; }

:root[data-theme="light"] .border-blue-500,
:root[data-theme="light"] .border-blue-600,
:root[data-theme="light"] .border-blue-700,
:root[data-theme="light"] .border-blue-800,
:root[data-theme="light"] .border-blue-900\/30 { border-color: rgba(29, 78, 216, 0.30) !important; }

:root[data-theme="light"] .text-amber-200,
:root[data-theme="light"] .text-amber-300,
:root[data-theme="light"] .text-amber-400,
:root[data-theme="light"] .text-amber-500,
:root[data-theme="light"] .text-yellow-200,
:root[data-theme="light"] .text-yellow-300,
:root[data-theme="light"] .text-yellow-400,
:root[data-theme="light"] .text-yellow-500,
:root[data-theme="light"] .text-orange-300,
:root[data-theme="light"] .text-orange-400 { color: var(--cl-warn) !important; }

:root[data-theme="light"] .bg-amber-500,
:root[data-theme="light"] .bg-amber-600,
:root[data-theme="light"] .bg-yellow-500 { background-color: var(--cl-warn) !important; color: #ffffff !important; }

:root[data-theme="light"] .bg-amber-500\/10,
:root[data-theme="light"] .bg-amber-500\/15,
:root[data-theme="light"] .bg-amber-900\/10,
:root[data-theme="light"] .bg-amber-900\/20,
:root[data-theme="light"] .bg-amber-900\/30,
:root[data-theme="light"] .bg-yellow-900\/20 { background-color: var(--cl-amber-dim) !important; }

:root[data-theme="light"] .border-amber-500,
:root[data-theme="light"] .border-amber-700,
:root[data-theme="light"] .border-amber-800,
:root[data-theme="light"] .border-amber-900\/30 { border-color: rgba(180, 83, 9, 0.30) !important; }

:root[data-theme="light"] .text-red-200,
:root[data-theme="light"] .text-red-300,
:root[data-theme="light"] .text-red-400,
:root[data-theme="light"] .text-red-500,
:root[data-theme="light"] .text-rose-300,
:root[data-theme="light"] .text-rose-400 { color: var(--cl-danger) !important; }

:root[data-theme="light"] .bg-red-500,
:root[data-theme="light"] .bg-red-600,
:root[data-theme="light"] .bg-red-700 { background-color: var(--cl-danger) !important; color: #ffffff !important; }

:root[data-theme="light"] .bg-red-500\/10,
:root[data-theme="light"] .bg-red-500\/20,
:root[data-theme="light"] .bg-red-900\/10,
:root[data-theme="light"] .bg-red-900\/20,
:root[data-theme="light"] .bg-red-900\/30 { background-color: var(--cl-red-dim) !important; }

:root[data-theme="light"] .border-red-500,
:root[data-theme="light"] .border-red-700,
:root[data-theme="light"] .border-red-800,
:root[data-theme="light"] .border-red-900\/30 { border-color: rgba(185, 28, 28, 0.30) !important; }

:root[data-theme="light"] .text-green-200,
:root[data-theme="light"] .text-green-300,
:root[data-theme="light"] .text-green-400,
:root[data-theme="light"] .text-green-500,
:root[data-theme="light"] .text-emerald-300,
:root[data-theme="light"] .text-emerald-400,
:root[data-theme="light"] .text-emerald-500 { color: var(--cl-success) !important; }

:root[data-theme="light"] .bg-green-500,
:root[data-theme="light"] .bg-green-600,
:root[data-theme="light"] .bg-emerald-600 { background-color: var(--cl-success) !important; color: #ffffff !important; }

:root[data-theme="light"] .bg-green-500\/10,
:root[data-theme="light"] .bg-green-500\/15,
:root[data-theme="light"] .bg-green-900\/10,
:root[data-theme="light"] .bg-green-900\/20,
:root[data-theme="light"] .bg-emerald-900\/20 { background-color: var(--cl-green-dim) !important; }

:root[data-theme="light"] .border-green-500,
:root[data-theme="light"] .border-green-700,
:root[data-theme="light"] .border-green-800 { border-color: rgba(21, 128, 61, 0.30) !important; }

:root[data-theme="light"] .text-purple-200,
:root[data-theme="light"] .text-purple-300,
:root[data-theme="light"] .text-purple-400,
:root[data-theme="light"] .text-violet-300,
:root[data-theme="light"] .text-violet-400,
:root[data-theme="light"] .text-fuchsia-400 { color: var(--cl-ai-highlight) !important; }

:root[data-theme="light"] .bg-purple-500,
:root[data-theme="light"] .bg-purple-600,
:root[data-theme="light"] .bg-violet-600 { background-color: var(--cl-ai-highlight) !important; color: #ffffff !important; }

:root[data-theme="light"] .bg-purple-500\/10,
:root[data-theme="light"] .bg-purple-900\/20,
:root[data-theme="light"] .bg-purple-900\/30 { background-color: var(--cl-purple-dim) !important; }

/* HOVERS — broad coverage */
:root[data-theme="light"] .hover\:text-slate-100:hover,
:root[data-theme="light"] .hover\:text-slate-200:hover,
:root[data-theme="light"] .hover\:text-slate-300:hover,
:root[data-theme="light"] .hover\:text-white:hover,
:root[data-theme="light"] .hover\:text-zinc-100:hover,
:root[data-theme="light"] .hover\:text-blue-200:hover,
:root[data-theme="light"] .hover\:text-blue-300:hover,
:root[data-theme="light"] .hover\:text-blue-400:hover { color: var(--cl-text) !important; }

:root[data-theme="light"] .hover\:bg-slate-700:hover,
:root[data-theme="light"] .hover\:bg-slate-800:hover,
:root[data-theme="light"] .hover\:bg-slate-700\/50:hover,
:root[data-theme="light"] .hover\:bg-slate-800\/50:hover,
:root[data-theme="light"] .hover\:bg-zinc-800:hover { background-color: var(--cl-surface-2) !important; }

/* GRADIENTS — flatten dark gradients in light mode */
:root[data-theme="light"] [class*="from-slate-9"],
:root[data-theme="light"] [class*="from-slate-8"],
:root[data-theme="light"] [class*="to-slate-9"],
:root[data-theme="light"] [class*="to-slate-8"],
:root[data-theme="light"] [class*="via-slate-9"],
:root[data-theme="light"] [class*="via-slate-8"],
:root[data-theme="light"] [class*="from-zinc-9"],
:root[data-theme="light"] [class*="from-gray-9"] {
  --tw-gradient-from: var(--cl-bg-elevated) !important;
  --tw-gradient-to: var(--cl-surface) !important;
  --tw-gradient-via: var(--cl-bg-elevated) !important;
}

/* RING / FOCUS in light */
:root[data-theme="light"] .ring-slate-500,
:root[data-theme="light"] .ring-slate-600,
:root[data-theme="light"] .ring-slate-700 { --tw-ring-color: var(--cl-border) !important; }
:root[data-theme="light"] .focus\:ring-blue-500:focus,
:root[data-theme="light"] .focus\:ring-blue-600:focus { --tw-ring-color: var(--cl-accent) !important; }
:root[data-theme="light"] .focus\:border-blue-500:focus { border-color: var(--cl-accent) !important; }

/* TABLES, MODALS, MENUS — generic catch-all */
:root[data-theme="light"] table,
:root[data-theme="light"] thead,
:root[data-theme="light"] tbody { background-color: transparent !important; color: var(--cl-text); }
:root[data-theme="light"] th { color: var(--cl-text-muted) !important; border-color: var(--cl-border-subtle) !important; }
:root[data-theme="light"] td { color: var(--cl-text-secondary) !important; border-color: var(--cl-border-subtle) !important; }
:root[data-theme="light"] hr { border-color: var(--cl-border-subtle) !important; }

/* Backdrop / overlay panes */
:root[data-theme="light"] .backdrop-blur,
:root[data-theme="light"] .backdrop-blur-sm,
:root[data-theme="light"] .backdrop-blur-md { backdrop-filter: blur(8px); }

/* Force CaseLead components to derive from tokens (defensive) */
:root[data-theme="light"] .cl-card,
:root[data-theme="light"] .hero-strip { background-color: var(--cl-surface) !important; border-color: var(--cl-border-subtle) !important; }
:root[data-theme="light"] .cl-stat { background-color: rgba(15,23,42,0.03) !important; }
:root[data-theme="light"] .cl-doc-table tr:hover td { background: rgba(15,23,42,0.04) !important; }
:root[data-theme="light"] .cl-timeline-event { border-color: rgba(15,23,42,0.06) !important; }

/* index.html / dashboard root vars — light-mode */
:root[data-theme="light"] {
  --primary: #1e3a8a;
  --primary-light: #3b82f6;
  --bg: #f4f6fb;
  --card-bg: #ffffff;
  --text: #0f172a;
  --text-muted: #64748b;
  --border: #c8d2e0;
}
:root[data-theme="light"] .header,
:root[data-theme="light"] .header-left { background: #ffffff !important; color: var(--cl-text) !important; box-shadow: 0 1px 3px rgba(15,23,42,0.06) !important; }
:root[data-theme="light"] .header a,
:root[data-theme="light"] .header span,
:root[data-theme="light"] .header div { color: var(--cl-text-secondary) !important; }
:root[data-theme="light"] .sidebar { background: var(--card-bg) !important; }
:root[data-theme="light"] .nav-item { color: var(--text) !important; }
:root[data-theme="light"] .nav-item.active { background: var(--primary) !important; color: white !important; }
:root[data-theme="light"] .case-item.active { background: var(--primary) !important; color: white !important; border-color: var(--primary) !important; }
:root[data-theme="light"] .modal-content { background: var(--card-bg) !important; color: var(--text) !important; border-color: var(--border) !important; }
:root[data-theme="light"] .user-menu-btn { background: rgba(15,23,42,0.06) !important; color: var(--text) !important; border-color: var(--border) !important; }
:root[data-theme="light"] .user-menu-dropdown { background: white !important; }

/* --- Badges --- */
.cl-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.cl-badge-blue { background: var(--cl-blue-dim); color: #60a5fa; }
.cl-badge-green { background: var(--cl-green-dim); color: #4ade80; }
.cl-badge-amber { background: var(--cl-amber-dim); color: #fbbf24; }
.cl-badge-red { background: var(--cl-red-dim); color: #f87171; }
.cl-badge-purple { background: var(--cl-purple-dim); color: #c084fc; }
.cl-badge-slate { background: var(--cl-surface-2); color: var(--cl-text-secondary); }

/* Status badges */
.cl-status-uploaded { background: var(--cl-surface-2); color: var(--cl-text-secondary); }
.cl-status-queued { background: var(--cl-blue-dim); color: #60a5fa; }
.cl-status-processing { background: var(--cl-amber-dim); color: #fbbf24; }
.cl-status-processed { background: var(--cl-green-dim); color: #4ade80; }
.cl-status-failed { background: var(--cl-red-dim); color: #f87171; }

/* AI trust badges */
.cl-badge-ai {
  background: rgba(139, 92, 246, 0.15);
  color: #a78bfa;
  border: 1px solid rgba(139, 92, 246, 0.25);
}
.cl-badge-review {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.25);
}
.cl-badge-grounded {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.25);
}
.cl-badge-general {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.25);
}

/* --- Banners --- */
.cl-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  margin-bottom: 8px;
}
.cl-banner-icon {
  font-size: 1rem;
  flex-shrink: 0;
}
.cl-banner-text { flex: 1; }
.cl-banner-action {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.cl-banner-action:hover { opacity: 0.85; }

.cl-banner-warn {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.25);
  color: #fbbf24;
}
.cl-banner-warn .cl-banner-action { background: #f59e0b; color: #1e293b; }

.cl-banner-error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #f87171;
}
.cl-banner-error .cl-banner-action { background: #ef4444; color: white; }

.cl-banner-success {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.25);
  color: #4ade80;
}

.cl-banner-info {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.25);
  color: #60a5fa;
}
.cl-banner-info .cl-banner-action { background: #3b82f6; color: white; }

/* --- Cards --- */
.cl-card {
  background: var(--cl-surface);
  border: 1px solid var(--cl-border-subtle);
  border-radius: 10px;
  padding: 16px;
}
.cl-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.cl-card-title {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cl-text-secondary);
}
.cl-card-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--cl-text);
}

/* --- Stat Grid --- */
.cl-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 8px;
}
.cl-stat {
  text-align: center;
  padding: 10px 8px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  border: 1px solid var(--cl-border-subtle);
}
.cl-stat-value {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--cl-text);
}
.cl-stat-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  color: var(--cl-text-muted);
  margin-top: 2px;
}
.cl-stat-value.has-issues { color: var(--cl-amber); }
.cl-stat-value.has-errors { color: var(--cl-red); }
.cl-stat-value.all-good { color: var(--cl-green); }

/* --- Buttons --- */
.cl-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.cl-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.cl-btn-primary { background: var(--cl-blue); color: white; }
.cl-btn-primary:hover:not(:disabled) { background: #2563eb; }
.cl-btn-secondary { background: var(--cl-surface-2); color: var(--cl-text-secondary); border: 1px solid var(--cl-border); }
.cl-btn-secondary:hover:not(:disabled) { background: var(--cl-border); color: var(--cl-text); }
.cl-btn-danger { background: var(--cl-red-dim); color: #f87171; border: 1px solid rgba(239,68,68,0.3); }
.cl-btn-danger:hover:not(:disabled) { background: #991b1b; }
.cl-btn-sm { padding: 4px 10px; font-size: 0.7rem; }
.cl-btn-ghost { background: transparent; color: var(--cl-text-secondary); }
.cl-btn-ghost:hover { color: var(--cl-text); background: rgba(255,255,255,0.05); }

/* --- Document Table --- */
.cl-doc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.cl-doc-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cl-text-muted);
  border-bottom: 1px solid var(--cl-border-subtle);
  font-weight: 600;
}
.cl-doc-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: var(--cl-text-secondary);
}
.cl-doc-table tr:hover td { background: rgba(255,255,255,0.02); }
.cl-doc-table .doc-name { color: var(--cl-text); font-weight: 500; }

/* --- Action Card (for chat action responses) --- */
.cl-action-card {
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 8px;
}
.cl-action-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #60a5fa;
  text-transform: uppercase;
}
.cl-action-card-body {
  font-size: 0.8rem;
  color: var(--cl-text-secondary);
  margin-bottom: 10px;
}
.cl-action-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* --- Response type cards in chat --- */
.cl-response-grounded {
  border-left: 3px solid var(--cl-green);
}
.cl-response-general {
  border-left: 3px solid var(--cl-text-muted);
}
.cl-response-action {
  border-left: 3px solid var(--cl-blue);
}
.cl-response-fallback {
  border-left: 3px solid var(--cl-amber);
}

/* --- Tabs --- */
.cl-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--cl-border-subtle);
  margin-bottom: 12px;
}
.cl-tab {
  padding: 8px 14px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--cl-text-muted);
  border: none;
  background: transparent;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
}
.cl-tab:hover { color: var(--cl-text-secondary); }
.cl-tab.active {
  color: var(--cl-text);
  border-bottom-color: var(--cl-blue);
}
.cl-tab .tab-count {
  margin-left: 4px;
  font-size: 0.6rem;
  padding: 1px 5px;
  border-radius: 8px;
  background: var(--cl-surface-2);
  color: var(--cl-text-muted);
}
.cl-tab.active .tab-count {
  background: var(--cl-blue-dim);
  color: #60a5fa;
}

/* --- Lead Cards --- */
.cl-lead-card {
  background: var(--cl-surface);
  border: 1px solid var(--cl-border-subtle);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 8px;
  transition: border-color 0.15s;
}
.cl-lead-card:hover { border-color: var(--cl-border); }
.cl-lead-card-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cl-text);
  margin-bottom: 4px;
}
.cl-lead-card-desc {
  font-size: 0.78rem;
  color: var(--cl-text-secondary);
  margin-bottom: 8px;
  line-height: 1.4;
}
.cl-lead-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* --- Timeline Events --- */
.cl-timeline-event {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.cl-timeline-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cl-blue);
  margin-top: 5px;
  flex-shrink: 0;
}
.cl-timeline-date {
  font-size: 0.7rem;
  color: var(--cl-text-muted);
  font-weight: 500;
}
.cl-timeline-desc {
  font-size: 0.8rem;
  color: var(--cl-text-secondary);
  margin-top: 2px;
}
.cl-timeline-source {
  font-size: 0.65rem;
  color: var(--cl-text-muted);
  margin-top: 4px;
}

/* --- Confirm Dialog --- */
.cl-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cl-confirm-dialog {
  background: var(--cl-surface);
  border: 1px solid var(--cl-border);
  border-radius: 12px;
  padding: 24px;
  max-width: 400px;
  width: 90%;
}
.cl-confirm-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--cl-text);
  margin-bottom: 8px;
}
.cl-confirm-body {
  font-size: 0.8rem;
  color: var(--cl-text-secondary);
  margin-bottom: 16px;
  line-height: 1.5;
}
.cl-confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* --- Spinner --- */
.cl-spinner {
  border: 3px solid var(--cl-border-subtle);
  border-top: 3px solid var(--cl-blue);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  animation: cl-spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes cl-spin { to { transform: rotate(360deg); } }

/* --- Empty State --- */
.cl-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--cl-text-muted);
  font-size: 0.8rem;
}
.cl-empty-icon {
  font-size: 1.5rem;
  margin-bottom: 8px;
  opacity: 0.5;
}

/* --- Utility --- */
.cl-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cl-flex { display: flex; }
.cl-flex-col { display: flex; flex-direction: column; }
.cl-items-center { align-items: center; }
.cl-justify-between { justify-content: space-between; }
.cl-gap-2 { gap: 8px; }
.cl-gap-3 { gap: 12px; }
.cl-mt-2 { margin-top: 8px; }
.cl-mt-3 { margin-top: 12px; }
.cl-mb-2 { margin-bottom: 8px; }
.cl-mb-3 { margin-bottom: 12px; }

/* --- Focus Indicators (Accessibility) --- */
.cl-btn:focus-visible,
.cl-tab:focus-visible,
.sidebar-link:focus-visible {
  outline: 2px solid var(--cl-blue);
  outline-offset: 2px;
}

/* --- Toast Notifications --- */
.cl-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 500;
  color: white;
  z-index: 10000;
  opacity: 0;
  transform: translateY(12px);
  animation: cl-toast-in 0.25s ease forwards;
  max-width: 400px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.cl-toast-success { background: var(--cl-green-dim); border: 1px solid rgba(34,197,94,0.3); color: #4ade80; }
.cl-toast-error { background: var(--cl-red-dim); border: 1px solid rgba(239,68,68,0.3); color: #f87171; }
.cl-toast-warn { background: var(--cl-amber-dim); border: 1px solid rgba(245,158,11,0.3); color: #fbbf24; }
.cl-toast-info { background: var(--cl-blue-dim); border: 1px solid rgba(59,130,246,0.3); color: #60a5fa; }
.cl-toast.cl-toast-out {
  animation: cl-toast-out 0.2s ease forwards;
}
@keyframes cl-toast-in {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes cl-toast-out {
  to { opacity: 0; transform: translateY(12px); }
}

/* ============================================================
   Responsive Breakpoints
   ============================================================ */

/* Tablet: collapsible sidebar */
@media (max-width: 1024px) {
  .cl-stat-grid { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 6px; }
  .cl-doc-table th, .cl-doc-table td { padding: 8px 8px; font-size: 0.75rem; }
}

/* Mobile */
@media (max-width: 768px) {
  .cl-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .cl-card { padding: 12px; }
  .cl-card-header { flex-wrap: wrap; gap: 8px; }
  .cl-banner { flex-wrap: wrap; }
  .cl-confirm-dialog { max-width: 95%; padding: 16px; }
  .cl-doc-table { font-size: 0.7rem; }
  .cl-doc-table th:nth-child(3), .cl-doc-table td:nth-child(3) { display: none; } /* hide size col on mobile */
  .cl-toast { left: 16px; right: 16px; max-width: none; bottom: 16px; }
}

/* Small mobile */
@media (max-width: 480px) {
  .cl-stat-grid { grid-template-columns: 1fr 1fr; gap: 4px; }
  .cl-stat { padding: 8px 4px; }
  .cl-stat-value { font-size: 1rem; }
  .cl-btn { padding: 8px 12px; font-size: 0.75rem; }
  .cl-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cl-tab { white-space: nowrap; }
}

/* Touch-friendly targets */
@media (pointer: coarse) {
  .cl-btn-sm { padding: 8px 12px; min-height: 44px; font-size: 0.75rem; }
  .cl-tab { padding: 10px 14px; min-height: 44px; }
  .cl-badge { padding: 4px 10px; }
}

/* ============================================================
   Skeleton Loaders
   ============================================================ */
.cl-skeleton {
  background: linear-gradient(90deg, var(--cl-surface) 25%, var(--cl-surface-2) 50%, var(--cl-surface) 75%);
  background-size: 200% 100%;
  animation: cl-shimmer 1.5s infinite;
  border-radius: 6px;
}
.cl-skeleton-line { height: 14px; margin-bottom: 8px; }
.cl-skeleton-line.short { width: 40%; }
.cl-skeleton-line.medium { width: 70%; }
.cl-skeleton-card { height: 80px; margin-bottom: 8px; }
@keyframes cl-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   Spinner Sizes
   ============================================================ */
.cl-spinner-sm {
  border-width: 2px;
  width: 14px;
  height: 14px;
}
.cl-spinner-lg {
  border-width: 4px;
  width: 24px;
  height: 24px;
}

/* ============================================================
   Panel Transitions
   ============================================================ */
.cl-slide-down {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.25s ease;
}
.cl-slide-down.open {
  max-height: 2000px;
  opacity: 1;
}

/* ============================================================
   Typing Indicator
   ============================================================ */
.cl-typing-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.cl-typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cl-text-muted);
  animation: cl-dot-bounce 1.4s ease-in-out infinite;
}
.cl-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.cl-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes cl-dot-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-6px); opacity: 1; }
}

/* ============================================================
   Timeline Visual Line
   ============================================================ */
.cl-timeline-container {
  position: relative;
  padding-left: 20px;
}
.cl-timeline-container::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--cl-border-subtle);
}
.cl-timeline-event { position: relative; }
.cl-timeline-dot {
  position: relative;
  z-index: 1;
}

/* Timeline month grouping */
.cl-timeline-month {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cl-text-secondary);
  padding: 12px 0 6px;
  border-bottom: 1px solid var(--cl-border-subtle);
  margin-bottom: 4px;
  position: sticky;
  top: 0;
  background: var(--cl-bg);
  z-index: 2;
}

/* ============================================================
   Lead Priority Borders
   ============================================================ */
.cl-lead-card.priority-critical { border-left: 3px solid var(--cl-red); }
.cl-lead-card.priority-high { border-left: 3px solid #f97316; }
.cl-lead-card.priority-medium { border-left: 3px solid var(--cl-amber); }

/* ============================================================
   Active Button State (for Court Prep etc.)
   ============================================================ */
.cl-btn[aria-pressed="true"],
.cl-btn.active-analysis {
  background: var(--cl-blue);
  color: white;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}