/* Fund Simulation layout override loaded last to keep the KPI strip above the weekly table. */
.fund-simulation-page #currentPortfolioDateTitle {
  order: 0 !important;
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
}

.fund-simulation-page .portfolio-inline-kpis {
  order: 1 !important;
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
}

.fund-simulation-page .fund-sim-left-pane .register-table-wrap {
  order: 2 !important;
  grid-column: 1 !important;
  grid-row: 3 !important;
}

.fund-simulation-page .fund-sim-right-pane {
  order: 3 !important;
  grid-column: 2 !important;
  grid-row: 3 !important;
}

/* Scenario deal flow: no inner scrollbars. */
.fund-simulation-page .portfolio-scenario-box .added-scenario-table-wrap {
  overflow: visible !important;
  max-height: none !important;
}

/* Auto layout (not fixed): the Action column hugs its buttons via the
   width-1%-plus-nowrap idiom, the six data columns carry % growth hints with
   px floors — so widening the pane grows ALL data columns, never Action. */
.fund-simulation-page .portfolio-scenario-box .added-scenario-table {
  width: 100% !important;
  min-width: 0 !important;
  table-layout: auto !important;
}

.fund-simulation-page .portfolio-scenario-box .added-scenario-table th,
.fund-simulation-page .portfolio-scenario-box .added-scenario-table td {
  padding: 5px 5px !important;
  font-size: 9px !important;
  line-height: 1.15 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* Growth hints (%) with px floors: at the narrow baseline (~470px pane) the
   floors reproduce the tuned 62/44/104/66/66/44 layout; above it, surplus
   width spreads across all six data columns per the hints. */
.fund-simulation-page .portfolio-scenario-box .added-scenario-table th:nth-child(1),
.fund-simulation-page .portfolio-scenario-box .added-scenario-table td:nth-child(1) {
  width: 16% !important;
  min-width: 62px !important;
}

/* Bank stays narrow (names are short) — freed width went to amount + action. */
.fund-simulation-page .portfolio-scenario-box .added-scenario-table th:nth-child(2),
.fund-simulation-page .portfolio-scenario-box .added-scenario-table td:nth-child(2) {
  width: 11% !important;
  min-width: 44px !important;
}

.fund-simulation-page .portfolio-scenario-box .added-scenario-table th:nth-child(3),
.fund-simulation-page .portfolio-scenario-box .added-scenario-table td:nth-child(3) {
  width: 27% !important;
  min-width: 104px !important;
}

/* Value + Maturity: identical width, dates never wrap. */
.fund-simulation-page .portfolio-scenario-box .added-scenario-table th:nth-child(4),
.fund-simulation-page .portfolio-scenario-box .added-scenario-table td:nth-child(4),
.fund-simulation-page .portfolio-scenario-box .added-scenario-table th:nth-child(5),
.fund-simulation-page .portfolio-scenario-box .added-scenario-table td:nth-child(5) {
  width: 17% !important;
  min-width: 66px !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
}

.fund-simulation-page .portfolio-scenario-box .added-scenario-table th:nth-child(6),
.fund-simulation-page .portfolio-scenario-box .added-scenario-table td:nth-child(6) {
  width: 11% !important;
  min-width: 44px !important;
}

/* Action hugs its content exactly (EDIT+DELETE ≈ 90px incl. cell padding) at
   ANY pane width: the auto-layout width-1%-plus-nowrap shrink-to-fit idiom. */
.fund-simulation-page .portfolio-scenario-box .added-scenario-table th:nth-child(7),
.fund-simulation-page .portfolio-scenario-box .added-scenario-table td:nth-child(7) {
  width: 1% !important;
  white-space: nowrap !important;
}

/* Maturity amount: a single left-anchored mono string ("CCY <padded number>").
   The JS pads shorter numbers with leading spaces to the longest one, so
   decimals align and the ccy-to-number gap never stretches with the pane. */
.fund-simulation-page .portfolio-scenario-box .added-scenario-table .deal-amount {
  white-space: pre !important;
  overflow-wrap: normal !important;
}

.fund-simulation-page .portfolio-scenario-box .deal-type-badge {
  padding: 3px 6px !important;
  font-size: 8px !important;
  gap: 3px !important;
}

.fund-simulation-page .portfolio-scenario-box .deal-type-badge::before {
  width: 5px !important;
  height: 5px !important;
}

/* RENEW / RENEWED / EDIT / DELETE share one size and type treatment — the
   RENEWED pill differs from the RENEW button only in color (and width, since
   the word is longer). */
.fund-simulation-page .portfolio-scenario-box .renew-maturity-button,
.fund-simulation-page .portfolio-scenario-box .deal-flow-action-muted,
.fund-simulation-page .portfolio-scenario-box .renewed-pill {
  min-height: 24px !important;
  padding: 4px 7px !important;
  font-size: 8px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.fund-simulation-page .portfolio-scenario-box .renew-maturity-button {
  border-color: rgba(189, 238, 242, 0.18) !important;
  background: rgba(189, 238, 242, 0.035) !important;
  color: rgba(223, 249, 251, 0.58) !important;
  box-shadow: none !important;
}

.fund-simulation-page .portfolio-scenario-box .renew-maturity-button:hover {
  border-color: rgba(189, 238, 242, 0.3) !important;
  background: rgba(189, 238, 242, 0.07) !important;
  color: rgba(223, 249, 251, 0.78) !important;
  transform: translateY(-1px) !important;
}

.fund-simulation-page .portfolio-scenario-box .deal-flow-action-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 3px !important;
}

/* Edit + Delete hug their labels side by side inside the Action column. */
.fund-simulation-page .portfolio-scenario-box .deal-flow-action-group .renew-maturity-button {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  padding: 4px 5px !important;
  white-space: nowrap !important;
}

.fund-simulation-page .portfolio-scenario-box .delete-scenario-deal-button {
  border-color: rgba(255, 128, 136, 0.3) !important;
  background: rgba(255, 128, 136, 0.06) !important;
  color: rgba(255, 194, 199, 0.72) !important;
}

.fund-simulation-page .portfolio-scenario-box .delete-scenario-deal-button:hover {
  border-color: rgba(255, 151, 158, 0.55) !important;
  background: rgba(255, 128, 136, 0.14) !important;
  color: #ffe0e2 !important;
}

.fund-simulation-page .portfolio-scenario-box .scenario-flow-date-input,
.fund-simulation-page .portfolio-scenario-box .scenario-flow-rate-input {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 24px !important;
  padding: 3px 4px !important;
  font-size: 9px !important;
}

/* This stylesheet loads after styles.css, so it owns the final responsive
   placement. Restore the left wrapper as a real grid item below desktop width;
   its desktop display:contents layout would otherwise collapse the current-book
   pane into a zero-width implicit column. */
@media (max-width: 900px) {
  .fund-simulation-page .fund-sim-workspace {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
  }

  .fund-simulation-page .fund-sim-left-pane {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px;
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .fund-simulation-page .fund-sim-right-pane {
    grid-column: 1 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
    width: 100% !important;
  }
}

@media (max-width: 520px) {
  .fund-simulation-page .portfolio-scenario-box .added-scenario-table-wrap {
    max-width: 100%;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
  }

  .fund-simulation-page .portfolio-scenario-box .added-scenario-table {
    min-width: 680px !important;
  }
}