/* =====================================================================
   Waldle Budget — tool-eigenes CSS.
   Überschreibt die Kit-Akzent-Tokens und definiert eigene Komponenten
   mit Präfix wb-, damit der Abgleich mit dem UI-Kit offen bleibt.
   ===================================================================== */

:root{
  --accent:       #147790;
  --accent-hover: #126D84;
  --accent-press: #116479;
  --accent-soft:  rgba(20,119,144,0.10);
  --accent-line:  rgba(20,119,144,0.22);
  --accent-glow:  rgba(20,119,144,0.35);

  /* Währungsfarben — CHF und EUR visuell unterscheidbar. */
  --wb-chf: #147790;
  --wb-eur: #9A5B2E;
  --wb-chf-soft: rgba(20,119,144,0.12);
  --wb-eur-soft: rgba(154,91,46,0.12);
}
:root[data-theme="dark"]{
  --accent-soft: rgba(20,119,144,0.18);
  --accent-line: rgba(20,119,144,0.32);
  --wb-chf: #3FB6CE;
  --wb-eur: #D89A5E;
  --wb-chf-soft: rgba(63,182,206,0.16);
  --wb-eur-soft: rgba(216,154,94,0.16);
}

/* --- Beträge: Währung farblich kennzeichnen -------------------------- */
.px-amount .px-amount__ccy{ opacity:1; }
.wb-amount--chf .px-amount__ccy{ color:var(--wb-chf); font-weight:600; }
.wb-amount--eur .px-amount__ccy{ color:var(--wb-eur); font-weight:600; }

/* Währungs-Chip für Überschriften */
.wb-ccy-tag{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono);
  font-size:12px; font-weight:700; letter-spacing:.04em; padding:2px 8px; border-radius:var(--radius-pill); }
.wb-ccy-tag--chf{ color:var(--wb-chf); background:var(--wb-chf-soft); }
.wb-ccy-tag--eur{ color:var(--wb-eur); background:var(--wb-eur-soft); }

/* --- Raster --------------------------------------------------------- */
.wb-cols-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-6); align-items:start; }
.wb-cols-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-5); }
.wb-cols-4{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--space-5); }
@media (max-width: 900px){ .wb-cols-2,.wb-cols-3{ grid-template-columns:1fr; } }

/* --- Deckungs-Kachel (Cockpit-Herzstück) ---------------------------- */
.wb-cover{ position:relative; overflow:hidden; }
.wb-cover__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-4); }
.wb-cover__lead{ font-size:var(--fs-lg); font-family:var(--font-mono); font-weight:700; }
.wb-cover__meter{ height:12px; border-radius:var(--radius-pill); background:var(--surface-2); overflow:hidden; border:1px solid var(--hairline); }
.wb-cover__fill{ height:100%; border-radius:var(--radius-pill); transition:width .4s ease; }
.wb-cover--ok    .wb-cover__fill{ background:var(--state-success); }
.wb-cover--warn  .wb-cover__fill{ background:var(--state-waiting); }
.wb-cover--crit  .wb-cover__fill{ background:var(--state-critical); }
.wb-cover__row{ display:flex; justify-content:space-between; gap:var(--space-4); margin-top:var(--space-3); font-size:var(--fs-sm); color:var(--text-muted); }
.wb-cover__big{ font-family:var(--font-mono); font-size:32px; font-weight:800; line-height:1.1; letter-spacing:-0.01em; }

/* --- KPI-Kacheln (nutzt .px-stat wo möglich) ------------------------ */
.wb-stat{ background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius-lg); padding:var(--space-5); box-shadow:var(--shadow-sm); }
.wb-stat__label{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-faint); margin-bottom:var(--space-2); }
.wb-stat__value{ font-family:var(--font-mono); font-size:24px; font-weight:800; letter-spacing:-0.01em; }
.wb-stat__hint{ font-size:var(--fs-sm); color:var(--text-muted); margin-top:var(--space-2); }

/* --- Plan-Ansicht --------------------------------------------------- */
.wb-plan--stacked{ display:flex; flex-direction:column; gap:var(--space-6); }
.wb-plan--stacked > .px-card{ width:100%; }
.wb-plan-total{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-4);
  padding:var(--space-4) 0; border-top:2px solid var(--hairline-strong); margin-top:var(--space-3); }
.wb-plan-total__label{ font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:var(--fs-sm); }
.wb-plan-line{ display:grid; grid-template-columns:1fr auto; gap:var(--space-4); align-items:center;
  padding:var(--space-2) 0; border-bottom:1px solid var(--hairline); }
.wb-plan-line__name{ display:flex; align-items:center; gap:var(--space-2); }
.wb-plan-line__name .wb-adj{ font-size:10px; color:var(--accent); border:1px solid var(--accent-line); border-radius:var(--radius-pill); padding:1px 6px; }
.wb-plan-line input.px-input-field{ max-width:130px; text-align:right; }
.wb-transfer{ background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:var(--radius-md);
  padding:var(--space-4); margin:var(--space-4) 0; }

/* --- Vergleich Szenarien ------------------------------------------- */
.wb-diff-pos{ color:var(--state-success); }
.wb-diff-neg{ color:var(--state-critical); }

/* --- Detail-Drawer (Transaktionen) --------------------------------- */
.wb-drawer{ position:fixed; top:0; right:0; height:100%; width:min(440px,92vw); background:var(--surface);
  border-left:1px solid var(--hairline-strong); box-shadow:var(--shadow-lg); z-index:80; transform:translateX(100%);
  transition:transform .25s ease; display:flex; flex-direction:column; }
.wb-drawer.is-open{ transform:translateX(0); }
.wb-drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:var(--space-5); border-bottom:1px solid var(--hairline); }
.wb-drawer__body{ padding:var(--space-5); overflow:auto; }

/* --- Settings-Eintrag in der Sidebar (unten, über dem User) --------- */
.px-sidebar__foot--settings{ padding-top:var(--space-2); border-top:1px solid var(--hairline); }
.px-sidebar__foot--settings .px-nav{ padding:0; }

/* --- Kleinteile ----------------------------------------------------- */
.wb-muted{ color:var(--text-muted); }
.wb-faint{ color:var(--text-faint); }
.wb-mono{ font-family:var(--font-mono); }
.wb-right{ text-align:right; }
.wb-nowrap{ white-space:nowrap; }
.wb-section-gap{ margin-bottom:var(--space-8); }
.wb-inline-form{ display:inline; }
.wb-kv{ display:grid; grid-template-columns:auto 1fr; gap:var(--space-2) var(--space-4); font-size:var(--fs-sm); }
.wb-kv dt{ color:var(--text-faint); }
.wb-kv dd{ margin:0; font-family:var(--font-mono); }