/* Highlight selected photo thumbnails */
.photo-thumb.selected img {
	outline: 3px solid var(--accent-strong);
	outline-offset: -2px;
	box-shadow: 0 0 0 2px var(--accent-strong-glow);
}

/* Ensure legend section titles are white in dark mode (override earlier rules) */
@media (prefers-color-scheme: dark) {
	.type-filter-control .tf-title { color: var(--white) !important; }
}
:root{
	--bg:#f4f4f6;
	--muted:#666666;
	--text:#111213;
	--accent:#2b7cff;
	--card:#ffffff;
	--card-contrast:#ffffff;
	--border: #e3e6ea;
	--popup-close-color: var(--text);
	--date-indicator-filter: none;
	--white:#ffffff;
	--black:#000000;
	--gray-600:#444444;
	--accent-strong:#2196f3;
	--accent-strong-glow: rgba(33,150,243,0.27);
	--white-alpha-03: rgba(255,255,255,0.03);
	--white-alpha-06: rgba(255,255,255,0.06);
	--white-alpha-08: rgba(255,255,255,0.08);
	--white-alpha-12: rgba(255,255,255,0.12);
	--white-alpha-15: rgba(255,255,255,0.15);
	--white-alpha-28: rgba(255,255,255,0.28);
	--white-alpha-32: rgba(255,255,255,0.32);
	--white-alpha-45: rgba(255,255,255,0.45);
	--white-alpha-95: rgba(255,255,255,0.95);
	--black-alpha-12: rgba(0,0,0,0.12);
	--black-alpha-28: rgba(0,0,0,0.28);
	--black-alpha-45: rgba(0,0,0,0.45);
	--black-alpha-55: rgba(0,0,0,0.55);
	--black-alpha-60: rgba(0,0,0,0.6);
	--black-alpha-92: rgba(0,0,0,0.92);
	--ink-alpha-04: rgba(2,6,23,0.04);
	--ink-alpha-06: rgba(2,6,23,0.06);
	--ink-alpha-08: rgba(2,6,23,0.08);
	--ink-alpha-12: rgba(2,6,23,0.12);
	--ink-alpha-30: rgba(2,6,23,0.3);
	--ink-alpha-60: rgba(2,6,23,0.6);
	--ink-alpha-75: rgba(2,6,23,0.75);
	--blue-alpha-04: rgba(43,124,255,0.04);
	--blue-alpha-12: rgba(43,124,255,0.12);
	--blue-alpha-20: rgba(43,124,255,0.20);
	--blue-alpha-28: rgba(43,124,255,0.28);
	--upload-blue:#1741a3;
	--upload-blue-border:#133374;
	--upload-blue-hover:#12367f;
	--shadow: 0 10px 26px rgba(2,6,23,0.12);
	--btn-hover-ring: rgba(43,124,255,0.20);
	--btn-active-ring: rgba(43,124,255,0.30);
	--btn-focus-ring: rgba(43,124,255,0.40);
}
@media (prefers-color-scheme: dark) {
  :root{
    --bg:#0b1220;
    --muted:#9aa6b2;
    --text:#e6eef6;
    --accent:#5aa1ff;
	--card:#0b1320;
	/* --card-contrast:#163043; */
	--card-contrast:#2e3033;
	--border:#020810;
	--popup-close-color: var(--white);
	--date-indicator-filter: invert(1) contrast(150%) brightness(120%);
	--shadow: 0 18px 30px rgba(0,0,0,0.55);
	--btn-hover-ring: rgba(90,161,255,0.35);
	--btn-active-ring: rgba(90,161,255,0.50);
	--btn-focus-ring: rgba(90,161,255,0.65);
  }
	/* Keep legend section titles readable in dark mode using white */
	.type-filter-control .tf-title { color: var(--white); }
}

#root, html { height: 100%; }
*{box-sizing:border-box}
html, body { overscroll-behavior: none; }
body {margin:0;display:flex;height:100%;min-height:100%;font-family:Inter,ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; background:var(--bg); color:var(--text); touch-action:none}
#map { touch-action: pan-x pan-y pinch-zoom; }
#sidebar, #sidebarInner { touch-action: pan-y; }
.type-filter-control, .legend-open-toggle, .legend-toggle, .sidebar-toggle, .sidebar-open-toggle { touch-action: manipulation; }
@supports (height: 100dvh) {
	.map-wrapper { min-height: 100dvh; }
}
#sidebar {
	width:min(340px,55vw);
	background: var(--bg);
	padding:0;
	border-radius:10px;
	z-index:1500; /* sits above base map but below popup pane */
	position: absolute;
	/* position: fixed; */
  	top: 16px;
	/* anchor the bottom dynamically so the browser computes an explicit height.
	   `--time-slider-height` is set by JS (defaults to 0). This prevents the
	   sidebar from growing underneath the time-slider and makes percent-based
	   children resolve correctly. */
	/* bottom: calc(32px + var(--time-slider-height, 0px)); */
	max-height: calc(100vh - 48px - var(--time-slider-height, 0px));
	height: auto;
	display: flex;
	flex-direction: column;
	left: 16px;
	transition: transform 220ms ease, opacity 180ms ease;
}

/* inner scroll container that holds content and has rounded corners */
#sidebarInner {
	background: var(--bg);
	/* reduce top padding so the title sits closer to the border */
	/* padding: 0px 9px 16px 20px; added an 11px difference here between left and right padding to account for the scrollbar */
	/* padding: 0px 10px 16px 21px; */
	padding: 0;
	border-radius: 10px;
	position: relative;
	/* Ensure the inner panel does not grow beyond the outer sidebar's max-height
	   The outer `#sidebar` sets a max-height; make the inner container respect it. */
	max-height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	border: 1px solid var(--border);
	box-shadow: var(--shadow);
	scrollbar-gutter: stable both-edges;
}

/* Offset scrollbar visually so inner content stays centered */
.sidebar-scroll-content {
	display: flex;
	flex-direction: column;
	padding: 0 12px 16px 12px;
	/* gap: 12px; */
	/* margin-right: -12px; */
}

.sidebar-header {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-bottom: 6px;
	position: relative;
	padding-right: 96px; /* reserve space for action buttons */
}

.top-controls {
	display: flex;
	align-items: center;
	gap: 4px;
	position: absolute;
	top: 12px;
	right: 0px;
}

.top-controls button {
	position: relative;
	z-index: 4;
}

/* hidden state -- slide out to the left */
.sidebar-hidden { transform: translateX(-120%); opacity:0; pointer-events:none; }

/* toggle button in top-left */
.sidebar-toggle {
	order: 2;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background: var(--card-contrast);
	border: 1px solid var(--border);
	color: var(--text);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow);
	cursor: pointer;
	transition: background 180ms ease, transform 100ms ease;
}

.sidebar-toggle:hover { 
	background: color-mix(in srgb, var(--card-contrast) 85%, var(--text) 15%);
}
.sidebar-toggle:active { 
	background: color-mix(in srgb, var(--card-contrast) 70%, var(--text) 30%);
}

/* external open-toggle (shown when sidebar is hidden) */
.sidebar-open-toggle {
	position: fixed;
	top: 16px;
	left: 16px;
	z-index: 1100;
	width: 44px;
	height: 44px;
	border-radius: 8px;
	background: var(--bg);
	border: 1px solid var(--border);
	color: var(--text);
	display: none; /* only shown when sidebar is hidden */
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow);
	cursor: pointer;
	transition: background 180ms ease, transform 100ms ease;
}
/* .sidebar-toggle:hover {
	background: color-mix(in srgb, var(--card-contrast) 85%, var(--text) 15%);
} */

.sidebar-open-toggle:hover { background: color-mix(in srgb, var(--card-contrast) 85%, var(--text) 15%); }
.sidebar-open-toggle:active { transform: translateY(1px); }
.lang-toggle {
	order: 1;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background: var(--card-contrast);
	border: 1px solid var(--border);
	color: var(--text);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow);
	cursor: pointer;
	padding: 0;
	transition: background 180ms ease, transform 100ms ease;
}
.lang-icon,
.info-icon {
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lang-icon img,
.info-icon img {
	width: 100%;
	height: 100%;
	display: block;
}

.lang-toggle:hover {
	background: color-mix(in srgb, var(--card-contrast) 85%, var(--text) 15%);
}

.lang-toggle:active {
	transform: scale(0.95);
	background: color-mix(in srgb, var(--card-contrast) 70%, var(--text) 30%);
}

.info-toggle {
	order: 1;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background: var(--card-contrast);
	border: 1px solid var(--border);
	color: var(--text);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow);
	cursor: pointer;
	padding: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	transition: background 180ms ease, transform 100ms ease;
}

.info-toggle:hover {
	background: color-mix(in srgb, var(--card-contrast) 85%, var(--text) 15%);
}

.info-toggle:active {
	transform: scale(0.95);
	background: color-mix(in srgb, var(--card-contrast) 70%, var(--text) 30%);
}



/* Hide the inside toggle when the sidebar is hidden and show the external open toggle */
#sidebar.sidebar-hidden .sidebar-toggle { display: none; }
#sidebar.sidebar-hidden ~ .sidebar-open-toggle { display: flex; }

/* When the sidebar is visible, hide the external open-toggle */
#sidebar:not(.sidebar-hidden) ~ .sidebar-open-toggle { display: none; }

/* When the toggle sits over the open sidebar, show it as an embedded control
   in the sidebar top-right: give it a visible background, border and shadow
   so the close X is always visible and tappable. */
#sidebar:not(.sidebar-hidden) .sidebar-toggle {
	/* when sidebar is open, ensure the toggle remains visible on top-right */
	background: var(--card-contrast);
	border: 1px solid var(--border);
	box-shadow: var(--shadow);
	color: var(--text) !important;
}
#sidebar:not(.sidebar-hidden) .sidebar-toggle:hover {
	background: color-mix(in srgb, var(--card-contrast) 85%, var(--text) 15%);
}
#sidebar:not(.sidebar-hidden) .sidebar-toggle:active {
	background: color-mix(in srgb, var(--card-contrast) 70%, var(--text) 30%);
}

/* remove focus outline/frame for the toggle */
.sidebar-toggle:focus { outline: none; box-shadow: none; }

/* Scrollbar styling for sidebar inner container */
/* Use CSS variables so dark/light modes can adapt */
:root { --scroll-thumb: rgba(43,124,255,0.12); --scroll-track: rgba(43,124,255,0.04);} 
@media (prefers-color-scheme: dark) {
	:root { --scroll-thumb: rgba(90,161,255,0.12); --scroll-track: rgba(90,161,255,0.03); }
}

/* Scrollbar hover/active variants */
:root { --scroll-thumb-hover: rgba(43,124,255,0.20); --scroll-thumb-active: rgba(43,124,255,0.28); }
@media (prefers-color-scheme: dark) {
	:root { --scroll-thumb-hover: rgba(90,161,255,0.22); --scroll-thumb-active: rgba(90,161,255,0.32); }
}

/* WebKit-based browsers scrollbar styling */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--scroll-track); border-radius: 8px; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 8px; border: 0px solid transparent; }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }
::-webkit-scrollbar-thumb:active { background: var(--scroll-thumb-active); }

/* Firefox scrollbar styling */
* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) var(--scroll-track); }

/* WebKit browsers */
#sidebarInner::-webkit-scrollbar { width: 5px; }
#sidebarInner::-webkit-scrollbar-track { background: transparent; border-radius: 8px; }
#sidebarInner::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 8px; border: 0 solid transparent; background-clip: padding-box; }
#sidebarInner::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }
#sidebarInner::-webkit-scrollbar-thumb:active { background: var(--scroll-thumb-active); }

/* when the sidebar is actively scrolling (wheel/drag), brighten the thumb */
#sidebarInner.scrolling::-webkit-scrollbar-thumb { background: var(--scroll-thumb-active); }
#sidebarInner.scrolling { scrollbar-color: var(--scroll-thumb-active) transparent; }

/* Firefox */
#sidebarInner { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
#map {
	flex: none;
	width: 100%;
	height: 100%;
	overflow: visible; /* allow popups to extend beyond the map bounds */
}
#map.leaflet-container {
	overflow: visible !important; /* override Leaflet's overflow:hidden */
}

/* wrapper fixes the map to the viewport and now also hosts the sidebar so
	Leaflet popups share the same stacking context and can rise above it. */
.map-wrapper { position: fixed; top: 0; left: 0; right: 0; bottom: 0; }

/* Ensure the sidebar remains above the map */
#sidebar { z-index: 1000; }
.point-item {padding:10px;margin:8px 0;background:var(--card-contrast);border:1px solid var(--border);border-radius:8px;transition:background .18s ease,border-color .18s ease,transform .12s ease}
.point-item:hover { background: color-mix(in srgb, var(--card-contrast) 85%, var(--text) 15%); }
.point-item:active { transform: scale(0.98); }
label {display:block;margin:8px 0;color:var(--muted)}
input[type=file] {display:block;margin-top:6px;}

/* Buttons and controls */
button{background:var(--accent);color:var(--white);border:none;padding:8px 10px;border-radius:6px;cursor:pointer}
button[style*="color:#c00"]{background:transparent;color:var(--text);}
input, select {padding:6px 8px;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--text);height:34px;line-height:18px}

/* Unified button interactions: consistent hover/active/focus feedback */
:is(button,
	.sidebar-toggle,
	.section-toggle,
	.sidebar-open-toggle,
	.lang-toggle,
	.legend-toggle,
	.legend-open-toggle,
	.sort-dir-btn,
	.time-slider-control .ts-btn,
	.time-slider-control .ts-arrow) {
	transition: background 180ms ease, box-shadow 160ms ease, transform 100ms ease;
	outline: none;
}
:is(button,
	.sidebar-toggle,
	.section-toggle,
	.sidebar-open-toggle,
	.lang-toggle,
	.legend-toggle,
	.legend-open-toggle,
	.sort-dir-btn,
	.time-slider-control .ts-btn,
	.time-slider-control .ts-arrow):hover {
	box-shadow: var(--shadow);
}
:is(button,
	.sidebar-toggle,
	.section-toggle,
	.sidebar-open-toggle,
	.lang-toggle,
	.legend-toggle,
	.legend-open-toggle,
	.sort-dir-btn,
	.time-slider-control .ts-btn,
	.time-slider-control .ts-arrow):active {
	box-shadow: var(--shadow), 0 0 0 3px var(--btn-active-ring) !important;
}
:is(button,
	.sidebar-toggle,
	.sidebar-open-toggle,
	.lang-toggle,
	.legend-toggle,
	.legend-open-toggle,
	.sort-dir-btn,
	.time-slider-control .ts-btn,
	.time-slider-control .ts-arrow):focus-visible:not(:active) {
	box-shadow: var(--shadow);
	outline: 2px solid var(--border);
	outline-offset: 2px;
}

/* Date input theming: ensure the native date control fits dark/light themes */
input[type="date"] {
	padding:6px 8px;border-radius:6px;border:1px solid var(--border);
	background: var(--card-contrast); color: var(--text); height:34px; line-height:18px;
}
input[type="date"]:focus { outline: none; box-shadow: 0 8px 24px rgba(43,124,255,0.12); border-color: var(--accent); }

/* WebKit date edit text color (ensures the displayed date text uses our theme) */
input[type="date"]::-webkit-datetime-edit, input[type="date"]::-webkit-datetime-edit-fields-wrapper, input[type="date"]::-webkit-datetime-edit-text, input[type="date"]::-webkit-datetime-edit-day-field, input[type="date"]::-webkit-datetime-edit-month-field, input[type="date"]::-webkit-datetime-edit-year-field {
	color: var(--text);
}

/* Calendar icon / picker indicator styling for WebKit browsers. Use a CSS filter
	 variable so we can invert it in dark mode for visibility. */
input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.95;
  filter: var(--date-indicator-filter);
}

/* For Firefox, the calendar icon inherits the color; ensure contrast by setting color */
input[type="date"]::-moz-focus-inner { border: 0; }
/* Ensure placeholder color/readability if any */
input[type="date"]::placeholder { color: var(--muted); }

/* Make the sort select look clickable and remove default caret */

#sortSelect {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: none;
	padding-right: 10px;
	cursor: pointer;
	transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
	/* base control look matches point cards */
	background: var(--card-contrast);
	border: 1px solid var(--border);
	/* slightly smaller to be less dominant than the label */
	font-size: 13px;
	height: 30px;
	padding: 4px 8px;
	  padding-right: 28px; /* space for arrow */
  background-image: url('data:image/svg+xml;utf8,<svg width="12" height="8" viewBox="0 0 12 8" xmlns="http://www.w3.org/2000/svg"><polygon points="6,8 0,0 12,0" fill="currentColor"/></svg>');
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px 8px;
}

#sortSelect:hover, sortSelect:focus {
  transition: none !important;
	box-shadow: 0 8px 24px rgba(43,124,255,0.12);
	background: color-mix(in srgb, var(--card-contrast) 85%, var(--text) 15%);
	outline: none;
  background-image: url('data:image/svg+xml;utf8,<svg width="12" height="8" viewBox="0 0 12 8" xmlns="http://www.w3.org/2000/svg"><polygon points="6,8 0,0 12,0" fill="currentColor"/></svg>');
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px 8px;
}

@media (prefers-color-scheme: dark) {
  #sortSelect, #sortSelect:hover, #sortSelect:focus {
    background-image: url('data:image/svg+xml;utf8,<svg width="12" height="8" viewBox="0 0 12 8" xmlns="http://www.w3.org/2000/svg"><polygon points="6,8 0,0 12,0" fill="white"/></svg>');
  }
}

.sort-dir-btn{
	background:var(--card-contrast);
	border:1px solid var(--border);
	padding:0;
	border-radius:6px;
	cursor:pointer;
	color:var(--text);
	font-weight:700;
	width:30px;
	height:30px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	font-size:0;
	transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

.sort-dir-btn:hover, .sort-dir-btn:focus {
	background: color-mix(in srgb, var(--card-contrast) 85%, var(--text) 15%);
}
.sort-dir-btn:active {
	transform: scale(0.95);
  	/* transition: transform 0.2s; */
	/* background: color-mix(in srgb, var(--card-contrast) 70%, var(--text) 30%); */
}


.sort-dir-btn .sort-arrow-img.desc {
  transform: scaleY(-1);
}

/* iPhone-style toggle switch */
.switch { position: relative; display: inline-block; width:34px; height:18px; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #e3e6ea; border: 0px solid var(--border); border-radius: 999px; transition: background .12s ease, border-color .12s ease; }
@media (prefers-color-scheme: dark) {
	.slider { background: var(--card-contrast); }
}
.slider::before { content: ""; position: absolute; height: 18px; width: 18px; top: 50%; transform: translateY(-50%); background: var(--card); border-radius: 50%; transition: transform .12s ease, background .12s ease; }
@media (prefers-color-scheme: dark) {
	.slider::before { background: var(--white); }
}
.switch input:checked + .slider { background: var(--accent); }
.switch input:checked + .slider::before { transform: translate(16px, -50%); background: var(--white); }

/* Sidebar section layout */
.sidebar-section {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid var(--border);
}
.sidebar-section:first-of-type {
	margin-top: 8px;
	border-top: none;
	padding-top: 0;
}
.sidebar-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.sidebar-section-header h3 {
	margin: 0;
	font-size: 18px;
}
.sidebar-section-body {
	margin-top: 12px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.sidebar-section.is-collapsed .sidebar-section-body {
	display: none;
}
.section-toggle {
	width: 34px;
	height: 34px;
	border-radius: 8px;
	border: 1px solid var(--border);
	background: var(--card-contrast);
	color: var(--text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: var(--shadow);
	font-size:0;
	padding:0;
	font-weight:700;
}

.section-toggle:hover {
	background: color-mix(in srgb, var(--card-contrast) 85%, var(--text) 15%);
}
.section-toggle:active {
	transform: translateY(1px);
	background: color-mix(in srgb, var(--card-contrast) 70%, var(--text) 30%);
}
.section-toggle-icon::before {
	content: '';
	display: block;
	margin: auto;
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 160ms ease;
}
.sidebar-section.is-collapsed .section-toggle-icon::before {
	transform: rotate(-135deg);
	margin: auto;
}
 .photo-album {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	gap: 8px;
	/* max-height: 420px; */
	overflow-y: auto;
	padding: 2px;
	border-radius: 8px;
	background: var(--card);
	border: 1px solid var(--border);
}
.photo-album::-webkit-scrollbar { width: 6px; }
.photo-album::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.photo-album .album-status,
.photo-album .album-empty,
.photo-album .album-error {
	grid-column: 1 / -1;
	text-align: center;
	color: var(--muted);
	font-size: 13px;
	padding: 12px 4px;
}
.album-thumb {
	border: none;
	background: transparent;
	padding: 0;
	margin: 0;
	border-radius: 6px;
	overflow: hidden;
	position: relative;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(2,6,23,0.08);
	transition: transform 120ms ease, box-shadow 120ms ease;
}
.album-thumb:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(2,6,23,0.12); }
.album-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 1 / 1;
}
.album-thumb .album-meta {
	position: absolute;
	left: 4px;
	right: 4px;
	bottom: 4px;
	background: rgba(0,0,0,0.55);
	color: #fff;
	font-size: 11px;
	line-height: 1.2;
	padding: 2px 4px;
	border-radius: 4px;
	text-shadow: 0 1px 2px rgba(0,0,0,0.4);
	pointer-events: none;
}

/* Edit/Dark toggles */
#sidebar label[style] input[type=checkbox]{width:16px;height:16px}

/* Fullscreen photo overlay */
#photoOverlay {
	position: fixed;
	inset: 0;
	background: var(--ink-alpha-75);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: 24px;
}
.photo-stage {
	position: relative;
	flex: 1 1 auto;
	width: 100%;
	height: 100%;
	max-width: calc(100vw - 80px);
	max-height: calc(100vh - 120px);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	touch-action: none;
}
.photo-stage img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 8px;
	box-shadow: 0 12px 40px var(--ink-alpha-60);
	cursor: default;
	user-select: none;
}
#photoOverlay.full {
	align-items: flex-start;
	justify-content: flex-start;
}
#photoOverlay.full .photo-stage {
	max-width: none;
	max-height: none;
	width: 100%;
	height: 100%;
	display: block;
	overflow: auto;
	cursor: default;
	touch-action: pan-x pan-y;
	padding: 0;
}
#photoOverlay.full .photo-stage img {
	max-width: none;
	max-height: none;
	display: block;
	cursor: zoom-out;
}
#photoOverlay .closeBtn {
		position: absolute;
		top: 18px;
		right: 22px;
		background: var(--card);
		border: 1px solid var(--border);
		padding: 6px 10px;
		font-size: 18px;
		cursor: pointer;
		border-radius: 6px;
		color: var(--text);
		box-shadow: 0 6px 18px var(--ink-alpha-12);
		/* move slightly down and left so it's not flush with the popup corner */
		position: absolute !important;
		top: 12px !important;
		right: 16px !important;
}


/* Date badge shown on top of fullscreen photo */

.photo-date-badge {
	position: absolute;
	top: 18px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--black-alpha-55);
	color: var(--white);
	padding: 6px 12px;
	border-radius: 8px;
	font-size: 13px;
	line-height: 1;
	z-index: 10001;
	display: none;
	pointer-events: none;
    box-shadow: 0 6px 18px var(--ink-alpha-30);
}
@media (prefers-color-scheme: dark) {
	.photo-date-badge { background: var(--black-alpha-55); color: var(--white); }
}

/* arrows for fullscreen photo navigation */
.photo-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: var(--black-alpha-45);
	color: var(--white);
	border: none;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	cursor: pointer;
	z-index: 10000;
}
.photo-nav-left { left: 18px; }
.photo-nav-right { right: 18px; }
.photo-nav:hover { background: rgba(0,0,0,0.6); }

.photo-nav:hover { background: var(--black-alpha-60); }

/* photo thumbnail delete button */
.photo-delete-btn {
	position: absolute;
	/* center the delete X on the top-right corner so it extends beyond the thumbnail */
	top: -6px;
	/* nudge left (inwards) so top and right spacing match visually */
	right: 2px;
	transform: none;
	z-index: 10;
	width: 22px;
	height: 22px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 999px;
	color: var(--text);
	cursor: pointer;
	box-shadow: 0 3px 8px var(--ink-alpha-06);
	font-size: 13px;
	line-height: 1;
}
.photo-delete-btn:hover { background: var(--accent); color: var(--white); border-color: transparent; }

/* Small helpers */
.point-item b{display:block;color:var(--text)}
.point-item small{color:var(--muted)}

/* Time slider (ruler) styles */
.time-slider-control { position: absolute; left: 50%; transform: translateX(-50%); bottom: 64px; z-index:1200; pointer-events: auto; width: auto; display:flex; justify-content:center; align-items: center; gap: 16px;
	width: calc(100vw - 32px); 
	max-width: none;
}
.time-slider-control .time-slider-inner { 
	/* background: var(--black-alpha-92); */
	background: var(--card-contrast);
	border: none; padding:2px 8px 18px 8px; border-radius:12px; 
	box-shadow: 0 8px 20px var(--black-alpha-55); 
	display:flex; align-items:center; gap:10px; 
	flex: 1;
	max-width: none; 
}

.time-slider-control .ts-arrow {
	background: var(--white-alpha-08);
	border: 1px solid var(--white-alpha-12);
	color: var(--white);
	font-size: 16px;
	width: 32px;
	height: 32px;
	line-height: 1;
	padding: 0;
	border-radius: 6px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	font-size: 0;
	transition: background 0.15s ease, transform 0.1s ease;
	flex-shrink: 0;
}


.time-slider-control .ts-arrow::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) translateY(1px);
	width: 0;
	height: 0;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	display: block;
	pointer-events: none;
}

.time-slider-control .ts-arrow-left::before {
	border-right: 8px solid currentColor;
}

.time-slider-control .ts-arrow-right::before {
	border-left: 8px solid currentColor;
}

.time-slider-control .ts-arrow:hover {
	background: var(--white-alpha-15);
}

.time-slider-control .ts-arrow:active {
	transform: scale(0.95);
	background: color-mix(in srgb, var(--card-contrast) 70%, var(--text) 30%);
}

.time-slider-control .ts-btn { background: transparent; border: 1px solid var(--white-alpha-06); color: var(--white); padding:6px 8px; border-radius:6px; cursor:pointer }
.time-slider-control .ts-btn:hover { background: var(--white-alpha-03); box-shadow: none; }
.time-slider-control .ts-label { color: var(--white); font-weight:600; min-width:96px; text-align:center }

/* Ruler container: horizontal line with ticks for every year */
.ts-ruler { position: relative; height: 34px; flex:1; display:flex; align-items:center; padding: 0 10px; }
.ts-ruler .ts-line { position:absolute; left:0; right:0; top:50%; height:1px; transform: translateY(-50%); border-radius:1px; background: var(--white-alpha-28); box-shadow: none; }
.ts-ticks { position: absolute; left:10px; right:10px; top:0; bottom:0; display:flex; align-items:center; justify-content:space-between; pointer-events:auto; z-index:1 }
.ts-tick { position: relative; width:0; height:34px; background: transparent; display:block; cursor:default }
.ts-tick::before { content:''; position:absolute; left:50%; top:50%; width:2px; height:18px; background: var(--white-alpha-32); display:block; border-radius:2px; transform: translate(-50%, -50%); }
.ts-tick.available::before { background: var(--white-alpha-95); }

/* Major tick (WMS year): taller, thicker and labelled */
.ts-tick.major::before { height: 22px; width:3px; background: var(--white-alpha-95); }

/* tick label element (DOM) used for major ticks. JS may hide labels
	 that overlap; keeping a real element allows measuring. */
.tick-label {
	position: absolute;
	left: 50%;
	top: 36px;
	transform: translateX(-50%);
	font-size: 12px;
	color: var(--muted);
	white-space: nowrap;
	pointer-events: none;
}
.ts-tick.major .tick-label { color: var(--muted); }
.ts-tick.major.active .tick-label { color: var(--white); font-weight:700; font-size:13px }

/* Minor tick (non-WMS year): more prominent but still visually secondary */
.ts-tick.minor::before { height: 14px; width:2px; background: var(--white-alpha-45); border-radius:1px; }
.ts-tick.minor::after { display: none; }
.ts-tick.unavailable { opacity: 0.85; }

/* subticks removed: we only use major (WMS) and minor ticks */
.ts-subticks { display: none; }
.ts-subtick { display: none; }
.ts-tick.selectable { cursor: pointer }
.ts-tick.selectable::before { background: var(--muted); }
.ts-tick.selectable:hover::before { background: var(--gray-600); }
.ts-tick.active::before { background: var(--white); height:16px }

/* Slider that sits above the ruler and controls selection between available years */
.ts-range { position: absolute; /* vertically center the slider so thumb and ticks share the same baseline */ left:0; right:0; top:50%; transform: translateY(-50%); height:34px; width:100%; background:transparent; -webkit-appearance:none; appearance:none; pointer-events:auto; z-index:3 }
.ts-range:focus { outline: none; box-shadow:none; -webkit-tap-highlight-color: transparent; }
.ts-range::-webkit-slider-runnable-track { 
	-webkit-appearance: none;
    height:100%; 
    background: transparent; }

.ts-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 10px;
	height: 18px;
	background: var(--white);
	border: none;
	border-radius: 3px;
	margin-top: -9px; /* center smaller thumb on track */
	box-shadow: 0 2px 6px var(--black-alpha-28);
}
.ts-range::-moz-range-track { height:100%; background: transparent; }
.ts-range::-moz-range-thumb {
	width: 10px;
	height: 18px;
	background: var(--white);
	border: none;
	border-radius: 3px;
	margin-top: -9px;
	box-shadow: 0 2px 6px var(--black-alpha-28);
}
.ts-range::-ms-thumb {
	width: 10px;
	height: 18px;
	background: var(--white);
	border: none;
	border-radius: 3px;
	margin-top: -9px;
	box-shadow: 0 2px 6px var(--black-alpha-28);
}

/* Remove focus ring blue in browsers */
.ts-range::-moz-focus-outer { border: 0; }

/* Keep ticks non-clickable while allowing slider to move between them */
.ts-tick { pointer-events: none; }

/* remove any blue accents specifically on the time control */
.time-slider-control .ts-btn, .time-slider-control .ts-label, .time-slider-control .ts-tick::after { color: var(--white); }


/* Fake thumb alignment for main app (same technique as debug page) */
:root {
	--thumb-width: 10px;
	--thumb-half: calc(var(--thumb-width) / 2);
}
/* hide native browser thumb visuals so we can overlay a precisely positioned fake thumb */
.time-slider-control .ts-range::-webkit-slider-thumb { background: transparent !important; box-shadow: none !important; border: none !important; }
.time-slider-control .ts-range::-moz-range-thumb { background: transparent !important; box-shadow: none !important; border: none !important; }
.time-slider-control .ts-range::-ms-thumb { background: transparent !important; box-shadow: none !important; border: none !important; }
.time-slider-control .ts-fake-thumb {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: var(--thumb-width);
	height: 18px;
	background: var(--white);
	border-radius: 3px;
	box-shadow: 0 2px 6px var(--black-alpha-12);
	z-index: 10001;
	pointer-events: none;
}

/* Sidebar list row: info + small thumbnail */
.point-list-row{display:flex;align-items:center;justify-content:space-between}
.point-info{flex:1;min-width:0}
.point-list-thumb{width:56px;height:56px;object-fit:cover;border-radius:6px;border:1px solid var(--border);margin-left:8px;cursor:pointer}

/* small colored marker inside the point card */
.point-card-marker{vertical-align:middle;margin-right:8px;box-shadow: 0 2px 6px rgba(2,6,23,0.12)}
.point-card-marker circle{display:block}
.point-name{vertical-align:middle;font-weight:600;margin-left:8px}

/* New marker styling for map: subtle white outline, drop shadow already in SVG filter */
.custom-marker svg { display:block }
.custom-marker { transform-origin: center bottom; }

/* Popup top layout: left meta and right small thumb */
.popup-top{display:flex;gap:8px;align-items:flex-start}
.popup-meta{flex:1}
.popup-meta label {
	display: block;
	width: 100%;
	max-width: 100%;
}

.popup-meta input,
.popup-meta select,
.popup-meta .flatpickr-input,
.popup-meta .flatpickr-input + input[type="hidden"] {
	width: 100% !important;
	max-width: 100%;
	box-sizing: border-box;
	display: block;
	min-width: 0;
}

.popup-meta .flatpickr-input {
	margin-right: 0;
}
.popup-thumb{width:72px;height:72px;flex:0 0 72px;display:flex;align-items:center;justify-content:center}
.popup-thumb-img{max-width:72px;max-height:72px;border-radius:6px;object-fit:cover;border:1px solid var(--border);cursor:pointer}

/* Marker highlight when a sidebar card is clicked: slightly brighter, same color */
.custom-marker.marker-highlight svg { transition: filter 160ms ease; filter: brightness(1.35) drop-shadow(0 8px 20px rgba(0,0,0,0.35)); }
.custom-marker.marker-highlight { z-index: 9999; }

/* Sidebar selected card (brighter) */
.point-item.selected { background: color-mix(in srgb, var(--card-contrast) 70%, var(--text) 30%); border-color: var(--accent); box-shadow: 0 8px 20px rgba(2,6,23,0.06); }

/* temporary highlight used to mimic .point-item.selected for controls */
/* .control-flash { background: color-mix(in srgb, var(--card-contrast) 70%, var(--text) 30%) !important; border-color: var(--accent) !important; box-shadow: 0 8px 20px rgba(2,6,23,0.06) !important; } */

/* Leaflet popup theming to match dark/light variables */
.leaflet-popup-content-wrapper {
	background: var(--card) !important;
	color: var(--text) !important;
	border-radius: 8px !important;
	border: 1px solid var(--border) !important;
	box-shadow: var(--shadow) !important;
}
.leaflet-popup-tip-container, .leaflet-popup-tip {
	color: var(--card);
}

/* Make the popup tip/arrow match the popup background and sit flush to the marker
   - Ensure the triangular border uses the same color as the popup wrapper
   - Nudge the tip container slightly up so it points directly at the marker center */
.leaflet-popup-tip {
	/* Use the popup background color for the triangular tip so it matches
	   exactly in light and dark mode. Some browsers (Chrome) render the
	   rotated square with transparent background if not explicitly set. */
	background: var(--card) !important;
	/* match the popup border so the seam looks consistent */
	border: 1px solid var(--border) !important;
	box-sizing: border-box;
}
.leaflet-popup-tip-container {
	/* keep tip container default vertical placement so the tip points to the anchor
	   small nudges are handled via popup offset instead of negative margins */
	margin-top: 0 !important;
	pointer-events: none;
}
.custom-leaflet-popup .leaflet-popup-content-wrapper {
	/* ensure wrapper and tip color match when using our custom popup class */
	background: var(--card) !important;
}

.custom-leaflet-popup .leaflet-popup-content {
	/* keep edit popup readable without forcing the whole panel to scroll */
	width: 240px;
	min-height: 280px;
	max-height: none;
	overflow: visible;
	margin: 12px 8px 16px 18px;
}

.photo-thumb-uploading {
	opacity: 0.8;
	position: relative;
}

.photo-thumb-uploading img {
	filter: saturate(0.75);
}

.photo-thumb-progress {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(circle at center, rgba(0,0,0,0.08), transparent 70%);
	pointer-events: none;
}

.photo-thumb-ring {
	width: 44px;
	height: 44px;
}

.photo-thumb-ring .ring-track,
.photo-thumb-ring .ring-progress {
	fill: none;
	stroke-width: 2.8;
}

.photo-thumb-ring .ring-track {
	stroke: rgba(255, 255, 255, 0.4);
}

.photo-thumb-ring .ring-progress {
	stroke: var(--upload-blue);
	stroke-linecap: round;
	stroke-dasharray: 88;
	stroke-dashoffset: 88;
	animation: photoUploadRingFill 1.25s ease-in-out infinite;
}

.photo-thumb-upload-error .photo-thumb-ring .ring-progress {
	stroke: #d93025;
	animation: none;
	stroke-dashoffset: 0;
}

.photo-thumb-upload-error {
	animation: photoUploadErrorPulse 0.9s ease-in-out 1;
}

@keyframes photoUploadRingFill {
	0% { stroke-dashoffset: 88; opacity: 1; }
	60% { stroke-dashoffset: 0; opacity: 1; }
	100% { stroke-dashoffset: 0; opacity: 0.35; }
}

@keyframes photoUploadErrorPulse {
	0% { box-shadow: 0 0 0 0 rgba(217,48,37,0.0); }
	50% { box-shadow: 0 0 0 3px rgba(217,48,37,0.25); }
	100% { box-shadow: 0 0 0 0 rgba(217,48,37,0.0); }
}

.popup-photo-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 6px;
	max-height: 120px;
	overflow-y: auto;
	margin-right: -8px;
}

.popup-photo-list::-webkit-scrollbar {
	width: 6px;
}

.popup-photo-list::-webkit-scrollbar-thumb {
	background: var(--scroll-thumb);
	border-radius: 999px;
}

/* Ensure all triangle/pseudo elements for the popup tip match the popup color
   The default Leaflet CSS uses border colors on pseudo-elements — override them. */
.leaflet-popup-tip, .leaflet-popup-tip::before, .leaflet-popup-tip::after {
	background: var(--card) !important;
	border-color: var(--border) !important;
}
.leaflet-popup-content {
	color: var(--text);
	font-size: 15px; /* match sidebar label size */
	line-height: 1.35;
	font-family: inherit;
}
.leaflet-popup-content label { color: var(--muted); display:block; margin:6px 0; font-weight:600; font-size:15px; font-family:inherit; }
/* increase vertical spacing before the 2nd+ labels (plant date, type) */
.leaflet-popup-content label + label { margin-top: 14px; }

/* Tooltip theming (Leaflet tooltips and our custom tooltip class) */
.leaflet-tooltip, .tf-tooltip {
	background: var(--card) !important;
	color: var(--text) !important;
	border: 1px solid var(--border) !important;
	padding: 6px 8px !important;
	border-radius: 6px !important;
	box-shadow: var(--shadow) !important;
	font-size: 13px !important;
	line-height: 1.2 !important;
}

/* tooltip arrow color */
.leaflet-tooltip:before, .tf-tooltip:before {
	border-top-color: var(--card) !important;
}

/* Time-slider control (bottom center) */
.time-slider-control {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 14px; /* will be increased on phones via media query */
	z-index: 1200;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 8px 12px;
	box-shadow: var(--shadow);
}

/* Mobile adjustments removed — prefer default behavior. */
.time-slider-inner { display:flex; align-items:center; gap:12px; color:var(--text); }
.time-slider-control .ts-btn { 
	background: transparent; 
	border: 1px solid var(--border); color:var(--text); 
	/* border: none !important; */
	padding:6px 8px; border-radius:6px; cursor:pointer }
.time-slider-control .ts-label { font-weight:600; font-size:14px }

@media (prefers-color-scheme: light) {
	.time-slider-control {
		background: var(--bg);
		border: 1px solid var(--border);
	}
	.time-slider-control .time-slider-inner {
		background: var(--card-contrast);
		border: 1px solid var(--border);
		box-shadow: 0 8px 20px rgba(2,6,23,0.04);
	}
	.time-slider-control .ts-btn,
	.time-slider-control .ts-label,
	.time-slider-control .ts-tick::after {
		color: var(--text);
	}
	.time-slider-control .ts-arrow {
		background: var(--card-contrast);
		border: 1px solid var(--border);
		color: var(--text);
		box-shadow: 0 2px 6px rgba(2,6,23,0.08);
	}
	.time-slider-control .ts-arrow:hover {
		background: color-mix(in srgb, var(--card-contrast) 85%, var(--text) 15%);
	}
	.time-slider-control .ts-arrow:active {
		transform: scale(0.95);
		background: color-mix(in srgb, var(--card-contrast) 75%, var(--text) 25%);
	}
	.time-slider-control .ts-btn {
		border-color: var(--border);
		background: var(--card-contrast);
		color: var(--text);
	}
	.time-slider-control .ts-btn:hover {
		background: color-mix(in srgb, var(--card-contrast) 92%, var(--text) 8%);
	}
	/* darken the ruler line and ticks for light backgrounds */
	.ts-ruler .ts-line { background: rgba(0,0,0,0.18); }
	.ts-tick::before { background: rgba(0,0,0,0.32); }
	.ts-tick.minor::before { background: rgba(0,0,0,0.28); }
	.ts-subtick::before { background: rgba(0,0,0,0.22); }
	.ts-tick.available::before { background: rgba(0,0,0,0.85); }
	.ts-tick.active::before { background: var(--text); }
	.ts-tick.active::after { color: var(--text); }
	.tick-label { color: rgba(0,0,0,0.6); }
	.ts-tick.major .tick-label { color: rgba(0,0,0,0.6); }
	.ts-tick.major.active .tick-label { color: var(--text); font-weight: 700; }
	/* make the thumb/dial dark in light mode */
	.ts-range::-webkit-slider-thumb { background: var(--text); box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
	.ts-range::-moz-range-thumb { background: var(--text); box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
	.ts-range::-ms-thumb { background: var(--text); box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
	.time-slider-control .ts-fake-thumb {
		background: var(--text);
		box-shadow: 0 2px 6px rgba(0,0,0,0.18);
		border: none;
	}

	/* Fix: popup background in light mode should match sidebar */
	.leaflet-popup-content-wrapper,
	.custom-leaflet-popup .leaflet-popup-content-wrapper {
		background: var(--bg) !important;
		color: var(--text) !important;
		border-radius: 8px !important;
		border: 1px solid var(--border) !important;
		box-shadow: var(--shadow) !important;
	}
}

@media (prefers-color-scheme: dark) {
	.time-slider-control { background: var(--bg); border-color: var(--border); }
	.time-slider-control .ts-btn { color: var(--text); border-color: var(--border); }
	.time-slider-control .ts-arrow {
		background: var(--card-contrast);
		border: 1px solid var(--border);
		color: var(--text);
		box-shadow: 0 2px 6px rgba(0,0,0,0.45);
	}
	.time-slider-control .ts-arrow:hover {
		background: color-mix(in srgb, var(--card-contrast) 85%, var(--text) 15%);
	}
	.time-slider-control .ts-arrow:active {
		background: color-mix(in srgb, var(--card-contrast) 70%, var(--text) 30%);
	}
}

/* Ensure several controls use the sidebar "panel" color in dark mode so blacks match */
@media (prefers-color-scheme: dark) {
	/* make the time slider use the same panel color as the sidebar */
	.time-slider-control {
		background: var(--bg) !important;
		border-color: var(--border);
	}
	.time-slider-control .time-slider-inner {
		background: var(--card-contrast) !important;
		border-color: var(--border);
	}
	/* legend / type filter panel */
	.type-filter-control {
		background: var(--bg) !important;
		border-color: var(--border) !important;
		box-shadow: none !important;
	}
	/* Leaflet control theming removed — controls not used in this app. */
	/* keep the fake thumb light for contrast */
	.time-slider-control .ts-fake-thumb { background: #fff !important; }
}

/* ensure tooltip text does not overflow and keeps a single line */
.leaflet-tooltip .leaflet-tooltip-content, .tf-tooltip .leaflet-tooltip-content { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Inputs/selects inside popups should match sidebar controls and highlight with the blue accent */

.leaflet-popup-content input, .leaflet-popup-content select, .leaflet-popup-content textarea {
	width:100%;
	padding:6px 8px;
	margin-top:6px;
	border-radius:6px;
	border:1px solid var(--border);
	background: var(--card-contrast);
	color:var(--text);
	height:34px;
	line-height:18px;
	font-size:15px; /* match sidebar labels/controls */
	font-family: inherit; /* ensure same font as sidebar */
	font-weight: 400;
	transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

/* Ensure flatpickr alt/input and other popup inputs share the same width
   so the date line aligns with name/type lines inside popups. Use
   !important to override inline styles that set widths. */
.leaflet-popup-content input,
.leaflet-popup-content select,
.leaflet-popup-content textarea,
.leaflet-popup-content .flatpickr-input,
.leaflet-popup-content .flatpickr-alt-input {
	width: 95% !important;
	box-sizing: border-box !important;
	display: block;
}
.leaflet-popup-content input:focus, .leaflet-popup-content select:focus, .leaflet-popup-content textarea:focus {
	border-color: var(--accent);
	box-shadow: 0 8px 24px rgba(43,124,255,0.12);
	outline: none;
	background: var(--card-contrast);
}

/* when the popup select is disabled (non-edit mode), hide the native dropdown arrow */

.leaflet-popup-content select:disabled {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: none;
	cursor: default;
	color: var(--muted);
}

/* Ensure disabled popup controls use the same font and sizing as when enabled (Chrome fixes) */
.leaflet-popup-content input:disabled,
.leaflet-popup-content select:disabled,
.leaflet-popup-content textarea:disabled {
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	color: var(--muted) !important;
	opacity: 1 !important; /* avoid Chrome dimming */
	-webkit-text-fill-color: var(--muted) !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	background-image: none !important;
}

/* Force selects in popups to use the same font and show a consistent caret in Chrome */
.leaflet-popup-content select {
	font-family: inherit;
	font-size: 15px;
	-webkit-appearance: none;
	appearance: none;
	background-repeat: no-repeat;
	background-position: right 8px center;
	padding-right: 30px; /* room for caret */
}

/* small SVG caret using a neutral color; works in Chrome/Edge */
.leaflet-popup-content select {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><path fill='%23666' d='M7 10l5 5 5-5z'/></svg>");
}

/* remove MS expand button in IE/Edge legacy */
select::-ms-expand { display:none; }
.leaflet-popup-content button { margin-top:8px; background:var(--accent); color:#fff; border:none; padding:8px 10px; border-radius:6px; cursor:pointer }
.leaflet-popup-content .closeBtn { background:transparent; }
/* Make the Leaflet popup close X match the sidebar toggle style (smaller) */
.leaflet-popup-close-button {
	/* Match the sidebar toggle appearance: no frame, flush X; force constant white color */
	width: 34px;
	height: 34px;
	line-height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent !important;
	border: none !important;
	color: var(--popup-close-color) !important;
	opacity: 1 !important;
	border-radius: 8px;
	box-shadow: none !important;
	text-decoration: none;
	transition: none !important;
	/* nudge slightly down and left so it's not flush with the popup corner */
	transform: translate(-4px, 4px);
}
.leaflet-popup-close-button:hover,
.leaflet-popup-close-button:active,
.leaflet-popup-close-button:focus {
	background: transparent !important;
	color: #fff !important;
	opacity: 1 !important;
	outline: none !important;
	box-shadow: none !important;
}

/* ensure inputs inside popup have readable placeholder color */
.leaflet-popup-content input::placeholder { color: var(--muted); }

/* Leaflet control theming removed — this project does not use Leaflet's
   built-in control widgets (layer/zoom controls). Reintroduce styles
   here later if those controls are added back. */

.type-filter-control {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 1200;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: 10px;
	box-shadow: var(--shadow);
	padding: 8px 10px;
	min-width: 120px;
	/* width:min(120px,30vw); */
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.type-filter-control.legend-hidden { display: none !important; }
.type-filter-control .legend-toggle {
	align-self: flex-end;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background: var(--card-contrast);
	border: 1px solid var(--border);
	color: var(--text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow);
	cursor: pointer;
	line-height: 1;
	font-weight: 600;
	transition: background 180ms ease, transform 100ms ease;
}
.type-filter-control .legend-toggle:hover {
	background: color-mix(in srgb, var(--card-contrast) 85%, var(--text) 15%);
}
.type-filter-control .legend-toggle:active { 
	transform: translateY(1px); 
	background: color-mix(in srgb, var(--card-contrast) 70%, var(--text) 30%);
}

.legend-open-toggle {
	position: fixed;
	top: 16px;
	right: 16px;
	z-index: 1300;
	width: 44px;
	height: 44px;
	border-radius: 8px;
	background: var(--bg);
	border: 1px solid var(--border);
	color: var(--text);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow);
	cursor: pointer;
	transition: background 180ms ease, transform 100ms ease;
}
.legend-open-toggle[hidden] { display: none !important; }
.legend-open-toggle:hover {
	background: color-mix(in srgb, var(--card-contrast) 85%, var(--text) 15%);
}
.legend-open-toggle:active {
	background: color-mix(in srgb, var(--card-contrast) 70%, var(--text) 30%);
	transform: translateY(1px);
}
.legend-open-toggle .legend-open-icon {
	width: 20px;
	height: 20px;
	display: block;
	pointer-events: none;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
	image-rendering: optimizeQuality;
	background-image: url('https://unpkg.com/leaflet@1.9.4/dist/images/layers.png');
}
@media (min-resolution: 192dpi), (min-resolution: 2dppx) {
	.legend-open-toggle .legend-open-icon {
		background-image: url('https://unpkg.com/leaflet@1.9.4/dist/images/layers-2x.png');
	}
}
.type-filter-control .tf-body { display: flex; flex-direction: column; gap: 2px; }
.type-filter-control .tf-title {
	font-size: 13px;
	color: var(--black);
	font-weight: 600;
	display:flex;align-items:center;justify-content:space-between;
	margin-bottom: 2px; /* reduce gap under title */
}
.type-filter-control .tf-row { display:flex; align-items:center; justify-content:space-between; gap:6px; padding:0 2px; border-radius:6px; min-height:18px; }
.type-filter-control .tf-row:hover { background: color-mix(in srgb, var(--card-contrast) 95%, var(--accent) 5%); }
.type-filter-control .tf-label { display:flex; align-items:center; gap:6px; color:var(--text); font-size:13px; line-height:1; }
.tf-count {
	/* inherit exact font properties and color from the label for visual consistency */
	font: inherit;
	color: inherit;
	margin-left: 0;
}
.type-filter-control .tf-dot { width:9px; height:9px; border-radius:999px; box-shadow: 0 1px 3px rgba(2,6,23,0.06); border: 2px solid #fff; }

/* Pane for WMS overlays to ensure z-order above base tiles */
.leaflet-pane.wms-pane { z-index: 650; }

/* Raise popup pane above the sidebar on narrow screens */
.leaflet-pane.leaflet-popup-pane {
	z-index: 2500 !important; /* ensure popups layer above the sidebar */
}

/* custom checkbox wrapper */
.tf-checkwrap { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; position:relative; }
.tf-checkwrap input[type=checkbox] { position:absolute; left:0; top:0; opacity:0; width:100%; height:100%; pointer-events:auto; margin:0; cursor:pointer; z-index:2; }
.tf-checkmark {
	width:14px; height:14px; border-radius:3px; border:1px solid var(--border); background: var(--card-contrast); box-shadow: 0 1px 3px rgba(2,6,23,0.06); position:relative; display:inline-block; z-index:1; pointer-events:none;
}
.tf-checkmark::after { content: ''; position: absolute; left: 3px; top: 2px; width: 5px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0.8); opacity: 0; transition: opacity .12s ease, transform .12s ease; }
.tf-checkwrap input[type=checkbox]:checked + .tf-checkmark { background: var(--accent); border-color: var(--accent); }
.tf-checkwrap input[type=checkbox]:checked + .tf-checkmark::after { opacity: 1; transform: rotate(45deg) scale(1); }

/* Upload photo button used in popups */
.upload-photo-btn {
	background: #1741a3; /* dark blue */
	color: #fff;
	border: 1px solid #133374;
	padding: 8px 10px;
	border-radius: 6px;
	cursor: pointer;
}
.upload-photo-btn:hover { background: #12367f; }

/* thumbnail-shaped add-photo button */
.photo-add-thumb {
	width: 72px;
	height: 72px;
	border-radius: 6px;
	background: var(--accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 28px;
	cursor: pointer;
	border: 1px solid rgba(0,0,0,0.06);
	position: relative;
}
.photo-add-thumb:hover { filter: brightness(0.95); }

/* uploading state: overlay a subtle spinner */
.photo-add-thumb.uploading { position: relative; }
.photo-add-thumb.uploading::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 32px;
	height: 32px;
	transform: translate(-50%, -50%);
	border: 4px solid rgba(255,255,255,0.25);
	border-top-color: #fff;
	border-radius: 50%;
	animation: photo-spin 0.9s linear infinite;
	z-index: 20;
}

/* hide the plus icon while uploading so spinner is the only visible element */
.photo-add-thumb.uploading svg { opacity: 0; }
@keyframes photo-spin {
	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

#infoModal {
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
	padding-top: calc(20px + env(safe-area-inset-top, 0px));
	padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	background: var(--ink-alpha-75);
	z-index: 10050;
}

#infoModal.is-open {
	display: flex;
}

#infoModal .info-modal {
	width: min(760px, 100%);
	max-height: min(80vh, 760px);
	max-height: min(calc(100dvh - 40px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)), 760px);
	display: flex;
	flex-direction: column;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 12px;
	box-shadow: var(--shadow);
	overflow: hidden;
}

#infoModal .info-modal-header {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 14px;
	border-bottom: 1px solid var(--border);
	background: color-mix(in srgb, var(--card) 88%, var(--text) 12%);
}

#infoModal .info-modal-header h3 {
	margin: 0;
	font-size: 18px;
	line-height: 1.2;
}

#infoModal .info-modal-close {
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background: var(--card-contrast);
	border: 1px solid var(--border);
	color: var(--text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
	box-shadow: var(--shadow);
}

#infoModal .info-modal-content {
	padding: 14px 16px 18px;
	overflow: auto;
	font-size: 15px;
	line-height: 1.55;
	color: var(--text);
}

#infoModal .info-loading {
	margin: 0;
	color: var(--muted);
}

#infoModal .info-fallback {
	margin: 0;
	font-family: inherit;
	white-space: pre-wrap;
	word-break: break-word;
	color: var(--text);
}

#infoModal .info-modal-content h1,
#infoModal .info-modal-content h2,
#infoModal .info-modal-content h3 {
	margin: 0 0 10px;
	line-height: 1.3;
}

#infoModal .info-modal-content p,
#infoModal .info-modal-content ul,
#infoModal .info-modal-content ol,
#infoModal .info-modal-content blockquote,
#infoModal .info-modal-content pre {
	margin: 0 0 10px;
}

#infoModal .info-modal-content ul,
#infoModal .info-modal-content ol {
	padding-left: 22px;
}

#infoModal .info-modal-content a {
	color: var(--accent);
	text-decoration: underline;
}

#infoModal .info-modal-content code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
	padding: 1px 4px;
	border-radius: 4px;
	background: var(--ink-alpha-08);
}

#infoModal .info-modal-content blockquote {
	padding: 8px 10px;
	border-left: 3px solid var(--accent);
	background: var(--blue-alpha-04);
	color: var(--muted);
}

@media (max-width: 768px) {
	#infoModal {
		padding: 10px;
		padding-top: calc(10px + env(safe-area-inset-top, 0px));
		padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
		align-items: flex-start;
	}

	#infoModal .info-modal {
		width: 100%;
		max-height: calc(100vh - 20px);
		max-height: calc(100dvh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
	}

	#infoModal .info-modal-header h3 {
		font-size: 16px;
	}
}