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

.claude/settings.local.json

@@ -34,7 +34,8 @@
       "Bash(npm run *)",
       "Bash(npm test *)",
       "Bash(python3 *)",
-      "Bash(ls -lh aInventory-PROD-v*.zip)"
+      "Bash(ls -lh aInventory-PROD-v*.zip)",
+      "Bash(npm install *)"
     ]
   }
 }

frontend/app/globals.css

@@ -2,12 +2,12 @@
 @tailwind components;
 @tailwind utilities;
 
-@import "bootstrap-icons/font/bootstrap-icons.css";
-
 :root {
   /* slate-950 forced as default to prevent white flash */
   --background: #020617;
   --foreground: #f1f5f9;
+  --primary: #3b82f6;
+  --primary-foreground: #ffffff;
 }
 
 body {

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({ 
+export default function AdminOverlay({
-  show, 
+  show,
-  onClose, 
+  onClose,
-  users, 
+  users,
-  categories, 
+  categories,
-  onUpdateUsers, 
+  onUpdateUsers,
-  onUpdateCategories 
+  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 
+              <button
-                onClick={() => {
+                onClick={() => setShowCreateUserModal(true)}
-                  const name = prompt("Enter new username:");
+                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"
-                  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"
               >
                 <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>
+    </>
   );
 }

frontend/components/BottomNav.tsx

@@ -28,27 +28,27 @@ export default function BottomNav({
     <footer className="fixed bottom-0 left-0 right-0 py-3 px-2 pb-safe bg-slate-950/80 backdrop-blur-lg border-t border-slate-900/50 z-40 transition-all duration-300">
       <div className="max-w-xl mx-auto flex justify-around items-center text-slate-400">
         
-        <button 
+        <button
           onClick={() => router.push('/')}
-          className={cn("flex flex-col items-center gap-1", isHome && "text-primary")}
+          className={cn("flex flex-col items-center gap-1 rounded px-2 py-1 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none", isHome && "text-primary")}
         >
           <Smartphone size={20} />
           <span className="text-xs font-bold transition-all">Home</span>
         </button>
 
         {/* Inventory */}
-        <button 
+        <button
           onClick={() => router.push('/inventory')}
-          className={cn("flex flex-col items-center gap-1", isInventory && "text-primary")}
+          className={cn("flex flex-col items-center gap-1 rounded px-2 py-1 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none", isInventory && "text-primary")}
         >
           <Package size={20} />
           <span className="text-xs font-bold transition-all">Inventory</span>
         </button>
 
         {/* Logs */}
-        <button 
+        <button
           onClick={() => router.push('/logs')}
-          className={cn("flex flex-col items-center gap-1", isLogs && "text-primary")}
+          className={cn("flex flex-col items-center gap-1 rounded px-2 py-1 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none", isLogs && "text-primary")}
         >
           <History size={20} />
           <span className="text-xs font-bold transition-all">Logs</span>
@@ -56,9 +56,9 @@ export default function BottomNav({
 
         {/* Admin Settings */}
         {currentUser?.role === 'admin' && (
-          <button 
+          <button
             onClick={() => router.push('/admin')}
-            className={cn("flex flex-col items-center gap-1", isAdmin && "text-primary")}
+            className={cn("flex flex-col items-center gap-1 rounded px-2 py-1 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none", isAdmin && "text-primary")}
           >
             <Settings size={20} />
             <span className="text-xs font-bold transition-all">Admin</span>
@@ -66,14 +66,14 @@ export default function BottomNav({
         )}
 
         {/* Logout */}
-        <button 
+        <button
           onClick={() => {
             if (window.confirm("Are you sure you want to logout?")) {
               import('@/lib/auth').then(m => m.clearAuth());
               window.location.href = '/login';
             }
           }}
-          className="flex flex-col items-center gap-1 text-rose-500 hover:text-rose-400 transition-colors"
+          className="flex flex-col items-center gap-1 text-rose-500 hover:text-rose-400 transition-colors rounded px-2 py-1 focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:outline-none"
         >
           <LogOut size={20} />
           <span className="text-xs font-bold transition-all">Logout</span>

frontend/components/CreateUserModal.tsx

@@ -0,0 +1,166 @@
+'use client';
+
+import { useState } from 'react';
+import { X, Loader2 } from 'lucide-react';
+import { inventoryApi } from '@/lib/api';
+import { toast } from 'react-hot-toast';
+
+interface CreateUserModalProps {
+  show: boolean;
+  onClose: () => void;
+  onUserCreated: () => void;
+}
+
+export default function CreateUserModal({ show, onClose, onUserCreated }: CreateUserModalProps) {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [errors, setErrors] = useState<{ username?: string; password?: string }>({});
+  const [loading, setLoading] = useState(false);
+
+  if (!show) return null;
+
+  const validateForm = () => {
+    const newErrors: typeof errors = {};
+
+    if (!username.trim()) {
+      newErrors.username = 'Username is required';
+    }
+
+    if (!password.trim()) {
+      newErrors.password = 'Password is required';
+    } else if (password.length < 6) {
+      newErrors.password = 'Password must be at least 6 characters';
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!validateForm()) return;
+
+    setLoading(true);
+    try {
+      await inventoryApi.createUser({
+        username: username.trim(),
+        password,
+        role: 'user'
+      });
+
+      toast.success('User created successfully');
+      setUsername('');
+      setPassword('');
+      setErrors({});
+      onUserCreated();
+      onClose();
+    } catch (error: any) {
+      const errorMsg = error?.response?.data?.detail || 'Failed to create user';
+      if (errorMsg.includes('already exists')) {
+        setErrors({ username: 'Username already exists' });
+      } else {
+        toast.error(errorMsg);
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const isFormValid = username.trim() && password.length >= 6 && !Object.keys(errors).length;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
+      <div className="bg-slate-900 border border-slate-800 rounded-lg shadow-xl max-w-sm w-full mx-4">
+        {/* Header */}
+        <div className="flex items-center justify-between p-6 border-b border-slate-800">
+          <h2 className="text-lg font-black text-white">Create User</h2>
+          <button
+            onClick={onClose}
+            className="p-1 text-slate-500 hover:text-slate-300 rounded focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
+            aria-label="Close"
+          >
+            <X size={20} />
+          </button>
+        </div>
+
+        {/* Form */}
+        <form onSubmit={handleSubmit} className="p-6 space-y-4">
+          {/* Username Field */}
+          <div>
+            <label htmlFor="username" className="block text-sm font-semibold text-slate-300 mb-2">
+              Username
+            </label>
+            <input
+              id="username"
+              type="text"
+              value={username}
+              onChange={(e) => {
+                setUsername(e.target.value);
+                if (errors.username) setErrors({ ...errors, username: undefined });
+              }}
+              placeholder="Enter username"
+              className={`w-full px-3 py-2.5 bg-slate-800 border rounded text-white placeholder-slate-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary ${
+                errors.username ? 'border-red-500' : 'border-slate-700'
+              }`}
+              disabled={loading}
+            />
+            {errors.username && (
+              <p className="mt-1.5 text-sm text-red-500">{errors.username}</p>
+            )}
+          </div>
+
+          {/* Password Field */}
+          <div>
+            <label htmlFor="password" className="block text-sm font-semibold text-slate-300 mb-2">
+              Password
+            </label>
+            <input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => {
+                setPassword(e.target.value);
+                if (errors.password) setErrors({ ...errors, password: undefined });
+              }}
+              placeholder="Enter password"
+              className={`w-full px-3 py-2.5 bg-slate-800 border rounded text-white placeholder-slate-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary ${
+                errors.password ? 'border-red-500' : 'border-slate-700'
+              }`}
+              disabled={loading}
+            />
+            {errors.password && (
+              <p className="mt-1.5 text-sm text-red-500">{errors.password}</p>
+            )}
+          </div>
+
+          {/* Buttons */}
+          <div className="flex gap-2 pt-4">
+            <button
+              type="button"
+              onClick={onClose}
+              disabled={loading}
+              className="flex-1 px-4 py-2.5 text-slate-300 bg-slate-800 border border-slate-700 rounded font-semibold hover:bg-slate-700 transition-colors disabled:opacity-50 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={!isFormValid || loading}
+              className="flex-1 px-4 py-2.5 bg-primary text-primary-foreground rounded font-semibold hover:bg-blue-600 transition-colors disabled:opacity-50 flex items-center justify-center gap-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900 focus-visible:ring-primary focus-visible:outline-none"
+            >
+              {loading ? (
+                <>
+                  <Loader2 size={16} className="animate-spin" />
+                  Creating...
+                </>
+              ) : (
+                'Create'
+              )}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

frontend/components/StatCard.tsx

@@ -9,7 +9,7 @@ interface StatCardProps {
 
 export default function StatCard({ label, value, icon: Icon }: StatCardProps) {
   return (
-    <div className="flex justify-between items-center gap-2 p-3.5 bg-slate-900/50 backdrop-blur-md border border-slate-800/50 rounded-2xl shadow-sm transition-all hover:bg-slate-900/80" role="status">
+    <div className="flex justify-between items-center gap-2 p-3.5 bg-slate-900/50 border border-slate-800/50 rounded-2xl shadow-sm transition-all hover:bg-slate-900/80" role="status">
       <div className="flex items-center gap-2.5 min-w-0">
         {Icon && <Icon className="w-5 h-5 text-primary flex-shrink-0" aria-hidden="true" />}
         <span className="text-base md:text-lg text-slate-300 font-semibold truncate">

frontend/package.json

@@ -10,7 +10,6 @@
   },
   "dependencies": {
     "axios": "^1.15.0",
-    "bootstrap-icons": "^1.11.3",
     "clsx": "^2.1.1",
     "dexie": "^4.4.2",
     "html5-qrcode": "^2.3.8",

frontend/tailwind.config.ts

@@ -11,8 +11,8 @@ const config: Config = {
         background: "var(--background)",
         foreground: "var(--foreground)",
         primary: {
-          DEFAULT: "#3b82f6",
+          DEFAULT: "var(--primary)",
-          foreground: "#ffffff",
+          foreground: "var(--primary-foreground)",
         },
       },
       keyframes: {