/* Map view, toolbar and Leaflet-specific styles */

.map-panel {
	flex: 1;
	position: relative;
	min-height: 0;
}

.map-container {
	width: 100%;
	height: calc(100vh - 72px); /* Full viewport minus fixed header height */
	position: relative;
	z-index: 2;
	background: transparent;
}

.map-zoom-hint {
	position: absolute;
	top: var(--space-6);
	left: 50%;
	transform: translateX(-50%);
	background: rgba(17, 17, 17, 0.92);
	color: var(--text-secondary);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--space-3);
	box-shadow: var(--shadow-lg);
	font-size: var(--text-sm);
	z-index: 600;
	display: flex;
	align-items: center;
	gap: var(--space-2);
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.map-zoom-hint.hidden {
	opacity: 0;
	visibility: hidden;
}

.map-source-credit {
	position: absolute;
	bottom: var(--space-4);
	left: var(--space-4);
	/* Liquid glass styling to match toolbar */
	--glass-border: rgba(255,255,255,0.35);
	--glass-inner-shadow: rgba(255,255,255,0.6);
	background:
		linear-gradient(155deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.25) 40%, rgba(255,255,255,0.15) 100%) padding-box,
		radial-gradient(circle at 30% 10%, rgba(139,92,246,0.25), transparent 60%) border-box;
	border: 1px solid var(--glass-border);
	backdrop-filter: blur(14px) saturate(160%);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	box-shadow:
		0 8px 18px -4px rgba(0,0,0,0.25),
		0 2px 4px rgba(0,0,0,0.18),
		inset 0 0 0 1px rgba(255,255,255,0.6),
		inset 0 0 22px -6px rgba(139,92,246,0.35);
	color: var(--text-primary);
	border-radius: var(--space-3);
	padding: var(--space-2) var(--space-3);
	font-size: var(--text-xs);
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	z-index: 500;
	animation: glassFadeIn 0.6s ease;
}

.map-source-credit a {
	color: var(--brand-primary);
	text-decoration: none;
}

.map-source-credit a:hover {
	text-decoration: underline;
}


/* Dark theme adjustments */
.theme-dark .map-source-credit {
	background:
		linear-gradient(155deg, rgba(17,24,39,0.75) 0%, rgba(17,24,39,0.45) 50%, rgba(17,24,39,0.35) 100%) padding-box,
		radial-gradient(circle at 30% 10%, rgba(139,92,246,0.22), transparent 60%) border-box;
	border-color: rgba(255,255,255,0.22);
	box-shadow:
		0 10px 22px -6px rgba(0,0,0,0.5),
		0 3px 8px rgba(0,0,0,0.35),
		inset 0 0 0 1px rgba(255,255,255,0.25),
		inset 0 0 22px -8px rgba(139,92,246,0.35);
	color: #e5e7eb;
}

.theme-dark .map-source-credit a { color: #a78bfa; }

/* legend styles removed */

.map-type-toolbar {
	position: absolute;
	top: var(--space-3);
	left: 50%;
	transform: translateX(-50%);
	z-index: 600;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--space-4);
	width: min(800px, calc(100vw - 24px));
	--glass-bg: rgba(255,255,255,0.45);
	--glass-border: rgba(255,255,255,0.35);
	--glass-inner-shadow: rgba(255,255,255,0.6);
	background:
		linear-gradient(155deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.25) 40%, rgba(255,255,255,0.15) 100%) padding-box,
		radial-gradient(circle at 30% 10%, rgba(139,92,246,0.25), transparent 60%) border-box;
	border: 1px solid var(--glass-border);
	box-shadow:
		0 8px 18px -4px rgba(0,0,0,0.25),
		0 2px 4px rgba(0,0,0,0.18),
		inset 0 0 0 1px rgba(255,255,255,0.6),
		inset 0 0 22px -6px rgba(139,92,246,0.4);
	backdrop-filter: blur(18px) saturate(160%);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	transition: box-shadow 0.35s ease, transform 0.3s ease, background 0.4s ease, border-color 0.4s ease;
	animation: glassFadeIn 0.6s ease;
}

@keyframes glassFadeIn {
	0% { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(.92); }
	60% { opacity: 1; }
	100% { transform: translateX(-50%) translateY(0) scale(1); }
}

.map-type-toolbar:hover {
	box-shadow:
		0 12px 30px -6px rgba(0,0,0,0.35),
		0 4px 12px rgba(0,0,0,0.25),
		inset 0 0 0 1px var(--glass-inner-shadow),
		inset 0 0 32px -10px rgba(139,92,246,0.55),
		0 0 0 1.5px rgba(139,92,246,0.35);
	transform: translateX(-50%) translateY(-2px);
}

.map-type-toolbar::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(140deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.15) 40%, rgba(255,255,255,0.05) 70%) padding-box;
	pointer-events: none;
	opacity: 0.9;
	mix-blend-mode: overlay;
}

.map-type-toolbar::after {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	right: 2px;
	bottom: 2px;
	border-radius: inherit;
	background: radial-gradient(circle at 25% 15%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 55%),
		linear-gradient(165deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 55%);
	filter: blur(12px);
	opacity: 0.4;
	pointer-events: none;
}

/* Chip refinements for glass surface harmony */
.map-type-toolbar .bt-chip {
	background: rgba(255,255,255,0.35);
	color: #1e293b;
	border: 1px solid rgba(255,255,255,0.45);
	box-shadow: 0 2px 6px rgba(0,0,0,0.12), inset 0 0 0 1px rgba(255,255,255,0.4);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.map-type-toolbar .bt-chip:hover {
	background: rgba(255,255,255,0.55);
	border-color: rgba(139,92,246,0.6);
	color: #0f172a;
	box-shadow: 0 6px 14px rgba(0,0,0,0.18), inset 0 0 0 1px rgba(255,255,255,0.5);
}

.map-type-toolbar .bt-chip.active {
	background: linear-gradient(145deg, rgba(139,92,246,0.85), rgba(168,85,247,0.85));
	color: #fff;
	border-color: rgba(255,255,255,0.65);
	box-shadow: 0 10px 20px -4px rgba(139,92,246,0.5), 0 4px 10px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.55);
}

/* Search input glass adaptation */
.map-type-toolbar .map-type-search {
	background: rgba(255,255,255,0.42);
	border: 1px solid rgba(255,255,255,0.5);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55), 0 4px 12px rgba(0,0,0,0.18);
}

.map-type-toolbar .map-type-search:hover,
.map-type-toolbar .map-type-search:focus-within {
	background: rgba(255,255,255,0.62);
	border-color: rgba(139,92,246,0.65);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7), 0 8px 20px rgba(0,0,0,0.28);
}

.map-type-toolbar .map-type-search input {
	color: #0f172a;
}

.map-type-toolbar .map-type-search input::placeholder {
	color: rgba(30,41,59,0.55);
}

.map-type-toolbar .map-type-search button {
	background: rgba(139,92,246,0.18);
	color: #5b21b6;
	border: 1px solid rgba(139,92,246,0.4);
}

.map-type-toolbar .map-type-search button:hover {
	background: rgba(139,92,246,0.32);
	color: #4c1d95;
}

/* Dark theme tuning for glass toolbar */
.theme-dark .map-type-toolbar {
	background:
		linear-gradient(155deg, rgba(17,24,39,0.82) 0%, rgba(15,23,42,0.65) 45%, rgba(2,6,23,0.5) 100%) padding-box,
		radial-gradient(circle at 30% 10%, rgba(124,58,237,0.35), transparent 60%) border-box;
	border: 1px solid rgba(148,163,184,0.35);
	box-shadow:
		0 10px 24px -6px rgba(0,0,0,0.5),
		0 4px 12px rgba(0,0,0,0.35),
		inset 0 0 0 1px rgba(255,255,255,0.06),
		inset 0 0 22px -8px rgba(124,58,237,0.45);
}

.theme-dark .map-type-toolbar::before {
	background: linear-gradient(140deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.02) 70%) padding-box;
	opacity: 1;
}

.theme-dark .map-type-toolbar::after {
	background: radial-gradient(circle at 25% 15%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 55%),
		linear-gradient(165deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 55%);
}

.theme-dark .map-type-toolbar .bt-chip {
	background: rgba(15,23,42,0.7);
	color: #e2e8f0;
	border: 1px solid rgba(148,163,184,0.35);
	box-shadow: 0 2px 6px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.04);
}

.theme-dark .map-type-toolbar .bt-chip:hover {
	background: rgba(30,41,59,0.85);
	border-color: rgba(139,92,246,0.65);
	color: #f8fafc;
}

.theme-dark .map-type-toolbar .map-type-search {
	background: rgba(2,6,23,0.75);
	border: 1px solid rgba(148,163,184,0.35);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 4px 12px rgba(0,0,0,0.35);
}

.theme-dark .map-type-toolbar .map-type-search:hover,
.theme-dark .map-type-toolbar .map-type-search:focus-within {
	background: rgba(15,23,42,0.9);
	border-color: rgba(139,92,246,0.65);
}

.theme-dark .map-type-toolbar .map-type-search input {
	color: var(--text-primary);
}

.theme-dark .map-type-toolbar .map-type-search input::placeholder {
	color: rgba(226,232,240,0.6);
}

.theme-dark .map-type-toolbar .map-type-search button {
	background: rgba(124,58,237,0.25);
	color: #ede9fe;
	border: 1px solid rgba(124,58,237,0.45);
}

.theme-dark .map-type-toolbar .map-type-search button:hover {
	background: rgba(124,58,237,0.38);
}

.map-type-chip-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
}


.map-type-subrow {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2);
	padding-top: var(--space-1);
}
.bt-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--space-2);
	border: 1px solid rgba(148, 163, 184, 0.35);
	background: rgba(15, 23, 42, 0.88);
	color: #e2e8f0;
	font-size: var(--text-xs);
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border 0.18s ease;
}

.bt-chip .chip-plus {
	margin-left: 6px;
	opacity: 0.8;
	font-weight: 700;
	font-size: 12px;
}

.bt-chip.subchip {
	background: rgba(255,255,255,0.35);
	color: #0f172a;
	border-color: rgba(255,255,255,0.55);
}

.bt-chip:hover {
	transform: translateY(-2px) scale(1.05);
	background: rgba(30, 41, 59, 0.95);
	border-color: rgba(139, 92, 246, 0.55);
	box-shadow: 0 8px 18px rgba(15, 23, 42, 0.35);
}

.bt-chip.active {
	border-color: rgba(139, 92, 246, 0.8);
	background: rgba(124, 58, 237, 0.22);
	color: #f8fafc;
}

/* First-time instruction bubble */
.map-intro-bubble {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, 10px);
	min-width: 260px;
	max-width: 520px;
	padding: 12px 14px;
	border-radius: 12px;
	background: rgba(255,255,255,0.95);
	border: 1px solid rgba(148,163,184,0.5);
	box-shadow: 0 12px 30px -6px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.25);
	color: #0f172a;
	z-index: 700;
}
.theme-dark .map-intro-bubble {
	background: rgba(2,6,23,0.92);
	border-color: rgba(148,163,184,0.35);
	color: #e2e8f0;
}
.map-intro-bubble .map-intro-title { font-weight: 700; margin-bottom: 6px; font-size: 14px; }
.map-intro-bubble ul { margin: 6px 0 10px; padding-left: 18px; font-size: 12px; }
.map-intro-bubble li { margin: 4px 0; }
.map-intro-bubble .map-intro-ok {
	border: 1px solid rgba(139,92,246,0.5);
	background: rgba(139,92,246,0.15);
	color: #4c1d95;
	padding: 6px 10px;
	border-radius: 8px;
	font-size: 12px;
	cursor: pointer;
}
.theme-dark .map-intro-bubble .map-intro-ok { color: #ede9fe; background: rgba(124,58,237,0.25); }

.map-type-search {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--space-2);
	border: 1px solid rgba(148, 163, 184, 0.35);
	background: rgba(15, 23, 42, 0.92);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border 0.18s ease;
}

.map-type-search:hover,
.map-type-search:focus-within {
	transform: translateY(-1px) scale(1.04);
	border-color: rgba(139, 92, 246, 0.65);
	box-shadow: 0 10px 20px rgba(15, 23, 42, 0.35);
}

.map-type-search-icon {
	font-size: var(--text-base);
	color: var(--text-secondary);
}

.map-type-search input {
	flex: 1;
	background: transparent;
	border: none;
	color: var(--text-primary);
	font-size: var(--text-xs);
	font-weight: 500;
	outline: none;
	min-width: 120px;
	caret-color: var(--brand-primary);
}

.map-type-search input::placeholder {
	color: rgba(226, 232, 240, 0.65);
}

.map-type-search button {
	border: none;
	background: rgba(124, 58, 237, 0.2);
	color: #ede9fe;
	font-size: var(--text-xs);
	font-weight: 600;
	padding: var(--space-1) var(--space-3);
	border-radius: var(--space-2);
	cursor: pointer;
	transition: background 0.18s ease, transform 0.18s ease;
}

.map-type-search button:hover {
	background: rgba(124, 58, 237, 0.35);
	transform: translateY(-1px);
}

.leaflet-container {
	background: transparent !important;
}

.leaflet-container {
	background: var(--bg-secondary);
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: var(--bg-tertiary);
	color: var(--text-primary);
	border: 1px solid var(--border-subtle);
}

.leaflet-control-zoom a {
	background: var(--bg-tertiary);
	color: var(--text-primary);
	border: 1px solid var(--border-subtle);
}

.leaflet-control-zoom a:hover {
	background: var(--bg-secondary);
}