/* =============================================================
   Trainingsdaten — Stylesheet
   Palette leitet sich aus der HF-Zonenskala ab: jede Farbe im
   Interface hat eine Bedeutung, keine ist Dekoration.
   ============================================================= */

:root {
  --bg:      #12161c;
  --bg-2:    #171d25;
  --bg-3:    #1e2630;
  --rule:    #28313c;
  --rule-2:  #39434f;
  --ink:     #e7ecf1;
  --ink-2:   #93a0ae;
  --ink-3:   #616f7e;

  --z1: #5b7da8;   /* Grundlage      */
  --z2: #3e9b87;   /* extensiv       */
  --z3: #d9b23e;   /* Schwelle       */
  --z4: #e08a3c;   /* intensiv       */
  --z5: #d2453c;   /* maximal, Alarm */

  --sp:  8px;
  --max: 1240px;

  --f-body: "Barlow", system-ui, sans-serif;
  --f-cond: "Barlow Condensed", "Barlow", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

a { color: var(--z1); }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible {
  outline: 2px solid var(--z3);
  outline-offset: 2px;
}

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

.topbar { border-bottom: 1px solid var(--rule); background: var(--bg-2); }

.topbar-inner {
  display: flex; align-items: baseline; gap: 20px;
  height: 58px; padding-top: 14px;
}

.wordmark {
  font-family: var(--f-cond);
  font-size: 24px; font-weight: 600; letter-spacing: .01em;
  margin: 0;
}

.countdown {
  margin-left: auto;
  font-family: var(--f-cond);
  font-size: 19px; color: var(--ink-2);
}
.countdown b { color: var(--z3); font-weight: 600; }

.signout { color: var(--ink-3); font-size: 14px; text-decoration: none; }
.signout:hover { color: var(--ink); }

/* ---------------- Saisonband ---------------- */

.band { background: var(--bg-2); border-bottom: 1px solid var(--rule); }
.band svg { display: block; width: 100%; height: 200px; }

/* ---------------- Reiter ---------------- */

.tabs {
  display: flex; gap: 2px; flex-wrap: wrap;
  border-bottom: 1px solid var(--rule);
  padding-top: 14px;
}

.tab {
  appearance: none; background: none; border: 0;
  border-bottom: 2px solid transparent;
  color: var(--ink-2);
  font-family: var(--f-body); font-size: 15px; font-weight: 500;
  padding: 8px 14px 12px; cursor: pointer;
}
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--ink); border-bottom-color: var(--z3); }

/* ---------------- Raster ---------------- */

/* Genug Luft zur Reiterleiste. 26 px waren zu knapp: Überschrift und
   die große Kennzahl in der Schiene klebten an der Trennlinie. */
main { padding-top: 34px; padding-bottom: 70px; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 0 40px;
  align-items: start;
}

.panel { padding: 0 0 30px; margin-bottom: 30px; border-bottom: 1px solid var(--rule); }
.panel:last-child { border-bottom: 0; margin-bottom: 0; }

.panel-head {
  display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px;
}
/* Nur das erste Panel einer Spalte braucht Luft nach oben - die
   folgenden haben schon die Trennlinie des vorherigen über sich. */
.split > div > .panel:first-child > .panel-head,
main > .panel:first-child > .panel-head { padding-top: 12px; }
.panel-head h2 {
  font-family: var(--f-cond); font-size: 21px; font-weight: 600;
  margin: 0; letter-spacing: .01em;
}
.panel-head p { margin: 0; color: var(--ink-3); font-size: 13.5px; }

.chart { position: relative; height: 300px; }
.chart.tall { height: 380px; }
.chart.short { height: 210px; }

/* ---------------- Statusschiene ---------------- */

.rail {
  border-left: 1px solid var(--rule);
  padding-left: 24px;
  padding-top: 12px;   /* auf gleicher Höhe wie das erste Panel starten */
}

.rail-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--rule);
  font-size: 14px;
}
.rail-row:last-child { border-bottom: 0; }
.rail-row span { color: var(--ink-2); }
.rail-row b { font-weight: 500; font-size: 15px; }

.rail h3 {
  font-family: var(--f-cond); font-size: 15px; font-weight: 600;
  color: var(--ink-3); margin: 26px 0 4px;
}
.rail h3:first-child { margin-top: 0; }

/* Kennzahl mit Rang: eine große Zahl je Block, Rest ruhig */
.figure { margin: 0 0 4px; }
.figure b {
  display: block;
  font-family: var(--f-cond); font-size: 52px; font-weight: 600;
  line-height: .95; letter-spacing: -.01em;
}
.figure span { color: var(--ink-2); font-size: 13.5px; }

.good { color: var(--z2); }
.warn { color: var(--z3); }
.bad  { color: var(--z5); }

/* ---------------- Tabellen ---------------- */

/* Breite Tabellen duerfen scrollen statt sich zu stauchen. Der negative
   Rand plus gleiches Padding sorgt dafuer, dass die Randspalten weiter
   buendig mit dem Panel abschliessen und trotzdem nichts abgeschnitten
   wird, sobald es eng wird. */
.table-scroll {
  overflow-x: auto;
  margin: 0 -24px;
  padding: 0 24px;
  scrollbar-width: thin;
  scrollbar-color: var(--rule-2) transparent;
}
.table-scroll::-webkit-scrollbar { height: 8px; }
.table-scroll::-webkit-scrollbar-thumb {
  background: var(--rule-2); border-radius: 4px;
}
.table-scroll::-webkit-scrollbar-track { background: transparent; }
.table-scroll > table { min-width: 720px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }

th {
  font-family: var(--f-cond); font-weight: 600; font-size: 14.5px;
  color: var(--ink-3); text-align: right;
  padding: 6px 10px; border-bottom: 1px solid var(--rule-2);
  white-space: nowrap;
}
th:first-child, td:first-child { text-align: left; padding-left: 2px; }
th:last-child, td:last-child { padding-right: 2px; }

td {
  text-align: right; padding: 8px 10px;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
tbody tr:hover td { background: var(--bg-2); }
tr.clickable { cursor: pointer; }

.muted { color: var(--ink-3); }
.num { font-variant-numeric: tabular-nums; }

/* ---------------- Bedienelemente ---------------- */

.controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 20px; }

.field { display: flex; flex-direction: column; gap: 4px; }
.field > span {
  font-family: var(--f-cond); font-size: 14px; color: var(--ink-3);
}

select, input[type="password"], input[type="date"] {
  background: var(--bg-3); color: var(--ink);
  border: 1px solid var(--rule-2); border-radius: 2px;
  font-family: var(--f-body); font-size: 14.5px;
  padding: 7px 9px; min-width: 180px;
}

.btn {
  appearance: none; cursor: pointer;
  background: var(--bg-3); color: var(--ink);
  border: 1px solid var(--rule-2); border-radius: 2px;
  font-family: var(--f-body); font-size: 14.5px; font-weight: 500;
  padding: 8px 16px;
}
.btn:hover { border-color: var(--ink-3); }
.btn-primary { background: var(--z3); border-color: var(--z3); color: #16110a; }
.btn-primary:hover { background: #e6c052; border-color: #e6c052; }

.seg { display: inline-flex; border: 1px solid var(--rule-2); border-radius: 2px; overflow: hidden; }
.seg button {
  appearance: none; background: none; border: 0; cursor: pointer;
  color: var(--ink-2); font-family: var(--f-body); font-size: 14px;
  padding: 7px 14px;
}
.seg button + button { border-left: 1px solid var(--rule-2); }
.seg button.is-active { background: var(--bg-3); color: var(--ink); }

/* ---------------- Exportvorschau ---------------- */

.export-grid {
  display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: 36px; align-items: start;
}
#exportCanvas {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--rule-2);
}

/* ---------------- Zustände ---------------- */

.loading, .empty {
  color: var(--ink-3); padding: 40px 0; font-size: 15px;
}
.empty b { display: block; color: var(--ink); font-size: 17px; margin-bottom: 4px; font-weight: 500; }

.error {
  border-left: 2px solid var(--z5); padding: 10px 0 10px 14px;
  color: var(--ink-2); margin: 20px 0;
}

/* ---------------- Anmeldung ---------------- */

.gate { display: grid; place-items: center; min-height: 100vh; }
.gate-box { width: 320px; }
.gate-eyebrow { color: var(--z3); font-family: var(--f-cond); font-size: 17px; margin: 0 0 2px; }
.gate-title { font-family: var(--f-cond); font-size: 40px; font-weight: 600; margin: 0 0 22px; }
.gate form { display: flex; flex-direction: column; gap: 14px; }
.gate .field > span { font-size: 14px; }
.gate input { width: 100%; }
.gate-error { color: var(--z5); font-size: 14px; margin: 0; }

/* ---------------- Kleine Bildschirme ---------------- */

@media (max-width: 900px) {
  .split, .export-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .rail { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; padding-top: 20px; }
  /* Nicht stauchen, sondern schieben lassen. Bei 350 px Breite würde der
     Ausschnitt sonst auf ein Drittel gequetscht und jede Beschriftung
     unlesbar. */
  .band .wrap { overflow-x: auto; padding-right: 0; }
  .band svg { width: 900px; height: 170px; }
  .wrap { padding: 0 16px; }
  main { padding-top: 28px; }
  .figure b { font-size: 42px; }
  .table-scroll { margin: 0 -16px; padding: 0 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}


/* ---------------- Vorschlaege ---------------- */

.vorschlag {
  border-top: 1px solid var(--rule);
  padding: 18px 0 20px;
}
.vorschlag:last-of-type { border-bottom: 1px solid var(--rule); }

.v-kopf { display: flex; align-items: baseline; gap: 14px; }
.v-kopf h3 {
  font-family: var(--f-cond); font-size: 20px; font-weight: 600; margin: 0;
}
.v-delta {
  margin-left: auto;
  font-family: var(--f-cond); font-size: 26px; font-weight: 600;
  color: var(--z3);
}
.v-grund { margin: 2px 0 10px; color: var(--ink-3); font-size: 13.5px; }
.v-zeilen { display: flex; flex-direction: column; gap: 2px; font-size: 14.5px; }
.v-befund {
  margin: 10px 0 12px; padding-left: 12px;
  border-left: 2px solid var(--z2); color: var(--ink-2); font-size: 14px;
}

/* Die aktuelle Zeile wird ueber Farbe markiert, nicht ueber einen
   Balken: die erste Spalte hat kein linkes Padding, ein Innenschatten
   laege dort direkt auf dem Text. */
tr.jetzt td { background: var(--bg-2); }
tr.jetzt td:first-child { color: var(--z3); font-weight: 500; }

/* ---------------- Bildunterschriften ---------------- */

.caption { border-top: 1px solid var(--rule); padding: 14px 0; }
.caption-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.caption-kopf b {
  font-family: var(--f-cond); font-size: 16px; color: var(--ink-3);
  text-transform: lowercase; font-weight: 600;
}
.caption-kopf .btn { margin-left: auto; padding: 4px 12px; font-size: 13px; }
.caption p { margin: 0; font-size: 14.5px; line-height: 1.55; }
.caption-fuss { font-size: 13px; margin-top: 16px; }

#zahlenBlock { margin-bottom: 8px; }


/* ---------------- Mehrere Ziele in der Kopfzeile ---------------- */

.countdown i {
  display: inline-block; width: 1px; height: 13px;
  background: var(--rule-2); margin: 0 12px; vertical-align: baseline;
}

/* ---------------- Roth ---------------- */

.annahmen { margin-top: 18px; }
.annahmen summary {
  cursor: pointer; color: var(--ink-3); font-size: 14px;
  padding: 8px 0; list-style: none;
}
.annahmen summary::-webkit-details-marker { display: none; }
.annahmen summary::before { content: "▸ "; }
.annahmen[open] summary::before { content: "▾ "; }
.annahmen summary:hover { color: var(--ink); }
.annahmen table { margin-top: 6px; }
.annahmen td { font-size: 13.5px; padding: 5px 10px; }

.tabellen-fuss { font-size: 13px; margin-top: 12px; }

/* ---------------- Reihen ein- und ausschalten ---------------- */

.chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }

.chips button {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  background: none; color: var(--ink-3);
  border: 1px solid var(--rule); border-radius: 2px;
  font-family: var(--f-body); font-size: 13.5px;
  padding: 6px 11px;
}
.chips button:hover { border-color: var(--rule-2); color: var(--ink-2); }

.chips button i {
  width: 9px; height: 9px; border-radius: 1px;
  opacity: .3; flex: none;
}

/* Eingeschaltet: volle Farbe im Punkt, heller Text. Ausgeschaltet bleibt
   der Punkt sichtbar, damit die Zuordnung zur Farbe im Diagramm erhalten
   bleibt - nur eben gedimmt. */
.chips button.is-active {
  color: var(--ink);
  border-color: var(--rule-2);
  background: var(--bg-2);
}
.chips button.is-active i { opacity: 1; }

/* Zwischenüberschriften der Disziplinkurven */
.disziplin-kopf {
  font-family: var(--f-cond); font-size: 15px; font-weight: 600;
  color: var(--ink-3); margin: 22px 0 6px;
}
.disziplin-kopf:first-of-type { margin-top: 4px; }

/* ---------------- Zeitanteile in der Schiene ---------------- */

table.anteile { margin-top: 8px; }
table.anteile th {
  font-size: 13px; padding: 4px 6px; white-space: nowrap;
}
table.anteile td { padding: 6px; font-size: 13.5px; }
table.anteile th:first-child, table.anteile td:first-child { padding-left: 0; }
table.anteile th:last-child, table.anteile td:last-child { padding-right: 0; }

.hinweis { font-size: 12.5px; line-height: 1.45; margin: 10px 0 0; }
.hinweis code {
  font-family: var(--f-body); color: var(--ink-2);
  background: var(--bg-3); padding: 0 4px; border-radius: 2px;
}

/* ---------------- Befunde ---------------- */

.befund { border-top: 1px solid var(--rule); padding: 16px 0; }
.befund:last-child { border-bottom: 1px solid var(--rule); }

.befund-kopf { display: flex; align-items: baseline; gap: 10px; }
.befund-kopf h3 {
  font-family: var(--f-cond); font-size: 19px; font-weight: 600; margin: 0;
}
.befund-kopf .punkt { font-size: 11px; line-height: 1; }
.befund.bad  .punkt { color: var(--z5); }
.befund.warn .punkt { color: var(--z3); }
.befund.good .punkt { color: var(--z2); }

.befund-wert {
  margin-left: auto;
  font-family: var(--f-cond); font-size: 21px; font-weight: 600;
  white-space: nowrap;
}
.befund.bad  .befund-wert { color: var(--z5); }
.befund.warn .befund-wert { color: var(--z3); }
.befund.good .befund-wert { color: var(--ink-2); }
.befund-wert .muted { font-size: 16px; }

.befund p {
  margin: 6px 0 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.55;
  max-width: 62ch;
}

/* Wettkampfwochen in der Wochentabelle */
tr.wettkampf td { background: rgba(210, 69, 60, .10); }
tr.wettkampf td:first-child { color: var(--z5); font-weight: 500; }

/* ---------------- Wettkämpfe pflegen ---------------- */

/* Eigener Reiter, also volle Breite. Als Raster statt Flexbox, damit die
   Felder in Spalten stehen bleiben und nicht bei jeder Fensterbreite neu
   umbrechen. */
.wk-form {
  display: grid;
  grid-template-columns: 160px minmax(200px, 1fr) 150px 110px 130px 130px;
  gap: 14px;
  align-items: end;
  padding: 18px; margin-bottom: 6px;
  background: var(--bg-2); border: 1px solid var(--rule);
}
.wk-form .field > span { font-size: 13px; }
.wk-form input, .wk-form select { min-width: 0; width: 100%; }
.wk-form .breit { grid-column: 1 / -1; }
.wk-knoepfe { grid-column: 1 / -1; display: flex; gap: 8px; }

@media (max-width: 1000px) {
  .wk-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .wk-form { grid-template-columns: minmax(0, 1fr); }
}

.btn-klein { padding: 4px 10px; font-size: 13px; }

#wkMeldung .error { margin-top: 0; }