/* =====================================================================
   v8 - OVERLAP FIX (charts + KPI tiles on the calculator / overview)
   Paste at the END of www/sward_dashboard.css, or add after
   sward_layout_fix.css in the page_navbar() link list.
   ===================================================================== */

/* Calculator grid: rows size to their content instead of being squashed */
.swd-calc-grid { grid-template-rows: auto auto !important; }
.cg-budget, .cg-monthly { min-height: 300px; }
.cg-monthly .card-body { overflow: visible !important; }

/* Plots keep a usable height so legends/axes never collide */
.cg-budget .plotly, .cg-monthly .plotly,
.ov-season .plotly { min-height: 250px; }

/* KPI tiles: each tile clips its own content, rows have a real height */
.cg-tiles {
  grid-auto-rows: minmax(58px, 1fr) !important;
  align-content: stretch;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
.swd-wbt { position: relative; overflow: hidden !important; min-height: 58px; }
.swd-wbt-spark {
  height: 20px !important; min-height: 20px; margin: 2px 0 0 !important;
  overflow: hidden !important; position: relative; z-index: 0;
}
.swd-wbt-spark .plotly, .swd-wbt-spark .js-plotly-plot,
.swd-wbt-spark .plot-container, .swd-wbt-spark .svg-container {
  height: 20px !important; min-height: 0 !important; max-height: 20px !important;
}
.swd-wbt-top, .swd-wbt-val, .swd-wbt-note { position: relative; z-index: 1; background: transparent; }
.swd-wbt-val, .swd-wbt-val div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Monthly climate strip sits below the legend, not on top of it */
.ov-season #ov_calendar { margin-top: 6px; position: relative; z-index: 1; }

/* Plotly legends: never draw over axis tick labels */
.js-plotly-plot .legend { pointer-events: auto; }

/* Chart heights: Shiny only accepts calc() in plotlyOutput(), so the
   minimum / maximum is enforced here. */
#all_card_overview { min-height: 250px !important; max-height: 420px !important; }
#wb_budget, #volume_chart, #area_chart { min-height: 250px !important; max-height: 460px !important; }


/* Land cover chart fills its card (no blank space at the bottom) */
.ov-lc .swd-card-body {
  position: relative;
  min-height: 220px;
}
.ov-lc .swd-card-body #area_card_overview {
  position: absolute;
  inset: 6px 8px;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}