/* ── Status badges / chips ───────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px var(--sp-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  white-space: nowrap;
  line-height: 1;
}
.badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: var(--radius-full);
  background: currentColor;
  opacity: 0.7;
  flex-shrink: 0;
}

/* Invoice / payment status */
.badge--paid              { background: var(--clr-success-light);  color: hsl(145, 55%, 28%); }
.badge--refunded          { background: var(--clr-danger-light);   color: hsl(4, 72%, 40%); }
.badge--partially-refunded{ background: var(--clr-warning-light);  color: hsl(38, 70%, 30%); }

/* Entity status */
.badge--active   { background: var(--clr-success-light); color: hsl(145, 55%, 28%); }
.badge--inactive { background: var(--clr-surface-2);     color: var(--clr-text-muted); }

/* Customer status */
.badge--lapsed  { background: var(--clr-danger-light);  color: hsl(4, 72%, 40%); }
.badge--regular { background: var(--clr-info-light);    color: hsl(205, 80%, 35%); }
.badge--new     { background: var(--clr-primary-light); color: hsl(250, 70%, 40%); }

/* Birthday */
.badge--birthday { background: hsl(340, 80%, 94%); color: hsl(340, 80%, 40%); }

/* Payment method */
.badge--cash { background: hsl(145, 50%, 92%); color: hsl(145, 55%, 28%); }
.badge--upi  { background: var(--clr-primary-light); color: hsl(250, 70%, 40%); }
.badge--card { background: var(--clr-info-light);    color: hsl(205, 80%, 35%); }

/* Connectivity */
.badge--offline { background: var(--clr-surface-2);    color: var(--clr-text-muted); }
.badge--syncing { background: var(--clr-warning-light); color: hsl(38, 70%, 30%); }

/* Role badges */
.badge--owner         { background: hsl(250, 70%, 92%); color: hsl(250, 70%, 40%); }
.badge--billing-person{ background: var(--clr-info-light); color: hsl(205, 80%, 35%); }
.badge--staff         { background: var(--clr-surface-2); color: var(--clr-text-secondary); }

/* No dot variant */
.badge--no-dot::before { display: none; }

/* Large badge */
.badge--lg {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-sm);
}