/* ============================================================================
 * REFINAMENTO — Navigation & Overlays (sidebar nav + modal)
 * ============================================================================
 * Carregado DEPOIS de custom.css e 00-tokens-bridge.css. Só ajusta a camada
 * visual dos seletores JÁ existentes no vsx-financeiro (.nav-item,
 * .modal-backdrop, .modal-panel) — nenhuma classe nova, nenhum comportamento
 * novo. Abrir/fechar do modal continua 100% Alpine.js (x-show/x-transition);
 * nada aqui depende de overlays.js do design system.
 *
 * Referências (só leitura, nomes NÃO copiados):
 *   vsx-design-system/packages/vanilla/css/components/navigation.css → .vsx-nav-item:focus-visible
 *   vsx-design-system/packages/vanilla/css/components/overlays.css   → .vsx-modal-overlay (scrim)
 * ============================================================================ */

/* ── Sidebar Nav: foco de teclado ──────────────────────────────────────────
 * custom.css hoje só trata :hover/.active/.disabled em .nav-item — não há
 * estado de foco visível para navegação via Tab. Mesmo padrão de
 * .vsx-nav-item:focus-visible do design system (outline 2px + offset 2px
 * com --focus-ring, contraste maior que --accent sobre os fundos escuros). */
.nav-item:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ── Modal: scrim mais consistente com o resto do sistema ─────────────────
 * Backdrop atual só declara o blur, sem cor de scrim própria (herda do
 * elemento pai via Alpine/Tailwind). Junta color-mix sobre --bg ao blur já
 * existente, alinhando com a técnica de .vsx-modal-overlay (color-mix sobre
 * --color-black) sem alterar layout/posicionamento/z-index. */
.modal-backdrop {
  background: color-mix(in oklch, var(--bg) 70%, transparent);
}