/* compute_runtime.css — RUNTIME CU (residency) page. Isolated stylesheet.
   Scoped under #compute-runtime-root so it cannot affect any existing surface.
   Not linked from index.html: wiring is a separate integration step. */

#compute-runtime-root {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--text, #e6e6e6);
}

#compute-runtime-root .rt-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
}

#compute-runtime-root .rt-legend {
  flex: 1 1 320px;
  font-size: 12px;
  color: #8a93a6;
}

#compute-runtime-root .rt-selected-count {
  font-size: 12px;
  color: #8a93a6;
}

#compute-runtime-root .rt-btn {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}

#compute-runtime-root .rt-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

#compute-runtime-root .rt-btn-load {
  border-color: rgba(118, 185, 0, 0.5);
  color: #9ede4a;
}

#compute-runtime-root .rt-btn-unload {
  border-color: rgba(237, 28, 36, 0.45);
  color: #ff8a8a;
}

#compute-runtime-root .rt-machine {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  overflow: hidden;
}

#compute-runtime-root .rt-machine-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#compute-runtime-root .rt-machine-name {
  font-weight: 600;
}

#compute-runtime-root .rt-machine-status,
#compute-runtime-root .rt-machine-owner,
#compute-runtime-root .rt-machine-count {
  font-size: 12px;
  color: #8a93a6;
}

#compute-runtime-root .rt-rows {
  display: flex;
  flex-direction: column;
}

#compute-runtime-root .rt-row-wrap + .rt-row-wrap {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

#compute-runtime-root .rt-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  font-size: 13px;
}

#compute-runtime-root .rt-select-wrap {
  display: inline-flex;
  align-items: center;
}

#compute-runtime-root .rt-id {
  font-weight: 600;
  min-width: 52px;
}

#compute-runtime-root .rt-cap {
  min-width: 48px;
  color: #8a93a6;
  font-size: 12px;
}

#compute-runtime-root .rt-model {
  flex: 1 1 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#compute-runtime-root .rt-resource {
  flex: 1 1 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #b9c0cc;
}

#compute-runtime-root .rt-engine,
#compute-runtime-root .rt-accel {
  font-size: 12px;
  color: #8a93a6;
  white-space: nowrap;
}

#compute-runtime-root .rt-state {
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 11px;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

#compute-runtime-root .rt-state-UNLOADED { color: #8a93a6; }
#compute-runtime-root .rt-state-LOADING { color: #ff9f43; }
#compute-runtime-root .rt-state-LOADED { color: #58a6ff; }
#compute-runtime-root .rt-state-RUNTIME_READY { color: #9ede4a; border-color: rgba(118, 185, 0, 0.5); }
#compute-runtime-root .rt-state-UNLOADING { color: #ff9f43; }
#compute-runtime-root .rt-state-FAILED { color: #ff6b6b; border-color: rgba(237, 28, 36, 0.5); }
#compute-runtime-root .rt-state-UNKNOWN { color: #8a93a6; border-style: dashed; }

#compute-runtime-root .rt-usable {
  font-size: 11px;
  color: #9ede4a;
}

#compute-runtime-root .rt-not-usable {
  font-size: 11px;
  color: #ff9f43;
}

#compute-runtime-root .rt-pending {
  font-size: 11px;
  color: #ff9f43;
}

#compute-runtime-root .rt-op-reason {
  font-size: 11px;
  color: #8a93a6;
}

#compute-runtime-root .rt-actions {
  display: inline-flex;
  gap: 6px;
}

#compute-runtime-root .rt-noop {
  color: #8a93a6;
}

#compute-runtime-root .rt-detail-btn {
  margin-left: auto;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: transparent;
  color: inherit;
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 11px;
  cursor: pointer;
}

#compute-runtime-root .rt-panel {
  padding: 10px 14px 14px;
  background: rgba(0, 0, 0, 0.18);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

#compute-runtime-root .rt-panel[hidden] {
  display: none;
}

#compute-runtime-root .rt-panel-section {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 8px 10px;
}

#compute-runtime-root .rt-panel-title {
  margin: 0 0 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #8a93a6;
}

#compute-runtime-root .rt-kv {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  padding: 1px 0;
}

#compute-runtime-root .rt-kv-k {
  color: #8a93a6;
}

#compute-runtime-root .rt-kv-v {
  text-align: right;
}

#compute-runtime-root .rt-policy-hint {
  margin: 6px 0 0;
  font-size: 11px;
  color: #8a93a6;
}

#compute-runtime-root .rt-conflict {
  font-size: 12px;
  color: #ff9f43;
  padding: 1px 0;
}

#compute-runtime-root .rt-no-conflict {
  font-size: 12px;
  color: #8a93a6;
}

#compute-runtime-root .rt-memory {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#compute-runtime-root .rt-memory-unknown {
  font-size: 12px;
  color: #8a93a6;
}

#compute-runtime-root .rt-mem-line {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  align-items: baseline;
}

#compute-runtime-root .rt-mem-key {
  min-width: 42px;
  color: #8a93a6;
}

#compute-runtime-root .rt-mem-label {
  flex: 1 1 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#compute-runtime-root .rt-mem-cur,
#compute-runtime-root .rt-mem-proj,
#compute-runtime-root .rt-mem-total {
  color: #b9c0cc;
}

#compute-runtime-root .rt-mem-overflow {
  color: #ff6b6b;
}

#compute-runtime-root .rt-preview {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
}

#compute-runtime-root .rt-preview.rt-ok {
  border-color: rgba(118, 185, 0, 0.45);
}

#compute-runtime-root .rt-preview.rt-blocked {
  border-color: rgba(237, 28, 36, 0.45);
}

#compute-runtime-root .rt-preview-head {
  font-weight: 600;
  margin-bottom: 6px;
}

#compute-runtime-root .rt-reasons {
  margin: 0 0 8px;
  padding-left: 18px;
  color: #ff9f43;
}

#compute-runtime-root .rt-preview-machine {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 8px;
  padding-top: 8px;
}

#compute-runtime-root .rt-preview-machine-head {
  font-weight: 600;
  font-size: 12px;
}

#compute-runtime-root .rt-preview-machine-reason {
  font-size: 12px;
  color: #ff9f43;
}

#compute-runtime-root .rt-preview-resources {
  font-size: 12px;
  color: #8a93a6;
  margin-bottom: 6px;
}

#compute-runtime-root .rt-preview-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

#compute-runtime-root .rt-message {
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
}

#compute-runtime-root .rt-message-ok {
  border: 1px solid rgba(118, 185, 0, 0.45);
  color: #9ede4a;
}

#compute-runtime-root .rt-message-error {
  border: 1px solid rgba(237, 28, 36, 0.45);
  color: #ff8a8a;
}

#compute-runtime-root .rt-empty {
  padding: 14px 12px;
  font-size: 13px;
  color: #8a93a6;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 8px;
}