script.js

document.addEventListener('DOMContentLoaded', () => {
    console.log('=== SCRIPT.JS LOADED - VERSION 2.0 WITH HIERARCHICAL ELECTION SYSTEM ===');

    // --- CONSTANTS ---
    const PROVINCES = {
        '10': { name: 'Newfoundland and Labrador', abbr: 'NL' }, '11': { name: 'Prince Edward Island', abbr: 'PE' },
        '12': { name: 'Nova Scotia', abbr: 'NS' }, '13': { name: 'New Brunswick', abbr: 'NB' },
        '24': { name: 'Quebec', abbr: 'QC' }, '35': { name: 'Ontario', abbr: 'ON' },
        '46': { name: 'Manitoba', abbr: 'MB' }, '47': { name: 'Saskatchewan', abbr: 'SK' },
        '48': { name: 'Alberta', abbr: 'AB' }, '59': { name: 'British Columbia', abbr: 'BC' },
        '60': { name: 'Yukon', abbr: 'YT' }, '61': { name: 'Northwest Territories', abbr: 'NT' },
        '62': { name: 'Nunavut', abbr: 'NU' }
    };
    

    // --- INDEXEDDB CACHE SERVICE ---
    const CacheService = {
        DB_NAME: 'CensusDataCache',
        DB_VERSION: 1,
        STORE_NAME: 'censusData',
        db: null,

        async init() {
            return new Promise((resolve, reject) => {
                const request = indexedDB.open(this.DB_NAME, this.DB_VERSION);

                request.onerror = () => {
                    console.warn('IndexedDB failed to open, caching disabled:', request.error);
                    resolve(null); // Gracefully degrade
                };

                request.onsuccess = () => {
                    this.db = request.result;
                    console.log('IndexedDB cache initialized');
                    resolve(this.db);
                };

                request.onupgradeneeded = (event) => {
                    const db = event.target.result;
                    if (!db.objectStoreNames.contains(this.STORE_NAME)) {
                        const store = db.createObjectStore(this.STORE_NAME, { keyPath: 'url' });
                        store.createIndex('timestamp', 'timestamp', { unique: false });
                    }
                };
            });
        },

        async get(url) {
            if (!this.db) return null;

            return new Promise((resolve, reject) => {
                try {
                    const transaction = this.db.transaction([this.STORE_NAME], 'readonly');
                    const store = transaction.objectStore(this.STORE_NAME);
                    const request = store.get(url);

                    request.onsuccess = () => {
                        const result = request.result;
                        if (result) {
                            console.log(`Cache HIT for ${url.split('/').pop()}`);
                            resolve(result.data);
                        } else {
                            console.log(`Cache MISS for ${url.split('/').pop()}`);
                            resolve(null);
                        }
                    };

                    request.onerror = () => {
                        console.warn('Cache read error:', request.error);
                        resolve(null);
                    };
                } catch (error) {
                    console.warn('Cache get error:', error);
                    resolve(null);
                }
            });
        },

        async set(url, data) {
            if (!this.db) return false;

            return new Promise((resolve) => {
                try {
                    const transaction = this.db.transaction([this.STORE_NAME], 'readwrite');
                    const store = transaction.objectStore(this.STORE_NAME);
                    const record = {
                        url: url,
                        data: data,
                        timestamp: Date.now()
                    };
                    const request = store.put(record);

                    request.onsuccess = () => {
                        console.log(`Cached ${url.split('/').pop()}`);
                        resolve(true);
                    };

                    request.onerror = () => {
                        console.warn('Cache write error:', request.error);
                        resolve(false);
                    };
                } catch (error) {
                    console.warn('Cache set error:', error);
                    resolve(false);
                }
            });
        },

        async clear() {
            if (!this.db) return false;

            return new Promise((resolve) => {
                try {
                    const transaction = this.db.transaction([this.STORE_NAME], 'readwrite');
                    const store = transaction.objectStore(this.STORE_NAME);
                    const request = store.clear();

                    request.onsuccess = () => {
                        console.log('Cache cleared');
                        resolve(true);
                    };

                    request.onerror = () => {
                        console.warn('Cache clear error:', request.error);
                        resolve(false);
                    };
                } catch (error) {
                    console.warn('Cache clear error:', error);
                    resolve(false);
                }
            });
        }
    };

    // --- STATE MANAGEMENT ---
    const StateService = {
        _state: {
            currentProvinceId: null,
            provinceGeoData: null,
            provinceCensusData: null,
            federalGeoData: null,
            federalCensusData: null,
            characteristicGroups: new Map(),
            currentVisualization: null,
            currentBoundaryType: 'DA',
            showFederalOverlay: false,
            isPanelOpen: false,
            isLoading: false,
            loadingMessage: '',
            hasLoadedFederalData: false,

            // Hierarchical Election Mode state
            election: {
                active: false,
                geographicLevel: 'national',  // 'national' | 'provincial' | 'riding'
                unitDisplay: 'riding',        // 'riding' | 'poll' | 'advance'
                year: '2021',                 // '2019' | '2021' | '2025'
                partyFilter: 'all',           // 'all' | 'Liberal' | 'Conservative' | etc.
                partyScaleType: 'absolute',   // 'absolute' | 'relative'

                // Context-dependent identifiers
                provinceId: null,             // PRUID when geographicLevel = 'provincial'
                provinceAbbr: null,           // Province abbreviation (e.g., 'ON', 'QC')
                ridingNumber: null,           // FED_NUM when geographicLevel = 'riding'
                ridingName: null,             // Full riding name

                // Loaded data
                data: null,
                isLoading: false
            }
        },
        _listeners: [],

        getState() { return { ...this._state }; },

        setState(newState) {
            this._state = { ...this._state, ...newState };
            this._listeners.forEach(listener => listener(this._state));
        },

        subscribe(listener) {
            this._listeners.push(listener);
            return () => {
                this._listeners = this._listeners.filter(l => l !== listener);
            };
        },

        // Helper methods for election state management
        updateElection(updates) {
            this.setState({
                election: { ...this._state.election, ...updates }
            });
        },

        getElection() {
            return { ...this._state.election };
        },

        resetElection() {
            this.updateElection({
                active: false,
                geographicLevel: 'national',
                unitDisplay: 'riding',
                year: '2021',
                partyFilter: 'all',
                provinceId: null,
                provinceAbbr: null,
                ridingNumber: null,
                ridingName: null,
                data: null,
                isLoading: false
            });
        }
    };

    // --- DATA HANDLING ---
    const DataService = {
        async fetchAndParseCSV(url) {
            // Try to get from cache first
            const cachedData = await CacheService.get(url);
            if (cachedData) {
                return cachedData;
            }

            // Cache miss - fetch and parse from network
            const response = await fetch(url);
            if (!response.ok) throw new Error(`Failed to load data from ${url}`);
            const text = await response.text();

            const data = await new Promise((resolve, reject) => {
                Papa.parse(text, {
                    header: true, skipEmptyLines: true, dynamicTyping: true,
                    complete: results => resolve(results.data),
                    error: error => reject(error)
                });
            });

            // Cache the parsed data for next time
            await CacheService.set(url, data);

            return data;
        },

        async fetchGeoJSON(url) {
            const response = await fetch(url);
            if (!response.ok) throw new Error(`Failed to load boundaries from ${url}`);
            return response.json();  // No transformation needed
        },
        
        transformGeoJSON(geoData) {
            const transformer = proj4('EPSG:3347', 'EPSG:4326');
            const transformCoords = (coords) => {
                if (Array.isArray(coords[0])) {
                    coords.forEach(transformCoords);
                } else if (typeof coords[0] === 'number' && typeof coords[1] === 'number') {
                    const [lon, lat] = transformer.forward(coords);
                    if (isFinite(lon) && isFinite(lat)) {
                        coords[0] = lon;
                        coords[1] = lat;
                    }
                }
            };
            geoData.features.forEach(feature => {
                if(feature.geometry && feature.geometry.coordinates) {
                   transformCoords(feature.geometry.coordinates);
                }
            });
            return geoData;
        },

        organizeCensusData(data) {
            const groups = new Map();
            data.forEach(row => {
                const groupId = row['CHARACTERISTIC_GROUP'];
                const charId = row['CHARACTERISTIC_ID'];
                const charName = row['CHARACTERISTIC_NAME'];
                if (groupId && charId && charName) {
                    if (!groups.has(groupId)) {
                        groups.set(groupId, new Map());
                    }
                    groups.get(groupId).set(charId, charName.trim());
                }
            });
            return groups;
        },

        calculateVisualizationData(characteristicId, dataType, boundaryType) {
            const { provinceCensusData, federalCensusData, currentProvinceId } = StateService.getState();
            const dataSource = boundaryType === 'Federal' ? federalCensusData : provinceCensusData;
            
            if (!dataSource) return null;

            let minVal = Infinity, maxVal = -Infinity;
            const valueMap = new Map();
            const dataKey = dataType === 'Percentage' ? 'C10_RATE_TOTAL' : 'C1_COUNT_TOTAL';
            let characteristicName = '';
            
            dataSource.forEach(row => {
                if (row['CHARACTERISTIC_ID'] == characteristicId) {
                    if (!characteristicName) characteristicName = row['CHARACTERISTIC_NAME'];
                    
                    let joinId;
                    if (boundaryType === 'Federal') {
                        // For federal data, use FED_NUM directly
                        joinId = row['FED_NUM'];
                    } else {
                        // For DA data, use DGUID
                        joinId = String(row['DGUID'] || '').trim();
                        // Filter by current province if using global data
                        if (currentProvinceId && !joinId.includes(`S0512${currentProvinceId}`)) {
                            return;
                        }
                    }
                    
                    const value = parseFloat(row[dataKey]);
                    if (isFinite(value)) {
                        minVal = Math.min(minVal, value);
                        maxVal = Math.max(maxVal, value);
                        valueMap.set(joinId, value);
                    }
                }
            });
            
            if (!isFinite(minVal)) { minVal = 0; maxVal = 0; }

            return { characteristicName, dataType, minVal, maxVal, valueMap, boundaryType };
        }
    };
    
    // --- MAP RENDERING ---
    const MapService = {
        map: null,
        geojsonLayer: null,
        federalOverlayLayer: null,
        electionLayer: null,
        selectedPollLayer: null,
        pollViewRidingBoundariesLayer: null,
        partyAnalysisLayer: null,
        selectedLayer: null, // Track currently selected/highlighted layer

        initialize() {
            this.map = L.map('map', { 
                center: [56.1304, -106.3468], 
                zoom: 4, 
                zoomControl: true, 
                attributionControl: false, 
                preferCanvas: true 
            });
            
            // Define the stacking order for our layers
            this.map.createPane('base');
            this.map.getPane('base').style.zIndex = 200; // Base map tiles

            this.map.createPane('choroplethPane');
            this.map.getPane('choroplethPane').style.zIndex = 450; // Our data layer
            
            this.map.createPane('federalOverlay');
            this.map.getPane('federalOverlay').style.zIndex = 475; // Sits above data, below labels

            this.map.createPane('electionPane');
            this.map.getPane('electionPane').style.zIndex = 460; // Election results layer

            this.map.createPane('labels');
            this.map.getPane('labels').style.zIndex = 500; // Labels on top

            // 1. Add the BASE map layer (without labels)
            L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png', {
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
                subdomains: 'abcd',
                pane: 'base' // Assign to the 'base' pane
            }).addTo(this.map);

            // 2. Add the LABELS layer on top
            L.tileLayer('https://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}{r}.png', {
                subdomains: 'abcd',
                pane: 'labels' // Assign to the 'labels' pane
            }).addTo(this.map);
        },


        clearLayers() {
            if (this.geojsonLayer) {
                this.map.removeLayer(this.geojsonLayer);
                this.geojsonLayer = null;
            }
            if (this.federalOverlayLayer) {
                this.map.removeLayer(this.federalOverlayLayer);
                this.federalOverlayLayer = null;
            }
            if (this.electionLayer) {
                this.map.removeLayer(this.electionLayer);
                this.electionLayer = null;
            }
            if (this.partyAnalysisLayer) {
                this.map.removeLayer(this.partyAnalysisLayer);
                this.partyAnalysisLayer = null;
            }
            if (this.selectedPollLayer) {
                this.map.removeLayer(this.selectedPollLayer);
                this.selectedPollLayer = null;
            }
            if (this.pollViewRidingBoundariesLayer) {
                this.map.removeLayer(this.pollViewRidingBoundariesLayer);
                this.pollViewRidingBoundariesLayer = null;
            }
            this.clearHighlight();
        },

        highlightLayer(layer) {
            // Clear previous highlight
            this.clearHighlight();

            // Store reference and apply highlight style
            this.selectedLayer = layer;
            layer.setStyle({
                color: '#FFD700', // Bright yellow/gold
                weight: 4,
                opacity: 1
            });

            // Bring to front so border is visible
            layer.bringToFront();
        },

        clearHighlight() {
            if (this.selectedLayer) {
                // Reset to default style - will be overridden by the layer's original style
                this.selectedLayer.setStyle({
                    color: '#333333',
                    weight: 1.5,
                    opacity: 0.8
                });
                this.selectedLayer = null;
            }
        },

        displayBoundaries(geoData, boundaryType = 'DA') {
            this.clearLayers();
            const style = boundaryType === 'Federal' ? 
                { weight: 2, color: '#059669', fillColor: '#e2e8f0', fillOpacity: 0.4 } :
                { weight: 1.5, color: '#475569', fillColor: '#e2e8f0', fillOpacity: 0.4 };
            
            this.geojsonLayer = L.geoJSON(geoData, {
                pane: 'choroplethPane', // <-- Add the layer to our custom pane
                style: style,
                onEachFeature: (feature, layer) => this.bindPopup(feature, layer, boundaryType)
            }).addTo(this.map);
            
            // Only fit bounds if we have valid bounds
            try {
                const bounds = this.geojsonLayer.getBounds();
                if (bounds.isValid()) {
                    this.map.fitBounds(bounds);
                }
            } catch (e) {
                console.warn('Could not fit bounds:', e);
            }
        },
        
        renderChoropleth(geoData, vizData) {
            this.clearLayers();
            const { valueMap, minVal, maxVal, boundaryType } = vizData;
            
            this.geojsonLayer = L.geoJSON(geoData, {
                pane: 'choroplethPane', // <-- Add the layer to our custom pane
                style: feature => {
                    let idKey = boundaryType === 'Federal' ? this.extractFedNum(feature) : feature.properties.DGUID;
                    const value = valueMap.get(idKey);
                    return {
                        fillColor: this.getColor(value, minVal, maxVal),
                        weight: boundaryType === 'Federal' ? 2 : 1, 
                        color: boundaryType === 'Federal' ? '#059669' : '#475569', 
                        opacity: 1, 
                        fillOpacity: 0.8 // Opacity can stay high now
                    };
                },
                onEachFeature: (feature, layer) => this.bindPopup(feature, layer, boundaryType)
            }).addTo(this.map);
            
            // Maintain federal overlay if it was active
            const { showFederalOverlay, federalGeoData } = StateService.getState();
            if (showFederalOverlay && boundaryType === 'DA' && federalGeoData) {
                this.displayFederalOverlay(federalGeoData);
            }
        },

        displayFederalOverlay(federalData) {
            if (this.federalOverlayLayer) {
                this.map.removeLayer(this.federalOverlayLayer);
                this.federalOverlayLayer = null;
            }
            
            this.federalOverlayLayer = L.geoJSON(federalData, {
                pane: 'federalOverlay', // Assigns the layer to the correct pane
                style: {
                    weight: 2.5,
                    color: '#059669',
                    fillColor: 'transparent',
                    fillOpacity: 0,
                    dashArray: '8, 4',
                    lineCap: 'round',
                    lineJoin: 'round'
                },
                onEachFeature: (feature, layer) => {
                    const name = feature.properties.Name || feature.properties.ENNAME || 'Unknown Riding';
                    layer.bindTooltip(name, {
                        permanent: false,
                        direction: 'center',
                        className: 'federal-tooltip'
                    });
                }
            }).addTo(this.map);
        },

        removeFederalOverlay() {
            if (this.federalOverlayLayer) {
                this.map.removeLayer(this.federalOverlayLayer);
                this.federalOverlayLayer = null;
            }
        },

        displayPollViewRidingBoundaries(ridingData) {
            if (this.pollViewRidingBoundariesLayer) {
                this.map.removeLayer(this.pollViewRidingBoundariesLayer);
                this.pollViewRidingBoundariesLayer = null;
            }

            this.pollViewRidingBoundariesLayer = L.geoJSON(ridingData, {
                pane: 'federalOverlay', // Use same pane as federal overlay for consistent z-index
                style: {
                    weight: 2,
                    color: '#1e293b', // Dark slate color for visibility
                    fillColor: 'transparent',
                    fillOpacity: 0,
                    opacity: 0.8,
                    lineCap: 'round',
                    lineJoin: 'round'
                },
                // No tooltips or interaction - just boundaries
                interactive: false
            }).addTo(this.map);
        },

        removePollViewRidingBoundaries() {
            if (this.pollViewRidingBoundariesLayer) {
                this.map.removeLayer(this.pollViewRidingBoundariesLayer);
                this.pollViewRidingBoundariesLayer = null;
            }
        },

        displayPartyVoteShare(pollData, party, preserveView = false) {
            // Clear ALL existing layers before showing party analysis
            this.clearLayers();

            // Get the base color for this party
            const getPartyBaseColor = (partyName) => {
                const colors = {
                    'Liberal': '#DC2626',
                    'Conservative': '#2563EB',
                    'NDP': '#F97316',
                    'Bloc Québécois': '#06B6D4',
                    'Green': '#16A34A',
                    'PPC': '#7C3AED'
                };
                return colors[partyName] || '#6B7280';
            };

            // Convert hex color to RGB
            const hexToRgb = (hex) => {
                const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
                return result ? {
                    r: parseInt(result[1], 16),
                    g: parseInt(result[2], 16),
                    b: parseInt(result[3], 16)
                } : null;
            };

            // Get color based on vote share percentage (0-100%)
            // Mid-grey for no data, white at 0%, full party color at 100%
            const getColorForVoteShare = (percentage, partyColor) => {
                // No data - return mid-grey
                if (percentage === null || percentage === undefined) return '#9CA3AF';

                const rgb = hexToRgb(partyColor);
                if (!rgb) return '#9CA3AF';

                // Interpolate from white (255,255,255) to party color
                const factor = percentage / 100;
                const r = Math.round(255 + (rgb.r - 255) * factor);
                const g = Math.round(255 + (rgb.g - 255) * factor);
                const b = Math.round(255 + (rgb.b - 255) * factor);

                return `rgb(${r}, ${g}, ${b})`;
            };

            const partyBaseColor = getPartyBaseColor(party);

            this.partyAnalysisLayer = L.geoJSON(pollData, {
                pane: 'electionPane',
                style: feature => {
                    const pollResults = feature.properties.pollResults;
                    let voteShare = null;

                    if (pollResults && pollResults.candidates) {
                        const candidate = pollResults.candidates.find(c => c.party === party);
                        if (candidate) {
                            voteShare = parseFloat(candidate.percentage);
                        }
                    }

                    return {
                        fillColor: getColorForVoteShare(voteShare, partyBaseColor),
                        weight: 0.5,
                        color: '#999999',
                        opacity: 0.4,
                        fillOpacity: 0.85
                    };
                },
                onEachFeature: (feature, layer) => {
                    layer.on('click', () => {
                        const results = feature.properties.pollResults;
                        const props = feature.properties;
                        const pdNum = props.PD_NUM || props.PDNUM;

                        // Build content for side panel
                        let content = '';

                        if (results) {
                            const candidate = results.candidates?.find(c => c.party === party);
                            const voteShare = candidate ? parseFloat(candidate.percentage) : 0;
                            const votes = candidate ? candidate.votes : 0;

                            content += `
                                <div class="info-election-stats">
                                    <div class="info-stat">
                                        <div class="info-stat-label">Party</div>
                                        <div class="info-stat-value">${party}</div>
                                    </div>
                                    <div class="info-stat">
                                        <div class="info-stat-label">Vote Share</div>
                                        <div class="info-stat-value">${voteShare.toFixed(1)}%</div>
                                    </div>
                                    <div class="info-stat">
                                        <div class="info-stat-label">Votes</div>
                                        <div class="info-stat-value">${votes}</div>
                                    </div>
                                    <div class="info-stat">
                                        <div class="info-stat-label">Poll Location</div>
                                        <div class="info-stat-value">${results.pollName || 'N/A'}</div>
                                    </div>
                                    <div class="info-stat">
                                        <div class="info-stat-label">Total Votes</div>
                                        <div class="info-stat-value">${results.totalVotes.toLocaleString()}</div>
                                    </div>
                                </div>`;

                            if (results.candidates && results.candidates.length > 0) {
                                content += `<div class="info-all-candidates"><strong>All Candidates</strong>`;
                                // Sort candidates by percentage in descending order
                                const sortedCandidates = [...results.candidates].sort((a, b) =>
                                    parseFloat(b.percentage) - parseFloat(a.percentage)
                                );
                                sortedCandidates.forEach(c => {
                                    const highlight = c.party === party ? ' style="font-weight: 700;"' : '';
                                    content += `
                                        <div class="info-candidate-row"${highlight}>
                                            <span class="info-candidate-party" style="color: ${this.getPartyColor(c.party)}">${c.party}</span>
                                            <span class="info-candidate-votes">${c.votes} (${c.percentage}%)</span>
                                        </div>`;
                                });
                                content += `</div>`;
                            }
                        } else {
                            content += `<div class="info-panel-hint">No poll data available</div>`;
                        }

                        // Update side panel with chart
                        UIManager.updateElectionInfo(`Poll ${pdNum} - ${party}`, content, results?.candidates || null);
                    });
                }
            }).addTo(this.map);

            // Only fit bounds on initial load, not when toggling
            if (!preserveView) {
                try {
                    const bounds = this.partyAnalysisLayer.getBounds();
                    if (bounds.isValid()) {
                        this.map.fitBounds(bounds, { padding: [20, 20] });
                    }
                } catch (e) {
                    console.warn('Could not fit bounds:', e);
                }
            }
        },

        displayElectionResults(electionData, preserveView = false) {
            if (this.electionLayer) {
                this.map.removeLayer(this.electionLayer);
                this.electionLayer = null;
            }

            this.electionLayer = L.geoJSON(electionData, {
                pane: 'electionPane',
                style: feature => {
                    // Check for electionResults (riding data), pollResults (poll data), or advResults (advance poll data)
                    const results = feature.properties.electionResults || feature.properties.pollResults || feature.properties.advResults;

                    // If it's poll or advance poll data, use the margin-based color intensity
                    if (feature.properties.pollResults || feature.properties.advResults) {
                        const colorInfo = this.getPollColorInfo(results);
                        return {
                            fillColor: colorInfo.color || '#9CA3AF',
                            weight: 0.5,
                            color: '#999999',
                            opacity: 0.4,
                            fillOpacity: 0.85
                        };
                    }

                    // For riding data, use flat party color
                    const party = results?.winner?.party;
                    return {
                        fillColor: this.getPartyColor(party),
                        weight: 1.5,
                        color: '#333333',
                        opacity: 0.8,
                        fillOpacity: 0.7
                    };
                },
                onEachFeature: (feature, layer) => {
                    layer.on('click', () => {
                        const props = feature.properties;

                        // Highlight the clicked layer with bright yellow border
                        MapService.highlightLayer(layer);

                        // Debug: Check what we're actually clicking
                        console.log('Clicked feature properties:', {
                            hasElectionResults: !!props.electionResults,
                            hasPollResults: !!props.pollResults,
                            hasAdvResults: !!props.advResults,
                            FED_NUM: props.FED_NUM,
                            PD_NUM: props.PD_NUM,
                            ADV_POLL_N: props.ADV_POLL_N,
                            ED_NAMEE: props.ED_NAMEE
                        });

                        // Check for electionResults (riding data), pollResults (poll data), or advResults (advance poll data)
                        const results = feature.properties.electionResults || feature.properties.pollResults || feature.properties.advResults;

                        console.log('Results object:', results);
                        console.log('Results winner:', results?.winner);
                        console.log('Results candidates:', results?.candidates?.slice(0, 3));

                        // Check if we're in hierarchical mode
                        const election = StateService.getElection();
                        if (election.active && election.geographicLevel === 'riding' && !election.ridingNumber) {
                            // User is trying to select a riding for single riding view
                            App.selectElectionRiding(props.FED_NUM, props.ED_NAMEE);
                            return;
                        }

                        // When clicking a riding, save it as the current riding so poll toggle becomes available (old mode)
                        StateService.setState({ currentRidingNumber: props.FED_NUM });

                        // Build content for side panel
                        let content = '';

                        if (results && results.winner) {
                            const winner = results.winner;
                            const isPollData = feature.properties.pollResults !== undefined || feature.properties.advResults !== undefined;

                            // For riding data (not polls or advance polls), show the riding winner info
                            if (!isPollData) {
                                // Calculate margin and percentage for riding data
                                let winnerPercentage = winner.percentage;
                                let margin = winner.margin;
                                let marginPercent = winner.marginPercent;

                                content += `
                                    <div class="info-section-header">Riding Winner</div>
                                    <div class="info-election-winner">
                                        <div class="info-party-badge" style="background-color: ${this.getPartyColor(winner.party)}"></div>
                                        <div class="info-winner-info">
                                            <div class="info-winner-name">${winner.name || winner.party}</div>
                                            <div class="info-winner-party">${winner.party}</div>
                                        </div>
                                    </div>
                                    <div class="info-election-stats">
                                        <div class="info-stat">
                                            <div class="info-stat-label">Votes</div>
                                            <div class="info-stat-value">${parseInt(winner.votes).toLocaleString()} (${winnerPercentage}%)</div>
                                        </div>
                                        <div class="info-stat">
                                            <div class="info-stat-label">Margin</div>
                                            <div class="info-stat-value">${parseInt(margin).toLocaleString()} (${marginPercent}%)</div>
                                        </div>
                                        <div class="info-stat">
                                            <div class="info-stat-label">Total Votes</div>
                                            <div class="info-stat-value">${results.totalVotes.toLocaleString()}</div>
                                        </div>
                                    </div>`;
                            }
                            // For poll data, skip the poll winner section entirely
                            // (it will be shown in the "Overall Riding Winner" section and candidates list)

                            // For poll/advance poll data, try to fetch and display the riding winner
                            const fedNum = props.FED_NUM || props.FEDNUM;
                            if (isPollData && fedNum) {
                                const election = StateService.getElection();

                                // Fetch riding winner asynchronously
                                (async () => {
                                    try {
                                        const ridingDataUrl = `election_boundaries_19-25/${election.year}_boundaries/geojson/${election.year}_riding_with_results_min.json`;
                                        const ridingData = await DataService.fetchGeoJSON(ridingDataUrl);

                                        // Find this specific riding
                                        const ridingFeature = ridingData.features.find(f =>
                                            (f.properties.FED_NUM || f.properties.FEDNUM) == fedNum
                                        );

                                        if (ridingFeature && ridingFeature.properties.electionResults) {
                                            const ridingResults = ridingFeature.properties.electionResults;
                                            const ridingWinner = ridingResults.winner;

                                            if (ridingWinner) {
                                                // Build riding winner section
                                                let ridingContent = `
                                                    <div class="info-section-divider"></div>
                                                    <div class="info-section-header">Overall Riding Winner</div>
                                                    <div class="info-election-winner" style="opacity: 0.8;">
                                                        <div class="info-party-badge" style="background-color: ${this.getPartyColor(ridingWinner.party)}"></div>
                                                        <div class="info-winner-info">
                                                            <div class="info-winner-name">${ridingWinner.name || ridingWinner.party}</div>
                                                            <div class="info-winner-party">${ridingWinner.party}</div>
                                                        </div>
                                                    </div>
                                                    <div class="info-election-stats" style="opacity: 0.8;">
                                                        <div class="info-stat">
                                                            <div class="info-stat-label">Votes</div>
                                                            <div class="info-stat-value">${parseInt(ridingWinner.votes).toLocaleString()} (${ridingWinner.percentage}%)</div>
                                                        </div>
                                                        <div class="info-stat">
                                                            <div class="info-stat-label">Margin</div>
                                                            <div class="info-stat-value">${parseInt(ridingWinner.margin).toLocaleString()} (${ridingWinner.marginPercent}%)</div>
                                                        </div>
                                                        <div class="info-stat">
                                                            <div class="info-stat-label">Total Votes</div>
                                                            <div class="info-stat-value">${ridingResults.totalVotes.toLocaleString()}</div>
                                                        </div>
                                                    </div>`;

                                                // Insert into the info panel after the candidates section
                                                const infoPanelData = document.getElementById('info-panel-data');
                                                if (infoPanelData) {
                                                    const candidatesSection = infoPanelData.querySelector('.info-all-candidates');
                                                    if (candidatesSection) {
                                                        candidatesSection.insertAdjacentHTML('afterend', ridingContent);
                                                    }
                                                }
                                            }
                                        }
                                    } catch (error) {
                                        console.warn('Could not load riding winner:', error);
                                    }
                                })();
                            }

                            if (results.candidates && results.candidates.length > 1) {
                                const pollType = feature.properties.advResults ? 'Advance Poll' : (feature.properties.pollResults ? 'Poll' : 'Riding');
                                content += `<div class="info-all-candidates"><strong>All Candidates at This ${pollType}</strong>`;
                                // Sort candidates by percentage in descending order
                                const sortedCandidates = [...results.candidates].sort((a, b) =>
                                    parseFloat(b.percentage) - parseFloat(a.percentage)
                                );
                                sortedCandidates.forEach(candidate => {
                                    const indicator = candidate.isWinner ? ' ★' : '';
                                    content += `
                                        <div class="info-candidate-row">
                                            <span class="info-candidate-party" style="color: ${this.getPartyColor(candidate.party)}">${candidate.party}</span>
                                            <span class="info-candidate-votes">${candidate.votes.toLocaleString()} (${candidate.percentage}%)${indicator}</span>
                                        </div>`;
                                });
                                content += `</div>`;
                            }
                        } else {
                            content += `<div class="info-panel-hint">No election data available</div>`;
                        }

                        // Update side panel with chart
                        // Build appropriate title based on data type
                        let title;
                        if (feature.properties.pollResults) {
                            // Poll data
                            const pollNum = props.PD_NUM || props.PDNUM || props.pollNumber;
                            const pollName = results.pollName || props.pollName || '';
                            title = pollName ? `Poll ${pollNum} - ${pollName}` : `Poll ${pollNum}`;
                        } else if (feature.properties.advResults) {
                            // Advance poll data
                            const advPollNum = props.ADV_POLL_N || props.ADVPDNUM;
                            const pollName = results.pollName || props.pollName || '';
                            title = pollName ? `Advance Poll ${advPollNum} - ${pollName}` : `Advance Poll ${advPollNum}`;
                        } else {
                            // Riding data
                            title = `${props.ED_NAMEE} (Riding ${props.FED_NUM})`;
                        }

                        UIManager.updateElectionInfo(
                            title,
                            content,
                            results?.candidates || null
                        );
                    });
                }
            }).addTo(this.map);

            // Only fit bounds on initial load, not when toggling years
            if (!preserveView) {
                try {
                    const bounds = this.electionLayer.getBounds();
                    if (bounds.isValid()) {
                        this.map.fitBounds(bounds);
                    }
                } catch (e) {
                    console.warn('Could not fit bounds:', e);
                }
            }
        },

        removeElectionResults() {
            if (this.electionLayer) {
                this.map.removeLayer(this.electionLayer);
                this.electionLayer = null;
            }
        },

        // Display election results with party filter (shows vote share for selected party)
        displayElectionResultsWithPartyFilter(electionData, party, preserveView = false) {
            if (this.electionLayer) {
                this.map.removeLayer(this.electionLayer);
                this.electionLayer = null;
            }

            // Get scale type from state
            const election = StateService.getElection();
            const useRelativeScale = election.partyScaleType === 'relative';

            // Calculate min/max for relative scale
            let minPercentage = Infinity;
            let maxPercentage = -Infinity;

            if (useRelativeScale) {
                electionData.features.forEach(feature => {
                    const results = feature.properties.electionResults || feature.properties.pollResults || feature.properties.advResults;
                    if (results && results.candidates) {
                        const partyCandidate = results.candidates.find(c => c.party === party);
                        if (partyCandidate) {
                            const percentage = parseFloat(partyCandidate.percentage) || 0;
                            if (percentage > 0) { // Only consider areas where party ran
                                minPercentage = Math.min(minPercentage, percentage);
                                maxPercentage = Math.max(maxPercentage, percentage);
                            }
                        }
                    }
                });

                // Handle edge cases
                if (minPercentage === Infinity) minPercentage = 0;
                if (maxPercentage === -Infinity) maxPercentage = 100;
                if (minPercentage === maxPercentage) maxPercentage = minPercentage + 1; // Avoid division by zero
            }

            this.electionLayer = L.geoJSON(electionData, {
                pane: 'electionPane',
                style: feature => {
                    const results = feature.properties.electionResults || feature.properties.pollResults || feature.properties.advResults;

                    // Find this party's vote share
                    let partyPercentage = 0;
                    if (results && results.candidates) {
                        const partyCandidate = results.candidates.find(c => c.party === party);
                        if (partyCandidate) {
                            partyPercentage = parseFloat(partyCandidate.percentage) || 0;
                        }
                    }

                    // Calculate intensity based on scale type
                    let intensity;
                    if (useRelativeScale) {
                        // Relative scale: normalize between min and max in this geography
                        if (partyPercentage === 0) {
                            intensity = 0; // Party didn't run here
                        } else {
                            intensity = (partyPercentage - minPercentage) / (maxPercentage - minPercentage);
                        }
                    } else {
                        // Absolute scale: 0-100%
                        intensity = partyPercentage / 100;
                    }

                    const baseColor = this.getPartyColor(party);

                    return {
                        fillColor: baseColor,
                        weight: 1,
                        color: '#333333',
                        opacity: 0.6,
                        fillOpacity: Math.max(0.1, intensity * 0.9) // Min 0.1, max 0.9
                    };
                },
                onEachFeature: (feature, layer) => {
                    layer.on('click', () => {
                        const results = feature.properties.electionResults || feature.properties.pollResults || feature.properties.advResults;
                        const props = feature.properties;

                        // Highlight the clicked layer with bright yellow border
                        MapService.highlightLayer(layer);

                        // Find this party's data
                        let partyCandidate = null;
                        if (results && results.candidates) {
                            partyCandidate = results.candidates.find(c => c.party === party);
                        }

                        let content = '';
                        if (partyCandidate) {
                            content += `
                                <div class="info-election-winner">
                                    <div class="info-party-badge" style="background-color: ${this.getPartyColor(party)}"></div>
                                    <div class="info-winner-info">
                                        <div class="info-winner-name">${partyCandidate.name || party}</div>
                                        <div class="info-winner-party">${party}</div>
                                    </div>
                                </div>
                                <div class="info-election-stats">
                                    <div class="info-stat">
                                        <div class="info-stat-label">Votes</div>
                                        <div class="info-stat-value">${parseInt(partyCandidate.votes).toLocaleString()} (${partyCandidate.percentage}%)</div>
                                    </div>
                                    <div class="info-stat">
                                        <div class="info-stat-label">Total Votes</div>
                                        <div class="info-stat-value">${results.totalVotes?.toLocaleString() || 'N/A'}</div>
                                    </div>
                                </div>`;
                        } else {
                            content += `<div class="info-panel-hint">${party} did not run a candidate here</div>`;
                        }

                        let title;
                        if (props.ED_NAMEE || props.FEDENAME) {
                            const ridingName = props.ED_NAMEE || props.FEDENAME;
                            const fedNum = props.FED_NUM || props.FEDNUM;
                            title = `${ridingName} (Riding ${fedNum})`;
                        } else if (props.ADV_POLL_N || props.ADVPDNUM) {
                            const advPollNum = props.ADV_POLL_N || props.ADVPDNUM;
                            title = `Advance Poll ${advPollNum}`;
                        } else {
                            const pollNum = props.PD_NUM || props.PDNUM;
                            title = `Poll ${pollNum}`;
                        }

                        UIManager.updateElectionInfo(title, content, null);
                    });
                }
            }).addTo(this.map);

            if (!preserveView) {
                try {
                    const bounds = this.electionLayer.getBounds();
                    if (bounds.isValid()) {
                        this.map.fitBounds(bounds);
                    }
                } catch (e) {
                    console.warn('Could not fit bounds:', e);
                }
            }
        },

        displayPollResults(pollData, ridingNumber, preserveView = false) {
            if (this.electionLayer) {
                this.map.removeLayer(this.electionLayer);
                this.electionLayer = null;
            }

            this.electionLayer = L.geoJSON(pollData, {
                pane: 'electionPane',
                style: feature => {
                    const results = feature.properties.pollResults;
                    const colorInfo = this.getPollColorInfo(results);

                    return {
                        fillColor: colorInfo.color || '#9CA3AF',
                        weight: 0.5,
                        color: '#999999',
                        opacity: 0.4,
                        fillOpacity: 0.85,
                        // Store stripe info for custom rendering
                        className: colorInfo.striped ? 'striped-poll' : ''
                    };
                },
                onEachFeature: (feature, layer) => {
                    // Apply stripes if needed
                    const results = feature.properties.pollResults;
                    const colorInfo = this.getPollColorInfo(results);

                    if (colorInfo.striped && colorInfo.colors) {
                        // Create diagonal stripe pattern using canvas
                        layer.on('add', () => {
                            const path = layer._path;
                            if (path) {
                                this.applyStripedPattern(path, colorInfo.colors);
                            }
                        });
                    }

                    layer.on('click', () => {
                        const results = feature.properties.pollResults;
                        const props = feature.properties;
                        const pdNum = props.PD_NUM || props.PDNUM;

                        console.log('Poll clicked, layer:', layer);
                        console.log('Layer path:', layer._path);
                        console.log('Current classes:', layer._path ? layer._path.getAttribute('class') : 'no path');

                        // Highlight this poll
                        this.highlightSelectedPoll(layer);

                        // Build content for side panel
                        let content = '';

                        if (results && results.winner) {
                            const winner = results.winner;
                            content += `
                                <div class="info-election-winner">
                                    <div class="info-party-badge" style="background-color: ${this.getPartyColor(winner.party)}"></div>
                                    <div class="info-winner-info">
                                        <div class="info-winner-name">${winner.name}</div>
                                        <div class="info-winner-party">${winner.party}</div>
                                    </div>
                                </div>
                                <div class="info-election-stats">
                                    <div class="info-stat">
                                        <div class="info-stat-label">Poll Location</div>
                                        <div class="info-stat-value">${results.pollName || 'N/A'}</div>
                                    </div>
                                    <div class="info-stat">
                                        <div class="info-stat-label">Total Votes</div>
                                        <div class="info-stat-value">${results.totalVotes.toLocaleString()}</div>
                                    </div>
                                    <div class="info-stat">
                                        <div class="info-stat-label">Electors</div>
                                        <div class="info-stat-value">${results.electors > 0 ? results.electors.toLocaleString() : 'N/A'}</div>
                                    </div>
                                    <div class="info-stat">
                                        <div class="info-stat-label">Turnout</div>
                                        <div class="info-stat-value">${results.electors > 0 ? ((results.totalVotes / results.electors) * 100).toFixed(1) + '%' : 'N/A'}</div>
                                    </div>
                                </div>`;

                            if (results.candidates && results.candidates.length > 0) {
                                content += `<div class="info-all-candidates"><strong>Results by Candidate</strong>`;
                                // Sort candidates by percentage in descending order
                                const sortedCandidates = [...results.candidates].sort((a, b) =>
                                    parseFloat(b.percentage) - parseFloat(a.percentage)
                                );
                                sortedCandidates.forEach(candidate => {
                                    const indicator = candidate.party === winner.party ? ' ★' : '';
                                    content += `
                                        <div class="info-candidate-row">
                                            <span class="info-candidate-party" style="color: ${this.getPartyColor(candidate.party)}">${candidate.party}</span>
                                            <span class="info-candidate-votes">${candidate.votes} (${candidate.percentage}%)${indicator}</span>
                                        </div>`;
                                });
                                content += `</div>`;
                            }
                        } else {
                            content += `<div class="info-panel-hint">No poll data available</div>`;
                        }

                        // Update side panel with chart
                        const title = ridingNumber ? `Poll ${pdNum} - Riding ${ridingNumber}` : `Poll ${pdNum}`;
                        UIManager.updateElectionInfo(title, content, results?.candidates || null);
                    });
                }
            }).addTo(this.map);

            // Only fit bounds on initial load
            if (!preserveView) {
                try {
                    const bounds = this.electionLayer.getBounds();
                    if (bounds.isValid()) {
                        this.map.fitBounds(bounds, { padding: [20, 20] });
                    }
                } catch (e) {
                    console.warn('Could not fit bounds:', e);
                }
            }
        },

        displayAdvanceResults(advData, ridingNumber, preserveView = false) {
            if (this.electionLayer) {
                this.map.removeLayer(this.electionLayer);
                this.electionLayer = null;
            }

            this.electionLayer = L.geoJSON(advData, {
                pane: 'electionPane',
                style: feature => {
                    const results = feature.properties.advResults;
                    const colorInfo = this.getPollColorInfo(results);

                    return {
                        fillColor: colorInfo.color || '#9CA3AF',
                        weight: 0.5,
                        color: '#999999',
                        opacity: 0.4,
                        fillOpacity: 0.85,
                        // Store stripe info for custom rendering
                        className: colorInfo.striped ? 'striped-poll' : ''
                    };
                },
                onEachFeature: (feature, layer) => {
                    // Apply stripes if needed
                    const results = feature.properties.advResults;
                    const colorInfo = this.getPollColorInfo(results);

                    if (colorInfo.striped && colorInfo.colors) {
                        // Create diagonal stripe pattern using canvas
                        layer.on('add', () => {
                            const path = layer._path;
                            if (path) {
                                this.applyStripedPattern(path, colorInfo.colors);
                            }
                        });
                    }

                    layer.on('click', () => {
                        const results = feature.properties.advResults;
                        const props = feature.properties;
                        // Handle both property names: ADV_POLL_N (2021) and ADVPDNUM (2019)
                        const advPollNum = props.ADV_POLL_N || props.ADVPDNUM;

                        // Highlight this advance poll
                        this.highlightSelectedPoll(layer);

                        // Build content for side panel
                        let content = '';

                        if (results && results.winner) {
                            const winner = results.winner;
                            content += `
                                <div class="info-election-winner">
                                    <div class="info-party-badge" style="background-color: ${this.getPartyColor(winner.party)}"></div>
                                    <div class="info-winner-info">
                                        <div class="info-winner-name">${winner.name}</div>
                                        <div class="info-winner-party">${winner.party}</div>
                                    </div>
                                </div>
                                <div class="info-election-stats">
                                    <div class="info-stat">
                                        <div class="info-stat-label">Advance Poll Location</div>
                                        <div class="info-stat-value">${results.pollName || 'N/A'}</div>
                                    </div>
                                    <div class="info-stat">
                                        <div class="info-stat-label">Total Votes</div>
                                        <div class="info-stat-value">${results.totalVotes.toLocaleString()}</div>
                                    </div>
                                    <div class="info-stat">
                                        <div class="info-stat-label">Electors</div>
                                        <div class="info-stat-value">${results.electors > 0 ? results.electors.toLocaleString() : 'N/A'}</div>
                                    </div>
                                    <div class="info-stat">
                                        <div class="info-stat-label">Turnout</div>
                                        <div class="info-stat-value">${results.electors > 0 ? ((results.totalVotes / results.electors) * 100).toFixed(1) + '%' : 'N/A'}</div>
                                    </div>
                                </div>`;

                            if (results.candidates && results.candidates.length > 0) {
                                content += `<div class="info-all-candidates"><strong>Results by Candidate</strong>`;
                                // Sort candidates by percentage in descending order
                                const sortedCandidates = [...results.candidates].sort((a, b) =>
                                    parseFloat(b.percentage) - parseFloat(a.percentage)
                                );
                                sortedCandidates.forEach(candidate => {
                                    const indicator = candidate.party === winner.party ? ' ★' : '';
                                    content += `
                                        <div class="info-candidate-row">
                                            <span class="info-candidate-party" style="color: ${this.getPartyColor(candidate.party)}">${candidate.party}</span>
                                            <span class="info-candidate-votes">${candidate.votes} (${candidate.percentage}%)${indicator}</span>
                                        </div>`;
                                });
                                content += `</div>`;
                            }
                        } else {
                            content += `<div class="info-panel-hint">No advance poll data available</div>`;
                        }

                        // Update side panel with chart
                        UIManager.updateElectionInfo(`Advance Poll ${advPollNum} - Riding ${ridingNumber}`, content, results?.candidates || null);
                    });
                }
            }).addTo(this.map);

            // Only fit bounds on initial load
            if (!preserveView) {
                try {
                    const bounds = this.electionLayer.getBounds();
                    if (bounds.isValid()) {
                        this.map.fitBounds(bounds, { padding: [20, 20] });
                    }
                } catch (e) {
                    console.warn('Could not fit bounds:', e);
                }
            }
        },

        getPartyColor(party) {
            const partyColors = {
                'Liberal': '#DC2626',
                'Conservative': '#2563EB',
                'NDP': '#F97316',
                'Bloc Québécois': '#06B6D4',
                'Green': '#16A34A',
                'PPC': '#6B21A8',
                'Independent': '#6B7280'
            };
            return partyColors[party] || '#9CA3AF';
        },

        getPollColorInfo(results) {
            if (!results || !results.candidates || results.candidates.length === 0) {
                return { color: '#9CA3AF', striped: false }; // Mid-grey for no data
            }

            // Sort candidates by votes to get all tied candidates
            const sortedCandidates = [...results.candidates].sort((a, b) => b.votes - a.votes);
            const topVotes = sortedCandidates[0].votes;

            // Find all candidates tied for first place
            const tiedCandidates = sortedCandidates.filter(c => c.votes === topVotes);

            // If it's a tie (2 or more candidates with same votes), return striped pattern
            if (tiedCandidates.length >= 2) {
                return {
                    color: null,
                    striped: true,
                    colors: tiedCandidates.slice(0, 3).map(c => this.getPartyColor(c.party)) // Max 3 colors
                };
            }

            const winner = sortedCandidates[0];
            const runnerUp = sortedCandidates[1];

            if (!runnerUp || results.totalVotes === 0) {
                // Only one candidate or no votes - use full party color
                return { color: this.getPartyColor(winner.party), striped: false };
            }

            // Calculate margin percentage (winner's lead over runner-up as % of total votes)
            const marginPercent = ((winner.votes - runnerUp.votes) / results.totalVotes) * 100;

            // Get base color for winner
            const winnerColor = this.hexToRgb(this.getPartyColor(winner.party));

            // Define intensity based on margin
            let intensity;
            if (marginPercent < 5) {
                // Very close race - light color
                intensity = 0.3 + (marginPercent / 5) * 0.2; // 0.3 to 0.5
            } else if (marginPercent < 15) {
                // Slight win - light to medium
                intensity = 0.5 + ((marginPercent - 5) / 10) * 0.2; // 0.5 to 0.7
            } else if (marginPercent < 30) {
                // Comfortable win - medium to strong
                intensity = 0.7 + ((marginPercent - 15) / 15) * 0.2; // 0.7 to 0.9
            } else {
                // Landslide - full color
                intensity = 0.9 + Math.min((marginPercent - 30) / 30, 0.1); // 0.9 to 1.0
            }

            // Lighten the winner's color based on intensity
            const r = Math.round(255 - (255 - winnerColor.r) * intensity);
            const g = Math.round(255 - (255 - winnerColor.g) * intensity);
            const b = Math.round(255 - (255 - winnerColor.b) * intensity);

            return { color: this.rgbToHex(r, g, b), striped: false };
        },

        hexToRgb(hex) {
            const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
            return result ? {
                r: parseInt(result[1], 16),
                g: parseInt(result[2], 16),
                b: parseInt(result[3], 16)
            } : { r: 0, g: 0, b: 0 };
        },

        rgbToHex(r, g, b) {
            return "#" + [r, g, b].map(x => {
                const hex = x.toString(16);
                return hex.length === 1 ? "0" + hex : hex;
            }).join('');
        },

        applyStripedPattern(path, colors) {
            // Create SVG pattern for stripes
            const svg = path.ownerSVGElement || document.querySelector('svg');
            if (!svg) return;

            // Create unique pattern ID based on colors
            const patternId = `stripe-${colors.join('-').replace(/#/g, '')}`;

            // Check if pattern already exists
            let pattern = document.getElementById(patternId);
            if (!pattern) {
                // Create new pattern
                const defs = svg.querySelector('defs') || svg.insertBefore(document.createElementNS('http://www.w3.org/2000/svg', 'defs'), svg.firstChild);
                pattern = document.createElementNS('http://www.w3.org/2000/svg', 'pattern');
                pattern.setAttribute('id', patternId);
                pattern.setAttribute('width', '10');
                pattern.setAttribute('height', '10');
                pattern.setAttribute('patternUnits', 'userSpaceOnUse');
                pattern.setAttribute('patternTransform', 'rotate(45)');

                // Create stripes based on number of colors
                const stripeWidth = 10 / colors.length;
                colors.forEach((color, i) => {
                    const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
                    rect.setAttribute('x', i * stripeWidth);
                    rect.setAttribute('width', stripeWidth);
                    rect.setAttribute('height', '10');
                    rect.setAttribute('fill', color);
                    pattern.appendChild(rect);
                });

                defs.appendChild(pattern);
            }

            // Apply pattern to path
            path.setAttribute('fill', `url(#${patternId})`);
        },

        highlightSelectedPoll(layer) {
            console.log('highlightSelectedPoll called');
            console.log('Layer:', layer);
            console.log('Layer._path:', layer._path);

            // Remove highlight from previously selected poll
            if (this.selectedPollLayer && this.selectedPollLayer._path) {
                console.log('Removing highlight from previous poll');
                this.selectedPollLayer._path.classList.remove('selected-poll');
                // Reset the stroke style
                this.selectedPollLayer.setStyle({
                    weight: 0.5,
                    color: '#999999',
                    opacity: 0.4
                });
            }

            // Add highlight to newly selected poll
            this.selectedPollLayer = layer;
            if (layer._path) {
                console.log('Adding highlight class and style');
                console.log('Classes before:', layer._path.getAttribute('class'));
                layer._path.classList.add('selected-poll');
                console.log('Classes after:', layer._path.getAttribute('class'));

                // Also set the style directly to ensure it shows
                layer.setStyle({
                    weight: 4,
                    color: '#FFD700',
                    opacity: 1
                });
                console.log('Style set, stroke should be:', layer.options.color);
            } else {
                console.log('WARNING: No _path found on layer!');
            }
        },

        extractFedNum(feature) {
            // Extract FED_NUM from the HTML description (for federal boundaries)
            const description = feature.properties.description || '';
            const fedNumMatch = description.match(/<td>FED_NUM<\/td>\s*<td>(\d+)<\/td>/);
            return fedNumMatch ? parseInt(fedNumMatch[1]) : null;
        },
        
        bindPopup(feature, layer, boundaryType) {
            layer.on('click', () => {
                const { currentVisualization } = StateService.getState();
                const props = feature.properties;
                
                let header, subtitle, idValue;
                if (boundaryType === 'Federal') {
                    const name = props.Name || props.ENNAME || 'Unknown Riding';
                    const fedNum = this.extractFedNum(feature);
                    header = `<div class="popup-header federal"><h4>Federal Electoral District</h4><div class="subtitle">${name}</div></div>`;
                    subtitle = `FED_NUM: ${fedNum}`;
                    idValue = fedNum;
                } else {
                    const dauid = props.DAUID || 'Unknown';
                    header = `<div class="popup-header"><h4>Dissemination Area</h4><div class="subtitle">DAUID: ${dauid}</div></div>`;
                    idValue = props.DGUID;
                }

                let body = '<div class="popup-body">';
                
                // Add identifier info
                if (subtitle) {
                    body += `<div class="popup-stat"><div class="popup-stat-label">${subtitle}</div></div>`;
                }
                
                if (currentVisualization && currentVisualization.boundaryType === boundaryType) {
                    const value = currentVisualization.valueMap.get(idValue);
                    if (value !== undefined && isFinite(value)) {
                        const formattedValue = currentVisualization.dataType === 'Percentage' ? `${value.toFixed(2)}%` : value.toLocaleString();
                        body += `
                            <div class="popup-stat">
                                <div class="popup-stat-label">${currentVisualization.characteristicName}</div>
                                <div class="popup-stat-value">${formattedValue}</div>
                            </div>`;
                    } else {
                        body += `<div class="popup-nodata">No data available for this characteristic.</div>`;
                    }
                } else {
                    body += `<div class="popup-nodata">Select a characteristic to visualize data.</div>`;
                }
                
                body += '</div>';
                
                const popupContent = header + body;
                
                L.popup({ maxWidth: 320, minWidth: 300, closeButton: true })
                    .setLatLng(layer.getBounds().getCenter())
                    .setContent(popupContent)
                    .openOn(this.map);
            });
        },

        getColor(value, min, max) {
            if (value == null || !isFinite(value)) {
                return '#E2E8F0'; // No data color
            }

            // A perceptually uniform color palette ("Plasma") from light to dark.
            // This palette is good for accessibility (colorblind-friendly).
            const palette = ['#f0f921', '#fdb827', '#f58536', '#da5a64', '#b63679', '#8e0186', '#5b007f', '#0d0887'];

            if (max - min === 0) {
                return palette[Math.floor(palette.length / 2)]; // Return a middle color if all values are the same
            }

            // Normalize the value to a 0-1 range
            let t = (value - min) / (max - min);

            // Clamp t to the 0-1 range to handle potential floating point errors
            t = Math.max(0, Math.min(1, t));

            // Determine the two colors to interpolate between
            const colorIndex = t * (palette.length - 1);
            const index1 = Math.floor(colorIndex);
            const index2 = Math.min(index1 + 1, palette.length - 1);

            // Determine the amount to interpolate between the two selected colors
            const t_segment = colorIndex - index1;

            // Helper function for interpolation
            const interpolateColor = (color1, color2, factor) => {
                const r1 = parseInt(color1.substring(1, 3), 16);
                const g1 = parseInt(color1.substring(3, 5), 16);
                const b1 = parseInt(color1.substring(5, 7), 16);

                const r2 = parseInt(color2.substring(1, 3), 16);
                const g2 = parseInt(color2.substring(3, 5), 16);
                const b2 = parseInt(color2.substring(5, 7), 16);

                const r = Math.round(r1 + (r2 - r1) * factor);
                const g = Math.round(g1 + (g2 - g1) * factor);
                const b = Math.round(b1 + (b2 - b1) * factor);
                
                // Function to pad with a zero if needed
                const toHex = c => ('0' + c.toString(16)).slice(-2);

                return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
            };

            return interpolateColor(palette[index1], palette[index2], t_segment);
        }
    };

    // --- UI MANAGEMENT ---
    const UIManager = {
        elements: {
            welcomeOverlay: document.getElementById('welcome-overlay'),
            provinceGrid: document.getElementById('province-grid'),
            provinceDisplay: document.getElementById('province-display'),
            provinceName: document.getElementById('province-name'),
            changeProvinceBtn: document.getElementById('change-province-btn'),
            electionDisplay: document.getElementById('election-display'),
            electionYear: document.getElementById('election-year'),
            changeElectionBtn: document.getElementById('change-election-btn'),
            toggle2019Btn: document.getElementById('toggle-2019-btn'),
            toggle2021Btn: document.getElementById('toggle-2021-btn'),
            toggleRidingViewBtn: document.getElementById('toggle-riding-view-btn'),
            togglePollViewBtn: document.getElementById('toggle-poll-view-btn'),
            toggleAdvViewBtn: document.getElementById('toggle-adv-view-btn'),
            viewLevelToggle: document.getElementById('view-level-toggle'),
            controlPanel: document.getElementById('control-panel'),
            panelCloseBtn: document.getElementById('panel-close'),
            controlsContainer: document.getElementById('controls-container'),
            legendWrapper: document.getElementById('legend-wrapper'),
            openControlsBtn: document.getElementById('open-controls-btn'),
            loadingOverlay: document.getElementById('loading-overlay'),
            loadingText: document.getElementById('loading-text'),
            electionInfoPanel: document.getElementById('election-info-panel'),
            infoPanelTitle: document.getElementById('info-panel-title'),
            infoPanelContent: document.getElementById('info-panel-content'),
            infoPanelClose: document.getElementById('info-panel-close'),
            // Poll View elements
            pollViewOverlay: document.getElementById('poll-view-overlay'),
            pollProvinceGrid: document.getElementById('poll-province-grid'),
            pollViewDisplay: document.getElementById('poll-view-display'),
            pollViewProvinceName: document.getElementById('poll-view-province-name'),
            changePollProvinceBtn: document.getElementById('change-poll-province-btn'),
            pollToggle2019Btn: document.getElementById('poll-toggle-2019-btn'),
            pollToggle2021Btn: document.getElementById('poll-toggle-2021-btn'),
            pollToggle2025Btn: document.getElementById('poll-toggle-2025-btn'),
            viewPollComparisonBtn: document.getElementById('view-poll-comparison-btn'),
            backToWelcomeBtn: document.getElementById('back-to-welcome-btn'),
            toggleRidingBoundariesBtn: document.getElementById('toggle-riding-boundaries-btn'),
            // Party Analysis elements
            partyAnalysisOverlay: document.getElementById('party-analysis-overlay'),
            partySelectionOverlay: document.getElementById('party-selection-overlay'),
            partyProvinceGrid: document.getElementById('party-province-grid'),
            partyAnalysisDisplay: document.getElementById('party-analysis-display'),
            partyAnalysisInfo: document.getElementById('party-analysis-info'),
            changePartyBtn: document.getElementById('change-party-btn'),
            changePartyProvinceBtn: document.getElementById('change-party-province-btn'),
            partyToggle2019Btn: document.getElementById('party-toggle-2019-btn'),
            partyToggle2021Btn: document.getElementById('party-toggle-2021-btn'),
            viewPartyAnalysisBtn: document.getElementById('view-party-analysis-btn'),
            backToWelcomeFromPartyBtn: document.getElementById('back-to-welcome-from-party-btn'),
            backToPartyProvinceBtn: document.getElementById('back-to-party-province-btn'),
            partySelectionProvinceName: document.getElementById('party-selection-province-name'),
            // Hierarchical Election Controls
            unifiedElectionControls: document.getElementById('unified-election-controls'),
            // Geographic level buttons
            geoNationalBtn: document.getElementById('geo-national-btn'),
            geoProvincialBtn: document.getElementById('geo-provincial-btn'),
            geoRidingBtn: document.getElementById('geo-riding-btn'),
            // Context groups
            provinceContextGroup: document.getElementById('province-context-group'),
            electionProvinceSelect: document.getElementById('election-province-select'),
            ridingContextGroup: document.getElementById('riding-context-group'),
            electionRidingSelect: document.getElementById('election-riding-select'),
            // Unit display buttons
            unitRidingBtn: document.getElementById('unit-riding-btn'),
            unitPollBtn: document.getElementById('unit-poll-btn'),
            unitAdvanceBtn: document.getElementById('unit-advance-btn'),
            // Year buttons
            year2019Btn: document.getElementById('year-2019-btn'),
            year2021Btn: document.getElementById('year-2021-btn'),
            year2025Btn: document.getElementById('year-2025-btn'),
            // Party filter
            partyFilterSelect: document.getElementById('party-filter-select'),
            partyScaleGroup: document.getElementById('party-scale-group'),
            scaleAbsoluteBtn: document.getElementById('scale-absolute-btn'),
            scaleRelativeBtn: document.getElementById('scale-relative-btn'),
            exitElectionBtn: document.getElementById('exit-election-btn'),
            // Overlays
            electionProvinceOverlay: document.getElementById('election-province-overlay'),
            electionProvinceGrid: document.getElementById('election-province-grid'),
            cancelProvinceSelectionBtn: document.getElementById('cancel-province-selection-btn'),
            electionPartyOverlay: document.getElementById('election-party-overlay'),
            cancelPartySelectionBtn: document.getElementById('cancel-party-selection-btn'),
        },

        initialize() {
            this.renderProvinceSelector();
            this.populateElectionProvinceDropdown();
            this.elements.panelCloseBtn.addEventListener('click', () => this.setPanelOpen(false));
            this.elements.openControlsBtn.addEventListener('click', () => this.setPanelOpen(true));
            this.elements.changeProvinceBtn.addEventListener('click', () => App.returnToWelcome());

            // Hierarchical Election Controls - Entry Point
            const viewElectionBtn = document.getElementById('view-election-btn');
            if (viewElectionBtn) {
                viewElectionBtn.addEventListener('click', () => App.startElectionMode());
            }

            // Province dropdown change handler
            if (this.elements.electionProvinceSelect) {
                this.elements.electionProvinceSelect.addEventListener('change', async (e) => {
                    const value = e.target.value;
                    if (value) {
                        const [provinceId, provinceAbbr] = value.split('|');
                        await App.selectElectionProvince(provinceId, provinceAbbr);
                    }
                });
            }

            // Riding dropdown change handler
            if (this.elements.electionRidingSelect) {
                this.elements.electionRidingSelect.addEventListener('change', async (e) => {
                    const value = e.target.value;
                    if (value) {
                        const [ridingNumber, ridingName] = value.split('|');
                        await App.selectElectionRiding(parseInt(ridingNumber), ridingName);
                    }
                });
            }

            // Geographic Level Buttons
            if (this.elements.geoNationalBtn) {
                this.elements.geoNationalBtn.addEventListener('click', () => App.switchGeographicLevel('national'));
            }
            if (this.elements.geoProvincialBtn) {
                this.elements.geoProvincialBtn.addEventListener('click', () => App.switchGeographicLevel('provincial'));
            }
            if (this.elements.geoRidingBtn) {
                this.elements.geoRidingBtn.addEventListener('click', () => App.switchGeographicLevel('riding'));
            }

            // Unit Display Buttons
            if (this.elements.unitRidingBtn) {
                this.elements.unitRidingBtn.addEventListener('click', () => App.switchUnitDisplay('riding'));
            }
            if (this.elements.unitPollBtn) {
                this.elements.unitPollBtn.addEventListener('click', () => App.switchUnitDisplay('poll'));
            }
            if (this.elements.unitAdvanceBtn) {
                this.elements.unitAdvanceBtn.addEventListener('click', () => App.switchUnitDisplay('advance'));
            }

            // Year Buttons
            if (this.elements.year2019Btn) {
                this.elements.year2019Btn.addEventListener('click', () => App.switchYear('2019'));
            }
            if (this.elements.year2021Btn) {
                this.elements.year2021Btn.addEventListener('click', () => App.switchYear('2021'));
            }
            if (this.elements.year2025Btn) {
                this.elements.year2025Btn.addEventListener('click', () => App.switchYear('2025'));
            }

            // Province Selection Button
            if (this.elements.electionProvinceBtn) {
                this.elements.electionProvinceBtn.addEventListener('click', () => UIManager.showElectionProvinceSelector());
            }

            // Party Filter Dropdown
            if (this.elements.partyFilterSelect) {
                this.elements.partyFilterSelect.addEventListener('change', async (e) => {
                    const party = e.target.value;
                    await App.selectPartyFilter(party);
                });
            }

            // Party Scale Type Buttons
            if (this.elements.scaleAbsoluteBtn) {
                this.elements.scaleAbsoluteBtn.addEventListener('click', () => App.switchPartyScaleType('absolute'));
            }
            if (this.elements.scaleRelativeBtn) {
                this.elements.scaleRelativeBtn.addEventListener('click', () => App.switchPartyScaleType('relative'));
            }

            // Exit Election Button
            if (this.elements.exitElectionBtn) {
                this.elements.exitElectionBtn.addEventListener('click', () => App.exitElectionMode());
            }

            // Cancel Overlay Buttons
            if (this.elements.cancelProvinceSelectionBtn) {
                this.elements.cancelProvinceSelectionBtn.addEventListener('click', () => {
                    this.elements.electionProvinceOverlay.classList.add('hidden');
                });
            }
            if (this.elements.cancelPartySelectionBtn) {
                this.elements.cancelPartySelectionBtn.addEventListener('click', () => {
                    this.elements.electionPartyOverlay.classList.add('hidden');
                });
            }

            // OLD ELECTION LISTENERS (keeping for backward compatibility during transition)
            const election2019Btn = document.getElementById('view-2019-election-btn');
            const election2021Btn = document.getElementById('view-2021-election-btn');
            if (election2019Btn) {
                election2019Btn.addEventListener('click', () => App.loadElectionResults('2019'));
            }
            if (election2021Btn) {
                election2021Btn.addEventListener('click', () => App.loadElectionResults('2021'));
            }

            // Add election toggle listeners
            if (this.elements.toggle2019Btn) {
                this.elements.toggle2019Btn.addEventListener('click', () => App.toggleElectionYear('2019'));
            }
            if (this.elements.toggle2021Btn) {
                this.elements.toggle2021Btn.addEventListener('click', () => App.toggleElectionYear('2021'));
            }
            if (this.elements.changeElectionBtn) {
                this.elements.changeElectionBtn.addEventListener('click', () => App.returnToWelcome());
            }

            // Add view level toggle listeners
            if (this.elements.toggleRidingViewBtn) {
                this.elements.toggleRidingViewBtn.addEventListener('click', () => App.toggleViewLevel('riding'));
            }
            if (this.elements.togglePollViewBtn) {
                this.elements.togglePollViewBtn.addEventListener('click', () => App.toggleViewLevel('poll'));
            }
            if (this.elements.toggleAdvViewBtn) {
                this.elements.toggleAdvViewBtn.addEventListener('click', () => App.toggleViewLevel('advance'));
            }

            // Add info panel close listener
            if (this.elements.infoPanelClose) {
                this.elements.infoPanelClose.addEventListener('click', () => this.hideElectionInfo());
            }

            // Add Poll View button listeners
            if (this.elements.viewPollComparisonBtn) {
                this.elements.viewPollComparisonBtn.addEventListener('click', () => App.showPollViewSelector());
            }
            if (this.elements.backToWelcomeBtn) {
                this.elements.backToWelcomeBtn.addEventListener('click', () => App.returnToWelcome());
            }
            if (this.elements.changePollProvinceBtn) {
                this.elements.changePollProvinceBtn.addEventListener('click', () => App.showPollViewSelector());
            }
            if (this.elements.pollToggle2019Btn) {
                this.elements.pollToggle2019Btn.addEventListener('click', () => App.togglePollViewYear('2019'));
            }
            if (this.elements.pollToggle2021Btn) {
                this.elements.pollToggle2021Btn.addEventListener('click', () => App.togglePollViewYear('2021'));
            }
            if (this.elements.pollToggle2025Btn) {
                this.elements.pollToggle2025Btn.addEventListener('click', () => App.togglePollViewYear('2025'));
            }
            if (this.elements.toggleRidingBoundariesBtn) {
                this.elements.toggleRidingBoundariesBtn.addEventListener('click', () => App.togglePollViewRidingBoundaries());
            }

            // Add Party Analysis button listeners
            if (this.elements.viewPartyAnalysisBtn) {
                this.elements.viewPartyAnalysisBtn.addEventListener('click', () => App.showPartyAnalysisSelector());
            }
            if (this.elements.backToWelcomeFromPartyBtn) {
                this.elements.backToWelcomeFromPartyBtn.addEventListener('click', () => App.returnToWelcome());
            }
            if (this.elements.backToPartyProvinceBtn) {
                this.elements.backToPartyProvinceBtn.addEventListener('click', () => App.showPartyAnalysisSelector());
            }
            if (this.elements.changePartyBtn) {
                this.elements.changePartyBtn.addEventListener('click', () => App.showPartySelection());
            }
            if (this.elements.changePartyProvinceBtn) {
                this.elements.changePartyProvinceBtn.addEventListener('click', () => App.showPartyAnalysisSelector());
            }
            if (this.elements.partyToggle2019Btn) {
                this.elements.partyToggle2019Btn.addEventListener('click', () => App.togglePartyAnalysisYear('2019'));
            }
            if (this.elements.partyToggle2021Btn) {
                this.elements.partyToggle2021Btn.addEventListener('click', () => App.togglePartyAnalysisYear('2021'));
            }

            // Add party button listeners (will be set up when party selection overlay is shown)
            this.setupPartyButtons();

            StateService.subscribe(this.handleStateChange.bind(this));
        },

        setupPartyButtons() {
            const partyButtons = document.querySelectorAll('.party-button');
            console.log("Setting up party buttons, found:", partyButtons.length);
            partyButtons.forEach(button => {
                button.addEventListener('click', () => {
                    const party = button.getAttribute('data-party');
                    const state = StateService.getState();
                    console.log("Party button clicked:", party);
                    console.log("Current state - showingElections:", state.showingElections, "electionMode:", state.electionMode);

                    // Check if we're in unified mode
                    if (state.showingElections && state.electionMode === 'party') {
                        console.log("Calling selectElectionParty");
                        App.selectElectionParty(party);
                    } else {
                        // Old party analysis mode
                        console.log("Calling old selectParty");
                        App.selectParty(party);
                    }
                });
            });
        },

        showElectionInfo() {
            this.elements.electionInfoPanel.classList.remove('hidden');
        },

        hideElectionInfo() {
            this.elements.electionInfoPanel.classList.add('hidden');
        },

        currentChart: null,

        updateElectionInfo(title, content, candidates = null) {
            this.elements.infoPanelTitle.textContent = title;

            // Update the data content
            const dataContainer = document.getElementById('info-panel-data');
            if (dataContainer) {
                dataContainer.innerHTML = content;
            }

            // Create pie chart if we have candidate data
            if (candidates && candidates.length > 0) {
                this.createVoteShareChart(candidates);
            } else {
                // Hide chart if no candidates
                const chartContainer = document.getElementById('info-panel-chart-container');
                if (chartContainer) {
                    chartContainer.classList.add('hidden');
                }
            }

            this.showElectionInfo();
        },

        createVoteShareChart(candidates) {
            const chartContainer = document.getElementById('info-panel-chart-container');
            const canvas = document.getElementById('info-panel-chart');

            if (!canvas || !chartContainer) return;

            // Show chart container
            chartContainer.classList.remove('hidden');

            // Destroy existing chart if any
            if (this.currentChart) {
                this.currentChart.destroy();
                this.currentChart = null;
            }

            // Prepare data for chart
            const labels = candidates.map(c => c.party || c.name);
            const data = candidates.map(c => parseInt(c.votes) || 0);
            const colors = candidates.map(c => {
                const partyColors = {
                    'Liberal': '#DC2626',
                    'Conservative': '#2563EB',
                    'NDP': '#F97316',
                    'Bloc Québécois': '#06B6D4',
                    'Green': '#16A34A',
                    'PPC': '#7C3AED',
                    'Independent': '#6B7280'
                };
                return partyColors[c.party] || '#9CA3AF';
            });

            // Create new chart
            const ctx = canvas.getContext('2d');
            this.currentChart = new Chart(ctx, {
                type: 'pie',
                data: {
                    labels: labels,
                    datasets: [{
                        data: data,
                        backgroundColor: colors,
                        borderColor: '#ffffff',
                        borderWidth: 2
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: true,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: {
                                padding: 10,
                                font: {
                                    size: 11,
                                    family: 'Inter'
                                },
                                color: '#334155'
                            }
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    const label = context.label || '';
                                    const value = context.parsed || 0;
                                    const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                    const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : 0;
                                    return `${label}: ${value.toLocaleString()} votes (${percentage}%)`;
                                }
                            }
                        }
                    }
                }
            });
        },

        handleStateChange(state) {
            // Update Panel
            if (state.isPanelOpen !== this.elements.controlPanel.classList.contains('open')) {
                this.elements.controlPanel.classList.toggle('open', state.isPanelOpen);
            }

            // Show/hide the 'Open Controls' button based on state
            const canShowButton = state.currentProvinceId && !state.isPanelOpen; // <-- ADD THIS LINE
            this.elements.openControlsBtn.classList.toggle('hidden', !canShowButton); // <-- ADD THIS LINE

            // Update Loading Overlay
            if(state.isLoading !== !this.elements.loadingOverlay.classList.contains('hidden')) {
               this.setLoading(state.isLoading, state.loadingMessage);
            }
            // Update Province Display
            if (state.currentProvinceId) {
                this.elements.provinceName.textContent = PROVINCES[state.currentProvinceId].name;
                this.elements.provinceDisplay.classList.remove('hidden');
                if (this.elements.electionDisplay) {
                    this.elements.electionDisplay.classList.add('hidden');
                }
            } else {
                this.elements.provinceDisplay.classList.add('hidden');
            }

            // Update Election Display (OLD - for backward compatibility)
            if (state.showingElections && state.currentElectionYear && this.elements.electionDisplay) {
                if (this.elements.electionYear) {
                    this.elements.electionYear.textContent = `${state.currentElectionYear} Election`;
                }
                this.elements.electionDisplay.classList.remove('hidden');
                if (this.elements.provinceDisplay) {
                    this.elements.provinceDisplay.classList.add('hidden');
                }

                // Update active button state
                if (this.elements.toggle2019Btn) {
                    this.elements.toggle2019Btn.classList.toggle('active', state.currentElectionYear === '2019');
                }
                if (this.elements.toggle2021Btn) {
                    this.elements.toggle2021Btn.classList.toggle('active', state.currentElectionYear === '2021');
                }

                // Show/hide loading state on toggle buttons
                if (state.isTogglingElection) {
                    if (this.elements.toggle2019Btn) {
                        this.elements.toggle2019Btn.disabled = true;
                        this.elements.toggle2019Btn.classList.add('loading');
                    }
                    if (this.elements.toggle2021Btn) {
                        this.elements.toggle2021Btn.disabled = true;
                        this.elements.toggle2021Btn.classList.add('loading');
                    }
                } else {
                    if (this.elements.toggle2019Btn) {
                        this.elements.toggle2019Btn.disabled = false;
                        this.elements.toggle2019Btn.classList.remove('loading');
                    }
                    if (this.elements.toggle2021Btn) {
                        this.elements.toggle2021Btn.disabled = false;
                        this.elements.toggle2021Btn.classList.remove('loading');
                    }
                }

                // Update view level toggle - always visible when showing elections
                const viewLevel = state.currentViewLevel || 'riding';
                if (this.elements.toggleRidingViewBtn) {
                    this.elements.toggleRidingViewBtn.classList.toggle('active', viewLevel === 'riding');
                }
                if (this.elements.togglePollViewBtn) {
                    this.elements.togglePollViewBtn.classList.toggle('active', viewLevel === 'poll');
                    // Disable poll and advance buttons when in riding view (no riding selected yet)
                    this.elements.togglePollViewBtn.disabled = !state.currentRidingNumber;
                    this.elements.togglePollViewBtn.style.opacity = state.currentRidingNumber ? '1' : '0.5';
                }
                if (this.elements.toggleAdvViewBtn) {
                    this.elements.toggleAdvViewBtn.classList.toggle('active', viewLevel === 'advance');
                    this.elements.toggleAdvViewBtn.disabled = !state.currentRidingNumber;
                    this.elements.toggleAdvViewBtn.style.opacity = state.currentRidingNumber ? '1' : '0.5';
                }
            } else {
                if (this.elements.electionDisplay) {
                    this.elements.electionDisplay.classList.add('hidden');
                }
            }

            // Update Poll View Display (OLD - for backward compatibility)
            if (state.showingPollView && state.pollViewProvinceId && this.elements.pollViewDisplay) {
                const province = PROVINCES[state.pollViewProvinceId];
                if (this.elements.pollViewProvinceName) {
                    this.elements.pollViewProvinceName.textContent = `${province.name} Polls`;
                }
                this.elements.pollViewDisplay.classList.remove('hidden');
                if (this.elements.provinceDisplay) {
                    this.elements.provinceDisplay.classList.add('hidden');
                }
                if (this.elements.electionDisplay) {
                    this.elements.electionDisplay.classList.add('hidden');
                }

                // Update active year button
                if (this.elements.pollToggle2019Btn) {
                    this.elements.pollToggle2019Btn.classList.toggle('active', state.pollViewYear === '2019');
                }
                if (this.elements.pollToggle2021Btn) {
                    this.elements.pollToggle2021Btn.classList.toggle('active', state.pollViewYear === '2021');
                }
                if (this.elements.pollToggle2025Btn) {
                    this.elements.pollToggle2025Btn.classList.toggle('active', state.pollViewYear === '2025');
                }

                // Update riding boundaries button text
                if (this.elements.toggleRidingBoundariesBtn) {
                    this.elements.toggleRidingBoundariesBtn.textContent =
                        state.showPollViewRidingBoundaries ? 'Hide Riding Boundaries' : 'Show Riding Boundaries';
                }
            } else {
                if (this.elements.pollViewDisplay) {
                    this.elements.pollViewDisplay.classList.add('hidden');
                }
            }

            // Update Party Analysis Display (OLD - for backward compatibility)
            if (state.showingPartyAnalysis && state.partyAnalysisProvinceId && state.partyAnalysisParty && this.elements.partyAnalysisDisplay) {
                const province = PROVINCES[state.partyAnalysisProvinceId];
                if (this.elements.partyAnalysisInfo) {
                    this.elements.partyAnalysisInfo.textContent = `${state.partyAnalysisParty} - ${province.name}`;
                }
                this.elements.partyAnalysisDisplay.classList.remove('hidden');
                if (this.elements.provinceDisplay) {
                    this.elements.provinceDisplay.classList.add('hidden');
                }
                if (this.elements.electionDisplay) {
                    this.elements.electionDisplay.classList.add('hidden');
                }
                if (this.elements.pollViewDisplay) {
                    this.elements.pollViewDisplay.classList.add('hidden');
                }

                // Update active year button
                if (this.elements.partyToggle2019Btn) {
                    this.elements.partyToggle2019Btn.classList.toggle('active', state.partyAnalysisYear === '2019');
                }
                if (this.elements.partyToggle2021Btn) {
                    this.elements.partyToggle2021Btn.classList.toggle('active', state.partyAnalysisYear === '2021');
                }
            } else {
                if (this.elements.partyAnalysisDisplay) {
                    this.elements.partyAnalysisDisplay.classList.add('hidden');
                }
            }

            // UNIFIED ELECTION CONTROLS
            if (state.showingElections) {
                console.log("State shows elections active, updating UI controls...");
                console.log("Unified controls element:", this.elements.unifiedElectionControls);

                // Show unified controls, hide all old displays
                if (this.elements.unifiedElectionControls) {
                    this.elements.unifiedElectionControls.classList.remove('hidden');
                    console.log("Unified controls should now be visible");
                } else {
                    console.error("Unified election controls element not found!");
                }

                // Hide old displays (with null checks)
                if (this.elements.provinceDisplay) {
                    this.elements.provinceDisplay.classList.add('hidden');
                }
                if (this.elements.electionDisplay) {
                    this.elements.electionDisplay.classList.add('hidden');
                }
                if (this.elements.pollViewDisplay) {
                    this.elements.pollViewDisplay.classList.add('hidden');
                }
                if (this.elements.partyAnalysisDisplay) {
                    this.elements.partyAnalysisDisplay.classList.add('hidden');
                }

                // Update mode buttons
                if (this.elements.modeRidingBtn) {
                    this.elements.modeRidingBtn.classList.toggle('active', state.electionMode === 'riding');
                }
                if (this.elements.modePollBtn) {
                    this.elements.modePollBtn.classList.toggle('active', state.electionMode === 'poll');
                }
                if (this.elements.modePartyBtn) {
                    this.elements.modePartyBtn.classList.toggle('active', state.electionMode === 'party');
                }

                // Update year buttons
                if (this.elements.year2019Btn) {
                    this.elements.year2019Btn.classList.toggle('active', state.electionYear === '2019');
                }
                if (this.elements.year2021Btn) {
                    this.elements.year2021Btn.classList.toggle('active', state.electionYear === '2021');
                }
                if (this.elements.year2025Btn) {
                    this.elements.year2025Btn.classList.toggle('active', state.electionYear === '2025');
                    // Show 2025 button for all modes now that boundaries are available
                    this.elements.year2025Btn.classList.remove('hidden');
                }

                // Disable year buttons while loading
                const yearButtons = [this.elements.year2019Btn, this.elements.year2021Btn, this.elements.year2025Btn];
                yearButtons.forEach(btn => {
                    if (btn) {
                        btn.disabled = state.isTogglingElection;
                        btn.classList.toggle('loading', state.isTogglingElection && btn.classList.contains('active'));
                    }
                });

                // Show/hide province selector group (for poll and party modes)
                const needsProvince = state.electionMode === 'poll' || state.electionMode === 'party';
                if (this.elements.provinceSelectorGroup) {
                    this.elements.provinceSelectorGroup.classList.toggle('hidden', !needsProvince);
                }

                if (needsProvince && state.electionProvinceId && this.elements.selectProvinceBtn) {
                    const province = PROVINCES[state.electionProvinceId];
                    this.elements.selectProvinceBtn.textContent = province.abbr;
                }

                // Show/hide party selector group (only for party mode)
                if (this.elements.partySelectorGroup) {
                    this.elements.partySelectorGroup.classList.toggle('hidden', state.electionMode !== 'party');
                }

                if (state.electionMode === 'party' && state.electionParty && this.elements.selectPartyBtn) {
                    this.elements.selectPartyBtn.textContent = state.electionParty;
                }

            } else {
                this.elements.unifiedElectionControls.classList.add('hidden');
            }

            // Update hierarchical election controls
            this.updateElectionControls();

            // Update Legend
            this.renderLegend(state.currentVisualization);
        },

        renderProvinceSelector() {
            Object.entries(PROVINCES).forEach(([code, { name, abbr }]) => {
                const button = document.createElement('button');
                button.className = 'province-button';
                button.innerHTML = `<div class="abbr">${abbr}</div><div class="name">${name}</div>`;
                button.addEventListener('click', () => App.selectProvince(code));
                this.elements.provinceGrid.appendChild(button);
            });
        },

        populateElectionProvinceDropdown() {
            if (!this.elements.electionProvinceSelect) return;

            // Clear existing options except the first one
            this.elements.electionProvinceSelect.innerHTML = '<option value="">Select Province</option>';

            // Add province options
            Object.entries(PROVINCES).forEach(([code, { name, abbr }]) => {
                const option = document.createElement('option');
                option.value = `${code}|${abbr}`;
                option.textContent = name;
                this.elements.electionProvinceSelect.appendChild(option);
            });
        },

        // UNIFIED ELECTION SELECTORS
        showProvinceSelector(mode) {
            // Clear and populate the unified province grid
            this.elements.electionProvinceGrid.innerHTML = '';

            Object.entries(PROVINCES).forEach(([code, { name, abbr }]) => {
                const button = document.createElement('button');
                button.className = 'province-button';
                button.innerHTML = `<div class="abbr">${abbr}</div><div class="name">${name}</div>`;
                button.addEventListener('click', () => App.selectElectionProvince(code, mode));
                this.elements.electionProvinceGrid.appendChild(button);
            });

            // Update description based on mode
            const description = document.getElementById('province-overlay-description');
            if (description) {
                description.textContent = mode === 'poll'
                    ? 'Choose which province to view poll-level results'
                    : 'Choose which province for party analysis';
            }

            // Show the overlay
            this.elements.electionProvinceOverlay.classList.remove('hidden');
        },

        showPartySelector() {
            // Show the party selection overlay
            this.elements.electionPartyOverlay.classList.remove('hidden');

            // Update description with province name
            const state = StateService.getState();
            const provinceName = PROVINCES[state.electionProvinceId]?.name || '';
            const description = document.getElementById('party-overlay-description');
            if (description) {
                description.textContent = `Analyzing polls in ${provinceName}`;
            }
        },

        // NEW HIERARCHICAL ELECTION SELECTORS
        showElectionProvinceSelector() {
            console.log('showElectionProvinceSelector called');
            console.log('electionProvinceGrid element:', this.elements.electionProvinceGrid);

            // Clear and populate the province grid
            this.elements.electionProvinceGrid.innerHTML = '';

            Object.entries(PROVINCES).forEach(([code, { name, abbr }]) => {
                const button = document.createElement('button');
                button.className = 'province-button';
                button.innerHTML = `<div class="abbr">${abbr}</div><div class="name">${name}</div>`;
                button.addEventListener('click', async () => {
                    console.log('Province button clicked:', code, abbr);
                    try {
                        console.log('About to call App.selectElectionProvince, App is:', typeof App);
                        await App.selectElectionProvince(code, abbr);
                        console.log('App.selectElectionProvince call completed');
                        this.elements.electionProvinceOverlay.classList.add('hidden');
                    } catch (error) {
                        console.error('Error in province button click handler:', error);
                    }
                });
                this.elements.electionProvinceGrid.appendChild(button);
            });

            console.log('Province buttons created:', this.elements.electionProvinceGrid.children.length);

            // Update description
            const election = StateService.getElection();
            const description = document.getElementById('province-overlay-description');
            if (description) {
                if (election.geographicLevel === 'provincial') {
                    description.textContent = 'Select a province to view election data';
                } else if (election.geographicLevel === 'riding') {
                    description.textContent = 'Select a province first, then click a riding on the map';
                }
            }

            // Show the overlay
            this.elements.electionProvinceOverlay.classList.remove('hidden');
        },

        showElectionPartySelector() {
            // Show the party selection overlay
            this.elements.electionPartyOverlay.classList.remove('hidden');

            // Wire up party buttons
            const partyButtons = this.elements.electionPartyOverlay.querySelectorAll('.party-button');
            partyButtons.forEach(button => {
                const party = button.getAttribute('data-party');
                button.onclick = () => {
                    App.selectPartyFilter(party);
                    this.elements.electionPartyOverlay.classList.add('hidden');
                };
            });
        },

        // Update election controls UI based on current state
        updateElectionControls() {
            const election = StateService.getElection();

            if (!election.active) {
                this.elements.unifiedElectionControls?.classList.add('hidden');
                return;
            }

            // Show controls
            this.elements.unifiedElectionControls?.classList.remove('hidden');

            // Update geographic level buttons
            this.elements.geoNationalBtn?.classList.toggle('active', election.geographicLevel === 'national');
            this.elements.geoProvincialBtn?.classList.toggle('active', election.geographicLevel === 'provincial');
            this.elements.geoRidingBtn?.classList.toggle('active', election.geographicLevel === 'riding');

            // Show/hide and update province context
            const needsProvince = election.geographicLevel === 'provincial' || election.geographicLevel === 'riding';
            this.elements.provinceContextGroup?.classList.toggle('hidden', !needsProvince);

            if (needsProvince && this.elements.electionProvinceSelect) {
                if (election.provinceId) {
                    // Set the dropdown to the selected province
                    const value = `${election.provinceId}|${election.provinceAbbr}`;
                    this.elements.electionProvinceSelect.value = value;
                } else {
                    // Reset to default
                    this.elements.electionProvinceSelect.value = '';
                }
            }

            // Show/hide riding context
            const needsRiding = election.geographicLevel === 'riding';
            this.elements.ridingContextGroup?.classList.toggle('hidden', !needsRiding);

            if (needsRiding && this.elements.electionRidingSelect) {
                // Populate riding dropdown if province is selected
                if (election.provinceId && !election.ridingNumber) {
                    this.populateRidingDropdown(election.provinceId, election.year);
                }

                // Set the dropdown to the selected riding
                if (election.ridingNumber) {
                    const value = `${election.ridingNumber}|${election.ridingName}`;
                    this.elements.electionRidingSelect.value = value;
                } else {
                    this.elements.electionRidingSelect.value = '';
                }
            }

            // Update unit display buttons
            this.elements.unitRidingBtn?.classList.toggle('active', election.unitDisplay === 'riding');
            this.elements.unitPollBtn?.classList.toggle('active', election.unitDisplay === 'poll');
            this.elements.unitAdvanceBtn?.classList.toggle('active', election.unitDisplay === 'advance');

            // Enable/disable unit display buttons based on geographic level
            const canShowPolls = election.geographicLevel !== 'national';
            this.elements.unitPollBtn?.toggleAttribute('disabled', !canShowPolls);
            this.elements.unitAdvanceBtn?.toggleAttribute('disabled', !canShowPolls);

            // Update year buttons
            this.elements.year2019Btn?.classList.toggle('active', election.year === '2019');
            this.elements.year2021Btn?.classList.toggle('active', election.year === '2021');
            this.elements.year2025Btn?.classList.toggle('active', election.year === '2025');

            // Update party filter dropdown
            if (this.elements.partyFilterSelect) {
                this.elements.partyFilterSelect.value = election.partyFilter;
            }

            // Show/hide party scale toggle based on whether a party is selected
            const showScaleToggle = election.partyFilter !== 'all';
            this.elements.partyScaleGroup?.classList.toggle('hidden', !showScaleToggle);

            // Update party scale buttons
            if (showScaleToggle) {
                this.elements.scaleAbsoluteBtn?.classList.toggle('active', election.partyScaleType === 'absolute');
                this.elements.scaleRelativeBtn?.classList.toggle('active', election.partyScaleType === 'relative');
            }
        },

        async populateRidingDropdown(provinceId, year) {
            if (!this.elements.electionRidingSelect) return;

            // Clear existing options except the first one
            this.elements.electionRidingSelect.innerHTML = '<option value="">Select Riding</option>';

            try {
                // Load riding data for the selected year
                const ridingDataUrl = `election_boundaries_19-25/${year}_boundaries/geojson/${year}_riding_with_results_min.json`;
                const ridingData = await DataService.fetchGeoJSON(ridingDataUrl);

                // Filter ridings by province and create options
                const ridings = ridingData.features
                    .filter(f => {
                        const fedNum = f.properties.FED_NUM || f.properties.FEDNUM;
                        const ridingProvinceId = Math.floor(fedNum / 1000);
                        return ridingProvinceId === parseInt(provinceId);
                    })
                    .sort((a, b) => {
                        const nameA = a.properties.ED_NAMEE || a.properties.FEDENAME || '';
                        const nameB = b.properties.ED_NAMEE || b.properties.FEDENAME || '';
                        return nameA.localeCompare(nameB);
                    });

                ridings.forEach(feature => {
                    const fedNum = feature.properties.FED_NUM || feature.properties.FEDNUM;
                    const ridingName = feature.properties.ED_NAMEE || feature.properties.FEDENAME || `Riding ${fedNum}`;
                    const option = document.createElement('option');
                    option.value = `${fedNum}|${ridingName}`;
                    option.textContent = `${ridingName} (${fedNum})`;
                    this.elements.electionRidingSelect.appendChild(option);
                });
            } catch (error) {
                console.error('Failed to populate riding dropdown:', error);
            }
        },

        // OLD SELECTORS (keeping for now)
        renderPollProvinceSelector() {
            // Clear existing grid
            this.elements.pollProvinceGrid.innerHTML = '';

            Object.entries(PROVINCES).forEach(([code, { name, abbr }]) => {
                const button = document.createElement('button');
                button.className = 'province-button';
                button.innerHTML = `<div class="abbr">${abbr}</div><div class="name">${name}</div>`;
                button.addEventListener('click', () => App.selectPollProvince(code));
                this.elements.pollProvinceGrid.appendChild(button);
            });
        },

        renderPartyProvinceSelector() {
            // Clear existing grid
            this.elements.partyProvinceGrid.innerHTML = '';

            Object.entries(PROVINCES).forEach(([code, { name, abbr }]) => {
                const button = document.createElement('button');
                button.className = 'province-button';
                button.innerHTML = `<div class="abbr">${abbr}</div><div class="name">${name}</div>`;
                button.addEventListener('click', () => App.selectPartyProvince(code));
                this.elements.partyProvinceGrid.appendChild(button);
            });
        },

        setPanelOpen(isOpen) {
            StateService.setState({ isPanelOpen: isOpen });
        },
        
        setLoading(isLoading, message = '') {
            this.elements.loadingText.textContent = message;
            this.elements.loadingOverlay.classList.toggle('hidden', !isLoading);
        },

        showWelcome(isVisible) {
            this.elements.welcomeOverlay.classList.toggle('hidden', !isVisible);
        },
        
        resetToWelcome() {
            MapService.clearLayers();
            MapService.map.setView([56.1304, -106.3468], 4);
            this.showWelcome(true);
            this.setPanelOpen(false);
            // Hide poll view and party analysis overlays if visible
            this.elements.pollViewOverlay.classList.add('hidden');
            this.elements.partyAnalysisOverlay.classList.add('hidden');
            this.elements.partySelectionOverlay.classList.add('hidden');
            StateService.setState({ 
                currentProvinceId: null, 
                provinceGeoData: null, 
                provinceCensusData: null, 
                currentVisualization: null,
                currentBoundaryType: 'DA',
                showFederalOverlay: false
            });
            
            // Reset UI controls
            const boundaryDA = document.getElementById('boundaryDA');
            if (boundaryDA) boundaryDA.checked = true;
            const federalToggle = document.getElementById('federalBoundariesToggle');
            if (federalToggle) federalToggle.checked = false;
        },
        
        renderControls(characteristicGroups) {
            this.elements.controlsContainer.innerHTML = '';

            const html = `
                <div class="form-section">
                    <div class="boundary-type-section">
                        <label class="form-label">Boundary Type</label>
                        <div class="radio-group">
                            <input type="radio" id="boundaryDA" name="boundaryType" value="DA" class="radio-input" checked>
                            <label for="boundaryDA" class="radio-label">Dissemination Areas</label>
                            <input type="radio" id="boundaryFederal" name="boundaryType" value="Federal" class="radio-input">
                            <label for="boundaryFederal" class="radio-label">Federal Electoral</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="characteristicGroupSelect">Characteristic Group</label>
                        <select id="characteristicGroupSelect" class="form-select">
                            <option value="">Select a group...</option>
                            ${[...characteristicGroups.keys()].map(groupId => `<option value="${groupId}">${this.getGroupName(groupId)}</option>`).join('')}
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="characteristicSelect">Specific Characteristic</label>
                        <select id="characteristicSelect" class="form-select" disabled><option>First select a group...</option></select>
                    </div>
                </div>
                <div class="form-section">
                    <div class="form-group">
                        <label class="form-label">Display Type</label>
                        <div class="radio-group">
                            <input type="radio" id="dataTypePercentage" name="dataType" value="Percentage" class="radio-input" checked><label for="dataTypePercentage" class="radio-label">Percentage</label>
                            <input type="radio" id="dataTypeTotal" name="dataType" value="Total" class="radio-input"><label for="dataTypeTotal" class="radio-label">Total Count</label>
                        </div>
                    </div>
                </div>
                <button id="renderMapButton" class="btn btn-primary">Generate Visualization</button>
                <div class="form-overlay-group" id="federalOverlayGroup">
                    <label class="checkbox-label">
                        <input type="checkbox" id="federalBoundariesToggle" class="checkbox-input">
                        Show Federal Electoral Boundaries
                    </label>
                    <p class="form-help">Display federal riding boundaries over dissemination areas</p>
                </div>
            `;
            this.elements.controlsContainer.innerHTML = html;
            
            // Event listeners
            document.getElementById('characteristicGroupSelect').addEventListener('change', e => this.updateCharacteristicOptions(e.target.value));
            document.getElementById('characteristicSelect').addEventListener('change', e => {
                if (e.target.value) {
                    this.updateDisplayTypeOptions(e.target.value);
                }
            });
            document.getElementById('renderMapButton').addEventListener('click', e => App.generateVisualization(e.currentTarget));
            document.getElementById('federalBoundariesToggle').addEventListener('change', e => App.toggleFederalOverlay(e.target.checked));
            
            // Boundary type change handlers
            document.querySelectorAll('input[name="boundaryType"]').forEach(radio => {
                radio.addEventListener('change', async (e) => {
                    const newBoundaryType = e.target.value;
                    StateService.setState({ currentBoundaryType: newBoundaryType });
                    
                    // Hide federal overlay option when viewing federal boundaries
                    document.getElementById('federalOverlayGroup').style.display = 
                        newBoundaryType === 'Federal' ? 'none' : 'block';
                    
                    // Load federal data if switching to federal and not loaded
                    if (newBoundaryType === 'Federal' && !StateService.getState().hasLoadedFederalData) {
                        await App.loadFederalData();
                    }
                    
                    // Update boundaries display
                    await App.updateBoundaryDisplay();
                });
            });
        },

        getGroupName(groupId) {
             const names = {1:'Age', 2:'Housing', 3:'Income', 4:'Language', 5:'Ethnicity', 6:'Religion', 7:'Education', 8:'Commute'};
             return names[groupId] || `Group ${groupId}`;
        },

        updateCharacteristicOptions(groupId) {
            const select = document.getElementById('characteristicSelect');
            select.innerHTML = '';
            if (!groupId) {
                select.disabled = true;
                select.innerHTML = '<option>First select a group...</option>';
                return;
            }
            
            const { characteristicGroups } = StateService.getState();
            const characteristics = characteristicGroups.get(parseInt(groupId));
            
            select.innerHTML = '<option value="">Select a characteristic...</option>';
            if (characteristics) {
                characteristics.forEach((name, id) => {
                    select.innerHTML += `<option value="${id}">${name}</option>`;
                });
                select.disabled = false;
            } else {
                select.disabled = true;
            }
        },
        
        isAverageCharacteristic(characteristicName) {
            if (!characteristicName) return false;
            const lowerName = characteristicName.toLowerCase();
            return lowerName.includes('average') || lowerName.includes('median');
        },
        
        updateDisplayTypeOptions(characteristicId) {
            const { characteristicGroups } = StateService.getState();
            let characteristicName = '';
            
            // Find the characteristic name
            characteristicGroups.forEach((group) => {
                if (group.has(parseInt(characteristicId))) {
                    characteristicName = group.get(parseInt(characteristicId));
                }
            });
            
            const displayTypeSection = document.querySelector('.form-section:nth-child(2) .form-group');
            const isAverage = this.isAverageCharacteristic(characteristicName);
            
            if (isAverage) {
                // Only show Total Count option for averages and medians
                displayTypeSection.innerHTML = `
                    <label class="form-label">Display Type</label>
                    <div class="radio-group">
                        <input type="radio" id="dataTypeTotal" name="dataType" value="Total" class="radio-input" checked>
                        <label for="dataTypeTotal" class="radio-label">Total Count</label>
                    </div>
                `;
            } else {
                // Show both options for non-average characteristics
                displayTypeSection.innerHTML = `
                    <label class="form-label">Display Type</label>
                    <div class="radio-group">
                        <input type="radio" id="dataTypePercentage" name="dataType" value="Percentage" class="radio-input" checked>
                        <label for="dataTypePercentage" class="radio-label">Percentage</label>
                        <input type="radio" id="dataTypeTotal" name="dataType" value="Total" class="radio-input">
                        <label for="dataTypeTotal" class="radio-label">Total Count</label>
                    </div>
                `;
            }
        },
        

        setButtonLoading(button, isLoading) {
            button.disabled = isLoading;
            if (isLoading) {
                button.innerHTML = '<div class="spinner"></div><span>Generating...</span>';
            } else {
                button.textContent = 'Generate Visualization';
            }
        },
        
        renderLegend(vizData) {
            if (!vizData) {
                this.elements.legendWrapper.classList.remove('visible');
                return;
            }

            const { characteristicName, dataType, minVal, maxVal, boundaryType } = vizData;
            const format = v => dataType === 'Percentage' ? `${v.toFixed(1)}%` : v.toLocaleString();
            
            // Use the same palette as in the new getColor function
            const palette = ['#f0f921', '#fdb827', '#f58536', '#da5a64', '#b63679', '#8e0186', '#5b007f', '#0d0887'];

            this.elements.legendWrapper.innerHTML = `
                <div class="legend-title">${characteristicName}</div>
                <div class="legend-subtitle">${dataType} by ${boundaryType === 'Federal' ? 'Federal Electoral District' : 'Dissemination Area'}</div>
                <div class="legend-scale" style="background: linear-gradient(to right, ${palette.join(', ')})"></div>
                <div class="legend-labels">
                    <span>${format(minVal)}</span>
                    <span>${format(maxVal)}</span>
                </div>
            `;
            this.elements.legendWrapper.classList.add('visible');
        }
    };

    // --- MAIN APPLICATION LOGIC ---
    const App = {
        async initialize() {
            // Initialize cache service first
            await CacheService.init();

            MapService.initialize();
            UIManager.initialize();
        },
        
        async loadFederalData() {
            const state = StateService.getState();
            if (state.hasLoadedFederalData) return;

            try {
                StateService.setState({ isLoading: true, loadingMessage: 'Loading federal electoral data...' });

                // Load federal boundaries
                const federalGeoData = await DataService.fetchGeoJSON('boundaries/fed_2023_boundaries.geojson');

                // Load federal census data
                const federalCensusData = await DataService.fetchAndParseCSV('output_data/filtered_fed_data.csv');

                StateService.setState({
                    federalGeoData,
                    federalCensusData,
                    hasLoadedFederalData: true,
                    isLoading: false
                });
            } catch (error) {
                console.error("Failed to load federal data:", error);
                StateService.setState({ isLoading: false });
                alert('Failed to load federal electoral data. Please check the console for details.');
            }
        },

        // === HIERARCHICAL ELECTION MODE ===

        // Entry point: Start election mode at national level
        async startElectionMode() {
            try {
                UIManager.showWelcome(false);
                StateService.updateElection({
                    active: true,
                    geographicLevel: 'national',
                    unitDisplay: 'riding',
                    year: '2021',
                    partyFilter: 'all'
                });

                // Initial load - fit bounds to show all of Canada
                await this.loadElectionData(true);

            } catch (error) {
                console.error("Failed to start election mode:", error);
                StateService.resetElection();
                UIManager.showWelcome(true);
                alert('Failed to load election results. Please try again.');
            }
        },

        // Exit election mode and return to welcome screen
        exitElectionMode() {
            MapService.clearLayers();
            StateService.resetElection();
            UIManager.showWelcome(true);
            UIManager.hideElectionInfo();
        },

        // Switch geographic level
        async switchGeographicLevel(level) {
            const election = StateService.getElection();

            if (level === election.geographicLevel) return; // Already at this level

            if (level === 'national') {
                // Go to national view - reset province and riding context
                StateService.updateElection({
                    geographicLevel: 'national',
                    unitDisplay: 'riding', // Force riding display at national
                    provinceId: null,
                    provinceAbbr: null,
                    ridingNumber: null,
                    ridingName: null
                });
                await this.loadElectionData();

            } else if (level === 'provincial') {
                // Need to select a province
                if (election.provinceId) {
                    // Already have a province selected
                    StateService.updateElection({
                        geographicLevel: 'provincial',
                        ridingNumber: null,
                        ridingName: null
                    });
                    await this.loadElectionData();
                } else {
                    // Just set geographic level - user will select from dropdown
                    StateService.updateElection({ geographicLevel: 'provincial' });
                }

            } else if (level === 'riding') {
                // Need to select a province first, then a riding
                if (!election.provinceId) {
                    // Just set geographic level - user needs to select province first
                    StateService.updateElection({ geographicLevel: 'riding' });
                } else if (election.ridingNumber) {
                    // Already have a riding selected, load its data
                    StateService.updateElection({ geographicLevel: 'riding' });
                    await this.loadElectionData();
                } else {
                    // Province selected but no riding - user will select from dropdown
                    StateService.updateElection({ geographicLevel: 'riding' });
                    // The dropdown will be populated by updateElectionControls
                }
            }
        },

        // Select a province for provincial or riding level
        async selectElectionProvince(provinceId, provinceAbbr) {
            const election = StateService.getElection();

            StateService.updateElection({
                provinceId,
                provinceAbbr,
                // Clear riding selection when province changes
                ridingNumber: null,
                ridingName: null
            });

            // If at riding level, repopulate the riding dropdown
            if (election.geographicLevel === 'riding') {
                await UIManager.populateRidingDropdown(provinceId, election.year);
            } else {
                // For provincial level, load the data and fit bounds to new province
                await this.loadElectionData(true);
            }
        },

        // Select a riding (called when user clicks on map)
        async selectElectionRiding(ridingNumber, ridingName) {
            StateService.updateElection({
                ridingNumber,
                ridingName,
                geographicLevel: 'riding'
            });

            await this.loadElectionData();
        },

        // Switch unit display (riding/poll/advance)
        async switchUnitDisplay(unitDisplay) {
            const election = StateService.getElection();

            if (election.geographicLevel === 'national' && unitDisplay !== 'riding') {
                alert('Poll and advance poll views are only available at Provincial or Single Riding levels');
                return;
            }

            StateService.updateElection({ unitDisplay });
            await this.loadElectionData();
        },

        // Switch year
        async switchYear(year) {
            const election = StateService.getElection();
            const oldYear = election.year;

            // Special handling when switching to/from 2025 at riding level
            // because riding boundaries changed between 2021 and 2025
            if (election.geographicLevel === 'riding' && election.ridingNumber) {
                const yearChanged2025 = (oldYear !== '2025' && year === '2025') || (oldYear === '2025' && year !== '2025');

                if (yearChanged2025) {
                    // Reset to provincial level and clear riding selection
                    StateService.updateElection({
                        year,
                        geographicLevel: 'provincial',
                        ridingNumber: null,
                        ridingName: null
                    });

                    // Show alert to inform user
                    alert('Riding boundaries changed in 2025. Please select a riding from the updated boundaries.');

                    // Repopulate riding dropdown with new year's boundaries if needed
                    if (election.provinceId) {
                        await UIManager.populateRidingDropdown(election.provinceId, year);
                    }

                    // Load provincial data
                    await this.loadElectionData();
                    return;
                }
            }

            // For national and provincial levels, or when not crossing 2025 boundary, seamlessly switch years
            StateService.updateElection({ year });
            await this.loadElectionData();
        },

        // Select party filter
        async selectPartyFilter(party) {
            StateService.updateElection({ partyFilter: party });
            await this.loadElectionData();
        },

        // Switch party scale type (absolute vs relative)
        async switchPartyScaleType(scaleType) {
            StateService.updateElection({ partyScaleType: scaleType });
            await this.loadElectionData();
        },

        // Core data loading function - handles all combinations
        async loadElectionData(fitBounds = false) {
            const election = StateService.getElection();

            try {
                let dataUrl = '';
                let data = null;

                // Determine which file to load based on hierarchy
                if (election.geographicLevel === 'national') {
                    // National level - always riding view
                    dataUrl = `election_boundaries_19-25/${election.year}_boundaries/geojson/${election.year}_riding_with_results_min.json`;
                    data = await DataService.fetchGeoJSON(dataUrl);

                } else if (election.geographicLevel === 'provincial') {
                    // Provincial level - can be riding, poll, or advance
                    if (!election.provinceId) {
                        throw new Error('Province not selected');
                    }

                    if (election.unitDisplay === 'riding') {
                        // Load all ridings for this province
                        dataUrl = `election_boundaries_19-25/${election.year}_boundaries/geojson/${election.year}_riding_with_results_min.json`;
                        data = await DataService.fetchGeoJSON(dataUrl);
                        // Filter to province
                        data = this.filterDataByProvince(data, election.provinceId);

                    } else if (election.unitDisplay === 'poll') {
                        // Load poll data for province
                        dataUrl = `election_boundaries_19-25/${election.year}_boundaries/geojson/poll_by_province/${election.provinceId}_${election.provinceAbbr}_${election.year}_poll.json`;
                        data = await DataService.fetchGeoJSON(dataUrl);

                    } else if (election.unitDisplay === 'advance') {
                        // Load advance poll data for province
                        dataUrl = `election_boundaries_19-25/${election.year}_boundaries/geojson/adv_by_province/${election.provinceId}_${election.provinceAbbr}_${election.year}_adv.json`;
                        data = await DataService.fetchGeoJSON(dataUrl);
                    }

                } else if (election.geographicLevel === 'riding') {
                    // Single riding level - can be riding, poll, or advance
                    if (!election.ridingNumber) {
                        throw new Error('Riding not selected');
                    }

                    if (election.unitDisplay === 'riding') {
                        // Load just this one riding
                        dataUrl = `election_boundaries_19-25/${election.year}_boundaries/geojson/${election.year}_riding_with_results_min.json`;
                        data = await DataService.fetchGeoJSON(dataUrl);
                        // Filter to single riding
                        data = this.filterDataByRiding(data, election.ridingNumber);

                    } else if (election.unitDisplay === 'poll') {
                        // Load poll data for this riding
                        dataUrl = `election_boundaries_19-25/${election.year}_boundaries/geojson/poll_by_riding/${election.ridingNumber}_${election.year}_poll.json`;
                        data = await DataService.fetchGeoJSON(dataUrl);

                    } else if (election.unitDisplay === 'advance') {
                        // Load advance poll data for this riding
                        dataUrl = `election_boundaries_19-25/${election.year}_boundaries/geojson/adv_by_riding/${election.ridingNumber}_${election.year}_adv.json`;
                        data = await DataService.fetchGeoJSON(dataUrl);
                    }
                }

                // Store the loaded data
                StateService.updateElection({ data });

                // Render on map (preserving view unless fitBounds is true)
                this.renderElectionData(data, fitBounds);

            } catch (error) {
                console.error("Failed to load election data:", error);
                alert(`Failed to load election data: ${error.message}`);
            }
        },

        // Filter national data to single province
        filterDataByProvince(data, provinceId) {
            return {
                ...data,
                features: data.features.filter(feature => {
                    const fedNum = feature.properties.FED_NUM || feature.properties.FEDNUM;
                    if (!fedNum) return false;
                    const featureProvinceId = fedNum.toString().substring(0, 2);
                    return featureProvinceId === provinceId.toString();
                })
            };
        },

        // Filter national data to single riding
        filterDataByRiding(data, ridingNumber) {
            return {
                ...data,
                features: data.features.filter(feature => {
                    const fedNum = feature.properties.FED_NUM || feature.properties.FEDNUM;
                    return fedNum && fedNum.toString() === ridingNumber.toString();
                })
            };
        },

        // Render election data on map with party filtering
        renderElectionData(data, fitBounds = false) {
            const election = StateService.getElection();

            MapService.clearLayers();

            if (!data || !data.features || data.features.length === 0) {
                console.warn('No election data to render');
                return;
            }

            // Preserve view unless explicitly told to fit bounds (i.e., province change)
            const preserveView = !fitBounds;

            // If party filter is active, modify styling
            if (election.partyFilter !== 'all') {
                MapService.displayElectionResultsWithPartyFilter(data, election.partyFilter, preserveView);
            } else {
                // Normal winner visualization
                MapService.displayElectionResults(data, preserveView);
            }
        },

        // === OLD UNIFIED ELECTION MODE (KEEPING FOR COMPATIBILITY) ===
        async enterElectionMode() {
            // Redirect to new hierarchical mode
            await this.startElectionMode();
        },

        // Switch between riding/poll/party modes
        async switchElectionMode(mode) {
            const state = StateService.getState();

            if (mode === 'riding') {
                // Switch to riding mode
                await this.loadRidingMode(state.electionYear);
            } else if (mode === 'poll') {
                // Show province selector for poll mode
                if (!state.electionProvinceId) {
                    UIManager.showProvinceSelector('poll');
                } else {
                    await this.loadPollMode(state.electionProvinceId, state.electionYear);
                }
            } else if (mode === 'party') {
                // Show province selector, then party selector
                if (!state.electionProvinceId) {
                    UIManager.showProvinceSelector('party');
                } else if (!state.electionParty) {
                    // Set mode to party BEFORE showing party selector
                    StateService.setState({ electionMode: 'party' });
                    UIManager.showPartySelector();
                } else {
                    await this.loadPartyMode(state.electionProvinceId, state.electionParty, state.electionYear);
                }
            }
        },

        // Load riding mode (national view)
        async loadRidingMode(year) {
            try {
                StateService.setState({ isTogglingElection: true });

                const electionData = await DataService.fetchGeoJSON(`election_boundaries_19-25/${year}_boundaries/geojson/${year}_riding_with_results_min.json`);

                StateService.setState({
                    electionMode: 'riding',
                    electionYear: year,
                    electionData,
                    electionProvinceId: null,
                    electionParty: null,
                    currentRidingNumber: null,
                    currentViewLevel: 'riding',
                    isTogglingElection: false
                });

                MapService.displayElectionResults(electionData, true);

            } catch (error) {
                console.error("Failed to load riding mode:", error);
                StateService.setState({ isTogglingElection: false });
                alert(`Failed to load ${year} election results.`);
            }
        },

        // Load poll mode (province-level view)
        async loadPollMode(provinceId, year) {
            try {
                StateService.setState({ isTogglingElection: true });

                const abbr = PROVINCES[provinceId].abbr;
                const cacheKey = `election_boundaries_19-25/${year}_boundaries/geojson/poll_by_province/${provinceId}_${abbr}_${year}_poll.json`;

                let pollData = await CacheService.get(cacheKey);
                if (!pollData) {
                    pollData = await DataService.fetchGeoJSON(cacheKey);
                    await CacheService.set(cacheKey, pollData);
                }

                StateService.setState({
                    electionMode: 'poll',
                    electionYear: year,
                    electionProvinceId: provinceId,
                    electionData: pollData,
                    electionParty: null,
                    isTogglingElection: false
                });

                MapService.displayPollResults(pollData, null, true);

            } catch (error) {
                console.error("Failed to load poll mode:", error);
                StateService.setState({ isTogglingElection: false });
                alert(`Failed to load poll data for ${PROVINCES[provinceId].name}.`);
            }
        },

        // Load party mode (province-level party analysis)
        async loadPartyMode(provinceId, party, year) {
            try {
                StateService.setState({ isTogglingElection: true });

                const abbr = PROVINCES[provinceId].abbr;
                const cacheKey = `election_boundaries_19-25/${year}_boundaries/geojson/poll_by_province/${provinceId}_${abbr}_${year}_poll.json`;

                let pollData = await CacheService.get(cacheKey);
                if (!pollData) {
                    pollData = await DataService.fetchGeoJSON(cacheKey);
                    await CacheService.set(cacheKey, pollData);
                }

                StateService.setState({
                    electionMode: 'party',
                    electionYear: year,
                    electionProvinceId: provinceId,
                    electionParty: party,
                    electionData: pollData,
                    isTogglingElection: false
                });

                MapService.displayPartyVoteShare(pollData, party, true);

            } catch (error) {
                console.error("Failed to load party mode:", error);
                StateService.setState({ isTogglingElection: false });
                alert(`Failed to load party analysis for ${PROVINCES[provinceId].name}.`);
            }
        },

        // Switch election year
        async switchElectionYear(year) {
            const state = StateService.getState();

            if (state.electionMode === 'riding') {
                // Check if we're in drill-down view
                if (state.currentViewLevel === 'poll' && state.currentRidingNumber) {
                    await this.loadRidingPollView(state.currentRidingNumber, year);
                } else if (state.currentViewLevel === 'advance' && state.currentRidingNumber) {
                    await this.loadRidingAdvanceView(state.currentRidingNumber, year);
                } else {
                    await this.loadRidingMode(year);
                }
            } else if (state.electionMode === 'poll') {
                await this.loadPollMode(state.electionProvinceId, year);
            } else if (state.electionMode === 'party') {
                await this.loadPartyMode(state.electionProvinceId, state.electionParty, year);
            }
        },

        // Drill-down views for riding mode
        async loadRidingPollView(ridingNumber, year) {
            try {
                StateService.setState({ isTogglingElection: true });

                const pollData = await DataService.fetchGeoJSON(
                    `election_boundaries_19-25/${year}_boundaries/geojson/poll_by_riding/${ridingNumber}_${year}_poll.json`
                );

                StateService.setState({
                    electionYear: year,
                    currentViewLevel: 'poll',
                    currentRidingNumber: ridingNumber,
                    isTogglingElection: false
                });

                MapService.displayPollResults(pollData, ridingNumber, true);

            } catch (error) {
                console.error("Failed to load poll view:", error);
                StateService.setState({ isTogglingElection: false });
                alert(`Failed to load poll data for riding ${ridingNumber}.`);
            }
        },

        async loadRidingAdvanceView(ridingNumber, year) {
            try {
                StateService.setState({ isTogglingElection: true });

                const advData = await DataService.fetchGeoJSON(
                    `election_boundaries_19-25/${year}_boundaries/geojson/adv_by_riding/${ridingNumber}_${year}_adv.json`
                );

                StateService.setState({
                    electionYear: year,
                    currentViewLevel: 'advance',
                    currentRidingNumber: ridingNumber,
                    isTogglingElection: false
                });

                MapService.displayAdvanceResults(advData, ridingNumber, true);

            } catch (error) {
                console.error("Failed to load advance view:", error);
                StateService.setState({ isTogglingElection: false });
                alert(`Failed to load advance poll data for riding ${ridingNumber}.`);
            }
        },

        // Toggle view level in riding mode (riding/poll/advance)
        async toggleRidingViewLevel(level) {
            const state = StateService.getState();

            if (level === 'riding') {
                await this.loadRidingMode(state.electionYear);
            } else if (level === 'poll' && state.currentRidingNumber) {
                await this.loadRidingPollView(state.currentRidingNumber, state.electionYear);
            } else if (level === 'advance' && state.currentRidingNumber) {
                await this.loadRidingAdvanceView(state.currentRidingNumber, state.electionYear);
            }
        },

        // OLD FUNCTIONS REMOVED - Using new hierarchical election system

        // OLD FUNCTION - KEEPING FOR COMPATIBILITY (will remove later)
        async loadElectionResults(year, isToggle = false) {
            try {
                // For toggles, show inline loading; for initial load, show full screen loading
                if (isToggle) {
                    StateService.setState({ isTogglingElection: true });
                } else {
                    StateService.setState({ isLoading: true, loadingMessage: `Loading ${year} election results...` });
                    UIManager.showWelcome(false);
                }

                // Load the election data with boundaries
                const electionData = await DataService.fetchGeoJSON(`election_boundaries_19-25/${year}_boundaries/geojson/${year}_riding_with_results_min.json`);

                StateService.setState({
                    electionData,
                    currentElectionYear: year,
                    currentViewLevel: 'riding',
                    currentRidingNumber: isToggle ? StateService.getState().currentRidingNumber : null,
                    isLoading: false,
                    isTogglingElection: false,
                    showingElections: true
                });

                // Display the election results on the map, preserving view if toggling
                MapService.displayElectionResults(electionData, isToggle);

            } catch (error) {
                console.error("Failed to load election data:", error);
                StateService.setState({ isLoading: false, isTogglingElection: false });
                if (!isToggle) {
                    UIManager.showWelcome(true);
                }
                alert(`Failed to load ${year} election results. Please check the console for details.`);
            }
        },

        async toggleElectionYear(year) {
            const state = StateService.getState();

            // Check if we're in poll view
            if (state.currentViewLevel === 'poll' && state.currentRidingNumber) {
                // Reload poll data for the same riding in the new year
                try {
                    StateService.setState({
                        isTogglingElection: true,
                        currentElectionYear: year
                    });

                    // Load poll data for this riding in the new year
                    const pollData = await DataService.fetchGeoJSON(
                        `election_boundaries_19-25/${year}_boundaries/geojson/poll_by_riding/${state.currentRidingNumber}_${year}_poll.json`
                    );

                    StateService.setState({
                        isTogglingElection: false
                    });

                    // Display poll results, preserving view
                    MapService.displayPollResults(pollData, state.currentRidingNumber, true);

                } catch (error) {
                    console.error("Failed to load poll data for new year:", error);
                    StateService.setState({ isTogglingElection: false });
                    alert(`Failed to load ${year} poll data. Please try again.`);
                }
            } else if (state.currentViewLevel === 'advance' && state.currentRidingNumber) {
                // Reload advance poll data for the same riding in the new year
                try {
                    StateService.setState({
                        isTogglingElection: true,
                        currentElectionYear: year
                    });

                    // Load advance poll data for this riding in the new year
                    const advData = await DataService.fetchGeoJSON(
                        `election_boundaries_19-25/${year}_boundaries/geojson/adv_by_riding/${state.currentRidingNumber}_${year}_adv.json`
                    );

                    StateService.setState({
                        isTogglingElection: false
                    });

                    // Display advance results, preserving view
                    MapService.displayAdvanceResults(advData, state.currentRidingNumber, true);

                } catch (error) {
                    console.error("Failed to load advance poll data for new year:", error);
                    StateService.setState({ isTogglingElection: false });
                    alert(`Failed to load ${year} advance poll data. Please try again.`);
                }
            } else {
                // We're in riding view, use the normal toggle
                await this.loadElectionResults(year, true);
            }
        },

        async viewPollByPoll(ridingNumber) {
            try {
                const state = StateService.getState();
                const year = state.currentElectionYear;

                StateService.setState({ isTogglingElection: true });

                // Close any open popups
                MapService.map.closePopup();

                // Load poll data for this riding
                const pollData = await DataService.fetchGeoJSON(
                    `election_boundaries_19-25/${year}_boundaries/geojson/poll_by_riding/${ridingNumber}_${year}_poll.json`
                );

                StateService.setState({
                    currentViewLevel: 'poll',
                    currentRidingNumber: ridingNumber,
                    isTogglingElection: false
                });

                MapService.displayPollResults(pollData, ridingNumber);

            } catch (error) {
                console.error("Failed to load poll data:", error);
                StateService.setState({ isTogglingElection: false });
                alert('Failed to load poll-by-poll data. Please try again.');
            }
        },

        async viewAdvancePolls(ridingNumber) {
            try {
                const state = StateService.getState();
                const year = state.currentElectionYear;

                StateService.setState({ isTogglingElection: true });

                // Close any open popups
                MapService.map.closePopup();

                // Load advance poll data for this riding
                const advData = await DataService.fetchGeoJSON(
                    `election_boundaries_19-25/${year}_boundaries/geojson/adv_by_riding/${ridingNumber}_${year}_adv.json`
                );

                StateService.setState({
                    currentViewLevel: 'advance',
                    currentRidingNumber: ridingNumber,
                    isTogglingElection: false
                });

                MapService.displayAdvanceResults(advData, ridingNumber);

            } catch (error) {
                console.error("Failed to load advance poll data:", error);
                StateService.setState({ isTogglingElection: false });
                alert('Failed to load advance poll data. Please try again.');
            }
        },

        async toggleViewLevel(level) {
            const state = StateService.getState();

            if (level === 'riding') {
                // Switch back to riding view
                await this.loadElectionResults(state.currentElectionYear, true);
                StateService.setState({ currentViewLevel: 'riding', currentRidingNumber: null });
            } else if (level === 'poll' && state.currentRidingNumber) {
                // Re-load poll view
                await this.viewPollByPoll(state.currentRidingNumber);
            } else if (level === 'advance' && state.currentRidingNumber) {
                // Load advance poll view
                await this.viewAdvancePolls(state.currentRidingNumber);
            }
        },

        returnToWelcome() {
            MapService.clearLayers();
            StateService.setState({
                currentProvinceId: null,
                currentElectionYear: null,
                showingElections: false,
                currentVisualization: null,
                currentRidingNumber: null,
                currentViewLevel: 'riding',
                // Reset unified election state
                electionMode: 'riding',
                electionYear: '2021',
                electionProvinceId: null,
                electionParty: null,
                electionData: null,
                // Reset poll view state
                showingPollView: false,
                pollViewProvinceId: null,
                pollViewYear: '2021',
                pollViewData: null,
                showPollViewRidingBoundaries: false,
                pollViewRidingData: null,
                // Reset party analysis state
                showingPartyAnalysis: false,
                partyAnalysisProvinceId: null,
                partyAnalysisYear: '2021',
                partyAnalysisParty: null,
                partyAnalysisData: null
            });
            UIManager.hideElectionInfo();
            UIManager.resetToWelcome();
        },
        
        async selectProvince(provinceId) {
            StateService.setState({ isLoading: true, loadingMessage: `Loading ${PROVINCES[provinceId].name}...` });
            UIManager.showWelcome(false);
            UIManager.setPanelOpen(true);

            try {
                const abbr = PROVINCES[provinceId].abbr;
                const geoUrl = `new_boundaries/provinces/da_${provinceId}_${abbr}_wgs84.geojson`;
                const censusUrl = `output_data/provinces/da_${provinceId}_${abbr}_data.csv`;
                
                const [geoData, censusData] = await Promise.all([
                    DataService.fetchGeoJSON(geoUrl),
                    DataService.fetchAndParseCSV(censusUrl)
                ]);
                const characteristicGroups = DataService.organizeCensusData(censusData);
                
                StateService.setState({
                    currentProvinceId: provinceId,
                    provinceGeoData: geoData,
                    provinceCensusData: censusData,
                    characteristicGroups: characteristicGroups,
                    isLoading: false
                });

                MapService.displayBoundaries(geoData, 'DA');
                UIManager.renderControls(characteristicGroups);

            } catch (error) {
                console.error("Failed to load province data:", error);
                StateService.setState({ isLoading: false });
                UIManager.resetToWelcome();
                alert(`Error: Could not load data for ${PROVINCES[provinceId].name}. Please check the console.`);
            }
        },
        
        async updateBoundaryDisplay() {
            const { currentBoundaryType, provinceGeoData, federalGeoData, currentVisualization } = StateService.getState();
            
            if (currentBoundaryType === 'Federal') {
                if (!federalGeoData) {
                    await this.loadFederalData();
                }
                const geoData = StateService.getState().federalGeoData;
                if (geoData) {
                    MapService.displayBoundaries(geoData, 'Federal');
                }
            } else {
                if (provinceGeoData) {
                    MapService.displayBoundaries(provinceGeoData, 'DA');
                }
            }
            
            // Reapply visualization if one exists
            if (currentVisualization) {
                const geoData = currentBoundaryType === 'Federal' ? 
                    StateService.getState().federalGeoData : 
                    StateService.getState().provinceGeoData;
                if (geoData) {
                    MapService.renderChoropleth(geoData, currentVisualization);
                }
            }
        },
        
        async generateVisualization(button) {
            const { currentBoundaryType } = StateService.getState();
            const charId = document.getElementById('characteristicSelect').value;
            const dataType = document.querySelector('input[name="dataType"]:checked').value;
            
            if (!charId) {
                alert('Please select a specific characteristic.');
                return;
            }

            UIManager.setButtonLoading(button, true);

            try {
                // Load federal data if needed
                if (currentBoundaryType === 'Federal' && !StateService.getState().hasLoadedFederalData) {
                    await this.loadFederalData();
                }

                // Simulate processing time for better UX
                await new Promise(resolve => setTimeout(resolve, 300));

                const vizData = DataService.calculateVisualizationData(charId, dataType, currentBoundaryType);
                const { provinceGeoData, federalGeoData } = StateService.getState();
                const geoData = currentBoundaryType === 'Federal' ? federalGeoData : provinceGeoData;
                
                if (!geoData) {
                    throw new Error(`No ${currentBoundaryType} boundary data available`);
                }
                
                StateService.setState({ currentVisualization: vizData });
                MapService.renderChoropleth(geoData, vizData);
                
                // Reapply federal overlay if it was on
                const { showFederalOverlay } = StateService.getState();
                if (showFederalOverlay && currentBoundaryType === 'DA' && federalGeoData) {
                    MapService.displayFederalOverlay(federalGeoData);
                }
            } catch (error) {
                console.error('Visualization error:', error);
                alert(`Failed to generate visualization: ${error.message}`);
            } finally {
                UIManager.setButtonLoading(button, false);
            }
        },
        
        async toggleFederalOverlay(show) {
            StateService.setState({ showFederalOverlay: show });

            if (show) {
                // Load federal data if not already loaded
                if (!StateService.getState().hasLoadedFederalData) {
                    await this.loadFederalData();
                }

                const { federalGeoData } = StateService.getState();
                if (federalGeoData) {
                    MapService.displayFederalOverlay(federalGeoData);
                }
            } else {
                MapService.removeFederalOverlay();
            }
        },

        // --- POLL VIEW METHODS ---
        showPollViewSelector() {
            // Hide welcome overlay, show poll view selector
            UIManager.elements.welcomeOverlay.classList.add('hidden');
            UIManager.elements.pollViewOverlay.classList.remove('hidden');
            UIManager.renderPollProvinceSelector();
        },

        async selectPollProvince(provinceId) {
            // Hide poll province selector
            UIManager.elements.pollViewOverlay.classList.add('hidden');

            // Clear any existing riding boundaries when changing province
            MapService.removePollViewRidingBoundaries();
            StateService.setState({
                showPollViewRidingBoundaries: false,
                pollViewRidingData: null
            });

            // Load initial year (2021 by default)
            await this.loadPollViewData(provinceId, '2021');
        },

        async loadPollViewData(provinceId, year, isToggling = false) {
            const province = PROVINCES[provinceId];

            // Only show loading screen on initial province load, not when toggling years
            if (!isToggling) {
                StateService.setState({
                    isLoading: true,
                    loadingMessage: `Loading ${province.name} polls for ${year}...`
                });
            }

            try {
                const pollFilePath = `election_boundaries_19-25/${year}_boundaries/geojson/poll_by_province/${provinceId}_${province.abbr}_${year}_poll.json`;

                // Try cache first
                let pollData = await CacheService.get(pollFilePath);

                if (!pollData) {
                    const response = await fetch(pollFilePath);
                    if (!response.ok) throw new Error(`Failed to load poll data for ${province.name}`);
                    pollData = await response.json();
                    await CacheService.set(pollFilePath, pollData);
                }

                StateService.setState({
                    pollViewProvinceId: provinceId,
                    pollViewYear: year,
                    pollViewData: pollData,
                    showingPollView: true,
                    isLoading: false
                });

                // Display on map (pass null for ridingNumber since this is province-wide)
                // Preserve view when toggling between years
                MapService.displayPollResults(pollData, null, isToggling);

            } catch (error) {
                console.error('Error loading poll view data:', error);
                StateService.setState({ isLoading: false });
                alert(`Failed to load poll data: ${error.message}`);
            }
        },

        async togglePollViewYear(year) {
            const state = StateService.getState();
            if (!state.pollViewProvinceId) return;

            // Reload data for new year without loading screen
            await this.loadPollViewData(state.pollViewProvinceId, year, true);

            // If riding boundaries are showing, reload them for the new year
            if (state.showPollViewRidingBoundaries) {
                await this.loadPollViewRidingBoundaries(state.pollViewProvinceId, year);
            }
        },

        async togglePollViewRidingBoundaries() {
            const state = StateService.getState();
            const newState = !state.showPollViewRidingBoundaries;

            if (newState) {
                // Show boundaries - load and display
                await this.loadPollViewRidingBoundaries(state.pollViewProvinceId, state.pollViewYear);
            } else {
                // Hide boundaries
                MapService.removePollViewRidingBoundaries();
                StateService.setState({ showPollViewRidingBoundaries: false });
            }
        },

        async loadPollViewRidingBoundaries(provinceId, year) {
            try {
                const ridingFilePath = `election_boundaries_19-25/${year}_boundaries/geojson/${year}_riding_wgs84.json`;

                // Try cache first
                let ridingData = await CacheService.get(ridingFilePath);

                if (!ridingData) {
                    const response = await fetch(ridingFilePath);
                    if (!response.ok) throw new Error(`Failed to load riding boundaries for ${year}`);
                    ridingData = await response.json();
                    await CacheService.set(ridingFilePath, ridingData);
                }

                // Filter ridings to only show those in this province
                const provinceRidings = {
                    type: 'FeatureCollection',
                    features: ridingData.features.filter(feature => {
                        const fedNum = feature.properties.FED_NUM || feature.properties.FEDNUM;
                        const ridingProvince = Math.floor(fedNum / 1000);
                        return ridingProvince === parseInt(provinceId);
                    })
                };

                StateService.setState({
                    showPollViewRidingBoundaries: true,
                    pollViewRidingData: provinceRidings
                });

                MapService.displayPollViewRidingBoundaries(provinceRidings);

            } catch (error) {
                console.error('Error loading riding boundaries:', error);
                alert(`Failed to load riding boundaries: ${error.message}`);
                StateService.setState({ showPollViewRidingBoundaries: false });
            }
        },

        // --- PARTY ANALYSIS METHODS ---
        showPartyAnalysisSelector() {
            // Hide welcome overlay, show party analysis province selector
            UIManager.elements.welcomeOverlay.classList.add('hidden');
            UIManager.elements.partyAnalysisOverlay.classList.remove('hidden');
            UIManager.renderPartyProvinceSelector();
        },

        async selectPartyProvince(provinceId) {
            const province = PROVINCES[provinceId];

            // Store the selected province temporarily
            StateService.setState({
                partyAnalysisProvinceId: provinceId
            });

            // Hide province selector, show party selection
            UIManager.elements.partyAnalysisOverlay.classList.add('hidden');
            UIManager.elements.partySelectionOverlay.classList.remove('hidden');

            // Update the party selection overlay text
            UIManager.elements.partySelectionProvinceName.textContent =
                `Analyzing ${province.name} - Choose which party's vote share to visualize`;
        },

        async selectParty(party) {
            const state = StateService.getState();
            const provinceId = state.partyAnalysisProvinceId;

            // Hide party selection overlay
            UIManager.elements.partySelectionOverlay.classList.add('hidden');

            // Load party analysis data for default year (2021)
            await this.loadPartyAnalysisData(provinceId, party, '2021');
        },

        showPartySelection() {
            // Show party selection overlay again
            UIManager.elements.partySelectionOverlay.classList.remove('hidden');
        },

        async loadPartyAnalysisData(provinceId, party, year, isToggling = false) {
            const province = PROVINCES[provinceId];

            // Only show loading screen on initial load, not when toggling
            if (!isToggling) {
                StateService.setState({
                    isLoading: true,
                    loadingMessage: `Loading ${party} vote share for ${province.name}...`
                });
            }

            try {
                const pollFilePath = `election_boundaries_19-25/${year}_boundaries/geojson/poll_by_province/${provinceId}_${province.abbr}_${year}_poll.json`;

                // Try cache first
                let pollData = await CacheService.get(pollFilePath);

                if (!pollData) {
                    const response = await fetch(pollFilePath);
                    if (!response.ok) throw new Error(`Failed to load poll data for ${province.name}`);
                    pollData = await response.json();
                    await CacheService.set(pollFilePath, pollData);
                }

                StateService.setState({
                    partyAnalysisProvinceId: provinceId,
                    partyAnalysisYear: year,
                    partyAnalysisParty: party,
                    partyAnalysisData: pollData,
                    showingPartyAnalysis: true,
                    isLoading: false
                });

                // Display on map with party vote share visualization
                // Preserve view when toggling
                MapService.displayPartyVoteShare(pollData, party, isToggling);

            } catch (error) {
                console.error('Error loading party analysis data:', error);
                StateService.setState({ isLoading: false });
                alert(`Failed to load party analysis data: ${error.message}`);
            }
        },

        async togglePartyAnalysisYear(year) {
            const state = StateService.getState();
            if (!state.partyAnalysisProvinceId || !state.partyAnalysisParty) return;

            // Reload data for new year without loading screen, preserve view
            await this.loadPartyAnalysisData(state.partyAnalysisProvinceId, state.partyAnalysisParty, year, true);
        }
    };

    // Expose cache utilities to console for debugging
    window.CensusApp = {
        clearCache: () => CacheService.clear(),
        cache: CacheService
    };

    // Expose App for inline onclick handlers
    window.App = App;

    App.initialize();
});