/* Layout do portal PCNet Cloud. Cor, fonte, raio e sombra vêm só de tokens --pk-*. */
.pk-app .pk-select { appearance: none; -webkit-appearance: none; }
.pc-espaco { flex: 1; }
.pc-linha { display: flex; align-items: center; gap: var(--pk-sp-2); flex-wrap: wrap; }
.pc-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--pk-sp-3); flex-wrap: wrap; margin: var(--pk-sp-4) 0 var(--pk-sp-3); }
.pc-topo .pk-section-title { margin: 0; }
.pc-tabela { overflow-x: auto; }
.pc-mono { font-family: var(--pk-font-mono); font-size: var(--pk-text-sm); }
.pc-fraco { color: var(--pk-ink-2); }
.pc-acoes { display: flex; gap: var(--pk-sp-1); justify-content: flex-end; flex-wrap: wrap; }
.pc-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--pk-space); }

/* entrada */
.pc-entrada { max-width: 420px; margin: 8vh auto 0; }
.pc-entrada__logo { display: flex; flex-direction: column; align-items: center; gap: var(--pk-sp-2); margin-bottom: var(--pk-sp-4); }
.pc-entrada__logo .pk-logo { height: 56px; max-width: 220px; }
.pc-entrada__logo strong { font-size: var(--pk-text-xl); color: var(--pk-ink); }
.pc-entrada .pk-btn { width: 100%; justify-content: center; }

/* medidores de cota */
.pc-cota { display: flex; flex-direction: column; gap: var(--pk-sp-1); }
.pc-cota__rotulo { font-size: var(--pk-text-sm); font-weight: 600; color: var(--pk-ink-2); text-transform: uppercase; letter-spacing: .4px; }
.pc-cota__num { font-family: var(--pk-font-mono); font-size: var(--pk-text-lg); color: var(--pk-ink); }
.pc-cota__num small { font-size: var(--pk-text-sm); color: var(--pk-ink-2); white-space: nowrap; }   /* "de 200 GB" nunca se parte */
.pc-barra { height: 8px; border-radius: var(--pk-radius-pill); background: var(--pk-hairline); overflow: hidden; }
.pc-barra > span { display: block; height: 100%; border-radius: var(--pk-radius-pill); background: var(--pk-green); transition: width .3s var(--pk-ease); }
.pc-barra--warn > span { background: var(--pk-warning); }
.pc-barra--crit > span { background: var(--pk-danger); }

/* faixa "Seu plano" */
.pc-plano { display: grid; grid-template-columns: 1fr auto; gap: var(--pk-sp-4); align-items: center; }
.pc-plano__cotas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pk-sp-4); }
.pc-plano__acao { display: flex; flex-direction: column; align-items: flex-end; gap: var(--pk-sp-2); }
.pc-plano__pedidos { display: inline-flex; align-items: center; gap: var(--pk-sp-1); font-size: var(--pk-text-sm); color: var(--pk-green-ink); }
.pc-alerta-acao { display: flex; align-items: center; justify-content: space-between; gap: var(--pk-sp-3); flex-wrap: wrap; }

/* "a · b · c": quebra entre itens, nunca dentro; o "·" fica no fim do item anterior */
.pc-itens { display: inline-flex; flex-wrap: wrap; column-gap: .4em; row-gap: 2px; min-width: 0; }
.pc-item { white-space: nowrap; }
.pc-item:not(:last-child)::after { content: "·"; margin-left: .4em; color: var(--pk-ink-3); }

/* área de conteúdo um pouco mais larga que a da casa (1080 px): a lista de servidores tem
   7 colunas e, em 1080, nome e plano ficavam espremidos. */
.pk-main { max-width: 1200px; }

/* lista de servidores: .pk-row da casa, com o nome como link que cobre a linha */
.pc-lista { display: flex; flex-direction: column; gap: var(--pk-sp-2); }
.pc-srv {
  position: relative; display: grid; align-items: center; gap: var(--pk-sp-3);
  /* só o ícone, o estado, as ações e a seta têm largura fixa (iguais em toda linha, o
     que alinha as colunas); nome, plano e uso dividem o resto. Nada fica em largura
     menor que o próprio texto: o plano quebra entre itens, o nome nos hífens. */
  grid-template-columns: 40px minmax(0, 1.4fr) 120px minmax(0, 1.3fr) minmax(140px, .9fr) 136px 18px;
}
.pc-srv__icone { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--pk-radius-sm); background: var(--pk-green-soft); color: var(--pk-green-dark); font-size: 20px; }
.pc-srv__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pc-srv__nome { font-size: var(--pk-text-md); font-weight: 600; color: var(--pk-ink); text-decoration: none; overflow-wrap: break-word; min-width: 0; }
a.pc-srv__nome::after { content: ""; position: absolute; inset: 0; border-radius: var(--pk-radius); }
a.pc-srv__nome:focus-visible { outline: none; }
a.pc-srv__nome:focus-visible::after { outline: 3px solid var(--pk-green-dark); outline-offset: 2px; }
.pc-srv__plano { color: var(--pk-ink-2); min-width: 0; }
.pc-srv__uso, .pc-srv__estado { min-width: 0; }
.pc-srv__uso { display: flex; flex-direction: column; gap: 4px; }
.pc-srv__acoes { position: relative; z-index: 1; display: flex; gap: var(--pk-sp-1); justify-content: flex-end; }
.pc-srv__seta { color: var(--pk-ink-3); font-size: 18px; display: grid; }
.pc-srv--job { cursor: default; grid-template-columns: auto 1fr; }
.pc-mini { display: grid; grid-template-columns: 32px 1fr 40px; align-items: center; gap: var(--pk-sp-2); font-size: var(--pk-text-xs); color: var(--pk-ink-2); }
.pc-mini__num { text-align: right; font-size: var(--pk-text-xs); }
.pc-barra--fina { height: 6px; }
.pc-pedido { cursor: default; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--pk-sp-3); }

/* cabeçalho do servidor */
.pc-cab { display: flex; flex-direction: column; gap: var(--pk-sp-3); }
.pc-cab__id { display: flex; align-items: center; gap: var(--pk-sp-3); flex-wrap: wrap; }
.pc-cab__nome { margin: 0; font-size: var(--pk-text-xl); font-weight: 700; color: var(--pk-ink); overflow-wrap: anywhere; }
.pc-cab__estado { margin-left: auto; }
.pc-cab__rodape { display: flex; align-items: center; justify-content: space-between; gap: var(--pk-sp-3); flex-wrap: wrap; padding-top: var(--pk-sp-3); border-top: 1px solid var(--pk-hairline); }
.pc-cab__plano { color: var(--pk-ink-2); }

/* visão geral: números e gráficos */
.pc-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pk-sp-4); }
.pc-kpi { display: flex; flex-direction: column; gap: 2px; }
.pc-kpi__num { font-family: var(--pk-font-mono); font-size: var(--pk-text-xl); color: var(--pk-ink); }
.pc-periodo { display: flex; gap: var(--pk-sp-1); flex-wrap: wrap; }
.pc-periodo .pk-btn[aria-pressed="true"] { background: var(--pk-green-soft); border-color: var(--pk-green-line); color: var(--pk-green-ink); }
.pc-graficos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pk-space); }
.pc-g__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--pk-sp-2); flex-wrap: wrap; margin-bottom: var(--pk-sp-2); }
.pc-g__topo .pk-panel__title { margin: 0; font-size: var(--pk-text-md); }
.pc-graficos > .pk-panel { margin: 0; }
.pc-g__area { position: relative; min-height: 180px; }
.pc-g__svg { display: block; touch-action: pan-y; }
.pc-g__grade { stroke: var(--pk-hairline); stroke-width: 1; }
.pc-g__eixo { fill: var(--pk-ink-2); font-family: var(--pk-font-mono); font-size: var(--pk-text-xs); }
.pc-g__linha { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
/* Cores das séries, validadas com o validate_palette.js (skill dataviz) nos dois temas.
   No escuro o --pk-green-dark (#9ed04f) sai da faixa de luminosidade de linha de gráfico
   (L 0,80 > 0,67); a mistura com o fundo dá #6a9633, que passa em tudo. */
.pk-app { --pc-serie-1: var(--pk-green-dark); --pc-serie-2: var(--pk-info); }
html[data-pcnet-tema="escuro"] .pk-app { --pc-serie-1: color-mix(in srgb, var(--pk-green) 72%, var(--pk-bg)); }
.pc-g__linha.pc-serie-1 { stroke: var(--pc-serie-1); }
.pc-g__linha.pc-serie-2 { stroke: var(--pc-serie-2); }
.pc-g__ponto { stroke: var(--pk-surface); stroke-width: 2; }
.pc-g__ponto.pc-serie-1 { fill: var(--pc-serie-1); }
.pc-g__ponto.pc-serie-2 { fill: var(--pc-serie-2); }
.pc-g__mira { stroke: var(--pk-ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.pc-g__alvo { fill: transparent; pointer-events: all; }
.pc-g__dica {
  position: absolute; top: 8px; z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; gap: 2px; padding: var(--pk-sp-2) var(--pk-sp-3);
  background: var(--pk-surface); border: 1px solid var(--pk-hairline); border-radius: var(--pk-radius-xs);
  box-shadow: var(--pk-shadow-md); font-size: var(--pk-text-sm); color: var(--pk-ink); white-space: nowrap;
}
.pc-g__dica strong { font-weight: 600; }
.pc-g__dica span { display: flex; align-items: center; gap: var(--pk-sp-1); color: var(--pk-ink-2); }
.pc-g__dica b { color: var(--pk-ink); font-weight: 600; }
.pc-legenda { display: flex; gap: var(--pk-sp-3); font-size: var(--pk-text-sm); color: var(--pk-ink-2); }
.pc-legenda span { display: inline-flex; align-items: center; gap: var(--pk-sp-1); }
.pc-amostra { display: inline-block; width: 14px; height: 3px; border-radius: var(--pk-radius-pill); }
.pc-amostra.pc-serie-1 { background: var(--pc-serie-1); }
.pc-amostra.pc-serie-2 { background: var(--pc-serie-2); }
.pc-dados { margin-top: var(--pk-sp-3); }
.pc-dados summary { cursor: pointer; color: var(--pk-green-ink); font-size: var(--pk-text-sm); min-height: 44px; display: flex; align-items: center; }

/* stepper de recursos */
.pc-steppers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pk-sp-4); }
.pc-stepper__topo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--pk-sp-2); }
.pc-stepper__delta { color: var(--pk-green-ink); font-size: var(--pk-text-sm); }
.pc-stepper__linha { display: flex; align-items: center; gap: var(--pk-sp-1); }
.pc-stepper__linha .pk-input { text-align: center; min-width: 72px; flex: 1; }
.pc-stepper__delta { white-space: nowrap; }
.pk-modal .pc-steppers { grid-template-columns: 1fr; gap: var(--pk-sp-3); }
.pc-regua { width: 100%; margin: var(--pk-sp-2) 0 0; accent-color: var(--pk-green-dark); }
.pc-saldo { margin: var(--pk-sp-3) 0 0; color: var(--pk-ink-2); font-size: var(--pk-text-sm); }
.pc-limite { margin: var(--pk-sp-2) 0 0; color: var(--pk-warning-ink); font-size: var(--pk-text-sm); }
.pc-link { background: none; border: 0; padding: 0; font: inherit; color: var(--pk-green-ink); text-decoration: underline; cursor: pointer; display: inline-flex; align-items: center; gap: var(--pk-sp-1); min-height: 32px; }
.pc-check { display: flex; align-items: flex-start; gap: var(--pk-sp-2); margin-top: var(--pk-sp-3); color: var(--pk-ink); cursor: pointer; }
.pc-check input { margin-top: 4px; accent-color: var(--pk-green-dark); width: 18px; height: 18px; flex: none; }
.pc-check small { display: block; color: var(--pk-ink-2); font-size: var(--pk-text-sm); }

/* zona de perigo */
.pc-perigo { --pk-card-tom: var(--pk-danger); }
.pc-perigo .pk-panel__title { color: var(--pk-danger-ink); display: flex; align-items: center; gap: var(--pk-sp-1); }
.pc-perigo__item { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--pk-sp-4); flex-wrap: wrap; padding-top: var(--pk-sp-3); margin-top: var(--pk-sp-3); border-top: 1px solid var(--pk-hairline); }
.pc-perigo__item p { margin: 2px 0 0; }
.pc-perigo__form { flex: 1; min-width: 240px; }

/* carregando: blocos no lugar do conteúdo que vem */
.pc-skel { display: flex; flex-direction: column; gap: var(--pk-sp-2); }
.pc-skel__linha, .pc-skel__bloco { border-radius: var(--pk-radius-sm); background: var(--pk-hairline); animation: pc-pulsar 1.4s ease-in-out infinite; }
.pc-skel__linha { height: 52px; }
.pc-skel__bloco { height: 170px; }
@keyframes pc-pulsar { 50% { background: var(--pk-hover-bg); } }
@media (prefers-reduced-motion: reduce) { .pc-skel__linha, .pc-skel__bloco { animation: none; } }

/* estados de servidor */
.pc-st--on    { background: var(--pk-st-solucionado-bg); color: var(--pk-st-solucionado-ink); }
.pc-st--off   { background: var(--pk-st-fechado-bg); color: var(--pk-st-fechado-ink); }
.pc-st--busy  { background: var(--pk-st-andamento-bg); color: var(--pk-st-andamento-ink); }
.pc-st--erro  { background: var(--pk-danger-soft); color: var(--pk-danger-ink); }
.pc-servidor strong { display: block; color: var(--pk-ink); }
.pc-servidor small { color: var(--pk-ink-2); }

/* criação: escolha de template */
.pc-templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--pk-sp-2); }
.pc-template { display: flex; align-items: center; gap: var(--pk-sp-2); min-height: 52px; padding: var(--pk-sp-2) var(--pk-sp-3); border: 1px solid var(--pk-hairline); border-radius: var(--pk-radius-sm); color: var(--pk-ink); cursor: pointer; }
.pc-template:hover { border-color: var(--pk-hairline-hover); background: var(--pk-hover-bg); }
.pc-template:has(input:checked) { border-color: var(--pk-green-dark); background: var(--pk-green-soft); }
.pc-template input { accent-color: var(--pk-green-dark); width: 18px; height: 18px; }
.pc-template small { display: block; color: var(--pk-ink-2); font-size: var(--pk-text-xs); }

.pc-senha-temp { font-family: var(--pk-font-mono); font-size: var(--pk-text-xl); color: var(--pk-ink); padding: var(--pk-sp-3); border: 1px dashed var(--pk-green-dark); border-radius: var(--pk-radius-sm); text-align: center; user-select: all; }
.pc-detalhes { display: grid; grid-template-columns: max-content 1fr; gap: var(--pk-sp-1) var(--pk-sp-4); margin: 0; }
.pc-detalhes dt { color: var(--pk-ink-2); }
.pc-detalhes dd { margin: 0; color: var(--pk-ink); }
.pk-tabs { margin-bottom: var(--pk-sp-3); flex-wrap: wrap; }

/* console */
.pc-console { position: fixed; inset: 0; z-index: 12000; display: flex; flex-direction: column; background: var(--pk-bg); }
.pc-console[hidden] { display: none; }
.pc-console__barra { display: flex; align-items: center; gap: var(--pk-sp-2); padding: var(--pk-sp-2) var(--pk-sp-3); border-bottom: 1px solid var(--pk-hairline); background: var(--pk-surface); flex-wrap: wrap; }
.pc-console__barra strong { color: var(--pk-ink); }
.pc-console__estado { color: var(--pk-ink-2); font-size: var(--pk-text-sm); }
.pc-console__tela { flex: 1; min-height: 0; background: var(--pk-ink); }

@media (max-width: 1100px) {
  .pc-srv { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "ic id st seta" "ic pl pl pl" "ic us ac ac"; }
  .pc-srv__icone { grid-area: ic; align-self: start; }
  .pc-srv__id { grid-area: id; } .pc-srv__estado { grid-area: st; } .pc-srv__seta { grid-area: seta; }
  .pc-srv__plano { grid-area: pl; } .pc-srv__uso { grid-area: us; } .pc-srv__acoes { grid-area: ac; }
  .pc-srv--job { grid-template-areas: "ic id"; grid-template-columns: auto 1fr; }
}
@media (max-width: 980px) {
  .pc-grid-4, .pc-plano__cotas, .pc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc-plano { grid-template-columns: 1fr; }
  .pc-plano__acao { align-items: flex-start; }
  .pc-graficos { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .pc-grid-4, .pc-steppers { grid-template-columns: 1fr; }
  .pc-detalhes { grid-template-columns: 1fr; }
  .pc-srv { grid-template-areas: "ic id seta" "ic st st" "ic pl pl" "ic us us" "ic ac ac"; grid-template-columns: auto minmax(0, 1fr) auto; }
  .pc-srv__acoes { justify-content: flex-start; }
  .pc-cab__estado { margin-left: 0; }
}
@media (hover: none) { .pk-row.pc-srv:hover { border-color: var(--pk-green-line); box-shadow: var(--pk-shadow-sm); } .pk-row.pc-srv:active { border-color: var(--pk-green); } }
.pc-mt { margin-top: var(--pk-sp-4); }
/* Tela standalone não tem o reset do GLPI: link com cara de botão/aba não sublinha. */
.pk-app a.pk-btn, .pk-app a.pk-nav__item, .pk-app a.pk-tab, .pk-app a.pk-pop__item, .pk-app a.pk-iconbtn { text-decoration: none; }

/* O atributo hidden precisa vencer o display das peças (.pk-btn, .pk-panel etc.). */
[hidden] { display: none !important; }
.pk-app .pc-chave { min-height: 96px; }