/* Page-specific styles for /charts - reuses the shared control styling
   from ../style.css (buttons, form fields, mode-toggle, etc.) but as a
   normal static sidebar instead of a floating panel over a map. */

body.charts-page {
  background: #f4f6f8;
}

.charts-layout {
  display: flex;
  min-height: 100vh;
}

/* Override the floating/absolute positioning from style.css - here
   #controls is a normal static sidebar. */
.charts-controls#controls {
  position: static;
  width: 300px;
  min-width: 300px;
  max-height: none;
  border-radius: 0;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.08);
}

.charts-main {
  flex: 1;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#chart-wrap {
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
  padding: 16px;
  flex: 1;
  min-height: 420px;
  position: relative;
}

.chart-hint {
  font-size: 12px;
  color: #666;
  text-align: center;
  margin: 0;
}

#picker-map {
  height: 200px;
  border-radius: 4px;
  border: 1px solid #ccc;
  margin-top: 8px;
}

@media (max-width: 720px) {
  .charts-layout { flex-direction: column; }
  .charts-controls#controls { width: 100%; min-width: 0; }
}