/* ==========================================================================
   View-specific layout.
   ========================================================================== */

.only-narrow { display: none; }
@media (max-width: 1200px) { .only-narrow { display: inline-flex; } }

/* --- Sub-header strip: target node, live counters, quick actions ---------- */

.subhead {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-sm) var(--sp-md);
  padding: var(--sp-sm) var(--sp-md);
  background: rgb(var(--panel-3-rgb) / 0.8);
  backdrop-filter: blur(var(--blur-1));
  -webkit-backdrop-filter: blur(var(--blur-1));
  border: 1px solid var(--stroke);
  border-radius: var(--r-xl);
}

/* --- Dashboard ----------------------------------------------------------- */

.kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--gutter);
}

.kpi {
  position: relative;
  z-index: 1;
  padding: var(--sp-md);
  background: var(--glass-1);
  backdrop-filter: blur(var(--blur-1));
  -webkit-backdrop-filter: blur(var(--blur-1));
  border: 1px solid var(--stroke);
  border-radius: var(--r-xl);
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
  min-width: 0;
  contain: layout style;
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

.kpi:hover { border-color: rgb(var(--accent-rgb) / 0.3); }
.kpi.warn { border-color: rgb(255 185 95 / 0.4); box-shadow: var(--glow-warn); }
.kpi.crit { border-color: rgb(239 68 68 / 0.5); box-shadow: var(--glow-crit); }

/* --- Thermal / memory grids ---------------------------------------------- */

.grid-panel { min-height: 0; }

.legend {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  flex-wrap: wrap;
}
.legend .swatch {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* --- Node cards (Host Nodes) --------------------------------------------- */

.node-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--gutter);
}

.node-card {
  position: relative;
  z-index: 1;
  background: var(--glass-1);
  backdrop-filter: blur(var(--blur-1));
  -webkit-backdrop-filter: blur(var(--blur-1));
  border: 1px solid var(--stroke);
  border-radius: var(--r-xl);
  padding: var(--sp-md);
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  cursor: pointer;
  contain: layout style;
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease),
    transform var(--t-fast) var(--ease);
}

.node-card:hover { border-color: rgb(var(--accent-rgb) / 0.35); transform: translateY(-1px); }
.node-card.selected { border-color: var(--primary-container); box-shadow: var(--glow-live); }
.node-card.warn { border-color: rgb(255 185 95 / 0.45); }
.node-card.crit { border-color: rgb(239 68 68 / 0.5); box-shadow: var(--glow-crit); }
.node-card.idle { opacity: 0.55; }

.node-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-sm);
}

/* --- Trace waterfall ------------------------------------------------------ */

.waterfall {
  display: flex;
  flex-direction: column;
  font-family: var(--font-mono);
  font-size: var(--fs-code);
}

.span-row {
  display: grid;
  grid-template-columns: 250px 1fr 76px;
  gap: var(--sp-sm);
  align-items: center;
  padding: 3px var(--sp-sm);
  border-bottom: 1px solid rgb(var(--fg-rgb) / 0.03);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.span-row:hover { background: rgb(var(--accent-rgb) / 0.05); }
.span-row.selected { background: rgb(var(--accent-rgb) / 0.08); box-shadow: inset 2px 0 0 var(--primary-container); }

.span-track {
  position: relative;
  height: 14px;
  background: rgb(var(--fg-rgb) / 0.03);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.span-bar {
  position: absolute;
  top: 2px;
  bottom: 2px;
  border-radius: var(--r-sm);
  background: var(--signal-live);
  min-width: 2px;
}
.span-bar.error { background: var(--signal-crit); box-shadow: 0 0 8px rgb(239 68 68 / 0.5); }

@media (max-width: 900px) {
  .span-row { grid-template-columns: 150px 1fr 60px; }
}

/* --- Topology / mesh ------------------------------------------------------ */

.mesh-canvas { height: 320px; position: relative; }

/* --- Log explorer --------------------------------------------------------- */

.log-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--gutter);
  align-items: start;
}

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

.facet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
  padding: 3px var(--sp-sm);
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: var(--fs-body-sm);
  transition: background var(--t-fast) var(--ease);
}
.facet-row:hover { background: var(--surface-high); }
.facet-row.active { background: rgb(var(--accent-rgb) / 0.1); color: var(--primary-container); }

.log-scroll {
  max-height: 560px;
  overflow-y: auto;
  overflow-x: hidden;
  /* Skip layout and paint for lines scrolled out of view — the difference
     between a smooth stream and a stuttering one at 2000 rows. */
  content-visibility: auto;
  contain-intrinsic-size: auto 560px;
}

/* --- Explorer / query studio ---------------------------------------------- */

.query-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm);
  background: rgb(var(--panel-rgb) / 0.8);
  border: 1px solid rgb(var(--fg-rgb) / 0.12);
  border-radius: var(--r-lg);
  font-family: var(--font-mono);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.query-bar:focus-within {
  border-color: var(--primary-container);
  box-shadow: 0 0 0 1px var(--primary-container);
}
.query-bar input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  font-family: var(--font-mono);
  font-size: var(--fs-code);
  color: var(--on-surface);
  min-width: 0;
}

.panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: var(--gutter);
}

/* --- RBAC matrix ---------------------------------------------------------- */

.rbac {
  display: grid;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: var(--fs-label-sm);
}

.rbac-cell {
  padding: 6px 4px;
  text-align: center;
  border-radius: var(--r-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.rbac-cell.full { background: var(--tint-ok); color: var(--signal-ok); }
.rbac-cell.limited { background: var(--tint-warn); color: var(--signal-warn); }
.rbac-cell.none { background: rgb(var(--fg-rgb) / 0.03); color: var(--outline); }
.rbac-head { padding: 6px 4px; color: var(--outline); text-transform: uppercase; letter-spacing: 0.08em; }

/* --- Login ---------------------------------------------------------------- */

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--margin);
  position: relative;
  overflow: hidden;
}

.login-card {
  width: min(460px, 100%);
  background: var(--glass-3);
  backdrop-filter: blur(var(--blur-3));
  -webkit-backdrop-filter: blur(var(--blur-3));
  border: 1px solid rgb(var(--accent-rgb) / 0.2);
  border-radius: var(--r-xl);
  box-shadow: var(--elev-3);
  padding: var(--sp-lg);
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  position: relative;
  z-index: 2;
}

/* --- Settings ------------------------------------------------------------- */

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  padding: var(--sp-sm) 0;
  border-bottom: 1px solid rgb(var(--fg-rgb) / 0.04);
}
.setting-row:last-child { border-bottom: 0; }

/* --- NUMA / cache tiers --------------------------------------------------- */

.numa-node {
  padding: var(--sp-sm);
  background: rgb(var(--fg-rgb) / 0.02);
  border: 1px solid var(--stroke);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}

.core-pill {
  padding: 1px 5px;
  border-radius: var(--r-sm);
  background: var(--surface-high);
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--on-surface-variant);
}

/* --- Pod inspector drawer ------------------------------------------------- */

.drawer-head {
  padding: var(--sp-md);
  border-bottom: 1px solid var(--stroke);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
  flex-shrink: 0;
}
.drawer-body {
  padding: var(--sp-md);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}

/* --- Sparkline cell inside a table ---------------------------------------- */

.cell-spark {
  width: 84px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
}

/* --- Status rail: thin vertical severity marker --------------------------- */

.rail {
  width: 3px;
  border-radius: var(--r-full);
  align-self: stretch;
  background: var(--signal-idle);
  flex-shrink: 0;
}
.rail.ok { background: var(--signal-ok); }
.rail.warn { background: var(--signal-warn); }
.rail.crit { background: var(--signal-crit); box-shadow: 0 0 8px rgb(239 68 68 / 0.5); }
.rail.live { background: var(--signal-live); }