/* DCP Flask shell styles (formerly shell.css). */
:root,
[data-bs-theme=light] {
  --dcp-west-blue: #3f50a0;
  --dcp-west-light-blue: #2fa4e7;
  --dcp-west-green: #56803d;
  --dcp-shell-border: #dbe3ed;
  --bs-primary:   #3F50A0;
  --bs-heading-color: #3F50A0;
  --bs-primary-rgb: 47, 164, 231;
  --bs-link-color: #3F50A0;
  --bs-link-hover-color: #2fa4e7;
  --bs-link-color-rgb: 63, 80, 160;
  --bs-link-hover-color-rgb: 47, 164, 231;
  --bs-tertiary-color: rgba(86, 128, 61, 0.3);
  --bs-tertiary-color-rgb: rgba(86, 128, 61, 1);
  --bs-sliders-color-rgb: 86, 128, 61;
}

.bg-primary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}

.bg-secondary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important;
}

html,
body.dcp-shell {
  min-height: 100%;
}

body.dcp-shell {
  display: flex;
  flex-direction: column;
  margin: 0;
  color: #354052;
  background: #f7f9fc;
}

.navbar {
  border-bottom: 2px solid var(--bs-primary);
  --bs-navbar-padding-y: 0rem;
  min-height: 7vh;
}

.navbar-collapse {
  flex-basis: 100%;
  flex-grow: 1;
  align-items: center;
  padding: 1%;
  background-color: white;
}

.navbar-brand-slot {
  max-width: min(48vw, 510px);
  color: var(--dcp-west-blue);
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  font-weight: 700;
  line-height: 1.2;
  white-space: normal;
}

.navbar-brand-slot:hover {
  color: var(--dcp-west-light-blue);
}

.nav-link.active {
  border-bottom: 2px solid var(--bs-tertiary-color-rgb);
  border-top: 2px solid var(--bs-tertiary-color-rgb);
  height: 100%;
  width: auto;
  position: relative;
  font-weight: 600;
}

.main-navbar {
  position: relative;
  justify-content: flex-start;
}

.west-wordmark {
  color: #3f50a0;
  font-family: Arial, sans-serif;
  font-size: clamp(1.4rem, 2vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
}

.figure-logo {
  margin-bottom: 0.01rem;
  line-height: 1;
  width: auto;
  height: 8vh;
}

.figure-logo-container {
  display: flex;
  align-items: center;
  /* Below the navbar-expand-xl breakpoint, Bootstrap's own .navbar CSS defaults to
     flex-wrap: wrap (nowrap only applies at/above the expand breakpoint), which lets the
     logo slot wrap onto its own row on narrow/tall screens whenever it doesn't fit
     alongside the brand and toggler on one line. That leaves only brand+toggler on row 1,
     so justify-content: space-between pushes the toggler to the far right instead of
     centering it -- the toggler-centering technique depends on all 3 top-level children
     staying on a single row. Forcing nowrap here keeps them on one row regardless of
     viewport width; .navbar-brand-slot's own white-space: normal still lets its text wrap
     internally within its fixed-width box instead.
  */
  flex-wrap: nowrap;
}

.dcp-shell-main {
  flex: 1 0 auto;
  /* padding: 1rem 1.25rem 0; */
  padding: 0.25rem 0.25rem 0;
}

.dcp-analysis-heading {
  margin: 0 auto 0.75rem;
  max-width: 1680px;
}

.dcp-analysis-heading h1,
.dcp-page-card h1 {
  margin-bottom: 0.25rem;
  color: var(--dcp-west-blue);
  font-size: 1.6rem;
  font-weight: 700;
}

.dcp-dash-iframe {
  display: block;
  width: 100%;
  background: #fff;
}

body.dcp-analysis-page {
  height: 100vh;
  overflow: hidden;
}

.dcp-analysis-page .dcp-shell-main {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.dcp-analysis-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.dcp-analysis-page .dcp-dash-iframe {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}

.dcp-page-card {
  max-width: 920px;
  margin: 1.5rem auto;
  padding: 1.5rem;
  border: 1px solid var(--dcp-shell-border);
  border-radius: 0.5rem;
  background: #fff;
  box-shadow: 0 0.25rem 0.75rem rgba(38, 56, 85, 0.08);
}

.dcp-footer {
  flex-shrink: 0;
  margin-top: 1.5rem;
  padding: 1rem;
  border-top: 1px solid var(--dcp-shell-border);
  background: #fff;
}

.dcp-analysis-page .dcp-footer {
  margin-top: 0;
}

@media (min-width: 1200px) {
  .main-navbar .navbar-center {
    position: absolute;
    left: 50%;
    width: max-content;
    transform: translateX(-50%);
    flex: 0 0 auto;
    padding: 0;
    background-color: transparent;
  }

  .main-navbar .navbar-nav-center {
    align-items: center;
  }
}

/* DCP Dash dashboard styles (formerly styles.css). */
:root {
  --dcp-west-blue: #3f50a0;
  --dcp-west-light-blue: #2fa4e7;
  --dcp-west-green: #56803d;
  --dcp-page-bg: #f7f9fc;
  --dcp-card-border: #dbe3ed;
  --dcp-ink: #354052;
  /* App-level gap between stacked/side-by-side cards -- change here rather than per-row
     g-*/gap=* overrides in the layout code. Matches Bootstrap's spacer-1 (0.25rem). */
  --dcp-card-gutter: 0.25rem;
}

/* Applies --dcp-card-gutter as the default row gutter everywhere; a row with its own
   g-*/gx-*/gy-* class still wins since those set the same --bs-gutter-x/-y vars inline. */
.row {
  --bs-gutter-x: var(--dcp-card-gutter);
  --bs-gutter-y: var(--dcp-card-gutter);
}

.dcp-card-gap {
  gap: var(--dcp-card-gutter) !important;
}

html,
body {
  min-height: 100%;
  margin: 0;
  color: var(--dcp-ink);
  background: var(--dcp-page-bg);
  font-family: var(--bs-font-sans-serif, Arial, sans-serif);
}

.dcp-dash-container {
  /* max-width: 1920px; */
  max-width: 100vw;
  margin: 0 0;
}

.dcp-control-card,
.dcp-graph-card,
.dcp-summary-card {
  overflow: hidden;
  border: 1px solid var(--dcp-card-border);
  border-radius: 0.5rem;
  box-shadow: 0 0.2rem 0.75rem rgba(38, 56, 85, 0.09);
}

.dcp-card-header {
  border-bottom: 1px solid var(--dcp-card-border);
  color: var(--dcp-west-blue);
  background: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
}

.dcp-card-header.d-flex.justify-content-between > *:first-child {
  flex: 1;
  text-align: center;
}

.dcp-collapse-toggle {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}

.dcp-collapse-toggle:hover,
.dcp-collapse-toggle:focus {
  color: var(--dcp-west-light-blue);
  text-decoration: none;
}

.dcp-collapse-toggle-icon {
  font-size: 1.15rem;
  line-height: 1;
}

.dcp-control-intro {
  color: #5e6d81;
  font-size: 0.9rem;
  line-height: 1.45;
}

.dcp-control-label {
  display: block;
  margin: 1.15rem 0 0.45rem;
  color: var(--dcp-west-blue);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dcp-control-label:first-of-type {
  margin-top: 0;
}

.dcp-control-card .Select-control,
.dcp-control-card .DateInput_input {
  border-color: #aebed1 !important;
  border-radius: 0.375rem;
}

.dcp-control-card .Select-control:hover,
.dcp-control-card .DateInput_input:focus {
  border-color: var(--dcp-west-light-blue) !important;
}

.dcp-control-card .SingleDatePicker,
.dcp-control-card .SingleDatePickerInput,
.dcp-control-card .DateInput,
.dcp-control-card .DateInput_input {
  width: 100%;
}

/* The date picker's own calendar popup sits in the same card as the dash-leaflet map below it
   (basin_selector_map()), and Leaflet's zoom/fullscreen/layers controls have a default z-index of
   1000 -- higher than `.dash-datepicker-content`'s own default of 500 (this Dash version's native
   date picker, not the old react-dates `SingleDatePicker_picker` targeted here previously -- that
   selector never matched anything and had zero effect, confirmed by decompiling the actual shipped
   `dash_core_components.js`/`async-datepicker.js`, which use `dash-datepicker-*` class names) --
   so the calendar rendered underneath those map controls instead of over them. Same "always on
   top" z-index this app already uses for tooltips/popovers (see .popover above). */
.dash-datepicker-content {
  z-index: 20010 !important;
}

.dcp-map-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 0.9rem;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  align-items: center;
}

.dcp-map-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.dcp-map-legend-swatch {
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  border: 3px solid;
  border-radius: 0.15rem;
  background: #fff;
}

.dcp-map-legend-contributing {
  border-color: #5f5f5f;
  background: #737373;
  opacity: 0.25;
}

.dcp-dashboard-tabs > .nav-tabs {
  gap: 0.3rem;
  border-bottom: 2px solid var(--dcp-west-blue);
}

.dcp-dashboard-tabs > .nav-tabs .nav-link {
  border: 1px solid transparent;
  border-radius: 0.4rem 0.4rem 0 0;
  color: #52627a;
  font-weight: 600;
}

.dcp-dashboard-tabs > .nav-tabs .nav-link:hover {
  border-color: #dbe3ed;
  color: var(--dcp-west-blue);
}

.dcp-dashboard-tabs > .nav-tabs .nav-link.active {
  border-color: var(--dcp-west-blue) var(--dcp-west-blue) #fff;
  color: var(--dcp-west-blue);
  background: #fff;
}

.dcp-dashboard-tabs > .tab-content {
  padding-top: 1rem;
}

.dcp-flash-drought-tab-label {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12rem;
  padding: 0;
  line-height: 1.1;
  text-align: center;
}

.dcp-flash-tab-status-slot {
  display: block;
  line-height: 1;
}

.dcp-flash-tab-status-slot:empty {
  display: none;
}

.dcp-flash-tab-status-readout {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.3rem;
  line-height: 1;
  color: var(--dcp-west-blue);
  font-size: 0.85rem;
  font-weight: 700;
}

.dcp-flash-tab-status-dot {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  flex: 0 0 0.8rem;
  border-radius: 50%;
}

/* Compact Normal/Watch/Advisory/Warning scale under each status card's dot+label readout
   (`drought_status_badge()` in dashboard.py) -- the active tier's dot is enlarged and ringed so
   the card conveys where its status sits on the full scale without a separate legend. */
.dcp-status-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.dcp-status-scale-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.dcp-status-scale-dot {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  opacity: 0.35;
}

.dcp-status-scale-dot-active {
  width: 0.65rem;
  height: 0.65rem;
  opacity: 1;
  box-shadow: 0 0 0 2px rgba(38, 56, 85, 0.35);
}

.dcp-drought-category-placeholder {
  display: flex;
  min-height: 170px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.dcp-drought-category-status {
  margin-top: 0.35rem;
  color: var(--dcp-west-blue);
  font-size: 1rem;
  font-weight: 700;
}

.dcp-tab-content {
  padding-bottom: 0.25rem;
}

.dcp-graph-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 330px;
  background: #fff;
}

.dcp-drought-tab .dcp-graph-body {
  min-height: 400px;
}

.dcp-forecast-boxplot-card .dcp-graph-body {
  min-height: 450px;
}

.dcp-flash-drought-body {
  display: flex;
  align-items: center;
  min-height: 400px;
  padding: 0.75rem;
  background: #fff;
}

.dcp-flash-status-body {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  min-height: 400px;
  padding: 0.75rem;
  background: #fff;
}

.dcp-smvi-dashboard {
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
  text-align: center;
}

.dcp-smvi-gauge-stack {
  display: flex;
  width: 100%;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
}

.dcp-smvi-dashboard .dash-daq,
.dcp-smvi-dashboard .daq-gauge {
  max-width: 100%;
  min-width: 0;
}

.dcp-flash-status-slot {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dcp-smvi-status-light {
  display: flex;
  width: 100%;
  min-height: 2.8rem;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 1px solid #c8d2e1;
  border-radius: 0.35rem;
  background: #f8fafc;
  box-shadow: 0 0.08rem 0.2rem rgba(38, 56, 85, 0.08);
}

.dcp-smvi-status-text {
  color: var(--dcp-west-blue);
  font-size: 0.9rem;
  font-weight: 700;
}

.dcp-flash-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  color: var(--dcp-west-blue);
  font-weight: 700;
  text-decoration: none;
}

.dcp-flash-toggle:hover,
.dcp-flash-toggle:focus {
  color: var(--dcp-west-blue);
  text-decoration: none;
}

.dcp-flash-details-column {
  display: flex;
  min-width: 0;
}

.dcp-flash-details-collapse {
  width: 100%;
  min-width: 0;
}

.dcp-flash-view-options {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  color: var(--dcp-west-blue);
  font-weight: 700;
}

.dcp-flash-view-options label {
  margin-bottom: 0;
}

/* Gauge reserves space for its optional built-in label. Collapse that unused
   space so the purpose labels below the dials stay visually attached. */
.dcp-smvi-gauge {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-bottom: -5.25rem;
}

/* The duration gauge has a custom positive-value readout, so retain more of
   the component's native vertical footprint before placing its labels. */
.dcp-smvi-duration-gauge {
  margin-bottom: -2.6rem;
}

/* Leave the Days in Current gauge unchanged; its custom readout is already
   spaced correctly. The two percentile labels need a little more separation
   from DAQ's large numeric readout. */
.dcp-smvi-gauge:not(.dcp-smvi-duration-gauge) {
  margin-bottom: -4.65rem;
}

.dcp-smvi-dashboard .daq-graduated-bar {
  width: 100%;
  max-width: 210px;
}

.dcp-smvi-direction-label {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  margin-top: -1rem;
  /* color: #52627a; */
  color: var(--dcp-west-blue);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.dcp-smvi-direction-row {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1fr);
  align-items: center;
  gap: 0.2rem;
}

.dcp-smvi-direction-row > :first-child {
  text-align: right;
}

.dcp-smvi-direction-row > :last-child {
  text-align: left;
}

.dcp-smvi-direction-heading,
.dcp-smvi-direction-unit {
  display: block;
}

.dcp-smvi-duration-readout {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -1.5rem;
  margin-bottom: 0.2rem;
  line-height: 1;
}

.dcp-smvi-duration-number {
  font-size: 1.8rem;
  font-weight: 500;
}

.dcp-smvi-duration-unit {
  margin-top: 0.2rem;
  color: #52627a;
  font-size: 0.68rem;
}

.dcp-smvi-wetting-label,
.dcp-smvi-drying-label {
  font-weight: 800;
}

.dcp-smvi-wetting-label {
  color: #148AB8;
}

.dcp-smvi-drying-label {
  color: #730000;
}

.dcp-smvi-direction-zero {
  color: #52627a;
  font-weight: 600;
  line-height: 1;
}

.dcp-smvi-direction-arrow {
  color: #52627a;
  font-size: 1.1em;
  line-height: 1;
}

.dcp-smvi-quantile-label {
  margin-top: 0.5rem;
  color: var(--dcp-west-blue);
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
}

.dcp-smvi-gauge-row {
  /* Column count is driven by `--dcp-gauge-cols`, set by the `gaugeGrid` helper in
     supplement.js via `ResizeObserver` against this row's own measured rendered width -- not a
     CSS `@container` query (tried twice; didn't fire in this app's rendering environment) and
     not a viewport `@media` query (this card sits next to a sidebar column, so its width isn't a
     fixed fraction of the viewport -- a ratio-based guess needed several rounds of retuning and
     still didn't land). `--dcp-gauge-cols` falls back to 2 (this file's `var(...)` default) for
     the brief window before the JS observer runs on first mount. CSS Grid with a fixed column
     count (not flex-wrap, which packs however many items fit a row rather than a fixed count) so
     the split is always even -- 6, or 3-3, or 2-2-2, never a mixed "5 fit, 1 wraps". */
  display: grid;
  grid-template-columns: repeat(var(--dcp-gauge-cols, 2), minmax(0, 1fr));
  justify-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.dcp-smvi-gauge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 200px;
}

.dcp-smvi-quantile-label-detail {
  display: block;
  font-weight: 600;
}

.dcp-smvi-status-readout {
  display: flex;
  align-items: center;
  width: calc(100% - 0.5rem);
  align-self: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid #c8d2e1;
  border-radius: 0.35rem;
  background: #f8fafc;
  box-shadow: 0 0.08rem 0.2rem rgba(38, 56, 85, 0.08);
  min-width: 0;
  white-space: nowrap;
  color: var(--dcp-west-blue);
  font-size: 1.15rem;
  font-weight: 700;
}

/* daq.Indicator's own markup isn't vertically centered on its dot by default, and the
   larger status text above needs an explicit line-height so both sit on the same
   baseline instead of the dot appearing to float above/below the text. */
.dcp-smvi-status-readout > div:first-child {
  display: flex;
  align-items: center;
  margin: 0;
}

.dcp-smvi-status-readout span {
  line-height: 24px;
}

.dcp-smvi-detail {
  color: #5e6d81;
  font-size: 0.72rem;
}

.dcp-flash-status-detail {
  color: #5e6d81;
  font-size: 0.78rem;
  line-height: 1.35;
  text-align: center;
}

.dcp-flash-status-detail strong {
  color: var(--dcp-west-blue);
}

@media (max-width: 767.98px) {
  .dcp-smvi-gauge-stack {
    flex-direction: column;
  }
}

.dcp-flash-drought-visual {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  text-align: center;
}

.dcp-flash-status {
  margin-bottom: 0.75rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid #f0c36c;
  border-radius: 0.35rem;
  color: #76520b;
  background: #fff8df;
  font-size: 0.8rem;
  font-weight: 700;
}

.dcp-flash-status-met {
  border-color: #c62828;
  color: #8b1a1a;
  background: #ffebee;
}

.dcp-flash-conditions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  flex: 1 1 auto;
  gap: 0.6rem;
  align-items: end;
}

.dcp-flash-condition {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.dcp-drying-ring {
  display: grid;
  width: min(8.5rem, 100%);
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(
    var(--drying-color) var(--drying-progress),
    #e8edf3 var(--drying-progress) 100%
  );
}

.dcp-drying-ring-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  background: #fff;
}

.dcp-ring-value {
  color: var(--dcp-west-blue);
  font-size: clamp(1.25rem, 3vw, 1.9rem);
  font-weight: 700;
  line-height: 1;
}

.dcp-ring-unit,
.dcp-flash-detail,
.dcp-flash-footnote {
  color: #5e6d81;
  font-size: 0.75rem;
}

.dcp-flash-label {
  margin-top: 0.45rem;
  color: var(--dcp-west-blue);
  font-size: 0.8rem;
  font-weight: 700;
}

.dcp-flash-detail-met {
  color: #c62828;
  font-weight: 700;
}

.dcp-soil-column {
  position: relative;
  width: min(4.2rem, 68%);
  height: 9rem;
  border: 2px solid #926b45;
  border-radius: 0.3rem 0.3rem 0.9rem 0.9rem;
  background: linear-gradient(
    to bottom,
    #56803d 0 40%,
    #f6c343 40% 65%,
    #f57c00 65% 80%,
    #c62828 80% 100%
  );
  box-shadow: inset 0 0 0 0.25rem rgba(255, 255, 255, 0.18);
}

.dcp-soil-threshold {
  position: absolute;
  top: 80%;
  right: -0.4rem;
  left: -0.4rem;
  border-top: 2px dashed #8b1a1a;
}

.dcp-soil-marker {
  position: absolute;
  right: -0.65rem;
  left: -0.65rem;
  z-index: 1;
  border-top: 4px solid var(--soil-marker-color);
  box-shadow: 0 0 0 1px #fff;
}

.dcp-soil-p100,
.dcp-soil-p20,
.dcp-soil-p0 {
  position: absolute;
  left: calc(100% + 0.3rem);
  color: #5e6d81;
  font-size: 0.62rem;
}

.dcp-soil-p100 {
  top: -0.55rem;
}

.dcp-soil-p20 {
  top: calc(80% - 0.45rem);
  color: #8b1a1a;
  font-weight: 700;
}

.dcp-soil-p0 {
  bottom: -0.55rem;
}

.dcp-flash-footnote {
  display: block;
  margin-top: 0.75rem;
}

.dcp-flash-pathway {
  position: relative;
  height: 6.5rem;
  margin: 1rem 0 0.4rem;
}

.dcp-flash-path-track,
.dcp-flash-path-fill {
  position: absolute;
  top: 1.7rem;
  left: 0.4rem;
  height: 0.8rem;
  border-radius: 999px;
}

.dcp-flash-path-track {
  right: 0.4rem;
  background: linear-gradient(
    to right,
    #56803d 0 25%,
    #f6c343 25% 50%,
    #f57c00 50% 80%,
    #c62828 80% 100%
  );
}

.dcp-flash-path-fill {
  right: 0.4rem;
  background: #e5eaf0;
}

.dcp-flash-path-marker {
  position: absolute;
  top: 1.2rem;
  width: 1.8rem;
  height: 1.8rem;
  border: 3px solid #354052;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0.08rem 0.25rem rgba(38, 56, 85, 0.28);
  transform: translateX(-50%);
}

.dcp-flash-path-drying,
.dcp-flash-path-p20,
.dcp-flash-path-onset {
  position: absolute;
  top: 3.1rem;
  color: #52627a;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.2;
}

.dcp-flash-path-drying {
  left: 50%;
  width: 0;
  padding-top: 0.8rem;
  border-left: 2px solid #f6c343;
  transform: translateX(-50%);
  white-space: nowrap;
}

.dcp-flash-path-p20 {
  right: 0.4rem;
  padding-top: 0.8rem;
  border-right: 2px solid #c62828;
  text-align: right;
}

.dcp-flash-path-onset {
  top: 0.1rem;
  right: 0.4rem;
  color: #8b1a1a;
}

.dcp-flash-readout {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 0.75rem;
  color: var(--dcp-west-blue);
  font-size: 0.78rem;
  font-weight: 700;
}

@media (max-width: 360px) {
  .dcp-flash-conditions {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .dcp-flash-drought-body {
    min-height: 560px;
  }
}

/* Keep the storage range control compact so the graph receives the remaining
   height of its card rather than splitting the card body evenly. */
.dcp-storage-timeseries-slider {
  flex: 0 0 auto;
}

.dcp-storage-timeseries-graph {
  flex: 1 1 auto;
  min-height: 330px;
}


/* Shared by both Flash Drought's and Meteorological Drought's context-chart plot cards. Both
   sit as the last item in a dbc.Stack (control card(s) above, plot card below) rather than as a
   dbc.Row column with h-100 stretched to a sibling's height -- Bootstrap's Card is
   `display:flex;flex-direction:column` by default, but with no explicit height on the Card
   itself, its dcc.Graph (`apply_dashboard_style()`'s `autosize=True` + the graph's own
   `responsive: True` config both measure the *actual rendered container box* to size the plot)
   has nothing stable to measure against -- a real, confirmed bug on Meteorological Drought's
   card when it was first split out of its combined card (2026-08-30): the chart rendered at the
   wrong height, sometimes cut off, and inconsistently between loads (a classic Plotly autosize
   race when the container's own height isn't fixed at first paint). Giving the Card itself a
   fixed height, instead of relying on Bootstrap's Row/Col stretch mechanism, gives dcc.Graph's
   `height: 100%` (in `dashboard.py`) a deterministic box to resolve against from the very first
   render -- Bootstrap's default `.card-body { flex: 1 1 auto }` then fills the remainder below
   the header automatically, no extra rule needed for that part. Applied to Flash Drought's own
   plot card proactively when it was split the same way, to avoid reintroducing this exact bug. */
.dcp-drought-context-plot-card {
  height: 460px;
}

.dcp-drought-context-plot-card > .card-body {
  /* Flex children default to min-height: auto, which can stop them shrinking to fit a fixed-
     height parent (the classic flexbox "min-content overflow" gotcha) -- without this, the
     graph's content could still push the card taller than the 460px above, or overflow it. */
  min-height: 0;
}

/* Outlook-Timeseries "Value of Interest" slider (`knn_outlook_card()` in dashboard.py). Uses the
   native `allow_direct_input` prop for the type-a-value box next to the slider -- an
   `always_visible` tooltip was tried first (2026-09-06) and dropped the same day, since it floated
   permanently below the handle and overlapped the readout text beneath it.
   `allow_direct_input`'s box initially appeared missing too, but that was a real width issue, not
   a broken/missing feature: confirmed with an isolated test app that this Dash version's slider
   hides that box below roughly 300-350px of container width (an internal responsive behavior, not
   CSS clipping) -- which the card easily was as a one-third-width column sharing a row with
   Series/Lookahead. Fixed at the layout level instead of here: `knn_outlook_card()` now gives this
   card its own full-width row. `.dcp-graph-card`'s own `overflow: hidden` (above) is still why the
   slider's edge marks need inward-anchored label text (done in callbacks.py's
   `update_knn_outlook_threshold_range()`) rather than just more side padding -- padding alone
   would only shrink the usable track, not stop a center-anchored label from spilling past the
   card edge and getting clipped. */
.dcp-outlook-threshold-slider {
  /* Horizontal margin still gives the edge marks' anchored labels (callbacks.py) room within
     `.dcp-graph-card`'s `overflow: hidden`; vertical margin is kept small (2026-09-06, Ben's
     explicit call) since this card's whole point is to be a short, full-width strip, not another
     tall graph-sized card. */
  margin: 0.25rem 0.5rem;
}

.dcp-ecdf-color-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  flex: 0 0 auto;
  gap: 0.25rem;
}

.dcp-ecdf-color-options label {
  margin-bottom: 0;
  margin-right: 0.8rem;
}

.dcp-response-variable-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
}

.dcp-response-variable-options label {
  margin-bottom: 0;
  margin-right: 0.8rem;
}

.dcp-graph-body.dcp-ecdf-graph {
  flex: 1 1 auto;
  min-height: 460px;
}

.dcp-graph-body > div {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.dcp-graph,
.dcp-graph .dash-graph,
.dcp-graph .dash-graph > div {
  width: 100%;
  height: 100%;
}

.dcp-graph {
  margin: auto;
  min-width: 0;
}

.dcp-summary-card .card-body {
  min-height: 360px;
  padding: 0;
}

.summary-panel {
  height: 100%;
  min-height: 360px;
  overflow-y: auto;
}

.summary-row {
  padding: 0.75rem 1rem;
  color: var(--dcp-ink);
  line-height: 1.45;
}

.summary-row:nth-child(odd) {
  background: rgba(63, 80, 160, 0.055);
}

.summary-heading {
  color: var(--dcp-west-blue);
  font-weight: 700;
}

@media (min-width: 992px) {
  .dcp-current-figures-row > [class*="col-"] {
    display: flex;
  }

  .dcp-current-figures-row .dcp-control-card,
  .dcp-current-figures-row .dcp-graph-card {
    width: 100%;
  }

}

@media (max-width: 991.98px) {
  .dcp-control-card {
    height: auto !important;
  }

  .dcp-graph-body {
    min-height: 400px;
  }
}

/* Template styles retained from temp/src/website/assets/supplement.css. */
/* Consider deleting most of this file 
for you app. Leaving for some useful definitions */
:root,
[data-bs-theme=light] {
  /* WEST COLORS
    #3F50A0; (63, 80, 160) darkblue
    #2fa4e7; (47, 164, 231) light blue
    #56803D; (86, 128, 61) green
  */
  /* --bs-primary:   #2fa4e7; */
  /* --bs-heading-color: #2fa4e7; */
  --bs-primary:   #3F50A0;
  --bs-heading-color: #3F50A0;
  --bs-primary-rgb: 47, 164, 231;
  --bs-link-color: #3F50A0;
  --bs-link-hover-color: #2fa4e7;
  --bs-link-color-rgb: 63, 80, 160;
  --bs-link-hover-color-rgb: 47, 164, 231;
  --bs-tertiary-color: rgba(86, 128, 61, 0.3);
  --bs-tertiary-color-rgb: rgba(86, 128, 61, 1);
  --bs-sliders-color-rgb: 86, 128, 61;

}

.bg-primary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}

.bg-secondary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important;
}

.col-md-9-cust {
  flex: 0 0 auto;
  width: 75%;
  /* height: flex;   */
  overflow: visible;
  margin-left: 12.5%;
}

.navbar-collapse {
  flex-basis: 100%;
  flex-grow: 1;
  align-items: center;
  padding: 1%;
  background-color: white;
}

.navbar {
  border-bottom: 2px solid var(--bs-primary);
  --bs-navbar-padding-y: 0rem;
  min-height: 7vh;
}

.nav-link.active {
  /* border-bottom: 3px solid var(--bs-primary); */
  /* border-bottom: 3px solid rgba(var(--bs-link-hover-color-rgb), 1); */
  /* border-bottom: 3px solid var(--bs-success);
  border-top: 3px solid var(--bs-success); */
  border-bottom: 2px solid var(--bs-tertiary-color-rgb);
  border-top: 2px solid var(--bs-tertiary-color-rgb);
  height: 100%;
  width: auto;
  position: relative;
  font-weight: 600;
}

/* Keep desktop navigation centered between the application name and logo. */
.main-navbar {
  position: relative;
  justify-content: flex-start;
}

.west-wordmark {
  color: #3F50A0;
  font-family: Arial, sans-serif;
  font-size: clamp(1.4rem, 2vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
}

@media (min-width: 1200px) {
  .main-navbar .navbar-center {
    position: absolute;
    left: 50%;
    width: max-content;
    transform: translateX(-50%);
    flex: 0 0 auto;
    padding: 0;
    background-color: transparent;
  }

  .main-navbar .navbar-nav-center {
    align-items: center;
  }

}

.figure-logo {
  margin-bottom: 0.01rem;
  line-height: 1;
  width: auto;
  height: 8vh;
}

.figure-logo-container {
  display: flex;
  align-items: center;
  /* Below the navbar-expand-xl breakpoint, Bootstrap's own .navbar CSS defaults to
     flex-wrap: wrap (nowrap only applies at/above the expand breakpoint), which lets the
     logo slot wrap onto its own row on narrow/tall screens whenever it doesn't fit
     alongside the brand and toggler on one line. That leaves only brand+toggler on row 1,
     so justify-content: space-between pushes the toggler to the far right instead of
     centering it -- the toggler-centering technique depends on all 3 top-level children
     staying on a single row. Forcing nowrap here keeps them on one row regardless of
     viewport width; .navbar-brand-slot's own white-space: normal still lets its text wrap
     internally within its fixed-width box instead.
  */
  flex-wrap: nowrap;
}

.card-mod { 
align-items: center;
margin: 0.1%;
overflow: visible;
}

/* remove x-scrollbar form main page */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}


.main-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative; /* creates positioning context */
  /* justify-content: space-between;
  overflow-y: auto;
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
  width: 100vw;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-right: auto;
  margin-left: auto; */
}

.sidebar {
  position: fixed;
  top: 7%;
  bottom: 10%;
  width: inherit;
  overflow-y: auto;
  background: rgba(var(--bs-light-rgb), 1);
  z-index: 3;
  height: 100vh;
}

@media (max-width: 768px) {
  .sidebar {
    position: sticky;
    height: auto;
    width: 100%;
  }

}

.content-section {
  height: auto;
  min-height: 0;
  z-index: 2;
}

#extended-content {
  flex: 1
}

.container-fluid-cust {
  height: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
}

/* Cancel Bootstrap's 1rem main.py-3 top padding on the About layout. */
.about-page {
  margin-top: -1rem;
}

.text-disclaimer {
  color: var(--bs-danger);
}

.dash-accordion-header {
  display: flex;
  /* max-height: 5px; */
  /* justify-content: center; */
  /* text-align: center; */
}

.dash-accordion-text {
  display: flex;
  max-height: 5px;
  color: var(--bs-primary);
  text-align: center;
}

.iframe-cust {
  width: 100%;
  height: calc(100vh - 170px);
  border: none;
  margin: 0;
  padding: 0;
  /* overflow-y: visible; */
  overflow-x: hidden;
  overflow-y: hidden;
  /* position: static; */
}

/* Related to dropdown analysis navbar */

/* Some general formatting of dropdown-menu */
.dropdown-menu {
  background-color: rgba(255, 255, 255, 0.9);
  text-align: center;
}
/* only apply if viewer width > Xpx */
@media (min-width: 1200px) {
  .dropdown-menu {
    left: 50%;
    transform: translateX(-50%);
  }
}

/* Enable dropdown on hover */
.nav-item.dropdown:hover .dropdown-menu {
  display: block;
  margin-top: 0; /* Optional: prevent a gap between the button and the dropdown */
}

/* Hide the dropdown menu by default */
.nav-item.dropdown .dropdown-menu {
  display: none;
}

/* Show the dropdown menu when the parent li has the 'active' class */
.nav-item.dropdown.active .dropdown-menu {
  display: block;
}
/* ################# */
.nav-link.dropdown-toggle::after {
  display: none;
}


.dropdown-item {
  display: block;
  width: 100%;
  padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
  clear: both;
  font-weight: 400;
  color: var(--bs-dropdown-link-color);
  text-align: inherit;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  border-radius: var(--bs-dropdown-item-border-radius, 0);
}
.dropdown-item:hover, .dropdown-item:focus {
  /* color: var(--bs-dropdown-link-hover-color); */
  color: var(--bs-dropdown-link-color);
  /* background-color: var(--bs-dropdown-link-hover-bg); */
  /* background-color: rgba(168, 226, 242, 0.5); */
  background-color: rgba(var(--bs-link-hover-color-rgb), 0.3);
  /* background-color: var(--bs-tertiary-color); */
}
.dropdown-item.active, .dropdown-item:active {
  color: var(--bs-dropdown-link-active-color);
  text-decoration: none;
  /* background-color: var(--bs-tertiary-color-rgb); */
  background-color: rgba(var(--bs-link-hover-color-rgb));
}
.dropdown-item.disabled, .dropdown-item:disabled {
  color: var(--bs-dropdown-link-disabled-color);
  pointer-events: none;
  background-color: transparent;
  /* display: none; */
  /* visibility: hidden; */
}

/* Custom format section that is currently selected in about page*/
section:target {
  /* outline: 2px solid blue; */
  outline: 4px solid var(--bs-tertiary-color-rgb);
  /* background-color: #f0f0f0; */
  background-color: var(--bs-white);
}


.main-content {
  flex: 1; /* Ensures content takes up remaining space */
  overflow: auto; /* Allows scrolling only within the main content */
}


body.overflow-auto {
  overflow-y: auto;
}

body.overflow-hidden {
  overflow-y: hidden;
}

/* format column displaying 'about' info */
.about-col {
  /* Equivalent to col-10 (10 out of 12 columns) */
  /* width: 83.33%; */
  /* Equivalent to col-11 (10 out of 12 columns) */
  /* width: 91.666667%; */
  /* width: 66.666667%; */
  width: 83.333333%;
  margin-left: auto;
  margin-right:  auto; /* auto */
  padding-left: 0px;
  padding-right: 0px;
  border-left: 1px solid var(--bs-primary);
  border-right: 1px solid var(--bs-primary);
}

.about-card {
  --bs-card-spacer-y: 1rem;
  --bs-card-spacer-x: 1rem;
  --bs-card-title-spacer-y: 0.5rem;
  --bs-card-title-color: ;
  --bs-card-subtitle-color: ;
  --bs-card-border-width: var(--bs-border-width);
  /* --bs-card-border-color: var(--bs-border-color-translucent); */
  --bs-card-border-radius: var(--bs-border-radius);
  --bs-card-box-shadow: ;
  --bs-card-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
  --bs-card-cap-padding-y: 0.5rem;
  --bs-card-cap-padding-x: 1rem;
  --bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0.03);
  --bs-card-cap-color: ;
  --bs-card-height: ;
  --bs-card-color: ;
  --bs-card-bg: var(--bs-body-bg);
  --bs-card-img-overlay-padding: 1rem;
  --bs-card-group-margin: 0.75rem;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* height: var(--bs-card-height); */
  color: var(--bs-body-color);
  word-wrap: break-word;
  background-color: var(--bs-card-bg);
  background-clip: border-box;
  border: var(--bs-card-border-width) solid var(--bs-primary);
  border-radius: var(--bs-card-border-radius);
  /* BChoat adding to card class below here */
  /* This section for only card w/o column */
  /* width: 83.333333%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2rem;
  margin-bottom: 2rem; */
  /* This sectino for card within column */
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
  padding: 1rem
}
/* format section headers in about */

.about-section {
  text-align: center;
}


/* ////////////////////////////////////////////////// */
/* dash and dash-leaflet updates */
/* ////////////////////////////////////////// */
/* Dash-Leaflet -- suppress the browser's default focus outline on clicked          */
/* GeoJSON/vector layers (Leaflet gives every interactive path a tabindex for       */
/* keyboard a11y, so a plain mouse click also focuses it, which briefly draws the   */
/* browser's default focus rectangle around the shape -- selection highlighting on  */
/* the basin/area layers is handled entirely via `hideout`/style in mapping.py and  */
/* supplement.js, so this outline is redundant, not the actual selection feedback). */
/* ////////////////////////////////////////// */
.leaflet-interactive:focus {
  outline: none;
}

/* ////////////////////////////////////////// */
/* Dash + Dash-Leaflet - Bottom Right Control */
/* ////////////////////////////////////////// */

/* Style the control button itself */
.leaflet-bottom.leaflet-right .leaflet-control-layers > .leaflet-control-layers-toggle {
  background-image: none !important;
  width: 15vw;                       /* Responsive width */
  min-width: 150px;                 /* Minimum width for usability */
  height: auto;
  
  position: relative;

  display: flex;
  justify-content: center;
  align-items: center;

  /* border: 4px solid hsl(119, 93%, 40%); */
  border: 4px solid var(--bs-tertiary-color-rgb);
  border-radius: 50px;

  margin: 0;
  padding: 0;

  background-color: rgba(var(--bs-success-rgb), 0.1);
  box-shadow: 24px 12px 12px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

/* Replace icon with styled label */
.leaflet-bottom.leaflet-right .leaflet-control-layers > .leaflet-control-layers-toggle::before {
  content: 'Available Datasets';
  color: var(--bs-primary);
  font-size: 1rem;
  font-weight: 600;
  
  padding: 4px 7px;
  /* border-radius: 50px; */
  
  display: inline-block;
  text-align: center;
  width: 100%;
}

/* Style the expanded control panel */
.leaflet-bottom.leaflet-right .leaflet-control-layers.leaflet-control-layers-expanded {
  padding: 0px;
  background-color: rgba(255, 255, 255, 0.9);
  /* border-radius: 4px; */
  border-radius: 20px 20px 4px 4px;
  /* width: flex;
  height: flex; */
  /* Hover effects */
  /* transition: all 0.3s ease; */
}

/* Style the expanded control panel */
.leaflet-bottom.leaflet-right .leaflet-control-layers {
  padding: 0px;
  background-color: rgba(255, 255, 255, 0.9);
  /* border-radius: 4px; */
  border-radius: 40px;
  /* width: flex;
  height: flex; */
  /* Hover effects */
  /* transition: all 0.3s ease; */
}

/* Dash replacement for bottom-right Available Datasets control */
.dataset-selector-wrap {
  width: 15vw;
  min-width: 220px;
  max-width: 320px;
}

.dataset-selector-card {
  overflow: hidden;
  border: 4px solid var(--bs-tertiary-color-rgb);
  border-radius: 40px;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 24px 12px 12px rgba(0, 0, 0, 0.2);
  transition: border-radius 0.15s ease;
}

.dataset-selector-wrap:hover .dataset-selector-card,
.dataset-selector-wrap:focus-within .dataset-selector-card {
  border-radius: 20px 20px 4px 4px;
}

.dataset-selector-header {
  padding: 0;
  border-bottom: none;
  background-color: rgba(var(--bs-success-rgb), 0.1);
}

.dataset-selector-toggle {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 4px 10px;
  border: none;
  background: transparent;
  color: var(--bs-primary);
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  cursor: default;
}

.dataset-selector-title {
  display: block;
  width: 100%;
  text-align: center;
}

.dataset-selector-chevron {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  min-width: 1rem;
  text-align: right;
  font-size: 0.95rem;
  transition: transform 0.15s ease;
}

.dataset-selector-wrap:hover .dataset-selector-chevron,
.dataset-selector-wrap:focus-within .dataset-selector-chevron {
  transform: translateY(-50%) rotate(90deg);
}

.dataset-selector-body {
  padding: 0.55rem 0.85rem 0.7rem;
  display: none;
}

.dataset-selector-wrap:hover .dataset-selector-body,
.dataset-selector-wrap:focus-within .dataset-selector-body {
  display: block;
}

.dataset-selector-options .form-check {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-bottom: 0.45rem;
}

.dataset-selector-options .form-check:last-child {
  margin-bottom: 0;
}

.selected-highlight-toggle {
  margin-top: 0.65rem;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(var(--bs-primary-rgb), 0.15);
}

.selected-highlight-toggle .form-check {
  margin-bottom: 0;
}

.selected-highlight-input {
  border-color: var(--bs-tertiary-color-rgb);
}

.selected-highlight-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.selected-highlight-label {
  color: var(--bs-primary);
  font-size: 0.9rem;
}

.dataset-selector-input {
  margin-top: 0.2rem;
  border-color: var(--bs-tertiary-color-rgb);
}

.dataset-selector-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.dataset-selector-label {
  color: var(--bs-primary);
  font-size: 0.92rem;
  line-height: 1.25;
  cursor: pointer;
}

.dash-slider-root {
  --Dash-Fill-Interactive-Strong: rgb(var(--bs-sliders-color-rgb));
  --Dash-Fill-Disabled: rgba(var(--bs-sliders-color-rgb), 0.2);
}

@media (max-width: 992px) {
  .dataset-selector-wrap {
    width: min(72vw, 320px);
    min-width: 0;
  }
}

/* Make sure scrolling is smooth */
html, body {
  scroll-behavior: auto;  /* this does not seem to get picked up for some reason */
  scroll-padding-top: 100px; /* make header present when landing */
  
}

/* ///////////////////////////////////// */
/* modify tooltips styling */
/* increase pop-up/over window for dbc.tooltip */
.tooltip-inner {
  background-color: rgba(var(--bs-light-rgb), 1);
  color: black;
  border: 2px solid var(--bs-tertiary-color-rgb);
  max-width:30vw !important; /* Default is 200px */
  white-space: normal;
  text-align: left;
  font-size: 1rem;
}

.tooltip-inner ul,
.tooltip-inner ol {
  padding-left: 1.2em;
  margin: 0;
  text-align: left;
  list-style-position: outside;
}

.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
  border-top-color: var(--bs-success);
}

.bs-tooltip-end .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
  border-right-color: var(--bs-success);
}

.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
  border-bottom-color: var(--bs-success);
}

.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
  border-left-color: var(--bs-success);
}

/* keeps brief resize when tooltips pop up */
.bs-tooltip-auto,
.bs-tooltip-top,
.bs-tooltip-end,
.bs-tooltip-bottom,
.bs-tooltip-start {
  position: fixed !important;
  z-index: 20010 !important;
}


.img-domain{
  /* max-width: 100%; */
  width: 25vw;
  min-width: 100px;
  height: auto;
  border: 5px solid var(--bs-primary);
}

.img-domain.expandable-hover {
  transition: transform 0.3s ease; /* Smooth transition */
}

.img-domain.expandable-hover:hover {
  transform: scale(2); /* Increase size on hover */
}

/* increase pop-up/over window for dbc.Popover */
.popover {
    max-width: 50vw;
    z-index: 20010 !important;
}

.popover-header {
  font-size: var(--bs-popover-header-font-size);
  /* color: var(--bs-popover-header-color); */
  /* color: var(--bs-primary); */
  /* color: black; */
  color: var(--bs-tertiary-color-rgb);
  font-weight: bold;
}

.method-info-button {
  /* border: 2px solid  rgba(var(--bs-success-rgb), 0.5); */
  border: 2px solid  var(--bs-tertiary-color-rgb);
  border-radius: 50%; /* Circle shape */
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 0;
  margin: 10px;
  position: absolute;
  bottom: 10px;
  right: 10px;
}

/* Card help controls follow the existing circular method-info-button design. */
.dcp-card-header .method-info-button {
  position: static;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  margin: 0 0 0 0.5rem;
  color: var(--dcp-west-green);
  border-color: var(--dcp-west-green);
  background-color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  line-height: 1;
}

.dcp-card-header .method-info-button:hover,
.dcp-card-header .method-info-button:focus {
  color: #fff;
  border-color: var(--dcp-west-green);
  background-color: var(--dcp-west-green);
}

.dcp-ecdf-option-group {
  flex: 0 1 auto;
  min-width: 0;
  border: 1px solid var(--dcp-card-border);
  border-radius: 0.25rem;
  padding: 0.2rem 0.5rem;
}

@media (max-width: 900px) {
  .dcp-ecdf-color-controls {
    flex-wrap: wrap;
  }

  .dcp-ecdf-option-group {
    flex-basis: 100%;
  }
}

.expand-plot-button {
  /* border: 2px solid  rgba(var(--bs-success-rgb), 0.5); */
  border: 2px solid  var(--bs-tertiary-color-rgb);
  border-radius: 50%; /* Circle shape */
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 0;
  margin: 10px;
  position: absolute;
  bottom: 10px;
  right: 50px;
}

/* .arrow-button {
  width: 50px;
  height: 20px;
  padding: 0;
  margin-bottom: 15px;
  border-radius: 6px;
  font-size: 80px;
  font-weight: bold;
  text-align: center;
  line-height: 20px;
  color: rgba(var(--bs-success-rgb), 1);
  border-color: white;
  background-color: white;
} */

.arrow-button {
  /* width: 50px; */
  height: 80%;
  padding: 0;
  margin-bottom: 3vh;
  /* padding-bottom: 15px; */
  border-radius: 6px;
  /* font-size: 80px; */
  /* font-size: 5rem; */
  font-size: clamp(2rem, 6vw, 6rem);
  font-weight: bold;
  text-align: center;
  line-height: 20px;  /* vertically center arrow */
  /* border: 2px solid  rgba(var(--bs-success-rgb), 1); */
  color: rgba(var(--bs-primary), 1);
  border-color: white;
  background-color: white;
  text-shadow:
    -1px -1px 0 var(--bs-tertiary-color-rgb),
     1px -1px 0 var(--bs-tertiary-color-rgb),
    -1px  1px 0 var(--bs-tertiary-color-rgb),
     1px  1px 0 var(--bs-tertiary-color-rgb);
  /* text-shadow:
    -1px -1px 0 rgba(var(--bs-link-hover-color-rgb), 1),
     1px -1px 0 rgba(var(--bs-link-hover-color-rgb), 1),
    -1px  1px 0 rgba(var(--bs-link-hover-color-rgb), 1),
     1px  1px 0 rgba(var(--bs-link-hover-color-rgb), 1); */
}


.arrow-button:hover {
  /* color: rgba(var(--bs-secondary-rgb), 1); */
  /* color: rgba(var(--bs-link-hover-color-rgb), 1); */
  color: rgba(var(--bs-link-color-rgb), 1);
}

.arrow-button:focus {
    /* outline: none;
    box-shadow: none; */
    border: none;
    /* color: inherit; */
}

  /* --bs-link-color-rgb: 63, 80, 160;
  --bs-link-hover-color-rgb: 47, 164, 231; */
/*  */


/* ////////////////////////////// */
/* style for welcome window */
/* ////////////////////////////// */

.modal {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background-color: rgba(0,0,0,0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20000; /* make sure on top */
}
.modal.show {
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.modal-content-welcome {
    background-color: white;
    padding: 2rem;
    border-radius: 10px;
    /* border: 5px solid  var(--bs-tertiary-color-rgb); */
    border: 5px solid  var(--bs-primary);
    text-align: center;
    /* margin-top: 0px; */
    margin: auto;
    width: 90%;
    /* max-height: 97%; */
    overflow: auto;  /* scrolling when content overflows */
    font-size: 1.1rem;
    overflow-y: auto;
    max-height: calc(100vh - 40px); /* Dynamically shrinks to fit short landscape screens */
}

.modal-content-welcome h4 {
    font-size: 1.5rem;
}

.modal-content-welcome h6 {
    font-size: 1.2rem;
}
/* .modal-content-welcome ul {
    text-align: left;
    padding-left: 20px;
    margin-left: 0;
}

.modal-content-welcome li {
    text-align: left;   
} */
.modal-content-plots {
    background-color: white;
    padding: 2rem;
    border-radius: 10px;
    /* border: 5px solid  var(--bs-tertiary-color-rgb); */
    border: 5px solid  var(--bs-primary);
    text-align: center;
    /* margin-top: 0px; */
    margin: auto;
    max-width: 65%;
    max-height: 97%;
    overflow: auto;  /* scrolling when content overflows */
}

.modal.modal-content-plots {
    width: 100vw;
    max-width: none;
    height: 100vh;
    max-height: none;
    padding: 0;
    border: 0;
    background-color: rgba(0,0,0,0.1);
}

.modal.modal-content-plots .modal-dialog {
    width: 65vw;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.modal.modal-content-plots .modal-content {
    border: 5px solid var(--bs-primary);
    border-radius: 10px;
    max-height: 97vh;
    overflow: auto;
}

@media (max-width: 768px) {
  .dash-main-container {
    height: auto !important;
    overflow: visible !important;
  }

  .dash-main-row {
    height: auto !important;
    overflow: visible !important;
  }

  .dash-main-col {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .dash-tabs-col {
    overflow-y: visible !important;
  }

  .dash-map-col {
    overflow-y: visible !important;
  }
}

.modal-content-report {
    background-color: white;
    padding: 2rem;
    border-radius: 10px;
    /* border: 5px solid  var(--bs-tertiary-color-rgb); */
    border: 5px solid  var(--bs-primary);
    text-align: center;
    /* margin-top: 0px; */
    margin: auto;
    max-width: 90%;
    /* max-height: 97%; */
    height: 100%;
    overflow: auto;  /* scrolling when content overflows */
}

.explorer-report-modal .modal-dialog {
    max-width: 100vw !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
}

.explorer-report-modal .modal-content {
    background: transparent;
    border: none;
    border-radius: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.explorer-report-modal-shell {
    display: flex;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    height: 100vh;
    padding: 0 1rem;
    overflow: hidden;
}

.explorer-report-modal-shell-body {
    padding: 0;
}

#explorer-report-window,
#user-job-downloads-window,
#confirm-user-input-window {
    width: 75vw;
    height: 100vh;
    background-color: white;
    border: 5px solid var(--bs-primary);
    border-radius: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.explorer-report-window-header {
    flex: 0 0 auto;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--bs-border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.explorer-report-window-header .modal-title {
    margin-bottom: 0;
}

.explorer-report-window-body {
    flex: 1 1 auto;
    padding: 0.5rem;
    overflow: auto;
}

.explorer-report-window-footer {
    flex: 0 0 auto;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--bs-border-color);
}

.modal-content-confirm-existing {
    background-color: white;
    padding: 2rem;
    border-radius: 10px;
    /* border: 5px solid  var(--bs-tertiary-color-rgb); */
    border: 5px solid  var(--bs-primary);
    text-align: center;
    /* margin-top: 0px; */
    margin: auto;
    /* width: 100%; */
    /* max-width: 100%; */
    max-width: 75%;
    /* max-height: 97%; */
    /* max-height: 85%; */
    /* height: 95%; */
    height: 100%;
    /* height: 85%; */
    overflow: auto;  /* scrolling when content overflows */
    /* position the modal window */
    position: absolute;
    /* top: 10vh; */
    /* left: 3vw; */
    /* right: 3vw; */
    margin: 0;
    transform: none;
}

.dismiss-button {
    margin-top: 1rem;
    border: 2px solid var(--bs-danger);
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-weight: 700
}
/* 
modal
modal-dialog
modal-content
modal-header
modal-title
modal-body
        
modal-footer
dismiss-button btn btn-primary */