/* ── Sidebar horizontal resize ───────────────────────────────────────────── */

/* Override Bootstrap col-3 fixed width with a draggable CSS variable */
#sidebar-col {
  flex: 0 0 var(--sidebar-w, 300px) !important;
  max-width: var(--sidebar-w, 300px) !important;
  width: var(--sidebar-w, 300px) !important;
  border-right: none !important;
  min-width: 160px;
}

/* Vertical drag handle between sidebar and main panel */
#sidebar-resize {
  flex: 0 0 6px;
  background: #07101a;
  border-left:  1px solid rgba(91,227,255,0.13);
  border-right: 1px solid rgba(91,227,255,0.13);
  cursor: col-resize;
  height: 100vh;
  position: relative;
  z-index: 100;
  transition: background 0.15s, border-color 0.15s;
}

#sidebar-resize:hover,
#sidebar-resize.dragging {
  background: #0a1520;
  border-color: rgba(91,227,255,0.38);
}

/* Vertical grip dots */
#sidebar-resize::after {
  content: "·\A·\A·\A·\A·";
  white-space: pre;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(91,227,255,0.25);
  font-size: 10px;
  line-height: 7px;
  pointer-events: none;
  letter-spacing: 0;
}

/* ── Map / charts vertical resize ────────────────────────────────────────── */

/* Takes all remaining width after sidebar; flex-column for the vertical split */
#main-panel-col {
  flex: 1 1 0 !important;
  max-width: none !important;
  min-width: 0 !important;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  padding: 0;
  background: #060c12;
}

/* Map wrapper — height driven by CSS variable set by JS */
#map-wrapper {
  flex: 0 0 var(--map-h, 50vh);
  min-height: 80px;
  overflow: hidden;
  background: #07111c;
  position: relative;
}

/* Drag handle bar */
#resize-divider {
  flex: 0 0 6px;
  background: #07101a;
  border-top: 1px solid rgba(91,227,255,0.13);
  border-bottom: 1px solid rgba(91,227,255,0.13);
  cursor: row-resize;
  position: relative;
  z-index: 100;
  transition: background 0.15s, border-color 0.15s;
}

#resize-divider:hover,
#resize-divider.dragging {
  background: #0a1520;
  border-color: rgba(91,227,255,0.38);
}

/* Grip dots */
#resize-divider::after {
  content: "· · · · ·";
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(91,227,255,0.25);
  font-size: 10px;
  letter-spacing: 3px;
  pointer-events: none;
  line-height: 12px;
}

/* Charts/tabs wrapper — takes all remaining space */
#charts-wrapper {
  flex: 1 1 0;
  min-height: 80px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-top: 0;
  background: #060c12;
}

/* dbc.Tabs renders a wrapper div as the direct child — make it a flex column
   so that .nav-tabs and .tab-content can participate in the flex chain */
#charts-wrapper > div {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#charts-wrapper .nav-tabs    { flex: 0 0 auto; }
#charts-wrapper .tab-content { flex: 1 1 0; overflow: hidden; }
#charts-wrapper .tab-pane    { height: 100%; }

/* All dcc.Graph elements fill their tab pane */
#charts-wrapper .js-plotly-plot,
#charts-wrapper .plotly {
  height: 100% !important;
}

/* Metric Trends: explicit height from CSS variable so overflow-y always fires.
   --charts-h is the pixel height of the charts area (set by resize.js).
   42px = Bootstrap nav-tabs bar height. */
#metrics-annual-chart-wrapper {
  height: calc(var(--charts-h, 50vh) - 42px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(91,227,255,0.3) transparent;
}
#metrics-annual-chart-wrapper::-webkit-scrollbar       { width: 6px; }
#metrics-annual-chart-wrapper::-webkit-scrollbar-thumb {
  background: rgba(91,227,255,0.25);
  border-radius: 3px;
}
#metrics-annual-chart-wrapper::-webkit-scrollbar-track {
  background: rgba(6,12,18,0.6);
}

/* Explicit pixel height is set on this element by the render_metrics_annual
   callback (fig.layout.height px), so Plotly fills it exactly and the
   wrapper's overflow-y: auto scrolls the rest. */
#metrics-annual-chart .js-plotly-plot,
#metrics-annual-chart .plotly,
#metrics-annual-chart .main-svg {
  height: 100% !important;
}