/* ======= Tab-7 Responsive Styles (save as assets/responsive.css) ======= */
/* Color tokens (optional) */
:root {
  --bg: #000000;
  --panel-bg: #0b0f15;
  --panel-border: #243447;
  --text: #c9d1d9;
  --text-strong: #e6f1ff;
}

/* Map: let the container dictate width/height */
/* Map fills its wrapper; wrapper controls height */
/* Map fills wrapper; wrapper controls height */
.map-wrap,
.map-wrap > div,
.map-wrap .dash-graph,
.map-wrap .js-plotly-plot {
  width: 100% !important;
  height: 100% !important;
}

/* ⬆️ Make the map taller on desktop */
.map-wrap { height: clamp(9000px, 90vh, 900px); }   /* was ~58–68vh */

/* Tablet */
@media (max-width: 991.98px) {
  .map-wrap { height: clamp(420px, 64vh, 780px); }
}

/* Phone */
@media (max-width: 576px) {
  .map-wrap { height: clamp(360px, 56vh, 640px); }
}

/* Keep the right table’s scroll area roughly matched to the map */
.side-panel .dash-table-container .dash-spreadsheet-container {
  max-height: calc(80vh - 180px);   /* desktop */
}
@media (max-width: 991.98px) {
  .side-panel .dash-table-container .dash-spreadsheet-container {
    max-height: calc(64vh - 140px); /* tablet */
  }
}
@media (max-width: 576px) {
  .side-panel .dash-table-container .dash-spreadsheet-container {
    max-height: calc(56vh - 140px); /* phone */
  }
}

/* Card look (details + table) */
.side-panel-card {
  background: #0b0f15;
  border: 1px solid #243447;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

/* Make the table’s scroll region match the map height minus header space */
.side-panel-card .dash-table-container .dash-spreadsheet-container {
  max-height: calc(100% - 56px);
}


/* Optional: soften scrollbars in dark mode (WebKit-based) */
.side-panel-card::-webkit-scrollbar,
.map-wrap::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.side-panel-card::-webkit-scrollbar-thumb,
.map-wrap::-webkit-scrollbar-thumb {
  background: #1a263a;
  border-radius: 10px;
  border: 2px solid #0b0f15;
}
.side-panel-card::-webkit-scrollbar-track,
.map-wrap::-webkit-scrollbar-track {
  background: #0b0f15;
}

/* Container padding tweaks for the whole tab (optional) */
.tab7-container {
  background: var(--bg);
  padding: 0;
  box-sizing: border-box;
}

/* Keep DataTable fonts readable on small screens */
@media (max-width: 576px) {
  .dash-table-container .dash-spreadsheet-container {
    font-size: 12px;
  }
}

/* Slightly tighter legend spacing on narrow screens */
@media (max-width: 768px) {
  .map-wrap .legend {
    margin-top: -6px;
  }
}