/* Shared dark theme for inner pages (v5.5).
   Injected into every served HTML page that doesn't already self-theme (see app.py
   _inject_theme). All rules are scoped to :root[data-theme="dark"], so light mode is
   never touched. Targets the Tailwind utility classes + common raw patterns these
   pages use (bg-white cards, slate text/borders, form controls, soft accent panels). */

:root[data-theme="dark"]{
  color-scheme: dark;
}

/* ---- page ground + typography ---- */
:root[data-theme="dark"] body{ background:#0d0f13 !important; color:#e8eaee; }
:root[data-theme="dark"] .bg-slate-50,
:root[data-theme="dark"] .bg-gray-50,
:root[data-theme="dark"] .bg-slate-100\/50{ background:#0d0f13 !important; }

/* ---- surfaces / cards ---- */
:root[data-theme="dark"] .bg-white{ background:#14171d !important; }
:root[data-theme="dark"] .bg-slate-100,
:root[data-theme="dark"] .bg-gray-100,
:root[data-theme="dark"] .bg-slate-200,
:root[data-theme="dark"] .bg-gray-200{ background:#1d2027 !important; }

/* ---- borders / dividers ---- */
:root[data-theme="dark"] .border,
:root[data-theme="dark"] .border-slate-200,
:root[data-theme="dark"] .border-slate-100,
:root[data-theme="dark"] .border-gray-200,
:root[data-theme="dark"] .border-gray-100,
:root[data-theme="dark"] .border-slate-300,
:root[data-theme="dark"] .divide-slate-200 > *{ border-color:#2a2f39 !important; }

/* ---- text ramp ---- */
:root[data-theme="dark"] .text-slate-900,
:root[data-theme="dark"] .text-gray-900,
:root[data-theme="dark"] .text-slate-800,
:root[data-theme="dark"] .text-gray-800,
:root[data-theme="dark"] .text-black{ color:#e8eaee !important; }
:root[data-theme="dark"] .text-slate-700,
:root[data-theme="dark"] .text-gray-700,
:root[data-theme="dark"] .text-slate-600,
:root[data-theme="dark"] .text-gray-600{ color:#c4c8d0 !important; }
:root[data-theme="dark"] .text-slate-500,
:root[data-theme="dark"] .text-gray-500,
:root[data-theme="dark"] .text-slate-400,
:root[data-theme="dark"] .text-gray-400,
:root[data-theme="dark"] .text-slate-300{ color:#8b929e !important; }

/* ---- form controls (the biggest legibility gap) ---- */
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea{
  background:#14171d !important; color:#e8eaee !important; border-color:#2a2f39 !important;
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder{ color:#8b929e !important; opacity:1; }
:root[data-theme="dark"] select option{ background:#14171d; color:#e8eaee; }
:root[data-theme="dark"] input:disabled,
:root[data-theme="dark"] select:disabled{ opacity:.5; }

/* ---- soft accent panels (pale blue/indigo/teal callouts) → dark tint ---- */
:root[data-theme="dark"] [style*="#f0f9ff"],
:root[data-theme="dark"] [style*="#eff6ff"],
:root[data-theme="dark"] [style*="#eef2ff"],
:root[data-theme="dark"] [style*="#f8fafc"],
:root[data-theme="dark"] .bg-blue-50,
:root[data-theme="dark"] .bg-teal-50,
:root[data-theme="dark"] .bg-emerald-50,
:root[data-theme="dark"] .bg-indigo-50{ background:#12222b !important; color:#c4c8d0 !important; }

/* ---- tables ---- */
:root[data-theme="dark"] table{ background:#14171d; }
:root[data-theme="dark"] thead th,
:root[data-theme="dark"] th{ background:#14171d; color:#8b929e; }
:root[data-theme="dark"] td,
:root[data-theme="dark"] th{ border-color:#22262e; }
:root[data-theme="dark"] tbody tr:hover td{ background:#1a1e25; }

/* ---- shadows read as muddy smears on dark; flatten to a hairline ---- */
:root[data-theme="dark"] .shadow,
:root[data-theme="dark"] .shadow-sm,
:root[data-theme="dark"] .shadow-md,
:root[data-theme="dark"] .shadow-lg{ box-shadow:0 0 0 1px #22262e !important; }

/* ---- dashed upload/dropzones ---- */
:root[data-theme="dark"] .border-dashed{ border-color:#39404d !important; }