/* -----------------------
       Visual theme: White + Navy
       ----------------------- */
:root {
	--navy: #0b3b66;
	--accent: #2b74b8;
	--muted: #6c768a;
	--card-border: #e6eaf2;
	--glass: rgba(255, 255, 255, 0.21);
}

body {
	background: #f6f8fb;
}

/* Map canvas full width */
#map-canvas {
	width: 100%;
	height: calc(100vh - 220px);
	/* responsive-ish: leave space for header + table */
	min-height: 550px;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 6px 20px rgba(15, 30, 60, 0.06);
	border: 1px solid var(--card-border);
}

/* Toggle filter button */
.filter-toggle-btn {
	position: absolute;
	top: 10px;
	left: 18px;
	z-index: 9998;
	background: var(--navy);
	color: #fff;
	border: none;
	padding: 4px 10px;
	border-radius: 8px;
	box-shadow: 0 6px 18px rgba(11, 59, 102, 0.12);
	font-weight: 400;
	margin: 0px 0px 0px 10px;
}

.filter-toggle-btn:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(43, 116, 184, 0.18);
}

.filter-toggle-btn:hover {
	background: linear-gradient(180deg, var(--glass), #ffffff);
}

/* Floating Filter Panel */
.filter-floating {
	position: absolute;
	top: 50px;
	left: 18px;
	z-index: 9999;
	width: 300px;
	transform: translateX(-10px);
	transition: transform 0.32s ease, opacity 0.28s ease;
	opacity: 0;
	pointer-events: none;
	margin: 10px 0px 0px 5px;
}

.filter-floating.active {
	transform: translateX(0);
	opacity: 1;
	pointer-events: auto;
}

.filter-card {
	background: linear-gradient(180deg, var(--glass), #ffffff);
	border: 1px solid var(--card-border);
	border-radius: 12px;
	padding: 14px;
	box-shadow: 0 10px 30px rgba(11, 59, 102, 0.06);
	backdrop-filter: blur(3px);
}

.filter-card h6 {
	margin: 0 0 8px 0;
	color: var(--navy);
	font-weight: 700;
}

.filter-card .form-control {
	border-radius: 8px;
	border: 1px solid #e6eaf2;
	background: #fff;
	padding: 6px 10px;
	font-size: 13px;
}

.filter-card .btn {
	border-radius: 8px;
	font-weight: 600;
}

/* Ctrl-scroll hint */
.ctrl-zoom-hint {
	position: absolute;
	top: 10px;
	right: 40%;
	z-index: 9998;
	background: rgba(15, 30, 60, 0.85);
	color: #fff;
	padding: 8px 12px;
	border-radius: 8px;
	font-size: 13px;
	opacity: 0;
	transition: opacity 0.2s;
	pointer-events: none;
}

/* Loader overlay */
.loader-overlay {
	position: absolute;
	inset: 0 0 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.85);
	z-index: 10000;
}

.loader {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 8px 30px rgba(11, 59, 102, 0.08);
	border: 1px solid #e6eaf2;
	font-weight: 600;
	color: var(--navy);
}

.spinner {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid rgba(11, 59, 102, 0.15);
	border-top-color: var(--navy);
	animation: spin 1s linear infinite;
}

.loader-text {
	font-size: 13px;
	color: var(--muted);
	font-weight: 600;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

/* Table styles */
.table-wrap {
	background: #fff;
	border-radius: 8px;
	padding: 12px;
	margin-top: 18px;
	border: 1px solid var(--card-border);
	box-shadow: 0 6px 18px rgba(11, 59, 102, 0.03);
}

/* Make leaflet controls sit above everything but not overlap header */
.leaflet-control-container {
	z-index: 9980;
}

/* Responsive */
@media (max-width: 991px) {
	.filter-floating {
		width: 90%;
		left: 4%;
		top: 50px;
	}

	#map-canvas {
		height: 60vh;
	}

	.filter-toggle-btn {
		top: 12px;
		left: 12px;
	}
}

/* Thumbnail layer control */
.leaflet-control.layer-thumbs {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
		Arial;
}

.layer-thumbs .thumbs {
	display: flex;
	gap: 8px;
	padding: 8px;
}

.layer-thumb {
	width: 70px;
	height: 48px;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 6px 14px rgba(11, 59, 102, 0.08);
	cursor: pointer;
	border: 2px solid transparent;
	background-size: cover;
	background-position: center;
}

.layer-thumb.active {
	border-color: var(--navy);
	transform: translateY(-2px);
}

.layer-thumb .label {
	display: block;
	font-size: 11px;
	text-align: center;
	margin-top: 6px;
	color: var(--muted);
}