html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
}

.root {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Map control icons styling */
.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon {
  filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%) !important;
}

.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon {
  filter: invert(21%) sepia(100%) saturate(7414%) hue-rotate(354deg) brightness(101%) contrast(114%) !important;
}

.maplibregl-ctrl-compass .maplibregl-ctrl-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l-4 10h8z' fill='%23f44336'/%3E%3Cpath d='M12 22l4-10H8z' fill='%239e9e9e'/%3E%3C/svg%3E") !important;
  background-size: 90% !important;
  filter: none !important; /* Preserve red/grey colors */
}

.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon {
  filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(246deg) brightness(104%) contrast(97%) !important;
}

.maplibregl-style-switcher {
  filter: invert(61%) sepia(80%) saturate(2304%) hue-rotate(359deg) brightness(102%) contrast(105%) !important;
}

.maplibre-ctrl-today-route {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20' viewBox='0 0 24 24' width='20'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M19 15.18V7c0-2.21-1.79-4-4-4s-4 1.79-4 4v10c0 1.1-.9 2-2 2s-2-.9-2-2V8.82C8.16 8.4 9 7.3 9 6c0-1.66-1.34-3-3-3S3 4.34 3 6c0 1.3.84 2.4 2 2.82V17c0 2.21 1.79 4 4 4s4-1.79 4-4V7c0-1.1.9-2 2-2s2 .9 2 2v8.18c-1.16.41-2 1.51-2 2.82 0 1.66 1.34 3 3 3s3-1.34 3-3c0-1.3-.84-2.4-2-2.82zM6 7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm13 12c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  filter: brightness(0) !important; /* Black when inactive */
}

.maplibre-ctrl-today-route.active {
  background-color: rgba(76, 175, 80, 0.15) !important;
  filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%) !important; /* Green when active */
}