/* Explorador de dados (tela "Dados"): filtro dedicado que aparece só na
   tabela notas_fiscais (ver trocarTabela() em dados.js), com campos de
   remetente/destinatário/número/período + botão de baixar XMLs em lote. */

/* Abas de tabela (Empresas/Fornecedores/Clientes/Notas Fiscais/Produtos/
   Itens da Nota, geradas em carregarTabelas() de dados.js) - usam o .btn
   padrão do sistema (cápsula), esta regra só cuida do estado ATIVO: mesmo
   acento azul já usado no chip de filtro (.dados-chip-empresa, mais abaixo
   neste arquivo) e no link ativo da sidebar (.side-link.active) - antes
   era verde (bg-emerald-500) solto via Tailwind, sem nenhuma relação com
   o resto do design system (pedido do usuário 2026-08-07: "por que os
   botões que representam ações não são azuis?" - aqui é estado
   selecionado, não uma ação, mas o mesmo acento fecha a inconsistência
   visual entre as telas). */
.dados-tab.active {
  background: var(--accent-soft);
  border-color: rgba(47, 107, 255, 0.35);
  color: var(--accent);
}
.dados-tab.active:hover { background: var(--accent-soft); }

/* .main é flex-column + height:100vh + overflow:hidden por padrão.
   .dados-panel ocupa o espaço restante (flex:1) e é ELE MESMO uma coluna
   flex: rodapé/paginação fica com altura fixa, só .dados-tabela-scroll
   cresce e rola - assim a paginação nunca sai da tela, e rolar só afeta a
   lista de registros.

   Reformulado 2026-08-09 (pedido do usuário, com print): antes tudo (título
   + filtros sempre visíveis + tabela + rodapé) ficava dentro de UM único
   card (.panel) com padding - removido (só decoração a mais, sem função).
   O painel de filtro lateral que veio depois foi REMOVIDO 2026-08-10,
   substituído pelo filtro por coluna (ícone no cabeçalho de cada th, ver
   .dados-th-filtro-* mais abaixo e abrirFiltroColuna() em dados.js) -
   estilo Excel de verdade, direto na coluna, em vez de um painel à parte. */
.dados-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* enquanto o glow "pra fora" da exportação está ativo (ver
   static/js/dados.js + components/glow-el.css), libera o overflow - senão
   o próprio overflow:hidden acima corta o brilho difuso, que por definição
   precisa "vazar" pra fora da caixa do painel pra aparecer (pedido do
   usuário 2026-08-06: "só tem a linha e não tem brilho difuso"). Seguro
   soltar aqui - quem garante o scroll é .dados-tabela-scroll (overflow-y
   próprio), o overflow:hidden do .dados-panel é só uma trava defensiva de
   layout, não é o que faz a rolagem funcionar. */
.dados-panel.glow-el--fora {
  overflow: visible;
}

.dados-panel-footer {
  flex-shrink: 0;
}

/* área rolável da tabela ganha borda/raio próprios - antes vinham "de
   graça" do .panel que envolvia a tela inteira (removido, ver comentário
   acima em .dados-panel). */
.dados-tabela-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

/* cabeçalho da tabela acompanha a rolagem (sticky) - precisa de fundo
   sólido pra não deixar as linhas de baixo "aparecerem por trás" dele.
   Padding reduzido junto (ver tbody td abaixo) pra manter cabeçalho e
   linhas com a mesma densidade. */
.dados-tabela-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  /* "material padrão" (thin), não vidro - Fase 3 do plano Apple-style
     (2026-08-07): --content-thin-bg é opaco o bastante pra manter o texto
     do cabeçalho legível (era var(--bg-inset) 100% sólido antes), só um
     blur discreto sugere as linhas passando por baixo em vez de escondê-
     las de propósito. Backdrop-filter aqui é seguro mesmo com sticky. */
  background: var(--content-thin-bg);
  backdrop-filter: blur(var(--content-thin-blur));
  -webkit-backdrop-filter: blur(var(--content-thin-blur));
  padding: 7px 14px;
}
/* "scroll edge effect" (pedido do usuário 2026-08-06, baseado no
   protótipo Apple-glass): em vez do cabeçalho sticky cortar as linhas de
   baixo com uma borda seca, um degradê suave faz a transição - mesma
   tecnica usada em toolbar fixa sobre lista rolável no macOS/iOS.
   Era box-shadow no próprio th (2026-08-06/07), mas com border-collapse:
   separate cada TH tem sua própria caixa - o blur do box-shadow vaza
   também pelas laterais de CADA célula, não só embaixo, e isso aparecia
   como linhas verticais dividindo as colunas (reportado 2026-08-07,
   print da tela). Um ::after com gradiente não tem esse "vazamento"
   lateral (gradiente não borra as bordas esquerda/direita), e como as
   células ficam coladas (border-spacing:0) os pedaços de cada th se
   encaixam sem costura - mesmo efeito visual, sem o artefato. */
.dados-tabela-scroll thead th::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 6px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.18), transparent);
  pointer-events: none;
}

/* Linhas mais compactas SÓ nesta tabela (pedido explicito: caber pelo
   menos 10 notas na tela sem rolar) - sobrescreve o padding/fonte padrão
   de .tabela-moderna (components/table.css) apenas aqui, sem afetar as
   outras telas que reaproveitam esse mesmo componente (Execuções,
   Pagamentos, Certificados, Exportações, admin de tenants). */
.dados-tabela-scroll tbody td {
  padding: 5px 14px;
  font-size: 12.5px;
  line-height: 1.3;
}

/* coluna de ações (ver/baixar XML, DANFE) travada na direita - pedido do
   usuario 2026-08-05 ("tem como ficar travada no final"), ja que a tabela
   de notas_fiscais tem muitas colunas e rola bastante na horizontal.
   Precisa de fundo solido (senão as colunas de baixo aparecem por trás ao
   rolar) e z-index maior que o das linhas normais. No th, a regra generica
   ".dados-tabela-scroll thead th" (acima) ja da position:sticky + top:0 -
   aqui so' soma o right:0 (mesmo elemento fica preso nos dois eixos ao
   mesmo tempo, tipo "canto"). */
/* Revertido 2026-08-07 (pedido do usuário: "retorne pro modo de antes de
   eu pedir pra deixar um tom mais escuro") - chegou a ter um tom 6% mais
   escuro que o resto da tabela por um tempo (color-mix em cima de
   --bg-card), mas o usuário achou melhor sem esse destaque: agora usa
   exatamente a mesma cor de fundo do resto da tabela (--bg-card puro,
   sem mix), só continua SOLIDO/opaco (não o --content-thin-bg
   translúcido que os outros cabeçalhos usam) porque isso é o que
   resolveu um bug separado - dado das linhas de baixo "vazando" através
   do cabeçalho ao rolar (ver comentário na regra .dados-th-acoes). */
/* Largura FIXA e igual em th/td de proposito - antes o th vinha com w-14
   (56px, via Tailwind em dados.js) mas o td real precisa de mais espaço
   pra caber os 3 botoes de icone; num <table> comum (table-layout:auto) o
   navegador podia calcular larguras de coluna ligeiramente diferentes
   entre header/corpo, e como td-acoes e' sticky + nao corta overflow, o
   conteudo mais largo "vazava" por cima da coluna anterior (CLIENTE_NOME)
   ao rolar a tabela na horizontal (reportado pelo usuario 2026-08-07,
   print: "essa coluna de ações... quando rola ele ta cobrindo o nome").
   118px cabe a capsula de 3 botoes (.dados-acoes-pill) com folga. */
.dados-th-acoes,
.dados-td-acoes {
  width: 118px;
  min-width: 118px;
  max-width: 118px;
}
/* CAUSA RAIZ encontrada 2026-08-07 (o motivo das 2 tentativas anteriores
   não terem resolvido nada, apesar de parecerem certas): ".dados-th-acoes"
   sozinho tem especificidade (0,1,0) - MENOR que a regra genérica
   ".dados-tabela-scroll thead th" (0,1,2), que já define background,
   backdrop-filter E teria prioridade sobre um z-index daqui também se a
   gente tivesse tentado. Numa colisão de especificidade o navegador usa a
   regra MAIS específica pra cada propriedade, não a que vem depois no
   arquivo - então "background: var(--bg-card)" e "backdrop-filter: none"
   de ".dados-th-acoes" nunca chegavam a valer; o fundo translúcido +
   blur da regra genérica continuava lá, deixando o conteúdo das linhas
   "vazar" por trás do título ao rolar (pedido do usuário: "o título tem
   que ficar estático... continua quando eu rolo a coluna de ações
   passando por cima do titulo"). Corrigido encadeando o seletor
   (".dados-tabela-scroll thead th.dados-th-acoes", especificidade 0,2,2)
   pra garantir que ESTAS regras sempre ganhem. */
.dados-tabela-scroll thead th.dados-th-acoes {
  right: 0;
  z-index: 2;
  background: var(--bg-card);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.dados-td-acoes {
  position: sticky;
  right: 0;
  z-index: 1;
  overflow: hidden;
  background: var(--bg-card);
  border-left: 1px solid var(--border-soft);
}
/* Mesmo tom que .tabela-moderna tbody tr:hover usa no resto da linha
   (components/table.css), só que OPACO em vez do --accent-soft original
   (rgba translúcido). Essa célula é sticky (right:0) e depende de fundo
   100% sólido pra "tapar" o conteúdo das colunas que passaram por baixo
   dela durante o scroll horizontal - com --accent-soft (alpha ~0.14) esse
   texto voltava a aparecer "fantasma" por trás dos ícones no hover
   (reportado pelo usuário 2026-08-10, print - e intermitente entre linhas
   porque zebra/hover mudam a cor de fundo por trás em cada uma). color-mix
   gera visualmente o mesmo tom de --accent-soft sobre --bg-card, mas como
   cor sólida (sem alpha), sem depender do que está embaixo - ver
   --accent-soft-solid em tokens.css (já theme-aware, dark/light). */
.tabela-moderna tbody tr:hover .dados-td-acoes {
  background: var(--accent-soft-solid);
}

/* Cápsula que agrupa os botões de ação (ver/baixar XML, DANFE) - mesmo
   padrão visual do controle segmentado de Automações (.autom-view-switch
   em pages/automacoes.css: pílula com padding + border-radius-full), só
   que sem "thumb" (não é um toggle, são 3 ações independentes) e com fundo
   TRANSPARENTE (pedido do usuário 2026-08-07: "deixe a cor igual do
   restante da tabela, o fundo") - deixa a própria cor da célula
   (.dados-td-acoes, mesma cor do resto da tabela desde que o tom mais
   escuro foi revertido) aparecer por trás, em vez de um fundo branco/claro
   destacado que parecia um
   cartão flutuante separado da tabela. As cores de cada ícone continuam
   diferentes (azul/verde/laranja - pedido explícito do usuário: "mantenha
   as cores diferentes"), só o agrupamento em si que ganhou a forma de
   cápsula. */
.dados-acoes-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-soft);
  background: transparent;
}

/* cabeçalho clicável pra ordenar (ver ordenarPorColuna() no JS) */
.dados-th-ordenavel {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.dados-th-ordenavel:hover { color: var(--text); }
.dados-th-ordenavel svg {
  display: inline-block;
  vertical-align: middle;
  margin-left: 4px;
  color: var(--blue-400, #4E7DFF);
}

/* ---------------- filtro por coluna, estilo Excel ----------------
   Substitui 2026-08-10 o painel de filtro lateral (que por sua vez tinha
   substituído os campos de filtro "sempre visíveis" do topo, ver histórico
   nos commits) - pedido do usuário: "aquele filtro que conversamos
   diretamente nas colunas da tabela". Cada cabeçalho ordenável ganha uma
   setinha discreta ao lado do nome; clicar abre um popover pequeno e
   flutuante (ver abrirFiltroColuna() em dados.js) com busca + lista de
   valores distintos daquela coluna (endpoint /api/dados/{tabela}/valores/
   {coluna}) + checkboxes - dá pra filtrar várias colunas ao mesmo tempo
   (cada uma guarda seu próprio conjunto de valores marcados, combinadas
   com E lógico no backend).

   Reajustado 2026-08-10 (print do usuário: "horrível... quero uma seta
   discreta e pequena") - duas mudanças: 1) ícone trocado de funil pra
   chevron-down, bem menor/discreto; 2) o popover deixou de tentar se
   ancorar via CSS position:absolute dentro do <th> (que é uma célula de
   tabela - position:sticky nem sempre vira containing-block confiável
   pra descendente absolute dentro de table-cell em todo navegador, e foi
   isso que causou o popover "quebrado" ocupando a largura inteira e
   empurrando as linhas pra baixo no print). Agora é position:fixed, com
   top/left calculados em JS via getBoundingClientRect() e o elemento
   anexado direto no <body> - sem depender de containing block nenhum do
   <th>, sempre flutua exatamente onde devia, do tamanho certo. */
.dados-th-conteudo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.dados-th-label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.dados-th-filtro-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm, 6px);
  color: var(--text-faint);
  opacity: 0.6;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.dados-th-filtro-btn:hover { background: var(--bg-card-hov); color: var(--text); opacity: 1; }
.dados-th-filtro-btn svg { width: 10px; height: 10px; }
/* ícone destacado (azul) quando a coluna tem filtro ativo - mesmo aviso
   visual do funil "cheio" do AutoFilter do Excel, só que com a setinha. */
.dados-th-filtro-btn.ativo { color: var(--accent); opacity: 1; }
.dados-th-filtro-btn.ativo:hover { background: var(--accent-soft); }

/* popover flutuante (position:fixed, top/left via JS - ver comentário
   acima). z-index bem alto porque agora vive solto no <body>, acima de
   qualquer coisa da tabela (inclusive o cabeçalho sticky). */
.dados-th-filtro-drop {
  position: fixed;
  z-index: 500;
  width: 260px;
  display: flex;
  flex-direction: column;
  text-transform: none;
  font-weight: var(--fw-regular);
  letter-spacing: normal;
  font-size: 13px;
  background: var(--card-fill) padding-box, var(--card-border-gradient);
  /* --card-fill é translúcido (rgba de propósito, ver tokens.css) mas
     sozinho só deixa o conteúdo de trás "vazando" fraco por baixo (print
     do usuário: texto da tabela fantasma atrás da lista) - backdrop-filter
     borra o que está atrás em vez de só deixar transparecer, mesmo efeito
     "vidro" já usado no modal/sidebar (--blur-glass, ver surface.css). */
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
  border: 1px solid transparent;
  /* mesmo raio de canto da área da tabela (.dados-tabela-scroll, ver
     abaixo) - pedido do usuário: "arredonde os cantos pra ficar similar
     ao da tabela". */
  border-radius: var(--radius-lg);
  /* sombra própria (mais forte que o --shadow-lg padrão, em duas camadas -
     uma difusa e larga, outra mais fechada e escura perto da borda) pra
     reforçar a sensação de "flutuando por cima" da tabela - pedido do
     usuário 2026-08-10. Preta/forte aqui é o padrão pro tema ESCURO; tema
     claro sobrescreve pra uma versão bem mais clara logo abaixo (rgba(0,0,0)
     forte sobre fundo claro ficava com uma mancha escura pesada demais,
     reportado pelo usuário). */
  box-shadow: 0 24px 60px -8px rgba(0, 0, 0, 0.55), 0 8px 20px -4px rgba(0, 0, 0, 0.35);
  /* SEM opacity aqui de propósito (testado e revertido a pedido do
     usuário) - opacity afeta a caixa inteira como uma única camada,
     então o blur/sombra/texto todos ficavam desbotados junto; o efeito
     "vidro" já vem só do backdrop-filter acima. */
  overflow: hidden;
}
/* tema claro: mesma ideia (sombra em duas camadas, difusa + fechada) mas
   com o tom de --ink-900 em vez de preto puro e alpha bem mais baixo -
   mesma família de tom usada em --shadow-lg (tokens.css), só um pouco mais
   forte pra manter o efeito "flutuando" sem virar uma mancha cinza pesada
   sobre o fundo claro. */
[data-theme="light"] .dados-th-filtro-drop {
  box-shadow: 0 20px 48px -10px rgba(15, 23, 42, 0.18), 0 6px 16px -4px rgba(15, 23, 42, 0.10);
}
.dados-th-filtro-busca {
  margin: 8px;
  width: calc(100% - 16px);
}
/* "selecionar tudo" virou uma linha própria (checkbox + rótulo), igual aos
   itens da lista logo abaixo, em vez de um link sublinhado - pedido do
   usuário 2026-08-10 ("sem sublinhado... como um campo com checkbox do
   lado"). A borda inferior é a "linha sutil" separando ela da lista de
   valores. O antigo link "limpar seleção" saiu (o botão "Limpar" do
   rodapé já limpa o filtro da coluna inteira, era redundante). */
.dados-th-filtro-selecionar-tudo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
  border-bottom: 1px solid var(--border-soft);
}
.dados-th-filtro-selecionar-tudo:hover { background: var(--bg-card-hov); }

.dados-th-filtro-lista {
  display: flex;
  flex-direction: column;
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px;
}
.dados-th-filtro-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 8px;
  border-radius: var(--radius-sm, 6px);
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
}
.dados-th-filtro-item:hover { background: var(--bg-card-hov); }
.dados-th-filtro-item input[type="checkbox"] { flex-shrink: 0; margin-top: 2px; }
/* texto num flex:1/min-width:0 próprio - mesmo motivo já documentado no
   autocomplete de destinatário (item flex sem min-width:0 nunca quebra
   linha, só estoura o container pra rolagem horizontal). */
.dados-th-filtro-item-texto {
  flex: 1;
  min-width: 0;
  white-space: normal;
  overflow-wrap: break-word;
}
.dados-th-filtro-item-total {
  flex-shrink: 0;
  color: var(--text-faint);
  font-size: 11px;
  font-family: var(--font-mono);
}

.dados-th-filtro-rodape {
  display: flex;
  gap: 8px;
  padding: 8px;
  border-top: 1px solid var(--border-soft);
}
.dados-th-filtro-rodape .btn { flex: 1; justify-content: center; padding: 6px 10px; font-size: 12.5px; }

/* ---------------- checkbox de seleção (exportar só o marcado) ---------------- */

.dados-th-check, .dados-td-check {
  width: 34px;
  text-align: center;
}
/* accent-color (usada antes) só pinta o estado MARCADO - desmarcado cai no
   cinza padrão do navegador, que era o problema. checkbox customizado
   (appearance:none + check desenhado via ::after) pra ficar azul nos dois
   estados. */
.dados-th-check input, .dados-td-check input {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  width: 15px;
  height: 15px;
  margin: 0;
  position: relative;
  flex-shrink: 0;
  background: rgba(47, 107, 255, 0.08);
  border: 1.5px solid var(--blue-400, #4E7DFF);
  border-radius: 4px;
}
.dados-th-check input:hover, .dados-td-check input:hover {
  border-color: var(--blue-300, #7BA2FF);
}
.dados-th-check input:checked, .dados-td-check input:checked,
.dados-th-check input:indeterminate, .dados-td-check input:indeterminate {
  background: var(--blue-500, #2F6BFF);
  border-color: var(--blue-500, #2F6BFF);
}
/* "check" desenhado na mão (dois traços em L, girados 45°) - sem isso o
   checkbox marcado e o indeterminado ficariam idênticos (só uma caixa
   azul cheia), sem dar pra distinguir visualmente. */
.dados-th-check input:checked::after, .dados-td-check input:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.dados-th-check input:indeterminate::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 6px;
  width: 7px;
  height: 2px;
  background: white;
  border-radius: 1px;
}

.dados-selecao-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-faint);
}
.dados-selecao-info.hidden { display: none; }
.dados-selecao-limpar {
  background: none;
  border: none;
  padding: 0;
  color: var(--blue-400, #4E7DFF);
  font-size: 12.5px;
  cursor: pointer;
  text-decoration: underline;
}
.dados-selecao-limpar:hover { color: var(--blue-300, #7BA2FF); }

/* ---------------- botão "Exportar" (menu suspenso) ---------------- */

.dados-export {
  position: relative;
}

.dados-export-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  padding: 6px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  box-shadow: var(--shadow-lg, 0 20px 50px rgba(0,0,0,.4));
}
.dados-export-menu.hidden { display: none; }

.dados-export-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: none;
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.dados-export-menu button:hover { background: var(--bg-card-hov); }
.dados-export-menu button svg { width: 15px; height: 15px; color: var(--text-faint); flex-shrink: 0; }
.dados-export-menu button.hidden { display: none; }