/* Status (Sendplane design system): a pill that names a state in words, with
 * a 5px dot in the same colour. The word carries the meaning; the tone only
 * reinforces it. Tones: success, warning, danger and neutral.
 * The imported dashboard's .badge classes use the same pill: state colours
 * get the dot, categories and labels stay neutral. */

.status, .badge {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  color: var(--muted);
  background: var(--soft);
  font-size: 11px;
  font-weight: 620;
  line-height: 1.3;
  white-space: nowrap;
}
.status-dot { width: 5px; height: 5px; flex: 0 0 auto; border-radius: var(--radius-round); background: currentColor; }
.status-success, .badge-green, .state-active { color: var(--success-fg); background: var(--success-bg); }
.status-warning, .badge-yellow, .state-paused, .state-created { color: var(--warning-fg); background: var(--warning-bg); }
.status-danger, .badge-red, .state-error { color: var(--danger-fg); background: var(--danger-bg); }
.status-neutral, .badge-gray, .badge-blue, .badge-purple, .badge-cyan, .state-stopped { color: var(--muted); background: var(--soft); }

.badge-green::before, .badge-yellow::before, .badge-red::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: var(--radius-round);
  background: currentColor;
}
.badge-sm { padding: 2px 6px; font-size: 10px; }
.badge-dot { width: 5px; height: 5px; border-radius: var(--radius-round); background: currentColor; }
.badge-dot-pulse { width: 5px; height: 5px; border-radius: var(--radius-round); background: currentColor; animation: status-pulse 2s ease-in-out infinite; }
@keyframes status-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* A secondary line under a status: 10px, quiet. */
.status + small, td > small, th > small { display: block; margin-top: 4px; color: var(--quiet); font-size: 10px; font-weight: 500; }