/* --- Global --- */
:root{
  --indiaGreen:#138808;
  --indiaSaffron:#FF9933;
  --bg:#0b0f14;
  --panel:#0f1620;
  --panel2:#0b111a;
  --stroke:#e8edf5;
  --muted:#9fb0c5;
  --accent:#7aa2ff;
  --shadow: 0 18px 40px rgba(0,0,0,.45);
  --radius: 14px;
  --ring: rgba(122,162,255,.35);
  --outline: rgba(255,255,255,.10);
  --danger:#ff4d6d;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--stroke);
  overflow:hidden;
}

/* --- Top bar --- */
.topbar{
  position:fixed;
  left:0; right:0; top:0;
  z-index:1000;
  padding:12px 16px 10px;
  background: linear-gradient(to bottom, rgba(11,15,20,.92), rgba(11,15,20,.55), rgba(11,15,20,0));
  pointer-events:none; /* allow map interaction under header */
}
.title-wrap{max-width:none; margin:0; text-align:left; padding-left:10px; padding-right:10px;}
.title{
  margin:0;
  font-size: clamp(18px, 2.2vw, 28px);
  letter-spacing:.2px;
  font-weight:700;
  text-shadow: 0 10px 20px rgba(0,0,0,.55);
  color: var(--indiaGreen);
}
.subtitle{
  margin:4px 0 0;
  font-size: clamp(12px, 1.4vw, 15px);
  color: var(--muted);
  pointer-events:none;
}

/* --- App / Map --- */
.app{position:fixed; inset:0; padding-top:0;}
#map{
  position:absolute; inset:0;
  z-index:1;
  background:#0b0f14;
}

/* --- Leaflet tweaks --- */
.leaflet-control-container{display:none;} /* no default zoom controls */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip{
  background: var(--panel);
  color: var(--stroke);
  border:1px solid var(--outline);
  box-shadow: var(--shadow);
}
.leaflet-popup-content{
  margin:12px 14px;
  max-width: 340px;
}
.popup-title{
  margin:0 0 6px;
  font-weight:700;
  font-size:15px;
  line-height:1.15;
}
.popup-meta{
  color: var(--muted);
  font-size:12px;
  margin:0 0 10px;
}
.popup-desc{
  margin:0 0 10px;
  color: var(--stroke);
  font-size:13px;
  line-height:1.35;
}
.popup-chip{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:600;
  border:1px solid var(--outline);
  background: var(--panel2);
}

/* --- Panel --- */
.panel{
  position:fixed;
  top:74px;
  left:14px;
  width:min(340px, calc(100vw - 28px));
  max-height: calc(100vh - 110px);
  z-index:1100;
  background: rgba(15,22,32,.94);
  border:1px solid var(--outline);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
  overflow:hidden;
}
.panel.minimized .panel-body{display:none;}
.panel-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px solid var(--outline);
  background: rgba(11,15,20,.35);
}
.panel-title{
  font-weight:700;
  letter-spacing:.3px;
}
.panel-body{
  padding:12px;
  overflow:auto;
  max-height: calc(100vh - 160px);
}
.legend-section{margin-bottom:14px;}
.section-title{
  font-size:12px;
  letter-spacing:.35px;
  text-transform:uppercase;
  color: var(--muted);
  margin-bottom:8px;
}
.hint{
  margin-top:8px;
  font-size:12px;
  color: var(--muted);
  line-height:1.25;
}
.hint.subtle{margin-top:0; margin-bottom:8px;}
.kbd{
  display:inline-block;
  padding:1px 6px;
  border-radius:6px;
  border:1px solid var(--outline);
  background: rgba(0,0,0,.25);
  font-size:11px;
}

/* size legend */
.size-legend{display:flex; flex-direction:column; gap:10px;}
.size-row{
  display:flex; align-items:center; gap:10px;
  cursor:pointer;
  padding:6px 8px;
  border-radius:10px;
  border:1px solid transparent;
}
.size-row:hover{border-color: var(--outline); background: rgba(0,0,0,.18);}
.size-row.active{border-color: var(--ring); box-shadow: 0 0 0 2px var(--ring) inset;}
.size-swatch{
  width:44px; height:32px;
  display:flex; align-items:center; justify-content:center;
}
.size-swatch svg{display:block;}
.size-label{
  font-size:13px;
  color: var(--stroke);
}
.size-label .range{color: var(--muted); font-size:12px;}

/* category legend */
.cat-legend{display:flex; flex-direction:column; gap:6px;}
.cat-item{
  display:flex; align-items:center; gap:10px;
  cursor:pointer;
  padding:6px 8px;
  border-radius:10px;
  border:1px solid transparent;
}
.cat-item:hover{border-color: var(--outline); background: rgba(0,0,0,.18);}
.cat-item.active{border-color: var(--ring); box-shadow: 0 0 0 2px var(--ring) inset;}
.cat-dot{
  width:10px; height:10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  flex: 0 0 auto;
}
.cat-name{font-size:13px;}

/* buttons */
.icon-btn{
  border:1px solid var(--outline);
  background: rgba(0,0,0,.18);
  color: var(--stroke);
  border-radius:10px;
  padding:6px 10px;
  cursor:pointer;
}
.icon-btn:hover{background: rgba(0,0,0,.26);}

.link-btn{
  width:100%;
  border:1px solid var(--outline);
  background: rgba(0,0,0,.18);
  color: var(--stroke);
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  font-weight:600;
}
.link-btn:hover{background: rgba(0,0,0,.26);}

/* Zoom out */
.zoomout:hover{background: rgba(15,22,32,.98);}

/* Modal */
.modal-backdrop{
  position:fixed; inset:0;
  background: rgba(0,0,0,.55);
  z-index:2000;
  display:none;
  align-items:center; justify-content:center;
  padding:16px;
}
.modal-backdrop.open{display:flex;}
.modal{
  width:min(640px, 100%);
  background: rgba(15,22,32,.98);
  border:1px solid var(--outline);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.modal-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 14px;
  border-bottom:1px solid var(--outline);
}
.modal-title{font-weight:800;}
.modal-body{padding:14px;}
.modal-h{color: var(--muted); text-transform:uppercase; font-size:12px; letter-spacing:.4px; margin-bottom:8px;}
.modal-block{margin-bottom:12px;}
.modal-note{color: var(--muted); font-size:12px; line-height:1.35; padding:10px 12px; border-radius:12px; border:1px solid var(--outline); background: rgba(0,0,0,.18);}
.modal-made{margin-top:10px; color: var(--muted); font-size:12px;}
.modal a{color: var(--accent); text-decoration:none;}
.modal a:hover{text-decoration:underline;}

/* Loading */
.loading{
  position:fixed;
  left:50%;
  bottom:16px;
  transform: translateX(-50%);
  z-index:1500;
  background: rgba(15,22,32,.92);
  border:1px solid var(--outline);
  border-radius: 999px;
  padding:10px 14px;
  color: var(--stroke);
  font-weight:700;
  box-shadow: var(--shadow);
  display:none;
}
.loading.show{display:block;}

/* Mobile layout */
@media (max-width: 720px){
  .panel{
    top:auto;
    bottom:14px;
    left:14px; right:14px;
    width:auto;
    max-height: 55vh;
  }
    .topbar{padding:10px 12px 8px;}
}


/* --- Legend header controls --- */
.panel-title{
  font-weight:700;
  letter-spacing:.2px;
}

.panel-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.panel-bar{
  flex-wrap:nowrap;
}
.panel-title{
  flex:1;
  min-width:0;
  padding-right:10px;
}
.panel-actions{
  flex-shrink:0;
  padding-right:2px;
}
.panel-bar .icon-btn{
  width:38px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  line-height:1;
}
.panel-inline-actions{
  margin-bottom:10px;
}
.pill-btn.full-width{
  width:100%;
}

.pill-btn{
  border:1px solid var(--outline);
  background: rgba(15,22,32,.65);
  color: var(--stroke);
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  cursor:pointer;
}
.pill-btn:hover{ border-color: rgba(255,255,255,.22); }

.zoomout-inline{
  margin-right:8px;
  border-color: rgba(255,153,51,.35);
}
.zoomout-inline:hover{
  border-color: rgba(255,153,51,.75);
}

#legend.dragging .panel-bar{
  cursor:grabbing;
}
#legendHeader{
  cursor:grab;
}

@media (max-width: 720px){
  #legendHeader{ cursor:default; }
  .pill-btn{ font-size:11px; padding:6px 9px; }
}