/* ===================================================================
   SWR Standort Dashboard — styles.css (Base Styles)
   =================================================================== */

/* ===== SECTION 1: BASE STYLES ===== */

html { font-size: 12px; } /* 75% zoom scaling. Browser default is 16px. Tailwind uses rems, so this scales the entire UI down. */

:root {
	--dwd-level-1: #eab308;
	--dwd-level-2: #f97316;
	--dwd-level-3: #ef4444;
	--dwd-level-4: #9333ea;
	--dwd-level-1-filter: brightness(0) saturate(100%) invert(67%) sepia(77%) saturate(803%) hue-rotate(1deg) brightness(101%) contrast(90%);
	--dwd-level-2-filter: brightness(0) saturate(100%) invert(61%) sepia(70%) saturate(4063%) hue-rotate(357deg) brightness(101%) contrast(96%);
	--dwd-level-3-filter: brightness(0) saturate(100%) invert(46%) sepia(96%) saturate(2553%) hue-rotate(336deg) brightness(99%) contrast(89%);
	--dwd-level-4-filter: brightness(0) saturate(100%) invert(28%) sepia(76%) saturate(2050%) hue-rotate(252deg) brightness(94%) contrast(96%);
}

html.dark {
	--dwd-level-1: #facc15;
	--dwd-level-2: #fb923c;
	--dwd-level-3: #f87171;
	--dwd-level-4: #a855f7;
	--dwd-level-1-filter: brightness(0) saturate(100%) invert(83%) sepia(89%) saturate(1037%) hue-rotate(330deg) brightness(101%) contrast(96%);
	--dwd-level-2-filter: brightness(0) saturate(100%) invert(74%) sepia(65%) saturate(2408%) hue-rotate(329deg) brightness(100%) contrast(98%);
	--dwd-level-3-filter: brightness(0) saturate(100%) invert(70%) sepia(31%) saturate(2234%) hue-rotate(316deg) brightness(96%) contrast(97%);
	--dwd-level-4-filter: brightness(0) saturate(100%) invert(51%) sepia(84%) saturate(2577%) hue-rotate(252deg) brightness(102%) contrast(95%);
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }
.dark ::-webkit-scrollbar-thumb { background: #3f3f46; }

/* Modal animations */
.modal-enter { opacity: 0; transform: scale(0.99) translateY(5px); }
.modal-enter-active { opacity: 1; transform: scale(1) translateY(0); transition: all 0.2s ease-out; }

/* Dark mode Leaflet filter */
html.dark:not(.dracula):not(.dracula-laser) .leaflet-layer:not(.no-filter),
html.dark:not(.dracula):not(.dracula-laser) .leaflet-control-zoom-in,
html.dark:not(.dracula):not(.dracula-laser) .leaflet-control-zoom-out,
html.dark:not(.dracula):not(.dracula-laser) .leaflet-control-attribution {
	filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
}

/* Custom markers */
.custom-cluster-icon, .custom-small-marker {
	background: transparent;
	border: none;
}

/* List item selection */
.list-item-selected {
	background-color: #dbeafe !important;
	border-left: 3px solid #2563eb;
	padding-left: calc(0.75rem - 3px);
}

.dark .list-item-selected {
	background-color: #1e3a8a !important;
	border-left-color: #3b82f6;
}

/* Help button highlight animation */
.help-btn-highlight {
	animation: helpPulse 2.5s ease-in-out infinite;
	filter: drop-shadow(0 0 8px rgba(37, 99, 235, 0.8)) !important;
}

@keyframes helpPulse {
	0%, 100% {
		color: #2563eb;
		text-shadow: 0 0 12px rgba(37, 99, 235, 0.8), 0 0 24px rgba(37, 99, 235, 0.4);
		transform: scale(1);
		filter: drop-shadow(0 0 8px rgba(37, 99, 235, 0.8)) drop-shadow(0 0 16px rgba(37, 99, 235, 0.5));
	}
	50% {
		color: #1d4ed8;
		text-shadow: 0 0 18px rgba(37, 99, 235, 1), 0 0 32px rgba(37, 99, 235, 0.6);
		transform: scale(1.05);
		filter: drop-shadow(0 0 12px rgba(37, 99, 235, 1)) drop-shadow(0 0 24px rgba(37, 99, 235, 0.7));
	}
}

/* Help button z-index */
#helpBtn {
	position: relative;
	z-index: 70;
}

.overlay-poi-icon-wrap {
	background: transparent;
	border: none;
}

.overlay-poi-marker {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.95);
	border: 1px solid #cbd5e1;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.overlay-poi-marker .mdi { font-size: 14px; }

.dark .overlay-poi-marker {
	background: rgba(24, 24, 27, 0.95);
	border-color: #52525b;
}

/* Hinweis POI – slightly larger with a warm yellow tint */
.overlay-poi-marker-hinweis {
	width: 28px;
	height: 28px;
	background: rgba(254, 252, 232, 0.97);
	border-width: 2px;
}
.overlay-poi-marker-hinweis .mdi { font-size: 15px; }
.dark .overlay-poi-marker-hinweis {
	background: rgba(40, 35, 10, 0.97);
}

/* Hinweis tooltip – standard hover tooltip in edit mode */
.overlay-hinweis-tooltip {
	max-width: 240px !important;
	white-space: pre-wrap !important;
	font-size: 12px !important;
	line-height: 1.4 !important;
}

/* Hinweis permanent compact label (display mode, always visible) */
.overlay-hinweis-permanent {
	background: #fefce8 !important;
	border: 1px solid #ca8a04 !important;
	border-radius: 4px !important;
	color: #78350f !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	padding: 2px 7px !important;
	max-width: 100px !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	cursor: pointer !important;
	box-shadow: 0 1px 4px rgba(0,0,0,0.12) !important;
	opacity: 0.92 !important;
	transition: max-width 0.25s ease, white-space 0.1s ease, opacity 0.15s ease !important;
	pointer-events: all !important;
}
.overlay-hinweis-permanent:hover {
	max-width: 300px !important;
	white-space: pre-wrap !important;
	opacity: 1 !important;
}
.dark .overlay-hinweis-permanent {
	background: #422006 !important;
	border-color: #92400e !important;
	color: #fde68a !important;
}

/* Danger zone tooltip */
.overlay-danger-tooltip {
	background: rgba(239, 68, 68, 0.08) !important;
	border: 1px solid rgba(239, 68, 68, 0.4) !important;
	color: #b91c1c !important;
	font-size: 11px !important;
}
.dark .overlay-danger-tooltip {
	background: rgba(239, 68, 68, 0.12) !important;
	border-color: rgba(239, 68, 68, 0.35) !important;
	color: #fca5a5 !important;
}

/* Hinweis popup content */
.overlay-hinweis-popup strong {
	display: block;
	margin-bottom: 4px;
	font-size: 13px;
}
.overlay-hinweis-popup p {
	margin: 0;
	font-size: 12px;
	white-space: pre-wrap;
	max-width: 220px;
}

/* Leaflet draw toolbar theming */
.leaflet-draw-toolbar a {
	border-radius: 0.375rem !important;
}
.dark .leaflet-draw-toolbar a {
	background-color: #18181b !important;
	border-color: #3f3f46 !important;
	color: #d4d4d8 !important;
}

/* ==========================================
   Overlay Sidebar v3 (ov-*)
   Panel is appended to <body> (position: fixed) to avoid
   overflow:hidden clipping from map container wrappers.
   ========================================== */

.ov-control { overflow: visible !important; }
.ov-hidden  { display: none !important; }

/* ── Trigger bar wrapper ── */
.ov-wrap { display: block; }

/* ── Trigger button (inherits leaflet-bar border/bg/radius) ── */
.ov-trigger-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	background: #fff;
	border: none;
	outline: none;
	color: #555;
	cursor: pointer;
	transition: background 0.12s, color 0.12s;
	position: relative;
}
.ov-trigger-btn:hover { background: #f4f4f4; color: #333; }
.ov-trigger-btn.active { background: #dbeafe; color: #1d4ed8; }

/* Hover tooltip via CSS — shows station number + name */
.ov-trigger-btn::after {
	content: attr(data-tooltip);
	position: absolute;
	right: calc(100% + 8px);
	top: 50%;
	transform: translateY(-50%);
	background: #1e293b;
	color: #fff;
	font-size: 11px;
	font-weight: 500;
	white-space: nowrap;
	padding: 4px 8px;
	border-radius: 4px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s 0.3s;
	z-index: 10001;
}
.ov-trigger-btn:hover::after { opacity: 1; }

/* ==========================================================================
   OVERLAY PANEL — CSS CUSTOM PROPERTIES
   Edit these to retheme the entire sidebar and tooltips in one place.
   ========================================================================== */
:root {
    /* Panel chrome */
    --ov-bg:            #ffffff;
    --ov-border:        #e2e8f0;
    --ov-section-bg:    #f8fafc;
    --ov-body-text:     #334155;
    --ov-muted:         #64748b;
    --ov-divider:       #e5e7eb;
    /* Active / accent */
    --ov-accent-bg:     #dbeafe;
    --ov-accent-text:   #1d4ed8;
    /* Map tooltips — --ov-tt-border and --ov-tt-glow are
       overridden per-element at runtime by bindColoredTooltip() */
    --ov-tt-bg:         rgba(13, 17, 27, 0.92);
    --ov-tt-border:     rgba(100, 116, 139, 0.5);
    --ov-tt-glow:       rgba(100, 116, 139, 0.15);
    --ov-tt-text:       #f1f5f9;
    --ov-tt-radius:     5px;
    --ov-tt-font-size:  11px;
}

/* ── Panel (position: fixed, appended to body) ── */
.ov-panel {
	position: fixed;
	z-index: 10000;
	width: min(240px, calc(100vw - 24px));
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	box-shadow: 0 12px 36px rgba(15,23,42,0.15);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 24px);
	/* top / right set dynamically by positionOvPanel() */
}

/* ── Header ── */
.ov-header {
	display: flex; align-items: center; gap: 7px;
	padding: 8px 10px;
	background: #f8fafc; border-bottom: 1px solid #e2e8f0;
	flex-shrink: 0;
}
.ov-header-info { display: flex; align-items: baseline; gap: 5px; flex: 1; min-width: 0; }
.ov-header-station { font-size: 13px; font-weight: 800; color: #1e293b; flex-shrink: 0; }
.ov-header-name { font-size: 11px; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-close-btn {
	width: 22px; height: 22px;
	display: flex; align-items: center; justify-content: center;
	background: none; border: 1px solid transparent; color: #94a3b8;
	cursor: pointer; border-radius: 5px; transition: all 0.15s;
	flex-shrink: 0;
}
.ov-close-btn:hover { background: #fee2e2; color: #dc2626; border-color: #fecaca; }

/* ── Category toolbar ── */
.ov-toolbar {
	display: flex; align-items: center; gap: 1px;
	padding: 5px 7px;
	background: #fff; border-bottom: 1px solid #e5e7eb;
	flex-shrink: 0;
}
.ov-tb-item { position: relative; flex-shrink: 0; }
.ov-tb-cat {
	width: 30px; height: 30px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 7px; border: none; background: transparent;
	color: #64748b; cursor: pointer; transition: all 0.12s;
	position: relative;
}
.ov-tb-cat:hover { background: #f1f5f9; color: #0f172a; }
.ov-tb-cat.active { background: #dbeafe; color: #1d4ed8; }
.ov-tb-cat .ov-badge {
	position: absolute; top: 1px; right: 1px;
	font-size: 7px; padding: 0 3px; min-width: 12px;
	line-height: 1.6; text-align: center; pointer-events: none;
}
.ov-tb-sep { width: 1px; height: 18px; background: #e5e7eb; margin: 0 3px; flex-shrink: 0; }
.ov-tb-act {
	width: 28px; height: 28px; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	border-radius: 6px; border: 1px solid #e2e8f0; background: transparent;
	color: #64748b; cursor: pointer; transition: all 0.12s;
}
.ov-tb-act:hover { background: #f1f5f9; }
.ov-tb-act:disabled { opacity: 0.35; cursor: not-allowed; }
.ov-tb-act-danger { color: #dc2626; border-color: #fecaca; }
.ov-tb-act-danger:hover { background: #fef2f2 !important; }
.ov-color-preview {
	width: 13px; height: 13px; border-radius: 50%; display: block;
	box-shadow: 0 0 0 1.5px rgba(0,0,0,0.15);
	transition: background 0.15s;
}

/* ── Sub-toolbars (category panels) ── */
.ov-subtoolbar {
	display: flex; flex-wrap: nowrap; align-items: center; gap: 2px;
	padding: 5px 7px; border-bottom: 1px solid #e5e7eb;
	flex-shrink: 0; overflow-x: auto; background: #fafafa;
}
.ov-subtoolbar::-webkit-scrollbar { height: 0; }
.ov-subtoolbar-wrap { flex-wrap: wrap; }
.ov-subtoolbar-color { flex-direction: column; align-items: stretch; gap: 7px; }
.ov-sub-btn {
	display: flex; align-items: center; gap: 4px;
	padding: 4px 7px; border-radius: 6px;
	border: 1px solid transparent; background: transparent;
	font-size: 11px; font-weight: 500; color: #334155;
	cursor: pointer; transition: all 0.12s;
	flex-shrink: 0; white-space: nowrap;
}
.ov-sub-btn:hover { background: #f1f5f9; color: #0f172a; }
.ov-sub-btn.active { background: #dbeafe; border-color: #bfdbfe; color: #1d4ed8; }
.ov-color-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.ov-sub-emoji { font-size: 13px; line-height: 1; flex-shrink: 0; }

/* ── Color Palette ── */
.ov-palette { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.ov-swatch {
	width: 24px; height: 24px; justify-self: center;
	border-radius: 50%; border: 2px solid transparent;
	cursor: pointer; transition: all 0.12s;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}
.ov-swatch:hover { transform: scale(1.15); box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
.ov-swatch.active {
	border-color: #1e293b;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3b82f6;
	transform: scale(1.1);
}
.ov-custom-row { display: flex; align-items: center; gap: 8px; }
.ov-custom-input {
	width: 28px; height: 24px;
	border: 1px solid #e2e8f0; border-radius: 5px;
	padding: 1px; cursor: pointer; background: #fff;
}
.ov-custom-label { font-size: 10px; color: #64748b; }
.ov-custom-label.active { color: #2563eb; font-weight: 600; }

/* ── Badges ── */
.ov-badge {
	font-size: 9px; padding: 1px 5px;
	border-radius: 10px; background: #dbeafe;
	color: #2563eb; font-weight: 700; line-height: 1.4;
}

/* ── Scrollable body (element list) ── */
.ov-body {
	flex: 1; overflow-y: auto; padding: 7px;
	max-height: calc(100vh - 200px);
}

/* ── Element List ── */
.ov-element-list { display: flex; flex-direction: column; gap: 4px; }
.ov-element-row {
	display: flex; align-items: center; gap: 5px;
	padding: 5px 7px; border-radius: 8px;
	font-size: 10px; color: #334155;
	background: #f8fafc; transition: background 0.12s;
}
.ov-element-row:hover { background: #f1f5f9; }
.ov-element-icon { font-size: 12px; flex-shrink: 0; }
.ov-element-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-rename {
	cursor: text;
	border-radius: 3px;
	outline: none;
	padding: 0 2px;
	margin: 0 -2px;
	transition: background 0.12s, box-shadow 0.12s;
}
.ov-rename:hover { background: rgba(59,130,246,0.07); }
.ov-rename:focus {
	background: #eff6ff;
	box-shadow: 0 0 0 1.5px #3b82f6;
	text-overflow: clip;
	white-space: nowrap;
	color: #1e40af;
}
.ov-panel.dark .ov-rename:hover { background: rgba(96,165,250,0.1); }
.ov-panel.dark .ov-rename:focus { background: #1e3a5f; box-shadow: 0 0 0 1.5px #3b82f6; color: #93c5fd; }
.ov-element-delete {
	width: 18px; height: 18px;
	display: flex; align-items: center; justify-content: center;
	border: none; background: none; color: #cbd5e1;
	cursor: pointer; border-radius: 4px; transition: all 0.12s; flex-shrink: 0;
}
.ov-element-delete:hover { background: #fee2e2; color: #dc2626; }
.ov-empty { font-size: 10px; color: #94a3b8; text-align: center; padding: 8px; }

/* ── Footer ── */
.ov-footer {
	padding: 7px 10px; background: #f8fafc; border-top: 1px solid #e2e8f0;
	display: flex; align-items: center; justify-content: space-between;
	flex-shrink: 0;
}
.ov-sync-status { font-size: 10px; color: #94a3b8; }

/* MDI icon sizing – overlay panel contexts */
.ov-element-icon .mdi,
.ov-element-icon > i.mdi { font-size: 13px; line-height: 1; }
.ov-sub-btn .mdi         { font-size: 14px; line-height: 1; flex-shrink: 0; }
   Background, border and glow are set per-element via JS (bindColoredTooltip).
   CSS variables defined in :root above. */
.overlay-route-tooltip,
.overlay-zone-tooltip {
	background: var(--ov-tt-bg) !important;
	border: 1.5px solid var(--ov-tt-border) !important;
	color: var(--ov-tt-text) !important;
	font-size: var(--ov-tt-font-size) !important;
	font-weight: 600 !important;
	padding: 4px 9px !important;
	border-radius: var(--ov-tt-radius) !important;
	box-shadow: 0 2px 14px var(--ov-tt-glow) !important;
	white-space: nowrap !important;
	text-shadow: none !important;
}
/* Hide the pointer arrow — these tooltips follow the cursor (sticky) */
.overlay-route-tooltip::before,
.overlay-zone-tooltip::before { display: none !important; }

/* ========== DARK MODE — Overlay Sidebar ========== */

.dark .ov-trigger-btn { background: #27272a; color: #d4d4d8; }
.dark .ov-trigger-btn:hover { background: #3f3f46; color: #fff; }
.dark .ov-trigger-btn.active { background: #1e3a5f; color: #60a5fa; }
.dark .ov-trigger-btn::after { background: #e4e4e7; color: #18181b; }

/* Panel is on body; dark class mirrored by JS */
.ov-panel.dark { background: #18181b; border-color: #27272a; box-shadow: 0 8px 32px rgba(0,0,0,0.6); }
.ov-panel.dark .ov-header { background: #121214; border-color: #27272a; }
.ov-panel.dark .ov-header-station { color: #e4e4e7; }
.ov-panel.dark .ov-header-name { color: #a1a1aa; }
.ov-panel.dark .ov-close-btn { color: #71717a; }
.ov-panel.dark .ov-close-btn:hover { background: #450a0a; color: #fca5a5; border-color: #7f1d1d; }
.ov-panel.dark .ov-toolbar { background: #18181b; border-color: #27272a; }
.ov-panel.dark .ov-tb-cat { color: #71717a; }
.ov-panel.dark .ov-tb-cat:hover { background: #27272a; color: #e4e4e7; }
.ov-panel.dark .ov-tb-cat.active { background: #1e3a5f; color: #60a5fa; }
.ov-panel.dark .ov-tb-sep { background: #3f3f46; }
.ov-panel.dark .ov-tb-act { color: #71717a; border-color: #3f3f46; }
.ov-panel.dark .ov-tb-act:hover { background: #27272a; color: #e4e4e7; }
.ov-panel.dark .ov-tb-act-danger { color: #fca5a5; border-color: #7f1d1d; }
.ov-panel.dark .ov-tb-act-danger:hover { background: #450a0a !important; }
.ov-panel.dark .ov-subtoolbar { background: #1c1c1f; border-color: #27272a; }
.ov-panel.dark .ov-sub-btn { color: #a1a1aa; }
.ov-panel.dark .ov-sub-btn:hover { background: #27272a; color: #e4e4e7; }
.ov-panel.dark .ov-sub-btn.active { background: #1e3a5f; border-color: #1d4ed8; color: #60a5fa; }
.ov-panel.dark .ov-swatch { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
.ov-panel.dark .ov-swatch.active { border-color: #e4e4e7; box-shadow: 0 0 0 2px #18181b, 0 0 0 4px #3b82f6; }
.ov-panel.dark .ov-custom-input { background: #27272a; border-color: #3f3f46; }
.ov-panel.dark .ov-custom-label { color: #a1a1aa; }
.ov-panel.dark .ov-custom-label.active { color: #60a5fa; }
.ov-panel.dark .ov-badge { background: #27272a; color: #a1a1aa; }
.ov-panel.dark .ov-body { background: #18181b; }
.ov-panel.dark .ov-element-row { background: #1f1f23; color: #d4d4d8; }
.ov-panel.dark .ov-element-row:hover { background: #27272a; }
.ov-panel.dark .ov-element-delete { color: #52525b; }
.ov-panel.dark .ov-element-delete:hover { background: #450a0a; color: #fca5a5; }
.ov-panel.dark .ov-empty { color: #52525b; }
.ov-panel.dark .ov-footer { background: #1c1c1f; border-color: #3f3f46; }
.ov-panel.dark .ov-sync-status { color: #52525b; }

@media (max-width: 640px) {
	.ov-panel { width: calc(100vw - 20px); border-radius: 12px; }
	.ov-palette { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* ===== SECTION 2: LEAFLET CONTROLS — LIGHT / DARK ===== */

.leaflet-control-layers {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 0.375rem !important;
	background: #ffffff !important;
	padding: 0 !important;
}

.dark .leaflet-control-layers {
	background: #18181b !important;
	border-color: #3f3f46 !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.leaflet-control-layers-toggle {
	width: 36px !important;
	height: 36px !important;
	border-radius: 0.375rem !important;
	background: #ffffff !important;
	box-shadow: none !important;
	border: 1px solid #e2e8f0 !important;
	background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 105.02"><g><path fill="%23334155" d="M97.25,40.58l23.85,10.28c1.48,0.64,2.17,2.36,1.53,3.85c-0.32,0.75-0.93,1.3-1.63,1.57l-23.19,9.39l23.29,10.04 c1.48,0.64,2.17,2.36,1.53,3.84c-0.32,0.75-0.93,1.3-1.63,1.57l-58.52,23.69c-0.73,0.3-1.52,0.27-2.2,0L1.83,81.05 c-1.5-0.61-2.22-2.31-1.61-3.81c0.33-0.82,0.99-1.4,1.76-1.67l22.97-9.96l-23.12-9.4c-1.5-0.61-2.22-2.31-1.61-3.81 c0.33-0.82,0.99-1.4,1.76-1.67l23.53-10.21L1.83,30.9c-1.5-0.61-2.22-2.31-1.61-3.81c0.33-0.82,0.99-1.4,1.76-1.67L60.02,0.24 c0.77-0.33,1.6-0.31,2.31,0l0-0.01l58.77,25.32c1.48,0.64,2.17,2.36,1.53,3.84c-0.32,0.75-0.93,1.3-1.63,1.57L97.25,40.58 L97.25,40.58z M112.36,53.47l-22.73-9.79L62.49,54.66c-0.73,0.3-1.52,0.27-2.2,0L33.08,43.6L10.47,53.4L61.39,74.1L112.36,53.47 L112.36,53.47z M90.19,68.75l-27.7,11.21c-0.73,0.3-1.52,0.27-2.2,0L32.52,68.68l-22.05,9.56l50.92,20.69l50.97-20.63L90.19,68.75 L90.19,68.75z M61.17,6.1l-50.7,21.99l50.92,20.69l50.97-20.63L61.17,6.1L61.17,6.1z"/></g></svg>') !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 20px 20px !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
}

.dark .leaflet-control-layers-toggle {
	background-color: #27272a !important;
	border-color: #3f3f46 !important;
	background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 105.02"><g><path fill="%23d4d4d8" d="M97.25,40.58l23.85,10.28c1.48,0.64,2.17,2.36,1.53,3.85c-0.32,0.75-0.93,1.3-1.63,1.57l-23.19,9.39l23.29,10.04 c1.48,0.64,2.17,2.36,1.53,3.84c-0.32,0.75-0.93,1.3-1.63,1.57l-58.52,23.69c-0.73,0.3-1.52,0.27-2.2,0L1.83,81.05 c-1.5-0.61-2.22-2.31-1.61-3.81c0.33-0.82,0.99-1.4,1.76-1.67l22.97-9.96l-23.12-9.4c-1.5-0.61-2.22-2.31-1.61-3.81 c0.33-0.82,0.99-1.4,1.76-1.67l23.53-10.21L1.83,30.9c-1.5-0.61-2.22-2.31-1.61-3.81c0.33-0.82,0.99-1.4,1.76-1.67L60.02,0.24 c0.77-0.33,1.6-0.31,2.31,0l0-0.01l58.77,25.32c1.48,0.64,2.17,2.36,1.53,3.84c-0.32,0.75-0.93,1.3-1.63,1.57L97.25,40.58 L97.25,40.58z M112.36,53.47l-22.73-9.79L62.49,54.66c-0.73,0.3-1.52,0.27-2.2,0L33.08,43.6L10.47,53.4L61.39,74.1L112.36,53.47 L112.36,53.47z M90.19,68.75l-27.7,11.21c-0.73,0.3-1.52,0.27-2.2,0L32.52,68.68l-22.05,9.56l50.92,20.69l50.97-20.63L90.19,68.75 L90.19,68.75z M61.17,6.1l-50.7,21.99l50.92,20.69l50.97-20.63L61.17,6.1L61.17,6.1z"/></g></svg>') !important;
}

.leaflet-control-layers-toggle:hover {
	background-color: #f1f5f9 !important;
	border-color: #cbd5e1 !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.dark .leaflet-control-layers-toggle:hover {
	background-color: #3f3f46 !important;
	border-color: #52525b !important;
}

.leaflet-control-layers-list { padding: 12px !important; }

.leaflet-control-layers label {
	font-size: 0.875rem !important;
	font-weight: 500 !important;
	color: #334155 !important;
	margin-bottom: 8px !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}

.dark .leaflet-control-layers label { color: #d4d4d8 !important; }

.leaflet-control-layers input[type="radio"],
.leaflet-control-layers input[type="checkbox"] {
	cursor: pointer !important;
	accent-color: #2563eb !important;
}

.leaflet-control-layers-separator {
	border-color: #e2e8f0 !important;
	margin: 8px 0 !important;
}

.dark .leaflet-control-layers-separator { border-color: #3f3f46 !important; }

.leaflet-control-layers-group-name {
	font-weight: 600 !important;
	font-size: 0.75rem !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	color: #64748b !important;
	margin-top: 12px !important;
	margin-bottom: 8px !important;
}

.dark .leaflet-control-layers-group-name { color: #71717a !important; }
/* ===== DWD Warning Zones — diagonal hatching via CSS mask ===== */
.leaflet-layer.dwd-warn-tile {
	filter: blur(5.1px) saturate(1.28) contrast(1.08);
	mix-blend-mode: add;
	opacity: 0.96;
	transition: opacity 1.0s ease, filter 1.0s ease;
}

.leaflet-tile.dwd-warn-tile,
.dwd-warn-tile .leaflet-tile,
img.dwd-warn-tile {
	-webkit-mask-image: none;
	mask-image: none;
	opacity: 1;
	filter: none;
	transition: opacity 1.0s ease, filter 1.0s ease;
}

html.dark .leaflet-layer.dwd-warn-tile {
	filter: blur(5.95px) saturate(1.2) contrast(1.06) brightness(1.02);
	opacity: 1;
	mix-blend-mode: screen;
	transition: opacity 1.0s ease, filter 1.0s ease;
}

html.dark .leaflet-tile.dwd-warn-tile,
html.dark .dwd-warn-tile .leaflet-tile,
html.dark img.dwd-warn-tile {
	opacity: 1;
	filter: none;
}

/* ===== Rain Radar Timeline Slider ===== */
#radarSlider {
	-webkit-appearance: none;
	appearance: none;
	height: 6px;
	background: #e2e8f0;
	border-radius: 9999px;
	outline: none;
}
.dark #radarSlider {
	background: #3f3f46;
}
#radarSlider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #3b82f6;
	cursor: pointer;
	border: 2px solid #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
#radarSlider::-moz-range-thumb {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #3b82f6;
	cursor: pointer;
	border: 2px solid #fff;
}