/* floating panel */
.plant-unites-filter-floating-div-show{
  display: block;                 /* or flex if you want vertical layout in the panel */
  position: fixed;
  top: 52%;
  left: 40%;
  transform: translate(-50%, -50%);
  width: 32vw;

  height: fit-content;
  min-height: 10vh;
  max-height: 80vh;

  /* contain outer scroll so inner areas can scroll */
  overflow: hidden;

  background: var(--div-body-background-color);
  border: var(--div-border);
  border-radius: 5px;
  box-shadow: var(--floating-selected-box-shadow);
  z-index: 1000;
  text-align: center;
  box-sizing: border-box;
}

/* header strip */
.plant-unites-filter-head-group-div{
  width: 100%;
  height: 5vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  border: 1px solid #1b1a1a;
  border-radius: 5px;
  background-color: var(--div-head-second-background-color);
  margin: 1px;
  box-sizing: border-box;
}

/* body wrapper */
.plant-unites-filter-body-filter-div{
  width: 100%;
  height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow-y: auto;
  overflow-x: hidden;
  /* important so children (like the scroll area) can shrink/scroll inside flex */
  /* min-height: 0; */

  background-color: var(--div-head-second-background-color);
  box-sizing: border-box;
}

/* filter row(s) */
.plant-unites-filter-body-filter-dropdowns-div{
  width: 100%;
  display: flex;
  gap: 10px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #1b1a1a;
  border-radius: 5px;
  background-color: var(--div-head-third-background-color);
  margin: 1px;
  box-sizing: border-box;
}

/* OUTPUT container (title + list) */
.plant-unites-filter-body-output-div{
  width: 100%;
  height: 25vh;                   /* fixed height for the scroll area block */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;

  border: 1px solid #1b1a1a;
  border-radius: 5px;
  background-color: var(--div-body-background-color);
  margin: 1px;
  padding: 2px;
  box-sizing: border-box;
  text-align: left;

  /* let the child (UL) be the scroll container */
  overflow: hidden;
  min-height: 0;                  /* critical for flex children to scroll */
}

/* keep the heading fixed at the top */
.plant-unites-filter-body-output-div > h4{
  margin: 0 0 .5rem 0;
  flex: 0 0 auto;
}

/* make the UL the scrollbox */
.plant-unites-filter-list{
  flex: 1 1 auto;
  min-height: 0;                  /* allow shrinking so overflow can happen */
  overflow-y: auto;
  overflow-x: hidden;

  margin: 0;
  padding-left: 1rem;
  list-style: disc inside;
}

/* if you can’t add a class to the UL, this selector does the same */
.plant-unites-filter-body-output-div > ul{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;

  margin: 0;
  padding-left: 1rem;
  list-style: disc inside;
}

/* button row */
.time-frame-select-buttons-container{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  margin-top: 3px;
  margin-bottom: 6px;
}