/* =========================================================================
   Planner Light / Dark / Night theme - planning.html ONLY.
   =========================================================================
   Why CSS-only, not a Tailwind `dark:` retrofit: planning.html's React
   components (04-app.jsx alone is ~450KB) already use several hundred
   distinct Tailwind colour-utility classes, inline, across many files.
   Prefixing every single one with a `dark:`/`night:` variant would mean
   touching thousands of className strings in the most fragile, heavily-
   tuned files in this codebase. Instead, this stylesheet re-targets the
   SAME already-compiled Tailwind classes directly via an attribute-scoped
   selector - e.g. `[data-theme="dark"] .bg-white { ... }` - which wins the
   cascade over the plain `.bg-white` rule in site.css purely on selector
   specificity (two selectors vs one), no `!important` needed, and touches
   zero JSX. The bg-/text-/border- override rules below were generated by
   a script (not committed - see the PR description) that surveyed every
   colour-utility class actually used across planning.html's own JSX files
   and classified each by Tailwind's default shade scale:
     - Light-leaning surface shades (white, slate-50/100/200) get a dark
       surface colour; darker shades are left alone (they're already used
       as deliberately-dark elements in the current light theme, e.g. an
       existing dark toolbar/badge, and inverting them would break those).
     - Dark-leaning text shades (slate-600 and darker) get a light
       equivalent; slate-50 through 500 are left alone - they're already
       light/muted-grey enough to stay legible on a dark background as-is
       (verified by contrast ratio, not just by eye) and white text in
       particular is already this codebase's own standard choice for text
       sitting on an already-dark element.
     - Pastel accent badge backgrounds (hue-50/100/200) become a
       translucent dark tint of the same hue; solid/mid accent shades
       (400+) are left alone - a solid saturated button/icon already reads
       fine on a dark page.
     - Accent text shades 500+ get lighter (hue-300) for contrast; shades
       below that are already light enough.
   This is a best-effort retrofit of the Planner's main surfaces, not a
   pixel-perfect pass over every nested badge - a handful of low-frequency
   classes (compound border-side-colour utilities, gradient from-/via-/to-
   stops, hover:/focus:/group-hover:-prefixed variants of the classes
   below) were deliberately left out of scope; see the generator's own
   skip list in the PR description for exactly which ones and why each is
   low-risk to leave as-is.

   "Night" reuses every rule above (same selector list) PLUS a red screen
   filter overlay (#np-night-overlay, see bottom of this file) - the dark
   rules give it the light-text-on-dark-surface contrast it needs; the red
   overlay then does the actual night-vision protection on top. See
   assets/js/shared/theme-service.js for the attribute/state plumbing and
   04-app.jsx for the toggle control itself.
   ========================================================================= */

html[data-theme="dark"],
html[data-theme="night"] {
    background-color: #0f172a;
}
[data-theme="dark"] body,
[data-theme="night"] body,
[data-theme="dark"] #root,
[data-theme="night"] #root {
    background-color: #0f172a;
}

/* Leaflet's own basemap tiles (both the "Standard" CARTO layer and the
   "Topo Map" OpenTopoMap layer) are raster images with their colours
   baked in - no class-based override can touch them. invert+hue-rotate is
   the standard "poor man's dark mode" trick for a raster map: inverting
   lightness darkens the whole tile, and a 180deg hue-rotate afterwards
   brings hues that would otherwise have inverted (e.g. blue water
   becoming orange) back close to their original hue. Scoped to the tile
   pane specifically, not the whole map - markers/pins/the shadow polygon/
   the Milky Way compass overlay live in Leaflet's separate overlay pane
   and keep their normal, colourful, high-contrast appearance on top of
   the darkened map, same as most other dark-mode map implementations. */
[data-theme="dark"] .leaflet-tile-pane,
[data-theme="night"] .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.92);
}

/* === Generated overrides (see header comment for the rules behind these) === */
[data-theme="dark"] .bg-amber-100, [data-theme="night"] .bg-amber-100 { background-color: rgba(245,158,11,0.16); }
[data-theme="dark"] .bg-amber-200, [data-theme="night"] .bg-amber-200 { background-color: rgba(245,158,11,0.16); }
[data-theme="dark"] .bg-amber-50, [data-theme="night"] .bg-amber-50 { background-color: rgba(245,158,11,0.16); }
[data-theme="dark"] .bg-emerald-100, [data-theme="night"] .bg-emerald-100 { background-color: rgba(16,185,129,0.16); }
[data-theme="dark"] .bg-emerald-50, [data-theme="night"] .bg-emerald-50 { background-color: rgba(16,185,129,0.16); }
[data-theme="dark"] .bg-fuchsia-200, [data-theme="night"] .bg-fuchsia-200 { background-color: rgba(217,70,239,0.16); }
[data-theme="dark"] .bg-fuchsia-50, [data-theme="night"] .bg-fuchsia-50 { background-color: rgba(217,70,239,0.16); }
[data-theme="dark"] .bg-indigo-100, [data-theme="night"] .bg-indigo-100 { background-color: rgba(99,102,241,0.16); }
[data-theme="dark"] .bg-indigo-200, [data-theme="night"] .bg-indigo-200 { background-color: rgba(99,102,241,0.16); }
[data-theme="dark"] .bg-indigo-50, [data-theme="night"] .bg-indigo-50 { background-color: rgba(99,102,241,0.16); }
[data-theme="dark"] .bg-orange-100, [data-theme="night"] .bg-orange-100 { background-color: rgba(249,115,22,0.16); }
[data-theme="dark"] .bg-red-100, [data-theme="night"] .bg-red-100 { background-color: rgba(239,68,68,0.16); }
[data-theme="dark"] .bg-red-50, [data-theme="night"] .bg-red-50 { background-color: rgba(239,68,68,0.16); }
[data-theme="dark"] .bg-rose-100, [data-theme="night"] .bg-rose-100 { background-color: rgba(244,63,94,0.16); }
[data-theme="dark"] .bg-rose-50, [data-theme="night"] .bg-rose-50 { background-color: rgba(244,63,94,0.16); }
[data-theme="dark"] .bg-sky-100, [data-theme="night"] .bg-sky-100 { background-color: rgba(14,165,233,0.16); }
[data-theme="dark"] .bg-sky-200, [data-theme="night"] .bg-sky-200 { background-color: rgba(14,165,233,0.16); }
[data-theme="dark"] .bg-sky-50, [data-theme="night"] .bg-sky-50 { background-color: rgba(14,165,233,0.16); }
[data-theme="dark"] .bg-slate-100, [data-theme="night"] .bg-slate-100 { background-color: #1e293b; }
[data-theme="dark"] .bg-slate-200, [data-theme="night"] .bg-slate-200 { background-color: #334155; }
[data-theme="dark"] .bg-slate-50, [data-theme="night"] .bg-slate-50 { background-color: #0f172a; }
[data-theme="dark"] .bg-white, [data-theme="night"] .bg-white { background-color: #1e293b; }
[data-theme="dark"] .border-amber-100, [data-theme="night"] .border-amber-100 { border-color: rgba(245,158,11,0.4); }
[data-theme="dark"] .border-amber-200, [data-theme="night"] .border-amber-200 { border-color: rgba(245,158,11,0.4); }
[data-theme="dark"] .border-emerald-100, [data-theme="night"] .border-emerald-100 { border-color: rgba(16,185,129,0.4); }
[data-theme="dark"] .border-emerald-200, [data-theme="night"] .border-emerald-200 { border-color: rgba(16,185,129,0.4); }
[data-theme="dark"] .border-emerald-300, [data-theme="night"] .border-emerald-300 { border-color: rgba(16,185,129,0.4); }
[data-theme="dark"] .border-fuchsia-100, [data-theme="night"] .border-fuchsia-100 { border-color: rgba(217,70,239,0.4); }
[data-theme="dark"] .border-indigo-100, [data-theme="night"] .border-indigo-100 { border-color: rgba(99,102,241,0.4); }
[data-theme="dark"] .border-indigo-200, [data-theme="night"] .border-indigo-200 { border-color: rgba(99,102,241,0.4); }
[data-theme="dark"] .border-red-100, [data-theme="night"] .border-red-100 { border-color: rgba(239,68,68,0.4); }
[data-theme="dark"] .border-rose-200, [data-theme="night"] .border-rose-200 { border-color: rgba(244,63,94,0.4); }
[data-theme="dark"] .border-sky-100, [data-theme="night"] .border-sky-100 { border-color: rgba(14,165,233,0.4); }
[data-theme="dark"] .border-sky-200, [data-theme="night"] .border-sky-200 { border-color: rgba(14,165,233,0.4); }
[data-theme="dark"] .border-sky-300, [data-theme="night"] .border-sky-300 { border-color: rgba(14,165,233,0.4); }
[data-theme="dark"] .border-slate-100, [data-theme="night"] .border-slate-100 { border-color: #1e293b; }
[data-theme="dark"] .border-slate-200, [data-theme="night"] .border-slate-200 { border-color: #334155; }
[data-theme="dark"] .border-slate-300, [data-theme="night"] .border-slate-300 { border-color: #475569; }
[data-theme="dark"] .text-amber-500, [data-theme="night"] .text-amber-500 { color: #fcd34d; }
[data-theme="dark"] .text-amber-600, [data-theme="night"] .text-amber-600 { color: #fcd34d; }
[data-theme="dark"] .text-amber-700, [data-theme="night"] .text-amber-700 { color: #fcd34d; }
[data-theme="dark"] .text-amber-800, [data-theme="night"] .text-amber-800 { color: #fcd34d; }
[data-theme="dark"] .text-amber-900, [data-theme="night"] .text-amber-900 { color: #fcd34d; }
[data-theme="dark"] .text-blue-600, [data-theme="night"] .text-blue-600 { color: #93c5fd; }
[data-theme="dark"] .text-emerald-500, [data-theme="night"] .text-emerald-500 { color: #6ee7b7; }
[data-theme="dark"] .text-emerald-600, [data-theme="night"] .text-emerald-600 { color: #6ee7b7; }
[data-theme="dark"] .text-emerald-700, [data-theme="night"] .text-emerald-700 { color: #6ee7b7; }
[data-theme="dark"] .text-fuchsia-500, [data-theme="night"] .text-fuchsia-500 { color: #f0abfc; }
[data-theme="dark"] .text-fuchsia-600, [data-theme="night"] .text-fuchsia-600 { color: #f0abfc; }
[data-theme="dark"] .text-fuchsia-800, [data-theme="night"] .text-fuchsia-800 { color: #f0abfc; }
[data-theme="dark"] .text-indigo-500, [data-theme="night"] .text-indigo-500 { color: #a5b4fc; }
[data-theme="dark"] .text-indigo-600, [data-theme="night"] .text-indigo-600 { color: #a5b4fc; }
[data-theme="dark"] .text-indigo-700, [data-theme="night"] .text-indigo-700 { color: #a5b4fc; }
[data-theme="dark"] .text-indigo-800, [data-theme="night"] .text-indigo-800 { color: #a5b4fc; }
[data-theme="dark"] .text-indigo-900, [data-theme="night"] .text-indigo-900 { color: #a5b4fc; }
[data-theme="dark"] .text-orange-500, [data-theme="night"] .text-orange-500 { color: #fdba74; }
[data-theme="dark"] .text-orange-700, [data-theme="night"] .text-orange-700 { color: #fdba74; }
[data-theme="dark"] .text-purple-500, [data-theme="night"] .text-purple-500 { color: #d8b4fe; }
[data-theme="dark"] .text-red-500, [data-theme="night"] .text-red-500 { color: #fca5a5; }
[data-theme="dark"] .text-red-600, [data-theme="night"] .text-red-600 { color: #fca5a5; }
[data-theme="dark"] .text-red-700, [data-theme="night"] .text-red-700 { color: #fca5a5; }
[data-theme="dark"] .text-rose-500, [data-theme="night"] .text-rose-500 { color: #fda4af; }
[data-theme="dark"] .text-rose-600, [data-theme="night"] .text-rose-600 { color: #fda4af; }
[data-theme="dark"] .text-rose-700, [data-theme="night"] .text-rose-700 { color: #fda4af; }
[data-theme="dark"] .text-sky-500, [data-theme="night"] .text-sky-500 { color: #7dd3fc; }
[data-theme="dark"] .text-sky-600, [data-theme="night"] .text-sky-600 { color: #7dd3fc; }
[data-theme="dark"] .text-sky-700, [data-theme="night"] .text-sky-700 { color: #7dd3fc; }
[data-theme="dark"] .text-sky-800, [data-theme="night"] .text-sky-800 { color: #7dd3fc; }
[data-theme="dark"] .text-slate-600, [data-theme="night"] .text-slate-600 { color: #cbd5e1; }
[data-theme="dark"] .text-slate-700, [data-theme="night"] .text-slate-700 { color: #e2e8f0; }
[data-theme="dark"] .text-slate-800, [data-theme="night"] .text-slate-800 { color: #f1f5f9; }
[data-theme="dark"] .text-slate-900, [data-theme="night"] .text-slate-900 { color: #f8fafc; }
[data-theme="dark"] .text-teal-500, [data-theme="night"] .text-teal-500 { color: #5eead4; }

/* =========================================================================
   Night mode's red screen filter.
   =========================================================================
   A single fixed, full-viewport, pointer-events:none div (added once as a
   plain static element in planning.html's <body> - see that file) blended
   over literally everything already on screen via mix-blend-mode:
   multiply. Multiplying by a dark red crushes the green/blue channels of
   whatever's underneath to near-zero while only mildly dimming red,
   producing the classic "red flashlight" monochrome-red look - the same
   principle astronomers have used for decades, because red wavelengths
   barely disturb eyes that are already dark-adapted. This only works
   because the rules above already flip the page to light-text-on-dark-
   surface first: multiplying an already-dark background crushes it
   further towards black (good), while multiplying light text keeps it
   bright enough to read as a warm red/amber glow (good) - multiplying
   the page's ORIGINAL light-background/dark-text layout would crush both
   halves of that contrast toward black and make everything equally
   unreadable, which is why night mode reuses the dark-mode rules above
   rather than applying this filter to the plain light theme.
   Deliberately a blend-mode overlay, not a `filter` on <body>/<html>: CSS
   filter on an ancestor creates a new containing block for its
   position:fixed descendants, which would have silently broken the
   Field Position Check / Virtual Viewfinder full-screen overlays this
   session already fixed to rely on true viewport-relative fixed
   positioning. A sibling-level overlay div has no such effect on anything
   else's layout. */
#np-night-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    pointer-events: none;
    opacity: 0;
    background-color: #8a0f0f;
    mix-blend-mode: multiply;
    transition: opacity 0.2s ease;
}
[data-theme="night"] #np-night-overlay {
    opacity: 1;
}