/* Visão Geral — dashboard. Light theme, sem emojis, padrão mockup-v2. */

.dash-loading,
.dash-empty {
  padding: 1.4rem; text-align: center; color: var(--text-dim); font-size: .8rem;
}

/* cabeçalho com navegação de mês */
.dash-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem;
}
.dash-title { font-size: 1.15rem; font-weight: 800; color: var(--text); letter-spacing: -.01em; }
.dash-sub { font-size: .72rem; color: var(--text-mut); margin-top: .1rem; text-transform: capitalize; }
.dash-controls { display: inline-flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.dash-anos { display: inline-flex; gap: .25rem; background: var(--bg-2); border: 1px solid var(--border); border-radius: .5rem; padding: .15rem; }
.dash-ano {
  border: none; background: transparent; color: var(--text-mut); cursor: pointer;
  font-size: .74rem; font-weight: 700; padding: .25rem .55rem; border-radius: .35rem; line-height: 1;
}
.dash-ano:hover { color: var(--text); }
.dash-ano.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.dash-mesnav { display: inline-flex; align-items: center; gap: .5rem; }
.dash-nav {
  width: 1.8rem; height: 1.8rem; border-radius: .45rem; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 1rem; line-height: 1;
}
.dash-nav:hover { background: var(--bg-2); }
.dash-mes-label { font-size: .9rem; font-weight: 700; color: var(--text); min-width: 5rem; text-align: center; text-transform: capitalize; }

/* grid de painéis */
.dash-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem;
}
.dash-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: .65rem;
  padding: .8rem .9rem; min-width: 0;
}
.dash-span-2 { grid-column: 1 / -1; }
.dash-panel-title {
  font-size: .58rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-dim); font-weight: 700; margin-bottom: .65rem;
}

/* legenda compartilhada (evolução) */
.dash-legend { display: flex; gap: 1rem; font-size: .66rem; color: var(--text-mut); margin-bottom: .4rem; }
.dash-legend i { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; margin-right: .35rem; vertical-align: middle; }
.dash-legend .lg-line { width: 1rem; height: 0; border-top: 2px solid #4f46e5; border-radius: 0; }

/* legenda-seletor do fluxo empilhado: cada série liga/desliga ao clicar */
.dash-fxlegs { flex-wrap: wrap; gap: .3rem .5rem; }
.dash-fxleg {
  display: inline-flex; align-items: center; border: 1px solid var(--border);
  background: var(--surface); border-radius: 9999px; padding: .18rem .55rem;
  font-size: .64rem; font-weight: 600; color: var(--text-mut); cursor: pointer;
  opacity: .45;
}
.dash-fxleg.on { opacity: 1; color: var(--text); }
.dash-fxleg:hover { background: var(--bg-2); }
.dash-fxleg i { display: inline-block; width: .65rem; height: .65rem; border-radius: 2px; margin-right: .3rem; }

/* SVG evolução / timeline */
.dash-svg { width: 100%; height: 210px; display: block; }
.dash-svg-tall { height: 220px; }
.dash-bar.pos { fill: #059669; }
.dash-bar.neg { fill: #e11d48; }
.dash-bar { transition: opacity .12s; }
.dash-bar:hover { opacity: .78; }
.dash-tbar { transition: opacity .12s; }
.dash-tbar:hover { opacity: .75; }
.dash-axis { stroke: var(--border-2); stroke-width: 1; }
.dash-resline { fill: none; stroke: #4f46e5; stroke-width: 1.8; }
.dash-resdot { fill: #4f46e5; }
.dash-xlabel { fill: var(--text-dim); font-size: 10px; font-family: inherit; }
.dash-xlabel.sm { font-size: 8px; }
.dash-vlabel { font-size: 8.5px; font-weight: 700; font-family: inherit; }
.dash-vlabel.pos { fill: var(--pos, #16a34a); }
.dash-vlabel.neg { fill: var(--neg, #dc2626); }

/* análise da timeline */
.dash-analise {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .5rem; margin-top: .7rem;
}
.dash-an-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: .5rem; padding: .5rem .6rem; min-width: 0; }
.dash-an-label { font-size: .58rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); font-weight: 700; }
.dash-an-val { font-size: .92rem; font-weight: 700; color: var(--text); margin-top: .2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dash-an-val.pos { color: #059669; }
.dash-an-val.neg { color: #dc2626; }
.dash-an-sub { font-size: .62rem; color: var(--text-dim); margin-top: .1rem; }

/* receita do mês em destaque */
.dash-big { display: flex; flex-direction: column; gap: .35rem; }
.dash-big-val { font-size: 1.7rem; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.dash-big-val.pos { color: #059669; }
.dash-big-cmp { display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; }
.dash-big-pct { font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.dash-big-pct.pos { color: #059669; }
.dash-big-pct.neg { color: #dc2626; }
.dash-big-sub { font-size: .68rem; color: var(--text-dim); }
.dash-big-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--border); font-size: .72rem; color: var(--text-mut); }
.dash-big-foot b { font-variant-numeric: tabular-nums; }
.dash-big-foot b.pos { color: #059669; }
.dash-big-foot b.neg { color: #dc2626; }

/* investimentos */
.dash-inv-top { display: flex; align-items: flex-end; justify-content: space-between; gap: .8rem; margin-bottom: .55rem; flex-wrap: wrap; }
.dash-inv-ano-val { font-size: 1.4rem; font-weight: 800; color: #7c3aed; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.dash-inv-ano-lbl { font-size: .64rem; color: var(--text-dim); margin-top: .1rem; }
.dash-inv-mes { text-align: right; }
.dash-inv-mes-val { font-size: .95rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.dash-inv-mes-lbl { font-size: .6rem; color: var(--text-dim); margin-top: .1rem; }
.dash-inv-svg { width: 100%; height: 80px; display: block; }

/* consultório */
.dash-cons { display: flex; flex-direction: column; gap: .1rem; }
.dash-cons-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .4rem 0; border-bottom: 1px solid var(--border); }
.dash-cons-lbl { font-size: .74rem; color: var(--text-mut); }
.dash-cons-val { font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.dash-cons-val.pos { color: #059669; }
.dash-cons-val.neg { color: #dc2626; }
.dash-cons-liq { border-bottom: none; }
.dash-cons-liq .dash-cons-lbl { font-weight: 700; color: var(--text); }
.dash-cons-note { font-size: .62rem; color: var(--text-dim); margin-top: .35rem; line-height: 1.4; }

/* donut despesas por grupo */
.dash-donut-wrap { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.dash-donut { width: 140px; height: 140px; flex: 0 0 auto; }
.dash-donut-c1 { fill: var(--text); font-size: 15px; font-weight: 700; font-family: inherit; }
.dash-donut-c2 { fill: var(--text-dim); font-size: 9px; text-transform: uppercase; letter-spacing: .05em; font-family: inherit; }
.dash-leg { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: .15rem; }
.dash-leg-row { display: flex; align-items: center; gap: .45rem; font-size: .74rem; padding: .18rem 0; }
.dash-dot { width: .6rem; height: .6rem; border-radius: 2px; flex: 0 0 auto; }
.dash-leg-name { flex: 1; color: var(--text-mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-leg-pct { color: var(--text-dim); font-size: .68rem; min-width: 2.2rem; text-align: right; font-variant-numeric: tabular-nums; }
.dash-leg-val { color: var(--text); font-weight: 600; min-width: 4rem; text-align: right; font-variant-numeric: tabular-nums; }

/* barras horizontais top categorias */
.dash-hbars { display: flex; flex-direction: column; gap: .4rem; }
.dash-hbar-row { display: flex; align-items: center; gap: .5rem; font-size: .74rem; }
.dash-hbar-name { flex: 0 0 32%; color: var(--text-mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-hbar-track { flex: 1; height: .55rem; background: var(--bg-3); border-radius: 3px; overflow: hidden; }
.dash-hbar-fill { display: block; height: 100%; background: linear-gradient(90deg, #6366f1, #4f46e5); border-radius: 3px; }
.dash-hbar-val { flex: 0 0 auto; color: var(--text); font-weight: 600; min-width: 4rem; text-align: right; font-variant-numeric: tabular-nums; }

/* faturas a vencer */
.dash-fat-list { display: flex; flex-direction: column; }
.dash-fat-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid var(--border); }
.dash-fat-row:last-child { border-bottom: none; }
.dash-fat-info { display: flex; flex-direction: column; min-width: 0; }
.dash-fat-nome { font-size: .78rem; color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-fat-venc { font-size: .64rem; color: var(--text-dim); margin-top: .1rem; }
.dash-fat-val { font-size: .82rem; font-weight: 700; color: #dc2626; flex: 0 0 auto; font-variant-numeric: tabular-nums; }

/* contas e cartões */
.dash-contas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .55rem; }
.dash-conta { background: var(--bg-2); border: 1px solid var(--border); border-radius: .55rem; padding: .6rem .7rem; }
.dash-conta-nome { font-size: .68rem; color: var(--text-mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.dash-conta-val { font-size: 1rem; font-weight: 700; margin-top: .2rem; font-variant-numeric: tabular-nums; }
.dash-conta-val.pos { color: #059669; }
.dash-conta-val.neg { color: #dc2626; }
.dash-conta-sub { font-size: .6rem; color: var(--text-dim); margin-top: .12rem; }
.dash-cartao { border-style: dashed; }

@media (max-width: 760px) {
  .dash-grid { grid-template-columns: 1fr; }
  .dash-span-2 { grid-column: auto; }
}