/* Dark theme for every page: on while <html data-theme="dark"> (the round
   half-sun / half-moon button under the menu; remembered in this browser, see
   base.html). Light mode is the pages as written; this file only overrides.

   1. Tailwind colour classes        2. Colours written into style="" attributes
   3. Shared pieces (base.html)      4. Each page's own classes
   Colours: page #0b1220, surface #111b2e, raised #1a2740, line #263449 / #334155,
   text #e2e8f0, muted #94a3b8 — the same set Parts & Stock Control was designed with. */

html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] body { background: #0b1220 !important; color: #e2e8f0; }

/* ── 1. Tailwind classes ─────────────────────────────────────────────────── */
/* Surfaces */
html[data-theme="dark"] .bg-white { background-color: #111b2e; }
html[data-theme="dark"] .bg-gray-50, html[data-theme="dark"] .bg-slate-50,
html[data-theme="dark"] [class*="bg-gray-50/"], html[data-theme="dark"] [class*="bg-slate-50/"] { background-color: #0f1a2e; }
html[data-theme="dark"] .bg-gray-100, html[data-theme="dark"] .bg-slate-100 { background-color: #1a2740; }
html[data-theme="dark"] .bg-gray-200, html[data-theme="dark"] .bg-slate-200 { background-color: #263449; }
html[data-theme="dark"] .bg-gray-300, html[data-theme="dark"] .bg-slate-300 { background-color: #334155; }
html[data-theme="dark"] .hover\:bg-gray-50:hover, html[data-theme="dark"] .hover\:bg-slate-50:hover,
html[data-theme="dark"] .hover\:bg-gray-100:hover, html[data-theme="dark"] .hover\:bg-slate-100:hover,
html[data-theme="dark"] .hover\:bg-white:hover, html[data-theme="dark"] .hover\:bg-slate-50\/60:hover { background-color: #1e293b; }
html[data-theme="dark"] .hover\:bg-slate-200:hover { background-color: #334155; }
html[data-theme="dark"] .disabled\:bg-slate-50:disabled { background-color: #0f1a2e; }

/* Tinted backgrounds: soft colour on the dark surface */
html[data-theme="dark"] .bg-blue-50, html[data-theme="dark"] [class*="bg-blue-50/"], html[data-theme="dark"] .bg-sky-50, html[data-theme="dark"] .bg-indigo-50 { background-color: rgba(59,130,246,.14); }
html[data-theme="dark"] .bg-blue-100, html[data-theme="dark"] .bg-sky-100, html[data-theme="dark"] .bg-indigo-100 { background-color: rgba(59,130,246,.24); }
html[data-theme="dark"] .bg-blue-200 { background-color: rgba(59,130,246,.34); }
html[data-theme="dark"] .bg-red-50, html[data-theme="dark"] .bg-rose-50 { background-color: rgba(239,68,68,.14); }
html[data-theme="dark"] .bg-red-100 { background-color: rgba(239,68,68,.24); }
html[data-theme="dark"] .bg-green-50, html[data-theme="dark"] [class*="bg-green-50/"], html[data-theme="dark"] .bg-emerald-50, html[data-theme="dark"] .bg-teal-50 { background-color: rgba(34,197,94,.13); }
html[data-theme="dark"] .bg-green-100, html[data-theme="dark"] .bg-teal-100 { background-color: rgba(34,197,94,.22); }
html[data-theme="dark"] .bg-amber-50, html[data-theme="dark"] [class*="bg-amber-50/"], html[data-theme="dark"] .bg-yellow-50, html[data-theme="dark"] .bg-orange-50 { background-color: rgba(245,158,11,.13); }
html[data-theme="dark"] .bg-amber-100, html[data-theme="dark"] .bg-yellow-100, html[data-theme="dark"] .bg-orange-100 { background-color: rgba(245,158,11,.22); }
html[data-theme="dark"] .bg-purple-50, html[data-theme="dark"] .bg-violet-50 { background-color: rgba(168,85,247,.14); }
html[data-theme="dark"] .bg-purple-100, html[data-theme="dark"] .bg-violet-100 { background-color: rgba(168,85,247,.24); }
html[data-theme="dark"] .hover\:bg-blue-50:hover, html[data-theme="dark"] .active\:bg-blue-50:active,
html[data-theme="dark"] [class*="hover:bg-blue-50/"]:hover, html[data-theme="dark"] .hover\:bg-blue-100:hover { background-color: rgba(59,130,246,.24); }
html[data-theme="dark"] .hover\:bg-blue-200:hover { background-color: rgba(59,130,246,.36); }
html[data-theme="dark"] .hover\:bg-red-50:hover, html[data-theme="dark"] .hover\:bg-red-100:hover { background-color: rgba(239,68,68,.24); }
html[data-theme="dark"] .hover\:bg-green-50:hover { background-color: rgba(34,197,94,.22); }
html[data-theme="dark"] .hover\:bg-amber-50:hover, html[data-theme="dark"] .hover\:bg-amber-100:hover { background-color: rgba(245,158,11,.22); }
html[data-theme="dark"] .hover\:bg-purple-100:hover { background-color: rgba(168,85,247,.24); }

/* Text */
html[data-theme="dark"] .text-slate-900, html[data-theme="dark"] .text-gray-900,
html[data-theme="dark"] .text-slate-800, html[data-theme="dark"] .text-gray-800 { color: #f1f5f9; }
html[data-theme="dark"] .text-slate-700, html[data-theme="dark"] .text-gray-700 { color: #d5dde8; }
html[data-theme="dark"] .text-slate-600, html[data-theme="dark"] .text-gray-600 { color: #b4c0cf; }
html[data-theme="dark"] .text-slate-500, html[data-theme="dark"] .text-gray-500 { color: #a3b1c4; }
html[data-theme="dark"] .text-slate-400, html[data-theme="dark"] .text-gray-400 { color: #8d9bb0; }
html[data-theme="dark"] .text-slate-300, html[data-theme="dark"] .text-gray-300 { color: #64748b; }
html[data-theme="dark"] .hover\:text-slate-800:hover, html[data-theme="dark"] .hover\:text-slate-700:hover,
html[data-theme="dark"] .hover\:text-slate-600:hover, html[data-theme="dark"] .hover\:text-gray-600:hover { color: #f1f5f9; }
html[data-theme="dark"] .text-blue-900, html[data-theme="dark"] .text-blue-800, html[data-theme="dark"] .text-blue-700,
html[data-theme="dark"] [class*="text-blue-900/"], html[data-theme="dark"] .text-sky-800, html[data-theme="dark"] .text-sky-700 { color: #93c5fd; }
html[data-theme="dark"] .text-blue-600, html[data-theme="dark"] .text-blue-500, html[data-theme="dark"] .text-sky-500 { color: #60a5fa; }
html[data-theme="dark"] .hover\:text-blue-800:hover, html[data-theme="dark"] .hover\:text-blue-700:hover,
html[data-theme="dark"] .hover\:text-blue-600:hover { color: #bfdbfe; }
html[data-theme="dark"] .text-indigo-900, html[data-theme="dark"] .text-indigo-800, html[data-theme="dark"] .text-indigo-700 { color: #c7d2fe; }
html[data-theme="dark"] .text-indigo-600, html[data-theme="dark"] .text-indigo-500 { color: #a5b4fc; }
html[data-theme="dark"] .text-red-900, html[data-theme="dark"] .text-red-800, html[data-theme="dark"] .text-red-700 { color: #fca5a5; }
html[data-theme="dark"] .text-red-600, html[data-theme="dark"] .text-red-500 { color: #f87171; }
html[data-theme="dark"] .hover\:text-red-600:hover, html[data-theme="dark"] .hover\:text-red-500:hover { color: #fca5a5; }
html[data-theme="dark"] .text-green-900, html[data-theme="dark"] .text-green-800, html[data-theme="dark"] .text-green-700,
html[data-theme="dark"] .text-emerald-700, html[data-theme="dark"] .text-teal-700 { color: #86efac; }
html[data-theme="dark"] .text-green-600, html[data-theme="dark"] .text-green-500, html[data-theme="dark"] .text-teal-600 { color: #4ade80; }
html[data-theme="dark"] .hover\:text-green-800:hover, html[data-theme="dark"] .hover\:text-green-600:hover { color: #bbf7d0; }
html[data-theme="dark"] .text-amber-900, html[data-theme="dark"] .text-amber-800, html[data-theme="dark"] .text-amber-700,
html[data-theme="dark"] .text-orange-900, html[data-theme="dark"] .text-orange-800, html[data-theme="dark"] .text-orange-700 { color: #fcd34d; }
html[data-theme="dark"] .text-amber-600, html[data-theme="dark"] .text-orange-600, html[data-theme="dark"] .text-orange-500 { color: #fbbf24; }
html[data-theme="dark"] .hover\:text-amber-600:hover { color: #fde68a; }
html[data-theme="dark"] .text-purple-700, html[data-theme="dark"] .text-purple-600, html[data-theme="dark"] .text-violet-700 { color: #d8b4fe; }

/* Lines */
html[data-theme="dark"] .border-gray-50, html[data-theme="dark"] .border-gray-100, html[data-theme="dark"] .border-gray-200,
html[data-theme="dark"] .border-slate-100, html[data-theme="dark"] .border-slate-200 { border-color: #263449; }
html[data-theme="dark"] .border-gray-300, html[data-theme="dark"] .border-slate-300 { border-color: #334155; }
html[data-theme="dark"] .border-slate-400 { border-color: #475569; }
html[data-theme="dark"] .divide-gray-50 > * + *, html[data-theme="dark"] .divide-gray-100 > * + *,
html[data-theme="dark"] .divide-gray-200 > * + *, html[data-theme="dark"] .divide-slate-100 > * + *,
html[data-theme="dark"] .divide-slate-200 > * + * { border-color: #263449; }
html[data-theme="dark"] .border-blue-100, html[data-theme="dark"] .border-blue-200, html[data-theme="dark"] .border-sky-100,
html[data-theme="dark"] .border-sky-200 { border-color: rgba(59,130,246,.35); }
html[data-theme="dark"] .border-blue-300 { border-color: rgba(59,130,246,.55); }
html[data-theme="dark"] .border-red-100, html[data-theme="dark"] .border-red-200 { border-color: rgba(239,68,68,.35); }
html[data-theme="dark"] .border-red-300 { border-color: rgba(239,68,68,.55); }
html[data-theme="dark"] .border-green-100, html[data-theme="dark"] .border-green-200 { border-color: rgba(34,197,94,.35); }
html[data-theme="dark"] .border-amber-100, html[data-theme="dark"] .border-amber-200 { border-color: rgba(245,158,11,.35); }
html[data-theme="dark"] .border-amber-300 { border-color: rgba(245,158,11,.55); }

/* Form fields with no colour class: dark boxes, light text */
html[data-theme="dark"] input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
html[data-theme="dark"] select, html[data-theme="dark"] textarea { background-color: #0b1220; color: #e2e8f0; border-color: #475569; }
html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #64748b; }
html[data-theme="dark"] input:disabled, html[data-theme="dark"] select:disabled, html[data-theme="dark"] textarea:disabled { background-color: #111b2e; color: #7c8ba1; }

/* ── 2. Colours written into style="" (pages and scripts) ─────────────────── */
html[data-theme="dark"] [style*="background:#fff;"], html[data-theme="dark"] [style*="background: #fff;"],
html[data-theme="dark"] [style$="background:#fff"], html[data-theme="dark"] [style*="background:#fff "],
html[data-theme="dark"] [style*="background:#ffffff"], html[data-theme="dark"] [style*="background: #ffffff"],
html[data-theme="dark"] [style*="background:white"], html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background-color:#fff;"], html[data-theme="dark"] [style*="background-color: #fff;"] { background: #111b2e !important; }
html[data-theme="dark"] [style*="background:#f8fafc"], html[data-theme="dark"] [style*="background: #f8fafc"],
html[data-theme="dark"] [style*="background:#f1f5f9"], html[data-theme="dark"] [style*="background: #f1f5f9"],
html[data-theme="dark"] [style*="background:#f9fafb"], html[data-theme="dark"] [style*="background:#f3f4f6"] { background: #0f1a2e !important; }
html[data-theme="dark"] [style*="background:#e2e8f0"], html[data-theme="dark"] [style*="background: #e2e8f0"] { background: #263449 !important; }
html[data-theme="dark"] [style*="background:#eff6ff"], html[data-theme="dark"] [style*="background:#dbeafe"] { background: rgba(59,130,246,.2) !important; }
html[data-theme="dark"] [style*="background:#fef2f2"], html[data-theme="dark"] [style*="background:#fee2e2"] { background: rgba(239,68,68,.2) !important; }
html[data-theme="dark"] [style*="background:#fef3c7"], html[data-theme="dark"] [style*="background:#fffbeb"],
html[data-theme="dark"] [style*="background:#fef9c3"] { background: rgba(245,158,11,.2) !important; }
html[data-theme="dark"] [style*="background:#f0fdf4"], html[data-theme="dark"] [style*="background:#dcfce7"] { background: rgba(34,197,94,.2) !important; }
html[data-theme="dark"] [style*=";color:#0f172a"], html[data-theme="dark"] [style^="color:#0f172a"], html[data-theme="dark"] [style*=" color:#0f172a"],
html[data-theme="dark"] [style*=";color:#1e293b"], html[data-theme="dark"] [style^="color:#1e293b"], html[data-theme="dark"] [style*=" color:#1e293b"],
html[data-theme="dark"] [style*="color: #0f172a"], html[data-theme="dark"] [style*="color: #1e293b"] { color: #f1f5f9 !important; }
html[data-theme="dark"] [style*=";color:#334155"], html[data-theme="dark"] [style^="color:#334155"], html[data-theme="dark"] [style*=" color:#334155"],
html[data-theme="dark"] [style*=";color:#475569"], html[data-theme="dark"] [style^="color:#475569"], html[data-theme="dark"] [style*=" color:#475569"] { color: #b4c0cf !important; }
html[data-theme="dark"] [style*=";color:#64748b"], html[data-theme="dark"] [style^="color:#64748b"], html[data-theme="dark"] [style*=" color:#64748b"] { color: #94a3b8 !important; }
html[data-theme="dark"] [style*="border-top:1px solid #e2e8f0"], html[data-theme="dark"] [style*="border-bottom:1px solid #e2e8f0"],
html[data-theme="dark"] [style*="border:1px solid #e2e8f0"], html[data-theme="dark"] [style*="border:1px solid #cbd5e1"] { border-color: #263449 !important; }

/* ── 3. Shared pieces (base.html) ──────────────────────────────────────────── */
html[data-theme="dark"] nav.bg-blue-600 { background-color: #1e3a8a; }
html[data-theme="dark"] nav .hover\:bg-blue-700:hover, html[data-theme="dark"] nav .bg-blue-700 { background-color: #1e40af; }
html[data-theme="dark"] #navMenu { background: #111b2e; color: #e2e8f0; border-color: #334155; }
html[data-theme="dark"] #navMenu a:hover, html[data-theme="dark"] #navMenu button:hover { background: #1e293b; }
html[data-theme="dark"] footer.bg-white { background: #0f1a2e; border-color: #263449; }
html[data-theme="dark"] .sophisticated-card { border-color: #334155 !important; box-shadow: 0 6px 18px -4px rgba(0,0,0,.55); }
html[data-theme="dark"] .sophisticated-card:hover { box-shadow: 0 12px 28px -6px rgba(0,0,0,.7); }
html[data-theme="dark"] .panel { background: #111b2e; border-color: #334155; box-shadow: 0 6px 18px -4px rgba(0,0,0,.55); }
html[data-theme="dark"] .panel-head { background: #0f1a2e; border-color: #334155; color: #cbd5e1; }
html[data-theme="dark"] .soft-row { border-color: #263449; }
html[data-theme="dark"] main table thead th { background: #0f1a2e; color: #94a3b8; border-color: #334155; }
html[data-theme="dark"] main table tbody tr { border-color: #263449; }
html[data-theme="dark"] main table tbody tr:hover { background-color: #1a2740; }
/* Urgent banners keep their red; the white "panel" under the PMUN heading goes dark */
html[data-theme="dark"] #pmunList { background: #111b2e !important; color: #e2e8f0 !important; }
html[data-theme="dark"] #pmunList .pmun-row { border-color: #7f1d1d !important; }
html[data-theme="dark"] #pmunList .pmun-row:hover { background: #1a2740; }

/* The theme switch itself */
.theme-btn { position: absolute; right: 12px; top: 1px; z-index: 40; width: 22px; height: 22px; border-radius: 9999px;
             display: flex; align-items: center; justify-content: center; background: #fff; color: #1e3a8a;
             border: 1px solid #94a3b8; box-shadow: 0 1px 4px rgba(15,23,42,.25); cursor: pointer; transition: transform .15s; }
.theme-btn:hover { transform: scale(1.1); }
.theme-btn svg { width: 14px; height: 14px; transition: transform .3s; }
html[data-theme="dark"] .theme-btn { background: #1e293b; color: #fcd34d; border-color: #475569; box-shadow: 0 1px 4px rgba(0,0,0,.6); }
html[data-theme="dark"] .theme-btn svg { transform: rotate(180deg); }
/* Phones have less room above the page, so the page starts a little lower to leave the button its own space */
@media (max-width: 767px) { .theme-btn { right: 10px; top: 4px; } main.flex-grow { padding-top: 32px; } }

/* Dark coloured text written into style="" (stat tiles, badges): lighter shades */
html[data-theme="dark"] [style*=";color:#14532d"], html[data-theme="dark"] [style^="color:#14532d"],
html[data-theme="dark"] [style*=";color:#166534"], html[data-theme="dark"] [style^="color:#166534"],
html[data-theme="dark"] [style*=";color:#15803d"], html[data-theme="dark"] [style^="color:#15803d"] { color: #86efac !important; }
html[data-theme="dark"] [style*=";color:#991b1b"], html[data-theme="dark"] [style^="color:#991b1b"],
html[data-theme="dark"] [style*=";color:#7f1d1d"], html[data-theme="dark"] [style^="color:#7f1d1d"],
html[data-theme="dark"] [style*=";color:#b91c1c"], html[data-theme="dark"] [style^="color:#b91c1c"] { color: #fca5a5 !important; }
html[data-theme="dark"] [style*=";color:#1e3a8a"], html[data-theme="dark"] [style^="color:#1e3a8a"],
html[data-theme="dark"] [style*=";color:#1d4ed8"], html[data-theme="dark"] [style^="color:#1d4ed8"],
html[data-theme="dark"] [style*=";color:#1e40af"], html[data-theme="dark"] [style^="color:#1e40af"] { color: #93c5fd !important; }
html[data-theme="dark"] [style*=";color:#92400e"], html[data-theme="dark"] [style^="color:#92400e"],
html[data-theme="dark"] [style*=";color:#78350f"], html[data-theme="dark"] [style^="color:#78350f"] { color: #fcd34d !important; }
/* …but text on a strong fill keeps its own colour */
html[data-theme="dark"] [style*="background:#15803d"], html[data-theme="dark"] [style*="background:#b91c1c"],
html[data-theme="dark"] [style*="background:#1d4ed8"], html[data-theme="dark"] [style*="background:#1e3a8a"] { color: #fff !important; }

/* ── 4. Page fixes the generator can't make ─────────────────────────────── */
/* Home screen: each tile's icon circle is a see-through version of its own colour */
html[data-theme="dark"] .ht-ico, html[data-theme="dark"] .ht-mini {
  background: color-mix(in srgb, var(--fg) 24%, transparent); color: color-mix(in srgb, var(--fg) 55%, white); }
html[data-theme="dark"] .ht:hover .ht-ico { background: var(--fg); color: #fff; }

/* "New updates are live" card (update_check.js): it is already dark blue, so
   keep its Refresh button white rather than the generated dark fill. */
html[data-theme="dark"] #updCard .upd-go { background: #fff; color: #1e3a8a; }
html[data-theme="dark"] #updCard .upd-go:hover { background: #dbeafe; }