/* ==========================================================================
   Dashboard: Kennzahlen, Diagramme, Listen.
   Diagramme sind Inline-SVG; Farben kommen ausschließlich über Klassen (CSP: keine Inline-Styles).
   Baut auf den Tokens aus app.css und welten.css auf und wird danach geladen.
   ========================================================================== */

/* Farben der Diagramme. "Aktuell" trägt die Akzentfarbe; der Vergleich (Vorjahr) tritt als Grau zurück. */
:root {
    --dia-aktuell: var(--accent);
    --dia-vorjahr: color-mix(in srgb, var(--text-muted) 70%, var(--surface));
}

/* Kopf ------------------------------------------------------------------- */
.db-konto { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.db-konto-login { font-size: 0.83rem; }

.db-untertitel { margin-top: 2px; font-size: 0.84rem; }

/* Zeilen aus zwei Karten ---------------------------------------------------- */
.db-reihe { display: grid; gap: 20px; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.db-reihe--gleich { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
/* Fehlt die zweite Karte (Recht nicht vorhanden), nimmt die erste die ganze Breite */
.db-reihe > :only-child { grid-column: 1 / -1; }

/* Kennzahl-Kacheln --------------------------------------------------------- */
/* Bis zu fünf Kacheln in einer Zeile, bevor umgebrochen wird */
.db-kpis { grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); }
.db-vergleich { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.delta {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 1px 8px; border-radius: 999px;
    font-size: 0.8rem; font-weight: 620; line-height: 1.6;
}
.delta--auf { color: var(--success); background: var(--success-soft); }
.delta--ab { color: var(--danger); background: var(--danger-soft); }

/* Säulendiagramm ------------------------------------------------------------ */
.dia-legende { display: flex; gap: 16px; margin: 0; padding: 0; list-style: none; font-size: 0.85rem; color: var(--text-muted); }
.dia-legende li { display: inline-flex; align-items: center; gap: 7px; }
.dia-schluessel { width: 10px; height: 10px; border-radius: 3px; }
.dia-schluessel--aktuell { background: var(--dia-aktuell); }
.dia-schluessel--vorjahr { background: var(--dia-vorjahr); }

.dia-scroll { overflow-x: auto; padding: 12px 16px 8px; }
.dia-saeulen { display: block; width: 100%; min-width: 520px; height: auto; }
.dia-achse { fill: var(--text-muted); font: 11px var(--font); }
.dia-achse--y { text-anchor: end; }
.dia-achse--x { text-anchor: middle; }
.dia-gitter { stroke: var(--border); stroke-width: 1; }
.dia-gitter--basis { stroke: var(--border-strong); }
.dia-saeule { pointer-events: none; }
.dia-reihe--aktuell { fill: var(--dia-aktuell); }
.dia-reihe--vorjahr { fill: var(--dia-vorjahr); }
/* Der ganze Monat ist die Trefferfläche für den Tooltip (<title>), nicht nur die schmale Säule */
.dia-treffer { fill: transparent; }
.dia-treffer:hover { fill: var(--surface-2); }

.dia-tabelle { border-top: 1px solid var(--border); }
.dia-tabelle summary { padding: 12px 22px; cursor: pointer; color: var(--text-muted); font-size: 0.86rem; }
.dia-tabelle summary:hover { color: var(--text); }
.dia-tabelle .tabelle-huelle { border-top: 1px solid var(--border); }
.dia-summe td { font-weight: 620; }

/* Gestapelter Balken (Rechnungsstand) ------------------------------------------ */
.db-stapel-koerper { display: flex; flex-direction: column; gap: 16px; padding-bottom: 12px; }
.dia-stapel { display: block; width: 100%; height: 14px; border-radius: 7px; overflow: hidden; background: var(--surface-2); }
.dia-seg--bezahlt { fill: var(--success); }
.dia-seg--offen { fill: var(--info); }
.dia-seg--mahnung { fill: var(--danger); }
.dia-seg--vorgemerkt { fill: var(--border-strong); }

.dia-liste { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dia-liste li { display: grid; grid-template-columns: 10px 1fr auto auto; align-items: baseline; gap: 10px; font-size: 0.92rem; }
.dia-liste-wert { font-weight: 620; font-variant-numeric: tabular-nums; }
.dia-liste-netto { min-width: 92px; text-align: right; font-size: 0.84rem; font-variant-numeric: tabular-nums; }
.dia-punkt { width: 10px; height: 10px; border-radius: 3px; align-self: center; }
.dia-punkt--bezahlt { background: var(--success); }
.dia-punkt--offen { background: var(--info); }
.dia-punkt--mahnung { background: var(--danger); }
.dia-punkt--vorgemerkt { background: var(--border-strong); }

/* Projekte ---------------------------------------------------------------------- */
.db-projekt { flex-wrap: wrap; }
.db-projekt-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.db-fortschritt { display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.db-fortschritt progress.fortschritt { width: 84px; }
.liste-zeile-text strong a { color: var(--text); }
.liste-zeile-text strong a:hover { color: var(--accent-text); }

/* Cumodis: Verträge je Produkt ------------------------------------------------------ */
.db-produkte { display: grid; gap: 14px; margin: 0; padding: 18px 22px 22px; list-style: none; }
.db-produkte li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: baseline; }
.db-produkt-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.92rem; }
.db-produkt-anzahl { font-weight: 620; font-variant-numeric: tabular-nums; }
.db-produkte progress { grid-column: 1 / -1; }

progress.db-balken {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 10px;
    border: 0;
    border-radius: 4px;
    overflow: hidden;
    background: var(--surface-2);
}
progress.db-balken::-webkit-progress-bar { background: var(--surface-2); border-radius: 4px; }
progress.db-balken::-webkit-progress-value { background: var(--accent); border-radius: 0 4px 4px 0; }
progress.db-balken::-moz-progress-bar { background: var(--accent); border-radius: 0 4px 4px 0; }

/* Offene Posten ---------------------------------------------------------------------- */
.db-posten-betrag { display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-variant-numeric: tabular-nums; }
.db-posten-betrag span { font-size: 0.82rem; }

/* Zeilentexte: Projekt und Kunde einzeilig kürzen, die Frist rutscht bei Platzmangel darunter */
.db-aufgabe, .db-projekt { flex-wrap: wrap; }
.db-aufgabe .liste-zeile-text, .db-projekt .liste-zeile-text { flex: 1 1 180px; }
.db-aufgabe .liste-zeile-text span,
.db-projekt .liste-zeile-text span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-aufgabe .frist { flex-basis: 100%; padding-left: 24px; }

@media (max-width: 1080px) {
    .db-reihe, .db-reihe--gleich { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
    .db-konto { align-items: flex-start; }
    .dia-scroll { padding: 8px 8px 4px; }
    .dia-tabelle summary { padding: 12px 16px; }
    .db-produkte { padding: 16px; }
}