/* ============================================================
   BLOCK — badge.css
   Small inline status indicators. Driven by data-status for
   invoice statuses and data-variant for general use.

   Usage:
     <span class="badge" data-status="paid">Paid</span>
     <span class="badge" data-status="draft">Draft</span>
     <span class="badge" data-status="sent">Sent</span>
     <span class="badge" data-status="overdue">Overdue</span>
     <span class="badge" data-status="void">Void</span>

   General variants:
     <span class="badge" data-variant="success">Active</span>
     <span class="badge" data-variant="warning">Pending</span>
     <span class="badge" data-variant="error">Failed</span>
     <span class="badge" data-variant="neutral">Archived</span>

   In ERB:
     <span class="badge" data-status="<%= @invoice.status %>">
       <%= @invoice.status.humanize %>
     </span>
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-3xs) var(--space-xs);
  border-radius: 99px;
  font-size: var(--step--2);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  line-height: 1;
  white-space: nowrap;

  /* Default — neutral */
  color: var(--color-text-muted);
  background-color: var(--color-surface-inset);
}

/* ── Invoice statuses ────────────────────────────────────── */

.badge[data-status="draft"] {
  color: var(--color-text-muted);
  background-color: var(--color-surface-inset);
  border-color: var(--color-border);
}

.badge[data-status="sent"] {
  color: var(--color-info-text);
  background-color: var(--color-info-bg);
  border-color: var(--color-info-border);
}

.badge[data-status="paid"] {
  color: var(--color-success-text);
  background-color: var(--color-success-bg);
  border-color: var(--color-success-border);
}

.badge[data-status="void"] {
  color: var(--color-text-muted);
  background-color: var(--color-surface-inset);
  border-color: var(--color-border);
  text-decoration: line-through;
  opacity: 0.75;
}

.badge[data-status="overdue"] {
  color: var(--color-error-text);
  background-color: var(--color-error-bg);
  border-color: var(--color-error-border);
}

/* ── General variants ────────────────────────────────────── */

.badge[data-variant="success"] {
  color: var(--color-success-text);
  background-color: var(--color-success-bg);
  border-color: var(--color-success-border);
}

.badge[data-variant="warning"] {
  color: var(--color-warning-text);
  background-color: var(--color-warning-bg);
  border-color: var(--color-warning-border);
}

.badge[data-variant="error"] {
  color: var(--color-error-text);
  background-color: var(--color-error-bg);
  border-color: var(--color-error-border);
}

.badge[data-variant="neutral"] {
  color: var(--color-text-muted);
  background-color: var(--color-surface-inset);
  border-color: var(--color-border);
}