@necrolab/dashboard 0.4.3

package/src/views/FilterBuilder.vue

@@ -0,0 +1,785 @@
+<template>
+    <div class="filter-builder-container w-full min-h-0 flex flex-col overflow-hidden">
+        <!-- Heading -->
+        <div class="flex-between pt-5 pb-2 mx-4 mt-2">
+            <div class="flex-center gap-4">
+                <FilterIcon class="cursor-pointer smooth-hover text-white" />
+                <h4 class="text-heading">Filter creator</h4>
+            </div>
+            <div class="flex items-center">
+                <input
+                    class="h-10 text-white text-sm p-2 bg-dark-500 w-48 flex items-center rounded-l relative border-2 border-dark-550"
+                    placeholder="Event ID"
+                    v-model="eventId"
+                />
+                <button
+                    class="h-10 text-white text-sm px-3 bg-dark-400 flex items-center rounded-r relative font-medium border-2 border-dark-550 smooth-hover"
+                    @click="updateShownVenue"
+                >
+                    Load
+                </button>
+            </div>
+        </div>
+
+        <div class="card-dark mx-4 mb-3 p-3 overflow-hidden">
+            <div class="w-full h-full">
+                <!-- Main -->
+                <div class="grid grid-cols-1 lg:grid-cols-5 gap-3 lg:gap-4 w-full h-full">
+                    <!-- Map -->
+                    <div
+                        class="col-span-1 lg:col-span-3 w-full h-full rounded-lg relative flex flex-col lg:max-w-none lg:overflow-hidden"
+                    >
+                        <div v-if="svg" class="flex items-center mb-1">
+                            <div class="flex items-center justify-between w-20 px-2 text-white font-black text-sm">
+                                <span class="cursor-pointer" @click="handleZoom(true)">+</span>
+                                <span class="cursor-pointer" @click="handleZoom(false)">-</span>
+                                <ReloadIcon class="cursor-pointer w-4 h-4" @click="handleZoom('r')" />
+                            </div>
+                        </div>
+                        <div class="overflow-hidden selecto-wrapper flex-1">
+                            <div
+                                v-if="svg"
+                                class="h-full overflow-auto hidden-scrollbars p-2 rounded shadow border-2 border-dark-550 svg-container"
+                            >
+                                <div class="svg-wrapper" id="svg-wrapper" v-html="svg"></div>
+                            </div>
+                            <div
+                                v-else
+                                class="h-full flex items-center justify-center p-2 rounded shadow border-2 border-dark-550 svg-container"
+                            >
+                                <div class="text-center text-dark-400">
+                                    <StadiumIcon class="mx-auto mb-2 w-8 h-8 opacity-50" />
+                                    <p class="text-sm">Enter an event ID and click "Load" to display the venue map</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-span-1 lg:col-span-2 w-full flex flex-col h-full">
+                        <div class="flex justify-between mb-2 items-center text-white">
+                            <div class="rounded flex justify-between gap-2 items-center" v-if="hasLoaded">
+                                <PriceSortToggle
+                                    :current="filterBuilder.globalFilter.priceSort"
+                                    class="smooth-hover"
+                                    @change="(e) => filterBuilder.updateGlobalFilter({ priceSort: e })"
+                                />
+
+                                <input
+                                    type="number"
+                                    :value="filterBuilder.globalFilter.maxPrice"
+                                    @input="
+                                        (e) =>
+                                            filterBuilder.updateGlobalFilter({
+                                                maxPrice: parseInt(e.target.value || 0)
+                                            })
+                                    "
+                                    class="w-14 bg-dark-500 border-2 border-dark-550 px-1 pl-2 h-8 rounded"
+                                    placeholder="max"
+                                />
+                            </div>
+                        </div>
+                        <Table class="border-2 border-dark-550 shadow-xl flex-1 flex flex-col">
+                            <Header class="flex-shrink-0">
+                                <div class="flex items-center font-bold gap-2 justify-between w-full">
+                                    <div class="flex items-center gap-2">
+                                        <span class="text-base">Filters</span>
+                                        <span class="text-base text-light-300">{{ filterBuilder.filters.length }}</span>
+                                        <PriceSortToggle
+                                            class="w-14 smooth-hover"
+                                            :options="['All', 'WL', 'BL']"
+                                            @change="(e) => (shownFilters = e)"
+                                        />
+                                    </div>
+                                    <div class="flex gap-2 items-center">
+                                        <button
+                                            class="header-btn save-btn"
+                                            @click="saveFilter"
+                                        >
+                                            <EditIcon class="w-4 h-4" />
+                                            <span class="lg:block hidden">Save</span>
+                                        </button>
+                                        <button
+                                            class="header-btn clear-btn"
+                                            @click="filterBuilder.reset(false)"
+                                        >
+                                            <TrashIcon class="w-4 h-4" />
+                                            <span class="lg:block hidden">Clear</span>
+                                        </button>
+                                    </div>
+                                </div>
+                            </Header>
+                            <div class="overflow-auto hidden-scrollbars flex-1">
+                                <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>
+                                <div v-else class="empty-state flex flex-col items-center justify-center py-8 text-center">
+                                    <FilterIcon class="w-12 h-12 text-dark-400 mb-3 opacity-50" />
+                                    <p class="text-dark-400 text-sm">No filters yet</p>
+                                    <p class="text-dark-500 text-xs mt-1">Click on the map to create filters</p>
+                                </div>
+                            </div>
+                        </Table>
+                        <div class="flex items-center justify-between text-white gap-2 mt-1 mb-4 md:mb-0 flex-shrink-0">
+                            <button
+                                @click="addWildcardFilter"
+                                :disabled="hasWildcardFilter"
+                                :class="[
+                                    'border-2 rounded border-dark-550 px-2 h-7 text-xs bg-dark-500 overflow-hidden shadow transition-all duration-200',
+                                    hasWildcardFilter 
+                                        ? 'text-gray opacity-50 cursor-not-allowed' 
+                                        : 'text-gray smooth-hover hover:bg-dark-400 hover:border-light-300'
+                                ]"
+                                :title="hasWildcardFilter ? 'Wildcard filter already exists' : 'Add wildcard filter'"
+                            >
+                                * Wildcard
+                            </button>
+                            <button
+                                @click="ui.toggleModal('preview-filter')"
+                                class="border-2 gap-1 flex justify-between items-center rounded border-dark-550 px-2 h-7 text-gray text-xs bg-dark-500 overflow-hidden shadow smooth-hover"
+                            >
+                                <CameraIcon class="w-3 h-3" />
+                                JSON
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <transition-group name="fade" mode="out-in">
+                <FilterPreview v-if="activeModal === 'preview-filter'" :filter="filterBuilder" />
+            </transition-group>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import draggable from "vuedraggable";
+import { ref, nextTick, watch, computed, onMounted, 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 DragSelect from "dragselect";
+import { DEBUG } from "@/utils/debug";
+
+import { ReloadIcon, TrashIcon, EditIcon, CameraIcon, StadiumIcon } 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";
+const activeModal = computed(() => ui.activeModal);
+
+const ui = useUIStore();
+const hasLoaded = ref(false);
+
+// let isShiftPressed = false;
+// window.onkeyup = (e) => {
+//     if (e.keyCode === 16) isShiftPressed = false;
+// };
+// window.onkeydown = (e) => {
+//     if (e.keyCode === 16) isShiftPressed = true;
+// };
+
+// const doDragSelect = () => {
+//     // https://dragselect.com/docs/API/Settings
+//     const ds = new DragSelect({
+//         selectables: [
+//             ...document.querySelectorAll("path[row]"),
+//             ...document.querySelectorAll("path[generaladmission]")
+//         ],
+//         area: document.getElementById("svg-wrapper"),
+//         selectionThreshold: 0.1,
+//         multiSelectKeys: []
+//     });
+
+//     ds.subscribe("DS:start:pre", () => {
+//         // ui.logger.Info("DS:start:pre - shift pressed:", isShiftPressed);
+//         if (!isShiftPressed) {
+//             ds.stop(false, false);
+//             ds.start();
+//         } else {
+//             panzoomInstance.pause();
+//         }
+//     });
+
+//     const parseSelected = (items) => {
+//         const parsed = items
+//             .map((e) => {
+//                 return {
+//                     section: e.attributes.sectionname?.nodeValue || e.attributes.name?.nodeValue,
+//                     row: e.attributes.row?.nodeValue,
+//                     GA: e.attributes.generaladmission?.nodeValue,
+//                     name: e.attributes.name?.nodeValue
+//                 };
+//             })
+//             .filter((e) => !filterBuilder.value.isUnselectable(e.section, e.row));
+
+//         const sectionMapping = {};
+//         parsed
+//             .filter((p) => !p.GA)
+//             .forEach((p) => {
+//                 if (!sectionMapping[p.section]) sectionMapping[p.section] = [];
+//                 sectionMapping[p.section].push(p);
+//             });
+//         parsed
+//             .filter((p) => p.GA)
+//             .forEach((p) => {
+//                 sectionMapping[p.section] = {
+//                     GA: true,
+//                     section: p.section,
+//                     name: p.name
+//                 };
+//             });
+//         return sectionMapping;
+//     };
+
+//     ds.subscribe("DS:update:pre", (e) => {
+//         // ui.logger.Info("DS:update:pre - shift pressed:", isShiftPressed, e.items);
+//         filterBuilder.value.isDragging = true;
+//         if (!isShiftPressed) return;
+//         const sectionMapping = parseSelected(e.items);
+//         filterBuilder.value.clearHighlight();
+//         Object.entries(sectionMapping).forEach(([section, rows]) => {
+//             if (rows.GA) {
+//                 const isSelected = filterBuilder.value.filters.find(
+//                     (f) => filterBuilder.value.isForCurrentEvent(f) && f.section === section
+//                 );
+//                 if (isSelected) return;
+//                 filterBuilder.value.highlight({ section: section }, true);
+//             } else
+//                 rows.forEach((row) => {
+//                     const isSelected = filterBuilder.value.filters.find(
+//                         (f) =>
+//                             (f.section === section && f.rows?.includes(row.row)) ||
+//                             (!f.rows && f.section === section && filterBuilder.value.isForCurrentEvent(f))
+//                     );
+//                     if (isSelected) return;
+
+//                     filterBuilder.value.highlight({ section, row: row.row });
+//                 });
+//         });
+//     });
+
+//     ds.subscribe("DS:end", (e) => {
+//         filterBuilder.value.isDragging = false;
+//         panzoomInstance.resume();
+//         filterBuilder.value.clearHighlight();
+//         [...document.querySelectorAll("path")].map((f) => (f.style = ""));
+//         if (!isShiftPressed) return;
+//         const sectionMapping = parseSelected(e.items);
+//         const secNameMapping = filterBuilder.value.getSectionNameMapping();
+
+//         Object.entries(sectionMapping).forEach(([section, rows]) => {
+//             if (rows.GA) {
+//                 const isSelected = filterBuilder.value.filters.find(
+//                     (f) => filterBuilder.value.isForCurrentEvent(f) && f.section === secNameMapping[section]
+//                 );
+//                 if (isSelected) return;
+//                 filterBuilder.value.addFilter({
+//                     event: filterBuilder.value.currentEventId,
+//                     section: secNameMapping[section]
+//                 });
+//             } else {
+//                 const unselectedRows = [];
+//                 rows.forEach((row) => {
+//                     const isSelected = filterBuilder.value.filters.find(
+//                         (f) =>
+//                             (f.section === section && f.rows?.includes(row.row)) ||
+//                             (!f.rows && f.section === section && filterBuilder.value.isForCurrentEvent(f))
+//                     );
+//                     if (isSelected) return;
+//                     unselectedRows.push(row.row);
+//                 });
+//                 if (unselectedRows.length === 0) return;
+//                 filterBuilder.value.addFilter({
+//                     event: filterBuilder.value.currentEventId,
+//                     section,
+//                     rows: unselectedRows
+//                 });
+//             }
+//         });
+//         isShiftPressed = false;
+//     });
+// };
+
+const panzoomOptions = {
+    maxZoom: 8, // max zoom-in factor
+    minZoom: 0.8, // max zoom-out factor
+    panOnlyWhenZoomed: true,
+    bounds: true,
+    boundsPadding: 0.1, // Add padding to ensure it stays within bounds
+    transformOrigin: { x: 0.5, y: 0.5 }, // Center the zoom
+    contain: true // Force the image to stay within the parent container
+};
+let panzoomInstance;
+
+const svg = ref("");
+const eventId = ref("");
+const renderSeats = ref(false);
+let renderer;
+
+const shownFilters = ref("All");
+const filterBuilder = ref(new FilterBuilder());
+
+const hasWildcardFilter = computed(() => {
+    return filterBuilder.value.filters.some(filter => 
+        filter.buyAny && filterBuilder.value.isForCurrentEvent(filter)
+    );
+});
+
+const addWildcardFilter = () => {
+    if (!hasWildcardFilter.value) {
+        filterBuilder.value.addFilter({ buyAny: true, eventId: filterBuilder.value.currentEventId });
+    }
+};
+
+// Initialize RendererFactory
+let RendererFactory;
+if (DEBUG) {
+    RendererFactory = class {
+        constructor() {}
+    };
+} else 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();
+        }
+
+        styleElement = document.createElement("style");
+        styleElement.id = STYLE_ELEMENT_ID;
+        document.head.appendChild(styleElement);
+    }
+
+    const combinedCSS = filterBuilder.value.cssClasses + filterBuilder.value.temporaryCSS;
+    if (styleElement.textContent !== combinedCSS) {
+        styleElement.textContent = combinedCSS;
+    }
+};
+
+// 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();
+        nextTick(() => {
+            injectStyles();
+            cssUpdateTrigger.value++;
+        });
+    };
+
+    // Override highlight method for immediate temporary CSS
+    const originalHighlight = filterBuilder.value.highlight.bind(filterBuilder.value);
+    filterBuilder.value.highlight = (...args) => {
+        originalHighlight(...args);
+        nextTick(() => {
+            injectStyles();
+        });
+    };
+
+    // Override clearHighlight method
+    const originalClearHighlight = filterBuilder.value.clearHighlight.bind(filterBuilder.value);
+    filterBuilder.value.clearHighlight = () => {
+        originalClearHighlight();
+        nextTick(() => {
+            injectStyles();
+        });
+    };
+};
+
+// Cleanup function
+const cleanupStyles = () => {
+    // Remove by ID to ensure we get it even if reference is lost
+    const existingStyle = document.getElementById(STYLE_ELEMENT_ID);
+    if (existingStyle) {
+        existingStyle.remove();
+    }
+
+    if (styleElement) {
+        styleElement.remove();
+        styleElement = null;
+    }
+};
+
+// Basic cleanup monitoring
+const debugCleanup = () => {
+    console.log("FilterBuilder cleanup completed");
+};
+
+// Clean up any leftover styles from previous instances
+cleanupStyles();
+
+// Initialize CSS system
+setupCSSUpdates();
+
+// Watch for reactive updates
+watch(
+    cssUpdateTrigger,
+    () => {
+        injectStyles();
+    },
+    { immediate: true }
+);
+
+// Cleanup on unmount
+onUnmounted(() => {
+    cleanupStyles();
+});
+
+// Also cleanup on route change using beforeRouteLeave
+onBeforeRouteLeave(() => {
+    cleanupStyles();
+});
+
+const doesFilterShow = (filter) => {
+    if ((filter.event || filter.eventId) !== filterBuilder.value.currentEventId) return;
+    if (!["BL", "WL"].includes(shownFilters.value)) return true;
+    const filterState = filter.exclude ? "BL" : "WL";
+    return shownFilters.value === filterState;
+};
+
+let rendererFactory;
+if (!DEBUG)
+    RendererFactory.then((r) => {
+        rendererFactory = new r.default();
+        rendererFactory.init();
+    }).catch((error) => {
+        console.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!");
+        return;
+    }
+
+    renderer = rendererFactory.createRenderer(eventId.value, "", country);
+    filterBuilder.value.highlightedSeatColor = renderer.c.highlightedSeatColor;
+    renderer.c.logFullError = true;
+    renderer.c.includeDetailedAttributes = true;
+    renderer.c.renderRowBlocks = true;
+    renderer.setUrlProxy("/api/cors?url=");
+
+    try {
+        await renderer.render();
+        svg.value = renderer.svg;
+    } catch (e) {
+        ui.logger.Error("COULD NOT RENDER SVG", e);
+        ui.showError(e.message);
+    }
+
+    if (!svg.value) {
+        ui.logger.Error("Could not render SVG");
+        ui.showError("Could not fetch event map");
+        await loadFilter();
+        filterBuilder.value.reload(eventId.value);
+        return;
+    }
+
+    await nextTick();
+    if (panzoomInstance?.dispose) panzoomInstance.dispose();
+    const elem = document.getElementById("svg-wrapper");
+    try {
+        // Ensure SVG has appropriate sizing before initializing panzoom
+        if (elem && elem.children[0]) {
+            const svg = elem.children[0];
+            const isDesktop = window.innerWidth >= 1024;
+
+            // Ensure SVG doesn't exceed container width
+            svg.style.maxWidth = "100%";
+            svg.style.height = "auto";
+            svg.setAttribute("preserveAspectRatio", "xMidYMid meet");
+
+            // Additional desktop constraints to prevent expansion
+            if (isDesktop) {
+                svg.style.maxHeight = "100%";
+                svg.style.width = "100%";
+                svg.style.objectFit = "contain";
+            }
+
+            // Initialize panzoom with updated options
+            panzoomInstance = panzoom(svg, panzoomOptions);
+
+            // Reset to initial position
+            panzoomInstance.moveTo(0, 0);
+            panzoomInstance.zoomAbs(0, 0, 1);
+        }
+    } catch (e) {
+        ui.logger.Error("Couldnt use panzoom", e);
+    }
+    await nextTick();
+    await loadFilter();
+    filterBuilder.value.reload(eventId.value);
+
+    // Re-setup CSS system after reload
+    setupCSSUpdates();
+    filterBuilder.value.updateCss();
+    // doDragSelect();
+};
+
+const loadFilter = async () => {
+    try {
+        const res = await fetch(`/api/filter/load?eventId=${eventId.value}`);
+        const data = await res.json();
+        if (eventId.value) ui.showSuccess("Loaded filter data");
+        filterBuilder.value.reset(true);
+        filterBuilder.value.updateGlobalFilter(data.globalFilter || {});
+        data.filters?.forEach((f) => filterBuilder.value.addFilter(f));
+        hasLoaded.value = true;
+    } catch (e) {
+        ui.showError("Couldn't load filter data");
+        ui.logger.Error("Error loading filter data", e);
+    }
+};
+
+const saveFilter = async () => {
+    const data = filterBuilder.value.out();
+    try {
+        await sendSaveFilter(data);
+        ui.showSuccess("Saved filter data");
+    } catch (e) {
+        ui.showError("Couldn't save filter data");
+        ui.logger.Info("Error saving filter data", e);
+    }
+};
+
+const handleZoom = (zoomEvent) => {
+    // handle zoom reset
+    if (zoomEvent === "r") {
+        // Reset both zoom and position
+        panzoomInstance.moveTo(0, 0);
+        panzoomInstance.zoomAbs(0, 0, 1);
+        return;
+    }
+
+    // Get current transform
+    const { scale } = panzoomInstance.getTransform();
+
+    // Calculate new scale based on zoom direction
+    const newScale = zoomEvent ? scale + scale / 3 : scale - scale / 3;
+
+    // Apply zoom with bounds checking
+    if (newScale >= panzoomOptions.minZoom && newScale <= panzoomOptions.maxZoom) {
+        panzoomInstance.smoothZoom(0, 0, newScale / scale);
+    }
+};
+
+watch(renderSeats, async () => {
+    ui.logger.Info("Updated renderSeats", renderSeats.value);
+    await updateShownVenue();
+});
+
+(async () => {
+    await loadFilter();
+})();
+</script>
+
+<style scoped>
+.slider-dim {
+    width: 60px;
+    height: 30px;
+}
+
+.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-1;
+}
+
+/* Dragging states for better UX */
+.sortable-ghost {
+    @apply opacity-30;
+    border: 1px solid #4A4A61;
+    background-color: rgba(74, 74, 97, 0.1);
+}
+
+.sortable-chosen .drag-handle {
+    border: 1px solid #4A4A61;
+    background-color: rgba(74, 74, 97, 0.2);
+}
+
+.sortable-drag {
+    @apply shadow-xl transform rotate-1 scale-105 z-50;
+}
+
+/* Header button styling */
+.header-btn {
+    @apply flex items-center gap-2 px-3 py-2 border rounded-md font-medium text-sm transition-all duration-200 hover:scale-105;
+}
+
+.save-btn {
+    background-color: rgba(34, 197, 94, 0.2);
+    border-color: rgba(74, 222, 128, 0.5);
+}
+
+.save-btn:hover {
+    background-color: rgba(34, 197, 94, 0.3);
+}
+
+.clear-btn {
+    background-color: rgba(239, 68, 68, 0.2);
+    border-color: rgba(248, 113, 113, 0.5);
+}
+
+.clear-btn:hover {
+    background-color: rgba(239, 68, 68, 0.3);
+}
+
+.filter-builder-container {
+    height: 90vh;
+    overflow: hidden;
+}
+
+.card-dark {
+    height: calc(100vh - 175px);
+    min-height: 500px;
+    overflow: hidden;
+}
+
+@media (max-width: 768px) {
+    .filter-builder-container {
+        overflow: auto;
+    }
+
+    .card-dark {
+        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;
+    }
+}
+
+.svg-wrapper > svg {
+    width: 100%;
+    height: auto;
+    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;
+    cursor: pointer;
+}
+
+.svg-wrapper path[generaladmission] {
+    pointer-events: auto;
+    cursor: pointer;
+}
+
+/* Hover effects for general admission seats */
+.svg-wrapper path[generaladmission]:hover {
+    pointer-events: all;
+    cursor: pointer;
+}
+</style>