/* Dark mode for the web app.
 *
 * The pages are written in Tailwind utilities with the colour baked into each
 * class, and there are a few hundred of them across seven files. Rewriting
 * every one into a light/dark pair would be an enormous and error-prone diff,
 * so the meaning of the utilities already in use is redefined here instead,
 * under the root .dark class. A two-class selector outranks a one-class
 * selector on specificity alone, so nothing needs !important and nothing
 * depends on load order.
 *
 * Three decisions worth keeping:
 *
 * - Ink inverts across the scale: slate-600 text becomes slate-300, so what was
 *   muted stays muted and what was strong stays strong.
 * - Pale surfaces invert too, slate-50 becoming slate-900. The dark end does
 *   not: a dark slate background on a light page is an *emphasis* — a selected
 *   tab, a primary button, white text on it. Inverting that produced white on
 *   white. Those move to a tone lighter than the body instead, so the emphasis
 *   still reads. White text is left alone for the same reason: it sits on the
 *   red sidebar and on those pills, and has to keep winning there.
 * - Saturated accents are left alone — a red button, a green badge read on
 *   either ground. Only the pale tints behind them, and the dark ink meant to
 *   sit on those tints, are remapped.
 *
 * The court itself is not themed. It is rasterised by the engine from its own
 * palette, so it stays a wooden floor on a dark page — which is what it looks
 * like in a gym, and perfectly readable. Giving the engine a dark variant is
 * roadmap item 180a.
 *
 * Generated from the utilities actually present in the frontend pages. A page that
 * starts using a colour not listed here simply stays light: add it.
 */

:root { color-scheme: light; }
.dark { color-scheme: dark; }

/* The one thing no utility covers: the page behind everything. */
.dark body { background-color: #0f172a; color: #e2e8f0; }

/* The shell's menu goes dark with the rest of it. A bright red slab beside a
   dark page is not a dark theme, it is a dark theme with a hole in it.
   .app-sidebar rather than `.dark .bg-red-700` because that same red is the
   primary button everywhere else, and a button is meant to stay red.
   The red survives as an accent: the brand mark, and the page you are on. */
.dark .app-sidebar { background-color: #161b26; }
.dark .app-sidebar .border-red-600 { border-color: #2a313f; }
.dark .app-sidebar a:hover,
.dark .app-sidebar .hover\:bg-red-600:hover { background-color: #232a38; }
.dark .app-sidebar .bg-red-800 { background-color: #7f1d1d; }   /* the page you are on */
.dark .app-sidebar .bg-red-900 { background-color: #7f1d1d; }

/* Form controls are painted by the browser from color-scheme, but they still
   need a ground that matches the panels around them. */
.dark select, .dark input, .dark textarea { background-color: #1e293b; color: #e2e8f0; }
.dark input::placeholder, .dark textarea::placeholder { color: #64748b; }

.dark .bg-amber-100 { background-color: #3a2907; }
.dark .bg-amber-200 { background-color: #4a340a; }
.dark .bg-amber-50 { background-color: #291d05; }
.dark .bg-amber-50\/40 { background-color: rgb(41 29 5 / 40%); }
.dark .bg-amber-50\/50 { background-color: rgb(41 29 5 / 50%); }
.dark .bg-amber-50\/60 { background-color: rgb(41 29 5 / 60%); }
.dark .bg-blue-100 { background-color: #142845; }
.dark .bg-blue-50\/50 { background-color: rgb(16 31 54 / 50%); }
.dark .bg-emerald-100 { background-color: #13332b; }
.dark .bg-emerald-50 { background-color: #0f2620; }
.dark .bg-emerald-50\/50 { background-color: rgb(15 38 32 / 50%); }
.dark .bg-green-100 { background-color: #14301f; }
.dark .bg-green-50 { background-color: #0f2318; }
.dark .bg-indigo-100 { background-color: #1d2347; }
.dark .bg-indigo-50 { background-color: #161a38; }
.dark .bg-orange-100 { background-color: #3a2109; }
.dark .bg-purple-100 { background-color: #2d1941; }
.dark .bg-purple-50 { background-color: #221331; }
.dark .bg-purple-50\/50 { background-color: rgb(34 19 49 / 50%); }
.dark .bg-red-100 { background-color: #3a1619; }
.dark .bg-red-50 { background-color: #2a1113; }
.dark .bg-sky-100 { background-color: #112b3e; }
.dark .bg-sky-50 { background-color: #0d2130; }
.dark .bg-sky-50\/50 { background-color: rgb(13 33 48 / 50%); }
.dark .bg-sky-50\/70 { background-color: rgb(13 33 48 / 70%); }
.dark .bg-slate-100 { background-color: #1e293b; }
.dark .bg-slate-200 { background-color: #334155; }
.dark .bg-slate-300 { background-color: #475569; }
.dark .bg-slate-50 { background-color: #0f172a; }
.dark .bg-slate-50\/40 { background-color: rgb(15 23 42 / 40%); }
.dark .bg-slate-50\/50 { background-color: rgb(15 23 42 / 50%); }
/* /60 was missing, so the panel that opens under a team stayed near-white in
   dark mode — barely noticeable while it held three coaches, glaring once it
   held a roster. An opacity variant needs its own rule: the base class does
   not cover it. */
.dark .bg-slate-50\/60 { background-color: rgb(15 23 42 / 60%); }
.dark .bg-slate-600 { background-color: #475569; }
.dark .bg-slate-700 { background-color: #475569; }
.dark .bg-slate-800 { background-color: #334155; }
.dark .bg-slate-900 { background-color: #334155; }
.dark .bg-stone-200 { background-color: #332f2b; }
.dark .bg-white { background-color: #1e293b; }
.dark .bg-white\/10 { background-color: rgb(30 41 59 / 10%); }
.dark .bg-white\/15 { background-color: rgb(30 41 59 / 15%); }
.dark .bg-white\/20 { background-color: rgb(30 41 59 / 20%); }
.dark .border-red-700 { border-color: #fca5a5; }
.dark .border-slate-100 { border-color: #334155; }
.dark .border-slate-200 { border-color: #334155; }
.dark .border-slate-300 { border-color: #475569; }
.dark .border-slate-400 { border-color: #64748b; }
.dark .border-slate-700 { border-color: #475569; }
.dark .border-slate-900 { border-color: #475569; }
.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: #334155; }
.dark .ring-slate-300 { --tw-ring-color: #475569; }
.dark .ring-white\/30 { --tw-ring-color: rgb(71 85 105 / 30%); }
.dark .text-amber-700 { color: #fcd34d; }
.dark .text-amber-800 { color: #fde68a; }
.dark .text-amber-900 { color: #fef3c7; }
.dark .text-amber-950 { color: #fffbeb; }
.dark .text-blue-700 { color: #93c5fd; }
.dark .text-blue-800 { color: #bfdbfe; }
.dark .text-emerald-700 { color: #6ee7b7; }
.dark .text-emerald-800 { color: #a7f3d0; }
.dark .text-green-700 { color: #86efac; }
.dark .text-indigo-700 { color: #a5b4fc; }
.dark .text-indigo-800 { color: #c7d2fe; }
.dark .text-orange-700 { color: #fdba74; }
.dark .text-orange-800 { color: #fed7aa; }
.dark .text-orange-900 { color: #ffedd5; }
.dark .text-purple-700 { color: #d8b4fe; }
.dark .text-purple-800 { color: #e9d5ff; }
.dark .text-red-700 { color: #fca5a5; }
.dark .text-red-800 { color: #fecaca; }
.dark .text-sky-700 { color: #7dd3fc; }
.dark .text-sky-800 { color: #bae6fd; }
.dark .text-sky-900 { color: #e0f2fe; }
.dark .text-slate-300 { color: #475569; }
.dark .text-slate-400 { color: #64748b; }
.dark .text-slate-500 { color: #94a3b8; }
.dark .text-slate-600 { color: #cbd5e1; }
.dark .text-slate-700 { color: #e2e8f0; }
.dark .text-slate-800 { color: #f1f5f9; }
.dark .text-slate-900 { color: #f1f5f9; }
.dark .text-stone-700 { color: #d6d3d1; }
.dark .text-violet-900 { color: #ede9fe; }
.dark .text-yellow-900 { color: #fef9c3; }
.dark .disabled\:bg-slate-300:disabled { background-color: #475569; }
.dark .disabled\:hover\:border-slate-200:disabled:hover { border-color: #334155; }
.dark .file\:bg-slate-100::file-selector-button { background-color: #1e293b; }
.dark .file\:text-slate-700::file-selector-button { color: #e2e8f0; }
.dark .focus\:border-slate-300:focus { border-color: #475569; }
.dark .focus\:border-slate-400:focus { border-color: #64748b; }
.dark .hover\:bg-amber-100:hover { background-color: #3a2907; }
.dark .hover\:bg-amber-200:hover { background-color: #4a340a; }
.dark .hover\:bg-emerald-100:hover { background-color: #13332b; }
.dark .hover\:bg-red-100:hover { background-color: #3a1619; }
.dark .hover\:bg-red-50:hover { background-color: #2a1113; }
.dark .hover\:bg-slate-100:hover { background-color: #1e293b; }
.dark .hover\:bg-slate-200:hover { background-color: #334155; }
.dark .hover\:bg-slate-300:hover { background-color: #475569; }
.dark .hover\:bg-slate-50:hover { background-color: #0f172a; }
.dark .hover\:bg-slate-700:hover { background-color: #475569; }
.dark .hover\:bg-slate-900:hover { background-color: #334155; }
.dark .hover\:bg-white\/10:hover { background-color: rgb(30 41 59 / 10%); }
.dark .hover\:bg-white\/20:hover { background-color: rgb(30 41 59 / 20%); }
.dark .hover\:bg-white\/25:hover { background-color: rgb(30 41 59 / 25%); }
.dark .hover\:border-slate-200:hover { border-color: #334155; }
.dark .hover\:border-slate-400:hover { border-color: #64748b; }
.dark .hover\:text-red-700:hover { color: #fca5a5; }
.dark .hover\:text-slate-700:hover { color: #e2e8f0; }
.dark .hover\:text-slate-900:hover { color: #f1f5f9; }
.dark .hover\:file\:bg-slate-200:hover::file-selector-button { background-color: #334155; }
.dark .text-emerald-900 { color: #a7f3d0; }
.dark .text-emerald-800\/70 { color: rgb(167 243 208 / 70%); }

/* The venue map (Leaflet). Not Tailwind utilities, but the same problem: a map
 * is photographs of the world, and no class of ours colours it. Left alone it
 * is a white slab on a dark page, bright enough to be the only thing on screen.
 *
 * The filter is on the tile pane alone, never the whole map: markers, controls
 * and the attribution live in other panes, and inverting those turns the pin
 * yellow and the text unreadable. Hue-rotate puts greens and blues back the
 * right way round after the invert, so parks stay green and water stays blue. */
.dark .leaflet-container { background: #1e293b; }
.dark .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.95) contrast(0.9); }
/* Qualified with .leaflet-container to outrank Leaflet's own two-class rule for
 * the attribution: its stylesheet is injected at runtime, so it lands after
 * this file and wins every tie. Legibility here is not cosmetic — the credit is
 * a condition of using the tiles. */
.dark .leaflet-container .leaflet-control-attribution { background: rgb(15 23 42 / 85%); color: #cbd5e1; }
.dark .leaflet-container .leaflet-control-attribution a { color: #e2e8f0; }
.dark .leaflet-bar a,
.dark .leaflet-bar a:hover { background-color: #1e293b; color: #e2e8f0; border-color: #334155; }