/* ============================================================================
 * REFINAMENTOS — KPI Cards, Tabelas, Empty State
 * ============================================================================
 * Carregado depois de custom.css + 00-tokens-bridge.css. Usa só seletores
 * já existentes no vsx-financeiro (.kpi-card, .kpi-value, .kpi-strip-value,
 * .table-responsive, .data-table, .td-mono, .empty-state) — nenhuma classe
 * nova, nenhum .card/.stat-card/.vsx-*. Refina tipografia numérica e dá
 * indicação visual de scroll; não altera padding/grid/width/height.
 * ============================================================================ */

/* ── KPI Cards: alinhamento numérico ────────────────────────────────────────
   font-variant-numeric: tabular-nums padroniza a largura dos dígitos (design
   system aplica isso em TODO valor de KPI — data-display.css §STATCARD/KPI,
   .stat-card__value) — sem isso, valores que trocam de "1.234" pra "8.901"
   "dançam" de largura porque dígitos proporcionais têm métricas diferentes.
   .kpi-strip-value é o mesmo tipo de conteúdo (valor numérico de KPI, só que
   na variante compacta em faixa), então recebe o mesmo tratamento. */
.kpi-value,
.kpi-strip-value {
  font-variant-numeric: tabular-nums;
}

/* ── Tabelas: célula numérica (.td-mono) ────────────────────────────────────
   Mesma lógica acima aplicada à coluna monoespaçada de valores — é a classe
   que o financeiro já usa para números em tabela (equivalente ao .is-numeric
   do design system, que não existe aqui). Fontes monoespaçadas já alinham
   dígitos por natureza, mas tabular-nums garante o mesmo comportamento caso
   o fallback de fontes monoespaçadas da pilha não resolva em algum sistema. */
.td-mono {
  font-variant-numeric: tabular-nums;
}

/* ── Tabelas: indicador visual de scroll horizontal (.table-responsive) ────
   Técnica "scroll shadow" 100% CSS do design system (data-display.css
   §TABLE, comentário do .table-responsive): duas camadas sólidas em
   --bg-card cobrem o conteúdo nas bordas e ROLAM JUNTO com ele
   (background-attachment: local) — por isso não aparecem quando não há mais
   conteúdo pra rolar naquele lado. Duas sombras radiais translúcidas ficam
   FIXAS no wrapper (background-attachment: scroll) por trás dessas camadas,
   e só ficam visíveis na borda onde ainda há conteúdo oculto. Não muda
   overflow-x nem nenhuma propriedade estrutural existente — só adiciona
   background em cima do que já está declarado em custom.css. */
.table-responsive {
  background:
    linear-gradient(to right, var(--bg-card) 30%, transparent),
    linear-gradient(to left, var(--bg-card) 30%, transparent) 100% 0,
    radial-gradient(farthest-side at 0 50%, color-mix(in oklch, var(--color-black) 35%, transparent), transparent),
    radial-gradient(farthest-side at 100% 50%, color-mix(in oklch, var(--color-black) 35%, transparent), transparent) 100% 0;
  background-repeat: no-repeat;
  background-color: var(--bg-card);
  background-size: var(--space-9) 100%, var(--space-9) 100%, var(--space-3-5) 100%, var(--space-3-5) 100%;
  background-attachment: local, local, scroll, scroll;
}