/* Página de detalhamento de UMA automação (/automacoes/{comando}).
   Layout revisado 2026-08-12 (pedido do usuário: "retire esse grafico do
   meio, suba as tabelas... nao quero rolagem na pagina, quero so nas
   tabelas, assim como em outras telas do ally") - segue o MESMO padrão de
   Execuções/Dados: cabeçalho+KPIs+abas ficam de altura fixa (flex-shrink:0,
   ver .main em layout.css - já é uma coluna flex de 100vh), e
   .automd-corpo (classe .dados-panel, dados.css) ocupa o resto (flex:1) -
   só a área da tabela rola de verdade (.dados-tabela-scroll). */

/* Linha 1 do cabeçalho: voltar+título de um lado, Executar/Parar do outro
   - sozinha, sem mais nada (pedido do usuário 2026-08-18). */
.automd-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

/* Linha 2: dividida ao meio - indicadores à esquerda, gráfico à direita
   (pedido do usuário 2026-08-18, com print do inspetor do navegador
   marcando a divisão desejada). 1fr/1fr = literalmente "divide no meio";
   min-width:0 em cada metade evita que o conteúdo interno (grid de KPIs,
   canvas) force a coluna a crescer além do espaço disponível. */
.automd-meio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 32px;
  margin-bottom: 14px;
  flex-shrink: 0;
}
.automd-meio-esquerda,
.automd-meio-direita {
  min-width: 0;
}

.automd-kpis {
  /* Continua comprimida (pedido do usuário 2026-08-14: "comprima os
     indicadores na esquerda") - cada cartão só do tamanho de conteúdo
     (minmax) e o grid cola na esquerda da sua metade, em vez de esticar
     igual a versão padrão de .kpis (kpi.css). */
  grid-template-columns: repeat(4, minmax(140px, 190px));
  justify-content: start;
  gap: 10px;
}
.automd-kpis .kpi {
  padding: 14px 16px;
}
.automd-kpis .kpi-num {
  font-size: 24px;
}

/* position:relative + canvas absolute/inset:0 é o padrão recomendado do
   próprio Chart.js pra responsive:true + maintainAspectRatio:false (ver
   docs "Responsive Charts") - sem isso (versão anterior usava só
   width/height:100% !important no canvas, sem o wrapper com posição
   definida) o Chart.js não conseguia calcular o tamanho real do container
   e o canvas explodia pra um tamanho gigante/quebrado (bug reportado pelo
   usuário: gráfico saindo como um retângulo enorme com picos estranhos
   por cima).

   width:100% (2026-08-18) em vez do valor fixo anterior (640px) - agora
   o gráfico mora na metade direita de .automd-meio (grid 1fr/1fr) e deve
   preencher essa coluna inteira, não um tamanho fixo em pixels. */
.automd-chart-mini {
  position: relative;
  width: 100%;
  height: 220px;
}
.automd-chart-mini canvas {
  position: absolute;
  inset: 0;
}

/* seta "<" de voltar (pedido do usuário 2026-08-12: "o botao de voltar
   coloque uma seta simples, <, ao lado do nome da automacao"), no lugar do
   antigo botão "Voltar" no cabeçalho. */
.automd-voltar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  color: var(--text-dim);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.automd-voltar:hover {
  background: var(--bg-card-hov);
  color: var(--text);
}

/* linha das abas Execuções/Exportações + botão Executar (pedido do
   usuário: "coloque o botao de executar acima da tabela na direita") -
   abas na esquerda, Executar na direita, mesma linha. */
.automd-toolbar {
  display: flex;
  /* width:100% explícito - sem isso o botão "Executar" ficava colado do
     lado das abas em vez de ir pra ponta direita (bug reportado pelo
     usuário 2026-08-12, print: "ele ta ficando aqui") - justify-content:
     space-between só empurra o conteúdo pras pontas se o container tiver
     largura de sobra pra distribuir; sem width explícito aqui ele estava
     encolhendo pro tamanho do próprio conteúdo (abas + botão) em vez de
     esticar igual .automd-corpo/tabela logo abaixo. */
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  margin-bottom: 14px;
  flex-shrink: 0;
}
.automd-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--bg-inset);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.automd-tabs button {
  padding: 7px 18px;
  border-radius: var(--radius-full);
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 13px;
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.automd-tabs button.active {
  color: var(--text);
  background: var(--bg-card);
  box-shadow: var(--shadow-xs);
}

/* área de baixo (tabelas) - ocupa o resto da tela, mesmo comportamento de
   .dados-panel (flex:1, min-height:0, overflow:hidden - ver dados.css). Só
   um dos dois .automd-tab-painel fica visível por vez (JS troca display),
   cada um herda a altura toda desse wrapper. */
.automd-corpo {
  min-height: 0;
}
.automd-tab-painel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* aba Exportações (2026-08-14): virou tabela de verdade (ver
   automacao_detalhe.js: carregarExportacoes(), .exp-* reaproveitado de
   exports.css) - mesmo comportamento padrão de .automd-tab-painel
   (flex:1, rola só a tabela), nenhum override específico precisa mais
   aqui (aviso "não implementado" removido). */

/* painel lateral "Em execução agora" - reaproveita .dados-filtro-painel/
   .dados-filtro-card (execucoes.css, já global), só que SEM botão manual:
   a classe .aberto é ligada/desligada sozinha pelo JS (checarAndamento())
   conforme existe ou não uma execução rodando agora - a mesma transição de
   largura (width 0 -> 280px) que o painel de filtro já usava vira a
   "animação" pedida ("quando finalizar ele sai, coloca alguma animacao"). */
.automd-andamento-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.automd-andamento-info > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  gap: 12px;
}
.automd-andamento-label {
  color: var(--text-faint);
  font-size: 12px;
}

/* painel "em execução" com o MESMO efeito de degradê/borda que o card de
   automação já usa na tela Automações (pedido do usuário 2026-08-12:
   "quero exatamente o mesmo efeito do card de automacao") - reaproveita
   --autom-card-fill/--autom-card-border-gradient (base/tokens.css,
   exclusivo dessa técnica) em vez do --card-fill/--card-border-gradient
   liso que .dados-filtro-card usa por padrão (execucoes.css). Já ocupa a
   altura toda sozinho (.dados-filtro-card já é height:100%). */
#automd-andamento-painel .dados-filtro-card {
  /* sem preenchimento (pedido do usuário: "deixe sem fundo, mas com o
     brilho rodando como no card é hoje") - só a borda em degradê
     (--autom-card-border-gradient) continua, o miolo fica transparente
     igual ao fundo da página. */
  background: transparent padding-box, var(--autom-card-border-gradient);
  border: 1px solid transparent;
  box-shadow: none;
}

/* checklist de etapas (pedido do usuário 2026-08-12: "quero ver o passo a
   passo da execução... 'Lendo dados, compilando informações, etc'") - só
   aparece pra comandos com marcadores 'ETAPA=' no log (ver
   ETAPAS_POR_COMANDO em automacao_detalhe.js). Feita: check verde. Atual:
   bolinha azul pulsante (mesmo .dot-pulse usado no resto do app). Pendente:
   bolinha vazada, sem cor. */
.automd-etapas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  list-style: none;
}
.automd-etapa {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-faint);
}
.automd-etapa--feita { color: var(--text-dim); }
.automd-etapa--atual { color: var(--text); font-weight: var(--fw-medium); }
.automd-etapa svg { width: 14px; height: 14px; flex-shrink: 0; }
.automd-etapa--feita svg { color: var(--ok); }
.automd-etapa-bolha {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--text-faint);
  flex-shrink: 0;
}
.automd-etapa--atual .automd-etapa-bolha {
  border-color: var(--info);
  background: var(--info);
}

/* botão Executar / Parar - MESMO comportamento do card na tela de
   Automações (pedido do usuário 2026-08-12: "o botao de executar de
   dentro do detalhamento tem q fazer a msm coisa q o botao de executar
   dos cards de automacao"): dois botões distintos, só um visível por vez
   (display:none/'', ver automacao_detalhe.js), não precisa de CSS
   especial aqui - .btn/.btn.primary já cobrem os dois estados. As várias
   tentativas anteriores de estilizar um único botão "Em execução" (halo,
   sem fundo etc) foram abandonadas junto com esse modelo de um-botão-só,
   que não deixava cancelar uma execução presa por essa tela. */

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