body,html {
        margin:0; 
        padding:0; height:100%; 
        overflow:hidden;
        font-family: Arial, sans-serif;
    }
    #map {position:absolute; 
       
        left:0; 
        right:0; 
    }
    #controlBox {
        position: absolute; 
        top: 11%; right: 20px; 
        background: white; 
        padding: 8px 12px; 
        font-size: 13px; 
        border-radius: 8px; 
        box-shadow: 0 2px 6px rgba(0,0,0,0.3); 
        z-index: 1000;
    }
    #loadingOverlay {
        position: fixed; top:0; 
        left:0; 
        width:100%; 
        height:100%;
        background:rgba(255,255,255,0.9); 
        display:flex; 
        align-items:center;
        justify-content:center; 
        font-size:14px; 
        font-weight:bold; 
        z-index:2000;
    }
    button { 
            padding: 3px; 
            font-size: 12px; 
            cursor: pointer; 
            margin:5px; 
    }
    #predictionControls { 
            text-align:center; 
            margin-bottom:10px; 
    }
    canvas { 
            max-width: 100%; 
            margin: 10px auto; 
            display:block; 
    }
.leaflet-control-zoom {
    position: reLative;
    z-index: 1000;
}

/* Prevent overlays or headers from blocking map controls */
.leaflet-top,
.leaflet-bottom {
    z-index: 1000;
}