/* =============================================================================
 *  Dark skin (default). The panel's views + zoe's compiled CSS are light-only;
 *  rather than rewrite every view, this remaps the light utility palette to dark.
 *  Loaded LAST in layout.php so it wins. Inline-styled charts keep their own colors.
 *  Palette: slate-900 base / slate-800 surface / slate-700 raised / slate-200 text.
 * ========================================================================== */
:root { color-scheme: dark; }

html, body { background-color: #0b1220 !important; color: #e2e8f0; }

/* ---- surfaces -------------------------------------------------------------- */
.bg-white           { background-color: #131c2e !important; }
.bg-slate-50        { background-color: #0b1220 !important; }
.bg-gray-50         { background-color: #0b1220 !important; }
.bg-slate-100,
.bg-gray-100        { background-color: #1e293b !important; }   /* inputs / soft fills */
.bg-slate-200       { background-color: #24314a !important; }   /* table head / active nav */
.bg-slate-300       { background-color: #334155 !important; }

/* ---- text ------------------------------------------------------------------ */
.text-black, .text-slate-900, .text-slate-800, .text-slate-700,
.text-gray-900, .text-gray-800, .text-gray-700,
h1, h2, h3, b, strong                                   { color: #e6edf7 !important; }
.text-slate-600, .text-slate-500, .text-slate-400,
.text-gray-600, .text-gray-500, .text-gray-400,
small                                                   { color: #94a3b8 !important; }

/* ---- borders --------------------------------------------------------------- */
.border, .border-b, .border-r, .border-t, .border-x-2,
.border-gray-200, .border-gray-300,
.border-slate-100, .border-slate-200, .border-slate-300,
.border-b-gray-200, .border-t-slate-200, .border-t-gray-200,
.divide-y > * + *                                       { border-color: #26324a !important; }

/* ---- inputs / selects / textareas ----------------------------------------- */
input, select, textarea {
    background-color: #1e293b !important;
    color: #e6edf7 !important;
    border-color: #35415c !important;
}
input::placeholder, textarea::placeholder { color: #64748b !important; }
select option { background-color: #131c2e; color: #e6edf7; }

/* ---- hover fills ----------------------------------------------------------- */
.hover\:bg-slate-100:hover, .hover\:bg-slate-100:hover,
.hover\:bg-indigo-100:hover                              { background-color: #24314a !important; }
.hover\:bg-slate-100:hover                               { background-color: #24314a !important; }

/* ---- soft accent fills used as chips/hover (…-50 / …-100) ----------------- */
.bg-green-50   { background-color: rgba(34,197,94,.16)  !important; }
.bg-blue-50    { background-color: rgba(59,130,246,.16) !important; }
.bg-red-50     { background-color: rgba(239,68,68,.16)  !important; }
.bg-yellow-50  { background-color: rgba(234,179,8,.16)  !important; }
.bg-gray-50    { background-color: rgba(148,163,184,.14)!important; }
.bg-indigo-50, .bg-indigo-100 { background-color: rgba(99,102,241,.18) !important; }
.bg-purple-50  { background-color: rgba(168,85,247,.16) !important; }
.bg-pink-50    { background-color: rgba(236,72,153,.16) !important; }
.bg-lime-50    { background-color: rgba(132,204,22,.16) !important; }
.bg-stone-100  { background-color: rgba(168,162,158,.16)!important; }
.bg-pink-50, .bg-blue-50, .bg-lime-50, .bg-stone-100 { border-color: #26324a !important; }

/* keep chip/badge label text bright on the translucent fills */
.text-green-700, .text-green-600   { color: #4ade80 !important; }
.text-blue-700,  .text-blue-600, .text-indigo-600 { color: #7aa2f7 !important; }
.text-red-700,   .text-red-600, .text-rose-600 { color: #f77 !important; }
.text-yellow-800                    { color: #fbbf24 !important; }
.text-indigo-700                    { color: #96a7ff !important; }
.text-purple-700                    { color: #c084fc !important; }
.text-pink-700                      { color: #f472b6 !important; }
.text-lime-700                      { color: #a3e635 !important; }
.text-stone-700                     { color: #cbd5e1 !important; }
.text-emerald-500, .text-emerald-600 { color: #34d399 !important; }

/* ---- shadows a touch stronger on dark ------------------------------------- */
.shadow, .shadow-sm, .shadow-lg { box-shadow: 0 1px 3px rgba(0,0,0,.5) !important; }

/* ---- misc: header/sidebar rely on bg-white (covered), scrollbars ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0b1220; }
::-webkit-scrollbar-thumb { background: #35415c; border-radius: 6px; }

/* the paw logo stays emerald; version/name legible */
.text-slate-400.text-xs { color: #7c8aa0 !important; }

/* ---- opacity-modified accent fills (…-50/60) + amber ----------------------
 *  The base .bg-blue-50 / .bg-yellow-50 remaps above don't match the /60 opacity
 *  variant (nor amber), so the server-form help/example cards stayed light-blue
 *  while their text was darkened→brightened = white-on-light, unreadable. Remap
 *  the variants used across the forms so those cards render as translucent-dark. */
.bg-blue-50\/60                     { background-color: rgba(59,130,246,.16) !important; }
.bg-amber-50, .bg-amber-50\/60      { background-color: rgba(234,179,8,.16)  !important; }
.border-blue-200, .border-amber-200 { border-color: #26324a !important; }
.text-amber-700, .text-amber-800    { color: #fbbf24 !important; }