/* Turbi Control (admin cockpit) — chart palette + cockpit chrome.
   Data colors live ONLY here as custom properties; the ApexCharts
   Stimulus controller resolves them at render time (single source of
   truth stays CSS). Palette validated (dataviz six checks, light
   surface): outcome set completed/cancelled/interrupted/failed passes
   CVD + normal-vision floors; interrupted sits below 3:1 contrast →
   relief via legend + data table. Percentile line set blue/orange/
   violet passes all checks. */

:root {
  --tc-completed: #0ca30c;   /* status: good */
  --tc-cancelled: #4a3aa7;   /* neutral outcome (violet — deliberately not a status hue) */
  --tc-interrupted: #ec835a; /* status: serious */
  --tc-failed: #d03b3b;      /* status: critical */
  --tc-line-p50: #2a78d6;    /* median */
  --tc-line-p95: #eb6834;    /* tail — hotter on purpose */
  --tc-line-p99: #4a3aa7;    /* extreme tail */
  --tc-grid: var(--tblr-border-color);
  --tc-ink-muted: var(--tblr-secondary);
}

/* Aligned digits for value columns (dataviz: tabular only in columns) */
.turbi-num {
  font-variant-numeric: tabular-nums;
}

/* Card/toolbar header row: title left, meta right */
.turbi-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Load column in the server table: number + utilization bar */
.turbi-load-cell {
  min-inline-size: 8rem;
}

.turbi-utilization-bar {
  inline-size: var(--turbi-utilization, 0%);
}

/* Heartbeat age: quiet by default, loud when overdue */
.turbi-beat {
  color: var(--tblr-secondary);
}

.turbi-beat--overdue {
  color: var(--tblr-danger);
  font-weight: 500;
}

.turbi-chart-empty {
  padding: 2.5rem 0;
  text-align: center;
}

/* Turn detail lifecycle timeline */
.turbi-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

.turbi-timeline li {
  position: relative;
  padding-block: 0 1rem;
  padding-inline-start: 1.5rem;
  border-inline-start: 2px solid var(--tblr-border-color);
  margin-inline-start: 0.4rem;
}

.turbi-timeline li:last-child {
  padding-block-end: 0;
}

.turbi-timeline-dot {
  position: absolute;
  inset-inline-start: -0.4rem;
  inset-block-start: 0.15rem;
  inline-size: 0.7rem;
  block-size: 0.7rem;
  border-radius: 50%;
  background: var(--tblr-primary);
  border: 2px solid var(--tblr-bg-surface);
}