:root {
  --bg: #0f1115;
  --panel: #161a22;
  --text: #e6e6e6;
  --muted: #9aa4b2;
  --primary: #3b82f6;
  /* Primary button palette (more consistent in dark UI) */
  --btn-primary-bg: #2563eb;
  --btn-primary-hover: #1d4ed8;
  --btn-primary-active: #1e40af;
  --btn-primary-text: #eff6ff;
  --border: #242938;
}

* { box-sizing: border-box; }
html, body { height: 100vh; overflow: hidden; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  cursor: default;
  display: flex;
  flex-direction: column;
  /* Pull-to-refresh animation (JS manipulates translateY) */
  transform: translateY(0px);
  transition: transform 180ms ease;
  will-change: transform;
}

/* When actively pulling, JS disables transition for immediate tracking */
body.ptr-pulling{ transition: none; }

/* Pull-to-refresh indicator */
#ptrIndicator{
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2400;
  background: rgba(22,26,34,.92);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--muted);
  display: none;
  pointer-events: none;
}
body.ptr-pulling #ptrIndicator{ display: inline-flex; gap: 8px; align-items: center; }

#ptrSpinner{
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(154,164,178,.35);
  border-top-color: rgba(230,230,230,.9);
  animation: ptrSpin 0.9s linear infinite;
}
@keyframes ptrSpin{ from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} }

.topbar {
  border-bottom: 1px solid var(--border);
  padding: 12px;
  background: var(--panel);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.top-actions { display: flex; align-items: center; gap: 8px; }
/* Mobile-only: filter toggle button in topbar */
#btnToggleFilters{ display: none; }
label { font-size: 14px; color: var(--muted); }
input, select, button { 
  background: #0d1117; 
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  /* iOS Safari/PWA: prevent auto-zoom on focus by keeping font-size >= 16px */
  font-size: 16px;
}

/* --- Checkbox UX (scoped) ---
   Ziel:
   - konsistentes Layout im Dark-Theme
   - bei Hover einen blassen Haken anzeigen
   - bei Checked einen klaren Haken anzeigen
   (bewusst NICHT global für alle Checkboxen, sondern nur in relevanten Bereichen)
*/
.topbar .filters input[type="checkbox"],
.wp-toggle input[type="checkbox"],
label.inline-label input[type="checkbox"]{
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  padding: 0;
  margin: 0;
  /* quadratisch (insb. im Edit-Modal) */
  border-radius: 0 !important;
  border: 1px solid #334155; /* slate-700 */
  background: #0b1220;
  display: inline-grid;
  place-content: center;
}

/* Edit-Modal: defensiv sicherstellen, dass Checkboxen NICHT als native (runde) Checkboxen gerendert werden.
   (Einige Browser/Stylesheets können die allgemeinen input-Regeln bevorzugen, daher hier extra scoped.) */
#editModal input[type="checkbox"]{
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 14px !important;
  height: 14px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: 1px solid #334155 !important;
  background: #0b1220 !important;
  display: inline-grid !important;
  place-content: center;
}
#editModal input[type="checkbox"]::after{
  content: "";
  width: 7px;
  height: 4px;
  border-left: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: translateY(-0.5px) rotate(-45deg);
  opacity: 0;
}
#editModal label:hover input[type="checkbox"]:not(:checked)::after{ opacity: 0.22; }
#editModal input[type="checkbox"]:checked{ border-color: rgba(59,130,246,.85); }
#editModal input[type="checkbox"]:checked::after{
  opacity: 1;
  border-left-color: #fff;
  border-bottom-color: #fff;
}
#editModal input[type="checkbox"]:focus-visible{
  outline: 2px solid rgba(59,130,246,.55);
  outline-offset: 2px;
}
.topbar .filters input[type="checkbox"]::after,
.wp-toggle input[type="checkbox"]::after,
label.inline-label input[type="checkbox"]::after{
  content: "";
  width: 7px;
  height: 4px;
  border-left: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: translateY(-0.5px) rotate(-45deg);
  opacity: 0;
}

/* Hover: dezent andeuten, auch wenn nicht gecheckt */
.topbar .filters label:hover input[type="checkbox"]:not(:checked)::after,
.wp-toggle:hover input[type="checkbox"]:not(:checked)::after,
label.inline-label:hover input[type="checkbox"]:not(:checked)::after{
  opacity: 0.22;
}

/* Checked */
.topbar .filters input[type="checkbox"]:checked,
.wp-toggle input[type="checkbox"]:checked,
label.inline-label input[type="checkbox"]:checked{
  border-color: rgba(59,130,246,.85);
}
.topbar .filters input[type="checkbox"]:checked::after,
.wp-toggle input[type="checkbox"]:checked::after,
label.inline-label input[type="checkbox"]:checked::after{
  opacity: 1;
  /* bei checked Haken in weiß */
  border-left-color: #fff;
  border-bottom-color: #fff;
}

/* Keyboard focus */
.topbar .filters input[type="checkbox"]:focus-visible,
.wp-toggle input[type="checkbox"]:focus-visible,
label.inline-label input[type="checkbox"]:focus-visible{
  outline: 2px solid rgba(59,130,246,.55);
  outline-offset: 2px;
}

/* Disabled */
.topbar .filters input[type="checkbox"]:disabled,
.wp-toggle input[type="checkbox"]:disabled,
label.inline-label input[type="checkbox"]:disabled{
  opacity: 0.55;
  cursor: not-allowed;
}
/* Improve native date inputs contrast in dark UI */
input[type="date"]{ color-scheme: dark; }
button { cursor: pointer; }
button:hover { border-color: var(--primary); }

.stats-bar {
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}
.stat-item{
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.stat-label{ white-space: nowrap; }
.stat-value{ white-space: nowrap; }
.stats-bar button {
  padding: 4px 8px;
  font-size: 12px;
}
.stat-value span {
  color: var(--text);
  font-weight: 600;
}

.layout { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px; flex: 1; min-height: 0; }
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; min-height: 0; }
.panel h2 { margin-top: 0; font-size: 18px; }

.waypoints { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.waypoints li { padding: 0; border: 1px solid var(--border); border-radius: 8px; background: #121621; overflow: hidden; }
.wp-row {
  display: grid;
  grid-template-columns: 32px 40px 1fr 120px;
  align-items: stretch;
}
.wp-line {
  display: flex;
  padding: 8px 4px;
}
.wp-drag-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(0,0,0,0.1); border-right: 1px solid var(--border);
}

/* Fuel-range selection checkbox (map filter) */
.wp-type-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.wp-fuel-range {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.wp-fuel-range input {
  margin: 0;
}

/* Visual feedback for currently selected range */
li.wp-in-range .wp-row {
  outline: 2px solid rgba(34, 197, 94, 0.22);
  outline-offset: -2px;
}
li.wp-range-edge .wp-row {
  outline-color: rgba(34, 197, 94, 0.55);
}
.wp-type-col {
  display: flex; align-items: center; justify-content: center;
  padding: 8px 4px;
}
.wp-info-col {
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.wp-ctrl-col {
  padding: 10px;
  display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between;
  background: rgba(0,0,0,0.05);
  border-left: 1px solid var(--border);
}
.wp-path-row {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 14px;
}
.path-sep { color: var(--muted); opacity: 0.5; }
.wp-meta-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 12px; color: var(--muted);
}
.wp-purpose-row {
  font-size: 13px; color: var(--text); opacity: 0.8;
  margin-top: 2px;
}
.wp-purpose-row span { font-weight: 500; }
.wp-actions-row { display: flex; gap: 4px; }
.wp-priv-toggle {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--muted); cursor: pointer;
}

/* List toggles (privat/generiert): text left, checkbox right, compact spacing */
.wp-toggles {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: stretch;
}
.wp-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
  cursor: pointer;
}
.wp-toggle span { flex: 1 1 auto; }
.wp-toggle input { margin: 0; }
.wp-error-box {
  margin-top: 8px; padding: 8px 12px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 6px;
  font-size: 12px; color: #fca5a5;
}
.wp-error-box ul { margin: 4px 0 0 18px; padding: 0; }
.wp-cons-tag { color: #34d399; font-weight: 600; }

/* Plausibility ignore toggle (manual accept) */
.wp-plausibility-toggle {
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(148, 163, 184, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 6px;
}

/* Fuel / odometer labels */
.wp-km-range, .wp-km-since {
  background: rgba(148, 163, 184, 0.12); /* slate */
  border: 1px solid rgba(148, 163, 184, 0.22);
  color: #cbd5e1;
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: 600;
  line-height: 1.2;
}
.wp-km-since {
  background: rgba(34, 197, 94, 0.10);
  border-color: rgba(34, 197, 94, 0.25);
  color: #86efac;
}

/* Fuel: reserve canister badge */
.wp-fuel-reserve {
  background: rgba(245, 158, 11, 0.10);
  border: 1px solid rgba(245, 158, 11, 0.25);
  color: #fcd34d;
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: 700;
  line-height: 1.2;
}

/* Date and direction badges more prominent */
.wp-date, .wp-dir-badge {
  background: #0b1220;
  border: 1px solid var(--border);
  color: #cbd5e1;
  font-weight: 600;
  font-size: 11px;
  padding: 3px 6px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.wp-dir-badge {
  margin-right: 4px;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--muted);
  border-color: rgba(255,255,255,0.05);
  width: 42px;
  justify-content: center;
}

.wp-purpose-badge, .wp-visited-badge {
  background: #14532d;
  border: 1px solid #22c55e;
  color: #fff;
  font-weight: 600;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  margin-bottom: 4px;
  margin-right: 4px;
}

.wp-purpose-badge {
  background: #1e293b; /* slate-800ish, dezent dunkelblau/grau */
  border-color: #475569; /* slate-600, dezent */
  color: #94a3b8; /* slate-400, muted text */
}

.wp-visited-row {
  margin-bottom: 4px;
  font-size: 14px;
}
.wp-visited-row strong {
  color: #fff;
}

.wp-date {
  font-size: 12px;
  padding: 4px 8px;
}

/* Drag handle */
.drag-handle {
  cursor: grab;
  color: #94a3b8;
  padding: 4px;
  border-radius: 4px;
  width: 28px; height: 28px; display:flex; align-items:center; justify-content:center;
}
.drag-handle:active { cursor: grabbing; }

/* Type highlighting - color the whole entry */
.waypoints li.wp-fuel { background: #0f1a12; border-color: #14532d; }
/* LPG/Autogas: gleiche Richtung wie Fuel (grün), aber abgeschwächt für bessere Unterscheidung */
.waypoints li.wp-fuel.wp-fuel-lpg { background: rgba(34, 197, 94, 0.06); border-color: rgba(34, 197, 94, 0.28); }
.waypoints li.wp-fuel.wp-fuel-lpg .wp-type { color: rgba(34, 197, 94, 0.70); }
.waypoints li.wp-fuel.wp-fuel-lpg .wp-type > svg { fill: rgba(34, 197, 94, 0.70); }
/*.waypoints li.wp-visited { background: #0f1a12; border-color: #22c55e; }*/
.waypoints li.wp-toll { background: rgba(245, 158, 11, 0.10); border-color: rgba(245, 158, 11, 0.55); }
.waypoints li.wp-drive { background: #121621; }

/* Plausibility: mark related entries that likely need adjustment */
.waypoints li.wp-needs-fix {
  /* Grau markieren (Rahmen + Hintergrund) */
  background: rgba(148, 163, 184, 0.08);
  border-color: rgba(148, 163, 184, 0.80);
  border-width: 2px;
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.22) inset;
  opacity: 0.5;
}

/* Type icon */
.wp-type {
  width: 24px; height: 24px; display:flex; align-items:center; justify-content:center;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #0b1220;
}
/* Only color direct SVG icons (drive/toll). Brand logos are wrapped in spans and should keep their own colors */
.wp-type > svg { width: 18px; height: 18px; display:block; fill: #cbd5e1; }
/* Color icons by type to improve distinctiveness */
.waypoints li.wp-fuel .wp-type > svg { fill: #22c55e; }
.waypoints li.wp-toll .wp-type > svg { fill: #f59e0b; }
.waypoints li.wp-drive .wp-type > svg { fill: #93c5fd; }
/* Also set color (for stroke-based SVGs) */
.waypoints li.wp-fuel .wp-type { color: #22c55e; }
.waypoints li.wp-toll .wp-type { color: #f59e0b; }
.waypoints li.wp-drive .wp-type { color: #93c5fd; }

.create-box { margin-top: 12px; }
.create-box .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.create-box label { display: flex; flex-direction: column; gap: 4px; }

.map { 
  /* Fill remaining height of the right panel */
  flex: 1 1 auto;
  min-height: 320px;
  background: #0d1117; 
  border: 1px dashed var(--border); 
  border-radius: 8px; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  color: var(--muted);
}

/* Big map: overlay controls (top-right) */
.map-wrap{
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}
.map-controls{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 700; /* above Leaflet tiles (default panes are < 700) */
  background: rgba(11, 18, 32, 0.88);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  padding: 6px 8px;
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Quick add button inside map controls */
.map-controls .map-add-btn{
  width: 28px;
  height: 28px;
  border-radius: 8px;
}
.map-controls .map-add-btn .fa{
  font-size: 14px;
  line-height: 1;
}
.map-opt{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text);
  user-select: none;
}
.map-opt input{ margin: 0; }

/* Scrollable waypoint list container for large data sets */
#waypointsContainer {
  flex: 1 1 auto;
  min-height: 0; /* allows the container to shrink within the panel */
  overflow-y: auto;
}

.statusbar { border-top: 1px solid var(--border); padding: 4px 10px; color: var(--muted); background: var(--panel); }

.badge { font-size: 11px; padding: 2px 6px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); }
.badge.temp { color: #f59e0b; border-color: #f59e0b44; }
.badge.generated { background: #1e3a8a; border-color: #1e40af; color: #fff; }

/* Clickable entry id (hash link) */
.wp-id-link{
  cursor: pointer;
  background: transparent;
  color: rgba(148,163,184,0.75);
  border-color: rgba(148,163,184,0.18);
  opacity: 0.75;
  font-weight: 500;
}
.wp-id-link:hover{
  opacity: 1;
  color: rgba(226,232,240,0.92);
  border-color: rgba(226,232,240,0.30);
}
.wp-id-link:focus{
  outline: 2px solid rgba(59,130,246,0.55);
  outline-offset: 2px;
}

/* Calculated distance badge (route/GPX) shown for entries with fixed odometer values */
.badge.calc{
  color: rgba(148,163,184,0.95);
  border-color: rgba(148,163,184,0.25);
}

/* Temporary km suggestion coloring (instead of 'tmp' text) */
.km-suggest.temp { color: #f59e0b; }

/* Simple map marker icons (emoji-based) */
/* Marker visual adjustments */
.leaflet-marker-icon, .leaflet-marker-shadow { cursor: default !important; }
/* highlight marker on hover from list */
.leaflet-marker-icon.hl { transform: scale(1.25); filter: drop-shadow(0 0 6px rgba(34,197,94,.6)); }
/* dim non-hovered markers */
.leaflet-marker-icon.dim { opacity: .2; }
/* when a tooltip is open, make it obvious which marker it belongs to */
.leaflet-marker-icon.tip-owner {
  transform: scale(1.35);
  filter:
    drop-shadow(0 0 10px rgba(255,255,255,.28))
    drop-shadow(0 0 14px rgba(59,130,246,.65));
}
/* Tooltip styling for waypoints (main map markers) */
.leaflet-tooltip.wp-tooltip {
  /* Leaflet default tooltips are very light; align to our dark UI so the arrow can match */
  background: #0b1220;
  color: #e5e7eb;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 14px 28px rgba(0,0,0,.55);
}

/* Tooltip content layout (more readable, supports contact/company line) */
.leaflet-tooltip.wp-tooltip .tip-wrap{
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 180px;
  max-width: 320px;
}
.leaflet-tooltip.wp-tooltip .tip-head{
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.leaflet-tooltip.wp-tooltip .tip-line{
  font-size: 12px;
  line-height: 1.25;
}
.leaflet-tooltip.wp-tooltip .tip-addr{
  color: rgba(226,232,240,0.95);
}
.leaflet-tooltip.wp-tooltip .tip-label{
  color: rgba(148,163,184,0.95);
}

/* When Leaflet positions the tooltip to the left/right (e.g. near map edges),
   add a small horizontal gap while keeping it centered relative to the marker. */
.leaflet-tooltip.wp-tooltip.leaflet-tooltip-left { margin-right: 12px; }
.leaflet-tooltip.wp-tooltip.leaflet-tooltip-right { margin-left: 12px; }

/* Add a small gap in the direction of the tooltip without affecting centering.
   (JS offset would shift left/right tooltips vertically; use per-direction margins instead.) */
.leaflet-tooltip.wp-tooltip.leaflet-tooltip-top { margin-bottom: 12px; }
.leaflet-tooltip.wp-tooltip.leaflet-tooltip-bottom { margin-top: 12px; }

/* Make the tooltip arrow/pointer more visible (Leaflet uses ::before for the arrow) */
.leaflet-tooltip.wp-tooltip::before,
.leaflet-tooltip.wp-tooltip::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: solid transparent;
  pointer-events: none;
}

/* Arrow = 2-layer triangle: ::before = border/outline, ::after = fill */
.leaflet-tooltip.wp-tooltip.leaflet-tooltip-top::before {
  left: 50%;
  bottom: 0;
  margin-left: -9px;
  margin-bottom: -11px;
  border-width: 11px 9px 0;
  border-top-color: rgba(255,255,255,.28);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.45));
}
.leaflet-tooltip.wp-tooltip.leaflet-tooltip-top::after {
  left: 50%;
  bottom: 0;
  margin-left: -8px;
  margin-bottom: -10px;
  border-width: 10px 8px 0;
  border-top-color: #0b1220;
}

.leaflet-tooltip.wp-tooltip.leaflet-tooltip-bottom::before {
  left: 50%;
  top: 0;
  margin-left: -9px;
  margin-top: -11px;
  border-width: 0 9px 11px;
  border-bottom-color: rgba(255,255,255,.28);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.45));
}
.leaflet-tooltip.wp-tooltip.leaflet-tooltip-bottom::after {
  left: 50%;
  top: 0;
  margin-left: -8px;
  margin-top: -10px;
  border-width: 0 8px 10px;
  border-bottom-color: #0b1220;
}

.leaflet-tooltip.wp-tooltip.leaflet-tooltip-left::before {
  top: 50%;
  right: 0;
  margin-top: -9px;
  margin-right: -11px;
  border-width: 9px 0 9px 11px;
  border-left-color: rgba(255,255,255,.28);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.45));
}
.leaflet-tooltip.wp-tooltip.leaflet-tooltip-left::after {
  top: 50%;
  right: 0;
  margin-top: -8px;
  margin-right: -10px;
  border-width: 8px 0 8px 10px;
  border-left-color: #0b1220;
}

.leaflet-tooltip.wp-tooltip.leaflet-tooltip-right::before {
  top: 50%;
  left: 0;
  margin-top: -9px;
  margin-left: -11px;
  border-width: 9px 11px 9px 0;
  border-right-color: rgba(255,255,255,.28);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.45));
}
.leaflet-tooltip.wp-tooltip.leaflet-tooltip-right::after {
  top: 50%;
  left: 0;
  margin-top: -8px;
  margin-left: -10px;
  border-width: 8px 10px 8px 0;
  border-right-color: #0b1220;
}
/* Use crosshair cursor on the map background to indicate addable locations (e.g., dblclick to add/search) */
.leaflet-container { cursor: crosshair !important; }

/* Mini-map right-click context menu */
.mini-ctx-menu {
  position: fixed;
  z-index: 3000;
  min-width: 160px;
  background: #0b1220;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0,0,0,.55);
  padding: 6px;
}
.mini-ctx-menu .mini-ctx-item {
  width: 100%;
  display: block;
  text-align: left;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: #e5e7eb;
  font-weight: 600;
  cursor: pointer;
}
.mini-ctx-menu .mini-ctx-item:hover {
  background: #111827;
  border-color: #30384a;
}

/* Custom pin marker (drive) */
.pin { width: 22px; height: 28px; filter: drop-shadow(0 0 2px #000); }
.pin path.pin-body { fill: #3b82f6; }
/* gray variant for places search results on main map */
.pin.pin-gray path.pin-body { fill: #64748b !important; }

/* Pin wrapper with inner icon (e.g. toll pin) */
.pin-wrap { position: relative; display: inline-block; width: 22px; height: 28px; }
.pin-wrap .pin { position: absolute; left: 0; top: 0; }
.pin-wrap.pin-toll .pin path.pin-body { fill: #f59e0b !important; }
.pin-wrap .pin-inner {
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pin-wrap .pin-inner svg { width: 16px; height: 16px; display: block; fill: #fff; }

/* ensure gray pins stay gray even if other rules appear later */
svg.pin.pin-gray path.pin-body { fill: #64748b !important; }

/* temporary highlight for list row when scrolled to from marker click */
.waypoints li.row-highlight { outline: 2px solid #60a5fa; background: rgba(59,130,246,.12); transition: background .3s ease; }

/* align right-side filter controls */
.topbar .filters { display: flex; align-items: center; gap: 8px; }
.topbar .filters .flex-spacer { flex: 1 1 auto; }

/* Brand circle used in list and as map marker for fuel */
.brand {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6);
  border: 1px solid rgba(0,0,0,.25);
}
.brand.sm { width: 18px; height: 18px; font-size: 10px; }
.brand.shell { background: #ffd100; color: #c50; }
.brand.aral { background: #0a64bf; }
.brand.total { background: #e61919; }
.brand.esso { background: #e21b22; }
.brand.jet { background: #ffd100; color: #1a3f8b; }
.brand.omv { background: #108a00; }
.brand.avia { background: #cc0000; }
.brand.bp { background: #0a8a00; }
.brand.eni { background: #ffd100; color: #111; }
.brand.orlen { background: #d10000; }
.brand.circlek { background: #d10000; }
/* newly added brands */
.brand.bft { background: #ff6a00; }
.brand.team { background: #009a44; }
.brand.leclerc { background: #0057a6; }
/* additional brands */
.brand.ina { background: #0067b1; }
.brand.mol { background: #e21b22; }
.brand.hifa { background: #ffd200; color: #222; }
/* more brands */
.brand.avin { background: #003b8e; }
.brand.score { background: #8b5cf6; }
.brand.mcgas { background: #0ea5e9; }
/* default/unknown fuel brand back to old green */
.brand.fuel { background: #22c55e; }

/* Fuel group list below a drive entry when fuel entries are hidden */
.fuel-group { margin-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; }
.fuel-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 16px; background: #0b1220; color: var(--muted); font-size: 12px; }
.fuel-chip .brand { margin-right: 2px; }

/* Icon-only button for actions (trash) */
.icon-btn { 
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; 
  background: #0b1220; border: 1px solid var(--border); border-radius: 6px; padding: 0; 
  cursor: pointer;
}
.icon-btn:hover { border-color: var(--primary); }
.icon-btn.active { border-color: var(--primary); background: #1e293b; }
.icon-btn svg { width: 14px; height: 14px; fill: #cbd5e1; display: block; }

/* Copy-mode button: show plausibility problems prominently */
.icon-btn.plausibility-alert {
  border-color: rgba(239, 68, 68, 0.85);
  background: rgba(239, 68, 68, 0.18);
  color: #ef4444;
}
.icon-btn.plausibility-alert:hover {
  border-color: rgba(239, 68, 68, 1);
  background: rgba(239, 68, 68, 0.24);
}
.icon-btn.plausibility-alert svg { fill: currentColor; }

.btn-sm {
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
.btn-sm svg { width: 14px; height: 14px; }

/* Coloring list buttons */
[data-action="check"] { border-color: #22c55e; color: #22c55e; }
[data-action="check"] svg { fill: #22c55e; }
[data-action="edit"] { border-color: #f59e0b; color: #f59e0b; }
[data-action="edit"] svg { fill: #f59e0b; }
[data-action="delete"] { border-color: #ef4444; color: #ef4444; }
[data-action="delete"] svg { fill: #ef4444; }

/* Secondary button (e.g., Abbrechen) */
.btn-secondary { background: #0b1220; color: var(--muted); border-color: #30384a; }
.btn-secondary:hover { border-color: #475569; }

/* Drawer (Hamburger menu) */
.drawer {
  position: fixed;
  top: 0; right: 0;
  width: min(520px, 92vw);
  height: 100vh;
  background: var(--panel);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 16px rgba(0,0,0,.4);
  transform: translateX(100%);
  transition: transform .2s ease-in-out;
  z-index: 1000;
}
.drawer.open { transform: translateX(0); }
.drawer-header { display:flex; align-items:center; justify-content: space-between; padding: 12px; border-bottom: 1px solid var(--border); }
.drawer-header h3 { margin: 0; font-size: 16px; }
.drawer-body { padding: 12px; display: flex; flex-direction: column; gap: 16px; overflow: auto; height: calc(100vh - 54px); }
.drawer-section h4 { margin: 8px 0; font-size: 14px; color: var(--muted); }
/* Align inputs in settings drawer */
.drawer-section .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.drawer-section label:not(.inline-label) { display: flex; flex-direction: column; gap: 4px; }
.drawer-section label.inline-label { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.drawer-section label.inline-label input { width: auto; }
.drawer-section input[type="text"],
.drawer-section input[type="number"],
.drawer-section input[type="date"],
.drawer-section select { width: 100%; }

/* Primary buttons: visually distinct from inputs/selects */
/* IMPORTANT: exclude inline utility buttons (e.g. address copy icon) so they don't inherit the blue primary background */
button:not(.icon-btn):not(.btn-secondary):not(.danger):not(.addr-copy) {
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-hover);
  color: var(--btn-primary-text);
  font-weight: 700;
}
button:not(.icon-btn):not(.btn-secondary):not(.danger):not(.addr-copy):hover {
  background: var(--btn-primary-hover);
  border-color: var(--btn-primary-hover);
}
button:not(.icon-btn):not(.btn-secondary):not(.danger):not(.addr-copy):active {
  background: var(--btn-primary-active);
  border-color: var(--btn-primary-active);
}
button:not(.icon-btn):not(.btn-secondary):not(.danger):not(.addr-copy):disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--btn-primary-bg);
}

/* Collapsible sections in settings drawer */
.drawer-section.collapsible > h4 { cursor: pointer; display: flex; align-items: center; justify-content: flex-start; gap: 6px; }
.drawer-section .chev { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; opacity: .9; }
.drawer-section .chev svg { width: 22px; height: 22px; transition: transform .15s ease; transform: rotate(-90deg); }
.drawer-section.collapsible[aria-expanded="true"] > h4 .chev svg { transform: rotate(0deg); }
.drawer-section.collapsible.collapsed > :not(h4) { display: none; }

/* Vehicles manager: less cramped layout */
#vehiclesList { padding: 0; margin: 0; list-style: none; }
#vehiclesList li {
  display: block;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #0b1220;
  margin: 8px 0;
}
#vehiclesList .v-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
#vehiclesList .v-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}
#vehiclesList .v-grid input { width: 100%; }
#vehiclesList .v-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 10px;
}

@media (max-width: 720px){
  #vehiclesList .v-grid { grid-template-columns: 1fr; }
  #vehiclesList .v-actions { justify-content: stretch; }
  #vehiclesList .v-actions button { flex: 1 1 auto; }
}

/* Footer legend */
.statusbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 6px; flex: 0 0 auto; font-size: 13px; }
.statusbar .footer-left { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; min-width: 0; }
.statusbar .footer-stats { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; line-height: 1; }
/* Pipe separator between legend and stats */
.statusbar .footer-stats::before { content: "|"; color: var(--muted); opacity: 0.7; margin-right: 4px; }

.legend { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; line-height: 1; }
.legend .lg-item { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 13px; }
.statusbar #status { font-size: 13px; line-height: 1; }
.statusbar #status.status-ok { color: #22c55e; }
.statusbar #status.status-error { color: #ef4444; }
.legend svg { width: 14px; height: 14px; display: inline-block; }
.legend .fuel-icon svg { width: 14px; height: 14px; fill: #22c55e; }
.legend .lg-toll svg { fill: #f59e0b; }
.legend .lg-toll { color: #f59e0b; }
/* Parking icon text slightly bluish (SVG uses fixed fills) */
.legend .lg-parking { color: #93c5fd; }
/* use green fuel icon anywhere we use .fuel-icon, incl. tooltips */
.fuel-icon svg { width: 14px; height: 14px; fill: #22c55e; }

/* --- Mobile layout optimizations --- */
@media (max-width: 720px){
  /* Mobile: Seite wieder scrollbar machen (verhindert "gequetscht" bei umgebrochener Topbar/Stats) */
  html, body{ height: auto; min-height: 100%; overflow-y: auto; }
  body{ overflow-x: hidden; }

  /* Mobile: Filter ein-/ausklappbar (Platz sparen) */
  #btnToggleFilters{ display: inline-flex; }
  .topbar .filters{
    overflow: hidden;
    transition: max-height .18s ease, opacity .18s ease;
    max-height: 520px;
    opacity: 1;
  }
  body.filters-collapsed .topbar .filters{
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    margin: 0;
  }

  /* Topbar/filter layout: more structured on small screens */
  .topbar{ padding: 10px; gap: 10px; align-items: stretch; }
  .topbar .filters{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .topbar .filters label{ display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
  .topbar .filters select,
  .topbar .filters input[type="date"],
  .topbar .filters button{ width: 100%; }
  /* Put reload button full width */
  #btnReload{ grid-column: 1 / -1; }
  /* Checkboxes: use full width rows for better tap targets */
  .topbar .filters label:has(input[type="checkbox"]) {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(0,0,0,0.08);
  }
  .topbar .filters .flex-spacer{ display: none; }

  /* List: tighter columns and less padding */
  /* Mobile: Einträge deutlich größer/lesbarer */
  .wp-row{ grid-template-columns: 32px 40px 1fr 110px; }
  .wp-info-col{ padding: 14px 14px; }
  .wp-ctrl-col{ padding: 12px; }
  .wp-path-row{ font-size: 16px; line-height: 1.25; }
  .wp-meta-row{ gap: 8px; font-size: 14px; }
  .wp-dir-badge{ font-size: 12px; }

  /* Footer: in Mobile immer sichtbar (fix am unteren Rand) */
  .statusbar{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: calc(4px + env(safe-area-inset-bottom));
  }
  .statusbar .footer-left{ flex-wrap: wrap; }
  .statusbar .footer-stats{ flex-wrap: wrap; }
  .statusbar .footer-stats::before{ display: none; }
  .statusbar #status{ width: 100%; }

  /* Platz für fixierten Footer schaffen */
  .layout{ padding-bottom: 72px; }

  /* Statistiken (oben): Mobile als "Tabelle" (Labels in einer Zeile, Werte darunter) */
  .stats-bar{
    display: grid;
    /* 4 Stat-Items (inkl. Verpflegung) passen in 2 Spalten besser */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: start;
    /* Optisch über die volle Breite ausmitteln */
    justify-items: center;
    text-align: center;
  }
  .stat-item{ display: flex; flex-direction: column; gap: 2px; align-items: center; }
  .stat-label{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .stat-value{ white-space: normal; }

  /* Mobile: Eintragsliste auf ca. 2 Einträge begrenzen (scrollbar bleibt aktiv) */
  #waypointsContainer{
    max-height: 240px;
  }
}

/* Blue car icon wrapper for tooltips */
.car-icon svg { width: 14px; height: 14px; fill: #93c5fd; }

/* Places modal: labels stacked and larger query input */
#placesBody label { display: flex; flex-direction: column; gap: 4px; }
#placesQuery { font-size: 15px; padding: 8px 10px; }

/* Edit modal: mini-map search (same look & feel as places modal) */
#editModal .edit-places label { display: flex; flex-direction: column; gap: 4px; }
#editModal #editPlacesQuery { font-size: 15px; padding: 8px 10px; }

/* Thin themed scrollbars for lists */
#waypointsContainer::-webkit-scrollbar,
#placesResults::-webkit-scrollbar { width: 8px; height: 8px; }
#waypointsContainer::-webkit-scrollbar-track,
#placesResults::-webkit-scrollbar-track { background: #0b1220; }
#waypointsContainer::-webkit-scrollbar-thumb,
#placesResults::-webkit-scrollbar-thumb { background: #1f2937; border-radius: 8px; border: 1px solid #111827; }
#waypointsContainer::-webkit-scrollbar-thumb:hover,
#placesResults::-webkit-scrollbar-thumb:hover { background: #374151; }

/* Tooltip icon (no badge/pill styling) */
.tip-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
}

/* Tooltip icon: align like list icon and ensure visibility */
.leaflet-tooltip .tip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  position: relative;
  top: 2px; /* better baseline alignment next to <strong> */
}
.leaflet-tooltip .tip-icon svg {
  width: 18px;
  height: 18px;
  display: block;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.55));
}
.leaflet-tooltip .tip-icon.tip-drive svg { fill: #93c5fd; }
.leaflet-tooltip .tip-icon.tip-fuel svg { fill: #22c55e; }
.leaflet-tooltip .tip-icon.tip-toll svg { fill: #f59e0b; }

/* Fuel brand badge inside tooltip: slightly larger/clearer */
.leaflet-tooltip .tip-icon .brand {
  transform: scale(1.05);
  transform-origin: center;
}

/* Tiny tooltip (replaces native title="" tooltips) */
.tiny-tooltip {
  position: fixed;
  z-index: 2500;
  max-width: 320px;
  padding: 5px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #0b1220;
  color: var(--text);
  font-size: 11px;
  line-height: 1.2;
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
  pointer-events: none;
  white-space: pre-wrap;
}

/* Edit modal helpers */
.form-subtitle { grid-column: 1 / -1; font-size: 12px; color: var(--muted); margin-top: 4px; }
.modal-actions .danger { background: #3b0d0d; border-color: #7f1d1d; color: #fecaca; }
.modal-actions .danger:hover { border-color: #ef4444; }

/* Flex spacer to push filters right */
.flex-spacer { flex: 1 1 auto; }

/* Abschreibmodus (Copying Mode) */
body.copy-mode-active .layout { grid-template-columns: 1fr; }
body.copy-mode-active .panel.right { display: none; }

.copy-mode-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--panel);
}
.copy-mode-table th, .copy-mode-table td {
  border: 1px solid var(--border);
  padding: 8px;
  text-align: left;
}
.copy-mode-table th {
  background: #121621;
  color: var(--muted);
}
.copy-mode-table td.copy-ico {
  text-align: center;
  vertical-align: middle;
  padding: 6px;
}
.copy-mode-table td.copy-ico .wp-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}
.copy-mode-table td.copy-ico .wp-type svg {
  width: 18px;
  height: 18px;
  display: block;
}
.copy-mode-table td.copy-nr{
  text-align: center;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.copy-mode-table td.copy-liters{
  font-variant-numeric: tabular-nums;
}

/* Copy-Mode: Zeilen farblich wie die normalen Einträge (zur besseren Tankstopp-Unterscheidung) */
.copy-mode-table tr.wp-fuel td { background: #0f1a12; }
.copy-mode-table tr.wp-toll td { background: rgba(245, 158, 11, 0.10); }
.copy-mode-table tr.wp-drive td { background: #121621; }

/* Copy-Mode: nur die erste sichtbare Zeile voll lesbar, Rest ausgegraut/verschwommen */
.copy-mode-table tr.cm-dimmed td{
  opacity: 0.7;
  filter: blur(1.2px);
}

/* LPG/Autogas im Copy-Mode abgeschwächt */
.copy-mode-table tr.wp-fuel.wp-fuel-lpg td { background: rgba(34, 197, 94, 0.06); }
.copy-mode-table tr.hidden-wp {
  display: none;
}

/* Copy-Mode: Meta-Spalte (generiert / Verbrauch / Erwartet) */
.copy-mode-table .cm-meta{
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1.15;
}
.copy-mode-table .cm-generated{
  font-size: 11px;
  color: rgba(148,163,184,0.85);
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.22);
  display: inline-block;
  width: fit-content;
}
.copy-mode-table .cm-label{
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(59,130,246,0.25);
  background: rgba(59,130,246,0.10);
  color: rgba(191,219,254,0.95);
  display: inline-block;
  width: fit-content;
  font-variant-numeric: tabular-nums;
}
.copy-mode-table .cm-label.cm-exp{
  border-color: rgba(34,197,94,0.26);
  background: rgba(34,197,94,0.10);
  color: rgba(167,243,208,0.95);
}
.copy-mode-table .cm-label.cm-note{
  border-color: rgba(148,163,184,0.22);
  background: rgba(148,163,184,0.10);
  color: rgba(226,232,240,0.90);
}

/* Copy-Mode: km-Summe in Klammern (nach Tankstopp) dezenter darstellen */
.copy-mode-table .cm-km-sum{
  color: var(--muted);
  font-size: 12px;
  margin-left: 4px;
  white-space: nowrap;
}
.copy-mode-table .cm-label.cm-bad{
  border-color: rgba(239,68,68,0.30);
  background: rgba(239,68,68,0.10);
  color: rgba(254,202,202,0.95);
}
.waypoints li.wp-error { border-color: #ef4444; box-shadow: 0 0 0 1px #ef4444; }
.waypoints li.wp-error .wp-meta { color: #fca5a5; }

@keyframes wpHoverFlash {
  0%   { box-shadow: 0 0 0 0 rgba(59,130,246,0), 0 0 0 0 rgba(59,130,246,0); background: rgba(59,130,246,0.00); }
  12%  { box-shadow: 0 0 0 4px rgba(59,130,246,0.40), 0 0 0 10px rgba(59,130,246,0.10); background: rgba(59,130,246,0.16); }
  28%  { box-shadow: 0 0 0 0 rgba(59,130,246,0), 0 0 0 0 rgba(59,130,246,0); background: rgba(59,130,246,0.00); }
  44%  { box-shadow: 0 0 0 4px rgba(59,130,246,0.38), 0 0 0 10px rgba(59,130,246,0.10); background: rgba(59,130,246,0.14); }
  100% { box-shadow: 0 0 0 0 rgba(59,130,246,0), 0 0 0 0 rgba(59,130,246,0); background: rgba(59,130,246,0.00); }
}

/* Marker-hover in map: briefly highlight the corresponding list entry */
.waypoints li.wp-hover-flash {
  animation: wpHoverFlash 1.35s ease-out 1;
}

/* Hash navigation target: keep a subtle blue mark for a short time (JS removes class) */
.waypoints li.wp-hash-mark{
  box-shadow: 0 0 0 3px rgba(59,130,246,0.22);
  background: rgba(59,130,246,0.10);
}
/* Only show check button in copy mode */
.waypoints [data-action="check"] { display: none; }
body.copy-mode-active .waypoints [data-action="check"] { display: inline-flex; }

.km-start.inherited, .km-end.inherited, .addr.inherited, td.km-start.inherited, td.km-end.inherited {
  color: #34d399; /* emerald-400 */
  font-style: italic;
  opacity: 0.8;
}

/* Copy addresses: only via explicit inline button to avoid accidental clicks */
.waypoints .addr{
  cursor: default;
}
.waypoints .addr strong{
  text-decoration: none;
}

/* Adresse + Kopier-Icon sollen IMMER in einer Zeile bleiben:
   - Die Adresse darf (bei Platzmangel) gekürzt werden
   - Das Kopier-Icon darf nicht in die nächste Zeile umbrechen */
.waypoints .wp-path-row .addr{
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.waypoints .wp-path-row .addr .wp-dir-badge{
  flex: 0 0 auto;
}
.waypoints .wp-path-row .addr strong{
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.waypoints .wp-path-row .addr button.addr-copy{
  flex: 0 0 auto;
  margin-left: 0;
}

/* Copy-icon button in the normal list: must NOT inherit the global primary button styling.
   Use `button.addr-copy` (higher specificity than `button:not(...)`) to override reliably. */
button.addr-copy{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  padding: 2px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  background-color: transparent;
  box-shadow: none;
  color: rgba(148,163,184,0.70);
  cursor: pointer;
  opacity: 0.85;
  -webkit-tap-highlight-color: transparent;
}
button.addr-copy .fa{
  font-size: 14px;
  line-height: 14px;
  display: block;
}
button.addr-copy:hover{
  color: rgba(226,232,240,0.95);
  opacity: 1;
  background: transparent;
  background-color: transparent;
  box-shadow: none;
}
button.addr-copy:active{
  background: transparent;
  background-color: transparent;
  box-shadow: none;
}
button.addr-copy:focus{
  outline: 2px solid rgba(59,130,246,0.55);
  outline-offset: 2px;
  background: transparent;
  background-color: transparent;
  box-shadow: none;
}
.waypoints .addr.addr-copied strong{
  background: rgba(59,130,246,0.22);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.16);
  border-radius: 4px;
}

#customDateRange {
  display: flex;
  gap: 8px;
  align-items: center;
}
#customDateRange label {
  display: flex;
  align-items: center;
  gap: 4px;
}
#customDateRange input[type="date"] {
  padding: 4px 6px;
  font-size: 13px;
}

@media (max-width: 820px){
  .statusbar { flex-wrap: wrap; }
  .legend { flex-wrap: wrap; }
}

@media (max-width: 960px){
  .layout { grid-template-columns: 1fr; }
}

/* Modal (Edit Waypoint) */
.modal { position: fixed; inset: 0; display: none; z-index: 1200; }
.modal.open { display: block; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.modal-dialog {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(640px, 92vw);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
}

/* Auth lock modal should always be on top */
#authModal{ z-index: 2500; }
#authModal input{ width: 100%; }

/* Meals modal: make content scrollable if the breakdown is long.
   Otherwise the modal can exceed viewport height and the summary table at the top becomes invisible. */
#mealsModal .modal-dialog{
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}
#mealsModal #mealsBody{
  overflow: auto;
}

/* Meals allowance breakdown modal */
.meals-summary-top{ display: flex; flex-direction: column; gap: 4px; }
.meals-summary-head{ color: rgba(226,232,240,0.92); font-weight: 650; }
.meals-summary-home{ color: rgba(148,163,184,0.88); font-size: 12px; }

.meals-summary-table{
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: #0b1220;
}
.meals-summary-table .ms-row{
  display: grid;
  grid-template-columns: 1fr 72px 72px 90px;
  gap: 8px;
  padding: 8px 10px;
  align-items: center;
  border-top: 1px solid rgba(36,41,56,0.7);
}
.meals-summary-table .ms-row:first-child{ border-top: 0; }
.meals-summary-table .ms-row.ms-head{
  background: rgba(255,255,255,0.04);
  color: rgba(148,163,184,0.92);
  font-size: 12px;
  font-weight: 650;
}
.meals-summary-table .ms-cell{ min-width: 0; }
.meals-summary-table .ms-num{ text-align: right; font-variant-numeric: tabular-nums; }

.meals-table{
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.meals-row{
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #0b1220;
  padding: 10px;
  display: grid;
  grid-template-columns: 110px 1fr 110px;
  gap: 10px;
  align-items: start;
}
.meals-row .m-date{ color: rgba(148,163,184,0.9); font-size: 12px; }
.meals-row .m-main{ display:flex; flex-direction: column; gap: 4px; }
.meals-row .m-main .m-country{ color: var(--text); font-weight: 650; }
.meals-row .m-main .m-rule{ color: var(--muted); font-size: 12px; }
.meals-row .m-amount{ text-align: right; font-weight: 750; color: var(--text); }
.meals-row .m-amount .m-rate{ display:block; color: rgba(148,163,184,0.9); font-weight: 600; font-size: 12px; margin-top: 2px; }
.meals-row .m-evidence{ grid-column: 1 / -1; color: rgba(148,163,184,0.9); font-size: 12px; line-height: 1.2; }

@media (max-width: 720px){
  .meals-summary-table .ms-row{ grid-template-columns: 1fr 62px 62px 82px; }
  .meals-row{ grid-template-columns: 90px 1fr; }
  .meals-row .m-amount{ grid-column: 2; }
}

/* Create modal: address input + "use my location" button in one row */
#createModal .create-address-label .label-title{
  display: block;
  margin-bottom: 4px;
}

/* Create modal: consistent label/input layout (avoid awkward line breaks) */
#formCreate .grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#formCreate label:not(.inline-label){ display:flex; flex-direction: column; gap: 4px; min-width: 0; }
#formCreate label.inline-label{ display:flex; flex-direction: row; align-items: center; gap: 8px; }
#formCreate input, #formCreate select{ width: 100%; min-width: 0; }
#formCreate label.inline-label input{ width: auto; }

@media (max-width: 720px){
  #formCreate .grid{ grid-template-columns: 1fr; }
}
#createModal .addr-row{
  display: flex;
  gap: 8px;
  align-items: center;
}
#createModal .addr-row input{
  flex: 1 1 auto;
  width: 100%;
}
#createModal .addr-row button{
  flex: 0 0 auto;
  width: 40px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.modal-header { display:flex; align-items:center; justify-content: space-between; padding: 12px; border-bottom: 1px solid var(--border); }
.modal-header h3 { margin: 0; font-size: 16px; }
#formEditWp { padding: 12px; }
#formEditWp .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#formEditWp label:not(.inline-label) { display: flex; flex-direction: column; gap: 4px; }
#formEditWp label.inline-label { display: flex; flex-direction: row; align-items: center; gap: 8px; }
#formEditWp label.inline-label input { width: auto; }

/* Edit-Modal: Privat/Generiert nebeneinander als eigene Zeile */
#formEditWp .modal-toggles {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}
.modal-actions { display:flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.modal-actions .danger { margin-right: auto; }

/* Larger Places modal */
#placesModal .modal-dialog { width: min(900px, 96vw); }
#placesResults { max-height: 20vh !important; overflow: auto; }

/* Places results (used in both Places modal and Edit modal): compact two-line layout with km on the right */
#placesResults li,
#editPlacesResults li { padding: 6px 8px; }

#placesResults .pl-row,
#editPlacesResults .pl-row {
  display: grid;
  grid-template-columns: 28px 26px 1fr auto;
  gap: 10px;
  align-items: center;
}
#placesResults .pl-pick,
#editPlacesResults .pl-pick {
  width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#placesResults .pl-main,
#editPlacesResults .pl-main { min-width: 0; }

#placesResults .pl-title,
#editPlacesResults .pl-title { line-height: 1.2; }

#placesResults .pl-addr,
#editPlacesResults .pl-addr {
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.2;
}

#placesResults .pl-km,
#editPlacesResults .pl-km {
  justify-self: end;
  white-space: nowrap;
}