/* status.css — Status page (#081). Tokens da casa (styles.css); cor só em estado.
   Barra de uptime: uma célula por dia. Vermelho/amarelo/verde = fora/degradado/operando,
   cinza TRACEJADO = sem notícia (não sei), vazio = sem medição (a prova ainda não existia). */

/* dentro de pai flex em COLUNA (.area-central do staging, .app-shell no celular) o margin:auto
   do .wrap cancela o stretch e a tela fica da largura mínima do conteúdo — mesma saída da #071 */
.wrap.status-page { width: 100%; }

/* .sc-status nasceu nos cards de sistema com margin-left:auto (encosta à direita do card);
   aqui ela acompanha o texto */
.status-page .sc-status { margin-left: 0; }

.status-page .st-banner {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--muted-2);
  border-radius: var(--radius); padding: 14px 16px; margin: 0 0 12px;
}
.status-page .st-banner.s-mudo { border-left-color: var(--red); }
.status-page .st-banner.s-atraso { border-left-color: var(--yellow); }
.status-page .st-banner.s-ok { border-left-color: var(--green); }
.status-page .st-banner-txt { font-size: 20px; font-weight: 800; color: var(--ink); }
.status-page .st-banner-sub { font-size: 12px; color: var(--muted); flex-basis: 100%; }

.status-page .st-filtros { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 6px; }
.status-page .st-cliente-filtro select {
  min-height: 32px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel);
  color: var(--ink); padding: 4px 12px; font: inherit; font-size: 12px;
}
.status-page .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.status-page .st-legenda { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; color: var(--muted); margin: 2px 0 12px; }
.status-page .st-legenda span { display: inline-flex; align-items: center; gap: 5px; }
.status-page .st-legenda .st-dia { width: 8px; height: 12px; display: inline-block; }
.status-page .st-legenda-nota { color: var(--muted-2); }

/* barra */
.st-barra { display: inline-flex; gap: 1px; align-items: stretch; height: 22px; width: 100%; min-width: 0; }
.st-dia { flex: 1 1 0; min-width: 2px; border-radius: 2px; background: var(--line-soft); }
.st-dia.d-g { background: var(--green); opacity: .85; }
.st-dia.d-a { background: var(--yellow); }
.st-dia.d-r { background: var(--red); }
.st-dia.d-s { background: transparent; border: 1px dashed var(--muted-2); }
.st-dia.d-n { background: var(--line-soft); }

/* grupo */
.status-page .st-grupo { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.status-page .st-grupo-cab {
  display: grid; grid-template-columns: 16px minmax(10rem, 1.2fr) auto auto minmax(12rem, 22rem);
  align-items: center; gap: 10px 14px; width: 100%; padding: 12px 16px; min-height: 52px;
  background: none; border: 0; border-bottom: 1px solid var(--line-soft); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer;
}
.status-page .st-grupo-cab:hover { background: var(--line-soft); }
.status-page .st-grupo-cab:focus-visible, .status-page .st-linha:focus-visible { outline: 2px solid var(--ink-accent); outline-offset: -2px; }
.status-page .st-seta { color: var(--muted); }
.status-page .st-grupo-nome { font-weight: 800; font-size: 15px; }
.status-page .st-grupo-conta { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* o grupo carrega o estado na borda — cor só onde há significado */
.status-page .st-grupo.g-mudo { border-left: 3px solid var(--red); }
.status-page .st-grupo.g-atraso { border-left: 3px solid var(--yellow); }
.status-page .st-grupo.g-sem_dado { border-left: 3px dashed var(--muted-2); }
.status-page .st-grupo.g-ok { border-left: 3px solid var(--green); }
.status-page .st-grupo.g-desligado { border-left: 3px solid var(--line); }
.status-page .st-banner.s-sem_dado { border-left-style: dashed; }
.status-page .st-banner.s-desligado { border-left-color: var(--line); }

/* serviço */
.status-page .st-lista { list-style: none; margin: 0; padding: 0; }
.status-page .st-servico { border-bottom: 1px solid var(--line-soft); }
.status-page .st-servico:last-child { border-bottom: 0; }
.status-page .st-servico.critico { box-shadow: inset 3px 0 0 var(--red); }
.status-page .st-servico.aberto { background: var(--line-soft); }
.status-page .st-linha {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(9rem, auto) minmax(12rem, 22rem) 4.5rem;
  align-items: center; gap: 6px 14px; width: 100%; padding: 10px 16px; min-height: 52px;
  background: none; border: 0; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.status-page .st-linha:hover { background: var(--line-soft); }
.status-page .st-nome { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.status-page .st-titulo { font-weight: 700; font-size: 14px; }
.status-page .st-cliente { font-size: 12px; color: var(--muted); }
.status-page .st-detalhe {
  flex-basis: 100%; font-size: 12px; color: var(--muted-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.status-page .st-estado { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.status-page .st-desde { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.status-page .st-uptime { text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; color: var(--ink); }
.status-page .st-vazio { padding: 14px 16px; font-size: 13px; color: var(--muted); }

/* provas (linha aberta) */
.status-page .st-provas { padding: 4px 16px 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.status-page .st-prova {
  display: grid; grid-template-columns: 11rem auto 1fr auto; gap: 4px 10px; align-items: center;
  font-size: 12px; background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 10px; padding: 8px 10px;
}
.status-page .st-prova.vazio { display: block; color: var(--muted); }
.status-page .st-prova-tipo { font-weight: 700; color: var(--ink); }
.status-page .st-prova-txt { color: var(--ink); overflow-wrap: anywhere; }
.status-page .st-prova-em { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.status-page .st-dono { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); padding: 2px 2px 0; }
.status-page .st-dono b { color: var(--ink); }
.status-page .st-motivo { color: var(--muted-2); }

/* incidentes */
.status-page .st-incidentes { margin-top: 18px; }
.status-page .st-tabela .col-titulo { max-width: 28rem; }
.status-page .st-prova-inc { font-size: 12px; color: var(--muted); }
.status-page .st-alerta { font-size: 11px; font-weight: 700; white-space: nowrap; }
.status-page .st-alerta.ok { color: var(--ink-ok); }
.status-page .st-alerta.err { color: var(--ink-err); }
.status-page .st-alerta.muted { color: var(--muted); font-weight: 400; }
.status-page .btn-link { background: none; border: 0; color: var(--ink-accent); font: inherit; cursor: pointer; padding: 0 4px; min-height: 44px; }

/* tablet: a barra desce para a linha de baixo */
@media (max-width: 1100px) {
  .status-page .st-grupo-cab { grid-template-columns: 16px 1fr auto; }
  .status-page .st-grupo-cab .st-grupo-conta { grid-column: 2 / 4; }
  .status-page .st-grupo-cab .st-barra { grid-column: 1 / 4; }
  .status-page .st-linha { grid-template-columns: minmax(0, 1fr) auto 4.5rem; }
  .status-page .st-linha .st-barra { grid-column: 1 / 4; grid-row: 2; }
}

/* até 1100px (sidebar ao lado) a tabela de incidentes vira card: 7 colunas não cabem, e
   tabela larga vira CARD, não rolagem lateral (régua da casa) */
@media (max-width: 1100px) {
  .status-page .st-tabela thead { display: none; }
  .status-page .st-tabela, .status-page .st-tabela tbody, .status-page .st-tabela tr, .status-page .st-tabela td { display: block; width: 100%; }
  .status-page .st-tabela tr { border-bottom: 1px solid var(--line); padding: 8px 0; }
  .status-page .st-tabela td { border: 0; padding: 3px 12px; white-space: normal; overflow-wrap: anywhere; max-width: none; }
  .status-page .st-tabela td[data-rotulo]::before {
    content: attr(data-rotulo); display: inline-block; min-width: 5.5rem; color: var(--muted); font-size: 11px;
  }
  .status-page .st-tabela .col-titulo { max-width: none; }
}

/* celular: linha vira card (nome / estado / barra / uptime), tabela vira pilha — nada de rolagem lateral */
@media (max-width: 640px) {
  .status-page .st-linha { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 14px; }
  .status-page .st-linha .st-estado { align-items: flex-end; }
  .status-page .st-linha .st-barra { grid-column: 1 / 3; }
  .status-page .st-linha .st-uptime { grid-column: 1 / 3; text-align: left; font-weight: 400; font-size: 11px; color: var(--muted); }
  .status-page .st-linha .st-uptime::before { content: "uptime no período: "; }
  .status-page .st-prova { grid-template-columns: 1fr auto; }
  .status-page .st-prova-txt, .status-page .st-prova-em { grid-column: 1 / 3; }
  .status-page .st-banner-txt { font-size: 17px; }
}

/* #160 — Para ficar verde: tudo que não está verde, o que falta e o dono. */
.st-pendencias th { cursor: pointer; white-space: nowrap; user-select: none; }
.st-pendencias td { vertical-align: top; }
.st-pendencias td .sub { color: var(--ink-muted, inherit); opacity: .8; font-size: 12px; margin-top: 2px; }
.st-pendencias td:nth-child(4) { min-width: 260px; }
@media (max-width: 720px) {
  .st-pendencias td:nth-child(4) { min-width: 200px; }
}