/* Tela "Execuções" (console principal): tabela de linhas finas (reaproveita
   .tabela-moderna/.dados-tabela-scroll/.dados-panel/.dados-export*, já
   carregadas globalmente - mesmos componentes da tela Dados), status igual
   ao chip de Automações (.autom-*). Só entra aqui o que é específico desta
   tela: o painel lateral de filtro e a célula de comando/ações da tabela. */

/* ---------------- painel lateral de filtro ----------------
   Pedido do usuário 2026-08-10: "faça eles, só nessa tela, ser aquele
   painel lateral que comprimia a tabela, lembra?" - reaproveita o mesmo
   padrão que a tela Dados usava antes de trocar pro filtro por coluna
   (estilo Excel, que não faz sentido aqui - Execuções tem só 4-5 campos
   fixos, não uma coluna por vez). Escondido por padrão (width:0), abre
   pelo botão "Filtrar" no cabeçalho (toggleFiltroPainel(), ver
   execucoes_console.js) - sem overlay/modal, a tabela só cede espaço
   quando o painel abre (transition no width). */
.exec-corpo {
  display: flex;
  gap: 16px;
  flex: 1;
  min-height: 0;
}
.exec-tabela-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.dados-filtro-painel {
  width: 0;
  flex-shrink: 0;
  overflow: hidden;
  transition: width var(--dur-base) var(--ease-out);
}
.dados-filtro-painel.aberto { width: 280px; }

.dados-filtro-card {
  width: 280px;
  height: 100%;
  display: flex;
  flex-direction: column;
  /* --card-fill/--card-border-gradient: mesma técnica de "gradient
     border" usada em .panel/.dados-th-filtro-drop (ver base/tokens.css). */
  background: var(--card-fill) padding-box, var(--card-border-gradient);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow-y: auto;
}
.dados-filtro-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.dados-filtro-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: var(--fw-semibold);
  color: var(--text);
}
.dados-filtro-titulo svg { color: var(--text-faint); flex-shrink: 0; }
.dados-filtro-close {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full);
  color: var(--text-faint);
  cursor: pointer;
  background: transparent;
  border: none;
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.dados-filtro-close:hover { background: var(--bg-card-hov); color: var(--text); }
.dados-filtro-close svg { width: 15px; height: 15px; }

.dados-filtro-body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dados-filtro-body input,
.dados-filtro-body select,
.dados-filtro-body .autom-busca {
  width: 100%;
  max-width: none;
}

/* botão "Filtrar" do cabeçalho fica com o mesmo acento azul das abas/chips
   enquanto o painel está aberto - dá pra ver de longe que o filtro está
   ativo/visível, sem precisar olhar o painel em si. */
#btn-filtrar-toggle.active {
  background: var(--accent-soft);
  border-color: rgba(47, 107, 255, 0.35);
  color: var(--accent);
}

/* campo individual: rótulo pequeno acima do input/select, mesmo padrão já
   usado no antigo painel de Dados. */
.dados-filtro-campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.dados-filtro-label {
  font-size: 12px;
  font-weight: var(--fw-medium);
  color: var(--text-faint);
}
/* De/Até lado a lado, cada um ocupando metade da largura. */
.dados-filtro-linha {
  display: flex;
  gap: 10px;
  width: 100%;
}
.dados-filtro-linha .dados-filtro-campo { flex: 1; min-width: 0; }
.dados-filtro-linha input { width: 100%; min-width: 0; }

/* rodapé com Limpar/Aplicar (pedido do usuário - antes os campos filtravam
   sozinhos ao digitar/trocar, sem dar tempo de preencher vários campos
   antes de disparar a busca) - mesmo padrão visual do rodapé do popover de
   filtro por coluna em Dados (.dados-th-filtro-rodape). */
.dados-filtro-rodape {
  display: flex;
  gap: 8px;
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.dados-filtro-rodape .btn { flex: 1; justify-content: center; }

@media (max-width: 900px) {
  .dados-filtro-painel.aberto { width: 100%; }
  .dados-filtro-card { width: 100%; }
  .exec-corpo { flex-direction: column; }
}

/* ---- célula "Comando": ícone + nome + tag mono, numa linha fina ---- */
.exec-comando-cel {
  display: flex;
  align-items: center;
  gap: 8px;
}
.exec-comando-nome {
  color: var(--text);
  font-size: 13px;
  font-weight: var(--fw-medium);
}
.exec-comando-tag {
  color: var(--text-faint);
  font-size: 11px;
}

/* ---- coluna de ações: "Ver log" + ícone de copiar diagnóstico ---- */
.exec-acoes {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.exec-ver-log {
  font-size: 12px;
  padding: 5px 10px;
}
.exec-copiar {
  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);
}
.exec-copiar:hover { color: var(--err); border-color: var(--err); background: rgba(240, 69, 91, 0.08); }

/* linhas finas: reduz um pouco o padding vertical padrão de .tabela-moderna
   pra ficar mais compacto (pedido explícito: "linhas mais finas, como
   tabela") - só nesta tela, escopado em #exec-tabela. */
#exec-tabela tbody td { padding: 8px 14px; }
#exec-tabela .autom-status-chip { font-size: 12.5px; }