body{
margin:0;
font-family:Arial;
}

#map{
height:100vh;
width:100%;
}

.topbar{
position:absolute;
top:0;
left:0;
right:0;
height:50px;
background:#c2c5c7;
color:#fff;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 15px;
z-index:999;
}

.logo{
font-weight:bold;
}

.right-header i{
margin-left:15px;
cursor:pointer;
}

.right-header i.active{
color:#2ecc71;
}

.layout{
display:flex;
}

.info-panel{
position:absolute;
top:50px;
right:0;
width:320px;
height:calc(100vh - 50px);
background:#fff;
z-index:999;
display:flex;
flex-direction:column;
border-left:1px solid #ddd;
}

.panel-header{
padding:5px;
text-align:right;
border-bottom:1px solid #ddd;
}

.panel-content{
padding:10px;
display:none;
overflow:auto;
}

.basemap-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}

.basemap-item{
cursor:pointer;
text-align:center;
font-size:12px;
}

.basemap-item img{
width:100%;
border:1px solid #ccc;
}

#openPanelBtn{
display:none;
cursor:pointer;
}
#layerInfoOverlay {
  display:none;
  position:fixed; top:0; left:0; width:100%; height:100%;
  background: rgba(0,0,0,0.3);
  z-index: 9999;
}
.opacity-slider{
  width:70px;
  margin-left:5px;
  vertical-align:middle;
}
.layer-tree{
font-family:Arial;
font-size:14px;
}

.tree-title{
cursor:pointer;
padding:6px;
font-weight:600;
border-bottom:1px solid #ccc;
}

.tree-title:hover{
background:#e6f0ff;
}

.tree-content{
padding-left:18px;
display:none;
}

.tree-title.open + .tree-content{
display:block;
}

.toggle{
font-weight:bold;
margin-right:6px;
}

.tree-content label{
display:block;
margin:4px 0;
cursor:pointer;
}
#panel-measure select,
#panel-measure button{
width:100%;
padding:8px;
margin-bottom:8px;
border-radius:4px;
border:1px solid #ccc;
}

#panel-measure button{
background:#2c3e50;
color:white;
cursor:pointer;
}
.ward-icon{
    font-style: normal;
    font-weight: bold;
    font-size: 12px;
    background: #000;
    border-radius: 50%;
    padding: 3px 5px;
    border: 1px solid #ccc;
    cursor: pointer;
}
.arcgis-popup{
font-family: Arial, sans-serif;
width:260px;
}

.arcgis-popup-header{
font-size:16px;
font-weight:bold;
padding:6px 8px;
background:#f2f2f2;
border-bottom:1px solid #ddd;
}

.arcgis-popup-body{
max-height:220px;
overflow-y:auto;
}

.arcgis-popup table{
width:100%;
border-collapse:collapse;
font-size:13px;
}

.arcgis-popup td{
padding:6px;
border-bottom:1px solid #eee;
}

.arcgis-popup td:first-child{
font-weight:bold;
color:#444;
width:45%;
}
.user-panel{
position:fixed;

top:50%;
left:50%;

transform:translate(-50%,-50%);

width:340px;
background:#0bb14b;
border-radius:6px;
overflow:hidden;

box-shadow:0 6px 20px rgba(0,0,0,0.35);

z-index:9999;
}

.panel-close{
position:absolute;
top:-10px;
right:-10px;
background:#0bb14b;
color:white;
width:28px;
height:28px;
border-radius:50%;
text-align:center;
line-height:28px;
font-weight:bold;
cursor:pointer;
border:3px solid white;
}

.panel-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
}

.panel-item{
border:1px solid rgba(255,255,255,0.3);
text-align:center;
padding:20px 10px;
color:white;
cursor:pointer;
transition:0.2s;
}

.panel-item i{
font-size:28px;
display:block;
margin-bottom:8px;
}

.panel-item span{
font-size:14px;
}

.panel-item:hover{
background:#0a9b40;
}
.event-card{
border:1px solid #ddd;
padding:10px;
margin-bottom:10px;
border-radius:4px;
}

#panel-feedback input,
#panel-feedback textarea{
width:100%;
padding:8px;
border:1px solid #ccc;
border-radius:4px;
}

#panel-feedback button{
background:#2c3e50;
color:white;
padding:8px 12px;
border:none;
cursor:pointer;
}

.legend-item{
margin-bottom:10px;
}
.panel-title{
margin-bottom:12px;
font-size:16px;
font-weight:600;
border-bottom:2px solid #eee;
padding-bottom:5px;
}

/* container */

.card-container{
display:flex;
flex-direction:column;
gap:10px;
}

/* EVENT CARD */

.event-card{
display:flex;
align-items:center;
background:#fff;
border-radius:6px;
padding:10px;
box-shadow:0 2px 8px rgba(0,0,0,0.08);
transition:0.2s;
cursor:pointer;
}

.event-card:hover{
transform:translateY(-2px);
box-shadow:0 4px 12px rgba(0,0,0,0.15);
}

/* date */

.event-date{
background:#2c3e50;
color:white;
border-radius:6px;
text-align:center;
width:50px;
padding:6px 0;
margin-right:10px;
}

.event-date span{
font-size:16px;
font-weight:bold;
display:block;
}

.event-date small{
font-size:11px;
}

/* info */

.event-info h5{
margin:0;
font-size:14px;
}

.event-info p{
margin:2px 0 0;
font-size:12px;
color:#666;
}

/* ANNOUNCEMENT CARD */

.announcement-card{
display:flex;
gap:10px;
align-items:flex-start;
background:#fff;
border-radius:6px;
padding:10px;
box-shadow:0 2px 8px rgba(0,0,0,0.08);
transition:0.2s;
}

.announcement-card:hover{
transform:translateY(-2px);
box-shadow:0 4px 12px rgba(0,0,0,0.15);
}

.announcement-card i{
font-size:18px;
color:#2c3e50;
margin-top:4px;
}

.announcement-card h5{
margin:0;
font-size:14px;
}

.announcement-card p{
margin:3px 0 0;
font-size:12px;
color:#666;
}
#legendContainer{
display:flex;
flex-direction:column;
gap:6px;
}

/* each legend row */

.legend-row{
display:flex;
align-items:center;
gap:10px;
padding:4px 6px;
border-bottom:1px solid #eee;
}

/* legend symbol */

.legend-icon{
width:30px;
height:auto;
}

/* layer name */

.legend-text{
font-size:13px;
color:#333;
text-transform:capitalize;
}
#panel-ward select{
width:100%;
padding:8px;
border:1px solid #ccc;
border-radius:4px;
}
select{
width:100%;
padding:8px;
border:1px solid #ccc;
border-radius:4px;
}