/* The full page body area under the navbar */
.agro-graphs-stack{
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  gap: 8px;              /* optional spacing between graphs */
  min-height: 0;         /* IMPORTANT: allows children to shrink + scroll properly */
}

/* Each visible graph shares height equally */
.agro-graph-wrap{
  flex: 1 1 0;
  min-height: 0;         /* IMPORTANT so dcc.Graph can size correctly */
}

/* Make the Plotly graph fill its wrapper */
.agro-graph-wrap .js-plotly-plot,
.agro-graph-wrap .plotly,
.agro-graph-wrap .plot-container{
  height: 100% !important;
}

.agro-body{
  height: calc(100vh - 130px); /* adjust 90px if your top bar is different */
  min-height: 0;
  padding-top: 6px;
}

/* If you show only "All", it will naturally take all height because others are display:none */