fix(ui): unify icon badges — solid tile + white glyph via shared helper

The labelled icon-badge tiles were inconsistent: some used a same-hue
light tile + colored glyph (e.g. the Settings 2FA row: success.light tile
+ success.main glyph — low contrast, the reported "badly visible" icon),
and the solid-tile ones used the bright .main fill in dark mode without
darkening, so a white glyph on bright green/amber was low-contrast too
(DashProfile's success badge was ~1.9:1).

Add a single `iconBadgeSx(color)` helper (theme.ts): solid `<color>.main`
fill + white glyph, darkened in dark mode (FILLED_DARK_BG) so white stays
legible; `default` = neutral grey. Applied to every badge so they can't
drift: StatCard, DashActivityFeed, DashProfile (2FA badge), Dashboard
(2FA banner icon), AttendanceHistory (month tile), and the Settings 2FA
row tile (now solid green when required / grey when optional + white lock,
instead of the low-contrast light-green tile). Also switched DashProfile's
backup-codes warning callout from warning.light to a subtle warning wash
so its amber text stays readable in dark mode.

tsc -b --noEmit, npm run build, vitest 152/152 all clean.

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

src/admin/ui/StatCard.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from "react";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import Card from "./Card";
-import { FILLED_DARK_BG } from "../theme";
+import { iconBadgeSx } from "../theme";
 
 export type StatCardColor =
   | "default"
@@ -31,33 +31,23 @@ export default function StatCard({
   color = "default",
   footer,
 }: StatCardProps) {
-  // Solid tile + white glyph: high-contrast in both themes (the old light tint
-  // left the icon dark/low-visibility, esp. for the default variant). In dark
-  // mode the bright .main fill is darkened (same rule as filled buttons/chips)
-  // so the white glyph stays legible on success/warning/info/error tiles.
-  const iconBg = color === "default" ? "grey.600" : `${color}.main`;
-  const iconDarkBg = (FILLED_DARK_BG as Record<string, { bg: string }>)[color]
-    ?.bg;
-
   return (
     <Card>
       <Box sx={{ display: "flex", alignItems: "flex-start", gap: 1.5 }}>
         {icon && (
           <Box
-            sx={(theme) => ({
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              width: 40,
-              height: 40,
-              borderRadius: 2,
-              bgcolor: iconBg,
-              color: "common.white",
-              flexShrink: 0,
-              ...(iconDarkBg
-                ? theme.applyStyles("dark", { backgroundColor: iconDarkBg })
-                : {}),
-            })}
+            sx={[
+              {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: 40,
+                height: 40,
+                borderRadius: 2,
+                flexShrink: 0,
+              },
+              iconBadgeSx(color),
+            ]}
           >
             {icon}
           </Box>