/* =====================================================================
   v6 - DATA EXPLORE > SEASONAL SUMMARY
   Monthly water balance table: full width, minimum height.
   Chart sits below the table and is fully visible.
   Paste at the END of sward_dashboard.css (after the v5 block).
   ===================================================================== */

/* 1. Stack again: KPIs -> table (full width) -> note -> chart (full width) */
.swd-pixel-card .tab-pane.active:has(#pixel_table) {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}
.tab-pane.active:has(#pixel_table) > #pixel_table,
.tab-pane.active:has(#pixel_table) > #pixel_plot,
.tab-pane.active:has(#pixel_table) > .swd-abbrev {
  grid-column: auto !important; grid-row: auto !important; width: 100% !important;
}

/* 2. Nothing in the card may clip the chart */
.swd-pixel-card, .swd-pixel-card > .card, .swd-pixel-card .card-body,
.swd-pixel-card .tab-content, .swd-pixel-card .tab-pane, .swd-pixel-col {
  overflow: visible !important; max-height: none !important; height: auto !important;
}

/* 3. Table: fill the width, shrink the height */
#pixel_table, #pixel_table .reactable, #pixel_table .rt-table {
  width: 100% !important; height: auto !important; max-height: none !important;
}
#pixel_table .rt-table { overflow: visible !important; }
#pixel_table .rt-thead .rt-tr,
#pixel_table .rt-tbody .rt-tr,
#pixel_table .rt-tr-group {
  min-height: 0 !important; height: auto !important;
}
#pixel_table .rt-th, #pixel_table .rt-td {
  flex: 1 1 0 !important; min-width: 0 !important; width: auto !important;
  padding: 0 3px !important; min-height: 0 !important; height: auto !important;
  font-size: 7.5px !important; line-height: 13px !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-width: 0 0 1px 0 !important; border-color: #F1F4F7 !important;
}
#pixel_table .rt-th-inner, #pixel_table .rt-th-content,
#pixel_table .rt-td-inner, #pixel_table .rt-text-content {
  padding: 0 !important; margin: 0 !important; line-height: 13px !important;
}
#pixel_table .rt-th { font-size: 7px !important; font-weight: 700 !important; background: #F5F8FA !important; }
#pixel_table .rt-th:first-child, #pixel_table .rt-td:first-child {
  flex: 0 0 40px !important; text-align: left !important; font-weight: 700 !important;
}
/* any bar / chip drawn inside a cell: flatten it */
#pixel_table .rt-td div, #pixel_table .rt-td span {
  line-height: 13px !important; padding-top: 0 !important; padding-bottom: 0 !important;
  margin-top: 0 !important; margin-bottom: 0 !important;
}
#pixel_table .rt-pagination, #pixel_table .rt-search, #pixel_table .rt-noData { display: none !important; }

/* 4. Abbreviation note: one thin line */
.tab-pane.active:has(#pixel_table) > .swd-abbrev {
  margin: 0 !important; font-size: 6.5px !important; line-height: 1.2 !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 5. Chart below the table: full width, fixed height, fully visible */
.tab-pane.active:has(#pixel_table) > #pixel_plot {
  height: 230px !important; min-height: 230px !important; flex: 0 0 auto !important;
}
#pixel_plot .plot-container, #pixel_plot .svg-container { width: 100% !important; }