/* ==========================================================================
   Monitoramento de servidores -- componentes proprios do produto.
   SoftSul Software & Network

   O que esta aqui e' o que o ERP nao tem e o Monitoramento precisa: cartao
   de servidor, grafico de eventos por severidade, barras de uso de disco/
   memoria, relogio e uptime ao vivo. Segue o vocabulario e as variaveis de
   docs/ui/design-softsul.md (softsul-base.css), so cria classe nova pro que
   e de verdade especifico daqui (guia, secao 8, passo 7).

   Carregada DEPOIS de base.css (a folha antiga) e de softsul-base.css: os
   nomes de classe abaixo sao os MESMOS que varios helpers PHP compartilhados
   (ig_badge_status_servidor, ig_barra_percentual_html, etc, usados tambem em
   servidor.php e servidores-admin.php) ja emitem -- aqui so a cor/forma
   troca pro tema novo, sem precisar reescrever esses helpers nem as paginas
   que ainda nao foram convertidas pro vocabulario completo do guia.
   ========================================================================== */

/* --- layout da Visao geral --- */

/* Certificados e Eventos lado a lado quando cabe (>=560px cada);
   sozinho num card por vez, o painel de eventos sobrando no meio
   comparado ao grafico/grade de servidores (largura total) abaixo
   deixava um vazio visual entre as secoes. */
.grade-resumo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 14px;
}
/* min-width:0 nos cards: sem isto, o conteudo de cada card (a grade de
   .numero-cartao dentro dele) podia forcar o "min-content" da propria
   coluna do grid pra mais que os outros, e as duas colunas de 1fr
   deixavam de ficar do mesmo tamanho (visto na pratica: Certificados
   mais largo que Eventos, mesmo com "1fr" nos dois). */
.grade-resumo > .cartao { min-width: 0; }
/* softsul-base.css tem ".cartao + .cartao{margin-top:14px}" pra dar
   respiro entre cartoes EMPILHADOS em coluna normal -- mas essa regra
   dispara por qualquer par de .cartao adjacentes no HTML, inclusive
   lado a lado num grid. Resultado: so o Eventos (o segundo <div
   class="cartao"> do par) ganhava um empurrao pra baixo dentro da
   propria celula do grid, saindo desalinhado/menor que o Certificados
   ao lado. O "gap" do grid ja cuida do espacamento aqui. */
.grade-resumo > .cartao + .cartao { margin-top: 0; }

/* Contador de auto-atualizacao na barra do topo: a folha antiga
   (base.css) usa "var(--bg-card)", o cinza-escuro do tema velho --
   sobrava uma pilula preta na barra branca nova. */
.contador-atualizacao {
  background: var(--leve);
  border-color: var(--traco);
  color: var(--suave);
}

/* A folha antiga (base.css) tambem define ".cartao", so que pro card de
   login centralizado (max-width:380px) -- sobrava esse limite tambem
   aqui, prendendo o card do grafico de eventos (que devia ocupar a
   largura toda) numa faixinha estreita. Escopado a .conteudo (a area
   de conteudo do shell novo) pra nao mexer em totp-setup.php/
   trocar-senha.php, que ainda usam ".pagina-central" + esse ".cartao"
   antigo de proposito, estreito mesmo. */
.conteudo .cartao { max-width: none; }

/* --- grade e cartao de servidor (Visao geral) --- */

.grade-cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.cartao-servidor {
  background: var(--branco);
  border: 1px solid var(--traco);
  border-left-width: 4px;
  border-radius: var(--r-g);
  padding: 16px 18px;
  text-decoration: none;
  color: var(--tinta);
  display: block;
  transition: border-color .12s, box-shadow .12s;
}
/* display:block acima ganha do [hidden] do navegador (regra de autor sempre
   vence a folha padrao do user-agent) -- sem isto, o filtro de servidores
   marcaria "hidden" mas o cartao continuaria visivel. */
.cartao-servidor[hidden] { display: none; }
.cartao-servidor:hover { border-color: var(--acento-borda); box-shadow: var(--sombra); text-decoration: none }
.cartao-servidor.semaforo-verde { border-left-color: var(--verde); }
.cartao-servidor.semaforo-amarelo { border-left-color: var(--ambar); }
.cartao-servidor.semaforo-vermelho { border-left-color: var(--rubi); }
.cartao-servidor .nome { font-weight: 700; margin-bottom: 2px; }
.cartao-servidor .hostname { color: var(--suave); font-family: var(--dado); font-size: 12px; margin-bottom: 10px; overflow-wrap: anywhere; }
/* flex-wrap + gap: com "visto ha 1d 3h 12min" (mais longo) ao lado do selo de
   status, a linha estourava a caixa do cartao; agora quebra pra linha de baixo. */
.cartao-servidor .linha-status { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 10px; font-size: 12.5px; color: var(--suave); }
.cartao-servidor .linha-status > span { min-width: 0; }
.cartao-servidor .linha-status.espacada { margin-top: 8px; }

/* Badge do grupo: uma cor por grupo (ig_atribuir_cores_grupos(), em
   dashboard_helpers.php), pra destacar de relance a qual grupo cada cartao
   pertence quando a grade mistura cartoes de varios grupos numa mesma
   linha. Paleta evita verde/amarelo/vermelho puro de proposito: essas cores
   ja tem significado de status (o semaforo do proprio cartao). Tons claros
   com texto escuro, mesmo espirito das cores semanticas do tema (par
   forte/suporte), so que aqui sao 8 tons neutros-de-marca em vez de 3
   estados. */
.badge-grupo {
  display: inline-block;
  font-family: var(--dado);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 2px 9px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.grupo-cor-neutro { background: var(--leve); color: var(--suave); }
.grupo-cor-0 { background: #E7E8FC; color: #4A50B8; }
.grupo-cor-1 { background: #DBF3EE; color: #0E7A67; }
.grupo-cor-2 { background: #FBE3EF; color: #B23670; }
.grupo-cor-3 { background: #FDEADB; color: #B0600C; }
.grupo-cor-4 { background: #DBF2F8; color: #0E7A99; }
.grupo-cor-5 { background: #F0E3FC; color: #7A2FBE; }
.grupo-cor-6 { background: #FCE3E7; color: #B03349; }
.grupo-cor-7 { background: #DCEAFB; color: #17588F; }

/* Badge de sistema/software (SO, Apache, PHP, Tomcat, Java): neutro de
   proposito, natureza diferente do badge de grupo (o que roda na maquina,
   nao de quem e' a maquina). */
.badge-so {
  display: inline-block;
  font-family: var(--dado);
  font-size: 10px;
  font-weight: 600;
  color: var(--suave);
  background: var(--leve);
  padding: 1px 8px;
  border-radius: 999px;
  margin-bottom: 8px;
}

/* --- resumo em numeros (Certificados/Eventos, Visao geral) --- */
/* Mesmo componente ".metrica" do guia (design-softsul.md secao 4), so que
   ainda nao migrado por nome nas paginas que nao passaram pela conversao
   completa -- eventos.php, servidor.php etc. continuam gerando
   .resumo-numeros/.numero-cartao por enquanto. */
.resumo-numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
}
.numero-cartao {
  min-width: 0;
  background: var(--branco);
  border: 1px solid var(--traco);
  border-radius: var(--r-g);
  padding: 15px 17px;
}
.numero-cartao .valor { font-family: var(--dado); font-size: 25px; font-weight: 600; letter-spacing: -.02em; }
.numero-cartao .rotulo { color: var(--suave); font-size: 12px; font-weight: 600; margin-top: 3px; }

/* --- grafico de barras por severidade (sem estilo inline, CSP nao permite) --- */

.grafico-barras {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 160px;
}
.grafico-barras .barra-coluna { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.grafico-barras .rotulo-dia { font-family: var(--dado); font-size: 10px; color: var(--fraca); margin-top: 8px; white-space: nowrap; }

.grafico-barras .grupo-barras {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
}
/* Barras mais grossas (14px, era 7px) e grafico mais alto (160px, era
   90px) -- pedido explicito, "grafico magro/fino demais". min-height:
   2px (era 1px) pra um valor baixo continuar visivel numa barra mais
   larga. */
.grafico-barras .barra-severidade { flex: 1; min-width: 0; max-width: 14px; border-radius: 3px 3px 0 0; min-height: 2px; }
.grafico-barras .barra-severidade.h-vazio { height: 0; min-height: 0; }
.grafico-barras .barra-baixa    { background: var(--verde); }
.grafico-barras .barra-media    { background: var(--indigo); }
.grafico-barras .barra-alta     { background: var(--ambar); }
.grafico-barras .barra-critica  { background: var(--rubi); }

.legenda-severidade { display: flex; flex-wrap: wrap; gap: 14px; }
.legenda-severidade .item-legenda { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--suave); }
.legenda-severidade .ponto { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.legenda-severidade .ponto-baixa   { background: var(--verde); }
.legenda-severidade .ponto-media   { background: var(--indigo); }
.legenda-severidade .ponto-alta    { background: var(--ambar); }
.legenda-severidade .ponto-critica { background: var(--rubi); }

/* --- recursos: barra de uso (disco/memoria) + badge de temperatura --- */

.barra-percentual {
  width: 100%;
  height: 8px;
  background: var(--leve);
  border-radius: 4px;
  overflow: hidden;
}
.barra-percentual .preenchimento { height: 100%; background: var(--indigo); border-radius: 4px; }
.barra-percentual .preenchimento.aviso { background: var(--ambar); }
.barra-percentual .preenchimento.critico { background: var(--rubi); }

.badge-temperatura {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  font-family: var(--dado);
  font-size: 11px;
  font-weight: 600;
  background: var(--branco);
  border: 1px solid var(--traco);
  color: var(--tinta);
}
.badge-temperatura.aviso { color: var(--ambar); border-color: var(--ambar); background: var(--ambar-sup); }
.badge-temperatura.critico { color: var(--rubi); border-color: var(--rubi); background: var(--rubi-sup); }

.recursos-mini {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--traco);
}
.recurso-mini-item {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--dado);
  font-size: 10px;
  color: var(--fraca);
}
.recurso-mini-topo { display: flex; align-items: center; gap: 6px; }
.recurso-mini-item .barra-percentual { flex: 1; }
.recurso-valor { color: var(--suave); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* --- relogio e uptime ao vivo de cada servidor --- */

.relogio-servidor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--traco);
}
.relogio-hora { font-family: var(--dado); font-size: 13px; color: var(--tinta); letter-spacing: .02em; }

.badge-relogio {
  font-family: var(--dado);
  font-size: 10.5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--leve);
  color: var(--suave);
  white-space: nowrap;
}
.badge-relogio.ok { background: var(--indigo-sup); color: var(--indigo-fte); }
.badge-relogio.aviso { background: var(--ambar-sup); color: var(--ambar); }
.badge-relogio.alerta { background: var(--rubi-sup); color: var(--rubi); }

.uptime-servidor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--suave);
}
.uptime-servidor .uptime-valor { font-family: var(--dado); color: var(--tinta); }

/* A folha antiga (base.css) tambem define ".vazio", so texto italico
   simples -- nao redefine "display", entao o italico sobrevive por cima
   da versao nova (cartao com borda) por nao ter sido sobrescrito. So
   texto normal aqui, casando com o desenho de cartao do guia. */
.vazio { font-style: normal; }

/* ==========================================================================
   Componentes compartilhados das paginas ainda nao convertidas pro
   vocabulario completo do guia (Eventos, Servidores, Certificados,
   Usuarios, Alertas, Ignorar...). Mesmos nomes de classe de sempre --
   so troca cor/tipografia/forma pro tema novo, sem mexer no HTML nem
   nos helpers PHP que geram esse HTML (ig_badge_severidade() etc). Ver
   comentario de topo do arquivo: e o mesmo espirito do card de servidor
   acima, so que pra tabela/filtro/modal em vez de card.
   ========================================================================== */

/* --- badges de severidade/triagem/status (span.badge) --- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: 999px; padding: 3px 11px;
  font-size: 11.5px; font-weight: 600;
  /* inline-flex tem vertical-align:baseline por padrao -- numa celula com
     outro elemento de altura diferente do lado (ex.: .botao-pontos-vista,
     30px), o alinhamento por baseline deixa os dois em alturas visualmente
     diferentes dentro da linha. middle mantem tudo centralizado igual. */
  vertical-align: middle;
}
.badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.badge-baixa    { background: var(--verde-sup); color: var(--verde); }
.badge-media    { background: var(--indigo-sup); color: var(--indigo-fte); }
.badge-alta     { background: var(--ambar-sup); color: var(--ambar); }
.badge-critica  { background: var(--rubi-sup); color: var(--rubi); }
.badge-triagem-novo       { background: var(--indigo-sup); color: var(--indigo-fte); }
.badge-triagem-revisando  { background: var(--ambar-sup); color: var(--ambar); }
.badge-triagem-legitimo   { background: var(--verde-sup); color: var(--verde); }
.badge-triagem-malicioso  { background: var(--rubi-sup); color: var(--rubi); }
.badge-triagem-ignorado   { background: var(--leve); color: var(--suave); border: 0; }
.badge-triagem-ignorado::before { display: none; }
.badge-ativa            { background: var(--verde-sup); color: var(--verde); }
.badge-status-ativo       { background: var(--verde-sup); color: var(--verde); }
.badge-status-silencioso  { background: var(--rubi-sup); color: var(--rubi); }
.badge-status-pendente    { background: var(--ambar-sup); color: var(--ambar); }
/* "Desativado"/"Inativa"/"Inativo" (servidor, regra de alerta/ignore,
   usuario, 2FA): usava a mesma classe do "Ignorado" de triagem
   (cinza neutro) so por reuso de conveniencia no HTML original -- sao
   estados bem diferentes (triagem "ignorado" e uma decisao valida;
   "desativado" e algo desligado, que vale destacar). Vermelho aqui. */
.badge-status-desativado { background: var(--rubi-sup); color: var(--rubi); border: 0; }

/* --- tabela de dados --- */
.tabela-wrap {
  overflow-x: auto; background: var(--branco);
  border: 1px solid var(--traco); border-radius: var(--r-g);
}
table.tabela-dados { font-size: 13.5px; }
table.tabela-dados th {
  color: var(--fraca); font-family: var(--dado); font-size: 10.5px;
  font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  padding: 12px 16px; border-bottom: 1px solid var(--traco);
}

/* Cabecalho de coluna ordenavel (ig_th_ordenavel, dashboard_helpers.php):
   o <a> ocupa a celula toda (padding do th zerado, herdado pelo link) pra
   a area clicavel nao ficar so do tamanho do texto. */
table.tabela-dados th:has(.th-ordenavel) { padding: 0; }
.th-ordenavel {
  display: block; padding: 12px 16px; color: inherit; text-decoration: none;
  white-space: nowrap; cursor: pointer;
}
.th-ordenavel:hover { color: var(--tinta); }
.th-ordenavel-ativo { color: var(--indigo); }
.seta-ordem { font-size: 10px; }
table.tabela-dados td {
  padding: 10px 16px; border-bottom: 1px solid var(--traco); color: var(--tinta);
  /* Reafirma explicito aqui (nao so herdar de base.css): numa linha mais
     alta que as outras (URL longa quebrando em 2 linhas, por exemplo),
     badge/pill das demais celulas ficava colado no topo em vez de
     centralizado no meio da linha. */
  vertical-align: middle;
}
table.tabela-dados tr:last-child td { border-bottom: 0; }
table.tabela-dados tr:hover td { background: #FBFCFF; }
table.tabela-dados a { color: var(--tinta); }
table.tabela-dados a:hover { color: var(--indigo); }
table.tabela-dados tr.linha-grupo td {
  background: var(--leve); color: var(--suave);
  font-family: var(--dado); font-size: 10.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
}
table.tabela-dados tr.linha-grupo:hover td { background: var(--leve); }
.caminho-mono { font-family: var(--dado); font-size: 12.5px; color: var(--tinta); }
.link-secundario { color: var(--fraca) !important; font-size: 11px; }
.link-secundario:hover { color: var(--indigo) !important; }

/* --- botao so-icone (acao de linha de tabela, abrir modal) --- */
button.botao-icone {
  width: 32px; height: 32px; background: var(--branco);
  border: 1px solid var(--traco); border-radius: var(--r-p); color: var(--suave);
  /* base.css (tema antigo) tem "button{margin-top:24px}" global -- nunca
     resetado aqui. Sozinho nao dava pra notar (todo botao-icone de uma
     mesma linha de acoes leva o mesmo empurrao, entao ficam consistentes
     ENTRE ELES), mas desalinha essa coluna inteira ~12px pra baixo em
     relacao as celulas vizinhas sem <button> (badge, texto). Achado ao
     investigar o botao-pontos-vista, mas o bug e' de TODO .botao-icone
     do sistema (todas as tabelas), corrigido aqui na raiz. */
  margin: 0;
}
button.botao-icone:hover { background: var(--leve); border-color: var(--traco2); color: var(--indigo); }
button.botao-icone.perigo:hover { color: var(--rubi); border-color: var(--rubi); background: var(--rubi-sup); }

/* --- barra de filtros (form-filtros) --- */
.form-filtros {
  background: var(--branco); border: 1px solid var(--traco);
  border-radius: var(--r-g); padding: 16px 18px;
}
.form-filtros label { color: var(--suave); font-weight: 600; }
.form-filtros input, .form-filtros select {
  background: var(--leve); border: 1px solid var(--traco); color: var(--tinta);
  transition: border-color .12s, background-color .12s;
}
.form-filtros input:focus, .form-filtros select:focus {
  background: var(--branco); border-color: var(--indigo); outline: none; box-shadow: var(--anel);
}
.form-filtros button:not(.botao-icone) {
  background: var(--gradiente); color: #fff; border: 0; border-radius: var(--r);
  font-weight: 700; box-shadow: 0 1px 2px rgba(10,100,131,.28);
}

/* --- modal (dialog.modal) --- */
dialog.modal {
  background: var(--branco); color: var(--tinta);
  border-radius: var(--r-g); box-shadow: var(--sombra-alta);
}
dialog.modal::backdrop { background: rgba(21,29,51,.5); }
.modal-cabecalho { border-bottom: 1px solid var(--traco); }
.modal-cabecalho h2 { color: var(--tinta); font-weight: 700; }
.form-modal label { color: var(--suave); font-weight: 600; font-size: 12.5px; }
.form-modal input, .form-modal select {
  background: var(--leve); border: 1px solid var(--traco); color: var(--tinta); border-radius: var(--r-p);
}
.form-modal input:focus, .form-modal select:focus {
  background: var(--branco); border-color: var(--indigo); outline: none; box-shadow: var(--anel);
}
/* Botoes do rodape do modal: o de confirmar e um <button type="submit">
   cru (sem .botao), herdando o azul velho do "button{}" generico; o de
   cancelar usa ".secundario", tambem so definido na folha antiga. */
.acoes-modal button {
  background: var(--gradiente); color: #fff; border: 0; border-radius: var(--r); font-weight: 700;
  margin-top: 0;
}
.acoes-modal button:hover { filter: saturate(1.08) brightness(1.04); }
.acoes-modal button.secundario {
  background: var(--branco); color: var(--tinta); border: 1px solid var(--traco2); font-weight: 600;
}
.acoes-modal button.secundario:hover { background: var(--leve); filter: none; }
.acoes-modal button.perigo { background: var(--rubi); }
.acoes-modal button.perigo:hover { background: #A83240; filter: none; }

/* --- textos e mensagens de pagina --- */
h1.titulo-pagina { color: var(--tinta); }
.subtitulo-secao { color: var(--tinta); font-weight: 700; }
.subtitulo-secao .ver-todos { color: var(--indigo); }
.migalha, .migalha a, .ajuda, .texto-fraco { color: var(--suave); }
.erro {
  background: var(--rubi-sup); border: 1px solid var(--rubi); color: #7E2630;
  border-radius: var(--r);
}

/* --- paginacao (rodape das listas) --- */
.paginacao a, .paginacao span.pagina-atual, .paginacao span.reticencias { color: var(--tinta); }
.paginacao a { background: var(--branco); border: 1px solid var(--traco); }
.paginacao a:hover { background: var(--leve); border-color: var(--traco2); }
.paginacao span.pagina-atual { background: var(--indigo); color: #fff; }
.paginacao span.reticencias { color: var(--fraca); }

/* --- papel do usuario (Usuarios) --- */
.tag-papel { background: var(--indigo-sup); border: 1px solid var(--acento-borda); color: var(--indigo-fte); }

/* --- badges lado a lado numa mesma celula (ex.: status + cadeia
   incompleta, Certificados) -- sem isto, dois <span> separados so por
   espaco em branco quebram linha se a coluna for estreita. */
.badges-linha { display: inline-flex; align-items: center; gap: 6px; flex-wrap: nowrap; }

/* --- runbook / qualquer texto vindo de markdown (.documento) ---
   Usava var(--texto)/var(--texto-fraco), os tons quase-brancos do tema
   escuro antigo -- em fundo branco isso lia como texto "invisivel"
   (baixissimo contraste), nao literalmente sem cor nenhuma, so parecia
   por causa disso. code/pre tambem tinham fundo quase-preto, pensado
   pra ficar em cima do fundo escuro geral, nao como bloco proprio. */
.documento { color: var(--tinta); }
.documento h2, .documento h3 { color: var(--tinta); }
.documento h4 { color: var(--suave); }
.documento p, .documento li { color: var(--tinta); }
.documento a { color: var(--indigo); }
.documento code {
  background: var(--leve); border: 1px solid var(--traco); color: var(--tinta);
}
.documento pre {
  background: var(--leve); border: 1px solid var(--traco);
}
.documento pre code { color: var(--tinta); }

/* --- tabelas no celular: uma linha so, sem quebrar palavra --- */
/* .conteudo ganha "overflow-wrap:anywhere" abaixo de 820px (softsul-
   base.css) pra endereco/e-mail longo nao estourar a tela -- mas dentro
   de uma tabela com rolagem propria (.tabela-wrap, overflow-x:auto) o
   efeito e o oposto do que se quer: em vez de rolar pro lado, cada
   celula virava uma coluna de uma letra por linha (visto na pratica,
   print do usuario). Tabela e pra rolar, nao quebrar. */
@media (max-width: 820px) {
  /* Pedido explicito: NENHUMA celula quebra linha no celular, nem
     caminho de arquivo/URL -- so rolagem horizontal mesmo. Primeira
     tentativa aqui tinha deixado ".caminho-mono" de fora achando que
     ajudava (evitar rolagem enorme num caminho de 200 caracteres), mas
     na pratica foi o que mais quebrou feio: "word-break:break-all" do
     ".caminho-mono" (base.css) força quebra ENTRE QUALQUER PAR DE
     CARACTERES quando a coluna e estreita -- um hostname sem espaco
     nenhum (tipo "monitor.nonoai.rs.gov.br") virava uma coluna de uma
     letra por linha, exatamente o print que motivou o pedido. */
  .tabela-wrap table.tabela-dados,
  .tabela-wrap table.tabela-dados td,
  .tabela-wrap table.tabela-dados th {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
  }

  /* table.tabela-uptime (Uptime) no celular: as duas tentativas
     anteriores (so desligar table-layout:fixed, depois tambem soltar o
     max-width:100% de .celula-nome-truncada/.celula-url-truncada) NAO
     resolveram de verdade -- uma regra IGUAL ("table.tabela-uptime {
     table-layout: fixed; }", mais abaixo no arquivo, fora do media
     query) tem a MESMA especificidade e vem DEPOIS no arquivo, entao
     ganha do override de dentro do media query mesmo com a media query
     valendo (empate de especificidade = ganha quem vem por ultimo no
     arquivo, nao quem "faz mais sentido"). Confirmado com o navegador
     do proprio usuario simulando celular: colunas Nome/URL sumindo,
     "Status" sobreposto em "Nome", de novo.
     Pedido explicito do usuario depois de ver isso ao vivo: nao insistir
     em rolagem horizontal pra essa tabela (ela tem 7 colunas, larga
     demais mesmo rolando) -- quebrar cada linha em DUAS: Ativo+Nome
     numa linha, o resto (URL/Status/Disp/Pontos/Acoes) na linha de
     baixo. Isso abandona a tabela HTML de verdade (thead vira inutil
     num layout em cartao, entao fica escondido so no celular -- ordenar
     coluna continua funcionando normalmente no computador) e empilha
     via flexbox, na ordem em que as celulas ja vem no HTML (nao precisa
     reordenar nada: as duas primeiras ja sao Ativo/Nome). */
  table.tabela-uptime thead { display: none; }
  table.tabela-uptime, table.tabela-uptime tbody { display: block; width: 100%; }
  table.tabela-uptime tr {
    display: flex; flex-wrap: wrap; align-items: center;
    column-gap: 10px; row-gap: 6px;
    padding: 12px 16px; border-bottom: 1px solid var(--traco);
  }
  table.tabela-uptime tr:last-child { border-bottom: 0; }
  table.tabela-uptime td {
    display: block; border: 0; padding: 0; white-space: nowrap;
  }
  /* 1a celula (Ativo) e' so o badge, largura natural; 2a (Nome) estica
     pro resto da 1a linha. */
  table.tabela-uptime td:nth-child(2) {
    flex: 1 1 auto; min-width: 0; max-width: none;
  }
  /* 3a celula (URL) com largura 100% forca a quebra de linha aqui (truque
     classico de flex-wrap: um item "cheio" sempre comeca linha nova),
     entao URL/Status/Disp/Pontos/Acoes (3a a 7a) caem juntos na 2a linha. */
  table.tabela-uptime td:nth-child(3) {
    flex-basis: 100%; max-width: none; overflow: hidden; text-overflow: ellipsis;
  }

  /* "versao 1.10" no rodape do menu: a folha da casa esconde .rodape
     no celular de proposito (o menu fecha por padrao, "rodape" original
     era so pra rail sempre visivel) -- aqui o menu abre por cima como
     lista, entao o rodape volta a fazer sentido dentro dela, ancorado
     embaixo a esquerda igual no computador. */
  .rail .rodape { display: block; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--traco); text-align: left; }

  /* Botao hamburguer (.abrir-menu) e o nome da pagina atual (.onde-estou)
     sao classes da folha da casa (softsul-base.css, compartilhada com os
     outros ~13 sites deste servidor -- por isso o reposicionamento fica
     aqui, so em monitoramento.css, que so este site carrega, em vez de
     mexer no arquivo compartilhado). Ordem no HTML e' logo, hamburguer,
     nome da pagina -- entao o hamburguer nascia colado no logo/wordmark
     "Monitoramento", visualmente estranho. "order" do flex (.marca ja e'
     display:flex na folha da casa) inverte hamburguer<->nome da pagina;
     o margin-left:auto que ja existia em .onde-estou continua empurrando
     os dois (nome + hamburguer, agora nesta ordem) pra ponta direita. */
  .onde-estou { order: 1; }
  .abrir-menu { order: 2; }
}

/* --- <select> generico --- */
/* base.css tem um "select{background:#0c111c;...}" pra QUALQUER select
   sem estilo mais especifico -- pegava o de "itens por pagina" do
   rodape das listas (e qualquer outro select avulso na mesma situacao). */
select {
  background: var(--leve); border: 1px solid var(--traco); color: var(--tinta);
}
select:focus { background: var(--branco); border-color: var(--indigo); outline: none; box-shadow: var(--anel); }

/* --- painel de detalhe (servidor.php, evento.php) --- */
/* Mesma causa dos bugs de contraste anteriores (badge com borda,
   .documento do runbook): ".painel" e' fundo escuro do tema antigo
   (var(--bg-card)), e o texto do corpo agora e' escuro por padrao
   (body{color:var(--tinta)}, softsul-base.css) -- valor ficava com
   texto escuro em fundo escuro, invisivel (nao "sem cor", so parecia
   por causa do contraste). Restilizado pro cartao branco do guia. */
.painel {
  background: var(--branco); border: 1px solid var(--traco);
  border-radius: var(--r-g); padding: 20px 22px;
}
.painel h2 { font-size: 15px; font-weight: 700; color: var(--tinta); }
.grade-campos .campo .rotulo {
  font-family: var(--dado); font-size: 10.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--fraca);
}
.grade-campos .campo .valor { font-size: 13.5px; color: var(--tinta); word-break: break-word; }

/* --- caixa de comando (modal "Comando de instalacao", servidores-admin.php;
   tambem senha gerada em usuarios-admin.php) --- */
/* Mesmo padrao dos bugs acima: ".chave-totp" (base.css antigo) tem fundo
   quase-preto fixo (#0c111c) que nunca foi pensado pro tema claro. Escopado
   em ".conteudo" pra nao mexer no totp-setup.php/trocar-senha.php, que sao
   paginas avulsas (sem o wrapper .conteudo do shell novo) e continuam de
   proposito no visual antigo ate serem convertidas. */
.conteudo .chave-totp {
  background: var(--leve); border: 1px solid var(--traco); color: var(--tinta);
}

/* --- uptime-admin.php: par de campos numericos lado a lado (faixa de
   status HTTP esperado, ex. "200 ate 399") --- */
.campo-intervalo { display: flex; align-items: center; gap: 8px; }
.campo-intervalo input { width: 90px; }
.campo-intervalo span { color: var(--fraca); font-size: 13px; }


/* Generico: forca uma celula de tabela a nao quebrar linha, mesmo fora do
   contexto mobile (@media 820px acima ja cobre TODAS as celulas no
   celular) -- usado em colunas com badge/link curto que quebravam sem
   necessidade so por causa da largura da coluna (Status/Pontos de vista
   em uptime-admin.php). */
.texto-nowrap { white-space: nowrap; }

/* Modal mais largo que o padrao (min(520px,92vw)), pra tabela com mais
   colunas (historico de incidentes, uptime-admin.php) nao ficar
   espremida.
   Tambem limita a altura e vira coluna flex: cabecalho e rodape (botao
   Fechar) ficam fixos, so ".modal-corpo" rola -- sem isso, o <dialog>
   inteiro virava UM scroll so (padrao do navegador quando o conteudo
   estoura a altura), empurrando o botao Fechar pra baixo da dobra junto
   com a lista, obrigando rolar ate o fim so pra fechar. */
dialog.modal.modal-largo {
  width: min(80vw, 1200px);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
}
dialog.modal.modal-largo .modal-corpo { overflow-y: auto; flex: 1 1 auto; min-height: 0; }
dialog.modal.modal-largo .acoes-modal { flex: 0 0 auto; border-top: 1px solid var(--traco); padding: 14px 20px; margin: 0; }

/* Botao "18/18 ok" (pontos de vista, uptime-admin.php): NAO e' ".botao-icone"
   (essa classe e' uma caixa fixa 32x32 pra 1 glifo so, o texto "18/18 ok"
   vazava pra fora da caixa e ficava com fonte grande demais pro espaco --
   erro nosso ao reusar a classe errada pra um botao com texto). Pilula de
   largura automatica, mesmo padrao visual de .botao-icone (borda + hover)
   mas dimensionada pro conteudo. */
.botao-pontos-vista {
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px; padding: 0 12px; border-radius: 999px;
  background: var(--branco); border: 1px solid var(--traco); color: var(--suave);
  font-family: var(--dado); font-size: 12.5px; font-weight: 600;
  white-space: nowrap; cursor: pointer;
  vertical-align: middle;
  /* Causa real do desalinhamento (nao era so vertical-align): base.css
     (tema antigo) tem "button{margin-top:24px}" global, que este botao
     -- e TODO .botao-icone, ver reset abaixo -- herdava sem querer. Um
     <span> (badge) do lado nao sofre isso, so o <button>, daí ficar
     visivelmente mais baixo que o badge na mesma celula. */
  margin: 0;
}
.botao-pontos-vista:hover { background: var(--leve); border-color: var(--traco2); color: var(--indigo); }

/* Destaque condicional nos cartoes de numero da Visao geral (Certificados/
   Eventos/Uptime): so aplicado via PHP quando o valor e' > 0 (nao faz
   sentido pintar de vermelho um contador zerado). Sem cor "erro" dedicada
   no guia (so verde/ambar/rubi), entao "erro de conexao" usa o proprio
   acento (indigo/ciano) do produto -- visualmente distinto dos outros 2. */
.numero-cartao.alerta-critico { background: var(--rubi-sup); border-color: var(--rubi); }
.numero-cartao.alerta-critico .valor { color: var(--rubi); }
.numero-cartao.alerta-atencao { background: var(--ambar-sup); border-color: var(--ambar); }
.numero-cartao.alerta-atencao .valor { color: var(--ambar); }
.numero-cartao.alerta-info { background: var(--indigo-sup); border-color: var(--indigo); }
.numero-cartao.alerta-info .valor { color: var(--indigo); }

/* Cartoes de resumo do Uptime como filtro clicavel (pedido do usuario:
   "crie filtro para fora do ar e no ar"): classe propria em vez de mudar
   ".numero-cartao" na marca -- esse componente e' compartilhado com
   Certificados/Eventos/servidor.php e o modal de estatisticas 30/90/180d
   desta mesma pagina, que continuam so <div>, nao clicaveis. */
.numero-cartao-filtro,
.numero-cartao-filtro:hover,
.numero-cartao-filtro:visited,
.numero-cartao-filtro:active {
  display: block; text-decoration: none; color: inherit; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.numero-cartao-filtro:hover { border-color: var(--traco2); }
.numero-cartao-filtro-ativo {
  border-color: var(--indigo); box-shadow: 0 0 0 1px var(--indigo) inset;
}

/* Tabela principal de uptime-admin.php: table-layout:fixed com largura
   por coluna (colgroup no HTML) -- SEM isso (table-layout:auto, o padrao
   de .tabela-dados) o navegador reparte o espaco livre entre TODAS as
   colunas meio que igualmente quando as linhas sao poucas/curtas,
   esticando badge/pilula (Status, Disponibilidade, Pontos) bem alem do
   que precisam e deixando "Nome"/"URL" apertados do mesmo jeito --
   exatamente o "colunas distantes, nome nao aparece completo" reportado.
   Com largura fixa nas colunas de badge, so Nome/URL (sem width, ver
   abaixo) crescem pra ocupar o que sobra. */
table.tabela-uptime { table-layout: fixed; }
table.tabela-uptime .col-uptime-ativo { width: 70px; }
table.tabela-uptime .col-uptime-status { width: 96px; }
table.tabela-uptime .col-uptime-disp { width: 96px; }
table.tabela-uptime .col-uptime-pontos { width: 92px; }
table.tabela-uptime .col-uptime-acoes { width: 172px; }
/* col-uptime-nome/col-uptime-url ficam sem width: dividem o espaco que
   sobrar das colunas fixas acima. */

/* Cortadas com "..." em vez de quebrar linha ou estourar a coluna --
   max-width:100% (nao mais um px fixo) porque agora quem define o
   tamanho de verdade e' a largura da COLUNA (colgroup, acima). title
   (tambem no <a> da URL, ver uptime-admin.php) mostra o texto completo
   no hover. */
.celula-nome-truncada { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.celula-url-truncada { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.celula-url-truncada a { color: inherit; text-decoration: none; }
.celula-url-truncada a:hover { text-decoration: underline; color: var(--indigo); }

/* "versao X.Y" no rodape do menu lateral nunca ficou de verdade ancorada
   embaixo (pedido ja de uma sessao anterior): ".rail .rodape{margin-top:
   auto}" (softsul-base.css) so empurra pra baixo dentro de um container
   FLEX -- e "<nav class="itens-rail">", o pai direto do rodape, nunca
   virou flex no desktop (so dentro do @media mobile, softsul-base.css).
   Sem isso o auto-margin nao tinha efeito nenhum (resolve pra 0 em fluxo
   normal), o rodape so ficava colado depois do ultimo item -- ficava
   "quase" embaixo com poucos itens, mas nunca ancorado de verdade, e
   ficou mais evidente com a lista maior (grupos Monitoramento/
   Administracao). Escopado ao desktop pra nao brigar com o
   ".itens-rail{display:none}" do mobile (que abre por cima como lista,
   comportamento proprio, ver comentario proximo aquele bloco). */
@media (min-width: 821px) {
  .rail .itens-rail { display: flex; flex-direction: column; flex: 1; min-height: 0; }
}

/* Estatisticas de disponibilidade (30/90/180 dias) no topo do modal
   Historico, uptime-admin.php -- .numero-cartao ja vem com padding certo
   pro "valor"/"rotulo" do resto do sistema, so falta o espaco acima do
   detalhe (quedas/tempo fora do ar) que fica um pouco menor e mais fraco. */
.texto-detalhe-estatistica { margin-top: 6px; font-size: 11.5px; }

/* Paginacao do modal Historico ficava espalhada de ponta a ponta do modal:
   ".paginacao" (softsul-base.css) tem gap:16px + justify-content:center
   pensado pro rodape da LISTA principal (dentro de .rodape-lista, que
   tem seu proprio layout em volta); aqui, sozinha dentro do modal, sobrava
   espaco demais entre os botoes. Compacta e agrupada a esquerda, mais
   parecido com o "padrao" de paginacao apertada que o resto do sistema usa. */
.paginacao-compacta { justify-content: flex-start; gap: 4px; margin-top: 12px; }

/* Campo de busca com "x" pra limpar embutido (uptime-admin.php, busca-viva.js).
   Input ganha padding-right pro "x" nao ficar por cima do texto digitado. */
.campo-busca-viva { position: relative; }
.campo-busca-viva input { width: 100%; padding-right: 32px; }
.limpar-busca-viva {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--fraca); font-size: 18px; line-height: 1;
  cursor: pointer; border-radius: 999px; padding: 0;
}
.limpar-busca-viva:hover { background: var(--leve); color: var(--tinta); }

/* Badge do tipo de certificado (EV/OV/DV/IV) abaixo do emissor em Certificados. */
/* Selo antes do emissor, na mesma linha. */
.cert-emissor-linha { display: flex; align-items: center; gap: 8px; }
.cert-emissor-linha > span:last-child { min-width: 0; }
/* Uma cor por tipo, fundo cheio e texto branco (a versao em tom pastel
   ficava apagada na lista): DV azul, OV roxo, EV verde, IV laranja. Roxo
   nao existe na paleta da casa, entra so aqui pra separar OV de DV. */
.badge-relogio.cert-tipo { font-weight: 700; color: #fff; padding: 2px 9px; }
.badge-relogio.cert-tipo-dv { background: #0E7BA6; }
.badge-relogio.cert-tipo-ov { background: #7A4FE0; }
.badge-relogio.cert-tipo-ev { background: #0E8F6A; }
.badge-relogio.cert-tipo-iv { background: #E0790B; }