/*
 * Dark theme.
 *
 * Applied when <html> carries the `dark` class (see base.html and theme.js).
 * Rather than adding a `dark:` variant to every Tailwind utility in every
 * template, this remaps the colour utilities the app actually uses. Every rule
 * is prefixed with `html.dark`, which out-ranks Tailwind's single-class
 * selectors regardless of stylesheet order.
 *
 * Solid accent fills (bg-brand-600 buttons, the nav bar, badges) keep their
 * light-theme colours; neutral surfaces, neutral text and pale tints are
 * remapped. When a template starts using a new colour utility, add it here.
 */

html.dark { color-scheme: dark; }

/* Form fields without a background utility would otherwise get the browser's
   dark default, which doesn't match the palette. :where() keeps this below
   any bg-* remap further down. */
html.dark :where(input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="file"]), select, textarea) {
    background-color: #0f172a;
}

/* ── Neutral surfaces ─────────────────────────────────────────────────── */
html.dark .bg-gray-100 { background-color: #0f172a; }
html.dark .bg-white { background-color: #1e293b; }
html.dark .bg-white\/90 { background-color: rgb(30 41 59 / 0.9); }
html.dark .bg-gray-50 { background-color: #172033; }
html.dark .bg-gray-200 { background-color: #334155; }
html.dark .bg-gray-800,
html.dark .bg-gray-900 { background-color: #020617; }

html.dark .hover\:bg-gray-50:hover { background-color: #273449; }
html.dark .hover\:bg-gray-100:hover { background-color: #334155; }
html.dark .hover\:bg-gray-200:hover { background-color: #3b4a61; }
html.dark .hover\:bg-gray-300:hover { background-color: #475569; }

/* ── Neutral text ─────────────────────────────────────────────────────── */
html.dark .text-gray-900 { color: #f1f5f9; }
html.dark .text-gray-800 { color: #e2e8f0; }
html.dark .text-gray-700 { color: #cbd5e1; }
html.dark .text-gray-600 { color: #b0bccb; }
html.dark .text-gray-500 { color: #9aa6b8; }
html.dark .text-gray-400 { color: #7d8a9e; }
/* gray-300 is also used on the (already dark) flyover modal, so stay mid-tone.
   text-gray-200 is left alone: it only sits on photos and dark panels. */
html.dark .text-gray-300 { color: #64748b; }

/* ── Neutral borders ──────────────────────────────────────────────────── */
html.dark .border-gray-100 { border-color: #273449; }
html.dark .border-gray-200 { border-color: #334155; }
html.dark .border-gray-300 { border-color: #475569; }
html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: #273449; }

/* ── Brand tints ──────────────────────────────────────────────────────── */
/* The emerald CTA fill reads fine on dark, so solid brand fills (and
   .ds-btn-primary) keep their light-theme colour and near-black text. Green
   is never a text colour in light mode; in dark it is, so tint it up. */
html.dark .ds-btn-secondary { background-color: transparent; color: #f1f5f9; border-color: #475569; }
html.dark .ds-btn-secondary:hover { background-color: rgb(255 255 255 / 0.06); border-color: #94a3b8; }
html.dark .ds-nav,
html.dark .ds-footer { background-color: #0f172a; border-color: #334155; }
html.dark .ds-nav { color: #f1f5f9; }
html.dark .ds-footer { color: #9aa6b8; }
html.dark .ds-card { background-color: #1e293b; color: #f1f5f9; border-color: #334155; }
html.dark .ds-card-dark { background-color: #020617; border-color: #334155; }
html.dark .ds-tile { background-color: #172033; color: #f1f5f9; border-color: #273449; }
html.dark .ds-icon { background-color: #273449; color: #f1f5f9; border-color: #334155; }
html.dark .ds-pill-soft { background-color: #273449; color: #f1f5f9; border-color: #334155; }
html.dark .ds-nav-sep { color: #334155; }
html.dark .ds-subhead,
html.dark .ds-eyebrow,
html.dark .hero-credits,
html.dark .hero-credits-link { color: #9aa6b8; }
html.dark .hero-stage { --hero-deco-line: #33435e; }
html.dark .hero-hill { --hero-deco-hill: #2a3952; }
html.dark :where(.ds-card, .ds-tile) [style*="--ds-ink-mute"] { color: #9aa6b8 !important; }

html.dark .bg-brand-50,
html.dark .bg-blue-50 { background-color: rgb(62 207 142 / 0.1); }
html.dark .bg-brand-50\/50 { background-color: rgb(62 207 142 / 0.06); }
html.dark .bg-brand-100,
html.dark .bg-blue-100 { background-color: rgb(62 207 142 / 0.18); }
html.dark .hover\:bg-brand-50:hover { background-color: rgb(62 207 142 / 0.14); }
html.dark .hover\:bg-brand-100:hover { background-color: rgb(62 207 142 / 0.24); }

html.dark .text-brand-500,
html.dark .text-brand-600,
html.dark .text-blue-600 { color: #4ade80; }
html.dark .text-brand-700 { color: #86efac; }
html.dark .text-brand-800 { color: #bbf7d0; }
html.dark .text-brand-400 { color: #7d8a9e; }
html.dark .hover\:text-brand-600:hover,
html.dark .hover\:text-brand-700:hover { color: #bbf7d0; }
html.dark .hover\:text-brand-800:hover,
html.dark .hover\:text-brand-900:hover { color: #dcfce7; }
html.dark .group:hover .group-hover\:text-brand-600 { color: #86efac; }

html.dark .border-brand-200,
html.dark .border-blue-200 { border-color: rgb(62 207 142 / 0.3); }
html.dark .border-brand-300 { border-color: rgb(62 207 142 / 0.45); }
html.dark .border-brand-400 { border-color: #3ecf8e; }
html.dark .hover\:border-brand-200:hover,
html.dark .hover\:border-brand-300:hover { border-color: rgb(62 207 142 / 0.55); }

/* ── Status tints (red, green, yellow, amber, orange, purple, violet, cyan) ── */
html.dark .bg-red-50 { background-color: rgb(239 68 68 / 0.12); }
html.dark .bg-red-100 { background-color: rgb(239 68 68 / 0.2); }
html.dark .hover\:bg-red-50:hover { background-color: rgb(239 68 68 / 0.16); }
html.dark .border-red-100,
html.dark .border-red-200 { border-color: rgb(248 113 113 / 0.3); }
html.dark .border-red-300 { border-color: rgb(248 113 113 / 0.45); }
html.dark .text-red-500,
html.dark .text-red-600 { color: #f87171; }
html.dark .text-red-700,
html.dark .hover\:text-red-500:hover,
html.dark .hover\:text-red-700:hover { color: #fca5a5; }

html.dark .bg-green-50 { background-color: rgb(34 197 94 / 0.12); }
html.dark .bg-green-100 { background-color: rgb(34 197 94 / 0.2); }
html.dark .hover\:bg-green-100:hover { background-color: rgb(34 197 94 / 0.26); }
html.dark .border-green-200 { border-color: rgb(74 222 128 / 0.3); }
html.dark .text-green-500 { color: #4ade80; }
html.dark .text-green-700 { color: #86efac; }

html.dark .bg-yellow-100 { background-color: rgb(234 179 8 / 0.18); }
html.dark .text-yellow-500,
html.dark .text-yellow-600 { color: #facc15; }
html.dark .text-yellow-700,
html.dark .text-yellow-800 { color: #fde047; }
/* text-yellow-900 stays: it sits on the solid bg-yellow-400 Premium badge. */

html.dark .bg-amber-50 { background-color: rgb(245 158 11 / 0.12); }
html.dark .border-amber-200 { border-color: rgb(251 191 36 / 0.3); }
html.dark .text-amber-600 { color: #fbbf24; }
html.dark .text-amber-800 { color: #fcd34d; }

html.dark .bg-orange-50 { background-color: rgb(249 115 22 / 0.12); }
html.dark .bg-orange-100 { background-color: rgb(249 115 22 / 0.2); }
html.dark .text-orange-600 { color: #fb923c; }
html.dark .text-orange-700,
html.dark .text-orange-800 { color: #fdba74; }

html.dark .bg-purple-50 { background-color: rgb(168 85 247 / 0.12); }
html.dark .hover\:bg-purple-100:hover { background-color: rgb(168 85 247 / 0.24); }
html.dark .border-purple-200 { border-color: rgb(192 132 252 / 0.3); }
html.dark .text-purple-700 { color: #d8b4fe; }

html.dark .bg-violet-100 { background-color: rgb(139 92 246 / 0.2); }
html.dark .text-violet-600 { color: #a78bfa; }

html.dark .bg-cyan-100 { background-color: rgb(6 182 212 / 0.2); }
html.dark .text-cyan-600 { color: #22d3ee; }

html.dark .text-teal-600 { color: #2dd4bf; }

/* ── base.html: locale dropdown ───────────────────────────────────────── */
html.dark .locale-dropdown-content { background: #1e293b; box-shadow: 0 4px 16px rgba(0,0,0,.5); }
html.dark .locale-dropdown-content a { color: #cbd5e1; }
html.dark .locale-dropdown-content a:hover { background: rgb(59 130 246 / 0.16); color: #bfdbfe; }
html.dark .locale-dropdown-content a.active { color: #93c5fd; }

/* ── Theme toggle icons: show the theme a click switches to ───────────── */
.theme-icon-light { display: none; }
html.dark .theme-icon-light { display: inline-block; }
html.dark .theme-icon-dark { display: none; }

/* ── route.html: edit-mode toolbar ────────────────────────────────────── */
html.dark .edit-toolbar { background: rgb(30 41 59 / 0.95); border-color: #475569; box-shadow: 0 4px 16px rgba(0,0,0,.5); }
html.dark .edit-toolbar .edit-hint,
html.dark .edit-toolbar .ors-calls { color: #9aa6b8; }
html.dark .edit-toolbar .routing-error { color: #fca5a5; }
html.dark .routing-saved { color: #6ee7b7; }
html.dark .edit-toolbar button { background: #273449; color: #cbd5e1; border-color: #475569; }
html.dark .edit-toolbar button:hover { border-color: #60a5fa; color: #93c5fd; }
html.dark .edit-toolbar .btn-save { background: #2563eb; color: #fff; border-color: #2563eb; }
html.dark .edit-toolbar .btn-save:hover { background: #1d4ed8; color: #fff; }
html.dark .edit-toolbar .btn-save:disabled { background: #1e3a8a; border-color: #1e3a8a; color: #93c5fd; }
html.dark .edit-toolbar .btn-cancel:hover { background: rgb(239 68 68 / 0.16); color: #fca5a5; border-color: rgb(248 113 113 / 0.45); }
html.dark .routing-indicator { color: #60a5fa; }

/* ── Leaflet chrome (the base map itself stays light) ─────────────────── */
html.dark .leaflet-popup-content-wrapper,
html.dark .leaflet-popup-tip { background: #1e293b; color: #e2e8f0; }
/* Popup text and links are built in map-bridge.js with inline colours. */
html.dark .leaflet-popup-content a { color: #93c5fd !important; }
html.dark .leaflet-popup-content [style*="color:#666"] { color: #b0bccb !important; }
html.dark .leaflet-popup-content [style*="color:#999"] { color: #9aa6b8 !important; }
/* Saved places (CYC-13): teal accents, the red "Remove" link and the map button. */
html.dark .leaflet-popup-content [style*="color:#0f766e"] { color: #5eead4 !important; }
html.dark .leaflet-popup-content a[style*="color:#dc2626"] { color: #fca5a5 !important; }
html.dark .leaflet-bar a[style*="color:#0f766e"] { color: #5eead4 !important; }
html.dark .leaflet-container a.leaflet-popup-close-button { color: #9aa6b8; }
html.dark .leaflet-bar a { background-color: #1e293b; color: #e2e8f0; border-bottom-color: #334155; }
html.dark .leaflet-bar a:hover { background-color: #273449; }
html.dark .leaflet-control-layers { background: #1e293b; color: #e2e8f0; }
html.dark .leaflet-container .leaflet-control-attribution { background: rgb(15 23 42 / 0.8); color: #9aa6b8; }
html.dark .leaflet-container .leaflet-control-attribution a { color: #93c5fd; }

/* Route page: the Discover panel floating over the map. */
html.dark #discover-panel { background-color: rgb(30 41 59 / 0.96); }