Four UX asks bundled in one pass:
1+2. Display-only rename of adjustment types: 'New Loan' (DB) →
'Loan' (UI), 'Advance Payment' → 'Advance', 'Advance Repayment'
→ 'Advance Repaid'. DB values preserved forever — zero data
migration, zero formula / constant / CSS / test changes.
3. Unify badge colours across all payroll tabs using the existing
.badge-type-* semantic palette. Recolour Pending "With loans"
flag to match the Loan type colour.
4. Fix CSS bug in .adj-group-meta (margin-left:auto doesn't work
in a <td> — make the td a flex container).
Plus: new docs/design-tokens.md as the canonical colour reference,
and a crucial CLAUDE.md section documenting the UI-vs-DB naming
drift so future Claude sessions don't chase ghosts when writing
formulas / filters / ORM queries that reference the display label
instead of the DB value.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
9aba9b8fb8