/* CloviAble Shared Dark Mode Overrides — injected on all pages */
[data-theme="dark"] { color-scheme: dark; }
[data-theme="dark"] body { background: #0a0f1e !important; color: #f1f5f9 !important; }

/* Backgrounds */
[data-theme="dark"] .bg-white { background: #1e293b !important; }
[data-theme="dark"] .bg-slate-50 { background: #0f172a !important; }
[data-theme="dark"] .bg-slate-100 { background: #1e293b !important; }
[data-theme="dark"] .bg-slate-200 { background: #263045 !important; }
[data-theme="dark"] .bg-slate-800 { background: #0a0f1e !important; }
[data-theme="dark"] .bg-gray-50 { background: #0f172a !important; }
[data-theme="dark"] .bg-gray-100 { background: #1e293b !important; }
[data-theme="dark"] .bg-green-50 { background: #052e16 !important; }
[data-theme="dark"] .bg-emerald-50,[data-theme="dark"] .bg-emerald-100 { background: #052e16 !important; } /* ecfdf5 → dark green so text-slate-900 (#f1f5f9 override) passes ✅ */
[data-theme="dark"] .bg-teal-50,[data-theme="dark"] .bg-teal-100 { background: #042f2e !important; }
[data-theme="dark"] .bg-cyan-50 { background: #083344 !important; }
[data-theme="dark"] .bg-amber-50 { background: #3d1b00 !important; }
[data-theme="dark"] .bg-amber-400,[data-theme="dark"] .bg-amber-500 { background: #92400e !important; } /* amber-800, dark enough for amber-200 text to pass ✅ */
[data-theme="dark"] .bg-orange-50 { background: #3d1b00 !important; }
[data-theme="dark"] .bg-yellow-50,[data-theme="dark"] .bg-yellow-100 { background: #3d3000 !important; }
[data-theme="dark"] .bg-rose-50,[data-theme="dark"] .bg-rose-100 { background: #3d0a14 !important; }
[data-theme="dark"] .bg-violet-50,[data-theme="dark"] .bg-violet-100 { background: #1e0a3d !important; }
[data-theme="dark"] .bg-lime-50 { background: #1a2e05 !important; }

/* Text */
[data-theme="dark"] .text-slate-900,[data-theme="dark"] .text-gray-900 { color: #f1f5f9 !important; }
[data-theme="dark"] .text-slate-800,[data-theme="dark"] .text-gray-800 { color: #e2e8f0 !important; }
[data-theme="dark"] .text-slate-700,[data-theme="dark"] .text-gray-700 { color: #cbd5e1 !important; }
[data-theme="dark"] .text-slate-600,[data-theme="dark"] .text-gray-600 { color: #94a3b8 !important; }
[data-theme="dark"] .text-slate-500,[data-theme="dark"] .text-gray-500 { color: #94a3b8 !important; } /* was #64748b (3.83:1 on dark bg, FAILS) → slate-400 (7.11:1 ✅) */
/* slate-400 in dark mode: #94a3b8 is already the target — no override needed */

/* Borders */
[data-theme="dark"] .border-slate-100,[data-theme="dark"] .border-gray-100 { border-color: rgba(255,255,255,0.08) !important; }
[data-theme="dark"] .border-slate-200,[data-theme="dark"] .border-gray-200 { border-color: rgba(255,255,255,0.12) !important; }
[data-theme="dark"] .divide-slate-100 > * + * { border-color: rgba(255,255,255,0.08) !important; }

/* Cards */
[data-theme="dark"] .card-shadow { box-shadow: 0 4px 24px rgba(0,0,0,0.4) !important; }
[data-theme="dark"] .rounded-2xl,[data-theme="dark"] .rounded-xl { border-color: rgba(255,255,255,0.08); }

/* Nav / Header */
[data-theme="dark"] header,[data-theme="dark"] nav.sticky,[data-theme="dark"] .sticky.top-0 {
  background: rgba(10,15,30,0.95) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* Inputs */
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea {
  background: #1e293b !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: #f1f5f9 !important;
}

/* Tables */
[data-theme="dark"] table th,[data-theme="dark"] table td { color: #e2e8f0 !important; }
[data-theme="dark"] table thead tr { border-color: rgba(255,255,255,0.15) !important; }
[data-theme="dark"] table tbody tr { border-color: rgba(255,255,255,0.05) !important; }
[data-theme="dark"] table tbody tr:hover { background: rgba(255,255,255,0.04) !important; }

/* Gradients */
[data-theme="dark"] .hero-gradient { background: linear-gradient(135deg,#1a2e05 0%,#0c2340 100%) !important; }
[data-theme="dark"] .cta-gradient { background: linear-gradient(135deg,#3d6e0a 0%,#0c2340 100%) !important; }

/* Pricing */
[data-theme="dark"] .pricing-popular { border-color: #84CC16 !important; }

/* Comparison */
[data-theme="dark"] #compare { background: #080f1a !important; }
[data-theme="dark"] .compare-table th:first-child,[data-theme="dark"] .compare-table td:first-child { color: #f1f5f9 !important; }
[data-theme="dark"] .compare-table td.ours-col { background: rgba(132,204,22,0.08) !important; }

/* Pills */
[data-theme="dark"] .pill-critical { background:#3d0a14 !important;color:#fca5a5 !important;border-color:#7f1d1d !important; }
[data-theme="dark"] .pill-serious { background:#3d1b00 !important;color:#fdba74 !important;border-color:#7c2d12 !important; }
[data-theme="dark"] .pill-moderate { background:#3d3000 !important;color:#fde047 !important;border-color:#713f12 !important; }
[data-theme="dark"] .pill-minor { background:#052e16 !important;color:#86efac !important;border-color:#14532d !important; }

/* ── Logo swap: use logo-dark.png in dark mode (white Clovi text) ── */
[data-theme="dark"] img[src*="logo-light"] {
  content: url('/images/cloviable-logo-dark.png');
}

/* ── Remove remaining white backgrounds in dark mode ── */
[data-theme="dark"] .shadow-lg { box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important; }
[data-theme="dark"] .rounded-2xl.bg-white,
[data-theme="dark"] .rounded-xl.bg-white { background: #1a2540 !important; }
[data-theme="dark"] section.bg-white { background: #0a0f1e !important; }
[data-theme="dark"] section.bg-slate-50 { background: #080e1a !important; }
[data-theme="dark"] .bg-white\/95 { background: rgba(10,15,30,0.95) !important; }
[data-theme="dark"] .bg-white\/80 { background: rgba(10,15,30,0.8) !important; }

/* ── Fix teal focus rings → lime ── */
[data-theme="light"] .focus-within\:border-teal-500:focus-within,
[data-theme="dark"] .focus-within\:border-teal-500:focus-within { 
  border-color: #84CC16 !important; 
}
[data-theme="light"] .focus-within\:ring-teal-500\/20:focus-within,
[data-theme="dark"] .focus-within\:ring-teal-500\/20:focus-within { 
  --tw-ring-color: rgba(132,204,22,0.2) !important; 
}

/* ── Ensure hero text is white in dark mode ── */
[data-theme="dark"] .text-white\/60 { color: rgba(241,245,249,0.7) !important; }
[data-theme="dark"] .text-white\/80 { color: rgba(241,245,249,0.85) !important; }

/* ── Code blocks ── */
/* code bg: dark. color: #a5f3a5 (light green) — was #4d7c0f (2.92:1 on dark, FAILS) */
[data-theme="dark"] code { background: #1e293b !important; color: #a5f3a5 !important; } /* #a5f3a5 = 11.1:1 on #1e293b ✅ */
[data-theme="dark"] pre { background: #0f172a !important; color: #e2e8f0 !important; }

/* ── Modal/dialog backgrounds ── */
[data-theme="dark"] .modal, [data-theme="dark"] [role="dialog"] { 
  background: #1e293b !important; 
  border-color: rgba(255,255,255,0.12) !important;
}

/* ── Pricing card highlighted border ── */
[data-theme="dark"] [style*="border-top-color:#4d7c0f"],
[data-theme="dark"] [style*="border-top-color: #4d7c0f"] { border-top-color: #4d7c0f !important; }

/* ── Dark mode CSS custom property overrides ── */
[data-theme="dark"] {
  --bg: #0a0f1e;
  --bg-alt: #080e1a;
  --surface: #1e293b;
  --surface-2: #263045;
  --border: rgba(255,255,255,0.08);
  --text: #f1f5f9;
  --text-muted: #94a3b8;
}

/* ══════════════════════════════════════════════════════
   COMPREHENSIVE DARK MODE — v2 (addresses all white pages)
   ══════════════════════════════════════════════════════ */

/* Body and html root */
[data-theme="dark"] html,
[data-theme="dark"] body,
[data-theme="dark"] body.bg-white,
[data-theme="dark"] body.bg-slate-50 {
  background-color: #0a0f1e !important;
  color: #f1f5f9 !important;
}

/* Every section/article/main/div that has a light bg class */
[data-theme="dark"] section,
[data-theme="dark"] article,
[data-theme="dark"] main {
  background-color: transparent;
  color: #f1f5f9;
}
[data-theme="dark"] section.bg-white,
[data-theme="dark"] section.bg-slate-50,
[data-theme="dark"] section.bg-slate-100,
[data-theme="dark"] div.bg-white,
[data-theme="dark"] div.bg-slate-50,
[data-theme="dark"] div.bg-slate-100 {
  background-color: #0d1526 !important;
}

/* Pricing cards */
[data-theme="dark"] .pricing-card,
[data-theme="dark"] [class*="pricing"] .bg-white,
[data-theme="dark"] [class*="tier"] .bg-white {
  background-color: #1a2540 !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: #f1f5f9 !important;
}

/* FAQ accordions */
[data-theme="dark"] details,
[data-theme="dark"] .faq-item,
[data-theme="dark"] [class*="accordion"],
[data-theme="dark"] details > summary {
  background-color: #1a2540 !important;
  color: #f1f5f9 !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* ALL cards, panels, modals */
[data-theme="dark"] .card,
[data-theme="dark"] .panel,
[data-theme="dark"] .tilt-card,
[data-theme="dark"] [class*="rounded-2xl"].bg-white,
[data-theme="dark"] [class*="rounded-xl"].bg-white,
[data-theme="dark"] [class*="rounded-lg"].bg-white {
  background-color: #1a2540 !important;
  border-color: rgba(255,255,255,0.1) !important;
}

/* Dropdown menus */
[data-theme="dark"] [x-show].bg-white,
[data-theme="dark"] [x-cloak].bg-white,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] [class*="absolute"].bg-white {
  background-color: #1a2540 !important;
  border-color: rgba(255,255,255,0.1) !important;
}

/* Mobile menu */
[data-theme="dark"] .lg\\:hidden.bg-white,
[data-theme="dark"] [x-show="mobileOpen"].bg-white {
  background-color: #0d1526 !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* Feature comparison table background */
[data-theme="dark"] .overflow-x-auto,
[data-theme="dark"] .overflow-x-auto > div,
[data-theme="dark"] .overflow-x-auto table {
  background-color: transparent !important;
}

/* CTA sections with light bg */
[data-theme="dark"] .cta-section,
[data-theme="dark"] [class*="cta"].bg-white,
[data-theme="dark"] [class*="cta"].bg-slate-50 {
  background-color: #1a2e05 !important;
}

/* Footer */
[data-theme="dark"] footer {
  background-color: #080e18 !important;
}

/* Fix teal inline styles */
[data-theme="dark"] [style*="background:#0d9488"],
[data-theme="dark"] [style*="background: #0d9488"] {
  background: #84CC16 !important;
}

/* Fix sections with inline teal/cyan bg (#f0fdfa = teal-50) */
[data-theme="dark"] [style*="background:#f0fdfa"],
[data-theme="dark"] [style*="background: #f0fdfa"] {
  background: #042f2e !important;
}

/* Ensure inputs/forms visible */
[data-theme="dark"] .form-control,
[data-theme="dark"] .input,
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"] {
  background-color: #1e293b !important;
  border-color: rgba(255,255,255,0.2) !important;
  color: #f1f5f9 !important;
}
[data-theme="dark"] input::placeholder { color: #64748b !important; }

/* Shadow boxes become dark */
[data-theme="dark"] .shadow,
[data-theme="dark"] .shadow-sm,
[data-theme="dark"] .shadow-md,
[data-theme="dark"] .shadow-lg,
[data-theme="dark"] .shadow-xl {
  --tw-shadow-color: rgba(0,0,0,0.5);
}

/* ══════════════════════════════════════════════════════
   NUCLEAR DARK MODE — v3: override ALL white/light backgrounds
   ══════════════════════════════════════════════════════ */

/* Make ALL elements without explicit dark bg transparent or dark */
[data-theme="dark"] *:not([class*="bg-lime"]):not([class*="bg-green-5"]):not([style*="background:#84CC16"]):not([style*="background: #84CC16"]) {
  --tw-bg-opacity: 1;
}

/* Override Tailwind-generated inline styles on white elements */
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background:white"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #ffffff"],
[data-theme="dark"] [style*="background:#ffffff"],
[data-theme="dark"] [style*="background: rgb(255, 255, 255)"] {
  background: #1a2540 !important;
}

/* Sections - ensure NONE are white */
[data-theme="dark"] section[style*="background"],
[data-theme="dark"] div[style*="background:#f"],
[data-theme="dark"] div[style*="background: #f"] {
  filter: none; /* don't accidentally filter elements */
}

/* Pricing tier cards specificity boost */  
[data-theme="dark"] .tilt-card,
[data-theme="dark"] .tilt-card *:not(span):not(i):not(svg):not(button) {
  background-color: #1a2540 !important;
}
[data-theme="dark"] .tilt-card button,
[data-theme="dark"] .tilt-card .btn-primary,
[data-theme="dark"] .tilt-card [class*="btn"] {
  /* Keep button colors - don't override */
  background-color: initial;
}

/* FAQ / accordion items */
[data-theme="dark"] details {
  background-color: #1a2540 !important;
  border-color: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] details[open] {
  background-color: #1e2d4a !important;
}
[data-theme="dark"] summary {
  background-color: transparent !important;
  color: #f1f5f9 !important;
}

/* Override bg-var() patterns (our inline style fix) */
[data-theme="dark"] [style*="var(--bg,"] {
  background: #0a0f1e !important;
}
[data-theme="dark"] [style*="var(--bg-alt,"],
[data-theme="dark"] [style*="var(--surface,"] {
  background: #1a2540 !important;
}

/* ══ Accessibility fixes (from self-scan 2026-06-18) ══ */

/* Fix color-contrast: slate-400/500 on white fails 4.5:1 */
/* In light mode, use darker text for muted elements */
/* REMOVED: global text-slate-400/500 overrides caused dark-bg footer failures */

/* Fix link-in-text-block: inline links must have underline */
p a, li a, span a, td a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* But not nav links or buttons */
nav a, .btn a, button a, .nav-cta, a.btn { text-decoration: none !important; }

/* sr-only skip link */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}
.sr-only.focus\\:not-sr-only:focus,
.focus\\:not-sr-only:focus {
  position: fixed;
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}