/* Tela "Exportações": um único painel (lista de .xlsx gerados por
   itens/clientes). Segue o mesmo padrão de painel fixo + lista rolável já
   usado em Dados/Execuções/Automações - só a tabela rola, o cabeçalho do
   painel (título + botão "Atualizar") fica sempre visível. */

.exp-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.exp-panel .panel-head { flex-shrink: 0; }
.exp-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.exp-arquivo-cel {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* cabeçalho do painel: "Remover selecionados" (só habilita com >=1
   marcado - ver exports.js) + "Atualizar" lado a lado */
.exp-head-acoes {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* checkbox de seleção (coluna da esquerda, "selecionar todos" no cabeçalho
   da tabela) + checkbox "Importado" (marca manual, sem relacao com a
   logica de matching/geracao - ver docstring de marcar_export_importado em
   db.py) - mesmo visual, tratados juntos aqui.
   accent-color (usada antes) só pinta o estado MARCADO - desmarcado cai no
   cinza padrão do navegador, destoando do resto do app (pedido do usuário
   2026-08-11, print: "troca a cor desses checkbox pra ficar na cor do
   sistema"). Trocado pro mesmo checkbox customizado (appearance:none +
   check desenhado via ::after) já usado em dados.css (coluna de seleção da
   tela Dados) - fica azul nos dois estados, incluindo o indeterminado do
   "selecionar todos" (ver chkTodos.indeterminate em exports.js). */
.exp-check-linha,
#exp-check-todos,
.exp-importado-check {
  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;
}
.exp-check-linha:hover,
#exp-check-todos:hover,
.exp-importado-check:hover {
  border-color: var(--blue-300, #7BA2FF);
}
.exp-check-linha:checked,
#exp-check-todos:checked,
#exp-check-todos:indeterminate,
.exp-importado-check:checked {
  background: var(--blue-500, #2F6BFF);
  border-color: var(--blue-500, #2F6BFF);
}
.exp-check-linha:checked::after,
#exp-check-todos:checked::after,
.exp-importado-check: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);
}
#exp-check-todos:indeterminate::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 6px;
  width: 7px;
  height: 2px;
  background: white;
  border-radius: 1px;
}

/* ---- coluna de ações: "Baixar" + remover ---- */
.exp-acoes {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.exp-remover {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: none;
  border: 1px solid var(--border-strong);
  color: var(--text-faint);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.exp-remover:hover { color: var(--err); border-color: var(--err); background: rgba(240, 69, 91, 0.08); }