html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #1a1a1a;
    overscroll-behavior: none;
    touch-action: none; /* Block all browser-level gestures */
}

:root {
    --sidebar-width: 350px;
}

/* Map Container Stacking */
.map-container {
    position: absolute; /* Relative to map-wrapper */
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition: transform 0.1s ease-out; /* Smooth rotation */
    touch-action: none;
}

#map-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0; /* Background */
}

/* This will be overriden in media query */
#map-wrapper.with-sidebar {
    left: 0;
}

#map-base {
    z-index: 1;
    background: #ffffff;
}

#map-overlay {
    z-index: 2;
    background: transparent;
    /* Clipping Fix: Make container massive and center it */
    width: 150vmax; 
    height: 150vmax;
    top: 50%;
    left: 50%;
    /* transform will be set by JS to handle centering + rotation */
    pointer-events: none; /* Default state, toggled by JS */
}

/* Interaction Passthrough Classes */
.interaction-disabled {
    pointer-events: none !important;
}
.interaction-enabled {
    pointer-events: auto !important;
}

#sidebar-container {
    pointer-events: none;
    z-index: 9999;
}

/* Default State (Mobile/Touch Drawer) */
.control-panel {
    z-index: 9999; /* Ensure high priority */
    margin: 0;
    border-radius: 1.5rem 1.5rem 0 0;
    border-top: 1px solid rgba(0,0,0,0.1);
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: white;
    pointer-events: auto;
}

.control-panel.collapsed {
    max-height: 60px !important;
    overflow: hidden;
}

/* Sidebar Mode: Only for large screens with a precise pointer (Mouse) */
@media (min-width: 1024px) and (pointer: fine) {
    #sidebar-container {
        pointer-events: none;
    }

    #sidebar-container.collapsed {
        transform: translateX(calc(-1 * var(--sidebar-width)));
    }

    .control-panel {
        border-radius: 0;
        border: none;
        border-right: 1px solid rgba(0,0,0,0.1);
    }
    
    .show-on-drawer-only {
        display: none !important;
    }

    #icon-collapse {
        transition: transform 0.3s ease-in-out;
    }

    /* Only apply the offset when sidebar is on the left */
    #map-wrapper.with-sidebar {
        left: var(--sidebar-width);
    }
}

/* Custom UI tweaks */
input[type=range] {
    -webkit-appearance: none; 
    width: 100%; 
    background: transparent; 
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background: #3b82f6;
    cursor: pointer;
    margin-top: -10px; 
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: #e5e7eb;
    border-radius: 2px;
}

#map-overlay .leaflet-control-zoom {
    display: none;
}

/* --- CSS Filters for Layer Tinting --- */
.filter-normal { filter: none; }
.filter-invert { filter: invert(1) hue-rotate(180deg); }
.filter-red { filter: sepia(1) saturate(5) hue-rotate(-50deg); }
.filter-blue { filter: sepia(1) saturate(5) hue-rotate(180deg); }
.filter-green { filter: sepia(1) saturate(5) hue-rotate(80deg); }
.filter-high-contrast { filter: contrast(200%); }