Reorganized System Lookups page and added Time Zone priority filtering.

- Sequenced sections as Country, Subdivisions, then Time Zones.
- Implemented a reactive toggle for 'only_priority' in the Time Zone section to support high-priority filtering.
- Switched to a full-width card layout for improved readability of large datasets.

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

@@ -2,10 +2,11 @@
     import { onMount } from 'svelte';
     import { ae_api, ae_loc } from '$lib/stores/ae_stores';
     import { goto } from '$app/navigation';
-    import { List, Globe, Clock, MapPin, ListFilter, RefreshCcw, Landmark, Info } from 'lucide-svelte';
+    import { List, Globe, Clock, MapPin, ListFilter, RefreshCcw, Landmark, Info, Star } from 'lucide-svelte';
     import { api } from '$lib/api/api';
 
     let loading = $state(true);
+    let tz_only_priority = $state(false);
     let lookups: any = $state({
         countries: [],
         time_zones: [],
@@ -15,19 +16,24 @@
     async function load_lookups() {
         loading = true;
         try {
-            const [countries, time_zones, subdivisions] = await Promise.all([
+            const [countries, subdivisions, time_zones] = await Promise.all([
                 api.get_ae_obj_li_for_lu({ api_cfg: $ae_api, for_lu_type: 'country', log_lvl: 1 }),
-                api.get_ae_obj_li_for_lu({ api_cfg: $ae_api, for_lu_type: 'time_zone', log_lvl: 1 }),
+                api.get_ae_obj_li_for_lu({ api_cfg: $ae_api, for_lu_type: 'country_subdivision', log_lvl: 1 }),
-                api.get_ae_obj_li_for_lu({ api_cfg: $ae_api, for_lu_type: 'country_subdivision', log_lvl: 1 })
+                api.get_ae_obj_li_for_lu({ 
+                    api_cfg: $ae_api, 
+                    for_lu_type: 'time_zone', 
+                    only_priority: tz_only_priority,
+                    log_lvl: 1 
+                })
             ]);
 
             console.log('Lookup Results - Countries:', countries);
-            console.log('Lookup Results - Time Zones:', time_zones);
             console.log('Lookup Results - Subdivisions:', subdivisions);
+            console.log('Lookup Results - Time Zones:', time_zones);
 
             lookups.countries = countries || [];
-            lookups.time_zones = time_zones || [];
             lookups.subdivisions = subdivisions || [];
+            lookups.time_zones = time_zones || [];
         } catch (error) {
             console.error('Failed to load lookups:', error);
         } finally {
@@ -42,6 +48,12 @@
         }
         load_lookups();
     });
+
+    // Handle TZ priority toggle
+    function toggle_tz_priority() {
+        tz_only_priority = !tz_only_priority;
+        load_lookups();
+    }
 </script>
 
 <div class="container mx-auto p-4 space-y-6">
@@ -66,13 +78,13 @@
         </div>
     </header>
 
-    {#if loading}
+    {#if loading && !lookups.countries.length}
         <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}
-        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 animate-fade-in">
+        <div class="space-y-6 animate-fade-in">
-            <!-- Countries -->
+            <!-- 1. Countries -->
             <div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-6">
                 <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
                     <Globe size={20} class="text-secondary-500" />
@@ -80,7 +92,7 @@
                     <span class="badge variant-soft-secondary ml-auto text-[10px] uppercase font-bold">{lookups.countries.length} Records</span>
                 </h3>
                 
-                <div class="table-container max-h-[500px] overflow-auto border border-surface-500/10 rounded-lg">
+                <div class="table-container max-h-[400px] overflow-auto border border-surface-500/10 rounded-lg">
                     <table class="table table-hover table-compact">
                         <thead>
                             <tr class="uppercase text-[10px] tracking-widest opacity-60">
@@ -100,14 +112,54 @@
                 </div>
             </div>
 
-            <!-- Time Zones -->
+            <!-- 2. Subdivisions -->
             <div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-6">
                 <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
-                    <Clock size={20} class="text-tertiary-500" />
+                    <MapPin size={20} class="text-primary-500" />
-                    Time Zone Reference
+                    Country Subdivisions (States/Provinces)
-                    <span class="badge variant-soft-secondary ml-auto text-[10px] uppercase font-bold">{lookups.time_zones.length} Zones</span>
+                    <span class="badge variant-soft-secondary ml-auto text-[10px] uppercase font-bold">{lookups.subdivisions.length} Records</span>
                 </h3>
                 
+                <div class="table-container max-h-[500px] overflow-auto border border-surface-500/10 rounded-lg">
+                    <table class="table table-hover table-compact">
+                        <thead>
+                            <tr class="uppercase text-[10px] tracking-widest opacity-60">
+                                <th>Country</th>
+                                <th>Name</th>
+                                <th class="text-center">Code</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {#each lookups.subdivisions as s}
+                                <tr class="transition-colors">
+                                    <td class="opacity-60">{s.country_alpha_2_code}</td>
+                                    <td class="font-bold">{s.name}</td>
+                                    <td class="text-center"><span class="badge variant-soft-surface font-mono">{s.code}</span></td>
+                                </tr>
+                            {/each}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+
+            <!-- 3. Time Zones -->
+            <div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-6">
+                <div class="flex flex-wrap justify-between items-center border-b border-surface-500/30 pb-2 gap-4">
+                    <h3 class="h4 font-bold flex items-center gap-2">
+                        <Clock size={20} class="text-tertiary-500" />
+                        Time Zone Reference
+                        <span class="badge variant-soft-secondary text-[10px] uppercase font-bold">{lookups.time_zones.length} Zones</span>
+                    </h3>
+                    <button 
+                        class="btn btn-sm transition-all {tz_only_priority ? 'variant-filled-warning' : 'variant-soft-surface'}"
+                        onclick={toggle_tz_priority}
+                        disabled={loading}
+                    >
+                        <Star size={14} class="mr-2 {tz_only_priority ? 'fill-current' : ''}" />
+                        {tz_only_priority ? 'Showing Priority' : 'Show Only Priority'}
+                    </button>
+                </div>
+                
                 <div class="table-container max-h-[500px] overflow-auto border border-surface-500/10 rounded-lg">
                     <table class="table table-hover table-compact">
                         <thead>
@@ -129,36 +181,6 @@
             </div>
         </div>
 
-        <!-- Subdivisions (Full Width) -->
-        <div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-6 animate-fade-in" style="animation-delay: 100ms;">
-            <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
-                <MapPin size={20} class="text-primary-500" />
-                Country Subdivisions (States/Provinces)
-                <span class="badge variant-soft-secondary ml-auto text-[10px] uppercase font-bold">{lookups.subdivisions.length} Records</span>
-            </h3>
-            
-            <div class="table-container max-h-[600px] overflow-auto border border-surface-500/10 rounded-lg">
-                <table class="table table-hover table-compact">
-                    <thead>
-                        <tr class="uppercase text-[10px] tracking-widest opacity-60">
-                            <th>Country</th>
-                            <th>Name</th>
-                            <th class="text-center">Code</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {#each lookups.subdivisions as s}
-                            <tr class="transition-colors">
-                                <td class="opacity-60">{s.country_alpha_2_code}</td>
-                                <td class="font-bold">{s.name}</td>
-                                <td class="text-center"><span class="badge variant-soft-surface font-mono">{s.code}</span></td>
-                            </tr>
-                        {/each}
-                    </tbody>
-                </table>
-            </div>
-        </div>
-
         <div class="card p-4 variant-soft-surface border border-surface-500/10 flex items-center gap-3">
             <Info size={16} class="text-primary-500" />
             <p class="text-xs opacity-70">Lookup data is synchronized with the global system database and used for addresses, event scheduling, and localized displays.</p>