/* Full-height app layout */
html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: hidden; /* Prevent accidental page scroll bars */
  height: 100%;
  margin: 0;
}

main.container-fluid {
  max-width: 100vw;
  margin: 0;
  padding: 0;
}

/* Main app area takes all remaining height below navbar */
main.app {
  position: relative;
  display: flex;
  flex-direction: row;
  flex: 1 1 auto; /* grow to fill viewport */
  min-height: 0;   /* Important for flex children to size correctly */
}
/* Map fills the available space */
#map {
  flex: 1 1 auto; /* fill the main */
  min-height: 0;  /* prevent overflow issues in flex containers */
  height: calc(100vh - 64px - 56px);
  left: 0;
  right: 0;
  width: 100vw;
  margin-right: 0;
  margin-left: 0;
}

/* Optional: a compact footer that sits on top of the map corner */
.map-attribution {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  z-index: 1000;
  background: color-mix(in oklab, var(--bs-body-bg) 85%, transparent);
  backdrop-filter: blur(6px);
  border-radius: 0.5rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.825rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.15);
}
/* Improve touch interactions for offcanvas on small screens */
.offcanvas {
  --bs-offcanvas-width: min(90vw, 380px);
}
/* Optional: make navbar slightly translucent over the map */
.navbar {
  backdrop-filter: blur(8px);
  background-color: color-mix(in oklab, var(--bs-body-bg) 85%, transparent);
}

footer {
  position: sticky;
  bottom: 0;
  flex-shrink: 0;
  height: 40px;
}