// Desktop Finanzen — overview, chart switcher, transactions ledger.

function ScreenFinance({ go, rentals, equipment }) {
  const t = useTheme();
  const toast = useToast();
  const [tx, setTx] = useState(SEED_TX);
  const [chart, setChart] = useState('bars');
  const [txFilter, setTxFilter] = useState('alle');
  const [sheet, setSheet] = useState(null); // {} new | tx edit
  const [monthDetail, setMonthDetail] = useState(null); // month key
  const fin = buildFinanceSummary(FIN_BARS);
  const CURRENT_BALANCE = 4820;

  const depositsHeld = rentals.filter((r) => r.depositStatus === 'erhalten').reduce((s, r) => s + (Number(r.deposit) || 0), 0);
  const openInvoices = rentals.filter((r) => r.paymentStatus === 'offen').reduce((s, r) => s + rentalTotal(r), 0);

  const visibleTx = tx.filter((x) => txFilter === 'alle' || x.kind === txFilter);
  const saveTx = (x) => { setTx((prev) => { const ex = prev.find((p) => p.id === x.id); return ex ? prev.map((p) => p.id === x.id ? x : p) : [{ ...x, id: 't-' + Date.now() }, ...prev]; }); toast('Buchung gespeichert'); };
  const delTx = (id) => { setTx((prev) => prev.filter((p) => p.id !== id)); toast('Buchung gelöscht'); };

  const CHART_TYPES = [['bars', 'Balken'], ['line', 'Verlauf'], ['area', 'Gewinn'], ['donut', 'Anteil']];
  const card = { background: t.card, borderRadius: 16, boxShadow: t.shadowCard };

  return (
    <>
      <Toolbar title="Finanzen" subtitle="Mai 2026">
        <Button variant="primary" icon={icons.plus} onClick={() => setSheet({ kind: 'in' })}>Neue Buchung</Button>
      </Toolbar>
      <Scroll style={{ background: t.bg }}>
        <div style={{ maxWidth: 1120, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 18, alignItems: 'start' }}>

          {/* LEFT */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            {/* balance */}
            <div style={{ ...card, padding: 24 }}>
              <div style={{ fontSize: 11, color: t.textSec, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 1 }}>Kontostand</div>
              <div style={{ fontSize: 44, fontWeight: 600, color: t.text, letterSpacing: -1.5, marginTop: 6, ...NUMS }}>{CURRENT_BALANCE.toLocaleString('de-DE')} <span style={{ fontSize: 24, color: t.textSec }}>€</span></div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 16, marginTop: 20, paddingTop: 18, borderTop: `0.5px solid ${t.sep}` }}>
                {[['Einnahmen · Mai', `+${fin.income} €`, t.green], ['Ausgaben · Mai', `−${fin.expenses} €`, t.red], ['Netto · Mai', `${fin.net >= 0 ? '+' : ''}${fin.net} €`, t.text]].map(([l, v, c]) => (
                  <div key={l}><div style={{ fontSize: 10, color: t.textSec, fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.5 }}>{l}</div><div style={{ fontSize: 19, fontWeight: 700, color: c, marginTop: 4, ...NUMS }}>{v}</div></div>
                ))}
              </div>
            </div>

            {/* chart */}
            <div style={{ ...card, padding: 22 }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
                <div style={{ fontSize: 15, fontWeight: 700, color: t.text }}>Einnahmen & Ausgaben</div>
                <Segmented size="sm" value={chart} onChange={setChart} options={CHART_TYPES}/>
              </div>
              {chart === 'bars' && <ChartBars bars={FIN_BARS}/>}
              {chart === 'line' && <ChartLine bars={FIN_BARS}/>}
              {chart === 'area' && <ChartArea bars={FIN_BARS}/>}
              {chart === 'donut' && <ChartDonut income={fin.income} expenses={fin.expenses} net={fin.net}/>}
              <div style={{ display: 'flex', gap: 16, marginTop: 16, justifyContent: 'center' }}>
                <Legend color={t.green} label="Einnahmen"/>
                <Legend color={t.red} label="Ausgaben"/>
              </div>
            </div>

            {/* transactions */}
            <div style={{ ...card, padding: 22 }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
                <div style={{ fontSize: 15, fontWeight: 700, color: t.text }}>Buchungen</div>
                <Segmented size="sm" value={txFilter} onChange={setTxFilter} options={[['alle', 'Alle'], ['in', 'Einnahmen'], ['out', 'Ausgaben']]}/>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column' }}>
                {visibleTx.map((x, i) => (
                  <Pressable key={x.id} onClick={() => setSheet(x)} scale={0.99} hoverBg={t.cardAlt} style={{ borderRadius: 10 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 13, padding: '11px 10px', borderBottom: i < visibleTx.length - 1 ? `0.5px solid ${t.sep}` : 'none' }}>
                      <div style={{ width: 36, height: 36, borderRadius: 10, background: (x.kind === 'in' ? t.green : t.red) + '1e', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                        <Icon d={x.kind === 'in' ? 'M12 19V5M5 12l7-7 7 7' : 'M12 5v14M5 12l7 7 7-7'} color={x.kind === 'in' ? t.green : t.red} size={17} sw={2.4}/>
                      </div>
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{ fontSize: 13.5, fontWeight: 600, color: t.text }}>{x.label}</div>
                        <div style={{ fontSize: 11.5, color: t.textSec, marginTop: 1 }}>{x.sub} · {x.date}</div>
                      </div>
                      <div style={{ fontSize: 14.5, fontWeight: 700, color: x.kind === 'in' ? t.green : t.text, ...NUMS }}>{x.kind === 'in' ? '+' : '−'}{x.amount} €</div>
                    </div>
                  </Pressable>
                ))}
              </div>
            </div>

            {/* monatsverlauf — drill into past months */}
            <div style={{ ...card, padding: 22 }}>
              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 12 }}>
                <div style={{ fontSize: 15, fontWeight: 700, color: t.text }}>Monatsverlauf</div>
                <div style={{ fontSize: 11, color: t.textTer, fontWeight: 600 }}>Klick für Analyse</div>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column' }}>
                {Object.entries(MONTHS_DETAIL).reverse().map(([key, md], i, arr) => {
                  const prof = md.income - md.expenses;
                  const isCurrent = key === CURRENT_MONTH_KEY;
                  return (
                    <Pressable key={key} onClick={() => setMonthDetail(key)} scale={0.99} hoverBg={t.cardAlt} style={{ borderRadius: 10 }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '11px 10px', borderBottom: i < arr.length - 1 ? `0.5px solid ${t.sep}` : 'none' }}>
                        <div style={{ width: 44, height: 44, borderRadius: 11, background: isCurrent ? t.accentSoft : t.chip, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                          <div style={{ fontSize: 10, color: isCurrent ? t.accent : t.textSec, fontWeight: 700, letterSpacing: 0.4, textTransform: 'uppercase' }}>{md.short}</div>
                          <div style={{ fontSize: 11, color: isCurrent ? t.accent : t.text, fontWeight: 700, ...NUMS }}>{key.slice(2, 4)}</div>
                        </div>
                        <div style={{ flex: 1, minWidth: 0 }}>
                          <div style={{ fontSize: 14, fontWeight: 600, color: t.text, display: 'flex', alignItems: 'center', gap: 7 }}>
                            {md.label}
                            {isCurrent && <span style={{ fontSize: 9, fontWeight: 700, color: t.accent, background: t.accentSoft, padding: '2px 7px', borderRadius: 100, letterSpacing: 0.4 }}>JETZT</span>}
                          </div>
                          <div style={{ fontSize: 11.5, color: t.textSec, marginTop: 3, display: 'flex', gap: 12, ...NUMS }}>
                            <span style={{ color: t.green, fontWeight: 600 }}>+{md.income.toLocaleString('de-DE')} €</span>
                            <span style={{ color: t.red, fontWeight: 600 }}>−{md.expenses.toLocaleString('de-DE')} €</span>
                          </div>
                        </div>
                        <div style={{ textAlign: 'right' }}>
                          <div style={{ fontSize: 16, fontWeight: 700, color: prof >= 0 ? t.green : t.red, ...NUMS }}>{prof >= 0 ? '+' : '−'}{Math.abs(prof).toLocaleString('de-DE')} €</div>
                          <div style={{ fontSize: 10.5, color: t.textSec, fontWeight: 500, marginTop: 1 }}>Netto</div>
                        </div>
                        <Icon d="M9 5l7 7-7 7" color={t.textTer} size={14} sw={2}/>
                      </div>
                    </Pressable>
                  );
                })}
              </div>
            </div>
          </div>

          {/* RIGHT */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            {/* outstanding */}
            <div style={{ ...card, padding: 20 }}>
              <SectionTitle>Offene Posten</SectionTitle>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 14px', background: t.orangeSoft, borderRadius: 12 }}>
                  <div><div style={{ fontSize: 12.5, fontWeight: 600, color: t.text }}>Offene Rechnungen</div><div style={{ fontSize: 11, color: t.textSec, marginTop: 1 }}>{rentals.filter((r) => r.paymentStatus === 'offen').length} Vorgänge</div></div>
                  <div style={{ fontSize: 19, fontWeight: 700, color: t.orange, ...NUMS }}>{openInvoices} €</div>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 14px', background: t.greenSoft, borderRadius: 12 }}>
                  <div><div style={{ fontSize: 12.5, fontWeight: 600, color: t.text }}>Gehaltene Kautionen</div><div style={{ fontSize: 11, color: t.textSec, marginTop: 1 }}>Treuhand</div></div>
                  <div style={{ fontSize: 19, fontWeight: 700, color: t.green, ...NUMS }}>{depositsHeld} €</div>
                </div>
              </div>
            </div>

            {/* YTD summary */}
            <div style={{ ...card, padding: 20 }}>
              <SectionTitle>Jahresübersicht</SectionTitle>
              <DRow label="Einnahmen" value={`+${fin.ytdInc.toLocaleString('de-DE')} €`} color={t.green} mono/>
              <DRow label="Ausgaben" value={`−${fin.ytdExp.toLocaleString('de-DE')} €`} color={t.red} mono/>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingTop: 12 }}>
                <div style={{ fontSize: 14, fontWeight: 700, color: t.text }}>Gewinn</div>
                <div style={{ fontSize: 22, fontWeight: 700, color: t.green, ...NUMS }}>+{fin.ytdNet.toLocaleString('de-DE')} €</div>
              </div>
            </div>

            {/* top earners */}
            <div style={{ ...card, padding: 20 }}>
              <SectionTitle action="Equipment ›" onAction={() => go('equipment')}>Top-Erlöse je Gerät</SectionTitle>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                {[...equipment].map((e) => ({ e, sum: rentals.filter((r) => r.equipmentId === e.id && r.paymentStatus === 'bezahlt').reduce((s, r) => s + rentalTotal(r), 0) })).sort((a, b) => b.sum - a.sum).slice(0, 5).map(({ e, sum }) => (
                  <div key={e.id} style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '7px 0' }}>
                    <EqAvatar item={e} size={34} radius={9}/>
                    <div style={{ flex: 1, minWidth: 0, fontSize: 13, fontWeight: 600, color: t.text, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{e.name}</div>
                    <div style={{ fontSize: 13.5, fontWeight: 700, color: t.green, ...NUMS }}>{sum} €</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </Scroll>

      <TxSheet open={sheet !== null} initial={sheet && sheet.id ? sheet : null} defaultKind={sheet && sheet.kind} onClose={() => setSheet(null)} onSave={saveTx} onDelete={delTx}/>
      <MonthDetailSheet open={monthDetail !== null} monthKey={monthDetail} onClose={() => setMonthDetail(null)}/>
    </>
  );
}

function TxSheet({ open, initial, defaultKind, onClose, onSave, onDelete }) {
  const t = useTheme();
  const isEdit = !!(initial && initial.id);
  const blank = { kind: defaultKind || 'in', label: '', sub: '', amount: '', date: 'Heute' };
  const [form, setForm] = useState(blank);
  useEffect(() => { if (open) setForm(initial ? { ...initial, amount: String(initial.amount) } : { ...blank, kind: defaultKind || 'in' }); }, [open, initial]);
  const set = (k, v) => setForm((f) => ({ ...f, [k]: v }));
  const valid = form.label.trim() && parseFloat(String(form.amount).replace(',', '.')) > 0;
  const save = () => { if (!valid) return; onSave({ ...form, id: form.id, amount: Math.round(parseFloat(String(form.amount).replace(',', '.'))), sub: form.sub.trim() || (form.kind === 'in' ? 'Vermietung' : 'Ausgabe') }); onClose(); };
  if (!open) return null;
  return (
    <Sheet open={open} onClose={onClose} width={440}>
      <div style={{ padding: '4px 26px 24px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <div style={{ fontSize: 21, fontWeight: 700, color: t.text, letterSpacing: -0.4 }}>{isEdit ? 'Buchung bearbeiten' : 'Neue Buchung'}</div>
          <Pressable onClick={onClose}><div style={{ fontSize: 14, color: t.textSec, fontWeight: 500 }}>Abbrechen</div></Pressable>
        </div>
        <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
          {[['in', 'Einnahme', t.green], ['out', 'Ausgabe', t.red]].map(([k, l, c]) => (
            <Pressable key={k} onClick={() => set('kind', k)} scale={0.96} style={{ flex: 1 }}><div style={{ padding: '12px 0', textAlign: 'center', borderRadius: 10, background: form.kind === k ? t.solidBg : t.chip, color: form.kind === k ? t.solidFg : t.text, fontSize: 13, fontWeight: 600, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 7 }}><span style={{ width: 7, height: 7, borderRadius: 4, background: c }}/>{l}</div></Pressable>
          ))}
        </div>
        <Field label="Betrag (€)"><TextInput type="number" value={form.amount} onChange={(e) => set('amount', e.target.value)} placeholder="0" style={{ fontSize: 22, fontWeight: 600 }}/></Field>
        <Field label="Bezeichnung"><TextInput value={form.label} onChange={(e) => set('label', e.target.value)} placeholder={form.kind === 'in' ? 'z.B. Hochzeit Schmidt' : 'z.B. Neuer Lautsprecher'}/></Field>
        <Field label="Notiz"><TextInput value={form.sub} onChange={(e) => set('sub', e.target.value)} placeholder="optional"/></Field>
        <div style={{ display: 'flex', gap: 10, marginTop: 20 }}>
          {isEdit && <Pressable onClick={() => { onDelete(form.id); onClose(); }} scale={0.97}><div style={{ padding: '12px 18px', borderRadius: 10, background: t.redSoft, color: t.red, fontSize: 14, fontWeight: 600 }}>Löschen</div></Pressable>}
          <Pressable onClick={save} scale={0.98} style={{ flex: 1 }}><div style={{ padding: '12px 0', textAlign: 'center', borderRadius: 10, background: valid ? t.solidBg : t.chip, color: valid ? t.solidFg : t.textTer, fontSize: 14, fontWeight: 700 }}>Speichern</div></Pressable>
        </div>
      </div>
    </Sheet>
  );
}

Object.assign(window, { ScreenFinance, TxSheet, MonthDetailSheet });

// ── Modal: drill into a specific month for analysis ──
function MonthDetailSheet({ open, monthKey, onClose }) {
  const t = useTheme();
  const p = finPalette(t);
  const [chart, setChart] = useState('bars');
  if (!open || !monthKey) return null;
  const md = MONTHS_DETAIL[monthKey];
  if (!md) return null;

  const profit = md.income - md.expenses;
  const margin = md.income > 0 ? Math.round(profit / md.income * 100) : 0;
  const keys = Object.keys(MONTHS_DETAIL);
  const idx = keys.indexOf(monthKey);
  const prev = idx > 0 ? MONTHS_DETAIL[keys[idx - 1]] : null;
  const incTrend = prev ? pctF(md.income, prev.income) : null;
  const expTrend = prev ? pctF(md.expenses, prev.expenses) : null;
  const profTrend = prev ? pctF(profit, prev.income - prev.expenses) : null;

  const topIn  = [...md.transactions].filter((x) => x.kind === 'in').sort((a, b) => b.amount - a.amount)[0];
  const topOut = [...md.transactions].filter((x) => x.kind === 'out').sort((a, b) => b.amount - a.amount)[0];

  const CHART_TYPES = [['bars', 'Balken'], ['line', 'Verlauf'], ['area', 'Gewinn'], ['donut', 'Anteil']];

  return (
    <Sheet open={open} onClose={onClose} width={680}>
      <div style={{ padding: '4px 28px 28px' }}>
        {/* Header */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <div>
            <div style={{ fontSize: 13, color: t.textSec, fontWeight: 500 }}>Monatsanalyse</div>
            <div style={{ fontSize: 28, fontWeight: 700, color: t.text, letterSpacing: -0.6, marginTop: 2 }}>{md.label}</div>
          </div>
          <Pressable onClick={onClose}><div style={{ fontSize: 14, color: t.textSec, fontWeight: 500 }}>Schließen</div></Pressable>
        </div>

        {/* Big stats card */}
        <div style={{ marginTop: 18, background: t.cardAlt, borderRadius: 16, padding: '18px 20px' }}>
          <div style={{ fontSize: 10, color: t.textSec, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 1.0 }}>Netto-Ergebnis</div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginTop: 4 }}>
            <div style={{ fontSize: 40, fontWeight: 600, color: profit >= 0 ? p.pos : p.neg, letterSpacing: -1.2, ...NUMS }}>
              {profit >= 0 ? '+' : ''}{profit.toLocaleString('de-DE')}<span style={{ fontSize: 22, marginLeft: 3 }}>€</span>
            </div>
            {profTrend && (
              <div style={{ fontSize: 12, color: profTrend.up ? p.pos : p.neg, fontWeight: 600, ...NUMS }}>
                {profTrend.up ? '▲' : '▼'} {profTrend.val}%
              </div>
            )}
          </div>
          <div style={{ fontSize: 12, color: t.textSec, marginTop: 4, ...NUMS }}>
            Marge {margin}% · {md.transactions.length} Buchungen
          </div>

          <div style={{ display: 'flex', marginTop: 16, paddingTop: 14, borderTop: `0.5px solid ${t.sep}` }}>
            <div style={{ flex: 1, paddingRight: 16, borderRight: `0.5px solid ${t.sep}` }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <div style={{ width: 6, height: 6, borderRadius: 3, background: p.pos }} />
                <div style={{ fontSize: 10, color: t.textSec, fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.8 }}>Einnahmen</div>
              </div>
              <div style={{ fontSize: 20, fontWeight: 600, color: t.text, marginTop: 5, ...NUMS }}>{md.income.toLocaleString('de-DE')} <span style={{ fontSize: 13, color: t.textSec }}>€</span></div>
              {incTrend && <div style={{ fontSize: 10.5, color: incTrend.up ? p.pos : p.neg, fontWeight: 600, marginTop: 2, ...NUMS }}>{incTrend.up ? '▲' : '▼'} {incTrend.val}% vs. Vormonat</div>}
            </div>
            <div style={{ flex: 1, paddingLeft: 16 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <div style={{ width: 6, height: 6, borderRadius: 3, background: p.neg }} />
                <div style={{ fontSize: 10, color: t.textSec, fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.8 }}>Ausgaben</div>
              </div>
              <div style={{ fontSize: 20, fontWeight: 600, color: t.text, marginTop: 5, ...NUMS }}>{md.expenses.toLocaleString('de-DE')} <span style={{ fontSize: 13, color: t.textSec }}>€</span></div>
              {expTrend && <div style={{ fontSize: 10.5, color: !expTrend.up ? p.pos : p.neg, fontWeight: 600, marginTop: 2, ...NUMS }}>{expTrend.up ? '▲' : '▼'} {expTrend.val}% vs. Vormonat</div>}
            </div>
          </div>
        </div>

        {/* Chart + switcher */}
        <div style={{ marginTop: 16, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ fontSize: 13, color: t.textSec, fontWeight: 600 }}>Verlauf im Monat</div>
          <Segmented size="sm" value={chart} onChange={setChart} options={CHART_TYPES}/>
        </div>
        <div style={{ marginTop: 12 }}>
          {chart === 'bars'  && <ChartBars bars={md.bars}/>}
          {chart === 'line'  && <ChartLine bars={md.bars}/>}
          {chart === 'area'  && <ChartArea bars={md.bars}/>}
          {chart === 'donut' && <ChartDonut income={md.income} expenses={md.expenses} net={profit}/>}
        </div>

        {/* Top positions */}
        {(topIn || topOut) && (
          <div style={{ marginTop: 22 }}>
            <div style={{ fontSize: 11, color: t.textSec, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.6, marginBottom: 10 }}>Top-Positionen</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
              {topIn && (
                <div style={{ background: t.cardAlt, borderRadius: 12, padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 11 }}>
                  <div style={{ width: 32, height: 32, borderRadius: 9, background: t.greenSoft, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                    <Icon d="M7 17L17 7M17 7H9M17 7v8" color={p.pos} size={15} sw={2.2}/>
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 10, color: t.textSec, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.5 }}>Größte Einnahme</div>
                    <div style={{ fontSize: 13.5, fontWeight: 600, color: t.text, marginTop: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{topIn.label}</div>
                  </div>
                  <div style={{ fontSize: 14, fontWeight: 700, color: p.pos, ...NUMS }}>+{topIn.amount} €</div>
                </div>
              )}
              {topOut && (
                <div style={{ background: t.cardAlt, borderRadius: 12, padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 11 }}>
                  <div style={{ width: 32, height: 32, borderRadius: 9, background: t.redSoft, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                    <Icon d="M17 7L7 17M7 17h8M7 17V9" color={p.neg} size={15} sw={2.2}/>
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 10, color: t.textSec, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.5 }}>Größte Ausgabe</div>
                    <div style={{ fontSize: 13.5, fontWeight: 600, color: t.text, marginTop: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{topOut.label}</div>
                  </div>
                  <div style={{ fontSize: 14, fontWeight: 700, color: p.neg, ...NUMS }}>−{topOut.amount} €</div>
                </div>
              )}
            </div>
          </div>
        )}

        {/* All transactions */}
        <div style={{ marginTop: 22 }}>
          <div style={{ fontSize: 11, color: t.textSec, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.6, marginBottom: 8 }}>Alle Buchungen</div>
          <div style={{ background: t.cardAlt, borderRadius: 12, overflow: 'hidden' }}>
            {md.transactions.map((x, i, arr) => {
              const isIn = x.kind === 'in';
              return (
                <div key={x.id} style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '11px 14px', borderBottom: i < arr.length - 1 ? `0.5px solid ${t.sep}` : 'none' }}>
                  <div style={{ width: 28, height: 28, borderRadius: 8, background: isIn ? t.greenSoft : t.redSoft, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                    <Icon d={isIn ? 'M7 17L17 7M17 7H9M17 7v8' : 'M17 7L7 17M7 17h8M7 17V9'} color={isIn ? p.pos : p.neg} size={13} sw={2.2}/>
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 13, fontWeight: 600, color: t.text, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{x.label}</div>
                    <div style={{ fontSize: 11, color: t.textSec, marginTop: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{x.sub} · {x.date}</div>
                  </div>
                  <div style={{ fontSize: 13.5, fontWeight: 700, color: isIn ? p.pos : t.text, ...NUMS }}>{isIn ? '+' : '−'}{x.amount} €</div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </Sheet>
  );
}