/* =============================================================================
   control.css — Operations Center page styles
   Light indigo design system. All colours via design tokens only.
   ============================================================================= */

/* ── Page canvas ─────────────────────────────────────────────────────────── */
.oc-canvas {
  background: var(--surface-1);
  padding: var(--space-6) 0 var(--space-8);
  min-height: calc(100vh - var(--topbar-height));
}

/* ── Hero row ─────────────────────────────────────────────────────────────── */
.oc-hero {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.oc-hero__title {
  font-size: clamp(22px, 3.5vw, 34px);
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--brand-500) 0%, var(--accent-500) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.1;
  margin: 0;
}

.oc-hero__clock {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
}

.oc-hero__live {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px 10px;
  background: var(--success-50);
  color: var(--success-700);
  border: 1px solid color-mix(in srgb, var(--success-500) 25%, transparent);
  border-radius: var(--radius-pill);
  font: var(--text-caption);
  letter-spacing: 0.08em;
}

.oc-hero__sound-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-0);
  color: var(--text-secondary);
  font: var(--text-small);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.oc-hero__sound-btn:hover {
  border-color: var(--brand-500);
  color: var(--brand-600);
}
.oc-hero__sound-btn.muted {
  color: var(--text-tertiary);
  border-color: var(--border-subtle);
}

/* Run-fleet action — the prominent primary button in the hero */
.oc-hero__run-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: var(--space-2); padding: 5px 13px;
  border: 1px solid transparent; border-radius: var(--radius-md);
  background: linear-gradient(90deg, var(--brand-600, #4f46e5), #7c3aed);
  color: #fff; font: var(--text-small); font-weight: 600;
  cursor: pointer; box-shadow: 0 2px 8px rgba(79, 70, 229, .30);
  transition: filter .15s, opacity .15s;
}
.oc-hero__run-btn:hover { filter: brightness(1.08); }
.oc-hero__run-btn:disabled { opacity: .72; cursor: progress; box-shadow: none; }
.oc-hero__run-btn.running svg { animation: ocSpin 1s linear infinite; }
@keyframes ocSpin { to { transform: rotate(360deg); } }

.oc-hero__lastrun {
  font: var(--text-small); color: var(--text-tertiary);
  margin-left: var(--space-2); white-space: nowrap;
}

/* ── Loader status strip ─────────────────────────────────────────────────── */
.oc-loaders {
  background: var(--surface-0);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-1);
  margin-bottom: var(--space-5);
}

.oc-loader-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.oc-loader-row:last-child {
  border-bottom: none;
}

.oc-loader-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
  background: var(--border-default);
  transition: background 0.35s, box-shadow 0.35s;
}
.oc-loader-dot.done {
  background: var(--success-500);
  box-shadow: 0 0 6px color-mix(in srgb, var(--success-500) 50%, transparent);
  animation: oc-dot-pulse 2.5s infinite;
}
@keyframes oc-dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.oc-loader-name {
  font: var(--text-body-strong);
  color: var(--text-primary);
  min-width: 120px;
}
.oc-loader-name.pending {
  color: var(--text-tertiary);
}

.oc-loader-detail {
  font: var(--text-small);
  color: var(--text-tertiary);
}

/* ── Network graph section ────────────────────────────────────────────────── */
.oc-graph-section {
  background: var(--surface-0);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-1);
  margin-bottom: var(--space-5);
  overflow-x: auto;
}

.oc-graph-title {
  font: var(--text-heading);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-4);
  font-size: 11px;
}

/* The SVG fills the section and scales down on small screens */
#oc-svg {
  display: block;
  width: 100%;
  max-width: 920px;
  height: auto;
  margin: 0 auto;
}

/* ── SVG node styles (used inside the SVG via CSS) ───────────────────────── */
.oc-node-rect {
  fill: var(--surface-0);
  stroke: var(--border-default);
  stroke-width: 1.5;
  rx: 8;
  transition: stroke 0.35s, fill 0.35s;
}
.oc-node-rect.senior {
  fill: var(--brand-50);
  stroke: var(--brand-500);
  stroke-width: 2;
}
.oc-node-rect.active {
  stroke: var(--success-500);
  fill: color-mix(in srgb, var(--success-500) 5%, white);
}
.oc-node-text {
  font: 600 10px/1 var(--font-sans);
  fill: var(--text-secondary);
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}
.oc-node-text.senior {
  fill: var(--brand-600);
}
.oc-node-status-dot {
  r: 4;
  fill: var(--border-default);
  transition: fill 0.35s, filter 0.35s;
}
.oc-node-status-dot.active {
  fill: var(--success-500);
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--success-500) 70%, transparent));
  animation: oc-dot-pulse 2s infinite;
}
.oc-edge {
  fill: none;
  stroke: var(--border-default);
  stroke-width: 1.5;
  transition: stroke 0.35s;
}

/* ── Particle circle (animating along edge) ──────────────────────────────── */
.oc-particle {
  r: 4;
  fill: var(--brand-500);
  filter: drop-shadow(0 0 4px var(--brand-500));
}

/* ── Message feed ─────────────────────────────────────────────────────────── */
.oc-feed-section {
  background: var(--surface-0);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-1);
  margin-bottom: var(--space-5);
}

.oc-feed-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.oc-feed-header__title {
  font: var(--text-heading);
  color: var(--text-primary);
}
.oc-feed-header__count {
  font: var(--text-small);
  color: var(--text-tertiary);
}

#msgLog {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 280px;
  overflow-y: auto;
}

.oc-msg-item {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: 8px var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
  font: var(--text-small);
  color: var(--text-secondary);
  animation: oc-msg-in 0.3s ease;
}
.oc-msg-item:first-child {
  border-top: 1px solid var(--border-subtle);
}
.oc-msg-item:last-child {
  border-bottom: none;
}
@keyframes oc-msg-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.oc-msg-time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-tertiary);
  flex: none;
  min-width: 60px;
}
.oc-msg-from {
  font-weight: 600;
  color: var(--text-primary);
  min-width: 140px;
}
.oc-msg-arrow {
  color: var(--brand-500);
  flex: none;
  font-size: 12px;
}
.oc-msg-to {
  font-weight: 600;
  color: var(--text-primary);
  min-width: 140px;
}
.oc-msg-summary {
  color: var(--text-tertiary);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oc-feed-empty {
  text-align: center;
  padding: var(--space-8) 0;
  color: var(--text-tertiary);
  font: var(--text-body);
}

/* ── Counters row ─────────────────────────────────────────────────────────── */
.oc-counters {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.oc-counter-card {
  flex: 1;
  min-width: 180px;
  background: var(--surface-0);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-1);
}

.oc-counter-card__label {
  font: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
}

.oc-counter-card__value {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.oc-counter-card__value.brand {
  color: var(--brand-500);
}

/* ── Reduced-motion overrides ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .oc-loader-dot.done { animation: none; }
  .oc-node-status-dot.active { animation: none; }
  .oc-msg-item { animation: none; }
}

/* ── Responsive tweaks ────────────────────────────────────────────────────── */
@media (max-width: 680px) {
  .oc-hero { gap: var(--space-2); }
  .oc-counters { flex-direction: column; }
  .oc-msg-from, .oc-msg-to { min-width: 80px; }
}