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/theme.ts

@@ -1,4 +1,4 @@
-import { createTheme } from "@mui/material/styles";
+import { createTheme, type Theme } from "@mui/material/styles";
 
 const FONT_BODY = "'Plus Jakarta Sans', system-ui, sans-serif";
 const FONT_HEADING = "'Urbanist', sans-serif";
@@ -226,3 +226,29 @@ export const fonts = {
   heading: FONT_HEADING,
   mono: FONT_MONO,
 };
+
+export type IconBadgeColor =
+  | "default"
+  | "primary"
+  | "success"
+  | "warning"
+  | "error"
+  | "info";
+
+/**
+ * sx fragment for a solid icon-badge tile: a `<color>.main` fill with a WHITE
+ * glyph, darkened in dark mode (FILLED_DARK_BG) so white stays legible on the
+ * otherwise-bright success/warning/info/error fills. `default` = neutral grey.
+ * Single source of truth for every labelled icon badge — use in an sx array
+ * next to the tile's size/shape so they can never drift apart:
+ *   sx={[{ width: 40, height: 40, borderRadius: 2, display: "flex", … }, iconBadgeSx(color)]}
+ */
+export function iconBadgeSx(color: IconBadgeColor) {
+  const bg = color === "default" ? "grey.600" : `${color}.main`;
+  const darkBg = (FILLED_DARK_BG as Record<string, { bg: string }>)[color]?.bg;
+  return (theme: Theme) => ({
+    bgcolor: bg,
+    color: "common.white",
+    ...(darkBg ? theme.applyStyles("dark", { backgroundColor: darkBg }) : {}),
+  });
+}