/* chart.css — die Diagramme.
 *
 * Gehoert zu assets/js/chart.js. Die Aufteilung ist scharf:
 *
 *   Geometrie, Schriftgroesse, Linienstaerken -> JavaScript (PX)
 *   Farben, Deckkraft, Rahmen, Hoehe          -> diese Datei
 *
 * Der Grund steht in chart.js: die Raender werden aus der Schriftgroesse
 * gerechnet. Stuende sie zusaetzlich hier, verschoebe eine Aenderung im
 * Stylesheet die Beschriftung unter die Kurve, ohne dass irgendetwas meldet.
 * Deshalb setzt diese Datei weder `font-size` noch `stroke-width` an den
 * Diagrammelementen.
 *
 * Namensraum: Variablen --app- , Klassen .app- .
 * (Mit Leerzeichen geschrieben: die Zeichenfolge Stern-Schrägstrich schlösse
 * diesen Kommentar mitten im Satz.)
 */

:root {
    /* Hoehe der Zeichenflaeche. Der Container braucht eine vom Inhalt
     * unabhaengige Hoehe — sonst misst sich das Diagramm an sich selbst. */
    --app-chart-h: 240px;

    --app-chart-grid: #dfe3e9;
    --app-chart-axis: #5c6470;
    /* Der Tooltip steht bewusst im Gegenlicht zur Seite — er muss sich vom
     * Diagramm abheben, ueber dem er liegt. Ein Fast-Schwarz tat das zu hart:
     * es war der dunkelste Fleck einer Seite, deren Text selbst nur #16191f
     * ist. Ein dunkles Grau hebt genauso ab und faellt nicht aus dem Blatt. */
    --app-chart-tip-bg: #39404d;
    --app-chart-tip-fg: #ffffff;
}

/* Drei Zustaende, nicht zwei — dieselbe Form wie in `base.css` und aus
 * demselben Grund. Faehlte hier die zweite Haelfte, waere ein ausdrueckliches
 * „hell" auf einem dunklen Geraet eine Seite mit hellen Karten und dunklen
 * Diagrammachsen. `tests/test_ansicht.php` prueft beide Bloecke gegeneinander,
 * damit sie nicht auseinanderlaufen. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="hell"]) {
        --app-chart-grid: #2a303a;
        --app-chart-axis: #98a2b3;
        --app-chart-tip-bg: #e8eaee;
        --app-chart-tip-fg: #0e1117;
    }
}

:root[data-theme="dunkel"] {
    --app-chart-grid: #2a303a;
    --app-chart-axis: #98a2b3;
    --app-chart-tip-bg: #e8eaee;
    --app-chart-tip-fg: #0e1117;
}

/* --- Die Zeichenflaeche ---------------------------------------------------- */

.app-chart {
    position: relative;   /* Bezugsrahmen des Tooltips */
    width: 100%;
    height: var(--app-chart-h);
    /* Ohne diese Zeile waechst der Container in einem Grid-Feld mit seinem
     * Inhalt statt sich der Spalte zu fuegen — und das Diagramm misst dann
     * eine Breite, die es selbst erzeugt hat. */
    min-width: 0;
}

/* Die Messpunkt-Kurzkarte (NEUBAU_PLAN 6.1): dieselbe Zeichenklasse, nur
 * niedrig und ohne die 1rem Innenabstand, die eine große Karte braucht. Der
 * kompakte Modus selbst (kein Gitter, keine Achsen) steckt in chart.js
 * (`spec.compact`), nicht hier — diese Regel setzt nur die Höhe. */
.app-chart-sparkline {
    height: 2.75rem;
}

.app-chart-svg {
    display: block;   /* sonst sitzt unter dem SVG die Zeilenschulter */
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* --- Achsen und Gitter ----------------------------------------------------- */

.app-chart-grid {
    stroke: var(--app-chart-grid);
    stroke-width: 1;
}

/* Tagesgrenze, Monatserster, Jahreswechsel: dieselbe Linie, nur kraeftiger.
 * Die Altfassung zeichnete dafuer eine zusaetzliche gestrichelte Linie und
 * musste deren Beschriftung gegen die regulaeren Ticks abwaegen — hier ist
 * Mitternacht schlicht ein regulaerer Tick. */
.app-chart-grid.is-major {
    stroke: var(--app-chart-axis);
    opacity: .45;
}

/* Der kurze Strich der zweiten Achse. Sie bekommt bewusst keine Gitterlinie:
 * ihre Marken liegen auf eigenen, runden Werten, und zwei Gitternetze
 * uebereinander liest niemand. */
.app-chart-tick {
    stroke: var(--app-chart-axis);
    stroke-width: 1;
    opacity: .6;
}

.app-chart-axis {
    fill: var(--app-chart-axis);
    font-variant-numeric: tabular-nums;
}

.app-chart-axis.is-major {
    font-weight: 600;
}

.app-chart-unit {
    fill: var(--app-chart-axis);
    opacity: .8;
}

.app-chart-empty {
    fill: var(--app-text-mute);
}

/* --- Serien ---------------------------------------------------------------- */

.app-chart-line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.app-chart-area {
    stroke: none;
    opacity: .16;
}

/* Das Min/Max-Band des Langzeitverlaufs. Deutlich zurueckhaltender als die
 * Flaeche unter einer Linie: es liegt hinter zwei Randlinien und einer
 * Durchschnittslinie und soll sie nicht ueberstrahlen. */
.app-chart-band {
    stroke: none;
    opacity: .22;
}

.app-chart-marker {
    stroke: none;
}

/* Eine senkrechte Marke, die kein Messwert ist (`spec.marks` in chart.js) —
   im Jahresgang die Linie „heute". Gestrichelt und in der Achsenfarbe: sie
   soll den Blick fuehren und nicht als vierte Datenreihe gelesen werden. Die
   Farbe darf der Aufrufer je Marke ueberschreiben. */
.app-chart-mark {
    stroke: var(--app-chart-axis);
    stroke-width: 2;
    stroke-dasharray: 5 4;
    pointer-events: none;
}

/* --- Fadenkreuz und Tooltip ------------------------------------------------ */

.app-chart-cursor {
    stroke: var(--app-chart-axis);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    pointer-events: none;
}

.app-chart-cursordot {
    fill: var(--app-surface);
    stroke-width: 2;
    pointer-events: none;
}

.app-chart-tip {
    position: absolute;
    top: 0;
    z-index: 2;
    /* Nie breiter als die Zeichenflaeche. Prozente beziehen sich hier auf den
     * Bezugsrahmen, also auf `.app-chart` — vorausgesetzt, die Zeichenflaeche
     * traegt diese Klasse tatsaechlich. Fehlt sie, haengt der Tooltip am
     * naechsten positionierten Vorfahren, und das war im Dialog der
     * Detailansicht das `<dialog>` selbst (CLAUDE.md 9i.7). */
    max-width: 100%;
    padding: .35rem .55rem;
    border-radius: 8px;
    background: var(--app-chart-tip-bg);
    color: var(--app-chart-tip-fg);
    box-shadow: var(--app-shadow);
    font-size: .8rem;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
    /* Der Tooltip darf den Zeiger nicht abfangen, sonst flackert er unter der
     * Maus zwischen sichtbar und unsichtbar. */
    pointer-events: none;
}

/* Eine Zeile je Reihe: Bezeichnung links, Wert rechts. `space-between` in
 * einer Box, die sich nach ihrem Inhalt richtet, ergibt genau das Gewuenschte
 * — die laengste Zeile setzt die Breite, die kuerzeren ruecken ihren Wert an
 * denselben rechten Rand. */
.app-chart-tip-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.25rem;
    white-space: nowrap;
}

/* Eine Zeile aus einem einzigen Feld — der Zeitpunkt ueber den Werten. */
.app-chart-tip-row--full {
    justify-content: flex-start;
}

.app-chart-tip-row--full + .app-chart-tip-row {
    margin-top: .1rem;
}

/* Die waagerechte Lage steht **vollstaendig** in chart.js (`onMove()`): erst
 * nach rechts oder links vom Fadenkreuz, dann in die Zeichenflaeche geklemmt.
 * Das Klemmen braucht die gemessene Breite des Tooltips, und die kennt CSS
 * nicht — die frueheren `transform: translateX(…)` an dieser Stelle konnten
 * ihn deshalb auf schmalen Geraeten aus der Flaeche schieben. */

/* --- Aufziehen im Langzeitverlauf (NEUBAU_PLAN 6.6a) -----------------------
 * Reines Anzeige-Overlay — die Zeigerlogik sitzt in dashboard.js, nicht in
 * chart.js: die Auswahl ist eine Eigenschaft dieser einen Seite, kein
 * allgemeiner Diagrammbegriff. */
.app-chart-select {
    position: absolute;
    top: 0;
    bottom: 0;
    background: color-mix(in srgb, var(--app-accent) 22%, transparent);
    border-left: 1px solid var(--app-accent);
    border-right: 1px solid var(--app-accent);
    pointer-events: none;
}

/* --- Vollbild --------------------------------------------------------------
 * Die Begrenzung auf 1200 px, die die Altfassung hier hatte, entfaellt: sie
 * war ein Pflaster gegen das Dehnen. Jetzt waechst die Zeichenflaeche, und das
 * Diagramm zeichnet auf ihr neu — den Anstoss gibt der ResizeObserver, es
 * braucht dafuer keinen Vollbild-Zweig im JavaScript. */

.app-chart-panel:fullscreen {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    background: var(--app-surface);
}

.app-chart-panel:fullscreen .app-chart {
    flex: 1;
    height: auto;
}

/* Die eigentliche Legende (NEUBAU_PLAN 6.3) — Aufbau und Zustand stehen in
 * assets/css/base.css, zusammen mit dem uebrigen Dashboard-Vokabular. Hier
 * stand zuvor eine zweite, mit dashboard.js' Markup nie abgeglichene Fassung
 * (`.app-chart-swatch` statt der tatsaechlich erzeugten
 * `.app-chart-legend-dot`) — totes CSS, das nur ueber die Ladereihenfolge
 * zufaellig nicht auffiel. */