From 39d070796830f29846f461ba24c69f13c2a1f5c2 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Thu, 15 Jan 2026 17:51:48 -0500
Subject: [PATCH] Lots of style clean up

---
 .../core/accounts/[account_id]/+page.svelte   |  14 +-
 .../addresses/ae_comp__address_form.svelte    |  26 +--
 .../contacts/ae_comp__contact_form.svelte     |  20 +--
 .../core/people/ae_comp__person_form.svelte   |  26 +--
 src/routes/core/users/+page.svelte            | 157 +++++++++++-------
 5 files changed, 143 insertions(+), 100 deletions(-)

diff --git a/src/routes/core/accounts/[account_id]/+page.svelte b/src/routes/core/accounts/[account_id]/+page.svelte
index e4b3e01f..3f7c3362 100644
--- a/src/routes/core/accounts/[account_id]/+page.svelte
+++ b/src/routes/core/accounts/[account_id]/+page.svelte
@@ -110,19 +110,19 @@
                 <div class="space-y-4">
                     <div class="space-y-1">
                         <label class="label text-xs font-bold opacity-75">Account Name</label>
-                        <input class="input variant-filled-surface rounded-lg" type="text" bind:value={account.name} />
+                        <input class="input variant-filled-surface rounded-lg p-2" type="text" bind:value={account.name} />
                     </div>
                     <div class="space-y-1">
                         <label class="label text-xs font-bold opacity-75">Short Name</label>
-                        <input class="input variant-filled-surface rounded-lg" type="text" bind:value={account.short_name} />
+                        <input class="input variant-filled-surface rounded-lg p-2" type="text" bind:value={account.short_name} />
                     </div>
                     <div class="space-y-1">
                         <label class="label text-xs font-bold opacity-75">Account Code</label>
-                        <input class="input variant-filled-surface rounded-lg font-mono" type="text" bind:value={account.code} />
+                        <input class="input variant-filled-surface rounded-lg font-mono p-2" type="text" bind:value={account.code} />
                     </div>
                     <div class="space-y-1">
                         <label class="label text-xs font-bold opacity-75">Description</label>
-                        <textarea class="textarea variant-filled-surface rounded-lg" rows="3" bind:value={account.description}></textarea>
+                        <textarea class="textarea variant-filled-surface rounded-lg p-2" rows="3" bind:value={account.description}></textarea>
                     </div>
                 </div>
             </div>
@@ -148,11 +148,11 @@
                 <div class="space-y-4 border-t border-surface-500/30 pt-4">
                     <div class="space-y-1">
                         <label class="label text-xs font-bold opacity-75">Group</label>
-                        <input class="input variant-filled-surface rounded-lg" type="text" bind:value={account.group} />
+                        <input class="input variant-filled-surface rounded-lg p-2" type="text" bind:value={account.group} />
                     </div>
                     <div class="space-y-1">
                         <label class="label text-xs font-bold opacity-75">Sort Order</label>
-                        <input class="input variant-filled-surface rounded-lg" type="number" bind:value={account.sort} />
+                        <input class="input variant-filled-surface rounded-lg p-2" type="number" bind:value={account.sort} />
                     </div>
                 </div>
             </div>
@@ -162,7 +162,7 @@
                     <span class="text-tertiary-500">◆</span> Internal Notes
                 </h3>
                 <div class="space-y-1">
-                    <textarea class="textarea variant-filled-surface rounded-lg" rows="4" bind:value={account.notes} placeholder="Private notes for staff..."></textarea>
+                    <textarea class="textarea variant-filled-surface rounded-lg p-2" rows="4" bind:value={account.notes} placeholder="Private notes for staff..."></textarea>
                 </div>
             </div>
         </div>
diff --git a/src/routes/core/addresses/ae_comp__address_form.svelte b/src/routes/core/addresses/ae_comp__address_form.svelte
index cfb9fd40..8152f887 100644
--- a/src/routes/core/addresses/ae_comp__address_form.svelte
+++ b/src/routes/core/addresses/ae_comp__address_form.svelte
@@ -130,27 +130,27 @@
 
             <div class="space-y-1">
                 <label class="label text-xs font-bold opacity-75">Attention To / Name</label>
-                <input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.attention_to} placeholder="John Doe" />
+                <input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.attention_to} placeholder="John Doe" />
             </div>
 
             <div class="space-y-1">
                 <label class="label text-xs font-bold opacity-75">Organization Name</label>
-                <input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.organization_name} placeholder="Acme Corp" />
+                <input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.organization_name} placeholder="Acme Corp" />
             </div>
 
             <div class="space-y-1">
                 <label class="label text-xs font-bold opacity-75">Address Line 1</label>
-                <input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.line_1} required placeholder="123 Main St" />
+                <input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.line_1} required placeholder="123 Main St" />
             </div>
 
             <div class="grid grid-cols-2 gap-2">
                 <div class="space-y-1">
                     <label class="label text-xs font-bold opacity-75">Line 2</label>
-                    <input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.line_2} placeholder="Suite 100" />
+                    <input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.line_2} placeholder="Suite 100" />
                 </div>
                 <div class="space-y-1">
                     <label class="label text-xs font-bold opacity-75">Line 3</label>
-                    <input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.line_3} placeholder="Floor 2" />
+                    <input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.line_3} placeholder="Floor 2" />
                 </div>
             </div>
         </fieldset>
@@ -162,24 +162,24 @@
             <div class="grid grid-cols-2 gap-2">
                 <div class="space-y-1">
                     <label class="label text-xs font-bold opacity-75">City</label>
-                    <input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.city} required placeholder="Metropolis" />
+                    <input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.city} required placeholder="Metropolis" />
                 </div>
                 <div class="space-y-1">
                     <label class="label text-xs font-bold opacity-75">State / Province</label>
-                    <input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.state_province} placeholder="NY" />
+                    <input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.state_province} placeholder="NY" />
                 </div>
             </div>
 
             <div class="grid grid-cols-2 gap-2">
                 <div class="space-y-1">
                     <label class="label text-xs font-bold opacity-75">Postal Code</label>
-                    <input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.postal_code} placeholder="12345" />
+                    <input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.postal_code} placeholder="12345" />
                 </div>
                 <div class="space-y-1">
                     <label class="label text-xs font-bold opacity-75">Country (Code)</label>
                     <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
                         <div class="input-group-shim"><Globe size={16} /></div>
-                        <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="text" bind:value={formData.country} placeholder="USA" />
+                        <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" type="text" bind:value={formData.country} placeholder="USA" />
                     </div>
                 </div>
             </div>
@@ -193,7 +193,7 @@
                 <label class="label text-xs font-bold opacity-75">Timezone</label>
                 <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
                     <div class="input-group-shim"><Clock size={16} /></div>
-                    <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="text" bind:value={formData.timezone} placeholder="America/New_York" />
+                    <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" type="text" bind:value={formData.timezone} placeholder="America/New_York" />
                 </div>
             </div>
 
@@ -202,14 +202,14 @@
                     <label class="label text-xs font-bold opacity-75">Latitude</label>
                     <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
                         <div class="input-group-shim"><Navigation size={16} /></div>
-                        <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="text" bind:value={formData.latitude} placeholder="40.7128" />
+                        <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" type="text" bind:value={formData.latitude} placeholder="40.7128" />
                     </div>
                 </div>
                 <div class="space-y-1">
                     <label class="label text-xs font-bold opacity-75">Longitude</label>
                     <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
                         <div class="input-group-shim"><Navigation size={16} /></div>
-                        <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="text" bind:value={formData.longitude} placeholder="-74.0060" />
+                        <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" type="text" bind:value={formData.longitude} placeholder="-74.0060" />
                     </div>
                 </div>
             </div>
@@ -236,7 +236,7 @@
 
             <div class="space-y-1">
                 <label class="label text-xs font-bold opacity-75">Internal Notes</label>
-                <textarea class="textarea variant-filled-surface rounded-lg placeholder-surface-400" rows="2" bind:value={formData.notes} placeholder="Notes about this address..."></textarea>
+                <textarea class="textarea variant-filled-surface rounded-lg placeholder-surface-400 p-2" rows="2" bind:value={formData.notes} placeholder="Notes about this address..."></textarea>
             </div>
         </fieldset>
     </div>
diff --git a/src/routes/core/contacts/ae_comp__contact_form.svelte b/src/routes/core/contacts/ae_comp__contact_form.svelte
index b225debd..8b7046d0 100644
--- a/src/routes/core/contacts/ae_comp__contact_form.svelte
+++ b/src/routes/core/contacts/ae_comp__contact_form.svelte
@@ -126,19 +126,19 @@
             
             <div class="space-y-1">
                 <label class="label text-xs font-bold opacity-75">Title / Name</label>
-                <input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.title} required placeholder="Business Office" />
+                <input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.title} required placeholder="Business Office" />
             </div>
 
             <div class="space-y-1">
                 <label class="label text-xs font-bold opacity-75">Tagline</label>
-                <input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.tagline} placeholder="Primary contact for business inquiries" />
+                <input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.tagline} placeholder="Primary contact for business inquiries" />
             </div>
 
             <div class="space-y-1">
                 <label class="label text-xs font-bold opacity-75">Email Address</label>
                 <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
                     <div class="input-group-shim"><Mail size={16} /></div>
-                    <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="email" bind:value={formData.email} placeholder="contact@example.com" />
+                    <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" type="email" bind:value={formData.email} placeholder="contact@example.com" />
                 </div>
             </div>
         </fieldset>
@@ -152,14 +152,14 @@
                     <label class="label text-xs font-bold opacity-75">Mobile Phone</label>
                     <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
                         <div class="input-group-shim"><Phone size={16} /></div>
-                        <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="tel" bind:value={formData.phone_mobile} placeholder="+1..." />
+                        <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" type="tel" bind:value={formData.phone_mobile} placeholder="+1..." />
                     </div>
                 </div>
                 <div class="space-y-1">
                     <label class="label text-xs font-bold opacity-75">Office Phone</label>
                     <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
                         <div class="input-group-shim"><Phone size={16} /></div>
-                        <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="tel" bind:value={formData.phone_office} placeholder="+1..." />
+                        <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" type="tel" bind:value={formData.phone_office} placeholder="+1..." />
                     </div>
                 </div>
             </div>
@@ -168,7 +168,7 @@
                 <label class="label text-xs font-bold opacity-75">Website URL</label>
                 <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
                     <div class="input-group-shim"><Globe size={16} /></div>
-                    <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="url" bind:value={formData.website_url} placeholder="https://..." />
+                    <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" type="url" bind:value={formData.website_url} placeholder="https://..." />
                 </div>
             </div>
         </fieldset>
@@ -181,7 +181,7 @@
                 <label class="label text-xs font-bold opacity-75">LinkedIn URL</label>
                 <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
                     <div class="input-group-shim"><Linkedin size={16} /></div>
-                    <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="url" bind:value={formData.linkedin_url} placeholder="https://linkedin.com/in/..." />
+                    <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" type="url" bind:value={formData.linkedin_url} placeholder="https://linkedin.com/in/..." />
                 </div>
             </div>
 
@@ -190,14 +190,14 @@
                     <label class="label text-xs font-bold opacity-75">Facebook URL</label>
                     <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
                         <div class="input-group-shim"><Facebook size={16} /></div>
-                        <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="url" bind:value={formData.facebook_url} placeholder="https://facebook.com/..." />
+                        <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" type="url" bind:value={formData.facebook_url} placeholder="https://facebook.com/..." />
                     </div>
                 </div>
                 <div class="space-y-1">
                     <label class="label text-xs font-bold opacity-75">Instagram URL</label>
                     <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
                         <div class="input-group-shim"><Instagram size={16} /></div>
-                        <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="url" bind:value={formData.instagram_url} placeholder="https://instagram.com/..." />
+                        <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" type="url" bind:value={formData.instagram_url} placeholder="https://instagram.com/..." />
                     </div>
                 </div>
             </div>
@@ -224,7 +224,7 @@
 
             <div class="space-y-1">
                 <label class="label text-xs font-bold opacity-75">Internal Notes</label>
-                <textarea class="textarea variant-filled-surface rounded-lg placeholder-surface-400" rows="2" bind:value={formData.notes} placeholder="Additional details..."></textarea>
+                <textarea class="textarea variant-filled-surface rounded-lg placeholder-surface-400 p-2" rows="2" bind:value={formData.notes} placeholder="Additional details..."></textarea>
             </div>
         </fieldset>
     </div>
diff --git a/src/routes/core/people/ae_comp__person_form.svelte b/src/routes/core/people/ae_comp__person_form.svelte
index bff4e51c..3595ef6a 100644
--- a/src/routes/core/people/ae_comp__person_form.svelte
+++ b/src/routes/core/people/ae_comp__person_form.svelte
@@ -149,30 +149,30 @@
             <div class="grid grid-cols-4 gap-2">
                 <div class="space-y-1 col-span-1">
                     <label class="label text-xs font-bold opacity-75">Prefix</label>
-                    <input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.prefix} placeholder="Mr." />
+                    <input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.prefix} placeholder="Mr." />
                 </div>
                 <div class="space-y-1 col-span-3">
                     <label class="label text-xs font-bold opacity-75">Given Name</label>
-                    <input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.given_name} required placeholder="Jane" />
+                    <input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.given_name} required placeholder="Jane" />
                 </div>
             </div>
 
             <div class="grid grid-cols-4 gap-2">
                 <div class="space-y-1 col-span-3">
                     <label class="label text-xs font-bold opacity-75">Family Name</label>
-                    <input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.family_name} required placeholder="Doe" />
+                    <input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.family_name} required placeholder="Doe" />
                 </div>
                 <div class="space-y-1 col-span-1">
                     <label class="label text-xs font-bold opacity-75">Suffix</label>
-                    <input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.suffix} placeholder="PhD" />
+                    <input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.suffix} placeholder="PhD" />
                 </div>
             </div>
 
             <div class="space-y-1">
                 <label class="label text-xs font-bold opacity-75">Middle Name / Informal Name (Nickname)</label>
                 <div class="grid grid-cols-2 gap-2">
-                    <input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.middle_name} placeholder="Middle" />
-                    <input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.nickname} placeholder="Nickname" />
+                    <input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.middle_name} placeholder="Middle" />
+                    <input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.nickname} placeholder="Nickname" />
                 </div>
             </div>
         </fieldset>
@@ -185,7 +185,7 @@
                 <label class="label text-xs font-bold opacity-75">Primary Email</label>
                 <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
                     <div class="input-group-shim"><Mail size={16} /></div>
-                    <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="email" bind:value={formData.primary_email} placeholder="jane.doe@example.com" />
+                    <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" type="email" bind:value={formData.primary_email} placeholder="jane.doe@example.com" />
                 </div>
             </div>
 
@@ -193,7 +193,7 @@
                 <label class="label text-xs font-bold opacity-75">Phone Number</label>
                 <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
                     <div class="input-group-shim"><Phone size={16} /></div>
-                    <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="tel" bind:value={formData.phone} placeholder="+1 (555) 000-0000" />
+                    <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" type="tel" bind:value={formData.phone} placeholder="+1 (555) 000-0000" />
                 </div>
                 <small class="opacity-60 text-xs px-1">(Saved only locally until Contact created)</small>
             </div>
@@ -202,7 +202,7 @@
                 <label class="label text-xs font-bold opacity-75">Tagline</label>
                 <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
                     <div class="input-group-shim"><Tag size={16} /></div>
-                    <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="text" bind:value={formData.tagline} placeholder="Software Architect & Visionary" />
+                    <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" type="text" bind:value={formData.tagline} placeholder="Software Architect & Visionary" />
                 </div>
             </div>
         </fieldset>
@@ -215,7 +215,7 @@
                 <label class="label text-xs font-bold opacity-75">Professional Title</label>
                 <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
                     <div class="input-group-shim"><Briefcase size={16} /></div>
-                    <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="text" bind:value={formData.professional_title} placeholder="Senior Engineer" />
+                    <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" type="text" bind:value={formData.professional_title} placeholder="Senior Engineer" />
                 </div>
             </div>
 
@@ -223,7 +223,7 @@
                 <label class="label text-xs font-bold opacity-75">Affiliations</label>
                 <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
                     <div class="input-group-shim"><Building size={16} /></div>
-                    <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="text" bind:value={formData.affiliations} placeholder="One Sky IT, LLC" />
+                    <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" type="text" bind:value={formData.affiliations} placeholder="One Sky IT, LLC" />
                 </div>
             </div>
         </fieldset>
@@ -249,7 +249,7 @@
 
             <div class="space-y-1">
                 <label class="label text-xs font-bold opacity-75">Notes (Internal)</label>
-                <textarea class="textarea variant-filled-surface rounded-lg placeholder-surface-400" rows="3" bind:value={formData.notes} placeholder="Additional details..."></textarea>
+                <textarea class="textarea variant-filled-surface rounded-lg placeholder-surface-400 p-2" rows="3" bind:value={formData.notes} placeholder="Additional details..."></textarea>
             </div>
         </fieldset>
 
@@ -263,7 +263,7 @@
                     <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
                         <div class="input-group-shim"><Link size={16} /></div>
                         <input 
-                            class="bg-transparent border-0 ring-0 focus:ring-0 font-mono placeholder-surface-400" 
+                            class="bg-transparent border-0 ring-0 focus:ring-0 font-mono placeholder-surface-400 p-2" 
                             type="text" 
                             bind:value={formData.user_id_random} 
                             placeholder="e.g. AB12CD34" 
diff --git a/src/routes/core/users/+page.svelte b/src/routes/core/users/+page.svelte
index d0d71897..7c73208c 100644
--- a/src/routes/core/users/+page.svelte
+++ b/src/routes/core/users/+page.svelte
@@ -3,13 +3,14 @@
     import { load_ae_obj_li__user, create_ae_obj__user } from '$lib/ae_core/ae_core__user';
     import { ae_api, ae_loc } from '$lib/stores/ae_stores';
     import { goto } from '$app/navigation';
-    import { Plus, Search, User, ShieldCheck, Mail, Globe, Landmark } from 'lucide-svelte';
+    import { Plus, Search, User, ShieldCheck, Mail, Globe, Landmark, ListFilter, X, Fingerprint, Activity } from 'lucide-svelte';
 
     let user_li: any[] = $state([]);
     let loading = $state(true);
     let qry_str = $state('');
     let qry_enabled = $state('all');
     let qry_account_scope = $state('all'); // 'all', 'account', 'global'
+    let show_add_form = $state(false);
 
     async function load_users() {
         loading = true;
@@ -61,92 +62,134 @@
     }
 </script>
 
-<div class="container mx-auto p-4 space-y-4">
-    <header class="flex justify-between items-center">
+<div class="container mx-auto p-4 space-y-6">
+    <header class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
         <div class="flex items-center gap-2">
-            <ShieldCheck size={24} />
-            <h1 class="h2">User Management</h1>
+            <div class="p-2 bg-primary-500/10 rounded-lg">
+                <ShieldCheck size={24} class="text-primary-500" />
+            </div>
+            <h1 class="h2 font-black tracking-tight">User Management</h1>
         </div>
-        <button class="btn variant-filled-primary" onclick={handle_add_user}>
-            <Plus size={16} class="mr-2" /> Add User
+        <button class="btn btn-sm variant-filled-primary font-bold shadow-lg" onclick={() => show_add_form = !show_add_form}>
+            {#if show_add_form}
+                <X size={16} class="mr-2" /> Cancel
+            {:else}
+                <Plus size={16} class="mr-2" /> Add User
+            {/if}
         </button>
     </header>
 
-    <div class="card p-4 variant-soft flex flex-wrap gap-4 items-end">
-        <label class="label flex-1">
-            <span>Search Username or Email</span>
-            <div class="input-group input-group-divider grid-cols-[auto_1fr_auto]">
-                <div class="input-group-shim"><Search size={16} /></div>
-                <input type="search" bind:value={qry_str} placeholder="Search..." onkeydown={(e) => e.key === 'Enter' && load_users()} />
-                <button class="variant-filled-secondary" onclick={load_users}>Go</button>
+    <div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-4">
+        <div class="flex flex-wrap gap-6 items-end">
+            <div class="flex-1 min-w-[280px] space-y-1">
+                <label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Search Users</label>
+                <div class="input-group input-group-divider grid-cols-[auto_1fr_auto] variant-filled-surface rounded-lg overflow-hidden border border-surface-500/20 shadow-inner">
+                    <div class="input-group-shim"><Search size={18} class="opacity-50" /></div>
+                    <input 
+                        class="bg-transparent border-0 ring-0 focus:ring-0 p-2"
+                        type="search" 
+                        bind:value={qry_str} 
+                        placeholder="Search username or email..." 
+                        onkeydown={(e) => e.key === 'Enter' && load_users()} 
+                    />
+                    <button class="variant-filled-primary font-bold px-6 hover:brightness-110 transition-all" onclick={load_users} disabled={loading}>
+                        {#if loading}
+                            <span class="animate-spin mr-1">⏳</span>
+                        {:else}
+                            Go
+                        {/if}
+                    </button>
+                </div>
             </div>
-        </label>
-        
-        <label class="label">
-            <span>Scope</span>
-            <select class="select w-48" bind:value={qry_account_scope} onchange={load_users}>
-                <option value="all">All (Current + Global)</option>
-                <option value="account">Current Account Only</option>
-                <option value="global">Global Only (No Account)</option>
-            </select>
-        </label>
 
-        <label class="label">
-            <span>Status</span>
-            <select class="select w-32" bind:value={qry_enabled} onchange={load_users}>
-                <option value="all">All</option>
-                <option value="enabled">Enabled</option>
-                <option value="not_enabled">Disabled</option>
-            </select>
-        </label>
+            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <div class="space-y-1">
+                    <label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Scope</label>
+                    <select class="select variant-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_account_scope} onchange={load_users}>
+                        <option value="all">All (Current + Global)</option>
+                        <option value="account">Account Only</option>
+                        <option value="global">Global Only</option>
+                    </select>
+                </div>
+
+                <div class="space-y-1">
+                    <label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Status</label>
+                    <select class="select variant-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_enabled} onchange={load_users}>
+                        <option value="all">All</option>
+                        <option value="enabled">Enabled</option>
+                        <option value="not_enabled">Disabled</option>
+                    </select>
+                </div>
+            </div>
+        </div>
     </div>
 
     {#if loading}
-        <div class="placeholder animate-pulse w-full h-64"></div>
+        <div class="card p-8 flex justify-center items-center h-64">
+            <div class="placeholder animate-pulse w-full h-full rounded-2xl"></div>
+        </div>
     {:else if user_li.length === 0}
-        <p class="text-center py-12 opacity-60">No users found.</p>
+        <div class="card p-12 text-center variant-glass-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
+            <Fingerprint size={48} class="mx-auto mb-4 opacity-20" />
+            <h3 class="h3 font-bold opacity-50">No Users Found</h3>
+            <p class="opacity-60 max-w-xs mx-auto mt-2">Try adjusting your search or scope filters.</p>
+        </div>
     {:else}
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            {#each user_li as user}
-                <div class="card p-4 space-y-3 variant-soft flex flex-col justify-between">
-                    <div class="space-y-2">
+        <div class="card p-6 variant-glass-surface shadow-xl border border-surface-500/10">
+            <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 mb-6 flex items-center gap-2">
+                <ListFilter size={18} class="text-secondary-500" />
+                Directory Results
+                <span class="badge variant-soft-secondary ml-auto">{user_li.length} found</span>
+            </h3>
+
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                {#each user_li as user}
+                    <div class="card p-5 space-y-4 variant-soft-surface shadow-md border border-surface-500/10 hover:border-primary-500/30 transition-all group">
                         <header class="flex justify-between items-start">
-                            <div class="flex items-center gap-2">
-                                <div class="avatar variant-filled-surface w-10 h-10 flex items-center justify-center rounded-full">
-                                    <User size={20} />
+                            <div class="flex items-center gap-3">
+                                <div class="avatar variant-filled-primary w-12 h-12 flex items-center justify-center rounded-full shadow-inner group-hover:scale-110 transition-transform">
+                                    <User size={24} />
                                 </div>
                                 <div>
-                                    <p class="font-bold">{user.username}</p>
-                                    <p class="text-xs opacity-60">{user.name || '--'}</p>
+                                    <p class="font-black tracking-tight">{user.username}</p>
+                                    <p class="text-[10px] uppercase font-bold opacity-50">{user.name || 'No Display Name'}</p>
                                 </div>
                             </div>
                             <div class="flex flex-col items-end gap-1">
                                 {#if user.super}
-                                    <span class="badge variant-filled-error">Super</span>
+                                    <span class="badge variant-filled-error text-[8px] uppercase font-bold">Super</span>
                                 {:else if user.manager}
-                                    <span class="badge variant-filled-warning">Manager</span>
+                                    <span class="badge variant-filled-warning text-[8px] uppercase font-bold">Manager</span>
                                 {/if}
                                 {#if !user.account_id && !user.account_id_random}
-                                    <span class="badge variant-soft-secondary flex items-center gap-1">
-                                        <Globe size={10} /> Global
+                                    <span class="badge variant-soft-secondary text-[8px] uppercase font-bold flex items-center gap-1">
+                                        <Globe size={8} /> Global
                                     </span>
                                 {:else}
-                                    <span class="badge variant-soft-primary flex items-center gap-1">
-                                        <Landmark size={10} /> Account
+                                    <span class="badge variant-soft-primary text-[8px] uppercase font-bold flex items-center gap-1">
+                                        <Landmark size={8} /> Account
                                     </span>
                                 {/if}
                             </div>
                         </header>
-                        <div class="flex items-center gap-2 text-sm opacity-80">
-                            <Mail size={14} />
-                            <span>{user.email || '--'}</span>
+                        
+                        <div class="space-y-2">
+                            <div class="flex items-center gap-2 text-xs opacity-70 bg-black/5 p-2 rounded-lg">
+                                <Mail size={14} class="text-primary-500" />
+                                <span class="truncate">{user.email || '--'}</span>
+                            </div>
+                            <div class="flex items-center gap-2 text-xs opacity-70 bg-black/5 p-2 rounded-lg">
+                                <Activity size={14} class="text-secondary-500" />
+                                <span class="font-mono">{user.user_id_random}</span>
+                            </div>
                         </div>
+
+                        <a class="btn btn-sm variant-filled-primary font-bold w-full shadow-lg group-hover:brightness-110 transition-all" href="/core/users/{user.user_id_random}">
+                            Manage User
+                        </a>
                     </div>
-                    <a class="btn btn-sm variant-filled-primary w-full" href="/core/users/{user.user_id_random}">
-                        Edit User
-                    </a>
-                </div>
-            {/each}
+                {/each}
+            </div>
         </div>
     {/if}
 </div>