/* Raptool TMS — shared theme.css
   Light theme = tokens.css defaults (unchanged).
   Dark theme = navy "control room" palette, loaded after tokens.css,
   before each app's own app.css, in every front-end. */

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

  --bg: #141d33;
  --hi: #26335a;
  --surface: #141d33;
  --surface-dim: #10182b;
  --surface-container-lowest: #0e1526;
  --surface-container-low: #10182b;
  --surface-container: #1a2540;
  --surface-container-high: #1f2b4a;
  --surface-container-highest: #26335a;

  --text-strong: #e7ecf3;
  --text-muted: #a3adbb;
  --text-placeholder: #6b7585;
  --on-surface: #e7ecf3;
  --on-surface-variant: #a3adbb;
  --outline: #a3adbb;
  --outline-variant: #33415f;

  --accent-primary: #60a5fa;
  --accent-rose: #f472b6;
  --accent-cyan: #22d3ee;
  --accent-emerald: #34d399;
  --error: #ff6961;
  --warning: #fbbf24;
  --md-primary: #5491dc;
  --md-primary-container: #60a5fa;
  --secondary: #f472b6;
  --tertiary: #22d3ee;
  --error-container: #402024;

  /* dark neumorphism: dark shadow rgba(3,7,18,.7) / highlight rgba(58,78,120,.35), same offsets as light */
  --shadow-shallow: -4.2px 4.2px 12px rgba(3,7,18,0.7), 4.2px -4.2px 12px rgba(58,78,120,0.35);
  --shadow-card: 10.2px 10.2px 24px rgba(3,7,18,0.7), -8.67px -8.67px 20.4px rgba(58,78,120,0.35);
  --shadow-inset: inset 4.2px 4.2px 8.4px rgba(3,7,18,0.7), inset -4.2px -4.2px 8.4px rgba(58,78,120,0.35);
  --shadow-pressed: inset 3.15px 3.15px 7.14px rgba(3,7,18,0.7), inset -3.15px -3.15px 7.14px rgba(58,78,120,0.35);
  --shadow-orb: 13.26px 13.26px 31.2px rgba(3,7,18,0.7), -11.22px -11.22px 26.4px rgba(58,78,120,0.35);
}

body { background: var(--bg); }

/* ---------------------------------------------------------------- */
/* Theme toggle icon button (shared across apps)                    */
/* ---------------------------------------------------------------- */
.theme-toggle-btn .theme-icon-dark,
.theme-toggle-btn .theme-icon-auto { display: none; }
:root[data-theme-pref="dark"] .theme-toggle-btn .theme-icon-light,
:root[data-theme-pref="auto"] .theme-toggle-btn .theme-icon-light { display: none; }
:root[data-theme-pref="dark"] .theme-toggle-btn .theme-icon-dark { display: inline-block; }
:root[data-theme-pref="auto"] .theme-toggle-btn .theme-icon-auto { display: inline-block; }

/* ---------------------------------------------------------------- */
/* Theme segmented control (Settings / Profile)                     */
/* ---------------------------------------------------------------- */
.theme-seg { display: flex; gap: 4px; padding: 4px; border-radius: var(--radius-control); background: var(--surface-container-low); box-shadow: var(--shadow-inset); margin-bottom: var(--space-md); }
.theme-seg-opt { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; border: none; background: transparent; color: var(--text-muted); font: inherit; font-weight: 600; font-size: var(--t-label-md-size); padding: 8px 10px; border-radius: var(--radius-control); cursor: pointer; }
.theme-seg-opt.active { background: var(--surface); color: var(--text-strong); box-shadow: var(--shadow-shallow); }
.theme-seg-opt .material-symbols-outlined { font-size: 18px; }

/* ---------------------------------------------------------------- */
/* Leaflet dark styling (shared: driver / track / portal / dispatcher) */
/* ---------------------------------------------------------------- */
:root[data-theme="dark"] .leaflet-container { background: var(--surface-dim); }
:root[data-theme="dark"] .leaflet-control-zoom a {
  background: var(--surface-container-high); color: var(--text-strong); border-color: var(--outline-variant) !important;
}
:root[data-theme="dark"] .leaflet-control-zoom a:hover { background: var(--surface-container-highest); }
:root[data-theme="dark"] .leaflet-bar { border: none; box-shadow: var(--shadow-card); }
:root[data-theme="dark"] .leaflet-control-attribution {
  background: rgba(20,29,51,0.75); color: var(--text-muted);
}
:root[data-theme="dark"] .leaflet-control-attribution a { color: var(--accent-primary); }
:root[data-theme="dark"] .leaflet-popup-content-wrapper,
:root[data-theme="dark"] .leaflet-popup-tip {
  background: var(--surface-container-high); color: var(--text-strong); box-shadow: var(--shadow-card);
}
:root[data-theme="dark"] .leaflet-popup-content { color: var(--text-strong); }
:root[data-theme="dark"] .leaflet-popup-close-button { color: var(--text-muted) !important; }

/* ---------------------------------------------------------------- */
/* 'auto' map style — follows theme (apps without a style picker     */
/* declare data-map-style="auto" statically; dispatcher offers it    */
/* as a selectable card).                                            */
/* ---------------------------------------------------------------- */
:root[data-map-style="auto"] .leaflet-tile-pane,
.map-style-preview[data-preview="auto"] img { filter: grayscale(1) brightness(1.12) contrast(0.85); }
:root[data-theme="dark"][data-map-style="auto"] .leaflet-tile-pane,
:root[data-theme="dark"] .map-style-preview[data-preview="auto"] img { filter: invert(1) grayscale(1) brightness(0.95) contrast(1.05) sepia(0.8) hue-rotate(180deg) saturate(2.6); }

/* ---------------------------------------------------------------- */
/* Misc dark-mode fixes shared by all apps                          */
/* ---------------------------------------------------------------- */
:root[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
:root[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--surface-dim); }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--surface-container-highest); border-radius: 6px; }
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { color-scheme: dark; }

/* signature pads are always drawn on white paper, in both themes */
.signature-canvas, .signature-saved img { background: #fff; }