/* Finance Tracker v7 — Dashboard.
 *
 * Design-Token aus dem Artivate Ops Dashboard uebernommen (Palette, Radien,
 * Typo-Skala, Spacing, Schatten), damit sich beide Werkzeuge gleich anfuehlen.
 * Uebernommen wird die FORMENSPRACHE, nicht die Identitaet — die Farbwelt der
 * Finance-App (blaue Akzente, das gewohnte Gruen/Rot fuer Ein- und Ausgang)
 * bleibt.
 *
 * Alles hier ist auf `body.dash-open` bzw. `#s_dash` begrenzt und faellt dem
 * bestehenden Upload-Wizard nicht in die Parade — der bleibt unveraendert auf
 * seinen 660 px.
 */

:root {
  /* Radien — eine Quelle */
  --d-r-card: 14px;
  --d-r-ctrl: 10px;
  --d-r-chip: 8px;
  --d-r-lg: 20px;
  --d-r-pill: 999px;

  /* Typo-Skala. Untergrenze 11px — darunter wird nichts gerendert.
     mega/hero sind fuer Kennzahlen, die ihre Beschriftung dominieren muessen. */
  --d-fs-xs: 11px;  --d-fs-sm: 12px;  --d-fs-md: 13px;  --d-fs-base: 14px;
  --d-fs-lg: 16px;  --d-fs-xl: 19px;  --d-fs-xxl: 23px; --d-fs-h: 27px;
  --d-fs-d: 32px;   --d-fs-dd: 40px;

  /* Spacing-Skala */
  --d-sp-xs: 4px;  --d-sp-sm: 8px;  --d-sp-md: 12px; --d-sp-lg: 18px;
  --d-sp-xl: 28px; --d-sp-xxl: 40px;

  /* Ops-Dashboard-Palette, dunkel */
  --d-bg: #0e1015;
  --d-card: #191c28;
  --d-bd: #272b3a;
  --d-bl: #1d2030;
  --d-tx: #e6eaf2;
  --d-mt: #96a0b2;
  --d-dm: #5f6b80;
  --d-gn: #10b981;
  --d-rd: #f05252;
  --d-bu: #5c7cff;
  --d-am: #f5a623;
  --d-pu: #8b5cf6;
  --d-tl: #22d3ee;
  --d-accent: #5c7cff;
  --d-sh-sm: 0 1px 2px rgba(0,0,0,.28), 0 3px 10px rgba(0,0,0,.30);
  --d-sh-md: 0 8px 24px rgba(0,0,0,.45);
}

:root[data-theme="light"] {
  --d-bg: #f6f7f9;
  --d-card: #ffffff;
  --d-bd: #e8eaf0;
  --d-bl: #eef0f6;
  --d-tx: #17181f;
  --d-mt: #606a7b;
  --d-dm: #98a1b2;
  --d-rd: #ef4444;
  --d-bu: #4b6ef5;
  --d-am: #f59e0b;
  --d-tl: #06b6d4;
  --d-accent: #4b6ef5;
  --d-sh-sm: 0 1px 2px rgba(16,24,40,.04), 0 2px 8px rgba(16,24,40,.05);
  --d-sh-md: 0 8px 24px rgba(16,24,40,.09);
}

/* Vollbild: nur wenn das Dashboard offen ist. */
body.dash-open { background: var(--d-bg); }
body.dash-open #topbar { max-width: 1600px; width: 97vw; }
body.dash-open .card.dash-card {
  max-width: 1600px; width: 97vw;
  background: transparent; border: none; padding: 0;
}

#s_dash, #s_private {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--d-tx);
}
#s_dash *, #s_private * { font-family: inherit; }

/* ── Kopfzeile ──────────────────────────────────────────────────────────── */

.d-head {
  display: flex; align-items: center; gap: var(--d-sp-md);
  flex-wrap: wrap; margin-bottom: var(--d-sp-lg);
}
.d-head h2 {
  font-size: var(--d-fs-xxl); font-weight: 800; margin: 0;
  letter-spacing: -.02em;
}
.d-head .spacer { flex: 1 }

.d-select, .d-btn {
  background: var(--d-card); color: var(--d-tx);
  border: 1px solid var(--d-bd); border-radius: var(--d-r-ctrl);
  padding: 8px 14px; font-size: var(--d-fs-md); font-weight: 600;
  cursor: pointer; width: auto;
}
.d-btn.primary { background: var(--d-accent); color: #fff; border-color: transparent }
.d-btn:hover { opacity: .88 }

/* ── Kennzahlen ─────────────────────────────────────────────────────────── */

.d-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--d-sp-md); margin-bottom: var(--d-sp-lg);
}
.d-kpi {
  background: var(--d-card); border: 1px solid var(--d-bd);
  border-radius: var(--d-r-card); padding: var(--d-sp-lg);
  box-shadow: var(--d-sh-sm);
}
.d-kpi .lbl {
  font-size: var(--d-fs-xs); font-weight: 700; color: var(--d-mt);
  text-transform: uppercase; letter-spacing: .6px; margin-bottom: 6px;
}
/* Die Zahl muss ihre Beschriftung dominieren — sonst liest sich die Kachel
   als Textzeile statt als Kennzahl. */
.d-kpi .val {
  font-size: var(--d-fs-d); font-weight: 800; letter-spacing: -.03em;
  line-height: 1.1;
}
.d-kpi .sub { font-size: var(--d-fs-xs); color: var(--d-dm); margin-top: 6px }
.d-kpi .val.pos { color: var(--d-gn) }
.d-kpi .val.neg { color: var(--d-rd) }
.d-delta.up { color: var(--d-gn) }
.d-delta.down { color: var(--d-rd) }

/* ── Zwei-Spalten-Bereich ───────────────────────────────────────────────── */

.d-split {
  display: grid; grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.3fr);
  gap: var(--d-sp-md); margin-bottom: var(--d-sp-lg);
}
@media (max-width: 900px) { .d-split { grid-template-columns: 1fr } }

.d-panel {
  background: var(--d-card); border: 1px solid var(--d-bd);
  border-radius: var(--d-r-card); padding: var(--d-sp-lg);
  box-shadow: var(--d-sh-sm);
}
.d-panel h3 {
  font-size: var(--d-fs-xs); font-weight: 700; color: var(--d-mt);
  text-transform: uppercase; letter-spacing: .6px; margin: 0 0 var(--d-sp-md);
}

/* ── Warnungen ──────────────────────────────────────────────────────────── */

.d-warn {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border-radius: var(--d-r-chip);
  font-size: var(--d-fs-md); margin-bottom: var(--d-sp-sm);
  border: 1px solid transparent; cursor: pointer;
}
.d-warn:last-child { margin-bottom: 0 }
.d-warn.err { background: color-mix(in srgb, var(--d-rd) 12%, transparent);
              border-color: color-mix(in srgb, var(--d-rd) 35%, transparent) }
.d-warn.warn { background: color-mix(in srgb, var(--d-am) 12%, transparent);
               border-color: color-mix(in srgb, var(--d-am) 35%, transparent) }
.d-warn.ok { background: color-mix(in srgb, var(--d-gn) 10%, transparent);
             border-color: color-mix(in srgb, var(--d-gn) 30%, transparent);
             cursor: default }
/* Ein neutraler Hinweis (ART-534): weder Fehler noch Warnung, sondern eine
   Auskunft. Ohne eigene Klasse fiele er auf das nackte .d-warn zurueck — das
   hat einen Zeigefinger-Cursor und sieht anklickbar aus, ohne es zu sein. */
.d-warn.info { background: color-mix(in srgb, var(--d-mt) 10%, transparent);
               border-color: color-mix(in srgb, var(--d-mt) 28%, transparent);
               cursor: default }
/* „ohne Yoursafe" neben der Kachelbeschriftung (ART-534). Klein und ruhig:
   es ist eine Auskunft zur Vollständigkeit, keine Warnung.

   Deshalb --d-mt und nicht --d-am: Amber ist in diesem Haus die Farbe der
   Warnung (.d-warn.warn). An der Zahl — der Stelle mit der größten
   Aufmerksamkeit — hätte der Hinweis damit genau das Gegenteil dessen
   gesagt, wofür das Ticket da ist.

   text-transform und letter-spacing müssen zurückgesetzt werden: .d-kpi .lbl
   vererbt Versalien, und „REVENUE OHNE YOURSAFE" liest sich wie eine
   Fehlermeldung. */
.d-kpi-hint {
  font-weight: 400; color: var(--d-mt);
  font-size: var(--d-fs-xs); white-space: nowrap;
  text-transform: none; letter-spacing: 0;
}

.d-warn .t { font-weight: 700 }
.d-warn .d { color: var(--d-mt); font-size: var(--d-fs-sm) }

/* ── Diagramm (reines CSS/SVG, keine Bibliothek) ────────────────────────── */

.d-bars { display: flex; flex-direction: column; gap: 10px }
.d-bar-row { cursor: pointer }
.d-bar-row:hover .d-bar-fill { filter: brightness(1.15) }
.d-bar-head {
  display: flex; justify-content: space-between; font-size: var(--d-fs-sm);
  margin-bottom: 4px;
}
.d-bar-head .n { font-weight: 600 }
.d-bar-head .v { color: var(--d-mt); font-variant-numeric: tabular-nums }
.d-bar-track {
  height: 10px; background: var(--d-bl); border-radius: var(--d-r-pill);
  overflow: hidden;
}
.d-bar-fill { height: 100%; border-radius: var(--d-r-pill); transition: width .35s }
.d-bar-row.active .d-bar-head .n { color: var(--d-accent) }

/* ── Tabellen / Listen ──────────────────────────────────────────────────── */

.d-table { width: 100%; border-collapse: collapse; font-size: var(--d-fs-md) }
.d-table th {
  padding: 11px 14px; text-align: left; font-weight: 700; color: var(--d-mt);
  text-transform: uppercase; font-size: var(--d-fs-xs); letter-spacing: .6px;
  white-space: nowrap; background: transparent; position: sticky; top: 0;
  border-bottom: 1px solid var(--d-bd);
}
.d-table td {
  padding: 10px 14px; border-bottom: 1px solid var(--d-bd);
  vertical-align: middle;
}
.d-table tbody tr:hover td { background: var(--d-bl) }
.d-table .num { text-align: right; font-variant-numeric: tabular-nums }
.d-table .muted { color: var(--d-mt) }

.d-scroll { overflow-x: auto }

/* Aufklapp-Zeile eines Anbieterbuendels */
.d-sub td { background: var(--d-bl); padding: 0 }
.d-sub-inner { padding: 10px 14px 14px 34px }
.d-sub-row {
  display: flex; justify-content: space-between; gap: var(--d-sp-md);
  padding: 6px 0; font-size: var(--d-fs-sm); border-top: 1px solid var(--d-bd);
}
.d-sub-row:first-child { border-top: none }
.d-caret { display: inline-block; width: 14px; color: var(--d-dm) }

.d-chip {
  display: inline-block; font-size: var(--d-fs-xs); font-weight: 700;
  padding: 3px 9px; border-radius: var(--d-r-pill); white-space: nowrap;
  line-height: 1.4;
}

.d-flag { font-size: var(--d-fs-xs); color: var(--d-am); margin-left: 6px }

details.d-fold { margin-top: var(--d-sp-md) }
details.d-fold > summary {
  cursor: pointer; font-size: var(--d-fs-md); font-weight: 700;
  color: var(--d-mt); padding: 10px 0; list-style: none;
}
details.d-fold > summary::-webkit-details-marker { display: none }
details.d-fold > summary::before { content: "▸ "; color: var(--d-dm) }
details.d-fold[open] > summary::before { content: "▾ " }

.d-empty {
  color: var(--d-dm); font-size: var(--d-fs-md); padding: var(--d-sp-xl);
  text-align: center;
}

/* Toast fuer "Gelernt" mit Rueckgaengig */
.d-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--d-card); border: 1px solid var(--d-bd);
  border-radius: var(--d-r-ctrl); padding: 12px 18px; box-shadow: var(--d-sh-md);
  display: flex; align-items: center; gap: 14px; font-size: var(--d-fs-md);
  z-index: 200;
}
.d-toast button {
  background: none; border: none; color: var(--d-accent); cursor: pointer;
  font-weight: 700; font-size: var(--d-fs-md); padding: 0;
}

/* ── Sync all: Statusleiste (ART-489) ─────────────────────────────────────── */

.sync-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0 0 12px;
  font-size: 12px;
}
.sync-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sync-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid transparent;
  white-space: nowrap;
}
/* waiting und skipped sehen bewusst gleich aus: beides heisst „hier ist
   nichts passiert" — der Unterschied steht im title. */
.sync-waiting, .sync-skipped { background: #f1f3f5; color: #868e96; }
.sync-running {
  background: #e7f5ff; color: #1971c2; border-color: #a5d8ff;
  animation: sync-puls 1.2s ease-in-out infinite;
}
.sync-done { background: #ebfbee; color: #2b8a3e; border-color: #b2f2bb; }
.sync-error { background: #fff5f5; color: #c92a2a; border-color: #ffc9c9; }
.sync-meta { color: #868e96; }
.sync-err {
  flex-basis: 100%;
  color: #c92a2a;
  /* Die Meldung steht ausgeschrieben da: ein `title` allein wird auf dem
     Tablet nie gelesen. */
  word-break: break-word;
}
@keyframes sync-puls { 50% { opacity: 0.55; } }
/* Eine Anmerkung ist kein Fehler: gesperrter Monat, uebersprungene
   Bewegungen, entfernte Stornos — wichtig, aber nicht rot. */
.sync-err.sync-note { color: #e8b339; }
/* Und noch eine Stufe darunter (ART-517): was nur zur Kenntnis ist —
   abgelehnte Kartenzahlungen, interne Umbuchungen, ein Monat, den es in der
   Tabelle noch nicht gibt. Grau und eingeklappt. Bisher stand das in
   derselben Warnfarbe wie ein echter Ausfall, und wer jeden Monat nach
   Fehlern sucht, die keine sind, uebersieht darueber die echten. */
.sync-hints {
  flex-basis: 100%;
  color: #868e96;
  word-break: break-word;
}
.sync-hints > summary { cursor: pointer; }
.sync-hint { padding-left: 14px; }


/* ── Vorschläge an einer offenen Krypto-Einzahlung (ART-533) ──────────────── */
/* Eingerückt und ruhig: sie stehen unter der Beschreibung, dürfen die Zeile
   aber nicht überstimmen. Die Güteklasse trägt die Farbe, nicht der Text. */
.cdep-vorschlaege {
  margin-top: 4px; padding-left: 10px;
  border-left: 2px solid var(--d-bd);
  display: flex; flex-direction: column; gap: 3px;
  /* Begrenzt und umbrechend: ohne max-width wächst die Tabellenspalte mit dem
     längsten Vorschlagstext, der Dialog läuft seitlich über — und der Knopf,
     um den es geht, steht außerhalb. Im Versuch am 10.09.2026: 1167 px in
     einem 778 px breiten Dialog. */
  max-width: 34em;
}
.cdep-vor {
  font-size: var(--d-fs-xs); color: var(--d-mt); line-height: 1.5;
  white-space: normal; overflow-wrap: anywhere;
}
.cdep-vor b { color: var(--d-tx) }
.cdep-guete {
  display: inline-block; padding: 0 5px; border-radius: var(--d-r-chip);
  font-size: var(--d-fs-xs); font-weight: 700; margin-right: 4px;
}
.cdep-guete.exakt {
  background: color-mix(in srgb, var(--d-gn) 18%, transparent);
  color: var(--d-gn);
}
.cdep-guete.nah {
  background: color-mix(in srgb, var(--d-bl) 18%, transparent);
  color: var(--d-bl);
}
.cdep-guete.realloc {
  background: color-mix(in srgb, var(--d-pu) 18%, transparent);
  color: var(--d-pu);
}
.cdep-guete.selbst {
  background: color-mix(in srgb, var(--d-mt) 18%, transparent);
  color: var(--d-mt);
}