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

:root {
  --color-black: #000000;
  --color-white: #ffffff;
  --color-red: #dc143c;
  --color-blue: #1e90ff;
  --color-yellow: #ffd700;
  --color-green: #228b22;
  --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);

  --border-radius: 8px;

  --font-size-10: 10px;
  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-24: 24px;
  --font-size-30: 30px;

  --icon-size-16: 16px;
  --icon-size-20: 20px;
  --icon-size-24: 24px;
  --icon-size-30: 30px;
  --icon-size-50: 50px;

  /* 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);
  color: var(--color-black);
  --highlight-color: var(--color-blue);
  --locate-color: var(--color-blue);
  --overview-header-height: 32px;
}

body.dark-mode {
  /* Dark Theme Variables */
  --icon-color: var(--color-white);
  --border-color: #bdbdbd;
  --divider-color: var(--border-color);
  --background-color: #22242a;
  --background2-color: #5f6368;
  --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: var(--border-radius);
  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: var(--font-size-14);
  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: var(--border-radius);
  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: var(--font-size-12);
  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(-5px);
}

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

#info-panel-edit-hint {
  font-size: var(--font-size-12);
  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: var(--font-size-12);
  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: var(--font-size-12);
}

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: var(--border-radius);
  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 var(--border-radius) var(--border-radius);
  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: 0 12px;
  min-height: var(--overview-header-height);
  cursor: pointer;
  border-bottom: 1px solid var(--divider-color);
  font-size: var(--font-size-14);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: var(--background-color);
  color: var(--text-color) !important;
  scroll-margin-top: var(--overview-header-height);
}
.overview-visibility-btn,
.overview-duplicate-btn,
.overview-delete-btn,
.overview-save-btn,
.overview-header-visibility-btn,
.overview-header-delete-btn,
.overview-header-arrow,
.overview-icon-spacer {
  width: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  line-height: 1;
  user-select: none;
  flex-shrink: 0;
  color: var(--text-color);
}

.overview-icon-spacer {
  cursor: default;
}

.overview-visibility-btn .material-symbols,
.overview-duplicate-btn .material-symbols,
.overview-delete-btn .material-symbols,
.overview-save-btn .material-symbols,
.overview-header-visibility-btn .material-symbols,
.overview-header-delete-btn .material-symbols,
.overview-header-arrow .material-symbols {
  font-size: var(--icon-size-20) !important;
}

.overview-item-text {
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-color);
  padding-left: 4px;
}
.overview-list-item:last-child {
  border-bottom: none !important;
}
.overview-list-item.selected {
  background-color: var(--highlight-color);
}

/* Styles for Overview Panel Group Headers */
.overview-list-header {
  font-weight: bold;
  font-size: var(--font-size-12);
  padding: 0 12px;
  min-height: var(--overview-header-height);
  background-color: var(--background2-color);
  color: var(--text-color);
  border-bottom: 1px solid var(--divider-color);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

#overview-panel-list .overview-list-header:first-child {
  border-top: none;
}

.overview-header-text {
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 4px;
}

#overview-panel-list .overview-list-header.collapsed.last-header {
  border-bottom: none;
}

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

.material-symbols.layer-icon {
  font-size: var(--icon-size-16) !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: var(--border-radius);
  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: var(--border-radius);
}
#custom-layers-panel .leaflet-control-layers-separator {
  height: 1px;
  background-color: var(--border-color);
  border-top: none;
  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 var(--border-radius) var(--border-radius);
  padding: 0;
}

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

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

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

/* Prevent cursor/caret from appearing in readonly routing inputs */
.panel-input-group input[readonly] {
  caret-color: transparent;
}
.panel-input-group input::placeholder {
  color: var(--text-color) !important;
}

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

.panel-input-group button {
  margin-left: 5px;
  padding: 5px;
  font-size: var(--icon-size-16);
  line-height: 1;
  cursor: pointer;
  background: none;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background-color: var(--background-color);
  font-size: var(--font-size-14);
}
.panel-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: var(--border-radius) 0 0 var(--border-radius);
}
.routing-profile-selector .profile-btn:last-child {
  border-radius: 0 var(--border-radius) var(--border-radius) 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 > .panel-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: var(--font-size-14) !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: var(--font-size-14) !important;
  white-space: nowrap;
  box-sizing: border-box;
}

#clear-route-btn {
  font-size: var(--font-size-14);
  background-color: var(--background-color);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  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: var(--font-size-14);
  background-color: var(--background-color);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  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 var(--border-radius) var(--border-radius);
  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: var(--font-size-14);
  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: var(--font-size-12);
  font-weight: bold;
  margin-top: 5px;
  padding: 4px 8px;
  border-radius: var(--border-radius);
  transition: background-color 0.2s ease-in-out;
}

/* Autocomplete suggestion item styles (used inside search modal) */
.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;
}

/* Search Modal Styles */
/* Modal container customization */
.search-modal {
  font-family: inherit !important;
}

#search-modal-input:focus {
  outline: none !important;
  border-color: var(--border-color) !important;
  box-shadow: none !important;
}

#search-modal-input[data-offline="true"] {
  background-color: var(--color-red) !important;
  color: white !important;
  border-color: var(--color-red) !important;
}

#search-modal-input[data-offline="true"]::placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Suggestions dropdown inside modal */
.search-modal-suggestions {
  display: none;
  position: relative;
  padding: 0;
  background-color: var(--background-color);
  border: 1px solid var(--divider-color);
  border-radius: var(--border-radius);
  max-height: 300px;
  overflow-y: auto;
}

/* Make input connect visually with suggestions when open */
.search-modal-container:has(.search-modal-suggestions[style*="display: block"])
  #search-modal-input {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-bottom: 0 !important;
}

.search-modal-suggestions[style*="display: block"] {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  margin-top: 0 !important;
  border-top: none !important;
}

/* Suggestion items inherit from existing styles */
.search-modal-suggestions .autocomplete-suggestion-item {
  padding: 12px 10px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-color);
  border-bottom: 1px solid var(--divider-color);
  text-align: left;
}

.search-modal-suggestions .autocomplete-suggestion-item:last-child {
  border-bottom: none;
}

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

/* Directions Panel Styles */
#directions-panel {
  margin-top: 10px;
  margin-bottom: 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  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: var(--font-size-12);
  border-bottom: 1px solid var(--border-color);
  box-sizing: border-box;
}

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

.directions-panel-header-arrow.material-symbols {
  font-size: var(--icon-size-20) !important;
  margin-right: 5px;
}

/* 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: var(--font-size-12);
  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: var(--font-size-14);
  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: var(--border-radius) 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 var(--border-radius) 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 var(--border-radius) var(--border-radius);
}

.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 var(--border-radius) var(--border-radius);
  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. */

/* Main popup container */
.swal2-popup {
  background-color: var(--background-color) !important;
  color: var(--text-color) !important;
  border-radius: var(--border-radius) !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: var(--border-radius) !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;
}

/* Remove focus ring from buttons for cleaner appearance */
.swal2-confirm:focus,
.swal2-cancel:focus,
.swal2-deny:focus {
  outline: none;
  box-shadow: none !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;
  border-radius: var(--border-radius) !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-popup-content {
  font-size: var(--font-size-12) !important;
}

.leaflet-popup-content-wrapper {
  border-radius: var(--border-radius) !important;
}

.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: var(--font-size-10);
}

.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: var(--font-size-10);
  /* Prevent text from being selected on drag */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.material-symbols.elevation-action-icon {
  cursor: pointer;
  vertical-align: middle;
  position: relative;
  top: -2px;
}

/* Style for the download submenu */
.leaflet-control-custom .download-submenu {
  background-color: var(--background-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  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: var(--font-size-12);
  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;
}
/* Prevent bottom-left controls from overlapping toolbar */
.leaflet-bottom.leaflet-left {
  z-index: 500;
}
.leaflet-right .leaflet-control {
  border: 1px solid var(--border-color) !important;
  margin-right: 10px !important;
  margin-top: 10px !important;
}

/* Top-right button container */
#top-right-container {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1001;
  display: flex;
  flex-direction: row-reverse; /* Right to left: fullscreen, toggle, search */
  gap: 10px; /* Easily adjustable */
}

/* Base button styles */
.top-right-btn {
  height: 32px;
  background: var(--background-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  cursor: pointer;
  font-size: var(--font-size-14);
  color: var(--text-color);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* Individual button widths */
#poi-finder-btn {
  padding: 0 12px;
}

#search-btn {
  width: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#sidebar-toggle-btn {
  width: 32px;
}

#fullscreen-btn {
  width: 32px;
}

/* Sidebar toggle icon states */
#sidebar-toggle-btn .icon-chevron-left {
  display: none;
}

#sidebar-toggle-btn.panels-hidden .icon-chevron-left {
  display: inline-block;
}

#sidebar-toggle-btn.panels-hidden .icon-chevron-right {
  display: none;
}

/* Fullscreen toggle icon states */
#fullscreen-btn .icon-fullscreen-exit {
  display: none;
}

#fullscreen-btn.fullscreen-active .icon-fullscreen-exit {
  display: inline-block;
}

#fullscreen-btn.fullscreen-active .icon-fullscreen-enter {
  display: none;
}

/* Offline state styling */
#poi-finder-btn.offline {
  background: red !important;
  color: white !important;
  border-color: red !important;
  cursor: not-allowed !important;
}

#search-btn.offline {
  cursor: not-allowed !important;
}

#search-btn .icon-search-offline {
  display: none;
}

#search-btn.offline .icon-search-online {
  display: none;
}

#search-btn.offline .icon-search-offline {
  display: inline-block;
}

/* 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: var(--border-radius);
  overflow: hidden;
}
.leaflet-draw-actions a,
.leaflet-draw-actions a:hover {
  background-color: var(--background-color);
  color: var(--text-color);
}

/* Bottom Left Credits Container */
#bottom-left-credits {
  position: fixed;
  bottom: 0;
  left: 10px;
  z-index: 500; /* Below toolbar */
  background: var(--background-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  border-bottom: none;
  overflow: hidden;
  padding: 0px 10px;
  display: flex;
  align-items: center;
  gap: 0;
}
#bottom-left-credits a {
  color: var(--highlight-color);
  text-decoration: none;
}
#bottom-left-credits a:hover {
  color: var(--highlight-color);
  text-decoration: underline;
}

.material-symbols.credits-heart-icon {
  font-size: var(--icon-size-16) !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: 0px 10px;
  text-decoration: none !important;
  margin-left: 5px;
}

/* Adjust container padding when install button is visible */
#bottom-left-credits: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: var(--border-radius);
  font-size: var(--font-size-14);
  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: var(--border-radius);
  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: var(--icon-size-16);
  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 */
  /* Uses 0.9 multiplier to match marker iconAnchor positioning */
  transform: translate(-25px, calc(-50px * 0.9));
}
#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;
  display: flex;
  flex-direction: column;
  gap: 10px; /* Space between panels */
  max-width: calc(100vw - 61px);
  cursor: auto;
}

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

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

.leaflet-control-scale {
  margin-left: 0 !important;
  margin-bottom: 25px !important; /* Space above credits container */
}

/* 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: var(--border-radius) !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%;
}

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

/* 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: var(--border-radius);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  font-size: var(--font-size-14);
  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;
}

/* 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: var(--font-size-14);
  color: var(--highlight-color) !important;
  text-decoration: none;
}

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

/* Roboto Font Styles Start */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  src: url(/fonts/Roboto-VariableFont_wdth,wght.woff2) format("woff2");
}
/* Roboto Font Styles End */

/* Material Symbols Styles Start */
/* Instructions for self hosting: https://developers.google.com/fonts/docs/material_symbols#self-hosting_the_font */
/* Downloaded font here: https://github.com/google/material-design-icons/tree/master/variablefont */
@font-face {
  font-family: "Material Symbols Outlined";
  font-style: normal;
  src: url(/fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2) format("woff2");
}

.material-symbols {
  font-family: "Material Symbols Outlined" !important;
  font-weight: normal;
  font-style: normal;
  font-size: var(--icon-size-20) !important;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  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: var(--icon-size-50) !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;
}

/* Distance labels shown while drawing polylines */
.distance-label {
  pointer-events: none;
  font-size: var(--font-size-12);
  font-weight: bold;
  color: white;
  text-shadow:
    -1px -1px 0 black,
    1px -1px 0 black,
    -1px 1px 0 black,
    1px 1px 0 black;
}

.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;
}

/* 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;
  }
}

/* POI Finder Modal Styles */
.poi-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.poi-category-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background: var(--background-color);
  color: var(--text-color);
  cursor: pointer;
  font-size: var(--font-size-14);
}

/* 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 scale up on mobile */
    .leaflet-bottom .leaflet-control-scale {
      position: absolute;
      bottom: var(--mobile-scale-bottom);
      transition: bottom 0.3s ease-in-out;
      margin-bottom: 0px !important;
    }

    /* Move credits to bottom right and hide credits link, only show install button */
    #bottom-left-credits {
      bottom: var(--mobile-scale-bottom);
      transition: bottom 0.3s ease-in-out;
      border-radius: var(--border-radius);
      border: none;
      left: auto;
      right: 10px;
      z-index: 1000; /* Same as main-right-container for proper stacking */
    }
    #credits-link {
      display: none;
    }
    #install-pwa-link {
      margin-left: 0;
      line-height: 2;
    }
    #bottom-left-credits: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;
    }

    /* 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: var(--icon-size-24) !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: var(--border-radius);
      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;
    }

    /* Mobile sidebar toggle: use up/down arrows instead of left/right */
    #sidebar-toggle-btn .icon-chevron-right,
    #sidebar-toggle-btn .icon-chevron-left {
      display: none !important;
    }

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

    #sidebar-toggle-btn.panels-hidden::before {
      content: "keyboard_arrow_up";
    }

    #tab-btn-heart {
      display: flex;
      flex: 0 0 40px;
      padding: 8px;
      font-size: var(--font-size-14);
      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 */