/* ── Variáveis ─────────────────────────────────────────────────────── */
:root {
  --bg:      #0f172a;
  --fg:      #e2e8f0;
  --card:    #111827;
  --border:  #1f2937;
  --accent:  #22d3ee;
  --muted:   #94a3b8;
  --pos:     #34d399;
  --neg:     #f87171;
  --input-bg:#0b1220;
}
* { box-sizing: border-box; }
body { margin:0; font-family:"Inter",system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--fg); font-size:15px; }

/* ── Topbar ────────────────────────────────────────────────────────── */
.topbar { display:flex; justify-content:space-between; align-items:center; padding:.75rem 2rem; background:#060e1e; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100; }
.topbar .brand { color:var(--accent); font-weight:700; font-size:1.1rem; text-decoration:none; letter-spacing:-.01em; }
.topbar nav { display:flex; gap:.25rem; align-items:center; flex-wrap:wrap; }
.topbar nav a { color:var(--muted); text-decoration:none; padding:.4rem .75rem; border-radius:8px; font-size:.9rem; transition:color .15s, background .15s; }
.topbar nav a:hover { color:var(--fg); background:var(--border); }
.topbar nav a.active { color:var(--fg); background:var(--border); font-weight:600; }
.topbar form { margin:0; }
.btn-logout { background:transparent; border:1px solid #374151; padding:.4rem .75rem; border-radius:8px; cursor:pointer; color:var(--muted); font-size:.9rem; transition:all .15s; }
.btn-logout:hover { background:#7f1d1d; border-color:#b91c1c; color:#fff; }

/* ── Layout ────────────────────────────────────────────────────────── */
main { padding:1.75rem 2rem; max-width:1200px; margin:0 auto; }
footer { text-align:center; padding:1rem; color:var(--muted); font-size:.85rem; }

/* ── Alertas ───────────────────────────────────────────────────────── */
.alert { padding:.8rem 1rem; border-radius:10px; margin-bottom:1rem; font-size:.92rem; }
.alert.success { background:#14532d; border:1px solid #15803d; }
.alert.danger  { background:#7f1d1d; border:1px solid #b91c1c; }

/* ── Cards ─────────────────────────────────────────────────────────── */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1rem; margin-bottom:1.5rem; }
.cards article { background:var(--card); padding:1.1rem 1.2rem; border-radius:14px; border:1px solid var(--border); }
.cards article h3 { margin:0 0 .4rem; font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:500; }
.value { font-size:1.75rem; margin:0; font-weight:700; line-height:1.2; }
.trend { margin:.35rem 0 0; font-size:.82rem; }
.trend-good    { color:var(--pos); }
.trend-bad     { color:var(--neg); }
.trend-neutral { color:var(--muted); }
.pos { color:var(--pos); }
.neg { color:var(--neg); }
.text-right { text-align:right; }

/* ── Panel ─────────────────────────────────────────────────────────── */
.panel { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:1.2rem 1.4rem; }
.panel h2 { margin:0 0 1rem; font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600; }

/* ── Page header ───────────────────────────────────────────────────── */
.page-header { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:1rem; margin-bottom:1.5rem; }
.page-header h1 { margin:0 0 .15rem; }
.page-header form { margin:0; }

/* ── Grids ─────────────────────────────────────────────────────────── */
.grid     { display:grid; gap:1rem; }
.grid-two { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.25rem; }
.form-grid { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }

/* ── Inputs / Labels / Buttons ─────────────────────────────────────── */
label { display:flex; flex-direction:column; gap:.35rem; font-size:.88rem; color:var(--muted); }
input, select { border-radius:9px; border:1px solid #334155; padding:.6rem .8rem; background:var(--input-bg); color:var(--fg); font-size:.92rem; width:100%; transition:border-color .15s; }
input:focus, select:focus { outline:none; border-color:var(--accent); }
button { border-radius:9px; border:none; padding:.65rem 1.2rem; background:linear-gradient(135deg,#0ea5e9,#22d3ee); font-weight:600; cursor:pointer; color:#041725; font-size:.92rem; transition:filter .15s; }
button:hover { filter:brightness(1.1); }
.danger { background:#dc2626 !important; color:#fff; }
.card-form { background:var(--card); border:1px solid var(--border); padding:2rem; max-width:420px; margin:2rem auto; border-radius:16px; }

/* ── Botão link (âncora estilizada) ────────────────────────────────── */
.btn { display:inline-block; padding:.5rem 1.1rem; border-radius:999px; background:var(--accent); color:#02131e; text-decoration:none; font-weight:600; font-size:.9rem; }
.btn:hover { filter:brightness(1.1); }
.btn-nav   { display:inline-block; padding:.45rem .9rem; border-radius:8px; border:1px solid var(--border); color:var(--fg); text-decoration:none; font-size:.9rem; background:var(--card); }
.btn-nav:hover { border-color:var(--accent); }
.btn-export { display:inline-block; padding:.45rem .9rem; border-radius:8px; border:1px solid #334155; color:var(--fg); text-decoration:none; font-size:.88rem; background:var(--input-bg); }
.btn-export:hover { border-color:var(--accent); }
.btn-clear  { display:inline-block; padding:.5rem .8rem; border-radius:8px; background:#374151; color:var(--fg); text-decoration:none; font-size:.88rem; }
.btn-clear:hover { background:#4b5563; }
.btn-sm { padding:.35rem .6rem; font-size:.8rem; border-radius:6px; min-width:2rem; }

/* ── Tabelas ───────────────────────────────────────────────────────── */
table { width:100%; border-collapse:collapse; background:var(--card); border-radius:12px; border:1px solid var(--border); overflow:hidden; }
table th, table td { padding:.6rem .8rem; border-bottom:1px solid var(--border); vertical-align:middle; font-size:.88rem; }
table thead th { background:#0b1220; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; }
table tbody tr:last-child td { border-bottom:none; }
table tbody tr:hover { background:#0d1a2f; }

/* Inline editing */
.inline-actions { display:flex; flex-wrap:wrap; gap:.3rem; margin-bottom:.3rem; }
.inline-actions input, .inline-actions select { flex:1 1 110px; }
.inline-actions button { flex:0 0 auto; }
.inline-form { display:inline-block; margin-right:.25rem; }
.actions-cell { white-space:nowrap; }
.amount-input { max-width:110px; }
.input-pos { color:var(--pos); }
.input-neg { color:var(--neg); }

/* ── Gráficos ──────────────────────────────────────────────────────── */
.chart-wrap    { position:relative; height:220px; }
.chart-wrap-sm { position:relative; height:180px; }

/* ── Progress bar (taxa de poupança) ───────────────────────────────── */
.progress-bar  { background:#1f2937; border-radius:999px; height:7px; overflow:hidden; margin:.5rem 0 0; }
.progress-fill { height:100%; background:linear-gradient(90deg,#0ea5e9,#22d3ee); border-radius:999px; transition:width .4s ease; }
.progress-fill.good { background:linear-gradient(90deg,#10b981,#34d399); }
.progress-fill.bad  { background:#f87171; }

/* ── Navegação de mês (Insights) ───────────────────────────────────── */
.month-nav { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.month-nav input[type="month"] { width:auto; }

/* ── Dashboard: saldos por conta ───────────────────────────────────── */
.account-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.account-list li { display:flex; justify-content:space-between; align-items:center; padding:.5rem .6rem; background:var(--input-bg); border-radius:8px; border:1px solid var(--border); }
.acc-name { display:flex; flex-direction:column; gap:.1rem; }
.acc-name small { font-size:.78rem; }
.acc-balance { font-weight:700; font-size:1rem; }

/* ── Passos (Dashboard) ────────────────────────────────────────────── */
.steps { margin:0; padding-left:1.2rem; display:flex; flex-direction:column; gap:.6rem; }
.steps li { font-size:.92rem; }
.steps a { color:var(--accent); text-decoration:none; }
.steps a:hover { text-decoration:underline; }

/* ── Filtros de transacções ────────────────────────────────────────── */
.filter-bar { display:flex; flex-wrap:wrap; gap:.5rem; align-items:flex-end; padding:.9rem 1rem; background:var(--card); border:1px solid var(--border); border-radius:12px; margin-bottom:1rem; }
.filter-bar input, .filter-bar select { flex:1 1 150px; width:auto; }
.filter-bar button { flex:0 0 auto; }
.table-wrap { overflow-x:auto; }
.live-search-input { width:100%; margin-bottom:.6rem; }

/* ── Rodapé das transacções ────────────────────────────────────────── */
.tx-footer { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.8rem; margin-top:.8rem; padding:.6rem .8rem; background:var(--card); border:1px solid var(--border); border-radius:10px; font-size:.88rem; }
.tx-summary { color:var(--muted); }
.pagination { display:flex; gap:.5rem; align-items:center; }
.pagination a { padding:.35rem .75rem; border-radius:8px; border:1px solid var(--border); color:var(--fg); text-decoration:none; font-size:.85rem; }
.pagination a:hover { border-color:var(--accent); }
.pagination span { color:var(--muted); font-size:.85rem; }

/* ── Settings nav ──────────────────────────────────────────────────── */
.settings-nav { display:flex; gap:.5rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.settings-nav a { padding:.4rem .85rem; border-radius:9px; border:1px solid var(--border); text-decoration:none; color:var(--muted); font-size:.88rem; transition:all .15s; }
.settings-nav a:hover { color:var(--fg); border-color:#4b5563; }
.settings-nav a.active { background:var(--accent); color:#041725; font-weight:600; border-color:var(--accent); }

/* ── Recorrências ──────────────────────────────────────────────────── */
.row-inactive td { opacity:.45; }
.badge-active   { color:var(--pos); font-weight:600; font-size:.82rem; }
.badge-inactive { color:var(--muted); font-size:.82rem; }

/* ── Espaçamento sections ──────────────────────────────────────────── */
section { margin-bottom:2rem; }
section > h1 { margin-top:0; }

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .topbar { flex-direction:column; gap:.75rem; padding:.75rem 1rem; }
  .topbar nav { justify-content:center; }
  main { padding:1rem; }
  .page-header { flex-direction:column; }
  .month-nav { justify-content:center; }
  .filter-bar input, .filter-bar select { flex:1 1 100%; }
  .chart-wrap { height:180px; }
  .tx-footer { flex-direction:column; align-items:flex-start; }
}