refactor: distill AdminOverlay complexity and inject color boldness

- Replace window.prompt() for category creation with dedicated CategoryCreationModal component
- Increase visual hierarchy: section headings slate-500 → slate-400 (bolder, more confident)
- Standardize Add User/Category button styling with consistent hover states and focus indicators
- Remove browser prompt friction; all forms now use accessible modal dialogs
- Technical, precise aesthetic: reduced visual clutter, increased contrast and decision clarity

.impeccable.md

@@ -0,0 +1,48 @@
+# Design Context: TFM aInventory
+
+## Users
+
+**Primary Users:** Field operators AND administrative staff (hybrid usage)
+- **Field Operators:** Using on-site/in-warehouse on mobile devices for real-time scanning, inventory check-in/out, offline data collection
+- **Admin Staff:** Using on desktop for user management, category management, audit logs, system settings
+- **Context:** High-stakes environment; accuracy critical; both speed (field) and comprehension (admin) matter equally
+
+## Brand Personality
+
+**3-Word Profile:** Technical. Precise. Decisive.
+
+- **Voice:** Direct, no-nonsense, authoritative. Every element serves a clear function.
+- **Tone:** Business-focused, reliable, confident. Users trust this system with their inventory.
+- **Emotional Goal:** Confidence in accuracy; reassurance that nothing will be lost or mistyped; decisiveness in destructive actions.
+
+## Aesthetic Direction
+
+**Theme:** Dark mode (current), but bolder and more distinctive
+
+**Why Dark:** Field operators often use devices in varying lighting (warehouse basements, outdoors). Dark mode reduces eye strain and works across contexts.
+
+**Current State:** Minimal slate/blue palette. Recently removed glassmorphism (backdrop-blur). Clean but understated.
+
+**Opportunity:** Inject personality and visual weight while maintaining technical precision. The current aesthetic is correct in *restraint* but lacks *boldness*. Dark mode should feel confident and intentional, not just "safe default."
+
+**Aesthetic Inspiration:** Industrial + Technical
+- Precision instruments (clean lines, exact details)
+- Command center interfaces (high contrast, clear hierarchy)
+- Lab equipment (honest materials, no decoration)
+- NOT: Glassmorphism, gradients, glows, or decoration without function
+
+## Design Principles
+
+1. **Clarity Through Contrast:** High visual hierarchy. Field operators need to scan + act in seconds. Admins need to parse complex data quickly. Use color, size, and weight strategically.
+
+2. **Technical Precision:** Every element has intention. No decoration. Use whitespace and alignment to create rhythm, not visual effects.
+
+3. **Dual-Context Adaptation:** Field view (mobile, fast, action-focused) vs. Admin view (desktop, data-rich, decision-focused). Same visual language, different complexity.
+
+4. **Dark Mode Confidence:** Dark shouldn't mean "timid." Use bold primary colors, high-contrast text, purposeful accents. Make the dark feel deliberate.
+
+5. **Offline-First Reliability:** Suggest stability and trust. No animations that suggest pending network requests. Solid, grounded UI.
+
+---
+
+**Next Step:** Use these principles to guide `/distill` — systematically remove unnecessary complexity and inject bold, technical personality into the interface.

frontend/components/AdminOverlay.tsx

@@ -6,6 +6,7 @@ import { inventoryApi } from '@/lib/api';
 import { toast } from 'react-hot-toast';
 import CreateUserModal from './CreateUserModal';
 import ConfirmationModal from './ConfirmationModal';
+import CategoryCreationModal from './CategoryCreationModal';
 
 interface AdminOverlayProps {
   show: boolean;
@@ -25,6 +26,7 @@ export default function AdminOverlay({
   onUpdateCategories
 }: AdminOverlayProps) {
   const [showCreateUserModal, setShowCreateUserModal] = useState(false);
+  const [showCreateCategoryModal, setShowCreateCategoryModal] = useState(false);
   const [confirmState, setConfirmState] = useState<{
     show: boolean;
     type: 'user' | 'category' | null;
@@ -44,6 +46,10 @@ export default function AdminOverlay({
     inventoryApi.getUsers().then(onUpdateUsers);
   };
 
+  const handleCategoryCreated = () => {
+    inventoryApi.getCategories().then(onUpdateCategories);
+  };
+
   const handleDeleteUser = async () => {
     if (!confirmState.itemId) return;
     setConfirmState(prev => ({ ...prev, loading: true }));
@@ -79,6 +85,11 @@ export default function AdminOverlay({
         onClose={() => setShowCreateUserModal(false)}
         onUserCreated={handleUserCreated}
       />
+      <CategoryCreationModal
+        show={showCreateCategoryModal}
+        onClose={() => setShowCreateCategoryModal(false)}
+        onCategoryCreated={handleCategoryCreated}
+      />
       <ConfirmationModal
         show={confirmState.show && confirmState.type === 'user'}
         title={`Delete User: ${confirmState.itemName}?`}
@@ -123,10 +134,10 @@ export default function AdminOverlay({
         <div className="flex-1 overflow-y-auto p-6 space-y-8">
           <section className="space-y-4">
             <div className="flex items-center justify-between">
-              <h3 className="text-sm font-black text-slate-500">User Management</h3>
+              <h3 className="text-sm font-black text-slate-400">User Management</h3>
               <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"
+                className="flex items-center gap-1 text-xs font-black text-primary hover:text-blue-400 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none rounded px-1"
               >
                 <UserPlus size={12} /> Add User
               </button>
@@ -169,20 +180,10 @@ 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">Category Groups</h3>
+              <h3 className="text-sm font-black text-slate-400">Category Groups</h3>
-              <button 
+              <button
-                onClick={() => {
+                onClick={() => setShowCreateCategoryModal(true)}
-                  const name = prompt("New category name:");
+                className="flex items-center gap-1 text-xs font-black text-primary hover:text-blue-400 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none rounded px-1"
-                  if (!name) return;
-                  const desc = prompt("Description (optional):");
-                  inventoryApi.createCategory({ name, description: desc })
-                    .then(() => {
-                       toast.success("Category added");
-                       inventoryApi.getCategories().then(onUpdateCategories);
-                    })
-                    .catch(() => toast.error("Failed to add category"));
-                }}
-                className="flex items-center gap-1 text-xs font-black text-primary hover:underline"
               >
                 <Plus size={12} /> Add Category
               </button>

frontend/components/CategoryCreationModal.tsx

@@ -0,0 +1,135 @@
+'use client';
+
+import { useState } from 'react';
+import { X, Loader2, Tag } from 'lucide-react';
+import { inventoryApi } from '@/lib/api';
+import { toast } from 'react-hot-toast';
+
+interface CategoryCreationModalProps {
+  show: boolean;
+  onClose: () => void;
+  onCategoryCreated: () => void;
+}
+
+export default function CategoryCreationModal({
+  show,
+  onClose,
+  onCategoryCreated
+}: CategoryCreationModalProps) {
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  if (!show) return null;
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!name.trim()) {
+      setError('Category name is required');
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+    try {
+      await inventoryApi.createCategory({
+        name: name.trim(),
+        description: description.trim() || undefined
+      });
+      toast.success('Category added');
+      setName('');
+      setDescription('');
+      onCategoryCreated();
+      onClose();
+    } catch (err: any) {
+      setError(err?.response?.data?.detail || 'Failed to create category');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  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">
+        <div className="flex items-center justify-between p-6 border-b border-slate-800">
+          <div className="flex items-center gap-3">
+            <div className="p-2 bg-primary/10 rounded-lg text-primary">
+              <Tag size={20} />
+            </div>
+            <h2 className="text-lg font-black text-white">New Category</h2>
+          </div>
+          <button
+            onClick={onClose}
+            disabled={loading}
+            className="p-1 text-slate-500 hover:text-slate-300 rounded focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none disabled:opacity-50"
+            aria-label="Close"
+          >
+            <X size={20} />
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="p-6 space-y-4">
+          <div>
+            <label className="text-sm font-black text-slate-300">Name</label>
+            <input
+              type="text"
+              value={name}
+              onChange={(e) => {
+                setName(e.target.value);
+                setError(null);
+              }}
+              placeholder="e.g., Electronics"
+              className="w-full mt-2 px-3 py-2.5 bg-slate-800 border border-slate-700 rounded text-white placeholder-slate-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+              disabled={loading}
+              autoFocus
+            />
+          </div>
+
+          <div>
+            <label className="text-sm font-black text-slate-300">Description (optional)</label>
+            <input
+              type="text"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="Brief category description"
+              className="w-full mt-2 px-3 py-2.5 bg-slate-800 border border-slate-700 rounded text-white placeholder-slate-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+              disabled={loading}
+            />
+          </div>
+
+          {error && (
+            <div className="p-3 bg-rose-500/10 border border-rose-500/20 rounded">
+              <p className="text-sm text-rose-400">{error}</p>
+            </div>
+          )}
+
+          <div className="flex gap-2 pt-2">
+            <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={loading || !name.trim()}
+              className="flex-1 px-4 py-2.5 bg-primary text-white 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>
+  );
+}