html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  overflow: hidden;
}

#map {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Всички бутони на Leaflet toolbar-а вляво – еднакъв размер (30px). */
.leaflet-bar a,
.leaflet-touch .leaflet-bar a,
.leaflet-draw-toolbar a,
.leaflet-touch .leaflet-draw-toolbar a {
  width: 30px;
  height: 30px;
  line-height: 30px;
}

/* Toggle-бутони вляво, под инструментите за чертане (Leaflet.draw toolbar) */
#leftToggles {
  position: fixed;
  left: 10px;
  top: 200px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.toggle-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #bbb;
  border-radius: 4px;
  color: #333;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}

.toggle-chip svg {
  width: 18px;
  height: 18px;
}

.toggle-chip input {
  display: none;
}

.toggle-chip:hover {
  border-color: #888;
}

.toggle-chip:has(input:checked) {
  background: #1d3557;
  border-color: #1d3557;
  color: #fff;
}

#leftToggles #routingProfileRow select {
  width: 148px;
  padding: 6px;
  border-radius: 6px;
  border: 1px solid #bbb;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}

/* Икони-бутони вляво (карта, зареди, запис) – като toggle-chip, но без checked */
.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #bbb;
  border-radius: 4px;
  color: #333;
  cursor: pointer;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}

.icon-btn:hover {
  border-color: #888;
}

.icon-btn.active {
  background: #1d3557;
  border-color: #1d3557;
  color: #fff;
}

/* Падащо меню за избор на карта, вляво до иконата */
#mapMenu {
  position: fixed;
  left: 48px;
  z-index: 1100;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  padding: 4px;
  min-width: 190px;
}

.map-opt {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 8px 10px;
  font-size: 13px;
  color: #222;
  cursor: pointer;
  border-radius: 5px;
}

.map-opt:hover {
  background: #eef2f6;
}

.map-opt.active {
  background: #1d3557;
  color: #fff;
  font-weight: 600;
}

/* Дължина на маршрута – малка табелка горе вдясно */
#statsBox {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
  padding: 6px 12px;
  font-size: 13px;
}

#stats {
  font-weight: 600;
  color: #1d3557;
}

/* Малък избор GPX/KML при "Запис" */
#saveChooser {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1200;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  padding: 18px 20px;
  text-align: center;
}

.sc-title {
  font-weight: 600;
  margin-bottom: 12px;
  color: #1d3557;
}

.sc-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
}

#saveChooser button {
  cursor: pointer;
  border: 1px solid #457b9d;
  background: #457b9d;
  color: #fff;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
}

#saveChooser button:hover {
  background: #35617a;
}

#saveChooser button.secondary {
  background: #eee;
  color: #333;
  border-color: #ccc;
}

#saveChooser button.secondary:hover {
  background: #ddd;
}

.hint {
  font-size: 12px;
  color: #555;
}

.gps-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #1a73e8;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #1a73e8, 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* Leaflet draw toolbar stays top-left, above panel z-index just in case */
.leaflet-draw.leaflet-control {
  z-index: 900;
}

/* Междинните ("разделящи") точки при редакция – по-малки и кръгли,
   за да се различават ясно от основните квадратни точки. */
.leaflet-middle-icon {
  border-radius: 50%;
  background: #fff;
  border: 1px solid #666;
}

#elevationPanel {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 200px;
  box-sizing: border-box;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.25);
  z-index: 999;
}

#elevationPanel.open {
  display: block;
}

#elevationInfo {
  font-size: 12px;
  font-weight: 600;
  color: #1d3557;
  margin-bottom: 4px;
}

#elevationChart {
  display: block;
  width: 100%;
  height: calc(100% - 20px);
}

@media (max-width: 600px) {
  #elevationPanel {
    height: 160px;
  }
}