/* Global scroll behavior and sticky offsets */
:root {
  --banner-h: 80px; /* adjust if your banner differs */
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--banner-h);
}

body { font-family: sans-serif; padding: 0; margin: 0}

/* Sticky banner */
.top-banner {
  position: sticky;
  top: 0;
  background-color: #0078D4;
  color: white;
  padding: 8px 16px;
  z-index: 1000;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-title { display: flex; align-items: center; flex: 1; }
.logo { height: 40px; margin-right: 12px; }
.banner-title { font-size: 1.2em; font-weight: bold; margin: 0; text-align: left; }
.menu { display: flex; align-items: center; margin-left: auto; }
.menu-items { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
.menu-items li a { color: white; text-decoration: none; font-weight: bold; }

/* Map and legend layout */
.map-wrapper {
  position: relative;
  width: 75%;
  margin: 0 auto;
  padding: 0 20px;
  height: 400px;
}

#map {
  height: 100%;
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  position: relative;
  z-index: 1;
  scroll-margin-top: var(--banner-h);
}

#coords-display, #refresh-timestamp {
  position: absolute;
  z-index: 500;
  background: white;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 4px;
  box-shadow: 0 0 4px rgba(0,0,0,0.2);
}
#coords-display { bottom: 10px; left: 10px; }

#refresh-timestamp { top: 10px; right: 10px; }

#refresh-note {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255,255,255,0.85);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 0.9em;
  color: #333;
  z-index: 1200;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.map-legend {
  background: white;
  padding: 8px 12px;
  font-size: 13px;
  border-radius: 6px;
  box-shadow: 0 0 6px rgba(0,0,0,0.3);
  line-height: 1.4;
}
.map-legend h4 { margin: 0 0 6px; font-size: 14px; font-weight: bold; }

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 15px;
}

#map-legend-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  background: white;
  padding: 8px 12px;
  font-size: 13px;
  border-top: 1px solid #ccc;
  box-shadow: 0 -2px 4px rgba(0,0,0,0.1);
  margin-top: -8px;
}
#map-legend-bar .legend-item { display: flex; align-items: center; gap: 6px; }

/* Content layout */
.content { width: 90%; margin: 0 auto; padding: 16px 0; }
.plot-wrapper { margin: 10px 0; }
.plot-wrapper h2 {
  margin-bottom: 4px;  /* reduce space below the title */
}
.responsive-note { width: 75%; max-width: 100%; margin: 0 auto; text-align: center; font-size: 14px; padding: 8px 0; }
.responsive-note p { margin: 4px 0; }

/* Plotly hover default */
.hoverlayer .hovertext { /* default: let Plotly position hover boxes */ }

/* Accessibility: slider contrast */
.noUi-connect { background: #ADD8E6; }
.individual-plot .hoverlayer .hovertext { transform: translateY(20%) !important; top: auto !important; }

/* Increase size of noUiSlider handles */
.noUi-handle {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50%;
  background: #0078d7;
  border: 2px solid #333;
  cursor: grab;
}

/* Adjust handle position so it stays centered */
.noUi-horizontal .noUi-handle {
  top: -6px;   /* tweak vertical alignment */
}

.noUi-vertical .noUi-handle {
  left: -6px;  /* tweak horizontal alignment */
}

.noUi-target { background: #e6f2fa; }

.slider-wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;  /* exact spacing between slider and button */
}

.js-plotly-plot {
  margin-bottom: 4px;   /* shrink space below slider */
  padding-bottom: 0;    /* remove extra padding if any */
  height: 700px;   /* desktop default */
}

/* Buttons */
.big-button {
  font-size: 16px;
  padding: 6px 12px;
  background-color: #0078D4;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  margin: 2px 5px 0 0;
  text-decoration: none;
}

/* Threshold info styling */
.threshold-info {
  margin: 0.5em 0 1em 0;       /* spacing above/below */
  padding: 0.75em 1em;         /* inner padding */
  background-color: #f9f9f9;   /* light background for contrast */
  border-left: 4px solid #007acc; /* accent bar on the left */
  font-size: 0.9em;            /* slightly smaller text */
  color: #333;                 /* dark gray text */
  line-height: 1.4;            /* improve readability */
}

.threshold-info br {
  margin-bottom: 0.25em;       /* space between lines */
}

.threshold-info strong {
  color: #007acc;              /* highlight key values */
}

.leaflet-popup-content .threshold-info {
  font-size: 0.9em;
  line-height: 1.5;
}

.leaflet-popup-content .threshold-info a {
  color: #0078D4;
  text-decoration: none;
  font-weight: 600;
}

.leaflet-popup-content .threshold-info a:hover {
  text-decoration: underline;
}

/* Allow popup to expand to fit text width */
.leaflet-popup-content-wrapper {
  width: auto !important;       /* let width be determined by content */
  max-width: none !important;   /* remove Leaflet's 300px limit */
  white-space: nowrap;          /* prevent text wrapping */
}

.leaflet-popup-content {
  width: auto !important;
  max-width: none !important;
  white-space: nowrap;          /* keep text on one line */
}

#locate-me {
  position: absolute;
  bottom: 20px;
  right: 10px;
  z-index: 1000;
}

/* Table container and sticky header */
.table-wrap {
  max-height: 400px;
  overflow: auto;
  border: 1px solid #ddd;
  border-radius: 4px;
  scroll-margin-top: var(--banner-h); /* when scrolled into view, offset under banner */
}

.table-wrap thead {    /* To make the sticky header visually distinct */
  border-bottom: 2px solid #ddd;
}

table { border-collapse: collapse; font-size: 14px; width: 100%; }
thead {
  position: sticky;
  top: 0; /* stick to the top of the scrollable div */
  background-color: #f9f9f9;
  z-index: 2; /* above body rows */
}
th, td { padding: 6px 8px; border-bottom: 1px solid #eee; }

/* Hash anchor offset for plot titles */
h2[id] { scroll-margin-top: calc(var(--banner-h) + 20px); }

/* Optional: tighten spacing below banner */
.content { padding-top: 8px; }

/* Mobile adjustments with properly closed braces */
.plot-wrapper .plotly-graph-div {
  height: 700px;  /* desktop */
}

@media (max-width: 600px) { /* set mobile map width */
  .map-wrapper {
    width: calc(100vw - 20px);
    padding: 0;
  }
}

@media (max-width: 900px) {
  .plot-wrapper .plotly-graph-div { height: 300px; }
}

@media (max-width: 390px) {
  .plot-wrapper .plotly-graph-div { height: 300px; }
}

/* Default desktop height */
.js-plotly-plot {
  height: 600px;
}

/* Tablet */
@media (max-width: 900px) {
  .js-plotly-plot {
    height: 600px;
  }
}

/* iPhone 13 and similar (390px wide) */
@media (max-width: 400px) {
  .js-plotly-plot {
    height: 600px;
  }
}

/* Pointer cursor for cumulative plot lines */
#final_cumulative_plot .scatterlayer .trace .lines path {
  cursor: pointer;
}

#final_cumulative_plot .hoverlayer .hovertext {
  cursor: pointer;
}