/* ═══════════════════════════════════════════════════════════════════
   PAINEL FINANCEIRO — sistema visual "dark premium"
   Tokens, base e controles. Nada aqui conhece regra de negócio.
   Escuro é o padrão; [data-theme="light"] reescreve os mesmos tokens.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ───────────────────────────────────────────────────── */
:root{
  /* superfícies — do fundo para a frente */
  --bg:#0A0C0F;
  --surface:#13161C;
  --surface-2:#191D24;
  --surface-3:#20252D;
  --overlay:rgba(6,8,11,.72);

  /* traços */
  --line:#242932;
  --line-soft:#1C2129;
  --line-strong:#333A45;

  /* texto */
  --text:#E9ECF1;
  --text-soft:#9AA3B0;
  --text-faint:#646D7B;
  --text-inv:#0A0C0F;

  /* acentos */
  --accent:#34D399;          /* verde-menta: dinheiro que entra, ação primária */
  --accent-hi:#5EEABA;
  --accent-dim:rgba(52,211,153,.14);
  --accent-line:rgba(52,211,153,.34);

  --violet:#A78BFA;          /* despesa nos gráficos */
  --violet-dim:rgba(167,139,250,.14);

  --red:#F87171;   --red-dim:rgba(248,113,113,.13);
  --amber:#FBBF24; --amber-dim:rgba(251,191,36,.13);
  --blue:#60A5FA;  --blue-dim:rgba(96,165,250,.13);

  /* séries de gráfico */
  --c-rec:#34D399;    /* entrou  */
  --c-gasto:#A78BFA;  /* saiu    */
  --c-orc:#3A414D;    /* orçado  */
  --c-prev:#60A5FA;   /* previsto (futuro) */

  /* forma */
  --r-lg:16px; --r-md:12px; --r-sm:9px; --r-xs:6px;

  /* profundidade: sombra + fio de luz no topo = "premium" sem exagero */
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 2px 4px rgba(0,0,0,.3), 0 8px 24px -8px rgba(0,0,0,.6);
  --sh-3:0 8px 20px rgba(0,0,0,.45), 0 32px 64px -24px rgba(0,0,0,.8);
  --edge:inset 0 1px 0 rgba(255,255,255,.045);

  /* tipografia */
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"SF Mono",ui-monospace,"Cascadia Mono","Segoe UI Mono",Menlo,monospace;

  --ease:cubic-bezier(.4,0,.2,1);
  --sidebar-w:236px;
  --topbar-h:60px;
}

/* Modo claro: mesmos papéis, outra matéria-prima. */
:root[data-theme="light"]{
  --bg:#F6F7F9;
  --surface:#FFFFFF;
  --surface-2:#FAFBFC;
  --surface-3:#F1F3F6;
  --overlay:rgba(20,24,31,.42);

  --line:#E3E7ED;
  --line-soft:#EDF0F4;
  --line-strong:#CFD5DE;

  --text:#171A1F;
  --text-soft:#5C6472;
  --text-faint:#8A93A1;
  --text-inv:#FFFFFF;

  --accent:#0F9D6B;
  --accent-hi:#0B8259;
  --accent-dim:rgba(15,157,107,.11);
  --accent-line:rgba(15,157,107,.30);

  --violet:#7C5CE0; --violet-dim:rgba(124,92,224,.10);
  --red:#DC2626;   --red-dim:rgba(220,38,38,.09);
  --amber:#B45309; --amber-dim:rgba(180,83,9,.10);
  --blue:#2563EB;  --blue-dim:rgba(37,99,235,.09);

  --c-rec:#0F9D6B; --c-gasto:#7C5CE0; --c-orc:#D8DDE5; --c-prev:#2563EB;

  --sh-1:0 1px 2px rgba(16,24,40,.06);
  --sh-2:0 1px 3px rgba(16,24,40,.08), 0 8px 24px -12px rgba(16,24,40,.14);
  --sh-3:0 8px 20px rgba(16,24,40,.10), 0 32px 64px -24px rgba(16,24,40,.22);
  --edge:inset 0 1px 0 rgba(255,255,255,.9);
}

/* ── 2. BASE ─────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  font-size:13.5px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* Todo número em coluna tem que alinhar. Sem isso a planilha "dança". */
.num,.val,.kpi-val,.money,table td.num,table th.num{font-variant-numeric:tabular-nums}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.015em}
::selection{background:var(--accent-dim);color:var(--text)}

/* Barra de rolagem discreta — a padrão do Windows estraga o clima escuro */
*{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:8px;
  border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--text-faint);background-clip:content-box;border:3px solid transparent}
::-webkit-scrollbar-corner{background:transparent}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-xs)}

/* ── 3. TIPOGRAFIA DE APOIO ──────────────────────────────────────── */
.eyebrow{font-size:10.5px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--text-faint)}
.hint{font-size:11.5px;color:var(--text-faint);font-weight:400}
.muted{color:var(--text-soft)}
.pos{color:var(--accent)}
.neg{color:var(--red)}
.warn{color:var(--amber)}
.cap{text-transform:capitalize}
.row-flex{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.spread{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.section-h{display:flex;align-items:baseline;gap:12px;margin:30px 0 12px}
.section-h h3{font-size:15px;font-weight:650}
.section-h .hint{margin-left:auto}

/* ── 4. ESQUELETO ────────────────────────────────────────────────── */
.app{display:none;height:100vh}
.app.show{display:grid;grid-template-columns:var(--sidebar-w) 1fr}

/* ── 4.1 Sidebar ─────────────────────────────────────────────────── */
.sidebar{
  display:flex;flex-direction:column;
  background:var(--bg);
  border-right:1px solid var(--line-soft);
  padding:14px 12px 12px;
  overflow-y:auto;
}
.brand{display:flex;align-items:center;gap:10px;padding:6px 8px 14px;
  font-weight:650;font-size:14.5px;letter-spacing:-.02em}
.brand .mark{
  width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:9px;
  background:linear-gradient(145deg,var(--accent-hi),#1FA97A);
  color:#04150E;font-size:14px;font-weight:800;
  box-shadow:0 2px 8px rgba(52,211,153,.28),var(--edge);
}
.nav-sec{padding:15px 9px 5px;font-size:10px;font-weight:650;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-faint)}
.nav-item{
  position:relative;display:flex;align-items:center;gap:10px;width:100%;
  padding:8px 10px;border-radius:var(--r-sm);
  color:var(--text-soft);font-size:13.5px;font-weight:500;text-align:left;
  transition:background .13s var(--ease),color .13s var(--ease);
}
.nav-item:hover{background:var(--surface-2);color:var(--text);text-decoration:none}
.nav-item.active{background:var(--surface-2);color:var(--text);font-weight:600}
/* barra de acento à esquerda: diz "você está aqui" sem gritar */
.nav-item.active::before{
  content:"";position:absolute;left:-12px;top:7px;bottom:7px;width:3px;
  border-radius:0 3px 3px 0;background:var(--accent);
}
.nav-item .ic{width:17px;height:17px;flex:none;display:grid;place-items:center;opacity:.8}
.nav-item.active .ic{opacity:1;color:var(--accent)}
.nav-item .ic svg{width:17px;height:17px;stroke-width:1.7;fill:none;stroke:currentColor;
  stroke-linecap:round;stroke-linejoin:round}
.nav-item .tag{margin-left:auto;font-size:10.5px;font-weight:650;padding:1px 6px;border-radius:20px;
  background:var(--accent-dim);color:var(--accent)}
.nav-item .tag.alerta{background:var(--amber-dim);color:var(--amber)}
.nav-spacer{flex:1;min-height:16px}

.side-user{
  display:flex;align-items:center;gap:9px;padding:10px 8px 4px;margin-top:6px;
  border-top:1px solid var(--line-soft);
}
.side-user .av{
  width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--surface-3);color:var(--text-soft);font-size:12px;font-weight:650;
  box-shadow:var(--edge);
}
.side-user .who{min-width:0;flex:1}
.side-user .who b{display:block;font-size:12.5px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-user .who span{display:block;font-size:11px;color:var(--text-faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── 4.2 Área principal ──────────────────────────────────────────── */
.main{display:flex;flex-direction:column;min-width:0;background:var(--bg)}
.topbar{
  height:var(--topbar-h);flex:none;
  display:flex;align-items:center;gap:14px;
  padding:0 26px;border-bottom:1px solid var(--line-soft);
  background:var(--bg);
  position:sticky;top:0;z-index:40;
}
.topbar h2{font-size:16px;font-weight:650;letter-spacing:-.02em;white-space:nowrap}
.content{flex:1;overflow-y:auto;padding:24px 26px 64px;min-width:0}
.content.wide{padding-left:18px;padding-right:18px}

/* navegador de mês, sempre à mão no topo */
.mnav{display:flex;align-items:center;gap:1px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:2px;box-shadow:var(--sh-1)}
.mnav button{width:26px;height:26px;display:grid;place-items:center;border-radius:var(--r-xs);
  color:var(--text-soft);font-size:14px;line-height:1;transition:.12s}
.mnav button:hover{background:var(--surface-3);color:var(--text)}
.mnav .lbl{min-width:112px;text-align:center;font-size:12.5px;font-weight:600;
  text-transform:capitalize;padding:0 4px}
.mnav .hoje{font-size:11px;font-weight:650;color:var(--accent);padding:0 9px;
  border-left:1px solid var(--line);width:auto;border-radius:0}
.mnav .hoje:hover{background:transparent;color:var(--accent-hi)}

/* estado de salvamento — informação de rodapé, tratada como tal */
.savepill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;
  color:var(--text-faint);white-space:nowrap}
.savepill i{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.savepill.saving i{background:var(--amber);animation:pulse 1.1s infinite}
.savepill.error{color:var(--red)} .savepill.error i{background:var(--red)}
@keyframes pulse{50%{opacity:.25}}

/* ── 5. BOTÕES ───────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:7px 13px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--surface);color:var(--text);
  font-size:12.5px;font-weight:550;white-space:nowrap;
  box-shadow:var(--sh-1);transition:.13s var(--ease);
}
.btn:hover{background:var(--surface-3);border-color:var(--line-strong);text-decoration:none}
.btn:active{transform:translateY(.5px)}
.btn svg{width:15px;height:15px;stroke-width:1.8;fill:none;stroke:currentColor;
  stroke-linecap:round;stroke-linejoin:round}
.btn-primary{
  background:linear-gradient(180deg,var(--accent-hi),var(--accent));
  color:#04150E;border-color:transparent;font-weight:650;
  box-shadow:0 1px 2px rgba(0,0,0,.3),0 4px 14px -6px rgba(52,211,153,.5),var(--edge);
}
.btn-primary:hover{filter:brightness(1.06);background:linear-gradient(180deg,var(--accent-hi),var(--accent))}
.btn-ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--text-soft)}
.btn-ghost:hover{background:var(--surface-2);color:var(--text);border-color:transparent}
.btn-sm{padding:4.5px 9px;font-size:11.5px;gap:5px}
.btn-sm svg{width:13px;height:13px}
.btn-icon{padding:0;width:30px;height:30px}
.btn-danger{color:var(--red);border-color:transparent;background:transparent;box-shadow:none}
.btn-danger:hover{background:var(--red-dim);border-color:transparent}
.btn:disabled{opacity:.4;pointer-events:none}

/* grupo segmentado — troca de leitura sem sair do lugar */
.seg{display:inline-flex;padding:2.5px;gap:2px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-sm)}
.seg button{padding:4.5px 11px;border-radius:var(--r-xs);font-size:12px;
  font-weight:550;color:var(--text-soft);transition:.13s}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--surface);color:var(--text);font-weight:600;
  box-shadow:var(--sh-1),var(--edge)}

/* ── 6. CAMPOS ───────────────────────────────────────────────────── */
.field{margin-bottom:13px}
.field>label{display:block;font-size:11.5px;font-weight:600;color:var(--text-soft);margin-bottom:5px}
input[type=text],input[type=password],input[type=number],input[type=date],input[type=month],
input[type=search],textarea,select{
  width:100%;padding:8px 11px;
  background:var(--surface-2);color:var(--text);
  border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:13px;outline:none;transition:.13s var(--ease);
}
input::placeholder,textarea::placeholder{color:var(--text-faint)}
input:hover,select:hover,textarea:hover{border-color:var(--line-strong)}
input:focus,select:focus,textarea:focus{
  border-color:var(--accent-line);background:var(--surface);
  box-shadow:0 0 0 3px var(--accent-dim);
}
select{appearance:none;padding-right:30px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239AA3B0' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center}
input[type=color]{padding:3px;height:36px;cursor:pointer;background:var(--surface-2)}
.chk{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-soft);
  cursor:pointer;padding:3px 0}
.chk input{width:auto;accent-color:var(--accent)}

/* busca do topo */
.gsearch{position:relative;flex:1;max-width:420px}
.gsearch .gs-ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);
  color:var(--text-faint);display:grid;pointer-events:none}
.gsearch .gs-ic svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round}
.gsearch input{padding-left:33px;padding-right:56px;height:34px;background:var(--surface)}
.gs-kbd{position:absolute;right:8px;top:50%;transform:translateY(-50%);pointer-events:none;
  font-size:10px;font-weight:650;color:var(--text-faint);
  border:1px solid var(--line);border-radius:5px;padding:2px 5px;background:var(--surface-2)}

/* ── 20. PONTE PARA O CSS ANTIGO ─────────────────────────────────────
   styles.css (camada de compatibilidade) ainda pede tokens com os nomes
   da versão anterior. Aqui eles viram apelidos dos novos, então as telas
   não migradas já saem no tema escuro. Some quando styles.css sumir. */
:root{
  --bg-soft:var(--surface-2);
  --bg-card:var(--surface);
  --border:var(--line);
  --border-strong:var(--line-strong);
  --accent-soft:var(--accent-dim);
  --green:var(--accent);
  --green-soft:var(--accent-dim);
  --red-soft:var(--red-dim);
  --amber-soft:var(--amber-dim);
  --radius:var(--r-md);
  --radius-sm:var(--r-sm);
  --shadow:var(--sh-2);
}