/* BasicRMM — dark theme. All colors are declared as CSS variables here; no
   hardcoded hex values appear anywhere else in the stylesheet. */
:root {
  --bg-app:#0e1116;  --bg-panel:#171d27;   --bg-panel-2:#1e2635;
  --line:#232d3f;    --line-strong:#2c3645;
  --txt:#e7edf5;     --txt-2:#aab6c6;      --txt-3:#74808f;
  --accent:#3b82f6;  --accent-dim:#1e3a5f;
  --ok:#22c55e;      --warn:#f5b13d;       --crit:#ff5a6a;

  --radius:8px;
  --radius-sm:6px;
  --gap:16px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-app);
  color: var(--txt);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 20px; margin: 0 0 4px; }
h2 { font-size: 15px; margin: 0; }

.muted { color: var(--txt-2); }
.stat-3 { color: var(--txt-3); }
.stat-ok { color: var(--ok); }

/* --- Top bar --- */
.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 56px;
  padding: 0 20px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.brand-mark {
  width: 16px; height: 16px; border-radius: 4px;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.brand-mark-lg { width: 28px; height: 28px; border-radius: 7px; }
.brand-name { color: var(--txt); letter-spacing: 0.2px; }

.topnav { display: flex; gap: 4px; }
.topnav a {
  color: var(--txt-2);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
}
.topnav a:hover { color: var(--txt); background: var(--bg-panel-2); text-decoration: none; }
.topnav a.active { color: var(--txt); background: var(--accent-dim); }

.userbox { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.user-name { color: var(--txt-2); }
.logout-form { margin: 0; }

.role-badge {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--txt-2);
}
.role-owner { color: var(--accent); border-color: var(--accent); }
.role-admin { color: var(--warn); border-color: var(--warn); }

/* --- Layout --- */
.content { max-width: 1100px; margin: 0 auto; padding: 24px 20px; }
.page-head { margin-bottom: 20px; }

/* --- Panels --- */
.panel {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: var(--gap);
}
.panel-head { padding: 14px 18px; border-bottom: 1px solid var(--line); }
.panel-body { padding: 18px; }

/* --- Stat cards --- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--gap);
  margin-bottom: var(--gap);
}
.stat-card {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.stat-label { color: var(--txt-3); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.stat-value { font-size: 28px; font-weight: 600; margin-top: 6px; }

/* --- Tables --- */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  text-align: left;
  font-weight: 500;
  color: var(--txt-3);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}
.data-table td { padding: 12px 10px; border-bottom: 1px solid var(--line); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--bg-panel-2); }

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.dot-ok { background: var(--ok); }
.dot-off { background: var(--txt-3); }

.empty-state { text-align: center; padding: 32px 0; }

/* --- Buttons --- */
.btn {
  font-family: inherit;
  font-size: 14px;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--bg-panel-2);
  color: var(--txt);
  cursor: pointer;
}
.btn:hover { border-color: var(--accent); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--txt); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--txt-2); }
.btn-ghost:hover { color: var(--txt); border-color: var(--line-strong); }
.btn-block { display: block; width: 100%; }

/* --- Auth --- */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.auth-card {
  width: 100%; max-width: 360px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
}
.auth-head { text-align: center; margin-bottom: 20px; }
.auth-head h1 { margin: 12px 0 2px; }
.auth-head .brand-mark-lg { display: inline-block; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form label { display: flex; flex-direction: column; gap: 6px; }
.auth-form label span { color: var(--txt-2); font-size: 13px; }

input[type="email"], input[type="password"], input[type="text"] {
  font-family: inherit;
  font-size: 14px;
  padding: 10px 12px;
  background: var(--bg-app);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--txt);
}
input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }

/* --- Alerts --- */
.alert {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  font-size: 13px;
  border: 1px solid var(--line-strong);
}
.alert-crit { color: var(--crit); border-color: var(--crit); background: var(--bg-panel-2); }
.alert-warn { color: var(--warn); border-color: var(--warn); background: var(--bg-panel-2); }
.alert-ok   { color: var(--ok);   border-color: var(--ok);   background: var(--bg-panel-2); }

/* --- Agent detail --- */
.page-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.page-actions { display: flex; gap: 8px; flex-shrink: 0; padding-top: 2px; }
.action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--gap); }
.action-item { padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.action-item strong { display: block; margin-bottom: 4px; }

/* --- Admin Workspace --- */
.aw-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 12px; flex-wrap: wrap;
}
.aw-header-left { display: flex; align-items: center; gap: 12px; }
.aw-header-left h1 { font-size: 16px; margin: 0; }
.aw-header-right { display: flex; gap: 6px; }

.aw-status {
  font-size: 12px; padding: 2px 10px; border-radius: 999px;
  border: 1px solid var(--line-strong); color: var(--txt-2);
}
.aw-status-connecting { color: var(--warn); border-color: var(--warn); }
.aw-status-ok { color: var(--ok); border-color: var(--ok); }
.aw-status-off { color: var(--txt-3); border-color: var(--line-strong); }

.aw-viewport {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 400px;
  display: flex; align-items: center; justify-content: center;
}
.aw-viewport canvas {
  max-width: 100%; max-height: calc(100vh - 180px);
  display: block; cursor: crosshair; outline: none;
}
/* aw-viewport-large: for interactive-session pages (Remote View, HVNC,
   Admin Workspace) that want to break out of the 1100px .content cap and
   fill the browser width for a bigger canvas. The pages set .content-full-bleed
   in the base template which relaxes .content's max-width. */
.aw-viewport-large {
  min-height: calc(100vh - 140px);
}
.aw-viewport-large canvas {
  max-height: calc(100vh - 140px);
}
/* .aw-viewport-fit: user-toggled "fit to window" — canvas fills 100% of
   the container box, potentially cropping if aspect ratio differs. */
.aw-viewport-fit canvas {
  width: 100%; height: calc(100vh - 140px);
  object-fit: contain;
}
/* State chip: when local input is blocked, warn about it. */
.btn.aw-toggle-on {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
/* Full-bleed content wrapper — set on <main class="content"> when a page
   asks for it via the base-template hook. */
main.content.content-full-bleed {
  max-width: none; padding: 16px 20px;
}
/* App quick-launch grid — used inside the HVNC Launch and AW Run App modals
   so operators can one-click common tools without typing a path. Buttons wrap
   into rows on narrow modals; each button is text-only. */
.app-quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px;
  margin-bottom: 4px;
}
.app-quick-grid .app-quick {
  padding: 8px 10px; font-size: 12px; text-align: left;
}
.app-quick-grid .app-quick:hover {
  border-color: var(--accent); color: var(--accent);
}
.aw-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(14,17,22,0.85); color: var(--txt-2); font-size: 14px;
}

/* --- Modals --- */
.aw-modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.5);
}
.aw-modal-inner {
  background: var(--bg-panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px;
  width: 100%; max-width: 420px;
}
.aw-modal-inner h2 { margin-bottom: 14px; }
.aw-modal-inner label { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.aw-modal-inner label span { color: var(--txt-2); font-size: 13px; }
.aw-modal-inner textarea {
  width: 100%; font-family: var(--mono); font-size: 13px;
  background: var(--bg-app); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); color: var(--txt); padding: 10px; resize: vertical;
}
.aw-modal-inner textarea:focus { outline: none; border-color: var(--accent); }
.aw-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }

/* --- Curtain picker (Remote View) --- */
.curtain-picker {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px; border-radius: var(--radius-sm);
  background: var(--bg-panel-2);
  margin-right: 8px;
}
.curtain-label { color: var(--txt-3); font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; margin-right: 4px; }
.curtain-btn { padding: 6px 10px; font-size: 13px; }
.curtain-active { background: var(--accent); color: var(--txt); border-color: var(--accent); }
.curtain-active:hover { filter: brightness(1.08); }

/* --- Enrollment tokens page --- */
.token-form { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 16px; flex-wrap: wrap; }
.token-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.token-form label span { color: var(--txt-2); }
.token-form input[type="text"], .token-form input[type="number"] { min-width: 160px; }
.token-created { background: var(--bg-panel-2); border: 1px solid var(--ok); border-radius: var(--radius); padding: 16px; margin-bottom: var(--gap); }
.token-created h2 { color: var(--ok); margin-bottom: 8px; }
.token-value { display: block; padding: 10px; background: var(--bg-app); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font-family: var(--mono); font-size: 12px; word-break: break-all; margin: 8px 0; }
.token-install { background: var(--bg-app); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; font-family: var(--mono); font-size: 12px; overflow-x: auto; white-space: pre-wrap; word-break: break-all; }

/* --- Live shell --- */
.shell-viewport {
  display: flex; flex-direction: column;
  height: calc(100vh - 160px);
  background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.shell-out {
  flex: 1; margin: 0; padding: 12px; overflow: auto;
  font-family: var(--mono); font-size: 13px; line-height: 1.4;
  background: #000; color: #cfd6dc;
  white-space: pre-wrap; word-break: break-all;
}
.shell-input-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-top: 1px solid var(--line); background: var(--bg-panel-2);
}
.shell-prompt { color: var(--accent); font-family: var(--mono); font-size: 15px; }
.shell-in { flex: 1; font-family: var(--mono); background: transparent; border: none; outline: none; color: var(--txt); font-size: 13px; }

/* --- Task queue --- */
.task-form { display: grid; grid-template-columns: 160px 1fr auto; gap: 8px 12px; align-items: end; margin-bottom: 12px; }
.task-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.task-form label span { color: var(--txt-2); }
.task-form textarea { min-height: 96px; font-family: var(--mono); font-size: 12px; background: var(--bg-app); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--txt); padding: 8px; resize: vertical; }
.task-form select, .task-form input { background: var(--bg-app); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--txt); padding: 8px 10px; font-size: 13px; }
.task-status { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; border: 1px solid var(--line-strong); }
.task-status-queued { color: var(--warn); border-color: var(--warn); }
.task-status-sent   { color: var(--txt-2); border-color: var(--txt-3); }
.task-status-done   { color: var(--ok); border-color: var(--ok); }
.task-status-failed { color: var(--crit); border-color: var(--crit); }
.task-result-panel { background: var(--bg-app); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 12px; font-family: var(--mono); font-size: 12px; white-space: pre-wrap; word-break: break-all; max-height: 400px; overflow: auto; }
.task-result-header { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; font-size: 12px; color: var(--txt-2); }
.exit-badge { padding: 2px 8px; border-radius: var(--radius-sm); font-family: var(--mono); font-size: 11px; font-weight: 600; }
.exit-ok { background: rgba(34,197,94,0.15); color: var(--ok); }
.exit-fail { background: rgba(255,90,106,0.15); color: var(--crit); }

/* --- Alerts --- */
.alert-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.alert-row:last-child { border-bottom: none; }
.alert-sev { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.alert-sev-crit { background: var(--crit); box-shadow: 0 0 0 3px rgba(255,90,106,0.2); }
.alert-sev-warn { background: var(--warn); box-shadow: 0 0 0 3px rgba(245,177,61,0.2); }
.alert-sev-info { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.alert-meta { font-size: 12px; color: var(--txt-3); }
.rule-form { display: grid; grid-template-columns: 1fr 140px 140px 120px auto; gap: 8px; align-items: end; }

/* --- Settings --- */
.settings-form { display: grid; grid-template-columns: 220px 1fr; gap: 10px 16px; max-width: 640px; }
.settings-form label { font-weight: 500; color: var(--txt-2); align-self: center; }
.settings-form input { padding: 8px 10px; background: var(--bg-app); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--txt); font-size: 13px; }
.settings-hint { grid-column: 2; font-size: 12px; color: var(--txt-3); margin-top: -6px; margin-bottom: 6px; }

/* --- Scripts --- */
.script-form { display: grid; grid-template-columns: 1fr 160px; gap: 10px 12px; }
.script-form textarea { grid-column: 1 / -1; min-height: 240px; font-family: var(--mono); font-size: 12px; background: var(--bg-app); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--txt); padding: 10px; resize: vertical; }
.script-form input, .script-form select { padding: 8px 10px; background: var(--bg-app); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--txt); font-size: 13px; }
.script-form-actions { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; }
.agent-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; max-height: 300px; overflow-y: auto; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-app); }
.agent-picker label { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; padding: 4px 8px; border-radius: var(--radius-sm); }
.agent-picker label:hover { background: var(--bg-panel-2); }
.agent-picker input[type="checkbox"] { margin: 0; }

/* --- Light theme (opt-in via <html data-theme="light">) --- */
:root[data-theme="light"] {
  --bg-app: #f6f7f9;
  --bg-panel: #ffffff;
  --bg-panel-2: #f0f2f5;
  --line: #e5e7eb;
  --line-strong: #d1d5db;
  --txt: #111827;
  --txt-2: #4b5563;
  --txt-3: #9ca3af;
  --accent: #2563eb;
  --accent-dim: #dbeafe;
}
:root[data-theme="light"] .shell-out { background: #0f172a; color: #cbd5e1; }

/* --- Cmd+K palette rows --- */
.palette-row.active { background: var(--bg-panel-2); }
.palette-row:hover { background: var(--bg-panel-2); }
.palette-row { transition: background 0.05s ease; }

/* --- Bulk actions bar --- */
.bulk-bar {
  position: sticky; bottom: 0;
  background: var(--bg-panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-top: 12px;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.2);
}
.bulk-bar.hidden { display: none; }
.bulk-bar select, .bulk-bar input[type="text"], .bulk-bar input[type="number"] {
  background: var(--bg-app); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  color: var(--txt); padding: 6px 8px; font-size: 13px;
}
.bulk-count { color: var(--txt-2); font-size: 13px; margin-right: auto; }

/* --- Reports stat helpers --- */
.stat-crit { color: var(--crit); }

/* --- Kanban alerts (three lanes) --- */
.kanban {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
.kanban-col {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-height: 200px;
  display: flex; flex-direction: column;
}
.kanban-head {
  padding: 10px 14px;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--txt-2);
  border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
}
.kanban-head-open      { border-top: 3px solid var(--crit); }
.kanban-head-ack       { border-top: 3px solid var(--warn); }
.kanban-head-resolved  { border-top: 3px solid var(--ok);   }
.kanban-count {
  background: var(--bg-panel-2);
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; color: var(--txt);
}
.kanban-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 260px); overflow-y: auto; }
.kanban-card {
  background: var(--bg-panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.kanban-card-muted { opacity: 0.7; }
.kanban-card-title { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.kanban-card-sub   { font-size: 12px; color: var(--txt-2); }
.kanban-card-meta  { display: flex; justify-content: space-between; font-size: 11px; color: var(--txt-3); }
.kanban-card-actions { display: flex; gap: 6px; margin-top: 4px; }
.kanban-empty { color: var(--txt-3); font-size: 12px; padding: 20px 8px; text-align: center; }

@media (max-width: 900px) {
  .kanban { grid-template-columns: 1fr; }
}

/* --- Split-view task result --- */
.task-split {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 16px;
}
.task-sidebar {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 12px;
  align-self: flex-start;
}
.task-meta-block { display: flex; flex-direction: column; gap: 2px; }
.task-meta-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--txt-3); }
.task-main {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.task-tabs {
  display: flex; gap: 2px;
  background: var(--bg-panel-2);
  border-bottom: 1px solid var(--line);
}
.task-tab {
  padding: 10px 16px;
  background: transparent; color: var(--txt-2);
  border: 0; border-bottom: 2px solid transparent;
  font-family: inherit; font-size: 13px;
  cursor: pointer;
}
.task-tab:hover { color: var(--txt); }
.task-tab.active { color: var(--txt); border-bottom-color: var(--accent); }
.task-panes { padding: 0; }
.task-pane { display: none; }
.task-pane.active { display: block; }
.task-terminal {
  margin: 0; padding: 14px 16px;
  background: #000; color: #cfd6dc;
  font-family: var(--mono); font-size: 12px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-all;
  min-height: 300px; max-height: 60vh; overflow: auto;
}
.task-terminal-err { color: #ffb5b8; }

@media (max-width: 800px) {
  .task-split { grid-template-columns: 1fr; }
}

/* --- Deployment method tabs --- */
.deploy-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 16px; flex-wrap: wrap; }
.deploy-tab {
  padding: 10px 14px; background: transparent; color: var(--txt-2);
  border: 0; border-bottom: 2px solid transparent;
  font-family: inherit; font-size: 13px; cursor: pointer;
}
.deploy-tab:hover { color: var(--txt); }
.deploy-tab.active { color: var(--txt); border-bottom-color: var(--accent); }
.deploy-pane { display: none; }
.deploy-pane.active { display: block; }

/* --- Installer builds audit table --- */
.build-row-sha { font-family: var(--mono); font-size: 11px; color: var(--txt-3); word-break: break-all; }
.build-kind {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px;
  background: var(--bg-panel-2); color: var(--txt-2);
}
.build-kind-ps1 { color: var(--accent); border: 1px solid var(--accent-dim); }
.build-kind-vbs { color: var(--warn); }
.build-kind-cmd { color: var(--ok); }
.build-kind-msi { color: var(--txt); border: 1px solid var(--line-strong); }

/* --- Sidebar agent detail --- */
.agent-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
}
.agent-nav {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  display: flex; flex-direction: column;
  align-self: flex-start;
  position: sticky; top: 16px;
}
.agent-nav-head { border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 12px; }
.agent-nav-status { font-size: 12px; margin-bottom: 6px; }
.agent-nav-host { font-weight: 500; font-size: 14px; margin-bottom: 2px; }
.agent-nav-sub { font-size: 12px; }
.agent-nav-links { display: flex; flex-direction: column; gap: 2px; }
.agent-nav-links a {
  padding: 8px 10px; border-radius: var(--radius-sm);
  color: var(--txt-2); font-size: 13px;
}
.agent-nav-links a:hover { color: var(--txt); background: var(--bg-panel-2); text-decoration: none; }
.agent-nav-back { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.agent-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.agent-main section { scroll-margin-top: 16px; }

@media (max-width: 800px) {
  .agent-shell { grid-template-columns: 1fr; }
  .agent-nav { position: static; }
}

/* ─────────────────────────────────────────────────────────
   HVNC launch picker — sectioned modal with icon rows.
   Sized to fit ~10 rows without scrolling on a laptop viewport.
   ───────────────────────────────────────────────────────── */
.hvnc-picker { display: flex; flex-direction: column; max-height: 80vh; padding: 20px 22px; }
.hvnc-picker-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.hvnc-picker-close { padding: 4px 10px; font-size: 15px; }
.hvnc-picker-search { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.hvnc-picker-search input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-panel-2);
  color: var(--text);
  font-size: 13px;
}
.hvnc-picker-search input:focus { outline: none; border-color: var(--accent); }
.hvnc-picker-hint { font-size: 11px; white-space: nowrap; }
.hvnc-picker-status { font-size: 11px; padding: 4px 2px 10px; }
.hvnc-picker-scroll { overflow-y: auto; flex: 1; min-height: 200px; padding-right: 4px; }
.hvnc-picker-section { margin-bottom: 12px; }
.hvnc-picker-section-title {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 10px;
  color: var(--muted);
  padding: 6px 4px 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.hvnc-picker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.hvnc-picker-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: background 80ms, border-color 80ms;
}
.hvnc-picker-row:hover, .hvnc-picker-row-active {
  background: var(--bg-panel-2);
  border-color: var(--accent);
}
.hvnc-picker-icon {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hvnc-picker-icon img { display: block; image-rendering: -webkit-optimize-contrast; }
.hvnc-picker-icon-fallback {
  background: var(--bg-panel-2);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.hvnc-picker-text { display: flex; flex-direction: column; min-width: 0; }
.hvnc-picker-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hvnc-picker-path { font-size: 10px; font-family: ui-monospace, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .7; }
.hvnc-picker-empty { padding: 24px; text-align: center; }
.hvnc-picker-advanced { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.hvnc-picker-advanced summary { cursor: pointer; font-size: 12px; padding: 4px 0; }
.hvnc-picker-advanced label { display: block; margin: 8px 0; }
.hvnc-picker-advanced label > span { display: block; font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.hvnc-picker-advanced input {
  width: 100%; padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg-panel-2);
  color: var(--text);
  font-family: ui-monospace, monospace;
  font-size: 12px;
  box-sizing: border-box;
}

/* ─────────────────────────────────────────────────────────
   HVNC switch dropdown — floating panel from toolbar button
   ───────────────────────────────────────────────────────── */
.hvnc-switch-dropdown {
  position: fixed;
  z-index: 1050;
  min-width: 320px;
  max-width: 480px;
  max-height: 480px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.2);
  font-size: 13px;
}
.hvnc-switch-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  color: var(--text);
}
.hvnc-switch-header .muted { font-weight: 400; font-size: 11px; }
.hvnc-switch-body { flex: 1; overflow-y: auto; padding: 4px; }
.hvnc-switch-loading, .hvnc-switch-empty { padding: 24px; text-align: center; font-size: 12px; }
.hvnc-switch-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: background 60ms;
}
.hvnc-switch-row:hover { background: var(--bg-panel-2); }
.hvnc-switch-icon {
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hvnc-switch-icon img { display: block; image-rendering: -webkit-optimize-contrast; }
.hvnc-switch-icon-fallback {
  background: var(--bg-panel-2);
  border-radius: 3px;
  font-size: 10px; font-weight: 600; color: var(--muted);
}
.hvnc-switch-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.hvnc-switch-footer { padding: 6px 14px; border-top: 1px solid var(--line); font-size: 10px; text-align: center; }

/* ─────────────────────────────────────────────────────────
   Shared type-DELETE confirmation modal (see base.html #dc-modal
   + app.js). Fires on every destructive action across the console
   — agent delete/uninstall, purge offline, update-all, user delete,
   token revoke, script delete, group delete, alert-rule delete,
   scheduled-job delete, MFA disable, password reset.
   ───────────────────────────────────────────────────────── */
.dc-modal {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,.68);
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
  backdrop-filter: blur(4px);
}
.dc-modal-inner {
  background: var(--bg-panel);
  border: 1px solid var(--danger, #e07070);
  border-radius: 10px;
  padding: 26px 28px;
  max-width: 520px; width: 100%;
  box-shadow: 0 20px 60px rgba(224,112,112,.28), 0 4px 12px rgba(0,0,0,.4);
}
.dc-modal-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.dc-modal-icon {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(224,112,112,.15);
  border: 1px solid var(--danger, #e07070);
  border-radius: 50%;
  color: var(--danger, #e07070);
  flex-shrink: 0;
}
.dc-modal-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--danger, #e07070);
}
.dc-modal-body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 16px;
  padding: 12px 14px;
  background: var(--bg-panel-2);
  border-radius: 6px;
  border-left: 3px solid var(--danger, #e07070);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.dc-modal-typebox {
  display: block;
  font-size: 12px;
  color: var(--text);
  margin-bottom: 8px;
}
.dc-modal-typebox span { display: block; margin-bottom: 6px; }
.dc-modal-typebox strong {
  color: var(--danger, #e07070);
  font-family: ui-monospace, monospace;
  letter-spacing: .06em;
}
.dc-modal-typebox input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-family: ui-monospace, monospace;
  text-align: center;
  letter-spacing: .12em;
  font-size: 13px;
  box-sizing: border-box;
}
.dc-modal-typebox input:focus {
  outline: none;
  border-color: var(--danger, #e07070);
  box-shadow: 0 0 0 3px rgba(224,112,112,.15);
}
.dc-modal-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 18px;
}
.dc-modal-actions .btn-danger {
  background: var(--danger, #e07070);
  color: #fff;
  border: 1px solid var(--danger, #e07070);
}
.dc-modal-actions .btn-danger:disabled {
  opacity: .38;
  cursor: not-allowed;
  background: transparent;
  color: var(--danger, #e07070);
}
.dc-modal-actions .btn-danger:not(:disabled):hover {
  background: #c94a4a;
  border-color: #c94a4a;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CC atoms
   Command Center design system — appended verbatim from the extracted
   cc_shell_and_css.html spec. These vars and atoms override the legacy
   variables above so any template using CC classes gets the new look.
   Legacy atoms are kept intact for pages that have not yet been ported.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --bg: #0A0A0A;
  --bg-1: #111113;
  --bg-2: #17171A;
  --bg-3: #1E1E22;
  --line: #26262B;
  --line-2: #33333A;
  --text: #EDEDED;
  --text-dim: #A1A1AA;
  --text-mute: #71717A;
  --accent: #7C3AED;
  --accent-2: #A78BFA;
  --accent-soft: rgba(124,58,237,.14);
  --ok: #22C55E;
  --warn: #F59E0B;
  --err: #EF4444;
  --info: #06B6D4;
  --radius: 6px;
  --radius-lg: 10px;
  --shadow: 0 1px 0 rgba(255,255,255,.03), 0 8px 24px rgba(0,0,0,.4);
  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --sidebar-w: 232px;
  --topbar-h: 52px;
  --tr: 150ms cubic-bezier(.2,.7,.2,1);
}
[data-theme="light"] {
  --bg: #FFFFFF;
  --bg-1: #FAFAFA;
  --bg-2: #F4F4F5;
  --bg-3: #E4E4E7;
  --line: #E4E4E7;
  --line-2: #D4D4D8;
  --text: #18181B;
  --text-dim: #52525B;
  --text-mute: #71717A;
  --accent-soft: rgba(124,58,237,.10);
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
}

/* ── SIDEBAR ─────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0; background: var(--bg-1);
  border-right: 1px solid var(--line); display: flex; flex-direction: column;
  height: 100vh; position: sticky; top: 0;
}
.brand {
  height: var(--topbar-h); padding: 0 16px; display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--line); font-weight: 600; letter-spacing: -.01em;
}
.brand-mark {
  width: 22px; height: 22px; border-radius: 5px; background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: grid; place-items: center; color: white; font-size: 11px; font-weight: 700;
}
.nav { padding: 8px; overflow-y: auto; flex: 1; }
.nav-group { margin-bottom: 12px; }
.nav-group-title {
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-mute);
  padding: 8px 10px 6px;
}
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: var(--radius);
  color: var(--text-dim); cursor: pointer; transition: background var(--tr), color var(--tr);
  font-size: 13px; user-select: none;
}
.nav-item:hover { background: var(--bg-2); color: var(--text); }
.nav-item.active { background: var(--accent-soft); color: var(--accent-2); }
.nav-item .icon { width: 16px; height: 16px; opacity: .8; flex-shrink: 0; }
.nav-item .count {
  margin-left: auto; font-size: 11px; padding: 1px 6px; border-radius: 10px;
  background: var(--bg-3); color: var(--text-dim); font-variant-numeric: tabular-nums;
}
.nav-item.active .count { background: rgba(124,58,237,.24); color: var(--accent-2); }
.sidebar-foot {
  padding: 10px 12px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 10px;
}
.avatar {
  width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #F97316, #EAB308);
  display: grid; place-items: center; color: white; font-weight: 700; font-size: 11px;
}

/* ── TOP BAR ─────────────────────────────────────────────── */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  height: var(--topbar-h); padding: 0 20px; display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: 0; z-index: 20;
}
.breadcrumb { color: var(--text-dim); font-size: 12px; }
.breadcrumb strong { color: var(--text); font-weight: 500; }
.topbar-spacer { flex: 1; }
.kbd {
  font-family: var(--mono); font-size: 11px; padding: 2px 6px; border-radius: 4px;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--text-dim);
}
.search-chip {
  display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: var(--radius);
  background: var(--bg-2); border: 1px solid var(--line); color: var(--text-mute); cursor: pointer;
  transition: border-color var(--tr);
}
.search-chip:hover { border-color: var(--line-2); }
.icon-btn {
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--radius);
  color: var(--text-dim); transition: background var(--tr), color var(--tr);
}
.icon-btn:hover { background: var(--bg-2); color: var(--text); }

/* ── CONTENT ─────────────────────────────────────────────── */
.content { flex: 1; overflow-y: auto; padding: 24px 28px 40px; }
.page-head { display: flex; align-items: baseline; gap: 12px; margin: 4px 0 20px; }
.page-title { font-size: 20px; font-weight: 600; letter-spacing: -.02em; margin: 0; }
.page-sub { color: var(--text-mute); font-size: 13px; }

/* ── ATOMS ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--bg-2); color: var(--text); font-size: 13px;
  cursor: pointer; transition: border-color var(--tr), background var(--tr), color var(--tr);
  white-space: nowrap;
}
.btn:hover { border-color: var(--line-2); background: var(--bg-3); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: white; }
.btn-primary:hover { background: #6D28D9; border-color: #6D28D9; }
.btn-danger { color: var(--err); border-color: rgba(239,68,68,.3); background: rgba(239,68,68,.06); }
.btn-danger:hover { background: rgba(239,68,68,.14); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--bg-2); }
.btn-sm { padding: 4px 8px; font-size: 12px; }
.btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-2); }

.pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 500; background: var(--bg-2); color: var(--text-dim);
}
.pill.ok { background: rgba(34,197,94,.12); color: var(--ok); }
.pill.warn { background: rgba(245,158,11,.14); color: var(--warn); }
.pill.err { background: rgba(239,68,68,.14); color: var(--err); }
.pill.info { background: rgba(6,182,212,.14); color: var(--info); }
.pill.acc { background: var(--accent-soft); color: var(--accent-2); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-mute); display: inline-block; }
.dot.ok { background: var(--ok); box-shadow: 0 0 0 2px rgba(34,197,94,.2); }
.dot.err { background: var(--err); }
.dot.warn { background: var(--warn); }

.card {
  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 16px; transition: border-color var(--tr);
}
.card:hover { border-color: var(--line-2); }
.card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.card-title { font-size: 13px; font-weight: 500; color: var(--text); }
.card-sub { color: var(--text-mute); font-size: 12px; margin-left: auto; }

.grid { display: grid; gap: 14px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; } }

/* KPI tile */
.kpi { }
.kpi-label { color: var(--text-mute); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.kpi-val { font-size: 28px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: 4px 0 2px; }
.kpi-delta { font-size: 11px; color: var(--ok); font-variant-numeric: tabular-nums; }
.kpi-delta.down { color: var(--err); }
.spark { margin-top: 8px; }

/* Table */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 13px; }
.tbl th { color: var(--text-mute); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; background: var(--bg-1); position: sticky; top: 0; }
.tbl tbody tr { transition: background var(--tr); cursor: pointer; }
.tbl tbody tr:hover { background: var(--bg-2); }
.tbl .row-actions { display: none; gap: 4px; justify-content: flex-end; }
.tbl tbody tr:hover .row-actions { display: inline-flex; }

/* Toast */
.toasts { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 100; pointer-events: none; }
.toast { pointer-events: auto; padding: 10px 14px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: var(--shadow); font-size: 13px; min-width: 220px; animation: slideIn .2s ease-out; }
.toast.ok { border-left: 3px solid var(--ok); }
.toast.err { border-left: 3px solid var(--err); }
.toast.info { border-left: 3px solid var(--accent); }
@keyframes slideIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }

/* Modal */
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: none; align-items: center; justify-content: center; z-index: 90; backdrop-filter: blur(4px); }
.modal-bg.on { display: flex; }
.modal { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); max-width: 92vw; max-height: 92vh; overflow: hidden; display: flex; flex-direction: column; }

/* Command Palette */
.cpal { width: 560px; max-width: 92vw; background: var(--bg-1); border: 1px solid var(--line-2); border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(0,0,0,.6); overflow: hidden; }

/* Top loading bar */
.top-load { position: fixed; top: 0; left: 0; height: 2px; background: var(--accent); z-index: 999; transition: width .3s ease; width: 0; }

/* SVG helpers */
.sparkline { width: 100%; height: 32px; }
.chart { width: 100%; height: 200px; }

/* Toggle */
/* Works in two flavors:
 *  1) label wrapper with <input type="checkbox"> + <span class="slider"> — the
 *     ":checked" selector drives the ON state.
 *  2) <button class="toggle on"><span class="slider"></span></button> — form
 *     POSTs (e.g. per-device Keylog on the fleet list) render server state as
 *     an "on" class on the button itself, so no client JS is required. Reset
 *     button chrome (border/background) so the atom looks identical to (1). */
.toggle { position: relative; display: inline-block; width: 34px; height: 20px; padding: 0; border: 0; background: transparent; vertical-align: middle; }
button.toggle { cursor: pointer; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle .slider { position: absolute; cursor: pointer; inset: 0; background: var(--bg-3); border-radius: 999px; transition: background var(--tr); }
.toggle .slider::before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; top: 3px; background: white; border-radius: 50%; transition: transform var(--tr); }
.toggle input:checked + .slider,
.toggle.on .slider { background: var(--accent); }
.toggle input:checked + .slider::before,
.toggle.on .slider::before { transform: translateX(14px); }

/* Progress bars */
.gauge { height: 6px; background: var(--bg-3); border-radius: 3px; overflow: hidden; }
.gauge > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 3px; transition: width var(--tr); }
.gauge.warn > span { background: linear-gradient(90deg, var(--warn), #FBBF24); }
.gauge.err > span { background: linear-gradient(90deg, var(--err), #F87171); }
.gauge.ok > span { background: linear-gradient(90deg, var(--ok), #4ADE80); }

.stat-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 12px; border-bottom: 1px solid var(--line); }
.stat-row:last-child { border: 0; }
.stat-row .k { color: var(--text-mute); }
.stat-row .v { font-family: var(--mono); }

.form-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.form-row label { min-width: 160px; color: var(--text-dim); }
.form-row input, .form-row select, .form-row textarea { flex: 1; }

.chip-filter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }

.hidden { display: none !important; }