/* ============================================================
   Synapse — Cockpit light theme.
   Design tokens copied verbatim from synapse_pages.html.
   ============================================================ */
:root {
  --bg: #f6f8fb;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --surface-3: #f1f5f9;
  --border: #e4e8ee;
  --border-strong: #d4dae3;
  --text: #0f172a;
  --text-muted: #475569;
  --text-faint: #64748b;
  --text-ghost: #94a3b8;
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-soft: #eff4ff;
  --primary-border: #c7d7fe;
  --success: #059669;
  --success-soft: #ecfdf5;
  --success-border: #a7f3d0;
  --danger: #dc2626;
  --danger-soft: #fef2f2;
  --danger-border: #fecaca;
  --warn: #d97706;
  --warn-soft: #fffbeb;
  --warn-border: #fcd34d;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
}

html,
body {
  overflow: hidden;
  height: 100vh;
}

body.synapse {
  font-family: 'Inter Tight', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  margin: 0;
  height: 100vh;
  overflow: hidden;
}

/* ====== Cockpit layout ====== */
.page {
  background: var(--bg);
  color: var(--text);
  height: 100vh;
  display: grid;
  grid-template-columns: 220px 1fr;
  position: relative;
  overflow: hidden;
}

/* Sidebar */
.side {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 22px 0;
  overflow: hidden;
}
.side-item,
.side-name,
.side-section,
.side-user .name,
.side-user .role {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
.side-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.side-nav {
  flex: 1;
}
.side-brand {
  padding: 0 22px 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.side-logo {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.side-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.side-section {
  padding: 18px 22px 8px;
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--text-ghost);
  text-transform: uppercase;
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
}
.side-item {
  padding: 8px 22px;
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  border-left: 2px solid transparent;
  text-decoration: none;
}
.side-item:hover {
  color: var(--text);
  background: var(--surface-2);
}
.side-item.active {
  color: var(--primary);
  border-left-color: var(--primary);
  background: var(--primary-soft);
  font-weight: 600;
}
.side-item .ic {
  display: none;
}
.side-foot {
  margin-top: auto;
  padding: 14px 22px;
  border-top: 1px solid var(--border);
}
.side-user {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
}
.side-user .av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  color: #fff;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.side-user .name {
  font-weight: 600;
  color: var(--text);
}
.side-user .role {
  font-size: 11px;
  color: var(--text-faint);
}
.side-logout {
  margin-top: 12px;
}
.side-logout button {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-faint);
  padding: 7px 10px;
  font-size: 12px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
}
.side-logout button:hover {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: var(--danger-border);
}

/* Main column */
.main {
  padding: 32px 40px;
  min-width: 0;
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}
.bread {
  color: var(--text-faint);
  font-size: 13px;
}
.bread a {
  color: var(--text-faint);
  text-decoration: none;
}
.bread a:hover {
  color: var(--text);
}
.bread b {
  color: var(--text);
  font-weight: 600;
}
.bread .sep {
  margin: 0 8px;
  color: var(--text-ghost);
}
.actions {
  display: flex;
  gap: 10px;
}

/* Buttons */
.btn {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}
.btn:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.btn.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.btn.primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}
.btn.danger {
  background: var(--surface);
  border-color: var(--danger-border);
  color: var(--danger);
}
.btn.danger:hover {
  background: var(--danger-soft);
}
.btn.ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.btn.ghost:hover {
  background: var(--surface-2);
}
.btn.sm {
  padding: 6px 12px;
  font-size: 12px;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Page title */
.page-head {
  margin-bottom: 24px;
}
.page-head h2 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
}
.page-head p {
  font-size: 14px;
  color: var(--text-faint);
  margin-top: 6px;
}
code,
.code {
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
}
.page-head code,
.card-head code,
.field .hint code {
  background: var(--surface-3);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--primary);
  border: 1px solid var(--border);
}

/* Card */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.card-head {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card-head h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}
.card-head p {
  font-size: 12.5px;
  color: var(--text-faint);
  margin-top: 3px;
}
.card-body {
  padding: 22px;
}
.card-body.flush {
  padding: 0;
}
.card-body.tight {
  padding: 0 22px;
}
.card-foot {
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Forms */
.field {
  margin-bottom: 18px;
}
.field:last-child {
  margin-bottom: 0;
}
.field label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.field .hint {
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 6px;
}
.field .err {
  font-size: 12px;
  color: var(--danger);
  margin-top: 6px;
  font-weight: 500;
}
.field input[type='text'],
.field input[type='password'],
.field select {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  transition: all 0.15s;
}
.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.field input.bad {
  border-color: var(--danger);
}
.field input::placeholder {
  color: var(--text-ghost);
}

/* Code block */
.codeblock {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
  font-size: 12.5px;
  color: var(--text);
  overflow-x: auto;
  white-space: pre;
  line-height: 1.6;
}

/* Pill / chip */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 11.5px;
  font-weight: 500;
  border: 1px solid transparent;
}
.pill .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.pill.done {
  background: var(--success-soft);
  color: var(--success);
  border-color: var(--success-border);
}
.pill.failed {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: var(--danger-border);
}
.pill.running {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: var(--primary-border);
}
.pill.skipped {
  background: var(--surface-3);
  color: var(--text-faint);
  border-color: var(--border);
}
.pill.warn {
  background: var(--warn-soft);
  color: var(--warn);
  border-color: var(--warn-border);
}
.pill.muted {
  background: var(--surface-3);
  color: var(--text-faint);
  border-color: var(--border);
}

/* Tenant row */
.tenant-row {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}
.tenant-row:last-child {
  border-bottom: 0;
}
.tenant-row:hover {
  background: var(--surface-2);
}
.tenant-av {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
}
.tenant-av.av-blue {
  background: #eff4ff;
  border: 1px solid #c7d7fe;
  color: #2563eb;
}
.tenant-av.av-purple {
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  color: #7c3aed;
}
.tenant-av.av-green {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #059669;
}
.tenant-av.av-amber {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  color: #b45309;
}
.tenant-av.av-rose {
  background: #fff1f2;
  border: 1px solid #fecdd3;
  color: #be123c;
}
.tenant-av.av-slate {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #475569;
}
.tenant-meta .name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.tenant-meta .path {
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 3px;
}
.tenant-acts {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Radio group */
.radio-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.radio-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.15s;
  display: block;
}
.radio-card:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
}
.radio-card.checked,
.radio-card:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}
.radio-card .rc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.radio-card .rc-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  flex-shrink: 0;
  position: relative;
}
.radio-card.checked .rc-dot,
.radio-card:has(input:checked) .rc-dot {
  border-color: var(--primary);
}
.radio-card.checked .rc-dot::after,
.radio-card:has(input:checked) .rc-dot::after {
  content: '';
  position: absolute;
  inset: 2px;
  background: var(--primary);
  border-radius: 50%;
}
.radio-card .rc-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.radio-card .rc-sub {
  font-size: 11px;
  color: var(--text-faint);
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
  padding-left: 24px;
}
.radio-card input[type='radio'] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Stat cards */
.stats.stats-2col {
  grid-template-columns: repeat(2, minmax(0, 360px));
}
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  box-shadow: var(--shadow-sm);
}
.stat .label {
  font-size: 11px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
  margin-bottom: 12px;
}
.stat .val {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text);
}
.stat .val.done {
  color: var(--success);
}
.stat .val.warn {
  color: var(--danger);
}
.stat .val.info {
  color: var(--primary);
}
.stat .sub {
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 6px;
}
.stat .spark {
  height: 36px;
  margin-top: 8px;
}

/* Progress bar */
.progress {
  height: 6px;
  background: var(--surface-3);
  border-radius: 100px;
  overflow: hidden;
}
.progress .fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--success));
  border-radius: 100px;
  transition: width 0.3s;
}
.progress.mini {
  height: 4px;
  width: 80px;
}
.progress-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  height: 8px;
  border-radius: 100px;
  overflow: hidden;
  background: var(--surface-3);
}
.progress-3 .seg {
  background: var(--surface-3);
  position: relative;
  transition: background 0.3s;
}
.progress-3 .seg.done {
  background: var(--success);
}
.progress-3 .seg.running {
  background: var(--primary);
}
.progress-3 .seg.failed {
  background: var(--danger);
}

/* Table */
.tbl {
  width: 100%;
  border-collapse: collapse;
}
.tbl thead th {
  text-align: center;
  padding: 11px 18px;
  font-size: 11px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.tbl tbody td {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  vertical-align: middle;
  color: var(--text);
  text-align: center;
}
.tbl tbody tr:last-child td {
  border-bottom: 0;
}
.tbl tbody tr:hover {
  background: var(--surface-2);
}
.tbl td.mono {
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
  color: var(--text-muted);
}
.tbl td .fs-id {
  color: var(--text-faint);
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
  font-size: 12px;
}
.tbl td .legacy-id {
  color: var(--text);
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
  font-weight: 500;
}

/* Two-col layout */
.two-col {
  display: grid;
  gap: 18px;
}

/* KV list */
.kv {
  display: grid;
  grid-template-columns: 200px 1fr;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.kv:last-child {
  border-bottom: 0;
}
.kv .k {
  font-size: 13px;
  color: var(--text-faint);
}
.kv .v {
  font-size: 13px;
  color: var(--text);
}
.kv .v code {
  background: var(--surface-3);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text);
  border: 1px solid var(--border);
}

/* Numbered steps */
.steps {
  counter-reset: step;
  padding: 0;
  list-style: none;
  margin: 0;
}
.steps li {
  counter-increment: step;
  padding: 12px 0 12px 44px;
  position: relative;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.65;
  border-bottom: 1px solid var(--border);
}
.steps li:last-child {
  border-bottom: 0;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 12px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary-soft);
  border: 1px solid var(--primary-border);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
}

/* Pipeline cell */
.step-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}
.step-cell .t {
  font-size: 11px;
  color: var(--text-ghost);
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
}

/* Run header banner */
.run-banner {
  background: linear-gradient(135deg, var(--primary-soft) 0%, var(--surface) 100%);
  border: 1px solid var(--primary-border);
  border-radius: 12px;
  padding: 22px 24px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.run-banner h2 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}
.run-banner .meta {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.run-banner .meta .sep {
  color: var(--text-ghost);
}
.run-banner .meta b {
  color: var(--text);
  font-weight: 600;
}
.run-banner .live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--success);
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
  padding: 4px 10px;
  background: var(--success-soft);
  border: 1px solid var(--success-border);
  border-radius: 100px;
}
.run-banner .live .pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

/* Filter strip */
.filters {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--surface-2);
}
.filters select,
.filters input {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12.5px;
  font-family: inherit;
}
.filters .count {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-faint);
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
}

/* Entity chip — coloured per entity type (ITSM-68).
   SR = blue, CR = purple, Incident = pink. Fallback to neutral. */
.entity-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11.5px;
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
  background: var(--surface-3);
  color: var(--text);
  border: 1px solid var(--border);
}
.entity-chip.entity-sr {
  background: #eff4ff;
  color: #1d4ed8;
  border-color: #c7d7fe;
}
.entity-chip.entity-cr {
  background: #f5f3ff;
  color: #6d28d9;
  border-color: #ddd6fe;
}
.entity-chip.entity-incident {
  background: #fdf2f8;
  color: #be185d;
  border-color: #fbcfe8;
}

/* Detail row link */
.row-link {
  color: var(--primary);
  font-size: 12.5px;
  text-decoration: none;
  font-weight: 500;
}
.row-link:hover {
  text-decoration: underline;
}

/* Danger zone */
.danger-zone {
  border-color: var(--danger-border);
}
.danger-zone .card-head {
  background: var(--danger-soft);
  border-bottom-color: var(--danger-border);
}
.danger-zone .card-head h3 {
  color: var(--danger);
}
.danger-zone .card-head p {
  color: var(--danger);
  opacity: 0.8;
}
.danger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  gap: 16px;
}
.danger-row:last-child {
  border-bottom: 0;
}
.danger-row .title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.danger-row .desc {
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 3px;
}

/* Banner / flash messages */
.banner {
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 18px;
  border: 1px solid;
  font-size: 13px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.banner.err {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: var(--danger-border);
}
.banner.warn {
  background: var(--warn-soft);
  color: var(--warn);
  border-color: var(--warn-border);
}
.banner.ok {
  background: var(--success-soft);
  color: var(--success);
  border-color: var(--success-border);
}
.banner.info {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: var(--primary-border);
}
.banner .rule {
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
  font-size: 11px;
  background: var(--surface);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid currentColor;
  opacity: 0.8;
}

/* Login screen */
.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: 24px;
}
.login-card {
  width: 100%;
  max-width: 380px;
}
.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}
.login-brand .logo {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  font-size: 16px;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
}
.login-brand h1 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: var(--text);
}
.login-brand p {
  font-size: 13px;
  color: var(--text-faint);
  margin: 0;
}

/* Logs panel (dark by design — keep contrast against light theme) */
.logs-panel {
  background: #0f172a;
  border-radius: 0 0 12px 12px;
  max-height: 384px;
  overflow-y: auto;
  padding: 12px 16px;
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
  font-size: 12px;
  line-height: 1.5;
  color: #cbd5e1;
}
.logs-panel .log-INFO {
  color: #94a3b8;
}
.logs-panel .log-WARN {
  color: #facc15;
}
.logs-panel .log-ERROR {
  color: #f87171;
}

/* Chart wrapper */
.chart-wrap {
  position: relative;
  height: 220px;
}
.chart-wrap.sm {
  height: 80px;
}

/* Small helpers */
.muted-text {
  color: var(--text-faint);
}
.mono {
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
}
.flex-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gap-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 100px;
  background: var(--surface-3);
  color: var(--text-faint);
  border: 1px solid var(--border);
}

/* Existing legacy compatibility — keep these classes present so dropzone JS
   in new_run.js continues to work even though we don't visually use them. */
.dropzone[data-dragover='true'] {
  border-color: var(--primary);
  background-color: var(--primary-soft);
}

/* Empty state */
.empty {
  padding: 60px 24px;
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
}
.empty .ico {
  font-size: 28px;
  margin-bottom: 8px;
}
.empty h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px;
}
.empty p {
  font-size: 13px;
  color: var(--text-faint);
  margin: 0 0 12px;
}

/* ============================================================
   ITSM-68 — Per-record details drawer (run_detail.html)
   Slides in from the right; backdrop dims the rest.
   ============================================================ */
.record-drawer[hidden] { display: none !important; }
.record-drawer {
  position: fixed; inset: 0;
  z-index: 200;
  display: flex; justify-content: flex-end;
}
.record-drawer-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(2px);
  cursor: pointer;
}
.record-drawer-panel {
  position: relative;
  width: min(560px, 100%);
  height: 100vh;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 24px rgba(15, 23, 42, 0.08);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: drawer-slide-in 0.2s ease-out;
}
@keyframes drawer-slide-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
.record-drawer-head {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface-2);
}
.record-drawer-eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 10px; letter-spacing: 0.15em;
  color: var(--text-ghost);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.record-drawer-head h3 {
  font-size: 16px; font-weight: 600;
  color: var(--text);
  font-family: 'Geist Mono', monospace;
}
.record-drawer-meta {
  padding: 8px 22px;
  border-bottom: 1px solid var(--border);
}
.record-drawer-meta .kv {
  display: grid; grid-template-columns: 110px 1fr;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.record-drawer-meta .kv:last-child { border-bottom: 0; }
.record-drawer-meta .kv .k { color: var(--text-faint); }
.record-drawer-meta .kv .v { color: var(--text); font-family: 'Geist Mono', monospace; }
.record-drawer-body { flex: 1; overflow-y: auto; }

body.drawer-open { overflow: hidden; }

/* ============================================================
   ITSM-68 — Sidebar collapse toggle.
   Body gets `.side-collapsed` to flip layout: sidebar becomes 56px wide,
   labels hide, brand text hides. Toggle button flips ‹ / ›.
   ============================================================ */
/* Sidebar brand row — just the logo on the left and the collapse
   toggle on the right (no wordmark in the sidebar; "Synapse" lives in
   the main column header, ChatGPT-style). ITSM-68. */
.side {
  position: relative;
}
.side-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px 18px 22px;
  gap: 10px;
}
.side-brand-row .side-brand {
  padding: 0;
  flex: 1;
  min-width: 0;
}

.side-toggle {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-faint);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    transform 0.12s ease;
}
.side-toggle:hover {
  background: var(--surface-3);
  color: var(--text);
  border-color: var(--border);
}
.side-toggle:active {
  transform: scale(0.92);
}
.side-toggle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.side-toggle-icon {
  display: block;
}

/* Collapsed sidebar (ChatGPT-style) — only the toggle icon stays at
   top, content fills the rest of the row. */
body.side-collapsed .page {
  grid-template-columns: 56px 1fr;
}
body.side-collapsed .side-brand,
body.side-collapsed .side-name,
body.side-collapsed .side-section,
body.side-collapsed .side-item,
body.side-collapsed .side-user div:not(.av),
body.side-collapsed .side-logout {
  display: none;
}
body.side-collapsed .side-brand-row {
  padding: 0 0 12px;
  justify-content: center;
}
body.side-collapsed .side-foot {
  padding: 14px 8px;
}
body.side-collapsed .side-user {
  justify-content: center;
}

/* ============================================================
   ITSM-68 — Stop the page scrolling past content.
   The sidebar's `min-height: 100vh` plus the grid layout was
   forcing the document to be at least 100vh tall regardless of
   how short the content was, leaving empty scrollable space
   below the last card. Switch the page to a flex layout that
   sizes to content + viewport-min on the row, with the sidebar
   stretching naturally instead of dictating page height.
   ============================================================ */
body.synapse {
  min-height: 100vh;
}
.page {
  min-height: 100vh;
  align-items: stretch;
}
.side-inner {
  min-height: 0;
}