/* stats.css – Auswertung-Tab (S87, Backlog #81) */

.stats-view {
  padding: var(--space-md);
}

.stats-view__title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-lg);
}

/* Blockabstand über eine Trennlinie statt über Weißraum allein: die vier Blöcke
   tragen sehr unterschiedliche Zeilenformen (Baumliste, Fließtext, Wertzeilen),
   und ohne Kante liest sich der Übergang als Fortsetzung. Dieselbe Bauform wie
   die Abschnitte in settings.css — erster Block ohne Linie, weil darüber die
   Überschrift steht. */
.stats-block + .stats-block {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.stats-block__title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

/* Die tragende Zahl eines Blocks. Größer als der Fließtext, aber kleiner als
   der Seitentitel — sie ist die Antwort auf die Frage des Blocks, nicht die
   Überschrift der Seite. */
.stats-headline {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text);
}

.stats-headline--small {
  font-size: var(--font-size-base);
  font-weight: 500;
  margin-top: var(--space-sm);
}

.stats-note {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-xs);
}

/* Der einzige Hinweis der Seite mit einer Handlung dahinter: Pflanzen ohne
   Artzuordnung verlieren Winterwerte, Düngemonate und Gefäß-Warnung. Er nutzt
   die Ruhefläche aus tasks.css/settings.css und kein eigenes Warnorange — es
   ist kein Fehler, sondern ein Zustand, den man verbessern kann. Linker Balken
   wie .form-field__warning, damit die Form im Projekt wiedererkennbar bleibt. */
.stats-note--action {
  display: block;
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-primary-bg);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--color-text);
}

.stats-note__hint {
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* ─── Baumliste: Standorte mit Räumen, Arten ─────────────────────────────── */

.stats-tree {
  margin-top: var(--space-sm);
}

.stats-tree__space,
.stats-tree__room {
  display: flex;
  align-items: baseline;
  padding: 6px 0;
}

/* Der Name schrumpft und kappt, wenn er muss — aber er wächst nicht: die
   Punktreihe daneben soll den Rest füllen. `flex: 0 1 auto` statt `flex: 1`,
   sonst nimmt der Name die ganze Zeile und die Punkte hätten keinen Platz. */
.stats-tree__name {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Die Führungspunkte sind ein EIGENES Element und kein ::after am Namen.
   Die erste Fassung hatte sie als Pseudo-Element im Namens-Span — und weil
   der `overflow: hidden` plus `text-overflow: ellipsis` trägt, wurde die
   Punktlinie gekappt und durch ein Auslassungszeichen ersetzt: aus „Zuhause"
   wurde „Zuhause…", und die Liste sah aus, als wären alle Namen zu lang.
   Die DOM-Messung meldete dazu nichts Auffälliges — kein Überlauf, alle
   Elemente sichtbar. Gefunden hat es erst der Screenshot.

   Zweck der Punkte: bei einer Liste aus Name-Zahl-Paaren muss das Auge sonst
   quer über eine leere Fläche springen, um die zugehörige Zahl zu finden. */
.stats-tree__dots {
  flex: 1 1 auto;
  min-width: var(--space-md);
  margin: 0 var(--space-sm);
  border-bottom: 1px dotted var(--color-border);
  transform: translateY(-4px);
}

.stats-tree__count {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  flex-shrink: 0;
}

/* Räume rücken ein und werden leiser: sie sind eine Aufschlüsselung ihres
   Standorts, keine gleichrangige Zeile.

   Die Liste liegt als Geschwister der Standortzeile in einer .stats-tree__group
   und nicht in der Zeile selbst — als Kind eines Flex-Containers landete sie
   sonst RECHTS neben dem Standort statt darunter. Auch das hat erst der
   Screenshot gezeigt. */
.stats-tree__rooms {
  margin-left: var(--space-md);
}

.stats-tree__room {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  padding: 3px 0;
}

.stats-tree__room .stats-tree__count {
  font-weight: 500;
}

/* Die Sammelzeile "Ohne Artangabe" ist keine Art. Sie steht gedämpft und
   abgesetzt UNTER der Kappungszeile — in der ersten Fassung stand sie
   zwischen den drei häufigsten Arten und dem „und 9 weitere" und las sich
   damit als vierter Platz einer Rangliste, zu der sie nicht gehört. */
.stats-tree__space--muted {
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
}

/* ─── Gießvorgänge ───────────────────────────────────────────────────────── */
/* Eigene Bauform statt .stats-row, weil die Rollen hier andere sind: die
   Wochenzahl ist die Aussage und gehört nach vorn, der Winterwert ist ihr
   Nachsatz. Über .stats-row gebaut stand die Hauptzahl klein und grau als
   „Label" und „Im Winter sind es 7,5." fett darunter — die Gewichtung genau
   verkehrt herum, sichtbar erst im Screenshot. */

.stats-runs__value {
  display: block;
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text);
}

.stats-runs__winter {
  display: block;
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* ─── Wertzeilen: Pflege und Rekorde ─────────────────────────────────────── */

.stats-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Jede Zeile ist ein eigener Block mit drei gestapelten Elementen. Das
   `display: block` auf Label und Wert ist der Kern und kein Beiwerk: in S86 ist
   an genau dieser Stelle ein Wert mit seinem Hinweis zu einem Absatz
   zusammengeflossen, weil zwei Spans ohne eigenes display inline bleiben. Die
   DOM-Messung meldete beide als vorhanden und sichtbar — sichtbar waren sie
   auch, nur eben in einer Zeile. */
.stats-row {
  display: flex;
  flex-direction: column;
}

.stats-row__label {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.stats-row__value {
  display: block;
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-text);
  margin-top: 2px;
}

.stats-row__hint {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-xs);
}

/* ─── Leerzustand ────────────────────────────────────────────────────────── */
/* Gleiche Bauform wie .plants-empty und .tasks-empty, inklusive der 52 px des
   Zeichens — der Leerzustand ist hier Normalfall und soll aussehen wie überall
   sonst in der App, nicht wie ein Sonderfall dieser Seite. */

.stats-empty {
  text-align: center;
  padding: var(--space-xl) var(--space-md);
}

.stats-empty__icon {
  font-size: 52px;
  line-height: 1;
  margin-bottom: var(--space-md);
}

.stats-empty__headline {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-bottom: var(--space-sm);
}

.stats-empty__text {
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
}