/* ==========================================================================
   Dark mode for pages that keep their own styling (privacy.html, terms.html).
   Every rule only applies when the app opens the page with ?theme=dark,
   so without it the page looks exactly as it does today (driver app,
   browsers, older rider apps).
   Load it AFTER the page's own <style> so it wins.
   ========================================================================== */

:root[data-theme="dark"] {
  color-scheme: dark;
}

:root[data-theme="dark"],
:root[data-theme="dark"] body {
  background: var(--bg, #1e1e1e) !important;
  color: var(--text, #f2f2f2) !important;
}

/* Text elements that set their own dark colour */
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,
:root[data-theme="dark"] p,
:root[data-theme="dark"] li,
:root[data-theme="dark"] td,
:root[data-theme="dark"] th,
:root[data-theme="dark"] span,
:root[data-theme="dark"] div,
:root[data-theme="dark"] strong,
:root[data-theme="dark"] b {
  color: inherit !important;
}

/* Boxes or sections with a white/light background */
:root[data-theme="dark"] div,
:root[data-theme="dark"] section,
:root[data-theme="dark"] table,
:root[data-theme="dark"] td,
:root[data-theme="dark"] th {
  background-color: transparent !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

:root[data-theme="dark"] a {
  color: #33ECF2 !important;
}

:root[data-theme="dark"] hr {
  border-color: rgba(255, 255, 255, 0.14) !important;
}