/* ====================================================== */
/*              Main Content Column Layout Styles         */
/* ====================================================== */
/* Defines column structure & interaction styles.         */
/* columns.css is authoritative for column panel appearance */
/* including glassmorphism, padding, flex, and contracted states. */
/* ====================================================== */

/* ======= Main Column Container ======= */
.main-content-columns {
  display: flex;
  flex-grow: 1;
  gap: var(--column-gap);
  width: 100%; 
  height: 100%;
  overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(var(--column-min-width), 1fr));
  padding: 0; /* Remove all padding from container */
}

/* ======= Individual Column Section Styling (Primary Visual Panels) ======= */
.main-content-columns > section {
  flex: 1;
  min-width: 0;
  display: flex; 
  flex-direction: column;
  
  background-color: var(--glass-background-color);
  backdrop-filter: var(--glass-backdrop-filter);
  -webkit-backdrop-filter: var(--glass-backdrop-filter);
  border: var(--border-width-standard) solid var(--glass-border-color);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-medium);
  
  position: relative;
  overflow: hidden;
  padding: var(--space-4);
  height: 100%;
  max-height: 100%; /* Ensure columns don't exceed container height */
}

/* Navigation Column */
.main-content-columns > section#allocatr-nav-column {
  flex: 0 0 10% !important;
  min-width: 300px;
  max-width: 300px;
  background-color: rgba(0, 0, 0, 0.0);
  margin: 0;
  padding: 10;
  border-right: none;
  border-radius: 0;
  height: 100%; /* Ensure full height */
}

/* Adjust the content wrapper padding for the nav column */
.main-content-columns > section#allocatr-nav-column .column-content-wrapper {
  padding: 0 var(--space-6); /* Remove top/bottom padding, set consistent side padding */
}

/* Navigation Content Styling */
.nav-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0; /* Remove gap */
}

.nav-header {
  text-align: left;
  margin-bottom: 0;
  padding-top: var(--space-8);
}

.nav-title {
  font-size: 3rem;
  font-weight: bold;
  color: var(--color-text-white-primary);
  margin-bottom: var(--space-2);
  text-align: center;
}

.nav-subtitle {
  font-size: 0.9rem;
  color: var(--color-text-white-secondary);
  margin-bottom: var(--space-6); /* Increase space after subtitle */
}

.nav-spacer {
  flex-grow: 1;
}

.nav-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-bottom: var(--space-8); /* Add bottom margin */
}

.view-mode-selector {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4); /* Reduce margin */
}

.mode-label {
  color: var(--color-text-white-secondary);
  text-align: left;
  font-size: 0.9rem;
  margin-bottom: var(--space-2);
}

/* Scenario controls relocated under the balance sheet (mode toggle + cash flow).
   Separated from the table above with a top hairline. Single row: mode buttons
   left-aligned, cash flow expectations pushed to the right. */
.balance-sheet-scenario-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.balance-sheet-scenario-controls .mode-buttons {
  flex-direction: row;
  width: auto;
  margin-bottom: 0;
}

.balance-sheet-scenario-controls .mode-buttons .btn {
  margin: 0;
}

.mode-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  width: 100%;
}

.mode-buttons .btn {
  width: 140px;
  margin: 0 auto;
}

/* Population toggle (All assets / Investments): lay the two buttons side by
   side and centre the pair, overriding the default stacked column layout. */
.population-toggle {
  flex-direction: row;
  justify-content: center;
}

.population-toggle .btn {
  margin: 0;
}

/* Cash flow modal left-chart toggle (Current / Hypothetical): a compact pair of
   equal-width buttons sitting above the left chart, overriding the default
   stacked full-width column layout. */
.cashflow-chart-toggle {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.cashflow-chart-toggle .btn {
  flex: 1 1 0;
  width: auto;
  margin: 0;
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-small);
}

/* Common button styles (shared layout + nav-btn default appearance) */
.nav-btn,
.view-mode-btn {
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--color-text-white-secondary);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-medium);
  transition: all 0.2s ease;
  width: 140px; /* Fixed width for all buttons */
  text-align: center;
  font-size: 0.9rem;
}

.nav-btn:hover {
  background-color: rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--color-text-white-primary);
}

/* Toggle convention: the UNSELECTED option is the lighter button and the
   SELECTED option (.active) is the darker, solid button -- so the filled dark
   button reads as the chosen one. Applies to both the Current/Compare mode
   toggle and the All assets/Investments population toggle for consistency. */
.view-mode-btn {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}

.view-mode-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--color-text-white-primary);
}

.view-mode-btn.active {
  background-color: rgba(0, 0, 0, 0.45);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--color-text-white-primary);
}

.view-mode-btn.active:hover {
  background-color: rgba(0, 0, 0, 0.55);
}

/* Cash flow expectations: lighter button so it reads as a primary action. */
#cash-flow-trigger {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--color-text-white-primary);
}

#cash-flow-trigger:hover {
  background-color: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.35);
}

/* Remove the specific width and margin overrides for the About button */
.nav-header .nav-btn {
  width: 68px; /* Match Save/Load button width */
  margin: 0; /* Remove auto margins */
  display: inline-flex; /* Use inline-flex for better alignment */
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: var(--space-1) var(--space-2);
  font-size: 0.9rem;
}

.nav-header .nav-btn:hover {
  background-color: rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--color-text-white-primary);
}

.action-buttons {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  width: 100%;
}

.action-buttons .nav-btn {
  width: 68px; /* Half of mode button width minus gap */
  font-size: 0.9rem;
  padding: var(--space-1) var(--space-2);
}

.action-buttons .disclaimer-link {
  margin-left: auto; /* Push "About" to the right */
  padding: var(--space-1) 0;
  color: var(--color-text-white-secondary);
}

.nav-content .btn {
  width: 100%;
  text-align: center;
}

.nav-content .disclaimer-link {
  text-align: center;
  display: block;
  margin-top: var(--space-2);
  margin-bottom: var(--space-8);
}

/* Asset and Insight Columns */
.main-content-columns > section#allocatr-assets-column {
  flex: 1;
  margin: var(--space-6) 0 0 var(--space-6); /* Top, right, bottom, left */
  height: calc(100% - (2 * var(--space-6)));
}

.main-content-columns > section#allocatr-insight-column {
  flex: 1;
  margin: var(--space-6) var(--space-6) var(--space-6) 0;
  height: calc(100% - (2 * var(--space-6)));
  /* Trim the right padding so the scrollbar sits closer to the panel edge
     instead of being inset by the full section padding. Content keeps its
     breathing room via the inner .column-content-wrapper padding. */
  padding-right: var(--space-2);
}

.main-content-columns > section:first-child {
  /* flex: 0.7; */ /* Remove this as it affects our nav column */
}

/* ======= Column Content Wrapper ======= */
.column-content-wrapper {
  /* flex-basis:0 + grow fills the section's content height deterministically, so
     the wrapper is bounded to the column (not its content) and scrolls. Using
     height:100% here was unreliable: the percentage did not always resolve
     against the flex-sized section, letting the wrapper grow to its content
     height and overflow the column. The section is overflow:hidden, so that
     clipped the lowest chart and made it unreachable without zooming out. */
  flex: 1 1 0;
  overflow-y: auto; /* Ensure vertical scrolling is enabled */
  overflow-x: hidden; /* Prevent horizontal scrolling */
  background-color: transparent;
  padding: var(--space-4);
  color: var(--glass-text-color);
  display: flex;
  flex-direction: column;
  min-height: 0; /* Critical for Firefox to enable scrolling in flexbox */
}

/* ======= Section Title within Columns ======= */
.column-content-wrapper > h2.section-title {
    color: var(--color-text-white-primary);
    margin-bottom: var(--space-4);
    text-align: center;
    flex-shrink: 0;
}

/* ======= Column explanation texts ======= */
.column-explanation-placeholder, #allocation-note-text {
    margin-top: var(--space-6);
    margin-bottom: var(--space-12);
}

/* ======= Chart Containers within Columns ======= */
.column-content-wrapper div[id*="-chart-container"] {
    margin-top: var(--space-6);
    min-height: var(--chart-container-height);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.column-content-wrapper div[id*="-chart-container"] > div[id^="plotly-"] {
    height: 100%;
    width: 100%;
    flex-grow: 1;
}

/* ======= Contracted Column States ======= */
.main-content-columns > section.contracted {
  flex: 0 0 var(--column-contracted-width) !important; 
  padding: 0;
}

.main-content-columns > section.contracted .column-content-wrapper {
  display: none;
}

/* ======= Column Header & Toggle Button ======= */
.column-header {
  display: flex;
  align-items: center;
  position: absolute;
  top: var(--column-header-offset-top);
  right: var(--column-header-offset-right);
  z-index: var(--column-zindex-header);
  cursor: pointer;
}

.main-content-columns > section.contracted .column-header {
  top: var(--column-header-offset-top);
  right: var(--column-header-contracted-offset-right);
}

.column-toggle {
  background-color: var(--glass-background-color);
  backdrop-filter: var(--glass-backdrop-filter);
  -webkit-backdrop-filter: var(--glass-backdrop-filter);
  border: var(--border-width-standard) solid var(--glass-border-color);
  color: var(--color-text-white-primary);
  border-radius: var(--radius-medium);
  width: var(--column-toggle-size); 
  height: var(--column-toggle-size); 
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  margin: var(--space-2);
  transition: all var(--transition-duration-standard) ease;
  z-index: var(--column-zindex-toggle);
  opacity: var(--column-toggle-opacity);
  box-shadow: var(--shadow-medium);
}

.column-toggle:hover {
  background-color: var(--glass-background-color-hover);
  border-color: var(--glass-border-color-hover);
  opacity: 1;
  transform: scale(var(--column-toggle-hover-scale)); 
  box-shadow: var(--shadow-large);
}

.toggle-icon {
  font-size: var(--column-toggle-icon-font-size); 
  transition: transform var(--transition-duration-standard) ease;
  pointer-events: none; 
}

.contracted .column-toggle .toggle-icon {
  transform: rotate(180deg);
}

/* ======= Vertical Title for Contracted Columns ======= */
.vertical-title {
  display: none; 
  position: absolute;
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%) rotate(var(--vertical-title-rotation));
  transform-origin: center center;
  font-size: var(--column-vertical-title-font-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-white-primary);
  white-space: nowrap;
  text-shadow: var(--column-title-text-shadow);
  text-align: center;
  letter-spacing: var(--column-vertical-title-letter-spacing);
  z-index: var(--column-zindex-content);
}

.main-content-columns > section.contracted .vertical-title {
  display: block;
}

.column-content-wrapper > * {
    position: relative;
    z-index: var(--column-zindex-content);
}

/* Insight Column Specific Styles */
.insight-column-headers {
    display: flex;
    justify-content: space-around; 
    font-weight: bold;
    padding: var(--space-3) 0;
    margin-bottom: var(--space-4);
}

.insight-header-current,
.insight-header-hypothetical {
    flex-basis: 50%; 
    text-align: center;
    font-size: var(--font-size-large); 
}

/* Population views (All assets / Investments). One is shown at a time; the
   chart rows within are separated by whitespace alone (no dividers). The
   opacity transition cross-fades the newly-shown population in so toggling
   between All assets / Investments is not an abrupt blink. */
#population-view-all,
#population-view-investments {
    margin-top: var(--space-8);
    transition: opacity 0.6s ease;
}

.insight-chart-row-pair {
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* force the paired charts to equal height */
    margin-bottom: var(--space-10);
    width: 100%;
}

.plotly-chart-container.insight-chart-left,
.plotly-chart-container.insight-chart-right {
    flex-basis: calc(50% - var(--space-2)); 
}

.plotly-chart-container .js-plotly-plot .plotly .main-svg .gtitle text {
    font-size: var(--font-size-medium) !important; 
}

/* Commented out as per user context */
/*
#allocatr-add-asset-column,
#add-asset-column {
    display: none !important;
}
*/

.nav-header .disclaimer-link {
  display: block;
  color: var(--color-text-white-secondary);
  font-size: 0.9rem;
  opacity: 0.8;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.nav-header .disclaimer-link:hover {
  opacity: 1;
}

/* Add the hidden file input back */
#load-scenario-input {
  display: none;
}