/* Tela de automações do tenant: espelha o layout de
   ui_kits/dashboard/AutomationsList.jsx (ícone + nome/tag à esquerda, status
   + ação à direita, toggle lista/grade), mas com dados 100% reais — o status
   e o "há X min" vêm da tabela execucoes_comando (ver
   listar_automacoes_tenant_com_status em db.py), nada é inventado. */

.autom-aviso {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  margin-bottom: 18px;
  border-radius: var(--radius-md);
  background: rgba(245, 165, 36, 0.10);
  border: 1px solid rgba(245, 165, 36, 0.30);
  color: var(--warn);
  font-size: 13.5px;
  line-height: 1.5;
}

/* ---- barra: busca + alternância lista/grade ---- */
.autom-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  flex-shrink: 0;   /* fica fixa no topo - só o conteúdo abaixo rola, ver .autom-conteudo */
}

.autom-busca {
  position: relative;
  display: flex;
  align-items: center;
  height: 42px;
  width: 100%;
  max-width: 320px;
  padding: 0 14px 0 40px;
  background: var(--bg-inset);
  /* borda removida (pedido do usuário 2026-08-11, print: "tira essa borda
     do meio" - a linha de 1px em volta da cápsula, entre o fundo da página
     e o brilho de foco, ficava sobrando/duplicada visualmente). Fica só o
     fundo (--bg-inset) dando o contorno da cápsula; o anel de foco
     (box-shadow, ver :focus-within abaixo) continua servindo de feedback
     ao clicar no campo. */
  border: 1px solid transparent;
  /* cápsula (2026-08-07, Fase 6 do plano Apple-style) - igual ao
     search field nativo do macOS/iOS. Reaproveitado também em Execuções
     (#exec-busca, ver execucoes.html), que usa esta mesma classe. */
  border-radius: var(--radius-full);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
/* anel de foco no WRAPPER inteiro (cápsula + ícone), não só no <input> -
   mesmo padrão já usado em .login-field (login.css). Sem isso o brilho de
   foco ficava só na parte do input (que começa depois do ícone, por causa
   do padding-left:40px acima), como se o ícone estivesse "de fora" do
   campo - reportado pelo usuário 2026-08-10, print. */
.autom-busca:focus-within {
  box-shadow: var(--ring);
}
.autom-busca-icon {
  position: absolute;
  left: 14px;
  color: var(--text-faint);
  pointer-events: none;
}
.autom-busca input {
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  padding: 0;
  box-shadow: none; /* evita duplicar o anel de foco de forms.css - o wrapper acima já tem */
}

/* controle segmentado de verdade (estilo macOS/iOS) - pill unica com um
   "thumb" que DESLIZA entre as opcoes em vez de cada botao trocar de fundo
   na hora (pedido do usuario 2026-08-06: "o toggle lista/grade virou um
   controle segmentado de verdade"). O thumb (.autom-view-switch-thumb) e'
   posicionado atras dos botoes (z-index) e sua posicao e' controlada pelo
   atributo data-ativo no container, trocado via JS - ver
   automacoes_console.js. */
.autom-view-switch {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: var(--bg-inset);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.autom-view-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  background: var(--bg-card);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur-base) var(--ease-out);
  pointer-events: none;
}
.autom-view-switch[data-ativo="grid"] .autom-view-switch-thumb {
  transform: translateX(36px);
}
.autom-view-switch button {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  background: none;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.autom-view-switch button.active {
  color: var(--text);
}

/* O conteúdo abaixo do toolbar é quem deve rolar - NÃO a página inteira.
   Sem isso, .main (flex-column, altura travada em 100vh) era o único
   elemento com overflow, então rolar a lista de automações rolava a
   página inteira: o título e a barra de busca/toggle iam embora junto,
   escondidos, em vez de ficarem fixos no topo (como acontece em Dados/
   Execuções, onde só a tabela/lista rola e o resto fica parado) - daí a
   rolagem parecer "esquisita" comparada às outras telas. flex:1 +
   min-height:0 faz o conteúdo ocupar só o espaço que resta depois do
   cabeçalho e da barra, e overflow-y:auto restringe a rolagem a ele mesmo. */
.autom-conteudo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* ---- modo lista (padrão): sem card de fundo, só linhas separadas por um
   fio cinza (pedido do usuário 2026-08-11: "retire esse card do fundo e
   deixe só uma linha cinza separando as automações, como é na tela de
   execuções") - mesmo visual de .tabela-moderna tbody td (border-bottom:
   var(--border-soft), ver components/table.css), sem painel/borda/sombra
   envolvendo a lista inteira. */
.autom-lista--list .autom-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-soft);
  transition: background var(--dur-fast) var(--ease-out);
  cursor: pointer;   /* clicar na linha abre o modal de detalhe da execução */
}
.autom-lista--list .autom-row:last-child { border-bottom: 0; }
.autom-lista--list .autom-row:hover { background: var(--bg-card-hov); }

/* ---- modo grade: cards em coluna ---- */
.autom-lista--grid {
  display: grid;
  /* minmax subiu de 240px pra 300px (pedido explicito - cards ficavam
     estreitos demais, texto de titulo/descricao quebrava em varias
     linhas). Com isso cabem menos colunas por linha, mas cada card fica
     mais largo/confortavel. */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  /* align-content:start e' o pulo do gato aqui - sem isso, o valor default
     (normal, que na pratica funciona como "stretch" quando so tem 1 linha
     de cards) fazia essa unica linha esticar pra preencher TODA a altura
     disponivel - com poucas automacoes (3 cards, 1 linha so) isso deixava
     cada card gigante, um vao vazio enorme entre o conteudo e a borda de
     baixo. Cards agora ficam do tamanho do proprio conteudo, colados no
     topo (mantido mesmo depois de 2026-08-31, quando o flex:1 que causava
     isso saiu daqui e foi pro wrapper .autom-conteudo - continua sendo o
     comportamento certo pra grade em si). */
  align-content: start;
  gap: 14px;
}
.autom-lista--grid .autom-row {
  /* faltava o display:flex - sem ele, flex-direction/gap abaixo nao tinham
     efeito NENHUM (a "coluna" so acontecia por acaso, pelo fluxo normal de
     bloco, sem respiro real entre os elementos - daí o "tudo junto"). Com
     display:flex o gap passa a valer e da pra usar margin-top:auto no botao
     pra grudar ele embaixo, mesmo com cards de altura igual (o grid já
     estica todos os cards da mesma linha pra mesma altura por padrão). */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 20px;
  /* --autom-card-fill/--autom-card-border-gradient: card com degrade
     EXCLUSIVO desta tela (pedido do usuário 2026-08-10) - as demais telas
     (.panel/.kpi/.dados-filtro-card) usam --card-fill/--card-border-
     gradient, que agora são lisos (ver base/tokens.css). Mesma técnica de
     "gradient border": fill em padding-box, gradiente em border-box,
     border:1px solid transparent. */
  background: var(--autom-card-fill) padding-box, var(--autom-card-border-gradient);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.autom-lista--grid .autom-row:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
/* na grade a ação de disparar e o status ficam abaixo, ocupando a largura toda.
   margin-top:auto no botao empurra ele pro rodape do card, aproveitando o
   espaço livre que sobra (cards da mesma linha já têm altura igual). */
.autom-lista--grid .autom-status,
.autom-lista--grid .autom-acoes { width: 100%; }
.autom-lista--grid .autom-acoes { justify-content: center; margin-top: auto; }

.autom-lista--grid .autom-row { position: relative; }

/* "Ver detalhes" - abre /automacoes/{comando} (tela de detalhamento).
   2026-08-31: substituiu o ícone "i" solto no canto do card (histórico:
   pedido do usuário 2026-08-11 original) - ficava discreto demais e
   escondido pelo glow de "em execução" (cobre o card inteiro, ver
   components/glow-el.css). Agora fica ao lado do "Executar"/"Parar" em
   .autom-acoes, com o mesmo `.btn` base do resto do sistema (sem a
   camada extra de .autom-disparar) - de propósito menos vistoso que o
   botão principal, só um pouco de destaque a mais que texto puro.
   2026-09-01 (pedido do usuário): perdeu o texto "Ver detalhes" - vira
   botão quadrado só com o ícone, mais discreto ainda (tooltip/aria-label
   cobrem a acessibilidade). */
.autom-detalhes {
  width: 30px;
  height: 30px;
  padding: 0;
  justify-content: center;
  color: var(--text-dim);
  flex-shrink: 0;
}
.autom-detalhes:hover {
  color: var(--accent);
}

.autom-icon {
  width: 38px;
  height: 38px;
  /* sm->md (2026-08-07, Fase 2) - card em volta ficou mais arredondado
     (--radius-lg subiu), o quadradinho do ícone acompanha a mesma
     suavização, senão destoa (curva forte de fora, canto quase reto
     dentro). */
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.autom-info { flex: 1; min-width: 0; }
/* no modo grade o eixo e vertical (coluna) - "flex:1" aqui empurraria o
   bloco de titulo/descricao pra crescer e engolir o espaço livre do
   card, deixando um vão feio no meio. Quem deve crescer e "puxar" o
   status+botao pro rodape e o .autom-status (ver margin-top:auto abaixo). */
.autom-lista--grid .autom-info { flex: none; }
.autom-nome {
  font-size: 14.5px;
  font-weight: var(--fw-semibold);
  color: var(--text);
  letter-spacing: var(--ls-tight);
  margin-bottom: 5px;
}
/* .autom-tag (etiqueta mono com o nome do comando, ex "itens-novos") saiu
   do CARD DE AUTOMAÇÃO 2026-09-01 (pedido do usuário: "só nome e
   descrição") - a classe em si continua aqui porque templates/
   ferramentas.html também usa (etiqueta com a "tag" da ferramenta, ex
   "notas-recebidas") e não foi pedido pra mexer lá. */
.autom-tag { font-size: 11px; }
.autom-desc {
  font-size: 12.5px;
  color: var(--text-faint);
  margin-top: 4px;
}

.autom-disparar:disabled,
.autom-disparar.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* O botão "Executar" do card de grade (visual "pílula vazada" - ver
   .autom-lista--grid .autom-disparar abaixo) já é theme-agnostic desde
   2026-08-11 (removida a sobrescrita antiga que só existia pro tema claro,
   com cor sólida diferente do escuro - agora os dois temas usam a mesma
   regra). */

/* ---- status (real, vindo de execucoes_comando) ---- */
.autom-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
  text-align: right;
}
.autom-lista--grid .autom-status {
  /* Card de grade: status ("Concluído" etc) e "há Xh Ymin" ficam na MESMA
     linha, o tempo alinhado à direita (pedido do usuário 2026-08-11) - até
     então .autom-status herdava flex-direction:column da regra base acima
     (chip embaixo do outro, empilhados). */
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  margin-top: auto;
  padding-top: 8px;
  gap: 8px;
}

.autom-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--text-dim);
}
.autom-status-chip--ok    { color: var(--ok); }
.autom-status-chip--erro  { color: var(--err); }
.autom-status-chip--muted { color: var(--text-faint); font-weight: var(--fw-medium); }

.autom-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.autom-dot--running { background: var(--blue-400); box-shadow: 0 0 8px var(--blue-400); }
.autom-dot--ok       { background: var(--ok); }
.autom-dot--erro      { background: var(--err); }
.autom-dot--muted     { background: var(--text-faint); }

.autom-quando {
  font-size: 12px;
  color: var(--text-faint);
  font-family: var(--font-mono);
}

.autom-acoes {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.autom-disparar,
.autom-parar {
  flex-shrink: 0;
  font-size: 12.5px;
}
/* botões de ação DENTRO do card de grade viram cápsula (2026-08-07, Fase 2
   - "cartões de automação em grade + seus botões internos") - escopado só
   pro modo grade pra não mudar o modo lista (linha compacta, cápsula ali
   ficaria estranha) nem qualquer outro .btn do sistema. */
.autom-lista--grid .autom-disparar,
.autom-lista--grid .autom-parar {
  border-radius: var(--radius-full);
}

/* "Executar" no card de grade - ver comentário completo dentro da regra
   abaixo pro visual atual ("pílula vazada").
   2026-08-14: chegou a ser trocado por engano pro degradê vertical azul
   (achando que o pedido era "deixar esse igual ao Rodar do modal") -
   revertido na hora ("volte esse botao imediatamente"): o pedido real era
   o INVERSO - o visual "pílula vazada" azul-marinho É o padrão certo, e
   passou a valer pra TODO `.btn.primary` do sistema (ver button.css), não
   só esse botão. Mantido aqui só o que é específico do card de grade
   (tamanho/padding largura total) - a cor/borda agora é herdada de
   `.btn.primary` (o botão já tem essa classe? NÃO - `.autom-disparar` usa
   só `.btn`, então o preenchimento é repetido aqui de propósito, igual
   sempre foi, pra não precisar mudar o HTML). */
.autom-lista--grid .autom-disparar {
  /* Ocupa a largura toda do card (pedido do usuário 2026-08-10, referência
     de imagem: botão "Executar" grande, pílula larga preenchendo a base
     do card). Tamanho reduzido um pouco depois (mesmo dia: "um pouco mais
     escuro e um pouco menor") - ficou grande/claro demais na primeira
     versão.
     Visual trocado 2026-08-11 pra "pílula vazada" (pedido do usuário, com
     mockup aprovado antes de aplicar): SÓ borda fina, ver comentário do
     conic-gradient logo abaixo pro formato atual (trocou de degradê linear
     diagonal pra conic-gradient concentrado na base + lateral).
     Preenchimento: NÃO é `transparent` de verdade (era antes - problema:
     deixava o fundo do BOTÃO herdado do .btn base, var(--bg-card), opaco
     por baixo, já que background-image não sobrescreve background-color).
     Trocado pra var(--bg-card) explícito - mesma cor "chapada" do card,
     igual o mockup aprovado (lá também era um sólido igual ao fundo atrás,
     não "transparent" de verdade). Mesma técnica de 2 backgrounds
     empilhados (fill em padding-box, degradê em border-box) já usada no
     card/.panel.
     width:100% -> flex:1 (2026-08-31): "Ver detalhes" passou a dividir a
     linha com ele (ver .autom-detalhes) - flex:1 deixa o Executar ocupar
     o espaço que sobra, em vez de tomar a largura toda e empurrar o outro
     botão pra fora do card. */
  flex: 1;
  min-width: 0;
  justify-content: center;
  padding: 10px 22px;
  font-size: 13.5px;
  /* Borda trocada 2026-08-11 (rodada de mockups aprovados no chat): saiu o
     degradê linear diagonal (azul claro -> quase preto) e entrou um
     conic-gradient que concentra o azul só na base + lateral direita do
     botão (topo/lateral esquerda ficam sem cor nenhuma) - ângulo ajustado
     por pedido do usuário até ficar "girado mais pra direita".
     Preenchimento trocado no mesmo dia de var(--bg-card) (cinza-azulado
     neutro, igual ao card) pra um azul-marinho próprio (#1D2B52) - pedido
     do usuário depois de ver o mockup ("puxe mais pro azul" + confirmou o
     hex exato). Cor fixa (não é token) porque só existe pra esse botão -
     mesmo valor usado agora em .btn.primary globalmente (button.css),
     coincidência intencional: os dois devem parecer idênticos. */
  background-image:
    linear-gradient(#1D2B52, #1D2B52),
    conic-gradient(from 0deg at center,
      transparent 0deg 75deg,
      rgba(133, 175, 255, 0.65) 120deg 210deg,
      transparent 255deg 360deg);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  /* 1.5px -> 1px (2026-08-11, mesma espessura usada em todos os mockups
     aprovados no chat pra essa borda). */
  border: 1px solid transparent;
  /* sombra dupla (baixo + cima), acentuada e depois suavizada por pedido do
     usuário - dá profundidade nos dois lados do botão, não só embaixo. */
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25), 0 -8px 18px rgba(0, 0, 0, 0.20);
}
.autom-lista--grid .autom-disparar:hover:not(:disabled) {
  background-image:
    linear-gradient(#243866, #243866),
    conic-gradient(from 0deg at center,
      transparent 0deg 75deg,
      rgba(133, 175, 255, 0.65) 120deg 210deg,
      transparent 255deg 360deg);
  color: #fff;
}

/* Tema claro: botão "Executar" ganha um tom azul claro de fundo e a borda
   em degradê passa de azul pra BRANCA (pedido do usuário olhando o mockup
   no claro - o azul da borda "sumia" contra o próprio fundo azulado do
   botão). Formato do degradê também mudou aqui: sem trecho "chapado", é um
   único pico que sobe e desce suavemente até sumir nas duas pontas
   ("quero o degradê com a transparência, pra ela ir sumindo"). Sem stop
   escuro/preto em nenhum estado, inclusive hover (pedido explícito). */
[data-theme="light"] .autom-lista--grid .autom-disparar {
  background-image:
    linear-gradient(#F5F9FF, #F5F9FF),
    conic-gradient(from 0deg at center,
      transparent 0deg,
      transparent 90deg,
      rgba(255, 255, 255, 0.95) 165deg,
      transparent 240deg,
      transparent 360deg);
  border-width: 1px;
  color: var(--blue-500);
  box-shadow: 0 10px 24px rgba(10, 14, 26, 0.12), 0 -8px 18px rgba(10, 14, 26, 0.08);
}
[data-theme="light"] .autom-lista--grid .autom-disparar:hover:not(:disabled) {
  background-image:
    linear-gradient(#EAF1FF, #EAF1FF),
    conic-gradient(from 0deg at center,
      transparent 0deg,
      transparent 90deg,
      rgba(255, 255, 255, 0.95) 165deg,
      transparent 240deg,
      transparent 360deg);
  color: var(--blue-700);
  box-shadow: 0 10px 24px rgba(10, 14, 26, 0.14), 0 -8px 18px rgba(10, 14, 26, 0.10);
}

/* "Parar": mesma base do .btn, so com tom de alerta - acao destrutiva
   (interrompe um processo em andamento). */
.autom-parar {
  color: var(--err);
  border-color: rgba(240, 69, 91, 0.35);
}
.autom-parar:hover:not(:disabled) {
  background: rgba(240, 69, 91, 0.08);
}
/* mesma logica do .autom-disparar acima (2026-08-31): divide a linha com
   "Ver detalhes" em vez de sobrar sozinho com largura de conteudo. */
.autom-lista--grid .autom-parar {
  flex: 1;
  min-width: 0;
  justify-content: center;
}

.autom-vazio,
.autom-lista-vazia {
  padding: 48px 20px;
  text-align: center;
  color: var(--text-faint);
  font-size: 13.5px;
}
.autom-lista-vazia {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
}

/* ---- modal de parâmetros (antes de disparar um comando com opções) ----
   .pag-modal-label e' gerada aqui mesmo via JS (automacao_detalhe.js/
   automacoes_console.js) - nome historico (nao vem de pages/pagamentos.css,
   nunca esteve la apesar do prefixo "pag-") - só ajusta o espaçamento
   entre campos empilhados aqui. */
.autom-params-modal { max-width: 420px; }
/* .modal-body (components/modal.css) e' flex:1 pensado pro modal de log
   (bem maior, precisa esticar/rolar) - nesse modal de parametros, com so
   2-3 campos curtos, isso deixava um vao vazio enorme entre os campos e
   os botoes Cancelar/Rodar (o corpo esticava pra preencher a altura toda
   do cartao). Aqui o corpo deve ficar do tamanho do proprio conteudo. */
.autom-params-modal .modal-body { flex: 0 1 auto; }
/* fonte do rotulo fixada explicitamente (com !important) pelo mesmo motivo
   do "select" logo abaixo em components/forms.css: o Tailwind CDN injeta
   seu reset DEPOIS do nosso CSS e pode vencer a cascata em <label> sem
   classe própria de tamanho - pedido do usuario 2026-08-04 ("padronizar as
   fontes", rotulo de um campo aparecia visivelmente maior que os outros). */
.autom-params-modal .pag-modal-label {
  display: block;
  font-size: 13.5px !important;
  font-weight: 500;
  color: var(--text);
  margin-top: 24px;
  margin-bottom: 8px;
}
/* zera a margem SÓ do primeiro rótulo do modal inteiro (scoped com ">" -
   filho direto de #params-campos). Sem o ">" isso também pegava o
   primeiro rótulo de CADA .autom-params-grupo (ex: "Código" logo abaixo
   do select "Tipo de filtro"), colando os dois - pedido do usuario
   2026-08-04 ("ta td muito perto esse dropdown e o titulo de codigo"). */
.autom-params-modal #params-campos > .pag-modal-label:first-child { margin-top: 0; }
.autom-params-modal input[type="date"],
.autom-params-modal select { width: 100%; }
/* grupo de campos de UM modo (ver PARAM_ESPECIFICACAO/"modos" em
   automacoes_console.js) - alternado via JS (display:none nos inativos). */
.autom-params-grupo { margin-top: 8px; }
.autom-params-nota {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-faint);
}
.autom-params-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text);
  margin-top: 20px;
  cursor: pointer;
}
/* alinha o checkbox com a PRIMEIRA linha do texto ao lado, mesmo quando o
   texto quebra em 2 linhas (antes ficava centralizado no bloco inteiro). */
.autom-params-check input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; }
.autom-params-acoes {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 26px;
}