ux(colors): apply semantic palette to Loans tab + Active Loans card

Konrad caught that /payroll/?status=loans was still using Bootstrap
defaults (bg-primary for Loan, bg-info for Advance) while the other
three tabs had moved to the semantic palette. The Preview-payslip
modal's Active Loans card had the same inconsistency in its JS-built
badge.

- Added .advance-flag-badge as a sibling to .loan-flag-badge; both
  just reference the existing --badge-loan-* / --badge-advance-*
  tokens so no new colours introduced.
- /payroll/?status=loans row badge: bg-primary/bg-info → loan-flag-
  badge/advance-flag-badge.
- Worker-lookup / Preview-payslip modal JS: same swap on the badge
  className.

Loan-family items now wear the same amber/blue colour pair on every
tab + modal they appear on. Transactional status (Active/Paid Off)
stays on Bootstrap greens/yellows — they're lifecycle, not type.

docs/design-tokens.md updated to record the new class + every place
the --badge-loan-* / --badge-advance-* tokens now appear.

Tests: 69/69.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

core/templates/core/payroll_dashboard.html

@@ -513,10 +513,14 @@
                             <td class="ps-4 align-middle"><a href="#" class="worker-lookup-link fw-bold"
                                    data-worker-id="{{ loan.worker.id }}">{{ loan.worker.name }}</a></td>
                             <td class="align-middle">
+                                {# Loan vs Advance: same semantic palette as the Adjustments tab #}
+                                {# Loan-type rows wear amber (.loan-flag-badge), advances wear blue #}
+                                {# (.advance-flag-badge). Transactional state ("Active" / "Paid Off") #}
+                                {# is separate — see the next cell — and stays on Bootstrap colours. #}
                                 {% if loan.loan_type == 'advance' %}
-                                <span class="badge bg-info text-dark">Advance</span>
+                                <span class="badge advance-flag-badge">Advance</span>
                                 {% else %}
-                                <span class="badge bg-primary">Loan</span>
+                                <span class="badge loan-flag-badge">Loan</span>
                                 {% endif %}
                             </td>
                             <td class="align-middle">R {{ loan.principal_amount|floatformat:2 }}</td>
@@ -2556,8 +2560,12 @@ document.addEventListener('DOMContentLoaded', function() {
                         var topRow = document.createElement('div');
                         topRow.className = 'd-flex justify-content-between align-items-center mb-1';
 
+                        // Loan-type badge in the Preview-payslip / Worker-lookup modal's
+                        // "Active Loans & Advances" card — mirrors the server-rendered
+                        // /payroll/?status=loans colours so the same loan looks the same
+                        // everywhere. See custom.css .loan-flag-badge / .advance-flag-badge.
                         var badge = document.createElement('span');
-                        badge.className = 'badge ' + (loan.type === 'advance' ? 'bg-info text-dark' : 'bg-primary');
+                        badge.className = 'badge ' + (loan.type === 'advance' ? 'advance-flag-badge' : 'loan-flag-badge');
                         badge.textContent = loan.type_label;
                         topRow.appendChild(badge);
 

docs/design-tokens.md

@@ -40,9 +40,9 @@ Token definitions live in `static/css/custom.css`:
 | `--badge-bonus-*` (green) | Adjustments tab type badge; By-Type group-header left-border accent |
 | `--badge-overtime-*` (mauve) | Adjustments tab type badge; By-Type group-header accent |
 | `--badge-deduction-*` (purple) | Adjustments tab type badge; By-Type group-header accent |
-| `--badge-loan-*` (amber/yellow) | Adjustments tab type badge; By-Type group-header accent; Pending tab "Loan" worker flag (`.loan-flag-badge`) |
+| `--badge-loan-*` (amber/yellow) | Adjustments tab type badge; By-Type group-header accent; Pending tab "Loan" worker flag (`.loan-flag-badge`); Loans-and-Advances tab row badge for Loan-type rows (`.loan-flag-badge`); Preview-payslip modal's Active Loans card |
 | `--badge-loan-rep-*` (deeper amber, +15% saturation) | Adjustments tab type badge for Loan Repayment; By-Type group-header accent |
-| `--badge-advance-*` (blue) | Adjustments tab type badge; By-Type group-header accent |
+| `--badge-advance-*` (blue) | Adjustments tab type badge; By-Type group-header accent; Loans-and-Advances tab row badge for Advance-type rows (`.advance-flag-badge`); Preview-payslip modal's Active Loans card |
 | `--badge-advance-rep-*` (deeper blue, +15% saturation) | Adjustments tab type badge for Advance Repayment; By-Type group-header accent |
 
 ## Transactional-state colours (Bootstrap — unchanged)

static/css/custom.css

@@ -1941,14 +1941,18 @@ body, .card, .modal-content, .form-control, .form-select,
 .badge-type-advance-repayment { background: var(--badge-advance-rep-bg); color: var(--badge-advance-rep-fg); }
 
 /* --- Status flags that borrow a type's colour for semantic consistency.
-       "Has an active loan or advance" -> Loan-type amber/yellow, so the
+       The Pending tab's "Loan" worker flag (Has-an-active-loan-or-advance),
-       worker flag on the Pending tab visually matches the Adjustments
+       and the Loans-and-Advances tab's per-row type badge (Loan vs Advance),
-       type badge for Loan. Keeps the Loan colour family unified across
+       should all look like the Adjustments tab's Loan + Advance type badges.
-       the app regardless of which tab you're looking at. --- */
+       Same concept, same colour, every tab. --- */
 .loan-flag-badge {
     background: var(--badge-loan-bg);
     color: var(--badge-loan-fg);
 }
+.advance-flag-badge {
+    background: var(--badge-advance-bg);
+    color: var(--badge-advance-fg);
+}
 
 /* --- Sticky filter bar (keeps filters visible as the table scrolls) --- */
 .adjustments-filter-bar {