/* ======================================================
   Map Interface – harmonized with fixed header/footer
   - main.map-main owns height
   - desktop: fills (100svh - header - footer)
   - mobile overlays: fill (100svh - header)
====================================================== */

/* Optional: lock body scroll while a full-screen panel is open */
body.no-scroll { overflow: hidden; }

/* ----- MAIN owns all map height on desktop ----- */
main.map-main{
  /* no extra padding; header/footer already fixed */
  padding: 0;
  block-size: calc(100svh - var(--header-height) - var(--footer-height));
  /* Fallback for older browsers */
  height: calc(100vh - var(--header-height) - var(--footer-height));
}

/* The two-column map layout lives 100% inside main */
.layout-wrapper{
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;          /* inherit from main.map-main */
  min-height: 0;         /* prevent flex overflow */
}

/* ----- Panels (desktop) ----- */
.left-panel{
   flex: 2 1 38%;
  max-width: 42%;
  min-width: 280px;
  background: #222c35;
  color: #fff;
  padding: 1rem;
  box-sizing: border-box;
  overflow-y: auto;
  height: 100%;
  border-right: 1px solid var(--border-color);
}

.right-panel{
  flex: 3 1 0%;
  min-width: 120px;
  height: 100%;
  position: relative;    /* so map can pin to it if needed */
  display: flex;
  flex-direction: column;
  background: #e6f0f7;
}

/* Map stretches to the panel bounds */
.map-container, #map{
  flex: 1;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0;
  will-change: transform;
  min-height: 0;
}

/* ----- Mobile overlay mode ----- */
.toggle-view-btn{
  display: none;
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 1001;
  padding: 0.75rem 1.5rem;
  background: var(--primary-color);
  color: #fff;
  border: 0;
  border-radius: 24px;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  font-size: 1rem;
}

@media (max-width: 768px){
  /* Main fills everything beneath the header. We ignore the footer here
     so overlays get enough space and the fixed footer won't crush the UI. */
  main.map-main{
    block-size: calc(100svh - var(--header-height));
    height:   calc(100vh  - var(--header-height));
  }

  .layout-wrapper{
    /* keep the DOM simple; we’ll overlay individual panels instead */
    position: relative;
  }

@media (max-width: 768px){
  .left-panel,
  .right-panel{
    display: none; /* hide by default */
  }

  .left-panel.open,
  .right-panel.open{
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: calc(100svh - var(--header-height)) !important;
    height: calc(100vh  - var(--header-height)) !important;
    position: relative; /* keep normal flow unless your JS uses fixed */
  }
}

  /* Map within the overlay */
  .map-container, #map{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
  }

  .toggle-view-btn{ display: block; }
}

/* ===== Left Panel UI bits (unchanged) ===== */
.dropdown-box{ margin-bottom: 1.5rem; }

.dropdown-toggle{
  width: 100%;
  text-align: left;
  font-weight: bold;
  padding: 0.75rem 1rem;
  background: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 6px;
  cursor: pointer;
  color: #000;
}
.dropdown-toggle:hover{ background: #e2e2e2; }

.dropdown-content{
  display: none;
  padding: 1rem;
  margin-top: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  color: #000
}

.filter-group{ margin-bottom: 1rem; }
.filter-group span{ display: block; font-weight: bold; margin-bottom: 0.5rem; }
.filter-group label{ display: block; margin-left: 1rem; margin-bottom: 0.25rem; }

.apply-button{ text-align: right; }
.apply-button button{
  padding: 0.5rem 1rem;
  background: var(--primary-color);
  color: #fff;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}
.apply-button button:hover{ background: #1a252f; }

/* Make sure your map page uses: <main class="map-main"> */

/* Desktop/tablet: sit fully below header and above footer */
body > main.map-main{
  /* kill any global main padding that would fight this */
  padding: 0 !important;
  margin-top: var(--header-height);
  margin-bottom: var(--footer-height);
  height: calc(100svh - var(--header-height) - var(--footer-height));
  /* fallback for older browsers */
  height: calc(100vh  - var(--header-height) - var(--footer-height));
}

/* Keep the layout wrapper filling the available main height */
body > main.map-main .layout-wrapper{
  height: 100%;
}

/* Mobile overlay mode: ignore footer so overlays get space */
@media (max-width: 768px){
  body > main.map-main{
    margin-top: var(--header-height);
    margin-bottom: 0;
    height: calc(100svh - var(--header-height));
    height: calc(100vh  - var(--header-height));
  }
}