fix(ui): readable status row tints — subtle washes, not solid .light fills

The per-status row backgrounds used MUI's solid `.light` palette shades
(error.light/success.light/warning.light). Those are LIGHT colors in both
schemes, so in dark mode the row's white text sat on a light fill and was
effectively invisible; in light mode they read as garish saturated blocks.

Replaced with low-alpha washes via the palette channel vars
(rgba(var(--mui-palette-X-mainChannel) / 0.12), 0.18 on hover), which keep
the row's normal theme text colour fully readable in BOTH schemes:

- Offers: completed = subtle green wash; invalidated = faded/muted
  (opacity + secondary text, the original "voided" look) instead of a
  solid red block; expired = subtle amber wash.
- DataTable rowDanger (kit-wide — Warehouse, WarehouseReports): subtle
  error wash for both the desktop row and the mobile card (card keeps its
  error.main border as the danger cue).
- Invoices overdue rows: subtle amber wash.
- Dashboard 2FA banner Card: subtle error wash (keeps the error.main
  border) so the banner copy stays readable in dark mode.

Verified live in Chrome on Offers (completed + invalidated, light + dark):
faint tint + normal readable text, channel switches per scheme. tsc -b
--noEmit, npm run build, vitest 152/152 all clean. (Left untouched: small
icon tiles / callout boxes that pair a .light bg with an explicit dark or
coloured text/glyph — those are readable in both schemes by construction.)

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

src/admin/ui/DataTable.tsx

@@ -99,7 +99,11 @@ export default function DataTable<T>({
                 },
                 onRowClick ? { cursor: "pointer" } : {},
                 rowDanger?.(row)
-                  ? { borderColor: "error.main", bgcolor: "error.light" }
+                  ? {
+                      borderColor: "error.main",
+                      backgroundColor:
+                        "rgba(var(--mui-palette-error-mainChannel) / 0.12)",
+                    }
                   : {},
                 rowInactive?.(row) ? { opacity: 0.55 } : {},
                 ...(Array.isArray(extra) ? extra : extra ? [extra] : []),
@@ -235,11 +239,11 @@ export default function DataTable<T>({
                   onRowClick ? { cursor: "pointer" } : {},
                   rowDanger?.(row)
                     ? {
-                        bgcolor: "error.light",
-                        opacity: 0.88,
+                        backgroundColor:
+                          "rgba(var(--mui-palette-error-mainChannel) / 0.12)",
                         "&:hover": {
-                          bgcolor: "error.light",
-                          filter: "brightness(0.97)",
+                          backgroundColor:
+                            "rgba(var(--mui-palette-error-mainChannel) / 0.18)",
                         },
                       }
                     : {},