/*
 * Styling for the MapLibre pages.
 *
 * The MapLibre frontends reuse web.mystyle.css unchanged, so the footer, the
 * layer-switcher buttons and the search box already look right. What that file
 * cannot provide is anything keyed on OpenLayers class names. This file supplies
 * the MapLibre equivalents - and the map sizing, which the OpenLayers pages got
 * from OpenLayers itself rather than from CSS.
 *
 * Load it after web.mystyle.css and after maplibre-gl.css.
 */

/* The footer is 127px tall and absolutely positioned at the bottom of the page
   (web.mystyle.css #footer), so the map fills everything above it. */
#map {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 127px;
}

/* The whole map is clickable for a field reading, and the OpenLayers pages
   signalled that with `#map { cursor: help }`. MapLibre puts `grab` on its own
   canvas container, which would win, so the override goes here. Layers that
   want a pointer set it inline, which still wins over both. */
.maplibregl-canvas-container.maplibregl-interactive,
.maplibregl-canvas-container.maplibregl-interactive .maplibregl-canvas {
	cursor: help;
}

/* Zoom control - the green rounded buttons web.mystyle.css gives .olControlZoom */
.maplibregl-ctrl-top-left .maplibregl-ctrl {
	margin: 10px 0 0 10px;
}

.maplibregl-ctrl-group {
	background: transparent;
	box-shadow: none;
	border-radius: 0;
}

.maplibregl-ctrl-group button {
	background-color: #00652E;
	border-radius: 3px;
	width: 30px;
	height: 30px;
}

.maplibregl-ctrl-group button + button {
	margin-top: 4px;
	border-top: none;
}

.maplibregl-ctrl-group button:hover {
	background-color: #00803A;
}

/* The default control icons are dark; ours sit on a dark green button. */
.maplibregl-ctrl-group button .maplibregl-ctrl-icon {
	filter: invert(1);
}

/* Attribution and scale, matching the placement of .olControlAttribution */
.maplibregl-ctrl-attrib {
	font-size: 10px;
	font-family: Arial, Helvetica, sans-serif;
	background: rgba(255, 255, 255, 0.7);
	border-radius: 5px 0 0 0;
}

.maplibregl-ctrl-scale {
	font-size: 10px;
	font-family: Arial, Helvetica, sans-serif;
}

/* Popups - the look main.css gives .olPopup */
.maplibregl-popup-content {
	border: #000000 1px solid;
	border-radius: 2px;
	background: rgb(54, 54, 54);
	background: rgba(54, 54, 54, 0.9);
	color: #FFFFFF;
	font-weight: 600;
	font-size: 10px;
	font-family: Arial, Helvetica, sans-serif;
	padding: 10px 25px 10px 10px;
	max-height: 400px;
	overflow-y: auto;
}

.maplibregl-popup-close-button {
	color: #FFFFFF;
	font-size: 16px;
	padding: 0 5px;
}

.maplibregl-popup-close-button:hover {
	background: transparent;
	color: #CCCCCC;
}

.maplibregl-popup-anchor-top .maplibregl-popup-tip,
.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
	border-bottom-color: rgba(54, 54, 54, 0.9);
}

.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
	border-top-color: rgba(54, 54, 54, 0.9);
}

.maplibregl-popup-anchor-left .maplibregl-popup-tip {
	border-right-color: rgba(54, 54, 54, 0.9);
}

.maplibregl-popup-anchor-right .maplibregl-popup-tip {
	border-left-color: rgba(54, 54, 54, 0.9);
}

/* The footer readout swaps these in and out; give them a defined starting state
   so nothing flashes before app.js runs. */
#emsfield_footer_page {
	display: none;
}