/* ====== Layout ====== */
.map-wrap { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 992px) { .map-wrap { grid-template-columns: 2fr 1fr; } }

#map { height: 70vh; border-radius: 10px; min-height: 500px; }

.panel {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  padding: 12px 14px;
}
.panel h5 { margin: 0 0 8px; font-weight: 700; }

.info, .legend, .toolbar {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  padding: 8px 12px;
  color: #333;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.leaflet-tooltip { direction: rtl; text-align: right; }
.leaflet-control a.btn {
  display: inline-block;
  margin: 0 4px;
  padding: 4px 8px;
  border-radius: 6px;
  background: #f1f1f1;
}

/* ====== Stats & Side ====== */
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.stat {
  background: #f8f9fb;
  border-radius: 8px;
  padding: 8px;
  text-align: center;
}
.stat b { display: block; font-size: 18px; }
.muted { color: #666; font-size: 12px; }

.chart-wrap {
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.chart-wrap canvas { max-height: 280px; }

.scroll-y { max-height: 122vh; overflow: auto; }

select#year-select, select#metric-select, select#compare-select { min-width: 140px; }
#selected-title { font-weight: 700; }

/* ====== Legend + Spinner ====== */
.legend { line-height: 1.3; }
.legend i {
  width: 14px;
  height: 14px;
  float: left;
  margin-right: 6px;
  opacity: 0.9;
  border-radius: 3px;
}

.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid #ddd;
  border-top-color: #999;
  border-radius: 50%;
  animation: spin .8s linear infinite;
  vertical-align: -2px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ====== Dark mode ====== */
body.dark {
  background: #0f1216;
  color: #dfe7ef;
}
body.dark .panel,
body.dark .toolbar,
body.dark .info,
body.dark .legend {
  background: #12161c;
  color: #dfe7ef;
  box-shadow: 0 2px 10px rgba(255,255,255,.05);
}
body.dark .stat { background: #1a212b; }
body.dark .muted { color: #9fb0c4; }
body.dark .leaflet-control a.btn { background: #1c232d; color: #dfe7ef; }
body.dark .legend i { opacity: 1; }