/* ============================================================================
   STATUS PILL — copied from bullet-web-frontend
   (src/styles/components/status-pill.css), mapped onto the CRM's tokens.
   ONE legend across the app and the CRM (Peter, 20 Aug 2026):
     overdue red    a date has passed
     due amber      a date is coming
     done green     finished, nothing to do
     grey default   no deadline — carries no alarm
   The hexes are Peter's own picks from the invoice dashboard and are the
   SAME values the CRM's --good/--warn/--bad now hold, so pill and panels
   cannot disagree. Re-copy when the app's file changes.
   ============================================================================ */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px dashed var(--muted);
  color: var(--ink);
  white-space: nowrap;
}
.status-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  flex: none;
}
.status-pill--done    { border-color: var(--good); }
.status-pill--done::before    { background: var(--good); }
.status-pill--overdue { border-color: var(--bad); }
.status-pill--overdue::before { background: var(--bad); }
.status-pill--due     { border-color: var(--warn); }
.status-pill--due::before     { background: var(--warn); }