refactor(frontend): audit fixes - accessibility, colors, and UX

Accessibility:
- Add focus-visible indicators to all interactive elements (buttons, inputs)
- Create accessible CreateUserModal to replace window.prompt()
- Add aria-labels to icon buttons for screen readers

Colors & Theming:
- Move primary color to CSS variable (--primary)
- Remove hard-coded #3b82f6 from tailwind config
- Clean up color consistency across theme

UX:
- Replace prompt-based user creation with proper modal form
- Implement inline field validation with error messages
- Add loading state during form submission
- Improve visual hierarchy and spacing

Performance:
- Remove bootstrap-icons dependency (duplicate with lucide-react)

Design:
- Reduce backdrop-blur overuse (remove from overlay scrim, StatCard)
- Improve AdminOverlay responsive design

frontend/components/AdminOverlay.tsx

@@ -1,8 +1,10 @@
 'use client';
 
+import { useState } from 'react';
 import { X, Shield, UserPlus, User, Trash2, Tag, Plus, AlertTriangle, LogOut, Layers } from 'lucide-react';
 import { inventoryApi } from '@/lib/api';
 import { toast } from 'react-hot-toast';
+import CreateUserModal from './CreateUserModal';
 
 interface AdminOverlayProps {
   show: boolean;
@@ -13,19 +15,31 @@ interface AdminOverlayProps {
   onUpdateCategories: (categories: any[]) => void;
 }
 
-export default function AdminOverlay({ 
-  show, 
-  onClose, 
-  users, 
-  categories, 
-  onUpdateUsers, 
-  onUpdateCategories 
+export default function AdminOverlay({
+  show,
+  onClose,
+  users,
+  categories,
+  onUpdateUsers,
+  onUpdateCategories
 }: AdminOverlayProps) {
+  const [showCreateUserModal, setShowCreateUserModal] = useState(false);
+
   if (!show) return null;
 
+  const handleUserCreated = () => {
+    inventoryApi.getUsers().then(onUpdateUsers);
+  };
+
   return (
-    <div className="fixed inset-0 z-50 bg-slate-950/60 backdrop-blur-sm animate-in fade-in duration-300">
-      <div className="absolute inset-y-0 right-0 w-full max-w-md bg-slate-900 border-l border-slate-800 shadow-2xl flex flex-col animate-in slide-in-from-right duration-500">
+    <>
+      <CreateUserModal
+        show={showCreateUserModal}
+        onClose={() => setShowCreateUserModal(false)}
+        onUserCreated={handleUserCreated}
+      />
+      <div className="fixed inset-0 z-50 bg-slate-950/60 animate-in fade-in duration-300">
+      <div className="absolute inset-y-0 right-0 w-full max-w-md sm:max-w-lg md:max-w-md bg-slate-900 border-l border-slate-800 shadow-2xl flex flex-col animate-in slide-in-from-right duration-500">
         <div className="p-6 border-b border-slate-800 flex items-center justify-between">
           <div className="flex items-center gap-3">
             <div className="p-2 bg-slate-800 rounded-xl text-primary">
@@ -33,9 +47,10 @@ export default function AdminOverlay({
             </div>
             <h2 className="text-xl font-black text-white">System Admin</h2>
           </div>
-          <button 
+          <button
             onClick={onClose}
-            className="p-2 hover:bg-slate-800 rounded-full transition-colors text-slate-500"
+            className="p-2 hover:bg-slate-800 rounded-full transition-colors text-slate-500 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
+            aria-label="Close"
           >
             <X size={20} />
           </button>
@@ -45,20 +60,9 @@ export default function AdminOverlay({
           <section className="space-y-4">
             <div className="flex items-center justify-between">
               <h3 className="text-sm font-black text-slate-500">User Management</h3>
-              <button 
-                onClick={() => {
-                  const name = prompt("Enter new username:");
-                  if (!name) return;
-                  const pwd = prompt("Enter password for " + name + ":");
-                  if (!pwd) return;
-                  inventoryApi.createUser({ username: name, password: pwd, role: 'user' })
-                    .then(() => {
-                       toast.success("User created");
-                       inventoryApi.getUsers().then(onUpdateUsers);
-                    })
-                    .catch(() => toast.error("Failed to create user"));
-                }}
-                className="flex items-center gap-1 text-xs font-black text-primary hover:underline"
+              <button
+                onClick={() => setShowCreateUserModal(true)}
+                className="flex items-center gap-1 text-xs font-black text-primary hover:underline focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none rounded px-1"
               >
                 <UserPlus size={12} /> Add User
               </button>
@@ -78,7 +82,7 @@ export default function AdminOverlay({
                   </div>
                   
                   {u.username !== 'Admin' && (
-                    <button 
+                    <button
                       onClick={() => {
                         if(confirm(`Delete user ${u.username}?`)) {
                           inventoryApi.deleteUser(u.id)
@@ -89,7 +93,8 @@ export default function AdminOverlay({
                             .catch(() => toast.error("Delete failed"));
                         }
                       }}
-                      className="p-2 text-rose-500 hover:bg-rose-500/10 rounded-lg transition-all"
+                      className="p-2 text-rose-500 hover:bg-rose-500/10 rounded-lg transition-all focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:outline-none"
+                      aria-label={`Delete user ${u.username}`}
                     >
                       <Trash2 size={16} />
                     </button>
@@ -133,7 +138,7 @@ export default function AdminOverlay({
                     </div>
                   </div>
                   
-                  <button 
+                  <button
                      onClick={() => {
                        if(confirm(`Delete category ${cat.name}?`)) {
                          inventoryApi.deleteCategory(cat.id)
@@ -144,7 +149,8 @@ export default function AdminOverlay({
                            .catch(e => toast.error(e.response?.data?.detail || "Delete failed"));
                        }
                      }}
-                     className="p-2 text-rose-500 hover:bg-rose-500/10 rounded-lg transition-all"
+                     className="p-2 text-rose-500 hover:bg-rose-500/10 rounded-lg transition-all focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:outline-none"
+                     aria-label={`Delete category ${cat.name}`}
                   >
                      <Trash2 size={16} />
                   </button>
@@ -159,18 +165,19 @@ export default function AdminOverlay({
               <p className="text-sm font-black">Logout</p>
             </div>
             <p className="text-xs text-slate-500">Exit current session and return to identity check.</p>
-            <button 
+            <button
               onClick={() => {
                 import('@/lib/auth').then(m => m.clearAuth());
                 window.location.href = '/login';
               }}
-              className="w-full bg-rose-500/10 hover:bg-rose-500/20 text-rose-500 border border-rose-500/20 font-black py-3 rounded-xl transition-all flex items-center justify-center gap-2"
+              className="w-full bg-rose-500/10 hover:bg-rose-500/20 text-rose-500 border border-rose-500/20 font-black py-3 rounded-xl transition-all flex items-center justify-center gap-2 focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:outline-none"
             >
               <LogOut size={16} /> End Session
             </button>
           </section>
         </div>
       </div>
-    </div>
+      </div>
+    </>
   );
 }