/* ────────────────────────────────────────────────────────────────────────
   HackStatus — componentes

   Na camada 1 vieram os TOKENS do HackStudio (cor, raio, espaço). Faltavam os
   COMPONENTES: `hs-panel`, `hs-card`, `hs-table-row`, `hs-input`, `hs-btn-*`.
   Sem eles a tela usava as cores certas com formas próprias — parecia prima
   distante, não irmã.

   Portados de hackstudio/src/app/hackstudio-theme.css. Os nomes são os mesmos
   de lá de propósito: quem conhece um dos dois painéis reconhece o outro, e
   quem for portar a próxima tela sabe o que procurar.
   ──────────────────────────────────────────────────────────────────────── */

/* ── Tipografia ──
   As duas famílias do HackStudio, servidas do próprio painel. Nada de fonte
   externa: a política de conteúdo permite só `self`, e relaxá-la num painel
   que guarda credencial de WHM não paga o conforto. Além disso, esta é a tela
   que precisa abrir quando o resto do ecossistema está degradado — depender de
   um CDN de terceiro para renderizar contradiz a razão dela existir.

   As duas são fontes VARIÁVEIS: um arquivo por família cobre todos os pesos,
   e as duas juntas somam 76 KB. */

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/fonts/ibm-plex-sans.woff2') format('woff2');
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/assets/fonts/montserrat.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --hs-font-body: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hs-font-display: 'Montserrat', var(--hs-font-body);
  --hs-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Título na fonte da marca; o resto na de interface — a mesma divisão do
   HackStudio. */
h1, h2, h3, .hs-display {
  font-family: var(--hs-font-display);
  letter-spacing: -0.015em;
}

/* ── Superfícies ── */

.hs-panel {
  background-color: var(--hs-surface);
  border: 1px solid var(--hs-border-subtle);
  border-radius: var(--hs-radius-lg);
}

.hs-panel-inset {
  background-color: var(--hs-background-subtle);
  border: 1px solid var(--hs-border-subtle);
  border-radius: var(--hs-radius-md);
}

.hs-card {
  background-color: var(--hs-surface);
  border: 1px solid var(--hs-border-subtle);
}

.hs-card-muted {
  background-color: var(--hs-surface-muted);
  border: 1px solid var(--hs-border-subtle);
}

.hs-card-padding { padding: var(--hs-space-card-y) var(--hs-space-card-x) }

.hs-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--hs-space-cell-y) var(--hs-space-card-x);
  border-bottom: 1px solid var(--hs-border-subtle);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--hs-text-primary);
}

/* ── Linha de tabela ──
   A transição é curta de propósito: numa lista longa, realce que demora a
   aparecer se lê como travamento. */
.hs-table-row { transition: background-color 0.12s ease }
.hs-table-row:hover { background-color: var(--hs-surface-hover) }

/* ── Entradas ── */

.hs-input,
.login-form input,
dialog input,
.domain-form input,
.search-box input {
  width: 100%;
  border-radius: var(--hs-radius-md);
  padding: 0.4375rem 0.625rem;
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--hs-text-primary);
  background-color: var(--hs-background-subtle);
  border: 1px solid var(--hs-border);
  outline: none;
  transition: border-color 0.15s ease;
}

/* O foco muda a BORDA, não desenha um anel por fora: anel de foco sobre fundo
   escuro come o espaçamento entre campos vizinhos. */
.hs-input:focus,
.login-form input:focus,
dialog input:focus,
.domain-form input:focus {
  border-color: color-mix(in srgb, var(--hs-orange) 50%, var(--hs-border));
}

.hs-filter-select {
  width: auto;
  min-width: 0;
  max-width: 11rem;
  padding: 0.3125rem 1.5rem 0.3125rem 0.5rem;
  font-size: 0.8125rem;
}

/* ── Botões ── */

/* Os nomes que a tela já usava entram nos mesmos seletores, em vez de terem
   definição própria: duas definições da mesma coisa divergem no dia em que
   alguém muda uma só. */
.hs-btn,
.primary-button,
.secondary-button,
.topbar-command {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: 0;
  border-radius: var(--hs-radius-md);
  padding: 0.4375rem 0.875rem;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.hs-btn:disabled, .primary-button:disabled, .secondary-button:disabled, .topbar-command:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.hs-btn-primary,
.primary-button { background-color: var(--hs-orange); color: var(--hs-accent-fg); font-weight: 600 }
.hs-btn-primary:hover:not(:disabled),
.primary-button:hover:not(:disabled) { background-color: var(--hs-orange-300) }

.hs-btn-outline,
.secondary-button,
.topbar-command {
  border: 1px solid var(--hs-border-subtle);
  background-color: var(--hs-surface-muted);
  color: var(--hs-text-primary);
}
.hs-btn-outline:hover:not(:disabled),
.secondary-button:hover:not(:disabled),
.topbar-command:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--hs-orange) 40%, var(--hs-border-subtle));
}

.hs-btn-ghost { background: transparent; color: var(--hs-text-secondary) }
.hs-btn-ghost:hover:not(:disabled) { background-color: var(--hs-surface-hover); color: var(--hs-orange) }

.hs-icon-well {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--hs-radius-md);
  padding: 0.375rem;
  background-color: var(--hs-surface-muted);
  border: 1px solid color-mix(in srgb, var(--hs-orange) 18%, var(--hs-border-subtle));
}

/* As superfícies que a tela já tinha, com o raio e a borda do HackStudio: o
   painel usava `radius-md` e borda cheia, contra `radius-lg` e borda sutil de
   lá — diferença pequena que, repetida em toda seção, muda o ar da tela. */
.content-section,
.chart-section,
.incident-list,
.painel-ativo,
.diagnostico {
  background-color: var(--hs-surface);
  border: 1px solid var(--hs-border-subtle);
  border-radius: var(--hs-radius-lg);
}

.service-group .service-row,
.asset-row,
.domain-row,
.setting-row {
  transition: background-color 0.12s ease;
}

.service-group .service-row:hover,
.domain-row:hover {
  background-color: var(--hs-surface-hover);
}

/* ── A casca: lateral + conteúdo ──
   A gramática de layout do HackStudio. Portar só os tokens deixava a tela com
   as cores certas e a forma errada — e é a forma que se reconhece primeiro. */

body:has(.hs-sidebar) {
  display: grid;
  grid-template-columns: 232px 1fr;
  min-height: 100vh;
}

.hs-sidebar {
  display: flex;
  flex-direction: column;
  background-color: var(--hs-background-subtle);
  border-right: 1px solid var(--hs-border-subtle);
  position: sticky;
  top: 0;
  height: 100vh;
  /* `align-self: start` é o que faz o `sticky` funcionar aqui. Item de grade
     estica para a altura da LINHA por padrão, e uma caixa de 1.527px não tem
     para onde grudar dentro de si mesma: a lateral rolava junto com a página e
     sumia em qualquer tela longa — Monitores, Integrações, o registro de
     acesso. O `100vh` acima sozinho não bastava; ele descreve a altura, não o
     alinhamento. */
  align-self: start;
  overflow-y: auto;
}

.hs-sidebar-topo {
  display: flex;
  align-items: center;
  height: 52px;
  padding: 0 14px;
  flex: none;
}

.hs-sidebar-topo .brand strong { font-family: var(--hs-font-display); font-weight: 700; font-size: 0.95rem }
.hs-sidebar-topo .brand strong span { font-weight: 400; color: var(--hs-text-secondary) }

.hs-sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.hs-sidebar-grupo {
  margin: 12px 0 3px;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hs-text-tertiary);
}

.hs-sidebar-nav > .hs-sidebar-grupo:first-child { margin-top: 4px }

.hs-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: var(--hs-radius-md);
  background: transparent;
  color: var(--hs-text-secondary);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.hs-nav-item .icon { width: 15px; height: 15px; flex: none; color: var(--hs-text-tertiary) }
.hs-nav-item:hover { background-color: var(--hs-surface-hover); color: var(--hs-text-primary) }
.hs-nav-item:focus-visible { outline: 2px solid var(--hs-orange); outline-offset: -2px }

/* O item ativo ganha a barra vertical à esquerda, como no Studio: marca a
   posição sem pintar a linha inteira de laranja. */
.hs-nav-item.active {
  background-color: var(--hs-surface);
  color: var(--hs-text-primary);
  font-weight: 600;
}

.hs-nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 16px;
  border-radius: 999px;
  background: var(--hs-orange);
}

.hs-nav-item.active .icon { color: var(--hs-orange) }
.hs-nav-item .count-badge { margin-left: auto }

.hs-sidebar-rodape {
  flex: none;
  padding: 8px;
  border-top: 1px solid var(--hs-border-subtle);
}

.hs-conteudo { min-width: 0; display: flex; flex-direction: column }

@media (max-width: 900px) {
  body:has(.hs-sidebar) { grid-template-columns: 1fr }
  .hs-sidebar { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--hs-border-subtle) }
  .hs-sidebar-nav { flex-direction: row; flex-wrap: wrap; overflow-x: auto }
  .hs-sidebar-grupo { display: none }
  .hs-sidebar-rodape { border-top: 0 }
}