/* Copyright (C) 2025 Aron Sommer. See LICENSE file for full license details. */

:root {
	--color-black: #000000;
	--color-white: #ffffff;
	--color-red: #ea4335;
	--color-blue: #4285f4;
	--color-yellow: #fbbc04;
	--color-green: #25d366;
	--color-neutral-grey: #f5f5f5;

	--routing-color-start: var(--color-green);
	--routing-color-end: var(--color-red);
	--routing-color-via: var(--color-blue);
	--strava-color: #fc5200;

	--swal-color-success: var(--color-green);
	--swal-color-error: var(--color-red);
	--swal-color-warning: var(--color-yellow);
	--swal-color-info: var(--color-blue);
	--swal-color-question: var(--color-blue);

	/* Light Theme Variables */
	--icon-color: var(--color-black);
	--border-color: #757575;
	--divider-color: var(--border-color);
	--background-color: var(--color-white);
	--background2-color: #bdbdbd;
	--text-color: var(--color-black);
	--highlight-color: var(--color-blue);
	--locate-color: var(--color-blue);
}

body.dark-mode {
	/* Dark Theme Variables */
	--icon-color: var(--color-white);
	--border-color: #bdbdbd;
	--divider-color: var(--border-color);
	--background-color: #282828;
	--background2-color: #575b5f;
	--text-color: var(--color-white);
	color: var(--color-white);
}

* {
	margin: 0;
	padding: 0;
	font-family: "Roboto", sans-serif !important;
	/* Forcefully remove blue highlight of button on mobile */
	-webkit-tap-highlight-color: transparent !important;
}

/* Also remove the focus outline, which can appear as a blue ring */
*:focus {
	outline: none !important;
}

input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--highlight-color) !important;
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
}

#map {
	height: 100vh;
	/* Fallback for older browsers */
	height: 100dvh;
	/* Fix content hidden under Android nav bar */
	width: 100%;
	position: relative;
	/* Needed for absolute positioning of children */
}

.leaflet-container {
	background: var(--color-neutral-grey);
}

/* Unified icon styling */

/* 1. Center all icons in their button containers using flexbox */
.leaflet-control-custom a,
.leaflet-control-locate a,
.leaflet-control-layers-toggle,
.leaflet-control-zoom a,
.leaflet-draw-toolbar a,
.tab-button

/* Also apply to tab buttons */
	{
	display: flex !important;
	justify-content: center;
	align-items: center;
}

/* 2. Remove default background image from leaflet.draw icons */
.leaflet-draw-toolbar a {
	background-image: none !important;
}

/* Clear style for disabled draw buttons */
.leaflet-draw-toolbar a.leaflet-disabled {
	background-color: var(--background2-color) !important;
	cursor: not-allowed;
}

.leaflet-draw-toolbar a.leaflet-disabled .icon {
	fill: var(--icon-color);
	/* Use a faded grey for the icon itself */
}

/* Info panel for selected items */
#info-panel {
	position: relative;
	/* Needed for color picker positioning */
	background-color: var(--background-color);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	text-align: center;
	width: 100%;
	/* Take full width of parent */
	min-height: 90px;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 10px;
	box-sizing: border-box;
}

#info-panel-name {
	position: relative;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	width: 250px;
	max-width: 100%;
	margin-bottom: 5px;
	background-color: var(--background-color);
	border: 2px dashed var(--border-color);
	border-radius: 8px;
	color: var(--text-color);
	padding: 5px;
	resize: none;
	overflow-y: hidden;
	line-height: 1.5;
	box-sizing: border-box;
}

#info-panel-name:focus {
	outline: none;
	border: none;
	background-color: var(--highlight-color);
	color: var(--background-color);
}

#info-panel-details {
	font-size: 12px;
	color: var(--text-color) !important;
	margin: 0;
	overflow: hidden;
	margin-top: 5px;
	padding: 0 5px;
	/* Add padding to prevent text touching edges */
	display: flex;
	align-items: center;
	justify-content: center;
}

#info-panel-details .copy-icon {
	width: 20px;
	height: 20px;
	fill: var(--icon-color);
	margin-left: 6px;
	flex-shrink: 0;
	/* Prevents the icon from shrinking if space is tight */
	position: absolute;
	transform: translateY(-6px);
}

#auth-callback-domain-copy-icon {
	width: 20px;
	height: 20px;
	fill: var(--icon-color);
	margin-left: 6px;
	flex-shrink: 0;
	position: absolute;
	transform: translateY(-1px);
}

#info-panel-edit-hint {
	font-size: 12px;
	color: var(--text-color);
	margin-top: 5px;
	max-width: 100%;
	box-sizing: border-box;
}

/* Style Row for Color Swatch and Layer Name */
#info-panel-style-row {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	margin-top: 5px;
	min-height: 22px;
}

#info-panel-color-swatch {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	transition: transform 0.1s ease-in-out;
	position: absolute;
	left: 5px;
	bottom: 5px;
}

/* Hide color swatch when picker is open */
#info-panel:has(#color-picker[style*="display: grid"]) #info-panel-color-swatch {
	display: none;
}

#info-panel-layer-name {
	font-size: 12px;
	color: var(--text-color);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
}

a#info-panel-strava-link {
	color: var(--strava-color) !important;
	text-decoration: none !important;
	font-size: 12px;
}

a#info-panel-strava-link:hover {
	text-decoration: underline !important;
}

/* Color Picker Styles */
#color-picker {
	display: none;
	/* Hidden by default, JS toggles to 'grid' */
	width: 100%;
	box-sizing: border-box;
	padding: 5px;
	gap: 5px;
	grid-template-columns: repeat(auto-fill, minmax(24px, 1fr));
	background-color: var(--background-color);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	margin-top: 5px;
	/* Space it from the info panel content */
}

.color-swatch {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	cursor: pointer;
	border: none;
	transition: transform 0.1s ease-in-out;
	box-sizing: border-box;
}

.color-swatch:hover {
	transform: scale(1.15);
}

.color-swatch.selected {
	border: 2px solid var(--text-color);
}

/* Overview panel styles */
#overview-panel {
	width: 100%;
	background-color: var(--background-color);
	border: none;
	border-radius: 0 0 8px 8px;
	flex-direction: column;
	margin: 0;
	padding: 0;
	overflow: hidden;
	box-sizing: border-box;
	padding-top: 10px;
}

#overview-panel.is-empty {
	padding-top: 0;
}

#overview-panel-list {
	list-style: none;
	padding: 0;
	margin: 0;
	overflow-y: auto;
	flex-grow: 1;
	max-height: calc(100dvh - 400px);
}

.overview-list-item {
	display: flex;
	align-items: center;
	padding: 8px 12px;
	cursor: pointer;
	border-bottom: 1px solid var(--divider-color);
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background-color: var(--background-color);
	color: var(--text-color) !important;
	scroll-margin-top: 30px;
}

.overview-visibility-btn,
.overview-duplicate-btn,
.overview-delete-btn {
	display: inline-block;
	padding-right: 8px;
	color: var(--color-black);
	cursor: pointer;
	line-height: 1;
	user-select: none;
}

.overview-visibility-btn .icon,
.overview-duplicate-btn .icon,
.overview-delete-btn .icon {
	width: 18px;
	height: 18px;
	fill: var(--icon-color);
	vertical-align: middle;
}

.overview-item-text {
	flex-grow: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--text-color);
}

.overview-list-item:last-child {
	border-bottom: none !important;
}

.overview-list-item.selected {
	background-color: var(--highlight-color);
}

/* Custom Layers Panel Styles */
.layer-icon {
	vertical-align: middle;
	margin-right: 0;
	padding: 0 !important;
}

.material-symbols.layer-icon {
	font-size: 16px !important;
}

#custom-layers-panel {
	display: none;
	/* Hidden by default */
	position: absolute;
	top: 10px;
	left: 51px;
	/* The toolbar width is ~40px, so 51px provides a 10px gap */
	z-index: 1003;
	/* Ensure it's above the map but consistent with other panels */
	background-color: var(--background-color);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	max-height: calc(100dvh - 60px);
	overflow-y: auto;
	width: 200px;
}

/* Style the form content that we will move into the panel */
#custom-layers-panel .leaflet-control-layers-form {
	padding: 8px;
	background-color: transparent;
	border-radius: 8px;
}

#custom-layers-panel .leaflet-control-layers-separator {
	height: 1px;
	background-color: var(--border-color);
	margin: 5px 0;
}

#custom-layers-panel label div {
	display: flex;
	align-items: center;
	height: 25px;
}

#custom-layers-panel span {
	padding-left: 5px;
}

.leaflet-control-layers-selector {
	margin-top: 0;
	position: relative;
	top: 0;
}

/* WMS custom layer truncation */
#custom-layers-panel .wms-custom-layer .layer-name-text {
	width: 150px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: inline-block;
	vertical-align: middle;
}

#custom-layers-panel .wms-custom-layer .layer-name-container {
	display: inline-flex;
	align-items: center;
}

/* Remove default Leaflet control styling from the content inside our panel */
#custom-layers-panel .leaflet-control-layers {
	border: none !important;
	box-shadow: none !important;
	background-color: transparent !important;
}

/* Routing Panel Styles */
#routing-panel {
	width: 100%;
	box-sizing: border-box;
	flex-direction: column;
	background-color: var(--background-color);
	border: none;
	border-radius: 0 0 8px 8px;
	padding: 0;
}

#routing-panel-content {
	padding: 10px;
	padding-bottom: 0;
}

.routing-input-group {
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	position: relative;
	/* Needed for suggestion list positioning */
}

.routing-input-group input {
	flex-grow: 1;
	background-color: var(--background-color) !important;
	color: var(--text-color) !important;
}

.routing-input-group input::placeholder {
	color: var(--text-color) !important;
}

.routing-input-group input,
.routing-input-group select {
	padding: 6px;
	border: 1px solid var(--border-color);
	border-radius: 4px;
	height: 30px;
	box-sizing: border-box;
	background-color: var(--background-color);
	color: var(--text-color);
}

.routing-input-group button {
	margin-left: 5px;
	padding: 5px;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	background: none;
	border: 1px solid var(--border-color);
	border-radius: 4px;
	background-color: var(--background-color);
	font-size: 14px;
}

.routing-input-group button.active {
	background-color: var(--text-color);
	color: var(--color-white);
	border-color: var(--border-color);
}

/* Routing Profile Button Group Styles */

/* The container for the buttons */
.routing-profile-selector {
	display: flex;
	/* Aligns buttons horizontally */
	flex: 1;
	/* Allows the group to take up available space like the other buttons */
}

/* Individual profile buttons */
.routing-profile-selector .profile-btn {
	flex: 1;
	/* Each button takes an equal share of the space */
	display: flex;
	justify-content: center;
	align-items: center;
	height: 30px;
	padding: 6px;
	background-color: var(--background-color);
	border: 1px solid var(--border-color);
	cursor: pointer;
	margin: 0;
	box-sizing: border-box;
	border-radius: 0;
}

/* Remove the right border from buttons that are not the last one */
.routing-profile-selector .profile-btn:not(:last-child) {
	border-right: none;
}

/* Round the corners only on the outer edges of the group */
.routing-profile-selector .profile-btn:first-child {
	border-radius: 4px 0 0 4px;
}

.routing-profile-selector .profile-btn:last-child {
	border-radius: 0 4px 4px 0;
}

/* Style for the active/selected button */
.routing-profile-selector .profile-btn.active {
	background-color: var(--text-color);
	border-color: var(--text-color);
}

/* Change the icon color to match the button's text color */
.routing-profile-selector .profile-btn .material-symbols {
	color: var(--text-color);
}

/* On the active button, make the icon match the background color */
.routing-profile-selector .profile-btn.active .material-symbols {
	color: var(--background-color);
}

#routing-panel-content>.routing-input-group:last-child {
	display: flex;
	justify-content: center;
	/* Center items horizontally */
	align-items: center;
}

#route-profile {
	flex-grow: 0;
	flex-shrink: 0;
	width: 75px;
	height: 30px;
	margin: 0;
	padding: 6px !important;
	font-size: 14px !important;
	white-space: nowrap;
	box-sizing: border-box;
}

#clear-route-btn,
#save-route-btn {
	flex: 1;
	min-width: 0;
	height: 30px;
	margin: 0;
	padding: 6px !important;
	font-size: 14px !important;
	white-space: nowrap;
	box-sizing: border-box;
}

#clear-route-btn {
	font-size: 14px;
	background-color: var(--background-color);
	color: var(--text-color);
	border: 1px solid var(--border-color);
	border-radius: 4px;
	cursor: pointer;
}

#clear-route-btn:not(:disabled) {
	font-weight: bold;
	background-color: var(--text-color);
	color: var(--background-color);
	border: none;
}

#clear-route-btn:disabled {
	cursor: not-allowed;
}

#save-route-btn {
	padding: 8px;
	font-size: 14px;
	background-color: var(--background-color);
	color: var(--text-color);
	border: 1px solid var(--border-color);
	border-radius: 4px;
	cursor: pointer;
	margin-left: 5px;
	margin-right: 5px;
}

#save-route-btn:not(:disabled) {
	font-weight: bold;
	background-color: var(--text-color);
	color: var(--background-color);
	border: none;
}

#save-route-btn:disabled {
	cursor: not-allowed;
}

#routing-info-icon {
	margin-left: 5px;
}

/* Strava Panel Style */
#strava-panel {
	border: none;
	border-radius: 0 0 8px 8px;
	background-color: var(--background-color);
	gap: 10px;
}

#strava-panel-content {
	padding: 10px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
}

#strava-panel-content p {
	font-size: 14px;
	text-align: center;
}

.strava-export-buttons {
	flex-basis: 100%;
	display: flex;
	gap: 10px;
	justify-content: center;
}

/* Link containing the official 'Connect with Strava' SVG image */
.strava-button-link {
	display: inline-block;
	transition: opacity 0.2s ease-in-out;
}

.strava-button-link img {
	display: block;
	height: 48px;
	/* Standard height for these buttons */
	width: auto;
}

#info-panel-strava-link {
	display: none;
	/* Hidden by default */
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: var(--strava-color);
	font-size: 13px;
	font-weight: bold;
	margin-top: 5px;
	padding: 4px 8px;
	border-radius: 4px;
	transition: background-color 0.2s ease-in-out;
}

/* Autocomplete suggestion list styles */
.autocomplete-suggestions {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background-color: var(--background-color);
	border: 1px solid var(--divider-color);
	border-top: none;
	z-index: 1002;
	border-radius: 0 0 8px 8px;
	padding-bottom: 5px;
}

#routing-panel .autocomplete-suggestions {
	/* This value is the calculated space for the 3 buttons. */
	/* It aligns the suggestion box with the input field above it. */
	right: 99px;
}

.autocomplete-suggestion-item {
	padding: 8px 10px;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--text-color);
}

.autocomplete-suggestion-item:hover,
.autocomplete-suggestion-item.active {
	background-color: var(--highlight-color) !important;
}

/* Seamless Input/Suggestion Box Connection */
/* This is traditionally difficult with CSS alone, but the modern :has() selector makes it possible.
   We select the parent group if it :has() a visible suggestion list, then style the input inside it. */
.routing-input-group:has(.autocomplete-suggestions[style*="display: block"])>input[type="text"] {
	/* Make the bottom corners sharp to connect to the box below */
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

/* Directions Panel Styles */
#directions-panel {
	margin-top: 10px;
	margin-bottom: 10px;
	border: 1px solid var(--border-color);
	border-radius: 4px;
	overflow: hidden;
	/* To contain the rounded corners */
	display: none;
	/* Hidden by default, shown when a route is found */
}

#directions-panel-header {
	padding: 0 12px;
	height: 30px;
	display: flex;
	align-items: center;
	font-weight: normal;
	background-color: var(--background-color);
	cursor: pointer;
	user-select: none;
	font-size: 12px;
	border-bottom: 1px solid var(--border-color);
	box-sizing: border-box;
}

#directions-panel.collapsed #directions-panel-header {
	border-bottom: none;
}

.directions-panel-header-arrow {
	margin-right: 4px;
	vertical-align: middle;
}

/* Default state (collapsed): arrow points down */
#directions-panel.collapsed .directions-panel-header-arrow::before {
	content: "keyboard_arrow_down";
}

/* Expanded state: arrow points up */
#directions-panel:not(.collapsed) .directions-panel-header-arrow::before {
	content: "keyboard_arrow_up";
}

#directions-list {
	list-style: none;
	padding: 0;
	margin: 0;
	overflow-y: auto;
	max-height: 125px;
	background-color: var(--background-color);
}

#directions-panel.collapsed #directions-list {
	display: none;
}

.direction-item {
	padding: 8px 12px;
	min-height: 30px;
	display: flex;
	align-items: center;
	font-size: 12px;
	border-bottom: 1px solid var(--divider-color);
	box-sizing: border-box;
}

.direction-item:last-child {
	border-bottom: none;
}

/* Tab System Styles */
#tab-container {
	width: 100%;
	box-sizing: border-box;
}

#tab-buttons {
	display: flex;
	width: 100%;
}

.tab-button {
	flex: 1;
	padding: 8px 5px;
	/* Reduced padding slightly to help with spacing */
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	border: 1px solid var(--border-color);
	background-color: var(--background2-color);
	border-right: none;
	outline: none;
	color: var(--text-color);
	min-width: 0;
	display: flex;
	/* Use flexbox for alignment */
	justify-content: center;
	align-items: center;
	height: 35px;
}

.tab-button.active {
	/* color: var(--text-color); */
	border-bottom-color: var(--background-color);
}

#tab-btn-overview {
	border-radius: 8px 0 0 0;
	border-right: none;
}

/* Routing button is now in the middle */
#tab-btn-routing {
	border-radius: 0;
	border-right: none;
}

#tab-btn-strava {
	flex: 0 0 60px;
	/* Don't grow, fixed width */
	border-radius: 0;
	border-right: none;
}

/* Settings icon button has fixed size */
#tab-btn-settings {
	flex: 0 0 40px;
	/* Don't grow, fixed width */
	padding: 8px;
	border-radius: 0 8px 0 0;
	border-right: 1px solid var(--border-color);
}

.tab-button.active {
	background-color: var(--background-color);
}

#tab-btn-heart {
	display: none;
	/* Hidden by default on desktop */
}

#tab-content {
	background-color: transparent;
	padding: 0;
	border: 1px solid var(--border-color);
	border-top: none;
	border-radius: 0 0 8px 8px;
}

.tab-panel {
	display: none;
	/* Hidden by default */
}

.tab-panel.active {
	display: flex;
	/* Use flex for both panels */
	flex-direction: column;
}

/* Settings Panel Style */
#settings-panel {
	padding: 10px;
	border: none;
	border-radius: 0 0 8px 8px;
	background-color: var(--background-color);
	gap: 10px;
}

/* Themed Sweetalert2 Styles */
/* This block styles all SweetAlert2 popups to respect the selected
   light or dark theme by using the application's CSS variables. */

/* Hide icons for regular dialogs, but keep them visible for toasts */
.swal2-popup:not(.swal2-toast) .swal2-icon {
	display: none !important;
}

/* Main popup container */
.swal2-popup {
	background-color: var(--background-color) !important;
	color: var(--text-color) !important;
	max-height: calc(100dvh - calc(var(--swal2-container-padding) * 2)) !important;
	display: flex !important;
	flex-direction: column !important;
	overflow: hidden !important;
	padding-bottom: 0 !important;
}

/* Title text */
.swal2-title {
	color: var(--text-color) !important;
}

/* Content text (main message) */
.swal2-html-container {
	color: var(--text-color) !important;
	overflow-y: auto !important;
	flex: 1 1 auto !important;
}

/* Center text in toast notifications */
.swal2-toast .swal2-title {
	text-align: center !important;
}

.swal2-toast .swal2-html-container {
	text-align: center !important;
}

/* Action buttons container - always at bottom */
.swal2-actions {
	background-color: var(--background-color) !important;
	margin: 0 !important;
	padding: 5px !important;
	flex-shrink: 0 !important;
}

/* Action buttons (Confirm, Cancel, Deny) - default styles */
.swal2-confirm,
.swal2-cancel,
.swal2-deny {
	border: none !important;
	border-radius: 4px !important;
	font-weight: bold !important;
}

/* Default confirm button style */
.swal2-confirm {
	background-color: var(--text-color) !important;
	color: var(--background-color) !important;
}

/* Default cancel button style - red background */
.swal2-cancel {
	background-color: var(--color-red) !important;
	color: var(--color-white) !important;
}

/* Default deny button style */
.swal2-deny {
	background-color: var(--background2-color) !important;
	color: var(--text-color) !important;
}

/* Disabled state for all buttons */
.swal2-confirm:disabled,
.swal2-cancel:disabled,
.swal2-deny:disabled {
	cursor: not-allowed !important;
	box-shadow: inset 0 0 0 1px var(--border-color) !important;
	opacity: 1 !important;
	background-color: var(--background-color) !important;
	color: var(--text-color) !important;
}

/* Close button (the 'X' in the corner) */
.swal2-close {
	color: var(--text-color) !important;
}

.swal2-close:hover {
	color: var(--highlight-color) !important;
}

/* Progress bar for timers */
.swal2-timer-progress-bar {
	background-color: var(--highlight-color) !important;
}

/* Loading spinner */
.swal2-loader {
	border-color: var(--highlight-color) transparent var(--highlight-color) transparent !important;
}

/* Image styling */
.swal2-image {
	margin-top: 0;
	margin-bottom: 0;
}

/* WMS layer selection popup with scrollable list */
.wms-layer-selection-popup .swal2-html-container {
	display: flex !important;
	flex-direction: column !important;
	min-height: 0 !important;
	overflow: hidden !important;
}

/* Custom Button Classes */
/* Use these classes for custom button styling in specific dialogs */

/* Confirm button with disabled/enabled state - inverts theme colors when enabled */
.swal-confirm-button {
	background-color: var(--background-color) !important;
	color: var(--text-color) !important;
	cursor: pointer !important;
}

.swal-confirm-button:not(:disabled) {
	background-color: var(--text-color) !important;
	color: var(--background-color) !important;
}

/* Input Field Styles */

/* All SweetAlert input fields */
.swal2-input,
.swal2-textarea,
.swal-input-field {
	box-sizing: border-box;
	border: 1px solid var(--border-color) !important;
	background-color: var(--background-color) !important;
	color: var(--text-color) !important;
}

/* Custom input field class for full-width inputs */
.swal-input-field {
	width: 100%;
	margin: 0;
}

/* Focus state */
.swal2-input:focus,
.swal2-textarea:focus,
.swal-input-field:focus {
	border: 1px solid var(--border-color) !important;
	box-shadow: none !important;
	outline: none !important;
}

/* Placeholder styling */
.swal2-input::placeholder,
.swal2-textarea::placeholder,
.swal-input-field::placeholder {
	color: var(--text-color) !important;
}

/* WMS Dialog Specific Styles */

/* WMS layer search input */
#wms-layer-search {
	margin-bottom: 12px;
}

/* WMS layer info icon styles */
.wms-layer-info-icon {
	flex-shrink: 0;
}

/* Style for links in WMS layer descriptions */
.wms-layer-description a {
	color: var(--highlight-color);
	text-decoration: none;
}

.wms-layer-description a:hover {
	text-decoration: underline;
}

.wms-layer-description a:visited {
	color: var(--highlight-color);
}

/* Leaflet control overrides */
.leaflet-touch .leaflet-control-layers-toggle {
	background-position: center center;
	background-size: 22px 22px;
	height: 30px;
	width: 30px;
	z-index: 4000;
}

/* Elevation Profile Styles */
#elevation-div {
	bottom: 0px;
	height: 250px;
	left: 0px;
	position: absolute;
	text-align: center;
	visibility: hidden;
	width: 100%;
	z-index: 1000;
	border-top: 1px solid var(--border-color);
	background-color: var(--background-color);
}

/* Collapse the elevation panel's height when it's hidden via its inline style.
   This removes the element from the layout flow, which is crucial for preventing
   it from capturing touch events on mobile when invisible. */
#elevation-div[style*="visibility: hidden"] {
	height: 0;
}

/* Styles for d3 elevation chart */
.altitude-area {
	fill: var(--color-red);
	fill-opacity: 0.5;
	/* stroke: var(--color-red); */
	stroke: none;
	stroke-width: 1.5;
}

.axis path,
.axis line {
	stroke: var(--text-color);
	stroke-width: 1;
}

.axis text {
	fill: var(--text-color);
	font-size: 10px;
}

.elevation-hover-tooltip-path {
	fill: var(--background-color);
	stroke: var(--text-color);
	stroke-width: 1px;
}

.elevation-hover-tooltip-text {
	fill: var(--text-color);
	font-family: "Roboto", sans-serif !important;
	/* Override D3 defaults */
	font-size: 10px;
	/* Prevent text from being selected on drag */
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Style for the download submenu */
.leaflet-control-custom .download-submenu {
	background-color: var(--background-color);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	display: none;
	left: 40px;
	position: absolute;
	top: 0px;
	white-space: nowrap;
	z-index: 1000;
	color: var(--text-color) !important;
}

.download-submenu button {
	border-bottom: 1px solid var(--border-color) !important;
	height: 30px !important;
}

.download-submenu button:last-child {
	border: none !important;
}

.leaflet-control-custom .download-submenu button {
	background: none;
	border: none;
	cursor: pointer;
	display: block;
	font-size: 12px;
	padding: 5px 10px;
	text-align: left;
	width: 100%;
	color: var(--text-color);
	overflow: hidden !important;
}

.download-submenu button:disabled {
	color: var(--text-color);
	background-color: var(--background2-color);
	cursor: not-allowed;
}

/* Rounds the top corners of the first button */
.download-submenu button:first-child {
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
}

/* Rounds the bottom corners of the last button */
.download-submenu button:last-child {
	border-bottom-left-radius: 7px;
	border-bottom-right-radius: 7px;
}

/* Main ui layout */
.leaflet-left {
	left: 10px;
	margin-top: 10px;
}

.leaflet-right .leaflet-control {
	border: 1px solid var(--border-color) !important;
	margin-right: 10px !important;
	margin-top: 10px !important;
}

/* Search Bar */
#search-container {
	position: absolute;
	top: 10px;
	right: 90px;
	width: 240px;
	z-index: 1001;
	max-width: calc(100vw - 141px);
}

/* The search input field itself */
#search-input {
	width: 100%;
	padding: 6px 10px;
	border: 1px solid var(--border-color);
	border-radius: 8px;
	/* Rounded corners */
	height: 32px;
	box-sizing: border-box;
	background-color: var(--background-color);
	color: var(--text-color);
	font-size: 14px;
}

#search-input::placeholder {
	color: var(--text-color);
}

/* The dropdown container for suggestions */
#search-suggestions {
	/* Uses the .autocomplete-suggestions class for most styling */
	width: 100%;
	box-sizing: border-box;
	position: absolute;
	top: 100%;
	left: 0;
}

/* Makes the input and suggestion box visually connect when open */
#search-container:has(.autocomplete-suggestions[style*="display: block"]) #search-input {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

/* Search result popup */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	box-shadow: none;
	background: none;
	background-color: var(--background-color);
	color: var(--text-color);
	border: 1px solid var(--border-color) !important;
}

.leaflet-container a.leaflet-popup-close-button,
.leaflet-container a.leaflet-popup-close-button:hover {
	color: var(--text-color);
}

.leaflet-popup-content-wrapper button,
.leaflet-popup-content-wrapper button:hover {
	border: none !important;
	font-weight: bold !important;
	background-color: var(--text-color) !important;
	color: var(--background-color) !important;
}

/* Toolbar styles */
.leaflet-touch .leaflet-bar,
.leaflet-draw {
	border: none;
	border-radius: 0 !important;
	box-shadow: none !important;
	margin: 0 !important;
}

.leaflet-bar a,
.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: var(--background-color);
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* Style disabled Leaflet zoom controls */
.leaflet-bar a.leaflet-disabled {
	color: var(--text-color);
	background-color: var(--background2-color);
	cursor: not-allowed;
}

/* This rule targets the first custom control to round its top corners */
.leaflet-left>.leaflet-control-custom:first-child a {
	border-radius: 50px 50px 0 0 !important;
}

.leaflet-left>.leaflet-bar:last-child a,
#map>div.leaflet-control-container>div.leaflet-top.leaflet-left>div:nth-child(6) {
	border-radius: 0 0 50px 50px !important;
}

.leaflet-touch .leaflet-draw-actions {
	left: 40px;
	border: 1px solid var(--border-color) !important;
	border-radius: 8px;
	overflow: hidden;
}

.leaflet-draw-actions a,
.leaflet-draw-actions a:hover {
	background-color: var(--background-color);
	color: var(--text-color);
}

/* Attribution */
.leaflet-control-attribution {
	background: var(--background-color) !important;
	bottom: 0;
	position: relative;
	z-index: 3000;
	border: 1px solid var(--border-color) !important;
	border-radius: 8px 8px 0 0 !important;
	overflow: hidden;
}

.leaflet-container .leaflet-control-attribution {
	border-bottom: none !important;
	color: var(--text-color);
}

.leaflet-container .leaflet-control-attribution a {
	color: var(--highlight-color) !important;
	text-decoration: none !important;
}

.leaflet-container .leaflet-control-attribution a:hover {
	color: var(--highlight-color) !important;
	text-decoration: underline !important;
}

.material-symbols.attribution-heart-icon {
	font-size: 16px !important;
	color: var(--color-red) !important;
	vertical-align: middle !important;
}

/* PWA Install Button Style */
#install-pwa-link {
	background-color: var(--color-blue);
	color: var(--color-white) !important;
	padding: 20px 10px;
	text-decoration: none;
	margin-left: 5px;
}

/* Selects the attribution container only when it has the install button inside,
  and that button does NOT have an inline style containing "display: none".
*/
.leaflet-control-attribution:has(#install-pwa-link:not([style*="display: none"])) {
	padding-right: 0;
}

.leaflet-marker-shadow {
	display: none !important;
}

/* Style for disabled custom buttons */
.leaflet-control-custom.disabled>a {
	background-color: var(--background2-color);
	cursor: not-allowed;
	opacity: 1;
}

.leaflet-control-custom.disabled .icon {
	fill: var(--icon-color) !important;
}

/* Border around the toolbar */
#map>div.leaflet-control-container>div.leaflet-top.leaflet-left {
	border: 1px solid var(--border-color);
	border-radius: 50px 50px 50px 50px !important;
}

.leaflet-control-locate a .leaflet-control-locate-location-arrow {
	display: none;
}

.locate-active a {
	background-color: var(--locate-color) !important;
}

.locate-active .icon-locate {
	fill: var(--color-white) !important;
}

/* Hide routing machine's default itinerary */
.leaflet-routing-container {
	display: none;
}

/* Settings Control Item Styles are now inside the settings panel */
#settings-panel .settings-control-item {
	width: 100%;
	box-sizing: border-box;
	border-radius: 8px;
	font-size: 14px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: auto;
}

/* Make routing and elevation provider select boxes the same width */
#settings-panel select {
	width: 130px;
	/* Styles to match other dropdowns */
	background-color: var(--background-color);
	color: var(--text-color);
	border: 1px solid var(--border-color);
	border-radius: 4px;
	height: 30px;
	padding: 6px;
	box-sizing: border-box;
}

/* Only apply pointer cursor to labels in items that contain a checkbox */
#settings-panel .settings-control-item:has(input[type="checkbox"]) label {
	cursor: pointer;
	user-select: none;
	/* Prevent text selection on click */
}

#settings-panel .settings-control-item input {
	vertical-align: middle;
	margin-right: 8px;
	transform: scale(1.2);
}

/* Shared styles for all panel info icons */
#strava-info-icon,
.settings-info-icon {
	cursor: pointer;
	margin-left: 5px;
}

/* Styles for the info icon in the settings panel */
.settings-info-icon {
	font-size: 14px;
	font-weight: bold;
	color: var(--text-color);
	line-height: 1;
}

/* Hide the default browser cursor and use our custom one during selection mode */
body.route-point-select-mode,
body.route-point-select-mode * {
	cursor: none !important;
}

/* Custom Cursor Styles */
.custom-cursor {
	position: absolute;
	display: none;
	pointer-events: none;
	/* Make it unclickable */
	z-index: 2000;
	/* Ensure it's on top */
	width: 50px;
	/* Match the icon's font-size */
	height: 50px;
	/* Match the icon's font-size */
	/* Anchor the cursor so the bottom-center of the icon is at the mouse pointer */
	transform: translate(-25px, -62.5px);
}

#custom-cursor-start .material-symbols {
	color: var(--routing-color-start);
}

#custom-cursor-end .material-symbols {
	color: var(--routing-color-end);
}

#custom-cursor-via .material-symbols {
	color: var(--routing-color-via);
}

/* Change cursor to 'all-scroll' when hovering over draggable markers */
.leaflet-marker-draggable {
	cursor: all-scroll !important;
}

/* Forcefully removes dotted line style ONLY during editing */
.map-is-editing path.leaflet-interactive {
	stroke-dasharray: none !important;
}

/* Main container for all right-side panels (MODIFIED) */
#main-right-container {
	position: absolute;
	top: 50px;
	right: 10px;
	width: 320px;
	z-index: 1000;
	flex-direction: column;
	gap: 10px;
	/* Space between panels */
	max-width: calc(100vw - 61px);
	cursor: auto;
	display: none;
}

/* Panels Toggle Button */
.leaflet-control-toggle-panels {
	position: absolute !important;
	top: 0px !important;
	right: 40px !important;
	border-radius: 8px !important;
	width: 30px;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1002;
	margin-top: 0 !important;
}

.leaflet-control-toggle-panels a {
	background-color: var(--background-color);
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 7px !important;
	-webkit-tap-highlight-color: transparent;
}

.icon-chevron-left,
.icon-chevron-right {
	width: 24px;
	height: 24px;
	fill: var(--icon-color);
}

#main-right-container.hidden {
	display: none;
}

.leaflet-control-scale {
	margin-left: 0 !important;
}

/* Minimal version of the scale control */
.leaflet-control-scale-line {
	height: 10px;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	border: 1px solid var(--color-black);
	border-top: none;
	background: none;
	text-shadow: none;
	color: var(--color-black);
}

/* Styled version of the scale control */
/* .leaflet-control-scale-line {
  border: 1px solid var(--border-color);
  background: var(--background-color);
  text-shadow: none;
  color: var(--text-color);
  border-radius: 8px !important;
}

.leaflet-control-scale-line:not(:first-child) {
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
} */

.leaflet-editing-icon,
.leaflet-middle-icon {
	border-radius: 50%;
}

/* Fullscreen Toggle Control */
.leaflet-control-fullscreen-toggle {
	position: absolute !important;
	top: 0px !important;
	right: 0px !important;
	border-radius: 8px !important;
	width: 30px;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1003;
	margin-top: 0 !important;
}

.leaflet-control-fullscreen-toggle a {
	background-color: var(--background-color);
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 7px !important;
	-webkit-tap-highlight-color: transparent;
}

.leaflet-control-fullscreen-toggle .icon-fullscreen-enter,
.leaflet-control-fullscreen-toggle .icon-fullscreen-exit {
	width: 20px;
	height: 20px;
	fill: var(--icon-color);
}

/* Hide the scale control and attribution when the elevation chart is visible */
body:has(#elevation-div[style*="visibility: visible"]) .leaflet-control-scale,
body:has(#elevation-div[style*="visibility: visible"]) .leaflet-control-attribution {
	display: none !important;
}

/* Panels Toggle: Hide left icon by default */
.leaflet-control-toggle-panels .icon-chevron-left {
	display: none;
}

/* Panels Toggle: When hidden, show left and hide right */
.leaflet-control-toggle-panels.panels-hidden .icon-chevron-left {
	display: block;
}

.leaflet-control-toggle-panels.panels-hidden .icon-chevron-right {
	display: none;
}

/* Fullscreen Toggle: Hide exit icon by default */
.leaflet-control-fullscreen-toggle .icon-fullscreen-exit {
	display: none;
}

/* Fullscreen Toggle: When active, show exit and hide enter */
.leaflet-control-fullscreen-toggle.fullscreen-active .icon-fullscreen-exit {
	display: block;
}

.leaflet-control-fullscreen-toggle.fullscreen-active .icon-fullscreen-enter {
	display: none;
}

/* Strava Panel Button Styles */
/* Base styles to match routing panel controls */
.strava-button-primary,
.strava-button-secondary {
	border: 1px solid var(--border-color);
	padding: 6px 12px;
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
	font-size: 14px;
	height: 30px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Primary button style (Strava Orange) */
.strava-button-primary {
	background-color: var(--strava-color);
	color: white;
	border: none;
	font-weight: bold;
}

/* Secondary button style (Theme-Aware) */
.strava-button-secondary {
	background-color: var(--background-color);
	color: var(--text-color);
}

/* Disabled state for secondary buttons */
.strava-button-secondary:disabled {
	cursor: not-allowed;
}

/* Active state for secondary buttons to match routing buttons */
button.strava-button-secondary:not(:disabled) {
	font-weight: bold;
	background-color: var(--text-color);
	color: var(--background-color);
	border: none;
}

/* Styles for Overview Panel Group Headers */
.overview-list-header {
	font-weight: bold;
	font-size: 12px;
	padding: 8px 12px 4px 12px;
	background-color: var(--background2-color);
	color: var(--text-color);
	border-bottom: 1px solid var(--divider-color);
	/* border-top: 1px solid var(--divider-color); */
	text-transform: uppercase;
	letter-spacing: 0.5px;
	position: sticky;
	/* Make headers stick to the top when scrolling */
	top: 0;
	z-index: 1;
	/* Ensure header is above list items */
}

#overview-panel-list .overview-list-header:first-child {
	border-top: none;
	/* The very first header doesn't need a top border */
}

/* Fix for Privacy Policy Link Style */
/* This ensures links in these specific panels have no default underline */
#strava-panel a,
#strava-api-link,
#settings-panel a {
	text-decoration: none;
}

/* This adds the underline only when the user hovers over them */
#strava-panel a:hover,
#strava-api-link:hover,
#settings-panel a:hover {
	text-decoration: underline;
}

/* Style for credits link in settings panel */
.credits-link {
	font-size: 14px;
	color: var(--highlight-color) !important;
	text-decoration: none;
}

.credits-link:hover {
	text-decoration: underline;
}

/* Material Symbols Styles Start */

/* For self hosting the font */
/* @font-face {
  font-family: "Material Symbols Outlined";
  font-style: normal;
  src: url(MaterialSymbolsOutlined[FILLGRADopszwght].woff2) format("woff");
} */

.material-symbols {
	font-family: "Material Symbols Outlined" !important;
	font-size: 20px !important;
	color: var(--icon-color);
	font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24 !important;
}

.material-symbols-fill {
	/* The FILL setting to 1 makes the icons solid. */
	font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24 !important;
}

.material-symbols-map-marker {
	font-size: 50px !important;
	font-variation-settings: "FILL" 1, "wght" 200, "GRAD" 0, "opsz" 24 !important;
}

.material-symbols-map-marker-outline {
	font-variation-settings: "FILL" 0, "wght" 200, "GRAD" 0, "opsz" 24 !important;
}

/* Forcefully sets the cursor to a crosshair for the marker icon
   whenever any drawing tool is active (class added via main.js L.Draw.Event.DRAWSTART) */
body.leaflet-is-drawing .leaflet-marker-icon {
	cursor: crosshair !important;
}

.locate-active .material-symbols {
	color: var(--color-white) !important;
}

.routing-panel-icon {
	width: 16px;
	height: 16px;
	display: block;
	margin: auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

.leaflet-control-toggle-panels a,
.leaflet-control-fullscreen-toggle a {
	text-decoration: none;
}

/* Panels Toggle: Hide left icon by default */
.leaflet-control-toggle-panels .icon-chevron-left-span {
	display: none;
}

/* Panels Toggle: When hidden, show left and hide right */
.leaflet-control-toggle-panels.panels-hidden .icon-chevron-left-span {
	display: block;
}

.leaflet-control-toggle-panels.panels-hidden .icon-chevron-right-span {
	display: none;
}

/* Fullscreen Toggle: Hide exit icon by default */
.leaflet-control-fullscreen-toggle .icon-fullscreen-exit-span {
	display: none;
}

/* Fullscreen Toggle: When active, show exit and hide enter */
.leaflet-control-fullscreen-toggle.fullscreen-active .icon-fullscreen-exit-span {
	display: block;
}

.leaflet-control-fullscreen-toggle.fullscreen-active .icon-fullscreen-enter-span {
	display: none;
}

/* Material Symbols Styles End */

#sheet-handle {
	/* Hide sheet-handle on desktop */
	display: none;
}

/* Styles for mouse input */
/* body:not(.using-touch) {
} */

/* Styles for touch input */
body.using-touch {
	/* This line resets the cursor, overriding 'cursor: none'. */
	cursor: auto !important;

	/* Hide the routing marker cursors on touch devices without mouse */
	.custom-cursor {
		display: none !important;
	}

	/* Hide the leaflet draw tooltips on touch devices without mouse */
	.leaflet-draw-tooltip {
		display: none !important;
	}
}

/* Mobile Specific Styles Start */

/* Applies styles for devices with a coarse pointer (e.g., a finger on a touchscreen). */
@media (pointer: coarse) {

	/* Fix the behavior where a long-press incorrectly selects UI text on touch devices */
	* {
		-webkit-user-select: none;
		/* Safari on iOS/iPadOS */
		-moz-user-select: none;
		/* Firefox */
		-ms-user-select: none;
		/* Internet Explorer/Edge */
		user-select: none;
		/* Standard */
	}
}

@media (max-width: 768px) {
	:root {
		--sheet-handle-height: 40px;
		/* sheet-handle haight plus its vertical margin */
		--mobile-main-right-container-visible-height: 260px;
		--mobile-main-right-container-top: calc(100vh - var(--mobile-main-right-container-visible-height));
		/* Fallback */
		--mobile-main-right-container-top: calc(100dvh - var(--mobile-main-right-container-visible-height));
		/* Correct unit */
		--mobile-scale-bottom: calc(var(--mobile-main-right-container-visible-height) - 30px);
		--mobile-elevation-summary-padding-bottom: calc(var(--mobile-scale-bottom) + 30px);
	}

	/* When the sheet is hidden, change the variable's value */
	body:not(.force-desktop-layout):has(#main-right-container.hidden) {
		--mobile-main-right-container-top: calc(100vh - var(--sheet-handle-height));
		/* Fallback */
		--mobile-main-right-container-top: calc(100dvh - var(--sheet-handle-height));
		/* Correct unit */
		--mobile-scale-bottom: calc(var(--sheet-handle-height) - 30px);
		--mobile-elevation-summary-padding-bottom: calc(var(--mobile-scale-bottom) + 30px);
	}

	/* Hide the info panel when the elevation chart is visible */
	body:not(.force-desktop-layout):has(#elevation-div[style*="visibility: visible"]) #info-panel {
		display: none !important;
	}

	/* Ignore following styles if desktop layout is forced */
	body:not(.force-desktop-layout) {

		/* Move the attribution and scale up on mobile */
		.leaflet-container .leaflet-control-attribution {
			bottom: var(--mobile-scale-bottom);
			transition: bottom 0.3s ease-in-out;
			border-radius: 8px !important;
			border: none !important;
			/* Move to the right */
			position: fixed !important;
			right: 10px;
		}

		.leaflet-bottom .leaflet-control-scale {
			position: absolute;
			bottom: var(--mobile-scale-bottom);
			transition: bottom 0.3s ease-in-out;
			margin-bottom: 0px;
		}

		/* Hide credits link only show install button */
		#credits-link-bottom-left {
			display: none;
		}

		#install-pwa-link {
			margin-left: 0;
			line-height: 2;
		}

		.leaflet-control-attribution:has(#install-pwa-link:not([style*="display: none"])) {
			padding-left: 0;
		}

		#elevation-div {
			z-index: 500;
			/* Make sure elevation div is behind main right container on mobiles */
			bottom: calc(var(--mobile-elevation-summary-padding-bottom) - var(--sheet-handle-height));
			transition: bottom 0.3s ease-in-out;
		}

		/* Hide the Via input group on mobile */
		#routing-via-group {
			display: none;
		}

		/* Dynamic Mobile Search Bar */
		#search-container {
			left: 50px;
			right: 90px;
			width: auto;
			/* Allow left/right to determine width */
			max-width: none;
		}

		#search-input {
			/* Start with a smaller width, aligned to the right */
			width: 100px;
			float: right;
			transition: width 0.3s ease-in-out;
			/* Smooth expansion animation */
		}

		#search-input:focus {
			/* Expand to fill the container when the user taps on it */
			width: 100%;
		}

		/* Mobile Bottom Sheet Styles Start */
		#main-right-container {
			display: flex !important;
			position: fixed;
			left: 0;
			right: 0;
			width: 100%;
			max-width: 100vw;
			/* background-color: var(--background-color); */
			border-radius: 20px 20px 0 0;
			gap: 0;
			z-index: 1000;
			top: var(--mobile-main-right-container-top);
			bottom: 0;
			transition: top 0.3s ease-in-out;
			/* border-top: 1px solid var(--border-color); */
		}

		#main-right-container.hidden {
			top: var(--mobile-main-right-container-top);
		}

		#sheet-handle {
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			width: 100px;
			height: 30px;
			margin: 5px auto 5px auto;
			background-color: var(--highlight-color);
			/* border: 1px solid var(--border-color); */
			border-radius: 15px;
			-webkit-tap-highlight-color: transparent;
			flex-shrink: 0;
		}

		#sheet-handle .material-symbols {
			color: var(--color-white);
		}

		/* These styles are for the new arrow icons in the sheet handle */
		#sheet-handle .material-symbols {
			font-size: 24px !important;
		}

		#main-right-container .sheet-arrow-up {
			display: none;
		}

		#main-right-container .sheet-arrow-down {
			display: block;
		}

		#main-right-container.hidden .sheet-arrow-up {
			display: block;
		}

		#main-right-container.hidden .sheet-arrow-down {
			display: none;
		}

		#info-panel {
			position: absolute;
			bottom: 100%;
			/* Position its bottom edge at the top of its parent */
			left: 50px;
			right: 50px;
			width: auto;
			/* Allow left/right properties to set the width */
			border: 1px solid var(--border-color);
			border-radius: 8px;
			flex-shrink: 0;
			min-height: 0;
			padding: 5px;
		}

		/* Hide the info panel when no item is selected */
		#info-panel:has(#info-panel-name[style*="display: none"]) {
			display: none;
		}

		#tab-container {
			width: 100%;
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			min-height: 0;
		}

		/* Scrolling fix */
		#tab-content {
			flex-grow: 1;
			display: flex;
			overflow: hidden;
			border-left: none;
			border-right: none;
			border-bottom: none;
		}

		.tab-panel.active {
			flex-grow: 1;
			border-radius: 0 !important;
		}

		/* For the Contents tab, add padding directly to the list */
		#overview-panel-list {
			max-height: none;
			padding-bottom: 20px;
			box-sizing: border-box;
		}

		/* For all OTHER tabs, make the whole panel scrollable and add ONLY bottom padding */
		.tab-panel.active:not(#overview-panel) {
			overflow-y: auto;
			padding-bottom: 20px;
			/* Only add the buffer at the bottom */
			box-sizing: border-box;
		}

		#directions-list {
			max-height: none;
		}

		.tab-button {
			border-radius: 0 !important;
		}

		#tab-buttons button:first-child {
			border-top-left-radius: 0;
			border-left: none;
		}

		#tab-buttons button:last-child {
			border-top-right-radius: 0;
			border-right: none;
		}

		#tab-btn-settings {
			border-right: none;
		}

		#tab-content,
		#overview-panel {
			border-radius: 0 !important;
		}

		/* These styles are for the new arrows in the top-right toggle button */
		.leaflet-control-toggle-panels .icon-chevron-right-span,
		.leaflet-control-toggle-panels .icon-chevron-left-span {
			display: none !important;
		}

		.leaflet-control-toggle-panels a::before {
			font-family: "Material Symbols Outlined" !important;
			font-size: 24px !important;
			line-height: 1;
			color: var(--icon-color);
			font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24 !important;
			content: "keyboard_arrow_down";
		}

		.leaflet-control-toggle-panels.panels-hidden a::before {
			content: "keyboard_arrow_up";
		}

		#tab-btn-heart {
			display: flex;
			flex: 0 0 40px;
			padding: 8px;
			font-size: 14px;
			font-weight: bold;
			cursor: pointer;
			border: 1px solid var(--border-color);
			background-color: var(--background2-color);
			border-right: none;
			outline: none;
			min-width: 0;
			justify-content: center;
			align-items: center;
			height: 35px;
		}

		#tab-btn-heart .material-symbols {
			color: var(--text-color);
		}

		/* Mobile Bottom Sheet Styles End */
	}
}

/* Mobile Specific Styles End */