/* Base Layout */
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
            font-family: sans-serif;
            background-color: #f8f8f8;
        }

        /* Container to hold map and sidebar side-by-side */
        #map-container {
            display: flex;
            height: 100vh;
            width: 100vw;
             position: relative; 
        }

        /* Map Styling */
        #map {
            flex-grow: 1; /* Map takes up all available space */
            height: 100%;
            background-image: url("https://electionmap.mallxs.com/assets/bg3.jpeg");
            background-size: cover;
        }

        /* Sidebar/Panel Styling - CRITICAL FOR PERFORMANCE FIX */
        #candidate-sidebar {
            /* Define a fixed width and position */
            width: 380px; 
            min-width: 380px; 
            height: 100%;
            background-color: #ffffff;
            border-left: 1px solid #e0e0e0;
            box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
            padding: 15px;
            box-sizing: border-box;
            overflow-y: auto; /* Allows scrolling of content */            
            /* Animation for sliding in/out */
            position: absolute; /* Needed for transform */
            top: 0;
            right: 0;
            transform: translateX(100%); /* Start hidden (off-screen to the right) */
            transition: transform 0.3s ease-out;
            z-index: 1000; /* Ensure it stays on top of the map */
            
        }

        #candidate-sidebar.active {
            transform: translateX(0); /* Slide into view */            
        }

        /* --- Content/Card Styling (reused from popup styles) --- */
        .sidebar-header {
            margin-top: 0;
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid #ddd;
        }
        .sidebar-title { 
            font-size: 1.2rem; 
            font-weight: bold; 
            margin: 0; 
            color: #1f2937; 
        }

        /* Candidate List Styling */
        .candidate-list { list-style: none; padding: 0; margin: 0; }
        .candidate-item { 
            display: flex; 
            align-items: center; 
            padding: 0.75rem 0; 
            border-bottom: 1px dashed #eee; 
        }
        .candidate-item:last-child { border-bottom: none; }
        .candidate-thumb { margin-right: 0.75rem; position: relative; }
        .candidate-img, .party-img { 
            width: 40px; 
            height: 40px; 
            border-radius: 50%; 
            object-fit: cover; 
            border: 1px solid #ccc;
        }
        .candidate-item__info { flex-grow: 1; }
        .candidate-name { font-weight: 600; margin: 0; line-height: 1.2; font-size: 0.9rem; }
        .candidate-party { color: #4b5563; margin: 0; font-size: 0.8rem; }
        .party-box { text-align: right; }
        .candidate-badge { 
            display: inline-block; 
            padding: 2px 6px; 
            border-radius: 4px; 
            font-size: 0.7rem; 
            font-weight: bold; 
            margin-top: 4px; 
        }
        .candidate-badge--winner { background-color: #34d399; color: #ffffff; }
        .candidate-badge--default { background-color: #ab3426; color: #ffffff; }
        .thumb-label {
            position: absolute;
            bottom: -5px; 
            right: -5px; 
            font-size: 8px; 
            background: white; 
            padding: 1px 3px; 
            border-radius: 3px; 
            border: 1px solid #ccc; 
            white-space: nowrap;
        }

        /* The container created by L.divIcon */
.constituency-label {
    width: 60px !important;      /* Define the "box" width */
    height: 20px !important;     /* Optional: Define a height */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* The actual text inside the span */
.constituency-label span {
    display: block;
    width: 100%;
    white-space: nowrap;        /* Prevent text from wrapping to a new line */
    overflow: hidden;           /* Hide the extra text */
    text-overflow: ellipsis;    /* Add "..." at the end */
    text-align: center;
    font-size: 10px;            /* Adjust as needed */
    pointer-events: none;       /* Ensure labels don't block map clicks */
}

        @media (max-width: 768px) {
           #candidate-sidebar {max-width: 280px;min-width: 250px;}
        }