/* =====================================================================
   PADRÃO VISUAL PCNET · TELA INICIAL NOVA (opcional)

   Pedido de 2026-10-01: "analise como especialista em CSS e traga as melhores
   alterações para deixar o uso mais dinâmico, pois está meio confuso", com a condição
   de poder reverter. Tudo aqui vale com html[data-pcnet-home="novo"], que desde
   2026-10-01 é fixo (o usuário pediu para tirar o botão de voltar). Os papéis
   (data-pcnet-papel) são marcados pelo pcnet-pegaprox.js; o que some fica no
   pcnet-remocoes.css. Cores só por token.
   ===================================================================== */


/* Pedido de 2026-10-01: a página vira uma grade que se rearranja sozinha. Cada bloco
   ocupa a linha inteira, menos o grupo de um cluster só: dois grupos assim dividem a
   linha (Interno PCNet ao lado de Hospedagem) e um grupo sozinho cresce até o fim. */
html[data-pcnet-home="novo"] [data-pcnet-papel="home"] {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--pk-sp-4);
}
html[data-pcnet-home="novo"] [data-pcnet-papel="home"] > [data-pcnet-papel] {
  flex: 1 1 100%;
  min-width: 0;
  margin-top: 0;
}
html[data-pcnet-home="novo"] [data-pcnet-papel="home"] > [data-pcnet-papel="grupo"]:not(:has(> .grid > :nth-child(2))) {
  flex: 1 1 420px;
}


/* Pedido de 2026-10-01: o cabeçalho da visão geral era uma faixa de 110 px para um
   título. Fica uma linha: ícone menor, título e subtítulo juntos, sem o "Live" repetido
   (o cabeçalho do site já mostra "Ao vivo"). */
html[data-pcnet-home="novo"] [data-pcnet-papel="cabeca"] {
  padding: var(--pk-sp-3) var(--pk-sp-4);
}
html[data-pcnet-home="novo"] [data-pcnet-papel="cabeca"] .w-14.h-14 {
  width: 40px;
  height: 40px;
}
html[data-pcnet-home="novo"] [data-pcnet-papel="cabeca"] h1 {
  font-size: var(--pk-text-xl);
  line-height: var(--pk-leading-tight);
}
html[data-pcnet-home="novo"] [data-pcnet-papel="cabeca"] h1 + p {
  font-size: var(--pk-text-sm);
  color: var(--pk-ink-3);
}


/* Pedido de 2026-10-01: os 7 números do topo eram 7 cartões soltos, cada um com borda,
   fundo e ícone grande. Viram um painel só, com divisórias finas: lê-se como uma
   régua de situação, em metade da altura. */
@media (min-width: 1024px) {
  html[data-pcnet-home="novo"] [data-pcnet-papel="numeros"] {
    gap: 0;
    border: 1px solid var(--pk-hairline);
    border-radius: var(--pk-radius);
    background: var(--pk-glass);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
            backdrop-filter: blur(16px) saturate(1.3);
    box-shadow: var(--pk-shadow-sm);
    overflow: hidden;
  }
  html[data-pcnet-home="novo"] [data-pcnet-papel="numeros"] > div {
    padding: var(--pk-sp-3) var(--pk-sp-4);
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
  }
  html[data-pcnet-home="novo"] [data-pcnet-papel="numeros"] > div + div {
    border-left: 1px solid var(--pk-hairline);
  }
}
html[data-pcnet-home="novo"] [data-pcnet-papel="numeros"] .w-10.h-10 {
  width: 32px;
  height: 32px;
}


/* Pedido de 2026-10-01: "Ordenar por" é ferramenta, não conteúdo. Vai para a direita,
   menor, logo acima dos grupos. */
html[data-pcnet-home="novo"] [data-pcnet-papel="ordem"] {
  justify-content: flex-end;
}
html[data-pcnet-home="novo"] [data-pcnet-papel="ordem"] button {
  min-height: 32px;
  padding: 0 var(--pk-sp-2);
  font-size: var(--pk-text-xs);
}
html[data-pcnet-home="novo"] [data-pcnet-papel="ordem"] span {
  font-size: var(--pk-text-xs);
}


/* Pedido de 2026-10-01: grupos e cartões.
   - Cartões em grade automática: cabem 2 a 3 por linha conforme a largura, em vez de
     sempre 2 com metade vazia.
   - A cor do grupo vira um ponto com contorno (o preto do grupo interno sumia no escuro). */
html[data-pcnet-home="novo"] [data-pcnet-papel="grupo"] > .grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
  gap: var(--pk-sp-3);
}
html[data-pcnet-home="novo"] [data-pcnet-papel="grupo"] > .flex.items-center.gap-3.px-1:has(> h3.text-base):has(+ .grid) {
  margin-top: 0;
}
html[data-pcnet-home="novo"] [data-pcnet-papel="grupo"] > .flex > .w-4.h-4 {
  width: 12px;
  height: 12px;
  border-radius: var(--pk-radius-pill);
  box-shadow: 0 0 0 2px var(--pk-hairline-hover);
}


/* Pedido de 2026-10-01: cartão do cluster mais denso e legível.
   - Menos respiro interno (260 px de altura para 5 números).
   - Os 5 indicadores deixam de ser 5 caixinhas: ficam numa régua com divisórias.
   - O selo de porcentagem ganha o nome "Saúde" (sozinho parecia uso).
   - Endereço em fonte mono, como todo IP da casa. */
html[data-pcnet-home="novo"] [data-pcnet-cluster] > .p-5 {
  padding: var(--pk-sp-4);
}
html[data-pcnet-home="novo"] [data-pcnet-cluster] .mb-4 {
  margin-bottom: var(--pk-sp-3);
}
html[data-pcnet-home="novo"] [data-pcnet-cluster] .w-12.h-12 {
  width: 40px;
  height: 40px;
}
html[data-pcnet-home="novo"] [data-pcnet-cluster] h3 + p {
  font-family: var(--pk-font-mono);
  color: var(--pk-ink-3);
}
html[data-pcnet-home="novo"] [data-pcnet-cluster] .grid-cols-5 {
  gap: 0;
  border: 1px solid var(--pk-hairline);
  border-radius: var(--pk-radius-sm);
}
html[data-pcnet-home="novo"] [data-pcnet-cluster] .grid-cols-5 > div {
  padding: var(--pk-sp-2) var(--pk-sp-1);
  border-radius: 0;
  background: transparent !important;
}
html[data-pcnet-home="novo"] [data-pcnet-cluster] .grid-cols-5 > div + div {
  border-left: 1px solid var(--pk-hairline);
}
html[data-pcnet-home="novo"] [data-pcnet-cluster] .mt-4.pt-3 {
  margin-top: var(--pk-sp-3);
  padding-top: var(--pk-sp-2);
}
html[data-pcnet-home="novo"] [data-pcnet-saude] > span::before {
  content: "Saúde ";
  font-weight: 400;
}


/* Pedido de 2026-10-01: cor dos anéis e das linhas por situação, não por métrica. O
   PegaProx pintava CPU de verde, RAM de azul e disco de roxo quando estava tudo bem, e
   amarelo/vermelho no aperto: três cores para "normal" confundiam com alerta. Agora:
   normal = verde da casa, atenção = aviso, crítico = perigo. */
html[data-pcnet-home="novo"] [data-pcnet-papel="home"] [stroke="#22c55e"],
html[data-pcnet-home="novo"] [data-pcnet-papel="home"] [stroke="#3b82f6"],
html[data-pcnet-home="novo"] [data-pcnet-papel="home"] [stroke="#8b5cf6"] {
  stroke: var(--pk-green-dark);
}
html[data-pcnet-home="novo"] [data-pcnet-papel="home"] [fill="#22c55e"],
html[data-pcnet-home="novo"] [data-pcnet-papel="home"] [fill="#3b82f6"],
html[data-pcnet-home="novo"] [data-pcnet-papel="home"] [fill="#8b5cf6"] {
  fill: var(--pk-green-dark);
}
html[data-pcnet-home="novo"] [data-pcnet-papel="home"] [stroke="#eab308"] { stroke: var(--pk-warning); }
html[data-pcnet-home="novo"] [data-pcnet-papel="home"] [fill="#eab308"] { fill: var(--pk-warning); }
html[data-pcnet-home="novo"] [data-pcnet-papel="home"] [stroke="#ef4444"] { stroke: var(--pk-danger); }
html[data-pcnet-home="novo"] [data-pcnet-papel="home"] [fill="#ef4444"] { fill: var(--pk-danger); }


/* Pedido de 2026-10-01: "Adicionar Cluster" era o elemento mais chamativo da tela (verde
   cheio), mas é tarefa rara de administrador. Fica contornado, como ação secundária. */
html[data-pcnet-home="novo"] header .relative > button.bg-proxmox-orange {
  background: transparent !important;
  border: 1px solid var(--pk-hairline-hover);
  color: var(--pk-green-ink) !important;
  box-shadow: none !important;
}


/* =====================================================================
   BARRA LATERAL (mesma chave: html[data-pcnet-home="novo"])
   ===================================================================== */

/* Pedido de 2026-10-01: "o menu lateral ainda está poluído e confuso, precisa ser
   dinâmico e de fácil entendimento". Vira uma árvore de navegação:
   - títulos de seção pequenos, em caixa alta (CLUSTER(S), SERVIDORES DE BACKUP);
   - cada cluster é uma linha, não um cartão; o fundo aparece no hover e na seleção;
   - os clusters do grupo ficam pendurados num fio, o que mostra a hierarquia;
   - grupo com nome discreto e contagem em pílula. */
html[data-pcnet-home="novo"] .pp-sidebar h2 {
  font-size: var(--pk-text-xs);
  letter-spacing: .8px;
  color: var(--pk-ink-3);
}
html[data-pcnet-home="novo"] .pp-sidebar .mt-4.pt-4.border-t {
  margin-top: var(--pk-sp-3);
  padding-top: var(--pk-sp-3);
  border-color: var(--pk-hairline) !important;
}

/* Pedido de 2026-10-01 (barra lateral): "Todos os Clusters" e servidores de backup
   viram linhas de navegação mais baixas. */
html[data-pcnet-home="novo"] .pp-sidebar button.rounded-xl.py-2\.5,
html[data-pcnet-home="novo"] .pp-sidebar .space-y-1\.5 > button.rounded-xl {
  padding: var(--pk-sp-2) var(--pk-sp-3);
  border-radius: var(--pk-radius-xs);
}
html[data-pcnet-home="novo"] .pp-sidebar button.rounded-xl .w-8.h-8 {
  width: 28px;
  height: 28px;
}
html[data-pcnet-home="novo"] .pp-sidebar .space-y-1\.5 > button.rounded-xl:not([class*="from-blue-500"]) {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html[data-pcnet-home="novo"] .pp-sidebar .space-y-1\.5 > button.rounded-xl:hover {
  background: var(--pk-hover-bg) !important;
}

/* Pedido de 2026-10-01 (barra lateral): cabeçalho do grupo discreto, contagem em pílula. */
html[data-pcnet-home="novo"] .pp-sidebar .space-y-2 > div:first-child {
  padding-top: var(--pk-sp-1);
  padding-bottom: var(--pk-sp-1);
}
html[data-pcnet-home="novo"] .pp-sidebar .space-y-2 > div:first-child span.text-sm {
  font-size: var(--pk-text-xs);
  font-weight: 600;
  letter-spacing: .6px;
  color: var(--pk-ink-2);
}
html[data-pcnet-home="novo"] .pp-sidebar .space-y-2 > div:first-child svg {
  color: var(--pk-ink-3) !important;
}
html[data-pcnet-home="novo"] .pp-sidebar .space-y-2 > div:first-child > span.text-xs {
  min-width: 22px;
  padding: 0 var(--pk-sp-1);
  border-radius: var(--pk-radius-pill);
  background: var(--pk-surface-2);
  text-align: center;
}

/* Pedido de 2026-10-01 (barra lateral): clusters do grupo pendurados num fio. */
html[data-pcnet-home="novo"] .pp-sidebar .space-y-2 > .ml-4 {
  margin-left: var(--pk-sp-3);
  margin-top: var(--pk-sp-1);
  padding-left: var(--pk-sp-2);
  border-left: 1px solid var(--pk-hairline);
}
html[data-pcnet-home="novo"] .pp-sidebar .space-y-2 > .ml-4 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 2px;
}

/* Pedido de 2026-10-01 (barra lateral): a linha do cluster. Seleção em verde suave,
   offline e nó caído mantêm o fundo de perigo e de aviso. */
html[data-pcnet-home="novo"] .pp-sidebar .card-hover.rounded-lg.p-2 {
  padding: var(--pk-sp-2) var(--pk-sp-2) var(--pk-sp-2) var(--pk-sp-3);
  border-color: transparent !important;
  border-radius: var(--pk-radius-xs);
  background: transparent !important;
  box-shadow: none !important;
}
html[data-pcnet-home="novo"] .pp-sidebar .card-hover.rounded-lg.p-2:hover {
  background: var(--pk-hover-bg) !important;
}
html[data-pcnet-home="novo"] .pp-sidebar .card-hover.rounded-lg.p-2[class*="bg-proxmox-orange"] {
  background: var(--pk-green-soft) !important;
  border-color: var(--pk-green-line) !important;
}
html[data-pcnet-home="novo"] .pp-sidebar .card-hover.rounded-lg.p-2[class*="bg-red-500"] {
  background: var(--pk-danger-soft) !important;
}
html[data-pcnet-home="novo"] .pp-sidebar .card-hover.rounded-lg.p-2[class*="bg-orange-500"] {
  background: var(--pk-warning-soft) !important;
}
html[data-pcnet-home="novo"] .pp-sidebar .card-hover.rounded-lg.p-2 h3 + p {
  font-family: var(--pk-font-mono);
  font-size: var(--pk-text-xs);
  color: var(--pk-ink-3);
}
html[data-pcnet-home="novo"] .pp-sidebar .card-hover.rounded-lg.p-2 > .flex.gap-1.mt-2 {
  margin-top: var(--pk-sp-1);
}


/* Pedido de 2026-10-13: a troca entre Hospedagem e Acesso remoto fica no cabeçalho,
   igual à do /remoto/ (pílula com a área atual em verde cheio). Marcada pelo
   pcnet-pegaprox.js (seção 11); só aparece para quem pode usar o acesso remoto. */
.pcnet-produtos {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  margin-left: var(--pk-sp-3);
  border-radius: var(--pk-radius-pill);
  background: var(--pk-surface-2);
  border: 1px solid var(--pk-hairline);
}
.pcnet-produto {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 var(--pk-sp-3);
  border-radius: var(--pk-radius-pill);
  color: var(--pk-ink-2);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--pk-text-sm);
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.pcnet-produto svg { width: 16px; height: 16px; flex-shrink: 0; }
a.pcnet-produto:hover { color: var(--pk-ink); background: var(--pk-hover-bg); }
a.pcnet-produto:focus-visible { outline: 3px solid var(--pk-green-dark); outline-offset: 2px; }
.pcnet-produto.is-ativo { background: var(--pk-green); color: var(--pk-on-green); }
/* Pedido de 2026-10-13: com o cabeçalho apertado, a chave encolhe (o rótulo some pelo
   pcnet-remocoes.css e fica só o ícone). */
@media (max-width: 1180px) {
  .pcnet-produto { padding: 0 10px; }
}
/* Pedido de 2026-10-13: no celular, a chave cola no logo. */
@media (max-width: 820px) {
  .pcnet-produtos { margin-left: var(--pk-sp-1); }
}
/* Pedido de 2026-10-13: com a chave no cabeçalho, em 1440 px do admin a linha quebrava
   ("PCNet Cloud", "Ao vivo" e "Adicionar Cluster" em duas linhas). Os textos ficam numa
   linha e a busca cede espaço até 1500 px. */
html[data-pcnet-produtos] .pp-header-row h1,
html[data-pcnet-produtos] .pp-header-actions button,
html[data-pcnet-produtos] .pp-header-actions span { white-space: nowrap; }
@media (max-width: 1500px) {
  html[data-pcnet-produtos] .pp-header-search input { width: 11rem; }
}

/* 12. Busca única. Pedido de 2026-10-15 (B1): servidores dos clientes na busca do cabeçalho. */
.pcnet-busca-ra { border-top: 1px solid var(--pk-border); padding: 6px 0; }
/* Pedido de 2026-10-15: título da seção do acesso remoto. */
.pcnet-busca-ra__tit { padding: 6px 12px; font-size: 12px; color: var(--pk-ink-3); text-transform: uppercase; letter-spacing: .04em; }
/* Pedido de 2026-10-15: cada servidor achado abre no /remoto/. */
.pcnet-busca-ra__item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; color: inherit; text-decoration: none; }
/* Pedido de 2026-10-15: destaque ao passar o mouse ou focar. */
.pcnet-busca-ra__item:hover, .pcnet-busca-ra__item:focus-visible { background: var(--pk-surface-2); }
/* Pedido de 2026-10-15: nome em destaque. */
.pcnet-busca-ra__item b { font-weight: 600; }
/* Pedido de 2026-10-15: cliente e IP à direita. */
.pcnet-busca-ra__item span { color: var(--pk-ink-3); font-size: 13px; margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Pedido de 2026-10-15: ponto de estado (offline). */
.pcnet-busca-ra__pt { width: 8px; height: 8px; border-radius: 50%; background: var(--pk-ink-3); flex: none; }
/* Pedido de 2026-10-15: ponto de estado (online). */
.pcnet-busca-ra__pt.is-on { background: var(--pk-green); }

/* 13. Cabeçalho igual nas três áreas. Pedido de 2026-10-16: mesmo tamanho, cor e fonte ao
   alternar entre Hospedagem, Acesso remoto e Backup; nome da área ao lado do logo. O texto vem
   por ::after porque o React reescreve o h1 a cada render. Medidas iguais às do /remoto e do
   /backup (logo 40 px de altura, nome 20 px, subtítulo 12 px, bloco do nome com 210 px). */
html[data-pcnet-produtos] .pp-header-row button > img { width: auto !important; height: 40px !important; border-radius: 0; }
/* Pedido de 2026-10-16: bloco do nome com largura fixa, para a chave ficar no mesmo lugar. */
html[data-pcnet-produtos] .pp-header-row button > div.text-left { width: 210px; min-width: 210px; flex-shrink: 0; }
/* Pedido de 2026-10-16: logo e nome com o mesmo espaço e sem encolher, como no /remoto. */
html[data-pcnet-produtos] .pp-header-row button:has(> img) { gap: 12px; flex-shrink: 0; }
/* Pedido de 2026-10-16: nome da área. */
html[data-pcnet-produtos] .pp-header-row h1 { font-size: 0; line-height: 0; color: var(--pk-ink); }
/* Pedido de 2026-10-16: "PCNet Hospedagem". */
html[data-pcnet-produtos] .pp-header-row h1::after { content: "PCNet Hospedagem"; display: block; font-size: 20px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
/* Pedido de 2026-10-16: subtítulo curto. */
html[data-pcnet-produtos] .pp-header-row h1 + p { font-size: 0; line-height: 0; }
/* Pedido de 2026-10-16: texto do subtítulo. */
html[data-pcnet-produtos] .pp-header-row h1 + p::after { content: "Clusters, VMs e clientes cloud"; display: block; font-size: 12px; line-height: 1.4; color: var(--pk-ink-3); white-space: nowrap; }
/* Pedido de 2026-10-16: chave no mesmo ponto das outras áreas (o botão do logo já traz 6 px a mais). */
html[data-pcnet-produtos] .pcnet-produtos { margin-left: 6px; }
/* Pedido de 2026-10-16: com o nome da área e a chave de três itens, em 1440 px a busca do PegaProx
   encostava na chave. Até 1600 px a busca fica compacta e sem a dica Ctrl+K. */
@media (max-width: 1600px) {
  html[data-pcnet-produtos] .pp-header-search input { width: 8rem; }
}