@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #14181c;
  --card-bg: #1c2126;
  --border: #2c343b;
  --text: #f2f4f5;
  --text-muted: #a9b2b8;
  --text-dim: #7c868c;
  --accent: #3fd7c4;
  --accent2: #f2a341;
  --accent-contrast: #0b1210;
}

:root[data-theme="light"] {
  --bg: #f4f5f6;
  --card-bg: #ffffff;
  --border: #e2e5e8;
  --text: #14181c;
  --text-muted: #5b6570;
  --text-dim: #8b949c;
  --accent: #0f766e;
  --accent2: #b45309;
  --accent-contrast: #ffffff;
}

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  margin: 0;
}

/* Chrome überschreibt bei autofillverdächtigen Feldern (z.B. Namensfelder)
   Hintergrund/Textfarbe mit eigenen hellen Werten, egal was "background:"
   sagt - das riss z.B. das Namensfeld einer Reise aus dem dunklen Theme.
   Dieser Trick (riesige Übergangsdauer statt !important auf color-Props)
   ist der etablierte Weg, das zuverlässig zu unterbinden. autoComplete="off"
   an den betroffenen Feldern reduziert zusätzlich, wie oft Chrome überhaupt
   erst automatisch ausfüllen will.
   */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0px 1000px var(--card-bg) inset;
  box-shadow: 0 0 0px 1000px var(--card-bg) inset;
  transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s;
}

#page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 24px 48px;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
}

.card-tight { padding: 16px; }
.muted { color: var(--text-muted); }
.dim { color: var(--text-dim); }
.section-title { font-size: 18px; font-weight: 700; margin: 28px 0 12px; }

@keyframes pulseDot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.pulse-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  display: inline-block; animation: pulseDot 1.6s infinite; margin-right: 6px;
}

.stat-tile {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
}
.stat-tile .val { font-size: 20px; font-weight: 700; }
.stat-tile .lbl { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.link-button {
  background: transparent;
  border: none;
  color: var(--accent);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
}
.link-button:hover { color: var(--accent2); }

.profile-area { position: relative; }
.profile-button {
  width: 42px; height: 42px; padding: 0; overflow: hidden; border: 2px solid var(--border); border-radius: 50%;
  background: var(--card-bg); cursor: pointer; box-shadow: 0 2px 9px rgba(0, 0, 0, .18);
}
.profile-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.profile-button:hover { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.settings-menu {
  display: none; position: absolute; z-index: 2000; right: 0; top: 48px; width: 380px;
  max-width: calc(100vw - 32px); max-height: min(80vh, 720px); overflow-y: auto;
  padding: 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--card-bg);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .28);
}
.settings-menu-open { display: block; }
.settings-title { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
.settings-label { color: var(--text-muted); font-size: 12px; margin-bottom: 7px; }
.settings-divider { height: 1px; background: var(--border); margin: 18px 0; }
.theme-selector { display: flex; gap: 8px; }
.theme-selector label {
  flex: 1; margin: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  color: var(--text-muted); font-size: 12px; cursor: pointer; text-align: center;
}
.current-user-label { color: var(--text); font-size: 26px; font-weight: 800; letter-spacing: -0.01em; }
.logout-link {
  display: block; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
  color: var(--text-muted); font-size: 12px; text-align: center; text-decoration: none;
}
.logout-link:hover { color: #ef4444; }

/* Konto-/Nutzer-Tab */
.account-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.account-field { display: flex; flex-direction: column; }
.account-field-label { color: var(--text-muted); font-size: 12px; margin-bottom: 5px; }
/* .account-input ist die className des dcc.Input - die landet auf dem
   Wrapper-Div, den Dash um jedes Input legt, nicht auf dem <input> selbst.
   Ohne den Nachfahren-Selektor (".account-input input") bliebe das <input>
   ungestylt. display/background des Wrappers stehen weiter unten zusammen
   mit den anderen Input-Wrappern (journey-new-input & Co). */
.account-input input {
  width: 100%; box-sizing: border-box; -webkit-appearance: none; appearance: none;
  padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); font: 600 14px 'Inter', system-ui, sans-serif;
}
.account-input input:focus { outline: none; border-color: var(--accent); }
.account-status { margin-top: 10px; font-size: 13px; font-weight: 600; }
.account-status-ok { color: var(--accent); }
.account-status-error { color: #ef4444; }
.user-row { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; }
.theme-selector label:has(input:checked) { border-color: var(--accent); color: var(--text); }
.theme-selector input { margin-right: 5px; accent-color: var(--accent); }

/* dcc.Tabs Overrides - modernes Segment-/Pill-Design statt Unterstrich-Tabs */
.app-tabs .tab-container {
  border-bottom: none;
  display: flex; flex-wrap: wrap; gap: 4px;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 14px; padding: 5px;
}
.app-tabs .tab {
  background: transparent !important;
  border: none !important;
  border-radius: 10px !important;
  color: var(--text-muted) !important;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 18px !important;
  margin-right: 0;
  transition: color .15s ease, background-color .15s ease;
}
.app-tabs .tab:hover { color: var(--text) !important; }
.app-tabs .tab--selected {
  color: var(--accent-contrast) !important;
  background: var(--accent) !important;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 35%, transparent) !important;
}

/* Dash 4 rendert die Tab-Auswahl über ARIA. Damit bleibt die aktive Seite
   auch dann klar erkennbar, wenn sich die internen Dash-Klassennamen ändern. */
.app-tabs [role="tab"] {
  background: transparent !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: var(--text-muted) !important;
  font: 600 14px 'Inter', system-ui, sans-serif !important;
  padding: 9px 18px !important;
  margin-right: 0;
  transition: color .15s ease, background-color .15s ease;
}
.app-tabs [role="tab"]:hover { color: var(--text) !important; }
.app-tabs [role="tab"][aria-selected="true"] {
  color: var(--accent-contrast) !important;
  background: var(--accent) !important;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 35%, transparent) !important;
}

/* Aktuelle Dash-Version: Tabs haben keine ARIA-Rolle, sondern diese Klasse. */
#tabs .tab--selected {
  color: var(--accent-contrast) !important;
  background: var(--accent) !important;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 35%, transparent) !important;
}

/* Leaflet-Container an Karten-Optik anpassen */
.leaflet-container {
  border-radius: 12px;
  font-family: 'Inter', system-ui, sans-serif;
}
.map-wrapper { position: relative; }
.recenter-map-button {
  position: absolute; z-index: 1000; bottom: 42px; left: 50%; transform: translateX(-50%);
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
  background: var(--card-bg); color: var(--text); box-shadow: 0 2px 7px rgba(0, 0, 0, .22);
  font: 600 12px 'Inter', system-ui, sans-serif; cursor: pointer;
}
.recenter-map-button:hover { border-color: var(--accent); color: var(--accent); }

/* Leaflets Standard-Maßstab erhält dieselbe Lesbarkeit wie die Karten-Controls. */
.leaflet-bottom.leaflet-left .leaflet-control-scale {
  margin: 0 0 12px 14px;
}
.leaflet-control-scale-line {
  position: relative;
  min-width: 82px;
  padding: 4px 8px 12px;
  border: 1px solid #111 !important;
  border-radius: 3px;
  background: rgba(255, 255, 255, .94) !important;
  color: #111 !important;
  font: 800 12px/1.1 'Inter', system-ui, sans-serif;
  letter-spacing: .02em;
  text-align: center;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .28);
}
.leaflet-control-scale-line::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 7px;
  border-top: 1px solid #111;
  border-radius: 0 0 2px 2px;
  background: repeating-linear-gradient(90deg, #111 0 25%, #fff 25% 50%);
  content: "";
}

/* dcc.RadioItems als Segmented-Control (Rückblick-Zeitraum) */
.segmented label {
  display: inline-block;
  margin-right: 8px;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
}
.segmented input { display: none; }
.segmented label:has(input:checked) {
  border-color: var(--accent);
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 14%, var(--card-bg));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
}

/* -------------------------------------------------------------------------
   Dashboard-Layout: mobile-first, klare visuelle Hierarchie
   ------------------------------------------------------------------------- */
.dashboard-header {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  margin: 12px 0 26px;
}
.eyebrow, .card-kicker, .status-label {
  color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .13em;
}
.page-title { margin-top: 6px; font-size: clamp(30px, 4vw, 42px); font-weight: 800; letter-spacing: -.045em; }
.page-subtitle { margin-top: 7px; color: var(--text-muted); font-size: 14px; }
.data-status {
  min-width: 225px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px;
  background: color-mix(in srgb, var(--card-bg) 76%, transparent);
}
.status-value { margin-top: 5px; color: var(--text-muted); font-size: 12px; line-height: 1.35; }

.overview-top-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px; align-items: stretch; margin-top: 28px;
}
.battery-hero, .vehicle-card, .charge-card { min-height: 392px; }
/* Batterie-/Fahrzeugkarte hängen in Wrapper-Divs (Ziel der Live-Callbacks).
   Ohne diese Regel bleiben die Karten auf ihrer Inhaltshöhe stehen, statt die
   gestreckte Grid-Zelle zu füllen - die Spalten wirken dann ungleich hoch. */
#battery-hero-live, #vehicle-profile-live { display: flex; min-width: 0; }
#battery-hero-live > .card, #vehicle-profile-live > .card { flex: 1; min-width: 0; }
.battery-hero {
  display: flex;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 11%, var(--card-bg)), var(--card-bg) 62%);
}
.battery-hero-content { display: flex; flex: 1; min-height: 0; align-items: center; justify-content: center; gap: 20px; }
.battery-ring-wrap { display: flex; align-items: center; justify-content: center; }
.battery-summary { display: flex; min-width: 130px; flex-direction: column; align-items: flex-start; gap: 4px; }
.battery-range { font-size: 31px; font-weight: 800; letter-spacing: -.045em; }
.battery-range-label { color: var(--text-muted); font-size: 12px; }
.charge-status {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--text-muted); font-size: 12px;
  padding: 6px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 9%, transparent);
  /* Die Pillenform verträgt keinen Zeilenumbruch - der Text bleibt einzeilig,
     Detailwerte stehen in .charge-detail darunter. */
  max-width: 100%; white-space: nowrap;
}
.charge-detail { margin-top: 6px; color: var(--text-muted); font-size: 12px; font-weight: 600; }
/* Vierer-Kachelreihen (Rückblick, Ladevorgänge). Bewusst als Klasse statt als
   Inline-Style: nur so lassen sich die Spalten schmaleren Viewports anpassen.
   minmax(0, 1fr) verhindert, dass lange Werte die Spalten aufblähen. */
.stats-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
/* Variante für Reihen, deren Kachelzahl variiert (4 oder 5): auto-fit legt die
   Spalten selbst fest, statt eine feste Spaltenzahl mit Lücken zu erzwingen. */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 12px; }
.charge-status-active {
  color: var(--text); background: color-mix(in srgb, var(--accent) 18%, var(--card-bg));
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
}
.charging-bolt {
  color: #facc15; font-size: 16px; line-height: 1; font-weight: 800;
  filter: drop-shadow(0 0 6px rgba(250, 204, 21, .72)); animation: chargingBolt 1.05s ease-in-out infinite;
}
.charge-status:not(.charge-status-active) .charging-bolt { display: none; }
@keyframes chargingBolt { 50% { transform: scale(1.2); opacity: .48; } }
.pulse-dot { margin-right: 0; }
.charge-events-list { display: grid; gap: 12px; }
.charge-event {
  border: 1px solid var(--border); border-radius: 12px; padding: 12px;
  background: color-mix(in srgb, var(--accent) 5%, var(--card-bg));
}
.vehicle-card { display: flex; }
.vehicle-card-content { display: flex; flex: 1; height: auto; min-height: 0; flex-direction: column; justify-content: center; }
.vehicle-profile-content { position: relative; align-items: center; justify-content: center; overflow: hidden; text-align: center; }
.sentry-mode-indicator { position: absolute; z-index: 2; top: 18px; right: 18px; display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: color-mix(in srgb, #ef4444 18%, var(--card-bg)); border: 1px solid color-mix(in srgb, #ef4444 70%, var(--border)); box-shadow: 0 0 0 4px color-mix(in srgb, #ef4444 10%, transparent); }
.sentry-mode-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 9px rgba(239, 68, 68, .95); animation: sentry-pulse 1.8s ease-in-out infinite; }
@keyframes sentry-pulse { 50% { transform: scale(.72); opacity: .55; } }
.vehicle-name { margin-top: 7px; font-size: 25px; font-weight: 800; letter-spacing: -.04em; }
.vehicle-model { margin-top: 2px; color: var(--text-muted); font-size: 12px; font-weight: 600; }
.vehicle-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.vehicle-chip { padding: 3px 7px; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in srgb, var(--card-bg) 82%, transparent); color: var(--text-muted); font-size: 10px; font-weight: 650; }
.vehicle-profile-image { position: relative; width: min(100%, 325px); height: 158px; margin: 12px 0 14px; object-fit: contain; object-position: center; pointer-events: none; }
.vehicle-profile-content .vehicle-meta-row { position: relative; z-index: 1; width: 100%; justify-content: center; gap: 11px; margin-top: 0; }
.vehicle-label { margin-top: 22px; color: var(--text-muted); font-size: 13px; }
.odometer-value { margin-top: 3px; font-size: clamp(30px, 3vw, 40px); font-weight: 800; letter-spacing: -.055em; }
.vehicle-unit { color: var(--text-muted); font-size: 15px; font-weight: 600; letter-spacing: 0; }
.vehicle-meta-row { display: flex; justify-content: space-between; margin-top: 29px; padding-top: 13px; border-top: 1px solid var(--border); }
.vehicle-meta-label { color: var(--text-muted); font-size: 12px; }
.vehicle-meta-value { font-size: 14px; font-weight: 700; }
.charge-card { padding-bottom: 6px; text-align: center; }
.chart-title { margin-top: 7px; font-size: 18px; font-weight: 750; letter-spacing: -.02em; }
.chart-subtitle { margin-top: 2px; color: var(--text-muted); font-size: 12px; }
.charge-card .dash-graph { margin-top: 2px; }
.detail-charts .dash-graph { min-height: 360px; }
.detail-chart-card { min-height: 428px; }

.overview-summary-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 16px;
  overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: var(--border);
  /* Plotly kann seinen SVG-Canvas minimal über die Card hinaus rendern. */
  margin-top: 44px;
}
.navigation-card {
  margin-bottom: 16px; border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  background: linear-gradient(105deg, color-mix(in srgb, var(--accent) 10%, var(--card-bg)), var(--card-bg) 60%);
}
.navigation-card-content { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.navigation-destination { max-width: 360px; margin-top: 6px; font-size: 23px; font-weight: 800; letter-spacing: -.035em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navigation-metrics { display: grid; min-width: min(540px, 56%); grid-template-columns: repeat(4, 1fr); border-left: 1px solid var(--border); }
.navigation-metrics .overview-metric { padding: 4px 12px; background: transparent; }
.overview-metric { min-width: 0; padding: 15px 17px; background: var(--card-bg); }
.overview-metric-value { overflow: hidden; font-size: 19px; font-weight: 750; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }
.overview-metric-label { margin-top: 3px; color: var(--text-muted); font-size: 11px; line-height: 1.25; }
.overview-metric-note { margin-top: 5px; color: var(--text-dim); font-size: 10px; }

/* Supercharger Finder */
.finder-controls-grid { display: grid; grid-template-columns: 1fr 1.15fr 1.35fr; gap: 12px; }
.finder-controls-card { min-height: 92px; padding: 16px 18px; }
.finder-radius-value { margin-top: 5px; font-size: 28px; font-weight: 800; letter-spacing: -.04em; }
.finder-slider { margin: 12px 8px 0 4px; }
.finder-slider .rc-slider-rail { background: color-mix(in srgb, var(--text-muted) 28%, transparent) !important; }
.finder-slider .rc-slider-track { background: var(--accent) !important; }
.finder-slider .rc-slider-handle {
  width: 18px; height: 18px; margin-top: -7px; border: 3px solid var(--accent) !important;
  background: var(--card-bg) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent) !important;
  opacity: 1;
}
.finder-slider .rc-slider-handle:hover,
.finder-slider .rc-slider-handle:focus { border-color: var(--accent2) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent2) 20%, transparent); }
.finder-slider .rc-slider-dot { border-color: color-mix(in srgb, var(--text-muted) 52%, transparent); background: var(--card-bg); }
.finder-slider .rc-slider-dot-active { border-color: var(--accent); }
.finder-slider .rc-slider-mark-text { color: var(--text-muted); font-size: 11px; }

/* Dash 4 nutzt den Radix-Slider (nicht mehr die alte rc-slider-Komponente).
   Die gesamte Skala wird bewusst neutral-weiß gehalten, damit kein violetter
   Standardverlauf und keine schlecht lesbaren Markierungen durchscheinen. */
#finder-radius .dash-slider-track { background-color: #68737b !important; }
#finder-radius .dash-slider-range { background-color: #ffffff !important; }
#finder-radius .dash-slider-thumb {
  border: 3px solid #ffffff !important;
  background-color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .18) !important;
}
#finder-radius .dash-slider-mark,
#finder-radius .dash-slider-mark-outside-selection {
  color: #ffffff !important;
  opacity: 1 !important;
  font-weight: 700;
}
.finder-segmented { margin-top: 13px; }
.finder-cache-note { margin-top: 8px; color: var(--text); font-size: 12px; line-height: 1.45; }
.finder-source-status { margin-top: 6px; color: var(--accent); font-size: 11px; font-weight: 650; }
.finder-point-label { color: var(--text); font-size: 12px; font-variant-numeric: tabular-nums; }
.finder-map-actions { display: flex; align-items: center; gap: 10px; }
.finder-refresh-button {
  border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; background: var(--card-bg);
  color: var(--text); font: 700 11px 'Inter', system-ui, sans-serif; cursor: pointer;
}
.finder-refresh-button:hover { border-color: var(--accent); color: var(--accent); }
.finder-results { min-height: 112px; }
.finder-results { display: grid; gap: 10px; }
.finder-result-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--card-bg); }
.finder-station-name { font-size: 16px; font-weight: 750; }
.finder-station-meta, .finder-price-meta { margin-top: 4px; color: var(--text-muted); font-size: 12px; font-weight: 500; }
.finder-price-area { min-width: 154px; text-align: right; }
.finder-price { font-size: 20px; font-weight: 800; letter-spacing: -.03em; }
.finder-badge, .finder-delta { display: inline-block; margin-top: 8px; padding: 3px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; }
.finder-badge { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.finder-delta { color: var(--text-muted); background: color-mix(in srgb, var(--text-muted) 14%, transparent); }
.finder-empty { padding: 18px; }

.section-title { display: flex; align-items: center; font-size: 20px; letter-spacing: -.02em; margin: 34px 0 12px; }
.location-card { padding: 14px; }
.map-wrapper { position: relative; }
.map-card-header { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 13px; }
.map-title { margin-top: 3px; font-size: 17px; font-weight: 750; letter-spacing: -.02em; }
.map-style-selector { display: flex; overflow: hidden; border: 1px solid var(--border); border-radius: 9px; }
.map-style-selector label { margin: 0; padding: 6px 9px; color: var(--text-muted); font-size: 11px; cursor: pointer; }
.map-style-selector label + label { border-left: 1px solid var(--border); }
.map-style-selector input { display: none; }
.map-style-selector label:has(input:checked) { background: var(--accent); color: #10211f; font-weight: 750; }
.recenter-map-button {
  bottom: 12px; padding: 9px 13px; border-color: rgba(255, 255, 255, .24);
  background: rgba(12, 15, 18, .9); backdrop-filter: blur(8px); color: #fff;
}

.trips-list { display: flex; flex-direction: column; gap: 10px; }
.trip-card { padding: 0; overflow: hidden; border-radius: 16px; border: 1px solid var(--border); background: var(--card-bg); }
.trip-row { display: grid; grid-template-columns: minmax(175px, 1.35fr) minmax(280px, 1.7fr) auto; align-items: center; gap: 18px; padding: 17px 18px; }
.trip-route { font-size: 15px; font-weight: 750; letter-spacing: -.015em; }
.trip-date { margin-top: 5px; color: var(--text-muted); font-size: 12px; }
.trip-metrics { display: grid; grid-template-columns: repeat(4, 1fr); border-left: 1px solid var(--border); }
.trip-metrics .overview-metric { padding: 3px 12px; background: transparent; }
.trip-metrics .overview-metric-value { font-size: 15px; }
.trip-details-btn {
  padding: 9px 13px; border: 1px solid var(--accent); border-radius: 9px; background: transparent;
  color: var(--accent); font: 700 12px 'Inter', system-ui, sans-serif; cursor: pointer;
}
.trip-details-btn:hover { background: var(--accent); color: #10211f; }
.charge-curve-toggle-btn {
  padding: 7px 12px; border: 1px solid var(--border); border-radius: 8px; background: transparent;
  color: var(--text-muted); font: 700 12px 'Inter', system-ui, sans-serif; cursor: pointer;
}
.charge-curve-toggle-btn:hover { border-color: var(--accent); color: var(--accent); }

/* dcc.Input rendert hier einen Wrapper-Div um das eigentliche <input>; die
   übergebene className landet auf diesem Wrapper. Layout (Breite, flex) gehört
   deshalb auf die Klasse selbst, das Aussehen auf das innere Feld - sonst
   kollabiert das Feld auf schmalen Viewports auf wenige Pixel. */
/* Dashs eigenes Standard-CSS gibt diesem Wrapper-Div einen WEISSEN
   Hintergrund (fürs helle Default-Theme gedacht). Bei Feldern mit
   blickdichtem Eigenhintergrund (Datum, Preis) verdeckt das <input> darüber
   das komplett - beim Namensfeld ist der Hintergrund aber bewusst
   transparent (wirkt wie ein Titel statt ein Kasten), wodurch das Weiß
   durchschien. transparent auf dem Wrapper selbst behebt das an der Wurzel. */
.journey-new-input, .journey-name-input, .journey-date-input, .charge-price-input, .account-input {
  display: block; background: transparent;
}
.journey-new-input input, .journey-name-input input,
.journey-date-input input, .charge-price-input input {
  width: 100%; box-sizing: border-box;
  /* Ohne das rendert der Browser unter einem transparenten/eigenen
     "background:" trotzdem noch seine native Eingabefeld-Optik (helle
     Platte durchscheinend) - betraf sichtbar das Reisen-Namensfeld, das als
     einziges bewusst transparent statt mit var(--bg) gefüllt ist. */
  -webkit-appearance: none; appearance: none;
}

/* Reisen */
.journey-create-row { display: flex; gap: 10px; align-items: center; }
.journey-new-input { flex: 1; min-width: 0; }
.journey-new-input input {
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg); color: var(--text); font: 600 14px 'Inter', system-ui, sans-serif;
}
.journey-new-input input:focus { outline: none; border-color: var(--accent); }
.journey-create-btn {
  flex: 0 0 auto; padding: 10px 16px; border: 1px solid var(--accent); border-radius: 10px;
  background: var(--accent); color: #10211f; font: 750 13px 'Inter', system-ui, sans-serif; cursor: pointer;
}
.journey-create-btn:hover { filter: brightness(1.08); }
.journey-card { padding: 16px 18px; }
.journey-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.journey-title-row { display: flex; align-items: center; gap: 9px; min-width: 0; }
.journey-name-input { min-width: 0; width: 260px; max-width: 100%; }
.journey-name-input input {
  padding: 5px 8px; border: 1px solid transparent;
  border-radius: 8px; background: transparent; color: var(--text);
  font: 750 16px 'Inter', system-ui, sans-serif; letter-spacing: -.015em;
}
.journey-name-input input:hover { border-color: var(--border); }
.journey-name-input input:focus { outline: none; border-color: var(--accent); background: var(--bg); }
.journey-active-badge {
  flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
}
.journey-dates { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.journey-date-label { color: var(--text-muted); font-size: 11px; }
/* Genug Platz für "25.07.2026, 08:00" samt Kalender-Icon - sonst schneidet
   der Browser die Uhrzeit ab und das Feld wirkt kaputt. */
.journey-date-input { flex: 0 0 auto; width: 195px; max-width: 100%; }
.journey-date-input input {
  padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); font: 600 12px 'Inter', system-ui, sans-serif;
}
.journey-date-input input:focus { outline: none; border-color: var(--accent); }
.journey-metrics {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
}
.journey-metrics .overview-metric { padding: 6px 12px; background: transparent; }
.journey-metrics .overview-metric-value { font-size: 15px; }
.journey-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.journey-end-btn, .journey-delete-btn {
  padding: 7px 12px; border-radius: 8px; background: transparent;
  font: 700 12px 'Inter', system-ui, sans-serif; cursor: pointer;
}
.journey-end-btn { border: 1px solid var(--accent); color: var(--accent); }
.journey-end-btn:hover { background: var(--accent); color: #10211f; }
.journey-delete-btn { border: 1px solid var(--border); color: var(--text-muted); }
.journey-delete-btn:hover { border-color: #ef4444; color: #ef4444; }

/* Die Kachelzahl schwankt: der 10→80%-Benchmark kommt nur bei passenden
   Sessions dazu. auto-fit verteilt 4 oder 5 Kacheln gleichmäßig, statt bei
   festen vier Spalten eine einzelne in die nächste Zeile zu drücken. */
.charge-metrics { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }

.charge-price-block { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 108px; }
.charge-price-row { display: flex; align-items: center; gap: 6px; }
.charge-price-input { width: 74px; }
.charge-price-input input {
  padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); font: 700 13px 'Inter', system-ui, sans-serif; text-align: right;
}
.charge-price-input input:focus { outline: none; border-color: var(--accent); }
.charge-price-unit { color: var(--text-muted); font-size: 12px; }
.charge-price-note { color: var(--text-muted); font-size: 11px; }
.charge-cost-display { font-size: 15px; font-weight: 750; letter-spacing: -.01em; }

/* Die laufzeitgenerierten Plotly-Container sollen nie unerklärlich schrumpfen. */
.dash-graph { min-width: 0; }
.health-empty { display: flex; min-height: 150px; flex-direction: column; align-items: center; justify-content: center; padding: 10px; text-align: center; }
.health-empty-value { color: var(--accent2); font-size: 54px; font-weight: 800; line-height: .9; }
.health-empty-title { margin-top: 12px; font-size: 15px; font-weight: 700; }
.health-empty-copy { max-width: 420px; margin-top: 6px; color: var(--text-muted); font-size: 12px; line-height: 1.55; }
.history-empty { min-height: 170px; padding: 24px; }
.info-box {
  display: flex; gap: 12px; max-width: 720px; margin-top: 16px; padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border)); border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 8%, var(--card-bg));
}
.info-box-icon { flex: 0 0 auto; font-size: 15px; line-height: 1.5; }
.info-box-title { font-size: 13px; font-weight: 750; letter-spacing: -.01em; }
.info-box-copy { margin-top: 4px; color: var(--text-muted); font-size: 12px; line-height: 1.6; }

@media (max-width: 940px) {
  #page { max-width: 760px; }
  .overview-top-grid { grid-template-columns: 1fr 1fr; }
  .charge-card { grid-column: 1 / -1; min-height: 300px; }
  /* Zweispaltig sind die Karten deutlich schmaler - die auf die Dreispalten-
     Ansicht ausgelegte Mindesthöhe erzeugt hier nur noch Leerraum. */
  .battery-hero, .vehicle-card { min-height: 0; }
  .battery-hero-content { min-height: 232px; padding: 6px 0; }
  .trip-row { grid-template-columns: 1fr auto; }
  .trip-metrics { grid-column: 1 / -1; border-top: 1px solid var(--border); border-left: 0; padding-top: 12px; }
}

@media (max-width: 640px) {
  #page { padding: 20px 14px 36px; }
  .profile-button { width: 42px; height: 42px; }
  /* dcc.Tabs stellt sich auf schmalen Viewports selbst auf flex-direction:
     column um - die Reiter stapeln dann untereinander statt seitlich zu
     scrollen. Zeile erzwingen und stattdessen horizontal scrollbar machen. */
  .app-tabs { flex-direction: row !important; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .app-tabs::-webkit-scrollbar { display: none; }
  .app-tabs .tab, .app-tabs [role="tab"] {
    flex: 0 0 auto; width: auto !important; margin-right: 0; font-size: 13px !important;
    white-space: nowrap;
  }
  .card { padding: 16px; border-radius: 14px; }
  .location-card { padding: 10px; }
  .account-form { grid-template-columns: 1fr; }
  .dashboard-header { align-items: flex-start; flex-direction: column; margin-bottom: 20px; }
  .data-status { min-width: 0; width: calc(100% - 30px); }
  .overview-top-grid, .overview-summary-grid { grid-template-columns: 1fr; }
  .overview-top-grid { margin-top: 20px; }
  .navigation-card-content { align-items: flex-start; flex-direction: column; gap: 16px; }
  .navigation-destination { max-width: min(100%, 360px); font-size: 21px; }
  .navigation-metrics { width: 100%; min-width: 0; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--border); border-left: 0; padding-top: 12px; }
  .battery-hero-content { min-height: 210px; }
  .vehicle-card, .charge-card, .battery-hero { min-height: auto; }
  .charge-card { grid-column: auto; }
  .dashboard-chart { min-height: 330px; }
  .detail-charts .dash-graph { min-height: 330px; }
  .detail-chart-card { min-height: 390px; }
  .overview-summary-grid { gap: 1px; }
  .map-card-header { align-items: flex-start; gap: 8px; flex-direction: column; }
  .trip-row { grid-template-columns: 1fr; gap: 14px; }
  .trip-metrics { grid-template-columns: 1fr 1fr; }
  .journey-metrics { grid-template-columns: 1fr 1fr; }
  /* stretch statt flex-start: Sonst schrumpfen die Zeilen auf Inhaltsbreite,
     während die Felder darin 100% davon beanspruchen - das Namensfeld
     kollabiert dadurch auf wenige Pixel. */
  .journey-head { flex-direction: column; align-items: stretch; }
  .journey-title-row { width: 100%; }
  .journey-name-input { width: 100%; }
  .journey-dates { width: 100%; }
  .journey-date-input { flex: 1 1 auto; width: auto; min-width: 160px; }
  .journey-create-row { flex-direction: column; align-items: stretch; }
  .trip-details-btn { width: 100%; }
  .section-title { margin-top: 27px; }
  .live-trip-stats, .detail-stats-grid { grid-template-columns: 1fr 1fr !important; }
  .stats-grid-4, .stats-grid { grid-template-columns: 1fr 1fr; }
  .detail-charts { grid-template-columns: 1fr !important; }
  .detail-bottom-row, .battery-health-summary { flex-direction: column; }
  .detail-bottom-row > .card, .battery-health-summary > .card { width: auto !important; }
  .finder-controls-grid { grid-template-columns: 1fr; }
  .finder-result-row { align-items: flex-start; flex-direction: column; gap: 10px; padding: 14px; }
  .finder-price-area { min-width: 0; text-align: left; }
  .finder-map-actions { width: 100%; justify-content: space-between; }
  .leaflet-container { touch-action: pan-x pan-y; }
}

@media (max-width: 430px) {
  .battery-hero-content { flex-direction: column; gap: 10px; transform: none; }
  .battery-summary { min-width: 0; align-items: center; text-align: center; }
  .battery-hero-content { padding: 8px 0; }
  .vehicle-profile-image { width: 118%; opacity: .62; }
  .overview-metric { padding: 13px 14px; }
  .finder-map-actions { align-items: flex-start; flex-direction: column; }
}