/* ---------------------------------------------------------------
   25h Lauf – Team-Dashboard

   Farben nach dem Corporate Design der Gartenbau-Versicherung
   (siehe corporate_colors.md):
     Grün dunkel #004422 · Grün hell #A2C62C · Pink #E83278
     Blau #94D4EE · Sand hell #F5F1E9 · Sand dunkel #EAE3D2

   Die Diagrammfarben sind aus diesen Markenfarben abgeleitet und auf
   Farbfehlsichtigkeit geprueft. Die Originaltoene Grün hell und Blau sind
   als Linienfarben zu hell (Helligkeitsband und Kontrast gegen den hellen
   Grund), deshalb im selben Farbton abgedunkelt. Beide Saetze bestehen
   alle Pruefungen gegen ihren jeweiligen Untergrund.
   --------------------------------------------------------------- */

:root {
  color-scheme: light;

  --surface-0: #f5f1e9; /* Sand hell */
  --surface-1: #fbf9f4;
  --surface-2: #eae3d2; /* Sand dunkel */
  --border: #ded6c2;
  --border-strong: #c4b99e;

  --text-primary: #15180f;
  --text-secondary: #4c5241;
  --text-muted: #717863;

  --accent: #004422; /* Grün dunkel */
  --accent-soft: #e6efd6;
  --accent-ink: #004422;

  --series-1: #6f9b13; /* wir – aus Grün hell */
  --series-2: #d62a6e; /* Spitzenreiter – aus Pink */
  --series-3: #2076a8; /* Mittelfeld – aus Blau */

  --danger: #b3261e;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgb(0 34 17 / 0.06), 0 6px 20px -12px rgb(0 34 17 / 0.28);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;

    --surface-0: #0f1209;
    --surface-1: #14170f;
    --surface-2: #1f2417;
    --border: #2e3424;
    --border-strong: #454d36;

    --text-primary: #ffffff;
    --text-secondary: #c6cdb8;
    --text-muted: #949b86;

    --accent: #a2c62c; /* Grün hell */
    --accent-soft: #1e2814;
    --accent-ink: #b8d84e;

    --series-1: #7ba020;
    --series-2: #e5478a;
    --series-3: #3892c6;

    --danger: #f2897f;

    --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 6px 20px -12px rgb(0 0 0 / 0.7);
  }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-0);
  color: var(--text-primary);
  font: 15px/1.55 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: 18px;
}

h2 { font-size: 1.05rem; margin: 0; letter-spacing: -0.01em; }

a { color: var(--accent-ink); }

/* ---------- Kopfzeile ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--surface-1) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-block: 12px;
}

.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
/* Ohne min-width:0 erzwingt der nicht umbrechende Text die volle Spaltenbreite. */
.brand > div { min-width: 0; }

/* Signet der Gartenbau-Versicherung. Pos-Variante fuer hellen, Neg-Variante
   fuer dunklen Grund - der Wechsel passiert ueber <source media> im Markup. */
.brand-mark {
  display: block;
  width: 38px;
  height: 38px;
  flex: none;
}
.brand-mark img { display: block; width: 100%; height: 100%; }

.brand-name {
  font-weight: 650;
  font-size: 1rem;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-sub { font-size: 0.76rem; color: var(--text-muted); }

/* ---------- Kacheln ---------- */

/* Feste Spaltenzahl statt auto-fit: die Hero-Kachel zaehlt doppelt, damit
   Zeile 1 exakt aufgeht - und 1fr-Spalten koennen nie ueberlaufen. */
.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-block: 20px;
}

@media (min-width: 820px) {
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.tile {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 15px 16px;
  box-shadow: var(--shadow);
}

/* Rennzeit-Kachel: der Balken sitzt immer buendig am unteren Rand,
   auch wenn die Nachbarkacheln die Zeile hoeher machen. */
.tile-time { display: flex; flex-direction: column; }
.tile-time .tile-note { margin-bottom: 12px; }

.tile-time .progress {
  margin-top: auto;
  height: 5px;
  border-radius: 3px;
  background: var(--surface-2);
  overflow: hidden;
}

.tile-time .progress-fill {
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: var(--accent);
  transition: width 0.6s ease;
}

.tile-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  font-weight: 600;
}

.tile-value {
  /* Die Rennuhr ist der breiteste Wert und bestimmt, wie schmal eine Kachel
     werden darf. Statt ihr eine eigene Zeile zu geben, skaliert die Kennzahl
     auf sehr schmalen Geraeten mit. Ab etwa 400px greift wieder 1.95rem. */
  font-size: clamp(1.15rem, calc(10.2vw - 13px), 1.95rem);
  font-weight: 680;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
  line-height: 1.1;
}

/* Einheit hinter der Kennzahl, einheitlich fuer km und h. */
.tile-unit { font-size: 0.46em; font-weight: 600; letter-spacing: 0; }

.tile-note { font-size: 0.78rem; color: var(--text-secondary); margin-top: 4px; }

/* ---------- Karten ---------- */

.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 17px 18px 19px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}

.card-head { margin-bottom: 14px; }
.card-sub { margin: 4px 0 0; font-size: 0.81rem; color: var(--text-secondary); max-width: 62ch; }

/* ---------- Diagramme ---------- */

.chart-wrap { overflow-x: auto; }
.chart svg { display: block; width: 100%; height: auto; }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 10px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.legend-item { display: inline-flex; align-items: center; gap: 7px; }
.legend-line { flex: none; display: block; overflow: visible; }
.legend-swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; }

/* ---------- Runden pro Person ---------- */

/* Ein Grid fuer die ganze Liste - jede Zeile als display:contents. Eigene
   Grids je Zeile wuerden ihre Spalten unabhaengig berechnen, dadurch begannen
   die Balken je nach Textlaenge an unterschiedlichen Stellen. */
.laps-board {
  display: grid;
  grid-template-columns: 26px minmax(96px, max-content) minmax(80px, 1fr) max-content;
  align-items: center;
  gap: 9px 11px;
}

.laps-row { display: contents; }

.laps-pos {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.laps-name {
  font-size: 0.88rem;
  font-weight: 560;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.laps-track {
  background: var(--surface-2);
  border-radius: 5px;
  height: 11px;
  overflow: hidden;
}

.laps-fill {
  height: 100%;
  /* Dieselbe Farbe wie unsere Linie in den Liniendiagrammen: Daten tragen die
     Serienfarbe, --accent bleibt der Oberflaeche vorbehalten. */
  background: var(--series-1);
  border-radius: 0 4px 4px 0;
  transition: width 0.5s ease;
  min-width: 3px;
}

.laps-value {
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  white-space: nowrap;
}
.laps-value b { color: var(--text-primary); font-weight: 620; }

@media (max-width: 520px) {
  /* Schmal: Balken unter den Namen. Zeilenweise Grids sind hier unkritisch,
     weil die erste Spalte fest ist und der Balken immer an Spalte 2 beginnt. */
  .laps-board { grid-template-columns: 1fr; gap: 11px; }
  .laps-row {
    display: grid;
    grid-template-columns: 22px 1fr max-content;
    align-items: center;
    gap: 5px 10px;
  }
  /* Platzierung explizit, sonst schiebt die Auto-Platzierung den Wert
     hinter den Balken in eine eigene Zeile. */
  .laps-pos { grid-column: 1; grid-row: 1; }
  .laps-name { grid-column: 2; grid-row: 1; }
  .laps-value { grid-column: 3; grid-row: 1; }
  .laps-track { grid-column: 2 / -1; grid-row: 2; }
}

/* ---------- Läuferkarten ---------- */

.runner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 12px;
}

.runner {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  background: var(--surface-0);
}

.runner-name { font-weight: 620; font-size: 0.93rem; letter-spacing: -0.01em; }

.runner-main {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 7px;
}

.runner-km {
  font-size: 1.45rem;
  font-weight: 660;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.runner-laps { font-size: 0.79rem; color: var(--text-secondary); }

.runner-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 9px;
  font-size: 0.76rem;
  color: var(--text-secondary);
}
.runner-stats span b {
  color: var(--text-primary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.runner-next {
  margin-top: 9px;
  font-size: 0.74rem;
  color: var(--text-muted);
}

.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }

.chip {
  font-size: 0.7rem;
  padding: 3px 8px;
  border-radius: 99px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  white-space: nowrap;
}

.chip-milestone {
  background: var(--surface-2);
  color: var(--text-secondary);
  border-color: var(--border);
}

.badge-legend { margin-top: 14px; font-size: 0.8rem; color: var(--text-secondary); }
.badge-legend summary { cursor: pointer; color: var(--accent-ink); }
.badge-legend ul { margin: 9px 0 0; padding-left: 18px; display: grid; gap: 4px; }

/* ---------- Ticker ---------- */

.ticker { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }

.ticker li {
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  gap: 11px;
  align-items: baseline;
  padding: 8px 2px;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}
.ticker li:last-child { border-bottom: 0; }

.ticker-nr { color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: 0.78rem; }
.ticker-name { font-weight: 540; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticker-time { font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.ticker-clock { font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: 0.78rem; }

@media (max-width: 520px) {
  .ticker li { grid-template-columns: 38px 1fr auto; }
  .ticker-clock { display: none; }
}

/* ---------- Feldtabelle ---------- */

.table-wrap { overflow-x: auto; }

.field-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }

.field-table th {
  text-align: left;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
  padding: 0 10px 7px 0;
  border-bottom: 1px solid var(--border);
}

.field-table td {
  padding: 8px 10px 8px 0;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.field-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.field-table .num b { font-weight: 620; }
.field-table td.name { white-space: normal; min-width: 180px; }

/* Hervorgehobene Zeile: die eigene Mannschaft im Feld, der erste Platz bei
   den schnellsten Runden. Eine Hervorhebungssprache fuer beide Tabellen. */
.field-table tr.us td,
.field-table tr.top td {
  background: var(--accent-soft);
  font-weight: 620;
}
.field-table tr.us td:first-child,
.field-table tr.top td:first-child { border-radius: 7px 0 0 7px; }
.field-table tr.us td:last-child,
.field-table tr.top td:last-child { border-radius: 0 7px 7px 0; }

/* Das Intervall ist eine Nebenangabe und tritt hinter die Zeit zurueck. */
.field-table .gap { color: var(--text-muted); }
.field-table tr.top .gap { color: inherit; }

/* Schmal: Uhrzeit weglassen, statt die Tabelle seitlich scrollen zu lassen.
   Gleiche Regel wie im Ticker. */
@media (max-width: 520px) {
  .field-table .clock-col { display: none; }
  /* Die 180px waren fuer die langen Teamnamen gedacht. Schmal zwingen sie
     die Tabelle ins seitliche Scrollen, Umbrechen ist dort besser. */
  .field-table td.name { min-width: 96px; }
}

.more {
  margin-top: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: 99px;
  padding: 7px 15px;
  font-size: 0.82rem;
  cursor: pointer;
  font-family: inherit;
}
.more:hover { border-color: var(--border-strong); }

/* ---------- Status ---------- */

.status {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  margin: 4px 0 16px;
}
.status.error { color: var(--danger); }

.foot {
  font-size: 0.74rem;
  color: var(--text-muted);
  text-align: center;
  padding-bottom: 30px;
}
.foot p { margin: 3px 0; }

/* ---------- Tooltip ---------- */

.tip {
  position: fixed;
  z-index: 50;
  pointer-events: none;
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  padding: 8px 10px;
  font-size: 0.78rem;
  box-shadow: 0 4px 18px -6px rgb(0 0 0 / 0.3);
  max-width: 230px;
}
.tip[hidden] { display: none; }
.tip-title { font-weight: 620; margin-bottom: 4px; }
.tip-row { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.tip-row .legend-swatch { width: 9px; height: 9px; }
.tip-row .legend-line { width: 18px; height: 9px; }
.tip-val { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }