/* InstantRelay app styles — flat, token-driven, cohesive with WebAdminCC / SignInService.
   Every visual property goes through a CSS custom property (wwwroot/tokens/*.css + fonts.css), so
   theme (light/dark/system), colour-vision packs and brand packs (instantsystems/maikoz/ctlp) all
   apply without touching this file. Conventions follow WebAdminCC STYLING.md: solid primary fills
   (no gradients/glows in chrome), flat surfaces, active nav = bg-muted + a primary leading bar
   (never a red fill), uppercase+tracking only on small-caps labels, --shadow-ring focus. */

/* ── Base ───────────────────────────────────────────────────────────────────────────────────── */
html {
  font-family: var(--font-family-sans);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-bg);
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: var(--leading-normal);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}
a:hover { color: var(--color-primary-hover); text-decoration: underline; }

h1, h2, h3 {
  font-family: var(--font-family-display);
  color: var(--color-text);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
h1 { font-size: var(--text-3xl); margin: 0 0 var(--space-3); font-weight: var(--font-bold); }
h2 { font-size: var(--text-xl); font-weight: var(--font-semibold); }

code, .mono { font-family: var(--font-family-mono); }

/* Small-caps label / kicker (the ONLY place uppercase + tracking is used). */
.eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-primary);
  margin: 0 0 var(--space-2);
}

:focus-visible { outline: none; box-shadow: var(--shadow-ring); border-radius: var(--radius-1); }

.page {
  padding: var(--space-6);
  max-width: var(--content-max-width);
  margin: 0 auto;
}

/* ── Topbar ─────────────────────────────────────────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-5);
  min-height: var(--topbar-height);
  background: var(--color-bg-sidebar);
  border-bottom: 1px solid var(--color-border-default);
}

.topbar a { color: var(--color-text-secondary); text-decoration: none; }
.topbar a:hover { color: var(--color-text); text-decoration: none; }

/* Wordmark: solid primary monogram tile + display lettering + a small status dot. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-family-display);
  font-weight: var(--font-bold);
  font-size: var(--text-md);
  color: var(--color-text);
}
.brand:hover { color: var(--color-text); }
.brand__mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-2);
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
}
.brand__dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--color-success);
  animation: dot-pulse 2.4s var(--ease-default) infinite;
}

/* Nav tabs — text-base, normal case; active = bg-muted + primary leading bar (STYLING.md). */
.nav { display: inline-flex; align-items: center; gap: var(--space-1); }
.nav-link {
  display: inline-flex;
  align-items: center;
  height: calc(var(--topbar-height) - var(--space-2));
  padding: 0 var(--space-3);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
  border-radius: var(--radius-1);
  box-shadow: inset 0 -2px 0 0 transparent;
  transition: background-color var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default);
}
.nav-link:hover { color: var(--color-text); background: var(--color-bg-muted); text-decoration: none; }
.nav-link.active {
  color: var(--color-text);
  background: var(--color-bg-muted);
  box-shadow: inset 0 -2px 0 0 var(--color-primary);
}

.topbar .spacer { flex: 1; }
.topbar .inline { display: inline; }

/* Signed-in identity chip (monospace user id). */
.who {
  font-family: var(--font-family-mono);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  padding: var(--space-0-5) var(--space-2);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-full);
  background: var(--color-bg);
}

/* ── Status bar (footer) ────────────────────────────────────────────────────────────────────── */
.statusbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  border-top: 1px solid var(--color-border-default);
  background: var(--color-bg-sidebar);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-muted);
}
.statusbar .spacer { flex: 1; }

/* ── Theme switcher (topbar) — mirrors SignInService; class names consumed by js/theme.js ─────── */
.theme-switcher { display: inline-flex; align-items: center; gap: var(--space-1); }

.theme-wrapper {
  display: inline-flex;
  gap: var(--space-0-5);
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-full);
  padding: var(--space-0-5);
}

.theme-option {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 24px;
  border: none;
  background: transparent;
  border-radius: var(--radius-full);
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: var(--text-base);
  transition: background-color var(--duration-normal) var(--ease-default),
              color var(--duration-normal) var(--ease-default);
}
.theme-option:hover { color: var(--color-text); }
.theme-active {
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

/* ── Vision / brand dropdown ────────────────────────────────────────────────────────────────── */
.vision-wrap { position: relative; display: inline-flex; }

.vision-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: var(--color-bg-muted);
  border-radius: var(--radius-1);
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  transition: color var(--duration-fast) var(--ease-default);
}
.vision-btn:hover { color: var(--color-text); }
.vision-active { color: var(--color-primary); }
.vision-active:hover { color: var(--color-primary-hover); }

.vision-menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  min-width: 200px;
  background: var(--color-bg);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-md);
  padding: var(--space-1) 0;
  z-index: var(--z-dropdown);
}

.vision-menu-item {
  display: block;
  width: 100%;
  padding: var(--space-1-5) var(--space-3);
  border: none;
  background: none;
  text-align: left;
  font-size: var(--text-sm);
  font-family: var(--font-family-sans);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-default);
}
.vision-menu-item:hover { background: var(--color-bg-muted); }
.vision-menu-active { font-weight: var(--font-semibold); color: var(--color-primary); }

/* ── Buttons ────────────────────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  height: var(--button-height-md);
  margin-right: var(--space-2);
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  border: 1px solid transparent;
  border-radius: var(--radius-2);
  font-family: var(--font-family-sans);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  line-height: var(--leading-tight);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-default),
              transform var(--duration-fast) var(--ease-default);
}
.btn:hover { background: var(--color-primary-hover); text-decoration: none; color: var(--color-primary-foreground); }
.btn:active { transform: scale(0.98); }

/* Disabled actions must READ as disabled (an offline/incapable device shows greyed, non-interactive
   buttons — previously they kept the solid primary fill and looked actionable). */
.btn:disabled, .btn[disabled],
.btn-ghost:disabled, .btn-ghost[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.4);
}
.btn:disabled:hover, .btn[disabled]:hover { background: var(--color-primary); }
.btn:disabled:active, .btn[disabled]:active { transform: none; }
.btn-ghost:disabled:hover, .btn-ghost[disabled]:hover { background: transparent; border-color: var(--color-border-default); color: var(--color-text); }

button { font-family: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; }

/* Ghost / outline secondary action. */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-2);
  padding: 0 var(--space-3);
  height: var(--button-height-md);
  font-family: var(--font-family-sans);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default);
}
.btn-ghost:hover { background: var(--color-bg-muted); border-color: var(--color-border-hover); color: var(--color-text); }

/* Bare action buttons inside the data grid (Disconnect). */
.grid button {
  background: transparent;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-1);
  padding: var(--space-0-5) var(--space-2);
  font-size: var(--text-sm);
  transition: border-color var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default);
}
.grid button:hover { color: var(--color-error); border-color: var(--color-error); }

/* ── Form controls — tokenised baseline so EVERY select/input/textarea matches the theme. ─────── */
select, input, textarea, button { color-scheme: light dark; font-family: inherit; }
select, input[type="text"], input[type="number"], input[type="search"], input[type="password"], textarea {
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-1);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-base);
  transition: border-color var(--duration-fast) var(--ease-default);
}
select:focus, input:focus, textarea:focus { outline: none; border-color: var(--color-border-focus); box-shadow: var(--shadow-ring); }

/* ── Cards ──────────────────────────────────────────────────────────────────────────────────── */
.card {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-3);
  padding: var(--space-5);
  margin: var(--space-4) 0;
  max-width: 32rem;
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--duration-fast) var(--ease-default);
}
.card:hover { border-color: var(--color-border-hover); }
.card h2 { margin-top: 0; font-size: var(--text-md); }
.card label { display: block; margin: var(--space-2) 0; color: var(--color-text-secondary); }
.card input, .card select {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-1);
  background: var(--color-bg);
  color: var(--color-text);
}

/* ── Data grid (tables) ─────────────────────────────────────────────────────────────────────── */
.grid {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: var(--text-sm);
  background: var(--color-bg);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-3);
  /* NOTE: deliberately NO `overflow: hidden`. It made the table its own sticky scroll-container, which
     pushed the sticky <thead> down by --topbar-height ON TOP of the body rows (rows rendered but hidden
     behind the header). Without it the header sticks relative to the VIEWPORT (correct); the header's top
     corners are rounded below instead of relying on the table clipping. */
}
.grid th, .grid td {
  border-bottom: 1px solid var(--color-border-default);
  padding: var(--space-2) var(--space-3);
  text-align: left;
}
.grid thead th {
  background: var(--color-bg-muted);
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  position: sticky;
  top: var(--topbar-height);
  z-index: 1;
}
/* Round the header's outer top corners (the table no longer clips via overflow:hidden). */
.grid thead tr:first-child th:first-child { border-top-left-radius: var(--radius-3); }
.grid thead tr:first-child th:last-child  { border-top-right-radius: var(--radius-3); }
.grid tbody tr { transition: background-color var(--duration-fast) var(--ease-default); }
.grid tbody tr:hover { background: var(--color-bg-muted); }
.grid tbody tr:last-child td { border-bottom: none; }
.grid tbody td:first-child { font-family: var(--font-family-mono); color: var(--color-text); }

/* ── Embedded noVNC viewer (/view) ──────────────────────────────────────────────────────────────
   position:fixed fills everything below the topbar, escaping the .page padding/max-width, so the
   iframe is edge-to-edge. The topbar (higher z-index) stays on top and clickable; the statusbar is
   covered, which is fine for a full-screen viewer. The iframe gives the VNC session its own browsing
   context, isolated from Blazor circuit re-renders. */
.viewer-embed {
  position: fixed;
  top: var(--topbar-height);
  left: 0; right: 0; bottom: 0;
  z-index: 5;
  background: var(--color-bg);
}
.viewer-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

.summary { margin: var(--space-2) 0 var(--space-4); color: var(--color-text-secondary); }

/* ── In-app docs (/help): tab switch + rendered-markdown body ──────────────────────────────────── */
.doc-page { max-width: 60rem; }
.doc-switch { display: flex; gap: var(--space-1); margin-bottom: var(--space-4); border-bottom: 1px solid var(--color-border-default); }
.doc-switch button { background: none; border: none; border-bottom: 2px solid transparent; padding: var(--space-2) var(--space-3); font-size: var(--text-base); font-weight: var(--font-medium); color: var(--color-text-secondary); cursor: pointer; }
.doc-switch button:hover { color: var(--color-text); }
.doc-switch button.active { color: var(--color-text); border-bottom-color: var(--color-primary); }

.doc-body { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--color-text); }
.doc-body h1 { font-size: var(--text-3xl); margin: var(--space-6) 0 var(--space-3); }
.doc-body h2 { font-size: var(--text-2xl); margin: var(--space-6) 0 var(--space-2); padding-bottom: var(--space-1); border-bottom: 1px solid var(--color-border-default); }
.doc-body h3 { font-size: var(--text-lg); margin: var(--space-5) 0 var(--space-2); }
.doc-body h4 { font-size: var(--text-md); margin: var(--space-4) 0 var(--space-2); }
.doc-body p, .doc-body ul, .doc-body ol { margin: var(--space-3) 0; }
.doc-body li { margin: var(--space-1) 0; }
.doc-body a { color: var(--color-primary); }
.doc-body code { font-family: var(--font-family-mono); font-size: 0.875em; background: var(--color-bg-muted); padding: 0.1em 0.35em; border-radius: var(--radius-1); }
.doc-body pre { background: var(--color-bg-muted); border: 1px solid var(--color-border-default); border-radius: var(--radius-3); padding: var(--space-3); overflow: auto; }
.doc-body pre code { background: none; padding: 0; font-size: var(--text-sm); }
.doc-body blockquote { margin: var(--space-3) 0; padding: var(--space-1) var(--space-4); border-left: 3px solid var(--color-primary); color: var(--color-text-secondary); background: var(--color-bg-muted); border-radius: 0 var(--radius-2) var(--radius-2) 0; }
.doc-body hr { border: 0; border-top: 1px solid var(--color-border-default); margin: var(--space-6) 0; }
.doc-body table { border-collapse: collapse; width: 100%; margin: var(--space-3) 0; font-size: var(--text-sm); }
.doc-body th, .doc-body td { border: 1px solid var(--color-border-default); padding: var(--space-1) var(--space-3); text-align: left; vertical-align: top; }
.doc-body thead th { background: var(--color-bg-muted); font-weight: var(--font-semibold); }
.doc-body img { max-width: 100%; }

/* Session-expiry notice (shown briefly before the redirect to sign-in) */
.session-expired {
  padding: var(--space-2) var(--space-5);
  background: var(--color-warning-muted);
  color: var(--color-warning);
  border-bottom: 1px solid var(--color-warning);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  text-align: center;
}

/* ── Status chips — text + dot (never colour alone); never a brand-red fill on un-triggered state. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-0-5) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  border: 1px solid var(--color-border-default);
  color: var(--color-text-secondary);
  background: var(--color-bg);
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; }
.chip--ok   { color: var(--color-success); border-color: var(--color-success); background: var(--color-success-muted); }
.chip--info { color: var(--color-info);    border-color: var(--color-info);    background: var(--color-info-muted); }
.chip--warn { color: var(--color-warning); border-color: var(--color-warning); background: var(--color-warning-muted); }

/* ── Log ────────────────────────────────────────────────────────────────────────────────────── */
.log {
  max-height: 18rem;
  overflow: auto;
  font-family: var(--font-family-mono);
  font-size: var(--text-sm);
  list-style: none;
  padding: var(--space-3);
  margin: var(--space-2) 0;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-3);
  background: var(--color-bg-muted);
}
.log li { padding: var(--space-0-5) 0; }
.log code { color: var(--color-success); margin-right: var(--space-2); }

/* ── Misc ───────────────────────────────────────────────────────────────────────────────────── */
.warn { color: var(--color-warning); }
.link { color: var(--color-primary); font-weight: var(--font-medium); }
.hint { color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--leading-relaxed); }

.search {
  width: 100%;
  max-width: 28rem;
  margin: var(--space-1) 0 var(--space-4);
  height: var(--input-height-md);
  padding: 0 var(--space-3);
  box-sizing: border-box;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-2);
  background: var(--color-bg);
  color: var(--color-text);
}
.search:focus { outline: none; border-color: var(--color-border-focus); box-shadow: var(--shadow-ring); }

.actions label { display: block; margin: var(--space-1) 0; }

/* ── Home hero (flat panel — no gradient/glow) ──────────────────────────────────────────────── */
.hero {
  margin: var(--space-4) 0 var(--space-6);
  padding: var(--space-8);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-4);
  background: var(--color-bg-muted);
  box-shadow: var(--shadow-sm);
}
.hero__title {
  font-family: var(--font-family-display);
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-3);
}
.hero__sub {
  max-width: 52ch;
  color: var(--color-text-secondary);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-5);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.feature-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.feature {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-full);
  background: var(--color-bg);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.feature b { color: var(--color-text); font-weight: var(--font-semibold); }

/* ── Animation ──────────────────────────────────────────────────────────────────────────────── */
@keyframes dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ── Admin console: tree + detail + resizable tabbed drawer ───────────────────────────────────────
   Fully token-driven so the console themes (light/dark), brand-packs and vision-packs EXACTLY like the
   rest of the app. (It previously hardcoded a dark palette + an off-brand blue accent via undefined
   `var(--accent,#2d6cdf)` / `var(--border,#2a3140)` fallbacks, so it never themed and clashed with the
   brand-red chrome.) Active states follow STYLING.md: bg-muted + a primary leading bar, never a red fill. */
/* Full-window-height shell (fixed below the topbar): tree+detail flex to fill, drawer pinned bottom. */
.ir-console-shell { position: fixed; inset: var(--topbar-height) 0 0 0; display: flex; flex-direction: column; background: var(--color-bg); }
.ir-console-shell .ir-console { flex: 1; min-height: 0; }
.ir-console-shell .ir-tree, .ir-console-shell .ir-detail { overflow: auto; }
.ir-console { display: flex; gap: 0; }
.ir-tree { width: 280px; flex-shrink: 0; border-right: 1px solid var(--color-border-default); background: var(--color-bg-sidebar); overflow: auto; padding: var(--space-2) 0; }
.ir-detail { flex: 1; padding: var(--space-4); overflow: auto; }

/* Node-detail action groups (Screen / Manage / Session) */
.ir-group { margin: var(--space-4) 0; padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border-default); }
.ir-group:last-child { border-bottom: 0; padding-bottom: 0; }
.ir-group-label { font-size: var(--text-xs); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--color-text-muted); margin-bottom: var(--space-2); }
.ir-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.ir-hint-inline { font-size: var(--text-xs); color: var(--color-text-muted); }

/* VNC options panel (revealed under the VNC button) */
.ir-vncpanel { margin: var(--space-2) 0; padding: var(--space-3); display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-3); align-items: center; max-width: 26rem; background: var(--color-bg-muted); border: 1px solid var(--color-border-default); border-radius: var(--radius-3); }
.ir-opt { display: contents; }
.ir-opt > label { font-size: var(--text-sm); color: var(--color-text-secondary); }
.ir-opt select { height: var(--input-height-sm); width: 100%; }
.ir-pathtoggle { display: flex; gap: var(--space-1); }
.ir-pathtoggle label { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-0-5) var(--space-2); border: 1px solid var(--color-border-default); border-radius: var(--radius-full); font-size: var(--text-sm); cursor: pointer; color: var(--color-text-secondary); }
.ir-pathtoggle label.sel { border-color: var(--color-primary); color: var(--color-text); }
.ir-vnclaunch { grid-column: 1 / -1; display: flex; gap: var(--space-2); margin-top: var(--space-1); }

/* Reset-connection — ghost button that warms to error on hover (it disrupts the live session) */
.ir-danger:hover { border-color: var(--color-error); color: var(--color-error); }

/* Resizable drawer */
.ir-drawer { position: relative; height: 280px; border-top: 1px solid var(--color-border-default); background: var(--color-bg-sidebar); display: flex; flex-direction: column; }
.ir-drawer-grip { height: 6px; cursor: ns-resize; background: var(--color-bg-muted); border-bottom: 1px solid var(--color-border-default); transition: background-color var(--duration-fast) var(--ease-default); }
.ir-drawer-grip:hover { background: var(--color-primary); }
.ir-drawer-tabs { display: flex; gap: var(--space-0-5); padding: var(--space-1) var(--space-2) 0; border-bottom: 1px solid var(--color-border-default); }
.ir-tab { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border-default); border-bottom: 0; border-radius: var(--radius-2) var(--radius-2) 0 0; background: var(--color-bg-muted); color: var(--color-text-secondary); font-size: var(--text-sm); cursor: pointer; transition: color var(--duration-fast) var(--ease-default), background-color var(--duration-fast) var(--ease-default); }
.ir-tab:hover { color: var(--color-text); }
.ir-tab--active { background: var(--color-bg); color: var(--color-text); font-weight: var(--font-semibold); box-shadow: inset 0 2px 0 0 var(--color-primary); }
.ir-tab-x { margin-left: var(--space-2); opacity: .6; transition: color var(--duration-fast) var(--ease-default), opacity var(--duration-fast) var(--ease-default); }
.ir-tab-x:hover { opacity: 1; color: var(--color-error); }
.ir-drawer-content { flex: 1; overflow: auto; padding: var(--space-2) var(--space-3); }
.ir-drawer-bar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-top: 1px solid var(--color-border-default); font-size: var(--text-xs); color: var(--color-text-muted); }
.ir-drawer-bar .spacer { flex: 1; }
.ir-barchip { padding: var(--space-0-5) var(--space-2); border: 1px solid var(--color-border-default); border-radius: var(--radius-2); color: var(--color-text-secondary); cursor: pointer; transition: border-color var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default); }
.ir-barchip:hover { color: var(--color-text); }
.ir-barchip--active { border-color: var(--color-primary); color: var(--color-text); }

/* VNC fixed host — restyled by console.js, never reparented. The video area stays true black (it is the
   letterbox for the remote framebuffer); only the chrome bar is tokenised. */
.ir-vnc { position: fixed; z-index: var(--z-modal); display: flex; flex-direction: column; background: #000; box-shadow: var(--shadow-xl); }
.ir-vnc--modal { z-index: calc(var(--z-modal) + 10); border: 1px solid var(--color-primary); border-radius: var(--radius-2); overflow: hidden; }
.ir-vnc--full { z-index: calc(var(--z-modal) + 20); }
.ir-vnc-bar { display: flex; align-items: center; gap: var(--space-1-5); padding: var(--space-1) var(--space-2); background: var(--color-bg-sidebar); color: var(--color-text-secondary); border-bottom: 1px solid var(--color-border-default); font-size: var(--text-sm); }
.ir-vnc-frame { flex: 1; border: 0; width: 100%; height: 100%; }

/* Tree nodes — selected = bg-muted + primary leading bar (STYLING.md), never a fill. */
.ir-node { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); margin: 1px var(--space-2); border-radius: var(--radius-1); cursor: pointer; box-shadow: inset 2px 0 0 0 transparent; transition: background-color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default); }
.ir-node:hover { background: var(--color-bg-muted); }
.ir-node--child { margin-left: var(--space-6); }
.ir-node--sel { background: var(--color-bg-muted); box-shadow: inset 2px 0 0 0 var(--color-primary); }
.ir-node .hint { font-size: var(--text-xs); }
.ir-tree .dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--radius-full); flex-shrink: 0; }
.ir-tree .dot.on { background: var(--color-success); }
.ir-tree .dot.off { background: var(--color-text-muted); }
.ir-tree .row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); }
.ir-tree .filter { margin-left: auto; width: 100px; height: var(--input-height-sm); }
.ir-tree .dot.idle { background: var(--color-warning); }
.ir-tree .label { font-size: var(--text-xs); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--color-text-muted); padding: 0 var(--space-3); }
.ir-tree .ir-section { margin: var(--space-4) 0 var(--space-1); }
.ir-tree .ir-count { font-size: var(--text-xs); font-variant-numeric: tabular-nums; color: var(--color-text-muted); padding: var(--space-0-5) var(--space-1-5); border: 1px solid var(--color-border-default); border-radius: var(--radius-full); }

/* Tree row meta (right-aligned viewer badge + status word) */
.ir-node b { font-weight: var(--font-semibold); }
.ir-rowmeta { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-2); }
.ir-badge { min-width: 1.25rem; text-align: center; padding: 0 var(--space-1); font-size: var(--text-xs); font-weight: var(--font-semibold); font-variant-numeric: tabular-nums; color: var(--color-primary-foreground); background: var(--color-primary); border-radius: var(--radius-full); }
.ir-tree-empty { padding: var(--space-4) var(--space-3); color: var(--color-text-muted); font-size: var(--text-sm); }

/* Detail-pane empty state */
.ir-detail-empty { max-width: 44ch; margin: var(--space-8) auto 0; text-align: center; }
.ir-detail-empty-title { font-family: var(--font-family-display); font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--color-text); margin-bottom: var(--space-2); }

/* Live fleet summary strip (top of the console shell) */
.ir-fleet { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--color-border-default); background: var(--color-bg-sidebar); font-size: var(--text-sm); }
.ir-fleet .spacer { flex: 1; }
.ir-stat { color: var(--color-text-secondary); }
.ir-stat b { color: var(--color-text); font-weight: var(--font-semibold); font-variant-numeric: tabular-nums; margin-right: var(--space-1); }
.ir-stat--warn b { color: var(--color-warning); }
.ir-live { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-text-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wider); }
.ir-live-dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--color-success); animation: dot-pulse 2.4s var(--ease-default) infinite; }

/* Detail-pane button rows (NodeDetail) */
.ir-detail .row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: var(--space-3) 0; }

/* Shell tab */
.ir-shell { display: flex; flex-direction: column; height: 100%; gap: var(--space-2); }
.ir-term { flex: 1; min-height: 200px; }

/* Diagnostics tab */
.ir-diag { display: flex; flex-direction: column; gap: var(--space-3); }
.ir-diag-table { border-collapse: collapse; width: 100%; max-width: 44rem; font-size: var(--text-sm); }
.ir-diag-table td { padding: var(--space-1-5) var(--space-3); border-bottom: 1px solid var(--color-border-default); vertical-align: top; }
.ir-diag-table tr:last-child td { border-bottom: 0; }
.ir-diag-table td:first-child { color: var(--color-text-muted); white-space: nowrap; width: 1%; }
.ir-diag-table code { font-size: var(--text-xs); color: var(--color-text-secondary); }

/* Inline error text (shell / diag tabs) */
.error { color: var(--color-error); font-size: var(--text-sm); }