/* Der Dashboard-Bereich im Design der Vorseite.
 *
 * Gilt fuer alle drei Seiten der Unternavigation - dashboard.html ("Jetzt"),
 * ausfluege.html und bilanz.html. Sie teilen sich ein Skript (dashboard.js)
 * und ihre Bauteile; getrennte Stylesheets waeren drei Dateien, die
 * auseinanderlaufen.
 *
 * SEIT DEM 06.08.2026 NUR NOCH DAS BESONDERE: Farbwerte, Kopf, Navigation,
 * Karten, Knoepfe, Fenster und Fussleiste stehen in app-design.css und gelten
 * fuer alle App-Seiten. Was hier steht, unterscheidet das Dashboard von den
 * uebrigen - vor allem der Datensatz-Umschalter, der die ganze Seite faerbt,
 * und die Bauteile der Bilanz.
 *
 * REIHENFOLGE IM HTML: styles.css, vorseite-design.css, app-design.css,
 * dashboard-design.css. Diese Datei ueberschreibt alle drei und muss deshalb
 * zuletzt stehen. body.dashboard-body und body.app-body sind gleich stark
 * (je ein Element und eine Klasse) - es entscheidet also allein, dass diese
 * Datei spaeter geladen wird.
 *
 * WAS EINE NEUE KARTE HIER BRAUCHT: nichts, solange sie nur --surface, --ink,
 * --accent und Freunde benutzt. Angefasst wird nur, was eine feste Form hat
 * (Radien, Schriftschnitte) oder was eine Farbe hart im Wert stehen hat.
 *
 * Klassennamen bleiben, wie sie waren: dashboard.js und naturkalender.js
 * bauen ihre Elemente mit den Klassen aus styles.css.
 */

/* ---------- Spaltenbreite ---------- */

/* Schmaler als die Artenseiten: Hier stehen Karten mit Text und Diagrammen
   untereinander, kein Fotoraster. Ueber 60rem laufen die Zeilen zu lang. */
body.dashboard-body { --spalte: 60rem; }

/* ---------- Datensatz-Umschalter ---------- */

/* Der Umschalter faerbt die ganze Seite - dieselbe Zuordnung wie die drei
   Kacheln auf der Startseite und die drei Artenseiten: Voegel Terrakotta,
   Pflanzen Salbei, Saeugetiere Sand. dashboard.js setzt data-dataset am body.

   Muss die Klasse tragen: die Regeln in styles.css (body[data-dataset=...])
   sind gleich stark, gewaennen also ueber die Reihenfolge - aber nur, solange
   diese Datei zuletzt geladen wird. Mit der Klasse davor ist die Frage
   entschieden, egal wie jemand die Stylesheets sortiert. */
body.dashboard-body[data-dataset="pflanzen"] {
  --accent: var(--color-accent-2-700);
  --accent-soft: var(--color-accent-2-300);
}
body.dashboard-body[data-dataset="saeugetiere"] {
  --accent: var(--color-neutral-700);
  --accent-soft: var(--color-neutral-300);
}

/* Nachts geht der Akzent ans andere Ende der Rampe, wie in app-design.css. */
html[data-thema="dunkel"] body.dashboard-body[data-dataset="pflanzen"] {
  --accent: var(--color-accent-2-400);
  --accent-soft: var(--color-accent-2-900);
}
/* Beim Sand eine Stufe frueher: neutral-900 ist nachts die Kartenflaeche
   (--surface), ein Flaechenton in derselben Farbe waere keiner. */
html[data-thema="dunkel"] body.dashboard-body[data-dataset="saeugetiere"] {
  --accent: var(--color-neutral-400);
  --accent-soft: var(--color-neutral-800);
}

/* ---------- Navigationen ---------- */

/* Die Unternavigation ist EIN zusammenhaengender Schalter (drei Segmente in
   einem Rahmen), der Datensatz-Umschalter darunter bleibt bei den lockeren
   Pillen mit Emoji. Vorher waren beide zwei gleich aussehende Pillenreihen
   mit je einer gefuellten Pille - was Seite und was Filter ist, war
   Rateaufgabe. Gedeckelt auf 26rem: Ueber die volle 60rem-Spalte gestreckt
   waere der Schalter ein Balken, kein Bedienelement. */
body.dashboard-body .dashboard-subnav {
  gap: 0.25rem;
  margin-bottom: var(--leading);
  max-width: 26rem;
  padding: 0.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
}
body.dashboard-body .dashboard-subnav a {
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
  border: 0;
  background: transparent;
}
body.dashboard-body .dashboard-subnav a:hover { color: var(--ink); }
body.dashboard-body .dashboard-subnav a.active,
body.dashboard-body .dataset-filter button.active {
  color: var(--color-bg);
}
body.dashboard-body .dashboard-subnav a.active { background: var(--accent); }

body.dashboard-body .dashboard-toolbar { margin-bottom: var(--leading); }
body.dashboard-body .dataset-filter { gap: 0.5rem; }

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

/* Gefuellte Knoepfe in den Karten. Die Schriftfarbe kommt aus app-design.css,
   hier nur der Zuschnitt. */
body.dashboard-body .einstieg-link,
body.dashboard-body .heute-link,
body.dashboard-body .ausflug-link {
  padding: 0.55rem 1.1rem;
}

/* --- "Heute lohnt sich" --- */

/* Aus dem 3px-Streifen am linken Rand wird eine Flaeche: Der Entwurf arbeitet
   mit farbigen Feldern statt mit Randmarkierungen (Vorseite: .seed, Startseite:
   die drei Kacheln). Ohne Rahmen, weil eine gefuellte Flaeche keinen braucht. */
body.dashboard-body .karte-heute {
  border: 0;
  background: var(--accent-soft);
}
/* Zwei Kinder holten sich bisher genau diesen Flaechenton und waeren jetzt
   unsichtbar: der Monats-Chip und die Spur des Fortschrittsbalkens. */
body.dashboard-body .karte-heute .heute-monat {
  background: var(--surface);
}
body.dashboard-body .karte-heute .heute-balken {
  background: color-mix(in srgb, var(--color-text) 14%, transparent);
}
body.dashboard-body .karte-heute .heute-frist {
  border-color: transparent;
  border-radius: 1.25rem;
}

/* --- Einstieg (erster Besuch) --- */

body.dashboard-body .karte-einstieg {
  border-color: transparent;
}

/* --- Naturkalender --- */

body.dashboard-body .nk-abo { margin-top: var(--leading); padding-top: var(--half); }
body.dashboard-body .nk-subhead {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--accent);
}

/* --- Art des Tages --- */

body.dashboard-body .tagesart-foto { border-radius: 1.25rem; }
body.dashboard-body .tagesart-name {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 1.05rem;
}

/* --- Jahresuhr --- */

/* Runde Saeulenkoepfe statt der 4px-Ecken: dieselbe weiche Form wie die Kreise
   und Pillen des Entwurfs. */
body.dashboard-body .uhr-saeule,
body.dashboard-body .uhr-saeule-fill { border-radius: 999px 999px 0 0; }

/* --- Ausflug-Anreisser --- */

body.dashboard-body .ausflug-titel {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 1.05rem;
  line-height: 1.25;
}

/* --- Weiterfuehrende Kacheln am Seitenende --- */

body.dashboard-body .dashboard-weiter { gap: var(--half); margin-top: var(--leading); }
body.dashboard-body .dashboard-weiter a {
  padding: var(--half) 1.1rem;
  border-radius: 1.5rem;
}

/* ==========================================================================
   Ausfluege (ausfluege.html)
   ========================================================================== */

/* Ein Vorschlag ist ein Kasten in der Karte - dieselbe Rundung wie die
   Kacheln am Seitenende, eine Stufe kleiner als die Karte um ihn herum. */
body.dashboard-body .ausflug {
  border-radius: 1.5rem;
  padding: var(--half) 1.1rem calc(1.2 * var(--half));
}
body.dashboard-body .gap-item { border-radius: 1.25rem; }
body.dashboard-body .gap-photo { border-radius: 0.9rem; }
body.dashboard-body .gap-season { border-radius: 1.25rem; }

body.dashboard-body .region-kachel {
  border-radius: 1.25rem;
  border-color: transparent;
  padding: var(--half) 1rem;
}

/* ==========================================================================
   Bilanz (bilanz.html)
   ========================================================================== */

/* --- Zeitraum-Gruppe und Kacheln --- */

/* Die Klammer um Kacheln und Tagesdiagramm bleibt, wird aber weicher: Sie
   soll die Reichweite des Filters zeigen, nicht die Seite teilen. */
body.dashboard-body .zeitraum-gruppe {
  border-left-color: var(--accent-soft);
  border-left-width: 3px;
  margin-bottom: var(--leading);
}
/* Die Zeile ist ein Etikett und kein Kapitel: Caprasimo faellt bei 0,8rem in
   Grossbuchstaben auseinander, sie behaelt deshalb die Textschrift. Dieselbe
   Entscheidung wie bei .nk-subhead und .schutz-subhead. */
body.dashboard-body .zeitraum-titel {
  font-family: var(--font-body);
  letter-spacing: 0.06em;
  color: var(--accent);
}

/* Am Desktop stehen Lebensraeume und Bestenliste nebeneinander; der Abstand
   dazwischen ist derselbe, den die Karten sonst untereinander halten. */
@media (min-width: 860px) {
  body.dashboard-body .dashboard-columns {
    gap: var(--leading);
    margin-bottom: var(--leading);
  }
}

body.dashboard-body .stat-tiles { margin-bottom: var(--leading); }
/* Zahlen in Caprasimo - der Platz, an dem auf der Vorseite die grossen Worte
   stehen und auf der Startseite die Artenzahl im Kreis. Die Kacheln selbst
   bringen das aus app-design.css schon mit (das Profil zeigt dieselben); hier
   kommen die drei uebrigen Kennzahl-Stellen der Bilanz dazu, damit alle vier
   als eine Familie lesen. */
body.dashboard-body .curve-fact-value,
body.dashboard-body .vielfalt-wert,
body.dashboard-body .region-wert {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.15;
}
body.dashboard-body .jahresstart {
  border-color: transparent;
  border-radius: 1.25rem;
  padding: var(--half) 1rem;
}

/* --- Tagesdiagramm --- */

/* Runde Balkenkoepfe wie an der Jahresuhr auf der Jetzt-Seite. Bei sehr
   kurzen Balken staucht der Browser den Radius von selbst mit. */
body.dashboard-body .chart-bar { border-radius: 999px 999px 0 0; }
body.dashboard-body .chart-tooltip { border-radius: 0.75rem; }
body.dashboard-body .card-close { border-radius: 999px; }
body.dashboard-body .day-detail-item { border-radius: 1rem; }

/* --- Sammelkurve --- */

body.dashboard-body .curve-fact {
  border-radius: 1.25rem;
  padding: var(--half) 1rem;
}
/* Die Flaeche unter der Kurve nimmt eine halbe Karte ein - der volle
   Flaechenton (Stufe 300) war dort die lauteste Farbe der ganzen Seite und
   ueberstimmte die Kurve, um die es geht. Die schmalen Spuren der Balken
   (Lebensraeume, Bestenliste, Jahresuhr) behalten ihn: dort ist es ein
   Streifen und keine Flaeche. */
body.dashboard-body .curve-area {
  fill: color-mix(in srgb, var(--accent-soft) 55%, var(--surface));
}

/* --- Naturschutz --- */

body.dashboard-body .schutz-subhead {
  font-family: var(--font-body);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
}

/* --- Export --- */

body.dashboard-body .range-filter button.active { color: var(--color-bg); }
body.dashboard-body .export-btn { padding: 0.6rem 1.2rem; }

/* ---------- Telefon ----------
   Muss NACH den Grundregeln stehen: eine Medienabfrage hat keine hoehere
   Spezifitaet, es entscheidet die Reihenfolge. */

@media (max-width: 699.98px) {
  body.dashboard-body .dashboard-subnav { margin-bottom: var(--half); }
}