/* ════════════════════════════════════════════════════════════════════════
   MSINDAHA design system — BADGES
   Status badges always pair a colored dot with a text label, so state is
   never conveyed by color alone. The badge takes its colors from a tone
   class (.tone-blue …, see tokens.css); the legacy .b-* variants used by
   the website pages map onto the same palette.
════════════════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 9px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  background: var(--tone-bg, var(--bg-active));
  color: var(--tone-text, var(--text-sub));
}
.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--tone, currentColor);
}

/* Legacy variants (website pages) */
.b-open,
.b-assigned {
  --tone: #3b82f6;
  --tone-text: #7cb0ff;
  --tone-bg: rgba(59, 130, 246, 0.15);
}
.b-inprogress,
.b-medium {
  --tone: #f59e0b;
  --tone-text: #fbbf24;
  --tone-bg: rgba(245, 158, 11, 0.15);
}
.b-closed,
.b-resolved,
.b-published {
  --tone: #22c55e;
  --tone-text: #4ade80;
  --tone-bg: rgba(34, 197, 94, 0.14);
}
.b-low,
.b-draft,
.b-cancelled {
  --tone: #94a3b8;
  --tone-text: #aab4c4;
  --tone-bg: rgba(148, 163, 184, 0.13);
}
.b-high {
  --tone: #f97316;
  --tone-text: #fb923c;
  --tone-bg: rgba(249, 115, 22, 0.15);
}
.b-critical,
.b-rejected {
  --tone: #ef4444;
  --tone-text: #f87171;
  --tone-bg: rgba(239, 68, 68, 0.15);
}
.b-superadmin {
  --tone: #8b5cf6;
  --tone-text: #c4b5fd;
  --tone-bg: rgba(139, 92, 246, 0.16);
}