:root{
  --cz-map-popup-class:cz-map-popup;
}

/* Map popup theming - Leaflet + Mapbox compatibility */
.cz-map-popup .leaflet-popup-content-wrapper,
.mapboxgl-popup-content.CZ_MAP_POPUP_CLASS,
.mapboxgl-popup-content.cz-map-popup{
  background:var(--paper) !important;
  border:1px solid var(--light-grey) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:20px 24px !important;
}

.cz-map-popup .leaflet-popup-content{
  margin:0 !important;
  width:100% !important;
}

.cz-map-popup .leaflet-popup-tip,
.mapboxgl-popup-tip{
  background:var(--paper) !important;
}

.cz-map-popup .cz-popup-title{
  font-family:var(--font-display);
  font-size:16px;
  color:var(--ink);
  font-weight:400;
}

.cz-map-popup .cz-popup-score-badge{
  background:var(--signal);
  color:var(--paper);
  font-size:12px;
  font-family:var(--font-mono);
  padding:4px 8px;
  border-radius:0;
}

.cz-map-popup .cz-popup-cta{
  color:var(--teal);
  font-family:var(--font-body);
  font-size:13px;
  text-decoration:none;
}

.cz-map-popup .cz-popup-cta:hover{
  text-decoration:underline;
}

.cz-map-popup .cz-popup-close,
.mapboxgl-popup-close-button{
  color:var(--grey);
  background:transparent;
}

.cz-map-popup .cz-popup-close:hover,
.mapboxgl-popup-close-button:hover{
  color:var(--ink);
}

/* Map controls theming - Leaflet + Mapbox compatibility */
.leaflet-control-zoom,
.mapboxgl-ctrl-group{
  background:var(--bone) !important;
  border:1px solid var(--light-grey) !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

.leaflet-control-zoom a,
.mapboxgl-ctrl button{
  background:var(--bone) !important;
  color:var(--ink) !important;
  border-radius:0 !important;
  border-color:var(--light-grey) !important;
}

.leaflet-control-zoom a:hover,
.mapboxgl-ctrl button:hover{
  background:var(--ink) !important;
  color:var(--bone) !important;
}

.leaflet-control-zoom a:active,
.mapboxgl-ctrl button:active{
  background:var(--teal) !important;
  color:var(--bone) !important;
}

.mapboxgl-ctrl button .mapboxgl-ctrl-icon{
  color:var(--ink) !important;
}

/* Custom marker system */
.cz-marker{
  width:14px;
  height:14px;
  border-radius:0;
  border:2px solid var(--paper);
  transition:transform 200ms ease,border-color 200ms ease,background-color 200ms ease;
  transform-origin:center;
}

.cz-marker:hover{
  transform:scale(1.2);
  border-color:var(--ink);
}

.cz-marker--selected{
  transform:scale(1.3);
  background:var(--ink) !important;
  border-color:var(--ink);
}

.cz-marker--available{background:var(--signal);}
.cz-marker--institutional{background:var(--teal);}
.cz-marker--environmental{background:var(--gold);}
.cz-marker--inactive{background:var(--grey);}

/* Sidebar / panel theming */
#right,
#left-panel,
#drawer{
  background:var(--bone) !important;
  border-left:1px solid var(--light-grey) !important;
  border-right:1px solid var(--light-grey) !important;
}

.drh,
.rsec,
#left-panel .panel-header{
  background:var(--paper) !important;
  padding:32px !important;
}

.drt,
.npt{
  font-family:var(--font-display);
  font-size:20px !important;
  color:var(--ink) !important;
  font-weight:400;
}

.sig,
.wwfrow,
#left-panel .watch-item{
  font-family:var(--font-body);
  font-size:14px;
  padding:16px !important;
  border-bottom:1px solid var(--light-grey) !important;
  background:transparent;
}

.sig.active,
.wwfrow.active,
#left-panel .watch-item.active{
  background:var(--paper) !important;
  border-left:3px solid var(--teal) !important;
}

.cz-inline-score-badge{
  background:var(--signal);
  color:var(--paper);
  font-family:var(--font-mono);
  font-size:12px;
  padding:4px 8px;
  border-radius:0;
}

#right,
#left-panel,
#drawer,
.rsigs{
  scrollbar-width:thin;
  scrollbar-color:var(--light-grey) transparent;
}

#right::-webkit-scrollbar,
#left-panel::-webkit-scrollbar,
#drawer::-webkit-scrollbar,
.rsigs::-webkit-scrollbar{
  width:8px;
}

#right::-webkit-scrollbar-track,
#left-panel::-webkit-scrollbar-track,
#drawer::-webkit-scrollbar-track,
.rsigs::-webkit-scrollbar-track{
  background:transparent;
}

#right::-webkit-scrollbar-thumb,
#left-panel::-webkit-scrollbar-thumb,
#drawer::-webkit-scrollbar-thumb,
.rsigs::-webkit-scrollbar-thumb{
  background:var(--light-grey);
  border-radius:0;
}