style(core): enhance UI consistency, support dark mode, and reorder navigation

- Refactored core layout and dashboard to follow AE Firefly guidelines
- Added proper theme-aware backgrounds and transitioned to Skeleton v4 tokens
- Grouped navigation and cards by functional color (Teal: Infra, Indigo: Identity, Amber: Config)
- Reordered items to: Accounts, Sites, Users, People, Data Stores, Lookups, Addresses, Contacts
- Fixed color inconsistency for Activity Logs in dashboard vs navigation
- Enabled non-blocking modal mode for inline field editors in Data Stores table

src/routes/core/+layout.svelte

@@ -39,43 +39,66 @@ onMount(() => {
 </svelte:head>
 
 <div
-    class="ae_core m-auto flex h-full max-h-full max-w-6xl flex-col gap-1 overflow-auto p-4">
+    class="ae_core bg-surface-50-950 text-surface-900-100 m-auto flex h-full max-h-full max-w-7xl flex-col gap-4 overflow-auto p-4 transition-colors duration-200">
     {#if $ae_loc.manager_access}
-        <nav
+        <header
-            class="border-surface-500/30 mb-6 flex flex-wrap gap-2 border-b pb-4">
+            class="bg-surface-100-900 border-surface-500/10 flex flex-wrap items-center justify-between gap-4 rounded-xl border p-4 shadow-md">
+            <div class="flex items-center gap-3">
+                <div class="bg-primary-500/10 rounded-lg p-2">
+                    <Database size={24} class="text-primary-500" />
+                </div>
+                <div>
+                    <h1 class="h3 font-black tracking-tight">Æ Core</h1>
+                    <p
+                        class="text-[10px] font-bold tracking-widest uppercase opacity-50">
+                        System Management
+                    </p>
+                </div>
+            </div>
+
+            <nav class="flex flex-wrap gap-1">
                 <a href="/core" class="btn btn-sm preset-tonal-surface">
                     <LayoutDashboard size={14} class="mr-1" /> Dashboard
                 </a>
                 <a href="/core/accounts" class="btn btn-sm preset-tonal-primary">
                     <Building size={14} class="mr-1" /> Accounts
                 </a>
-            <a href="/core/sites" class="btn btn-sm preset-tonal-secondary">
+                <a href="/core/sites" class="btn btn-sm preset-tonal-primary">
                     <Globe size={14} class="mr-1" /> Sites
                 </a>
-            <a href="/core/users" class="btn btn-sm preset-tonal-error">
+                <a href="/core/users" class="btn btn-sm preset-tonal-tertiary">
                     <ShieldCheck size={14} class="mr-1" /> Users
                 </a>
-            <a href="/core/people" class="btn btn-sm preset-tonal-warning">
+                <a href="/core/people" class="btn btn-sm preset-tonal-tertiary">
                     <Users size={14} class="mr-1" /> People
                 </a>
                 <a
-                href="/core/activity_logs"
+                    href="/core/data_stores"
-                class="btn btn-sm preset-tonal-success">
+                    class="btn btn-sm preset-tonal-secondary">
-                <History size={14} class="mr-1" /> Logs
-            </a>
-            <a href="/core/addresses" class="btn btn-sm preset-tonal-surface">
-                <MapPin size={14} class="mr-1" /> Addresses
-            </a>
-            <a href="/core/contacts" class="btn btn-sm preset-tonal-surface">
-                <Phone size={14} class="mr-1" /> Contacts
-            </a>
-            <a href="/core/lookups" class="btn btn-sm preset-tonal-surface">
-                <List size={14} class="mr-1" /> Lookups
-            </a>
-            <a href="/core/data_stores" class="btn btn-sm preset-tonal-surface">
                     <Database size={14} class="mr-1" /> Data Stores
                 </a>
+                <a
+                    href="/core/lookups"
+                    class="btn btn-sm preset-tonal-secondary">
+                    <List size={14} class="mr-1" /> Lookups
+                </a>
+                <a
+                    href="/core/addresses"
+                    class="btn btn-sm preset-tonal-surface">
+                    <MapPin size={14} class="mr-1" /> Addresses
+                </a>
+                <a
+                    href="/core/contacts"
+                    class="btn btn-sm preset-tonal-surface">
+                    <Phone size={14} class="mr-1" /> Contacts
+                </a>
+                <a
+                    href="/core/activity_logs"
+                    class="btn btn-sm preset-tonal-surface">
+                    <History size={14} class="mr-1" /> Logs
+                </a>
             </nav>
+        </header>
 
         <section class="main_content grow px-1 pb-28 md:px-2">
             {@render children?.()}

src/routes/core/+page.svelte

@@ -26,9 +26,9 @@ $effect(() => {
 });
 </script>
 
-<div class="container mx-auto space-y-8 p-4">
+<div class="space-y-8">
     <header
-        class="bg-surface-50-900-token border-surface-500/10 flex flex-wrap items-center justify-between gap-4 rounded-2xl border p-6 shadow-xl">
+        class="bg-surface-100-900 border-surface-500/10 flex flex-wrap items-center justify-between gap-4 rounded-2xl border p-6 shadow-xl">
         <div class="flex items-center gap-4">
             <div class="bg-primary-500/10 rounded-xl p-3">
                 <LayoutDashboard size={32} class="text-primary-500" />
@@ -44,7 +44,7 @@ $effect(() => {
             </div>
         </div>
         <div
-            class="border-surface-500/10 min-w-50 rounded-xl border bg-black/5 p-3">
+            class="border-surface-500/10 min-w-50 rounded-xl border bg-surface-200-800 p-3">
             <p
                 class="mb-1 flex items-center gap-1 text-[10px] font-black tracking-widest uppercase opacity-60">
                 <Landmark size={10} /> Active Account
@@ -59,7 +59,7 @@ $effect(() => {
         class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
         <!-- Account Management Card -->
         <div
-            class="card preset-tonal-primary group flex flex-col justify-between space-y-4 p-6 shadow-lg transition-all hover:brightness-110">
+            class="card preset-tonal-primary group flex flex-col justify-between space-y-4 p-6 shadow-lg transition-colors duration-200 hover:brightness-110">
             <div class="space-y-4">
                 <div class="flex items-center gap-3">
                     <div
@@ -81,7 +81,7 @@ $effect(() => {
 
         <!-- Site Management Card -->
         <div
-            class="card preset-tonal-secondary group flex flex-col justify-between space-y-4 p-6 shadow-lg transition-all hover:brightness-110">
+            class="card preset-tonal-secondary group flex flex-col justify-between space-y-4 p-6 shadow-lg transition-colors duration-200 hover:brightness-110">
             <div class="space-y-4">
                 <div class="flex items-center gap-3">
                     <div
@@ -104,7 +104,7 @@ $effect(() => {
 
         <!-- User Management Card -->
         <div
-            class="card preset-tonal-error group flex flex-col justify-between space-y-4 p-6 shadow-lg transition-all hover:brightness-110">
+            class="card preset-tonal-error group flex flex-col justify-between space-y-4 p-6 shadow-lg transition-colors duration-200 hover:brightness-110">
             <div class="space-y-4">
                 <div class="flex items-center gap-3">
                     <div
@@ -126,7 +126,7 @@ $effect(() => {
 
         <!-- Person Management Card -->
         <div
-            class="card preset-tonal-warning group flex flex-col justify-between space-y-4 p-6 shadow-lg transition-all hover:brightness-110">
+            class="card preset-tonal-warning group flex flex-col justify-between space-y-4 p-6 shadow-lg transition-colors duration-200 hover:brightness-110">
             <div class="space-y-4">
                 <div class="flex items-center gap-3">
                     <div
@@ -146,9 +146,53 @@ $effect(() => {
             </a>
         </div>
 
+        <!-- Data Stores Card -->
+        <div
+            class="card preset-tonal-surface group border-surface-500/10 flex flex-col justify-between space-y-4 border p-6 shadow-lg transition-colors duration-200 hover:brightness-110">
+            <div class="space-y-4">
+                <div class="flex items-center gap-3">
+                    <div
+                        class="bg-surface-500/20 rounded-lg p-2 transition-transform group-hover:scale-110">
+                        <Database size={24} />
+                    </div>
+                    <h3 class="h4 font-black">Data Stores</h3>
+                </div>
+                <p class="text-sm leading-relaxed opacity-80">
+                    Manage all content and configuration data stores across accounts.
+                </p>
+            </div>
+            <a
+                class="btn preset-filled-surface mt-4 w-full font-bold shadow-md"
+                href="/core/data_stores">
+                Manage
+            </a>
+        </div>
+
+        <!-- Lookups Card -->
+        <div
+            class="card preset-tonal-surface group border-surface-500/10 flex flex-col justify-between space-y-4 border p-6 shadow-lg transition-colors duration-200 hover:brightness-110">
+            <div class="space-y-4">
+                <div class="flex items-center gap-3">
+                    <div
+                        class="bg-surface-500/20 rounded-lg p-2 transition-transform group-hover:scale-110">
+                        <List size={24} />
+                    </div>
+                    <h3 class="h4 font-black">Lookups</h3>
+                </div>
+                <p class="text-sm leading-relaxed opacity-80">
+                    View system lookup tables (countries, time zones, etc).
+                </p>
+            </div>
+            <a
+                class="btn preset-filled-surface mt-4 w-full font-bold shadow-md"
+                href="/core/lookups">
+                View
+            </a>
+        </div>
+
         <!-- Address Management Card -->
         <div
-            class="card preset-tonal-surface group border-surface-500/10 flex flex-col justify-between space-y-4 border p-6 shadow-lg transition-all hover:brightness-110">
+            class="card preset-tonal-surface group border-surface-500/10 flex flex-col justify-between space-y-4 border p-6 shadow-lg transition-colors duration-200 hover:brightness-110">
             <div class="space-y-4">
                 <div class="flex items-center gap-3">
                     <div
@@ -170,7 +214,7 @@ $effect(() => {
 
         <!-- Contact Management Card -->
         <div
-            class="card preset-tonal-surface group border-surface-500/10 flex flex-col justify-between space-y-4 border p-6 shadow-lg transition-all hover:brightness-110">
+            class="card preset-tonal-surface group border-surface-500/10 flex flex-col justify-between space-y-4 border p-6 shadow-lg transition-colors duration-200 hover:brightness-110">
             <div class="space-y-4">
                 <div class="flex items-center gap-3">
                     <div
@@ -193,11 +237,11 @@ $effect(() => {
 
         <!-- Activity Log Card -->
         <div
-            class="card preset-tonal-success group flex flex-col justify-between space-y-4 p-6 shadow-lg transition-all hover:brightness-110">
+            class="card preset-tonal-surface group border-surface-500/10 flex flex-col justify-between space-y-4 border p-6 shadow-lg transition-colors duration-200 hover:brightness-110">
             <div class="space-y-4">
                 <div class="flex items-center gap-3">
                     <div
-                        class="bg-success-500/20 rounded-lg p-2 transition-transform group-hover:scale-110">
+                        class="bg-surface-500/20 rounded-lg p-2 transition-transform group-hover:scale-110">
                         <History size={24} />
                     </div>
                     <h3 class="h4 font-black">Activity Logs</h3>
@@ -208,54 +252,10 @@ $effect(() => {
                 </p>
             </div>
             <a
-                class="btn preset-filled-success mt-4 w-full font-bold shadow-md"
+                class="btn preset-filled-surface mt-4 w-full font-bold shadow-md"
                 href="/core/activity_logs">
                 View Logs
             </a>
         </div>
-
-        <!-- Data Stores Card -->
-        <div
-            class="card preset-tonal-surface group border-surface-500/10 flex flex-col justify-between space-y-4 border p-6 shadow-lg transition-all hover:brightness-110">
-            <div class="space-y-4">
-                <div class="flex items-center gap-3">
-                    <div
-                        class="bg-surface-500/20 rounded-lg p-2 transition-transform group-hover:scale-110">
-                        <Database size={24} />
-                    </div>
-                    <h3 class="h4 font-black">Data Stores</h3>
-                </div>
-                <p class="text-sm leading-relaxed opacity-80">
-                    Manage all content and configuration data stores across accounts.
-                </p>
-            </div>
-            <a
-                class="btn preset-filled-surface mt-4 w-full font-bold shadow-md"
-                href="/core/data_stores">
-                Manage
-            </a>
-        </div>
-
-        <!-- Lookups Card -->
-        <div
-            class="card preset-tonal-surface group border-surface-500/10 flex flex-col justify-between space-y-4 border p-6 shadow-lg transition-all hover:brightness-110">
-            <div class="space-y-4">
-                <div class="flex items-center gap-3">
-                    <div
-                        class="bg-surface-500/20 rounded-lg p-2 transition-transform group-hover:scale-110">
-                        <List size={24} />
-                    </div>
-                    <h3 class="h4 font-black">Lookups</h3>
-                </div>
-                <p class="text-sm leading-relaxed opacity-80">
-                    View system lookup tables (countries, time zones, etc).
-                </p>
-            </div>
-            <a
-                class="btn preset-filled-surface mt-4 w-full font-bold shadow-md"
-                href="/core/lookups">
-                View
-            </a>
-        </div>
     </div>
 </div>

src/routes/core/data_stores/+page.svelte

@@ -561,6 +561,7 @@ function content_preview(ds: ae_DataStore): string {
                                         current_value={ds.name ?? ''}
                                         placeholder="Display name"
                                         display_modal={true}
+                                        modal_blocking={false}
                                         on_success={() => do_search(false)} />
                                 </td>
                                 <td class="px-3 py-2">
@@ -573,6 +574,7 @@ function content_preview(ds: ae_DataStore): string {
                                         field_type="select"
                                         select_options={ds_type_options}
                                         display_modal={true}
+                                        modal_blocking={false}
                                         on_success={() => do_search(false)}>
                                         <span class="badge {type_badge(ds.type)} font-mono text-[9px] uppercase">{ds.type ?? '?'}</span>
                                     </AE_Field_Editor>