/* ── Status badges & state-transition buttons ──────────────────
   The app-wide status pill (.status-badge + .status-* palettes) and the
   state-machine transition button (.btn-state), which is tinted with the
   colour of the state it moves a record TO — the same palette as the badges,
   so the whole flow reads in one colour language. Promoted here from
   dashboard.css / cashbook.css / invoices.css: badges are rendered by views
   and helpers across the whole app. Loads right after base.css; feature
   files keep their feature-specific state variants (e.g. cashbook.css's
   .btn-state-verified, donor_invoicing.css's .status-donor-*). */

.status-badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 99px;
  text-transform: capitalize;
  white-space: nowrap;
}

.status-pending                { background: var(--pending-bg); color: var(--pending); }
.status-processing             { background: var(--info-bg); color: var(--info); }
.status-review                 { background: var(--review-bg); color: var(--review); }
.status-approved               { background: var(--approved-bg); color: var(--approved); }
.status-paid                   { background: var(--approved-bg); color: var(--approved); }
.status-rejected               { background: var(--danger-bg); color: var(--danger); }
.status-failed                 { background: var(--danger-bg); color: var(--danger); }
/* Cashbook verification flow: blue → orange → green along the path, gray once
   the entry is locked into a LERF export. The same hues colour the cashbook
   index row accents (cashbook.css). */
.status-project_lead_verification_requested { background: var(--requested-bg); color: var(--requested); }
.status-accounting_verification_requested   { background: var(--review-bg); color: var(--review); }
.status-verified                            { background: var(--approved-bg); color: var(--approved); }
/* Layout only — the palette lives with the other .status-donor-* colours in
   donor_invoicing.css (which loads later and always won; the grey palette this
   rule used to carry was dead code inherited from dashboard.css). */
.status-donor-invoiced {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.status-badges { display: inline-flex; gap: 0.5rem; flex-wrap: wrap; }

/* Inline glyphs (e.g. the LERF lock) scale with the badge text. */
.status-badge .icon { width: 0.9em; height: 0.9em; vertical-align: -0.05em; }

.status-not_started { background: var(--gray-light); color: var(--gray-mid); }
.status-ongoing    { background: var(--info-bg); color: var(--info); }
.status-completed  { background: var(--approved-bg); color: var(--approved); }

/* ToR lifecycle: open = active/in-progress, closed = finalised. */
.status-open   { background: var(--info-bg); color: var(--info); }
.status-closed { background: var(--approved-bg); color: var(--approved); }

.role-admin                 { background: var(--danger-bg); color: var(--danger); }
.role-member                { background: var(--gray-light); color: var(--gray-mid); }
.role-travel_cost_submitter { background: var(--info-bg); color: var(--info); }

/* Status-transition audit list at the foot of a record's show page. The older
   per-feature copies (.donor-/.cashbook-/.travel-/.statement-status-history)
   should migrate here rather than gain siblings. */
.status-history { list-style: none; margin: 0.5rem 0 0; padding: 0; font-size: 0.85rem; }
.status-history li + li { margin-top: 0.35rem; }

/* State-machine transition button (cashbook + invoice show pages). Feature
   files define the per-state tints next to their flow. */
.btn-state {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid transparent;
}

.btn-state .icon { width: 1.1em; height: 1.1em; flex-shrink: 0; }