/* Shared across all 6 demo pages.
 *
 * Layout: a real sidebar (normal document flow, flexbox) next to the map,
 * NOT a stack of absolutely-positioned boxes overlaid on top of the map.
 * The earlier overlay approach needed hand-guessed pixel offsets for every
 * panel, which silently broke as soon as panel heights differed between
 * pages (e.g. 3857's 3-option basemap list vs 5514's 2-option one) or a
 * library's own native controls (zoom, scale, mouse position, ...) ended
 * up in the same corner. Putting custom UI in a genuine sidebar - outside
 * the map div entirely - removes that whole class of bug: our elements
 * and each library's own map-corner controls now live in separate DOM
 * containers and can never collide.
 *
 * Expected structure in each page:
 *   <div class="demo-layout">
 *     <div class="demo-sidebar"> ... all custom UI ... </div>
 *     <div class="demo-map-container"><div id="map"></div></div>
 *   </div>
 */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }

.demo-layout {
  display: flex;
  height: 100vh;
  width: 100vw;
  font-family: sans-serif;
  font-size: 13px;
}

.demo-sidebar {
  flex: 0 0 280px;
  width: 280px;
  overflow-y: auto;
  background: #f7f5f0;
  border-right: 1px solid #ddd;
  padding: 12px;
}

.demo-map-container {
  flex: 1 1 auto;
  position: relative;
  min-width: 0; /* let flexbox actually shrink this, not just grow */
}
.demo-map-container #map {
  width: 100%;
  flex: 1;
  min-height: 0;
}
.demo-map-container { display: flex; flex-direction: column; }
.demo-sidebar[hidden] { display: none; }
.demo-component-info { margin-top: 14px; padding-top: 10px; border-top: 1px solid #aaa; }
.demo-component-info summary { width: fit-content; padding: 4px 8px; cursor: pointer; font-size: 20px; }
.demo-component-info summary:focus-visible { outline: 3px solid #2785da; outline-offset: 2px; }
.demo-component-info h2 { font-size: 13px; }
.demo-component-info dl { margin: 10px 0; font-size: 12px; line-height: 1.5; }
.demo-component-info dt { font-weight: 600; margin-top: 8px; }
.demo-component-info dd { margin: 0; overflow-wrap: anywhere; }
/* The sidebar overview must reserve space instead of covering following content. */
#overview-mount .ol-overviewmap { position: relative; left: auto; bottom: auto; }
#sidebar-toggle {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  z-index: 1100; width: 24px; height: 44px; padding: 0;
  border: 1px solid #aaa; border-left: 0; border-radius: 0 6px 6px 0;
  background: #f7f5f0; color: #222; font: 26px/1 sans-serif; cursor: pointer;
  box-shadow: 2px 1px 4px #0002;
}
#sidebar-toggle:focus-visible { outline: 3px solid #2785da; outline-offset: 2px; }
.demo-night #sidebar-toggle { background: #20262e; color: #e0e5eb; border-color: #677587; }
.demo-night { color-scheme: dark; background: #171b20; color: #e0e5eb; }
.demo-night .demo-sidebar { background: #20262e; border-color: #46515f; }
.demo-night .demo-sidebar section { border-color: #46515f; }
.demo-night .demo-sidebar h2, .demo-night #note, .demo-night .demo-search-note { color: #bcc7d4; }
.demo-night a { color: #8abaff; }
.demo-night #back { color: #70d9ad; }
.demo-night button, .demo-night input, .demo-night select { background: #303a47; color: #e0e5eb; border-color: #677587; }
.demo-night button:hover, .demo-night .demo-search-results div:hover { background: #425268; }
.demo-night #map { background: #171b20; }
/* OL raster layers use a separate class to keep measurement vectors unfiltered.
 * MapLibre renders its raster/terrain scene in one canvas; DOM markers stay intact. */
.demo-night .leaflet-tile-pane,
.demo-night .demo-raster,
.demo-night .maplibregl-canvas {
  filter: invert(1) hue-rotate(180deg) saturate(.65) brightness(.85) contrast(.9);
}

.demo-sidebar h1 {
  font-size: 15px;
  margin: 0 0 10px;
}

.demo-sidebar section {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e2da;
}
.demo-sidebar section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
.demo-sidebar section h2 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #777;
  margin: 0 0 6px;
}

#back {
  display: inline-block;
  margin-bottom: 12px;
  text-decoration: none;
  color: #0a5;
  font-weight: 600;
}

#coords {
  font-family: monospace;
  font-size: 12px;
  line-height: 1.5;
}

.demo-search form { display: flex; gap: 4px; }
.demo-search input[type="text"] {
  flex: 1; padding: 4px 6px; border: 1px solid #ccc; border-radius: 3px; font-size: 13px;
}
.demo-search button {
  padding: 4px 10px; border: 1px solid #ccc; border-radius: 3px;
  background: #eee; cursor: pointer; font-size: 13px;
}
.demo-search button:hover { background: #e0e0e0; }
.demo-search .demo-search-results {
  max-height: 160px; overflow-y: auto; font-size: 12px; margin-top: 4px;
}
.demo-search .demo-search-results div {
  padding: 3px 4px; cursor: pointer; border-radius: 3px;
}
.demo-search .demo-search-results div:hover { background: #eee; }
.demo-search .demo-search-note { font-size: 10px; color: #999; margin-top: 4px; }

.demo-opacity { display: flex; align-items: center; gap: 6px; }
.demo-opacity input[type="range"] { flex: 1; }

.demo-snap-zoom {
  width: 100%; padding: 6px 8px; border: 1px solid #bbb; border-radius: 3px;
  background: #f1f1f1; cursor: pointer; font-size: 13px;
}
.demo-snap-zoom:hover { background: #e4e4e4; }
.demo-fine-zoom { display: grid; grid-template-columns: auto 1fr; gap: 6px 8px; align-items: center; margin-top: 8px; }
.demo-fine-zoom label:first-child { grid-column: 1 / -1; cursor: pointer; }
.demo-fine-zoom input[type="number"] { width: 6em; padding: 4px; }

.demo-baselayers label { display: block; cursor: pointer; padding: 3px 0; }

#measure-panel label { display: block; cursor: pointer; }

#note {
  font-size: 12px;
  line-height: 1.5;
  color: #444;
}

.demo-search select { width: 100%; margin: 4px 0 8px; padding: 5px; font: inherit; }
.demo-night .demo-search button,
.demo-night .demo-search input[type="text"] { background: #303a47; color: #e0e5eb; border-color: #677587; }
.demo-night .demo-search button:hover { background: #425268; }