/* Zustellplan Driver UI (mobile-first)
   - Overview (Run anlegen/auswählen) läuft in einer normalen WP-Seite (Header/Footer sichtbar)
   - Nur die *Running/Map* Ansicht ist Fullscreen (body.zp-run-fullscreen) */

.zp-driver{
  position:relative;
  width:100%;
  min-height:520px;
  overflow:hidden;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  /* Light UI (better readability in sunlight / mobile) */
  background:#f1f5f9;
  border-radius:18px;
}

/* Fullscreen NUR im Running-Modus */
html.zp-run-fullscreen,
body.zp-run-fullscreen{
  height:100%!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}
body.zp-run-fullscreen #zp-driver.zp-driver{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:999999;
  border-radius:0;
}

.zp-map{ position:absolute; inset:0; }

.zp-sheet{
  position:relative;
  padding:12px;
  display:grid;
  gap:10px;
  z-index:5;
}

body.zp-run-fullscreen .zp-sheet{
  position:fixed;
  left:0; right:0; bottom:0;
}
.zp-sheet__header{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
  padding:10px 12px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(15,23,42,.12);
  border-radius:16px;
  /* Avoid backdrop-filter in normal (non-fullscreen) mode: can look slightly soft on some devices */
  box-shadow:0 12px 30px rgba(2,6,23,.06);
}
.zp-header-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:nowrap;
}
.zp-header-left{
  display:flex;
  align-items:center;
  gap:8px;
  flex:1;
  min-width:0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:2px;
  white-space:nowrap;
}
.zp-header-left::-webkit-scrollbar{ display:none; }
.zp-header-right{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
/* (legacy header-row styles removed in v0.9.2) */
.zp-header-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
}
.zp-btn--small{
  padding:8px 10px;
  border-radius:10px;
  font-size:12px;
}
.zp-title{ font-weight:800; font-size:16px; line-height:1.2; color:#0f172a; }
.zp-sub{ font-size:12px; opacity:.9; color:#475569; }
.zp-badge{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  color:#0f172a;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(15,23,42,.12);
}

.zp-version{
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  color:#475569;
  background:rgba(255,255,255,.6);
  border:1px solid rgba(15,23,42,.08);
  white-space:nowrap;
}

.zp-navmode{
  font-weight:800;
  letter-spacing:.02em;
}
.zp-navmode.is-auto{
  border-color:rgba(59,130,246,.35);
  box-shadow:0 0 0 3px rgba(59,130,246,.14);
}
.zp-navmode.is-seq{
  opacity:.75;
}
.zp-card{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(15,23,42,.12);
  border-radius:16px;
  padding:12px;
  /* Avoid backdrop-filter in normal (non-fullscreen) mode: can look slightly soft on some devices */
  box-shadow:0 12px 30px rgba(2,6,23,.06);
  color:#0f172a;
}
.zp-card__row{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:10px;
  padding:6px 0;
}
.zp-card__label{ font-size:12px; opacity:.8; color:#334155; }
.zp-card__value{ font-size:13px; }
.zp-card__actions{ display:flex; gap:10px; flex-wrap:wrap; padding-top:10px; }
.zp-hr{ height:1px; background:rgba(148,163,184,.18); margin:10px 0; }
.zp-hint{ font-size:12px; opacity:.9; margin-top:8px; color:#475569; }
.zp-muted{ opacity:.8; color:#475569; }

/* Create+Plan (overview) */
.zp-create{ margin-top:12px; padding-top:12px; border-top:1px solid rgba(148,163,184,.18); }
.zp-create .zp-card__row{ padding:8px 0; }
.zp-create-hint{ margin-top:10px; padding:10px 12px; border-radius:12px; border:1px solid rgba(239,68,68,.25); background:rgba(239,68,68,.08); color:#b91c1c; font-size:12px; }

.zp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.12);
  background:rgba(255,255,255,.88);
  color:#0f172a;
  cursor:pointer;
  font-weight:600;
}

/* Icon buttons (used in the compact stop actions bar) */
.zp-icon{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; }
.zp-icon svg{ width:18px; height:18px; display:block; }
.zp-btn-text{ display:inline; }
.zp-btn:hover{ border-color:rgba(15,23,42,.22); }
.zp-btn:disabled{ opacity:.5; cursor:not-allowed; }
.zp-btn--primary{ background:#2563eb; border-color:#2563eb; color:white; }
.zp-btn--primary:hover{ filter:brightness(1.05); }

.zp-input{
  width:100%;
  max-width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.12);
  background:rgba(255,255,255,.92);
  color:#0f172a;
  font-size:13px;
  outline:none;
  box-sizing:border-box;
}
.zp-input:focus{ border-color:rgba(59,130,246,.7); }

/* Date input can look clipped depending on WP theme defaults; force a stable height */
.zp-input--date{
  /* Some WP themes apply odd line-height/height defaults to date inputs */
  height:44px;
  min-height:44px;
  line-height:1.2;
  padding:10px 12px;
  -webkit-appearance:none;
  appearance:none;
}

/* Run-Picker: add a bit more breathing room between tour list and "Run anlegen" */
#zp-run-picker .zp-card__row--tours .zp-card__value{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Run-Picker: slightly larger row paddings for better readability */
#zp-run-picker .zp-card__row{
  padding:10px 0;
}

/* On small screens, reduce the label column so inputs don't get cramped */
@media (max-width: 520px){
  .zp-card__row{ grid-template-columns:88px 1fr; }
  body.zp-run-fullscreen #zp-stop-card .zp-card__row{ grid-template-columns:78px 1fr; }
}

/* Hide theme chrome ONLY in Fullscreen */
body.zp-run-fullscreen #masthead,
body.zp-run-fullscreen #colophon,
body.zp-run-fullscreen .site-header,
body.zp-run-fullscreen .site-footer,
body.zp-run-fullscreen header,
body.zp-run-fullscreen footer{
  display:none!important;
}
body.zp-run-fullscreen #wpadminbar{ display:none!important; }

.zp-toast{
  position:fixed;
  left:12px;
  right:12px;
  top:12px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.95);
  border:1px solid rgba(15,23,42,.12);
  color:#0f172a;
  display:none;
  z-index:9999;
}
.zp-toast--ok{ border-color:rgba(34,197,94,.5); }
.zp-toast--warn{ border-color:rgba(245,158,11,.5); }

.zp-tours{ display:grid; gap:8px; }
.zp-tour{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.12);
  background:rgba(255,255,255,.88);
}
.zp-tour input{ width:16px; height:16px; }

.zp-runs{ display:grid; gap:10px; }
.zp-run{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.12);
  background:rgba(255,255,255,.88);
}
.zp-run__title{ font-weight:700; font-size:13px; }
.zp-run__sub{ font-size:12px; opacity:.8; }

.zp-status{
  display:inline-flex;
  align-items:center;
  font-size:11px;
  padding:2px 8px;
  border-radius:999px;
  margin-left:6px;
  border:1px solid rgba(15,23,42,.12);
  background:rgba(255,255,255,.9);
  color:#0f172a;
}
.zp-status--running{ border-color:rgba(34,197,94,.5); }
.zp-status--planned{ border-color:rgba(59,130,246,.5); }
.zp-status--draft{ border-color:rgba(148,163,184,.35); }
.zp-status--done{ border-color:rgba(245,158,11,.5); }

.zp-chip{
  display:inline-flex;
  align-items:center;
  font-size:12px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.12);
  background:rgba(255,255,255,.88);
  color:#0f172a;
  margin-right:6px;
  margin-bottom:6px;
}

.zp-marker{
  width:14px;
  height:14px;
  border-radius:999px;
  box-shadow:0 8px 20px rgba(0,0,0,.35);
}

/* Active marker (selected/current stop)
   NOTE: Do not scale via transform; MapLibre positions markers using transform. */
.zp-marker.zp-marker--active{
  outline:2px solid rgba(255,255,255,.95);
  outline-offset:1px;
  box-shadow:0 0 0 6px rgba(37,99,235,.22), 0 10px 26px rgba(0,0,0,.38);
}

.zp-me-marker{
  width:14px;
  height:14px;
  border-radius:999px;
  background:#38bdf8;
  box-shadow:0 0 0 6px rgba(56,189,248,.25), 0 8px 20px rgba(0,0,0,.35);
  border:2px solid rgba(2,6,23,.65);
}

/* Start/End markers (plan) */
.zp-marker-start,
.zp-marker-end{
  width:16px;
  height:16px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.9);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.zp-marker-start{ background:#22c55e; }
.zp-marker-end{ background:#ef4444; }

/* Center the *non-fullscreen* sheet on wide screens.
   IMPORTANT: Do NOT apply this while running fullscreen, otherwise the sheet can be translated off-screen. */
@media (min-width: 900px){
  html:not(.zp-run-fullscreen) .zp-sheet{
    max-width:820px;
    margin-left:auto;
    margin-right:auto;
    left:auto;
    transform:none;
  }
}

/* (Navigation hint in Stop-Card removed in v0.7.4) */

/* ------------------------------
   Fullscreen Running Layout (v0.6.6)
   Ziel: Google-Maps-artiges Overlay (kompakt, nicht "riesig" links)
------------------------------ */

body.zp-run-fullscreen .zp-sheet{
  position:fixed;
  /* Respect safe areas and avoid horizontal drifting on mobile browsers */
  inset: calc(10px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left));
  padding:0;
  display:block;
  gap:0;
  pointer-events:none;

  /* Reset any desktop-centering transforms from non-fullscreen layouts */
  transform:none !important;
  max-width:none !important;
}
body.zp-run-fullscreen .zp-sheet__header{
  position:absolute;
  top:0;
  left:0;
  right:0;
  margin-left:auto;
  margin-right:auto;
  transform:none;
  /* Flexible panel width on desktop (avoids fixed 520px look) */
  width:clamp(280px, 40vw, 560px);
  max-width:100%;
  box-sizing:border-box;
  pointer-events:auto;
}

/* In fullscreen running mode, enable backdrop blur for overlays (looks good on map) */
body.zp-run-fullscreen .zp-sheet__header,
body.zp-run-fullscreen .zp-card{
  backdrop-filter:blur(10px);
}

/* --- Navigation HUD (Top banner) --- */
.zp-navhud{
  display:block;
}
.zp-navhud__card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:18px;
  border:1px solid rgba(15,23,42,.12);
  background:rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 44px rgba(0,0,0,.18);
}
.zp-navhud__icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:rgba(37,99,235,.10);
  border:1px solid rgba(37,99,235,.20);
  flex:0 0 auto;
}
.zp-navhud__main{ min-width:0; }
.zp-navhud__dist{
  font-size:18px;
  font-weight:800;
  letter-spacing:.2px;
  line-height:1.1;
}
.zp-navhud__text{
  margin-top:2px;
  font-size:13px;
  line-height:1.25;
  font-weight:650;
  color:rgba(15,23,42,.95);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.zp-navhud__sub{
  margin-top:2px;
  font-size:11px;
  color:rgba(71,85,105,.95);
  white-space:normal;
  overflow:hidden;
}
.zp-navhud__meta{
  margin-top:4px;
  font-size:11px;
  color:rgba(51,65,85,.95);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

body.zp-run-fullscreen #zp-nav-hud{
  position:absolute;
  /* Top is set dynamically via --zp-header-h (measured in JS) */
  top:calc(var(--zp-header-h, 64px) + 12px);
  left:0;
  right:0;
  margin-left:auto;
  margin-right:auto;
  transform:none;
  width:clamp(280px, 40vw, 560px);
  max-width:100%;
  box-sizing:border-box;
  pointer-events:auto;
}
body.zp-run-fullscreen #zp-stop-card{
  position:absolute;
  left:0;
  right:0;
  margin-left:auto;
  margin-right:auto;
  transform:none;
  bottom:calc(env(safe-area-inset-bottom) + 0px);
  width:clamp(280px, 40vw, 560px);
  max-width:100%;
  box-sizing:border-box;
  min-height:130px;
  /* Keep the card slimmer on mobile to preserve map visibility */
  max-height:40vh;
  overflow:auto;
  pointer-events:auto;
  /* Let the user adjust height on desktop */
  resize:vertical;
}

/* Slim stop card layout */
body.zp-run-fullscreen #zp-stop-card{
  padding:10px 10px 12px;
}
body.zp-run-fullscreen #zp-stop-card .zp-card__row{ padding:4px 0; }
body.zp-run-fullscreen #zp-stop-card #zp-next-name,
body.zp-run-fullscreen #zp-stop-card #zp-next-address{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
body.zp-run-fullscreen #zp-stop-card #zp-next-papers .zp-chip{
  font-size:11px;
  padding:3px 7px;
  margin-right:6px;
  margin-bottom:4px;
}

/* Stop actions: 3 main actions as compact icon buttons */
body.zp-run-fullscreen #zp-stop-card .zp-stop-actions{
  display:flex;
  flex-direction:column;
  gap:8px;
}
body.zp-run-fullscreen #zp-stop-card .zp-stop-actions__confirm{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
body.zp-run-fullscreen #zp-stop-card .zp-stop-actions__main{
  display:flex;
  gap:8px;
  flex-wrap:nowrap;
}
body.zp-run-fullscreen #zp-stop-card .zp-stop-actions__main .zp-btn{
  flex:1;
}

/* Compact mode on small devices: hide text, keep big tap targets */
@media (max-width: 520px), (max-height: 740px){
  body.zp-run-fullscreen #zp-stop-card{
    padding:8px 8px 10px;
    max-height:30vh;
  }
  body.zp-run-fullscreen #zp-stop-card .zp-icon,
  body.zp-run-fullscreen #zp-stop-card .zp-icon svg{ width:20px; height:20px; }
  body.zp-run-fullscreen #zp-stop-card .zp-stop-actions__main .zp-btn{ padding:10px 0; }
  body.zp-run-fullscreen #zp-stop-card .zp-stop-actions__main .zp-btn .zp-btn-text{ display:none; }
}

/* Ultra-compact: keep single-row buttons, hide labels */
@media (max-width: 420px), (max-height: 720px){
  body.zp-run-fullscreen #zp-stop-card .zp-stop-actions__main .zp-btn{ padding:10px 0; }
  body.zp-run-fullscreen #zp-stop-card .zp-stop-actions__main .zp-btn .zp-btn-text{ display:none; }
}

body.zp-run-fullscreen #zp-run-picker,
body.zp-run-fullscreen #zp-run-actions{
  display:none !important;
}

/* Make the stop card more readable/compact */
body.zp-run-fullscreen #zp-stop-card .zp-card__row{
  grid-template-columns:90px 1fr;
}
body.zp-run-fullscreen #zp-stop-card .zp-card__label{ font-size:11px; }
body.zp-run-fullscreen #zp-stop-card .zp-card__value{ font-size:13px; }

/* Buttons as "pills" like navigation controls */
body.zp-run-fullscreen .zp-header-actions .zp-btn{
  background:rgba(255,255,255,.92);
}

/* Wake-Lock Toggle */
#zp-wake.is-active{
  background:rgba(34,197,94,.14);
  border-color:rgba(34,197,94,.35);
  color:#14532d;
}

/* Keep map controls reachable on mobile.
   Values are fed via CSS vars from JS. We place controls on the RIGHT MIDDLE
   between the top overlays (header + HUD) and the bottom sheet. */
#zp-map{ --zp-controls-bottom: 220px; --zp-controls-top: 60px; --zp-controls-y: 50%; --zp-controls-right: 12px; }
body.zp-run-fullscreen #zp-map .maplibregl-ctrl-top-right{
  top:var(--zp-controls-y, 50%) !important;
  bottom:auto !important;
  right:var(--zp-controls-right, 12px) !important;
  transform:translateY(-50%);
}

/* MapLibre uses Mapbox GL class names */
body.zp-run-fullscreen #zp-map .mapboxgl-ctrl-top-right{
  top:var(--zp-controls-y, 50%) !important;
  bottom:auto !important;
  right:var(--zp-controls-right, 12px) !important;
  transform:translateY(-50%);
}

/* Follow control removed (requested). */

/* Attribution
   We keep it at the very bottom-right. If the stop sheet overlaps, that's fine.
   Important: it must NOT collide with the mid-right navigation controls. */
body.zp-run-fullscreen #zp-map .mapboxgl-ctrl-bottom-right,
body.zp-run-fullscreen #zp-map .maplibregl-ctrl-bottom-right{
  top:auto !important;
  right:var(--zp-controls-right, 12px) !important;
  bottom:6px !important;
  transform:none !important;
  pointer-events:none;
  opacity:.85;
}

/* Ensure controls are above the glass UI (they can otherwise be visually hidden by overlays) */
body.zp-run-fullscreen #zp-map .mapboxgl-ctrl,
body.zp-run-fullscreen #zp-map .maplibregl-ctrl{
  z-index:60;
}

@media (max-width: 820px){
  body.zp-run-fullscreen .zp-sheet{ inset:10px; }
  body.zp-run-fullscreen .zp-sheet__header,
  body.zp-run-fullscreen #zp-nav-hud,
  body.zp-run-fullscreen #zp-stop-card{
    width:100%;
    left:0;
    right:0;
    transform:none;
  }
  body.zp-run-fullscreen #zp-nav-hud{ top:calc(var(--zp-header-h, 64px) + 10px); }
  body.zp-run-fullscreen #zp-stop-card{
    max-height:44vh;
    resize:none;
  }
  body.zp-run-fullscreen #zp-stop-card .zp-card__row{ grid-template-columns:80px 1fr; }
}

/* Extra-wide desktop: allow a bit more room while staying centered */
@media (min-width: 1200px){
  body.zp-run-fullscreen .zp-sheet__header,
  body.zp-run-fullscreen #zp-stop-card{
    width:clamp(420px, 34vw, 640px);
  }
}

/* Current position marker (car / Google Maps-like) */
.zp-me-vehicle {
  width: var(--zp-me-size, 40px);
  height: var(--zp-me-size, 40px);
  border-radius: 9999px;
  display: grid;
  place-items: center;
  transform: rotate(var(--bearing, 0deg));
  transform-origin: center;
  transition: transform 120ms linear;
  pointer-events: none; /* map handles interactions; marker is purely visual */
  z-index: 10;
}

.zp-me-vehicle__halo{
  position:absolute;
  inset:0;
  border-radius:999px;
  background:rgba(56,189,248,.16);
}
.zp-me-vehicle__ring{
  position:absolute;
  left:50%;
  top:50%;
  width:34px;
  height:34px;
  border-radius:999px;
  transform:translate(-50%,-50%);
  border:2px solid rgba(255,255,255,.92);
  box-shadow:0 10px 24px rgba(0,0,0,.22);
  background:rgba(255,255,255,.10);
}
.zp-me-vehicle__icon {
  width: var(--zp-me-icon-size, 36px);
  height: var(--zp-me-icon-size, 36px);
  border-radius: 9999px;
  display: grid;
  place-items: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.zp-me-vehicle__icon svg{
  width:100%;
  height:100%;
  display:block;
}

/* Legacy dot marker (kept for backwards compatibility) */
.zp-me-gdot{
  width:26px;
  height:26px;
  position:relative;
  pointer-events:none;
}
.zp-me-gdot__halo{
  position:absolute;
  inset:0;
  border-radius:999px;
  background:rgba(56,189,248,.18);
}
.zp-me-gdot__cone{
  position:absolute;
  left:50%;
  top:50%;
  width:0;
  height:0;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  border-bottom:14px solid rgba(56,189,248,.35);
  /* Triangle points "up"; rotate by bearing */
  transform:translate(-50%,-70%) rotate(var(--bearing, 0deg));
  transform-origin:50% 70%;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.22));
}
.zp-me-gdot__dot{
  position:absolute;
  left:50%;
  top:50%;
  width:12px;
  height:12px;
  border-radius:999px;
  transform:translate(-50%,-50%);
  background:#38bdf8;
  border:2px solid rgba(255,255,255,.95);
  box-shadow:0 10px 24px rgba(0,0,0,.32);
}

/* ------------------------------
   Driver Dark Mode
   Toggle via: document.querySelector('#zp-driver').classList.toggle('zp-dark', ...)
------------------------------ */
.zp-driver.zp-dark{
  background:#0b1220;
}

.zp-driver.zp-dark .zp-sheet__header,
.zp-driver.zp-dark .zp-card,
.zp-driver.zp-dark .zp-navhud__card,
.zp-driver.zp-dark .zp-toast{
  background:rgba(15,23,42,.88);
  border-color:rgba(148,163,184,.18);
  color:#e2e8f0;
}

.zp-driver.zp-dark .zp-badge,
.zp-driver.zp-dark .zp-version,
.zp-driver.zp-dark .zp-btn,
.zp-driver.zp-dark .zp-input,
.zp-driver.zp-dark .zp-tour,
.zp-driver.zp-dark .zp-run,
.zp-driver.zp-dark .zp-chip,
.zp-driver.zp-dark .zp-status{
  background:rgba(2,6,23,.40);
  border-color:rgba(148,163,184,.20);
  color:#e2e8f0;
}

.zp-driver.zp-dark .zp-card__label{ color:rgba(226,232,240,.75); }
.zp-driver.zp-dark .zp-muted,
.zp-driver.zp-dark .zp-hint,
.zp-driver.zp-dark .zp-sub{ color:rgba(226,232,240,.70); }

.zp-driver.zp-dark .zp-create-hint{
  border-color:rgba(248,113,113,.35);
  background:rgba(248,113,113,.12);
  color:rgba(254,226,226,.95);
}

.zp-driver.zp-dark .zp-navhud__text{ color:rgba(226,232,240,.95); }
.zp-driver.zp-dark .zp-navhud__sub{ color:rgba(226,232,240,.70); }
.zp-driver.zp-dark .zp-navhud__meta{ color:rgba(226,232,240,.78); }
.zp-driver.zp-dark .zp-navhud__icon{
  background:rgba(37,99,235,.18);
  border-color:rgba(37,99,235,.28);
}

.zp-driver.zp-dark .zp-btn:hover{ border-color:rgba(226,232,240,.24); }
.zp-driver.zp-dark .zp-input:focus{ border-color:rgba(59,130,246,.9); }

/* Keep primary buttons readable */
.zp-driver.zp-dark .zp-btn--primary{ background:#2563eb; border-color:#2563eb; color:#fff; }

/* Fullscreen header navigation pills must also respect dark mode.
   (There is a fullscreen rule that forces a light background.) */
.zp-driver.zp-dark .zp-header-actions .zp-btn{
  background:rgba(2,6,23,.55);
}

/* Map controls (MapLibre / Mapbox GL classnames)
   Make the built-in zoom/compass controls match the dark UI. */
.zp-driver.zp-dark #zp-map .maplibregl-ctrl-group,
.zp-driver.zp-dark #zp-map .mapboxgl-ctrl-group{
  background:rgba(15,23,42,.88);
  border:1px solid rgba(148,163,184,.18);
  box-shadow:0 12px 30px rgba(0,0,0,.35);
}
.zp-driver.zp-dark #zp-map .maplibregl-ctrl-group button,
.zp-driver.zp-dark #zp-map .mapboxgl-ctrl-group button{
  filter:invert(1);
}

/* Attribution text in dark mode */
.zp-driver.zp-dark #zp-map .maplibregl-ctrl-attrib,
.zp-driver.zp-dark #zp-map .mapboxgl-ctrl-attrib{
  background:rgba(15,23,42,.72);
  color:#e2e8f0;
}
.zp-driver.zp-dark #zp-map .maplibregl-ctrl-attrib a,
.zp-driver.zp-dark #zp-map .mapboxgl-ctrl-attrib a{
  color:#93c5fd;
}

/* Follow button removed (requested). */