/* QueueKit-only additions. The Arvion stylesheet supplies the shell, cards,
   tables and charts; this file adds the few controls that are specific to a
   queue dashboard. */

.chaos-control {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  background: var(--surface);
  margin-right: 4px;
}
.chaos-label { font-size: 12.5px; font-weight: 600; }

.stepper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  background: var(--bg-soft);
}
.stepper .btn.icon { width: 24px; height: 24px; font-size: 14px; }
.stepper .mono { min-width: 18px; text-align: center; font-size: 12.5px; }

.main { padding-top: 20px; }
.page-head { margin-bottom: 10px; }
.main .card { padding: 16px; }
.main .card-head { margin-bottom: 10px; }
.main .divider { margin: 10px 0; }
#worker-list { gap: 7px !important; }
.kpi-row .card { padding: 9px 15px; }
.kpi-row .stat-value { font-size: 23px; }
.kpi-row .small { font-size: 11.5px; }
.kpi-row .stat-label { margin-bottom: 1px; }
#jobs-table .table td, #jobs-table .table th { padding: 5px 12px; line-height: 1.25; }
#jobs-table .table th { font-size: 10px; }

.worker-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  padding: 1px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.worker-row.busy { border-color: rgba(245, 194, 107, 0.26); }
.worker-avatar {
  width: 24px; height: 24px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--surface-3); color: var(--muted);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em;
}
.worker-row.busy .worker-avatar { background: var(--gold-soft); color: var(--gold); }
.worker-job { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.worker-meta { font-size: 11px; color: var(--muted); display: flex; gap: 10px; }
.worker-meta .mono { font-size: 10.5px; }

.event-log { display: flex; flex-direction: column; max-height: 208px; overflow: hidden; }
.event-row {
  display: grid;
  grid-template-columns: 58px 74px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 6px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.event-row:last-child { border-bottom: none; }
.event-type { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.event-type.completed { color: var(--green); }
.event-type.retried { color: var(--amber); }
.event-type.dead { color: var(--red); }
.event-type.claimed { color: var(--blue); }
.event-type.recurring, .event-type.burst, .event-type.replay, .event-type.chaos { color: var(--purple); }
.event-time { color: var(--muted); font-size: 10.5px; }

.recurring-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.recurring-row .mono { font-size: 11px; }

.progress.thin { height: 5px; }

.dlq-note {
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.dlq-note p { margin: 8px 0 0; font-size: 12.5px; color: var(--text-2); line-height: 1.5; }

.state-badge { text-transform: capitalize; }
.state-badge.queued { color: var(--text-2); }
.state-badge.running { color: var(--blue); border-color: rgba(58, 123, 255, 0.3); background: var(--blue-soft); }
.state-badge.completed { color: var(--green); border-color: rgba(52, 211, 153, 0.3); background: var(--green-soft); }
.state-badge.dead { color: var(--red); border-color: rgba(248, 113, 113, 0.3); background: var(--red-soft); }

.replay-cell .btn { padding: 2px 9px; font-size: 11px; }

@media (max-width: 1180px) {
  .chaos-control .small { display: none; }
}

.stat-value.blue { color: var(--blue); }
.stat-value.red { color: var(--red); }

.policy-row + .policy-row { margin-top: 5px; }
.progress.thin { height: 4px; }
.progress.danger > i { background: linear-gradient(90deg, #b33a3a, var(--red)); }
#dlq-table .table td { white-space: nowrap; }