// ============================================================
// FINAFAMILY — Dashboard Screen
// Extras: Balancete card, Dia a Dia do contexto, alertas de notificação
// ============================================================

const { useState, useMemo, useEffect } = React;

// ── Dia a Dia quick form ───────────────────────────────────
function DiaDiaQuickForm({ onClose, onSave }) {
  const { categories, paymentMethods, currentMember } = useApp();
  const today = todayLocalISO();
  const [desc, setDesc]     = useState('');
  const [value, setValue]   = useState('');
  const [date, setDate]     = useState(today);
  const [error, setError]   = useState('');
  const myPMs = paymentMethods.filter(pm => pm.memberId === currentMember?.id);
  const [pmId, setPmId]     = useState(myPMs[0]?.id || '');
  const [catId, setCatId]   = useState(categories[0]?.id || '');

  function handleSave() {
    if (!desc.trim()) { setError('Informe o que foi gasto'); return; }
    if (!value || isNaN(parseFloat(value))) { setError('Valor inválido'); return; }
    onSave({
      desc: desc.trim(), value: parseFloat(value), date: date || today,
      isDiaDia: true, type: 'single', status: 'pending',
      memberId: currentMember?.id || '',
      categoryId: catId || categories[0]?.id || '',
      pmId: pmId || myPMs[0]?.id || '',
      visibility: 'private', blocked: false,
    });
    onClose();
  }

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
      <div style={{ padding: '12px 14px', background: 'var(--accent-tint)', borderRadius: 10, display: 'flex', alignItems: 'center', gap: 8 }}>
        <Icon name="Zap" size={14} style={{ color: 'var(--accent)' }} />
        <span style={{ fontSize: 12, color: 'var(--accent)', fontWeight: 600 }}>Lançamento rápido — marcado como Dia a Dia</span>
      </div>
      <FormField label="O que foi?" error={error && !desc.trim() ? error : ''}>
        <Input value={desc} onChange={e => { setDesc(e.target.value); setError(''); }} placeholder="Ex: Lanche, Uber, Farmácia…" autoFocus />
      </FormField>
      <div className="r-stack-sm" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        <FormField label="Valor (R$)" error={error && desc.trim() ? error : ''}>
          <Input type="number" value={value} onChange={e => { setValue(e.target.value); setError(''); }} placeholder="0,00" onKeyDown={e => e.key === 'Enter' && handleSave()} />
        </FormField>
        <FormField label="Data">
          <Input type="date" value={date} onChange={e => setDate(e.target.value)} />
        </FormField>
      </div>
      <div className="r-stack-sm" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        <FormField label="Categoria">
          <Select value={catId} onChange={e => setCatId(e.target.value)}>
            {categories.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
          </Select>
        </FormField>
        <FormField label="Meio de Pagamento">
          <Select value={pmId} onChange={e => setPmId(e.target.value)}>
            <option value="">— Sem meio —</option>
            {myPMs.map(pm => <option key={pm.id} value={pm.id}>{pm.name}</option>)}
          </Select>
        </FormField>
      </div>
      <div style={{ display: 'flex', gap: 10, marginTop: 2 }}>
        <button className="ff-button" onClick={onClose} style={{ flex: 1, padding: '11px', background: 'var(--surface-2)', border: '1px solid var(--border)', borderRadius: 10, color: 'var(--text-2)', fontWeight: 600, cursor: 'pointer', fontSize: 14 }}>Cancelar</button>
        <button className="ff-button ff-action ff-primary-action" onClick={handleSave} style={{ flex: 2, padding: '11px', background: "var(--action-bg)", border: 'none', borderRadius: 10, color: 'white', fontWeight: 700, cursor: 'pointer', fontSize: 14, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
          <Icon name="Zap" size={15} /> Lançar
        </button>
      </div>
    </div>
  );
}

function DiaDiaEditForm({ expense, onClose, onSave, onDelete }) {
  const { categories, paymentMethods, currentMember } = useApp();
  const [desc, setDesc]   = useState(expense.desc);
  const [value, setValue] = useState(String(expense.value));
  const [catId, setCatId] = useState(expense.categoryId || '');
  const [pmId, setPmId]   = useState(expense.pmId || '');
  const [error, setError] = useState('');
  const myPMs = paymentMethods.filter(pm => pm.memberId === currentMember?.id);

  function handleSave() {
    if (!desc.trim()) { setError('Informe a descrição'); return; }
    if (!value || isNaN(parseFloat(value))) { setError('Valor inválido'); return; }
    onSave({ desc: desc.trim(), value: parseFloat(value), categoryId: catId, pmId });
  }

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
      <FormField label="Descrição" error={error}>
        <Input value={desc} onChange={e => { setDesc(e.target.value); setError(''); }} />
      </FormField>
      <div className="r-stack-sm" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        <FormField label="Valor (R$)">
          <Input type="number" value={value} onChange={e => setValue(e.target.value)} />
        </FormField>
        <FormField label="Categoria">
          <Select value={catId} onChange={e => setCatId(e.target.value)}>
            {categories.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
          </Select>
        </FormField>
      </div>
      {myPMs.length > 0 && (
        <FormField label="Meio de Pagamento">
          <Select value={pmId} onChange={e => setPmId(e.target.value)}>
            {myPMs.map(pm => <option key={pm.id} value={pm.id}>{pm.name}</option>)}
          </Select>
        </FormField>
      )}
      <div style={{ display: 'flex', gap: 8, marginTop: 4 }}>
        <button className="ff-button" onClick={onDelete} style={{ padding: '10px 14px', background: "var(--danger-bg)", border: '1px solid #EF444440', borderRadius: 10, color: "var(--danger)", fontWeight: 700, cursor: 'pointer', fontSize: 13, display: 'flex', alignItems: 'center', gap: 6 }}>
          <Icon name="Trash2" size={13} /> Apagar
        </button>
        <button className="ff-button" onClick={onClose} style={{ flex: 1, padding: '10px', background: 'var(--surface-2)', border: '1px solid var(--border)', borderRadius: 10, color: 'var(--text-2)', fontWeight: 600, cursor: 'pointer', fontSize: 13 }}>Cancelar</button>
        <button className="ff-button ff-action ff-primary-action" onClick={handleSave} style={{ flex: 2, padding: '10px', background: "var(--action-bg)", border: 'none', borderRadius: 10, color: 'white', fontWeight: 700, cursor: 'pointer', fontSize: 13 }}>Salvar</button>
      </div>
    </div>
  );
}

function Dashboard({ onNavigate, onOpenBalancete }) {
  const {
    currentMember, members, monthExpenses, monthIncomes,
    totalExpenses, totalIncome, balance, commitment,
    expenses, incomes, categories, paymentMethods, investments, currentMonth,
    diaDiaUsed, diaDiaLimit, diaDiaPct, diaDiaExpenses,
    diaDiaDailyTarget, diaDiaOverPace, diaDiaTargetFromNow,
    balancete, notifications, addExpense, updateExpense, deleteExpense,
    mySharedDebts, sharedStatus, acceptSharedExpense, acceptSharedExpenses, balanceteExpenses,
    fetchMonthExpenses,
  } = useApp();
  const displayCategories = expenses.some(e => e.origin === 'member_operation' || e.operationId)
    ? [...categories, { id: 'member_operation', name: 'Valores entre membros', icon: 'Users', color: '#5264de' }]
    : categories;
  const [selectedCat,    setSelectedCat]    = useState(null);
  const [showAllCategories, setShowAllCategories] = useState(false);
  const [toast,          setToast]          = useState(null);
  const [showDiaDiaForm, setShowDiaDiaForm] = useState(false);
  const [editingDiaDia,  setEditingDiaDia]  = useState(null);
  const [diaDiaToast,    setDiaDiaToast]    = useState(null);

  // Despesas do mês sob RESPONSABILIDADE do usuário logado — nunca "quem criou".
  // Cobre cota de divisão e responsabilidade integral transferida por outra
  // pessoa (ex: "CARRO" lançado por outro membro, 100% responsabilidade minha).
  // Distinto de "Meios de Pagamento" (fluxo de caixa: tudo que passa pelo MEU
  // cartão, mesmo que a responsabilidade seja de outro membro) — as duas visões
  // juntas permitem ao dono do cartão diferenciar "o que sai do meu cartão" de
  // "o que é efetivamente meu".
  const myResponsibilityExpenses = useMemo(() => {
    return expenses.filter(e => {
      const d = parseLocalDate(e.date);
      if (d.getFullYear() !== currentMonth.year || d.getMonth() + 1 !== currentMonth.month) return false;
      return expenseResponsibilityRows(e).some(row => row.responsibleMemberId === currentMember.id);
    });
  }, [expenses, currentMonth, currentMember]);

  function myResponsibilityAmount(exp) {
    const row = expenseResponsibilityRows(exp).find(row => row.responsibleMemberId === currentMember.id);
    return row ? row.amountCents / 100 : 0;
  }

  const myResponsibilityTotal = useMemo(() =>
    myResponsibilityExpenses.reduce((s, e) => s + myResponsibilityAmount(e), 0),
  [myResponsibilityExpenses, currentMember]);

  const catBreakdown = useMemo(() => {
    return displayCategories.map(cat => {
      const total = myResponsibilityExpenses.filter(e => e.categoryId === cat.id)
        .reduce((s, e) => s + myResponsibilityAmount(e), 0);
      return { ...cat, total };
    }).filter(c => c.total > 0).sort((a, b) => b.total - a.total);
  }, [myResponsibilityExpenses, categories, currentMember, expenses]);

  const recentExpenses = useMemo(() => {
    return [...myResponsibilityExpenses].sort((a, b) => parseLocalDate(b.date) - parseLocalDate(a.date)).slice(0, 6);
  }, [myResponsibilityExpenses]);

  const myCards = paymentMethods.filter(pm => pm.memberId === currentMember.id && pm.type === 'credit');

  // Total gasto por cartão no mês corrente (valor cheio — igual à tela de Cartões)
  const pmMonthTotals = useMemo(() => {
    const totals = {};
    expenses.forEach(e => {
      if (!e.pmId) return;
      const d = new Date((e.date || '').length === 10 ? e.date + 'T00:00:00' : e.date);
      if (d.getFullYear() === currentMonth.year && d.getMonth() + 1 === currentMonth.month) {
        totals[e.pmId] = (totals[e.pmId] || 0) + (e.value || 0);
      }
    });
    return totals;
  }, [expenses, currentMonth]);
  const totalInvested = investments.filter(i => i.memberId === currentMember.id).reduce((s, i) => s + i.value, 0);
  const myInvs = investments.filter(i => i.memberId === currentMember.id);
  // Taxa mensal canônica (renda fixa pela taxa anual), ponderada pelo valor aplicado.
  const avgRate = portfolioMonthlyRatePct(myInvs);

  // ── Variação percentual real vs mês anterior ────────────────
  // Usa o mesmo cálculo de receita do sixMonthProj (direto + projeção mensal + A Receber)
  // para garantir simetria com o totalIncome do mês atual.
  // Guard: se o mês anterior não tem NENHUM lançamento real (ex: primeiro mês de uso),
  // retorna noData=true e não exibe percentual — evita projeção de dados fictícios.
  const prevMonthTotals = useMemo(() => {
    const pd = new Date(currentMonth.year, currentMonth.month - 2);
    const pY = pd.getFullYear();
    const pM = pd.getMonth() + 1;

    // Guard — verifica se existem registros reais com data no mês anterior
    const hasRealInc = incomes.some(i => {
      const d = parseLocalDate(i.date);
      return d.getFullYear() === pY && d.getMonth() + 1 === pM
        && i.memberId === currentMember.id
        && !String(i.id).startsWith('projected_');
    });
    const hasRealExp = expenses.some(e => {
      const d = parseLocalDate(e.date);
      return d.getFullYear() === pY && d.getMonth() + 1 === pM
        && (e.memberId === currentMember.id
          || (e.shared && e.sharedWith?.some(sw => sw.memberId === currentMember.id))
          || e.thirdPartyMemberId === currentMember.id);
    });
    if (!hasRealInc && !hasRealExp) return { prevExp: 0, prevInc: 0, noData: true };

    // ── Despesas do mês anterior ──
    const mExps = expenses.filter(e => {
      const d = parseLocalDate(e.date);
      if (d.getFullYear() !== pY || d.getMonth() + 1 !== pM) return false;
      return e.memberId === currentMember.id
        || (e.shared && e.sharedWith?.some(sw => sw.memberId === currentMember.id))
        || e.thirdPartyMemberId === currentMember.id;
    });
    const prevExp = mExps.reduce((s, e) => {
      if (e.shared && e.sharedWith?.length) {
        const sw = e.sharedWith.find(x => x.memberId === currentMember.id);
        return s + (sw ? e.value * sw.pct / 100 : e.value);
      }
      return s + (e.value || 0);
    }, 0);

    // ── Receitas: diretas + projeção de recorrentes (mesmo critério de sixMonthProj) ──
    const direct = incomes.filter(i => {
      if (isMemberReceivableIncome(i)) return false;
      if (i.memberId !== currentMember.id) return false;
      const d = parseLocalDate(i.date);
      return d.getFullYear() === pY && d.getMonth() + 1 === pM;
    });
    const presentSigs = new Set(direct.map(i => `${(i.desc || '').trim().toLowerCase()}|${i.source}|${i.memberId}`));
    const sigMap = {};
    incomes.forEach(i => {
      const d = parseLocalDate(i.date);
      if (d.getFullYear() === pY && d.getMonth() + 1 === pM) return;
      if (i.recurrence !== 'monthly' || i.memberId !== currentMember.id || isMemberReceivableIncome(i)) return;
      const sig = `${(i.desc || '').trim().toLowerCase()}|${i.source}|${i.memberId}`;
      if (presentSigs.has(sig)) return; // já existe como direto → não projeta
      const prev = sigMap[sig] ? parseLocalDate(sigMap[sig].date) : null;
      if (!prev || d > prev) sigMap[sig] = i;
    });
    const prevProprio = [...direct, ...Object.values(sigMap)].reduce((s, i) => s + (i.value || 0), 0);

    // ── A Receber do mês anterior ──
    const mySharedCrP = mExps.filter(e =>
      e.memberId === currentMember.id && e.shared && e.sharedWith?.some(sw => sw.memberId !== currentMember.id)
    );
    const scIds = new Set(mySharedCrP.map(e => e.id));
    const shItems = mySharedCrP.flatMap(exp =>
      (exp.sharedWith||[]).filter(sw => sw.memberId !== currentMember.id)
        .map(sw => ({ dId: sw.memberId, amt: (exp.value||0) * (sw.pct||0) / 100 }))
    );
    const shSigs = new Set(shItems.map(it => `${it.dId}|${it.amt.toFixed(2)}`));
    const tpExtra = incomes.filter(i => {
      if (!isMemberReceivableIncome(i) || i.memberId !== currentMember.id) return false;
      const d = parseLocalDate(i.date);
      return d.getFullYear() === pY && d.getMonth() + 1 === pM;
    }).filter(i => {
      if (i.source === 'member_operation' || i.operationId) return true;
      if (i.relatedExpenseId && scIds.has(i.relatedExpenseId)) return false;
      if (shSigs.has(`${i.fromMemberId}|${parseFloat(i.value).toFixed(2)}`)) return false;
      return true;
    });
    const prevAReceber = shItems.reduce((s, it) => s + it.amt, 0) + tpExtra.reduce((s, i) => s + i.value, 0);
    const prevInc = prevProprio + prevAReceber;

    return { prevExp, prevInc, noData: false };
  }, [expenses, incomes, currentMonth, currentMember]);

  // Variação %: undefined se mês anterior não tem dados reais
  const incomeTrend = (!prevMonthTotals.noData && prevMonthTotals.prevInc > 0)
    ? Math.round(((totalIncome   - prevMonthTotals.prevInc) / prevMonthTotals.prevInc) * 1000) / 10
    : undefined;
  // Despesa: valor positivo = subiu, negativo = caiu (a cor é invertida via prop invertTrend no KpiCard)
  const expenseTrend = (!prevMonthTotals.noData && prevMonthTotals.prevExp > 0)
    ? Math.round(((totalExpenses - prevMonthTotals.prevExp) / prevMonthTotals.prevExp) * 1000) / 10
    : undefined;

  // ── Totais de despesas pagas e pendentes — mesmo filtro do totalExpenses ──
  const _memberMonthExps = useMemo(() => expenses.filter(e => {
    const d = new Date((e.date || '').length === 10 ? e.date + 'T00:00:00' : e.date);
    const inMonth = d.getFullYear() === currentMonth.year && d.getMonth() + 1 === currentMonth.month;
    if (!inMonth) return false;
    return expenseInvolvesMember(e, currentMember.id, paymentMethods);
  }), [expenses, currentMonth, currentMember, paymentMethods]);

  const paidExpensesTotal = useMemo(() =>
    _memberMonthExps.filter(e => e.status === 'paid').reduce((s, e) => s + memberExpenseAmount(e, currentMember.id, paymentMethods), 0),
  [_memberMonthExps, currentMember, paymentMethods]);

  const pendingExpensesTotal = useMemo(() =>
    _memberMonthExps.filter(e => e.status !== 'paid').reduce((s, e) => s + memberExpenseAmount(e, currentMember.id, paymentMethods), 0),
  [_memberMonthExps, currentMember, paymentMethods]);

  // Inclui todas as fontes: próprias, third_party e acertos (settlement)
  const receivedIncomesTotal = useMemo(() =>
    monthIncomes.filter(i => i.status === 'received').reduce((s, i) => s + (i.value || 0), 0),
  [monthIncomes]);

  const expectedIncomesTotal = useMemo(() =>
    monthIncomes.filter(i => i.status === 'expected').reduce((s, i) => s + (i.value || 0), 0),
  [monthIncomes]);

  // ── Breakdown por tipo: mês atual + 2 próximos ───────────
  const typeBreakdown = useMemo(() => {
    return [-2, -1, 0, 1, 2].map(offset => {
      const d = new Date(currentMonth.year, currentMonth.month - 1 + offset);
      const yr = d.getFullYear(), mo = d.getMonth() + 1;
      const label = ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'][d.getMonth()] + '/' + String(yr).slice(-2);
      const mExps = expenses.filter(e => {
        const ed = new Date((e.date || '').length === 10 ? e.date + 'T00:00:00' : e.date);
        if (ed.getFullYear() !== yr || ed.getMonth() + 1 !== mo) return false;
        return expenseInvolvesMember(e, currentMember.id, paymentMethods);
      });
      const sum = (arr) => arr.reduce((s, e) => s + memberExpenseAmount(e, currentMember.id, paymentMethods), 0);
      const fixed       = mExps.filter(e => e.type === 'fixed');
      const installment = mExps.filter(e => e.type === 'installment');
      const single      = mExps.filter(e => e.type === 'single' || !e.type);
      return {
        label, isCurrent: offset === 0, isPast: offset < 0, isFuture: offset > 0,
        fixed:       { count: fixed.length,       total: sum(fixed) },
        installment: { count: installment.length,  total: sum(installment) },
        single:      { count: single.length,       total: sum(single) },
        total: sum(mExps),
      };
    });
  }, [expenses, currentMonth, currentMember, paymentMethods]);

  // ── Projeção 6 meses (despesas + receitas) ────────────────
  const MONTHS_PT = ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'];
  const MONTHS_SHORT = ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'];

  const sixMonthProj = useMemo(() => {
    return Array.from({ length: 6 }, (_, i) => {
      const d    = new Date(currentMonth.year, currentMonth.month - 1 + i);
      const y    = d.getFullYear();
      const m    = d.getMonth() + 1;
      const label = `${MONTHS_SHORT[d.getMonth()]}/${String(y).slice(-2)}`;
      const fullLabel = `${MONTHS_PT[d.getMonth()]} ${y}`;

      // ── Despesas do membro neste mês (mesma regra única, valor cheio) ──
      const mExps = expenses.filter(e => {
        const ed = parseLocalDate(e.date);
        if (ed.getFullYear() !== y || ed.getMonth() + 1 !== m) return false;
        return expenseInvolvesMember(e, currentMember.id, paymentMethods);
      });

      const totalExp = mExps.reduce((s, e) => s + memberExpenseAmount(e, currentMember.id, paymentMethods), 0);

      // ── Receitas próprias do membro + projeção de recorrentes ──
      const direct = incomes.filter(i => {
        if (isMemberReceivableIncome(i)) return false;
        if (i.memberId !== currentMember.id) return false;
        const id = parseLocalDate(i.date);
        return id.getFullYear() === y && id.getMonth() + 1 === m;
      });

      const presentSigs = new Set(
        direct.filter(i => !isMemberReceivableIncome(i))
          .map(i => `${(i.desc || '').trim().toLowerCase()}|${i.source}|${i.memberId}`)
      );

      const sigMap = {};
      incomes.forEach(i => {
        const id = parseLocalDate(i.date);
        if (id.getFullYear() === y && id.getMonth() + 1 === m) return;
        if (i.recurrence !== 'monthly') return;
        if (i.memberId !== currentMember.id) return;
        if (isMemberReceivableIncome(i)) return;
        const sig = `${(i.desc || '').trim().toLowerCase()}|${i.source}|${i.memberId}`;
        if (presentSigs.has(sig)) return;
        const prev = sigMap[sig] ? parseLocalDate(sigMap[sig].date) : null;
        if (!prev || id > prev) sigMap[sig] = i;
      });

      const projectedIncs = Object.values(sigMap);
      const totalProprio = [...direct, ...projectedIncs].reduce((s, i) => s + (i.value || 0), 0);

      // ── A Receber: Reembolsos (receitas third_party) do mês — mesma base do
      // totalAReceber do mês atual e do Balancete (uma linha por devedor).
      const totalAReceber = incomes.filter(i => {
        if (!isMemberReceivableIncome(i)) return false;
        if (i.memberId !== currentMember.id) return false;
        const id = parseLocalDate(i.date);
        return id.getFullYear() === y && id.getMonth() + 1 === m;
      }).reduce((s, i) => s + (Number(i.value) || 0), 0);
      const totalInc = totalProprio + totalAReceber;

      return { y, m, label, fullLabel, totalExp, totalInc, totalProprio, totalAReceber, balance: totalInc - totalExp, isCurrent: i === 0, mExps };
    });
  }, [expenses, incomes, currentMonth, currentMember, paymentMethods]);

  // Pré-carrega os 2 meses anteriores ("Despesas por tipo" mostra −2..+2 — sem
  // isso os meses passados apareciam zerados) e os próximos 5 (projeção).
  useEffect(() => {
    for (let i = -2; i <= 5; i++) {
      if (i === 0) continue;
      const d = new Date(currentMonth.year, currentMonth.month - 1 + i);
      fetchMonthExpenses(d.getFullYear(), d.getMonth() + 1);
    }
  }, [currentMonth.year, currentMonth.month]);

  // Upcoming installments (next 7 days from today)
  const now = new Date();
  const upcoming = expenses.filter(e => {
    if (e.type !== 'installment') return false;
    const d = parseLocalDate(e.date);
    const diff = (d - now) / (1000 * 60 * 60 * 24);
    return diff >= 0 && diff <= 7 && e.memberId === currentMember.id;
  });

  // Unread notifications for alert panel
  const unreadNotifs = notifications.filter(n => !n.read).slice(0, 3);

  // Mesma base que alimentava a rosca; muda apenas a apresentação.
  const categoryTotal = catBreakdown.reduce((sum, cat) => sum + cat.total, 0);
  const selectedCategory = catBreakdown.find(cat => cat.id === selectedCat);
  const otherCategoriesTotal = catBreakdown.slice(4).reduce((sum, cat) => sum + cat.total, 0);
  const categoryPercent = value => categoryTotal > 0 ? value / categoryTotal * 100 : 0;
  const formatCategoryPercent = value => `${categoryPercent(value).toLocaleString('pt-BR', { minimumFractionDigits: 1, maximumFractionDigits: 1 })}%`;

  const filteredExpenses = selectedCat
    ? recentExpenses.filter(e => e.categoryId === selectedCat)
    : recentExpenses;

  return (
    <div className="screen-outer" style={{ padding: '24px', display: 'flex', flexDirection: 'column', gap: 24, maxWidth: 1200, margin: '0 auto', width: '100%', boxSizing: 'border-box' }}>
      {toast && <Toast message={toast} type="success" onClose={() => setToast(null)} />}
      <Modal open={showDiaDiaForm} onClose={() => setShowDiaDiaForm(false)} title="Lançar Dia a Dia">
        <DiaDiaQuickForm
          onClose={() => setShowDiaDiaForm(false)}
          onSave={exp => { addExpense(exp); setToast('Gasto lançado no Dia a Dia!'); }}
        />
      </Modal>

      {/* Edit dia-a-dia modal */}
      {editingDiaDia && (
        <Modal open={!!editingDiaDia} onClose={() => setEditingDiaDia(null)} title="Editar Gasto Dia a Dia">
          <DiaDiaEditForm
            expense={editingDiaDia}
            onClose={() => setEditingDiaDia(null)}
            onSave={(updates) => {
              updateExpense(editingDiaDia.id, updates);
              setEditingDiaDia(null);
              setToast('Gasto atualizado!');
            }}
            onDelete={() => {
              deleteExpense(editingDiaDia.id);
              setEditingDiaDia(null);
              setToast('Gasto removido.');
            }}
          />
        </Modal>
      )}

      {/* ── KPI Linha 1: Visão financeira principal ── */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }} className="dashboard-kpi-4">
        <KpiCard label="Receita do Mês"   value={fmtBRL(totalIncome)}   icon="DollarSign" color="#10B981" trend={incomeTrend}  trendLabel="vs mês ant." />
        <KpiCard label="Despesas do Mês"  value={fmtBRL(totalExpenses)} icon="Wallet"     color="#EF4444" trend={expenseTrend} trendLabel="vs mês ant." invertTrend
          sub={`Sua responsabilidade: ${fmtBRL(myResponsibilityTotal)}`} />
        <KpiCard label="Saldo"            value={fmtBRL(balance)}       icon="Activity"   color={balance >= 0 ? 'var(--accent)' : '#EF4444'} sub={balance >= 0 ? 'Positivo 🟢' : 'Negativo 🔴'} />
        <KpiCard label="Comprometimento"  value={commitment.toFixed(1) + '%'} icon="Percent" color="#F59E0B" sub="da renda mensal" />
      </div>

      {/* ── KPI Linha 2: Status de pagamentos ── */}
      <div className="dashboard-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
        <div className="ff-card" style={{ display: 'flex', alignItems: 'center', gap: 14, background: 'var(--card-bg)', border: '1px solid var(--border)', borderRadius: 'var(--card-radius)', padding: '14px 18px' }}>
          <div style={{ width: 38, height: 38, borderRadius: 11, background: "var(--success-bg)", display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <Icon name="CheckCircle" size={18} color="#10B981" />
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 11, color: 'var(--text-3)', fontWeight: 500, marginBottom: 2 }}>Receitas Recebidas</div>
            <div style={{ fontSize: 18, fontWeight: 800, color: 'var(--text-1)', letterSpacing: '-0.02em' }}>{fmtBRL(receivedIncomesTotal)}</div>
          </div>
          <div style={{ textAlign: 'right', flexShrink: 0 }}>
            <div style={{ fontSize: 11, color: ffReadableColor(expectedIncomesTotal > 0 ? "var(--warning)" : "var(--success)"), fontWeight: 600 }}>
              {expectedIncomesTotal > 0 ? `${fmtBRL(expectedIncomesTotal)} previsto` : '✓ Todas recebidas'}
            </div>
            {totalIncome > 0 && (
              <div style={{ fontSize: 10, color: 'var(--text-3)', marginTop: 2 }}>
                {(receivedIncomesTotal / totalIncome * 100).toFixed(0)}% do total
              </div>
            )}
          </div>
        </div>
        <div className="ff-card" style={{ display: 'flex', alignItems: 'center', gap: 14, background: 'var(--card-bg)', border: '1px solid var(--border)', borderRadius: 'var(--card-radius)', padding: '14px 18px' }}>
          <div style={{ width: 38, height: 38, borderRadius: 11, background: "var(--success-bg)", display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <Icon name="ShieldCheck" size={18} color="var(--accent)" />
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 11, color: 'var(--text-3)', fontWeight: 500, marginBottom: 2 }}>Despesas Pagas</div>
            <div style={{ fontSize: 18, fontWeight: 800, color: 'var(--text-1)', letterSpacing: '-0.02em' }}>{fmtBRL(paidExpensesTotal)}</div>
          </div>
          <div style={{ textAlign: 'right', flexShrink: 0 }}>
            <div style={{ fontSize: 11, color: ffReadableColor(pendingExpensesTotal > 0 ? "var(--warning)" : "var(--success)"), fontWeight: 600 }}>
              {pendingExpensesTotal > 0 ? `${fmtBRL(pendingExpensesTotal)} pendente` : totalExpenses > 0 ? '✓ Todas pagas' : '—'}
            </div>
            {totalExpenses > 0 && (
              <div style={{ fontSize: 10, color: 'var(--text-3)', marginTop: 2 }}>
                {(paidExpensesTotal / totalExpenses * 100).toFixed(0)}% do total
              </div>
            )}
          </div>
        </div>
      </div>

      {/* Middle row: Dia a Dia + Categorias + Balancete */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 280px 1fr', gap: 16 }} className="dashboard-grid-3">

        {/* Dia a Dia */}
        <Card>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 16 }}>
            <div>
              <div style={{ fontSize: 11, color: 'var(--text-3)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 4, opacity: 1 }}>Dia a Dia — {currentMember.name.split(' ')[0]}</div>
              <div style={{ fontSize: 22, fontWeight: 700, color: 'var(--text-1)', letterSpacing: '-0.02em' }}>{fmtBRL(diaDiaUsed)}</div>
              <div style={{ fontSize: 12, color: 'var(--text-3)', marginTop: 2 }}>de {fmtBRL(diaDiaLimit)} / mês</div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div style={{ fontSize: 28, fontWeight: 800, color: ffReadableColor(diaDiaPct >= 90 ? "var(--danger)" : diaDiaPct >= 80 ? "var(--warning)" : "var(--success)"), letterSpacing: '-0.03em' }}>
                {diaDiaPct.toFixed(0)}%
              </div>
              <div style={{ fontSize: 11, color: 'var(--text-3)' }}>utilizado</div>
            </div>
          </div>
          <ProgressBar pct={diaDiaPct} height={8} />
          <div style={{ marginTop: 10, fontSize: 12, color: 'var(--text-3)' }}>
            Restante: <span style={{ fontWeight: 700, color: 'var(--text-1)' }}>{fmtBRL(Math.max(0, diaDiaLimit - diaDiaUsed))}</span>
          </div>
          <div style={{ marginTop: 4, fontSize: 11, color: 'var(--text-3)', display: 'flex', alignItems: 'center', gap: 5 }}>
            <Icon name="Lock" size={11} style={{ color: 'var(--accent)' }} />
            {fmtBRL(diaDiaLimit)} reservado no total do mês
          </div>
          {diaDiaOverPace && (
            <div style={{ marginTop: 10, padding: '8px 12px', background: "var(--warning-bg)", border: '1px solid #F59E0B30', borderRadius: 8, fontSize: 12, color: "var(--warning)", fontWeight: 600, display: 'flex', alignItems: 'center', gap: 6 }}>
              <Icon name="AlertTriangle" size={12} />
              <span>Ritmo acima do planejado — meta é {fmtBRL(diaDiaDailyTarget)}/dia. Pra fechar o mês dentro do limite, gaste até {fmtBRL(diaDiaTargetFromNow)}/dia a partir de agora.</span>
            </div>
          )}
          <div style={{ marginTop: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
            <div style={{ fontSize: 11, color: 'var(--text-3)' }}>Últimos 3 meses</div>
            <Sparkline data={[120, 165, diaDiaUsed || 35]} color="var(--accent)" width={80} height={32} />
          </div>
          <button className="ff-button ff-action ff-primary-action"
            onClick={() => setShowDiaDiaForm(true)}
            style={{ width: '100%', marginTop: 14, padding: '9px', background: "var(--action-bg)", border: 'none', borderRadius: 9, color: 'white', fontWeight: 700, cursor: 'pointer', fontSize: 13, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, transition: 'opacity 150ms' }}
            onMouseEnter={e => e.currentTarget.style.opacity = '0.88'}
            onMouseLeave={e => e.currentTarget.style.opacity = '1'}
          >
            <Icon name="Zap" size={14} />
            Lançar gasto rápido
          </button>
          {/* Lista dos últimos dia-a-dia com edição */}
          {diaDiaExpenses && diaDiaExpenses.slice(0, 4).map(exp => (
            <div key={exp.id} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '7px 0', borderTop: '1px solid var(--border)', marginTop: 6 }}>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--text-1)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{exp.desc}</div>
                <div style={{ fontSize: 10.5, color: 'var(--text-3)' }}>{parseLocalDate(exp.date).toLocaleDateString('pt-BR')}</div>
              </div>
              <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-1)', flexShrink: 0 }}>{fmtBRL(exp.value)}</span>
              <button className="ff-button" onClick={() => setEditingDiaDia(exp)} style={{ background: 'var(--surface-3)', border: '1px solid var(--border)', borderRadius: 6, padding: '3px 6px', cursor: 'pointer', color: 'var(--text-2)', display: 'flex', alignItems: 'center' }}>
                <Icon name="Pencil" size={11} />
              </button>
            </div>
          ))}
        </Card>

        {/* Categorias: barras compactas, com a mesma responsabilidade e filtro. */}
        <Card className="ff-category-card" style={{ padding: 16 }}>
          <div className="ff-category-heading">Por Categoria — sua responsabilidade</div>
          <div className="ff-category-description">Sua parte nas despesas, mesmo lançadas por outra pessoa.</div>
          <div className="ff-category-total" aria-live="polite">
            <span>{selectedCategory ? selectedCategory.name : 'Total gastos'}</span>
            <strong>{fmtBRL(selectedCategory ? selectedCategory.total : categoryTotal)}</strong>
          </div>
          {catBreakdown.length === 0 ? (
            <div className="ff-category-empty">Nenhuma despesa sob sua responsabilidade neste mês.</div>
          ) : (
            <div className="ff-category-bars" role="group" aria-label="Sua responsabilidade por categoria">
              {(showAllCategories ? catBreakdown : catBreakdown.slice(0, 4)).map(cat => (
                <button key={cat.id} type="button" className="ff-button ff-category-row"
                  aria-pressed={selectedCat === cat.id}
                  aria-label={`${cat.name}: ${fmtBRL(cat.total)}, ${formatCategoryPercent(cat.total)}. Filtrar despesas.`}
                  onClick={() => setSelectedCat(selectedCat === cat.id ? null : cat.id)}
                  style={{ '--category-color': cat.color }}>
                  <span className="ff-category-row-head">
                    <span className="ff-category-name"><span className="ff-category-dot" aria-hidden="true" />{cat.name}</span>
                    <span className="ff-category-amount">{fmtBRL(cat.total)}</span>
                  </span>
                  <span className="ff-category-row-bottom">
                    <span className="ff-category-track" aria-hidden="true"><span className="ff-category-fill" style={{ width: `${categoryPercent(cat.total)}%` }} /></span>
                    <span className="ff-category-percent">{formatCategoryPercent(cat.total)}</span>
                  </span>
                </button>
              ))}
            </div>
          )}
          {catBreakdown.length > 4 && (
            <button type="button" className="ff-button ff-category-more" aria-expanded={showAllCategories}
              onClick={() => setShowAllCategories(value => !value)}>
              <span>{showAllCategories ? 'Mostrar menos' : `Demais categorias · ${formatCategoryPercent(otherCategoriesTotal)}`}</span>
              <span className="ff-category-more-value">{!showAllCategories && fmtBRL(otherCategoriesTotal)}<Icon name={showAllCategories ? 'ChevronUp' : 'ChevronDown'} size={14} /></span>
            </button>
          )}
          {selectedCategory && (
            <button type="button" className="ff-button ff-category-clear" onClick={() => setSelectedCat(null)}>Limpar filtro de categoria</button>
          )}
        </Card>

        {/* Balancete Familiar — dashboard: só totais, detalhe no modal completo */}
        <Card style={{ padding: '18px 16px' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
            <div style={{ fontSize: 11, color: 'var(--text-3)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', opacity: 1 }}>Balancete Familiar</div>
            {balancete.length > 0 && (
              <span style={{ fontSize: 11, color: 'var(--accent)', fontWeight: 600, background: 'var(--accent-tint)', padding: '2px 8px', borderRadius: 20 }}>
                {balancete.length} {balancete.length === 1 ? 'pendência' : 'pendências'}
              </span>
            )}
          </div>

          {balancete.length === 0 ? (
            <div style={{ textAlign: 'center', padding: '20px 0', color: 'var(--text-3)' }}>
              <div style={{ fontSize: 28, marginBottom: 6 }}>✅</div>
              <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-2)' }}>Nenhum saldo pendente</div>
              <div style={{ fontSize: 12, marginTop: 4 }}>Todos em dia!</div>
            </div>
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {balancete.map((item, i) => {
                const fromM = members.find(m => m.id === item.from);
                const toM   = members.find(m => m.id === item.to);
                if (!fromM || !toM) return null;
                return (
                  <div key={i} style={{ padding: '11px 13px', background: 'var(--surface-2)', borderRadius: 12, border: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 10 }}>
                    <div style={{ width: 28, height: 28, borderRadius: '50%', background: fromM.color + '22', border: `1.5px solid ${fromM.color}55`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 9, fontWeight: 800, color: ffReadableColor(fromM.color), flexShrink: 0 }}>{fromM.initials}</div>
                    <Icon name="ArrowRight" size={11} style={{ color: 'var(--text-3)', flexShrink: 0 }} />
                    <div style={{ width: 28, height: 28, borderRadius: '50%', background: toM.color + '22', border: `1.5px solid ${toM.color}55`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 9, fontWeight: 800, color: ffReadableColor(toM.color), flexShrink: 0 }}>{toM.initials}</div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 10.5, color: 'var(--text-3)', marginBottom: 1 }}>{fromM.name.split(' ')[0]} deve a {toM.name.split(' ')[0]}</div>
                      <div style={{ fontSize: 16, fontWeight: 800, color: 'var(--text-1)', letterSpacing: '-0.02em' }}>{fmtBRL(item.amount)}</div>
                    </div>
                  </div>
                );
              })}
            </div>
          )}

          <button className="ff-button"
            onClick={onOpenBalancete}
            style={{ width: '100%', marginTop: 12, padding: '9px', background: 'var(--accent-tint)', border: 'none', borderRadius: 8, color: 'var(--accent)', fontSize: 12, fontWeight: 600, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}
          >
            <Icon name="Users" size={13} />
            Ver detalhes do Balancete
          </button>
        </Card>
      </div>

      {/* Minhas Dívidas — só aparece quando o membro tem despesas divididas a seu cargo */}
      {mySharedDebts && mySharedDebts.length > 0 && (
        <Card style={{ borderLeft: '4px solid #F59E0B' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
            <Icon name="Bell" size={14} style={{ color: "var(--warning)" }} />
            <span style={{ fontSize: 11, fontWeight: 700, color: "var(--warning)", textTransform: 'uppercase', letterSpacing: '0.06em' }}>Aguardando sua aprovação</span>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {(() => {
              // Agrupa parcelas/ocorrências da MESMA série num único item (aprovar de uma vez) —
              // mesma lógica usada em Despesas, cobre tanto cota dividida quanto responsabilidade
              // integral (shared:false) atribuída sem divisão. Ver lib/finance-calc.js.
              const isAccepted = (id) => sharedStatus[`${id}:${currentMember.id}`] === 'accepted';
              const srcAll = (balanceteExpenses && balanceteExpenses.length ? balanceteExpenses : expenses);
              const groups = buildPendingApprovalGroups(mySharedDebts, srcAll, currentMember.id, sharedStatus);
              return groups.map(g => {
              const exp        = g.rep;
              const myPct      = exp.shared ? (exp.sharedWith?.find(sw => sw.memberId === currentMember.id)?.pct || 0) : 100;
              const isFullResp = myPct === 100;
              const isSeries   = g.items.length > 1;
              const myAmount   = g.items.reduce((s, it) => {
                const pct = it.shared ? (it.sharedWith?.find(sw => sw.memberId === currentMember.id)?.pct || 0) : 100;
                return s + (it.value * pct / 100);
              }, 0);
              const accepted   = isAccepted(exp.id);
              const launcher   = members.find(m => m.id === exp.memberId);
              const pm         = paymentMethods.find(p => p.id === exp.pmId);
              return (
                <div key={exp.id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px', background: accepted ? "var(--success-bg)" : "var(--warning-bg)", borderRadius: 12, border: `1px solid ${accepted ? '#10B98130' : '#F59E0B30'}` }}>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--text-1)' }}>
                      {exp.desc}
                      {isSeries && <span style={{ fontSize: 11, fontWeight: 700, color: "var(--violet)", background: "var(--violet-bg)", padding: '1px 7px', borderRadius: 20, marginLeft: 6 }}>{g.items.length}x parcelas</span>}
                    </div>
                    <div style={{ fontSize: 11, color: 'var(--text-3)', marginTop: 2 }}>
                      {launcher && <span>{isFullResp ? 'Atribuído por' : 'Lançado por'} <strong style={{ color: ffReadableColor(launcher.color) }}>{launcher.name.split(' ')[0]}</strong></span>}
                      {pm && <span> · {pm.name}</span>}
                      {isSeries
                        ? <span> · {g.items.length} parcelas</span>
                        : <span> · {new Date(exp.date + 'T00:00:00').toLocaleDateString('pt-BR')}</span>}
                      {!isFullResp && <span> · {myPct}%</span>}
                    </div>
                  </div>
                  <div style={{ textAlign: 'right', flexShrink: 0 }}>
                    <div style={{ fontSize: 15, fontWeight: 800, color: ffReadableColor(accepted ? "var(--success)" : "var(--warning)") }}>{fmtBRL(myAmount)}</div>
                    <div style={{ fontSize: 10, color: 'var(--text-3)' }}>{isSeries ? 'total' : (isFullResp ? 'total' : `${myPct}%`)}</div>
                    {accepted ? (
                      <div style={{ fontSize: 11, color: "var(--success)", fontWeight: 600, marginTop: 4, display: 'flex', alignItems: 'center', gap: 4, justifyContent: 'flex-end' }}>
                        <Icon name="Check" size={11} /> Aceito
                      </div>
                    ) : (
                      <button className="ff-button"
                        onClick={() => { if (!accepted) acceptSharedExpenses(g.items, currentMember.id); }}
                        style={{ marginTop: 6, padding: '5px 14px', background: "var(--success-action)", border: 'none', borderRadius: 7, color: 'white', fontWeight: 700, cursor: 'pointer', fontSize: 12 }}
                      >
                        {isSeries ? 'Confirmar todas' : (isFullResp ? 'Aceitar' : 'Confirmar')}
                      </button>
                    )}
                  </div>
                </div>
              );
              });
            })()}
          </div>
        </Card>
      )}

      {/* ── Visão Futura (subiu) ─────────────────────────────── */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ width: 4, height: 20, background: 'var(--accent)', borderRadius: 2 }} />
        <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.06em', opacity: 1 }}>Visão Futura</span>
        <div style={{ flex: 1, height: 1, background: 'var(--border)' }} />
      </div>

      {/* Próximo Mês + Gráfico 6 meses */}
      <div style={{ display: 'grid', gridTemplateColumns: '300px 1fr', gap: 16 }} className="r-stack">
        {(() => {
          const nm = sixMonthProj[1];
          if (!nm) return null;
          const topExps = [...(nm.mExps || [])]
            .sort((a, b) => memberExpenseAmount(b, currentMember.id, paymentMethods) - memberExpenseAmount(a, currentMember.id, paymentMethods))
            .slice(0, 5);
          const catTotals = displayCategories.map(c => ({
            ...c, total: (nm.mExps || []).filter(e => e.categoryId === c.id).reduce((s, e) => s + memberExpenseAmount(e, currentMember.id, paymentMethods), 0)
          })).filter(c => c.total > 0).sort((a, b) => b.total - a.total).slice(0, 3);
          return (
            <Card style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
              <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 14 }}>
                <div>
                  <div style={{ fontSize: 11, color: 'var(--text-3)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 4, opacity: 1 }}>Despesas — Próximo Mês</div>
                  <div style={{ fontSize: 12, color: 'var(--accent)', fontWeight: 600 }}>{nm.fullLabel}</div>
                </div>
                <div style={{ width: 34, height: 34, borderRadius: 10, background: "var(--danger-bg)", display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <Icon name="CalendarDays" size={16} style={{ color: "var(--danger)" }} />
                </div>
              </div>
              <div style={{ fontSize: 28, fontWeight: 800, color: 'var(--text-1)', letterSpacing: '-0.03em', marginBottom: 4 }}>{fmtBRL(nm.totalExp)}</div>
              <div style={{ fontSize: 11, color: 'var(--text-3)', marginBottom: nm.totalAReceber > 0 ? 8 : 14 }}>
                {nm.mExps.length} despesa{nm.mExps.length !== 1 ? 's' : ''} prevista{nm.mExps.length !== 1 ? 's' : ''}
                {nm.totalInc > 0 && <span> · receita: <strong style={{ color: "var(--success)" }}>{fmtBRL(nm.totalInc)}</strong></span>}
              </div>
              {nm.totalInc > 0 && (
                <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 14 }}>
                  {nm.totalProprio > 0 && <span style={{ fontSize: 10, fontWeight: 600, padding: '2px 8px', borderRadius: 20, background: "var(--success-bg)", color: "var(--success)", border: '1px solid #10B98130' }}>💰 {fmtBRL(nm.totalProprio)}</span>}
                  {nm.totalAReceber > 0 && <span style={{ fontSize: 10, fontWeight: 600, padding: '2px 8px', borderRadius: 20, background: "var(--info-bg)", color: "var(--info)", border: '1px solid #3B82F630' }}>👥 +{fmtBRL(nm.totalAReceber)}</span>}
                </div>
              )}
              {catTotals.length > 0 && (
                <div style={{ display: 'flex', gap: 5, flexWrap: 'wrap', marginBottom: 12 }}>
                  {catTotals.map(c => <span key={c.id} style={{ fontSize: 10, fontWeight: 600, padding: '2px 8px', borderRadius: 20, background: c.color + '18', color: ffReadableColor(c.color), border: `1px solid ${c.color}30` }}>{c.name} {fmtBRL(c.total)}</span>)}
                </div>
              )}
              {topExps.length === 0 ? (
                <div style={{ textAlign: 'center', padding: '16px 0', color: 'var(--text-3)', fontSize: 12 }}>Nenhuma despesa encontrada.</div>
              ) : (
                <div style={{ display: 'flex', flexDirection: 'column', borderTop: '1px solid var(--border)', marginTop: 4 }}>
                  {topExps.map((e, idx) => {
                    const cat = displayCategories.find(c => c.id === e.categoryId);
                    const dispVal = memberExpenseAmount(e, currentMember.id, paymentMethods);
                    return (
                      <div key={e.id} style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '8px 0', borderBottom: idx < topExps.length - 1 ? '1px solid var(--border)' : 'none' }}>
                        <div style={{ width: 28, height: 28, borderRadius: 8, background: (cat?.color || 'var(--accent)') + '18', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                          <Icon name={cat?.icon || 'Wallet'} size={13} style={{ color: ffReadableColor(cat?.color || 'var(--accent)') }} />
                        </div>
                        <div style={{ flex: 1, minWidth: 0 }}>
                          <div style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--text-1)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{e.desc}</div>
                          <div style={{ fontSize: 10, color: 'var(--text-3)' }}>{cat?.name}{e.type === 'fixed' && ' · Fixa'}{e.type === 'installment' && ` · ${e.currentInstallment}/${e.installments}x`}</div>
                        </div>
                        <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-1)', flexShrink: 0 }}>{fmtBRL(dispVal)}</span>
                      </div>
                    );
                  })}
                </div>
              )}
            </Card>
          );
        })()}

        <Card>
          <div style={{ fontSize: 11, color: 'var(--text-3)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 16, opacity: 1 }}>
            Receita Prevista × Despesa Prevista — Próximos 6 Meses
          </div>
          {(() => {
            const data = sixMonthProj;
            const maxVal = Math.max(...data.flatMap(d => [d.totalInc, d.totalExp, 1]));
            const mag = Math.pow(10, Math.floor(Math.log10(maxVal)));
            const yMax = Math.ceil(maxVal * 1.15 / mag) * mag;
            const W = 480, H = 200;
            const PAD = { top: 16, right: 16, bottom: 46, left: 62 };
            const cW = W - PAD.left - PAD.right; const cH = H - PAD.top - PAD.bottom;
            const nTicks = 4;
            const ticks = Array.from({ length: nTicks + 1 }, (_, i) => (yMax / nTicks) * i);
            const yS = v => cH - (v / yMax) * cH;
            const monthW = cW / data.length; const bW = Math.min(monthW * 0.33, 22); const gap = 3;
            const fmtK = v => v >= 1000000 ? `${(v/1000000).toFixed(1)}M` : v >= 1000 ? `${(v/1000).toFixed(0)}k` : v.toFixed(0);
            return (
              <svg width="100%" viewBox={`0 0 ${W} ${H}`} style={{ overflow: 'visible', display: 'block' }}>
                {ticks.map((t, i) => { const y = PAD.top + yS(t); return (<g key={i}><line x1={PAD.left} x2={PAD.left + cW} y1={y} y2={y} stroke="var(--border)" strokeWidth={t === 0 ? 1 : 0.5} /><text x={PAD.left - 6} y={y + 4} textAnchor="end" fontSize={9} fill="var(--text-3)">R${fmtK(t)}</text></g>); })}
                {data.map((d, i) => {
                  const cx = PAD.left + i * monthW + monthW / 2;
                  const incH = Math.max((d.totalInc / yMax) * cH, d.totalInc > 0 ? 2 : 0);
                  const expH = Math.max((d.totalExp / yMax) * cH, d.totalExp > 0 ? 2 : 0);
                  const baseY = PAD.top + cH; const alpha = d.isCurrent ? 'FF' : 'AA';
                  return (
                    <g key={i}>
                      <rect x={cx - bW - gap} y={baseY - incH} width={bW} height={incH} fill={`#10B981${alpha}`} rx={3} />
                      <rect x={cx + gap} y={baseY - expH} width={bW} height={expH} fill={`#EF4444${alpha}`} rx={3} />
                      {d.isCurrent && <rect x={cx - bW - gap - 2} y={PAD.top} width={bW * 2 + gap * 2 + 4} height={cH} fill="var(--accent)" fillOpacity={0.04} rx={4} />}
                      <text x={cx} y={baseY + 16} textAnchor="middle" fontSize={10} fill={d.isCurrent ? 'var(--accent)' : 'var(--text-3)'} fontWeight={d.isCurrent ? '700' : '400'}>{d.label}</text>
                      {incH > 20 && <text x={cx - bW/2 - gap} y={baseY - incH - 4} textAnchor="middle" fontSize={8} fill="#10B981" fontWeight="700">{fmtK(d.totalInc)}</text>}
                      {expH > 20 && <text x={cx + bW/2 + gap} y={baseY - expH - 4} textAnchor="middle" fontSize={8} fill="#EF4444" fontWeight="700">{fmtK(d.totalExp)}</text>}
                    </g>
                  );
                })}
                <g transform={`translate(${PAD.left}, ${H - 8})`}>
                  <rect x={0} y={-8} width={10} height={10} fill="#10B981" rx={2} /><text x={14} y={1} fontSize={10} fill="var(--text-2)">Receita prevista</text>
                  <rect x={100} y={-8} width={10} height={10} fill="#EF4444" rx={2} /><text x={114} y={1} fontSize={10} fill="var(--text-2)">Despesa prevista</text>
                  <text x={240} y={1} fontSize={9} fill="var(--text-3)">Mês atual destacado</text>
                </g>
              </svg>
            );
          })()}
        </Card>
      </div>

      {/* ── Saldo Projetado — Próximos 6 Meses (BLOCOS) ──────── */}
      <Card style={{ padding: '20px 24px' }}>
        <div style={{ fontSize: 13, color: 'var(--text-3)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 18, opacity: 1 }}>Saldo Projetado — Próximos 6 Meses</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))', gap: 12 }}>
          {sixMonthProj.map((row, i) => {
            const saldoPos   = row.balance >= 0;
            const saldoColor = saldoPos ? 'var(--success)' : 'var(--danger)';
            const noData     = !row.totalInc && !row.totalExp && !row.isCurrent;
            const statusLabel = row.balance > 0 ? '✓ Superávit' : row.balance < 0 ? '⚠ Déficit' : '= Neutro';
            return (
              <div key={i} style={{
                padding: '14px 16px', borderRadius: 14, minWidth: 0,
                background: row.isCurrent ? 'var(--accent-tint)' : 'var(--surface-1)',
                border: `1px solid ${row.isCurrent ? 'var(--accent)' : 'var(--border)'}`,
                borderLeft: `4px solid ${noData ? 'var(--border)' : saldoColor}`,
                display: 'flex', flexDirection: 'column', gap: 9,
              }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6, minWidth: 0 }}>
                    {row.isCurrent && <span style={{ fontSize: 9, fontWeight: 800, background: 'var(--action-bg)', color: '#fff', padding: '2px 6px', borderRadius: 8, flexShrink: 0 }}>ATUAL</span>}
                    <span style={{ fontSize: 13, fontWeight: 700, color: ffReadableColor(row.isCurrent ? 'var(--accent)' : 'var(--text-1)'), overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{row.fullLabel}</span>
                  </div>
                  {!noData && <span style={{ fontSize: 10, fontWeight: 700, padding: '2px 8px', borderRadius: 20, background: saldoPos ? "var(--success-bg)" : "var(--danger-bg)", color: ffReadableColor(saldoColor), flexShrink: 0, whiteSpace: 'nowrap' }}>{statusLabel}</span>}
                </div>
                {noData ? (
                  <div style={{ fontSize: 12, color: 'var(--text-3)', fontStyle: 'italic', padding: '6px 0' }}>sem dados</div>
                ) : (
                  <>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 8 }}>
                      <span style={{ fontSize: 11, color: 'var(--text-3)' }}>Receita</span>
                      <div style={{ textAlign: 'right', minWidth: 0 }}>
                        <span style={{ fontSize: 14, fontWeight: 700, color: "var(--success)" }}>{fmtBRL(row.totalInc)}</span>
                        {row.totalAReceber > 0 && <div style={{ fontSize: 10, color: "var(--info)" }}>👥 +{fmtBRL(row.totalAReceber)}</div>}
                      </div>
                    </div>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 8 }}>
                      <span style={{ fontSize: 11, color: 'var(--text-3)' }}>Despesa</span>
                      <span style={{ fontSize: 14, fontWeight: 700, color: "var(--danger)" }}>{fmtBRL(row.totalExp)}</span>
                    </div>
                    <div style={{ height: 1, background: 'var(--border)' }} />
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 8 }}>
                      <span style={{ fontSize: 12, color: 'var(--text-2)', fontWeight: 600 }}>Saldo</span>
                      <span style={{ fontSize: 16, fontWeight: 800, color: ffReadableColor(saldoColor), letterSpacing: '-0.01em' }}>{row.balance >= 0 ? '+' : ''}{fmtBRL(row.balance)}</span>
                    </div>
                  </>
                )}
              </div>
            );
          })}
        </div>
        {(() => {
          const tInc = sixMonthProj.reduce((s, r) => s + r.totalInc, 0);
          const tExp = sixMonthProj.reduce((s, r) => s + r.totalExp, 0);
          const tBal = sixMonthProj.reduce((s, r) => s + r.balance, 0);
          const pos = tBal >= 0; const c = pos ? 'var(--success)' : 'var(--danger)';
          return (
            <div style={{ marginTop: 12, padding: '14px 16px', borderRadius: 14, background: 'var(--surface-2)', border: '1px solid var(--border)', display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
              <span style={{ fontSize: 13, fontWeight: 800, color: 'var(--text-1)' }}>Total 6 meses</span>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px 18px', alignItems: 'baseline' }}>
                <span style={{ fontSize: 12, color: 'var(--text-3)' }}>Receita <strong style={{ color: "var(--success)", fontSize: 14 }}>{fmtBRL(tInc)}</strong></span>
                <span style={{ fontSize: 12, color: 'var(--text-3)' }}>Despesa <strong style={{ color: "var(--danger)", fontSize: 14 }}>{fmtBRL(tExp)}</strong></span>
                <span style={{ fontSize: 12, color: 'var(--text-3)' }}>Saldo <strong style={{ color: ffReadableColor(c), fontSize: 15 }}>{pos ? '+' : ''}{fmtBRL(tBal)}</strong></span>
                <span style={{ fontSize: 11, fontWeight: 700, padding: '3px 10px', borderRadius: 20, background: pos ? "var(--success-bg)" : "var(--danger-bg)", color: ffReadableColor(c) }}>{pos ? '✓ Superávit' : '⚠ Déficit'}</span>
              </div>
            </div>
          );
        })()}
      </Card>

      {/* ── Meios de Pagamento — LARGURA TOTAL ───────────────── */}
      <Card>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
          <div style={{ fontSize: 11, color: 'var(--text-3)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', opacity: 1 }}>Meios de Pagamento</div>
          <button className="ff-button" onClick={() => onNavigate('cartoes')} style={{ fontSize: 11, color: 'var(--accent)', background: 'none', border: 'none', cursor: 'pointer', fontWeight: 600 }}>Ver tudo →</button>
        </div>
        {myCards.length === 0 ? (
          <EmptyState icon="CreditCard" title="Sem meios de pagamento" desc="Nenhum cartão ou conta cadastrado" />
        ) : (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))', gap: 14 }}>
            {myCards.map(pm => {
              const monthUsed    = pmMonthTotals[pm.id] || 0;
              const usedPct      = pm.limit ? (monthUsed / pm.limit) * 100 : 0;
              const daysUntilDue = pm.dueDay ? pm.dueDay - new Date().getDate() : null;
              // Só alerta de vencimento se ainda há despesas pendentes nesse cartão no mês
              const hasPending   = expenses.some(e => {
                if (e.pmId !== pm.id || e.status === 'paid' || e.isProjected) return false;
                const d = new Date((e.date || '').length === 10 ? e.date + 'T00:00:00' : e.date);
                return d.getFullYear() === currentMonth.year && d.getMonth() + 1 === currentMonth.month;
              });
              const nearDue      = hasPending && daysUntilDue !== null && daysUntilDue >= 0 && daysUntilDue <= 3;
              const color        = pm.color || '#0D9488';
              return (
                <div key={pm.id} onClick={() => onNavigate('cartoes')} style={{ padding: 14, background: nearDue ? "var(--danger-bg)" : 'var(--surface-1)', borderRadius: 14, border: `1.5px solid ${nearDue ? '#EF444433' : color + '33'}`, cursor: 'pointer', transition: 'transform 150ms', position: 'relative', overflow: 'hidden' }}
                  onMouseEnter={e => e.currentTarget.style.transform = 'translateY(-2px)'}
                  onMouseLeave={e => e.currentTarget.style.transform = 'translateY(0)'}
                >
                  <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 3, background: color, borderRadius: '14px 14px 0 0' }} />
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 10 }}>
                    <div>
                      <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-1)' }}>{pm.name}</div>
                      <div style={{ fontSize: 11, color: 'var(--text-3)', marginTop: 1 }}>{pm.bank || pm.type}</div>
                    </div>
                    {nearDue && <span style={{ fontSize: 10, color: "var(--danger)", fontWeight: 700, background: "var(--danger-bg)", padding: '2px 6px', borderRadius: 6 }}>⚠ {daysUntilDue}d</span>}
                    {pm.dueDay && !nearDue && <span style={{ fontSize: 11, color: 'var(--text-3)' }}>dia {pm.dueDay}</span>}
                  </div>
                  <div style={{ fontSize: 18, fontWeight: 800, color: ffReadableColor(monthUsed > 0 ? 'var(--text-1)' : 'var(--text-3)'), letterSpacing: '-0.02em', marginBottom: 4 }}>{fmtBRL(monthUsed)}</div>
                  {pm.limit ? (
                    <>
                      <ProgressBar pct={usedPct} height={4} />
                      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 5 }}>
                        <span style={{ fontSize: 10, color: ffReadableColor(usedPct >= 80 ? "var(--danger)" : 'var(--text-3)') }}>{usedPct.toFixed(0)}% usado</span>
                        <span style={{ fontSize: 10, color: 'var(--text-3)' }}>Limite: {fmtBRL(pm.limit)}</span>
                      </div>
                    </>
                  ) : (
                    <div style={{ fontSize: 10, color: 'var(--text-3)', textTransform: 'capitalize' }}>{pm.type}</div>
                  )}
                </div>
              );
            })}
          </div>
        )}

        {/* Investimentos resumo abaixo dos cartões */}
        <div style={{ marginTop: 16, padding: '12px 14px', background: "var(--success-bg)", borderRadius: 10, border: '1px solid #10B98120', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>
            <div style={{ fontSize: 11, color: "var(--success)", fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em', marginBottom: 2 }}>Investimentos</div>
            <div style={{ fontSize: 17, fontWeight: 700, color: 'var(--text-1)' }}>{fmtBRL(totalInvested)}</div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontSize: 20, fontWeight: 800, color: "var(--success)" }}>+{avgRate.toFixed(2)}%</div>
            <div style={{ fontSize: 11, color: 'var(--text-3)' }}>a.m. médio</div>
          </div>
          <button className="ff-button" onClick={() => onNavigate('investimentos')} style={{ padding: '8px 16px', background: 'var(--success-bg)', border: 'none', borderRadius: 8, color: "var(--success)", fontSize: 12, fontWeight: 600, cursor: 'pointer' }}>
            Ver investimentos →
          </button>
        </div>
      </Card>

      {/* ── Bottom: Despesas por Tipo (esq) + Despesas Recentes (dir) ── */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }} className="r-stack">

        {/* ── Despesas por Tipo — 5 meses (ESQUERDA) ──────────── */}
        <Card style={{ padding: '20px 20px', display: 'flex', flexDirection: 'column', minWidth: 0 }}>

          {/* Título */}
          <div style={{ fontSize: 12, color: 'var(--text-3)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.07em', marginBottom: 18, opacity: 1 }}>
            Despesas por Tipo
          </div>

          {/* Blocos por mês — flui sem scroll horizontal */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 1fr))', gap: 12 }}>
            {typeBreakdown.map(tb => {
              const empty = tb.total === 0;
              return (
                <div key={tb.label} style={{
                  padding: '12px 14px', borderRadius: 14, minWidth: 0,
                  background: tb.isCurrent ? 'var(--accent-tint)' : 'var(--surface-1)',
                  border: `1px solid ${tb.isCurrent ? 'var(--accent)' : 'var(--border)'}`,
                  opacity: tb.isPast && empty ? 0.5 : 1,
                  display: 'flex', flexDirection: 'column', gap: 8,
                }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                    <span style={{ fontSize: 12, fontWeight: 700, color: ffReadableColor(tb.isCurrent ? 'var(--accent)' : 'var(--text-2)') }}>{tb.label}</span>
                    {tb.isCurrent && <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'var(--accent)' }} />}
                  </div>
                  {[
                    { key: 'fixed',       label: 'Fixas',      icon: 'Lock',   color: '#3B82F6' },
                    { key: 'installment', label: 'Parceladas', icon: 'Layers', color: '#8B5CF6' },
                    { key: 'single',      label: 'Únicas',     icon: 'Zap',    color: '#F59E0B' },
                  ].map(({ key, label, icon, color }) => (
                    <div key={key} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, color: 'var(--text-3)', minWidth: 0 }}>
                        <span style={{ width: 18, height: 18, borderRadius: 5, background: color + '20', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                          <Icon name={icon} size={10} color={color} />
                        </span>
                        {label}
                      </span>
                      <span style={{ fontSize: 12, fontWeight: 700, color: ffReadableColor(tb[key].total > 0 ? 'var(--text-1)' : 'var(--text-3)'), whiteSpace: 'nowrap' }}>
                        {tb[key].total > 0 ? fmtBRL(tb[key].total) : '—'}
                      </span>
                    </div>
                  ))}
                  <div style={{ height: 1, background: 'var(--border)' }} />
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                    <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-2)' }}>Total</span>
                    <span style={{ fontSize: 13, fontWeight: 800, color: ffReadableColor(tb.isCurrent ? 'var(--text-1)' : 'var(--text-2)'), whiteSpace: 'nowrap' }}>{fmtBRL(tb.total)}</span>
                  </div>
                </div>
              );
            })}
          </div>
        </Card>

        {/* ── Despesas Recentes (DIREITA) ───────────────────────── */}
        <Card style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 14 }}>
            <div>
              <div style={{ fontSize: 11, color: 'var(--text-3)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', opacity: 1 }}>Despesas Recentes — sua responsabilidade</div>
              <div style={{ fontSize: 10.5, color: 'var(--text-3)', marginTop: 2 }}>Divididas ou atribuídas a você; veja "Meios de Pagamento" pra tudo que passa pelo seu cartão</div>
            </div>
            {selectedCat && <button className="ff-button" onClick={() => setSelectedCat(null)} style={{ fontSize: 11, color: 'var(--accent)', background: 'none', border: 'none', cursor: 'pointer', flexShrink: 0 }}>Limpar ×</button>}
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {filteredExpenses.length === 0 && <EmptyState icon="Wallet" title="Sem despesas" desc="Nenhuma despesa neste período" />}
            {filteredExpenses.map(e => {
              const cat = displayCategories.find(c => c.id === e.categoryId);
              const myAmount = myResponsibilityAmount(e);
              const isPartial = Math.abs(myAmount - e.value) > 0.01;
              return (
                <div key={e.id} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 4px', borderBottom: '1px solid var(--border)', minWidth: 0 }}>
                  <div style={{ width: 34, height: 34, borderRadius: 10, background: (cat?.color || '#0D9488') + '18', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                    <Icon name={cat?.icon || 'Wallet'} size={15} style={{ color: ffReadableColor(cat?.color) }} />
                  </div>
                  <div style={{ flex: 1, minWidth: 0, overflow: 'hidden' }}>
                    <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-1)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', display: 'flex', alignItems: 'center', gap: 4 }}>
                      <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{e.desc}</span>
                      {e.blocked && <Icon name="Lock" size={11} style={{ color: 'var(--text-3)', flexShrink: 0 }} />}
                    </div>
                    <div style={{ fontSize: 11, color: 'var(--text-3)', marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                      {cat?.name}{e.type === 'installment' ? ` • ${e.currentInstallment}/${e.installments}x` : ''}{e.shared ? ' • Compartilhado' : ''}
                    </div>
                  </div>
                  <div style={{ textAlign: 'right', flexShrink: 0, minWidth: 'max-content' }}>
                    <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-1)' }}>{fmtBRL(myAmount)}</div>
                    {isPartial && <div style={{ fontSize: 10, color: 'var(--text-3)' }}>sua parte de {fmtBRL(e.value)}</div>}
                    <StatusBadge status={e.status} />
                  </div>
                </div>
              );
            })}
          </div>
          <button className="ff-button" onClick={() => onNavigate('despesas')} style={{ width: '100%', marginTop: 12, padding: '8px', background: 'var(--surface-2)', border: 'none', borderRadius: 8, color: 'var(--text-2)', fontSize: 12, fontWeight: 600, cursor: 'pointer' }}>
            Ver todas as despesas →
          </button>
        </Card>


      </div>

    </div>
  );
}

Object.assign(window, { Dashboard });