feat(mui): mount MUI provider + sync color scheme to data-theme

Wraps AdminApp in MuiProvider (ThemeProvider v7, defaultMode=dark) and
adds MuiColorSchemeSync to mirror ThemeContext's data-theme attribute
into MUI's JS color-scheme state so useColorScheme().mode stays in sync.

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

src/admin/AdminApp.tsx

@@ -7,6 +7,7 @@ import { queryClient } from "./lib/queryClient";
 import ErrorBoundary from "./components/ErrorBoundary";
 import AdminLayout from "./components/AdminLayout";
 import AlertContainer from "./components/AlertContainer";
+import MuiProvider from "./ui/MuiProvider";
 import Login from "./pages/Login";
 import Dashboard from "./pages/Dashboard";
 import "./variables.css";
@@ -84,6 +85,7 @@ const WarehouseCategories = lazy(() => import("./pages/WarehouseCategories"));
 
 export default function AdminApp() {
   return (
+    <MuiProvider>
       <AuthProvider>
         <AlertProvider>
           <QueryClientProvider client={queryClient}>
@@ -156,7 +158,10 @@ export default function AdminApp() {
                     <Route path="settings" element={<Settings />} />
                     <Route path="audit-log" element={<AuditLog />} />
                     <Route path="warehouse" element={<Warehouse />} />
-                  <Route path="warehouse/items" element={<WarehouseItems />} />
+                    <Route
+                      path="warehouse/items"
+                      element={<WarehouseItems />}
+                    />
                     <Route
                       path="warehouse/items/:id"
                       element={<WarehouseItemDetail />}
@@ -233,5 +238,6 @@ export default function AdminApp() {
           </QueryClientProvider>
         </AlertProvider>
       </AuthProvider>
+    </MuiProvider>
   );
 }

src/admin/ui/MuiColorSchemeSync.tsx

@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+import { useColorScheme } from "@mui/material/styles";
+import { useTheme as useAppTheme } from "../../context/ThemeContext";
+
+/**
+ * ThemeContext is the single owner of the `data-theme` attribute. This mirrors
+ * its value into MUI's JS color-scheme state so theme.applyStyles('dark') and
+ * useColorScheme().mode stay in sync with the attribute the CSS selector reads.
+ */
+export default function MuiColorSchemeSync() {
+  const { theme } = useAppTheme();
+  const { mode, setMode } = useColorScheme();
+
+  useEffect(() => {
+    if (mode !== theme) setMode(theme as "light" | "dark");
+  }, [theme, mode, setMode]);
+
+  return null;
+}

src/admin/ui/MuiProvider.tsx

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+import { ThemeProvider } from "@mui/material/styles";
+import { theme } from "../theme";
+import MuiColorSchemeSync from "./MuiColorSchemeSync";
+
+export default function MuiProvider({ children }: { children: ReactNode }) {
+  return (
+    <ThemeProvider theme={theme} defaultMode="dark">
+      <MuiColorSchemeSync />
+      {children}
+    </ThemeProvider>
+  );
+}