/* HILLER SERVICE GIS — consolidated stylesheet
   Replaces css/style.css + css/modal.css + src/css/index.css from gis1-6.
   font-awesome dropped: it was loaded in every legacy instance but never
   actually used (no fa-* class anywhere), and its webfont files were missing. */

:root {
	--brand: #0094de;
	--brand-dark: #075a86;
	--accent: #c0b28c;
	--ink: #1f2937;
	--panel-bg: rgba(255, 255, 255, 0.96);
	--panel-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	font-family: Arial, Helvetica, sans-serif;
	color: var(--ink);
}

/* ---------- layout shell ---------- */

#div_top {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 12px;
	background-color: var(--brand);
	border-bottom: 1px solid var(--brand-dark);
	z-index: 20;
}

#div_top h1 {
	margin: 0;
	color: white;
	font-size: 18px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#menuToggle {
	display: none;
}

#map {
	position: absolute;
	top: 50px; left: 0; right: 0; bottom: 0;
}

/* ---------- side panel: locations + layers ---------- */

#sidePanel {
	position: fixed;
	top: 62px;
	left: 12px;
	width: 240px;
	max-height: calc(100% - 90px);
	overflow-y: auto;
	background: var(--panel-bg);
	border-radius: 10px;
	box-shadow: var(--panel-shadow);
	padding: 12px;
	z-index: 15;
}

#sidePanel h2 {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #64748b;
	margin: 14px 0 6px;
}
#sidePanel h2:first-child { margin-top: 0; }

.locBtn {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	border-radius: 6px;
	padding: 8px 10px;
	margin-bottom: 2px;
	font-size: 14px;
	cursor: pointer;
	color: var(--ink);
}
.locBtn:hover { background: #eef6fb; }
.locBtn.active { background: var(--brand); color: white; font-weight: 600; }

.layerRow {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 2px;
	font-size: 13px;
}
.layerRow input { accent-color: var(--brand); cursor: pointer; }
.layerRow label { cursor: pointer; flex: 1; }
.layerRow .swatch {
	width: 12px; height: 12px; border-radius: 3px; flex: none;
}

#layerEmpty { font-size: 12px; color: #94a3b8; }

/* ---------- floating action buttons (home / 3d / 2d / info) ---------- */

#actionStack {
	position: fixed;
	top: 62px;
	right: 10px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	z-index: 15;
}

.button_user {
	height: 42px;
	width: 42px;
	background-color: var(--brand);
	border: 1px solid var(--brand-dark);
	border-radius: 6px;
	color: white;
	cursor: pointer;
	box-shadow: 0 6px 14px rgba(0,0,0,0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease;
}
.button_user img { width: 22px; height: 22px; }
.button_user:hover { background-color: var(--accent); }
.button_user.is-active { outline: 2px solid var(--brand-dark); }

/* ---------- basemap switcher ---------- */

.zoom {
	position: fixed;
	bottom: 20px;
	right: 10px;
	z-index: 15;
}

.zoom-fab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 8px;
	background-color: var(--brand);
	box-shadow: 0 6px 14px rgba(0,0,0,0.2);
	cursor: pointer;
	border: none;
}
.zoom-fab img { width: 22px; }

.zoom-menu {
	position: absolute;
	right: 52px;
	bottom: 0;
	display: flex;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.zoom-menu li { display: inline-block; }

.zoom-btn-sm {
	display: block;
	width: 44px;
	height: 44px;
	border-radius: 8px;
	background-size: cover;
	background-position: center;
	border: 2px solid var(--accent);
	box-shadow: 0 4px 10px rgba(0,0,0,0.2);
	cursor: pointer;
	transform-origin: center;
	transition: transform 0.2s ease-out, opacity 0.2s ease;
}
.zoom-btn-sm:hover { opacity: 0.7; }
.zoom-btn-sm.scale-out { transform: scale(0); pointer-events: none; }

.zoom-btn-light   { background-image: url("../images/light.png"); }
.zoom-btn-dark    { background-image: url("../images/dark.png"); }
.zoom-btn-streets { background-image: url("../images/streets.png"); }
.zoom-btn-outdoors{ background-image: url("../images/outdoors.png"); }
.zoom-btn-satellite{ background-image: url("../images/satellite.png"); }

/* ---------- modal ---------- */

.modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 30;
	background-color: rgba(0,0,0,0.5);
}
.modal-content {
	background-color: #fefefe;
	margin: 12% auto;
	padding: 20px;
	border-radius: 8px;
	width: min(360px, 90vw);
	text-align: center;
}
.modal-content img { max-width: 100%; }
.modal-content p { font-size: 13px; color: #475569; text-align: left; }
.close {
	color: #aaa;
	float: right;
	font-size: 26px;
	font-weight: bold;
	cursor: pointer;
	line-height: 1;
}
.close:hover { color: #000; }

/* ---------- maplibre chrome tweaks ---------- */

.maplibregl-popup { max-width: 300px; font: 12px/18px 'Helvetica Neue', Arial, sans-serif; }
.maplibregl-popup-content { background-color: var(--brand); color: white; border-radius: 6px; padding: 10px 12px; }
.maplibregl-popup-tip { border-top-color: var(--brand) !important; border-bottom-color: var(--brand) !important; }
.maplibregl-ctrl-group > .maplibregl-ctrl-icon > button { width: 24px !important; height: 24px !important; }

/* ---------- mobile ---------- */

@media (max-width: 720px) {
	#menuToggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 34px; height: 34px;
		border-radius: 6px;
		border: none;
		background: rgba(255,255,255,0.2);
		color: white;
		font-size: 18px;
		cursor: pointer;
	}
	#sidePanel {
		left: 0; right: 0; top: 50px;
		width: auto;
		max-height: 60vh;
		border-radius: 0 0 10px 10px;
		transform: translateY(-120%);
		transition: transform 0.2s ease;
	}
	#sidePanel.open { transform: translateY(0); }
	#actionStack { top: auto; bottom: 20px; right: 10px; }
}