/* Monitor de ETLs (Hetzner) - card da Home, só root admin (27/09/2026).
   Módulo em `public/js/etl-monitor.js`, que cria o card (para não-root ele não existe no DOM).
   28/09: cada linha é um botão que abre o painel de detalhe `#etlm-dlg` (<dialog> modal montado
   no document.body, fora da Home), estilizado no fim deste arquivo.

   ESCOPO. Todo seletor começa por `#etl-monitor-card` ou `#etlm-dlg`: nada aqui vaza para a Home.
   CORES. Superfície e tinta são os tokens do app (--bg-card, --border-color, --text-*); espaço,
   raio e tipografia saem dos --ds-*. Verde e vermelho são semânticos e ficam SÓ nos ícones
   (✓ / ✗): o texto do motivo é tinta neutra. Lima não aparece: o card é informativo.
   Base = tema escuro (:root), override em [data-theme="light"], convenção do Hub. */

#etl-monitor-card,
#etlm-dlg {
  --etlm-ok: #7FC48F;          /* verde dessaturado: 8,8:1 sobre #161616, 7,4:1 sobre #252529 */
  --etlm-erro: var(--text-error, #F87171);
  --etlm-linha: rgba(255, 255, 255, 0.06);
  --etlm-erro-fundo: rgba(248, 113, 113, 0.07);
  --etlm-hover: rgba(255, 255, 255, 0.04);
  --etlm-fraco: var(--text-tertiary, var(--text-muted, #8A8A8A));
}

#etl-monitor-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--ds-radius-md, 1rem);
  padding: 1.25rem 1.5rem;
  margin-bottom: var(--grid-gap, 1.5rem);
  color: var(--text-primary);
  min-width: 0;
}

[data-theme="light"] #etl-monitor-card,
[data-theme="light"] #etlm-dlg {
  --etlm-ok: #2E7D43;          /* 5,1:1 sobre #FFFFFF */
  --etlm-erro: var(--text-error, #DC2626);
  --etlm-linha: rgba(10, 10, 10, 0.07);
  --etlm-erro-fundo: rgba(220, 38, 38, 0.06);
  --etlm-hover: rgba(10, 10, 10, 0.035);
}

/* ------------------------------------------------------------------ cabeçalho */
#etl-monitor-card .etlm-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

#etl-monitor-card .etlm-titulo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: var(--ds-leading-snug, 1.3);
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

#etl-monitor-card .etlm-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  font-size: var(--ds-text-xs, 0.75rem);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

#etl-monitor-card .etlm-meta .etlm-hora { color: var(--text-tertiary, #8A8A8A); }
#etl-monitor-card .etlm-meta .etlm-semsinal { color: var(--text-primary); font-weight: 500; }

/* ok / erro - único ponto de cor do card: círculo com fundo suave (14%) + traço fino */
#etl-monitor-card .etlm-ico,
#etlm-dlg .etlm-ico {
  flex: none;
  display: inline-flex;
  width: 1rem;
  height: 1rem;
}
#etl-monitor-card .etlm-abre > .etlm-ico { align-self: center; }   /* linha é baseline; o ícone centra */
#etl-monitor-card .etlm-ico-cab { display: inline-flex; }
#etl-monitor-card .etlm-ico svg,
#etlm-dlg .etlm-ico svg { width: 100%; height: 100%; display: block; }
#etl-monitor-card .etlm-ico-fundo,
#etlm-dlg .etlm-ico-fundo { fill: currentColor; fill-opacity: 0.14; }
#etl-monitor-card .etlm-ico--ok,
#etlm-dlg .etlm-ico--ok { color: var(--etlm-ok); }
#etl-monitor-card .etlm-ico--erro,
#etlm-dlg .etlm-ico--erro { color: var(--etlm-erro); }

#etl-monitor-card .etlm-aviso {
  margin: 0.75rem 0 0;
  font-size: var(--ds-text-xs, 0.75rem);
  color: var(--text-tertiary, #8A8A8A);
}
#etl-monitor-card .etlm-aviso[hidden] { display: none; }

/* ------------------------------------------------------------------ lista */
/* Linhas ok em grade compacta; linhas com erro vêm primeiro e ocupam a largura toda, porque
   carregam hora e motivo. */
#etl-monitor-card .etlm-lista {
  list-style: none;
  margin: 0.875rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 0.25rem 1rem;
}
#etl-monitor-card .etlm-lista:empty { display: none; }

/* <li> = célula da grade; o <button> dentro dele é a linha clicável (abre o detalhe). */
#etl-monitor-card .etlm-linha {
  min-width: 0;
  border-bottom: 1px solid var(--etlm-linha);
}

#etl-monitor-card .etlm-abre {
  appearance: none;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0.4rem 0.25rem;
  border: 0;
  border-radius: var(--ds-radius-sm, 0.5rem);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--ds-text-sm, 0.875rem);
  line-height: var(--ds-leading-snug, 1.3);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--ds-duration-fast, 150ms) var(--ds-ease-out, ease);
}
#etl-monitor-card .etlm-abre:hover { background: var(--etlm-hover); }

/* Seta de "abre detalhe" (só nas linhas com erro, que têm a largura toda): aparece no hover/foco;
   em tela de toque fica sempre, bem fraca. Linha ok sinaliza só pelo hover e pelo cursor. */
#etl-monitor-card .etlm-seta {
  flex: none;
  align-self: center;
  display: inline-flex;
  width: 0.875rem;
  height: 0.875rem;
  margin-left: auto;
  color: var(--etlm-fraco);
  opacity: 0;
  transition: opacity var(--ds-duration-fast, 150ms) var(--ds-ease-out, ease);
}
#etl-monitor-card .etlm-seta svg { width: 100%; height: 100%; display: block; }
#etl-monitor-card .etlm-abre:hover .etlm-seta,
#etl-monitor-card .etlm-abre:focus-visible .etlm-seta,
#etl-monitor-card .etlm-abre[aria-expanded="true"] .etlm-seta { opacity: 1; }
@media (hover: none) {
  #etl-monitor-card .etlm-seta { opacity: 0.6; }
}

#etl-monitor-card .etlm-linha--erro {
  grid-column: 1 / -1;
  border-bottom: 0;
  border-radius: var(--ds-radius-sm, 0.5rem);
  background: var(--etlm-erro-fundo);
  margin-bottom: 0.25rem;
}
#etl-monitor-card .etlm-linha--erro .etlm-abre {
  flex-wrap: wrap;
  padding: 0.5rem 0.625rem;
}

#etl-monitor-card .etlm-nome {
  color: var(--text-primary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

#etl-monitor-card .etlm-banco {
  color: var(--etlm-fraco);
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

#etl-monitor-card .etlm-detalhe {
  flex: 1 1 16rem;
  min-width: 0;
  color: var(--text-secondary);
  font-size: var(--ds-text-xs, 0.8125rem);
  font-variant-numeric: tabular-nums;
}
#etl-monitor-card .etlm-detalhe time { color: var(--text-primary); font-weight: 500; }

/* Foto velha (sem sinal): as linhas ficam, mas recuam. */
#etl-monitor-card.etlm--velho .etlm-lista { opacity: 0.6; }

@media (max-width: 640px) {
  #etl-monitor-card { padding: 1rem; }
  #etl-monitor-card .etlm-detalhe { flex-basis: 100%; padding-left: 1.625rem; }
  /* a seta quebraria sozinha para uma linha nova depois do motivo: some no erro estreito */
  #etl-monitor-card .etlm-linha--erro .etlm-seta { display: none; }
}

/* ================================================================== painel de detalhe
   <dialog> aberto com showModal(): fica na top layer (sem z-index, imune ao transform da view).
   O próprio <dialog> não tem padding: a caixa ocupa tudo, e clique no ::backdrop = clique fora. */
#etlm-dlg {
  width: min(30rem, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  max-height: var(--ds-modal-max-h, min(85dvh, 720px));
  margin: auto;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: var(--ds-radius-md, 1rem);
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  z-index: var(--ds-z-modal, 600);   /* só vale no modo sem showModal() */
}
#etlm-dlg:not([open]) { display: none; }
#etlm-dlg[open] {
  display: flex;               /* caixa encolhe até o max-height e só o corpo rola */
  flex-direction: column;
  animation: etlmSurge var(--ds-duration-fast, 150ms) var(--ds-ease-out, ease);
}
#etlm-dlg::backdrop { background: rgba(0, 0, 0, 0.6); }
[data-theme="light"] #etlm-dlg { box-shadow: 0 24px 64px rgba(10, 10, 10, 0.18); }
[data-theme="light"] #etlm-dlg::backdrop { background: rgba(10, 10, 10, 0.32); }

@keyframes etlmSurge {
  from { opacity: 0; transform: translateY(6px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #etlm-dlg[open] { animation: none; }
}

#etlm-dlg .etlm-dlg-caixa {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

#etlm-dlg .etlm-dlg-cab {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.125rem 1.25rem 0.875rem;
  border-bottom: 1px solid var(--etlm-linha);
}
#etlm-dlg .etlm-dlg-idt { flex: 1 1 auto; min-width: 0; }
#etlm-dlg .etlm-dlg-tit {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: var(--ds-text-base, 1rem);
  font-weight: 500;
  line-height: var(--ds-leading-snug, 1.3);
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
#etlm-dlg .etlm-dlg-ico { display: inline-flex; flex: none; }
#etlm-dlg .etlm-dlg-nome { min-width: 0; overflow-wrap: anywhere; }
#etlm-dlg .etlm-dlg-banco {
  margin: 0.25rem 0 0 1.5rem;
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  color: var(--etlm-fraco);
  overflow-wrap: anywhere;
}
#etlm-dlg .etlm-dlg-banco[hidden] { display: none; }

#etlm-dlg .etlm-dlg-x {
  appearance: none;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: -0.375rem -0.5rem 0 0;
  padding: 0;
  border: 0;
  border-radius: var(--ds-radius-sm, 0.5rem);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
#etlm-dlg .etlm-dlg-x svg { width: 1rem; height: 1rem; display: block; }
#etlm-dlg .etlm-dlg-x:hover { background: var(--etlm-hover); color: var(--text-primary); }

#etlm-dlg .etlm-dlg-corpo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem 1.25rem 1.25rem;
  font-size: var(--ds-text-sm, 0.875rem);
  line-height: var(--ds-leading-snug, 1.3);
}

#etlm-dlg .etlm-dlg-nota {
  margin: 0 0 0.875rem;
  font-size: var(--ds-text-xs, 0.75rem);
  color: var(--text-secondary);
}

/* fatos: rótulo à esquerda, valor à direita; empilha no estreito */
#etlm-dlg .etlm-fatos { margin: 0; display: grid; gap: 0.5rem; }
#etlm-dlg .etlm-fato {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: baseline;
}
#etlm-dlg .etlm-fato dt { color: var(--text-secondary); font-size: var(--ds-text-xs, 0.75rem); }
#etlm-dlg .etlm-fato dd {
  margin: 0;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.125rem 0.5rem;
  font-variant-numeric: tabular-nums;
}
#etlm-dlg .etlm-fato time { color: var(--text-primary); font-weight: 500; }
#etlm-dlg .etlm-rel { color: var(--etlm-fraco); font-size: var(--ds-text-xs, 0.75rem); }
#etlm-dlg .etlm-estado { color: var(--text-primary); font-weight: 500; }
#etlm-dlg .etlm-motivo { flex-basis: 100%; color: var(--text-secondary); overflow-wrap: anywhere; }

/* histórico */
#etlm-dlg .etlm-dlg-hist {
  margin-top: 1.125rem;
  padding-top: 1rem;
  border-top: 1px solid var(--etlm-linha);
}
#etlm-dlg .etlm-dlg-hist-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
}
#etlm-dlg .etlm-dlg-hist-cab h3 {
  margin: 0;
  font-size: var(--ds-text-xs, 0.75rem);
  font-weight: 500;
  color: var(--text-secondary);
}
#etlm-dlg .etlm-dlg-hist-conta {
  font-size: var(--ds-text-xs, 0.75rem);
  color: var(--etlm-fraco);
  font-variant-numeric: tabular-nums;
}

/* sequência compacta: mais antiga à esquerda, mais recente à direita */
#etlm-dlg .etlm-seq {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3125rem;
  margin: 0.625rem 0 0.75rem;
}
#etlm-dlg .etlm-pt {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex: none;
}
#etlm-dlg .etlm-pt--ok { background: var(--etlm-ok); opacity: 0.75; }
#etlm-dlg .etlm-pt--erro { background: var(--etlm-erro); }

/* Colunas (ícone | data | motivo) alinhadas entre os itens via subgrid: a Lufga não tem dígito
   tabular, então "26/09 22:19" e "28/09 09:19" têm larguras diferentes. Sem subgrid, cai na
   coluna fixa da declaração anterior. */
#etlm-dlg .etlm-hist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  column-gap: 0.625rem;
}
#etlm-dlg .etlm-hist-item {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 5.75rem minmax(0, 1fr);
  grid-template-columns: subgrid;
  align-items: baseline;
  column-gap: 0.625rem;
  padding: 0.4375rem 0;
  border-bottom: 1px solid var(--etlm-linha);
}
#etlm-dlg .etlm-hist-item:last-child { border-bottom: 0; }
#etlm-dlg .etlm-hist-item > .etlm-ico { width: 0.875rem; height: 0.875rem; align-self: center; }
#etlm-dlg .etlm-hist-item time {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#etlm-dlg .etlm-hist-motivo { min-width: 0; color: var(--text-secondary); overflow-wrap: anywhere; }
#etlm-dlg .etlm-hist-ok { color: var(--etlm-fraco); }

#etlm-dlg .etlm-dlg-vazio {
  margin: 1.125rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--etlm-linha);
  color: var(--etlm-fraco);
  font-size: var(--ds-text-xs, 0.75rem);
}

@media (max-width: 480px) {
  #etlm-dlg .etlm-dlg-cab { padding: 1rem 1rem 0.75rem; }
  #etlm-dlg .etlm-dlg-corpo { padding: 0.875rem 1rem 1rem; }
  #etlm-dlg .etlm-fato { grid-template-columns: minmax(0, 1fr); gap: 0.125rem; }
}