:root{--bg:#f4f7fb;--card:#fff;--text:#172033;--muted:#6b7280;--primary:#2457c5;--danger:#b42318;--success:#18794e;--border:#dbe2ec;--nav:#2457c5;--nav-forte:#173e91;--shadow:0 10px 28px rgba(20,38,74,.08)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
button,input,select,textarea{font:inherit}
a{color:var(--primary)}
.env-banner{background:#fef3c7;color:#92400e;text-align:center;padding:6px;font-weight:700;font-size:.85rem}
.topbar{background:var(--nav);color:#fff;padding:14px 22px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.topbar .logo{font-weight:800;margin-right:8px}
.topbar nav{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.topbar nav a{color:#fff;text-decoration:none;padding:8px 12px;border-radius:8px;font-weight:650}
.topbar nav a.active,.topbar nav a:hover{background:var(--nav-forte);color:#fff}
/* Dropdown de submenu (ex: Contas > Cadastro / Relatório) — mesmo
   componente do sucatas-app (details/summary), recolorido em azul
   (identidade do financeiro) em vez do verde de lá, mas com o mesmo
   princípio de contraste vivo entre menu e submenu. */
.topbar nav .dropdown{position:relative}
.topbar nav .dropdown>summary{list-style:none;cursor:pointer;color:#fff;padding:8px 12px;border-radius:8px;font-weight:650;user-select:none}
.topbar nav .dropdown>summary::-webkit-details-marker{display:none}
.topbar nav .dropdown>summary::after{content:' \25BE';font-size:.7rem}
.topbar nav .dropdown>summary:hover,.topbar nav .dropdown[open]>summary{background:var(--nav-forte);color:#fff}
.topbar nav .dropdown>summary.active{background:var(--nav-forte);color:#fff}
/* Submenu (popup) — bug real corrigido aqui: ".topbar nav a" (specificity
   0-1-2) tinha prioridade sobre ".dropdown-menu a" sozinho (0-1-1), então
   o texto claro pensado pro fundo escuro da barra vazava pro popup branco
   do submenu e ficava quase ilegível. Qualificar com ".topbar" na frente
   (0-2-1) garante que o estilo do submenu sempre vence, não importa o que
   mude na barra principal. */
.dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;background:#fff;border-radius:10px;box-shadow:var(--shadow);min-width:210px;z-index:50;overflow:hidden;padding:4px}
.topbar .dropdown-menu a{display:block;padding:9px 12px;color:var(--text);text-decoration:none;font-size:.9rem;border-radius:7px;font-weight:600}
.topbar .dropdown-menu a:hover{background:#eef3fb}
.topbar .dropdown-menu a.active{background:#eaf1ff;color:var(--primary);font-weight:700}
.user-box{display:flex;align-items:center;gap:12px;font-size:.85rem;color:#c9d6ef}
.user-box a{color:#dbe7ff}
.container{max-width:1180px;margin:26px auto;padding:0 18px 40px}
h1{margin:0 0 4px}
.subtitle{color:var(--muted);margin:0 0 20px}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:20px;margin-bottom:20px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:15px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.full{grid-column:1/-1}
.stat{background:#f7f9fc;border-radius:10px;padding:14px}
.stat .label{color:var(--muted);font-size:.85rem}
.stat .value,.stat strong{display:block;font-size:26px;margin-top:4px}
label{display:block;font-weight:700;margin-bottom:5px;font-size:.9rem}
input,select,textarea{width:100%;padding:10px 11px;border:1px solid #bcc7d7;border-radius:9px;background:#fff}
textarea{min-height:80px}
.btn{border:0;border-radius:9px;padding:10px 14px;font-weight:750;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.primary{background:var(--primary);color:#fff}
.secondary{background:#eef3fb;color:#244060}
.danger{background:var(--danger);color:#fff}
.success{background:var(--success);color:#fff}
.actions{display:flex;gap:8px;flex-wrap:wrap}
/* Barra de filtro/pesquisa — EM LINHA, lado a lado, campos compactos
   (correção de uma tentativa anterior em coluna estreita, que deixava uma
   faixa vazia enorme do lado — pedido explícito: aproveitar a largura da
   tela, sem espaço sobrando). Cada campo só do tamanho que precisa
   (flex:0 0 auto + width:auto no input/select, sobrescrevendo o
   width:100% padrão), quebrando pra próxima linha sozinho se não couber
   tudo (flex-wrap), nunca esticando pra preencher vazio. */
.toolbar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:flex-end}
.toolbar>div{flex:0 0 auto}
.toolbar select,.toolbar input[type=date],.toolbar input[type=text]{width:auto;min-width:150px}
.toolbar .categoria-picker-toggle{width:auto;min-width:230px;max-width:none}
/* Barra de filtro em DUAS LINHAS (pedido explícito, movimento_caixa.php):
   .toolbar-linha é um item do .toolbar que ocupa a linha TODA sozinho
   (flex-basis:100%) — força quebra de linha antes/depois dele. Usada DUAS
   vezes (Data inicial/Data final/Conta/Categoria numa, Tipo/Pessoa/ações
   na outra) — divisão calculada pra cada linha caber inteira sem quebrar
   de novo dentro de si mesma no card (max-width:1180px do .container),
   com folga: tentativa anterior (Conta/Categoria/Tipo/Pessoa/ações todos
   numa linha só) estourava a largura e virava 3 linhas em vez de 2 (bug
   real, achado pela usuária). Campos maiores que o padrão de .toolbar —
   pedido explícito de aumentar o tamanho. Só usada em movimento_caixa.php;
   não muda em nada as outras 5 telas que continuam com .toolbar puro (uma
   linha só). */
.toolbar>.toolbar-linha{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:flex-end}
.toolbar-linha>div{flex:0 0 auto}
.toolbar-linha select,.toolbar-linha input[type=date],.toolbar-linha input[type=text]{width:auto;min-width:200px;padding:11px 13px;font-size:.95rem}
.toolbar-linha .categoria-picker-toggle{width:auto;min-width:250px;max-width:none}
table{width:100%;border-collapse:collapse}
th,td{padding:10px 11px;border-bottom:1px solid var(--border);text-align:left;font-size:.92rem}
th{background:#f7f9fc;color:#44546a}
.table-wrap{overflow:auto}
.btn-sm{padding:6px 10px;font-size:.82rem;border-radius:7px}
/* Tabela de Lançamentos — Contraparte/Descrição/Categoria são texto livre
   e podiam esticar a tabela até precisar de rolagem horizontal pra ver a
   coluna de Ações. max-width + ellipsis trava a largura (o nome completo
   continua acessível pelo title, no hover), sem mexer no "table" global
   (categorias.php/relatorios.php não usam essa classe, ficam como estão). */
.tabela-lancamentos .col-truncar{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabela-lancamentos td.col-acoes{white-space:nowrap}
.tabela-lancamentos td.col-acoes .btn-sm+.btn-sm{margin-left:6px}
.paginacao{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:14px}
.badge{display:inline-block;padding:4px 9px;border-radius:999px;font-size:12px;font-weight:800}
.credito{background:#dcfce7;color:#166534}
.debito{background:#fee2e2;color:#991b1b}
/* .muted nunca tinha regra nenhuma — só existia a VARIÁVEL --muted, usada
   dentro de outros seletores (.subtitle, .stat .label...). Toda vez que
   "muted" foi usado como classe solta num elemento (ex: parcela-linha do
   módulo de Cartões) o texto saía sem nenhum destaque, cor padrão igual
   ao resto — bug real, achado ao investigar por que a categoria da
   parcela "não aparecia" (aparecia, só que sem contraste nenhum). */
.muted{color:var(--muted)}
/* Selo da categoria na listagem de parcelas do cartão (Compras e
   Faturas) — badge de verdade (cor + fundo), não texto apagado, pra dar
   pra ver "de relance" sem precisar abrir Editar. Azul da identidade do
   app, neutro o bastante pra não competir com os badges de status
   (crédito/débito/pendente) que já usam outras cores. */
.badge-categoria-cartao{background:#eef3fb;color:var(--primary)}
.flash{padding:12px 14px;border-radius:10px;margin-bottom:18px;font-weight:650}
.flash-erro{background:#fee2e2;color:#991b1b}
.flash-sucesso{background:#dcfce7;color:#166534}
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px;background:linear-gradient(135deg,#102343,#2457c5)}
.login-card{width:min(420px,100%)}
/* Campo de senha com ícone de olho (mostrar/ocultar) — pedido explícito,
   em todo campo de senha do sistema (login, esqueci/redefinir, trocar
   senha). Oculto por padrão (input continua type=password); o botão só
   alterna o atributo type pra "text" no clique — nunca guarda nem
   transmite a senha de outro jeito, é puramente visual/client-side. O
   wrapper <span> vira o container posicionado (o input já é 100% de
   largura por padrão global); o botão fica absoluto dentro dele. */
.campo-senha{position:relative;display:block}
.campo-senha input{padding-right:40px}
.campo-senha .btn-olho{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:none;border:0;padding:7px;margin:0;cursor:pointer;color:var(--muted);display:flex;align-items:center;justify-content:center;border-radius:6px;line-height:0}
.campo-senha .btn-olho:hover{background:#eef3fb;color:var(--primary)}
.campo-senha .btn-olho svg{width:18px;height:18px;display:block}
.checkbox{width:auto}
.category-picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px;padding:12px;border:1px solid var(--border);border-radius:9px;background:#f7f9fc}
.category-picker label{font-weight:600;margin:0;display:flex;align-items:center;gap:6px}
.notice{background:#eaf1ff;color:#1746a2;padding:10px 12px;border-radius:9px;margin-bottom:12px;font-size:.9rem}
/* Árvore de categorias — genuinamente recursiva agora (categoria-master >
   mãe > subcategoria > ... sem limite de nível), não só 2 níveis fixos.
   ">" em vez de descendente simples: sem isso, o ▾ de um nó aberto also
   pintava o ▸/▾ de um FILHO fechado, só por estar aninhado dentro — bug
   que só aparece de verdade quando existe aninhamento de verdade. */
/* Árvore de categorias — mesmo padrão de categorias_financeiras.php do
   sucatas-app (mesmo desenvolvedor, pedido explícito pra copiar literal):
   linha com borda FINA (não caixa por grupo — a diferença é essa: borda
   em volta de CADA LINHA, nunca em volta de um grupo de linhas), tom de
   fundo progressivamente mais escuro por nível, filhos indentados com
   uma linha-guia à esquerda (border-left, o "conector" clássico de
   árvore de arquivo) em vez de caixa, botão "+/−" quadrado de verdade
   (não glifo ▸/▾ de <details>). Nível 5+ repete o tom do nível 4 — a
   indentação já deixa claro que é mais um nível abaixo, não faz sentido
   escurecer pra sempre.
   Reaproveitada também no seletor de categoria do filtro de Relatórios
   (lá com checkbox em vez de botões de ação — ver .tree-picker abaixo). */
.categoria-no-linha{display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--border);border-radius:7px;background:#fff}
.categoria-no-linha:hover{border-color:#c3cee0}
.categoria-no-nivel1>.categoria-no-linha{background:#f9fafb}
.categoria-no-nivel2>.categoria-no-linha,.categoria-no-nivel3>.categoria-no-linha,.categoria-no-nivel4>.categoria-no-linha{background:#f3f4f6}
.categoria-no-nome{font-size:.88rem;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.categoria-no-nivel0>.categoria-no-linha .categoria-no-nome{font-weight:700}
.categoria-no-qtd{font-size:.78rem;flex-shrink:0;white-space:nowrap}
.categoria-no-acoes{display:flex;gap:4px;flex-shrink:0}
.categoria-no-toggle{flex:0 0 22px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border:1px solid #d1d5db;border-radius:5px;background:#f9fafb;color:var(--primary);font-weight:700;font-size:.85rem;line-height:1;cursor:pointer;user-select:none}
.categoria-no-toggle:hover{background:#eaf1ff}
.categoria-no-toggle-vazio{flex:0 0 22px;width:22px}
.categoria-no-filhos{display:flex;flex-direction:column;gap:6px;margin:6px 0 0 24px;padding-left:14px;border-left:2px solid var(--border)}
.categoria-no-filhos[hidden]{display:none}
.categoria-no-ativa>.categoria-no-linha{background:#eaf1ff;border-color:#b9cdf2}
.categoria-no+.categoria-no{margin-top:6px}
/* Seletor de categoria contextual ao tipo (Crédito/Débito) do lançamento —
   esconde categorias-mãe que não batem com o tipo escolhido no formulário
   (ver filtrarCategoriaPorTipoLancamento em lancamentos.php). */
.categoria-no-tipo-oculto{display:none!important}
.badge-credito-cat{background:#dbeafe;color:#2563eb}
.badge-debito-cat{background:#fee2e2;color:#dc2626}
.badge-pendente-cat{background:#f3f4f6;color:#6b7280}
/* Grade de categorias (não lista vertical única) — com ~98 categorias-mãe
   (quase todas sem subcategoria de verdade, ver migration_006), uma coluna
   só vira parede de 98 linhas. auto-fill quebra sozinho em mais ou menos
   colunas conforme a largura disponível, sem precisar de media query. */
/* Árvore de categorias do filtro de Relatórios — reaproveita literalmente
   as classes .categoria-no* (definidas acima, mesmo padrão do sucatas-app)
   trocando só os botões de ação por um checkbox: aqui é seleção, não
   cadastro. Sem <details> — usa a mesma marcação em div + JS
   (alternarFiltroCategoria) que categorias.php, pelo mesmo motivo
   (controle total de estilo, sem as limitações do marcador nativo). */
.tree-picker{display:flex;flex-direction:column;gap:6px}
.tree-picker label{display:flex;align-items:center;gap:6px;cursor:pointer;flex:1;min-width:0}
[hidden]{display:none!important}
/* Painel recolhível do seletor de categoria em árvore — fechado por
   padrão sempre (abrir é sempre um clique explícito, nunca automático).
   width:100% por padrão (preenche a célula onde está — ex: o campo
   Categoria do formulário de criar/editar lançamento, lado a lado com
   Conta/Pessoa/etc.); dentro de uma barra de filtro (.toolbar), vira
   compacto — ver ".toolbar .categoria-picker-toggle" ali embaixo. */
.categoria-picker-toggle{border:1px solid var(--border);border-radius:9px;background:#f7f9fc;display:block;width:100%}
.categoria-picker-toggle>summary{list-style:none;cursor:pointer;padding:12px 14px;font-weight:650;display:flex;align-items:center;gap:8px}
.categoria-picker-toggle>summary::-webkit-details-marker{display:none}
.categoria-picker-toggle>summary::before{content:'▸';color:var(--muted)}
.categoria-picker-toggle[open]>summary::before{content:'▾'}
/* max-height mais generoso — a grade de várias colunas já reduz bastante
   a altura necessária (98 itens em ~4 colunas = ~25 linhas, não 98). */
.categoria-picker-corpo{padding:6px 16px 18px;max-height:min(65vh,640px);overflow:auto;min-width:280px}
.categoria-busca-linha{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 16px;align-items:center}
.categoria-busca-linha input[type=text]{flex:1;min-width:220px}
.lote-barra{display:flex;gap:12px;flex-wrap:wrap;align-items:center;background:#f7f9fc;border:1px solid var(--border);border-radius:9px;padding:10px 14px;margin-bottom:12px}
.lote-barra select{width:auto}
.lote-selecionar-todos{display:flex;align-items:center;gap:6px;font-weight:650;margin:0;white-space:nowrap}
/* <dialog> modal — mesmo padrão do sucatas-app ("Incluir Subcategoria" em
   categorias_financeiras.php). Não existia nenhum modal no financeiro
   ainda; portado literal, sem adaptação de aparência. */
dialog.modal{border:none;border-radius:10px;padding:24px;box-shadow:0 10px 40px rgba(0,0,0,.25);max-width:480px;width:90vw}
dialog.modal::backdrop{background:rgba(15,23,42,.5)}
dialog.modal h3{margin-top:0}
dialog.modal .modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
/* Linha de parcela dentro de uma fatura (Cartões de Crédito) — reaproveita
   o mesmo espírito de .categoria-no-filhos (indentado, sem caixa por
   linha), mas é sempre folha (parcela não tem subnível), então é só uma
   linha simples com separador fino embaixo. */
.parcela-linha{display:flex;align-items:center;gap:10px;padding:6px 8px;border-bottom:1px dashed var(--border);font-size:.85rem;flex-wrap:wrap}
.parcela-linha:last-child{border-bottom:0}
.parcela-linha .parcela-desc{flex:1 1 200px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.parcela-linha .parcela-valor{font-weight:700;white-space:nowrap}
/* Bloco "Cartões" do Dashboard — um item por cartão, lado a lado ocupando
   a LARGURA da página (auto-fit quebra sozinho conforme cabe, nunca
   empilha em altura à toa por padrão) — pedido explícito do usuário.
   Cada item reaproveita .parcela-linha pra lista de próximas faturas. */
.cartoes-dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.cartao-dash-item{background:#f9fafc;border:1px solid var(--border);border-radius:12px;padding:16px}
.cartao-dash-nome{font-size:1.05rem;font-weight:800;margin:0 0 4px}
.cartao-dash-venc{margin:0 0 10px;font-size:.88rem}
.cartao-dash-venc strong{color:var(--primary)}
.cartao-dash-total{margin:2px 0 12px;font-size:.88rem;text-align:right}
/* Gráfico de linha em SVG server-side (renderGraficoFaturaCartao em
   config.php) — mesmo princípio do sucatas-app (sem lib de JS nenhuma,
   tudo desenhado em PHP puro; só o hover/tooltip usa um tiquinho de JS),
   estendido aqui pra desenhar dois trechos na mesma linha: sólido pro
   histórico já pago, tracejado (.chart-line-projecao) pra projeção das
   faturas que ainda vão vencer. */
.chart-wrap{position:relative}
.chart-svg{width:100%;height:auto;display:block}
.chart-grid{stroke:#eef0f3;stroke-width:1}
.chart-hoje-linha{stroke:#94a3b8;stroke-width:1;stroke-dasharray:3 3}
.chart-crosshair{stroke:#cbd5e1;stroke-width:1;opacity:0}
.chart-crosshair.visible{opacity:1}
.chart-line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chart-line-projecao{stroke-dasharray:6 5}
.chart-dot{fill:#fff;stroke-width:2}
.chart-dot-projecao{stroke-dasharray:2 2}
.chart-axis-label{fill:#6b7280;font-size:11px;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.chart-hit{fill:transparent;cursor:pointer}
.chart-tooltip{position:absolute;pointer-events:none;background:#1f2937;color:#fff;padding:6px 10px;border-radius:6px;font-size:.82rem;opacity:0;transition:opacity .1s;transform:translate(-50%,-125%);white-space:nowrap;z-index:10}
.chart-tooltip.visible{opacity:1}
.chart-azul .chart-area{fill:rgba(36,87,197,.12);stroke:none}
.chart-azul .chart-line{stroke:var(--primary)}
.chart-azul .chart-dot{stroke:var(--primary)}
.chart-azul .chart-hit:hover{fill:rgba(36,87,197,.12)}
.chart-legenda{margin:8px 0 0;font-size:.78rem;color:var(--muted);display:flex;gap:14px}
/* Balancete (categoria × mês) — tabela normal, só com linhas de destaque
   pro cabeçalho de seção (Receitas/Despesas/Resultado) e pras linhas de
   saldo, que não são "mais uma categoria". Números alinhados à direita
   (diferente do resto do app) porque aqui é matriz de valores lado a
   lado — comparar colunas fica ilegível com texto alinhado à esquerda. */
.balancete-tabela td,.balancete-tabela th{text-align:right;white-space:nowrap}
.balancete-tabela td:first-child,.balancete-tabela th:first-child{text-align:left;white-space:normal}
.balancete-secao td{background:#eaf1ff;color:var(--primary);font-weight:800;text-align:left}
.balancete-saldo{background:#f7f9fc;font-weight:700}
.balancete-resultado{border-top:2px solid var(--border);font-weight:700}
/* Célula com crédito E débito no mesmo mês (categoria "sem tipo definido"
   usada pros dois lados) — os dois valores brutos empilhados, nunca só o
   líquido escondendo um dos dois. */
.balancete-tabela td span.balancete-credito,.balancete-tabela td span.balancete-debito{display:block;font-size:.82rem}
.balancete-credito{color:#166534}
.balancete-debito{color:#991b1b}
@media(max-width:900px){.topbar{flex-direction:column;align-items:flex-start}.grid2,.form-grid{grid-template-columns:1fr}.categoria-picker-toggle,.filtros-toggle{max-width:100%}}
@media print{.topbar,.no-print{display:none!important}.container{max-width:none;margin:0;padding:0}body{background:#fff}.card{box-shadow:none;border:0;padding:0}@page{margin:14mm}.balancete-tabela tr[hidden]{display:table-row!important}}