:root {
  --eff: #1f8a5b;      /* strategie 1 */
  --rush: #c8412f;     /* strategie 2 */
  --p-free: #d9dde3;
  --p-fix: #8e6bd1;
  --p-ready: #3b82c4;
  --p-cut: #2fb36b;
  --p-done: #f0a431;
  --p-spoed: #e0322b;
}
body { background: #f4f6f9; }
.bg-eff { background-color: var(--eff) !important; color: #fff; }
.bg-rush { background-color: var(--rush) !important; color: #fff; }
.dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; vertical-align: middle; }
.lead-intro { max-width: 70rem; }
.clock { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 1.1rem; }
.controls { position: sticky; top: 56px; z-index: 1010; }

.machine-row .card-header { background: #fff; }
.machine-row.eff { border-left: 6px solid var(--eff); }
.machine-row.rush { border-left: 6px solid var(--rush); }

.schematic svg { width: 100%; height: auto; display: block; background: #fbfcfd; border: 1px solid #e3e6ea; border-radius: .5rem; }
.schematic text { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.legend span { margin-right: .75rem; white-space: nowrap; }
.lg { display: inline-block; width: .8rem; height: .8rem; border-radius: 2px; margin-right: .25rem; vertical-align: -1px; }
.lg-free { background: var(--p-free); } .lg-fix { background: var(--p-fix); } .lg-ready { background: var(--p-ready); }
.lg-cut { background: var(--p-cut); } .lg-done { background: var(--p-done); } .lg-spoed { background: #fff; border: 2px solid var(--p-spoed); }

.op-card { background: #fff; min-height: 5.2rem; }
.op-task { min-height: 2.6em; line-height: 1.3; }
.order-list { max-height: 11.5rem; overflow: hidden; }
.order-list li { display: flex; justify-content: space-between; gap: .5rem; padding: 1px 4px; border-radius: 3px; }
.order-list li.spoed { background: #fde8e6; color: #9d1c12; font-weight: 600; }
.order-list li.focus { outline: 2px solid var(--rush); }
.order-list li.late .due { color: #c8412f; }
.order-list .st { color: #6c757d; }
.event-log { max-height: 9rem; overflow: hidden; font-size: .78rem; }
.event-log li { border-bottom: 1px dashed #e7e9ec; padding: 1px 0; }
.event-log .t { color: #6c757d; font-variant-numeric: tabular-nums; margin-right: .3rem; }
.event-log .danger { color: #b02a1c; font-weight: 600; }
.event-log .warning { color: #9a6700; }
.event-log .success { color: #1f7a4d; font-weight: 600; }

.kpi { background: #fff; border: 1px solid #e3e6ea; border-radius: .5rem; padding: .45rem .6rem; height: 100%; }
.kpi-l { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: #6c757d; }
.kpi-v { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi-u { font-size: .75rem; color: #6c757d; }
.chart-box { position: relative; height: 260px; }
.chart-box-sm { position: relative; height: 150px; }
.verdict-card .fs-3 { font-variant-numeric: tabular-nums; }
#kpiTable td, #kpiTable th { font-variant-numeric: tabular-nums; }
.win { color: var(--eff); }
.lose { color: var(--rush); }

/* documentatie */
.doc main h2 { margin-top: 2rem; padding-top: .5rem; border-top: 1px solid #dee2e6; }
.doc .toc a { text-decoration: none; }
.doc pre { background: #f1f3f5; padding: .75rem; border-radius: .4rem; }

@media (max-width: 767px) {
  .controls { position: static; }
  .kpi-v { font-size: 1.3rem; }
}