/* style_mortgage_scenarios.css
   Scoped to the mortgage page so it doesn't break other pages. */

.target-planning-container {
  max-width: 100%;
}

/* These blocks should never get cut off; they should scroll horizontally instead */
.target-planning-container .user-block {
  max-width: 100%;
  overflow-x: hidden; /* keep the block clean; the inner wrappers handle scrolling */
}

/* A reusable horizontal scroll wrapper */
.target-planning-container .target-planning-scroll-x {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px; /* makes scrollbar easier to grab */
}

/* TABLE WRAP */
#targetplanningTableWrap {
  max-width: 100%;
}

#targetplanningTableWrap h2 {
  margin-top: 0;
}

/* Force the table to be wide enough that new scenarios don’t “squeeze” columns */
#scenarioTable {
  min-width: 1100px;
}

/* Optional: give the Scenario column room but don’t let it force infinite width */
#scenarioTable th:first-child,
#scenarioTable td:first-child {
  min-width: 240px;
}

/* If your global .ft-table uses nowrap everywhere, allow just scenario name input to behave */
#scenarioTable td:first-child input.scenario_name {
  width: 100%;
  min-width: 220px;
  max-width: 420px;
}

/* CHART WRAP */
#targetplanningChartWrap {
  max-width: 100%;
}

/* Make the chart horizontally scrollable if labels/datasets force width */
#targetplanningChartWrap .target-planning-scroll-x canvas {
  min-width: 900px; /* allows wide charts; scroll instead of clipping */
}

/* chart: since we use maintainAspectRatio:false, give container a height */
#targetplanningChartWrap .target-planning-scroll-x {
  height: 260px;  /* adjust if you want smaller */
}

/* make the canvas fill that height */
#targetplanningChart {
  display: block;
  height: 260px !important;
}

#targetplanningChartWrap .chartBox {
  height: 320px;
}

.target-planning-table-box {
  max-height: 420px;   /* adjust as you like */
  overflow: auto;      /* vertical + horizontal if needed */
}

/* keep your horizontal scroller working */
.target-planning-scroll-x {
  overflow-x: auto;
}

/* both-direction scroller for the table (horizontal + vertical) */
.target-planning-scroll.both {
  overflow: auto;
  max-height: 60vh;          /* IMPORTANT: makes new rows reachable */
  border-radius: 10px;
}

/* keep inputs usable in a tight layout */
.target-planning-namewrap {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* action buttons layout */
.target-planning-actions button {
  margin-right: 8px;
}

/* make sure nothing is clipping the table */
#content,
.target-planning-container,
.user-block {
  overflow: visible;
}

/* Buttons/controls alignment */
.target-planning-container .controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.target-planning-container .controls button {
  white-space: nowrap;
}

/* Action buttons in table should not wrap weirdly */
#scenarioTable td:last-child {
  white-space: nowrap;
}

#scenarioTable td:last-child button {
  margin-right: 8px;
}

/* Make inputs reasonable width so the row isn't huge */
#scenarioTable input[type="number"] {
  width: 120px;
}

#scenarioTable input[type="text"] {
  width: 100%;
}

/* Keep the baseline badge from stretching layout */
.target-planning-container .pill {
  white-space: nowrap;
}