#map {
    width: 100%;
    height: 100%; /* Fill available space */
    min-height: 180px;
    flex: 1 1 auto;
    
  }

  .leaflet-legend-title {
    font-size: 1rem;
  }

 

  .content {
    height: calc(100vh - 56px);
    /* padding-left: 20px;
    padding-right: 20px; */

    display: flex;
    flex-direction: column;

    box-sizing: border-box;
    overflow: hidden;
}

  /* Horizontal resizable panel */
  .panel-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  .panel-top {
    flex: 0 0 auto;
    height: 70%; 
    /* min-height: 200px; */
    display: flex;
    flex-direction: row;
    overflow: hidden;
    /* transition: height .5s ease; */
  }



  .panel-bottom {
    overflow-y: auto;       /* vertical scroll */
    overflow-x: hidden;     /* prevents horizontal scroll */
    min-width: 0;           /* 🔥 critical: allows shrinking */
  }

  .horizontal-splitter {
    position: relative;
    height: 3px;
    background-color: var(--bs-light);
    cursor: row-resize;
  }

  .horizontal-splitter::after {
    content: "";
    position: absolute;
    top: 15px;    /* extends grab area above */
    left: 0;
    right: 0;
    height: 15px; /* total grab area height */
    background: transparent; /* invisible but interactive */
    cursor: row-resize;
    /* background-color: aqua; */
  }

  .corner-splitter {
    position: absolute;
    width: 30px;
    height: 30px;
    background-color: transparent;
    cursor: nesw-resize;
    z-index: 10;
    bottom: 0;
    /*left: calc(50% - 2px);  Adjust to align with the splitters */
  }

  /* Vertical resizable panel */
  .panel-left {
    flex: 0 0 auto;
    width: 30%; /* Initially 30% but resizable */
    min-width: 300px;
    padding-right: 5px;
    overflow-y: auto; /* Scroll if content exceeds */
  }

  .panel-right {
    position: relative;
    flex: 1 1 auto;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Prevent overflow */
  }

.vertical-splitter {
    position: relative;   /* important for ::after absolute positioning */
    width: 2px;           /* visible line */
    background-color: var(--bs-light);
    cursor: col-resize;
    height: 100%;         /* full height of container */
}

.vertical-splitter::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -10px;                  /* extend grab area left */
    width: 23px;                  /* grab area: 10px left + 3px line + 10px right */
    background: transparent;
    cursor: col-resize;
    z-index: 10;
}


   .map-card {
    width: 100%;
    height: 100%;
  }