/* SLA */
.sla-bar {
  height: 6px;
  background: var(--bg-3);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.sla-bar-fill { height: 100%; background: var(--ok); border-radius: 3px; transition: width 0.3s; }
.sla-bar-fill.warn { background: var(--warn); }
.sla-bar-fill.danger { background: var(--danger); }

.sla-cell { min-width: 130px; }
.sla-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 10px;
  font-size: 10px; font-weight: 600;
}
.sla-pill .dot { width: 6px; height: 6px; border-radius: 50%; }
.sla-pill.ok { background: var(--ok-soft); color: var(--ok); }
.sla-pill.ok .dot { background: var(--ok); }
.sla-pill.warn { background: var(--warn-soft); color: var(--warn); }
.sla-pill.warn .dot { background: var(--warn); }
.sla-pill.danger { background: var(--danger-soft); color: var(--danger); }
.sla-pill.danger .dot { background: var(--danger); }