/* ========== GLOBAL STYLES ========== */
body {
  font-family: 'Inter', sans-serif;
}

/* ========== BUTTONS ========== */
/* CBE-style button override */
.btn-secondary {
  background-color: #6CA0C1 !important;
  color: #FFFFFF !important;
  border: 1px solid #ccc !important;
  padding: 10px 18px !important;
  font-size: 17.5px;
  font-family: 'Inter', sans-serif;
  border-radius: 6px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.25s ease-in-out;
  white-space: nowrap;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
  background-color: #6CA0C1 !important;
  border-color: #FFFFFF !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}

/* ========== SPLASH SCREEN ========== */
#splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  z-index: 2000; /* Must be higher than dropdowns or other components */
}

/* ========== DROPDOWN STYLES ========== */
.pretty-dropdown {
  width: 100%;
  min-width: 180px;
  max-width: 280px;
  padding: 6px 12px;
  font-size: 16px;
  font-weight: 500;
  background-color: #f8f9fa;
  color: #212529;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.pretty-dropdown:focus {
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
}

/* Optional helper to keep dropdowns flexible in flex layouts */
.responsive-dropdown {
  flex-grow: 1;
  max-width: 100%;
}

/* General dropdown style */
.scenario-dropdown {
  width: 100%;
  min-width: 140px;
  font-size: 15px;
  font-family: 'Inter', sans-serif;
  padding: 6px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

/* Base: outline green button style for all options */
.custom-green-toggle {
  color: #A8C351;
  background-color: white;
  border: 1px solid #A8C351;
  font-weight: bold;
  padding: 6px 12px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Selected button gets green fill and white text */
input:checked + .custom-green-toggle {
  background-color: #A8C351 !important;
  color: white !important;
  border-color: #A8C351 !important;
}

/* Superscripted, small info icon button */
.sup-info-icon {
  font-size: 10px;
  vertical-align: super;
  padding: 0;
  margin-left: 1px;
  background-color: transparent !important;
  border: none !important;
  color: #6CA0C1;
  cursor: pointer;
  line-height: 1;
}


@media screen and (max-width: 576px) {
  .slider-wrapper {
    height: 30px !important;
  }

  .btn.custom-green-toggle {
    font-size: 0.75rem;
    padding: 0.25rem 0.4rem;
  }

  .form-check-inline {
    flex-wrap: nowrap !important;
  }

  .form-check-label {
    white-space: nowrap;
  }
}


@media screen and (max-width: 576px) {
  .pretty-dropdown {
    font-size: 14px;
    min-width: 100%;
  }
}


/* ============================================================================
   Year slider theming — Pathways green palette.
   Dash 4.x dcc.Slider is built on Radix UI. The bundled CSS themes via
   custom properties like --Dash-Fill-Interactive-Strong and uses the
   high-specificity selector  .dash-slider-root:not([data-included='false']) X
   which beats our plain `.dash-slider-X` rules. So we both:
     (1) override the variable at the slider-root scope (cleanest), and
     (2) match the bundled selector's specificity for direct color overrides.

   green=#6B9F3E, dark_green=#4A6B2C, accent_green=#A8C351, teal=#2D4F4F.
   ============================================================================ */

/* Hide the numeric input(s) Dash 4 puts next to the slider — our own
   labeled "Year:" input serves that purpose. */
.dash-range-slider-input,
.dash-range-slider-min-input,
.dash-range-slider-max-input {
  display: none !important;
}

/* (1) Variable-level override: changes anywhere the slider's bundled CSS
   pulls from --Dash-Fill-Interactive-Strong (the "active" color). Scoped to
   the slider so other Dash components that may use the same variable are
   unaffected. */
.dash-slider-root {
  --Dash-Fill-Interactive-Strong: #6B9F3E !important;
  --Dash-Fill-Interactive-Weak:   #e0e3df !important;
}

/* (2) Direct color rules, scoped with the same specificity Dash uses. */
.dash-slider-root:not([data-included='false']) .dash-slider-range {
  background-color: #6B9F3E !important;
}

.dash-slider-root:not([data-included='false']) .dash-slider-track {
  background-color: #e0e3df !important;
}

.dash-slider-root:not([data-included='false']) .dash-slider-thumb {
  background-color: #4A6B2C !important;
  border: 2px solid #2D4F4F !important;
  box-shadow: none !important;
  opacity: 1 !important;
}
.dash-slider-root:not([data-included='false']) .dash-slider-thumb:hover,
.dash-slider-root:not([data-included='false']) .dash-slider-thumb:focus,
.dash-slider-root:not([data-included='false']) .dash-slider-thumb:active,
.dash-slider-root:not([data-included='false']) .dash-slider-thumb:focus-visible {
  border-color: #2D4F4F !important;
  box-shadow: 0 0 0 5px rgba(107, 159, 62, 0.25) !important;
  outline: none !important;
}

/* Mark labels (the "2020 / 2030 / ..." under the slider).
   Class name is still a guess; adjust once we inspect a mark element. */
.dash-slider-root .dash-slider-mark,
.dash-slider-root .dash-slider-mark-text,
[class*="dash-slider"] [class*="mark"] {
  color: #495057 !important;
  font-family: Inter, sans-serif !important;
}
.dash-slider-root .dash-slider-mark-active,
.dash-slider-root .dash-slider-mark-text-active {
  color: #6B9F3E !important;
  font-weight: 600 !important;
}


/* ============================================================================
   Header nav tabs: right-justified, sharing the header row with the title.
   The tabs wrap only after the whole group has been pushed onto its own row
   (driven by the title column's min-width) and is still too narrow for four.
   Individual buttons never shrink and their labels never break mid-label.
   ============================================================================ */

.nav-tabs-row {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
}

.nav-tabs-row > button {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* NAV_WRAP_BREAKPOINT = 1392px. Below this the nav column can no longer fit
   beside the title (logo 153 + title min-width 384 + nav 791 = 1328, plus 64px
   of container/gutter offset) so it wraps onto its own row — and there it is
   left-aligned rather than right-aligned.

   This number must track TITLE_MIN_WIDTH in app.py and the rendered width of
   the four tabs. If either changes, re-measure: the switch must fire at the
   same width the row actually wraps, or the tabs will left-align while still
   sitting beside the title (or stay right-aligned after wrapping). */
@media (max-width: 1391px) {
  .nav-col {
    margin-left: 0 !important;
  }
  .nav-tabs-row {
    justify-content: flex-start !important;
  }
}


/* ============================================================================
   Layout (panels). Panels stack vertically by default and only go side-by-side
   on very wide screens (>= PANEL_SIDE_BY_SIDE = 1600px). Side-by-side below
   that leaves each panel too narrow: the control inputs crowd, and the curve
   plot and year slider lose usable width. Stacking instead lets the page
   scroll, which keeps both panels full-width and legible.

   To tune the threshold, change 1599px/1600px in the two blocks below (they
   must stay adjacent) and the min-width in the short-viewport block.
   ============================================================================ */

/* Stacked (default, up to 1599px) */
@media (max-width: 1599px) {
  /* Let the page scroll instead of clipping to viewport height */
  #main-content {
    overflow-y: auto !important;
    overflow: auto !important;
  }
  /* Container becomes natural-height so the row inside can stack */
  #main-content > .container-fluid {
    flex: 0 0 auto !important;
    display: block !important;
  }
  /* The row stops being a flex item that fills available height */
  .main-body-row {
    flex: 0 0 auto !important;
    display: block !important;
    min-height: 0 !important;
  }
  /* Each panel claims a sensible chunk of the viewport when stacked.
     Width: 100% override guards against any residual half-width column
     rules below the xl breakpoint. */
  .panel-col {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 75vh !important;
    margin-bottom: 8px !important;
  }
}

/* Side-by-side (1600px and up). The panels carry only col-12 from Bootstrap,
   so this is what splits them into two columns. */
@media (min-width: 1600px) {
  .panel-col {
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
  }
}

/* Narrowest side-by-side (~1600-1850px): compress table column + cell widths
   AND text so the curve plot keeps usable width. */
@media (min-width: 1600px) and (max-width: 1850px) {
  /* Shrink the wrapping column. Beats inline min/maxWidth via !important. */
  .analysis-col {
    min-width: 220px !important;
    max-width: 340px !important;
  }
  /* Let the DataTable itself collapse. */
  .analysis-col .dash-spreadsheet-container,
  .analysis-col .dash-spreadsheet-inner,
  .analysis-col table {
    width: 100% !important;
    table-layout: fixed !important;
  }
  /* Shrink cells (overrides TABLE_STYLE_CELL inline width 70 / min 60 / max 100). */
  .analysis-col .dash-cell,
  .analysis-col .dash-header {
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    font-size: 12px !important;
    padding: 2px !important;
  }
  .analysis-col .dash-cell-value {
    font-size: 12px !important;
  }
  .analysis-col .dash-cell {
    height: 26px !important;
  }
}

/* Narrowest viewports (< 992px): stack the curve plot above the analysis
   tables instead of side-by-side. Below this the two together leave the plot
   too narrow to read. The strip's inline maxHeight is lifted so the stacked
   content isn't clipped, and the tables go full-width. */
@media (max-width: 991px) {
  .stats-strip {
    flex-direction: column !important;
    max-height: none !important;
    align-items: stretch !important;
  }
  /* Plot needs an explicit height once it is no longer stretched by the row.
     Tall enough that the rotated y-axis title ("Flood Events per Year") fits
     along the axis without its last word being clipped. */
  .stats-strip > .curve-col {
    flex: 0 0 auto !important;
    min-height: 330px !important;
  }
  .stats-strip > .analysis-col {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-top: 8px !important;
  }

  /* Keep the four nav tabs on a single line. At full size they need ~791px,
     which no longer fits once the header narrows, and they wrapped to a second
     row. Shrinking type + padding keeps one row well below this breakpoint.
     !important because toggle_info_panels rewrites each button's inline style. */
  #nav-btn-instructions,
  #nav-btn-why-how,
  #nav-btn-science,
  #nav-btn-methods {
    font-size: 11px !important;
    padding: 5px 8px !important;
    margin-left: 4px !important;
  }
}

/* Drop the year slider only once the four control dropdowns have stacked into
   a single column (below Bootstrap's sm, 576px). Above this they are 2-up or
   4-up and the slider still has room. Hidden rather than removed from the
   layout so the callbacks that read/write 'yearslider' keep working — the
   Year / SLR number boxes set the same value. */
@media (max-width: 575px) {
  .slider-wrapper {
    display: none !important;
  }
}

/* Short viewports (e.g. landscape phone, small laptop): trim the bottom
   strip so the map keeps usable height. The bottom section of each panel
   is always the last direct child. */
@media (max-height: 600px) and (min-width: 1600px) {
  .panel-col > div:last-child {
    max-height: 180px !important;
  }
}