/* ==========================================================================
   Instâncias gerenciadas

   Cartões, não tabela: cada instância carrega três medidores contínuos e um
   histórico curto, e isso não cabe numa linha de tabela sem virar sopa de
   número. Todas as cores saem dos tokens de 01-tokens.css — nada de literal
   aqui, senão o tema escuro quebra.
   ========================================================================== */

.inst-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1rem;
  padding: 0 1rem 1.5rem;
}

.inst-cartao {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

/* ---------- cabeçalho ---------- */
.inst-cab {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
}

.inst-tit h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.inst-sub {
  margin: .2rem 0 0;
  font-size: 12px;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.inst-selos {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  justify-content: flex-end;
  flex-shrink: 0;
}

.inst-selo {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: .15rem .45rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-faint);
  white-space: nowrap;
}

.inst-selo[data-tom='ok'] { color: var(--ok, #128a5a); border-color: currentColor; }
.inst-selo[data-tom='info'] { color: var(--accent); border-color: currentColor; }
.inst-selo[data-tom='critico'] { color: var(--danger); border-color: currentColor; }

/* ---------- faixa "o que está acontecendo agora" ----------
   Fica logo abaixo do cabeçalho, antes dos números: quando há uma tarefa em
   curso, ela é a informação mais importante do cartão — os medidores ainda
   estão mostrando a leitura anterior. */
.inst-etapa {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 12px;
  padding: .45rem .6rem;
  border-radius: 6px;
  border: 1px solid var(--line);
  color: var(--ink-faint);
}

.inst-etapa[data-tom='ativo'] { color: var(--accent); border-color: currentColor; }
.inst-etapa[data-tom='atencao'] { color: var(--warn, #b8860b); border-color: currentColor; }

.inst-etapa-txt {
  flex: 1;
  overflow-wrap: anywhere;
}

.inst-etapa-tempo {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  opacity: .75;
}

/* O pulso é o que diz "está vivo" sem escrever mais uma palavra. Em espera ele
   fica parado de propósito: a fila não está fazendo nada ainda. */
.inst-pulso {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  animation: inst-pulsar 1.6s ease-in-out infinite;
}

.inst-etapa[data-tom='espera'] .inst-pulso { animation: none; opacity: .5; }

@keyframes inst-pulsar {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.8); }
}

@media (prefers-reduced-motion: reduce) {
  .inst-pulso { animation: none; }
}

/* ---------- medidores ---------- */
.inst-metricas,
.inst-cota {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.inst-cota {
  padding-top: .7rem;
  border-top: 1px solid var(--line);
}

.inst-medidor-cab {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
  font-size: 12px;
  margin-bottom: .25rem;
}

.inst-medidor-cab > :first-child {
  color: var(--ink-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inst-medidor-val {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  flex-shrink: 0;
}

.inst-trilho {
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.inst-barra {
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  transition: width .4s ease;
}

.inst-barra[data-tom='atencao'] { background: var(--warn, #b8860b); }
.inst-barra[data-tom='critico'] { background: var(--danger); }

/* sem leitura ainda: uma faixa neutra em vez de uma barra cheia, que leria
   como "100% usado" */
.inst-barra.indef {
  background: repeating-linear-gradient(90deg,
    var(--line) 0 8px, transparent 8px 16px);
}

.inst-avisos {
  margin: 0;
  font-size: 12px;
  color: var(--ink-faint);
}

/* Idade da leitura. Só aparece quando a amostra ficou velha — e aí precisa ter
   peso visual, porque os números logo acima parecem atuais e não são. */
.inst-idade {
  margin: 0;
  font-size: 12px;
  color: var(--warn, #b8860b);
}

/* Perdemos contato com o PAINEL: não é problema de uma instância, é de todas.
   Por isso vive no topo da lista, e não dentro de um cartão. */
.inst-desconectado {
  margin: 0 1rem 1rem;
  padding: .6rem .75rem;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--warn, #b8860b);
  border: 1px solid currentColor;
}

/* ---------- fatos ---------- */
.inst-fatos {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .25rem .75rem;
  margin: 0;
  padding-top: .7rem;
  border-top: 1px solid var(--line);
  font-size: 12px;
}

.inst-fatos dt { color: var(--ink-faint); }

.inst-fatos dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.inst-erro {
  margin: 0;
  padding: .5rem .65rem;
  border-radius: 6px;
  font-size: 12px;
  color: var(--danger);
  border: 1px solid currentColor;
  overflow-wrap: anywhere;
}

/* ---------- ações ---------- */
.inst-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.inst-acoes .hbtn { font-size: 12px; }
.inst-acoes .hbtn.danger { color: var(--danger); }

/* ---------- detalhes ---------- */
.inst-detalhes { font-size: 12px; }

.inst-detalhes summary {
  cursor: pointer;
  color: var(--ink-faint);
  padding: .2rem 0;
}

.inst-detalhes-corpo {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding-top: .5rem;
}

.inst-subtitulo {
  margin: .4rem 0 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-faint);
}

.inst-processos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.inst-processos li {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
}

.inst-processos .num {
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  flex-shrink: 0;
}

.inst-vazio { margin: 0; color: var(--ink-faint); }

/* ---------- formulário ---------- */
.inst-form {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  max-height: 60vh;
  overflow-y: auto;
  padding: .25rem .25rem .25rem 0;
}

.inst-campo {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.inst-campo > span {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-faint);
}

.inst-campo small {
  font-size: 11px;
  color: var(--ink-faint);
  line-height: 1.4;
}

.inst-campo textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  resize: vertical;
}

.inst-bloco {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: .7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.inst-nota {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-faint);
}

.inst-comando {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.5;
  padding: .6rem .7rem;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--bg);
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .inst-grade {
    grid-template-columns: 1fr;
    padding: 0 .75rem 1.25rem;
  }
}

/* ---------- detecção do que copiar ----------
   Lista de propostas com tamanho medido. O tamanho é a informação que decide:
   marcar /var/lib/docker/volumes é uma coisa quando são 2 MB e outra quando
   são 40 GB contra uma cota de 200. */
.inst-achados {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin-top: .5rem;
}

.inst-achado {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: .5rem;
  padding: .3rem .4rem;
  border-radius: 6px;
  border: 1px solid var(--line);
  font-size: 12px;
  cursor: pointer;
}

.inst-achado-caminho {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
}

.inst-achado-meta {
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.inst-nota-forte {
  color: var(--warn, #b8860b);
  border-left: 2px solid currentColor;
  padding-left: .5rem;
}

@media (max-width: 480px) {
  .inst-achado { grid-template-columns: auto 1fr; }
  .inst-achado-meta { grid-column: 2; text-align: left; }
}