/**
 * Trail Manager — POI map markers, category legend & popups.
 * Includes the base marker styles formerly orphaned in leaflet-custom.css.
 */

.leaflet-container {
	font-family: inherit !important;
}

/* ---------- Base pins (start / end / scrubber) ---------- */
.tm-map-marker-pin {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	border: 2px solid #fff;
	box-shadow: 0 2px 6px rgba(0,0,0,.35);
	box-sizing: border-box;
}
.tm-marker-start { background-color: #16A34A; }
.tm-marker-end   { background-color: #DC2626; }
.tm-marker-scrubber {
	background-color: #D97706;
	width: 18px; height: 18px;
	border: 3px solid #fff;
	box-shadow: 0 0 8px rgba(217,119,6,.8);
}

/* ---------- POI markers ---------- */
.tm-poi-marker {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px; height: 26px;
	border-radius: 50% 50% 50% 4px;
	transform: rotate(-45deg);
	border: 2px solid #fff;
	box-shadow: 0 2px 5px rgba(0,0,0,.3);
	background: var(--tm-poi-color, #2563EB);
	box-sizing: border-box;
	transition: transform .12s ease, box-shadow .12s ease;
}
.tm-poi-marker svg {
	width: 14px; height: 14px;
	transform: rotate(45deg);
	fill: #fff;
	display: block;
}
.tm-poi-marker .tm-poi-glyph {
	transform: rotate(45deg);
	font-size: 12px;
	font-weight: 800;
	color: #fff;
	line-height: 1;
}
.leaflet-marker-icon:hover .tm-poi-marker {
	transform: rotate(-45deg) scale(1.18);
	box-shadow: 0 4px 10px rgba(0,0,0,.4);
	z-index: 500;
}

/* Category colours */
.tm-poi-shelter         { --tm-poi-color: #B45309; }
.tm-poi-firepit         { --tm-poi-color: #DC2626; }
.tm-poi-picnic-site     { --tm-poi-color: #65A30D; }
.tm-poi-swimming        { --tm-poi-color: #0891B2; }
.tm-poi-water-spring    { --tm-poi-color: #0EA5E9; }
.tm-poi-viewpoint       { --tm-poi-color: #7C3AED; }
.tm-poi-historic-site   { --tm-poi-color: #78716C; }
.tm-poi-information     { --tm-poi-color: #2563EB; }
.tm-poi-restroom        { --tm-poi-color: #64748B; }
.tm-poi-restaurant-cafe { --tm-poi-color: #EA580C; }
.tm-poi-campsite        { --tm-poi-color: #16A34A; }
.tm-poi-parking-lot     { --tm-poi-color: #475569; }
.tm-poi-bus-stop        { --tm-poi-color: #0D9488; }
.tm-poi-train-station   { --tm-poi-color: #0F766E; }
.tm-poi-trailhead       { --tm-poi-color: #1E4D2B; }
.tm-poi-warning         { --tm-poi-color: #D97706; }
.tm-poi-activity        { --tm-poi-color: #DB2777; }
.tm-poi-nature-reserve  { --tm-poi-color: #15803D; }

/* Warnings sit on top of everything else and carry a halo. */
.tm-poi-marker.tm-poi-warning {
	box-shadow: 0 0 0 4px rgba(217, 119, 6, .28), 0 2px 6px rgba(0,0,0,.35);
}

/* ---------- Legend / filter bar ---------- */
.tm-map-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 12px 0 0;
	padding: 12px;
	background: #F8FAFC;
	border: 1px solid #E2E8F0;
	border-radius: 8px;
}
.tm-legend-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px 5px 6px;
	font-size: 12px;
	font-weight: 600;
	color: #334155;
	background: #fff;
	border: 1px solid #CBD5E1;
	border-radius: 999px;
	cursor: pointer;
	user-select: none;
	transition: background .12s, border-color .12s, opacity .12s;
	font-family: inherit;
	line-height: 1.4;
}
.tm-legend-chip:hover { border-color: #94A3B8; background: #F1F5F9; }
.tm-legend-chip[aria-pressed="false"] { opacity: .45; background: #F1F5F9; }
.tm-legend-chip[aria-pressed="false"] .tm-legend-swatch { filter: grayscale(1); }
.tm-legend-chip:focus-visible { outline: 2px solid #1E4D2B; outline-offset: 2px; }
.tm-legend-swatch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px; height: 18px;
	border-radius: 50%;
	background: var(--tm-poi-color, #2563EB);
	flex: 0 0 auto;
}
.tm-legend-swatch svg { width: 11px; height: 11px; fill: #fff; display: block; }
.tm-legend-swatch .tm-poi-glyph { font-size: 10px; font-weight: 800; color: #fff; line-height: 1; }
.tm-legend-count { color: #64748B; font-weight: 500; font-variant-numeric: tabular-nums; }
.tm-legend-actions { display: flex; gap: 6px; margin-left: auto; }
.tm-legend-action {
	background: none; border: none; padding: 5px 8px;
	font-size: 12px; font-weight: 600; color: #1E4D2B;
	cursor: pointer; text-decoration: underline; font-family: inherit;
}
.tm-legend-action:hover { color: #14361F; }

/* ---------- POI popup ---------- */
.tm-poi-popup { padding: 12px 14px; min-width: 190px; max-width: 260px; }
.tm-poi-popup-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tm-poi-popup-badge {
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; border-radius: 50%;
	background: var(--tm-poi-color, #2563EB); flex: 0 0 auto;
}
.tm-poi-popup-badge svg { width: 12px; height: 12px; fill: #fff; display: block; }
.tm-poi-popup-badge .tm-poi-glyph { font-size: 11px; font-weight: 800; color: #fff; }
.tm-poi-popup-title { font-size: 14px; font-weight: 700; color: #0F172A; margin: 0; line-height: 1.3; }
.tm-poi-popup-type { font-size: 11px; color: #64748B; text-transform: uppercase; letter-spacing: .03em; margin: 0 0 8px; }
.tm-poi-popup-row { font-size: 12px; color: #475569; margin: 3px 0; display: flex; gap: 6px; }
.tm-poi-popup-row strong { color: #334155; font-weight: 600; }
.tm-poi-popup-link {
	display: inline-block; margin-top: 8px; font-size: 12px;
	font-weight: 600; color: #1E4D2B; text-decoration: underline;
}

@media (max-width: 600px) {
	.tm-map-legend { padding: 10px; gap: 5px; }
	.tm-legend-chip { font-size: 11px; padding: 4px 8px 4px 5px; }
	.tm-legend-actions { width: 100%; margin-left: 0; justify-content: flex-end; }
}

/* ---------- Marker clusters ---------- */
.tm-poi-cluster-wrap { background: none !important; border: none !important; }
.tm-poi-cluster {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%; height: 100%;
	border-radius: 50%;
	background: #1E4D2B;
	border: 3px solid #fff;
	box-shadow: 0 2px 8px rgba(0,0,0,.35);
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	box-sizing: border-box;
	transition: transform .12s ease;
}
.tm-poi-cluster::after {
	content: '';
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	background: rgba(30, 77, 43, .18);
	z-index: -1;
}
.tm-poi-cluster-wrap:hover .tm-poi-cluster { transform: scale(1.1); }

/* markercluster's animation wrapper */
.leaflet-cluster-anim .leaflet-marker-icon,
.leaflet-cluster-anim .leaflet-marker-shadow {
	transition: transform .25s ease-out, opacity .25s ease-in;
}

/* ---------- Trail start markers (homepage / explorer overview maps) ---------- */
.tm-trail-start-pin {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px; height: 30px;
	border-radius: 50% 50% 50% 4px;
	transform: rotate(-45deg);
	background: #1A4D2E;
	border: 2.5px solid #fff;
	box-shadow: 0 2px 6px rgba(0,0,0,.35);
	box-sizing: border-box;
	transition: transform .12s ease, box-shadow .12s ease;
}
.tm-trail-start-pin svg {
	width: 16px; height: 16px;
	transform: rotate(45deg);
	fill: #fff;
	display: block;
}
.leaflet-marker-icon:hover .tm-trail-start-pin {
	transform: rotate(-45deg) scale(1.15);
	box-shadow: 0 4px 12px rgba(0,0,0,.45);
}
.tm-poi-popup-badge.tm-trail-badge { background: #1A4D2E; }

/* ---------- Single place location map ---------- */
.tm-place-map {
	width: 100%;
	height: 320px;
	border-radius: 8px;
	overflow: hidden;
	background: #E2E8F0;
}
.tm-place-coords {
	margin: 10px 0 0;
	font-size: 12px;
	color: #64748B;
	font-variant-numeric: tabular-nums;
}
.tm-place-coords a { color: #1E4D2B; font-weight: 600; }

/* ---------- Grouped POI sidebar list ---------- */
.v-poi-total {
	display: inline-block; margin-left: 6px; padding: 1px 7px;
	font-size: 11px; font-weight: 700; color: #fff;
	background: #1E4D2B; border-radius: 999px; vertical-align: middle;
}
.v-poi-group { border-bottom: 1px solid rgba(100,116,139,.18); }
.v-poi-group:last-of-type { border-bottom: none; }
.v-poi-summary {
	display: flex; align-items: center; gap: 8px;
	padding: 9px 0; cursor: pointer; list-style: none;
	font-size: 13px; font-weight: 600; color: #334155;
}
.v-poi-summary::-webkit-details-marker { display: none; }
.v-poi-summary::after {
	content: '▸'; margin-left: auto; color: #94A3B8;
	font-size: 11px; transition: transform .15s ease;
}
.v-poi-group[open] > .v-poi-summary::after { transform: rotate(90deg); }
.v-poi-summary:hover { color: #1E4D2B; }
.v-poi-label { flex: 0 1 auto; }
.v-poi-count {
	font-size: 11px; font-weight: 600; color: #64748B;
	background: rgba(100,116,139,.12); border-radius: 999px; padding: 1px 7px;
	font-variant-numeric: tabular-nums;
}
.v-poi-list { list-style: none; margin: 0 0 8px; padding: 0 0 0 26px; }
.v-poi-row {
	display: flex; align-items: baseline; gap: 8px;
	padding: 4px 0; font-size: 12.5px;
}
.v-poi-name { color: #334155; text-decoration: none; flex: 1 1 auto; }
.v-poi-name:hover { color: #1E4D2B; text-decoration: underline; }
.v-poi-dist {
	color: #94A3B8; font-size: 11px; white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* ---------- Felanmälan (trail fault report) form ---------- */
.v-report-intro { font-size: 14px; color: #475569; margin: 0 0 16px; line-height: 1.6; }
.v-report-notice {
	padding: 12px 14px; border-radius: 8px; font-size: 14px;
	margin: 0 0 16px; line-height: 1.5;
}
.v-report-ok  { background: #ECFDF5; border: 1px solid #A7F3D0; color: #065F46; }
.v-report-bad { background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; }
.v-report-hp {
	position: absolute !important; width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.v-report-form p { margin: 0 0 14px; }
.v-report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.v-report-form label {
	display: block; font-size: 12px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .03em;
	color: #64748B; margin-bottom: 5px;
}
.v-report-form input[type="text"],
.v-report-form input[type="email"],
.v-report-form select,
.v-report-form textarea {
	width: 100%; padding: 10px 12px; font: inherit; font-size: 14px;
	color: #0F172A; background: #fff;
	border: 1px solid #CBD5E1; border-radius: 8px;
	box-sizing: border-box; transition: border-color .12s, box-shadow .12s;
}
.v-report-form textarea { resize: vertical; min-height: 110px; }
.v-report-form input:focus,
.v-report-form select:focus,
.v-report-form textarea:focus {
	outline: none; border-color: #1E4D2B;
	box-shadow: 0 0 0 3px rgba(30, 77, 43, .15);
}
.v-report-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.v-report-privacy { font-size: 12px; color: #94A3B8; }
@media (max-width: 640px) {
	.v-report-grid { grid-template-columns: 1fr; }
}

.tm-poi-popup-desc {
	margin: 0 0 8px;
	font-size: 13px;
	line-height: 1.5;
	color: #334155;
	white-space: pre-line;
}