/*
 * Status pills — single source of truth across all web surfaces.
 * Mirrors mobile/src/utils/theme.js colors.status. Include once per
 * template and use `.sp-<status>` to render. No inline color hex
 * anywhere — that's the 2026-05-12 anti-pattern we're killing.
 *
 * Usage:
 *   <span class="sp sp-approved">approved</span>
 *   <span class="sp sp-pending">pending</span>
 *
 * Statuses are normalized: pending / approved / confirmed / completed /
 * in_progress / cancelled / declined / rejected / paid / invoiced /
 * partially_approved / done / skipped.
 */

.sp {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
}

.sp-pending,
.sp-submitted              { background: #fef3c7; color: #92400e; }
.sp-approved,
.sp-confirmed,
.sp-done                   { background: #dcfce7; color: #166534; }
.sp-in_progress            { background: #ede9fe; color: #6d28d9; }
.sp-completed,
.sp-paid                   { background: #dbeafe; color: #1e40af; }
.sp-invoiced               { background: #ede9fe; color: #5b21b6; }
.sp-partially_approved     { background: #ffedd5; color: #9a3412; }
.sp-cancelled,
.sp-declined,
.sp-rejected,
.sp-skipped                { background: #fee2e2; color: #991b1b; }
.sp-draft                  { background: #f1f5f9; color: #475569; }

/* Solid variant — when the pill must stand out (status-as-action button).
   Same hues, just inverted. Use .sp.sp-solid.sp-approved etc. */
.sp.sp-solid               { color: #fff !important; }
.sp.sp-solid.sp-pending,
.sp.sp-solid.sp-submitted        { background: #f59e0b; }
.sp.sp-solid.sp-approved,
.sp.sp-solid.sp-confirmed,
.sp.sp-solid.sp-done             { background: #16a34a; }
.sp.sp-solid.sp-in_progress      { background: #7c3aed; }
.sp.sp-solid.sp-completed,
.sp.sp-solid.sp-paid             { background: #2563eb; }
.sp.sp-solid.sp-invoiced         { background: #6d28d9; }
.sp.sp-solid.sp-partially_approved { background: #ea580c; }
.sp.sp-solid.sp-cancelled,
.sp.sp-solid.sp-declined,
.sp.sp-solid.sp-rejected,
.sp.sp-solid.sp-skipped          { background: #dc2626; }
.sp.sp-solid.sp-draft            { background: #64748b; }