/* ── Tokens ──────────────────────────────────────────────── */
:root {
  color-scheme: light;

  /* light */
  --bg:            #f4f5f7;
  --surface:       #ffffff;
  --surface-alt:   #eaedf1;
  --surface-raised:#e2e5eb;
  --surface-hover: #e8ecf2;
  --border:        #c8cdd6;
  --border-soft:   #dde0e6;
  --border-strong: #d71920;
  --ink:           #111316;
  --muted:         #5f6675;
  --accent:        #d71920;
  --accent-muted:  #fbe6e7;
  --accent-fg:     #ffffff;
  --accent-hover:  #b5141a;
  --danger:        #b91c1c;
  --danger-bg:     #fef2f2;
  --ok-bg:         #f0faf4;
  --ok:            #166534;
  --status-online: #16a34a;
  --status-off:    #6b7280;
  --tag-bg:        #fbe6e7;
  --tag-fg:        #b5141a;
  --row-selected:  #fbe6e7;
  --row-selected-border: #b5141a;

  /* typography */
  --font: "Segoe UI", "Aptos", system-ui, sans-serif;
  --font-mono: "Cascadia Code", "Consolas", monospace;

  /* sizing */
  --rail-w: 68px;
  --sidebar-w: 220px;
  --detail-w:  420px;
  --topbar-h:  44px;
  --app-header-h: 72px;
  --row-h:     36px;

  /* radii */
  --radius-sm: 4px;
  --radius:    6px;
  --radius-lg: 12px;

  /* shadows */
  --shadow-sm: 0 1px 3px color-mix(in srgb, var(--ink) 8%, transparent);
  --shadow:    0 4px 14px color-mix(in srgb, var(--ink) 11%, transparent);
  --shadow-lg: 0 8px 32px color-mix(in srgb, var(--ink) 16%, transparent);
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg:            #101214;
  --surface:       #181a1d;
  --surface-alt:   #1e2124;
  --surface-raised:#23272b;
  --surface-hover: #2a2d32;
  --border:        #303438;
  --border-soft:   #28292d;
  --border-strong: #754047;
  --ink:           #e8e9ec;
  --muted:         #8c9198;
  --accent:        #ff646a;
  --accent-muted:  #351b1e;
  --accent-fg:     #000000;
  --accent-hover:  #ff858a;
  --danger:        #ef4444;
  --danger-bg:     #2d1111;
  --ok-bg:         #0d1f14;
  --ok:            #4ade80;
  --status-online: #4ade80;
  --status-off:    #6b7280;
  --tag-bg:        #351b1e;
  --tag-fg:        #ff646a;
  --row-selected:  #351b1e;
  --row-selected-border: #ff646a;
}

/* ── Reset ───────────────────────────────────────────────── */
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: 12px;
  line-height: 1.4;
  background: linear-gradient(160deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 96%, var(--accent) 4%) 100%);
  color: var(--ink);
  overflow: hidden;
}
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  color: var(--ink);
  outline: none;
  width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
textarea { resize: vertical; min-height: 80px; font-family: var(--font-mono); font-size: 12px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
hr { border: 0; border-top: 1px solid var(--border); margin: 8px 0; }

/* ── App shell ───────────────────────────────────────────── */
#appShell {
  display: block;
  height: 100dvh;
  overflow: hidden;
}

.app-shell-frame {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  height: 100%;
  overflow: hidden;
}

.app-rail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  padding: 10px 6px 8px;
  border-right: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, var(--accent) 8%) 0%, var(--surface-alt) 100%);
  box-shadow: inset -1px 0 0 color-mix(in srgb, #ffffff 35%, transparent);
  overflow: visible;
}

.app-rail-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 0;
  padding: 6px 0 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.app-rail-brand-copy {
  display: none;
}

.app-rail-brand-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
}

.app-rail-brand-subtitle {
  margin-top: 2px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.app-rail-section-label {
  display: none;
}

.app-rail-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-top: auto;
  padding: 10px 0 8px;
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  position: relative;
}

.app-rail-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 15%, var(--surface-alt));
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  user-select: none;
  flex-shrink: 0;
  cursor: pointer;
  padding: 0;
  transition: background 0.12s, border-color 0.12s;
}
.app-rail-avatar:hover {
  background: color-mix(in srgb, var(--accent) 26%, var(--surface-alt));
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
}
.app-rail-avatar[aria-expanded="true"] {
  background: color-mix(in srgb, var(--accent) 32%, var(--surface-alt));
  border-color: var(--accent);
}

/* Rail user popup menu */
.rail-user-menu {
  position: absolute;
  left: calc(100% + 8px);
  bottom: 0;
  min-width: 178px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--ink) 14%, transparent);
  z-index: 60;
  padding: 5px;
}
.rail-user-menu-name {
  padding: 6px 10px 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.rail-user-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
  opacity: 0.6;
}
.rail-user-menu-item {
  display: block;
  width: 100%;
  padding: 6px 10px;
  text-align: left;
  background: none;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  color: var(--ink);
}
.rail-user-menu-item:hover { background: var(--surface-hover); }
.rail-user-menu-item--danger { color: #e05252; }
.rail-user-menu-item--danger:hover { background: color-mix(in srgb, #e05252 10%, var(--surface)); }

.rail-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: none;
  border: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
  border-radius: 7px;
  padding: 0;
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
}
.rail-icon-btn:hover { background: var(--surface-hover); border-color: var(--border); color: var(--ink); }
.rail-icon-btn--subtle { opacity: 0.7; }
.rail-icon-btn--subtle:hover { opacity: 1; }

.app-main-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* Top bar */
#topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 1.1fr) auto;
  align-items: center;
  gap: 12px;
  /* min-height: var(--app-header-h); */
  padding: 10px 16px 8px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 76%, transparent), transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  z-index: 10;
  position: relative;
}
#topbar.topbar-menu-open {
  z-index: 35;
}
.brand-logo {
  height: 28px;
  width: 28px;
  object-fit: contain;
  flex-shrink: 0;
}

.app-header-left {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.app-page-heading {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.app-page-eyebrow {
  display: none;
}

.app-page-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.app-page-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.app-page-subtitle {
  max-width: 680px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.topbar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: visible;
  width: 100%;
  padding: 0;
  align-items: center;
}
.topbar-nav button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  position: relative;
  width: 64px;
  min-width: 32px;
  min-height: 40px;
  padding: 0;
  border: 1px solid transparent;
  /* border-radius: 10px; */
  background: transparent;
  cursor: pointer;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
}
.topbar-nav button:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--surface) 74%, transparent);
  border-color: color-mix(in srgb, var(--border) 56%, transparent);
}
.topbar-nav button.active {
  color: var(--ink);
  font-weight: 600;
  background: color-mix(in srgb, var(--surface) 82%, var(--accent) 18%);
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
  box-shadow: inset 2px 0 0 var(--accent);
}

.app-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  min-width: 20px;
  height: 20px;
  color: color-mix(in srgb, var(--ink) 72%, var(--accent) 28%);
}

.app-nav-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-nav-copy {
  display: none;
}

.app-nav-label {
  font-size: 12px;
  font-weight: 700;
  color: inherit;
}

.app-nav-meta {
  font-size: 10px;
  color: var(--muted);
}

.topbar-nav button.active .app-nav-meta {
  color: color-mix(in srgb, var(--accent) 76%, var(--ink) 24%);
}

.topbar-nav button.active .app-nav-icon {
  color: var(--accent);
}

.topbar-nav button:hover .app-nav-icon {
  color: var(--accent);
}

.topbar-right {
  display: flex;
  align-items: center;
  align-self: center;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  margin-left: 0;
  padding-left: 0;
  flex-shrink: 0;
}

.nav-hover-tooltip {
  position: fixed;
  transform: translateY(-50%);
  min-width: 168px;
  max-width: 220px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 97%, var(--surface-alt) 3%);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  z-index: 60;
}

.nav-hover-tooltip-title {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
}

.nav-hover-tooltip-description {
  margin-top: 3px;
  font-size: 10px;
  line-height: 1.35;
  color: var(--muted);
}

.app-header-user {
  font-size: 11px;
  color: var(--muted);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Topbar collapsible wrapper (desktop: transparent flex passthrough) ── */
.topbar-collapsible {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: visible;
}

/* ── Mobile burger button (hidden on desktop) ────────────── */
.mobile-burger-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  min-width: 38px;
  height: 38px;
  background: color-mix(in srgb, var(--surface) 88%, var(--surface-alt) 12%);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: var(--muted);
  flex-shrink: 0;
}
.mobile-burger-btn:hover { background: var(--surface-hover); color: var(--ink); }

/* ── Mobile filter button (hidden on desktop) ────────────── */
.mobile-filter-btn, .btn.mobile-filter-btn { display: none; }

/* ── Mobile overlay backdrop ─────────────────────────────── */
.mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  z-index: 30;
}
.mobile-overlay.active { display: block; }
.service-status {
  display: inline-flex;
  align-items: center;
  position: relative;
  gap: 8px;
  min-width: 136px;
  padding: 4px 10px 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 86%, var(--surface-alt)) 0%, color-mix(in srgb, var(--surface) 94%, var(--accent) 6%) 100%);
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 45%, transparent), var(--shadow-sm);
}
.service-status::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--surface) 86%, transparent), color-mix(in srgb, var(--surface) 60%, transparent));
  pointer-events: none;
}
.service-status::after {
  content: "";
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: -28%;
  width: 44%;
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, #ffffff 60%, transparent) 50%, transparent 100%);
  opacity: 0;
  transform: translateX(-140%) skewX(-22deg);
  pointer-events: none;
}
.service-status-dot {
  position: relative;
  z-index: 1;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-off);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--status-off) 18%, transparent);
  flex-shrink: 0;
}
.service-status-dot::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  opacity: 0;
  transform: scale(0.72);
}
.service-status > span {
  position: relative;
  z-index: 1;
}
.service-status[data-state="live"] {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--status-online) 35%, var(--border));
  background: color-mix(in srgb, var(--ok-bg) 82%, var(--surface));
}
.service-status[data-state="live"] .service-status-dot {
  background: var(--status-online);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--status-online) 20%, transparent);
}
.service-status[data-state="connecting"],
.service-status[data-state="reconnecting"] {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 76%, var(--accent) 24%) 0%, color-mix(in srgb, var(--surface) 88%, var(--accent) 12%) 100%);
}
.service-status[data-state="connecting"] .service-status-dot,
.service-status[data-state="reconnecting"] .service-status-dot {
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
}
.service-status[data-state="connecting"]::after,
.service-status[data-state="reconnecting"]::after {
  opacity: 1;
  animation: statusSweep 1.65s ease-in-out infinite;
}
.service-status[data-state="connecting"] .service-status-dot::after,
.service-status[data-state="reconnecting"] .service-status-dot::after {
  opacity: 1;
  animation: statusPulse 1.35s ease-out infinite;
}
.service-status[data-state="error"] {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 28%, var(--border));
  background: linear-gradient(135deg, color-mix(in srgb, var(--danger-bg) 70%, var(--surface)) 0%, color-mix(in srgb, var(--danger) 10%, var(--surface)) 100%);
}
.service-status[data-state="error"] .service-status-dot {
  background: var(--danger);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 18%, transparent);
}
.service-status[data-state="error"]::after {
  opacity: 0.7;
  animation: statusSweep 2.2s linear infinite;
}
.version-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 86%, var(--accent) 14%);
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
#topbarUser {
  font-size: 12px;
  color: var(--muted);
  max-width: none;
}
.operations-shell {
  position: relative;
}
#operationsButton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid var(--border);
  padding: 4px 10px;
  cursor: pointer;
  font-size: 12px;
  color: var(--muted);
  position: relative;
}
#operationsButton:hover {
  background: var(--surface-hover);
  color: var(--ink);
}
.operations-icon {
  color: var(--accent);
  font-size: 13px;
}
#operationsBadge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--surface);
}
.operations-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 320px;
  max-height: 360px;
  overflow-y: auto;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 82%, var(--surface-raised)) 0%, color-mix(in srgb, var(--surface-alt) 78%, var(--surface-raised)) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 30;
}
.operations-panel-head {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.operations-empty {
  padding: 14px 12px;
  color: var(--muted);
  font-size: 12px;
}
.operation-item-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.operation-item-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* ── Notifications panel ──────────────────────────────────── */
.notif-shell {
  position: relative;
}
#notifBtn {

  @keyframes statusSweep {
    0% {
      transform: translateX(-145%) skewX(-22deg);
    }
    100% {
      transform: translateX(320%) skewX(-22deg);
    }
  }

  @keyframes statusPulse {
    0% {
      opacity: 0.9;
      transform: scale(0.72);
    }
    70% {
      opacity: 0;
      transform: scale(1.48);
    }
    100% {
      opacity: 0;
      transform: scale(1.48);
    }
  }

  @keyframes spinnerOrbit {
    0% {
      transform: rotate(0deg) scale(0.96);
    }
    50% {
      transform: rotate(180deg) scale(1);
    }
    100% {
      transform: rotate(360deg) scale(0.96);
    }
  }

  @keyframes spinnerLabelPulse {
    0%,
    100% {
      opacity: 0.72;
      letter-spacing: 0.16em;
    }
    50% {
      opacity: 1;
      letter-spacing: 0.22em;
    }
  }


  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1px solid var(--border);
  padding: 4px 9px;
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
  position: relative;
}
#notifBtn:hover {
  background: var(--surface-hover);
  color: var(--ink);
}
.notif-icon {
  font-size: 13px;
  line-height: 1;
}
.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--surface);
}
.notif-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 320px;
  max-height: 400px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 30;
}
.notif-panel-head {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  position: sticky;
  top: 0;
  background: var(--surface);
}
.notif-empty {
  padding: 14px 12px;
  color: var(--muted);
  font-size: 12px;
}
.notif-item {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.notif-item-success {
  border-left: 3px solid var(--ok-fg, #22863a);
  background: color-mix(in srgb, var(--ok-bg, #e6ffed) 40%, transparent);
}
.notif-item-error {
  border-left: 3px solid var(--err-fg, #cb2431);
  background: color-mix(in srgb, var(--err-bg, #ffeef0) 40%, transparent);
}
.notif-item-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.notif-item-text {
  font-size: 12px;
  font-weight: 600;
  flex: 1;
}
.notif-item-detail {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
  word-break: break-word;
}
.notif-item-time {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}
.notif-link-btn {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
  color: var(--accent);
  white-space: nowrap;
}
.notif-link-btn:hover {
  background: var(--surface-hover);
}

.support-session-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--surface);
  pointer-events: none;
}
.support-session-badge.pending { background: var(--warn, #f0a500); }
.support-session-badge.ready   { background: var(--ok,   #2ecc71); }

/* ── Downloads panel ─────────────────────────────────────── */
.downloads-shell {
  position: relative;
}
#downloadsToggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1px solid var(--border);
  padding: 4px 9px;
  cursor: pointer;
  font-size: 12px;
  color: var(--muted);
}
#downloadsToggle:hover {
  background: var(--surface-hover);
  color: var(--ink);
}
.downloads-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 30;
  overflow: hidden;
}
.downloads-panel-head {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.downloads-item {
  display: block;
  width: 100%;
  padding: 9px 12px;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font-size: 13px;
  color: var(--ink);
}
.downloads-item:last-child { border-bottom: none; }
.downloads-item:hover { background: var(--surface-hover); }
.downloads-item:disabled { color: var(--muted); cursor: default; }

/* ── Page area ───────────────────────────────────────────── */
#pages {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  position: relative;
  padding: 0;
}
#pages > .page {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.page[hidden] { display: none; }

.devices-page-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.devices-page-layout > .three-pane {
  flex: 1;
  min-height: 0;
}

/* ── Login page ──────────────────────────────────────────── */
#loginPage {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 30% 20%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 80%, color-mix(in srgb, var(--accent) 7%, transparent) 0%, transparent 45%),
    var(--bg);
}
.login-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius-lg);
  width: 340px;
  padding: 28px;
  box-shadow: 0 8px 32px color-mix(in srgb, var(--accent) 10%, transparent);
}
.login-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
}
.login-logo-img {
  height: 48px;
  width: 100%;
  object-fit: contain;
}
.login-logo-sub {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-weight: 500;
}
.login-box .sub { color: var(--muted); font-size: 12px; margin-bottom: 20px; }

/* ── Three-pane layout ───────────────────────────────────── */
.three-pane {
  display: flex;
  height: 100%;
  overflow: hidden;
}
.three-pane > .pane-filters {
  flex: 0 0 var(--sidebar-w);
}
.three-pane > .pane-list {
  flex: 1 1 0;
  min-width: 0;
}
.three-pane > .pane-detail {
  flex: 0 0 var(--detail-w);
  width: var(--detail-w);
  min-width: 260px;
  max-width: 70vw;
}
.three-pane > * { overflow: hidden; }

/* ── Detail resize handle ────────────────────────────────── */
.detail-resize-handle {
  flex: 0 0 5px;
  cursor: col-resize;
  background: var(--border);
  transition: background 0.15s;
  position: relative;
  z-index: 1;
}
.detail-resize-handle:hover,
.detail-resize-handle.dragging {
  background: var(--accent);
}

/* ── Sidebar resize handle ───────────────────────────────── */
.sidebar-resize-handle {
  flex: 0 0 5px;
  cursor: col-resize;
  background: var(--border);
  transition: background 0.15s;
  position: relative;
  z-index: 1;
}
.sidebar-resize-handle:hover,
.sidebar-resize-handle.dragging {
  background: var(--accent);
}

/* ── Sidebar (filter sets) ───────────────────────────────── */
.pane-filters {
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  background: var(--surface-alt);
}
.pane-filters .pane-head {
  padding: 8px 10px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pane-head-action {
  margin-left: auto;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--accent);
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
}
.pane-head-action:hover { background: var(--surface-hover); }
.filter-list { flex: 1; overflow-y: auto; }
.filter-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  height: var(--row-h);
  cursor: pointer;
  border-left: 2px solid transparent;
  white-space: nowrap;
  overflow: hidden;
  font-size: 13px;
}
.filter-item:hover { background: var(--surface-hover); }
.filter-item.active {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 18%, transparent) 0%, color-mix(in srgb, var(--accent) 6%, transparent) 100%);
  border-left-color: var(--row-selected-border);
  color: var(--accent);
  font-weight: 600;
}
.filter-item .count {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 1px 6px;
  min-width: 22px;
  text-align: center;
}

/* ── Middle: device list ─────────────────────────────────── */
.pane-list {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--surface);
}
.pane-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg, color-mix(in srgb, var(--surface-alt) 85%, var(--accent) 15%) 0%, var(--surface-alt) 50%);
  flex-shrink: 0;
}
.pane-toolbar input[type="search"] {
  flex: 1;
  min-width: 0;
  height: 26px;
  padding: 0 8px;
  font-size: 12px;
}
.pane-toolbar .toolbar-title { font-weight: 600; font-size: 13px; white-space: nowrap; }
.pane-toolbar .count-badge { font-size: 11px; color: var(--muted); white-space: nowrap; }
.device-filter-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 82%, var(--accent) 18%);
  font-size: 12px;
  color: var(--ink);
}
.device-filter-banner[hidden] {
  display: none;
}

/* ── Version update banner ───────────────────────────────── */
.version-update-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  background: color-mix(in srgb, var(--accent) 15%, var(--surface));
  border-bottom: 2px solid var(--accent);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  flex-shrink: 0;
}
.version-update-banner[hidden] {
  display: none;
}
.version-update-countdown {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  flex: 1;
}
.version-update-now {
  margin-left: auto;
}

/* ── Server Metrics panel ────────────────────────────────── */
.metrics-panel-layout {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  height: 100%;
  box-sizing: border-box;
}
.metrics-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.metrics-timestamp {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
.metrics-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
}
.metrics-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.mc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 12px 14px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-width: 0;
}
.mc-value {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.mc-label {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
.mc-accent-fps  { border-left: 3px solid #1fa971; }
.mc-accent-bw   { border-left: 3px solid #5b8fe8; }
.mc-accent-input { border-left: 3px solid #9b6ee8; }
.mc-accent-cpu { border-left: 3px solid #d27f2f; }
.mc-accent-memory { border-left: 3px solid #4c9e8a; }
.mc-accent-fps  .mc-value { color: #1fa971; }
.mc-accent-bw   .mc-value { color: #5b8fe8; }
.mc-accent-input .mc-value { color: #9b6ee8; }
.mc-accent-cpu .mc-value { color: #d27f2f; }
.mc-accent-memory .mc-value { color: #4c9e8a; }

.metrics-chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
}

.metrics-chart-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.metrics-chart-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
}

.metrics-chart-wrap {
  position: relative;
  height: 190px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  box-sizing: border-box;
  flex-shrink: 0;
}
.metrics-chart-wrap canvas {
  position: absolute;
  inset: 10px 12px;
  width: calc(100% - 24px) !important;
  height: calc(100% - 20px) !important;
}

/* ── Device table ────────────────────────────────────────── */
.device-table-wrap { flex: 1; overflow-y: auto; }
table.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-alt);
  border-bottom: 2px solid var(--border);
  padding: 5px 8px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.data-table thead th:hover { color: var(--ink); }
.data-table tbody tr { border-bottom: 1px solid var(--border); cursor: pointer; height: 42px; max-height: 42px; overflow: hidden; }
.data-table tbody tr:hover { background: var(--surface-hover); }
.data-table tbody tr.selected {
  background: var(--row-selected);
  box-shadow: inset 2px 0 0 var(--row-selected-border);
}
.data-table td {
  padding: 4px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  height: 42px;
  max-height: 42px;
}
.device-name-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.device-name-primary {
  display: flex;
  align-items: center;
  gap: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.device-name-sub {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
}
.device-stack-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.device-stack-primary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.device-stack-secondary {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.device-stack-secondary-placeholder {
  visibility: hidden;
}
.device-session-summary {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
}
.device-session-tag {
  padding: 1px 6px;
}
.device-session-tag-own {
  background: color-mix(in srgb, var(--accent) 14%, var(--tag-bg));
  color: color-mix(in srgb, var(--accent-strong) 72%, var(--tag-fg));
}

/* ── Status dot ──────────────────────────────────────────── */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-off);
  margin-right: 5px;
  flex-shrink: 0;
}
.status-dot.online {
  background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--status-online) 70%, #fff), var(--status-online));
  box-shadow: 0 0 4px color-mix(in srgb, var(--status-online) 60%, transparent);
}

.device-status-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-items: center;
}

.device-queue-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  cursor: default;
  white-space: nowrap;
}

.device-update-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 3px;
  cursor: default;
  white-space: nowrap;
}

.device-update-badge-available {
  background: color-mix(in srgb, #d4900a 12%, transparent);
  color: #c8860a;
  border: 1px solid color-mix(in srgb, #d4900a 28%, transparent);
}

.device-update-badge-restart {
  background: color-mix(in srgb, #c04a1e 12%, transparent);
  color: #b84418;
  border: 1px solid color-mix(in srgb, #c04a1e 28%, transparent);
}

/* ── Right pane: detail ──────────────────────────────────── */
.pane-detail {
  display: flex;
  flex-direction: column;
  background: var(--surface-alt);
  overflow: hidden;
}

#deviceDetailContent {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

#deviceDetailContent[hidden] {
  display: none;
}

.pane-detail .detail-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 13px;
}

.device-visual-timeline-resize {
  flex: none;
  height: 7px;
  cursor: ns-resize;
  background: transparent;
  border-top: 2px solid var(--border);
  transition: border-color 0.12s;
  flex-shrink: 0;
}

.device-visual-timeline-resize:hover {
  border-top-color: var(--accent);
}

.device-visual-timeline-dock {
  flex: none;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-alt) 88%, var(--accent) 12%) 0%, var(--surface) 35%),
    var(--surface);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.device-visual-timeline-dock.collapsed > :not(.device-visual-timeline-head) {
  display: none !important;
}

.device-visual-timeline-dock.collapsed {
  height: auto !important;
}

.device-visual-timeline-collapse-btn {
  line-height: 1;
  padding: 2px 6px;
  font-size: 10px;
}

.device-visual-timeline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
}

.device-visual-timeline-head > div:first-child {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.device-visual-timeline-kicker {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.device-visual-timeline-title {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.device-visual-timeline-toolbar {
  padding: 6px 12px 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.device-visual-timeline-selection {
  padding: 4px 12px 0;
}

.device-visual-timeline-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: var(--muted);
  font-size: 13px;
  padding: 16px;
}

.device-visual-timeline-host {
  flex: 1;
  min-height: 0;
  padding: 8px 12px 12px;
}

.device-visual-timeline-host .vis-timeline {
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  color: var(--ink);
}

.device-visual-timeline-host .vis-panel,
.device-visual-timeline-host .vis-labelset,
.device-visual-timeline-host .vis-label,
.device-visual-timeline-host .vis-time-axis,
.device-visual-timeline-host .vis-center,
.device-visual-timeline-host .vis-left {
  border-color: var(--border);
}

.device-visual-timeline-host .vis-label {
  color: var(--ink);
  background: color-mix(in srgb, var(--surface-alt) 92%, transparent);
  font-size: 12px;
}

.device-visual-timeline-host .vis-foreground,
.device-visual-timeline-host .vis-label .vis-inner,
.device-visual-timeline-host .vis-time-axis .vis-text,
.device-visual-timeline-host .vis-time-axis .vis-grid.vis-major,
.device-visual-timeline-host .vis-time-axis .vis-grid.vis-minor,
.device-visual-timeline-host .vis-text {
  color: var(--muted);
}

.device-visual-timeline-host .vis-label .vis-inner,
.device-visual-timeline-host .vis-item,
.device-visual-timeline-host .vis-item .vis-item-content,
.device-visual-timeline-host .vis-time-axis .vis-text {
  color: var(--ink) !important;
}

.device-visual-timeline-host .vis-item {
  border-radius: 10px;
  border-width: 1px;
  font-size: 11px;
  box-shadow: none;
}

.device-visual-timeline-host .vis-item .vis-item-content {
  padding: 6px 8px;
  color: inherit;
}

.device-visual-timeline-host .vis-item.vis-selected {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
}

.device-visual-timeline-host .vis-item.status-online {
  border-color: color-mix(in srgb, #1fa971 45%, var(--border));
  background: color-mix(in srgb, #1fa971 12%, var(--surface));
  color: #1fa971 !important;
}

.device-visual-timeline-host .vis-item.status-offline {
  border-color: color-mix(in srgb, #d65353 55%, var(--border));
  background: color-mix(in srgb, #d65353 12%, var(--surface));
  color: #d65353 !important;
}

.device-visual-timeline-host .vis-item.health {
  border-color: color-mix(in srgb, #2f87d6 50%, var(--border));
  background: color-mix(in srgb, #2f87d6 10%, var(--surface));
  color: #2f87d6 !important;
}

.device-visual-timeline-host .vis-item.health,
.device-visual-timeline-host .vis-item.status-online,
.device-visual-timeline-host .vis-item.status-offline,
.device-visual-timeline-host .vis-item.status {
  border-radius: 999px;
}

.device-visual-timeline-host .vis-item.health .vis-item-content,
.device-visual-timeline-host .vis-item.status-online .vis-item-content,
.device-visual-timeline-host .vis-item.status-offline .vis-item-content,
.device-visual-timeline-host .vis-item.status .vis-item-content {
  padding: 2px 5px;
}

.device-visual-timeline-host .vis-item.presence {
  border-color: color-mix(in srgb, #9b6ee8 45%, var(--border));
  background: color-mix(in srgb, #9b6ee8 10%, var(--surface));
}

.device-visual-timeline-host .vis-item.remote-session {
  border-color: color-mix(in srgb, #ea8a2f 50%, var(--border));
  background: color-mix(in srgb, #ea8a2f 11%, var(--surface));
}

.device-visual-timeline-host .vis-item.command,
.device-visual-timeline-host .vis-item.command-complete {
  border-color: color-mix(in srgb, #6d7a86 45%, var(--border));
  background: color-mix(in srgb, #6d7a86 10%, var(--surface));
}

.device-visual-timeline-toolbar-row-simple {
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.device-visual-timeline-range-strip {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

.device-range-timeline {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 100%;
  padding: 10px 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 90%, var(--accent) 10%) 0%, color-mix(in srgb, var(--surface-alt) 92%, transparent) 100%);
  overflow: auto;
}

.device-range-timeline-axis {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 42px;
  margin-left: 132px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(6px);
}

.device-range-timeline-axis-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  padding-bottom: 6px;
  min-width: 64px;
}

.device-range-timeline-axis-tick::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: color-mix(in srgb, var(--border) 55%, transparent);
}

.device-range-timeline-axis-major,
.device-range-timeline-axis-minor {
  position: relative;
  z-index: 1;
  display: block;
  padding-left: 8px;
  font-size: 11px;
  white-space: nowrap;
}

.device-range-timeline-axis-major {
  color: var(--ink);
  font-weight: 600;
}

.device-range-timeline-axis-minor {
  color: var(--muted);
}

.device-range-timeline-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.device-range-timeline-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.device-range-timeline-row-label {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 6px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.device-range-timeline-row-track {
  position: relative;
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  background: color-mix(in srgb, var(--surface-alt) 78%, transparent);
  overflow: hidden;
}

.device-range-timeline-grid-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: color-mix(in srgb, var(--border) 50%, transparent);
  transform: translateX(-50%);
}

.device-range-timeline-band,
.device-range-timeline-point {
  position: absolute;
  border: 0;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.device-range-timeline-band:hover,
.device-range-timeline-point:hover,
.device-range-timeline-band.active,
.device-range-timeline-point.active {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 6px 18px color-mix(in srgb, #000 24%, transparent);
  filter: saturate(1.08);
}

.device-range-timeline-band {
  top: 7px;
  bottom: 7px;
  min-width: 10px;
  border-radius: 999px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  color: var(--ink);
  background: color-mix(in srgb, var(--surface) 70%, var(--accent) 30%);
}

.device-range-timeline-band-label {
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.device-range-timeline-point {
  top: 50%;
  width: 16px;
  height: 16px;
  padding: 0;
  background: transparent;
  transform: translate(-50%, -50%);
}

.device-range-timeline-point:hover,
.device-range-timeline-point.active {
  transform: translate(-50%, calc(-50% - 1px));
}

.device-range-timeline-point-core {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  border: 2px solid transparent;
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent);
}

.device-range-timeline-band.status-online {
  background: color-mix(in srgb, #1fa971 22%, var(--surface));
  color: #75ddb3;
}

.device-range-timeline-band.presence {
  background: color-mix(in srgb, #9b6ee8 20%, var(--surface));
  color: #d7c2ff;
}

.device-range-timeline-point.command {
  color: #8fa0b2;
}

.device-range-timeline-point.command-complete {
  color: #1fa971;
}

@media (max-width: 900px) {
  .device-range-timeline-axis {
    margin-left: 0;
    position: static;
  }

  .device-range-timeline-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .device-range-timeline-row-label {
    justify-content: flex-start;
    padding-right: 0;
  }
}

.device-visual-timeline-item {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.device-visual-timeline-item.icon-only {
  justify-content: center;
  min-width: 10px;
}

.device-visual-timeline-item-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 22%, transparent);
}

/* Enforce min row height on system lanes (checkins / offline) */
.vis-group.vis-group-system {
  min-height: 36px !important;
}
.vis-label.vis-group-system span.vis-inner {
  min-height: 36px;
  display: flex;
  align-items: center;
}

.device-vis-icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}

.device-vis-icon-remoteSession {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%235b8fe8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='1' y='1.5' width='12' height='8.5' rx='1.5'/><polyline points='4.5,12.5 7,10 9.5,12.5'/></svg>");
}

.device-vis-icon-presence {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%239b6ee8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='7' cy='4.5' r='2.5'/><path d='M2 13c0-2.8 2.2-5 5-5s5 2.2 5 5'/></svg>");
}

.device-vis-icon-command {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%236d7a86' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='3,9 6,6 3,3'/><line x1='8' y1='9' x2='11' y2='9'/></svg>");
}

.device-vis-icon-command-complete {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%231fa971' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='2,7 5,10 12,4'/></svg>");
}

.device-visual-timeline-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 65%, transparent);
  font-size: 9px;
  font-weight: 700;
  color: var(--muted);
}

/* ── vis-timeline tooltip override ── */
.vis-tooltip {
  background: var(--surface-alt) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22) !important;
  padding: 0 !important;
  font-size: 12px !important;
  max-width: 290px !important;
  min-width: 160px;
  color: var(--ink) !important;
  pointer-events: none;
  white-space: normal !important;
  line-height: 1.4 !important;
}

.vtip {
  padding: 9px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vtip-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.vtip-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(128, 128, 128, 0.16);
  color: var(--muted);
  flex-shrink: 0;
}
.vtip-title {
  font-weight: 700;
  font-size: 12.5px;
  color: var(--ink);
  word-break: break-word;
}
.vtip-row {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 4px;
  align-items: baseline;
  font-size: 11.5px;
  color: var(--muted);
}
.vtip-row-icon {
  font-size: 10px;
  text-align: center;
  line-height: 1.5;
  color: var(--muted);
}
.vtip-time {
  margin-top: 1px;
}

/* Category badge accent colours */
.vtip-presence  .vtip-badge { background: rgba(155, 110, 232, 0.18); color: #9b6ee8; }
.vtip-remote    .vtip-badge { background: rgba(91,  143, 232, 0.18); color: #5b8fe8; }
.vtip-cmd-ok    .vtip-badge { background: rgba(31,  169, 113, 0.18); color: #1fa971; }
.vtip-command   .vtip-badge { background: rgba(109, 122, 134, 0.18); color: #6d7a86; }
.vtip-offline   .vtip-badge { background: rgba(220, 80,  80,  0.16); color: #dc5050; }
.vtip-status    .vtip-badge { background: rgba(109, 122, 134, 0.18); color: #6d7a86; }
.vtip-health    .vtip-badge { background: rgba(91,  143, 232, 0.14); color: #5b8fe8; }
.vtip-generic   .vtip-badge { background: rgba(128, 128, 128, 0.14); color: var(--muted); }

.device-visual-timeline-toolbar-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
}

.device-visual-timeline-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-alt) 88%, transparent);
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.device-visual-timeline-filter-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.device-visual-timeline-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 0 8px 0 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-alt) 88%, transparent);
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
}

.device-visual-timeline-filter-chip.active {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-alt));
  color: var(--ink);
}

.device-visual-timeline-filter-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 62%, transparent);
  font-size: 9px;
  font-weight: 800;
}

.device-visual-timeline-filter-chip-label {
  white-space: nowrap;
}

.device-visual-timeline-count {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.device-visual-timeline-zoom-controls {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.device-visual-timeline-zoom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  background: color-mix(in srgb, var(--surface-alt) 88%, transparent);
  border: none;
  border-right: 1px solid var(--border);
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}

.device-visual-timeline-zoom-btn:last-child {
  border-right: none;
}

.device-visual-timeline-zoom-btn:hover {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-alt));
  color: var(--ink);
}

.device-visual-timeline-summary {
  display: grid;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-alt) 90%, transparent), color-mix(in srgb, var(--surface) 96%, transparent));
}

.device-visual-timeline-summary.status-online {
  border-color: color-mix(in srgb, #1fa971 40%, var(--border));
}

.device-visual-timeline-summary.status-offline {
  border-color: color-mix(in srgb, #d65353 48%, var(--border));
}

.device-visual-timeline-summary.health,
.device-visual-timeline-summary.status-health {
  border-color: color-mix(in srgb, #2f87d6 46%, var(--border));
}

.device-visual-timeline-summary.presence {
  border-color: color-mix(in srgb, #9b6ee8 44%, var(--border));
}

.device-visual-timeline-summary.remote-session {
  border-color: color-mix(in srgb, #ea8a2f 48%, var(--border));
}

.device-visual-timeline-summary.command,
.device-visual-timeline-summary.command-complete {
  border-color: color-mix(in srgb, #6d7a86 40%, var(--border));
}

.device-visual-timeline-summary-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.device-visual-timeline-summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 62%, transparent);
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.device-visual-timeline-summary-title {
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.device-visual-timeline-summary-duration {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--ink);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.device-visual-timeline-summary-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

.device-visual-timeline-summary-time,
.device-visual-timeline-summary-fact {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1.2;
}

.device-visual-timeline-summary-time {
  background: color-mix(in srgb, var(--surface) 72%, var(--surface-alt));
  color: var(--ink);
}

.device-visual-timeline-summary-fact {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-alt));
  color: var(--muted);
}

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

  .device-visual-timeline-head > div:first-child {
    display: block;
  }

  .device-visual-timeline-summary-head {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .device-visual-timeline-summary-duration {
    grid-column: 2;
    justify-self: start;
  }

  .device-visual-timeline-toolbar-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: stretch;
  }

  .device-visual-timeline-count {
    justify-self: start;
  }
}

.detail-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg, color-mix(in srgb, var(--surface) 90%, var(--accent) 10%) 0%, var(--surface) 70%);
  flex-shrink: 0;
}
.detail-head h2 { font-size: 14px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-body {
  padding: 0px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

#deviceDetailContent > .detail-head {
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
}

.device-detail-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}

.device-detail-heading h2 {
  margin: 0;
  min-width: 0;
}

.device-detail-actions-shell {
  position: relative;
  flex: none;
}

.device-detail-actions-toggle {
  min-width: 84px;
  justify-content: center;
}

.device-detail-actions-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 35;
  min-width: 220px;
}
.detail-section { display: flex; flex-direction: column; gap: 6px; }
#deviceDetailTimelinePanel:not([hidden]) {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#deviceDetailTimelinePanel > .detail-section {
  flex: 1 1 auto;
  min-height: 0;
}

#detailTimeline {
  flex: 1 1 auto;
  min-height: 0;
}

.tab-panel > .detail-section + .detail-section {
  margin-top: 10px;
  padding-top: 4px;
}
.detail-assignment-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.detail-assignment-row-wrap {
  flex-wrap: wrap;
}
.detail-assignment-row select {
  flex: 1;
  min-width: 0;
}
.detail-metadata-actions {
  display: flex;
  justify-content: flex-end;
}
.detail-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.kv-grid { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: 12px; }
.kv-key { color: var(--muted); white-space: nowrap; }
.kv-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.tag-list { display: flex; flex-wrap: wrap; gap: 4px; }
.tag { padding: 2px 7px; font-size: 11px; background: var(--tag-bg); color: var(--tag-fg); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.detail-advanced-section { border: none; }
.detail-advanced-section > summary {
  list-style: none;
  cursor: pointer;
  font-size: 11px;
  color: var(--muted);
  opacity: 0.5;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 0;
}
.detail-advanced-section > summary:hover { opacity: 0.85; }
.detail-advanced-section > summary::-webkit-details-marker { display: none; }
.detail-advanced-section > summary::before {
  content: ">";
  font-size: 14px;
  line-height: 1;
  display: inline-block;
  transition: transform 0.15s;
}
.detail-advanced-section[open] > summary::before { transform: rotate(90deg); }
.detail-advanced-body { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
@media (max-width: 720px) {
  .detail-assignment-row {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ── Full-page sections (users, roles, etc.) ─────────────── */
.two-col-page { display: grid; grid-template-columns: 340px minmax(0, 1fr); height: 100%; overflow: hidden; }
.two-col-page > * { overflow-y: auto; }
.settings-two-col { height: 100%; grid-template-columns: minmax(480px, 560px) minmax(360px, 1fr); }
.agent-profiles-shell {
  /* visual order: list | form | deployment */
  grid-template-columns: minmax(260px, 300px) minmax(520px, 1.15fr) minmax(420px, 0.9fr);
}
.agent-profiles-shell .list-pane {
  order: -1;
  border-right: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-alt) 92%, var(--surface) 8%);
}
.agent-profiles-shell .list-pane .section-head {
  flex-wrap: wrap;
  row-gap: 4px;
}
.agent-profiles-shell .form-pane {
  order: 0;
  padding: 0;
  overflow: hidden;
  /* border-right already on .form-pane — divides form from deployment */
}
.agent-profile-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.agent-profile-form-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 95%, var(--surface-alt) 5%);
}
.agent-profile-form-card .detail-section-title {
  padding-bottom: 8px;
}
.agent-profile-form-card .settings-grid-2 {
  gap: 12px;
}
.agent-profile-toggle-list {
  display: grid;
  gap: 10px;
}
.agent-profile-toggle-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-alt) 84%, var(--surface) 16%);
}
.agent-profile-toggle-main {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}
.agent-profile-toggle-input {
  width: auto;
  margin: 2px 0 0;
  accent-color: var(--accent);
  flex-shrink: 0;
}
.agent-profile-toggle-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.agent-profile-toggle-title {
  color: var(--ink);
  font-weight: 600;
  line-height: 1.45;
}
.agent-profile-metadata-empty {
  margin-top: -2px;
}
/* ── Reusable scroll+sticky-actions pattern for tall form panes ── */
.form-pane-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.form-pane-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface-alt);
}
.agent-profiles-shell .agent-profile-deployment-pane {
  order: 1;
}
.form-pane {
  border-right: 1px solid var(--border);
  padding: 16px;
  background: color-mix(in srgb, var(--surface-alt) 94%, var(--surface) 6%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
}
.list-pane { background: var(--surface); overflow-y: auto; }
.agent-profile-deployment-pane {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-left: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 92%, var(--surface-alt) 8%);
}
.agent-profile-deployment-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.agent-profile-deployment-empty {
  padding: 24px 20px;
  border: 1px dashed var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-alt) 88%, var(--surface) 12%);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}
.agent-profile-deployment-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.agent-profile-deployment-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.agent-profile-deployment-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.agent-profile-deployment-title {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
}
.agent-profile-deployment-subtitle {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.agent-profile-deployment-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.agent-profile-deployment-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.agent-profile-deployment-summary-card {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 94%, var(--surface-alt) 6%);
}
.agent-profile-deployment-summary-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.agent-profile-deployment-summary-value {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  word-break: break-word;
}
.agent-profile-deployment-summary-note {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}
.agent-profile-deployment-tabs {
  display: flex;
  gap: 6px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--border);
}
.agent-profile-deployment-tab {
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.agent-profile-deployment-tab.active {
  border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--accent);
}
.agent-profile-deployment-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.agent-profile-deployment-section {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-alt) 92%, var(--surface) 8%);
}
.agent-profile-deployment-section h3 {
  margin: 0;
  font-size: 14px;
}
.agent-profile-deployment-section p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.agent-profile-deployment-package-stack {
  display: grid;
  gap: 10px;
}
.agent-profile-script-panel {
  display: grid;
  gap: 10px;
}
.agent-profile-script-preview-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.agent-profile-script-note-grid {
  display: grid;
  gap: 6px;
}
.agent-profile-script-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.agent-profile-script-toolbar .btn[disabled] {
  opacity: 0.65;
}

/* ── Sessions two-pane shell ─────────────────────────────── */
.sessions-shell {
  display: flex;
  height: 100%;
  overflow: hidden;
}
.sessions-list-pane {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--border);
}
.sessions-scope-note {
  margin: 10px 14px 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-2);
  font-size: 12px;
  color: var(--muted);
}
.user-activity-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.users-list-pane {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}
.users-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.user-activity-drawer {
  flex: 0 0 auto;
  padding: 14px;
  border-top: 1px solid var(--border);
  background: var(--surface-alt);
}
.user-activity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.user-activity-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-alt);
}
.user-activity-card-title {
  font-size: 12px;
  font-weight: 700;
}
.user-activity-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
}
.user-activity-row {
  align-items: flex-start;
}
.user-activity-empty {
  font-size: 12px;
  color: var(--muted);
}
.sessions-list {
  flex: 1;
  overflow-y: auto;
}
.sessions-detail-pane {
  flex: 0 0 420px;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-alt);
}
.sessions-load-more {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.sessions-ended-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.session-chat-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
  padding: 2px;
}
.session-chat-empty {
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
.session-chat-message {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-2, var(--surface));
}
.session-chat-message.sender-controlplane {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
}
.session-chat-message.sender-viewer {
  border-color: color-mix(in srgb, #2f87d6 42%, var(--border));
}
.session-chat-message.sender-enduser {
  border-color: color-mix(in srgb, #1fa971 42%, var(--border));
}
.session-chat-message-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 11px;
}
.session-chat-sender {
  font-weight: 700;
  color: var(--ink);
}
.session-chat-meta,
.session-chat-time {
  color: var(--muted);
}
.session-chat-body {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12px;
  line-height: 1.5;
}
.session-chat-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.session-chat-form textarea {
  min-height: 72px;
  resize: vertical;
}
.session-chat-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.session-note-display {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-2, var(--surface));
  color: var(--ink);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.session-note-display.is-empty {
  color: var(--muted);
  font-style: italic;
}
.session-chat-launch-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.session-chat-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--accent, #ff646a);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.btn-xs {
  padding: 2px 8px;
  font-size: 11px;
  line-height: 1.4;
}
.btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
}
.btn-ghost:hover {
  background: var(--surface-raised, var(--surface));
  color: var(--ink);
}

/* ── Session list rows ───────────────────────────────────── */
.remote-access-group { margin-bottom: 18px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.remote-access-group > h3, .remote-access-group > p { margin: 12px 16px; }
.remote-access-group .session-row { cursor: default; }
.remote-access-group button { flex-shrink: 0; white-space: nowrap; }
.remote-access-group .session-row-sub { white-space: normal; overflow-wrap: anywhere; }
.remote-access-shell { grid-template-columns: minmax(0, 1fr); }
.remote-access-shell .sessions-list-pane { width: 100%; flex: 1; }
.remote-connection { border-top: 1px solid var(--border); padding-bottom: 12px; }
.remote-connection .session-row { flex-wrap: wrap; border-bottom: 0; }
.remote-connection-meta, .remote-display-list { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 4px 18px; font-size: 12px; color: var(--muted); }
.remote-display-list span { padding: 5px 8px; border: 1px solid var(--border); border-radius: 5px; color: var(--ink); }
.remote-audio-badge { font-size: 11px; color: var(--muted); white-space: nowrap; }
.remote-audio-badge.enabled { color: var(--ok); }
.remote-connection details { margin: 8px 18px 0; font-size: 12px; }
.remote-connection summary { cursor: pointer; padding: 5px 0; color: var(--ink); }
.remote-diagnostics { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 20px; }
.remote-diagnostics dt { color: var(--muted); margin-bottom: 4px; }
.remote-diagnostics dd { margin: 0; overflow-wrap: anywhere; }
.remote-connection details p { max-width: 100ch; line-height: 1.5; }
.session-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.session-row:hover { background: var(--surface-hover); }
.session-row.selected { background: var(--row-selected); box-shadow: inset 2px 0 0 var(--row-selected-border); }
.session-row-info { flex: 1; min-width: 0; }
.session-row-name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-row-sub  { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-status-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.session-status-badge.active   { background: color-mix(in srgb, var(--status-online) 18%, transparent); color: var(--status-online); }
.session-status-badge.ended    { background: color-mix(in srgb, var(--muted) 18%, transparent);         color: var(--muted); }
.session-status-badge.failed   { background: color-mix(in srgb, var(--danger) 18%, transparent);        color: var(--danger); }
.session-status-badge.pending  { background: color-mix(in srgb, var(--accent) 18%, transparent);        color: var(--accent); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 85%, #000); }

/* ── Section headers ─────────────────────────────────────── */
.section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg, color-mix(in srgb, var(--surface-alt) 85%, var(--accent) 15%) 0%, var(--surface-alt) 50%);
  flex-shrink: 0;
}
.section-head h2 { font-size: 13px; font-weight: 700; flex: 1; }

/* ── Summary bar ─────────────────────────────────────────── */
.summary-bar {
  display: flex;
  align-items: center;
  align-self: center;
  gap: 6px;
  padding: 0;
  background: transparent;
  min-width: 0;
  justify-content: center;
  overflow-x: auto;
}

.topbar-summary-bar {
  width: 100%;
}

.summary-metric {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-alt) 76%, transparent);
  white-space: nowrap;
}
.summary-metric .sm-val { font-size: 12px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.summary-metric .sm-label { font-size: 10px; font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: 0.05em; }
.summary-metric .sm-sub { font-size: 10px; color: var(--muted); }

/* ── Forms ───────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-group label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.form-row { display: flex; gap: 8px; align-items: flex-end; }
.form-row > * { flex: 1; }
.form-title { font-size: 13px; font-weight: 700; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.settings-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.field-label {
  display: flex;
  align-items: center;
  gap: 6px;
}
.field-label label {
  margin: 0;
}
.tooltip-anchor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  user-select: none;
}
.tooltip-anchor:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}
.helper-text {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}
.app-tooltip {
  position: fixed;
  z-index: 1200;
  max-width: 320px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  background: color-mix(in srgb, var(--surface) 94%, #000 6%);
  color: var(--ink);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
  font-size: 12px;
  line-height: 1.45;
  pointer-events: none;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  height: 28px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 38%, transparent), 0 1px 1px color-mix(in srgb, var(--ink) 8%, transparent);
  transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.btn:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ink) 14%, transparent); }
.btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}
.btn-primary { background: linear-gradient(160deg, var(--accent) 0%, var(--accent-hover) 100%); border-color: var(--accent-hover); color: var(--accent-fg); box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 28%, transparent); }
.btn-primary:hover { background: linear-gradient(160deg, var(--accent-hover) 0%, color-mix(in srgb, var(--accent-hover) 80%, #000) 100%); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-sm { padding: 3px 8px; height: 24px; font-size: 11px; }
.btn-full { width: 100%; }

/* ── Feedback (kept for auth / persistent inline banners) ── */
.feedback-msg { padding: 7px 10px; font-size: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--ok-bg); color: var(--ok); }
.feedback-msg.error { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
.feedback-msg[hidden] { display: none; }

/* ── Toast notifications ─────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: 18px;
  right: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1001;
  pointer-events: none;
  max-width: 420px;
}
.toast {
  padding: 10px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  word-break: break-word;
}
.toast.toast-visible  { opacity: 1; transform: translateY(0); }
.toast.toast-success  { background: #2e7d50; }
.toast.toast-error    { background: #b93232; }
.toast.toast-info     { background: #1a6fa8; }

/* ── Entity rows ─────────────────────────────────────────── */
.entity-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.entity-row:hover { background: var(--surface-hover); }
.entity-row.selected { background: var(--row-selected); box-shadow: inset 2px 0 0 var(--row-selected-border); }
.entity-row .er-title { font-weight: 600; font-size: 13px; }
.entity-row .er-sub { font-size: 11px; color: var(--muted); }
.security-incident-empty {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.security-incident-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  align-items: stretch;
  background: var(--surface);
}
.security-incident-card:hover {
  background: var(--surface-hover);
}
.security-incident-severity-critical {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--danger) 88%, transparent);
}
.security-incident-severity-warning {
  box-shadow: inset 3px 0 0 color-mix(in srgb, #d97706 82%, transparent);
}
.security-incident-severity-info {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 78%, transparent);
}
.security-incident-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.security-incident-title-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}
.security-incident-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.security-incident-title {
  font-size: 14px;
  line-height: 1.3;
}
.security-incident-summary {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.security-incident-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.security-incident-badge-severity {
  background: color-mix(in srgb, var(--danger-bg) 45%, var(--surface));
}
.security-incident-severity-warning .security-incident-badge-severity {
  background: color-mix(in srgb, #fef3c7 70%, var(--surface));
  color: #92400e;
}
.security-incident-severity-critical .security-incident-badge-severity {
  background: color-mix(in srgb, var(--danger-bg) 88%, var(--surface));
  color: var(--danger);
}
.security-incident-severity-info .security-incident-badge-severity {
  background: color-mix(in srgb, var(--tag-bg) 88%, var(--surface));
  color: var(--accent);
}
.security-incident-badge-status {
  background: color-mix(in srgb, var(--surface-alt) 82%, var(--surface));
  color: var(--muted);
}
.security-incident-times {
  display: grid;
  grid-template-columns: max-content;
  gap: 8px;
  min-width: 170px;
  text-align: left;
}
.security-incident-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.security-incident-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.security-incident-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.security-incident-value {
  font-size: 12px;
  overflow-wrap: anywhere;
}
.security-incident-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.security-incident-flag {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ok-bg) 85%, var(--surface));
  color: var(--ok);
  font-size: 11px;
  font-weight: 600;
}
.entity-section-header {
  padding: 6px 12px 4px;

.topbar-nav button.active .app-nav-icon {
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  color: var(--accent-hover);
}

.topbar-nav button:hover .app-nav-icon {
  color: var(--accent-hover);
}
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  user-select: none;
}
.entity-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.role-list-row {
  align-items: flex-start;
  flex-wrap: wrap;
}
.role-list-row > :first-child {
  flex: 1 1 220px;
  min-width: 0;
}
.role-list-row .er-sub {
  overflow-wrap: anywhere;
}
.role-chip-list {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
  padding-top: 2px;
}
.role-chip-list .tag {
  overflow-wrap: anywhere;
}
@media (max-width: 1080px) {
  .security-incident-head {
    flex-direction: column;
  }

  .security-incident-times {
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, max-content));
  }

  .security-incident-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .security-incident-card {
    padding: 12px;
  }

  .security-incident-meta-grid,
.device-screen-preview-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface) 92%, var(--accent) 8%);
}
.device-screen-preview-image {
  display: block;
  width: 100%;
  max-height: 240px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 86%, black 14%);
  border: 1px solid color-mix(in srgb, var(--border) 85%, black 15%);
}
.device-screen-preview-empty {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}
.device-screen-preview-meta {
  font-size: 11px;
  color: var(--muted);
}
  .security-incident-times {
    grid-template-columns: 1fr;
  }
}
.row-menu {
  position: relative;
}
.row-menu summary {
  list-style: none;
  cursor: pointer;
}
.row-menu summary::-webkit-details-marker { display: none; }
.row-menu[open] .row-menu-popover {
  display: flex;
}
.row-menu-popover {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  flex-direction: column;
  gap: 4px;
  min-width: 150px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 12%, transparent);
  z-index: 20;
}
.package-action-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
}
.package-action-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.package-action-meta {
  font-size: 11px;
  color: var(--muted);
}
.package-action-meta.building {
  color: var(--accent);
  font-weight: 600;
}
.package-action-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.enrollment-script-copy-icon {
  width: 34px;
  min-width: 34px;
  padding: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236d7a86' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><rect x='6' y='2.5' width='7.5' height='10' rx='1.5'/><path d='M4.5 5H3.5A1.5 1.5 0 0 0 2 6.5v6A1.5 1.5 0 0 0 3.5 14h5A1.5 1.5 0 0 0 10 12.5V12'/></svg>");
}
.enrollment-script-panel {
  padding: 6px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  border-top: none;
}
.agent-profile-script-panel.enrollment-script-panel {
  padding: 12px;
  border-top: 1px solid var(--border);
  border-radius: 14px;
}
.enrollment-script-options {
  display: grid;
  gap: 6px;
  padding: 4px 0 8px;
}
.enrollment-script-toggle {
  justify-self: start;
}
.enrollment-script-arch {
  display: grid;
  gap: 4px;
  max-width: 180px;
  font-size: 12px;
  color: var(--muted);
}
.enrollment-script-arch select {
  min-height: 34px;
}
.enrollment-script-note {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}
.enrollment-script-pre {
  margin: 4px 0 0;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 11px;
  line-height: 1.5;
  white-space: pre;
  overflow-x: auto;
  max-height: 260px;
  overflow-y: auto;
}

/* ── Settings shell ─────────────────────────────────────── */
.settings-shell {
  display: grid;
  grid-template-columns: 200px 1fr;
  height: 100%;
  overflow: hidden;
}
.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 12px;
  border-right: 1px solid var(--border);
  background: var(--surface-alt);
  overflow-y: auto;
}
.settings-nav-intro {
  padding: 4px 8px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}
.settings-nav-intro p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.settings-nav-kicker {
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.settings-nav-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.settings-nav-section-title {
  padding: 8px 10px 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.settings-nav-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: none;
  border-left: 3px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  text-align: left;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.settings-nav-item:hover {
  background: var(--surface-hover);
  color: var(--ink);
}
.settings-nav-item.active {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 18%, transparent) 0%, color-mix(in srgb, var(--accent) 6%, transparent) 100%);
  border-left-color: var(--row-selected-border);
  color: var(--accent);
  font-weight: 600;
}
.settings-content {
  position: relative;
  overflow: hidden;
  background: var(--surface);
}
.settings-panel {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.settings-panel[hidden] {
  display: none;
}
.settings-placeholder {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  text-align: center;
  padding: 24px;
}
.settings-placeholder h2 {
  font-size: 16px;
  color: var(--ink);
}
.metadata-form-pane {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.metadata-list-pane {
  padding: 0;
}
.metadata-stack {
  display: grid;
  grid-template-rows: 1fr 1fr;
  height: 100%;
}
.metadata-stack > section {
  min-height: 0;
  overflow-y: auto;
  padding: 14px;
  border-bottom: 1px solid var(--border);
}
.metadata-stack > section:last-child {
  border-bottom: none;
}
.form-check-group {
  display: grid;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}
.form-check-group label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.form-check-group input {
  width: auto;
  accent-color: var(--accent);
}
.form-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.compact-head {
  padding: 0 0 8px;
  min-height: 0;
}
.empty-hint {
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--muted);
  font-size: 12px;
}
.token-metadata-section {
  display: grid;
  gap: 8px;
}
.token-helper-text {
  font-size: 12px;
  color: var(--muted);
  margin: -4px 0 0;
}
.token-summary-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-alt) 92%, var(--accent) 8%);
}
.token-summary-card[hidden] {
  display: none;
}
.token-summary-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}
@media (max-width: 1024px) {
  .agent-profiles-shell {
    grid-template-columns: 1fr;
  }

  .agent-profile-deployment-pane {
    border-left: none;
    border-top: 1px solid var(--border);
  }

  .agent-profile-deployment-summary-grid {
    grid-template-columns: 1fr;
  }
}
.token-summary-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.token-summary-name {
  font-size: 16px;
  font-weight: 700;
}
.token-summary-mono {
  font-family: var(--font-mono);
}
.token-list-hint {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
  background: color-mix(in srgb, var(--surface) 88%, var(--accent) 12%);
}
.token-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.token-status-badge.active {
  background: color-mix(in srgb, var(--status-online) 20%, transparent);
  color: var(--status-online);
}
.token-status-badge.warning {
  background: color-mix(in srgb, #d97706 18%, transparent);
  color: #d97706;
}
.token-status-badge.danger {
  background: color-mix(in srgb, var(--danger) 18%, transparent);
  color: var(--danger);
}
.token-status-badge.muted {
  background: color-mix(in srgb, var(--muted) 18%, transparent);
  color: var(--muted);
}
.token-secret-panel {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 84%, var(--accent) 16%) 0%, var(--surface-alt) 100%);
}
.token-secret-panel[hidden] {
  display: none;
}
.token-secret-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}
.token-secret-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.token-secret-subtitle {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.token-secret-value-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.token-secret-value {
  display: block;
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 72%, var(--accent) 8%);
  font-family: var(--font-mono);
  font-size: 12px;
  overflow-wrap: anywhere;
}
@media (max-width: 720px) {
  .token-secret-head,
  .token-secret-value-row {
    flex-direction: column;
    align-items: stretch;
  }
}
.metadata-editor-grid {
  display: grid;
  gap: 10px;
}
.metadata-field-card {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-alt);
}
.metadata-field-card label {
  font-size: 12px;
  font-weight: 600;
}
.metadata-field-meta {
  font-size: 11px;
  color: var(--muted);
}
.scope-rule-list {
  display: grid;
  gap: 8px;
}
.scope-rule-row {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(200px, 1fr) auto;
  gap: 8px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-alt);
}
.scope-rule-row > div {
  min-width: 0;
}
.scope-rule-row .btn {
  align-self: center;
}
.scope-rule-row input,
.scope-rule-row select,
.scope-rule-row textarea {
  margin: 0;
}

.role-editor-hint {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--muted);
}

.priv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.priv-table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}

.priv-group-head td {
  padding: 8px 8px 3px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  background: var(--surface);
}

.priv-row {
  cursor: pointer;
}

.priv-row:hover {
  background: var(--surface-alt);
}

.priv-row td {
  padding: 5px 8px;
  vertical-align: middle;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}

.priv-check-cell {
  width: 28px;
  text-align: center;
}

.priv-name-cell {
  white-space: nowrap;
}

.priv-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}

.priv-scope-cell {
  white-space: nowrap;
}

.priv-desc-cell {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
  width: 100%;
}

.privilege-scope-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.privilege-scope-badge.global {
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  color: var(--danger);
}

.privilege-scope-badge.scoped {
  background: color-mix(in srgb, var(--status-online) 16%, transparent);
  color: var(--status-online);
}

.privilege-scope-badge.mixed {
  background: color-mix(in srgb, #d97706 16%, transparent);
  color: #d97706;
}

/* ── Audit ────────────────────────────────────────────────── */
.audit-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.audit-filter-bar {
  flex-shrink: 0;
}
.audit-table-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--surface);
}
.audit-filters {
  display: flex;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-wrap: wrap;
  align-items: flex-end;
}
.audit-filters .form-group { flex: 1; min-width: 100px; }
.audit-filters .audit-page-size { flex: 0 0 100px; }
.audit-filters input { min-height: 34px; }
.audit-feedback { padding: 8px 16px; color: var(--muted); border-bottom: 1px solid var(--border-soft); }
.audit-feedback.error { color: var(--danger); background: var(--danger-bg); }
.audit-table { min-width: 1180px; table-layout: fixed; }
.audit-table tbody tr { cursor: default; }
.audit-table th:nth-child(1) { width: 165px; }
.audit-table th:nth-child(2) { width: 95px; }
.audit-table th:nth-child(3) { width: 220px; }
.audit-table th:nth-child(4), .audit-table th:nth-child(5) { width: 180px; }
.audit-table td { white-space: normal; overflow-wrap: anywhere; vertical-align: top; padding: 12px; }
.audit-table thead th { text-align: left; padding: 10px 12px; }
.audit-table .audit-event-pill { white-space: normal; border-radius: var(--radius-sm); }
.audit-filter-actions { display: flex; align-items: flex-end; gap: 6px; }
.audit-quick-filters {
  display: flex;
  flex: 1 0 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.audit-quick-filters .timeline-filter-chip {
  border-radius: 999px;
}
.audit-event-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
}
.audit-event-pill.remote-audio {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-alt));
}
.audit-event-pill.remote-audio-denied {
  border-color: color-mix(in srgb, #d97706 35%, var(--border));
  background: color-mix(in srgb, #d97706 10%, var(--surface-alt));
}
.audit-row-remote-audio td {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.audit-load-more {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
}

/* ── Reports ─────────────────────────────────────────────── */
.reports-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.reports-filter-bar {
  flex-shrink: 0;
}
.reports-top-bar {
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
}
.reports-primary-row {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.reports-primary-row .form-group { flex: 1; min-width: 100px; }
.reports-filter-actions { display: flex; align-items: flex-end; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.rpt-view-toggle { flex: 0 0 auto !important; }
.btn-group { display: flex; }
.btn-group .btn { border-radius: 0; border-right-width: 0; }
.btn-group .btn:first-child { border-radius: 3px 0 0 3px; }
.btn-group .btn:last-child  { border-radius: 0 3px 3px 0; border-right-width: 1px; }
.btn-group .btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.reports-expanded-filters {
  padding: 8px 12px 10px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.reports-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
}
.reports-filter-row .form-group { flex: 1; min-width: 120px; }
.field-hint  { font-size: 10px; color: var(--muted); display: block; }
.checkbox-group { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0; }
.checkbox-group label { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: normal; cursor: pointer; }
/* metadata filter row */
.rpt-meta-filter { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rpt-meta-filter label { font-size: 11px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.rpt-meta-filter select, .rpt-meta-filter input { font-size: 12px; padding: 3px 5px; }
/* filters */
.reports-filters {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
  flex-wrap: wrap;
  align-items: flex-end;
}
.reports-filters .form-group { flex: 1; min-width: 110px; }
.report-summary-bar {
  display: flex;
  gap: 20px;
  padding: 6px 14px;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.report-summary-item { color: var(--muted); }
.report-summary-item strong { color: var(--text); font-size: 15px; margin-right: 4px; }
.reports-result-wrap {
  flex: 1;
  overflow-y: auto;
  position: relative;
}
.rpt-chart-wrap {
  flex-shrink: 0;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  height: 280px;
  position: relative;
}
.reports-table th.num,
.reports-table td.num { text-align: right; }
.spinner {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 72%, transparent), color-mix(in srgb, var(--surface-alt) 92%, transparent));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--muted);
  pointer-events: none;
  isolation: isolate;
}
.spinner::before {
  content: "";
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-top-color: color-mix(in srgb, var(--accent) 92%, transparent);
  border-right-color: color-mix(in srgb, var(--accent) 62%, transparent);
  box-shadow:
    0 0 0 12px color-mix(in srgb, var(--accent) 8%, transparent),
    0 0 42px color-mix(in srgb, var(--accent) 28%, transparent);
  animation: spinnerOrbit 0.95s linear infinite;
}
.spinner::after {
  content: "Loading...";
  position: absolute;
  top: calc(50% + 54px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  box-shadow: var(--shadow-sm);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 80%, var(--accent) 20%);
  animation: spinnerLabelPulse 1.2s ease-in-out infinite;
}


@keyframes statusSweep {
  0% {
    transform: translateX(-145%) skewX(-22deg);
  }
  100% {
    transform: translateX(320%) skewX(-22deg);
  }
}

@keyframes statusPulse {
  0% {
    opacity: 0.9;
    transform: scale(0.72);
  }
  70% {
    opacity: 0;
    transform: scale(1.48);
  }
  100% {
    opacity: 0;
    transform: scale(1.48);
  }
}

@keyframes spinnerOrbit {
  0% {
    transform: rotate(0deg) scale(0.96);
  }
  50% {
    transform: rotate(180deg) scale(1);
  }
  100% {
    transform: rotate(360deg) scale(0.96);
  }
}

@keyframes spinnerLabelPulse {
  0%,
  100% {
    opacity: 0.72;
    letter-spacing: 0.16em;
  }
  50% {
    opacity: 1;
    letter-spacing: 0.22em;
  }
}


/* ── Privileges grid ─────────────────────────────────────── */
.privileges-grid { display: flex; flex-wrap: wrap; gap: 4px; }
.privileges-grid label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  font-size: 11px;
  cursor: pointer;
  background: var(--surface);
}
.privileges-grid label:hover { background: var(--surface-hover); }
fieldset { border: 1px solid var(--border); padding: 8px 10px; margin: 0; }
legend { font-size: 11px; font-weight: 700; padding: 0 4px; color: var(--muted); }

/* ── Responsive ──────────────────────────────────────────── */
/* Keep names visible when there is room for the full navigation rail. */
@media (min-width: 1200px) {
  :root { --rail-w: 184px; }
  .app-rail { align-items: stretch; padding: 12px 10px; background: var(--surface); }
  .app-rail-brand { justify-content: flex-start; gap: 10px; padding: 8px 4px 18px; }
  .app-rail-brand-copy { display: block; }
  .app-rail-section-label { display: block; padding: 12px 10px 4px; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
  .topbar-nav { align-items: stretch; }
  .topbar-nav button { width: 100%; justify-content: flex-start; gap: 10px; padding: 10px; border-radius: var(--radius); text-align: left; }
  .app-nav-copy { display: block; }
  .app-nav-meta { display: none; }
  .app-rail-footer { flex-direction: row; justify-content: space-between; }
  .nav-hover-tooltip { display: none; }
}

@media (min-width: 901px) and (max-width: 1500px) {
  #topbar { grid-template-columns: minmax(0, 1fr) auto; }
  .topbar-summary-bar { display: none; }
}

@media (max-width: 900px) {
  .mobile-burger-btn { display: inline-flex; }
  .topbar-summary-bar { display: none; }
  .app-shell-frame {
    grid-template-columns: 1fr;
  }

  .app-rail {
    position: fixed;
    visibility: hidden;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(320px, 88vw);
    align-items: stretch;
    transform: translateX(-100%);
    transition: transform 160ms ease;
    z-index: 40;
    box-shadow: 10px 0 28px rgba(0, 0, 0, 0.18);
  }

  .app-rail-brand {
    justify-content: flex-start;
    gap: 10px;
    padding: 8px 10px 10px;
  }

  .app-rail-brand-copy {
    display: block;
  }

  .app-rail-section-label {
    display: block;
    padding: 0 10px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .topbar-nav {
    width: auto;
    padding: 0 6px 6px;
    align-items: stretch;
  }

  .topbar-nav button {
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 7px 9px;
    text-align: left;
  }

  .topbar-nav button.active {
    box-shadow: inset 2px 0 0 var(--accent), var(--shadow-sm);
  }

  .app-nav-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  .nav-hover-tooltip {
    display: none;
  }

  .app-rail.mobile-open {
    visibility: visible;
    transform: translateX(0);
  }

  .app-main-shell {
    min-width: 0;
  }

  #topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: auto;
    padding: 10px 12px 8px;
  }

  .app-page-title {
    font-size: 17px;
  }

  .summary-bar {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  #pages {
    padding: 0;
  }

  #pages > .page {
    inset: 0;
  }

  .three-pane > .pane-detail { display: none; }
  .detail-resize-handle { display: none; }
  .three-pane[data-detail-open] .pane-detail {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(520px, 96vw);
    z-index: 20;
    border-left: 1px solid var(--border);
    box-shadow: -4px 0 24px rgba(0,0,0,0.18);
  }
}
@media (max-width: 600px) {
  .mobile-burger-btn { display: inline-flex; }

  .app-rail {
    width: min(300px, 92vw);
    padding-top: 0px;
  }

  .app-rail-brand {
    padding-top: 6px;
  }

  .brand-logo {
    width: 30px;
    height: 30px;
  }

  #topbar {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 8px;
    padding: 10px 10px 8px;
  }

  .app-header-left {
    gap: 10px;
  }

  .app-page-title {
    font-size: 16px;
  }

  .app-page-subtitle {
    font-size: 10px;
    line-height: 1.3;
  }

  .topbar-right {
    justify-content: flex-start;
    gap: 6px;
  }

  .summary-bar {
    grid-column: auto;
  }

  .service-status {
    min-width: 0;
    max-width: 100%;
  }

  /* Filter button shown */
  .mobile-filter-btn { display: inline-flex; }

  /* Filter sidebar: hidden as left sidebar, shown as fixed overlay when .mobile-open */
  :root { --sidebar-w: 0px; }
  .sidebar-resize-handle { display: none; }
  .pane-filters {
    display: none;
    flex: none !important;
    width: min(260px, 86vw) !important;
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    bottom: 0;
    z-index: 25;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2);
  }
  .pane-filters.mobile-open { display: flex; }

  /* Visual timeline hidden on mobile */
  .device-visual-timeline-dock,
  .device-visual-timeline-resize { display: none !important; }

  /* Detail overlay: full-width on phones */
  .three-pane[data-detail-open] .pane-detail { width: 96vw; }

  /* Sessions detail overlay on mobile */
  .sessions-shell:not([data-detail-open]) .sessions-detail-pane { display: none; }
  .sessions-shell[data-detail-open] .sessions-detail-pane {
    display: flex;
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 20;
    border-left: none;
    box-shadow: -4px 0 24px rgba(0,0,0,0.18);
  }

  /* Audit responsive */
  .audit-filters { flex-direction: row; }
  .audit-filters .form-group:not(.audit-page-size) { flex: 1 0 calc(50% - 8px); }
  .audit-quick-filters { width: 100%; }

  /* Settings / forms */
  .two-col-page { grid-template-columns: 1fr; height: auto; overflow: visible; }
  .two-col-page > * { overflow: visible; }
  .form-pane { border-right: none; border-bottom: 1px solid var(--border); overflow: visible; }
  .list-pane { overflow: visible; }

  /* Settings shell: switch to flex-column so the content area can fill remaining height */
  .settings-shell { display: flex; flex-direction: column; grid-template-columns: unset; }

  /* Settings nav becomes a grouped horizontal strip */
  .settings-nav {
    flex-direction: row;
    gap: 12px;
    padding: 10px 12px;
    flex-shrink: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-right: none;
    border-bottom: 1px solid var(--border);
    background: var(--surface-alt);
  }
  .settings-nav .pane-head { display: none; }
  .settings-nav-intro {
    display: none;
  }
  .settings-nav-section {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
  .settings-nav-section-title {
    display: none;
  }
  .settings-nav-item {
    flex-shrink: 0;
    white-space: nowrap;
    border-left: none;
    border-bottom: 2px solid transparent;
    min-height: unset;
    height: var(--row-h);
    padding: 0 12px;
    font-size: 12px;
    border-radius: 999px;
  }
  .settings-nav-item.active {
    border-left-color: transparent;
    border-bottom-color: var(--row-selected-border);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
  }

  /* Settings content: fill remaining space and scroll as a whole */
  .settings-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    position: static;
  }
  .settings-panel {
    position: static;
    height: auto;
    overflow: visible;
  }

  /* settings-two-col panels: single column, no fixed heights */
  .settings-two-col { grid-template-columns: 1fr; height: auto; overflow: visible; }
  .agent-profiles-shell {
    grid-template-columns: 1fr;
  }
  .agent-profiles-shell .list-pane,
  .agent-profiles-shell .form-pane,
  .agent-profiles-shell .agent-profile-deployment-pane {
    order: 0;
  }

  .metadata-stack { grid-template-rows: auto auto; }
  .scope-rule-row { grid-template-columns: 1fr; }
  .settings-grid-2 { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .service-status::after,
  .service-status-dot::after,
  .spinner::before,
  .spinner::after {
    animation: none !important;
  }
}

/* ── Mobile back button ─────────────────────────────────── */
.mobile-back-btn { display: none; }
@media (max-width: 600px) {
  .mobile-back-btn { display: inline-flex; }
}
.views-section-head .filter-add-view-btn {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  padding: 0 2px;
  line-height: 1;
  display: flex;
  align-items: center;
}
.views-section-head .filter-add-view-btn:hover { color: var(--accent-hover); }
.filter-empty-hint {
  padding: 4px 14px;
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}
.favorites-drop-zone {
  border: 1px dashed var(--border);
  border-radius: 6px;
  margin: 2px 10px 4px;
  padding: 8px 10px;
}
.filter-item-favorite.drop-target,
.favorites-drop-zone.drop-target {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--ink);
}

/* ── Custom view filter items ────────────────────────────── */
.filter-item-custom { overflow: visible; }
.filter-caret {
  font-size: 10px;
  color: var(--muted);
  cursor: pointer;
  min-width: 12px;
  text-align: center;
  flex-shrink: 0;
}
.filter-caret.leaf { visibility: hidden; cursor: default; }
.filter-caret:not(.leaf):hover { color: var(--ink); }
.filter-item-custom .label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.filter-item-custom .count { margin-left: 0; }
.filter-action-btn {
  visibility: hidden;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 0 3px;
  font-size: 13px;
  letter-spacing: 1.5px;
  flex-shrink: 0;
  line-height: 1;
}
.filter-item-custom:hover .filter-action-btn,
.filter-item-custom.active .filter-action-btn { visibility: visible; }
.filter-item-custom:hover .count { display: none; }
.filter-action-btn:hover { color: var(--ink); }
.filter-item-view {
  cursor: grab;
  user-select: none;
}
.filter-item-view.dragging {
  opacity: 0.45;
  cursor: grabbing;
}
.filter-item-view.drop-target {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

/* ── Context action menu ─────────────────────────────────── */
.action-menu {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 20px rgba(0,0,0,0.18);
  min-width: 160px;
  padding: 4px 0;
  overflow: hidden;
}
.action-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 6px 14px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}
.action-menu button:not(:disabled):hover { background: var(--surface-hover); }
.action-menu button:disabled {
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.72;
}
.action-menu button.danger { color: var(--danger); }
.action-menu hr { border: none; border-top: 1px solid var(--border); margin: 4px 0; }
.action-menu-header { padding: 4px 14px 4px; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }

/* ── Checkbox column ─────────────────────────────────────── */
.select-cell { width: 34px; padding: 0 8px !important; text-align: center; cursor: default; }
.select-cell input[type="checkbox"] { cursor: pointer; width: 14px; height: 14px; accent-color: var(--accent); }
.data-table tbody tr.bulk-selected { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.data-table tbody tr.bulk-selected:hover { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.data-table tbody tr.dragging { opacity: 0.45; }

/* ── Bulk action bar ─────────────────────────────────────── */
.device-bulk-bar { display: flex; align-items: center; gap: 8px; padding: 5px 10px; background: color-mix(in srgb, var(--accent) 10%, var(--surface-alt)); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.device-bulk-count { font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.device-bulk-actions-shell { position: relative; margin-left: auto; }
.device-bulk-actions-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 35;
  min-width: 220px;
}
.device-bulk-clear { margin-left: auto; }
.device-bulk-actions-shell + .device-bulk-clear { margin-left: 0; }
.device-session-menu-shell {
  position: relative;
  flex: none;
}
.device-session-menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.device-session-menu-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
}
.device-session-menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  width: min(440px, calc(100vw - 40px));
  max-height: min(70vh, 640px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-alt) 90%, transparent), var(--surface));
  box-shadow: var(--shadow-lg);
}
.device-session-menu-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.device-session-menu-title {
  font-size: 13px;
  font-weight: 700;
}
.device-session-menu-subtitle {
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
}
.device-session-menu-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}
.device-session-menu-section-title,
.device-session-menu-section-row {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}
.device-session-menu-section-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.device-session-menu-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}
.device-session-menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
}
.device-session-menu-row.is-focused-device {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}
.device-session-menu-row-main {
  min-width: 0;
  flex: 1;
}
.device-session-menu-row-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.device-session-menu-row-title-wrap {
  min-width: 0;
  flex: 1;
}
.device-session-menu-row-title {
  font-size: 12px;
  font-weight: 600;
}
.device-session-menu-row-meta {
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.device-session-menu-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.device-session-menu-empty {
  font-size: 12px;
  color: var(--muted);
}
.device-session-support-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
}
.device-session-support-card.pending {
  border-color: color-mix(in srgb, #f0a500 40%, var(--border));
}
.device-session-support-card.ready {
  border-color: color-mix(in srgb, #2ecc71 40%, var(--border));
}
.device-session-support-title {
  font-size: 12px;
  font-weight: 700;
}
.device-session-support-copy,
.device-session-support-url {
  font-size: 11px;
  color: var(--muted);
}
.device-session-support-url {
  word-break: break-all;
}
.device-session-support-pin {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.device-session-support-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ── Bulk command modal ───────────────────────────────────── */
.bulk-command-modal-box { width: 760px; }

.device-live-panel-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.device-live-panel-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.device-live-panel-toolbar input[type="search"] {
  min-width: min(320px, 100%);
}

.device-live-table-wrap {
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  min-height: 180px;
}

.device-live-empty {
  padding: 26px 20px;
  color: var(--muted);
  text-align: center;
}

.device-live-action-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.device-live-script-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: 6px;
}

.device-live-secondary {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.device-live-cell-wrap {
  min-width: 220px;
}

.device-live-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  font-size: 11px;
  font-weight: 600;
}

#deviceDetailTaskManagerPanel .detail-section {
  min-width: 0;
}

#deviceDetailTaskManagerPanel .device-live-panel-actions {
  gap: 6px;
}

#deviceDetailTaskManagerPanel .device-live-panel-toolbar {
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 8px;
}

#deviceDetailTaskManagerPanel .device-live-panel-toolbar input[type="search"] {
  flex: 1 1 160px;
  min-width: 0;
}

#deviceDetailTaskManagerPanel #detailTaskManagerSummary {
  font-size: 11px;
  white-space: normal;
  overflow-wrap: anywhere;
}

#deviceDetailTaskManagerPanel .device-live-table-wrap {
  min-width: 0;
}

#deviceDetailTaskManagerPanel table.data-table {
  table-layout: fixed;
  font-size: 11px;
}

#deviceDetailTaskManagerPanel .data-table thead th {
  padding: 4px 6px;
  letter-spacing: 0.02em;
}

#deviceDetailTaskManagerPanel .data-table td {
  padding: 4px 6px;
  max-width: none;
  height: auto;
  max-height: none;
  white-space: normal;
  vertical-align: top;
}

#deviceDetailTaskManagerPanel .device-live-cell-wrap {
  min-width: 0;
  overflow-wrap: anywhere;
}

#deviceDetailTaskManagerPanel .device-live-secondary {
  font-size: 10px;
  overflow-wrap: anywhere;
}

#deviceDetailTaskManagerPanel .device-live-action-row {
  gap: 4px;
  justify-content: flex-start;
}

#deviceDetailTaskManagerPanel .device-live-action-row .btn {
  padding-inline: 8px;
}

.device-live-workspace-modal-box {
  width: min(1680px, calc(100vw - 24px));
  height: min(94vh, 1040px);
  min-width: 1080px;
  min-height: 560px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  resize: both;
}

.device-live-workspace-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  flex: 1 1 auto;
}

.device-live-workspace-head-copy {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}

.device-live-workspace-status {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.device-live-workspace-switches {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.device-live-workspace-switch {
  min-width: 116px;
}

.device-live-workspace-switch.is-active {
  background: color-mix(in srgb, var(--accent) 15%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
  color: var(--accent);
}

.device-live-workspace-body {
  overflow: hidden;
  min-height: 0;
}

.device-live-workspace-toolbar,
.device-live-workspace-bulk-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.device-live-workspace-note {
  font-size: 12px;
  color: var(--muted);
}

.device-live-workspace-toolbar select,
.device-live-workspace-bulk-bar select {
  min-width: min(360px, 100%);
}

.device-live-workspace-grid {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(640px, 1fr));
  gap: 12px;
  align-content: start;
}

.device-live-workspace-card {
  display: flex;
  flex-direction: column;
  min-height: 260px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-alt);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.device-live-workspace-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-alt) 88%, var(--accent) 12%);
}

.device-live-workspace-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.device-live-workspace-card-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  flex: 1 1 auto;
}

.device-live-workspace-card .device-live-panel-toolbar {
  gap: 8px;
}

.device-live-workspace-card .device-live-panel-toolbar input[type="search"] {
  min-width: min(280px, 100%);
  height: 30px;
  padding: 0 10px;
}

.device-live-workspace-card .inv-data-table {
  min-width: 820px;
}

.device-live-workspace-card .inv-data-table thead th {
  font-size: 11px;
}

.device-live-workspace-card .inv-data-table td {
  padding: 6px 10px;
  font-size: 11px;
}

.device-live-workspace-card .device-live-secondary {
  margin-top: 1px;
  font-size: 10px;
}

.device-live-workspace-card .btn.btn-sm {
  min-height: 28px;
  padding: 4px 9px;
}

.device-live-workspace-card .device-live-badge {
  padding: 2px 7px;
  font-size: 10px;
}

@media (max-width: 980px) {
  .device-live-workspace-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .device-live-workspace-modal-box {
    width: min(100vw, calc(100vw - 8px));
    height: min(100vh, calc(100vh - 8px));
    min-width: 0;
    min-height: 0;
    resize: none;
  }

  .device-live-workspace-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ── Command library runner modal ─────────────────────────── */
.command-library-runner-box .modal-body {
  overflow: hidden;
  padding: 0;
  flex: 1 1 auto;
  min-height: 0;
}

.inventory-page-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
}

.inventory-page-toolbar {
  gap: 10px;
}

.inventory-page-toolbar select {
  min-width: min(420px, 48vw);
}

.inventory-page-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.inventory-page-workbench {
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
}

.inventory-quick-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  font-size: 12px;
  margin-bottom: 10px;
}

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

.inventory-quick-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.inventory-quick-table th,
.inventory-quick-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.inventory-quick-table th {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.inventory-quick-link-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.data-table thead th.sorted { color: var(--accent); }
.sort-indicator { margin-left: 6px; font-size: 10px; color: var(--accent); }

/* ── Shared tab navigation ───────────────────────────────── */
/* topbar-nav is visually identical; it omits the container border because
   #topbar already provides one. Re-use .tab-nav/.tab-btn everywhere else. */
.tab-nav {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}
.tab-nav::-webkit-scrollbar { display: none; }

.tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 0 12px;
  height: 34px;
  cursor: pointer;
  white-space: nowrap;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}
.tab-btn:hover { color: var(--ink); background: var(--surface-hover); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

.tab-panel[hidden] { display: none; }
.tab-panel.active { display: block; }

#deviceDetailContent > .detail-body {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px 10px;
  overflow: hidden;
}

#deviceDetailContent > .detail-body > .feedback-msg {
  grid-column: 1 / -1;
  margin: 0;
}

#deviceDetailContent > .detail-body > .tab-panel {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  align-self: stretch;
  max-height: 100%;
  overflow-y: auto;
}

#deviceDetailTabs {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-bottom: none;
  margin: 0;
  overflow: visible;
  padding: 0;
  align-items: center;
}

#deviceDetailTabs .tab-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  position: relative;
  width: 38px;
  min-width: 38px;
  min-height: 38px;
  height: 38px;
  padding: 0;
  margin: 0;
  border: 1px solid transparent;
  border-bottom-color: transparent;
  /* border-radius: 8px; */
  background: transparent;
  white-space: nowrap;
  text-align: center;
  color: var(--muted);
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
}

#deviceDetailTabs .tab-btn:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--surface) 74%, transparent);
  border-color: color-mix(in srgb, var(--border) 56%, transparent);
}

#deviceDetailTabs .tab-btn.active {
  color: var(--ink);
  font-weight: 600;
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
  border-bottom-color: color-mix(in srgb, var(--accent) 24%, var(--border));
  background: color-mix(in srgb, var(--surface) 82%, var(--accent) 18%);
  box-shadow: inset 2px 0 0 var(--accent);
}

.device-detail-tab-icon {
  width: 18px;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--ink) 72%, var(--accent) 28%);
}

.device-detail-tab-label {
  display: none;
}

#deviceDetailTabs .tab-btn.active .device-detail-tab-icon {
  color: var(--accent);
}

#deviceDetailTabs .tab-btn:hover .device-detail-tab-icon {
  color: var(--accent);
}

@media (max-width: 900px) {
  #deviceDetailContent > .detail-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .device-detail-actions-shell {
    margin-left: auto;
  }

  #deviceDetailContent > .detail-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
  }

  #deviceDetailTabs {
    flex-direction: row;
    gap: 6px;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 0 6px;
    align-items: stretch;
  }

  #deviceDetailTabs .tab-btn {
    flex: 0 0 auto;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    height: 44px;
    border-radius: 999px;
  }
}

.device-inventory-panel.active {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.inventory-hero {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 84%, var(--accent) 16%), color-mix(in srgb, var(--surface-alt) 94%, var(--surface) 6%));
}

.inventory-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.inventory-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.inventory-summary-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  background: color-mix(in srgb, var(--surface) 88%, var(--surface-alt));
}

.inventory-summary-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.inventory-summary-value {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 700;
}

.inventory-summary-sub {
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
}

.inventory-hero-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.inventory-empty {
  padding: 12px 14px;
  border: 1px dashed var(--border-strong);
  background: color-mix(in srgb, var(--surface-alt) 92%, var(--surface));
  color: var(--muted);
}

.inventory-workbench {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  gap: 14px;
}

.inventory-hardware-grid {
  display: grid;
  gap: 10px;
}

.inventory-hardware-item {
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-alt) 94%, var(--surface));
}

.inventory-hardware-label {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
}

.inventory-hardware-value {
  font-size: 13px;
  font-weight: 600;
  word-break: break-word;
}

.inventory-hardware-empty,
.inventory-software-empty {
  padding: 16px;
  border: 1px dashed var(--border);
  background: color-mix(in srgb, var(--surface-alt) 92%, var(--surface));
  color: var(--muted);
}

.inventory-software-section {
  min-width: 0;
}

.inventory-toolbar,
.inventory-install-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 10px;
}

.inventory-install-strip {
  grid-template-columns: 180px minmax(0, 1fr) auto;
  margin-top: 10px;
}

.inventory-package-managers {
  margin-top: 10px;
}

.inventory-software-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: min(58vh, 700px);
  overflow-y: auto;
  padding-right: 4px;
}

.inventory-software-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--border);
  background: linear-gradient(160deg, color-mix(in srgb, var(--surface) 88%, var(--surface-alt) 12%), color-mix(in srgb, var(--surface-alt) 96%, var(--surface) 4%));
}

.inventory-software-main {
  min-width: 0;
}

.inventory-software-title-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
}

.inventory-software-title {
  font-size: 14px;
  font-weight: 700;
  min-width: 0;
}

.inventory-software-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.inventory-software-meta {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
  word-break: break-word;
}

.inventory-software-actions {
  display: flex;
  align-items: center;
}

@media (max-width: 1180px) {
  .inventory-workbench {
    grid-template-columns: 1fr;
  }

  .inventory-page-toolbar {
    flex-wrap: wrap;
  }
}

@media (max-width: 760px) {
  .inventory-hero {
    flex-direction: column;
  }

  .inventory-toolbar,
  .inventory-install-strip,
  .inventory-software-row {
    grid-template-columns: 1fr;
  }

  .inventory-software-actions {
    justify-content: flex-start;
  }

  .inventory-software-title-row {
    flex-direction: column;
  }
}

.detail-section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.host-session-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
}

.host-session-title {
  font-size: 12px;
  font-weight: 600;
}

.host-session-sub {
  font-size: 11px;
  color: var(--muted);
}

.device-timeline {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.device-timeline-shell {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.device-timeline-headline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-alt) 88%, var(--surface) 12%), color-mix(in srgb, var(--surface) 96%, transparent));
}

.device-timeline-headline-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

.device-timeline-headline-copy {
  margin-top: 4px;
  max-width: 64ch;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

.timeline-stat-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.timeline-stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 86%, var(--surface-alt) 14%);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.timeline-stat-chip.emphasis {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-alt));
  color: var(--ink);
}

.timeline-stat-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 62%, transparent);
  color: var(--ink);
  font-size: 9px;
  font-weight: 800;
}

.timeline-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-alt) 92%, var(--surface) 8%);
}

.timeline-mode-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  background: var(--surface-alt);
}

.timeline-mode-btn {
  border: none;
  background: transparent;
  color: var(--muted);
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.timeline-mode-btn.active {
  background: var(--accent);
  color: var(--accent-fg);
}

.timeline-low-signal-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}

.timeline-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.timeline-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--muted);
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
}

.timeline-filter-chip.active {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  color: var(--ink);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-alt));
}

.timeline-filter-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 20px;
  padding: 0 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 65%, transparent);
  font-size: 10px;
  font-weight: 700;
}

.timeline-filter-summary {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
}

.timeline-list-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.timeline-item {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
}

.timeline-rail {
  position: relative;
  display: flex;
  justify-content: center;
}

.timeline-rail::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: -10px;
  width: 2px;
  background: color-mix(in srgb, var(--border) 78%, var(--accent) 22%);
}

.timeline-dot {
  position: relative;
  z-index: 1;
  margin-top: 4px;
  min-width: 28px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-fg);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
}

.timeline-card {
  border: 1px solid var(--border);
  background: var(--surface-alt);
  padding: 10px 12px;
}

.timeline-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
  font-size: 11px;
  color: var(--muted);
}

.timeline-title {
  font-size: 13px;
  font-weight: 600;
}

.timeline-description {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

.timeline-detail-summary {
  font-size: 11px;
}

.timeline-detail-lines {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  color: var(--muted);
}

.timeline-item.quiet .timeline-card {
  border-left-width: 3px;
}

.timeline-item.status-online .timeline-card,
.timeline-lane-item.status-online,
.timeline-inspector-card.status-online {
  border-color: color-mix(in srgb, #1fa971 45%, var(--border));
}

.timeline-item.status-offline .timeline-card,
.timeline-lane-item.status-offline,
.timeline-inspector-card.status-offline {
  border-color: color-mix(in srgb, #d65353 55%, var(--border));
}

.timeline-item.health .timeline-card,
.timeline-lane-item.health,
.timeline-inspector-card.health {
  border-color: color-mix(in srgb, #2f87d6 50%, var(--border));
}

.timeline-item.presence .timeline-card,
.timeline-lane-item.presence,
.timeline-inspector-card.presence {
  border-color: color-mix(in srgb, #9b6ee8 45%, var(--border));
}

.timeline-item.remote-session .timeline-card,
.timeline-lane-item.remote-session,
.timeline-inspector-card.remote-session {
  border-color: color-mix(in srgb, #ea8a2f 50%, var(--border));
}

.timeline-item.command .timeline-card,
.timeline-lane-item.command,
.timeline-inspector-card.command,
.timeline-item.command-complete .timeline-card,
.timeline-lane-item.command-complete,
.timeline-inspector-card.command-complete {
  border-color: color-mix(in srgb, #6d7a86 45%, var(--border));
}

.timeline-item.status-health .timeline-card,
.timeline-lane-item.status-health,
.timeline-inspector-card.status-health {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}

.timeline-lane-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 12px;
  min-height: 0;
}

.timeline-lane-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-alt) 88%, var(--surface) 12%), color-mix(in srgb, var(--surface) 96%, transparent));
  padding: 12px;
}

.timeline-lane-head {
  display: grid;
  gap: 6px;
  align-items: end;
}

.timeline-lane-axis-label,
.timeline-lane-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.timeline-lane-label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.timeline-lane-scroller {
  overflow: auto;
  max-height: min(58vh, 760px);
  padding-right: 2px;
  border-top: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  padding-top: 10px;
}

.timeline-lane-grid {
  display: grid;
  gap: 6px;
  position: relative;
}

.timeline-axis-column,
.timeline-lane-column {
  position: relative;
}

.timeline-axis-tick {
  position: absolute;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 10px;
  color: var(--muted);
}

.timeline-axis-time {
  font-weight: 700;
}

.timeline-axis-date {
  opacity: 0.85;
}

.timeline-lane-column {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-alt) 88%, transparent), transparent);
  border-left: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: 12px;
}

.timeline-inspector {
  min-width: 0;
}

.timeline-inspector-card {
  padding: 12px;
}

.timeline-lane-item {
  padding: 4px 5px;
  gap: 4px;
}

.timeline-lane-item-icon {
  font-size: 9px;
}

.timeline-lane-item-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
}

@media (max-width: 1440px) {
  .timeline-lane-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.timeline-lane-column-bg {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--border) 18%, transparent) 1px, transparent 1px);
  background-size: 100% 48px;
  pointer-events: none;
}

.timeline-lane-item {
  position: absolute;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 80%, var(--surface-alt));
  color: var(--ink);
  padding: 4px 5px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  cursor: pointer;
}

.timeline-lane-item:hover,
.timeline-lane-item.active {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
}

.timeline-lane-item.compact {
  padding: 4px 5px;
}

.timeline-lane-item-icon {
  font-size: 9px;
  font-weight: 800;
  color: var(--muted);
}

.timeline-lane-item-label {
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timeline-inspector {
  border: 1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-alt) 90%, var(--surface) 10%), color-mix(in srgb, var(--surface) 96%, transparent));
  min-height: 0;
  padding: 12px;
  border-radius: 16px;
}

.timeline-inspector-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.timeline-inspector-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.timeline-inspector-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  font-size: 10px;
  font-weight: 800;
}

.timeline-inspector-category,
.timeline-inspector-time,
.timeline-inspector-duration,
.timeline-inspector-description,
.timeline-inspector-detail-list {
  font-size: 12px;
  color: var(--muted);
}

.timeline-inspector-title {
  font-size: 14px;
  font-weight: 700;
}

.timeline-inspector-detail-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.timeline-hover-tooltip {
  position: fixed;
  z-index: 250;
  pointer-events: none;
  max-width: 280px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 96%, black 4%);
  color: var(--ink);
  padding: 8px 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.24);
  font-size: 12px;
}

.timeline-hover-tooltip-title {
  font-weight: 700;
  margin-bottom: 4px;
}

.device-timeline-workspace-modal {
  width: calc(100vw - 16px);
  height: min(960px, calc(100dvh - 32px));
  max-width: calc(100vw - 16px);
  max-height: none;
  border-radius: 8px;
}

.device-timeline-workspace-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.device-timeline-workspace-title-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.device-timeline-workspace-subtitle {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.device-timeline-workspace-body {
  min-height: 0;
  overflow: hidden;
  padding: 10px 14px 14px;
}

.device-timeline-workspace-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
}

.device-timeline-workspace-content .tlv2-filters {
  flex: 0 0 auto;
  padding: 2px 0 10px;
  border-bottom: 1px solid var(--border-soft);
}

.device-timeline-workspace-content .tlv2-scroll {
  min-height: 0;
  padding: 4px 10px 20px 0;
}

.device-timeline-workspace-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.timeline-report-card {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 90%, var(--surface-alt) 10%);
}

.timeline-report-card-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.timeline-report-card-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.timeline-report-card-note {
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted);
}

.device-timeline-report-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-alt) 92%, var(--surface) 8%), color-mix(in srgb, var(--surface) 96%, transparent));
}

@media (max-width: 1100px) {
  .devices-page-layout {
    grid-template-rows: minmax(0, 1fr) minmax(300px, 38vh);
  }

  .timeline-lane-layout {
    grid-template-columns: 1fr;
  }

  .device-timeline-headline {
    flex-direction: column;
  }

  .timeline-stat-strip {
    justify-content: flex-start;
  }

  .device-timeline-workspace-summary {
    grid-template-columns: 1fr;
  }

  .device-timeline-workspace-modal {
    width: calc(100vw - 8px);
    height: calc(100dvh - 20px);
    max-width: calc(100vw - 8px);
  }
}

#deviceDetailContent.command-tab-active .detail-body {
  overflow: hidden;
}

.device-command-panel.active {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.device-command-history-section {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.device-command-history-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.device-command-terminal {
  flex: 0 0 min(42vh, 420px);
  min-height: 180px;
  display: flex;
  flex-direction: column;
  border: 1px solid #334155;
  background: #0b1017;
  color: #d7e0ea;
}

.device-command-terminal pre {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 12px/1.55 "Cascadia Mono", Consolas, monospace;
  color: inherit;
}

.command-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 240px));
  gap: 8px;
}

.device-command-composer-layout {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.device-command-composer .form-group,
.device-command-composer .command-body-group {
  margin: 0;
}

.command-library-selection-note {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-alt) 88%, var(--surface) 12%);
  font-size: 12px;
  color: var(--muted);
}

.command-library-prompts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 92%, transparent 8%);
}

.command-library-prompts-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.command-library-prompts-head .helper-text {
  margin: 0;
}

.command-library-prompt-list {
  display: grid;
  gap: 8px;
}

.command-library-runtime-prompt {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  background: color-mix(in srgb, var(--surface-alt) 90%, transparent 10%);
}

.command-library-runtime-prompt .form-group {
  margin: 0;
}

.device-command-history {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  padding-right: 2px;
}

.device-command-composer {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-alt) 94%, var(--surface) 6%);
  padding: 10px 12px;
  border-radius: 14px;
  box-shadow: 0 -6px 16px rgba(0,0,0,0.06);
}

.device-command-composer textarea {
  min-height: 96px;
  resize: vertical;
  width: 100%;
}

.device-command-composer textarea[readonly] {
  min-height: 82px;
}

.device-command-actions {
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.command-scope-note {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

.command-library-runner-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.command-library-runner-scope {
  font-size: 12px;
  color: var(--muted);
}

/* Two-pane split that fills the modal body */
.command-library-runner-layout {
  display: grid;
  grid-template-columns: minmax(260px, 18%) minmax(0, 1fr);
  height: 100%;
  overflow: hidden;
}

/* ── Left browser pane ─────────────────────────────────────── */
.command-library-browser-pane {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-alt) 70%, var(--surface) 30%);
}

.command-library-browser-toolbar {
  padding: 10px 12px 8px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}

.command-library-browser-toolbar input {
  width: 100%;
  min-width: 0;
}

.command-library-runner-breadcrumbs {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2px;
  padding: 6px 10px;
  min-height: 34px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
  background: color-mix(in srgb, var(--surface-alt) 60%, var(--surface) 40%);
}

.command-library-runner-breadcrumbs::-webkit-scrollbar { display: none; }

.command-library-runner-breadcrumbs button {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  padding: 2px 4px;
  font-size: 12px;
  white-space: nowrap;
  border-radius: var(--radius-sm);
}

.command-library-runner-breadcrumbs button:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.command-library-runner-breadcrumbs span {
  font-size: 12px;
  color: var(--muted);
  padding: 0 1px;
  white-space: nowrap;
}

.command-library-runner-list {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ── Folder rows ───────────────────────────────────────────── */
.command-library-folder-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--ink);
  padding: 10px 14px;
  cursor: pointer;
}

.command-library-folder-row:hover {
  background: var(--surface-hover);
}

.command-library-folder-row strong {
  font-size: 13px;
  font-weight: 600;
}

.command-library-folder-row span {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

/* ── Tool rows in list ─────────────────────────────────────── */
.command-library-tool-row {
  cursor: pointer;
  border-radius: 0;
  border-bottom: 1px solid var(--border);
  padding: 9px 14px;
}

.command-library-tool-row.selected {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  box-shadow: inset 3px 0 0 var(--accent);
}

.command-library-tool-row.selected .er-title {
  color: var(--accent);
}

/* ── Right detail pane ─────────────────────────────────────── */
.command-library-runner-detail {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 20px 24px;
  gap: 14px;
  min-width: 0;
  min-height: 0;
}

#commandLibraryRunnerContent:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(240px, 30%) minmax(0, 1fr);
  grid-template-areas:
    "header preview"
    "description preview"
    "compatibility preview"
    "privilege preview"
    "execution preview"
    "prompts prompts";
  gap: 12px 18px;
  align-items: start;
}

.command-library-detail-header { grid-area: header; }
.command-library-runner-description { grid-area: description; }
.command-library-compatibility-note { grid-area: compatibility; }
.command-library-privilege-field { grid-area: privilege; }
.command-library-execution-field { grid-area: execution; }
.command-library-preview-block { grid-area: preview; min-width: 0; }
.command-library-prompts { grid-area: prompts; }

.command-library-runner-empty,
.command-library-runner-empty-state {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 20px 16px;
  color: var(--muted);
  font-size: 13px;
  background: color-mix(in srgb, var(--surface-alt) 88%, transparent 12%);
}

/* ── Detail content sections ───────────────────────────────── */
.command-library-detail-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.command-library-detail-name {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  word-break: break-word;
}

.command-library-detail-tags {
  flex-wrap: wrap;
  gap: 5px;
}

.command-library-runner-description {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.command-library-selection-note {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-alt) 88%, var(--surface) 12%);
  font-size: 12px;
  color: var(--muted);
}

.command-library-compatibility-note.warning {
  border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
  background: color-mix(in srgb, var(--warning) 10%, var(--surface-alt));
  color: var(--ink);
}

.command-library-tool-warning-tag {
  background: color-mix(in srgb, var(--warning) 16%, var(--surface-alt));
  color: var(--ink);
  border-color: color-mix(in srgb, var(--warning) 40%, var(--border));
}

/* ── Preview code block ────────────────────────────────────── */
.command-library-preview-block {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.command-library-preview-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.command-library-preview-pre {
  margin: 0;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--surface-alt) 85%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre;
  overflow-x: auto;
  min-height: 420px;
  max-height: calc(100vh - 300px);
  overflow-y: auto;
  color: var(--ink);
  word-break: normal;
}

/* ── Prompts section ───────────────────────────────────────── */
.command-library-prompts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 92%, transparent 8%);
}

.command-library-prompts-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.command-library-prompts-head .helper-text {
  margin: 0;
}

.command-library-prompt-list {
  display: grid;
  gap: 8px;
}

.command-library-runtime-prompt {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  background: color-mix(in srgb, var(--surface-alt) 90%, transparent 10%);
}

.command-library-runtime-prompt .form-group {
  margin: 0;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 820px) {
  .command-library-runner-layout {
    grid-template-columns: 1fr;
    grid-template-rows: min(42vh, 320px) minmax(0, 1fr);
    height: auto;
  }

  .command-library-browser-pane {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .command-library-runner-box {
    height: min(92vh, 960px);
  }
}



/* ── Device chat tab ──────────────────────────────────────── */
.device-chat-panel.active {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
  overflow: hidden;
}

.device-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 6px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}

.device-chat-session-select {
  font-size: 12px;
  max-width: 180px;
}

.device-chat-note {
  margin: 10px 12px 0;
  font-size: 12px;
  color: var(--muted);
}

.device-chat-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.device-chat-form {
  flex-shrink: 0;
  padding: 8px 12px 10px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.device-chat-form textarea {
  min-height: 60px;
  resize: vertical;
}

.command-history-item {
  border: 1px solid var(--border);
  background: var(--surface-alt);
  padding: 8px 10px;
  border-radius: 12px;
}

.command-history-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.command-history-head > div:last-child {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.command-history-title {
  font-size: 11px;
  font-weight: 600;
}

.command-history-sub {
  font-size: 10px;
  color: var(--muted);
}

.command-history-device {
  font-weight: 600;
  color: var(--ink);
}

.command-history-script,
.command-output-block pre {
  margin: 6px 0 0;
  padding: 6px 8px;
  overflow: auto;
  white-space: pre-wrap;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 88%, var(--ink) 12%);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.35;
}

.command-output-block {
  margin-top: 6px;
}

.command-output-head,
.command-detail-section-head,
.command-detail-head-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.command-output-head {
  margin-top: 6px;
}

.command-output-block.error pre {
  border-color: color-mix(in srgb, var(--danger) 38%, var(--border));
  background: color-mix(in srgb, var(--danger-bg) 80%, var(--surface));
}

.command-output-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.device-column-menu {
  min-width: 260px;
  max-height: 420px;
  overflow-y: auto;
  padding: 6px 0;
}

.device-column-menu-head {
  padding: 6px 12px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.device-column-menu label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
}

.device-column-menu input {
  width: auto;
}

.device-column-menu label:hover {
  background: var(--surface-hover);
}

/* ── Modal overlay ───────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--bg) 42%, transparent);
  backdrop-filter: blur(3px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 52px color-mix(in srgb, var(--ink) 28%, transparent), inset 0 1px 0 color-mix(in srgb, #ffffff 24%, transparent);
  width: 580px;
  max-width: 95vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Canonical outer frame shared by the Command Library runner and editor. */
.modal-box.command-library-modal-box {
  width: calc(100vw - 8px);
  height: calc(100vh - 8px);
  max-width: none;
  max-height: none;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 84%, var(--accent) 16%), var(--surface-alt));
  flex-shrink: 0;
}
.modal-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--muted);
  padding: 0 4px;
  line-height: 1;
}
.modal-close:hover { color: var(--ink); }
.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.modal-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.script-library-layout {
  display: grid;
  grid-template-columns: minmax(260px, 18%) minmax(0, 1fr);
  gap: 14px;
  min-height: 0;
  height: 100%;
}

.script-library-list-pane,
.script-library-form-pane {
  min-height: 0;
  overflow-y: auto;
}

.script-library-form-pane #deviceScriptBody {
  min-height: 42vh;
  resize: vertical;
}

.script-library-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
}

.command-library-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.command-library-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.command-library-check-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-alt) 88%, transparent 12%);
}

.command-library-editor-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.command-library-editor-prompt-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.command-library-prompt-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  background: color-mix(in srgb, var(--surface-alt) 90%, transparent 10%);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.command-library-prompt-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.command-library-prompt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.command-library-prompt-card textarea {
  width: 100%;
}

.command-library-empty-state {
  padding: 14px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  color: var(--muted);
  font-size: 12px;
  background: color-mix(in srgb, var(--surface-alt) 86%, transparent 14%);
}

.script-operating-system-grid {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.script-operating-system-option {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-size: 12px;
}

.script-preview-meta {
  font-size: 12px;
}

.script-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
}

.script-chip-list .tag {
  white-space: nowrap;
}

/* ── Logic toggle ────────────────────────────────────────── */
.logic-toggle {
  display: flex;
  border: 1px solid var(--border);
  overflow: hidden;
}
.logic-btn {
  flex: 1;
  background: var(--surface);
  border: none;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
  color: var(--muted);
}
.logic-btn.active { background: var(--accent); color: var(--accent-fg); font-weight: 600; }
.logic-btn:not(.active):hover { background: var(--surface-hover); }

/* ── Condition rows ──────────────────────────────────────── */
.conditions-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.conditions-list { display: flex; flex-direction: column; gap: 6px; }
.condition-row { display: flex; align-items: center; gap: 6px; }
.condition-row .cond-field { flex: 2; min-width: 0; }
.condition-row .cond-op { flex: 1.5; min-width: 0; }
.condition-row .cond-value-wrap { flex: 2; min-width: 0; }
.condition-row .cond-value { width: 100%; min-width: 0; }
.condition-row .cond-no-value { display: block; min-width: 0; }
.condition-row .cond-remove { flex-shrink: 0; }
.cond-empty-hint { font-size: 12px; color: var(--muted); font-style: italic; margin: 0; }
.cond-token-hint { font-size: 11px; color: var(--muted); margin: 4px 0 0; }
.cond-token-hint code { font-size: 11px; background: var(--surface-2, var(--surface)); border: 1px solid var(--border); border-radius: 3px; padding: 0 3px; color: var(--ink); font-style: normal; }

/* ── Grants modal ────────────────────────────────────────── */
.grants-modal-box { width: 620px; }
.grants-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.grants-tab {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s;
  margin-bottom: -1px;
}
.grants-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.grants-tab:not(.active):hover { color: var(--ink); }

.grants-list { display: flex; flex-direction: column; gap: 6px; }
.grant-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--surface-alt, var(--surface));
  border: 1px solid var(--border);
}
.grant-row .grant-name { flex: 0 0 140px; font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grant-privs { display: flex; flex-wrap: wrap; gap: 4px 10px; flex: 1; }
.grant-priv-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.grant-priv-label input[type="checkbox"] { margin: 0; cursor: pointer; }
.grant-revoke { flex-shrink: 0; background: none; border: none; color: var(--muted); font-size: 16px; cursor: pointer; line-height: 1; padding: 2px 4px; }
.grant-revoke:hover { color: var(--danger); }
.grants-empty { font-size: 12px; color: var(--muted); font-style: italic; }

.grants-modal-foot { flex-direction: column; align-items: stretch; gap: 8px; }
.grants-add-row { display: flex; align-items: center; gap: 8px; }
.grants-add-row select { flex: 1; }
.grants-add-row .btn { flex-shrink: 0; }

/* ── Command detail modal ───────────────────────────────── */
.command-detail-modal-box { width: 740px; }

.command-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.command-detail-status {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid currentColor;
}
.command-detail-status.status-complete { color: #1fa971; }
.command-detail-status.status-failed   { color: #e05252; }
.command-detail-status.status-pending  { color: var(--muted); }

.command-detail-fact {
  font-size: 12px;
  color: var(--muted);
}
.command-detail-fact + .command-detail-fact::before {
  content: "|";
  margin-right: 6px;
  opacity: 0.5;
}

.command-detail-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.command-detail-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.command-detail-code {
  margin: 0;
  padding: 10px 12px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-all;
  overflow-y: auto;
  max-height: 260px;
  color: var(--ink);
}
.command-detail-output { color: var(--ink); }
.command-detail-error  { color: #e05252; }

/* ── Device removal modal ───────────────────────────────── */
.device-removal-modal-box { width: 640px; }
.device-removal-copy {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
}
.device-removal-choice-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.device-removal-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  text-align: left;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  background: var(--surface-alt, var(--surface));
  color: var(--ink);
  cursor: pointer;
}
.device-removal-choice:hover:not(:disabled) {
  background: var(--surface-hover);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
.device-removal-choice:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}
.device-removal-choice.danger {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
}
.device-removal-choice-title {
  font-size: 13px;
  font-weight: 700;
}
.device-removal-choice-copy {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}

.device-merge-modal-box { width: min(680px, calc(100vw - 32px)); }
.device-merge-modal-body {
  display: grid;
  gap: 12px;
}

.device-merge-field {
  display: grid;
  gap: 6px;
}

.device-merge-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.device-merge-suggestions {
  display: grid;
  gap: 8px;
  max-height: 260px;
  overflow: auto;
}

.device-merge-suggestion {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-alt, var(--surface));
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.device-merge-suggestion:hover:not(:disabled),
.device-merge-suggestion[data-selected="true"] {
  background: var(--surface-hover);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

.device-merge-suggestion-name {
  font-size: 13px;
  font-weight: 700;
}

.device-merge-suggestion-meta {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

.device-merge-status {
  margin: 0;
  min-height: 18px;
  font-size: 12px;
  color: var(--muted);
}

.device-merge-status.error {
  color: var(--danger);
}

/* ── Agent profile replacement modal ────────────────────── */
.agent-profile-replacement-modal-box { width: 680px; }
.agent-profile-replacement-copy {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.55;
}
.agent-profile-replacement-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.agent-profile-replacement-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  background: var(--surface-alt, var(--surface));
}
.agent-profile-replacement-option input[type="checkbox"] {
  margin-top: 2px;
  accent-color: var(--accent);
}
.agent-profile-replacement-option-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.agent-profile-replacement-option-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.agent-profile-replacement-option-copy {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}

.session-end-modal-box {
  width: 560px;
}

.session-end-modal-body {
  gap: 12px;
}

.session-end-modal-copy {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
}

.session-end-modal-validation {
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--danger) 48%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
  color: var(--danger);
  font-size: 12px;
  line-height: 1.45;
}

/* ── Inventory page two-pane layout ──────────────────────── */
.inv-page-shell {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.inv-primary-nav {
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  /* padding: 0 8px; */
}

.inv-primary-nav .tab-btn {
  height: 40px;
  font-size: 12px;
  font-weight: 500;
  padding: 0 18px;
}

.inv-primary-nav .tab-btn.active {
  font-weight: 700;
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

/* ── Shared scope / filter bar ────────────────────── */
.inv-scope-bar {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 16px;
  background: color-mix(in srgb, var(--surface) 88%, var(--surface-alt));
  border-bottom: 1px solid var(--border);
}

.inv-scope-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.inv-scope-group {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.inv-scope-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: nowrap;
  margin: 0;
  cursor: default;
}

.inv-scope-group select {
  font-size: 12px;
  padding: 3px 6px;
  min-width: 0;
}

.inv-scope-divider {
  width: 1px;
  height: 18px;
  background: var(--border);
  flex-shrink: 0;
}

.inv-scope-add-btn {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 11px;
  padding: 3px 8px;
}

/* Active metadata filter chips row */
.inv-scope-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding-top: 2px;
}

.inv-scope-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  font-size: 11px;
  line-height: 1.4;
  max-width: 260px;
}

.inv-scope-filter-chip-label {
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}

.inv-scope-filter-chip-value {
  color: var(--accent);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
}

.inv-scope-filter-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 12px;
  line-height: 1;
}

.inv-scope-filter-chip-remove:hover {
  background: color-mix(in srgb, var(--danger, #d94f4f) 15%, transparent);
  color: var(--danger, #d94f4f);
}

.inv-scope-filter-chip-exclude {
  border-color: color-mix(in srgb, var(--danger, #d94f4f) 30%, var(--border));
  background: color-mix(in srgb, var(--danger, #d94f4f) 7%, var(--surface));
}

.inv-scope-filter-chip-exclude .inv-scope-filter-chip-label {
  color: color-mix(in srgb, var(--danger, #d94f4f) 60%, var(--muted));
}

.inv-scope-filter-chip-exclude .inv-scope-filter-chip-value {
  color: var(--danger, #d94f4f);
}

/* Metadata filter add form (inline picker) */
.inv-scope-filter-picker {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 4px 0;
}

.inv-scope-filter-picker select,
.inv-scope-filter-picker input {
  font-size: 12px;
  padding: 3px 6px;
}

.inv-queue-workspace {
  border-top: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  min-height: 0;
  flex: 1;
}

.inv-shell {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Left: device list pane */
.inv-list-pane {
  flex: 0 0 240px;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--border);
  background: var(--surface-alt);
}

.inv-software-list-pane {
  flex-basis: 360px;
  width: 360px;
  min-width: 260px;
}

.inv-list-toolbar {
  flex-shrink: 0;
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-alt) 60%, var(--surface));
}

.inv-list-toolbar input[type=search] {
  flex: 1;
  min-width: 0;
  font-size: 12px;
}

.inv-device-list-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-alt) 72%, var(--surface));
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.inv-device-list-header-os,
.inv-device-list-header-status {
  justify-self: end;
}

.inv-device-list {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.inv-list-load-more,
.inv-table-load-more {
  display: block;
  width: calc(100% - 24px);
  margin: 12px;
}

.inv-software-browser {
  gap: 0;
  padding: 0;
}

/* ── Device list items ─────────────────────────────────── */
.inv-device-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 12px 8px 13px;
  cursor: pointer;
  border-left: 3px solid transparent;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  transition: background 0.1s, border-color 0.1s;
  user-select: none;
}

.inv-device-item:last-child {
  border-bottom: none;
}

.inv-device-item:hover {
  background: color-mix(in srgb, var(--accent) 6%, var(--surface-alt));
}

.inv-device-item.selected {
  background: color-mix(in srgb, var(--accent) 11%, var(--surface-alt));
  border-left-color: var(--accent) !important;
}

/* Status-coloured left stripe (overridden to accent when selected) */
.inv-device-item-status-online { border-left-color: var(--status-online); }
.inv-device-item-status-busy   { border-left-color: #f59e0b; }

.inv-device-item-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
}

.inv-device-item-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.inv-device-item-col {
  justify-self: end;
}

.inv-device-item-name {
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  line-height: 1.3;
}

.inv-device-item-sub {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

/* Status pill badge */
.inv-device-status-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  white-space: nowrap;
  background: color-mix(in srgb, var(--muted) 13%, transparent);
  color: var(--muted);
}

.inv-device-status-badge.online {
  background: color-mix(in srgb, var(--status-online) 13%, transparent);
  color: var(--status-online);
}

.inv-device-status-badge.busy {
  background: color-mix(in srgb, #f59e0b 14%, transparent);
  color: #a66a00;
}

[data-theme="dark"] .inv-device-status-badge.busy { color: #fbbf24; }

.inv-device-item-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.inv-device-item-flags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

/* OS badge */
.inv-device-os-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 55%, var(--surface-alt));
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.inv-device-item-sw-match {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  border-radius: 3px;
  padding: 1px 5px;
  white-space: nowrap;
}

.inv-device-item-restart-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--danger) 11%, transparent);
  color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 24%, transparent);
  white-space: nowrap;
}

/* ── Software list items ───────────────────────────────── */
.inv-software-list-header {
  display: flex;
  justify-content: space-between;
  padding: 6px 12px 5px;
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--surface-alt) 65%, var(--surface));
  z-index: 1;
}

.inv-software-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  transition: background 0.1s;
  text-align: left;
  color: inherit;
}

.inv-software-item:last-child {
  border-bottom: none;
}

.inv-software-item:hover {
  background: color-mix(in srgb, var(--accent) 6%, var(--surface-alt));
}

.inv-software-item.selected {
  background: color-mix(in srgb, var(--accent) 11%, var(--surface-alt));
  box-shadow: inset 3px 0 0 var(--accent);
}

.inv-software-item-main {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.inv-software-item-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}

.inv-software-item.selected .inv-software-item-title {
  color: var(--accent);
}

.inv-software-item-sub {
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inv-software-item-version-row {
  font-size: 10px;
  color: color-mix(in srgb, var(--muted) 65%, transparent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1px;
}

/* Count badges column */
.inv-software-item-counts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
  min-width: 52px;
}

.inv-sw-count {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

.inv-sw-count-num {
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

.inv-sw-count.installed .inv-sw-count-num { color: var(--ok); }
.inv-sw-count.missing   .inv-sw-count-num { color: #c07a00; }
[data-theme="dark"] .inv-sw-count.missing .inv-sw-count-num { color: #fbbf24; }

.inv-sw-count-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.inv-software-device-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}



.inv-software-device-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-alt) 40%, var(--surface));
}

.inv-software-device-body {
  flex: 1 1 auto;
  min-width: 0;
}

.inv-software-device-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--muted);
}

.inv-software-device-select.disabled {
  opacity: 0.6;
}

.inv-software-device-select input {
  margin: 0;
}

.inv-software-device-state-pending {
  border-color: color-mix(in srgb, #d28b18 34%, var(--border));
}

.inv-software-device-state-failed {
  border-color: color-mix(in srgb, #b33b3b 34%, var(--border));
}

.inv-software-device-name {
  font-size: 13px;
  font-weight: 700;
}

.inv-software-device-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.inv-metadata-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}

.inv-metadata-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 2px 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  font-size: 10px;
}

.inv-metadata-chip-label {
  color: var(--muted);
  font-weight: 700;
}

.inv-metadata-chip-value {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1280px) {
  .inv-device-list-header {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .inv-device-list-header-os {
    display: none;
  }

  .inv-device-item-grid {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .inv-device-item-col-os {
    display: none;
  }
}

.inventory-deploy-modal-box {
  width: min(920px, calc(100vw - 32px));
}

/* Deploy modal scope/filter rows use inv-scope-bar-row + inv-scope-group */
.inventory-deploy-modal-scope,
.inventory-deploy-modal-filters {
  background: color-mix(in srgb, var(--surface-alt) 50%, var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
}

.inventory-deploy-modal-filters input[type=search] {
  flex: 1;
  min-width: 120px;
  font-size: 12px;
}

.inventory-deploy-modal-scope .inv-scope-label,
.inventory-deploy-modal-filters .inv-scope-label {
  font-size: 11px;
}

.inventory-deploy-modal-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.inventory-deploy-modal-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.inventory-deploy-modal-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-alt) 46%, var(--surface));
}

.inventory-deploy-modal-label {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.inventory-deploy-modal-value {
  font-size: 13px;
  font-weight: 600;
}

.inventory-deploy-list {
  max-height: min(52vh, 520px);
  overflow: auto;
  padding-right: 4px;
}

.inv-queue-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.inv-queue-row {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.1s;
}

.inv-queue-row:hover {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
}

.inv-queue-row-running {
  border-left: 3px solid var(--accent);
}

.inv-queue-row-pending {
  border-left: 3px solid color-mix(in srgb, var(--border) 60%, var(--muted));
}

.inv-queue-row-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.inv-queue-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.inv-queue-row-title {
  font-size: 14px;
  font-weight: 700;
}

.inv-queue-row-subtitle {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.inv-queue-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.inv-list-empty {
  padding: 16px 12px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

/* Right: detail pane */
.inv-detail-pane {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Scrollable content area */
.inv-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Empty state ──────────────────────────────────────────── */
.inv-empty {
  padding: 24px 20px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-alt);
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  line-height: 1.6;
}

/* ── Summary cards row ────────────────────────────────────── */
.inv-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.inv-summary-card {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-left: 3px solid color-mix(in srgb, var(--accent) 42%, var(--border));
}

.inv-summary-card-ok     { border-left-color: #2b8c4e; }
.inv-summary-card-warn   { border-left-color: #c8860a; }
.inv-summary-card-err    { border-left-color: #b84418; }

.inv-summary-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.inv-summary-value {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.inv-summary-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.4;
}

/* ── Workbench: Hardware+Updates side-by-side, Software full-width ── */
.inv-workbench {
  display: grid;
  grid-template-columns: minmax(240px, 300px) 1fr;
  gap: 20px;
  align-items: start;
}

.inv-section-hardware { grid-column: 1; }
.inv-section-updates  { grid-column: 2; }
.inv-section-software { grid-column: 1 / -1; }

@media (max-width: 920px) {
  .command-form-grid {
    grid-template-columns: 1fr;
  }

  .command-library-runner-layout {
    grid-template-columns: 1fr;
  }

  #commandLibraryRunnerContent:not([hidden]) {
    display: flex;
    flex-direction: column;
  }

  .command-library-preview-pre {
    min-height: 240px;
    max-height: 45vh;
  }

  .command-library-browser-pane {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding-right: 0;
    padding-bottom: 12px;
  }

  .command-quick-row {
    flex-direction: column;
    align-items: stretch;
  }

  .script-library-layout {
    grid-template-columns: 1fr;
  }

  .command-library-prompts-head {
    align-items: flex-start;
  }

  .inv-workbench {
    grid-template-columns: 1fr;
  }
  .inv-section-hardware,
  .inv-section-updates,
  .inv-section-software { grid-column: 1; }
}

/* Hardware section: 2-col grid for compact item layout */
.inv-hardware-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}

.inv-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.inv-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.inv-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
  flex: 1;
}

.inv-sw-count {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

/* ── Hardware grid ────────────────────────────────────────── */
.inv-hw-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.inv-hw-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 11%, var(--surface-alt));
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.inv-hw-label {
  font-size: 10px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.3;
  margin-bottom: 3px;
}

.inv-hw-value {
  font-size: 12px;
  font-weight: 600;
  word-break: break-word;
  line-height: 1.4;
  color: var(--ink);
}

.inv-hw-empty,
.inv-sw-empty {
  padding: 16px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--surface-alt);
  color: var(--muted);
  text-align: center;
  font-size: 12px;
}

/* ── Drive cards ──────────────────────────────────────────── */

.inv-drives-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}

.inv-drive-card {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.inv-drive-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.inv-drive-type {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.inv-drive-bar-wrap {
  height: 6px;
  background: var(--surface-alt);
  border-radius: 3px;
  overflow: hidden;
}

.inv-drive-bar {
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
  transition: width 0.3s;
}

.inv-drive-bar.inv-drive-bar-warning { background: var(--warn, #e6a817); }
.inv-drive-bar.inv-drive-bar-critical { background: var(--danger, #d94f4f); }

.inv-drive-stats {
  font-size: 11px;
  color: var(--muted);
}

/* ── Updates section ──────────────────────────────────────── */

/* Updates tab panel fills the remaining pane height */
.inv-tab-panel[data-inv-panel="updates"] {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.inv-tab-panel[data-inv-panel="updates"][hidden] {
  display: none;
}

.inv-updates-area {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 8px;
}

/* Update install progress banner */
.inv-update-progress-banner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 4px;
}

.inv-update-progress-active {
  background: color-mix(in srgb, #3b82f6 7%, var(--surface));
  border-color: color-mix(in srgb, #3b82f6 25%, var(--border));
  border-left-color: #2563eb;
}

.inv-update-progress-done {
  background: color-mix(in srgb, #22c55e 7%, var(--surface));
  border-color: color-mix(in srgb, #22c55e 25%, var(--border));
  border-left-color: #16a34a;
}

.inv-update-progress-failed {
  background: color-mix(in srgb, #ef4444 7%, var(--surface));
  border-color: color-mix(in srgb, #ef4444 25%, var(--border));
  border-left-color: #dc2626;
}

.inv-update-progress-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}

.inv-update-progress-output {
  font-size: 11px;
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--muted);
  white-space: pre-wrap;
  margin: 0;
  max-height: 180px;
  overflow-y: auto;
}

/* Update item checkbox */
.inv-update-check-label {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
  margin-top: 1px;
}

.inv-update-check {
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: var(--accent, #2563eb);
}

/* Action bar */
.inv-update-action-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--surface-alt, var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  flex-wrap: wrap;
}

.inv-update-action-count {
  font-size: 11px;
  color: var(--muted);
  flex: 1;
  min-width: 70px;
}

.inv-update-action-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.inv-update-noreboot-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}

/* Updates subtabs (small screens only) */
.inv-updates-subtabs {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
}

.inv-updates-subtab {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.inv-updates-subtab.active {
  background: var(--surface-alt, var(--surface));
  color: var(--ink);
  border-color: var(--accent, var(--border));
}

/* Available / Installed columns */
.inv-updates-col {
  display: none;
  flex-direction: column;
  gap: 8px;
  height: calc(100vh - 200px);
  overflow-y: auto;
  padding-right: 2px;
}

.inv-updates-col.active {
  display: flex;
}

.inv-updates-col-header {
  display: none;
}

/* Side-by-side layout on wider screens */
@media (min-width: 900px) {
  .inv-updates-subtabs {
    display: none;
  }

  .inv-updates-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
    flex: 1;
    min-height: 0;
  }

  .inv-updates-col {
    display: flex;
    height: auto;
    overflow-y: auto;
  }

  .inv-updates-col-header {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
  }
}

.inv-updates-empty {
  font-size: 12px;
  color: var(--muted);
  padding: 10px 0;
}

/* Update type filter chips */
.inv-updates-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.inv-updates-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
  white-space: nowrap;
}

.inv-updates-filter-chip:hover {
  background: var(--surface-hover);
  color: var(--ink);
}

.inv-updates-filter-chip.active {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  color: var(--accent);
  font-weight: 600;
}

.inv-updates-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  padding: 0 4px;
  height: 14px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface-alt) 80%, var(--border));
  color: var(--muted);
}

.inv-updates-filter-chip.active .inv-updates-filter-count {
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  color: var(--accent);
}

/* Status banner */
.inv-status-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  border-left-width: 3px;
}

.inv-status-banner-ok {
  background: color-mix(in srgb, #22c55e 7%, var(--surface));
  border-color: color-mix(in srgb, #22c55e 30%, var(--border));
  border-left-color: #2b8c4e;
}

.inv-status-banner-warn {
  background: color-mix(in srgb, #d4900a 7%, var(--surface));
  border-color: color-mix(in srgb, #d4900a 30%, var(--border));
  border-left-color: #c8860a;
}

.inv-status-banner-restart {
  background: color-mix(in srgb, #c04a1e 7%, var(--surface));
  border-color: color-mix(in srgb, #c04a1e 30%, var(--border));
  border-left-color: #b84418;
}

.inv-status-banner-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.inv-status-banner-sub {
  font-size: 11px;
  color: var(--muted);
  flex: 1;
}

/* Pending update list */
.inv-update-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.inv-update-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.inv-update-item-important {
  border-left-color: #c8860a;
}

.inv-update-item-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.inv-update-item-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
  flex: 1;
  min-width: 0;
}

.inv-update-item-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex-shrink: 0;
}

.inv-update-item-desc {
  font-size: 11px;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
}

.inv-update-item-footer {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 1px;
}

.inv-update-item-id {
  font-size: 10px;
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--muted);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  white-space: nowrap;
}

.inv-updates-ok-msg {
  font-size: 12px;
  color: var(--muted);
  padding: 4px 0;
}

/* Recently installed history */
.inv-update-history {
  margin-top: 4px;
}

.inv-update-history-header {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

.inv-update-history-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}

.inv-update-history-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.inv-update-history-item-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
}

.inv-update-history-item-footer {
  display: flex;
  align-items: center;
  gap: 8px;
}

.inv-update-history-item-date {
  font-size: 11px;
  color: var(--muted);
}

/* Keep tag variants used by update items */
.inv-update-tag-important {
  background: color-mix(in srgb, #d4900a 12%, transparent);
  color: #c8860a;
  border-color: color-mix(in srgb, #d4900a 28%, transparent);
}

.inv-update-tag-restart {
  background: color-mix(in srgb, #c04a1e 12%, transparent);
  color: #b84418;
  border-color: color-mix(in srgb, #c04a1e 28%, transparent);
}

/* History list — scroll is handled by the parent column */
.inv-update-history-list {
  display: flex;
  flex-direction: column;
}

/* ── Click-to-Run Office card ─────────────────────────────── */
.inv-c2r-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--surface-2, var(--surface));
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 4px;
}

.inv-c2r-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.inv-c2r-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}

.inv-c2r-meta {
  font-size: 11px;
  color: var(--muted);
}

.inv-c2r-target {
  font-size: 11px;
  color: var(--muted);
}

/* ── Inventory tab panels ─────────────────────────────────── */
.inv-tab-nav {
  flex-shrink: 0;
}

.inv-tab-panel[hidden] {
  display: none;
}

/* inv-detail-pane already provides flex column + overflow hidden */

/* Header bar */
.inv-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--surface-alt) 80%, var(--accent) 20%) 0%, var(--surface-alt) 50%);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.inv-table-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.inv-table-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.inv-table-status-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-alt) 80%, var(--border));
  border: 1px solid var(--border);
  color: var(--muted);
  white-space: nowrap;
}

.inv-table-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Two-column body: filter sidebar + table area */
.inv-table-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Filter sidebar */
.inv-table-filter-sidebar {
  width: 254px;
  min-width: 180px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border-right: 1px solid var(--border);
  background: var(--surface-alt);
}

.inv-table-filter-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
}

.inv-table-filter-section:last-child {
  border-bottom: none;
}

.inv-table-filter-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.inv-table-filter-section-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.inv-table-filter-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.inv-table-filter-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.inv-table-filter-inline-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.03em;
}

.inv-table-add-filter-btn {
  padding: 1px 8px;
  height: 20px;
  font-size: 10px;
  flex-shrink: 0;
}

/* Aggregate filter checkboxes */
.inv-table-checkbox-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 2px 0;
}

.inv-table-checkbox-option {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 11px;
  cursor: pointer;
  transition: border-color 0.1s, background 0.1s;
}

.inv-table-checkbox-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  color: var(--accent);
}

.inv-table-checkbox-option input {
  margin: 0;
  cursor: pointer;
  accent-color: var(--accent);
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.inv-table-checkbox-option-label {
  min-width: 0;
  line-height: 1.3;
}

.inv-table-checkbox-option-count {
  font-size: 10px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-alt) 80%, var(--border));
  border-radius: 999px;
  padding: 0 5px;
  min-width: 16px;
  text-align: center;
}

.inv-table-checkbox-empty {
  color: var(--muted);
  font-size: 11px;
  font-style: italic;
}

/* Active column-filter chips */
.inv-table-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* Table main area */
.inv-table-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 14px 18px;
  gap: 10px;
}

.inv-table-helper {
  font-size: 11px;
  color: var(--muted);
  margin: 0;
  flex-shrink: 0;
}

.inv-table-surface {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.inv-data-table-empty {
  padding: 32px 24px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  text-align: center;
  font-size: 13px;
}

.inv-data-table-wrap {
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  flex: 1;
  min-height: 0;
}

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

.inv-data-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: color-mix(in srgb, var(--surface-alt) 88%, var(--accent) 12%);
  border-bottom: 2px solid color-mix(in srgb, var(--border) 78%, var(--accent) 22%);
  padding: 0;
  text-align: left;
  white-space: nowrap;
}

.inv-data-table td {
  padding: 9px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
  font-size: 12px;
  vertical-align: middle;
}

.inv-data-table-col-name {
  width: 26%;
  min-width: 240px;
}

.inv-data-table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--surface-alt) 35%, var(--surface));
}

.inv-data-table tbody tr:hover td {
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}

.inv-data-table tbody tr.inv-data-table-row-selected td {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  box-shadow: inset 3px 0 0 var(--accent);
}

.inv-data-table-sort {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.1s, background 0.1s;
}

.inv-data-table-sort:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.inv-data-table-sort.active {
  color: var(--accent);
}

.inv-data-table-sort-indicator {
  font-size: 11px;
  color: color-mix(in srgb, var(--muted) 55%, transparent);
  transition: color 0.1s;
}

.inv-data-table-sort.active .inv-data-table-sort-indicator {
  color: var(--accent);
}

.inv-data-table-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.inv-data-table-link:hover {
  text-decoration: underline;
}

.inv-data-table-cell-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 160px;
  align-items: flex-start;
  text-align: left;
}

.inv-data-table-cell-sub {
  color: var(--muted);
  font-size: 11px;
}

.inv-data-table-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.inv-data-table-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-alt) 82%, var(--surface));
  border: 1px solid var(--border);
  font-size: 11px;
}

.inv-data-table-muted {
  color: var(--muted);
}

.inv-table-column-menu {
  min-width: 220px;
  max-width: 300px;
  max-height: 420px;
  overflow-y: auto;
}

.inv-table-column-menu-head {
  padding: 10px 14px 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  margin-bottom: 3px;
}

.inv-table-column-menu label {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  font-size: 12.5px;
  cursor: pointer;
  border-radius: 0;
  transition: background 0.1s;
  user-select: none;
}

.inv-table-column-menu label:hover {
  background: var(--surface-hover);
}

.inv-table-column-menu label:has(input:checked) {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--accent);
  font-weight: 500;
}

.inv-table-column-menu label input[type="checkbox"] {
  accent-color: var(--accent);
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  cursor: pointer;
}

.inv-table-column-menu hr {
  margin: 5px 0;
  border: 0;
  border-top: 1px solid var(--border);
}

.inv-table-column-menu button {
  width: 100%;
  padding: 8px 14px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}

.inv-table-column-menu button:hover {
  background: var(--surface-hover);
  color: var(--ink);
}

/* ── Restart badges ───────────────────────────────────────── */
.inv-restart-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: color-mix(in srgb, #c04a1e 14%, transparent);
  color: #b84418;
  border: 1px solid color-mix(in srgb, #c04a1e 30%, transparent);
}

.inv-device-item-restart-badge {
  display: inline-block;
  margin-top: 2px;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  background: color-mix(in srgb, #c04a1e 12%, transparent);
  color: #b84418;
  border: 1px solid color-mix(in srgb, #c04a1e 25%, transparent);
}

/* ── Software section internals ───────────────────────────── */
.inv-search-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  gap: 8px;
}

.inv-pkg-tags {
  min-height: 0;
}

.inv-install-strip {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-alt) 70%, var(--surface));
}

.inv-sw-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 2px;
}

/* ── Software row ─────────────────────────────────────────── */
.inv-sw-row {
  display: grid;
  grid-template-areas:
    "avatar name   tags"
    "avatar meta   actions";
  grid-template-columns: 34px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.12s, box-shadow 0.12s;
}

.inv-sw-row:hover {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
  box-shadow: var(--shadow);
}

.inv-sw-row-pending {
  border-color: color-mix(in srgb, #d28b18 38%, var(--border));
}

.inv-sw-row-failed {
  border-color: color-mix(in srgb, #b33b3b 42%, var(--border));
}

.inv-sw-row-uninstalled {
  border-color: color-mix(in srgb, #b33b3b 35%, var(--border));
  background: color-mix(in srgb, #b33b3b 5%, var(--surface));
}

.inv-sw-avatar {
  grid-area: avatar;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 11%, var(--surface-alt));
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  align-self: center;
  flex-shrink: 0;
}

.inv-sw-name {
  grid-area: name;
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  align-self: end;
}

.inv-sw-name-uninstalled {
  color: #a23131;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.inv-sw-tags {
  grid-area: tags;
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  justify-content: flex-end;
  align-self: end;
}

.inv-sw-meta {
  grid-area: meta;
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  align-self: start;
}

.inv-sw-meta-sep {
  opacity: 0.45;
  margin: 0 1px;
}

.inv-sw-meta-location {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
}

.inv-sw-actions {
  grid-area: actions;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  align-self: start;
}

.inv-sw-tag-pending {
  background: color-mix(in srgb, #d28b18 12%, var(--surface-alt));
  color: #8a5a08;
}

.inv-sw-tag-failed,
.inv-sw-tag-uninstalled {
  background: color-mix(in srgb, #b33b3b 12%, var(--surface-alt));
  color: #922d2d;
}

.inv-section-header-stack {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.inv-subnav {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
}

.inv-subnav-btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.inv-subnav-btn.active {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  color: var(--accent);
}

/* ── MSI Package library (collapsible) ────────────────── */
.inv-pkg-library {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: 12px;
}

.inv-pkg-library-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  cursor: pointer;
  user-select: none;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  list-style: none;
}

.inv-pkg-library-summary::-webkit-details-marker { display: none; }

.inv-pkg-library-summary::before {
  content: "▶";
  font-size: 8px;
  color: var(--muted);
  transition: transform 0.15s;
  flex-shrink: 0;
}

details[open] .inv-pkg-library-summary::before { transform: rotate(90deg); }

.inv-pkg-library-summary-label { flex: 1; }
.inv-pkg-library-badge { flex-shrink: 0; }

.inv-pkg-library-body {
  padding: 0 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--border);
}

.inv-pkg-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  padding-top: 10px;
}

.inv-pkg-upload-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.inv-pkg-status {
  font-size: 11px;
  color: var(--muted);
}

/* ── Software detail panel (right pane main area) ─────── */
.inv-sw-detail {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.inv-sw-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.inv-sw-detail-title-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.inv-sw-detail-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inv-sw-detail-publisher {
  font-size: 12px;
  color: var(--muted);
}

.inv-sw-detail-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.inv-sw-detail-coverage {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.inv-sw-coverage-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  min-width: 60px;
  gap: 1px;
}

.inv-sw-coverage-num {
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

.inv-sw-coverage-chip.installed .inv-sw-coverage-num { color: var(--ok); }
.inv-sw-coverage-chip.missing   .inv-sw-coverage-num { color: #c07a00; }
[data-theme="dark"] .inv-sw-coverage-chip.missing .inv-sw-coverage-num { color: #fbbf24; }

.inv-sw-coverage-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.inv-sw-detail-versions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

/* ── Deploy section ───────────────────────────────────── */
.inv-deploy-section-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  display: flex;
  flex-direction: column;
}

.inv-deploy-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-alt) 50%, var(--surface));
  border-radius: var(--radius) var(--radius) 0 0;
}

.inv-deploy-section-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.inv-deploy-section-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.inv-deploy-target-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.inv-deploy-view-select {
  flex: 1;
  min-width: 160px;
}

.inv-deploy-count-summary {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.inv-deploy-count-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  color: var(--accent);
  white-space: nowrap;
}

.inv-deploy-count-chip.missing {
  background: color-mix(in srgb, #c07a00 8%, var(--surface));
  border-color: color-mix(in srgb, #c07a00 22%, var(--border));
  color: #c07a00;
}

[data-theme="dark"] .inv-deploy-count-chip.missing { color: #fbbf24; }

.inv-deploy-offline-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}

.inv-deploy-offline-toggle input { margin: 0; }

.inv-deploy-no-pkg {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

/* ── Installed devices section ────────────────────────── */
.inv-installed-section-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.inv-installed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-alt) 50%, var(--surface));
  border-radius: var(--radius) var(--radius) 0 0;
}

.inv-installed-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.inv-installed-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.inv-installed-list {
  display: flex;
  flex-direction: column;
}

.inv-installed-device-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  transition: background 0.1s;
}

.inv-installed-device-row:last-child { border-bottom: none; }
.inv-installed-device-row:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }

.inv-installed-device-info {
  flex: 1 1 0;
  min-width: 0;
}

.inv-installed-device-name {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inv-installed-device-meta {
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inv-installed-device-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* ── Deploy modal ─────────────────────────────────────── */
.inv-deploy-modal {
  width: min(520px, calc(100vw - 32px));
}

.inv-deploy-modal-head-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.inv-deploy-modal-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.inv-deploy-modal-subtitle {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inv-deploy-modal-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.inv-deploy-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.inv-deploy-section-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.inv-deploy-pkg-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.inv-deploy-pkg-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.inv-deploy-pkg-file {
  font-size: 11px;
}

.inv-deploy-target-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.inv-deploy-target-meta {
  font-size: 12px;
  flex-shrink: 0;
}

.inv-deploy-status {
  font-size: 13px;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-alt) 60%, var(--surface));
  border: 1px solid var(--border);
  color: var(--muted);
  min-height: 40px;
  display: flex;
  align-items: center;
}

.inv-deploy-status.ready {
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
  color: var(--ink);
}

/* ── Empty states / misc ─────────────────────────────── */
.inv-empty {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 24px;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
  background: color-mix(in srgb, var(--surface-alt) 55%, transparent);
}

/* ── Source tag accent colours ────────────────────────── */
.tag-source-registry { background: color-mix(in srgb, #64748b 14%, var(--tag-bg)); color: #64748b; border-color: color-mix(in srgb, #64748b 22%, var(--border)); }
.tag-source-winget   { background: color-mix(in srgb, #0078d4 12%, var(--tag-bg)); color: color-mix(in srgb, #0078d4 90%, var(--ink)); border-color: color-mix(in srgb, #0078d4 22%, var(--border)); }
.tag-source-apt      { background: color-mix(in srgb, #d97706 12%, var(--tag-bg)); color: color-mix(in srgb, #d97706 90%, var(--ink)); border-color: color-mix(in srgb, #d97706 22%, var(--border)); }
.tag-source-rpm      { background: color-mix(in srgb, #c2362e 12%, var(--tag-bg)); color: color-mix(in srgb, #c2362e 85%, var(--ink)); border-color: color-mix(in srgb, #c2362e 22%, var(--border)); }
.tag-source-unknown  { background: var(--tag-bg); color: var(--muted); }

/* ── Inventory responsive layout ──────────────────────── */
@media (max-width: 800px) {
  .inv-shell {
    flex-direction: column;
  }

  .inv-software-list-pane {
    flex-basis: auto;
    width: auto;
    min-width: 0;
  }

  .inv-list-pane {
    flex: 0 0 auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
    max-height: 220px;
  }

  .inv-device-list { flex: 1; }

  .inv-software-device-row {
    flex-direction: column;
    align-items: flex-start;
  }

  #inventorySoftwareResizeHandle,
  #inventoryDeviceResizeHandle {
    display: none;
  }

  .inv-scope-bar-row { gap: 6px; }
  .inv-scope-add-btn { margin-left: 0; }

  .inv-pkg-row,
  .inv-pkg-upload-row {
    grid-template-columns: 1fr;
  }

  .inv-table-body {
    flex-direction: column;
  }

  .inv-table-filter-sidebar {
    width: auto;
    min-width: 0;
    border-right: none;
    border-bottom: 1px solid var(--border);
    max-height: 38vh;
  }
}
/* ── Health page ──────────────────────────────────────────── */

.monitoring-page-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.monitoring-workspace {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.health-page-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 0;
  height: 100%;
  overflow: hidden;
}

.health-profiles-pane {
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-alt);
}

.health-pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.health-pane-title {
  font-size: 13px;
  font-weight: 700;
  margin: 0;
}

.health-profile-list {
  overflow-y: auto;
  flex: 1;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.health-profile-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  color: var(--ink);
  gap: 6px;
  transition: background 0.1s;
}

.health-profile-item:hover {
  background: var(--surface-hover);
}

.health-profile-item.selected {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.health-profile-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.health-profile-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: color-mix(in srgb, var(--accent) 15%, var(--surface));
  color: var(--accent);
  padding: 2px 6px;
  border-radius: 10px;
  flex-shrink: 0;
}

.health-profile-empty {
  padding: 12px;
  font-size: 12px;
}

.health-main-pane {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.health-main-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 10px;
}

.health-main-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}

.health-main-subtitle {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  max-width: 720px;
}

.health-main-actions {
  display: flex;
  gap: 6px;
}

.health-result-area {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
}

.health-overview-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.health-stat-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  background: var(--surface-alt);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.health-stat-card.critical {
  border-color: color-mix(in srgb, var(--danger, #d94f4f) 35%, transparent);
  background: color-mix(in srgb, var(--danger, #d94f4f) 8%, var(--surface));
}

.health-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.health-stat-value {
  font-size: 24px;
  line-height: 1;
}

.health-monitor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.health-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.health-panel-wide {
  grid-column: 1 / -1;
}

.health-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
}

.health-panel-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}

.health-profile-cadence {
  font-size: 10px;
  color: var(--muted);
}

.health-timeline-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 14px;
}

.health-subsection {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.health-subsection-title {
  margin: 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.health-issue-pill-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.health-issue-pill {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--warn, #e6a817) 30%, transparent);
  background: color-mix(in srgb, var(--warn, #e6a817) 8%, var(--surface));
  font-size: 12px;
}

.health-issue-pill.critical {
  border-color: color-mix(in srgb, var(--danger, #d94f4f) 35%, transparent);
  background: color-mix(in srgb, var(--danger, #d94f4f) 8%, var(--surface));
}

.health-series-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.health-series-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--surface-alt);
}

.health-series-head,
.health-series-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  color: var(--muted);
}

.health-series-head strong {
  color: var(--ink);
  font-size: 12px;
}

.health-series-chart {
  width: 100%;
  height: 72px;
  display: block;
}

.health-series-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.health-chart-empty {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.health-placeholder {
  padding: 24px;
  text-align: center;
  font-size: 13px;
}

.health-error {
  padding: 12px 16px;
  background: color-mix(in srgb, var(--danger, #d94f4f) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--danger, #d94f4f) 30%, transparent);
  border-radius: var(--radius);
  color: var(--danger, #d94f4f);
  font-size: 13px;
}

.health-findings-wrap {
  overflow-x: auto;
}

/* ── Health findings datatable ──────────────────────────────── */
.hc-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 10px;
  border: 1px solid transparent;
}

.hc-bar-ok       { background: color-mix(in srgb, #2a9d5c 10%, var(--surface)); color: #2a9d5c; border-color: color-mix(in srgb, #2a9d5c 20%, transparent); }
.hc-bar-warning  { background: color-mix(in srgb, var(--warn, #e6a817) 10%, var(--surface)); color: var(--warn, #e6a817); border-color: color-mix(in srgb, var(--warn, #e6a817) 20%, transparent); }
.hc-bar-critical { background: color-mix(in srgb, var(--danger, #d94f4f) 10%, var(--surface)); color: var(--danger, #d94f4f); border-color: color-mix(in srgb, var(--danger, #d94f4f) 20%, transparent); }

.hc-bar-icon { font-size: 14px; line-height: 1; }

.hc-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.hc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.hc-th {
  text-align: left;
  padding: 6px 10px;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: nowrap;
}

.hc-th-sev    { width: 52px; }
.hc-th-device { width: 180px; }
.hc-th-finding { width: 180px; }
.hc-th-detail  { min-width: 0; }
.hc-th-action  { width: 80px; }

.hc-row td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.hc-row:last-child td { border-bottom: none; }
.hc-row:hover td { background: var(--surface-hover); }
.hc-row.selected td { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }

.hc-td-sev    { white-space: nowrap; }
.hc-td-device { white-space: nowrap; }
.hc-td-finding { white-space: nowrap; color: var(--ink); font-weight: 500; }
.hc-td-detail  { color: var(--muted); font-size: 11px; }
.hc-td-action  { white-space: nowrap; text-align: right; }

.hc-sev-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 2px 5px;
  border-radius: 3px;
}

.hc-sev-critical {
  background: color-mix(in srgb, var(--danger, #d94f4f) 18%, var(--surface));
  color: var(--danger, #d94f4f);
  border: 1px solid color-mix(in srgb, var(--danger, #d94f4f) 35%, transparent);
}

.hc-sev-warning {
  background: color-mix(in srgb, var(--warn, #e6a817) 15%, var(--surface));
  color: var(--warn, #e6a817);
  border: 1px solid color-mix(in srgb, var(--warn, #e6a817) 35%, transparent);
}

.hc-device-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.1s;
}

.hc-device-link:hover {
  text-decoration-color: var(--accent);
}

.hc-action-btn {
  font-size: 10px;
  opacity: 0.8;
}

.hc-action-btn:hover {
  opacity: 1;
}

@media (max-width: 1100px) {
  .health-overview-stats,
  .health-monitor-grid {
    grid-template-columns: 1fr;
  }

  .inv-table-filter-sidebar {
    width: 220px;
  }
}

/* ── Health profile editor ─────────────────────────────────── */
.hp-dialog-box {
  width: 860px;
  max-width: 96vw;
}

.hp-dialog-body {
  padding: 0;
}

.hp-two-col {
  display: grid;
  grid-template-columns: 300px 1fr;
  min-height: 440px;
}

.hp-left-col {
  border-right: 1px solid var(--border);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}

.hp-right-col {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}

.hp-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 8px 0 2px;
}

.hp-section-hint {
  font-size: 11px;
  color: var(--muted);
  margin: 0 0 6px;
}

/* ── Condition builder ─────────────────────────────────────── */
.cond-builder {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cond-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cond-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.cond-type-select {
  font-size: 12px;
  padding: 3px 6px;
  flex-shrink: 0;
  min-width: 130px;
}

.cond-value-area {
  display: contents;
}

.cond-text-input {
  font-size: 12px;
  padding: 3px 6px;
  flex: 1;
  min-width: 120px;
}

.cond-meta-field-sel {
  font-size: 12px;
  padding: 3px 6px;
  flex-shrink: 0;
  min-width: 120px;
}

.cond-meta-value-wrap {
  display: contents;
}

.cond-meta-value-input {
  font-size: 12px;
  padding: 3px 6px;
  flex: 1;
  min-width: 100px;
}

.cond-remove-btn {
  font-size: 11px;
  padding: 2px 7px;
  flex-shrink: 0;
}

.cond-add-row {
  margin-top: 2px;
}

.cond-add-btn {
  font-size: 11px;
}

/* ── Rule cards ─────────────────────────────────────────────── */
.hp-rules-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.hp-rule-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.hp-rule-header {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface-alt);
}

.hp-rule-main-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.hp-rule-kind {
  font-size: 12px;
  padding: 3px 6px;
  min-width: 160px;
}

.hp-rule-threshold {
  font-size: 12px;
  padding: 3px 6px;
  width: 70px;
}

.hp-rule-severity {
  font-size: 12px;
  padding: 3px 6px;
}

.hp-rule-label {
  font-size: 12px;
  padding: 3px 6px;
  flex: 1;
  min-width: 80px;
}

.hp-rule-remove-btn {
  font-size: 11px;
  padding: 2px 7px;
  flex-shrink: 0;
}

.hp-rule-scope-toggle {
  font-size: 11px;
  align-self: flex-start;
  color: var(--muted);
}

.hp-rule-scope {
  padding: 8px 10px;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-alt) 60%, var(--surface));
}

.hp-add-rule-btn {
  align-self: flex-start;
}

/* ── Profile list meta ─────────────────────────────────────── */
.health-profile-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.health-profile-scope-hint {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
}

/* ── Assignment dialog and inline lists ───────────────────── */

.ca-dialog-box {
  width: min(860px, 96vw);
  max-height: 80vh;
}
.ca-picker-box {
  width: min(820px, 96vw);
}
.ca-dialog-body {
  overflow-y: auto;
  padding: 14px;
}
.ca-picker-body {
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ca-picker-summary {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 2px 6px;
}
.ca-picker-summary-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.ca-picker-summary-sub {
  font-size: 11px;
  color: var(--muted);
}
.ca-picker-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1.6fr) repeat(4, minmax(120px, 1fr));
  gap: 8px;
  align-items: end;
}
.ca-filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ca-filter-field-wide {
  min-width: 180px;
}
.ca-filter-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
.ca-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.ca-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}
.ca-col-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ca-col-title {
  font-weight: 600;
  font-size: 13px;
}
.ca-col-hint {
  font-size: 11px;
  color: var(--muted);
}
.ca-device-search {
  width: 100%;
  font-size: 12px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-low);
  color: var(--ink);
}
.ca-checklist {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ca-check-name-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  overflow-y: auto;
  max-height: 340px;
  border: 1px solid var(--border);
  line-height: 1.35;
}
.ca-check-key {
  font-size: 11px;
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--muted);
}
.ca-check-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 10px;
  font-size: 11px;
  color: var(--muted);
}
.ca-check-row {
  font-size: 11px;
  align-items: flex-start;
  line-height: 1.45;
}
.ca-badge-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.ca-inline-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
}
.ca-inline-badge-good {
  border-color: color-mix(in srgb, #2b8c4e 30%, var(--border));
  background: color-mix(in srgb, #2b8c4e 10%, var(--surface));
  color: #2b8c4e;
}
.ca-inline-badge-muted {
  border-color: color-mix(in srgb, #b84418 28%, var(--border));
  background: color-mix(in srgb, #b84418 9%, var(--surface));
  color: #b84418;
  cursor: pointer;
  font-size: 12px;
}
.ca-check-row:hover { background: var(--surface-mid); }
.ca-check-row[hidden] { display: none; }
.ca-check-row input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--accent);
}
.ca-check-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.ca-check-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ca-check-sub {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ca-check-badge {
  display: inline-block;
  font-size: 9px;
  background: var(--accent);
  color: #fff;
  border-radius: 3px;
  padding: 0 4px;
  line-height: 14px;
  vertical-align: middle;
  margin-left: 4px;
}
.ca-empty {
  font-size: 12px;
  color: var(--muted);
  padding: 8px;
  text-align: center;
}

/* Assignment dialog chip row */
.ca-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 28px;
  align-items: center;
}
.ca-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px 2px 8px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 500;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  color: var(--ink);
}
.ca-chip-device {
  background: color-mix(in srgb, var(--teal, #00b4aa) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--teal, #00b4aa) 22%, var(--border));
}
.ca-chip-label { max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-chip-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  padding: 0;
}
.ca-chip-remove:hover { color: var(--danger, #c0392b); }
.ca-no-assignments { font-size: 12px; color: var(--muted); font-style: italic; }

/* Inline assign list (devices page / agent profiles page) */
.ca-assign-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ca-assign-list-readonly { opacity: 0.8; }
.ca-assign-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-low);
  font-size: 12px;
}
.ca-assign-row-readonly { border-style: dashed; }
.ca-assign-row-body { flex: 1; min-width: 0; }
.ca-assign-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-assign-sub { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-assign-remove { flex-shrink: 0; }

@media (max-width: 680px) {
  .ca-two-col { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .ca-picker-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ca-check-meta-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .ca-picker-filters {
    grid-template-columns: 1fr;
  }
}

/* ── Assignment dialog redesign ──────────────────────────── */
.ca-assign-dialog { width: min(720px, 96vw); max-height: 82vh; display: flex; flex-direction: column; }
.ca-assign-body { display: flex; flex-direction: column; gap: 20px; overflow-y: auto; padding: 16px 20px; }
.ca-assign-section { display: flex; flex-direction: column; gap: 8px; }
.ca-assign-section-head { display: flex; flex-direction: column; gap: 2px; }
.ca-assign-section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.ca-assign-section-hint { font-size: 11px; color: var(--muted); }

/* Profile rows */
.ca-profile-list { display: flex; flex-direction: column; gap: 2px; }
.ca-profile-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-low);
  cursor: pointer;
  font-size: 13px;
  transition: background 0.1s;
}
.ca-profile-row:hover { background: color-mix(in srgb, var(--accent) 6%, var(--surface-low)); }
.ca-profile-row input[type="checkbox"] { flex-shrink: 0; width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.ca-profile-row-body { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ca-profile-row-name { font-weight: 500; }
.ca-profile-row-meta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ca-profile-device-count { font-size: 11px; color: var(--muted); }

/* Device filters */
.ca-device-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.ca-filter-select {
  font-size: 11px;
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  height: 28px;
}
.ca-filter-search {
  flex: 1;
  min-width: 120px;
  font-size: 11px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  height: 28px;
}
.ca-filter-search:focus, .ca-filter-select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* Device rows */
.ca-device-list { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; }
.ca-device-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-low);
  cursor: pointer;
  font-size: 12px;
  transition: background 0.1s;
}
.ca-device-row:hover { background: color-mix(in srgb, var(--accent) 6%, var(--surface-low)); }
.ca-device-row[hidden] { display: none; }
.ca-device-row input[type="checkbox"] { flex-shrink: 0; width: 14px; height: 14px; accent-color: var(--accent); cursor: pointer; }
.ca-device-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ca-device-row-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-device-row-meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }

/* Status dot */
.ca-status-dot { flex-shrink: 0; display: block; width: 8px; height: 8px; border-radius: 50%; }
.ca-dot-online { background: #1a9e5c; box-shadow: 0 0 4px #1a9e5c66; }
.ca-dot-offline { background: var(--muted); }

/* OS badge */
.ca-os-badge { font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 3px; letter-spacing: 0.02em; flex-shrink: 0; }
.ca-os-win { background: color-mix(in srgb, #0078d4 15%, var(--surface)); color: #0078d4; border: 1px solid color-mix(in srgb, #0078d4 25%, var(--border)); }
.ca-os-linux { background: color-mix(in srgb, #f7a800 15%, var(--surface)); color: #b07d00; border: 1px solid color-mix(in srgb, #f7a800 25%, var(--border)); }
.ca-os-other { background: var(--surface); color: var(--muted); border: 1px solid var(--border); }

/* Device profile/status labels */
.ca-device-profile-link { font-size: 10px; color: var(--muted); }
.ca-device-no-profile { font-size: 10px; color: var(--muted); font-style: italic; }
.ca-device-status-label { font-size: 10px; font-weight: 600; }
.ca-status-online { color: #1a9e5c; }
.ca-status-offline { color: var(--muted); }

/* Footer with selection summary */
.ca-dialog-foot { display: flex; align-items: center; gap: 10px; }
.ca-selection-summary { margin-left: auto; font-size: 11px; color: var(--muted); font-style: italic; }

/* ── Row actions (run + remove side by side) ─────────────── */
.ca-assign-wrap { display: flex; flex-direction: column; gap: 0; }
.ca-assign-row-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ca-run-btn { flex-shrink: 0; }

/* ── TLV2 Timeline ────────────────────────────────────────────── */
.tlv2-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 0 4px;
}

.tlv2-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 6px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font: 11px/1 inherit;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.tlv2-chip:hover { border-color: var(--border-strong); }
.tlv2-chip.on {
  border-color: var(--tlv2cc, var(--accent));
  background: color-mix(in srgb, var(--tlv2cc, var(--accent)) 10%, var(--surface));
  color: var(--tlv2cc, var(--accent));
}
.tlv2-chip-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--border); flex-shrink: 0;
}
.tlv2-chip.on .tlv2-chip-dot { background: var(--tlv2cc, var(--accent)); }
.tlv2-ev-count { margin-left: auto; font-size: 11px; color: var(--muted); }

.tlv2-scroll {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  padding-bottom: 16px;
}

.tlv2-lbl-title {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tlv2-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  background: color-mix(in srgb, var(--tlv2c, var(--muted)) 12%, transparent);
  color: var(--tlv2c, var(--muted));
}

.tlv2-gap-label {
  font-size: 10px;
  color: var(--muted);
  background: var(--surface);
  padding: 0 8px;
  white-space: nowrap;
  letter-spacing: 0.04em;
}

.tlv2-tip {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  max-width: 260px;
  padding: 10px 13px;
  background: color-mix(in srgb, var(--ink) 92%, transparent);
  color: var(--surface);
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.55;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: opacity 0.1s;
}
.tlv2-tip.show { opacity: 1; }
.tlv2-tip b { display: block; margin-bottom: 3px; font-size: 13px; }
.tlv2-tip s  { display: block; opacity: 0.72; text-decoration: none; }

/* Wordmark artwork follows the selected admin theme. */
.brand-wordmark-dark { display: none; }
[data-theme="dark"] .brand-wordmark-light { display: none; }
[data-theme="dark"] .brand-wordmark-dark { display: block; }
.app-rail-brand-title { white-space: normal; }