/* Responsive control layout: keep the layers flyout out of the control stack. */
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
#titleBar, #creditBar { box-sizing: border-box; }
#titleText { min-width: 0; }
#creditBar { position: fixed; padding: 5px 8px; }
#map .search-control {
  top: 10px; left: 58px; margin: 0 !important; width: 446px;
  max-width: calc(100vw - 78px); box-sizing: border-box; flex-wrap: wrap;
}
#map .search-control > input { min-width: 90px; flex: 1 1 140px; box-sizing: border-box; }
#map .search-control .lang-toggle, #map .search-control .table-open-btn { flex: 0 0 auto; }
#map .map-right-dock {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  right: 10px; width: 240px; box-sizing: border-box;
  overflow-y: auto; overflow-x: hidden; scrollbar-width: thin;
  overscroll-behavior: contain; z-index: 2700;
}
#map .map-right-dock > .leaflet-control {
  flex: 0 0 auto; float: none; clear: none; margin: 0 !important; max-width: 100%;
}
#map .map-right-dock > .leaflet-control-layers,
#map .map-right-dock > .leaflet-control-layers-expanded {
  padding: 0; width: 48px; height: 48px; box-sizing: border-box; overflow: visible;
}
#map .map-right-dock .leaflet-control-layers-toggle {
  display: block !important; width: 44px; height: 44px;
}
#map .map-right-dock .leaflet-control-layers-expanded .leaflet-control-layers-toggle {
  background-color: #e8f2f8;
}
#map .map-right-dock .leaflet-control-layers-list {
  position: fixed; height: auto !important; margin: 0;
  box-sizing: border-box; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; background: #fff; color: #233747;
  padding: 10px; border: 1px solid #9fb3c2; border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.22); z-index: 2800;
}
#map .map-right-dock .leaflet-control-layers-list label { margin: 5px 0; line-height: 1.35; }
#map .map-right-dock .leaflet-control-layers-list label > span { display: flex; align-items: flex-start; gap: 7px; }
#map .map-right-dock .leaflet-control-layers-selector { flex: 0 0 auto; margin: 2px 0 0; top: 0; }
#map .map-right-dock .leaflet-control-layers-list label > span > span { min-width: 0; overflow-wrap: anywhere; }
.map-layers-heading {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  position: sticky; top: -10px; z-index: 2; margin: -10px -10px 8px;
  padding: 8px 10px; background: #033a63; color: #ffd700; font-weight: 700;
}
.map-layers-close {
  border: 1px solid rgba(255,215,0,.6); border-radius: 5px; background: transparent;
  color: #ffd700; cursor: pointer; font: 20px/24px Arial, sans-serif;
  width: 28px; height: 28px; padding: 0; flex: 0 0 auto;
}
#map .map-utility-dock {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  right: 10px; bottom: 8px; max-width: 240px; z-index: 2701;
}
#map .map-utility-dock > .leaflet-control { margin: 0 !important; float: none; clear: none; }
#map .map-utility-actions { display: flex; gap: 6px; align-items: center; pointer-events: auto; }
#map .map-utility-actions > * {
  position: static !important; float: none; clear: none; margin: 0 !important;
  width: 34px; height: 34px; min-width: 34px; box-sizing: border-box;
  line-height: 30px; font-size: 17px; pointer-events: auto;
}
#map .map-utility-actions #compass { font-size: 13px; }
#map .map-utility-dock .leaflet-control-scale { margin: 0 !important; }
#map .map-utility-dock .leaflet-control-attribution { max-width: 240px; box-sizing: border-box; white-space: normal; font-size: 10px; }
#map .coord-control { margin: 0 0 8px 8px !important; box-sizing: border-box; overflow-wrap: anywhere; }
#map .tool-control { max-height: var(--map-tools-max-height, 340px); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
#map .map-layout-panel { box-sizing: border-box; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; z-index: 2700 !important; }
#map.map-right-drawer-open .map-right-dock > :not(.leaflet-control-layers) { display: none !important; }
#map.map-right-drawer-open .map-right-dock { overflow: visible; }
#map .map-layout-panel.map-panel-behind-info { visibility: hidden; }
@media (max-width: 560px) {
  #titleBar { padding: 10px; font-size: 16px; gap: 8px; }
  #logoContainer { gap: 6px; }
  #logoContainer img { height: 30px; }
  #creditBar { font-size: 10px; line-height: 1.3; }
}
@media print {
  #map .map-layout-panel { display: none !important; }
}

.map-legend-behind-drawer { visibility: hidden !important; }