/* -------------------------
   Theme variables
------------------------- */
:root{
  --bg:#0b0c10;
  --card:#12131a;
  --text:#e7e9ee;
  --muted:#a7acb9;
  --line:rgba(255,255,255,0.08);
  --surface: rgba(255,255,255,0.03);

  --btn-bg:#0f1117;
  --btn-text: var(--text);

  --score: rgba(0,200,255,0.9);
  --thermik: rgba(0,255,140,0.85);
  --wind: rgba(255,255,255,0.75);
  --gust: rgba(255,180,0,0.85);

  --band-caution: rgba(255, 210, 122, 0.20);
  --band-critical: rgba(255, 138, 138, 0.22);

  --tooltip-bg:#0f1117;
}

/* Light theme overrides */
:root[data-theme="light"]{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#141823;
  --muted:#5b6475;
  --line:rgba(20,24,35,0.12);
  --surface: rgba(20,24,35,0.03);

  --btn-bg:#ffffff;
  --btn-text: var(--text);

  --wind: rgba(20,24,35,0.65);
  --tooltip-bg:#ffffff;

  /* Bänder im Light Theme etwas subtiler */
  --band-caution: rgba(255, 210, 122, 0.28);
  --band-critical: rgba(255, 138, 138, 0.26);
}

/* -------------------------
   Base layout
------------------------- */
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}
.wrap{ max-width:1100px; margin:0 auto; padding:18px; }
.header{
  display:flex; flex-wrap:wrap; gap:12px; align-items:baseline; justify-content:space-between;
  padding:14px 16px; background:var(--card); border:1px solid var(--line); border-radius:14px;
}
h1{ margin:0; font-size:18px; }
.meta{ color:var(--muted); font-size:13px; }
.grid{ margin-top:14px; display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width: 920px){ .grid{ grid-template-columns:1.2fr 0.8fr; } }
.card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; }
h2{ margin:0 0 10px 0; font-size:15px; }
.mono{ font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; }
ul{ margin:8px 0 0 20px; padding:0; }
li{ margin:6px 0; }
table{ width:100%; border-collapse:collapse; }
th,td{ border-bottom:1px solid var(--line); padding:10px 8px; vertical-align:top; font-size:13px; }
th{ text-align:left; color:var(--muted); font-weight:600; }
.hint{ margin-top:4px; color:var(--muted); font-size:12px; }

.badge{
  display:inline-block; min-width:38px; text-align:center;
  padding:2px 8px; border-radius:999px; font-weight:700; font-size:12px;
  border:1px solid var(--line);
}
.s80{ background:rgba(0,255,140,0.16); }
.s65{ background:rgba(0,200,255,0.14); }
.s50{ background:rgba(255,255,255,0.10); }
:root[data-theme="light"] .s50{ background:rgba(20,24,35,0.06); }
.s35{ background:rgba(255,180,0,0.14); }
.s00{ background:rgba(255,60,60,0.18); }

.foot{ margin-top:12px; color:var(--muted); font-size:12px; }
.kpi{ display:flex; flex-wrap:wrap; gap:10px; }
.kpi .box{ flex:1 1 180px; border:1px solid var(--line); border-radius:12px; padding:10px 12px; background: var(--surface); }
.kpi .label{ color:var(--muted); font-size:12px; }
.kpi .value{ font-size:13px; margin-top:4px; }
.profilebar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.profilebar select{ background:var(--btn-bg); color:var(--btn-text); border:1px solid var(--line); border-radius:10px; padding:6px 10px; }
.limits{ margin-left:auto; }

.ok{ color:#1aa15a; font-weight:800; }
:root[data-theme="dark"] .ok{ color:#7CFFB2; }
.caution{ color:#b87900; font-weight:800; margin-left:8px; }
:root[data-theme="dark"] .caution{ color:#FFD27A; }
.critical{ color:#b40000; font-weight:900; margin-left:8px; }
:root[data-theme="dark"] .critical{ color:#FF8A8A; }

tr.row-caution{ opacity:0.90; }
tr.row-critical{ opacity:0.78; }

/* -------------------------
   Top bar + theme toggle
------------------------- */
.topbar{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  margin-bottom:12px;
}
.topbar-spacer{ flex:1; }

.theme-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid var(--line);
  background: var(--card);
  color: var(--text);
  cursor:pointer;
}
.theme-toggle:hover{ background: var(--surface); }
.theme-icon{ font-size:14px; line-height:1; }
.theme-text{ font-size:13px; font-weight:700; }

/* -------------------------
   Chart
------------------------- */
.chartbox{ margin-top:10px; position:relative; }
.chartsvg{
  width:100%; height:auto; display:block;
  border:1px solid var(--line); border-radius:12px;
  background:var(--surface);
}
.axislabel{ fill: var(--muted); font-size: 12px; }

/* IMPORTANT for D3 paths */
.line{ fill:none; stroke-width:2; }
.line-score{ stroke: var(--score); }
.line-thermik{ stroke: var(--thermik); stroke-width:2.5; }
.line-wind{ stroke: var(--wind); stroke-dasharray: 4 3; }
.line-gust{ stroke: var(--gust); }

.band-caution{ fill: var(--band-caution); }
.band-critical{ fill: var(--band-critical); }

/* Legend */
.legend{
  display:flex; flex-wrap:wrap; gap:10px 14px;
  margin-top:10px; color: var(--muted); font-size:12px;
}
.legitem{ display:inline-flex; align-items:center; gap:8px; }
.legswatch{ width:18px; height:10px; border-radius:6px; border:1px solid var(--line); display:inline-block; background: var(--surface); }
.sw-score{ background: color-mix(in srgb, var(--score) 30%, transparent); }
.sw-thermik{ background: color-mix(in srgb, var(--thermik) 28%, transparent); }
.sw-wind{ background: color-mix(in srgb, var(--wind) 20%, transparent); }
.sw-gust{ background: color-mix(in srgb, var(--gust) 25%, transparent); }
.sw-caution{ background: var(--band-caution); }
.sw-critical{ background: var(--band-critical); }

/* Tooltip */
.tooltip{
  position:absolute;
  pointer-events:none;
  background:var(--tooltip-bg);
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px 10px;
  color:var(--text);
  font-size:12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.18);
  max-width: 260px;
}

/* --- Table tooltips (CAPE) --- */
.cape-cell {
  cursor: help;
  border-bottom: 1px dotted var(--muted);
  padding-bottom: 1px;
}

.ui-tip{
  position: fixed;
  z-index: 9999;
  min-width: 240px;
  max-width: 320px;
  background: var(--tooltip-bg);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.18);
  font-size: 12px;
}

.ui-tip-title{
  font-weight: 900;
  margin-bottom: 8px;
}

.ui-tip-row{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.ui-tip-text{
  color: var(--muted);
  line-height: 1.25;
}

.ui-tip-sub{
  color: var(--muted);
  line-height: 1.25;
}

.ui-pill{
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-weight: 900;
  white-space: nowrap;
}

/* Farbklassen: blue/green/orange/red */
.ui-pill.blue{
  background: rgba(0, 120, 255, 0.14);
  color: color-mix(in srgb, var(--text) 85%, #0078ff 15%);
}
.ui-pill.green{
  background: rgba(0, 200, 120, 0.16);
  color: color-mix(in srgb, var(--text) 85%, #00c878 15%);
}
.ui-pill.orange{
  background: rgba(255, 170, 0, 0.16);
  color: color-mix(in srgb, var(--text) 85%, #ffaa00 15%);
}
.ui-pill.red{
  background: rgba(255, 60, 60, 0.16);
  color: color-mix(in srgb, var(--text) 85%, #ff3c3c 15%);
}