/* ruderstatistik.css — Layer: pages (lädt nur beim Template ruderstatistik).
 * Mitgliederbereich: Kennzahlen, Jahreskurve, Kalender-Heatmap, Ranglisten.
 * Farbrampen ausschließlich per color-mix aus den Tokens (frgs-red / ink). */
@layer pages {

/* -----------------------------------------------------
 * Ruderstatistik (Mitgliederbereich)
 * Farbrampen ausschließlich aus Tokens (frgs-red / ink) via color-mix.
 * ----------------------------------------------------- */

.stats-stand { font-variant-numeric: tabular-nums; }

.stats-leer {
  padding: var(--sp-8); text-align: center; color: var(--color-text-muted);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.stats-figures {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--color-border); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); overflow: hidden; margin-block-end: var(--sp-6);
}
.stats-figure { background: var(--color-surface); padding: var(--sp-4) var(--sp-6); }
.stats-figure-wert {
  display: block; font-family: var(--font-display); font-size: var(--fs-3xl);
  color: var(--frgs-red-dark); font-variant-numeric: tabular-nums; line-height: var(--lh-tight);
}
.stats-figure-wert small { font-size: 0.4em; color: var(--color-text-muted); margin-inline-start: 0.2em; }
.stats-figure-label { display: block; margin-block-start: var(--sp-2); font-size: var(--fs-sm); color: var(--color-text-muted); }

.stats-panel {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: var(--sp-6); margin-block-end: var(--sp-6);
  /* Grid-Kind (Elternteil .stats-cols) hat ohne diese Zeile implizit
   * min-width: auto und schrumpft daher nie unter seine Inhaltsbreite —
   * die max-content-breite Heatmap (.stats-cal-gitter) würde das Panel
   * und damit die ganze Seite aufblähen, statt in ihrem eigenen
   * .stats-cal-scroll (overflow-x: auto) zu scrollen. */
  min-width: 0;
}
.stats-panel > h2 {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--color-text-muted); margin-block-end: var(--sp-4);
  display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
}
.stats-hint { text-transform: none; letter-spacing: 0; font-weight: 400; }

.stats-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
@media (max-width: 720px) {
  .stats-cols, .stats-figures { grid-template-columns: 1fr; }
}

.stats-kurve { width: 100%; height: auto; display: block; }
.stats-kurve-linie { fill: none; stroke: var(--frgs-red); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.stats-kurve-vorjahr { fill: none; stroke: var(--ink-300); stroke-width: 1.5; stroke-dasharray: 4 4; }
.stats-kurve-grid { stroke: var(--color-border); stroke-width: 1; }
.stats-kurve-tick { fill: var(--color-text-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.stats-kurve-tick-haupt { font-size: 11.5px; font-weight: 600; fill: var(--ink-700); }
.stats-kurve-tick-rest { font-size: 8px; fill: var(--ink-300); }

.stats-cal-scroll { overflow-x: auto; }
.stats-cal-gitter {
  --stats-cal-zelle: 13px;
  display: grid; grid-template-columns: max-content max-content;
  column-gap: var(--sp-2); row-gap: var(--sp-1);
  width: max-content;
}
.stats-cal-monate {
  grid-column: 2;
  display: grid; grid-template-columns: repeat(var(--cal-wochen), var(--stats-cal-zelle)); gap: 3px;
  font-size: var(--fs-xs); color: var(--color-text-muted); line-height: 1.2;
}
.stats-cal-monate span { white-space: nowrap; }
.stats-cal-wtage {
  grid-row: 2; grid-column: 1;
  display: grid; grid-template-rows: repeat(7, var(--stats-cal-zelle)); gap: 3px;
  font-size: var(--fs-xs); color: var(--color-text-muted);
}
.stats-cal-wtage span { line-height: var(--stats-cal-zelle); }
.stats-cal-wtage span:nth-child(1) { grid-row: 1; }
.stats-cal-wtage span:nth-child(2) { grid-row: 3; }
.stats-cal-wtage span:nth-child(3) { grid-row: 5; }
.stats-cal {
  grid-row: 2; grid-column: 2;
  display: grid; grid-auto-flow: column;
  grid-template-rows: repeat(7, var(--stats-cal-zelle)); grid-auto-columns: var(--stats-cal-zelle);
  gap: 3px;
}
.stats-cal-zelle { width: var(--stats-cal-zelle); height: var(--stats-cal-zelle); border-radius: 2px; background: var(--ink-100); }
.stats-cal-leer { background: transparent; }
.stats-cal-l0 { background: var(--ink-100); }
.stats-cal-l1 { background: color-mix(in srgb, var(--frgs-red) 25%, var(--ink-050)); }
.stats-cal-l2 { background: color-mix(in srgb, var(--frgs-red) 50%, var(--ink-050)); }
.stats-cal-l3 { background: var(--frgs-red); }
.stats-cal-l4 { background: var(--frgs-red-dark); }
.stats-cal-legende {
  display: flex; align-items: center; gap: var(--sp-1); margin-block-start: var(--sp-3);
  font-size: var(--fs-xs); color: var(--color-text-muted);
}
.stats-cal-legende .stats-cal-zelle { width: 12px; height: 12px; }

.stats-bars { display: flex; flex-direction: column; gap: var(--sp-2); }
.stats-bar-row {
  display: grid; grid-template-columns: 9rem 1fr auto; align-items: center;
  gap: var(--sp-3); font-size: var(--fs-sm);
}
.stats-bars--personen .stats-bar-row { grid-template-columns: auto 9rem 1fr auto; }
.stats-bar-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stats-bar-track { height: 20px; background: var(--ink-100); border-radius: var(--radius-sm); overflow: hidden; }
.stats-bar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--frgs-red-dark), var(--frgs-red)); border-radius: var(--radius-sm); }
.stats-bars--personen .stats-bar-fill { background: linear-gradient(90deg, var(--ink-700), var(--ink-500)); }
.stats-bar-num { font-variant-numeric: tabular-nums; color: var(--color-text-muted); min-width: 4.5rem; text-align: right; }
.stats-bar-rang {
  color: var(--color-text-muted); font-variant-numeric: tabular-nums;
  min-width: 2.2ch; text-align: right;
}
.stats-mehr { display: flex; flex-direction: column; gap: var(--sp-2); }
.stats-mehr > summary {
  cursor: pointer; font-weight: 600; color: var(--color-text); padding: var(--sp-1) 0;
}

.stats-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-3); }
.stats-badge {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); align-items: start;
  padding: var(--sp-3) var(--sp-4); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); background: var(--color-surface);
}
.stats-badge-medal { display: flex; flex-direction: column; align-items: center; width: 52px; }
.stats-badge-medal-face {
  position: relative; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: var(--fs-lg); color: var(--white);
  background: linear-gradient(135deg, var(--frgs-red-dark), var(--frgs-red));
}
.stats-badge-medal-face::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%;
  border: 1.5px dashed rgb(255 255 255 / 55%);
}
.stats-badge-medal-face svg {
  width: 27px; height: 27px; position: relative;
  fill: none; stroke: var(--white); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.stats-badge-medal-band { display: flex; gap: 2px; margin-block-start: -6px; }
.stats-badge-medal-band i {
  width: 9px; height: 14px; background: var(--frgs-red-dark);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);
}
.stats-badge--schwelle .stats-badge-medal-face { background: linear-gradient(135deg, var(--ink-700), var(--ink-500)); }
.stats-badge--schwelle .stats-badge-medal-band i { background: var(--ink-700); }
.stats-badge-titel { font-weight: 700; font-size: var(--fs-sm); }
.stats-badge-halter { font-size: var(--fs-sm); color: var(--frgs-red-dark); }
.stats-badge--schwelle .stats-badge-halter { color: var(--ink-700); }
.stats-badge-basis { font-size: var(--fs-xs); color: var(--color-text-muted); margin-block-start: var(--sp-1); }
.stats-badge-mehr summary { cursor: pointer; list-style: none; }
.stats-badge-mehr summary::-webkit-details-marker { display: none; }
.stats-badge-plus { color: var(--color-text-muted); text-decoration: underline; }
.stats-badge-mehr[open] .stats-badge-plus { display: none; }

/* Basis-Look (Rahmen, Hintergrund, Radius, Summary) kommt aus .frgs-legende
 * in components.css; hier bleibt nur die seitenspezifische Listenform. */
.stats-legende ul { margin-block-start: var(--sp-3); padding-inline-start: 1.2em; display: grid; gap: var(--sp-2); }

.stats-report h3 { font-size: var(--fs-sm); margin-block: var(--sp-3) var(--sp-1); }
.stats-report ul { font-size: var(--fs-sm); color: var(--color-text-muted); padding-inline-start: 1.2em; }

/* Fahrtenbuch: aufklappbare Volltabelle. Token-Namen aus dem Brief existieren
 * nicht 1:1 in tokens.css — Ersatz: --farbe-akzent → --color-accent,
 * --farbe-linie → --color-border, --schrift-klein → --fs-sm,
 * --abstand-xs/-s → --sp-1/--sp-3 (wie an anderer Stelle in dieser Datei). */
.stats-fahrtenbuch > summary {
    cursor: pointer; color: var(--color-accent); padding: var(--sp-1) 0;
}
.stats-fahrtenbuch-scroll { overflow-x: auto; }
.stats-fahrtenbuch table {
    width: 100%; border-collapse: collapse; font-size: var(--fs-sm);
}
.stats-fahrtenbuch th,
.stats-fahrtenbuch td {
    text-align: left; padding: var(--sp-1) var(--sp-3);
    border-bottom: 1px solid var(--color-border); white-space: nowrap;
}
.stats-fahrtenbuch td:nth-child(3) {
    white-space: normal; /* Mannschaft darf umbrechen */
}
.stats-fb-km { text-align: right; font-variant-numeric: tabular-nums; }

} /* Ende @layer pages */