/* responsive + polish fixes */
.page-header h1 { white-space: nowrap; }
.page-header .subtitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex-shrink: 1;
}
.page-header { gap: 12px; flex-wrap: wrap; }
.status-pip span { white-space: nowrap; }
.status-pip { white-space: nowrap; }
.rail-item { min-width: 0; }
.rail-item > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-item > span.rail-count, .rail-item > .rail-color-dot { overflow: visible; flex-shrink: 0; }

@media (max-width: 1100px) {
  .dash-stat-row { grid-template-columns: repeat(2, 1fr); }
  .jobs-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1280px) {
  .recorder-row {
    grid-template-columns: 180px 1fr;
    grid-template-rows: auto auto;
  }
  .recorder-stats { grid-column: 2 / 3; grid-row: 2; }
  .recorder-actions { grid-column: 1 / 3; grid-row: 3; justify-content: flex-end; padding-top: 4px; border-top: 1px solid var(--border); }
}

.capture-stat-label, .recorder-stat .stat-label, .dash-stat-label, .dash-stat-sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar > * { flex-shrink: 0; }
.topbar .crumb { min-width: 0; overflow: hidden; }
.topbar .crumb > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .spacer { flex: 1; min-width: 8px; }

@media (max-width: 1100px) {
  .topbar .search-wrap { display: none; }
}
@media (max-width: 900px) {
  .topbar .status-pip span:not(.dot) { display: none; }
}

.library-toolbar { flex-wrap: wrap; }
.library-toolbar .search { width: 200px; }

@media (max-width: 1280px) {
  .page-body > div[style*="grid-template-columns: 440px"] {
    grid-template-columns: 1fr !important;
  }
}

.audio-meter.v {
  border-radius: 99px;
  background: rgba(255,255,255,0.04);
  padding: 3px;
}

.recorder-preview { min-height: 56px; }

.activity-text .target { word-break: break-word; }

.asset-card .meta .sub { overflow: hidden; min-width: 0; flex-wrap: wrap; }
/* #52 - duration mono badge in the meta row had no shrink behaviour, so on
   narrow cards it overlapped the project text. Force the duration column to
   never overflow and let the project label ellipsize. */
.asset-card .meta .sub > .duration { flex-shrink: 0; margin-left: auto; }
.asset-card .meta .sub > :not(.duration) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.dash-stat-label, .dash-stat-mono, .dash-stat-sub { position: relative; z-index: 1; }
.dash-sparkline { z-index: 0; }

/* ============================================================
   Search bar polish - give it a real container so it doesn't
   read as floating text on the topbar background.
   ============================================================ */
.topbar .search,
.search-wrap .search {
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 1px 0 rgba(0, 0, 0, 0.25);
  color: var(--text-1);
  transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.topbar .search:hover,
.search-wrap .search:hover {
  background: var(--bg-3);
  border-color: var(--border-stronger);
}
.topbar .search:focus-within,
.search-wrap .search:focus-within,
.topbar .search.is-open,
.search-wrap .search.is-open {
  background: var(--bg-2);
  border-color: var(--accent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 0 3px var(--accent-soft);
}
.topbar .search input::placeholder,
.search-wrap .search input::placeholder {
  color: var(--text-3);
}
.topbar .search .search-icon,
.search-wrap .search .search-icon {
  color: var(--text-2);
}
.topbar .search:focus-within .search-icon,
.search-wrap .search:focus-within .search-icon {
  color: var(--accent-text);
}
.topbar .search .kbd,
.search-wrap .search .kbd {
  background: var(--bg-1);
  border-color: var(--border-stronger);
  color: var(--text-2);
}

/* Library-local "Filter assets" search - same container treatment,
   keep its compact width. */
.library-toolbar .search {
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 1px 0 rgba(0, 0, 0, 0.25);
}
.library-toolbar .search:hover { background: var(--bg-3); border-color: var(--border-stronger); }
.library-toolbar .search:focus-within {
  border-color: var(--accent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 0 3px var(--accent-soft);
}

/* Open-state dropdown: visually connect it to the input. */
.search-wrap .search.is-open {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.search-results {
  background: var(--bg-2);
  border-color: var(--border-stronger);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: -1px;
  padding: 6px;
}
.search-result {
  padding: 8px 10px;
}
.search-result + .search-result { margin-top: 1px; }
.search-result:hover { background: var(--hover-strong); }
.search-result.active {
  background: var(--accent-soft);
  outline: 1px solid var(--accent-soft-2);
  outline-offset: -1px;
}

/* ============================================================
   Right-click context menu - pop it forward off the page so it
   reads as a menu, not a floating list.
   ============================================================ */
.ctx-menu {
  background: var(--bg-2);
  border: 1px solid var(--border-stronger);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 18px 40px rgba(0, 0, 0, 0.55),
    0 4px 10px rgba(0, 0, 0, 0.35);
  padding: 6px;
  min-width: 240px;
  animation: ctxFadeIn 90ms ease-out both;
}
@keyframes ctxFadeIn {
  from { opacity: 0; transform: translateY(-2px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ctx-menu .ctx-header {
  padding: 8px 10px 8px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
  margin: 0 -2px 6px;
}
.ctx-menu .ctx-divider {
  background: var(--border-strong);
  margin: 6px 2px;
}
.ctx-menu .ctx-section-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-4);
  padding: 8px 10px 4px;
}
.ctx-menu button {
  padding: 7px 10px;
  border-radius: 5px;
  gap: 10px;
  color: var(--text-1);
}
.ctx-menu button + button { margin-top: 1px; }
.ctx-menu button:hover:not(:disabled) {
  background: var(--accent-soft);
  color: var(--accent-text);
}
.ctx-menu button:hover:not(:disabled) svg { color: var(--accent); }
.ctx-menu button:disabled { color: var(--text-3); }
.ctx-menu button:disabled svg { color: var(--text-4); }
.ctx-menu button.danger:hover:not(:disabled) {
  background: var(--danger-soft);
  color: var(--danger);
}
.ctx-menu button.danger:hover:not(:disabled) svg { color: var(--danger); }

/* Row-popover menu (Users page etc.) - match the same polish so the
   app feels consistent. */
.row-menu {
  background: var(--bg-2);
  border: 1px solid var(--border-stronger);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 14px 32px rgba(0, 0, 0, 0.5);
  padding: 6px;
}
.row-menu button { padding: 7px 10px; border-radius: 5px; }
.row-menu button:hover { background: var(--accent-soft); color: var(--accent-text); }
.row-menu button.danger:hover { background: var(--danger-soft); color: var(--danger); }

/* ============================================================
   Sidebar brand logo - replace the gradient "D" tile with the
   actual dragon-coiled-D logo. mix-blend-mode: screen drops the
   light-gray PNG background so only the black silhouette + blue
   flame remain over the dark sidebar.
   ============================================================ */
.brand-logo {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  object-fit: contain;
  /* Convert the dark logo to white so it pops on the dark sidebar.
     brightness(0) collapses everything to black, invert(1) flips to white.
     Works on both the original dark PNG and any transparent white PNG. */
  filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(16, 37, 161, 0.35));
}
.sidebar-header:hover .brand-logo {
  filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(16, 37, 161, 0.55));
}

/* ============================================================
   Launcher home - full-bleed landing page with the logo as hero
   and big section tiles.
   ============================================================ */
.launcher {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background:
    radial-gradient(1100px 500px at 50% -10%, rgba(16, 37, 161, 0.08), transparent 60%),
    var(--bg-0);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 32px 64px;
}
.launcher-inner {
  width: 100%;
  max-width: 1160px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 32px;
}

.launcher-hero {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 18px;
  text-align: left;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
/* Logo wrapper — compact, left-aligned mark. */
.launcher-logo-wrap {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}
.launcher-logo-pulse { display: none; }
.launcher-logo {
  position: relative;
  z-index: 1;
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter:
    brightness(0) invert(1)
    drop-shadow(0 0 8px rgba(16, 37, 161, 0.35));
  animation: launcherLogoIn 400ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes launcherLogoIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .launcher-logo { animation: none; }
}
.launcher-hero-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.launcher-wordmark {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--text-1);
  text-shadow: none;
}
.launcher-kicker { display: none; }
.launcher-tagline {
  margin: 0;
  color: var(--text-3);
  font-size: 12.5px;
  letter-spacing: 0.01em;
}
.launcher-tagline-motto { display: none; }

.launcher-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 960px) { .launcher-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .launcher-grid { grid-template-columns: 1fr; } }

/* Secondary tiles: smaller vertical footprint, quieter treatment. */
.launcher-tile-secondary {
  min-height: 120px;
  padding: 16px 18px 18px;
}
.launcher-tile-secondary .launcher-tile-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  margin-bottom: 4px;
}
.launcher-tile-secondary .launcher-tile-icon svg {
  width: 17px;
  height: 17px;
}
.launcher-tile-secondary .launcher-tile-label {
  font-size: 15px;
}
.launcher-tile-secondary .launcher-tile-desc {
  font-size: 12px;
}

/* Settings row: holds the 4 secondary tiles. */
.launcher-settings-row {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.launcher-tile-settings {
  width: 100%;
  max-width: 100%;
}
@media (max-width: 960px) {
  .launcher-settings-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .launcher-settings-row { grid-template-columns: 1fr; }
}

.launcher-tile {
  position: relative;
  display: grid;
  grid-template-areas:
    "icon arrow"
    "label label"
    "sub sub"
    "desc desc";
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 6px;
  text-align: left;
  padding: 20px 22px 22px;
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent 45%),
    var(--bg-1);
  border: 1px solid var(--border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 12px 28px rgba(0, 0, 0, 0.28);
  color: var(--text-1);
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
  min-height: 168px;
  overflow: hidden;
  isolation: isolate;
}
.launcher-tile::before {
  /* Tinted accent halo that brightens on hover. Sits behind content
     (z-index lower than children which inherit 1). */
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(120% 80% at 0% 0%, var(--tile-tint, transparent), transparent 60%);
  opacity: 0;
  transition: opacity 160ms ease;
  z-index: 0;
}
.launcher-tile > * { position: relative; z-index: 1; }
.launcher-tile:hover {
  transform: translateY(-2px);
  border-color: var(--border-stronger);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 18px 40px rgba(0, 0, 0, 0.42);
}
.launcher-tile:hover::before { opacity: 1; }
.launcher-tile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.launcher-tile:active { transform: translateY(0); }

.launcher-tile-icon {
  grid-area: icon;
  width: 44px; height: 44px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--tile-icon-bg, var(--bg-3));
  color: var(--tile-icon-fg, var(--text-1));
  border: 1px solid var(--tile-icon-border, var(--border-strong));
  margin-bottom: 6px;
}
.launcher-tile-icon svg { width: 22px; height: 22px; }

.launcher-tile-label {
  grid-area: label;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.launcher-tile-sub {
  grid-area: sub;
  font-size: 11.5px;
  font-family: var(--font-mono);
  color: var(--tile-sub-fg, var(--text-3));
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.launcher-tile-desc {
  grid-area: desc;
  font-size: 12.5px;
  color: var(--text-3);
  line-height: 1.5;
  margin-top: 4px;
}
.launcher-tile-arrow {
  grid-area: arrow;
  align-self: start;
  color: var(--text-4);
  transform: translateX(-4px);
  transition: transform 140ms ease, color 140ms ease;
}
.launcher-tile:hover .launcher-tile-arrow {
  transform: translateX(0);
  color: var(--tile-icon-fg, var(--accent-text));
}

/* Tone variants - colour the icon tile + halo, leave the body text
   neutral so the tile reads as a button, not a banner. */
.launcher-tile.tone-accent {
  --tile-tint: rgba(16, 37, 161, 0.18);
  --tile-icon-bg: var(--accent-soft);
  --tile-icon-fg: var(--accent-text);
  --tile-icon-border: rgba(16, 37, 161, 0.30);
}
.launcher-tile.tone-live {
  --tile-tint: rgba(255, 59, 48, 0.18);
  --tile-icon-bg: var(--live-soft);
  --tile-icon-fg: var(--live);
  --tile-icon-border: rgba(255, 59, 48, 0.30);
}
.launcher-tile.tone-purple {
  --tile-tint: rgba(181, 124, 250, 0.18);
  --tile-icon-bg: var(--purple-soft);
  --tile-icon-fg: var(--purple);
  --tile-icon-border: rgba(181, 124, 250, 0.30);
}
.launcher-tile.tone-success {
  --tile-tint: rgba(45, 212, 168, 0.16);
  --tile-icon-bg: var(--success-soft);
  --tile-icon-fg: var(--success);
  --tile-icon-border: rgba(45, 212, 168, 0.30);
}
.launcher-tile.tone-warn {
  --tile-tint: rgba(245, 166, 35, 0.18);
  --tile-icon-bg: var(--warning-soft);
  --tile-icon-fg: var(--warning);
  --tile-icon-border: rgba(245, 166, 35, 0.30);
}
.launcher-tile.tone-neutral {
  --tile-tint: rgba(255, 255, 255, 0.06);
  --tile-icon-bg: var(--bg-3);
  --tile-icon-fg: var(--text-1);
  --tile-icon-border: var(--border-stronger);
}
.launcher-tile.tone-ghost {
  --tile-tint: rgba(255, 255, 255, 0.04);
  --tile-icon-bg: transparent;
  --tile-icon-fg: var(--text-2);
  --tile-icon-border: var(--border);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent 50%),
    var(--bg-1);
}

.launcher-status {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 4px;
}
.launcher-status-pip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-family: var(--font-mono);
  color: var(--text-3);
  letter-spacing: 0.02em;
  padding: 6px 12px;
  border-radius: 99px;
  border: 1px solid var(--border);
  background: var(--bg-1);
}
.launcher-status-pip .dot {
  width: 6px; height: 6px; border-radius: 50%;
  box-shadow: 0 0 0 3px var(--success-soft);
}
.launcher-status-pip .muted { color: var(--text-4); margin-left: 2px; }
.launcher-status-pip.live .dot {
  box-shadow: 0 0 0 3px var(--live-soft);
  animation: pulse 1.6s ease-in-out infinite;
}

.launcher-footer {
  margin-top: 20px;
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-4);
}

/* ============================================================
   Motion layer — entry stagger for launcher tiles.
   Respects prefers-reduced-motion.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .launcher-tile {
    animation: tileEnter 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .launcher-grid .launcher-tile:nth-child(1) { animation-delay: 60ms; }
  .launcher-grid .launcher-tile:nth-child(2) { animation-delay: 110ms; }
  .launcher-grid .launcher-tile:nth-child(3) { animation-delay: 160ms; }
  .launcher-grid .launcher-tile:nth-child(4) { animation-delay: 210ms; }
  .launcher-grid .launcher-tile:nth-child(5) { animation-delay: 250ms; }
  .launcher-grid .launcher-tile:nth-child(6) { animation-delay: 290ms; }
  .launcher-settings-row .launcher-tile      { animation-delay: 320ms; }

  @keyframes tileEnter {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* Tactile press feedback on high-stakes operational buttons. */
.btn-record:active,
button.btn.primary:active {
  transform: scale(0.97);
  transition: transform 80ms ease-out;
}

/* Smooth active-item transition in sidebar nav. */
.nav-item {
  transition: background 150ms ease-out, color 150ms ease-out;
}

/* ============================================================
   Recorder row - signal indicator with a pulsing dot when
   actually receiving frames. Closes part of #2.
   ============================================================ */
.signal-val {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.signal-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.04);
}
.signal-dot.receiving {
  animation: signalPulse 1.4s ease-in-out infinite;
}
@keyframes signalPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(45, 212, 168, 0.6); }
  50%      { box-shadow: 0 0 0 6px rgba(45, 212, 168, 0); }
}

/* ============================================================
   BMD card diagram - rendered inside the Cluster node panel.
   The SVG is generated by bmd-card.js; styles live here so
   they inherit the app CSS custom properties at render time.
   ============================================================ */
.bmd-card-diagram {
  width: 100%;
  overflow: hidden;
}
.bmd-card-svg {
  width: 100%;
  height: auto;
  display: block;
}
.bmd-card-body {
  fill: var(--bg-3, #1e2130);
  stroke: var(--border, #2d3147);
  stroke-width: 1;
}
.bmd-card-bracket {
  fill: var(--bg-1, #13151f);
  stroke: var(--border, #2d3147);
  stroke-width: 1.5;
}
.bmd-card-trace {
  stroke: rgba(16, 37, 161, 0.12);
  stroke-width: 0.5;
  fill: none;
}
.bmd-port-group {
  transition: opacity 0.15s;
}
.bmd-port-group:hover {
  opacity: 0.85;
}
.bmd-port-ring {
  fill: var(--bg-1, #13151f);
  stroke: var(--border, #2d3147);
  stroke-width: 1.5;
}
.bmd-port-pin {
  fill: var(--text-4, #4a4f61);
}
.bmd-port-label {
  fill: var(--text-1, #e8eaf6);
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-mono, monospace);
}
.bmd-port-sublabel {
  fill: var(--text-3, #7a8194);
  font-size: 8.5px;
  font-family: var(--font-mono, monospace);
}
.bmd-card-model {
  fill: var(--text-4, #4a4f61);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-family: var(--font-mono, monospace);
}
/* Signal presence dot overlaid on each BNC connector */
.bmd-port-signal {
  opacity: 0.95;
  filter: drop-shadow(0 0 2px currentColor);
}
.bmd-port-signal--pulse {
  animation: bmdPortPulse 1.4s ease-in-out infinite;
}
@keyframes bmdPortPulse {
  0%, 100% { opacity: 0.95; r: 4; }
  50%      { opacity: 0.6;  r: 5; }
}

/* ========== Mobile sidebar (issue #134) ========== */
.topbar-menu { display: none; }
@media (max-width: 768px) {
  .topbar-menu { display: grid; place-items: center; }
  .app { grid-template-columns: 0 1fr; }
  .app[data-sidebar="expanded"] { grid-template-columns: 220px 1fr; }
  .app[data-sidebar="expanded"] .sidebar {
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    width: 220px;
    z-index: 200;
    box-shadow: 0 0 40px rgba(0,0,0,0.6);
  }
  .app[data-sidebar="collapsed"] .sidebar { display: none; }
  .app[data-sidebar="expanded"]::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 199;
  }
}

/* ========== Sidebar collapse/expand (issue #142) ========== */
.sidebar-header { gap: 8px; }
.sidebar-toggle {
  flex-shrink: 0;
  margin-left: auto;
  width: 28px; height: 28px;
  display: grid; place-items: center;
}
.app[data-sidebar="collapsed"] .brand-name,
.app[data-sidebar="collapsed"] .brand-sub,
.app[data-sidebar="collapsed"] .nav-item > span,
.app[data-sidebar="collapsed"] .nav-section-label,
.app[data-sidebar="collapsed"] .nav-badge,
.app[data-sidebar="collapsed"] .nav-item.has-children > .nav-caret,
.app[data-sidebar="collapsed"] .nav-children,
.app[data-sidebar="collapsed"] .user-meta {
  display: none !important;
}
.app[data-sidebar="collapsed"] .brand-link { gap: 0; justify-content: center; flex: 0; }
.app[data-sidebar="collapsed"] .sidebar-header { padding: 0 6px; justify-content: center; }
.app[data-sidebar="collapsed"] .sidebar-toggle { margin: 0; }
.app[data-sidebar="collapsed"] .nav-item { justify-content: center; padding: 0; }
.app[data-sidebar="collapsed"] .sidebar-footer { padding: 10px 6px; justify-content: center; }
.app[data-sidebar="collapsed"] .sidebar-footer .icon-btn { display: none; }
.app[data-sidebar="collapsed"] .nav-item { position: relative; }
.app[data-sidebar="collapsed"] .nav-item:hover::after {
  content: attr(data-tip);
  position: absolute;
  left: 100%;
  margin-left: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text-1);
  font-size: 12px;
  padding: 4px 8px;
  radius: var(--r-sm);
  white-space: nowrap;
  z-index: 100;
  pointer-events: none;
}

/* ── Resource utilization cards (screens-resources.jsx) ── */
.res-nodes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.res-node-card {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.res-node-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.res-node-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px var(--success-soft);
  flex-shrink: 0;
}
.res-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.res-metric-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  font-family: var(--font-mono);
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.res-metric-sub {
  color: var(--text-4);
  font-weight: 400;
}
.res-bar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.res-bar {
  flex: 1;
  height: 6px;
  background: var(--bg-4);
  border-radius: 99px;
  overflow: hidden;
}
.res-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.6s ease;
}
.res-bar-pct {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-3);
  min-width: 32px;
  text-align: right;
}
.res-mock-note {
  font-size: 11px;
  color: var(--warning);
  background: var(--warning-soft);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  margin-bottom: 10px;
  font-family: var(--font-mono);
}
