/* ─────────────────────────────────────────────────────────────────────
   PAKHU ADMIN — LIGHT THEME

   This panel was built dark: sixty-odd views carry slate-950 backgrounds
   and slate-100 text inline. Rather than rewrite every one of them — a
   thousand edits, each a chance to miss a line and leave white text on a
   white card — the dark end of the palette is remapped here, in one place.

   Backgrounds go light, light text goes dark, borders soften. Mid-greys
   (slate-500/600) are deliberately left alone: they read as muted labels
   on either background.

   Loaded by BOTH layouts (_Layout and _AuthLayout). It lives in a file
   rather than inline in one of them precisely because it was inline once,
   the sign-in page uses the other layout, and the two drifted apart.

   To go back to dark: drop the two <link> tags and restore the body
   classes to `bg-slate-950 text-slate-100`. Nothing else knows about this.
   ───────────────────────────────────────────────────────────────────── */

/* Surfaces: page, panels, rows */
.bg-slate-950 { background-color: #f8fafc !important; }
.bg-slate-900 { background-color: #ffffff !important; }
.bg-slate-800 { background-color: #f1f5f9 !important; }
.bg-slate-700 { background-color: #e2e8f0 !important; }
.hover\:bg-slate-800:hover { background-color: #f1f5f9 !important; }
.hover\:bg-slate-700:hover { background-color: #e2e8f0 !important; }

/* Text that was light-on-dark becomes dark-on-light */
.text-slate-100 { color: #0f172a !important; }
.text-slate-200 { color: #1e293b !important; }
.text-slate-300 { color: #334155 !important; }
.text-slate-400 { color: #475569 !important; }
.hover\:text-slate-200:hover { color: #1e293b !important; }
.hover\:text-white:hover { color: #0f172a !important; }
.text-white { color: #0f172a !important; }

/* Borders and dividers */
.border-slate-800 { border-color: #e2e8f0 !important; }
.border-slate-700 { border-color: #cbd5e1 !important; }
.divide-slate-800 > * + * { border-color: #e2e8f0 !important; }
.divide-slate-700 > * + * { border-color: #cbd5e1 !important; }

/* Form fields */
.placeholder-slate-600::placeholder { color: #94a3b8 !important; }
input, select, textarea {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

/* ...but NOT tick boxes. A checkbox has no background of its own to recolour:
   the browser paints the box, and the tick is drawn INSIDE that paint. Forcing
   a near-white background on it (this rule, plus .bg-slate-950 on the element
   itself) left the ticked and unticked states looking identical, which is how
   it was reported - "clicking the checkbox does nothing". Let the browser draw
   its own control and just tell it which colour to use when ticked. */
input[type="checkbox"], input[type="radio"] {
    background-color: revert !important;
    accent-color: #4f46e5;
    width: 1rem;
    height: 1rem;
}

/* Coloured buttons keep their white label. Without this the blanket
   .text-white rule above turns a blue button's text invisible. */
.bg-brand, .bg-sky-500, .bg-sky-600, .bg-sky-700,
.bg-emerald-500, .bg-emerald-600, .bg-emerald-700,
.bg-rose-500, .bg-rose-600, .bg-rose-700,
.bg-amber-500, .bg-amber-600,
.bg-indigo-500, .bg-indigo-600,
.bg-violet-500, .bg-violet-600, .bg-violet-400,
.bg-sky-400, .bg-emerald-400, .bg-rose-400, .bg-amber-400, .bg-teal-500,
.bg-slate-600, .bg-slate-500 {
    color: #ffffff !important;
}
.bg-violet-500 *, .bg-violet-600 *, .bg-sky-500 *, .bg-emerald-500 *, .bg-rose-500 *, .bg-amber-500 * {
    color: inherit !important;
}
/* Translucent dark surfaces (bg-slate-900/50 etc.) were never remapped and
   rendered as grey boxes with faint text on the light page — the dashboard's
   second row was the visible case (owner 19-Aug). Map them to white too. */
.bg-slate-900\/50, .bg-slate-900\/60, .bg-slate-900\/80,
.bg-slate-950\/50, .bg-slate-950\/60, .bg-slate-950\/80 { background-color: #ffffff !important; }
.bg-slate-800\/50, .bg-slate-800\/40, .bg-slate-800\/60 { background-color: #f1f5f9 !important; }
.border-slate-800\/50 { border-color: #e2e8f0 !important; }
.hover\:bg-slate-800\/50:hover, .hover\:bg-slate-800\/40:hover { background-color: #f1f5f9 !important; }

/* Row hover. `hover:bg-slate-900/40` was never remapped, so hovering a
   Settings row painted it near-black under dark text and the row became
   unreadable exactly while being pointed at — reported as "hover effect is
   too dark". A hover should say "this row", not hide it. */
.hover\:bg-slate-900\/40:hover, .hover\:bg-slate-900\/50:hover,
.hover\:bg-slate-950\/40:hover, .hover\:bg-slate-950\/50:hover {
    background-color: #f1f5f9 !important;
}

/* Muted label greys. These were left alone on purpose — they read fine on
   either background AS TEXT — but on the light page a whole panel built out
   of slate-500 labels (the Safety Alert detail: PASSENGER, ROUTE, STARTED,
   TRIAGE NOTES) turns into pale grey on white and stops being readable.
   Nudged two steps darker: still visibly secondary, now legible. */
.text-slate-500 { color: #475569 !important; }
.text-slate-600 { color: #334155 !important; }

/* COLOURED text, same problem, missed the first time. Every status pill in
   this panel is `bg-{c}-500/10 text-{c}-400` (see WhitengUi.Pill): a 10%
   tint behind 400-level text. On the dark original that read fine; on white
   it is roughly 2:1 and the words vanish — the Safety Alerts "No response"
   and "Open" pills were reported unreadable for exactly this reason, and
   yesterday's pass darkened only the GREYS.
   Two steps darker keeps every colour's meaning and makes it legible.
   NOTE: these must stay ABOVE the `.bg-{c}-500 *` inherit rules below, so
   that a label sitting inside a solid coloured button still goes white. */
.text-emerald-400, .text-emerald-300 { color: #047857 !important; }
.text-sky-400,     .text-sky-300     { color: #0369a1 !important; }
.text-amber-400,   .text-amber-300   { color: #b45309 !important; }
.text-rose-400,    .text-rose-300    { color: #be123c !important; }
.text-red-400,     .text-red-300     { color: #b91c1c !important; }
.text-violet-400,  .text-violet-300  { color: #6d28d9 !important; }
.text-indigo-400,  .text-indigo-300  { color: #4338ca !important; }
.text-teal-400,    .text-teal-300    { color: #0f766e !important; }
.text-purple-400,  .text-purple-300  { color: #7e22ce !important; }
.text-orange-400,  .text-orange-300  { color: #c2410c !important; }
.text-cyan-400,    .text-cyan-300    { color: #0e7490 !important; }
.text-green-400,   .text-green-300   { color: #15803d !important; }
.text-blue-400,    .text-blue-300    { color: #1d4ed8 !important; }
.text-yellow-400,  .text-yellow-300  { color: #a16207 !important; }

/* The last five translucent slate shades in use that were never remapped.
   Found by listing every `bg-slate-N/NN` the views actually contain and
   diffing against this file, rather than by mapping the one that happened to
   be photographed: bg-slate-500/10 was the big grey block on Trip History's
   empty state, and hover:bg-slate-800/30 is the "hover is too strong" one. */
.bg-slate-500\/10, .bg-slate-900\/30 { background-color: #f8fafc !important; }
.bg-slate-700\/40 { background-color: #f1f5f9 !important; }
.hover\:bg-slate-800\/30:hover, .hover\:bg-slate-900\/80:hover { background-color: #f1f5f9 !important; }
.bg-brand *, .bg-sky-600 *, .bg-sky-700 *,
.bg-emerald-600 *, .bg-emerald-700 *,
.bg-rose-600 *, .bg-rose-700 * {
    color: inherit !important;
}

/* Sidebar keeps a little contrast against the page so the navigation
   still reads as a separate region rather than one flat white sheet. */
aside.bg-slate-900, nav.bg-slate-900 { background-color: #f1f5f9 !important; }