/* Shared status-badge system. Single source of truth for what a status color means
   (audit found paid/pending/cancelled colors differing by page). */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    line-height: 1.4;
}
/* Status dot only on the status-taxonomy variants, not on the bare .badge
   base — plain/count badges (e.g. an item-quantity pill) shouldn't get an
   unrequested status dot. */
.badge-paid::before,
.badge-pending::before,
.badge-partial::before,
.badge-cancelled::before,
.badge-open::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.badge-paid      { background: var(--status-paid-bg);      color: var(--status-paid-text); }
.badge-pending   { background: var(--status-pending-bg);   color: var(--status-pending-text); }
.badge-partial   { background: var(--status-partial-bg);   color: var(--status-partial-text); }
.badge-cancelled { background: var(--status-cancelled-bg); color: var(--status-cancelled-text); }
.badge-open      { background: var(--status-open-bg);      color: var(--status-open-text); }

/* Neutral fallback for statuses outside the paid/pending/partial/cancelled/open taxonomy */
.badge-neutral { background: var(--color-background); color: var(--color-text-secondary); }