/* Statuspagina (/status/): rijen met label, live-waarde en tijdstempel in
   het mk-monitor-paneel. Bouwt voort op de tokens uit machinekamer.css;
   alleen wat de bestaande klassen niet leveren staat hier. */

.status-kop {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--mk-rand-donker);
}
.status-kop-label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(232, 238, 248, .5);
}
.status-oud {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase;
  color: #E0A93E;
  border: 1px solid rgba(224, 169, 62, .45);
  border-radius: 999px;
  padding: 3px 10px;
}
.status-gen {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 12px;
  color: rgba(232, 238, 248, .5);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.status-lijst { list-style: none; padding: 8px 24px 14px; margin: 0; }
.status-lijst li {
  display: grid;
  grid-template-columns: 14px 150px 1fr auto;
  gap: 14px;
  align-items: baseline;
  padding: 13px 0;
  border-top: 1px solid rgba(232, 238, 248, .07);
  font-size: 14.5px; color: var(--mk-tekst-donker);
}
.status-lijst li:first-child { border-top: 0; }
.status-lijst strong {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--navy-licht); font-weight: 500;
}
.status-tijd {
  font-family: var(--font-mono); font-size: 12px;
  color: rgba(232, 238, 248, .5);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.status-lijst li.is-live .status-tijd { color: var(--mk-groen); }

@media (max-width: 640px) {
  .status-lijst li { display: block; position: relative; padding-left: 26px; }
  .status-lijst li .mk-dot { position: absolute; left: 2px; top: 18px; }
  .status-lijst strong { display: block; margin-bottom: 4px; }
  .status-tijd { display: block; margin-top: 4px; white-space: normal; }
  .status-gen { display: none; }
}