/*
	Seitenleiste nach React Bits Pro „App Sidebar 4“ (Icon-Leiste + Panel), Aufbau und Maße aus dessen berechneten
	Stilen. Farben und Schrift im Urzeit-Thema passend zur Insel: Moos statt Grau, Knochen statt Weiß, Sumpfgrün als
	Akzent, kantige Überschriften (Barlow Condensed), leichte Körnung.
*/
:root {
	--rail-w: 56px;
	--panel-w: 288px;

	--bg: #0a0d0a;					/* Eingabefelder, tiefste Ebene */
	--surface: #111511;				/* Leiste und Panel: Moosschwarz */
	--raised: #1e251f;				/* aktiv, Hover, Rahmen */
	--raised-2: #2f392f;
	--fg: #ece4cf;					/* Knochenweiß */
	--fg-soft: #d5cbb2;
	--fg-2: #a8a08a;
	--fg-3: #78776a;				/* Stein */
	--line: rgb(236 228 207 / .07);
	--accent: #6fae7a;				/* Akzent: Sumpfgrün, passend zum Nebel */
	--accent-soft: #a9d6a1;
	--accent-tint: rgb(111 174 122 / .13);
	--ring: rgb(111 174 122 / .35);
	--hover: rgb(47 57 47 / .55);
	--shadow: rgb(0 0 0 / .45);
	--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .89 0 0 0 0 .8 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

	--ease: .15s cubic-bezier(0, 0, .2, 1);
	--font: Barlow, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-display: "Barlow Condensed", Barlow, ui-sans-serif, system-ui, sans-serif;
	color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	height: 100%;
	font: 14px/1.4 var(--font);
	color: var(--fg);
	background: #060c08;
}

/* Feste Zellen: fremde Elemente am <body> (z. B. von Browser-Erweiterungen) landen in Nullzeilen */
body {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: 100%;
	grid-auto-rows: 0;
	overflow: hidden;
}
#sidebar { grid-area: 1 / 1; }
#fog, #map { grid-area: 1 / 2; }
#fog { display: block; width: 100%; height: 100%; }

.i {
	flex: none;
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---------- Seitenleiste: Icon-Leiste ---------- */

#sidebar {
	display: flex;
	min-height: 0;
	z-index: 1000;
	box-shadow: 4px 0 28px var(--shadow);
}

#rail {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: var(--rail-w);
	padding-bottom: 8px;
	background: var(--grain), linear-gradient(to bottom, #0d110d, var(--surface) 40%);
	border-right: 1px solid var(--line);
}
.rail-top { display: grid; place-items: center; height: 56px; flex: none; }
.logo {
	display: block;
	width: 42px;
	height: auto;
	filter: drop-shadow(0 3px 6px rgb(0 0 0 / .55)) drop-shadow(0 0 10px rgb(111 174 122 / .25));
}
.rail-tabs { display: flex; flex-direction: column; gap: 4px; flex: 1; }

.rail-btn {
	position: relative;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--fg-3);
	cursor: pointer;
	transition: background-color var(--ease), color var(--ease);
}
.rail-btn[hidden] { display: none; }
.rail-btn .i { width: 18px; height: 18px; }
.rail-btn:hover { background: var(--hover); color: var(--fg); }
.rail-btn[aria-current] { background: var(--raised); color: var(--accent-soft); }
.rail-btn[aria-current]::before {
	content: "";
	position: absolute;
	left: -8px;
	top: 10px;
	bottom: 10px;
	width: 3px;
	border-radius: 0 3px 3px 0;
	background: var(--accent);
	box-shadow: 0 0 8px rgb(111 174 122 / .6);
}
body.sidebar-collapsed .rail-btn[aria-current] { background: transparent; color: var(--fg-3); }
body.sidebar-collapsed .rail-btn[aria-current]::before { display: none; }
body.sidebar-collapsed .rail-btn[aria-current]:hover { background: var(--hover); color: var(--fg); }

/* Zähler: eingeschaltete Ebenen */
.rail-btn[data-badge]::after {
	content: attr(data-badge);
	position: absolute;
	top: 3px;
	right: 2px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border: 2px solid var(--surface);
	border-radius: 999px;
	background: var(--accent);
	color: #0c1a10;
	font: 700 9px/12px var(--font);
	text-align: center;
	box-sizing: border-box;
}

/* ---------- Seitenleiste: Panel ---------- */

#panel {
	display: flex;
	flex-direction: column;
	width: var(--panel-w);
	min-height: 0;
	background: var(--grain), radial-gradient(120% 50% at 0% 0%, rgb(62 106 74 / .14), transparent 70%), var(--surface);
	border-right: 1px solid var(--line);
	overflow: hidden;
}
body.sidebar-collapsed #panel { display: none; }

.tab { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.tab[hidden] { display: none; }

.panel-head {
	display: flex;
	align-items: center;
	gap: 8px;
	position: relative;
	height: 56px;
	flex: none;
	padding: 0 8px 0 20px;
}
/* Akzent-Strich unter dem Titel */
.panel-head::after {
	content: "";
	position: absolute;
	left: 20px;
	bottom: 6px;
	width: 28px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--accent), transparent);
}
.panel-head h2 {
	flex: 1;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	color: var(--fg);
	font: 600 19px/1 var(--font-display);
	letter-spacing: .06em;
	text-transform: uppercase;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.panel-search { flex: none; padding: 0 8px 8px; }

.field { position: relative; display: block; flex: 1; }
.field > .i { position: absolute; left: 12px; top: 50%; translate: 0 -50%; color: var(--fg-3); pointer-events: none; }
.field input {
	width: 100%;
	height: 36px;
	padding: 0 12px 0 36px;
	border: 1px solid var(--raised);
	border-radius: 8px;
	background: var(--bg);
	color: var(--fg);
	font: 13px/1.5 var(--font);
	outline: none;
	transition: border-color var(--ease), box-shadow var(--ease);
}
.field input::placeholder { color: var(--fg-3); }
.field input:focus { border-color: rgb(111 174 122 / .6); box-shadow: 0 0 0 3px var(--accent-tint); }

.panel-scroll {
	display: flex;
	flex-direction: column;
	gap: 18px;
	flex: 1;
	min-height: 0;
	padding: 6px 8px 20px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--raised-2) transparent;
	/* weiche Kanten oben/unten wie im Original */
	mask-image: linear-gradient(to bottom, transparent, #000 10px, #000 calc(100% - 20px), transparent);
}

.panel-foot { flex: none; padding: 8px; background: rgb(10 13 10 / .6); border-top: 1px solid var(--line); }
.who { display: flex; align-items: center; gap: 10px; padding: 2px 4px; }
.avatar {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	flex: none;
	border-radius: 999px;
	background: var(--raised);
	box-shadow: inset 0 0 0 1px rgb(111 174 122 / .45);
	font: 15px/1 "Noto Color Emoji", sans-serif;
}
.who-text { min-width: 0; }
.who-text p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#map-title { color: var(--fg); font: 600 14px/19.5px var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
#map-sub { color: var(--fg-3); font-size: 12px; line-height: 16px; }

/* ---------- Bausteine im Panel ---------- */

.group[hidden] { display: none; }
.contents { display: contents; }
.group-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 24px;
	margin-bottom: 4px;
	padding: 0 4px 0 12px;
}
.group-label {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	color: var(--fg-3);
	font: 600 12.5px/16.5px var(--font-display);
	letter-spacing: .14em;
	text-transform: uppercase;
}
.group-label::before {
	content: "";
	width: 5px;
	height: 5px;
	rotate: 45deg;
	background: var(--accent);
	opacity: .7;
}

.opts { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }

/* Zeile: Emoji/Icon, Text, rechts ein Schalter */
.toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	height: 32px;
	padding: 0 8px 0 12px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--fg-2);
	font: 13px/19.5px var(--font);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	user-select: none;
	transition: background-color var(--ease), color var(--ease);
}
.toggle:hover { background: var(--hover); color: var(--fg); }
.toggle:has(input:checked) { color: var(--fg); font-weight: 500; }
.toggle:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: -2px; }
.toggle.disabled { opacity: .4; cursor: not-allowed; }
.toggle.disabled:hover { background: transparent; color: var(--fg-2); }

.emo {
	display: grid;
	place-items: center;
	width: 18px;
	flex: none;
	color: var(--fg-3);
	font: 14px/1 "Noto Color Emoji", sans-serif;
}
.txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Schalter (shadcn-Switch) */
input.switch {
	appearance: none;
	position: relative;
	flex: none;
	width: 28px;
	height: 16px;
	margin: 0;
	border-radius: 999px;
	background: var(--raised-2);
	cursor: inherit;
	transition: background-color var(--ease);
}
input.switch::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 12px;
	height: 12px;
	border-radius: 999px;
	background: var(--fg-2);
	transition: translate var(--ease), background-color var(--ease);
}
input.switch:checked { background: var(--accent); box-shadow: 0 0 10px rgb(111 174 122 / .35); }
input.switch:checked::before { translate: 12px 0; background: #0c1a10; }
input.switch:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

.food { position: relative; }
.food input { position: absolute; opacity: 0; pointer-events: none; }
.food:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 1px; }

/* Futter: zweispaltiges Raster */
.food-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.food {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 30px;
	padding: 0 8px 0 6px;
	border-radius: 8px;
	color: var(--fg-2);
	font-size: 12px;
	cursor: pointer;
	user-select: none;
	transition: background-color var(--ease), color var(--ease);
}
.food[hidden] { display: none; }
.food .v-icon.inline { margin: 0; filter: grayscale(.85); opacity: .55; transition: filter var(--ease), opacity var(--ease); }
.food small { margin-left: auto; color: var(--fg-3); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.food:hover { background: var(--hover); color: var(--fg); }
.food:hover .v-icon.inline { filter: none; opacity: .9; }
.food:has(input:checked) { background: var(--accent-tint); color: var(--fg); font-weight: 500; box-shadow: inset 2px 0 0 var(--accent); }
.food:has(input:checked) .v-icon.inline { filter: none; opacity: 1; }
.food:has(input:checked) small { color: var(--accent-soft); }
.food.disabled { opacity: .35; cursor: not-allowed; }
.food.disabled:hover { background: transparent; color: var(--fg-2); }

/* Knöpfe */
.icon-btn {
	display: inline-grid;
	place-items: center;
	width: 32px;
	height: 32px;
	flex: none;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: var(--raised);
	color: var(--fg-soft);
	cursor: pointer;
	transition: background-color var(--ease), color var(--ease);
}
.icon-btn:hover { background: var(--raised-2); color: var(--fg); }
.icon-btn:focus-visible, .rail-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.icon-btn[hidden] { display: none; }
.icon-btn.lg { width: 36px; height: 36px; background: var(--accent); color: #0c1a10; }
.icon-btn.lg:hover { background: var(--accent-soft); color: #0c1a10; }
.icon-btn.sm { width: 22px; height: 22px; border-radius: 6px; background: transparent; color: var(--fg-3); }
.icon-btn.sm .i { width: 13px; height: 13px; }
.icon-btn.sm:hover { background: var(--raised); color: var(--fg); }
.all-none { display: inline-flex; gap: 2px; }
.panel-head .all-none { gap: 6px; }

/* Gehe zu Position */
.goto { display: flex; gap: 6px; padding: 0 4px; }
.hint { margin: 8px 12px 0; color: var(--fg-3); font-size: 12px; }

/* ---------- Karte ---------- */

/* Hintergrund ist der Nebel (js/fog.js) hinter der Karte */
#map { height: 100%; background: transparent; }

.pin {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 2px solid var(--c);
	border-radius: 50%;
	background: #fffdf7;
	box-shadow: 0 1px 4px #0006;
	font-size: 16px;
	line-height: 1;
}
.pin-icon { background: none; border: 0; }

.map-label {
	white-space: nowrap;
	transform: translate(-50%, -50%);
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .04em;
	text-shadow: 0 0 3px #000, 0 0 6px #0008;
	pointer-events: none;
}
.map-label.large { font-size: 18px; text-transform: uppercase; letter-spacing: .12em; }
.map-label.water { color: #d8f0ff; font-style: italic; }

.pos-pin { font-size: 26px; line-height: 1; filter: drop-shadow(0 1px 2px #0008); }

.grid-line { stroke: #fff; stroke-opacity: .25; stroke-width: 1; }
.grid-line.axis { stroke-opacity: .55; stroke-dasharray: 4 4; }

/* Leaflet-Steuerelemente im Stil der Seitenleiste */
.leaflet-bar, .leaflet-touch .leaflet-bar {
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 10px;
	box-shadow: 0 4px 16px var(--shadow);
}
.leaflet-bar a, .leaflet-touch .leaflet-bar a {
	border-bottom-color: var(--line);
	background: var(--surface);
	color: var(--fg-soft);
	transition: background-color var(--ease), color var(--ease);
}
.leaflet-bar a:hover, .leaflet-bar a:focus { background: var(--raised); color: var(--fg); }
.leaflet-bar a.leaflet-disabled { background: var(--surface); color: var(--fg-3); opacity: .5; }
.leaflet-touch .leaflet-bar a:first-child { border-top-left-radius: 9px; border-top-right-radius: 9px; }
.leaflet-touch .leaflet-bar a:last-child { border-bottom-left-radius: 9px; border-bottom-right-radius: 9px; }

.leaflet-control-layers, .leaflet-touch .leaflet-control-layers {
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--surface);
	color: var(--fg-2);
	box-shadow: 0 4px 16px var(--shadow);
}
.leaflet-control-layers-toggle { filter: invert(1) brightness(.85); }
.leaflet-control-layers-expanded { padding: 8px 12px 8px 8px; font-size: 13px; }
.leaflet-control-layers label { display: flex; align-items: center; gap: 6px; }
.leaflet-control-layers-selector { accent-color: var(--accent); }

.leaflet-container .leaflet-control-attribution { background: rgb(17 21 17 / .8); color: var(--fg-3); }
.leaflet-container .leaflet-control-attribution a { color: var(--fg-2); }

.coord-display {
	min-width: 96px;
	padding: 4px 10px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: rgb(17 21 17 / .88);
	color: var(--fg-soft);
	font: 12px ui-monospace, Consolas, monospace;
	font-variant-numeric: tabular-nums;
	text-align: center;
	backdrop-filter: blur(6px);
}

.leaflet-container a.home-btn {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	background: var(--surface);
	color: var(--fg-soft);
	transition: background-color var(--ease), color var(--ease);
}
.leaflet-container a.home-btn:hover { background: var(--raised); color: var(--fg); }

.popup { min-width: 180px; color: #222; }
.popup p { margin: 6px 0; }
.popup-cat { display: inline-block; margin-top: 2px; padding: 0 6px; border-radius: 10px; background: var(--c); color: #fff; font-size: 11px; }
.popup-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.popup-foot button { padding: 2px 6px; border: 1px solid #ddd8cc; border-radius: 6px; background: #fff; font: 12px var(--font); cursor: pointer; }
.popup-foot button:hover { border-color: #2f6f8f; }

.load-error { margin: 40px auto; max-width: 420px; padding: 16px; border-radius: 8px; background: var(--surface); color: var(--fg-2); text-align: center; }

#toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translate(-50%, 20px);
	padding: 8px 14px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--surface);
	color: var(--fg);
	font-size: 13px;
	box-shadow: 0 8px 24px var(--shadow);
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s, transform .2s;
	z-index: 2000;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Mobil: Leiste oben, Panel darunter ---------- */

@media (max-width: 720px) {
	body { grid-template-columns: 100%; grid-template-rows: auto minmax(0, 1fr); }
	#fog, #map { grid-area: 2 / 1; }
	#sidebar { flex-direction: column; max-height: 60vh; box-shadow: 0 4px 24px var(--shadow); }
	#rail { flex-direction: row; width: auto; height: 52px; padding: 0 8px 0 0; border-right: 0; border-bottom: 1px solid var(--line); }
	.rail-top { width: var(--rail-w); height: 52px; }
	.rail-tabs { flex-direction: row; }
	.rail-foot { margin-left: auto; }
	#panel { width: auto; flex: 1; border-right: 0; }
	.panel-foot { display: none; }
}