/* =====================================================================
   SRN dark mode  (activated by  <html class="dark">  -> see toggleTheme() in app.blade.php)
   Re-maps the light Tailwind utilities used across the app, so every page
   gets a dark theme without editing each blade file.
   ===================================================================== */
html.dark {
    color-scheme: dark;
    --d-bg:#0C181C; --d-surface:#13262C; --d-surface2:#172D34; --d-surface3:#1B353D;
    --d-border:#24444D; --d-border2:#2F5560;
    --d-text:#E7F1F3; --d-text2:#B4C7CC; --d-muted:#8CA5AB; --d-brand:#6FD0E0; --d-input:#0F2126;
}
html.dark body { background:var(--d-bg); color:var(--d-text); }

/* theme toggle icons: moon in light mode, sun in dark mode */
html .theme-icon-sun { display:none; }
html.dark .theme-icon-sun { display:inline-block; }
html.dark .theme-icon-moon { display:none; }

/* ---------- cards / surfaces ---------- */
html.dark .sr-card { background:var(--d-surface); border-color:var(--d-border); }
html.dark .bg-white, html.dark .bg-\[\#FFFFFF\], html.dark .bg-\[\#fff\] { background-color:var(--d-surface); }
html.dark .bg-white\/95 { background-color:rgba(19,38,44,.95); }
html.dark .bg-white\/90 { background-color:rgba(19,38,44,.9); }
html.dark .bg-white\/80 { background-color:rgba(19,38,44,.8); }
html.dark .bg-white\/70 { background-color:rgba(19,38,44,.7); }
html.dark .bg-white\/60 { background-color:rgba(19,38,44,.6); }
html.dark .bg-white\/50 { background-color:rgba(19,38,44,.5); }
html.dark .bg-\[\#F8FAFC\] { background-color:var(--d-bg); }
html.dark .bg-gray-50, html.dark .bg-slate-50 { background-color:var(--d-surface2); }
html.dark .bg-gray-50\/80, html.dark .bg-gray-50\/50 { background-color:rgba(23,45,52,.8); }
html.dark .bg-gray-100, html.dark .bg-slate-100 { background-color:var(--d-surface3); }
html.dark .bg-gray-200, html.dark .bg-slate-200 { background-color:var(--d-border); }
html.dark .bg-gray-300 { background-color:var(--d-border2); }
html.dark .bg-\[\#E8F4F7\] { background-color:#17363E; }
html.dark .bg-\[\#E8F4F7\]\/50, html.dark .bg-\[\#E8F4F7\]\/60 { background-color:rgba(23,54,62,.6); }

/* ---------- hover states ---------- */
html.dark .hover\:bg-white:hover { background-color:var(--d-surface2); }
html.dark .hover\:bg-gray-50:hover, html.dark .hover\:bg-slate-50:hover { background-color:var(--d-surface2); }
html.dark .hover\:bg-gray-100:hover, html.dark .hover\:bg-slate-100:hover { background-color:var(--d-surface3); }
html.dark .hover\:bg-gray-200:hover { background-color:var(--d-border); }
html.dark .hover\:bg-\[\#E8F4F7\]:hover { background-color:#1F4550; }
html.dark .hover\:text-\[\#134E5E\]:hover, html.dark .group:hover .group-hover\:text-\[\#134E5E\] { color:#9BE3F0; }
html.dark .hover\:text-gray-900:hover, html.dark .hover\:text-gray-800:hover, html.dark .hover\:text-gray-700:hover { color:var(--d-text); }

/* ---------- text ---------- */
html.dark .text-\[\#10262B\], html.dark .text-black, html.dark .text-gray-900, html.dark .text-gray-800, html.dark .text-slate-900, html.dark .text-slate-800 { color:var(--d-text); }
html.dark .text-gray-700, html.dark .text-slate-700 { color:var(--d-text2); }
html.dark .text-gray-600, html.dark .text-gray-500, html.dark .text-slate-600, html.dark .text-slate-500 { color:#A5BBC1; }
html.dark .text-gray-400, html.dark .text-slate-400 { color:var(--d-muted); }
html.dark .text-gray-300, html.dark .text-slate-300 { color:#6B868D; }
html.dark .text-\[\#134E5E\] { color:var(--d-brand); }
html.dark .text-\[\#134E5E\]\/70, html.dark .text-\[\#134E5E\]\/80 { color:rgba(111,208,224,.8); }

/* ---------- borders / dividers ---------- */
html.dark .border-gray-50, html.dark .border-gray-100, html.dark .border-gray-200,
html.dark .border-slate-100, html.dark .border-slate-200 { border-color:var(--d-border); }
html.dark .border-gray-300, html.dark .border-slate-300 { border-color:var(--d-border2); }
html.dark .border-white, html.dark .ring-white { border-color:var(--d-surface); --tw-ring-color:var(--d-surface); }
html.dark .divide-gray-50 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color:var(--d-border); }
html.dark .ring-gray-100, html.dark .ring-gray-200 { --tw-ring-color:var(--d-border); }
html.dark hr { border-color:var(--d-border); }

/* ---------- gradients that start/end on white or light grey ---------- */
html.dark .from-white { --tw-gradient-from:#13262C var(--tw-gradient-from-position); --tw-gradient-to:rgb(19 38 44 / 0) var(--tw-gradient-to-position); --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to); }
html.dark .via-white { --tw-gradient-stops:var(--tw-gradient-from),#13262C var(--tw-gradient-via-position),var(--tw-gradient-to); }
html.dark .to-white { --tw-gradient-to:#13262C var(--tw-gradient-to-position); }
html.dark .from-gray-50 { --tw-gradient-from:#172D34 var(--tw-gradient-from-position); --tw-gradient-to:rgb(23 45 52 / 0) var(--tw-gradient-to-position); --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to); }
html.dark .to-gray-50 { --tw-gradient-to:#172D34 var(--tw-gradient-to-position); }
html.dark .from-\[\#F8FAFC\] { --tw-gradient-from:#0C181C var(--tw-gradient-from-position); --tw-gradient-to:rgb(12 24 28 / 0) var(--tw-gradient-to-position); --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to); }
html.dark .to-\[\#F8FAFC\] { --tw-gradient-to:#0C181C var(--tw-gradient-to-position); }
html.dark .from-\[\#E8F4F7\] { --tw-gradient-from:#17363E var(--tw-gradient-from-position); --tw-gradient-to:rgb(23 54 62 / 0) var(--tw-gradient-to-position); --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to); }
html.dark .to-\[\#E8F4F7\] { --tw-gradient-to:#17363E var(--tw-gradient-to-position); }

/* ---------- coloured status chips / alerts (pastel -> translucent) ---------- */

html.dark .bg-green-50, html.dark .bg-green-50\/50, html.dark .bg-green-50\/60, html.dark .bg-green-50\/70, html.dark .bg-green-50\/80 { background-color:rgba(34,197,94,.12); }
html.dark .bg-green-100 { background-color:rgba(34,197,94,.18); }
html.dark .bg-green-200 { background-color:rgba(34,197,94,.28); }
html.dark .hover\:bg-green-50:hover { background-color:rgba(34,197,94,.18); }
html.dark .hover\:bg-green-100:hover { background-color:rgba(34,197,94,.26); }
html.dark .text-green-500, html.dark .text-green-600, html.dark .text-green-700, html.dark .text-green-800, html.dark .text-green-900 { color:#86efac; }
html.dark .border-green-100, html.dark .border-green-200, html.dark .border-green-300 { border-color:rgba(34,197,94,.35); }
html.dark .bg-emerald-50, html.dark .bg-emerald-50\/50, html.dark .bg-emerald-50\/60, html.dark .bg-emerald-50\/70, html.dark .bg-emerald-50\/80 { background-color:rgba(16,185,129,.12); }
html.dark .bg-emerald-100 { background-color:rgba(16,185,129,.18); }
html.dark .bg-emerald-200 { background-color:rgba(16,185,129,.28); }
html.dark .hover\:bg-emerald-50:hover { background-color:rgba(16,185,129,.18); }
html.dark .hover\:bg-emerald-100:hover { background-color:rgba(16,185,129,.26); }
html.dark .text-emerald-500, html.dark .text-emerald-600, html.dark .text-emerald-700, html.dark .text-emerald-800, html.dark .text-emerald-900 { color:#6ee7b7; }
html.dark .border-emerald-100, html.dark .border-emerald-200, html.dark .border-emerald-300 { border-color:rgba(16,185,129,.35); }
html.dark .bg-red-50, html.dark .bg-red-50\/50, html.dark .bg-red-50\/60, html.dark .bg-red-50\/70, html.dark .bg-red-50\/80 { background-color:rgba(239,68,68,.12); }
html.dark .bg-red-100 { background-color:rgba(239,68,68,.18); }
html.dark .bg-red-200 { background-color:rgba(239,68,68,.28); }
html.dark .hover\:bg-red-50:hover { background-color:rgba(239,68,68,.18); }
html.dark .hover\:bg-red-100:hover { background-color:rgba(239,68,68,.26); }
html.dark .text-red-500, html.dark .text-red-600, html.dark .text-red-700, html.dark .text-red-800, html.dark .text-red-900 { color:#fca5a5; }
html.dark .border-red-100, html.dark .border-red-200, html.dark .border-red-300 { border-color:rgba(239,68,68,.35); }
html.dark .bg-rose-50, html.dark .bg-rose-50\/50, html.dark .bg-rose-50\/60, html.dark .bg-rose-50\/70, html.dark .bg-rose-50\/80 { background-color:rgba(244,63,94,.12); }
html.dark .bg-rose-100 { background-color:rgba(244,63,94,.18); }
html.dark .bg-rose-200 { background-color:rgba(244,63,94,.28); }
html.dark .hover\:bg-rose-50:hover { background-color:rgba(244,63,94,.18); }
html.dark .hover\:bg-rose-100:hover { background-color:rgba(244,63,94,.26); }
html.dark .text-rose-500, html.dark .text-rose-600, html.dark .text-rose-700, html.dark .text-rose-800, html.dark .text-rose-900 { color:#fda4af; }
html.dark .border-rose-100, html.dark .border-rose-200, html.dark .border-rose-300 { border-color:rgba(244,63,94,.35); }
html.dark .bg-yellow-50, html.dark .bg-yellow-50\/50, html.dark .bg-yellow-50\/60, html.dark .bg-yellow-50\/70, html.dark .bg-yellow-50\/80 { background-color:rgba(234,179,8,.12); }
html.dark .bg-yellow-100 { background-color:rgba(234,179,8,.18); }
html.dark .bg-yellow-200 { background-color:rgba(234,179,8,.28); }
html.dark .hover\:bg-yellow-50:hover { background-color:rgba(234,179,8,.18); }
html.dark .hover\:bg-yellow-100:hover { background-color:rgba(234,179,8,.26); }
html.dark .text-yellow-500, html.dark .text-yellow-600, html.dark .text-yellow-700, html.dark .text-yellow-800, html.dark .text-yellow-900 { color:#fde047; }
html.dark .border-yellow-100, html.dark .border-yellow-200, html.dark .border-yellow-300 { border-color:rgba(234,179,8,.35); }
html.dark .bg-amber-50, html.dark .bg-amber-50\/50, html.dark .bg-amber-50\/60, html.dark .bg-amber-50\/70, html.dark .bg-amber-50\/80 { background-color:rgba(245,158,11,.12); }
html.dark .bg-amber-100 { background-color:rgba(245,158,11,.18); }
html.dark .bg-amber-200 { background-color:rgba(245,158,11,.28); }
html.dark .hover\:bg-amber-50:hover { background-color:rgba(245,158,11,.18); }
html.dark .hover\:bg-amber-100:hover { background-color:rgba(245,158,11,.26); }
html.dark .text-amber-500, html.dark .text-amber-600, html.dark .text-amber-700, html.dark .text-amber-800, html.dark .text-amber-900 { color:#fcd34d; }
html.dark .border-amber-100, html.dark .border-amber-200, html.dark .border-amber-300 { border-color:rgba(245,158,11,.35); }
html.dark .bg-orange-50, html.dark .bg-orange-50\/50, html.dark .bg-orange-50\/60, html.dark .bg-orange-50\/70, html.dark .bg-orange-50\/80 { background-color:rgba(249,115,22,.12); }
html.dark .bg-orange-100 { background-color:rgba(249,115,22,.18); }
html.dark .bg-orange-200 { background-color:rgba(249,115,22,.28); }
html.dark .hover\:bg-orange-50:hover { background-color:rgba(249,115,22,.18); }
html.dark .hover\:bg-orange-100:hover { background-color:rgba(249,115,22,.26); }
html.dark .text-orange-500, html.dark .text-orange-600, html.dark .text-orange-700, html.dark .text-orange-800, html.dark .text-orange-900 { color:#fdba74; }
html.dark .border-orange-100, html.dark .border-orange-200, html.dark .border-orange-300 { border-color:rgba(249,115,22,.35); }
html.dark .bg-blue-50, html.dark .bg-blue-50\/50, html.dark .bg-blue-50\/60, html.dark .bg-blue-50\/70, html.dark .bg-blue-50\/80 { background-color:rgba(59,130,246,.12); }
html.dark .bg-blue-100 { background-color:rgba(59,130,246,.18); }
html.dark .bg-blue-200 { background-color:rgba(59,130,246,.28); }
html.dark .hover\:bg-blue-50:hover { background-color:rgba(59,130,246,.18); }
html.dark .hover\:bg-blue-100:hover { background-color:rgba(59,130,246,.26); }
html.dark .text-blue-500, html.dark .text-blue-600, html.dark .text-blue-700, html.dark .text-blue-800, html.dark .text-blue-900 { color:#93c5fd; }
html.dark .border-blue-100, html.dark .border-blue-200, html.dark .border-blue-300 { border-color:rgba(59,130,246,.35); }
html.dark .bg-sky-50, html.dark .bg-sky-50\/50, html.dark .bg-sky-50\/60, html.dark .bg-sky-50\/70, html.dark .bg-sky-50\/80 { background-color:rgba(14,165,233,.12); }
html.dark .bg-sky-100 { background-color:rgba(14,165,233,.18); }
html.dark .bg-sky-200 { background-color:rgba(14,165,233,.28); }
html.dark .hover\:bg-sky-50:hover { background-color:rgba(14,165,233,.18); }
html.dark .hover\:bg-sky-100:hover { background-color:rgba(14,165,233,.26); }
html.dark .text-sky-500, html.dark .text-sky-600, html.dark .text-sky-700, html.dark .text-sky-800, html.dark .text-sky-900 { color:#7dd3fc; }
html.dark .border-sky-100, html.dark .border-sky-200, html.dark .border-sky-300 { border-color:rgba(14,165,233,.35); }
html.dark .bg-indigo-50, html.dark .bg-indigo-50\/50, html.dark .bg-indigo-50\/60, html.dark .bg-indigo-50\/70, html.dark .bg-indigo-50\/80 { background-color:rgba(99,102,241,.12); }
html.dark .bg-indigo-100 { background-color:rgba(99,102,241,.18); }
html.dark .bg-indigo-200 { background-color:rgba(99,102,241,.28); }
html.dark .hover\:bg-indigo-50:hover { background-color:rgba(99,102,241,.18); }
html.dark .hover\:bg-indigo-100:hover { background-color:rgba(99,102,241,.26); }
html.dark .text-indigo-500, html.dark .text-indigo-600, html.dark .text-indigo-700, html.dark .text-indigo-800, html.dark .text-indigo-900 { color:#a5b4fc; }
html.dark .border-indigo-100, html.dark .border-indigo-200, html.dark .border-indigo-300 { border-color:rgba(99,102,241,.35); }
html.dark .bg-purple-50, html.dark .bg-purple-50\/50, html.dark .bg-purple-50\/60, html.dark .bg-purple-50\/70, html.dark .bg-purple-50\/80 { background-color:rgba(168,85,247,.12); }
html.dark .bg-purple-100 { background-color:rgba(168,85,247,.18); }
html.dark .bg-purple-200 { background-color:rgba(168,85,247,.28); }
html.dark .hover\:bg-purple-50:hover { background-color:rgba(168,85,247,.18); }
html.dark .hover\:bg-purple-100:hover { background-color:rgba(168,85,247,.26); }
html.dark .text-purple-500, html.dark .text-purple-600, html.dark .text-purple-700, html.dark .text-purple-800, html.dark .text-purple-900 { color:#d8b4fe; }
html.dark .border-purple-100, html.dark .border-purple-200, html.dark .border-purple-300 { border-color:rgba(168,85,247,.35); }
html.dark .bg-violet-50, html.dark .bg-violet-50\/50, html.dark .bg-violet-50\/60, html.dark .bg-violet-50\/70, html.dark .bg-violet-50\/80 { background-color:rgba(139,92,246,.12); }
html.dark .bg-violet-100 { background-color:rgba(139,92,246,.18); }
html.dark .bg-violet-200 { background-color:rgba(139,92,246,.28); }
html.dark .hover\:bg-violet-50:hover { background-color:rgba(139,92,246,.18); }
html.dark .hover\:bg-violet-100:hover { background-color:rgba(139,92,246,.26); }
html.dark .text-violet-500, html.dark .text-violet-600, html.dark .text-violet-700, html.dark .text-violet-800, html.dark .text-violet-900 { color:#c4b5fd; }
html.dark .border-violet-100, html.dark .border-violet-200, html.dark .border-violet-300 { border-color:rgba(139,92,246,.35); }
html.dark .bg-teal-50, html.dark .bg-teal-50\/50, html.dark .bg-teal-50\/60, html.dark .bg-teal-50\/70, html.dark .bg-teal-50\/80 { background-color:rgba(20,184,166,.12); }
html.dark .bg-teal-100 { background-color:rgba(20,184,166,.18); }
html.dark .bg-teal-200 { background-color:rgba(20,184,166,.28); }
html.dark .hover\:bg-teal-50:hover { background-color:rgba(20,184,166,.18); }
html.dark .hover\:bg-teal-100:hover { background-color:rgba(20,184,166,.26); }
html.dark .text-teal-500, html.dark .text-teal-600, html.dark .text-teal-700, html.dark .text-teal-800, html.dark .text-teal-900 { color:#5eead4; }
html.dark .border-teal-100, html.dark .border-teal-200, html.dark .border-teal-300 { border-color:rgba(20,184,166,.35); }
html.dark .bg-cyan-50, html.dark .bg-cyan-50\/50, html.dark .bg-cyan-50\/60, html.dark .bg-cyan-50\/70, html.dark .bg-cyan-50\/80 { background-color:rgba(6,182,212,.12); }
html.dark .bg-cyan-100 { background-color:rgba(6,182,212,.18); }
html.dark .bg-cyan-200 { background-color:rgba(6,182,212,.28); }
html.dark .hover\:bg-cyan-50:hover { background-color:rgba(6,182,212,.18); }
html.dark .hover\:bg-cyan-100:hover { background-color:rgba(6,182,212,.26); }
html.dark .text-cyan-500, html.dark .text-cyan-600, html.dark .text-cyan-700, html.dark .text-cyan-800, html.dark .text-cyan-900 { color:#67e8f9; }
html.dark .border-cyan-100, html.dark .border-cyan-200, html.dark .border-cyan-300 { border-color:rgba(6,182,212,.35); }
html.dark .bg-pink-50, html.dark .bg-pink-50\/50, html.dark .bg-pink-50\/60, html.dark .bg-pink-50\/70, html.dark .bg-pink-50\/80 { background-color:rgba(236,72,153,.12); }
html.dark .bg-pink-100 { background-color:rgba(236,72,153,.18); }
html.dark .bg-pink-200 { background-color:rgba(236,72,153,.28); }
html.dark .hover\:bg-pink-50:hover { background-color:rgba(236,72,153,.18); }
html.dark .hover\:bg-pink-100:hover { background-color:rgba(236,72,153,.26); }
html.dark .text-pink-500, html.dark .text-pink-600, html.dark .text-pink-700, html.dark .text-pink-800, html.dark .text-pink-900 { color:#f9a8d4; }
html.dark .border-pink-100, html.dark .border-pink-200, html.dark .border-pink-300 { border-color:rgba(236,72,153,.35); }
html.dark .bg-lime-50, html.dark .bg-lime-50\/50, html.dark .bg-lime-50\/60, html.dark .bg-lime-50\/70, html.dark .bg-lime-50\/80 { background-color:rgba(132,204,22,.12); }
html.dark .bg-lime-100 { background-color:rgba(132,204,22,.18); }
html.dark .bg-lime-200 { background-color:rgba(132,204,22,.28); }
html.dark .hover\:bg-lime-50:hover { background-color:rgba(132,204,22,.18); }
html.dark .hover\:bg-lime-100:hover { background-color:rgba(132,204,22,.26); }
html.dark .text-lime-500, html.dark .text-lime-600, html.dark .text-lime-700, html.dark .text-lime-800, html.dark .text-lime-900 { color:#bef264; }
html.dark .border-lime-100, html.dark .border-lime-200, html.dark .border-lime-300 { border-color:rgba(132,204,22,.35); }

/* ---------- form controls ---------- */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="file"]):not(.bg-transparent),
html.dark select:not(.bg-transparent),
html.dark textarea:not(.bg-transparent) {
    background-color:var(--d-input); color:var(--d-text); border-color:#2A4A54;
}
html.dark input:focus, html.dark select:focus, html.dark textarea:focus { border-color:var(--d-brand); }
html.dark input::placeholder, html.dark textarea::placeholder { color:#6B868D; opacity:1; }
html.dark input:disabled, html.dark select:disabled, html.dark textarea:disabled { background-color:var(--d-bg); color:var(--d-muted); }
html.dark option { background-color:var(--d-surface); color:var(--d-text); }
html.dark input:-webkit-autofill { -webkit-box-shadow:0 0 0 1000px var(--d-input) inset; -webkit-text-fill-color:var(--d-text); }
html.dark input[type="file"]::file-selector-button { background:var(--d-surface3); color:var(--d-text); border:0; border-radius:.5rem; padding:.35rem .75rem; }

/* ---------- tables / code / misc ---------- */
html.dark table { border-color:var(--d-border); }
html.dark thead { background-color:var(--d-surface2); }
html.dark pre, html.dark code { background-color:var(--d-surface2); color:var(--d-text2); }
html.dark ::-webkit-scrollbar-thumb { background:var(--d-border2); border-radius:8px; }
html.dark ::-webkit-scrollbar-track { background:transparent; }
html.dark { scrollbar-color:var(--d-border2) transparent; }
html.dark .shadow-sm, html.dark .shadow, html.dark .shadow-md, html.dark .shadow-lg { --tw-shadow-color:rgb(0 0 0 / .35); }