:root {
  --bg: #0f1420;
  --bg-card: #171d2c;
  --borda: #2a3244;
  --texto: #e4e8f1;
  --texto-fraco: #93a0b8;
  --azul: #4b8bf4;
  --azul-hover: #6ba0f7;
  --erro-bg: #3a1a1f;
  --erro-borda: #7a2b34;
  --erro-texto: #f7b4bb;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--texto);
  min-height: 100vh;
}

.pagina-central {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.cartao {
  background: var(--bg-card);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 32px;
  width: 100%;
  max-width: 380px;
}

.cartao h1 {
  font-size: 1.2rem;
  margin: 0 0 6px;
}

.cartao .subtitulo {
  color: var(--texto-fraco);
  font-size: 0.9rem;
  margin: 0 0 24px;
}

label {
  display: block;
  font-size: 0.85rem;
  color: var(--texto-fraco);
  margin: 16px 0 6px;
}

input[type="email"],
input[type="password"],
input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid var(--borda);
  background: #0c111c;
  color: var(--texto);
  font-size: 1rem;
}

input:focus {
  outline: 2px solid var(--azul);
  outline-offset: 1px;
}

button {
  width: 100%;
  margin-top: 24px;
  padding: 11px;
  border: none;
  border-radius: 6px;
  background: var(--azul);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

button:hover { background: var(--azul-hover); }

.erro {
  background: var(--erro-bg);
  border: 1px solid var(--erro-borda);
  color: var(--erro-texto);
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 0.88rem;
  margin-bottom: 8px;
}

.ajuda {
  color: var(--texto-fraco);
  font-size: 0.82rem;
  margin-top: 8px;
  line-height: 1.5;
}
.ajuda.espacado { margin-top: 12px; }

.chave-totp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.1rem;
  letter-spacing: 2px;
  background: #0c111c;
  border: 1px solid var(--borda);
  border-radius: 6px;
  padding: 14px;
  text-align: center;
  margin: 12px 0;
  word-break: break-all;
}

/* Comando + botao "Copiar" lado a lado (usado no modal de comando de
   instalacao, um por sistema operacional): a caixa do comando ocupa o
   espaco disponivel, o botao fica alinhado ao lado, sem centralizar
   feio quando tem so um botao. */
.linha-comando {
  display: flex;
  align-items: center;
  gap: 10px;
}
.linha-comando .chave-totp {
  flex: 1;
  margin: 4px 0;
  text-align: left;
  font-size: 0.78rem;
  letter-spacing: normal;
  padding: 10px 12px;
  line-height: 1.4;
  max-height: 6.2em;
  overflow-y: auto;
}
.linha-comando button { width: auto; margin: 0; flex-shrink: 0; align-self: flex-start; }

/* So o modal de comando de instalacao (Linux + 2 variantes de Windows,
   os tres juntos ficam altos demais na largura padrao de modal): mais
   largo, pra cada comando quebrar em menos linhas e caber sem rolagem
   na maioria das telas. */
#modal-comando-gerado { width: min(760px, 96vw); }
#modal-comando-gerado .modal-corpo { padding: 16px 20px; }

/* ==================================================================
   Casca do app: barra lateral (icones) + cabecalho (logo/usuario) +
   conteudo. Usada por todas as paginas internas (nao pelo login e
   pelas telas de onboarding, que ficam com o cartao centralizado).
   ================================================================== */

.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.corpo-app {
  display: flex;
  flex: 1;
  min-height: 0;
}

.barra-lateral {
  width: 64px;
  flex-shrink: 0;
  background: var(--bg-card);
  border-right: 1px solid var(--borda);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0;
  gap: 4px;
}

.nav-lateral {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  align-items: center;
}

.nav-lateral a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 52px;
  padding: 8px 2px;
  border-radius: 8px;
  color: var(--texto-fraco);
  text-decoration: none;
  font-size: 0.62rem;
  line-height: 1.1;
  text-align: center;
}

.nav-lateral a svg { width: 20px; height: 20px; flex-shrink: 0; }
.nav-lateral a:hover { background: var(--borda); color: var(--texto); }
.nav-lateral a.ativo { background: rgba(75, 139, 244, 0.15); color: var(--azul-hover); }

.nav-lateral .separador-lateral {
  width: 32px;
  height: 1px;
  background: var(--borda);
  margin: 6px 0;
}

.area-principal {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* --- menu hamburguer (so aparece em tela estreita, ver media query no
   fim do arquivo) --- */

.botao-menu-lateral {
  display: none;
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--borda);
  color: var(--texto-fraco);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.botao-menu-lateral svg { width: 20px; height: 20px; }

.botao-fechar-menu-lateral {
  display: none;
  align-self: flex-end;
  margin: 0 8px 8px 0;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--texto-fraco);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.botao-fechar-menu-lateral svg { width: 18px; height: 18px; }

/* Fundo escurecido atras do menu deslizante, so existe/aparece no mobile
   (ver media query). Em telas largas fica sempre "display:none", nao
   atrapalha nada. */
.fundo-menu-lateral {
  display: none;
}

.cabecalho-app {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  border-bottom: 1px solid var(--borda);
  background: var(--bg);
}

.marca-cabecalho {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.marca-cabecalho .texto-marca {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.marca-cabecalho .nome-app {
  font-size: 15px;
  font-weight: 600;
  color: var(--texto);
}

.marca-cabecalho .versao-app {
  font-size: 12px;
  color: var(--texto-suave);
}

.logo-softsul {
  display: inline-block;
  width: 133px;
  height: 30px;
  background-image: url("data:image/png;base64,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");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  text-decoration: none;
}

.logo-centralizada {
  width: 156px;
  height: 35px;
  margin: 0 auto 20px;
  background-position: center;
}

/* --- contador de atualizacao automatica (Visao geral) --- */

.contador-atualizacao {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  color: var(--texto-fraco);
  background: var(--bg-card);
  border: 1px solid var(--borda);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}
.contador-atualizacao svg { width: 13px; height: 13px; }
.contador-atualizacao #contador-atualizacao-valor { font-variant-numeric: tabular-nums; min-width: 1.2em; text-align: right; display: inline-block; }

/* --- menu do usuario (icone + dropdown) --- */

.menu-usuario { position: relative; display: flex; align-items: center; gap: 10px; }

.botao-usuario {
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--borda);
  color: var(--texto-fraco);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.botao-usuario:hover { background: var(--borda); color: var(--texto); }
.botao-usuario svg { width: 19px; height: 19px; }

.dropdown-usuario {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  background: var(--bg-card);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  z-index: 20;
}
.dropdown-usuario.aberto { display: block; }

.dropdown-usuario .info-usuario {
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--borda);
  margin-bottom: 6px;
}
.dropdown-usuario .info-usuario .email {
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown-usuario a,
.dropdown-usuario button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border-radius: 6px;
  border: none;
  background: none;
  color: var(--texto);
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
}
.dropdown-usuario a:hover,
.dropdown-usuario button:hover { background: var(--borda); }
.dropdown-usuario svg { width: 16px; height: 16px; color: var(--texto-fraco); flex-shrink: 0; }

.conteudo { padding: 32px 24px; width: 100%; }

.tag-papel {
  display: inline-block;
  background: var(--bg-card);
  border: 1px solid var(--borda);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.78rem;
  color: var(--texto-fraco);
}

h1.titulo-pagina { font-size: 1.3rem; margin: 0 0 15px; }
.migalha { color: var(--texto-fraco); font-size: 0.85rem; margin-bottom: 20px; }
.migalha a { color: var(--texto-fraco); }

/* --- cards de visao geral --- */

.campo-filtro-servidores { max-width: 340px; margin-bottom: 16px; }
.campo-filtro-servidores input { width: 100%; }

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

.cartao-servidor {
  background: var(--bg-card);
  border: 1px solid var(--borda);
  border-left-width: 4px;
  border-radius: 8px;
  padding: 16px;
  text-decoration: none;
  color: var(--texto);
  display: block;
}
/* display:block acima ganharia do [hidden] do navegador (regra de autor
   sempre vence a folha padrao do user-agent, independente de
   especificidade) -- sem isto, o filtro de servidores da Visao geral
   marcaria "hidden" mas o cartao continuaria visivel. */
.cartao-servidor[hidden] { display: none; }

.cartao-servidor:hover { border-color: var(--azul); }
.cartao-servidor.semaforo-verde { border-left-color: #3fb950; }
.cartao-servidor.semaforo-amarelo { border-left-color: #d4a72c; }
.cartao-servidor.semaforo-vermelho { border-left-color: #e5534b; }

/* Badge do grupo: uma cor por grupo (ver 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 vermelho/verde/amarelo puro de proposito,
   essas cores ja tem significado de status (semaforo do cartao). */
.badge-grupo {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 9px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.grupo-cor-neutro { background: var(--borda); color: var(--texto-fraco); }
.grupo-cor-0 { background: rgba(99, 102, 241, 0.2); color: #a5b4fc; }
.grupo-cor-1 { background: rgba(20, 184, 166, 0.2); color: #5eead4; }
.grupo-cor-2 { background: rgba(236, 72, 153, 0.2); color: #f9a8d4; }
.grupo-cor-3 { background: rgba(249, 115, 22, 0.2); color: #fdba74; }
.grupo-cor-4 { background: rgba(6, 182, 212, 0.2); color: #67e8f9; }
.grupo-cor-5 { background: rgba(168, 85, 247, 0.2); color: #d8b4fe; }
.grupo-cor-6 { background: rgba(244, 63, 94, 0.2); color: #fda4af; }
.grupo-cor-7 { background: rgba(56, 189, 248, 0.2); color: #7dd3fc; }

.cartao-servidor .nome { font-weight: 600; margin-bottom: 2px; }

/* Badge de sistema operacional: neutro de proposito (nao faz parte da
   paleta colorida do badge de grupo, sao informacoes de natureza
   diferente - de qual grupo vs. o que roda na maquina). */
.badge-so {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--texto-fraco);
  background: var(--borda);
  padding: 1px 8px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.cartao-servidor .hostname { color: var(--texto-fraco); font-size: 0.82rem; margin-bottom: 10px; }
.cartao-servidor .linha-status { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--texto-fraco); }
.cartao-servidor .linha-status.espacada { margin-top: 8px; }

/* margin-top proprio (em vez de depender so da margem inferior do bloco
   anterior) pra manter o mesmo respiro acima do titulo nao importa o que
   vier antes dele -- quando ele e o primeiro elemento logo apos o h1 da
   pagina, a regra abaixo zera esse topo (a margem inferior do proprio h1
   ja resolve o espacamento nesse caso). */
.subtitulo-secao { font-size: 0.95rem; margin: 28px 0 4px; }
h1.titulo-pagina + .subtitulo-secao { margin-top: 0; }
.subtitulo-secao .ver-todos {
  float: right;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--azul-hover);
  text-decoration: none;
}
.subtitulo-secao .ver-todos:hover { text-decoration: underline; }

.resumo-numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}

.numero-cartao {
  background: var(--bg-card);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 14px 16px;
}
.numero-cartao .valor { font-size: 1.6rem; font-weight: 700; }
.numero-cartao .rotulo { color: var(--texto-fraco); font-size: 0.8rem; }

/* --- badges de severidade / status --- */

.badge { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 0.78rem; font-weight: 600; }
.badge-baixa { background: #17301f; color: #6dd58c; }
.badge-media { background: #3a3216; color: #e0c05a; }
.badge-alta { background: #3a2416; color: #f0a35e; }
.badge-critica { background: #3a1a1f; color: #f7838d; }

.badge-triagem-novo { background: #1c2a3a; color: #7ab3f0; }
.badge-triagem-revisando { background: #3a3216; color: #e0c05a; }
.badge-triagem-legitimo { background: #17301f; color: #6dd58c; }
.badge-triagem-malicioso { background: #3a1a1f; color: #f7838d; }
.badge-triagem-ignorado { background: var(--bg-card); color: var(--texto-fraco); border: 1px solid var(--borda); }
.badge-ativa { background: #17301f; color: #6dd58c; }

.form-inline-tabela { margin: 0; }
button.botao-pequeno {
  width: auto;
  margin-top: 0;
  padding: 5px 12px;
  font-size: 0.82rem;
  font-weight: 500;
  background: var(--bg-card);
  border: 1px solid var(--borda);
  color: var(--texto);
}
button.botao-pequeno:hover { background: var(--borda); }

.acoes-icones {
  display: flex;
  gap: 6px;
  align-items: center;
}
/* Dentro de uma linha de tabela, a coluna de acoes normalmente absorve
   quase toda a sobra de largura do table-layout:auto (as outras colunas
   tem conteudo curto e nao crescem alem do necessario). Sem isso os
   icones ficam grudados a esquerda da propria celula, com um vao vazio
   a direita deles ate a borda da janela -- dando a falsa impressao de
   que a tabela inteira nao preenche a largura disponivel. */
table.tabela-dados .acoes-icones { justify-content: flex-end; }
.acoes-icones form { margin: 0; }

button.botao-icone {
  width: 30px;
  height: 30px;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--borda);
  border-radius: 6px;
  color: var(--texto);
  cursor: pointer;
}
button.botao-icone svg { width: 16px; height: 16px; }
button.botao-icone:hover { background: var(--borda); color: var(--azul); }
button.botao-icone.perigo:hover { color: #f7838d; border-color: #f7838d; }

.divulgacao-painel { margin-bottom: 20px; }
.divulgacao-painel > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid var(--borda);
  background: var(--bg-card);
  color: var(--texto);
  font-size: 0.88rem;
  font-weight: 500;
}
.divulgacao-painel > summary::-webkit-details-marker { display: none; }
.divulgacao-painel > summary:hover { background: var(--borda); }
.divulgacao-painel > summary svg { width: 16px; height: 16px; }
.divulgacao-painel[open] > summary { margin-bottom: 14px; }
.divulgacao-painel .painel { margin-bottom: 0; }

.badge-status-ativo { background: #17301f; color: #6dd58c; }
.badge-status-silencioso { background: #3a1a1f; color: #f7838d; }
.badge-status-pendente { background: #3a3216; color: #e0c05a; }
.badge-status-desativado { background: var(--bg-card); color: var(--texto-fraco); border: 1px solid var(--borda); }

/* --- tabelas --- */

.tabela-wrap { overflow-x: auto; }

table.tabela-dados {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

/* Tabelas com colunas de conteudo curto (badge de status/severidade,
   "30 min", nome de canal) ficavam com o valor grudado a esquerda da
   celula e uma sobra vazia so do lado direito -- por mais que a tabela
   toda ja seja width:100%, cada coluna so cresce o minimo pro proprio
   conteudo (table-layout auto). Centralizar esse tipo de celula reparte
   a sobra dos dois lados, ficando visualmente proporcional em qualquer
   tabela do site sem precisar calcular largura por coluna em cada
   pagina. :has() e suportado em todos os navegadores atuais (Chrome/
   Edge 105+, Firefox 121+, Safari 15.4+). */
table.tabela-dados td:has(> .badge:only-child) { text-align: center; }
table.tabela-dados td.centralizado, table.tabela-dados th.centralizado { text-align: center; }

table.tabela-dados th {
  text-align: left;
  color: var(--texto-fraco);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 8px 10px;
  border-bottom: 1px solid var(--borda);
  white-space: nowrap;
}

table.tabela-dados td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--borda);
  vertical-align: middle;
}

table.tabela-dados tr:hover td { background: rgba(255,255,255,0.02); }
table.tabela-dados a { color: var(--texto); text-decoration: none; }
table.tabela-dados a:hover { color: var(--azul); }

table.tabela-dados tr.linha-grupo td {
  background: var(--bg-card);
  color: var(--texto-fraco);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 10px;
}
table.tabela-dados tr.linha-grupo:hover td { background: var(--bg-card); }

.caminho-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  word-break: break-all;
}

.vazio { color: var(--texto-fraco); font-style: italic; padding: 24px 0; }

.link-secundario {
  display: block;
  color: var(--texto-fraco) !important;
  font-size: 0.72rem;
  margin-top: 2px;
}
.link-secundario:hover { color: var(--azul) !important; }

/* --- filtros --- */

.form-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
  background: var(--bg-card);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 20px;
}

/* flex:1 com uma base minima: os campos crescem pra dividir toda a
   largura disponivel entre si (sem sobra de espaco vazio a direita), e so
   quebram pra uma segunda linha quando a tela e estreita demais mesmo pra
   caber todos no minimo de 140px cada -- nao antes disso so por causa de
   conteudo curto (um <select> de "Todos" nao é motivo pra ficar pequeno
   com a barra inteira folgada ao lado). */
.form-filtros .campo { display: flex; flex-direction: column; gap: 4px; flex: 1 1 140px; min-width: 140px; }
.form-filtros label { margin: 0; font-size: 0.78rem; }
.form-filtros input, .form-filtros select {
  width: 100%;
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid var(--borda);
  background: #0c111c;
  color: var(--texto);
  font-size: 0.88rem;
}
.form-filtros button:not(.botao-icone) { width: auto; flex: 0 0 auto; margin-top: 0; padding: 8px 16px; }

/* Variante de largura total: uma so busca ocupando toda a barra (em vez
   de varios campos lado a lado, caso do form-filtros "normal" de
   eventos.php), com o botao "+" (icone) embutido na mesma linha. */
.form-filtros-largo { flex-wrap: nowrap; }
.form-filtros-largo .campo-crescer { flex: 1; min-width: 0; }
.form-filtros-largo .campo-crescer input { width: 100%; }

select {
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--borda);
  background: #0c111c;
  color: var(--texto);
  font-size: 0.85rem;
}

.form-papel-inline {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 0;
}
.form-papel-inline button { width: auto; margin: 0; }

/* --- paginacao (estilo Joomla: itens por pagina + numeros de pagina) --- */

.rodape-lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  font-size: 0.85rem;
  color: var(--texto-fraco);
}

.itens-por-pagina { display: flex; align-items: center; gap: 8px; margin: 0; }
.itens-por-pagina select { padding: 5px 8px; font-size: 0.82rem; }

.paginacao { display: flex; gap: 4px; align-items: center; margin: 0; }
.paginacao a, .paginacao span.pagina-atual, .paginacao span.reticencias {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border-radius: 6px;
  color: var(--texto);
  text-decoration: none;
  font-size: 0.82rem;
}
.paginacao a { background: var(--bg-card); border: 1px solid var(--borda); }
.paginacao a:hover { background: var(--borda); }
.paginacao span.pagina-atual { background: var(--azul); color: #fff; font-weight: 600; }
.paginacao span.reticencias { color: var(--texto-fraco); }
.paginacao a[aria-disabled="true"] { opacity: 0.35; pointer-events: none; }

/* --- barra de ferramentas + modais --- */

.barra-ferramentas {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

dialog.modal {
  border: none;
  border-radius: 10px;
  padding: 0;
  background: var(--bg-card);
  color: var(--texto);
  width: min(520px, 92vw);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
dialog.modal::backdrop { background: rgba(0, 0, 0, 0.6); }

.modal-cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--borda);
}
.modal-cabecalho h2 { margin: 0; font-size: 1rem; }

.modal-corpo { padding: 20px; }

.form-modal {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.form-modal .campo { display: flex; flex-direction: column; gap: 4px; }
.form-modal label { font-size: 0.82rem; color: var(--texto-fraco); }
.form-modal input, .form-modal select {
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--borda);
  background: #0c111c;
  color: var(--texto);
  font-size: 0.9rem;
}
.acoes-modal { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.acoes-modal.alinhado-esquerda { justify-content: flex-start; margin-bottom: 20px; }
.acoes-modal button { width: auto; }
.acoes-modal button.secundario {
  background: var(--bg-card);
  border: 1px solid var(--borda);
  color: var(--texto);
}
.acoes-modal button.secundario:hover { background: var(--borda); }
.acoes-modal button.perigo { background: #a83a44; }
.acoes-modal button.perigo:hover { background: #c04552; }

.texto-fraco { color: var(--texto-fraco); }

.campo-checkboxes {
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 10px 14px 14px;
  margin: 0;
  max-height: 180px;
  overflow-y: auto;
}
.campo-checkboxes legend {
  padding: 0 6px;
  font-size: 0.8rem;
  color: var(--texto-fraco);
}
.opcao-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  padding: 4px 0;
  margin: 0;
}
.opcao-checkbox input[type="checkbox"] { width: auto; margin: 0; }

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

.grafico-barras {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 90px;
  margin: 16px 0 28px;
}
.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 .barra { width: 100%; background: var(--azul); border-radius: 3px 3px 0 0; min-height: 2px; }
.grafico-barras .rotulo-dia { font-size: 0.68rem; color: var(--texto-fraco); margin-top: 4px; white-space: nowrap; }

/* 4 barras lado a lado por dia (baixa/media/alta/critica), em vez de uma
   so de total. Precisa de height:100% (nao "auto") pro grupo, pra que as
   barras dentro, que usam as classes de porcentagem .h0..h100, tenham uma
   altura de referencia de verdade pra resolver contra -- porcentagem de
   altura em CSS so funciona se o container tiver altura definida. */
.grafico-barras .grupo-barras {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
}
.grafico-barras .barra-severidade { flex: 1; min-width: 0; max-width: 7px; border-radius: 2px 2px 0 0; min-height: 1px; }
.grafico-barras .barra-severidade.h-vazio { height: 0; min-height: 0; }
.grafico-barras .barra-baixa    { background: #3fb950; }
.grafico-barras .barra-media    { background: var(--azul); }
.grafico-barras .barra-alta     { background: #d4a72c; }
.grafico-barras .barra-critica  { background: #e5534b; }

.legenda-severidade { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 8px; }
.legenda-severidade .item-legenda { display: inline-flex; align-items: center; gap: 5px; font-size: 0.76rem; color: var(--texto-fraco); }
.legenda-severidade .ponto { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.legenda-severidade .ponto-baixa   { background: #3fb950; }
.legenda-severidade .ponto-media   { background: var(--azul); }
.legenda-severidade .ponto-alta    { background: #d4a72c; }
.legenda-severidade .ponto-critica { background: #e5534b; }

/* Classes utilitarias de altura (0-100%, passo de 5), o grafico de barras
   usa isso em vez de style="height:X%" porque a CSP (style-src 'self', sem
   unsafe-inline) bloqueia atributo style inline. */
.h0   { height: 1%; }
.h5   { height: 5%; }
.h10  { height: 10%; }
.h15  { height: 15%; }
.h20  { height: 20%; }
.h25  { height: 25%; }
.h30  { height: 30%; }
.h35  { height: 35%; }
.h40  { height: 40%; }
.h45  { height: 45%; }
.h50  { height: 50%; }
.h55  { height: 55%; }
.h60  { height: 60%; }
.h65  { height: 65%; }
.h70  { height: 70%; }
.h75  { height: 75%; }
.h80  { height: 80%; }
.h85  { height: 85%; }
.h90  { height: 90%; }
.h95  { height: 95%; }
.h100 { height: 100%; }

/* Mesma ideia, largura em vez de altura, usado nas barras horizontais de
   uso de disco/memoria. */
.w0   { width: 1%; }
.w5   { width: 5%; }
.w10  { width: 10%; }
.w15  { width: 15%; }
.w20  { width: 20%; }
.w25  { width: 25%; }
.w30  { width: 30%; }
.w35  { width: 35%; }
.w40  { width: 40%; }
.w45  { width: 45%; }
.w50  { width: 50%; }
.w55  { width: 55%; }
.w60  { width: 60%; }
.w65  { width: 65%; }
.w70  { width: 70%; }
.w75  { width: 75%; }
.w80  { width: 80%; }
.w85  { width: 85%; }
.w90  { width: 90%; }
.w95  { width: 95%; }
.w100 { width: 100%; }

/* --- recursos: barras horizontais (disco/memoria) + badge de temperatura --- */

.recursos-lista { display: flex; flex-direction: column; gap: 10px; }
.recurso-linha { display: flex; flex-direction: column; gap: 4px; }
.recurso-linha .recurso-cabecalho {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--texto-fraco);
}
.recurso-linha .recurso-cabecalho strong { color: var(--texto); font-weight: 500; }
.barra-percentual {
  width: 100%;
  height: 8px;
  background: var(--borda);
  border-radius: 4px;
  overflow: hidden;
}
.barra-percentual .preenchimento { height: 100%; background: var(--azul); border-radius: 4px; }
.barra-percentual .preenchimento.aviso { background: #e0c05a; }
.barra-percentual .preenchimento.critico { background: #f7838d; }

.badge-temperatura {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--bg-card);
  border: 1px solid var(--borda);
  color: var(--texto);
}
.badge-temperatura.aviso { color: #e0c05a; border-color: #e0c05a; }
.badge-temperatura.critico { color: #f7838d; border-color: #f7838d; }

.mini-grafico {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 36px;
  margin-top: 6px;
}
.mini-grafico .barra { flex: 1; background: var(--azul); border-radius: 2px 2px 0 0; min-height: 2px; }
.mini-grafico .barra.aviso { background: #e0c05a; }
.mini-grafico .barra.critico { background: #f7838d; }

.grade-recursos-cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

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

/* --- relogio ao vivo de cada servidor (Visao geral) --- */

.relogio-servidor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--borda);
}

.relogio-hora {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  color: var(--texto);
  letter-spacing: 0.5px;
}

.badge-relogio {
  font-size: 0.68rem;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--borda);
  color: var(--texto-fraco);
  white-space: nowrap;
}
.badge-relogio.ok { background: rgba(75, 139, 244, 0.15); color: var(--azul-hover); }
.badge-relogio.aviso { background: #4a3f1a; color: #e0c05a; }
.badge-relogio.alerta { background: #3a1a1f; color: #f7838d; }

.uptime-servidor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  font-size: 0.78rem;
}
.uptime-servidor .uptime-valor {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--texto);
}

/* Relogio ao vivo dentro da tabela de administracao de servidores (coluna
   "Hora", ao lado de Status) -- mesma logica, tamanho compativel com
   celula de tabela. */
.celula-relogio { white-space: nowrap; }
.celula-relogio .relogio-hora { font-size: 0.82rem; }

/* --- paineis de detalhe --- */

.painel {
  background: var(--bg-card);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 18px 20px;
  margin-bottom: 20px;
}
.painel h2 { font-size: 1rem; margin: 0 0 14px; }

.grade-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 24px; }
.campo.espacado { margin-top: 16px; }
.grade-campos .campo .rotulo { color: var(--texto-fraco); font-size: 0.78rem; }
.grade-campos .campo .valor { font-size: 0.92rem; word-break: break-all; }

.lista-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
/* --- documento renderizado de markdown (README/runbook) --- */

.documento { line-height: 1.6; }
.documento h2 { font-size: 1.15rem; margin: 28px 0 10px; }
.documento h3 { font-size: 1rem; margin: 24px 0 8px; color: var(--texto); }
.documento h4 { font-size: 0.92rem; margin: 18px 0 6px; color: var(--texto-fraco); }
.documento p { margin: 0 0 12px; color: var(--texto); }
.documento ul { margin: 0 0 12px; padding-left: 22px; }
.documento li { margin-bottom: 6px; }
.documento code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: #0c111c;
  border: 1px solid var(--borda);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.85em;
}
.documento pre {
  background: #0c111c;
  border: 1px solid var(--borda);
  border-radius: 6px;
  padding: 12px 14px;
  overflow-x: auto;
  margin: 0 0 12px;
}
.documento pre code { background: none; border: none; padding: 0; }
.documento a { color: var(--azul); }
.documento table.tabela-dados { margin-bottom: 16px; }

.lista-flags .flag {
  background: #3a1a1f;
  color: #f7838d;
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 0.78rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ==================================================================
   Mobile: barra lateral vira menu hamburguer (gaveta deslizante)
   ================================================================== */

@media (max-width: 768px) {
  .botao-menu-lateral {
    display: flex;
  }

  .cabecalho-app {
    gap: 12px;
  }

  .corpo-app {
    position: relative;
  }

  .barra-lateral {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 60;
    width: 240px;
    max-width: 80vw;
    align-items: stretch;
    padding: 8px 8px 16px;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.35);
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }

  .barra-lateral.aberta {
    transform: translateX(0);
  }

  .botao-fechar-menu-lateral {
    display: flex;
  }

  /* No mobile a gaveta e larga o bastante pra listar icone + rotulo lado
     a lado, como um menu de verdade (na barra estreita do desktop o
     rotulo fica embaixo do icone, aqui nao caberia legivel). */
  .nav-lateral {
    align-items: stretch;
  }

  .nav-lateral a {
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
    gap: 12px;
    padding: 12px 10px;
    font-size: 0.9rem;
    text-align: left;
  }

  .nav-lateral a svg { width: 22px; height: 22px; }

  .fundo-menu-lateral.aberto {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(0, 0, 0, 0.5);
  }

  /* Grafico de eventos por dia: em tela estreita nao ha espaco pra 14
     rotulos completos tipo "26/08" lado a lado. Em vez de rolagem (o
     grafico inteiro devia caber de uma vez, e o objetivo e comparar os
     14 dias num so olhar), encolhe: mostra so o numero do dia (sem mes,
     virou tao curto que 14 dias caem folgados numa tela de celular) e
     reduz o espacamento entre colunas.  */
  .grafico-barras {
    gap: 2px;
    height: 70px;
  }
  .grafico-barras .rotulo-dia {
    font-size: 0.58rem;
  }
  .grafico-barras .dia-mes {
    display: none;
  }
  .grafico-barras .grupo-barras { gap: 1px; }
  .grafico-barras .barra-severidade { max-width: 4px; }
}