body { margin: 0; padding: 0; background: #111; color: #fff; font-family: "Segoe UI", sans-serif; }
#map { height: 100vh; width: 100%; }

#topBar{
    position:absolute; top:0; left:0; right:0; height:50px;
    background:#222; display:flex; align-items:center; padding:0 10px; z-index:1000; gap:6px; box-shadow:0 2px 4px rgba(0,0,0,0.5);
}
#topBar input[type=text]{ width:250px; padding:6px 8px; border-radius:3px; border:none; background:#111; color:#fff;}
#topBar input[type=text]:focus{outline:1px solid #444;}
#topBar button{ padding:5px 10px; background:#333; border:none; color:#fff; border-radius:3px; cursor:pointer; transition:0.2s;}
#topBar button:hover{background:#444;}
#lastUpdated{margin-left:auto;font-size:12px;opacity:0.8;}

.export-wrapper{ position:relative; display:inline-block; }
#exportDropdown {
    max-height: 0;
    overflow: hidden;
    padding: 0 10px; 
    transition: max-height 0.3s ease, padding-top 0.3s ease, padding-bottom 0.3s ease;
    position: absolute;
    top: 100%;
    left: 0;
    background: #222;
    color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.6);
    width: 220px;
    z-index: 1500;
}
#exportDropdown.show {
    max-height: 500px;
    padding-top: 10px;
    padding-bottom: 10px;
}
#exportDropdown select{width:100%; margin:5px 0; background:#111; color:#fff; border:none; border-radius:3px;}
#exportDropdown button{margin-top:5px;width:100%;}

#settingsSidebar {
    position: fixed;          
    top: 50px;                
    right: -260px;            
    width: 250px;
    height: calc(100% - 50px);
    background: #222;
    padding: 10px;
    transition: right 0.3s ease;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: -2px 0 4px rgba(0,0,0,0.5);
}

#settingsSidebar.open {
    right: 0;                 
}


#settingsToggle{
    position:absolute; top:60px; right:10px; background:#333; color:#fff; border:none; padding:5px 10px; cursor:pointer; z-index:1001; border-radius:3px;
}


#legend{
    position:absolute; bottom:10px; left:10px; background:#222; padding:10px; border-radius:5px; z-index:1000; box-shadow:0 2px 4px rgba(0,0,0,0.5);
}
.legend-item{display:flex;align-items:center;margin-bottom:4px;font-size:13px;}
.legend-color{width:15px;height:15px;margin-right:5px;border-radius:50%;}

#whatIsDiv{
    position:absolute; top:60px; left:50%; transform:translateX(-50%);
    background:#222; color:#fff; padding:15px; border-radius:5px; display:none; max-width:400px;
    z-index:1002; box-shadow:0 2px 4px rgba(0,0,0,0.6);
}

#toast{
    position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
    background:#333; color:#fff; padding:10px 20px; border-radius:4px;
    box-shadow:0 2px 4px rgba(0,0,0,0.5); opacity:0; transition:opacity 0.5s; z-index:2000;
}