:root {
  --bg-deep: #0a1628;
  --bg-mid: #122236;
  --bg-light: #1a3148;
  --accent: #59bdec;
  --accent-glow: #59bdec66;
  --warning: #ff6b3d;
  --success: #00ff88;
  --danger: #ff3d5e;
  --text: #e8f0f8;
  --text-dim: #7a8fa8;
  --border: #1f3a55;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: var(--bg-deep);
  color: var(--text);
  font-family: 'Space Grotesk', sans-serif;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

#app {
  display: grid;
  grid-template-columns: 380px 1fr;
  height: 100vh;
  width: 100vw;
}
@supports (height: 100dvh) {
  #app { height: 100dvh; }
}

/* Vollbild-Modus für die Karte: Sidebar ausblenden, Karte auf 1-Spalten-Grid */
#app.map-fullscreen {
  grid-template-columns: 1fr;
}
#app.map-fullscreen .panel {
  display: none;
}

/* Vollbild-Toggle-Button als Leaflet-Control (oben links bei Layer-Switcher) */
.leaflet-control-fullscreen {
  width: 40px !important;
  height: 40px !important;
  background: rgba(10, 22, 40, 0.85) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--accent) !important;
  cursor: pointer;
  user-select: none;
  text-decoration: none !important;
}
.leaflet-control-fullscreen:hover {
  background: rgba(10, 22, 40, 0.85) !important;
  color: white !important;
}

/* ---------- LEFT PANEL ---------- */
.panel {
  background: linear-gradient(180deg, var(--bg-mid) 0%, var(--bg-deep) 100%);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Scrollbar visuell ausblenden — Scrollen via Wheel/Touch reicht */
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* alte IE/Edge */
}
.panel::-webkit-scrollbar { display: none; }  /* Chromium / Safari */

.brand {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 4px;
}

h1 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--success) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section {
  background: rgba(255,255,255,0.02);
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 18px;
}

.section-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-title::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--accent-glow);
}

.section-title.live::before {
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.5); }
}

/* Wind Display */
.wind-display {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 14px;
  align-items: center;
}

.compass {
  width: 80px;
  height: 80px;
  position: relative;
  border: 2px solid var(--border);
  border-radius: 50%;
  background: radial-gradient(circle, var(--bg-light) 0%, var(--bg-deep) 100%);
  transition: transform 0.4s ease-out;
}

.compass::before, .compass::after {
  content: '';
  position: absolute;
  background: var(--text-dim);
}

.compass::before {
  width: 1px;
  height: 100%;
  left: 50%;
  top: 0;
}

.compass::after {
  width: 100%;
  height: 1px;
  top: 50%;
  left: 0;
}

.compass-label {
  position: absolute;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--text-dim);
  font-weight: 600;
  letter-spacing: 0.5px;
}
.compass-n {
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  color: #00ff88;  /* N hervorgehoben — Norden ist Referenz */
}
.compass-e { top: 50%; right: 3px; transform: translateY(-50%); }
.compass-s { bottom: 2px; left: 50%; transform: translateX(-50%); }
.compass-w { top: 50%; left: 3px; transform: translateY(-50%); }

.wind-arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 32px;
  background: linear-gradient(180deg, var(--accent) 0%, transparent 100%);
  transform-origin: top center;
  border-radius: 2px;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wind-arrow::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 10px solid var(--accent);
  filter: drop-shadow(0 0 6px var(--accent-glow));
}

.wind-stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wind-speed {
  font-family: 'JetBrains Mono', monospace;
  font-size: 28px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}

.wind-speed-unit {
  font-size: 12px;
  color: var(--text-dim);
  margin-left: 4px;
}

.wind-direction {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: var(--text);
}

.wind-meta {
  font-size: 11px;
  color: var(--text-dim);
}

/* GPS / Target */
.coord-row {
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 6px;
  padding: 3px 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  white-space: nowrap;
}
.coord-row > .coord-label ~ .coord-label {
  margin-left: 14px;
}

.coord-label {
  color: var(--text-dim);
  font-size: 10px;
  letter-spacing: 1px;
}

.coord-value {
  color: var(--text);
}

/* Target Input */
.target-input {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

.input-field {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  outline: none;
  transition: border-color 0.2s;
}

.input-field:focus {
  border-color: var(--accent);
}

.btn {
  background: linear-gradient(135deg, var(--accent) 0%, var(--success) 100%);
  color: var(--bg-deep);
  border: none;
  border-radius: 6px;
  /* Einheitliche Höhe — orientiert an .btn-route-calc (8px 12px / 12px font).
     !important überschreibt diverse inline padding-Overrides der einzelnen
     Buttons. .btn-pick (Start/Ziel/Points) hat eigene Override-Regel weiter
     unten und bleibt davon ausgenommen (etwas größer). */
  padding: 8px 12px !important;
  font-weight: 600;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px !important;
  letter-spacing: 0.5px;
  cursor: pointer;
  text-transform: uppercase;
  transition: transform 0.15s;
  width: 100%;
  margin-top: 8px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled {
  opacity: 0.7;
  cursor: progress;
  pointer-events: none;
  transform: none !important;
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}

/* Primärer Action-Button für "Route berechnen" — knalliger Orange-Verlauf,
   hebt sich von den anderen Buttons (cyan→grün) ab. */
.btn-primary-action {
  background: linear-gradient(135deg, #ff8a3d 0%, #ff6b3d 100%) !important;
  color: #0a1628 !important;
  border: none;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  box-shadow: 0 0 16px rgba(255,138,61,0.35);
  text-transform: uppercase;
}
.btn-primary-action:hover {
  box-shadow: 0 0 24px rgba(255,138,61,0.55);
}

/* Track-Aufzeichnung-Button: Look wie Status-Banner oben (zarter Hintergrund + Border + farbiger Text).
   Inaktiv = rot, aktiv = grün. */
.btn-track-state {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  text-align: center;
  font-weight: 600;
  border: 1px solid;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
  margin-top: 0;
  text-transform: none;
  letter-spacing: 0;
  font-family: 'Space Grotesk', sans-serif;
}
.btn-track-state.off {
  /* Aus = solid rot, signalisiert „klick mich zum Starten" als Action-Trigger */
  background: #ff3d5e;
  border-color: #d12846;
  color: #ffffff;
}
.btn-track-state.on {
  /* An = nur rote Outline (transparent), zeigt Status ohne aufdringlich
     den ganzen Button auszufüllen. Plus dezenter pulsierender Background. */
  background: rgba(255, 61, 94, 0.10);
  border-color: var(--danger);
  color: var(--danger);
}
.btn-track-state:hover { filter: brightness(1.1); }

/* Route-berechnen-Button: gleicher Status-Banner-Look wie Aufzeichnung.
   Idle = roter Rahmen, transparenter Hintergrund.
   Running (während Berechnung) = volles Rot mit weißem Text. */
.btn-route-calc {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  text-align: center;
  font-weight: 600;
  border: 1px solid;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
  margin-top: 8px;
  text-transform: none;
  letter-spacing: 0;
  font-family: 'Space Grotesk', sans-serif;
}
.btn-route-calc.idle,
.btn-route-calc.active {
  /* Idle und Active (Route gerendert) sehen gleich aus — flächig blau. Active
     bleibt klickbar als Re-Calc-Trigger. */
  background: #2773ba;
  border-color: #1f5e9a;
  color: #ffffff;
}
/* Während laufender Berechnung: Outline-Look, transparenter Hintergrund. */
.btn-route-calc.running {
  background: rgba(39, 115, 186, 0.10);
  border-color: #2773ba;
  color: #59bdec;
}
.btn-route-calc:hover { filter: brightness(1.1); }
.btn-route-calc:disabled { cursor: progress; opacity: 1; }

/* Generischer weißer Rahmen-Button — für „Leeren", „Route als PDF" etc. */
.btn-outline-white {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.65) !important;
  color: rgba(255, 255, 255, 0.85) !important;
}
.btn-outline-white:hover {
  filter: brightness(1.15);
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Generischer oranger Rahmen-Button — für „Route speichern" etc. */
.btn-outline-orange {
  background: rgba(255, 107, 61, 0.15) !important;
  border: 1px solid var(--warning) !important;
  color: var(--warning) !important;
}
.btn-outline-orange:hover {
  filter: brightness(1.1);
  background: rgba(255, 107, 61, 0.22) !important;
}

/* Grüner Rahmen-Button — für „Verwenden", positive Aktionen */
.btn-outline-green {
  background: rgba(0, 255, 136, 0.10) !important;
  border: 1px solid #00ff88 !important;
  color: #00ff88 !important;
}
.btn-outline-green:hover {
  filter: brightness(1.15);
  background: rgba(0, 255, 136, 0.18) !important;
}

/* Roter Rahmen-Button — für „Löschen" und destruktive Aktionen */
.btn-outline-red {
  background: rgba(255, 61, 94, 0.10) !important;
  border: 1px solid #ff3d5e !important;
  color: #ff3d5e !important;
}
.btn-outline-red:hover {
  filter: brightness(1.1);
  background: rgba(255, 61, 94, 0.18) !important;
}

/* Solider Marine-Blau Button — für Speichern und andere Plan-Aktionen
   die zur Pick-Button-/Route-berechnen-Familie gehören. */
.btn-blue {
  background: #2773ba !important;
  color: #ffffff !important;
  border: 1px solid #1f5e9a !important;
}
.btn-blue:hover {
  filter: brightness(1.1);
  background: #2e83cf !important;
}

/* Marine-Blauer Outline-Button — transparent mit blauer Border und blauem Text.
   Für sekundäre Aktionen die thematisch zur Route-/Plan-Familie gehören. */
.btn-outline-blue {
  background: rgba(39, 115, 186, 0.10) !important;
  border: 1px solid #2773ba !important;
  color: #59bdec !important;
}
.btn-outline-blue:hover {
  filter: brightness(1.15);
  background: rgba(39, 115, 186, 0.20) !important;
}

/* Helm-Timer-Toggle: orange flächig im Off-Zustand (Start), nur Outline
   im On-Zustand (Pause). Klare Action vs. Status-Anzeige. */
.btn-helm-toggle.off {
  background: var(--warning) !important;
  border: 1px solid var(--warning) !important;
  color: #ffffff !important;
}
.btn-helm-toggle.on {
  background: rgba(255, 107, 61, 0.10) !important;
  border: 1px solid var(--warning) !important;
  color: var(--warning) !important;
}
.btn-helm-toggle:hover {
  filter: brightness(1.1);
}

/* Snapshot-Modus: blendet die Menüs/Controls aus damit das PNG nur die
   Karte + Track + Marker + Snapshot-eigene Banner enthält. Boot-Info und
   Wind-Overlay bleiben drin (Information, nicht Menü).
   Wird per JS dynamisch hinzugefügt und nach dem Capture wieder entfernt. */
.snapshotting .leaflet-control-container,
.snapshotting #boat-info-overlay {
  display: none !important;
}

/* Pick-Buttons (Start / Ziel / Points): solides dunkles Blau (kein Verlauf).
   Etwas dunkler als die Karten-Ausrichtungs-Buttons (.btn-ghost transparent
   mit hellem Border) damit sie sich visuell absetzen. Höhe wie .btn-Default. */
.btn-pick {
  background: #2773ba !important;
  color: #ffffff !important;
  border: 1px solid #1f5e9a !important;
  font-weight: 600 !important;
  letter-spacing: 0.4px;
  text-transform: none !important;
}

/* Große Variante — für Karten-Ausrichtungs-Buttons (Nord/Head/Kurs-Up).
   Tausch mit .btn-pick: die werden nun klein, diese hier groß. */
.btn-large {
  padding: 14px 8px !important;
  font-size: 14px !important;
  min-height: 48px;
}
.btn-pick:hover {
  filter: brightness(1.1);
  background: #2e83cf !important;
}

/* Wendewinkel Slider */
.slider-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.slider {
  flex: 1;
  -webkit-appearance: none;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  outline: none;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 8px var(--accent-glow);
}

.slider-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--accent);
  min-width: 50px;
  text-align: right;
}

/* Tactical Output */
.tactical {
  background: transparent;
  border: none;
}

.tactical .section-title::before {
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
}

.next-action {
  font-family: 'JetBrains Mono', monospace;
  font-size: 36px;
  font-weight: 700;
  color: var(--success);
  text-align: center;
  padding: 12px 0;
  letter-spacing: -1px;
}

.action-label {
  text-align: center;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.metric {
  background: var(--bg-deep);
  border-radius: 6px;
  padding: 10px;
  text-align: center;
}

.metric-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.metric-label {
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-top: 2px;
}

/* Status banner */
.status-banner {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  text-align: center;
  font-weight: 600;
}

.status-banner.warning {
  background: rgba(255, 107, 61, 0.15);
  border: 1px solid var(--warning);
  color: var(--warning);
}

.status-banner.ok {
  background: rgba(0, 255, 136, 0.10);
  border: 1px solid var(--success);
  color: var(--success);
}

.status-banner.error {
  background: rgba(255, 61, 94, 0.15);
  border: 1px solid var(--danger);
  color: var(--danger);
}

/* Klick-Feedback-Flash für Live-Banner und Route-berechnen-Button */
@keyframes click-flash {
  0%   { filter: brightness(1);   transform: scale(1); }
  30%  { filter: brightness(1.6); transform: scale(1.025); }
  100% { filter: brightness(1);   transform: scale(1); }
}
.click-flash {
  animation: click-flash 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-ghost.active {
  background: var(--accent);
  color: var(--bg-deep);
  border-color: var(--accent);
}

#map {
  width: 100%;
  height: 100%;
  background: var(--bg-deep);
}

.leaflet-container {
  background: #0a1628 !important;
  font-family: 'Space Grotesk', sans-serif;
}

/* Heading-Indikator (großer Pfeil oben) */
.heading-indicator {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: rgba(10, 22, 40, 0.9);
  border: 2px solid var(--accent);
  border-radius: 50%;
  width: 80px;
  height: 80px;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
}

.heading-indicator.active {
  display: flex;
}

.heading-arrow {
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-bottom: 28px solid var(--accent);
  filter: drop-shadow(0 0 6px var(--accent));
  transition: transform 0.3s ease-out;
}

.heading-label {
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--accent);
  font-weight: bold;
  white-space: nowrap;
  background: rgba(10, 22, 40, 0.9);
  padding: 2px 6px;
  border-radius: 4px;
}

/* WIND - schwebender Pfeil auf Karte (kein Hintergrund).
   safe-area-inset für iPhone-Notches/Gesture-Bar damit nichts abgeschnitten wird. */
.wind-floating {
  position: absolute;
  bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  right: calc(20px + env(safe-area-inset-right, 0px));
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  user-select: none;
}

.wind-floating-arrow {
  width: 50px;
  height: 117px;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: 50% 50%;
  /* Versetzter dunkler Schatten zusätzlich zum SVG-internen Glow,
     damit der Pfeil sich auch über hellen Karten-Tiles abhebt. */
  filter: drop-shadow(2px 3px 4px rgba(0, 0, 0, 0.65));
}

.wind-floating-info {
  margin-top: 4px;
  text-align: center;
  text-shadow: 
    0 0 4px #0a1628,
    0 0 4px #0a1628,
    0 0 6px #0a1628,
    0 0 8px #0a1628;
}

.wind-floating-speed {
  font-family: 'JetBrains Mono', monospace;
  font-size: 28px;
  font-weight: 700;
  color: #59bdec;
  line-height: 1;
}

.wind-floating-unit {
  font-size: 12px;
  color: #ffffff;
  margin-left: 3px;
  font-weight: 400;
}

.wind-floating-dir {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: #ffffff;
  margin-top: 2px;
  font-weight: 600;
}

.wind-floating-gust {
  font-size: 11px;
  color: #c0d0e0;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  margin-top: 1px;
}

@media (max-width: 768px) {
  .wind-floating {
    bottom: calc(30px + env(safe-area-inset-bottom, 0px));
    right: calc(12px + env(safe-area-inset-right, 0px));
  }
  .wind-floating-arrow {
    width: 36px;
    height: 84px;
  }
  .wind-floating-speed {
    font-size: 22px;
  }
  .wind-floating-dir {
    font-size: 11px;
  }
}

/* Custom controls */
.map-overlay {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1000;
  background: rgba(10, 22, 40, 0.85);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text);
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Boot-Info-Overlay als Leaflet-Control oben rechts (symmetrisch zur Layer-Box links) */
.leaflet-control-boatinfo {
  background: rgba(10, 22, 40, 0.85) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text);
  user-select: none;
  cursor: default;
  width: calc((var(--map-width, 800px) / 2) - 16px) !important;
  max-width: calc(50vw - 16px) !important;
  box-sizing: border-box;
}
.leaflet-control-boatinfo.collapsed {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  color: var(--accent);
}
.leaflet-control-boatinfo.collapsed .boat-info-body { display: none; }
.leaflet-control-boatinfo.collapsed .boat-info-toggle { display: block; }
.leaflet-control-boatinfo .boat-info-toggle { display: none; }
.leaflet-control-boatinfo .boat-info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  cursor: pointer;
}
.leaflet-control-boatinfo .boat-info-collapse-btn {
  color: var(--text-dim);
  font-size: 14px;
  padding: 0 4px;
}
.leaflet-control-boatinfo .boat-info-collapse-btn:hover { color: var(--accent); }
.boat-info-sog {
  font-size: 22px;
  font-weight: 700;
  color: #59bdec;
  line-height: 1.1;
  font-family: 'JetBrains Mono', monospace;
}
.boat-info-sog-unit {
  font-size: 11px;
  color: var(--text-dim);
  margin-left: 3px;
}
.boat-info-row {
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 4px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.boat-info-row b { color: var(--text); }

.refresh-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 6px var(--success);
  animation: pulse 2s infinite;
}

.refresh-indicator.loading {
  background: var(--warning);
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Mobile */
@media (max-width: 768px) {
  #app {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
  }
  .panel {
    order: 2;
    max-height: 50vh;
    border-right: none;
    border-top: 1px solid var(--border);
  }
  #map { order: 1; }
}

/* Custom marker pulse for boat */
.boat-pulse {
  position: relative;
}

.boat-pulse::before {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.3;
  animation: ripple 3s infinite;
  top: -7px;
  left: -7px;
  will-change: transform, opacity;
}

@keyframes ripple {
  0% { transform: scale(0.5); opacity: 0.5; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* Leaflet Layer Control - Dark Theme */
/* Wrapper-Styling NUR im aufgeklappten Zustand — sonst überlagert sich
   das mit dem 40×40-Toggle und der Layer-Switcher wirkt größer als die anderen Icons */
.leaflet-control-layers {
  color: var(--text);
  font-family: 'Space Grotesk', sans-serif;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.leaflet-control-layers-expanded {
  background: rgba(10, 22, 40, 0.85) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  width: calc((var(--map-width, 800px) / 2) - 16px) !important;
  max-width: calc(50vw - 16px) !important;
  box-sizing: border-box;
}

/* Boot-Label direkt auf Karte (kn + TWA) — komplett transparent, nur Text mit Schatten */
.boat-label {
  background: transparent !important;
  border: none !important;
}

/* Wegpunkt-Marker: kleines visuelles Symbol + großes transparentes Touch-Ziel */
.wp-marker, .tack-marker {
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: transparent !important;
  border: none !important;
}
.wp-marker .wp-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: #0a1628;
  border: 2px solid #00ff88;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(0,255,136,0.6);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: #00ff88;
  line-height: 1;
}
/* Fallback wenn kein span vorhanden (alte Markers ohne Nummer) — kleiner Kreis */
.wp-marker:not(:has(.wp-num))::before {
  content: '';
  width: 12px;
  height: 12px;
  background: #0a1628;
  border: 2px solid #00ff88;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(0,255,136,0.6);
}
.tack-marker::before {
  content: '';
  width: 16px;
  height: 16px;
  background: #0a1628;
  border: 3px solid #ff6b3d;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(255,107,61,0.7);
}

/* Eingeklappter Zustand: nur Toggle-Icon sichtbar (spart Platz auf der Karte) */
.leaflet-control-layers-toggle {
  width: 40px !important;
  height: 40px !important;
  background-color: rgba(10, 22, 40, 0.85) !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  position: relative;
}
.leaflet-control-layers-toggle::after {
  content: '☰';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--accent);
  pointer-events: none;
}
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
  display: none !important;
}

.leaflet-control-layers-base label {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
}

.leaflet-control-layers-base label:hover {
  color: var(--accent);
}

.leaflet-control-layers-selector {
  margin-right: 4px !important;
  accent-color: var(--accent);
}

.leaflet-control-layers-separator {
  border-top-color: var(--border) !important;
}

.leaflet-control-zoom {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
.leaflet-control-zoom a {
  width: 40px !important;
  height: 40px !important;
  line-height: 40px !important;
  background: rgba(10, 22, 40, 0.85) !important;
  color: var(--accent) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 22px !important;
  text-decoration: none !important;
}
.leaflet-control-zoom-in {
  margin-bottom: 4px !important;
}
.leaflet-control-zoom a:hover {
  background: rgba(10, 22, 40, 0.85) !important;
  color: white !important;
  border-color: var(--accent) !important;
}

/* GPS-Zoom-Button: ◎-Symbol etwas größer als die anderen Icons,
   damit es im 40×40-Button proportional Wirkung hat. */
#btn-map-gpszoom {
  font-size: 36px !important;
  line-height: 1 !important;
}

.leaflet-control-attribution {
  background: rgba(10, 22, 40, 0.7) !important;
  color: var(--text-dim) !important;
  font-size: 9px !important;
}

.leaflet-control-attribution a {
  color: var(--text-dim) !important;
}

/* PDF-Print-Modus: alles unsichtbar machen außer dem Print-Container.
   Das DOM wird beim Klick temporär umgebaut — Karte, Header, Tabelle
   wandern in #pdf-print-container, der dann als einziges Element sichtbar ist.
   Robuster als @media print weil keine CSS-Regel-Konflikte entstehen. */
@page { size: A4; margin: 8mm; }

body.pdf-print > * {
  display: none !important;
}
body.pdf-print > #pdf-print-container {
  display: block !important;
  position: static !important;
  width: 100% !important;
  height: auto !important;
  background: #fff !important;
  color: #000 !important;
  font-family: 'Space Grotesk', Arial, sans-serif;
  padding: 0 8mm;
  box-sizing: border-box;
}
body.pdf-print {
  overflow: visible !important;
  height: auto !important;
  background: #fff !important;
}
/* Karte im Print-Container: volle Breite, feste Höhe */
body.pdf-print #map {
  width: 100% !important;
  height: 130mm !important;
  page-break-inside: avoid;
  display: block !important;
}
/* Karten-Overlays/Controls verstecken — im Print-Container nicht erwünscht */
body.pdf-print .leaflet-control-zoom,
body.pdf-print .leaflet-control-fullscreen,
body.pdf-print .leaflet-control-layers,
body.pdf-print .leaflet-control-attribution,
body.pdf-print .leaflet-control-boatinfo,
body.pdf-print #wind-floating,
body.pdf-print #boat-info-overlay,
body.pdf-print #maneuver-toast {
  display: none !important;
}

/* Header-Styling */
body.pdf-print #print-header { display: block !important; }
body.pdf-print #print-header h1 { font-size: 16pt; margin: 8pt 0 6pt 0; color: #000; }
body.pdf-print #print-header .ph-meta { font-size: 10pt; color: #333; margin-bottom: 6pt; }
body.pdf-print #print-header table {
  border-collapse: collapse; width: 100%; font-size: 10pt; margin: 6pt 0;
}
body.pdf-print #print-header th,
body.pdf-print #print-header td {
  border: 1px solid #888; padding: 3px 6px; text-align: left; color: #000;
}
body.pdf-print #print-header th { background: #eee; }

/* Legs-Tabelle */
body.pdf-print #print-legs { display: block !important; padding-top: 6pt; }
body.pdf-print #print-legs h2 { font-size: 13pt; margin: 8pt 0 4pt 0; color: #000; }
body.pdf-print #print-legs table {
  border-collapse: collapse; width: 100%; font-size: 9pt;
}
body.pdf-print #print-legs th,
body.pdf-print #print-legs td {
  border: 1px solid #888; padding: 3px 5px; text-align: left; color: #000;
}
body.pdf-print #print-legs th { background: #eee; }
body.pdf-print #print-legs tfoot th { background: #ddd; }
body.pdf-print #print-legs td.num { text-align: right; font-family: 'JetBrains Mono', monospace; }
body.pdf-print #print-legs td.coord { font-family: 'JetBrains Mono', monospace; font-size: 8pt; white-space: nowrap; }

@media print {
  .leaflet-tile-pane { filter: contrast(1.05); }

  /* WICHTIG: Android Chrome rendert die Print-Preview separat und nimmt nicht
     den On-Screen-State (mit body.pdf-print-Klasse). Daher müssen die Layout-
     Regeln HIER nochmal stehen — wenn pdf-print-container im DOM ist, soll die
     Print-Engine genau wie im Screen-Mode nur diesen Container zeigen. */
  body.pdf-print > * { display: none !important; }
  body.pdf-print > #pdf-print-container {
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    background: #fff !important;
    color: #000 !important;
    font-family: 'Space Grotesk', Arial, sans-serif;
    padding: 0;
    box-sizing: border-box;
  }
  body.pdf-print {
    overflow: visible !important;
    height: auto !important;
    background: #fff !important;
  }
  body.pdf-print #map {
    width: 100% !important;
    height: 130mm !important;
    page-break-inside: avoid;
    display: block !important;
  }
  body.pdf-print .leaflet-control-zoom,
  body.pdf-print .leaflet-control-fullscreen,
  body.pdf-print .leaflet-control-layers,
  body.pdf-print .leaflet-control-attribution,
  body.pdf-print .leaflet-control-boatinfo,
  body.pdf-print #wind-floating,
  body.pdf-print #boat-info-overlay,
  body.pdf-print #maneuver-toast {
    display: none !important;
  }
  body.pdf-print #print-header { display: block !important; }
  body.pdf-print #print-header h1 { font-size: 16pt; margin: 8pt 0 6pt 0; color: #000; }
  body.pdf-print #print-header .ph-meta { font-size: 10pt; color: #333; margin-bottom: 6pt; }
  body.pdf-print #print-header table {
    border-collapse: collapse; width: 100%; font-size: 10pt; margin: 6pt 0;
  }
  body.pdf-print #print-header th,
  body.pdf-print #print-header td {
    border: 1px solid #888; padding: 3px 6px; text-align: left; color: #000;
  }
  body.pdf-print #print-header th { background: #eee; }
  body.pdf-print #print-legs { display: block !important; padding-top: 6pt; }
  body.pdf-print #print-legs h2 { font-size: 13pt; margin: 8pt 0 4pt 0; color: #000; }
  body.pdf-print #print-legs table {
    border-collapse: collapse; width: 100%; font-size: 9pt;
  }
  body.pdf-print #print-legs th,
  body.pdf-print #print-legs td {
    border: 1px solid #888; padding: 3px 5px; text-align: left; color: #000;
  }
  body.pdf-print #print-legs th { background: #eee; }
  body.pdf-print #print-legs tfoot th { background: #ddd; }
  body.pdf-print #print-legs td.num { text-align: right; font-family: 'JetBrains Mono', monospace; }
  body.pdf-print #print-legs td.coord { font-family: 'JetBrains Mono', monospace; font-size: 8pt; white-space: nowrap; }
}

/* ---------- BOOT-AUSWAHL-MODAL ---------- */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(5, 12, 22, 0.78);
  backdrop-filter: blur(2px);
  z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-card {
  background: var(--bg-mid);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  display: flex; flex-direction: column;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.modal-close {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 22px;
  cursor: pointer;
  padding: 0 6px;
  line-height: 1;
}
.modal-close:hover { color: var(--text); }
.modal-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
}
.modal-tab {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  padding: 10px 0;
  cursor: pointer;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.modal-tab.active {
  color: var(--text);
  border-bottom-color: #2773ba;
}
.modal-tab-content {
  padding: 14px 18px;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.modal-tab-content::-webkit-scrollbar { display: none; }

.boat-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
}
.boat-row.active {
  border-color: #2773ba;
  background: rgba(39, 115, 186, 0.10);
}
.boat-row .boat-meta {
  flex: 1;
  display: flex; flex-direction: column; gap: 2px;
}
.boat-row .boat-name {
  font-weight: 600;
  color: var(--text);
}
.boat-row .boat-sub {
  font-size: 10px;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
}
.boat-row .boat-action {
  display: flex; gap: 4px;
}
.boat-row .badge {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(0, 255, 136, 0.18);
  color: #00ff88;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Native <select>-Optionen im App-Stil (dunkel) — sonst Windows-default hell */
select option {
  background: var(--bg-mid);
  color: var(--text);
}
select:disabled option {
  background: var(--bg-mid);
  color: var(--text-dim);
}