/* ==========================================================================
   ATHOM RMM — folha de estilo da interface

   Diretrizes:
   - Densidade de ferramenta de operação: a tabela é o produto, não a moldura.
   - Raio pequeno (3px), borda de 1px, sombra só onde há sobreposição real.
   - Uma cor de destaque, derivada do azul-aço do logotipo. Sem gradiente.
   - Tipografia do sistema: nada de fonte externa (funciona sem internet,
     não vaza requisição para terceiros e não pisca ao carregar).
   - Nenhum `style=""` no HTML: a política de segurança de conteúdo bloqueia
     estilo inline, o que também elimina uma classe inteira de injeção.
   ========================================================================== */

:root {
  --font-sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Mono", "Consolas", "SF Mono", ui-monospace, monospace;

  --fs-xs: 10.5px;
  --fs-sm: 11.5px;
  --fs-md: 12.5px;
  --fs-base: 13px;
  --fs-lg: 14.5px;
  --fs-xl: 17px;

  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;

  --r-xs: 2px; --r-sm: 3px; --r-md: 5px;

  --control-h: 30px;
  --sidebar-w: 240px;
  --topbar-h: 52px;

  --t-fast: 90ms;
  --t-base: 150ms;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

:root, [data-theme="light"] {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #fafbfc;
  --surface-3: #eef0f3;
  --surface-hover: #f4f6f8;
  --border: #dde1e6;
  --border-soft: #e8eaee;
  --border-strong: #c3c9d1;
  --text: #1a1f26;
  --text-2: #565e6b;
  --text-3: #838b97;
  --accent: #2f5d8a;
  --accent-hover: #25496d;
  --accent-soft: #e9eff5;
  --accent-ink: #ffffff;
  --online: #1f7a4d;
  --online-soft: #e6f2ec;
  --offline: #7b838f;
  --offline-soft: #eff1f3;
  --warn: #8a6115;
  --warn-soft: #fbf1de;
  --crit: #a63229;
  --crit-soft: #fbeae8;
  /* Faixa "degradado" do Health Score. Existe como cor própria porque a
     distribuição tem quatro faixas: reaproveitar --crit nas duas piores as
     tornaria indistinguíveis justamente no gráfico feito para separá-las. */
  --degraded: #b4601f;
  --degraded-soft: #fbeee2;
  --shadow-pop: 0 4px 14px rgba(23, 28, 36, .10), 0 1px 3px rgba(23, 28, 36, .08);
  --shadow-modal: 0 16px 40px rgba(23, 28, 36, .18), 0 2px 8px rgba(23, 28, 36, .10);
  --scrim: rgba(24, 29, 36, .38);
  --skeleton: linear-gradient(90deg, #eef0f3 0%, #e4e7eb 50%, #eef0f3 100%);
}

[data-theme="dark"] {
  --bg: #131619;
  --surface: #191c21;
  --surface-2: #1d2126;
  --surface-3: #23272d;
  --surface-hover: #202429;
  --border: #2b3037;
  --border-soft: #232830;
  --border-strong: #3b424b;
  --text: #e3e6ea;
  --text-2: #9aa2ad;
  --text-3: #6c7480;
  --accent: #6d9dcf;
  --accent-hover: #85b0dc;
  --accent-soft: rgba(109, 157, 207, .15);
  --accent-ink: #10161d;
  --online: #4fae7d;
  --online-soft: rgba(79, 174, 125, .14);
  --offline: #757d89;
  --offline-soft: rgba(117, 125, 137, .14);
  --warn: #cf9a3d;
  --warn-soft: rgba(207, 154, 61, .14);
  --crit: #dd6a5f;
  --crit-soft: rgba(221, 106, 95, .14);
  --degraded: #d9873f;
  --degraded-soft: rgba(217, 135, 63, .14);
  --shadow-pop: 0 4px 14px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .35);
  --shadow-modal: 0 16px 40px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .4);
  --scrim: rgba(8, 10, 13, .62);
  --skeleton: linear-gradient(90deg, #202429 0%, #272c33 50%, #202429 100%);
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.45;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
svg { display: block; flex-shrink: 0; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-radius: var(--r-xs);
}

::selection { background: var(--accent-soft); color: var(--text); }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num  { font-variant-numeric: tabular-nums; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- estrutura ---------- */

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

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: sticky;
  top: 0;
}

.brand {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 0 var(--sp-4);
  height: var(--topbar-h);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.brand img { width: 24px; height: 24px; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-name { font-size: var(--fs-md); font-weight: 600; letter-spacing: -.01em; }
.brand-sub {
  font-size: 9.5px; color: var(--text-3); text-transform: uppercase;
  letter-spacing: .1em; font-weight: 500;
}

.sidebar-scroll { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-2) var(--sp-2); }

.nav-group { margin-bottom: var(--sp-5); }
.nav-label {
  font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-3);
  padding: 0 var(--sp-2) var(--sp-2);
  display: flex; align-items: center; justify-content: space-between;
}

.nav-item {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%; text-align: left;
  padding: 0 var(--sp-2); height: 28px;
  border-radius: var(--r-sm);
  color: var(--text-2); font-size: var(--fs-md);
  position: relative;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav-item:hover { background: var(--surface-hover); color: var(--text); }
.nav-item[aria-current="true"] {
  background: var(--accent-soft); color: var(--text); font-weight: 600;
}
.nav-item[aria-current="true"]::before {
  content: ""; position: absolute; left: -8px; top: 6px; bottom: 6px;
  width: 2px; border-radius: 0 2px 2px 0; background: var(--accent);
}
.nav-item .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item .count {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm); color: var(--text-3); flex-shrink: 0;
}
.nav-item[aria-current="true"] .count { color: var(--accent); }
.nav-item .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.nav-item .icon { color: var(--text-3); }
.nav-item:hover .icon, .nav-item[aria-current="true"] .icon { color: inherit; }

.nav-item .remove {
  opacity: 0; flex-shrink: 0; color: var(--text-3);
  width: 18px; height: 18px; border-radius: var(--r-xs);
  display: flex; align-items: center; justify-content: center;
  transition: opacity var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.nav-item:hover .remove, .nav-item .remove:focus-visible { opacity: 1; }
.nav-item .remove:hover { color: var(--crit); background: var(--crit-soft); }

.new-group { display: flex; gap: var(--sp-1); padding: var(--sp-2) var(--sp-2) 0; }
.new-group .field { flex: 1; min-width: 0; }

.sidebar-footer {
  border-top: 1px solid var(--border);
  padding: var(--sp-2);
  flex-shrink: 0;
}
.user-chip {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%; padding: var(--sp-2); border-radius: var(--r-sm);
  transition: background var(--t-fast) var(--ease);
}
.user-chip:hover { background: var(--surface-hover); }
.avatar {
  width: 24px; height: 24px; border-radius: var(--r-sm); flex-shrink: 0;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-sm); font-weight: 600; text-transform: uppercase;
}
.user-chip .who { flex: 1; min-width: 0; text-align: left; }
.user-chip .who .name {
  font-size: var(--fs-md); font-weight: 500; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.user-chip .who .role { font-size: var(--fs-xs); color: var(--text-3); }

.nav-item.is-quiet { color: var(--text-3); font-style: italic; cursor: default; }
.nav-item.is-quiet:hover { background: none; color: var(--text-3); }
.nav-group .nav-label + #nav-inventory .nav-label { margin-top: var(--sp-3); }

/* ---------- área principal ---------- */

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

.topbar {
  height: var(--topbar-h); flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding: 0 var(--sp-5);
  position: sticky; top: 0; z-index: 20;
}
.topbar-title { display: flex; align-items: baseline; gap: var(--sp-3); min-width: 0; }
.topbar-title h1 { font-size: var(--fs-lg); }
.topbar-title .context {
  font-size: var(--fs-md); color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar-actions { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }

.figures { display: flex; align-items: center; gap: var(--sp-4); }
.figure { display: flex; align-items: baseline; gap: 5px; }
.figure .v { font-size: var(--fs-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.figure .k { font-size: var(--fs-sm); color: var(--text-3); }
.figure.is-online .v { color: var(--online); }
.figure.is-attention .v { color: var(--warn); }
.figure-sep { width: 1px; height: 18px; background: var(--border); }

.sync {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.sync .led { width: 6px; height: 6px; border-radius: 50%; background: var(--online); }
.sync.is-stale .led { background: var(--warn); }
.sync.is-error { color: var(--crit); }
.sync.is-error .led { background: var(--crit); }

.content { padding: var(--sp-5); flex: 1; min-width: 0; }
.view[hidden] { display: none; }

/* ---------- controles ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--control-h); padding: 0 var(--sp-3);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text);
  font-size: var(--fs-md); font-weight: 500; white-space: nowrap;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.btn:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--text-3); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-danger { background: var(--crit); border-color: var(--crit); color: #fff; }
.btn-danger:hover:not(:disabled) { filter: brightness(.93); }
.btn-quiet { border-color: transparent; background: none; color: var(--text-2); }
.btn-quiet:hover:not(:disabled) { background: var(--surface-hover); color: var(--text); border-color: transparent; }
.btn-sm { height: 26px; padding: 0 var(--sp-2); font-size: var(--fs-sm); }
.btn-icon { width: var(--control-h); padding: 0; }
.btn-icon.btn-sm { width: 26px; }

.field {
  height: var(--control-h); width: 100%;
  padding: 0 var(--sp-2);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  font-size: var(--fs-md);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field::placeholder { color: var(--text-3); }
.field:hover:not(:focus) { border-color: var(--text-3); }
.field:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
textarea.field { height: auto; padding: var(--sp-2); resize: vertical; line-height: 1.5; }

select.field {
  appearance: none; padding-right: 22px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23838b97' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 6px center;
}

/* A busca é elástica em vez de ter largura fixa: com largura fixa ela era
   espremida pelo controle de situação em telas estreitas e sobrava um campo de
   poucos pixels, impossível de usar. */
.search {
  position: relative; display: flex; align-items: center;
  flex: 0 1 280px; min-width: 190px;
}
.search .icon { position: absolute; left: 9px; color: var(--text-3); pointer-events: none; }
.search .field { padding-left: 29px; width: 100%; }
.search .clear {
  position: absolute; right: 6px; color: var(--text-3);
  width: 18px; height: 18px; border-radius: var(--r-xs);
  display: flex; align-items: center; justify-content: center;
}
.search .clear:hover { color: var(--text); background: var(--surface-3); }

.segmented {
  display: inline-flex; height: var(--control-h);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface); overflow: hidden;
}
.segmented button {
  padding: 0 var(--sp-3); font-size: var(--fs-md); color: var(--text-2);
  border-right: 1px solid var(--border);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.segmented button:last-child { border-right: none; }
.segmented button:hover { background: var(--surface-hover); color: var(--text); }
.segmented button[aria-pressed="true"] {
  background: var(--accent-soft); color: var(--accent); font-weight: 600;
}
[data-theme="dark"] .segmented button[aria-pressed="true"] { color: var(--text); }

.toolbar {
  display: flex; align-items: center; gap: var(--sp-2);
  flex-wrap: wrap; margin-bottom: var(--sp-3);
}
.toolbar .spacer { flex: 1; min-width: var(--sp-2); }

/* ---------- tabela ---------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.panel-head h2 { font-size: var(--fs-base); font-weight: 600; }
.panel-head .desc { font-size: var(--fs-md); color: var(--text-3); margin-top: 2px; }
.panel-body { padding: var(--sp-4); }

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

table.data { width: 100%; border-collapse: collapse; min-width: 940px; }

table.data thead th {
  text-align: left; font-size: var(--fs-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--text-3);
  background: var(--surface-2);
  padding: 0 var(--sp-3); height: 30px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
table.data thead th.right { text-align: right; }
table.data th .sorter {
  display: inline-flex; align-items: center; gap: 4px;
  font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit;
}
table.data th .sorter:hover { color: var(--text); }
table.data th .sorter .arrow { opacity: 0; transition: opacity var(--t-fast); }
table.data th[aria-sort] .sorter { color: var(--text); }
table.data th[aria-sort] .sorter .arrow { opacity: 1; }
table.data th.right .sorter { justify-content: flex-end; width: 100%; }

table.data tbody tr { border-bottom: 1px solid var(--border-soft); }
table.data tbody tr:last-child { border-bottom: none; }
table.data tbody tr:hover { background: var(--surface-hover); }
table.data td {
  padding: 0 var(--sp-3); height: 38px;
  font-size: var(--fs-md); vertical-align: middle;
}
table.data td.right { text-align: right; font-variant-numeric: tabular-nums; }
table.data td.muted { color: var(--text-2); }
table.data td.tight { width: 1px; white-space: nowrap; }
.cell-link { cursor: pointer; }

.host { display: flex; align-items: center; gap: 6px; min-width: 0; }
.host .name {
  font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.host .flag { color: var(--warn); flex-shrink: 0; }
.host .flag.is-crit { color: var(--crit); }

.status {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-sm); font-weight: 500;
  padding: 2px 7px; border-radius: var(--r-sm); white-space: nowrap;
}
.status .led { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status.is-online { color: var(--online); background: var(--online-soft); }
.status.is-offline { color: var(--offline); background: var(--offline-soft); }

.meter { display: inline-flex; align-items: center; gap: 7px; justify-content: flex-end; width: 100%; }
.meter .track {
  width: 44px; height: 4px; border-radius: 2px; background: var(--surface-3);
  overflow: hidden; flex-shrink: 0;
}
.meter .fill { height: 100%; background: var(--accent); border-radius: 2px; }
.meter .fill.is-warn { background: var(--warn); }
.meter .fill.is-crit { background: var(--crit); }
.meter .pct { font-variant-numeric: tabular-nums; min-width: 30px; text-align: right; }

.notes-cell { width: 190px; }
.notes-input {
  width: 100%; height: 26px; padding: 0 6px;
  background: transparent; border: 1px solid transparent; border-radius: var(--r-sm);
  font-size: var(--fs-md); color: var(--text);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.notes-input::placeholder { color: var(--text-3); }
.notes-input:hover { border-color: var(--border); }
.notes-input:focus {
  border-color: var(--accent); background: var(--surface);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.notes-input.is-saved { border-color: var(--online); }

select.group-cell { height: 26px; max-width: 140px; font-size: var(--fs-sm); }

.row-actions { display: flex; align-items: center; gap: 2px; justify-content: flex-end; }
.row-actions .btn-quiet:hover { color: var(--crit); background: var(--crit-soft); }

/* ---------- paginação ---------- */

.pager {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  font-size: var(--fs-md); color: var(--text-2);
  flex-wrap: wrap;
}
.pager .controls { display: flex; align-items: center; gap: var(--sp-2); }
.pager select.field { height: 26px; font-size: var(--fs-sm); width: auto; }

/* ---------- estados ---------- */

.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: var(--sp-10) var(--sp-6); gap: var(--sp-3);
}
.empty .glyph {
  width: 38px; height: 38px; border-radius: var(--r-md);
  background: var(--surface-3); color: var(--text-3);
  display: flex; align-items: center; justify-content: center;
}
.empty h3 { font-size: var(--fs-base); font-weight: 600; }
.empty p { margin: 0; font-size: var(--fs-md); color: var(--text-2); max-width: 380px; }

.skeleton-row td { height: 38px; }
.skeleton-bar {
  height: 9px; border-radius: var(--r-xs);
  background: var(--skeleton); background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-bar { animation: none; }
}

.banner {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  padding: var(--sp-3); border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface-2);
  font-size: var(--fs-md); color: var(--text-2);
  margin-bottom: var(--sp-3);
}
.banner .icon { flex-shrink: 0; margin-top: 1px; }
.banner.is-warn { border-color: var(--warn); background: var(--warn-soft); color: var(--text); }
.banner.is-warn .icon { color: var(--warn); }
.banner strong { color: var(--text); }

/* ---------- modal ---------- */

.overlay {
  position: fixed; inset: 0; z-index: 60;
  background: var(--scrim);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-6);
}
.overlay[hidden] { display: none; }

.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-modal);
  width: min(660px, 100%);
  max-height: 86vh;
  display: flex; flex-direction: column;
  animation: modal-in var(--t-base) var(--ease);
}
.modal.is-compact { width: min(420px, 100%); }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .modal { animation: none; }
}

.modal-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-head h2 { font-size: var(--fs-lg); }
.modal-head .sub {
  font-size: var(--fs-sm); color: var(--text-3); margin-top: 3px;
  font-family: var(--font-mono);
  overflow-wrap: anywhere;
}
.modal-body { padding: var(--sp-5); overflow-y: auto; }
.modal-foot {
  display: flex; justify-content: flex-end; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-body p { margin: 0 0 var(--sp-3); color: var(--text-2); }
.modal-body p:last-child { margin-bottom: 0; }

.detail-section + .detail-section { margin-top: var(--sp-5); }
.detail-section > h3 {
  font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-3);
  padding-bottom: var(--sp-2); margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.detail-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sp-3) var(--sp-5);
}
.detail-grid .k { font-size: var(--fs-sm); color: var(--text-3); margin-bottom: 1px; }
.detail-grid .v { font-size: var(--fs-md); overflow-wrap: anywhere; }

/* ---------- health score ---------- */
/*
   O número e a conta que o produziu, lado a lado. As cores repetem o vocabulário
   já usado no resto da interface (online/warn/crit): a faixa "degradado" divide
   o tom de crítico porque as duas pedem ação — o que as separa é a urgência, e
   isso o número já diz.
*/
.score-panel { display: flex; flex-direction: column; gap: var(--sp-4); }
.score-gauge { display: flex; align-items: center; gap: var(--sp-4); }
.score-value { display: flex; align-items: baseline; gap: 2px; line-height: 1; }
.score-value strong {
  font-size: 34px; font-weight: 650; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.score-max { font-size: var(--fs-md); color: var(--text-3); }
.score-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.score-level {
  font-size: var(--fs-sm); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
}
.score-bar {
  height: 5px; border-radius: 3px; background: var(--surface-3);
  overflow: hidden;
}
.score-fill { display: block; height: 100%; border-radius: 3px; transition: width var(--t-base) var(--ease); }

.score-gauge.is-healthy .score-value strong,
.score-gauge.is-healthy .score-level { color: var(--online); }
.score-gauge.is-healthy .score-fill { background: var(--online); }
.score-gauge.is-attention .score-value strong,
.score-gauge.is-attention .score-level { color: var(--warn); }
.score-gauge.is-attention .score-fill { background: var(--warn); }
.score-gauge.is-degraded .score-value strong,
.score-gauge.is-degraded .score-level { color: var(--degraded); }
.score-gauge.is-degraded .score-fill { background: var(--degraded); }
.score-gauge.is-crit .score-value strong,
.score-gauge.is-crit .score-level { color: var(--crit); }
.score-gauge.is-crit .score-fill { background: var(--crit); }

.score-factors { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.score-factors.is-quiet { opacity: .68; }
.score-factor {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: 5px var(--sp-2); border-radius: var(--r-sm); font-size: var(--fs-md);
}
.score-factor.is-down { background: var(--surface-2); }
.score-factor-label { color: var(--text-2); overflow-wrap: anywhere; }
.score-factor-points {
  font-variant-numeric: tabular-nums; font-weight: 600;
  color: var(--text-3); flex-shrink: 0;
}
.score-factor.is-down .score-factor-points { color: var(--crit); }

/* Nota compacta, na fila de trabalho do dashboard. */
.score-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; padding: 1px 5px; border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 650; font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.score-chip.is-healthy { color: var(--online); background: var(--online-soft); }
.score-chip.is-attention { color: var(--warn); background: var(--warn-soft); }
.score-chip.is-degraded { color: var(--degraded); background: var(--degraded-soft); }
.score-chip.is-crit { color: var(--crit); background: var(--crit-soft); }

.empty-inline { color: var(--text-3); font-size: var(--fs-md); }

/* ---------- formulários em coluna ---------- */
.form-rows { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 560px; }
.form-rows .k {
  display: block; font-size: var(--fs-sm); color: var(--text-3); margin-bottom: var(--sp-1);
}
.form-rows .muted { font-size: var(--fs-sm); margin-top: var(--sp-1); }
.check-row {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-md); cursor: pointer;
}
.check-row input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); }
.check-row input:disabled + span { color: var(--text-3); }

.alert-list { display: flex; flex-direction: column; gap: 6px; }
.alert-item {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 7px var(--sp-3); border-radius: var(--r-sm);
  font-size: var(--fs-md); border: 1px solid transparent;
}
.alert-item.is-warn { background: var(--warn-soft); border-color: var(--warn); color: var(--text); }
.alert-item.is-crit { background: var(--crit-soft); border-color: var(--crit); color: var(--text); }
.alert-item .icon.is-warn { color: var(--warn); }
.alert-item .icon.is-crit { color: var(--crit); }

.software-tools { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.software-list {
  max-height: 210px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface-2);
}
.software-list div {
  padding: 5px var(--sp-3); font-size: var(--fs-md);
  border-bottom: 1px solid var(--border-soft);
}
.software-list div:last-child { border-bottom: none; }
.software-list .none { color: var(--text-3); }

.list-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--border-soft);
}
.list-row:last-child { border-bottom: none; }
.list-row .info { min-width: 0; }
.list-row .info .primary { font-size: var(--fs-md); font-weight: 500; }
.list-row .info .secondary {
  font-size: var(--fs-sm); color: var(--text-3); font-family: var(--font-mono);
  overflow-wrap: anywhere; margin-top: 1px;
}

.key-box {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.key-box code {
  font-family: var(--font-mono); font-size: var(--fs-md);
  flex: 1; min-width: 0; overflow-wrap: anywhere;
}

/* ---------- toasts ---------- */

.toasts {
  position: fixed; bottom: var(--sp-5); right: var(--sp-5); z-index: 80;
  display: flex; flex-direction: column; gap: var(--sp-2);
  width: 330px; max-width: calc(100vw - var(--sp-8));
  pointer-events: none;
}
.toast {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  padding: var(--sp-3);
  background: var(--surface); border: 1px solid var(--border);
  border-left: 2px solid var(--text-3);
  border-radius: var(--r-sm); box-shadow: var(--shadow-pop);
  font-size: var(--fs-md); pointer-events: auto;
  animation: toast-in var(--t-base) var(--ease);
}
.toast.is-success { border-left-color: var(--online); }
.toast.is-success .icon { color: var(--online); }
.toast.is-error { border-left-color: var(--crit); }
.toast.is-error .icon { color: var(--crit); }
.toast.is-info { border-left-color: var(--accent); }
.toast.is-info .icon { color: var(--accent); }
.toast .icon { flex-shrink: 0; margin-top: 1px; }
.toast .msg { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.toast.is-leaving { animation: toast-out var(--t-base) var(--ease) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(12px); } }
@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
}

/* ---------- menu ---------- */

.menu {
  position: absolute; z-index: 70;
  min-width: 180px; padding: var(--sp-1);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); box-shadow: var(--shadow-pop);
}
.menu[hidden] { display: none; }
.menu button {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%; text-align: left;
  padding: 0 var(--sp-2); height: 28px; border-radius: var(--r-xs);
  font-size: var(--fs-md); color: var(--text-2);
}
.menu button:hover { background: var(--surface-hover); color: var(--text); }
.menu .sep { height: 1px; background: var(--border); margin: var(--sp-1) 0; }
.menu .heading {
  padding: var(--sp-1) var(--sp-2); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); font-weight: 600;
}

/* ---------- login ---------- */

.auth-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: var(--sp-6); background: var(--bg);
}
.auth-card {
  width: min(380px, 100%);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-pop);
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
}
.auth-brand {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}
.auth-brand img { width: 44px; height: 44px; object-fit: contain; }
.auth-brand .name { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.01em; }
.auth-brand .tag {
  font-size: var(--fs-sm); color: var(--text-3);
  text-transform: uppercase; letter-spacing: .1em;
}
.auth-card h1 { font-size: var(--fs-base); margin-bottom: var(--sp-1); }
.auth-card .lead { font-size: var(--fs-md); color: var(--text-2); margin-bottom: var(--sp-5); }
.form-row { margin-bottom: var(--sp-3); }
.form-row label {
  display: block; font-size: var(--fs-md); font-weight: 500; margin-bottom: 5px;
}
.form-row .help { font-size: var(--fs-sm); color: var(--text-3); margin-top: 5px; }
.form-error {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3);
  background: var(--crit-soft); border: 1px solid var(--crit);
  border-radius: var(--r-sm); font-size: var(--fs-md); color: var(--text);
}
.form-error[hidden] { display: none; }
.auth-card .btn { width: 100%; }
.auth-card.is-wide { width: min(520px, 100%); }
.mfa-qr-row { display: flex; gap: var(--sp-5); align-items: flex-start; margin-bottom: var(--sp-5); }
.mfa-qr-row img {
  flex-shrink: 0; width: 176px; height: 176px; background: #fff;
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: 4px;
}
.mfa-qr-help { font-size: var(--fs-md); color: var(--text-2); }
.mfa-qr-help p { margin: 0 0 var(--sp-2); }
.mfa-secret {
  display: block; font-family: var(--font-mono); font-size: var(--fs-md);
  word-break: break-all; user-select: all; color: var(--text);
  padding: var(--sp-2); background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.mfa-codes {
  columns: 2; column-gap: var(--sp-4); margin: var(--sp-4) 0; padding-left: var(--sp-6);
  font-size: var(--fs-base); user-select: all;
}
.mfa-codes li { break-inside: avoid; padding: 2px 0; }
.mfa-codes-tools { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.mfa-codes-tools .btn { width: auto; flex: 1; }
.mfa-ack { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: var(--fs-md);
  color: var(--text-2); margin-bottom: var(--sp-4); }
.mfa-ack input { margin-top: 3px; }
@media (max-width: 480px) {
  .mfa-qr-row { flex-direction: column; align-items: center; }
  .mfa-codes { columns: 1; }
}
.auth-foot {
  margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--border);
  font-size: var(--fs-sm); color: var(--text-3); text-align: center;
}

/* ==========================================================================
   Dashboard: fichas, gráficos e paleta categórica

   A paleta tem oito posições fixas e foi verificada por script, não a olho:
   luminosidade dentro da banda do modo, croma acima do piso que faz a cor
   deixar de ler como cinza, e separação mínima entre posições vizinhas sob
   simulação de protanopia e deuteranopia. O modo escuro não é a paleta clara
   invertida — são degraus próprios, medidos contra a superfície escura, porque
   inverter derruba as cores para fora da banda e o gráfico perde contraste.

   A cor de cada categoria vem do servidor e deriva do nome, não da posição no
   ranking: assim "Dell" não troca de cor quando "Lenovo" a ultrapassa em
   quantidade. E nenhum gráfico depende só de cor — nome e valor sempre em
   texto, ao lado da barra.
   ========================================================================== */

:root, [data-theme="light"] {
  --slot-0: #2a78d6;
  --slot-1: #eb6834;
  --slot-2: #1baf7a;
  --slot-3: #eda100;
  --slot-4: #e87ba4;
  --slot-5: #008300;
  --slot-6: #4a3aa7;
  --slot-7: #e34948;
}

[data-theme="dark"] {
  --slot-0: #2a78d6;
  --slot-1: #e76530;
  --slot-2: #14ac77;
  --slot-3: #c38400;
  --slot-4: #d56a93;
  --slot-5: #008300;
  --slot-6: #7269da;
  --slot-7: #e34948;
}

.overview { display: flex; flex-direction: column; gap: var(--sp-5); }

.section-title {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: calc(-1 * var(--sp-2));
}
.section-title h2 {
  font-size: var(--fs-sm); font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-3);
}

.stat-grid {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.stat-tile {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4);
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  min-width: 0;
}
.stat-tile.is-clickable { transition: border-color var(--t-fast), background var(--t-fast); }
.stat-tile.is-clickable:hover { border-color: var(--border-strong); background: var(--surface-2); }

.stat-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.stat-icon { color: var(--text-3); }
.stat-label {
  font-size: var(--fs-sm); color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stat-value {
  font-size: 26px; font-weight: 600; line-height: 1.15; letter-spacing: -.02em;
  display: flex; align-items: baseline; gap: 4px;
}
.stat-value.is-online { color: var(--online); }
.stat-value.is-offline { color: var(--text-2); }
.stat-value.is-warn { color: var(--warn); }
.stat-value.is-crit { color: var(--crit); }
.stat-unit { font-size: var(--fs-md); font-weight: 500; color: var(--text-3); }
.stat-hint {
  font-size: var(--fs-sm); color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chart-grid {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.chart-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--sp-4); min-width: 0;
}
.chart-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-1) var(--sp-3); margin-bottom: var(--sp-3);
  /* Sem o wrap, a legenda espremia o título e o "Alertas em aberto" quebrava
     no meio da palavra quando o card dividia a linha com outro. */
  flex-wrap: wrap;
}
.chart-head h3 { flex: 1 1 auto; }
.chart-head h3 { font-size: var(--fs-base); }
.chart-hint { font-size: var(--fs-sm); color: var(--text-3); }
.chart-body { min-width: 0; }
.chart-empty {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-md); color: var(--text-3); padding: var(--sp-2) 0;
}
.chart-empty .ok-icon { color: var(--online); }

/* Barras horizontais: nome, trilho e valor. O comprimento é a única codificação
   de magnitude; a cor só marca identidade. */
.bar-chart { display: flex; flex-direction: column; gap: 7px; }
.bar-row {
  /* 38% cobre "Windows Server 2022" e "ThinkCentre M70" sem reticências. Mais
     que isso começa a encurtar as barras, que são o que se compara. */
  display: grid; grid-template-columns: minmax(96px, 38%) 1fr auto;
  align-items: center; gap: var(--sp-3); padding: 1px 0;
}
.bar-row.is-clickable { cursor: pointer; border-radius: var(--r-xs); }
.bar-row.is-clickable:hover { background: var(--surface-hover); }
.bar-name {
  font-size: var(--fs-md); color: var(--text-2); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: flex; align-items: center; gap: 5px;
}
.bar-track {
  height: 10px; background: var(--surface-3); border-radius: 2px;
  overflow: hidden; display: block; min-width: 0;
}
.bar-fill { display: block; height: 100%; border-radius: 0 2px 2px 0; }
.bar-value {
  font-size: var(--fs-md); color: var(--text); font-weight: 600;
  min-width: 32px; text-align: right;
}

.bar-fill.slot-0 { background: var(--slot-0); }
.bar-fill.slot-1 { background: var(--slot-1); }
.bar-fill.slot-2 { background: var(--slot-2); }
.bar-fill.slot-3 { background: var(--slot-3); }
.bar-fill.slot-4 { background: var(--slot-4); }
.bar-fill.slot-5 { background: var(--slot-5); }
.bar-fill.slot-6 { background: var(--slot-6); }
.bar-fill.slot-7 { background: var(--slot-7); }
.bar-fill.is-warn { background: var(--warn); }
.bar-fill.is-crit { background: var(--crit); }

.alert-bars { display: flex; flex-direction: column; gap: 7px; }
/* O rótulo do alerta é a informação principal — é ele que diz o que está
   errado. Aqui ele ganha mais espaço que nos gráficos de categoria, onde o
   nome ("Dell Inc.") é curto e a comparação de comprimento é que importa. */
.alert-bars .bar-row { grid-template-columns: minmax(150px, 55%) 1fr auto; }
.alert-glyph { display: flex; flex-shrink: 0; }
.alert-glyph.is-warn { color: var(--warn); }
.alert-glyph.is-crit { color: var(--crit); }

/* Barra única dividida: só para categorias que se excluem e somam o total. */
.split-bar {
  display: flex; height: 14px; border-radius: 3px; overflow: hidden;
  background: var(--surface-3); gap: 2px;
}
.split-piece { display: block; height: 100%; }
.split-piece.is-online { background: var(--online); }
.split-piece.is-offline { background: var(--offline); }
.split-piece.is-warn { background: var(--warn); }
.split-piece.is-crit { background: var(--crit); }
/* "Sem agente" não é bom nem ruim — é ausência de informação. Cor neutra, para
   não competir com os estados que pedem ação. */
.split-piece.is-unknown { background: var(--text-3); }
.split-piece.is-degraded { background: var(--degraded); }

.chart-legend {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  margin-top: var(--sp-3); font-size: var(--fs-md); color: var(--text-2);
}
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.legend-dot.is-online { background: var(--online); }
.legend-dot.is-offline { background: var(--offline); }
.legend-dot.is-warn { background: var(--warn); }
.legend-dot.is-crit { background: var(--crit); }
.legend-dot.is-unknown { background: var(--text-3); }
.legend-dot.is-degraded { background: var(--degraded); }
.legend-value { color: var(--text); font-weight: 600; }

/* Linha do tempo da máquina. A barra vertical liga os eventos; a cor à esquerda
   marca a severidade sem depender só dela para ler o item. */
.timeline { display: flex; flex-direction: column; gap: 2px; }
.timeline-item {
  display: grid; grid-template-columns: minmax(120px, 160px) 1fr; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--border-strong);
  background: var(--surface);
}
.timeline-item.is-warn { border-left-color: var(--warn); }
.timeline-item.is-crit { border-left-color: var(--crit); }
.timeline-when { font-size: var(--fs-sm); color: var(--text-3); white-space: nowrap; }
.timeline-head {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  font-size: var(--fs-sm);
}
.timeline-message { color: var(--text); overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .timeline-item { grid-template-columns: 1fr; gap: 2px; }
}

/* Interruptor de regra de alerta: caixa + rótulo clicáveis juntos. */
.switch { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.switch input { cursor: pointer; }

.critical-list { display: flex; flex-direction: column; }
.critical-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: 7px var(--sp-2); border-radius: var(--r-sm); width: 100%; text-align: left;
  border-bottom: 1px solid var(--border-soft);
}
.critical-row:last-child { border-bottom: none; }
.critical-row:hover { background: var(--surface-hover); }
/* O hostname é o que identifica a máquina: quem precisa encurtar é a lista de
   alertas, não ele. Sem estes limites os dois encolhiam juntos e sobrava
   "PC-…", que não serve para nada. */
.critical-host {
  display: flex; align-items: center; gap: 6px;
  flex: 0 1 auto; min-width: 132px;
}
.critical-host .name {
  font-size: var(--fs-md); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.critical-alerts {
  font-size: var(--fs-sm); color: var(--crit); text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1 1 auto; min-width: 0;
}

.chart-tip {
  position: fixed; z-index: 90; pointer-events: none;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); padding: 5px var(--sp-2);
  font-size: var(--fs-sm); color: var(--text); box-shadow: var(--shadow-pop);
  max-width: 280px;
}

/* Alto contraste forçado: o navegador substitui as cores, então a identidade
   passa a vir do texto ao lado da barra — que já está sempre presente. */
@media (forced-colors: active) {
  .bar-fill, .split-piece { background: CanvasText; border: 1px solid Canvas; }
  .chart-card, .stat-tile { border: 1px solid CanvasText; }
}

/* ---------- abas, usuários e envio de arquivo ---------- */

.tabs {
  display: flex; gap: 2px; padding: 0 var(--sp-4);
  border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.tab {
  display: flex; align-items: center; gap: 6px;
  padding: 0 var(--sp-3); height: 34px; font-size: var(--fs-md); color: var(--text-2);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.tab:hover { color: var(--text); }
.tab .icon { color: var(--text-3); display: flex; }
.tab[aria-selected="true"] {
  color: var(--text); font-weight: 600; border-bottom-color: var(--accent);
}
.tab[aria-selected="true"] .icon { color: var(--accent); }

.steps { margin: 0; padding-left: var(--sp-5); color: var(--text-2); font-size: var(--fs-md); }
.steps li { margin-bottom: var(--sp-2); }

.upload-progress {
  height: 4px; background: var(--surface-3); border-radius: 2px;
  overflow: hidden; margin-top: var(--sp-2);
}
.upload-progress .fill {
  display: block; height: 100%; width: 0; background: var(--accent);
  transition: width var(--t-base) var(--ease);
}

.key-box code.secret { letter-spacing: .04em; }

.user-cell { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.avatar.is-small { width: 20px; height: 20px; font-size: var(--fs-xs); }
.user-cell .name { font-weight: 500; }
.user-cell .secondary { display: block; font-size: var(--fs-sm); color: var(--text-3); }
.user-cell .tag {
  margin-left: 5px; font-size: var(--fs-xs); color: var(--text-3);
  border: 1px solid var(--border); border-radius: 999px; padding: 0 5px;
}
tr.is-inactive { opacity: .58; }

.role-chip {
  display: inline-flex; align-items: center; font-size: var(--fs-sm); font-weight: 500;
  padding: 1px var(--sp-2); border-radius: 999px;
  border: 1px solid var(--border); color: var(--text-2); background: var(--surface-2);
}
.role-chip.is-admin { color: var(--accent); background: var(--accent-soft);
                      border-color: transparent; }
.role-chip.is-tech { color: var(--online); background: var(--online-soft);
                     border-color: transparent; }

.role-grid {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.role-card {
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-3); background: var(--surface-2);
}
.role-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2); margin-bottom: var(--sp-2);
}
.role-card p { margin: 0 0 var(--sp-2); font-size: var(--fs-md); }
.permission-list { margin: 0; padding: 0; list-style: none; }
.permission-list li {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: var(--fs-md); color: var(--text-2); padding: 2px 0;
}
.permission-list .ok-icon { color: var(--online); margin-top: 3px; flex-shrink: 0; }

.row-actions .btn-quiet.is-danger:hover { color: var(--crit); background: var(--crit-soft); }

/* A tabela de máquinas tem doze colunas e precisa de 940px; usuários e
   auditoria têm menos e não devem herdar a barra de rolagem horizontal. */
table.data.is-compact { min-width: 620px; }

/* Eventos que alguém investigando um incidente procura primeiro. */
table.data tbody tr.is-flagged td:first-child { box-shadow: inset 2px 0 0 var(--warn); }

.banner.is-ok { border-color: var(--online); background: var(--online-soft); }
.banner.is-ok .icon { color: var(--online); }
.banner.is-info { border-color: var(--border-strong); background: var(--surface-2); }
.banner.is-info .icon { color: var(--text-3); }

/* ---------- responsivo ---------- */

@media (max-width: 1100px) {
  .figures .figure.is-optional { display: none; }
}

/* Abaixo disto a busca e o filtro de situação não cabem lado a lado: a busca
   passa a ocupar uma linha inteira em vez de encolher. */
@media (max-width: 760px) {
  .search { flex: 1 1 100%; min-width: 0; }
  .toolbar .spacer { display: none; }
  .toolbar .btn { flex: 1 1 auto; }
  .bar-row { grid-template-columns: minmax(72px, 40%) 1fr auto; }
}

@media (max-width: 900px) {
  .app { flex-direction: column; }
  .sidebar {
    width: 100%; height: auto; position: static;
    border-right: none; border-bottom: 1px solid var(--border);
  }
  .sidebar-scroll { max-height: 232px; }
  .topbar {
    height: auto; padding: var(--sp-3) var(--sp-4);
    flex-wrap: wrap; align-items: flex-start; position: static;
  }
  .content { padding: var(--sp-3); }
  .toasts { left: var(--sp-3); right: var(--sp-3); width: auto; }
  table.data thead th { position: static; }
}

@media (max-width: 560px) {
  .toolbar { gap: var(--sp-2); }
  .figures { gap: var(--sp-3); }
  .segmented { flex: 1 1 100%; }
  .segmented button { flex: 1; padding: 0 var(--sp-2); }
  .modal-foot { flex-direction: column-reverse; }
  .modal-foot .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   RMM — página da máquina, comandos e métricas
   --------------------------------------------------------------------------
   Reaproveita as variáveis e os componentes que já existem (painel, tabela,
   status, figura). Nada aqui redefine cor, espaçamento ou tipografia: o que
   muda é só o que não existia antes — saída de comando, gráfico de linha e o
   campo de script.
   -------------------------------------------------------------------------- */

/* Saída de um comando remoto. Monoespaçada e com rolagem própria: o conteúdo
   vem de um processo em outra máquina e não tem limite de largura previsível. */
.job-output {
  margin: 0;
  padding: 10px 12px;
  max-height: 340px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Campo de script. `white-space: pre` e sem quebra automática: um comando
   quebrado no meio pela tela engana quem está conferindo antes de executar. */
.script-input {
  min-height: 150px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  resize: vertical;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}

/* Tabela longa (serviços, processos) dentro de um modal. */
.table-wrap.is-scroll {
  max-height: 420px;
  overflow: auto;
}

/* Gráfico de uso. O SVG estica na largura do cartão; o valor atual fica ao lado
   em número, porque ler a linha não substitui saber o valor. */
.sparkline-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sparkline {
  flex: 1;
  height: 90px;
  min-width: 0;
  color: var(--accent);
}

.sparkline-value {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Estado "instável": o agente respondeu, mas fora da janela de normalidade.
   Fica entre online e offline, e por isso usa a cor de atenção. */
.status.is-warn .led { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.status.is-warn { color: var(--warn); }
.status.is-crit .led { background: var(--crit); box-shadow: 0 0 0 3px var(--crit-soft); }
.status.is-crit { color: var(--crit); }

/* Cabeçalho da máquina: o IP ao lado do hostname, em tom secundário. */
.panel-head h2 .tag { margin-left: 8px; vertical-align: middle; }