/* ==========================================================================
   Gestão Financeira — v322 "Industry"
   Nova arquitetura visual: sidebar grafite + topbar de vidro + tab bar
   mobile. Carregado DEPOIS de styles.css — sobrescreve a base.
   A camada de comportamento (stepper de mês, tab bar) vive em theme-v322.js.
   ========================================================================== */

:root {
  color-scheme: light;

  /* fundo e superfícies */
  --bg: #f4f5f8;
  --bg-soft: #eef0f4;
  --surface: #ffffff;
  --surface-strong: #ffffff;
  --surface-2: #f3f5f9;
  --surface-ghost: rgba(16, 22, 35, 0.04);

  /* tinta */
  --text: #131a28;
  --muted: #5d6575;

  /* traços */
  --border: #e5e8ef;
  --border-strong: #ccd2df;
  --border-soft: #eef0f5;

  /* sombras de papel */
  --shadow: 0 18px 40px -24px rgba(15, 23, 42, 0.18);
  --shadow-soft: 0 10px 24px -18px rgba(15, 23, 42, 0.14);
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.05), 0 10px 28px -22px rgba(15, 23, 42, 0.14);

  /* acentos */
  --primary: #1d4ed8;
  --primary-soft: #3b6fe4;
  --primary-strong: #14306e;
  --secondary: #0f766e;
  --accent: #b97b1f;
  --success: #0f9d6e;
  --danger: #d43d51;
  --danger-strong: #c22f43;
  --ring: rgba(29, 78, 216, 0.32);

  /* geometria firme */
  --radius-xl: 16px;
  --radius-lg: 14px;
  --radius-md: 11px;
  --radius-sm: 9px;

  /* frame */
  --sidebar-w: 264px;
  --topbar-h: 64px;
  --tabbar-h: 62px;
  --sidebar-bg: #0e1526;
  --sidebar-bg-2: #101a30;
  --sidebar-text: #e7ecf6;
  --sidebar-muted: #8b96ad;
  --sidebar-line: rgba(231, 236, 246, 0.09);

  /* ícones (lucide-style, stroke) usados por sidebar e tab bar */
  --icon-dashboard: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='9' rx='1.5'/><rect x='14' y='3' width='7' height='5' rx='1.5'/><rect x='14' y='12' width='7' height='9' rx='1.5'/><rect x='3' y='16' width='7' height='5' rx='1.5'/></svg>");
  --icon-goals: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><circle cx='12' cy='12' r='5'/><circle cx='12' cy='12' r='1'/></svg>");
  --icon-menu: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='4' y1='6' x2='20' y2='6'/><line x1='4' y1='12' x2='20' y2='12'/><line x1='4' y1='18' x2='20' y2='18'/></svg>");
  --icon-receivables: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='8' r='5'/><path d='M18.09 10.37A5 5 0 1 1 10.34 18'/><path d='M7 6h1v4'/><path d='m16.71 13.88.7.71-2.82 2.82'/></svg>");
  --icon-indicators: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 3v18h18'/><path d='M7 15v-4'/><path d='M12 15V8'/><path d='M17 15v-7'/></svg>");
  --icon-logout: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><polyline points='16 17 21 12 16 7'/><line x1='21' y1='12' x2='9' y2='12'/></svg>");
  --icon-chevron-left: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'/></svg>");
  --icon-chevron-right: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
  --icon-bell: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/><path d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/></svg>");
  --icon-zap: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/></svg>");
  --icon-close: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>");
  --icon-user: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>");
  --icon-gear: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1Z'/></svg>");
  --icon-insight: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18h6'/><path d='M10 22h4'/><path d='M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14'/></svg>");
  --icon-historico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 3v5h5'/><path d='M3.05 13A9 9 0 1 0 6 5.3L3 8'/><path d='M12 7v5l4 2'/></svg>");
  --icon-pie: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21.21 15.89A10 10 0 1 1 8 2.83'/><path d='M22 12A10 10 0 0 0 12 2v10z'/></svg>");
  --icon-moon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/></svg>");
  --icon-sun: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4'/><path d='M12 2v2'/><path d='M12 20v2'/><path d='m4.93 4.93 1.41 1.41'/><path d='m17.66 17.66 1.41 1.41'/><path d='M2 12h2'/><path d='M20 12h2'/><path d='m6.34 17.66-1.41 1.41'/><path d='m19.07 4.93-1.41 1.41'/></svg>");
  --icon-compare: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='16 3 21 3 21 8'/><line x1='4' y1='20' x2='21' y2='3'/><polyline points='8 21 3 21 3 16'/><line x1='15' y1='15' x2='21' y2='21'/><line x1='4' y1='4' x2='9' y2='9'/></svg>");
}

/* ================================================= TEMA ESCURO (opcional)
   Alternado pelo botão da topbar; preferência salva no navegador.
   Re-declara os tokens — os componentes seguem automaticamente.
   ========================================================================= */

body.gf-dark {
  color-scheme: dark;

  --bg: #0d1320;
  --bg-soft: #111a2c;
  --surface: #161e30;
  --surface-strong: #1a2338;
  --surface-2: #1d2842;
  --surface-ghost: rgba(232, 237, 248, 0.05);

  --text: #e8edf8;
  --muted: #97a2b8;

  --border: #242f49;
  --border-strong: #33405f;
  --border-soft: #1d2740;

  --shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.6);
  --shadow-soft: 0 10px 24px -18px rgba(0, 0, 0, 0.55);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.45), 0 12px 30px -22px rgba(0, 0, 0, 0.6);

  --primary: #3b6fe4;
  --primary-soft: #5b97f3;
  /* --primary-strong NÃO muda no escuro: a base usa esse token em ~40
     componentes como "texto escuro sobre chip branco fixo" (botões de
     ação, badges, valores destacados) — o branco do chip não muda com o
     tema. Redefini-lo aqui deixava esses chips com texto claro sobre
     fundo claro (invisível). Os poucos casos que realmente precisam de
     texto claro (porque o container foi escurecido no tema escuro) têm
     override explícito e direto abaixo, sem depender deste token. */
  --secondary: #2dd4bf;
  --accent: #e0ad58;
  --success: #34d399;
  --danger: #f87171;
  --danger-strong: #ef4444;
  --ring: rgba(91, 151, 243, 0.42);
}

/* wrappers de drawer com gradiente claro fixo */
body.gf-dark .summary-drawer,
body.gf-dark .alerts-drawer,
body.gf-dark .settings-drawer {
  background: var(--surface) !important;
}

/* superfícies que a base clara pinta com branco fixo */
body.gf-dark .goals-board,
body.gf-dark .indicators-board,
body.gf-dark .receivables-board,
body.gf-dark .list-card--workspace,
body.gf-dark .toolbar.card,
body.gf-dark .invoice-panel.card,
body.gf-dark .invoice-section,
body.gf-dark .invoice-section--current,
body.gf-dark .summary-panel--drawer,
body.gf-dark .alerts-panel,
body.gf-dark .settings-drawer,
body.gf-dark .form-card,
body.gf-dark .modal-form,
body.gf-dark .entry-card,
body.gf-dark .budget-card,
body.gf-dark .budget-summary,
body.gf-dark .budget-stat,
body.gf-dark .workspace-tools,
body.gf-dark .budget-tools,
body.gf-dark .workspace-collapsed-hint,
body.gf-dark .card-head {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* .chip é o filtro colorido por categoria/pessoa (fundo = --category-accent,
   texto = --category-contrast) — igual ao .entry-subtitle, é identidade
   visual pura e não deve virar um "well" neutro cinza-escuro */

/* rótulos e legendas dentro desses cards continuam suaves. NÃO inclui
   .entry-subtitle: é o chip colorido de categoria (fundo = accent da
   categoria, sempre), seu texto já segue --category-contrast e não deve
   virar cinza — isso quebrava a leitura em quase toda cor de categoria */
body.gf-dark .entry-card .muted,
body.gf-dark .budget-card .muted,
body.gf-dark .budget-stat .muted,
body.gf-dark .budget-stat > span:first-child {
  color: var(--muted) !important;
}

/* pílulas de status dentro dos cards de lançamento (Despesa, Cartão…) */
body.gf-dark .entry-card .badge,
body.gf-dark .entry-card .tag,
body.gf-dark .budget-card .badge,
body.gf-dark .badge.success,
body.gf-dark .badge.danger {
  border-color: var(--border-strong) !important;
}

body.gf-dark .compare-pair-card,
body.gf-dark .compare-pair-grid > div,
body.gf-dark .compare-side {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
}

body.gf-dark .empty-state {
  background: var(--surface-2);
  color: var(--muted);
  border-color: var(--border);
}

/* "wells" internos que a base pinta com branco/claro fixo — no escuro
   viram superfícies escuras legíveis. Só pintura, nunca layout. */
body.gf-dark .indicator-kpi,
body.gf-dark .indicator-row,
body.gf-dark .indicator-donut,
body.gf-dark .indicator-donut-legend-item,
body.gf-dark .indicator-window-toggle,
body.gf-dark .indicator-chart,
body.gf-dark .summary-overview-card,
body.gf-dark .summary-period,
body.gf-dark .summary-chart-panel,
body.gf-dark .summary-pie-center,
body.gf-dark .summary-metric,
body.gf-dark .alerts-overview-card,
body.gf-dark .card-settings-card,
body.gf-dark .card-settings-card--nubank,
body.gf-dark .card-settings-card--mc-black,
body.gf-dark .goal-card-main,
body.gf-dark .goal-card-legend-item,
body.gf-dark .goal-card-value,
body.gf-dark .invoice-detail-item,
body.gf-dark .invoice-section-head small,
body.gf-dark .compare-pair-grid > div,
body.gf-dark .receivable-card-support,
body.gf-dark .receivable-card-note,
body.gf-dark .entry-meta-grid > div {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* rótulos internos desses wells continuam suaves (não sobrescrever valores
   semânticos positivos/negativos) */
body.gf-dark .indicator-kpi > span,
body.gf-dark .indicator-row > span:first-child,
body.gf-dark .summary-overview-card > span,
body.gf-dark .alerts-overview-card > span,
body.gf-dark .goal-card-legend-item span,
body.gf-dark .compare-pair-grid > div > span,
body.gf-dark .entry-meta-grid dt,
body.gf-dark .entry-meta-grid > div > span {
  color: var(--muted) !important;
}

/* badges e chips neutros claros */
body.gf-dark .card-settings-badge,
body.gf-dark .indicator-window-toggle {
  background: var(--surface-strong) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* botões fantasma (ghost) claros → escuros */
body.gf-dark .ghost,
body.gf-dark button.ghost {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: var(--border-strong) !important;
}

body.gf-dark .ghost:hover,
body.gf-dark button.ghost:hover {
  background: var(--surface-strong) !important;
}

/* valores em pílula clara (chips de "R$" em objetivos/comparativo) */
body.gf-dark .compare-pair-card-head strong,
body.gf-dark .goal-card-main strong,
body.gf-dark .goal-card-value strong {
  background: var(--surface-strong) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* casos pontuais em que o "well" que escurecemos tem um filho com regra
   própria e mais específica que ainda lia --primary-strong diretamente —
   como o token volta a ser sempre escuro (ver nota acima), esses filhos
   precisam do próprio override para não virarem texto escuro em fundo
   escuro */
body.gf-dark .alerts-overview-card strong,
body.gf-dark .invoice-section--current .invoice-section-head strong,
body.gf-dark .card-settings-card-head strong,
body.gf-dark .site-footer-copy span,
body.gf-dark .goals-overview-card strong,
body.gf-dark .goal-card-legend-item strong {
  color: var(--text) !important;
}

/* .summary-grid > .metric strong: exclui os tipos com cor semântica
   própria (receita/gasto/saldo e as variantes positivo/negativo aplicadas
   via JS) — sem isso, este catch-all (mais específico, por ter 2
   seletores de elemento) vencia as regras de cor de .metric-income/
   -expense/-balance e .value-positive/-negative em qualquer tema */
body.gf-dark .summary-grid > .metric:not(.metric-income):not(.metric-expense):not(.metric-balance) strong:not(.value-positive):not(.value-negative) {
  color: var(--text) !important;
}

/* garante que as cores semânticas vençam qualquer outro override, mesmo
   com especificidade menor que a de um catch-all */
.summary-grid > .metric.metric-income strong { color: var(--success) !important; }
.summary-grid > .metric.metric-expense strong { color: var(--accent) !important; }
.summary-grid > .metric.metric-balance strong { color: var(--primary) !important; }
.value-positive { color: var(--success) !important; }
.value-negative { color: var(--danger) !important; }

/* bloco "BI consolidado" do Indicadores: dezenas de rótulos/valores usam
   o token diretamente (cabeçalhos de bloco, linhas de métrica) — corrige
   de uma vez; overrides semânticos (positivo/negativo/alerta), por terem
   mais classes, continuam vencendo por especificidade */
body.gf-dark .indicator-panel h3,
body.gf-dark .indicator-panel strong,
body.gf-dark .indicator-panel span.value {
  color: var(--text) !important;
}

/* modal "Comparar despesas x orçamento": colunas e placeholders com
   fundo branco/claro fixo (gradientes), texto herdado claro em cima */
body.gf-dark .compare-column,
body.gf-dark .compare-pairs-panel,
body.gf-dark .compare-pair-card--placeholder,
body.gf-dark .compare-pair-card--budget-only.compare-pair-card--placeholder,
body.gf-dark .compare-pair-card--expense-only.compare-pair-card--placeholder {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
}

body.gf-dark .compare-pair-card--placeholder,
body.gf-dark .compare-pair-placeholder strong,
body.gf-dark .compare-pair-card-head h4,
body.gf-dark .compare-pair-grid strong {
  color: var(--text) !important;
}

/* pílulas "Lançado"/"Orçado" com tinta clara de fundo (12% opacidade) */
body.gf-dark .compare-side-badge--expense {
  background: rgba(45, 212, 191, 0.16) !important;
  color: #5eead4 !important;
}

body.gf-dark .compare-side-badge--budget {
  background: rgba(91, 151, 243, 0.18) !important;
  color: #93c5fd !important;
}

body.gf-dark .compare-side-badge {
  background: var(--surface-strong) !important;
  color: var(--muted) !important;
}

/* cartões de alerta (drawer de alertas): fundo claro fixo, texto herdado
   claro em cima */
body.gf-dark .alerts-group,
body.gf-dark .alerts-group--pending,
body.gf-dark .alerts-group--budget,
body.gf-dark .alert-item,
body.gf-dark .alert-item--warning,
body.gf-dark .alert-item--danger {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
}

body.gf-dark .alerts-group-copy strong,
body.gf-dark .alert-metric {
  color: var(--text) !important;
}

body.gf-dark .alert-badge--warning {
  background: rgba(252, 211, 77, 0.18) !important;
  color: #fcd34d !important;
}

body.gf-dark .alert-badge--danger {
  background: rgba(248, 113, 113, 0.18) !important;
  color: #fca5a5 !important;
}

/* chips de categoria (subtítulo de lançamento/orçamento, pílula de pessoa
   nas cobranças): o brilho colorido suave (--category-shadow) foi pensado
   para repousar sobre branco — no escuro vira um halo/blur nítido demais */
body.gf-dark .entry-subtitle,
body.gf-dark .receivable-statement-copy p {
  box-shadow: none !important;
}

/* campo de observação/nota: fundo claro fixo */
body.gf-dark .entry-note,
body.gf-dark .budget-note {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
}

/* cartão de cobrança: nome da pessoa e valor usam o token diretamente */
body.gf-dark .receivable-statement-copy h3,
body.gf-dark .receivable-main-value strong,
body.gf-dark .receivable-card-amount,
body.gf-dark .receivable-person-summary-head h3 {
  color: var(--text) !important;
}

body.gf-dark .receivable-card-amount--negative,
body.gf-dark .receivable-main-value .receivable-card-amount--negative {
  color: #fbbf24 !important;
}

/* legenda do BI por categoria: cada preset tem uma opacidade de fundo
   própria (ajustada para branco) — algumas ficam bem mais opacas que
   outras, criando um efeito "manchado" e inconsistente no escuro. Um
   fundo uniforme resolve; o identificador de cor continua na bolinha. */
body.gf-dark .summary-legend-item,
body.gf-dark .summary-category-item {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}

body.gf-dark .summary-legend-dot {
  box-shadow: 0 0 0 4px var(--surface-strong) !important;
}

/* badges "Dinheiro"/"Pendente": tom fixo (--tone-pending), não segue tema */
body.gf-dark .badge.status-pendente,
body.gf-dark .badge.status-planejado,
body.gf-dark .badge.status-aconfirmar,
body.gf-dark .badge.status-a-confirmar {
  background: rgba(91, 151, 243, 0.18) !important;
  color: #93c5fd !important;
}

body.gf-dark .badge.status-atrasado {
  background: rgba(248, 113, 113, 0.18) !important;
  color: #fca5a5 !important;
}

body.gf-dark .badge.status-pago,
body.gf-dark .badge.status-recebido,
body.gf-dark .badge.type-income {
  background: rgba(52, 211, 153, 0.16) !important;
  color: #6ee7b7 !important;
}

body.gf-dark .badge.payment-dinheiro,
body.gf-dark .badge.budget-chip,
body.gf-dark .badge.budget-linked,
body.gf-dark .badge.budget-active {
  background: rgba(45, 212, 191, 0.16) !important;
  color: #5eead4 !important;
}

/* título/valor dos cards de lançamento e orçamento usam o token direto */
body.gf-dark .entry-card .entry-title,
body.gf-dark .entry-card .entry-main-value strong,
body.gf-dark .budget-card .entry-title,
body.gf-dark .budget-card .entry-main-value strong {
  color: var(--text) !important;
}

/* pílulas de prioridade/situação com tinta clara de fundo (12% opacidade):
   sobre o card agora escuro, o texto escuro original fica ilegível */
body.gf-dark .goal-card-priority--on_track {
  background: rgba(52, 211, 153, 0.16) !important;
  border-color: rgba(52, 211, 153, 0.3) !important;
  color: #6ee7b7 !important;
}

body.gf-dark .goal-card-priority--overdue {
  background: rgba(248, 113, 113, 0.16) !important;
  border-color: rgba(248, 113, 113, 0.3) !important;
  color: #fca5a5 !important;
}

body.gf-dark .goal-card-priority--completed {
  background: rgba(91, 151, 243, 0.18) !important;
  border-color: rgba(91, 151, 243, 0.32) !important;
  color: #93c5fd !important;
}

body.gf-dark .goal-card-priority--paused {
  background: rgba(151, 162, 184, 0.16) !important;
  border-color: rgba(151, 162, 184, 0.28) !important;
  color: var(--muted) !important;
}

/* gradientes/superfícies claras fixas (background-image, não pego pelas
   regras de background-color acima) */
body.gf-dark .alerts-topbar {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface) 72%, transparent 100%) !important;
}

body.gf-dark .receivable-modal-guide-card {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
}

body.gf-dark .receivable-modal-guide-card strong {
  color: var(--text) !important;
}

body.gf-dark .receivable-modal-guide-card p {
  color: var(--muted) !important;
}

body.gf-dark .budget-recurring-field {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
}

body.gf-dark .budget-recurring-field strong {
  color: var(--text) !important;
}

/* preserva as cores semânticas nos wells escuros (tons vivos p/ contraste) */
body.gf-dark .value-positive,
body.gf-dark .indicator-row--positive .indicator-row-value,
body.gf-dark .indicator-kpi--positive strong { color: var(--success) !important; }
body.gf-dark .value-negative,
body.gf-dark .indicator-row--negative .indicator-row-value,
body.gf-dark .indicator-kpi--negative strong { color: var(--danger) !important; }
body.gf-dark .indicator-kpi--warning strong { color: var(--accent) !important; }
body.gf-dark .indicator-row-value { color: var(--text) !important; }
body.gf-dark .indicator-row--positive .indicator-row-value { color: var(--success) !important; }
body.gf-dark .indicator-row--negative .indicator-row-value { color: var(--danger) !important; }

/* rodapé claro → escuro */
body.gf-dark .site-footer-copy,
body.gf-dark .site-footer {
  background: var(--surface-2) !important;
  color: var(--muted) !important;
  border-color: var(--border) !important;
}

/* todo input/select/textarea escuro (a base pinta alguns de branco fixo) */
body.gf-dark input,
body.gf-dark select,
body.gf-dark textarea {
  background: var(--surface-strong) !important;
  color: var(--text) !important;
  border-color: var(--border-strong) !important;
}

body.gf-dark input::placeholder,
body.gf-dark textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 80%, transparent);
}

/* valores verdes/vermelhos escuros nos cards de resumo (metas/indicadores) */
body.gf-dark .goals-overview-card .value-positive,
body.gf-dark .indicators-overview-card .value-positive,
body.gf-dark .goals-overview-card strong[class*="positive"],
body.gf-dark .indicators-overview-card strong { color: var(--text) !important; }
body.gf-dark .goals-overview-card .value-positive,
body.gf-dark .indicators-overview-card .value-positive { color: var(--success) !important; }
body.gf-dark .goals-overview-card .value-negative,
body.gf-dark .indicators-overview-card .value-negative { color: var(--danger) !important; }

html {
  background: var(--bg);
}

body,
body.is-authenticated {
  background: var(--bg);
  color: var(--text);
  letter-spacing: -0.004em;
}

.ambient {
  display: none;
}

/* ------------------------------------------------------------------ tipos */

h1, h2, h3 {
  letter-spacing: -0.024em;
  text-wrap: balance;
}

.eyebrow {
  letter-spacing: 0.14em;
  font-size: 0.66rem;
  color: var(--muted);
}

strong, dd, .receivable-card-amount {
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ cards */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  backdrop-filter: none;
}

/* ------------------------------------------------------------- login gate */

.auth-gate {
  background:
    radial-gradient(circle at 82% -20%, rgba(29, 78, 216, 0.10), transparent 46%),
    var(--bg);
}

.auth-card {
  border-top: 3px solid var(--primary);
}

/* =================================================================== FRAME
   Topbar de vidro (injetada pelo theme-v322.js)
   ========================================================================= */

.gf-topbar {
  position: sticky;
  top: 0;
  z-index: 950;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--topbar-h);
  padding: 0.55rem 0.25rem;
  margin-bottom: 0.9rem;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border-bottom: 1px solid var(--border);
}

.gf-topbar-title {
  display: grid;
  gap: 0.05rem;
  min-width: 0;
  margin-right: auto;
}

.gf-topbar-title .gf-crumb {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.gf-topbar-title strong {
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.024em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* seletor de mês compacto: ‹ Julho 2026 › + Hoje */
.gf-month {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
}

.gf-month.gf-month--off {
  visibility: hidden;
}

.gf-month-btn,
.gf-month-today {
  border: 0;
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  color: var(--text);
}

.gf-month-btn {
  width: 34px;
  height: 34px;
  position: relative;
}

.gf-month-btn::before {
  content: "";
  position: absolute;
  inset: 8px;
  background: currentColor;
  -webkit-mask: var(--gf-ic) center / contain no-repeat;
  mask: var(--gf-ic) center / contain no-repeat;
}

.gf-month-btn[data-dir="-1"] { --gf-ic: var(--icon-chevron-left); }
.gf-month-btn[data-dir="1"] { --gf-ic: var(--icon-chevron-right); }

.gf-month-btn:hover,
.gf-month-today:hover {
  background: var(--surface-2);
}

.gf-month-label {
  border: 0;
  background: transparent;
  min-width: 132px;
  text-align: center;
  font-weight: 700;
  font-size: 0.94rem;
  letter-spacing: -0.01em;
  padding: 0.35rem 0.3rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  border-radius: 999px;
}

.gf-month-label:hover {
  background: var(--surface-2);
}

.gf-monthpicker-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1320;
  background: rgba(14, 21, 38, 0.5);
  backdrop-filter: blur(5px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.gf-monthpicker-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1330;
  width: min(360px, calc(100vw - 2rem));
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 40px 90px -30px rgba(8, 13, 25, 0.55);
  transform: translate(-50%, -48%) scale(0.98);
  opacity: 0;
  pointer-events: none;
  transition: transform 220ms cubic-bezier(0.32, 0.72, 0.22, 1), opacity 180ms ease;
}

body.gf-monthpicker-open .gf-monthpicker-backdrop {
  opacity: 1;
  pointer-events: auto;
}

body.gf-monthpicker-open .gf-monthpicker-modal {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.gf-monthpicker-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.gf-monthpicker-head strong {
  min-width: 4.5rem;
  text-align: center;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

.gf-monthpicker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}

/* .hero-month-button nasceu para o card escuro dos "Atalhos do ano" —
   aqui, dentro do modal (fundo var(--surface), claro ou escuro conforme o
   tema), precisa de cores próprias para o texto não sumir no claro. */
.gf-monthpicker-grid .hero-month-button {
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--border);
}

.gf-monthpicker-grid .hero-month-button small {
  color: var(--muted);
}

.gf-monthpicker-grid .hero-month-button:not(.active):hover {
  background: var(--border);
}

.gf-monthpicker-grid .hero-month-button.active {
  background: var(--primary-strong);
  border-color: var(--primary-strong);
  color: #ffffff;
}

.gf-monthpicker-grid .hero-month-button.active small {
  color: rgba(255, 255, 255, 0.74);
}

@media (prefers-reduced-motion: reduce) {
  .gf-monthpicker-modal,
  .gf-monthpicker-backdrop {
    transition: none;
  }
}

.gf-month-today {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.42rem 0.7rem;
}

.gf-icon-btn {
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  position: relative;
  cursor: pointer;
  color: var(--muted);
}

.gf-icon-btn::before {
  content: "";
  position: absolute;
  inset: 9px;
  background: currentColor;
  -webkit-mask: var(--gf-ic) center / contain no-repeat;
  mask: var(--gf-ic) center / contain no-repeat;
}

.gf-icon-btn:hover {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
}

.gf-logout { --gf-ic: var(--icon-logout); }
.gf-bell { --gf-ic: var(--icon-bell); }
.gf-actions-trigger { --gf-ic: var(--icon-zap); }
.gf-theme-toggle { --gf-ic: var(--icon-moon); }
body.gf-dark .gf-theme-toggle { --gf-ic: var(--icon-sun); }

.gf-theme-toggle:hover {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
}

/* atalho de perfil, só existe no mobile: no desktop a sidebar (com o
   cartão de perfil) já fica sempre visível, então o botão é redundante */
.gf-profile-trigger { --gf-ic: var(--icon-user); }

@media (min-width: 1100px) {
  .gf-profile-trigger {
    display: none !important;
  }
}

.gf-bell:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

.gf-actions-trigger:hover {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
}

/* badge do sininho — exclamação vermelha quando há alertas no mês */
.gf-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--danger);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--surface);
}

.gf-badge.gf-badge--off {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .gf-badge:not(.gf-badge--off) {
    animation: gf-badge-pulse 2.4s ease-in-out infinite;
  }

  @keyframes gf-badge-pulse {
    0%, 100% { transform: scale(1); }
    12% { transform: scale(1.22); }
    24% { transform: scale(1); }
  }
}

.gf-bell--alerting {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
}

/* ===================================================== PAINEL DE AÇÕES
   "Ações e inteligência" vira um módulo próprio em slide-over
   ========================================================================= */

.gf-actions-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1290;
  background: rgba(14, 21, 38, 0.38);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.gf-actions-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1300;
  width: min(400px, 100vw);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem 1.15rem 1.4rem;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -28px 0 64px rgba(15, 23, 42, 0.22);
  transform: translateX(102%);
  transition: transform 220ms cubic-bezier(0.32, 0.72, 0.22, 1);
  overflow-y: auto;
}

body.gf-actions-open .gf-actions-backdrop {
  opacity: 1;
  pointer-events: auto;
}

body.gf-actions-open .gf-actions-panel {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .gf-actions-panel,
  .gf-actions-backdrop {
    transition: none;
  }
}

.gf-actions-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.gf-actions-head h2 {
  margin: 0.1rem 0 0;
  font-size: 1.14rem;
}

.gf-actions-close {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  position: relative;
  cursor: pointer;
  color: var(--muted);
}

.gf-actions-close::before {
  content: "";
  position: absolute;
  inset: 8px;
  background: currentColor;
  -webkit-mask: var(--icon-close) center / contain no-repeat;
  mask: var(--icon-close) center / contain no-repeat;
}

.gf-actions-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

/* o grupo de botões original migra para cá e vira uma lista de linhas */
.gf-actions-panel .action-group {
  display: grid;
  gap: 0.45rem;
}

.gf-actions-panel .action-group button {
  width: 100%;
  text-align: left;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  font-size: 0.92rem;
  box-shadow: none;
}

.gf-actions-panel .action-group button:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  background: color-mix(in srgb, var(--primary) 5%, var(--surface));
}

/* a linha "Ações e inteligência" sai do painel principal — e com ela vai
   o único conteúdo visível do .toolbar.card (o .budget-panel ali dentro
   já é sempre .hidden), então o card inteiro fica vazio; melhor escondê-lo
   por completo do que deixar essa faixa em branco entre os cartões */
.toolbar-row--executive,
.toolbar.card {
  display: none !important;
}

/* o drawer de configurações fica vazio (conteúdo migrado para o modal
   de sistema); esconde-o */
#settingsDrawer:not(:has(.drawer-stack)) {
  display: none !important;
}

/* ============================================== MODAL: CONFIGURAÇÕES DO
   SISTEMA — aberto ao clicar no cartão de perfil, na base da sidebar.
   Contém o que antes era "Mais opções": limpeza, cartões e backup.
   ========================================================================= */

.page-nav-profile {
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}

.page-nav-profile:hover {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--sidebar-line));
  background: rgba(231, 236, 246, 0.08);
}

.gf-settings-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1320;
  background: rgba(14, 21, 38, 0.5);
  backdrop-filter: blur(5px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.gf-settings-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1330;
  width: min(640px, calc(100vw - 2rem));
  max-height: calc(100vh - 3rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.35rem 1.35rem 1.5rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 40px 90px -30px rgba(8, 13, 25, 0.55);
  transform: translate(-50%, -48%) scale(0.98);
  opacity: 0;
  pointer-events: none;
  transition: transform 220ms cubic-bezier(0.32, 0.72, 0.22, 1), opacity 180ms ease;
  overflow: hidden;
}

body.gf-settings-open .gf-settings-backdrop {
  opacity: 1;
  pointer-events: auto;
}

body.gf-settings-open .gf-settings-modal {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .gf-settings-modal,
  .gf-settings-backdrop {
    transition: none;
  }
}

.gf-settings-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex: 0 0 auto;
}

.gf-settings-head h2 {
  margin: 0.1rem 0 0;
  font-size: 1.16rem;
}

.gf-settings-close {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  position: relative;
  cursor: pointer;
  color: var(--muted);
}

.gf-settings-close::before {
  content: "";
  position: absolute;
  inset: 8px;
  background: currentColor;
  -webkit-mask: var(--icon-close) center / contain no-repeat;
  mask: var(--icon-close) center / contain no-repeat;
}

.gf-settings-body {
  flex: 1 1 auto;
  overflow-y: auto;
  display: grid;
  gap: 1rem;
  padding-right: 0.2rem;
}

/* o drawer-stack agora vive no modal: neutraliza o posicionamento de drawer */
.gf-settings-body .drawer-stack {
  display: grid;
  gap: 1rem;
  width: 100%;
}

.gf-settings-body .cleanup-panel,
.gf-settings-body .card-settings-panel,
.gf-settings-body .sync-panel,
.gf-settings-body .backup-panel {
  display: grid;
  gap: 0.75rem;
  padding: 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.backup-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.backup-panel-actions .hidden {
  display: none;
}

#gfBackupStatus {
  font-size: 0.84rem;
}

.gf-settings-body h3 {
  margin: 0;
  font-size: 0.96rem;
}

.gf-settings-body .card-settings-grid {
  grid-template-columns: 1fr;
}

/* inputs (mês, número, texto) têm largura intrínseca — conter no modal */
.gf-settings-body label {
  min-width: 0;
}

.gf-settings-body input,
.gf-settings-body select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

/* dica da sincronização "melhor dia de compra" → "dia de corte" */
.gf-field-hint {
  display: block;
  margin-top: -0.35rem;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--muted);
}

/* ------------------------------------------- drawers do app sobre o frame */
/* BI, alertas e configurações precisam cobrir a topbar (z 950) */

.summary-backdrop,
.alerts-backdrop,
.settings-backdrop {
  z-index: 1305;
}

.summary-drawer,
.alerts-drawer,
.settings-drawer {
  z-index: 1310;
}

.summary-drawer .summary-panel--drawer,
.alerts-drawer .alerts-panel,
.settings-drawer {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  box-shadow: -28px 0 64px rgba(15, 23, 42, 0.25);
}

/* ================================================= SIDEBAR · seção Análise */

.gf-side-section {
  margin-top: 0.9rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--sidebar-line);
  display: grid;
  gap: 2px;
}

.gf-side-section-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sidebar-muted);
  padding: 0 0.75rem 0.35rem;
}

.gf-side-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--sidebar-muted);
  padding: 0.6rem 0.75rem;
  font-weight: 600;
  font-size: 0.86rem;
  text-align: left;
  cursor: pointer;
}

.gf-side-link::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background: currentColor;
  -webkit-mask: var(--gf-ic) center / contain no-repeat;
  mask: var(--gf-ic) center / contain no-repeat;
}

.gf-side-link:hover {
  background: rgba(231, 236, 246, 0.07);
  color: var(--sidebar-text);
}

.gf-side-link[data-icon="chart"] { --gf-ic: var(--icon-indicators); }
.gf-side-link[data-icon="pie"] { --gf-ic: var(--icon-pie); }
.gf-side-link[data-icon="compare"] { --gf-ic: var(--icon-compare); }
.gf-side-link[data-icon="bell"] { --gf-ic: var(--icon-bell); }

/* o seletor de mês nativo e as grades de 12 meses saem de cena:
   o stepper da topbar assume o papel */
.hero-month-board,
.receivables-hero-shortcuts,
.hero-reference-picker {
  display: none !important;
}

/* =================================================================== HERO
   O hero do dashboard saiu de cena: a topbar já diz página, mês e
   resumo. O input #monthFilter continua no DOM (o stepper depende dele).
   ========================================================================= */

.app-page--dashboard > .hero {
  display: none !important;
}

/* heros internos claros, com respiro menor */
.goals-hero,
.receivables-hero,
.indicators-hero {
  padding: 1.15rem 1.35rem;
}

/* cabeçalho de Contas a receber: mesmo padrão do painel principal — sem
   cartão em volta do título, descrição e ações; tudo flutua direto sobre
   o fundo da página, com a régua de ações alinhada à direita */
.receivables-hero.card {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0 0 1.1rem;
}

.receivables-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.receivables-hero .goals-hero-copy {
  flex: 1 1 320px;
}

.receivables-hero-actions {
  margin: 0;
}

@media (max-width: 720px) {
  .receivables-hero-actions {
    width: 100%;
  }
}

/* --------------------------------------------------------------- KPIs */

.summary-grid > .metric {
  /* as variantes da base (.metric-income etc.) têm gradientes com
     especificidade maior — o !important zera todas de uma vez */
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-left: 3px solid var(--border-strong) !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card) !important;
}

.summary-grid > .metric::before,
.summary-grid > .metric::after {
  display: none;
}

.summary-grid > .metric .metric-label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}

.summary-grid > .metric strong {
  letter-spacing: -0.03em;
}

.summary-grid > .metric.metric-income { border-left-color: var(--success) !important; }
.summary-grid > .metric.metric-expense { border-left-color: var(--accent) !important; }
.summary-grid > .metric.metric-balance { border-left-color: var(--primary) !important; }
.summary-grid > .metric.metric-savings.metric-savings-positive { border-left-color: var(--success) !important; }
.summary-grid > .metric.metric-savings.metric-savings-negative { border-left-color: var(--danger) !important; }
.summary-grid > .metric.metric-planned-balance { border-left-color: var(--accent) !important; }

.summary-grid > .metric.metric-income strong { color: var(--success); }
.summary-grid > .metric.metric-expense strong { color: var(--accent); }
.summary-grid > .metric.metric-balance strong { color: var(--primary); }

.value-positive { color: var(--success); }
.value-negative { color: var(--danger); }

/* --------------------------------------------------------------- controles */

button.primary,
.receivable-action--paid {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
  box-shadow: 0 8px 18px -8px rgba(29, 78, 216, 0.45);
}

button.primary:hover,
button.primary:focus-visible,
.receivable-action--paid:hover,
.receivable-action--paid:focus-visible {
  background: var(--primary-soft);
}

input,
select,
textarea {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .card,
  button,
  .page-nav-link,
  .gf-tab {
    transition: background 140ms ease, border-color 140ms ease, box-shadow 180ms ease, color 140ms ease, transform 140ms ease;
  }
}

/* ============================================================== SIDEBAR
   Drawer vira sidebar de app: marca, ícones, rows compactas
   ========================================================================= */

.page-nav-drawer {
  background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-2) 100%);
  border-right: 1px solid var(--sidebar-line);
  box-shadow: 24px 0 56px rgba(8, 13, 25, 0.35);
  color: var(--sidebar-text);
  gap: 0.75rem;
}

/* marca injetada pelo theme-v322.js */
.gf-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.25rem 0.35rem 0.85rem;
  border-bottom: 1px solid var(--sidebar-line);
}

.gf-brand-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #ffffff;
  padding: 5px;
  overflow: hidden;
  box-shadow: 0 10px 22px -10px rgba(29, 78, 216, 0.55);
}

.gf-brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.gf-brand-copy {
  min-width: 0;
  margin-right: auto;
}

.gf-brand strong {
  display: block;
  color: var(--sidebar-text);
  font-size: 0.95rem;
  letter-spacing: -0.015em;
  white-space: nowrap;
}

.gf-brand small {
  color: var(--sidebar-muted);
  font-size: 0.72rem;
  white-space: nowrap;
}

/* botão de recolher/expandir o menu */
.gf-collapse {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border: 1px solid var(--sidebar-line);
  border-radius: 8px;
  background: rgba(231, 236, 246, 0.05);
  position: relative;
  cursor: pointer;
  color: var(--sidebar-muted);
}

.gf-collapse::before {
  content: "";
  position: absolute;
  inset: 6px;
  background: currentColor;
  -webkit-mask: var(--icon-chevron-left) center / contain no-repeat;
  mask: var(--icon-chevron-left) center / contain no-repeat;
}

.gf-collapse:hover {
  color: var(--sidebar-text);
  background: rgba(231, 236, 246, 0.1);
}

body.gf-side-collapsed .gf-collapse::before {
  -webkit-mask-image: var(--icon-chevron-right);
  mask-image: var(--icon-chevron-right);
}

/* o cabeçalho textual antigo do drawer sai — a marca assume */
.page-nav-head > div {
  display: none;
}

.page-nav-head {
  display: flex;
  justify-content: flex-end;
}

.page-nav-links {
  display: grid;
  gap: 2px;
}

.page-nav-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  box-shadow: none;
  color: var(--sidebar-muted);
  padding: 0.66rem 0.75rem;
}

.page-nav-link small {
  display: none;
}

/* ícone no lugar do trilho decorativo antigo */
.page-nav-link::before {
  content: "";
  position: static;
  inset: auto;
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  border-radius: 0;
  opacity: 1;
  background: currentColor;
  -webkit-mask: var(--gf-ic, var(--icon-dashboard)) center / contain no-repeat;
  mask: var(--gf-ic, var(--icon-dashboard)) center / contain no-repeat;
}

#goDashboardPage { --gf-ic: var(--icon-dashboard); }
#goGoalsPage { --gf-ic: var(--icon-goals); }
#goReceivablesPage { --gf-ic: var(--icon-receivables); }
#goIndicatorsPage { --gf-ic: var(--icon-indicators); }
#goAnalyticsPage { --gf-ic: var(--icon-pie); }
#goInsightsPage { --gf-ic: var(--icon-insight); }
#goActivityLogPage { --gf-ic: var(--icon-historico); }
#goBudgetComparePage { --gf-ic: var(--icon-compare); }

.page-nav-link .page-nav-link-label {
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: -0.008em;
  color: inherit;
}

.page-nav-link:hover {
  background: rgba(231, 236, 246, 0.07);
  color: var(--sidebar-text);
}

.page-nav-link.active {
  background: rgba(59, 111, 228, 0.18);
  border-color: rgba(59, 111, 228, 0.38);
  box-shadow: none;
  transform: none;
  color: #ffffff;
}

.page-nav-link.active .page-nav-link-label {
  color: #ffffff;
}

.page-nav-footer {
  margin-top: auto;
}

.page-nav-profile {
  background: rgba(231, 236, 246, 0.05);
  border: 1px solid var(--sidebar-line);
  border-radius: var(--radius-md);
}

.page-nav-profile strong {
  color: var(--sidebar-text);
}

.page-nav-profile .profile-label,
.page-nav-profile small {
  color: var(--sidebar-muted);
}

.page-nav-logout {
  background: rgba(231, 236, 246, 0.06);
  color: var(--sidebar-text);
  border-color: var(--sidebar-line);
}

.drawer-close {
  background: rgba(231, 236, 246, 0.08);
  border: 1px solid var(--sidebar-line);
  color: var(--sidebar-text);
}

/* hambúrguer não existe mais neste design: sidebar no desktop,
   tab bar no mobile */
.page-menu-button {
  display: none !important;
}

/* ------------------------------------------------ desktop: sidebar fixa */

@media (min-width: 1100px) {
  .page-nav-backdrop,
  .drawer-close {
    display: none !important;
  }

  /* sem login não há app frame: a sidebar só existe autenticada */
  body:not(.is-authenticated) .page-nav-drawer,
  body:not(.is-authenticated) .page-nav-drawer.hidden {
    display: none !important;
  }

  .page-nav-drawer,
  .page-nav-drawer.hidden {
    display: flex !important;
    flex-direction: column;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: var(--sidebar-w);
    border-radius: 0;
    padding: 1.15rem 0.85rem 1.1rem;
  }

  .page-nav-head {
    display: none;
  }

  .page-nav-footer {
    margin-top: auto;
  }

  body.page-nav-open {
    overflow: auto;
  }

  .app-shell {
    width: auto;
    margin: 0;
    padding: 0 2rem 2.6rem calc(var(--sidebar-w) + 2rem);
    max-width: none; /* fluido: o painel ocupa toda a largura disponível */
  }

  .gf-tabbar {
    display: none;
  }

  @media (prefers-reduced-motion: no-preference) {
    .page-nav-drawer {
      transition: width 200ms ease;
    }

    .app-shell {
      transition: padding-left 200ms ease;
    }
  }

  /* ------------------------------------------ sidebar recolhida (ícones) */

  body.gf-side-collapsed {
    --sidebar-w: 76px;
  }

  body.gf-side-collapsed .page-nav-drawer {
    padding-inline: 0.6rem;
  }

  body.gf-side-collapsed .gf-brand {
    flex-direction: column;
    gap: 0.55rem;
    padding-inline: 0;
  }

  body.gf-side-collapsed .gf-brand-copy {
    display: none;
  }

  body.gf-side-collapsed .gf-brand-mark {
    width: 38px;
    height: 38px;
  }

  body.gf-side-collapsed .page-nav-link {
    justify-content: center;
    padding-inline: 0;
  }

  body.gf-side-collapsed .page-nav-link .page-nav-link-label {
    display: none;
  }

  body.gf-side-collapsed .gf-side-section-label {
    display: none;
  }

  body.gf-side-collapsed .gf-side-link {
    justify-content: center;
    padding-inline: 0;
  }

  body.gf-side-collapsed .gf-side-link span {
    display: none;
  }

  body.gf-side-collapsed .page-nav-profile {
    display: none !important;
  }

  body.gf-side-collapsed .page-nav-logout {
    font-size: 0;
    padding: 0.6rem 0;
    display: grid;
    place-items: center;
  }

  body.gf-side-collapsed .page-nav-logout::before {
    content: "";
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: var(--icon-logout) center / contain no-repeat;
    mask: var(--icon-logout) center / contain no-repeat;
  }
}

/* ------------------------------------------------- mobile: tab bar de app */

@media (max-width: 1099.98px) {
  .app-shell {
    padding-top: 0;
    padding-bottom: calc(var(--tabbar-h) + 1.6rem + env(safe-area-inset-bottom, 0px));
  }

  .gf-topbar {
    margin-inline: 0;
  }

  /* topbar em duas linhas: título + ícones, depois o stepper inteiro */
  .gf-topbar {
    flex-wrap: wrap;
    row-gap: 0.55rem;
    padding-block: 0.65rem;
  }

  .gf-topbar-title {
    order: 1;
    flex: 1 1 auto;
  }

  .gf-crumb {
    display: none;
  }

  .gf-icon-btn {
    order: 2;
  }

  .gf-month {
    order: 3;
    flex: 1 1 100%;
    justify-content: space-between;
  }

  .gf-month-label {
    min-width: 108px;
    font-size: 0.9rem;
  }

  body:not(.is-authenticated) .gf-tabbar {
    display: none;
  }

  /* a barra de abas fixa (z-index alto pra ficar acima do conteúdo normal)
     ficava por cima de modais e drawers, que têm z-index mais baixo — ela
     precisa sumir enquanto qualquer overlay estiver aberto. */
  body.modal-open .gf-tabbar,
  body.alerts-open .gf-tabbar,
  body.summary-open .gf-tabbar,
  body.settings-open .gf-tabbar,
  body.page-nav-open .gf-tabbar,
  body.gf-actions-open .gf-tabbar {
    display: none;
  }

  /* a régua de busca do quadro de cobranças estourava a viewport móvel */
  .receivables-board-actions {
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
  }

  .workspace-search-field,
  .workspace-search-field input {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .gf-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 980;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    border-top: 1px solid var(--border);
    box-shadow: 0 -12px 32px -20px rgba(15, 23, 42, 0.25);
  }

  .gf-tab {
    display: grid;
    justify-items: center;
    gap: 3px;
    border: 0;
    background: transparent;
    border-radius: var(--radius-sm);
    padding: 6px 2px 5px;
    color: var(--muted);
    cursor: pointer;
  }

  .gf-tab::before {
    content: "";
    width: 21px;
    height: 21px;
    background: currentColor;
    -webkit-mask: var(--gf-ic) center / contain no-repeat;
    mask: var(--gf-ic) center / contain no-repeat;
  }

  .gf-tab span {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.02em;
  }

  .gf-tab.active {
    color: var(--primary);
  }

  .gf-tab[data-icon="dashboard"] { --gf-ic: var(--icon-dashboard); }
  .gf-tab[data-icon="goals"] { --gf-ic: var(--icon-goals); }
  .gf-tab[data-icon="receivables"] { --gf-ic: var(--icon-receivables); }
  .gf-tab[data-icon="indicators"] { --gf-ic: var(--icon-indicators); }
  .gf-tab[data-icon="menu"] { --gf-ic: var(--icon-menu); }
}

/* -------------------------------------------------- faturas e cartões */
/* a base pintava a seção "Faturas do mês" com texto quase branco
   (resquício do tema escuro) — ilegível no fundo claro */

.invoice-section--current .invoice-section-title-row .eyebrow {
  color: var(--muted);
}

.invoice-section--current .invoice-section-head strong {
  color: var(--text);
}

.invoice-section--current .invoice-priority-chip,
.invoice-priority-chip {
  color: var(--primary);
  background: rgba(29, 78, 216, 0.08);
  border: 1px solid rgba(29, 78, 216, 0.18);
}

/* os cards de cartão (Nubank/MC Black) colapsavam em larguras estreitas:
   o nome ficava com largura zero e o chip "Vence" sobrepunha o texto.
   Layout refeito em pilha: marca → vencimento → valor → tags. */

.invoice-card .invoice-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.55rem;
}

.invoice-card .invoice-card-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.invoice-card .invoice-card-brand-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 0.1rem;
}

.invoice-card .invoice-card-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.invoice-card .invoice-card-head-aside {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.3rem 0.6rem;
  margin: 0;
  text-align: left;
}

.invoice-card .invoice-card-due {
  position: static;
}

/* ------------------------------------------ página de cobranças (parity) */
/* o card "Ações" esvazia depois que o CTA migra para a régua do topo */

.receivables-summary-cta {
  display: none !important;
}

/* CTA "Nova conta a receber" agora mora no painel "Cobrança do mês",
   junto da contagem e da busca — perto de onde a lista realmente é */
.receivables-board-actions {
  justify-content: space-between;
}

.receivables-board-actions #openReceivableModal {
  order: -1;
  margin-right: auto;
}

@media (max-width: 640px) {
  .receivables-board-actions #openReceivableModal {
    width: 100%;
  }

  /* .card-head base é nowrap — em telas estreitas o CTA+contagem+busca
     precisa cair para a própria linha, cheio, abaixo do título */
  .receivables-board > .goals-board-head {
    flex-wrap: wrap;
  }

  .receivables-board-actions {
    flex-basis: 100%;
  }
}

/* ------------------------------------------- barra única de filtro/ação */
/* Tudo/Receitas/Despesas + Lançamentos/Orçamento + "Novo…" viviam em três
   blocos empilhados, cada um com sua margem — visual solto e repetitivo.
   Uma barra só: filtros agrupados à esquerda, ação em destaque à direita. */

.gf-workspace-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 1rem 0 1.1rem;
}

.gf-workspace-toolbar .type-filter-row,
.gf-workspace-toolbar .workspace-tabs-row {
  margin: 0;
}

.gf-workspace-toolbar .workspace-create-actions {
  margin: 0 0 0 auto;
}

@media (max-width: 640px) {
  .gf-workspace-toolbar {
    align-items: stretch;
  }

  .gf-workspace-toolbar .workspace-create-actions {
    margin-left: 0;
    width: 100%;
  }

  .gf-workspace-toolbar .workspace-create-actions .launch-button {
    width: 100%;
  }
}

/* botão "Novo Lançamento/Orçamento": gradiente azul-marinho isolado do
   resto da paleta — alinhado ao azul primário usado em todo o app */
.launch-button,
.workspace-create-actions .launch-button,
.workspace-panel:not(.hidden) .launch-button {
  background: linear-gradient(135deg, var(--primary), var(--primary-soft)) !important;
  box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--primary) 55%, transparent) !important;
}

.launch-button:hover,
.workspace-create-actions .launch-button:hover,
.workspace-panel:not(.hidden) .launch-button:hover {
  background: linear-gradient(135deg, var(--primary-soft), var(--primary)) !important;
}

/* --------------------------------------------- segmentados e abas premium */

.segmented,
.workspace-tabs {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  box-shadow: none;
}

.segmented button,
.workspace-tabs button {
  border: 0;
  border-radius: 999px;
  padding: 0.45rem 0.95rem;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.86rem;
  box-shadow: none;
}

.segmented button:hover,
.workspace-tabs button:hover {
  color: var(--text);
  background: var(--surface-2);
}

.segmented button.active,
.workspace-tabs button.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
  box-shadow: 0 6px 14px -6px rgba(29, 78, 216, 0.5);
}

/* ------------------------------------------------------- estados e badges */

.badge {
  border-radius: 7px;
  letter-spacing: 0.02em;
}

.receivable-card--atrasado {
  border-color: rgba(212, 61, 81, 0.35);
  box-shadow: var(--shadow-card);
}

.receivable-card--compensado {
  border-color: rgba(185, 123, 31, 0.4);
  box-shadow: var(--shadow-card);
}

.receivable-card--encontro-efetuado,
.receivable-card--pago {
  opacity: 0.92;
}

/* ---------------------------------------------------------------- rodapé */

.app-shell footer,
.site-footer {
  color: var(--muted);
}

/* ------------------------------------------ painéis de BI colapsáveis */
.indicator-panel-head-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.indicator-panel-chevron {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  cursor: pointer;
  position: relative;
  padding: 0;
}

.indicator-panel-chevron::before {
  content: "";
  position: absolute;
  inset: 8px;
  background: var(--text);
  -webkit-mask: var(--icon-chevron-right) center / contain no-repeat;
  mask: var(--icon-chevron-right) center / contain no-repeat;
  transform: rotate(90deg);
  transition: transform 180ms ease;
}

.indicator-panel--collapsed .indicator-panel-chevron::before {
  transform: rotate(0deg);
}

.indicator-panel-chevron:hover {
  background: var(--border);
}

.indicator-panel--collapsed .indicator-panel-body {
  display: none;
}

.indicator-panel--collapsed .indicator-panel-copy .muted {
  display: none;
}

/* -------------------------------- comparativo vs mês anterior nas KPIs BI */
.indicators-overview-delta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.indicators-overview-delta:empty {
  display: none;
}

.indicators-overview-delta--positive { color: var(--success) !important; }
.indicators-overview-delta--negative { color: var(--danger) !important; }
.indicators-overview-delta--neutral { color: var(--muted) !important; }

/* ---------------------------------------- Análises Financeiras vira modal */
/* #summaryDrawer era um "drawer" que deslizava da direita (várias regras
   antigas em styles.css fixam largura/posição na borda). Aqui sobrescrevemos
   para virar um modal centralizado ocupando ~90% da tela, com fade + leve
   scale em vez de slide — sem tocar na lógica de abrir/fechar (mesma classe
   body.summary-open, mesmos ids). !important porque styles.css tem várias
   regras de largura/posição empatadas em especificidade. */
.summary-drawer {
  position: fixed !important;
  top: 5vh !important;
  right: 5vw !important;
  bottom: 5vh !important;
  left: 5vw !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  border-radius: var(--radius-xl) !important;
  transform: scale(0.97) !important;
  opacity: 0 !important;
  transition: transform 220ms cubic-bezier(0.32, 0.72, 0.22, 1), opacity 200ms ease !important;
}

body.summary-open .summary-drawer {
  transform: scale(1) !important;
  opacity: 1 !important;
}

@media (max-width: 720px) {
  .summary-drawer {
    top: 0.5rem !important;
    right: 0.5rem !important;
    bottom: 0.5rem !important;
    left: 0.5rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .summary-drawer {
    transition: none !important;
  }
}

/* ---------------------------- Despesas x orçamento: barras comparativas */
/* O cabeçalho de duas colunas (Despesas lançadas / Orçamento do mês) não faz
   mais sentido no layout de barra única. */
.compare-pairs-columns {
  display: none !important;
}

.compare-bar {
  display: grid;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--category-accent, var(--border));
  border-radius: var(--radius-md);
  background: var(--surface);
}

.compare-bar-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.compare-bar-dot {
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--category-accent, var(--muted));
}

.compare-bar-title {
  display: grid;
  gap: 0.05rem;
  margin-right: auto;
  min-width: 0;
}

.compare-bar-title strong {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.compare-bar-title small {
  font-size: 0.72rem;
  color: var(--muted);
}

.compare-bar-delta {
  font-size: 0.8rem;
  font-weight: 800;
  white-space: nowrap;
}

.compare-bar-delta--positive { color: var(--success); }
.compare-bar-delta--negative { color: var(--danger); }
.compare-bar-delta--neutral { color: var(--muted); }

.compare-bar-track {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}

.compare-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  background: var(--muted);
  transition: width 260ms cubic-bezier(0.32, 0.72, 0.22, 1);
}

.compare-bar--ok .compare-bar-fill { background: var(--success); }
.compare-bar--near .compare-bar-fill { background: var(--accent); }
.compare-bar--over .compare-bar-fill { background: var(--danger); }
.compare-bar--unplanned .compare-bar-fill {
  background: repeating-linear-gradient(45deg, var(--accent), var(--accent) 6px, color-mix(in srgb, var(--accent) 55%, transparent) 6px, color-mix(in srgb, var(--accent) 55%, transparent) 12px);
}
.compare-bar--unused .compare-bar-fill { background: transparent; }

.compare-bar-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: var(--muted);
}

.compare-bar-foot strong {
  color: var(--text);
  font-weight: 700;
}

.compare-bar-pct {
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.compare-bar-figure--budget {
  text-align: right;
}

.compare-bar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.compare-bar-edit {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}

.compare-bar-edit:hover {
  color: var(--text);
  border-color: var(--category-accent, var(--border));
}

/* ------------------- Despesas x orçamento: modal a ~90% da tela */
.modal-dialog--compare {
  width: 90vw !important;
  max-width: 90vw !important;
  height: 90vh !important;
  max-height: 90vh !important;
}

.compare-modal {
  height: 100%;
  grid-template-rows: auto 1fr;
}

.compare-modal .compare-body {
  overflow: auto;
  min-height: 0;
}

@media (max-width: 720px) {
  .modal-dialog--compare {
    width: 96vw !important;
    max-width: 96vw !important;
    height: 92vh !important;
    max-height: 92vh !important;
  }
}

/* lista expansível: lançamentos que consumiram o orçamento */
.compare-bar-toggle {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}

.compare-bar-toggle:hover {
  color: var(--text);
  border-color: var(--category-accent, var(--border));
}

.compare-bar-toggle[aria-expanded="true"] {
  background: var(--category-accent, var(--surface-2));
  color: #fff;
  border-color: var(--category-accent, var(--border));
}

.compare-bar-entries {
  list-style: none;
  margin: 0.2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}

.compare-bar-entries.hidden {
  display: none;
}

.compare-bar-entry {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 10px);
  background: var(--surface-2);
  padding: 0.45rem 0.7rem;
  cursor: pointer;
  color: var(--text);
}

.compare-bar-entry:hover {
  border-color: var(--category-accent, var(--border));
}

.compare-bar-entry-desc {
  font-weight: 600;
  font-size: 0.82rem;
  margin-right: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.compare-bar-entry-date {
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
}

.compare-bar-entry-value {
  font-weight: 700;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --------------- Análises Financeiras e Despesas x Orçamento viraram páginas */
/* Antes eram drawer/modal (posição fixa, altura travada, backdrop). Agora
   são .app-page como Indicadores: fluem na coluna de conteúdo,
   sem sizing de overlay. As regras antigas de ".summary-drawer"/
   ".modal-dialog--compare" (fixed, 90vw/90vh) ficaram órfãs porque essas
   classes saíram do HTML — não precisam ser removidas, só não se aplicam
   mais a nada. */
.analytics-page,
.budgetcompare-page {
  display: grid;
  gap: 1rem;
}

.analytics-page .summary-panel--drawer {
  height: auto;
  overflow: visible;
  box-shadow: none;
  border-radius: var(--radius-xl);
}

.budgetcompare-page .compare-modal {
  height: auto;
  overflow: visible;
  width: 100%;
  margin: 0;
}

.budgetcompare-page .compare-body {
  padding: 0;
}

.analytics-page,
.budgetcompare-page {
  max-width: 100%;
  min-width: 0;
}

/* Os controles de filtro (dataset, mês, atalhos, período, tipo) eram um
   drawer estreito com grid de 1 coluna alinhada à direita — em página
   larga isso empilhava tudo à direita e forçava scroll horizontal.
   Vira uma barra de ferramentas que quebra linha naturalmente. */
.analytics-page .summary-head-controls {
  display: flex;
  flex-wrap: wrap;
  justify-items: initial;
  align-items: center;
  justify-content: flex-start;
  gap: 0.6rem 0.75rem;
  max-width: 100%;
}

.analytics-page .summary-period-picker {
  width: auto;
  min-width: 190px;
  justify-self: auto;
}

.analytics-page .summary-quick-periods {
  justify-content: flex-start;
}

.analytics-page .segmented {
  flex: 0 0 auto;
}


/* Régua de "Cobrança do mês": os dois botões de ação lado a lado ficavam com
   49px de altura cada, dominando a linha que também tem contagem e busca.
   Compactos, sobra espaço para o que importa ali — a lista. */
.receivables-board-actions #openReceivableModal,
.receivables-board-actions #openChargeCenter {
  order: -1;
  padding: 7px 14px;
  font-size: 0.82rem;
  line-height: 1.3;
  min-height: 0;
  white-space: nowrap;
}

.receivables-board-actions #openReceivableModal {
  margin-right: 6px;
}

@media (max-width: 640px) {
  /* No celular voltam a ser alvos de toque confortáveis: compacto não pode
     virar difícil de acertar com o dedo. */
  .receivables-board-actions #openReceivableModal,
  .receivables-board-actions #openChargeCenter {
    flex: 1 1 auto;
    padding: 10px 12px;
    font-size: 0.86rem;
  }
  .receivables-board-actions #openReceivableModal { margin-right: 0; }
}

.receivables-board-actions #registerBulkPayment {
  order: -1;
  padding: 7px 14px;
  font-size: 0.82rem;
  line-height: 1.3;
  min-height: 0;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .receivables-board-actions #registerBulkPayment {
    flex: 1 1 auto;
    padding: 10px 12px;
    font-size: 0.86rem;
  }
}

/* ============================================================ Indicadores
   Cada painel virou um dashboard fechado: uma pergunta, um gráfico. Os
   KPIs e a tabela de detalhe saíram do card compacto e só aparecem no
   card expandido, que ocupa a largura inteira da grade de 2 colunas.
   O padrão vem do card do software jurídico: badge com ícone, título +
   legenda curta, pílula do tipo de gráfico e botão de expandir. */

.ind-dash {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 14px 15px 12px;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}

/* expandido sai da coluna e toma a linha toda, revelando o detalhe */
.ind-dash--expandido {
  grid-column: 1 / -1;
  border-color: var(--border-strong) !important;
}

.ind-dash-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.ind-dash-badge {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 2px;
  background: var(--surface-ghost);
  color: var(--accent);
}

.ind-dash-badge svg {
  width: 16px;
  height: 16px;
}

.ind-dash-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.ind-dash-copy h3 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

.ind-dash-copy p {
  margin: 1px 0 0;
  font-size: 0.72rem;
  color: var(--muted);
}

.ind-dash-tools {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* pílula do tipo de gráfico: mostra o tipo ATUAL e troca no clique */
.ind-dash-pill {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border) !important;
  border-radius: 2px !important;
  padding: 4px 7px;
  cursor: pointer;
  line-height: 1;
}

.ind-dash-pill:hover {
  color: var(--text);
  border-color: var(--border-strong) !important;
}

.ind-dash-exp {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  line-height: 1;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border) !important;
  border-radius: 2px !important;
  padding: 0;
  cursor: pointer;
}

.ind-dash-exp:hover {
  color: var(--text);
  border-color: var(--border-strong) !important;
}

/* régua de filtro própria do card */
.ind-dash-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
}

.ind-dash-filter label {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.ind-dash-seg {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.ind-dash-seg button {
  font-size: 0.72rem;
  padding: 4px 9px;
  background: transparent;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--muted);
  cursor: pointer;
}

.ind-dash-seg button.active {
  background: var(--surface-2);
  color: var(--text);
  font-weight: 600;
}

.ind-dash-body {
  padding-top: 6px;
}

.ind-dash-empty {
  display: grid;
  place-items: center;
  min-height: 140px;
  text-align: center;
  padding: 0 10px;
}

/* número dentro da fatia da rosca */
.indicator-donut-slice-label {
  font-size: 12px;
  font-weight: 700;
  fill: #ffffff;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.28);
  stroke-width: 2.5px;
  stroke-linejoin: round;
  pointer-events: none;
}

/* leitura em barra dos mesmos dados da rosca */
.ind-dash-bars {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 4px;
}

.ind-dash-bar {
  display: grid;
  grid-template-columns: minmax(64px, 26%) 1fr auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  background: transparent;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 2px 0;
  text-align: left;
  color: inherit;
}

.ind-dash-bar--interactive {
  cursor: pointer;
}

.ind-dash-bar--interactive:hover .ind-dash-bar-label,
.ind-dash-bar--interactive:hover .ind-dash-bar-value {
  color: var(--text);
}

.ind-dash-bar-label {
  font-size: 0.76rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ind-dash-bar-track {
  position: relative;
  display: block;
  height: 14px;
  background: var(--surface-2);
  border-radius: 2px;
  overflow: hidden;
}

.ind-dash-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  border-radius: 2px;
}

.ind-dash-bar-value {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ind-dash-bars-total {
  margin: 4px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--border-soft);
  font-size: 0.72rem;
  color: var(--muted);
  text-align: right;
}

.ind-dash-bars-total strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* detalhe que só existe no card expandido */
.ind-dash-detalhe {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (max-width: 720px) {
  .ind-dash {
    padding: 12px 12px 10px;
  }

  .ind-dash-copy h3 {
    font-size: 0.92rem;
  }

  .ind-dash-bar {
    grid-template-columns: minmax(56px, 32%) 1fr auto;
    gap: 7px;
  }
}

/* régua de filtros do card: pode ter mais de uma dimensão, então quebra
   linha em vez de comprimir os selects até ficarem ilegíveis */
.ind-dash-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-top: 11px;
}

.ind-dash-filters .ind-dash-filter {
  margin-top: 0;
}

.ind-dash-select {
  font-size: 0.76rem;
  padding: 4px 8px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border) !important;
  border-radius: 2px !important;
  max-width: 190px;
}

.ind-dash-select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ===================================================== painel de configuração
   Reorganizado por frequência de uso: cartões, cobrança e notificações no
   alto; sincronização e dados no meio; exclusão em massa recolhida no fim. */

.settings-save-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.settings-feedback {
  color: #16a34a;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.settings-feedback--visivel {
  opacity: 1;
}

.settings-group-label {
  margin: 10px 0 4px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* zona de risco: recolhida, com cor de alerta só na borda e no rótulo */
.settings-danger {
  border: 1px solid rgba(212, 61, 81, 0.35) !important;
  border-radius: 2px;
  background: var(--surface) !important;
  padding: 0;
}

.settings-danger > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
}

.settings-danger > summary::-webkit-details-marker {
  display: none;
}

.settings-danger > summary > span {
  display: flex;
  flex-direction: column;
}

.settings-danger > summary .eyebrow {
  color: #d43d51;
}

.settings-danger > summary::after {
  content: "Mostrar";
  align-self: flex-start;
  margin-top: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #d43d51;
}

.settings-danger[open] > summary::after {
  content: "Esconder";
}

.settings-danger > .cleanup-panel {
  padding: 0 16px 16px;
  border-top: 1px solid rgba(212, 61, 81, 0.2);
  margin-top: 0;
  padding-top: 14px;
}

/* Recolhimento explícito. Não dá para confiar só no <details> nativo: a regra
   ".gf-settings-body .cleanup-panel { display: grid }" vence o ocultamento
   do navegador, e "Excluir tudo" aparecia com a zona fechada. */
.settings-danger:not([open]) > :not(summary) {
  display: none !important;
}


/* ============================================ configurações: navegação lateral
   Uma seção por vez em vez de rolagem longa. Fica por último no arquivo para
   vencer as regras antigas do modal (largura 640px, cartões empilhados, caixa
   em volta de cada bloco) sem precisar editá-las. */

.gf-settings-modal {
  width: min(940px, calc(100vw - 2rem));
  height: min(680px, calc(100vh - 3rem));
  padding: 0;
  gap: 0;
  border-radius: 2px;
}

.gf-settings-head {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  align-items: center;
}

.gf-settings-close {
  border-radius: 2px;
}

.gf-settings-layout {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
}

.gf-settings-nav {
  display: flex;
  flex-direction: column;
  padding: 0.6rem 0;
  border-right: 1px solid var(--border);
  background: var(--surface-2);
  overflow-y: auto;
}

.gf-settings-nav button {
  appearance: none;
  border: 0 !important;
  border-left: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent;
  text-align: left;
  padding: 0.62rem 1.1rem;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  box-shadow: none !important;
}

.gf-settings-nav button:hover {
  color: var(--text);
  background: var(--surface-ghost);
}

.gf-settings-nav button[aria-current="true"] {
  color: var(--text);
  font-weight: 700;
  background: var(--surface);
  border-left-color: #5b7fa6 !important;
}

/* a zona de risco vai para o pé do menu, separada do resto */
.gf-settings-nav .gf-nav-risco {
  margin-top: auto;
  color: #d43d51;
  border-top: 1px solid var(--border) !important;
}

.gf-settings-nav .gf-nav-risco[aria-current="true"] {
  color: #d43d51;
  border-left-color: #d43d51 !important;
}

.gf-settings-body {
  padding: 1.35rem 1.5rem 1.6rem;
  overflow-y: auto;
  min-height: 0;
}

/* esconder precisa vencer os display:grid !important antigos do modal */
.gf-secao-oculta {
  display: none !important;
}

/* com uma seção por vez, a caixa em volta de cada bloco só ocupa espaço */
.gf-settings-body .settings-section {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

.gf-settings-body .settings-danger {
  border: 1px solid rgba(212, 61, 81, 0.35) !important;
  padding: 0 !important;
}

.gf-settings-body h3 {
  font-size: 1.08rem;
}

/* com espaço sobrando, os dois cartões ficam lado a lado */
.gf-settings-body .card-settings-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

/* no celular: a navegação vira abas roláveis no alto */
@media (max-width: 720px) {
  .gf-settings-modal {
    height: calc(100vh - 2rem);
  }

  .gf-settings-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .gf-settings-nav {
    flex-direction: row;
    padding: 0;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    overflow-y: hidden;
  }

  .gf-settings-nav button {
    white-space: nowrap;
    border-left: 0 !important;
    border-bottom: 2px solid transparent !important;
    padding: 0.7rem 0.9rem;
  }

  .gf-settings-nav button[aria-current="true"] {
    border-bottom-color: #5b7fa6 !important;
  }

  .gf-settings-nav .gf-nav-risco {
    margin-top: 0;
    border-top: 0 !important;
  }

  .gf-settings-nav .gf-nav-risco[aria-current="true"] {
    border-bottom-color: #d43d51 !important;
  }

  .gf-settings-body {
    padding: 1rem;
  }

  .gf-settings-body .card-settings-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* a grade do painel esticava a única seção visível até o fim da altura —
   na zona de risco isso virava uma caixa vermelha vazia lá embaixo */
.gf-settings-body .drawer-stack {
  align-content: start;
}