/* ============================================================
   Finance Tracker – Web-Version
   Bewusst nur Light Mode, wie die Landingpage.
   ============================================================ */

/* ---------------------------------------------------------------
   Farbsystem

   Je Akzent gibt es drei Rollen, weil ein kräftiger Ton selten alles
   gleichzeitig kann:
     --a1/--a2/--a3  kräftiger Verlauf für große Flächen
     --a-solid       Flächenfarbe, auf der weiße Schrift 4,5:1 erreicht
     --a-text        Schrift-/Linkfarbe auf dem Seitenhintergrund

   Die Werte sind nicht geschätzt, sondern ausgerechnet (siehe README).
   --------------------------------------------------------------- */
:root {
  --green: #34C759;
  --red:   #FF3B30;
  --orange:#FF9500;

  /* Hell */
  --bg:      #F2F2F7;
  --card:    #FFFFFF;
  --text:    #1C1C1E;
  --text-2:  #6A6A6F;
  --text-3:  #76767B;
  --sep:     rgba(60,60,67,.16);
  --fill:    rgba(120,120,128,.16);
  --tabbg:   rgba(251,251,253,.94);

  --radius:  20;
  --gutter:  16px;
  --tabbar:  calc(56px + env(safe-area-inset-bottom));

  /* Voreinstellung: Ocean. Die zehn Akzente selbst stehen in accents.css,
     erzeugt aus derselben Quelle wie das Dart-Gegenstück. */
  --a1: #00468c; --a2: #005dba; --a3: #0073e7;
  --a-solid-l: #0070e0; --a-text-l: #006bd6; --a-text-d: #0A84FF;
  --a-solid: var(--a-solid-l);
  --a-text:  var(--a-text-l);
}


/* Dunkel: einmal automatisch (Systemeinstellung) und einmal per Schalter.
   `:not([data-theme="light"])` sorgt dafür, dass die ausdrückliche Wahl
   „hell" die Systemeinstellung schlägt. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --bg:     #000000;
    --card:   #1C1C1E;
    --text:   #F5F5F7;
    --text-2: #AEAEB2;
    --text-3: #9A9AA0;
    --sep:    rgba(84,84,88,.5);
    --fill:   rgba(120,120,128,.26);
    --tabbg:  rgba(18,18,20,.94);
    --a-solid: var(--a1);
    --a-text:  var(--a-text-d);
    color-scheme: dark;
  }
}
html[data-theme="dark"] {
  --bg:     #000000;
  --card:   #1C1C1E;
  --text:   #F5F5F7;
  --text-2: #AEAEB2;
  --text-3: #9A9AA0;
  --sep:    rgba(84,84,88,.5);
  --fill:   rgba(120,120,128,.26);
  --tabbg:  rgba(18,18,20,.94);
  --a-solid: var(--a1);
  --a-text:  var(--a-text-d);
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Muss vor allen Klassen stehen und !important tragen: Das `hidden`-Attribut
   kommt aus dem Browser-Stylesheet und verliert sonst gegen jede eigene Regel
   mit `display`. Genau das ist hier passiert – der ausgeblendete Blattdialog
   lag als unsichtbare Fläche über der gesamten Seite. */
[hidden] { display: none !important; }

/* ---------------------------------------------------------------
   Der Rahmen rollt nicht, nur der Inhalt

   Die Tab-Leiste stand als `position: fixed` am unteren Rand. Auf dem
   iPhone löste sie sich damit beim Schwung-Scrollen von dort und flog über
   den Inhalt: Safari zeichnet fixierte Elemente während des Schwungs und
   beim Überziehen am Rand nicht mit, und der Weichzeichner darunter macht
   den Versatz deutlich sichtbar.

   Darum ist die Seite jetzt ein fester Rahmen in Höhe des Fensters –
   Hinweisleisten oben, Inhalt dazwischen, Tab-Leiste unten – und gerollt
   wird ausschließlich der Inhalt. Eine Leiste, die im normalen Fluss steht,
   kann nicht wegfliegen.

   `100dvh` folgt der schrumpfenden Adressleiste in Safari; `100%` davor ist
   der Rückfall für ältere Browser.
   --------------------------------------------------------------- */
html, body {
  margin: 0; padding: 0; background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  font-size: 17px; line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain;
  height: 100%;
  overflow: hidden;
}
body {
  height: 100dvh;
  box-sizing: border-box;
  display: flex; flex-direction: column;
  /* Aus dem Home-Bildschirm gestartet reicht die Seite bis unter die
     Statusleiste. Ohne diesen Abstand klebt die Überschrift an der Uhrzeit. */
  padding-top: env(safe-area-inset-top);
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* Mindestmaß für Trefferflächen – wie in der App. */
button, .row, .chip { min-height: 48px; }

.view {
  flex: 1; min-height: 0;
  /* overflow-x bewusst `hidden` und nicht `visible`: Sonst rechnet der
     Browser es auf `auto` hoch, und die Layout-Prüfung hielte jedes Element
     für den Inhalt einer seitlich rollbaren Leiste. */
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding: 0 0 24px;
  max-width: 560px; margin: 0 auto;
  width: 100%;
}

/* ---------- Hinweisleiste ---------- */
.preview-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px var(--gutter);
  background: var(--a-solid); color: #fff; font-size: 13.5px;
}
.preview-bar__close { color: #fff; font-size: 24px; line-height: 1; padding: 0 6px; min-height: 0; }

/* Leiste für eine bereitliegende neue Fassung. Bewusst kein Schließen-Kreuz:
   Wer sie wegtippt, bliebe auf dem alten Stand sitzen, ohne zu wissen warum. */
.update-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px var(--gutter);
  background: var(--green); color: #fff; font-size: 13.5px;
}
.update-bar span { flex: 1; }
.update-bar__go {
  color: #fff; font-weight: 600; font-size: 13.5px;
  border: 1px solid rgba(255, 255, 255, .7); border-radius: 999px;
  padding: 5px 14px; min-height: 0; white-space: nowrap;
}

/* ---------- Kopf ---------- */
.head {
  padding: 14px var(--gutter) 4px;
  display: flex; align-items: flex-end; gap: 10px;
}
.head h1 { font-size: 32px; font-weight: 800; letter-spacing: -.9px; margin: 0; flex: 1; }
.head__actions { display: flex; gap: 4px; }
.iconbtn {
  width: 48px; height: 48px; display: grid; place-items: center;
  color: var(--a-text); border-radius: 50%;
}
.iconbtn:disabled { color: var(--text-3); }

/* ---------- Karten ---------- */
.card {
  background: var(--card); border-radius: calc(var(--radius) * 1px);
  margin: 0 var(--gutter) 12px; padding: var(--gutter);
}
.card--flush { padding: 0; overflow: hidden; }

.section-head {
  padding: 14px calc(var(--gutter) + 4px) 4px;
  display: flex; align-items: center; gap: 8px;
}
.section-head h2 {
  flex: 1; margin: 0; font-size: 13px; font-weight: 600;
  letter-spacing: .4px; text-transform: uppercase; color: var(--text-2);
}
.section-head button { font-size: 15px; color: var(--a-text); padding: 0 8px; }
.section-head button svg { vertical-align: -1px; }

/* Untergruppe innerhalb der Buchungsliste: etwas leiser als eine
   Abschnittsüberschrift, mit der Summe der Gruppe rechts. */
.section-head--sub { padding-top: 10px; }
/* Lange Kategorienamen kuerzen statt die Summe rechts hinauszudruecken. */
.section-head--sub h2 {
  font-size: 12px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.section-head--sub span {
  flex: none; font-size: 12px; font-weight: 600; color: var(--text-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; color: #fff;
  margin: 10px var(--gutter) 12px; padding: 18px 20px;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--a1) 0%, var(--a2) 55%, var(--a3) 100%);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--a1) 38%, transparent);
}
/* Kein Abdunkler mehr: Die Verlaufsstufen sind so gewählt, dass weiße Schrift
   auf jeder von ihnen 4,5:1 erreicht. Eine schwarze Lage darüber hätte nur die
   Farbe stumpf gemacht, ohne das Problem an der Wurzel zu lösen. */
.hero::after {
  /* Dezenter Lichtfleck für Tiefe. Bewusst schwach: Er liegt hinter der
     zentrierten Monatsangabe, und ein heller Fleck macht weiße Schrift
     darüber unlesbar. */
  /* pointer-events: none ist Pflicht. Der Fleck liegt oben rechts genau über
     dem Pfeil zum nächsten Monat und wird als letztes Element über ihm
     gemalt – ohne diese Zeile fing er jeden Tipp ab. Man kam in einen
     Vormonat, aber nicht mehr zurück. */
  pointer-events: none;
  content: ""; position: absolute; right: -40px; top: -52px;
  width: 168px; height: 168px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%,
    rgba(255,255,255,.17) 0%, rgba(255,255,255,.07) 65%, transparent 100%);
}
.hero > * { position: relative; }
.hero__nav { display: flex; align-items: center; gap: 4px; }
.hero__nav button { color: #fff; width: 48px; height: 48px; display: grid; place-items: center; }
.hero__nav button[disabled] { opacity: .35; }
.hero__month {
  flex: 1; text-align: center; font-size: 12.5px; font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase;
}
.hero__label { font-size: 13px; margin-top: 8px; }
.hero__amount {
  font-size: 42px; font-weight: 800; letter-spacing: -1.4px;
  font-variant-numeric: tabular-nums; margin: 2px 0 0;
  white-space: nowrap;
}
.hero__pill {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 8px;
  padding: 4px 9px; border-radius: 30px; background: rgba(255,255,255,.18);
  font-size: 12.5px; font-weight: 600;
}
.hero__metrics { display: flex; gap: 10px; margin-top: 18px; }
.hero__metric { flex: 1; min-width: 0; }
/* Wird von fitMetrics() in app.js gesetzt, wenn die Beträge selbst bei
   kleinster Schrift nicht mehr nebeneinander passen (lange Währungskürzel
   auf schmalen Geräten). Zwei pro Zeile statt drei. */
.hero__metrics.is-wrapped { flex-wrap: wrap; row-gap: 12px; }
.hero__metrics.is-wrapped .hero__metric { flex: 1 1 42%; }
.hero__metric span { display: block; font-size: 11.5px; }
/* Die Schriftgröße hier ist nur der Ausgangswert: fitText() in app.js misst
   nach dem Aufbau und verkleinert, falls der Betrag sonst nicht hineinpasst
   (siehe dort – "91.591,05 CHF" ist deutlich breiter als mit €-Zeichen). */
.hero__metric strong {
  display: block; font-size: 16px; font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hero__note { font-size: 12.5px; margin-top: 12px; }

/* ---------- Zeilen ---------- */
.row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 9px var(--gutter); text-align: left;
  border-bottom: .5px solid var(--sep);
}
.row:last-child { border-bottom: 0; }
.row__badge {
  width: 34px; height: 34px; flex: none; border-radius: 10px;
  display: grid; place-items: center; color: #fff;
}
.row__body { flex: 1; min-width: 0; }
/* Kürzen statt überlaufen: Wird der Platz neben einem langen Wert eng,
   soll die Beschriftung Auslassungspunkte bekommen und nicht sichtbar aus
   ihrem Kasten herauslaufen. */
.row__title {
  display: block; font-size: 17px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row__sub {
  display: block; font-size: 13px; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row__value { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.row__value--income { color: var(--green); }
.row__chevron { color: var(--text-3); flex: none; }

/* ---------- Diagramme ---------- */
.donut-wrap { display: flex; align-items: center; gap: var(--gutter); }
/* minmax(0, 1fr) statt der voreingestellten Spaltenbreite: Eine Rasterspalte
   schrumpft sonst nicht unter den Inhalt ihrer Zeilen. Auf einem 320px
   breiten Gerät schob der längste Betrag dadurch die ganze Übersicht 40px
   nach rechts aus dem Bild. */
.legend { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }
.legend__item { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.legend__dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.legend__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Wird der Platz knapp, kürzt der Name (oben per Auslassungspunkten) - der
   Betrag bleibt vollständig. Eine halbe Zahl ist schlimmer als ein halbes
   Wort. */
.legend__value { flex: none; white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }

.bars { display: flex; align-items: flex-end; gap: 6px; height: 150px; }
.bars__col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; min-width: 0; }
.bars__bar { width: 100%; border-radius: 6px 6px 0 0; background: var(--a-solid); opacity: .35; transition: opacity .2s; }
.bars__col.is-active .bars__bar { opacity: 1; }
.bars__label { font-size: 11px; color: var(--text-2); }
.bars__col.is-active .bars__label { color: var(--text); font-weight: 600; }

.progress { height: 8px; border-radius: 4px; background: var(--fill); overflow: hidden; }
.progress__fill { height: 100%; border-radius: 4px; transition: width .4s ease; }

/* ---------- Leerer Zustand ---------- */
.empty { text-align: center; padding: 40px 24px; }
.empty__icon { color: var(--text-3); margin-bottom: 12px; }
.empty h3 { margin: 0 0 6px; font-size: 19px; }
.empty p { margin: 0 0 18px; font-size: 15px; color: var(--text-2); }

/* ---------- Knöpfe ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 22px; border-radius: 14px; font-weight: 600;
  background: var(--a-solid); color: #fff; width: 100%;
}
.btn--ghost { background: var(--fill); color: var(--a-text); }
.btn--danger { background: none; color: var(--red); }

/* ---------- Blattdialog ---------- */
.sheet {
  position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column;
  background: var(--bg);
}
.sheet__bar {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  padding-top: calc(6px + env(safe-area-inset-top));
  border-bottom: .5px solid var(--sep); background: var(--card);
}
.sheet__bar button { color: var(--a-text); padding: 0 12px; }
.sheet__bar h2 { flex: 1; text-align: center; font-size: 17px; font-weight: 600; margin: 0; }
/* overscroll-behavior: Am Ende des Blattes weiterzuziehen darf nicht die
   Liste dahinter mitrollen.

   overflow-x bewusst `hidden` wie bei .view: Bliebe es `visible`, rechnet der
   Browser es wegen des gesetzten overflow-y auf `auto` hoch - und die
   Layout-Pruefung hielte dann jedes Element im Blatt fuer den Inhalt einer
   seitlich rollbaren Leiste und sah dort gar nichts mehr. Ausgerechnet in den
   Blaettern steht die meiste Schrift auf dem wenigsten Platz. */
.sheet__body {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; padding-bottom: 12px;
}
/* Blätter stapeln sich: die Kategorieauswahl legt sich über die angefangene
   Buchung. Die Ebene darunter bleibt stehen und kommt beim Zurück wieder zum
   Vorschein – mitsamt eingetipptem Betrag. */
.sheet__layer { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sheet__layer[hidden] { display: none; }
.sheet__layer > * { flex: 1; min-height: 0; }

.seg { display: flex; gap: 2px; margin: 12px var(--gutter); padding: 2px; background: var(--fill); border-radius: 10px; }
.seg button { flex: 1; padding: 12px; border-radius: 8px; font-size: 15px; }
.seg button.is-active { background: var(--card); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.12); }

.amount-display {
  text-align: center; font-size: 46px; font-weight: 800; letter-spacing: -1.6px;
  font-variant-numeric: tabular-nums; padding: 18px 16px 6px;
  white-space: nowrap;
}
.amount-display.is-zero { color: var(--text-3); }

.keypad { padding: 10px 10px calc(8px + env(safe-area-inset-bottom)); background: var(--card); border-top: .5px solid var(--sep); }
.keypad__row { display: flex; }
.keypad__key { flex: 1; padding: 12px 0; font-size: 25px; display: grid; place-items: center; border-radius: 10px; }
.keypad__key:active { background: var(--fill); }

.grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: var(--gutter);
}
.grid__item {
  background: var(--card); border-radius: 16px; padding: 12px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 104px;
  justify-content: center;
}
.grid__badge { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: #fff; }
.grid__name { font-size: 12.5px; text-align: center; line-height: 1.2; }

.chips { display: flex; gap: 8px; overflow-x: auto; padding: 0 var(--gutter) 4px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 0 12px; border-radius: 19px; background: var(--card);
  border: .5px solid var(--sep); font-size: 14px; min-height: 38px;
}
.chip.is-active { border-width: 1.5px; font-weight: 600; }

.field {
  width: 100%; padding: 14px var(--gutter); border: 0; background: none;
  font: inherit; color: inherit;
}
.field::placeholder { color: var(--text-3); }

.hint { padding: 8px calc(var(--gutter) + 4px) 0; font-size: 13px; color: var(--text-2); line-height: 1.35; }

.banner {
  display: flex; align-items: center; gap: 10px; margin: 0 var(--gutter) 12px;
  padding: 14px var(--gutter); border-radius: 16px; font-size: 14px; line-height: 1.35;
}
.banner--warn { background: color-mix(in srgb, var(--orange) 14%, transparent); }
.banner--info { background: color-mix(in srgb, var(--a1) 14%, transparent); }
.banner button { color: var(--a-text); font-weight: 600; font-size: 14px; min-height: 0; flex: none; }

/* ---------- Tab-Leiste ---------- */
.tabbar {
  /* Steht im Fluss, nicht fixiert – siehe oben bei html, body. */
  position: relative; z-index: 30; flex: none;
  /* --tabbg statt fester Farbe: Der Wert wird für hell und dunkel gepflegt,
     stand hier aber fest auf dem hellen Ton - die Leiste leuchtete im
     Dunkelmodus weiß unter der schwarzen Seite. */
  display: flex; background: var(--tabbg);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: .5px solid var(--sep);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 0 5px; font-size: 10px; color: var(--text-2);
}
.tab.is-active { color: var(--a-text); }

/* ---------- Kurzmeldung ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--tabbar) + 16px); transform: translateX(-50%);
  z-index: 50; background: rgba(28,28,30,.94); color: #fff;
  padding: 12px 18px; border-radius: 14px; font-size: 14.5px; max-width: 88vw;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- Farbwahl ---------- */
.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch {
  width: 44px; height: 44px; min-height: 44px; border-radius: 15px;
  background: var(--sw); display: grid; place-items: center;
  transition: transform .16s, box-shadow .16s;
}
.swatch.is-active {
  transform: scale(1.06);
  box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--sw);
}