:root {
    --bg: #0d1117;
    --panel-bg: linear-gradient(145deg, rgba(18,24,32,.96), rgba(31,39,50,.92));
    --panel-border: rgba(90,109,132,.38);
    --text: #e6edf3;
    --text-dim: #8b949e;
    --accent: #4fa8ff;
    --accent-off: #3d444d;
    --danger: #f85149;
    --panel-width: 300px;
    --rail-width: 0px;
  }
  * { box-sizing: border-box; }
  html, body {
    margin: 0;
    height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
    overflow: hidden;
  }

  /* --- Echtes Flex-Layout: Panels VERDRAENGEN die Karte, keine Overlays --- */
  body {
    display: flex;
    align-items: stretch;
  }

  .panel {
    width: var(--panel-width);
    flex-shrink: 0;
    background: var(--panel-bg);
    border-color: var(--panel-border);
    overflow-y: auto;
    overflow-x: hidden;
    transition: width .2s ease, padding .2s ease;
  }
  .panel.hidden { display: none !important; width: 0 !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; margin: 0 !important; }
  #settings-panel { border-right: 1px solid var(--panel-border); padding: 14px 16px; }
  #settings-panel.hidden { border-right-color: transparent; }
  #flights-panel { border-left: 1px solid var(--panel-border); padding: 14px 16px; }
  #flights-panel.hidden { border-left-color: transparent; }

  /* Schmale, IMMER sichtbare Spalten fuer die Toggle-Buttons - liegen direkt
     an der aktuellen Kante des jeweiligen Panels (ob offen oder geschlossen),
     verdecken dadurch nie etwas und muessen nie manuell repositioniert werden. */
  .toggle-rail { display: contents; }

  #map-area {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
  }
  #cards-grid {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 2px;
  }
  #cards-grid.single-sector { display: block; }
  .card-wrapper { position: relative; height: 100%; overflow: hidden; }
  #cards-grid.single-sector .card-wrapper { width: 100%; height: 100%; }
  .card-title {
    position: absolute; top: 10px; left: 52px; z-index: 400;
    padding: 4px 12px; font-size: 13px; font-weight: 600;
    background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 999px;
  }
  .card-slot { --wtp-map-height: 100%; width: 100%; height: 100%; min-height: 0; }
  .card-slot > whats-that-plane-map-edit { display: block; width: 100%; height: 100%; min-height: 0; }

  .overlay-slot {
    position: absolute; left: 24px; bottom: 24px; width: 340px; height: 260px;
    z-index: 500; border-radius: 14px; overflow: hidden;
    box-shadow: 0 6px 24px rgba(0,0,0,.5); border: 1px solid var(--panel-border);
  }
  .overlay-slot .card-slot { --wtp-map-height: 260px; }

  .panel-toggle {
    position: fixed; top: 10px;
    width: 32px; height: 32px; border-radius: 10px;
    border: 1px solid var(--panel-border); background: var(--panel-bg); color: var(--text);
    font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center;
    z-index: 2000;
  }
  #toggle-settings-btn { left: 10px; }
  #toggle-flights-btn { right: 10px; }
  body.settings-open #toggle-settings-btn { left: calc(var(--panel-width) + 10px); }
  body.flights-open #toggle-flights-btn { right: calc(var(--panel-width) + 10px); }

  h1 { font-size: 16px; margin: 4px 0 2px; white-space: nowrap; }
  .version { color: var(--text-dim); font-size: 11px; margin-bottom: 18px; }
  h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); margin: 18px 0 8px; }
  #flights-panel h2:first-child { margin-top: 4px; }

  .sector-row, .toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 10px; border-radius: 10px;
    background: rgba(255,255,255,0.03); margin-bottom: 6px; font-size: 13px;
  }
  .sector-row .name { font-weight: 600; }
  .sector-row .meta { color: var(--text-dim); font-size: 11px; }

  .switch { position: relative; width: 38px; height: 22px; flex-shrink: 0; cursor: pointer; }
  .switch input { opacity: 0; width: 0; height: 0; }
  .switch .track { position: absolute; inset: 0; background: var(--accent-off); border-radius: 999px; transition: background .15s; }
  .switch .thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform .15s; }
  .switch input:checked + .track { background: var(--accent); }
  .switch input:checked + .track .thumb, .switch input:checked ~ .thumb { transform: translateX(16px); }

  .config-link-btn {
    display: block; text-align: center; text-decoration: none;
    margin-top: 18px; padding: 9px 14px; border-radius: 10px;
    background: var(--accent); color: #06121f; font-size: 13px; font-weight: 600;
  }

  /* --- Detaillierte Flug-Karten (Zielbild-Optik) --- */
  .flight-card {
    border-radius: 12px; background: rgba(255,255,255,0.03);
    border: 1px solid var(--panel-border); padding: 10px 12px; margin-bottom: 10px;
    font-size: 12px;
  }
  .flight-card.near { border-color: rgba(255,196,0,.55); background: rgba(255,196,0,.06); }
  .near-badge {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(255,196,0,.18); color: #ffc400; font-weight: 700;
    font-size: 10px; text-transform: uppercase; letter-spacing: .03em;
    padding: 3px 8px; border-radius: 999px; margin-bottom: 8px;
  }
  /* Notfall-Squawk (7500/7600/7700) - gleiches Schema wie "Sehr naher Flug",
     nur in Rot statt Gelb, und mit pulsierendem Rahmen statt einer
     statischen Farbe (soll auch in der Seitenleiste sofort auffallen, nicht
     nur auf der Karte - siehe .wtp-emergency dort fuer das Kartenpendant). */
  @keyframes flight-card-emergency-pulse {
    0%, 100% { border-color: rgba(255,26,26,.55); box-shadow: 0 0 0 rgba(255,26,26,0); }
    50% { border-color: rgba(255,26,26,.9); box-shadow: 0 0 10px rgba(255,26,26,.35); }
  }
  .flight-card.emergency {
    border-color: rgba(255,26,26,.7); background: rgba(255,26,26,.08);
    animation: flight-card-emergency-pulse 1.2s ease-in-out infinite;
  }
  .emergency-badge {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(255,26,26,.22); color: #ff5c5c; font-weight: 700;
    font-size: 10px; text-transform: uppercase; letter-spacing: .03em;
    padding: 3px 8px; border-radius: 999px; margin-bottom: 8px;
  }
  .flight-card-header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
  .flight-card-callsign { font-weight: 700; font-size: 14px; }
  .flight-card-airline { color: var(--text-dim); font-size: 11px; }
  .flight-card-row { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; color: var(--text-dim); }
  .flight-card-row.stack { display: block; }
  .flight-card-type { color: var(--text); line-height: 1.35; overflow-wrap: anywhere; }
  .flight-card-route-names { margin-top: 7px; color: var(--text-dim); line-height: 1.35; }
  .flight-card-progress-meta { display:flex; justify-content:space-between; gap:8px; color:var(--text-dim); font-size:10px; }
  .flight-card-times { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
  .flight-card-time { background:rgba(255,255,255,.035); border-radius:8px; padding:7px; }
  .flight-card-time strong { display:block; color:var(--text); margin-bottom:3px; }
  .restart-btn { width:100%; border:1px solid rgba(248,81,73,.5); background:rgba(248,81,73,.12); color:#ff9b95; border-radius:10px; padding:9px 12px; cursor:pointer; font-weight:700; margin-top:8px; }
  .restart-btn:disabled { opacity:.55; cursor:wait; }
  .flight-card-row b { color: var(--text); font-weight: 600; }
  .flight-card-thumb { width: 100%; border-radius: 8px; margin-top: 8px; display: block; }
  .flight-card-route { margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(255,255,255,.08); }
  .flight-card-route .airports { display: flex; justify-content: space-between; font-weight: 600; }
  .flight-card-route .progress-bar { height: 3px; background: rgba(255,255,255,.08); border-radius: 999px; margin: 6px 0; overflow: hidden; }
  .flight-card-route .progress-fill { height: 100%; background: var(--accent); }
  .flight-card-route .delay.late { color: var(--danger); }
  .flight-card-route .delay.ontime { color: #3fb950; }
  #flight-list-empty { color: var(--text-dim); font-size: 12px; padding: 4px 0; }

  #empty-state { color: var(--text-dim); padding: 40px; text-align: center; }

/* ============================================================================
 * "list_ha" - kompaktes, breites Zeilen-Layout fuer den Home-Assistant-Embed
 * (embed_view=list_ha), angelehnt an Denis' bisheriges Markdown-Template:
 * 3 Spalten (Hauptinfo | Zeiten | Bild seitlich statt voller Breite) auf
 * breiten Bildschirmen, faellt unter 700px automatisch auf eine einzige,
 * gestapelte Spalte OHNE Bild zurueck (deckt "Desktop- und Mobile-Version"
 * ueber eine einzige responsive CSS-Regel ab statt zwei separate URLs).
 * ========================================================================= */
.flight-row-ha {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .8fr) minmax(140px, 200px);
  gap: 20px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 13px;
  line-height: 1.4;
}
/* Bei "Sehr naher Flug"/Notfall: die duenne Trennlinie schneidet haesslich
   durch die farbige Flaeche, wenn mehrere solche Karten aufeinanderfolgen
   (siehe Denis' Screenshot) - Linie faellt hier komplett weg, stattdessen
   ein echter Abstand (margin) zwischen den Karten. */
.flight-row-ha.near, .flight-row-ha.emergency {
  border-bottom: none;
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 12px;
}
.flight-row-ha.near { background: rgba(255,196,0,.06); }
.flight-row-ha.emergency { background: rgba(248,81,73,.10); }
.fr-ha-title { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.fr-ha-title .airline { font-weight: 400; color: var(--text-dim); }
.fr-ha-wetlease { color: var(--text-dim); font-size: 11px; margin-bottom: 4px; }
.fr-ha-routebar { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; font-weight: 600; }
.fr-ha-routebar .fr-ha-airport { white-space: nowrap; }
.fr-ha-progress-track { position: relative; flex: 1; height: 3px; background: rgba(255,255,255,.12); border-radius: 999px; }
.fr-ha-progress-fill { position: absolute; left: 0; top: 0; height: 100%; background: var(--accent); border-radius: 999px; }
.fr-ha-progress-meta { display: flex; justify-content: space-between; gap: 8px; color: var(--text-dim); font-size: 11px; margin-bottom: 6px; }
.fr-ha-places { color: var(--text-dim); margin-bottom: 4px; }
.fr-ha-line { margin-top: 4px; }
.fr-ha-line b { color: var(--text); font-weight: 600; }
.fr-ha-times { display: flex; flex-direction: column; gap: 10px; }
.fr-ha-times .fr-ha-time-block strong { display: block; margin-bottom: 3px; }
.fr-ha-times .delay.late { color: var(--danger); }
.fr-ha-times .delay.ontime { color: #3fb950; }
.fr-ha-image img { width: 100%; max-height: 130px; object-fit: cover; border-radius: 8px; display: block; }

@media (max-width: 700px) {
  .flight-row-ha { grid-template-columns: 1fr; gap: 4px; }
  .fr-ha-image { display: none; } /* wie Denis' alte Mobile-Variante: Bild entfaellt zugunsten Kompaktheit */
  .fr-ha-times { flex-direction: row; gap: 16px; margin-top: 6px; }
}

/* Embed-Modus "nur Liste" (siehe board.js runEmbedMode): keine feste
   Viewport-Hoehe/kein interner Scrollbalken - Home Assistant (oder das
   einbettende Dashboard) soll selbst scrollen, nicht wir intern. Ohne das
   erbt #flights-panel weiterhin die feste 100%-Hoehe + overflow-y:auto der
   normalen Board-Seite (dort erwuenscht, hier nicht). */
html.embed-natural-height, body.embed-natural-height {
  height: auto;
  overflow: visible;
}
body.embed-natural-height { display: block; }
body.embed-natural-height #flights-panel {
  width: 100%;
  height: auto;
  overflow: visible;
  border: none;
  padding: 14px 16px;
}