/* Canadian Energy Dashboard — styles */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #f0f4f8;
  overflow: hidden;
}

/* ── Map ─────────────────────────────────────────────────────────────────── */

#leaflet-map {
  cursor: pointer;
}

/* Hide all GeoJSON overlay polygons when CSD layer toggled off */
#leaflet-map.csd-hidden .leaflet-overlay-pane {
  display: none;
}

/* ── Control panel ───────────────────────────────────────────────────────── */

#control-panel {
  user-select: none;
}

#control-panel .Select-control {
  font-size: 13px;
}

/* ── CSD detail card ─────────────────────────────────────────────────────── */

#csd-detail-card {
  transition: opacity 0.25s ease;
}

/* Thin scroll bar in the card */
#csd-detail-card::-webkit-scrollbar {
  width: 5px;
}
#csd-detail-card::-webkit-scrollbar-track {
  background: transparent;
}
#csd-detail-card::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

/* ── Modal ───────────────────────────────────────────────────────────────── */

.modal-xl {
  max-width: 1100px;
}

.modal-body {
  padding: 16px 20px;
}

/* ── Dropdowns ───────────────────────────────────────────────────────────── */

.Select-menu-outer {
  z-index: 2000 !important;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

#btn-close-csd:hover {
  color: #dc2626 !important;
}

#btn-province-charts {
  letter-spacing: 0.02em;
}

/* ── Legend gradients ────────────────────────────────────────────────────── */

.legend-gradient-p1 {
  background: linear-gradient(
    to right,
    #590000, #8c0000, #bf2626, #e65959, #ff9999
  );
}

.legend-gradient-p3 {
  background: linear-gradient(
    to right,
    #000073, #001aa6, #1a4dd9, #4d80f2, #8cbfff
  );
}

/* ── Plotly charts ───────────────────────────────────────────────────────── */

.js-plotly-plot .plotly .main-svg {
  border-radius: 6px;
}

/* ── Radio items spacing ─────────────────────────────────────────────────── */

.form-check-inline {
  margin-right: 14px;
}

/* ── Responsive scaling (fluid, clamp-based) ─────────────────────────────── */

/* Control panel — fluid width */
#control-panel {
  width: clamp(260px, 20vw, 370px) !important;
}

/* Panel body content — smaller fluid font (excludes Controls header & bottom button) */
#panel-body {
  font-size: clamp(10px, 0.65vw, 11px) !important;
}
#panel-body label,
#panel-body .Select-control,
#panel-body .Select-value-label,
#panel-body .Select-placeholder,
#panel-body .Select-option,
#panel-body span {
  font-size: inherit !important;
}

/* Floating info button */
#btn-info-float {
  width:       clamp(24px, 2vw, 34px) !important;
  height:      clamp(24px, 2vw, 34px) !important;
  font-size:   clamp(12px, 1.1vw, 17px) !important;
  line-height: clamp(20px, 1.8vw, 30px) !important;
}

/* Corner logo strip — fluid logo height, padding, gap */
#logo-corner-strip {
  gap:     clamp(8px,  1vw,  20px) !important;
  padding: clamp(4px,  0.4vw, 8px) clamp(8px, 0.8vw, 16px) !important;
}
#logo-corner-strip img {
  height: clamp(20px, 2.2vw, 42px) !important;
}

/* ── Responsive: small screens ───────────────────────────────────────────── */

@media (max-width: 640px) {
  #control-panel {
    width: 260px !important;
  }
  #csd-detail-card {
    width: 100% !important;
    max-height: 50vh;
  }
}