/* ── Smooth theme transition ─────────────────────────────────────────────── */
*, *::before, *::after {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.15s ease;
}

/* ── Root dark vars ──────────────────────────────────────────────────────── */
html.dark body {
  background: #0f0f0f !important;
  color: #e0e0e0 !important;
}

/* Nav */
html.dark nav {
  background: rgba(12,12,12,0.96) !important;
  border-color: #1e1e1e !important;
}
html.dark nav span { color: #e0e0e0 !important; }

/* Footer */
html.dark footer { border-color: #1e1e1e !important; }
html.dark footer p,
html.dark footer a { color: #444 !important; }

/* ── Class-based elements ────────────────────────────────────────────────── */
html.dark .card {
  background: #161616 !important;
  border-color: #242424 !important;
}
html.dark .card:hover {
  border-color: #fff !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
}

html.dark .upload-zone { border-color: #2c2c2c !important; }
html.dark .upload-zone.drag-over { border-color: #555 !important; background: #161616 !important; }

/* Primary button — invert so it reads against dark bg */
html.dark .btn-black { background: #e8e8e8 !important; color: #0a0a0a !important; }
html.dark .btn-black:hover { background: #cfcfcf !important; }
html.dark .btn-black:disabled { background: #272727 !important; color: #555 !important; }

/* Outline button */
html.dark .btn-outline {
  background: #161616 !important;
  color: #d0d0d0 !important;
  border-color: #2c2c2c !important;
}
html.dark .btn-outline:hover { background: #1f1f1f !important; border-color: #444 !important; }

/* Form inputs */
html.dark .input {
  background: #161616 !important;
  border-color: #2c2c2c !important;
  color: #e0e0e0 !important;
}
html.dark .input:focus { border-color: #555 !important; }
html.dark .input::placeholder { color: #3a3a3a !important; }

/* Table rows */
html.dark .row { border-color: #1e1e1e !important; }
html.dark .row:hover { background: #161616 !important; }
html.dark .label { color: #444 !important; }

/* Progress bar */
html.dark .bar-track { background: #222 !important; }

/* Status badges */
html.dark .badge-done       { background: #052e16 !important; color: #4ade80 !important; border-color: #166534 !important; }
html.dark .badge-processing { background: #0c1a3a !important; color: #93c5fd !important; border-color: #1d4ed8 !important; }
html.dark .badge-error      { background: #2d0000 !important; color: #f87171 !important; border-color: #7f1d1d !important; }

/* Flag alerts */
html.dark .flag-alert   { background: #2d0000 !important; border-color: #7f1d1d !important; color: #f87171 !important; }
html.dark .flag-warning { background: #1c1200 !important; border-color: #78350f !important; color: #fcd34d !important; }
html.dark .flag-info    { background: #0c1a2a !important; border-color: #075985 !important; color: #7dd3fc !important; }

/* Pricing check rows */
html.dark .check-row { border-color: #1e1e1e !important; color: #c0c0c0 !important; }
html.dark .check-icon { background: #e8e8e8 !important; }
html.dark .check-icon svg { stroke: #0a0a0a !important; }
html.dark .dash-icon { background: #252525 !important; }

/* ── Inline style overrides (beat hardcoded colors) ──────────────────────── */
/* Text colors */
html.dark [style*="color:#0a0a0a"]  { color: #e0e0e0 !important; }
html.dark [style*="color: #0a0a0a"] { color: #e0e0e0 !important; }
html.dark [style*="color:#333"]     { color: #c0c0c0 !important; }
html.dark [style*="color:#555"]     { color: #888    !important; }
html.dark [style*="color:#888"]     { color: #606060 !important; }
html.dark [style*="color:#aaa"]     { color: #505050 !important; }
html.dark [style*="color:#bbb"]     { color: #454545 !important; }

/* White/light backgrounds */
html.dark [style*="background:#fff"]    { background: #161616 !important; }
html.dark [style*="background: #fff"]   { background: #161616 !important; }
html.dark [style*="background:#fafafa"] { background: #111    !important; }
html.dark [style*="background:#f9f9f9"] { background: #181818 !important; }
html.dark [style*="background:#f5f5f5"] { background: #1f1f1f !important; }
html.dark [style*="background:#f4f4f4"] { background: #1f1f1f !important; }
html.dark [style*="background:#f0f0f0"] { background: #222    !important; }
html.dark [style*="background:#e0e0e0"] { background: #2a2a2a !important; }
html.dark [style*="background:#ebebeb"] { background: #242424 !important; }

/* White bg + dark text combos (links, cards with inline style) */
html.dark [style*="background:#fff"][style*="color:#0a0a0a"]  { color: #e0e0e0 !important; }
html.dark [style*="background:#fff"][style*="border"]         { border-color: #2c2c2c !important; }

/* Borders */
html.dark [style*="border:1px solid #ebebeb"]       { border-color: #242424 !important; }
html.dark [style*="border: 1px solid #ebebeb"]      { border-color: #242424 !important; }
html.dark [style*="border:1px solid #e0e0e0"]       { border-color: #2c2c2c !important; }
html.dark [style*="border: 1px solid #e0e0e0"]      { border-color: #2c2c2c !important; }
html.dark [style*="border:1px solid #e8e8e8"]       { border-color: #2c2c2c !important; }
html.dark [style*="border-bottom:1px solid #f0f0f0"]{ border-color: #1e1e1e !important; }
html.dark [style*="border-top:1px solid #f0f0f0"]   { border-color: #1e1e1e !important; }

/* Headings (fallback if no inline color) */
html.dark h1, html.dark h2, html.dark h3, html.dark h4 { color: #e0e0e0; }
html.dark p { color: inherit; }

/* ── Pro badge (green) in dark mode ─────────────────────────────────────── */
html.dark [style*="color:#16a34a"]   { color: #4ade80 !important; }
html.dark [style*="background:#f0faf5"] { background: #052e16 !important; }
html.dark [style*="border:1px solid #c8eedd"] { border-color: #166534 !important; }
html.dark [style*="border: 1px solid #c8eedd"] { border-color: #166534 !important; }
html.dark [style*="background:#f0faf5"][style*="border"] { border-color: #166534 !important; }

/* ── Card hover: dark text → white in dark mode ─────────────────────────── */
html.dark .card:hover [style*="color:#0a0a0a"],
html.dark .card:hover [style*="color: #0a0a0a"],
html.dark .card:hover [style*="color:#333"],
html.dark .card:hover [style*="color:#555"],
html.dark .card:hover [style*="color:#888"],
html.dark .card:hover [style*="color:#aaa"],
html.dark .card:hover [style*="color:#bbb"],
html.dark .card:hover h1,
html.dark .card:hover h2,
html.dark .card:hover h3,
html.dark .card:hover p,
html.dark .card:hover span,
html.dark .card:hover .label { color: #fff !important; }
/* Keep semantic colours on hover */
html.dark .card:hover [style*="color:#16a34a"] { color: #4ade80 !important; }
html.dark .card:hover [style*="color:#dc2626"] { color: #f87171 !important; }

/* ── Theme toggle button ─────────────────────────────────────────────────── */
#theme-toggle {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  color: #555;
  transition: border-color 0.15s, background 0.15s;
}
#theme-toggle:hover { background: #f5f5f5; border-color: #bbb; }

html.dark #theme-toggle {
  border-color: #2c2c2c !important;
  color: #aaa !important;
}
html.dark #theme-toggle:hover {
  background: #1f1f1f !important;
  border-color: #444 !important;
}