html, body {
  margin: 0;
  padding: 0;
  height: 100%; /* Ensures body and html take full viewport height */
  overflow: hidden; /* Avoid any scrolling caused by excess height */
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* Full viewport height */
  width: 100vw; /* Full viewport width */
  overflow: hidden; /* No overflow to ensure everything fits within the viewport */
  max-width: 100% !important; /* Override the max-width */
  width: 100vw; /* Ensure full viewport width */
}

.top-bar {
  width: 100%; /* Full width */
  height: 64px; /* Fixed height */
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  box-sizing: border-box; /* Include padding in the height */
  position: fixed;
  top: 0;
  z-index: 1000;
}

.map-container {
  flex-grow: 1; /* Takes remaining space */
  margin-top: 64px; /* Offset by the height of the top bar */
  width: 100%; /* Full width */
  overflow: hidden; /* Ensures no overflow */
}

.leaflet-container {
  height: 100%; /* Full height of its parent */
  width: 100%; /* Full width of its parent */
}