@necrolab/dashboard 0.5.14 → 0.5.16

package/src/views/FilterBuilder.vue

@@ -1,196 +1,176 @@
 <template>
-    <div class="filter-builder-container flex min-h-0 w-full flex-col overflow-hidden">
-        <!-- Heading -->
-        <div class="mt-3 flex items-center justify-between pb-1 pt-4">
-            <div class="flex items-center justify-center gap-4">
-                <FilterIcon class="smooth-hover cursor-pointer text-white" />
-                <h4 class="text-base font-semibold text-light-300">Filter creator</h4>
+    <div class="flex w-full flex-col">
+        <div class="page-header">
+            <div class="page-header-card flex-shrink-0">
+                <FilterIcon />
+                <h4>Filter creator</h4>
             </div>
-            <div class="unified-load-group flex items-center h-9">
+            <div class="unified-search-group flex w-auto items-center">
                 <input
-                    class="relative flex h-full w-40 items-center bg-transparent px-2 text-sm text-white"
+                    class="h-10 w-32 flex-1 px-3 text-sm text-white placeholder-light-500 sm:w-48 md:w-64"
                     placeholder="Event ID"
-                    v-model="eventId" />
+                    v-model="eventId"
+                    aria-label="Event ID" />
                 <button
-                    class="relative flex h-full items-center px-3 text-sm font-medium text-white bg-transparent"
-                    @click="updateShownVenue">
-                    Load
+                    class="flex h-10 w-9 flex-shrink-0 items-center justify-center bg-dark-400 text-white transition-all duration-150 hover:bg-dark-450"
+                    @click="updateShownVenue"
+                    aria-label="Load venue">
+                    <ReloadIcon class="h-4 w-4" />
                 </button>
             </div>
         </div>
 
-        <div class="mb-2 overflow-hidden rounded border border-dark-650 bg-dark-400 p-3 shadow-sm">
-            <div class="h-full w-full">
-                <!-- Main -->
-                <div class="grid h-full w-full grid-cols-1 gap-3 lg:grid-cols-5 lg:gap-4">
-                    <!-- Map -->
-                    <div
-                        class="relative col-span-1 flex h-full w-full flex-col rounded-lg lg:col-span-3 lg:max-w-none lg:overflow-hidden">
-                        <div v-if="svg" class="mb-1 flex items-center">
-                            <div class="flex w-20 items-center justify-between px-2 text-sm font-black text-white">
-                                <span class="cursor-pointer" @click="handleZoom(true)">+</span>
-                                <span class="cursor-pointer" @click="handleZoom(false)">-</span>
-                                <ReloadIcon class="h-4 w-4 cursor-pointer" @click="handleZoom('r')" />
-                            </div>
+        <div class="mb-3 flex flex-1 flex-col overflow-hidden rounded border border-dark-650 bg-dark-400 p-3 shadow-sm md:mb-4">
+            <div class="flex h-full w-full flex-col gap-3 lg:flex-row lg:gap-4">
+                <div class="relative flex min-h-75 min-w-0 w-full flex-col overflow-hidden rounded-lg lg:min-h-125 lg:w-3/5">
+                    <div v-if="svg" class="mb-2 flex items-center gap-2">
+                        <button @click="handleZoom(true)" class="btn-icon-small" aria-label="Zoom in">
+                            +
+                        </button>
+                        <button @click="handleZoom(false)" class="btn-icon-small" aria-label="Zoom out">
+                            -
+                        </button>
+                        <button @click="handleZoom('r')" class="btn-icon-small" aria-label="Reset zoom">
+                            <ReloadIcon class="h-4 w-4 text-white" />
+                        </button>
+                    </div>
+                    <div class="selecto-wrapper flex-1 overflow-hidden">
+                        <div
+                            v-if="svg"
+                            class="hidden-scrollbars relative h-full min-h-87.5 w-full overflow-auto rounded border border-dark-550 bg-dark-500 p-2 shadow">
+                            <div class="svg-wrapper" id="svg-wrapper" v-html="svg"></div>
                         </div>
-                        <div class="selecto-wrapper flex-1 overflow-hidden">
-                            <div
-                                v-if="svg"
-                                class="hidden-scrollbars svg-container h-full overflow-auto rounded border-2 border-dark-550 p-2 shadow">
-                                <div class="svg-wrapper" id="svg-wrapper" v-html="svg"></div>
-                            </div>
-                            <div
-                                v-else
-                                class="svg-container flex h-full items-center justify-center rounded border-2 border-dark-550 p-2 shadow">
-                                <div class="text-center">
-                                    <svg
-                                        class="mx-auto mb-3 h-12 w-12 opacity-50"
-                                        viewBox="0 0 19 19"
-                                        fill="none"
-                                        xmlns="http://www.w3.org/2000/svg">
-                                        <path
-                                            d="M2.37499 5.54165V2.37498L5.54166 3.95831L2.37499 5.54165ZM14.25 5.54165V2.37498L17.4167 3.95831L14.25 5.54165ZM8.70833 4.74998V1.58331L11.875 3.16665L8.70833 4.74998ZM8.70833 17.4166C7.70555 17.3903 6.77218 17.3079 5.9082 17.1696C5.0437 17.0308 4.29162 16.8559 3.65195 16.6448C3.01176 16.4337 2.50694 16.1896 2.13749 15.9125C1.76805 15.6354 1.58333 15.3451 1.58333 15.0416V7.91665C1.58333 7.58678 1.79127 7.27988 2.20716 6.99594C2.62252 6.71252 3.18645 6.46183 3.89895 6.24385C4.61145 6.02641 5.4493 5.85488 6.4125 5.72927C7.37569 5.60419 8.40486 5.54165 9.49999 5.54165C10.5951 5.54165 11.6243 5.60419 12.5875 5.72927C13.5507 5.85488 14.3885 6.02641 15.101 6.24385C15.8135 6.46183 16.3775 6.71252 16.7928 6.99594C17.2087 7.27988 17.4167 7.58678 17.4167 7.91665V15.0416C17.4167 15.3451 17.2319 15.6354 16.8625 15.9125C16.493 16.1896 15.9885 16.4337 15.3488 16.6448C14.7086 16.8559 13.9565 17.0308 13.0926 17.1696C12.2281 17.3079 11.2944 17.3903 10.2917 17.4166V14.25H8.70833V17.4166ZM9.49999 8.70831C10.7799 8.70831 11.885 8.63231 12.8155 8.48031C13.7454 8.32884 14.4875 8.15415 15.0417 7.95623C15.0417 7.89026 14.5403 7.73509 13.5375 7.49073C12.5347 7.2469 11.1889 7.12498 9.49999 7.12498C7.81111 7.12498 6.46527 7.2469 5.46249 7.49073C4.45972 7.73509 3.95833 7.89026 3.95833 7.95623C4.51249 8.15415 5.25481 8.32884 6.18529 8.48031C7.11523 8.63231 8.22013 8.70831 9.49999 8.70831ZM7.12499 15.7146V12.6666H11.875V15.7146C12.9305 15.609 13.7948 15.4538 14.4677 15.2491C15.1406 15.0448 15.5958 14.8635 15.8333 14.7052V9.34165C15.1076 9.63192 14.1972 9.86283 13.1021 10.0344C12.0069 10.2059 10.8062 10.2916 9.49999 10.2916C8.19374 10.2916 6.99305 10.2059 5.89791 10.0344C4.80277 9.86283 3.89236 9.63192 3.16666 9.34165V14.7052C3.40416 14.8635 3.85937 15.0448 4.53229 15.2491C5.2052 15.4538 6.06944 15.609 7.12499 15.7146Z"
-                                            fill="#F5F5F5" />
-                                    </svg>
-                                    <p class="text-sm text-light-400">No Map</p>
-                                    <p class="text-xs text-light-500">
-                                        Enter an event ID and click "Load" to display the venue map
-                                    </p>
-                                </div>
+                        <div
+                            v-else
+                            class="relative flex h-full min-h-87.5 w-full items-center justify-center rounded border border-dark-550 bg-dark-500 p-2 shadow">
+                            <div class="text-center">
+                                <FilterIcon class="mx-auto empty-state-icon" />
+                                <p class="text-sm text-light-400">No Map</p>
+                                <p class="mt-1 text-xs text-light-500">
+                                    Enter an event ID and click "Load" to display the venue map
+                                </p>
                             </div>
                         </div>
                     </div>
-                    <div class="col-span-1 flex h-full w-full flex-col lg:col-span-2">
-                        <div class="mb-2 flex items-center justify-between text-white">
-                            <div class="flex items-center gap-2 rounded" v-if="hasLoaded">
-                                <PriceSortToggle
-                                    :current="filterBuilder.globalFilter.priceSort"
-                                    class="smooth-hover"
-                                    @change="(e) => filterBuilder.updateGlobalFilter({ priceSort: e })" />
-                            </div>
-                            <div class="flex items-center gap-1" v-if="hasLoaded">
-                                <SavingsIcon class="h-4 w-4 text-light-400" />
-                                <label class="text-sm text-light-400">Max Price:</label>
-                                <input
-                                    type="number"
-                                    :value="filterBuilder.globalFilter.maxPrice"
-                                    @input="
-                                        (e) =>
-                                            filterBuilder.updateGlobalFilter({
-                                                maxPrice: parseInt(e.target.value || 0)
-                                            })
-                                    "
-                                    class="h-8 w-14 rounded border-2 border-dark-550 bg-dark-500 px-1 pl-2"
-                                    placeholder="max" />
-                            </div>
-                        </div>
-                        <Table class="flex flex-1 flex-col border-2 border-dark-550 shadow-xl">
-                            <Header class="flex-shrink-0">
-                                <div class="flex w-full items-center justify-between gap-2 font-bold">
-                                    <div class="flex items-center gap-2">
-                                        <span class="text-base">Filters</span>
-                                        <span class="text-base text-light-300">{{ filterBuilder.filters.length }}</span>
-                                    </div>
-                                    <div class="flex items-center gap-2">
-                                        <PriceSortToggle
-                                            class="smooth-hover w-14"
-                                            :options="['All', 'WL', 'BL']"
-                                            @change="(e) => (shownFilters = e)" />
-                                        <button class="header-btn save-btn" @click="saveFilter">
-                                            <EditIcon class="h-4 w-4" />
-                                            <span class="hidden lg:block">Save</span>
-                                        </button>
-                                        <button class="header-btn clear-btn" @click="filterBuilder.reset(false)">
-                                            <TrashIcon class="h-4 w-4" />
-                                            <span class="hidden lg:block">Clear</span>
-                                        </button>
-                                    </div>
+                </div>
+                <div class="flex min-h-75 min-w-0 w-full flex-col lg:min-h-125 lg:w-2/5">
+                    <div class="mb-2 flex flex-shrink-0 flex-wrap items-center gap-2 text-white" v-if="hasLoaded">
+                        <PriceSortToggle
+                            :current="filterBuilder.globalFilter.priceSort"
+                            class="smooth-hover h-8"
+                            @change="(e) => filterBuilder.updateGlobalFilter({ priceSort: e })" />
+                        <label class="text-xs text-light-400">Max:</label>
+                        <input
+                            type="number"
+                            :value="filterBuilder.globalFilter.maxPrice"
+                            @input="
+                                (e) =>
+                                    filterBuilder.updateGlobalFilter({
+                                        maxPrice: parseInt(e.target.value || 0)
+                                    })
+                            "
+                            class="input-default h-8 w-16 px-2 text-sm"
+                            placeholder="999" />
+                    </div>
+                    <div class="flex min-h-0 flex-1 flex-col overflow-hidden rounded-lg border border-dark-550 bg-dark-500 shadow-sm">
+                        <div class="flex-shrink-0 border-b border-dark-550 bg-dark-300 px-4 py-3 text-xs text-white">
+                            <div class="flex w-full items-center justify-between gap-2">
+                                <div class="flex items-center gap-2">
+                                    <span class="text-sm font-medium text-white">Filters</span>
+                                    <span class="text-sm text-light-400">{{ filterBuilder.filters.length }}</span>
                                 </div>
-                            </Header>
-                            <div class="hidden-scrollbars flex-1 overflow-auto bg-dark-400">
-                                <div v-if="filterBuilder.filters.length" class="filters-container">
-                                    <draggable
-                                        :list="filterBuilder.filters"
-                                        handle=".handle"
-                                        item-key="id"
-                                        ghost-class="sortable-ghost"
-                                        chosen-class="sortable-chosen"
-                                        drag-class="sortable-drag"
-                                        :animation="200"
-                                        :easing="'cubic-bezier(0.4, 0, 0.2, 1)'"
-                                        :force-fallback="false"
-                                        @change="
-                                            () => {
-                                                filterBuilder.updateCss();
-                                                cssUpdateTrigger++;
-                                            }
-                                        ">
-                                        <template #item="{ element: f, index: i }">
-                                            <Filter
-                                                v-if="doesFilterShow(f)"
-                                                :filter="f"
-                                                :index="i"
-                                                :filterBuilder="filterBuilder"
-                                                class="compact-filter" />
-                                        </template>
-                                    </draggable>
+                                <div class="flex items-center gap-2">
+                                    <PriceSortToggle
+                                        class="h-8 w-14 flex-shrink-0 text-xs"
+                                        :options="['All', 'WL', 'BL']"
+                                        :current="shownFilters"
+                                        @change="(e) => (shownFilters = e)" />
+                                    <button
+                                        class="filter-action-btn"
+                                        @click="saveFilter"
+                                        title="Save filter">
+                                        <EditIcon class="h-3 w-3 flex-shrink-0" />
+                                        <span>Save</span>
+                                    </button>
+                                    <button
+                                        class="filter-action-btn"
+                                        @click="filterBuilder.reset(false)"
+                                        title="Clear filters">
+                                        <TrashIcon class="h-3 w-3 flex-shrink-0" />
+                                        <span>Clear</span>
+                                    </button>
                                 </div>
+                            </div>
+                        </div>
+                        <div class="hidden-scrollbars flex-1 overflow-auto bg-dark-400">
+                                <draggable
+                                    v-if="filterBuilder.filters.length"
+                                    v-model="draggableFilters"
+                                    handle=".handle"
+                                    item-key="id"
+                                    tag="div"
+                                    class="space-y-0 p-1"
+                                    ghost-class="opacity-30 border border-dark-550 bg-dark-550/10"
+                                    drag-class="z-50 shadow-xl"
+                                    :animation="200">
+                                    <template #item="{ element: f, index: i }">
+                                        <Filter
+                                            v-show="doesFilterShow(f)"
+                                            :filter="f"
+                                            :index="i"
+                                            :filterBuilder="filterBuilder"
+                                            class="!p-1 !text-xs" />
+                                    </template>
+                                </draggable>
                                 <div
                                     v-else
                                     class="empty-state flex flex-col items-center justify-center py-8 text-center">
-                                    <FilterIcon class="mb-3 h-12 w-12 text-dark-400 opacity-50" />
+                                    <FilterIcon class="empty-state-icon" />
                                     <p class="text-sm text-light-400">No filters yet</p>
                                     <p class="mt-1 text-xs text-light-500">Click on the map to create filters</p>
                                 </div>
                             </div>
-                        </Table>
-                        <div class="mb-2 mt-1 flex flex-shrink-0 items-center justify-between gap-2 text-white md:mb-0">
-                            <button
-                                @click="addWildcardFilter"
-                                :disabled="hasWildcardFilter"
-                                :class="[
-                                    'h-7 overflow-hidden rounded border-2 border-dark-550 bg-dark-500 px-2 text-xs shadow transition-all duration-200',
-                                    hasWildcardFilter
-                                        ? 'text-gray cursor-not-allowed opacity-50'
-                                        : 'text-gray smooth-hover hover:border-light-300 hover:bg-dark-400'
-                                ]"
-                                :title="hasWildcardFilter ? 'Wildcard filter already exists' : 'Add wildcard filter'">
-                                * Wildcard
-                            </button>
-                            <button
-                                @click="ui.toggleModal('preview-filter')"
-                                class="text-gray smooth-hover flex h-7 items-center justify-between gap-1 overflow-hidden rounded border-2 border-dark-550 bg-dark-500 px-2 text-xs shadow">
-                                <CameraIcon class="h-3 w-3" />
-                                JSON
-                            </button>
-                        </div>
+                    </div>
+                    <div class="mt-2 flex flex-shrink-0 items-center justify-between gap-2">
+                        <button
+                            @click="addWildcardFilter"
+                            :disabled="hasWildcardFilter"
+                            class="filter-wildcard-btn"
+                            :title="hasWildcardFilter ? 'Wildcard filter already exists' : 'Add wildcard filter'">
+                            * Wildcard
+                        </button>
+                        <button
+                            @click="ui.toggleModal('preview-filter')"
+                            class="filter-action-btn">
+                            <CameraIcon class="h-3 w-3" />
+                            <span>JSON</span>
+                        </button>
                     </div>
                 </div>
             </div>
-
-            <transition-group name="fade">
-                <FilterPreview v-if="activeModal === 'preview-filter'" :filter="filterBuilder" />
-            </transition-group>
         </div>
+
+        <transition-group name="fade">
+            <FilterPreview v-if="activeModal === 'preview-filter'" :filter="filterBuilder" />
+        </transition-group>
     </div>
 </template>
 
 <script setup>
 import draggable from "vuedraggable";
-import { ref, nextTick, watch, computed, onMounted, onUnmounted } from "vue";
+import { ref, nextTick, watch, computed, defineAsyncComponent, onUnmounted } from "vue";
 import { onBeforeRouteLeave } from "vue-router";
-import { Table, Header } from "@/components/Table";
 import Filter from "@/components/Filter/Filter.vue";
 import { FilterIcon } from "@/components/icons";
-import { DEBUG } from "@/utils/debug";
-
-import { ReloadIcon, TrashIcon, EditIcon, CameraIcon, StadiumIcon, SavingsIcon } from "@/components/icons";
+import { ReloadIcon, TrashIcon, EditIcon, CameraIcon } from "@/components/icons";
 import { sendSaveFilter } from "@/stores/requests";
 import PriceSortToggle from "@/components/Filter/PriceSortToggle.vue";
 import { useUIStore } from "@/stores/ui";
 import FilterBuilder from "@/libs/Filter";
 import panzoom from "@/libs/panzoom.js";
-import FilterPreview from "@/components/Filter/FilterPreview.vue";
+
+// Lazy-loaded modal component
+const FilterPreview = defineAsyncComponent(() => import("@/components/Filter/FilterPreview.vue"));
 const activeModal = computed(() => ui.activeModal);
 
 const ui = useUIStore();
@@ -214,6 +194,12 @@ let renderer;
 
 const shownFilters = ref("All");
 const filterBuilder = ref(new FilterBuilder());
+const draggableFilters = computed({
+    get: () => filterBuilder.value.filters,
+    set: (value) => {
+        filterBuilder.value.filters = value;
+    }
+});
 
 const hasWildcardFilter = computed(() => {
     return filterBuilder.value.filters.some((filter) => filter.buyAny && filterBuilder.value.isForCurrentEvent(filter));
@@ -221,28 +207,23 @@ const hasWildcardFilter = computed(() => {
 
 const addWildcardFilter = () => {
     if (!hasWildcardFilter.value) {
-        // Close any expanded filter first
         filterBuilder.value.setExpandedFilter(null);
         filterBuilder.value.addFilter({ buyAny: true, eventId: filterBuilder.value.currentEventId });
         filterBuilder.value.updateCss();
     }
 };
 
-// Initialize RendererFactory
 let RendererFactory = import("@necrolab/tm-renderer");
 
-// Real-time CSS injection system
 let styleElement = null;
 const cssUpdateTrigger = ref(0);
 const STYLE_ELEMENT_ID = "filter-builder-styles";
 
 const injectStyles = () => {
-    // Only inject styles if we have an SVG to style
     const svgWrapper = document.getElementById("svg-wrapper");
     if (!svgWrapper || !svg.value) return;
 
     if (!styleElement) {
-        // Remove any existing style element first
         const existingStyle = document.getElementById(STYLE_ELEMENT_ID);
         if (existingStyle) {
             existingStyle.remove();
@@ -259,9 +240,7 @@ const injectStyles = () => {
     }
 };
 
-// Setup real-time CSS updates
 const setupCSSUpdates = () => {
-    // Override updateCss method to trigger immediate updates
     const originalUpdateCss = filterBuilder.value.updateCss.bind(filterBuilder.value);
     filterBuilder.value.updateCss = () => {
         originalUpdateCss();
@@ -271,7 +250,6 @@ const setupCSSUpdates = () => {
         });
     };
 
-    // Override highlight method for immediate temporary CSS
     const originalHighlight = filterBuilder.value.highlight.bind(filterBuilder.value);
     filterBuilder.value.highlight = (...args) => {
         originalHighlight(...args);
@@ -280,7 +258,6 @@ const setupCSSUpdates = () => {
         });
     };
 
-    // Override clearHighlight method
     const originalClearHighlight = filterBuilder.value.clearHighlight.bind(filterBuilder.value);
     filterBuilder.value.clearHighlight = () => {
         originalClearHighlight();
@@ -304,11 +281,6 @@ const cleanupStyles = () => {
     }
 };
 
-// Basic cleanup monitoring
-const debugCleanup = () => {
-    console.log("FilterBuilder cleanup completed");
-};
-
 // Clean up any leftover styles from previous instances
 cleanupStyles();
 
@@ -346,42 +318,63 @@ RendererFactory.then((r) => {
     rendererFactory = new r.default();
     rendererFactory.init();
 }).catch((error) => {
-    console.error("Failed to initialize renderer:", error);
+    ui.logger.Error("Failed to initialize renderer:", error);
 });
 
 const updateShownVenue = async () => {
     eventId.value = eventId.value.trim();
     if (eventId.value.includes("/event/")) eventId.value = eventId.value.split("/event/")[1];
 
-    const country = eventId.value.length === 16 ? null : ui.currentCountry.id;
-
-    if (!country && eventId.value.length !== 16) {
-        ui.showError("Invalid eventId!");
+    // Determine country based on eventId length and current module
+    let country = null;
+    if (eventId.value.length === 16) {
+        // 16-char eventIds are global, but try current country first as fallback
+        country = ui.currentCountry?.id || null;
+    } else if (eventId.value.length > 0) {
+        // Shorter eventIds need country specification
+        country = ui.currentCountry?.id;
+        if (!country) {
+            ui.showError("Invalid eventId or missing country!");
+            return;
+        }
+    } else {
+        ui.showError("Event ID is required!");
         return;
     }
 
-    renderer = rendererFactory.createRenderer(eventId.value, {
-        proxy: "",
-        country: country
-    });
-    filterBuilder.value.highlightedSeatColor = renderer.config.highlightedSeatColor;
-    renderer.setCustomConfig({
-        logFullError: true,
-        includeDetailedAttributes: true,
-        renderRowBlocks: true
-    });
-
     try {
+        if (!rendererFactory) {
+            ui.showError("Renderer not initialized yet. Please wait and try again.");
+            return;
+        }
+
+        renderer = rendererFactory.createRenderer(eventId.value, {
+            proxy: "",
+            country: country,
+            seatColor: "#0557ae",
+            nonAvSeatColor: "#dadcde",
+            highlightedSeatColor: "#d0006f"
+        });
+
+        filterBuilder.value.highlightedSeatColor = renderer.config.highlightedSeatColor;
+        renderer.setCustomConfig({
+            logFullError: true,
+            includeDetailedAttributes: true,
+            renderRowBlocks: true
+        });
+
         await renderer.render();
         svg.value = renderer.svg;
+
+        if (!svg.value) {
+            throw new Error("Renderer returned empty SVG");
+        }
     } catch (e) {
         ui.logger.Error("COULD NOT RENDER SVG", e);
-        ui.showError(e.message);
-    }
+        const errorMsg = e?.message || "Unknown rendering error";
+        ui.showError(`Failed to render venue: ${errorMsg}`);
 
-    if (!svg.value) {
-        ui.logger.Error("Could not render SVG");
-        ui.showError("Could not fetch event map");
+        // Try to load existing filter even if rendering fails
         await loadFilter();
         filterBuilder.value.reload(eventId.value);
         return;
@@ -485,203 +478,27 @@ watch(renderSeats, async () => {
 })();
 </script>
 
-<style scoped>
-.compact-filter {
-    font-size: 0.75rem;
-    padding: 0.25rem !important;
-}
-
-.compact-filter .handle {
-    transform: scale(0.8);
-}
-
-/* Enhanced table and filter styling */
-.filters-container {
-    @apply space-y-0;
-    padding: 4px;
-}
-
-/* Dragging states for better UX */
-.sortable-ghost {
-    @apply opacity-30;
-    border: 1px solid oklch(0.28 0 0);
-    background-color: rgba(68, 69, 75, 0.1);
-}
-
-.sortable-chosen .drag-handle {
-    border: 1px solid oklch(0.28 0 0);
-    background-color: rgba(68, 69, 75, 0.2);
-}
-
-.sortable-drag {
-    @apply z-50 rotate-1 scale-105 transform shadow-xl;
-}
-
-/* Unified Event ID + Load button group */
-.unified-load-group {
-    border: 2px solid oklch(0.2809 0 0);
-    border-radius: 0.5rem;
-    overflow: hidden;
-    background: oklch(0.2603 0 0);
-    transition: all 0.15s ease;
-
-    input, button {
-        border: none !important;
-        border-radius: 0 !important;
-        outline: none !important;
-    }
-
-    input {
-        flex: 1;
-
-        &::placeholder {
-            color: oklch(0.50 0 0);
-        }
-    }
-
-    button {
-        border-left: 1px solid oklch(0.2809 0 0) !important;
-        padding: 0 1rem;
-        font-weight: 500;
-        transition: all 0.15s ease;
-
-        &:hover {
-            background: oklch(0.72 0.15 145 / 0.1);
-        }
-    }
-
-    &:hover {
-        border-color: oklch(0.30 0 0);
-    }
-
-    &:focus-within {
-        border-color: oklch(0.72 0.15 145);
-        outline: 1px solid oklch(0.72 0.15 145);
-        outline-offset: 0;
-    }
-}
-
-/* Header button styling */
-.header-btn {
-    @apply flex items-center gap-2 rounded-md border px-3 py-2 text-sm font-medium transition-all duration-150;
-}
-
-.save-btn {
-    background-color: oklch(0.72 0.15 145 / 0.15);
-    border-color: oklch(0.72 0.15 145 / 0.5);
-    color: oklch(0.90 0 0);
-}
-
-.save-btn:hover {
-    background-color: oklch(0.72 0.15 145 / 0.25);
-    border-color: oklch(0.72 0.15 145);
-}
-
-.clear-btn {
-    background-color: oklch(0.60 0.20 25 / 0.15);
-    border-color: oklch(0.60 0.20 25 / 0.5);
-    color: oklch(0.90 0 0);
-}
-
-.clear-btn:hover {
-    background-color: oklch(0.60 0.20 25 / 0.25);
-    border-color: oklch(0.60 0.20 25);
-}
-
-.filter-builder-container {
-    height: 90vh;
-    overflow: hidden;
-}
-
-@media (max-width: 768px) {
-    .filter-builder-container {
-        overflow: auto;
-    }
-}
-
-/* Mobile portrait header spacing fixes */
-@media (max-width: 640px) {
-    .filter-builder-container .flex.items-center.justify-center {
-        gap: 0.5rem;
-    }
-}
-
-/* iPhone landscape and tablet portrait mode fixes */
-@media (max-width: 1023px) and (max-height: 768px) {
-    .filter-builder-container {
-        height: auto;
-        min-height: 100vh;
-        overflow: auto;
-    }
-}
-
-/* Desktop: enforce grid column constraints */
-@media (min-width: 1024px) {
-    .lg\\:grid-cols-5 > .lg\\:col-span-3 {
-        max-width: 60%; /* 3/5 of grid */
-        flex-shrink: 0;
-    }
-}
-
-.svg-container {
-    min-height: 300px;
-    height: 100%;
-    width: 100%;
-    position: relative;
-    overflow: auto;
-}
-
-/* Desktop: constrain svg-container to prevent expansion */
-@media (min-width: 1024px) {
-    .svg-container {
-        position: relative;
-        max-width: 100%;
-        max-height: 100%;
-        overflow: hidden;
-    }
-}
-</style>
-
 <style>
 /* Global styles needed for dynamically injected SVG content and Filter.js CSS injection */
 .svg-wrapper {
     position: relative;
-    transform-origin: 0 0;
-    min-width: 100%;
-    min-height: 100%;
-}
-
-/* Desktop constraints - prevent svg-wrapper from expanding beyond container */
-@media (min-width: 1024px) {
-    .svg-wrapper {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        max-width: 100%;
-        max-height: 100%;
-        min-width: unset;
-        min-height: unset;
-        overflow: hidden;
-    }
+    transform-origin: center center;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .svg-wrapper > svg {
     width: 100%;
     height: auto;
+    max-height: 100%;
+    object-fit: contain;
     background: center center no-repeat;
     background-size: contain;
 }
 
-/* Desktop SVG constraints */
-@media (min-width: 1024px) {
-    .svg-wrapper > svg {
-        max-width: 100%;
-        max-height: 100%;
-    }
-}
-
 /* Ensure Filter.js generated CSS works properly */
 .svg-wrapper path {
     pointer-events: auto;