/* Map viewer — FAO Uganda + ICPAC layout */

.map-app {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--chrome-h));
}

.map-workspace {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── Left filter sidebar (FAO blue) ── */
.filter-sidebar {
  flex: 0 0 var(--sidebar-w);
  background: var(--fao-blue);
  color: #fff;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: visible;
  -webkit-overflow-scrolling: touch;
  transition: margin-left 0.3s ease;
  z-index: 600;
  position: relative;
}

.filter-sidebar.collapsed {
  margin-left: calc(-1 * var(--sidebar-w) + 36px);
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}

.sidebar-header h2 {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.sidebar-collapse-btn {
  width: 28px; height: 28px;
  background: rgba(255,255,255,0.15);
  border: none; border-radius: 50%;
  color: #fff; cursor: pointer;
  font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
}
.sidebar-collapse-btn:hover { background: rgba(255,255,255,0.25); }

.filter-section {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.filter-section h3 {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.7);
  margin-bottom: 10px;
}

.filter-group { margin-bottom: 10px; }
.filter-group:last-child { margin-bottom: 0; }

.filter-group label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: rgba(255,255,255,0.9);
}

.filter-group select {
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 0.82rem;
  background: #fff;
  color: var(--text-primary);
  cursor: pointer;
}

.filter-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.btn-clear-filters {
  margin: 12px 16px 16px;
  padding: 9px;
  background: #fff;
  color: var(--fao-blue-dark);
  border: none;
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition);
}
.btn-clear-filters:hover { background: var(--fao-blue-light); }

/* Layer toggles (ICPAC style) */
.layer-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  font-size: 0.78rem;
}

.layer-toggle {
  position: relative;
  width: 36px; height: 20px;
  flex-shrink: 0;
}
.layer-toggle input { opacity: 0; width: 0; height: 0; }
.layer-toggle .slider {
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.25);
  border-radius: 20px;
  cursor: pointer;
  transition: background var(--transition);
}
.layer-toggle .slider::before {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  left: 2px; bottom: 2px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--transition);
}
.layer-toggle input:checked + .slider { background: var(--final-green); }
.layer-toggle input:checked + .slider::before { transform: translateX(16px); }

.layer-name { flex: 1; font-weight: 500; }

.layer-sub-filters {
  padding: 6px 0 6px 44px;
  display: none;
}
.layer-sub-filters.open { display: block; }
.layer-sub-filters select {
  width: 100%;
  padding: 5px 8px;
  border: none;
  border-radius: 4px;
  font-size: 0.75rem;
  margin-bottom: 4px;
}

/* ── Center map area ── */
.map-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--panel-bg);
}

.map-title-bar {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-bg);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.btn-exposure-report {
  flex-shrink: 0;
  padding: 7px 14px;
  background: var(--fao-blue);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}
.btn-exposure-report:hover { background: var(--fao-blue-hover); }
.btn-exposure-report[hidden] { display: none !important; }

.map-title-bar h2 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.map-title-bar .map-subtitle {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.map-viewport {
  flex: 1;
  position: relative;
  min-height: 0;
}

#map, .comparison-grid .quad-map {
  width: 100%;
  height: 100%;
  background: #e8edf2;
}

/* Map toolbar — zoom then comparison */
.map-zoom-toolbar {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 500;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  transition: top 0.2s, bottom 0.2s, left 0.2s, right 0.2s;
}

.map-app.comparison-active .map-zoom-toolbar {
  top: auto;
  left: auto;
  right: 12px;
  bottom: 12px;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: none;
  gap: 6px;
}

.map-app.comparison-active .map-zoom-toolbar .map-tool-btn {
  order: 1;
  pointer-events: auto;
}

.map-app.comparison-active .map-zoom-toolbar .map-zoom-group {
  order: 2;
  pointer-events: auto;
}

.map-zoom-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.map-tool-btn {
  width: 34px; height: 34px;
  background: var(--fao-blue);
  border: 2px solid #f0a030;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  box-shadow: var(--shadow-sm);
  transition: background var(--transition);
}
.map-tool-btn:hover { background: var(--fao-blue-dark); }
.map-tool-btn.active { background: var(--fao-blue-darker); }

.map-tool-btn .icon-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  width: 14px; height: 14px;
}
.map-tool-btn .icon-grid span {
  background: #fff;
  border-radius: 1px;
}

.map-ctrl-btn {
  width: 32px; height: 32px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1rem; font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.map-ctrl-btn:hover { background: var(--page-bg); }

/* Legend */
.map-legend {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 500;
  background: rgba(255,255,255,0.96);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  font-size: 0.72rem;
  box-shadow: var(--shadow-sm);
}
.map-legend h4 {
  font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; color: var(--text-secondary);
  margin-bottom: 4px;
}
.legend-item { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.legend-swatch { width: 16px; height: 12px; border-radius: 2px; border: 1px solid rgba(0,0,0,0.08); }

.map-downloads {
  position: absolute; bottom: 12px; right: 12px;
  z-index: 500; display: flex; gap: 4px;
}
.download-btn {
  padding: 5px 10px;
  background: #fff; border: 1px solid var(--border);
  border-radius: 4px; font-size: 0.7rem; font-weight: 600;
  color: var(--fao-blue-dark); cursor: pointer;
  box-shadow: var(--shadow-sm);
}

/* Comparison mode — 4 quadrants */
.comparison-grid {
  display: none;
  width: 100%;
  height: 100%;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  background: var(--border);
}
.comparison-grid.active { display: grid; }

.comparison-grid .quad {
  display: flex;
  flex-direction: column;
  background: var(--panel-bg);
  overflow: hidden;
  min-height: 0;
}
.comparison-grid .quad-controls {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  background: var(--fao-blue-light);
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.comparison-grid .quad-field label {
  display: block;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.comparison-grid .quad-field select {
  width: 100%;
  padding: 4px 6px;
  font-size: 0.68rem;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: #fff;
  color: var(--text-primary);
}
.comparison-grid .quad-body {
  flex: 1;
  position: relative;
  min-height: 0;
}
.comparison-grid .quad-legend {
  position: absolute;
  bottom: 6px; left: 6px;
  z-index: 500;
  background: rgba(255,255,255,0.94);
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 0.6rem;
  border: 1px solid var(--border);
  max-width: calc(100% - 12px);
  box-shadow: var(--shadow-sm);
}
.comparison-grid .quad-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.quad-graph-toggle {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 520;
  padding: 4px 10px;
  font-size: 0.62rem;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,0.92);
  color: var(--fao-blue-dark);
  cursor: pointer;
  font-family: var(--font);
  box-shadow: var(--shadow-sm);
}
.quad-graph-toggle:hover { background: var(--fao-blue-light); }
.quad-graph-toggle.active { background: var(--fao-blue); color: #fff; border-color: var(--fao-blue); }

.quad-graph-panel {
  position: absolute;
  top: 32px;
  left: 6px;
  right: 6px;
  bottom: 28px;
  z-index: 510;
  background: rgba(255,255,255,0.97);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.quad-graph-panel[hidden] { display: none !important; }

.quad-graph-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--fao-blue-dark);
  flex-shrink: 0;
}
.quad-graph-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 2px 4px;
}
.quad-graph-canvas {
  flex: 1;
  min-height: 0;
  padding: 6px;
}

/* Comparison lock overlays */
.comparison-locked { position: relative; }
.comparison-lock-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 800;
  background: rgba(0,0,0,0.18);
  cursor: not-allowed;
}
.comparison-locked .comparison-lock-overlay { display: block; }

.comparison-locked .filter-section,
.comparison-locked .btn-clear-filters,
.comparison-locked .sidebar-header {
  opacity: 0.55;
  filter: grayscale(0.3);
}

.comparison-locked .panel-stack,
.comparison-locked .chart-actions,
.comparison-locked .situation-csv-btn {
  opacity: 0.45;
  pointer-events: none;
}

.comparison-locked .timeline-label,
.comparison-locked .timeline-slider,
.comparison-locked .timeline-range {
  opacity: 0.55;
}

.single-map-view { width: 100%; height: 100%; }
.single-map-view.hidden { display: none; }

/* ── Right panel — stacked layout ── */
.data-panel {
  flex: 0 0 408px;
  display: flex;
  flex-direction: column;
  background: var(--panel-bg);
  border-left: 1px solid var(--border);
  min-width: 0;
  overflow: hidden;
}

.panel-stack {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.panel-section {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

.panel-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fao-blue-dark);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--fao-blue);
}

.panel-graphs { flex-shrink: 0; }
.panel-graphs .panel-section-title { margin-bottom: 6px; }

.panel-situation {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 8px;
}

.panel-legend {
  flex-shrink: 0;
  padding: 8px 12px 10px;
  overflow: visible;
}

.situation-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--fao-blue);
  flex-shrink: 0;
}

.situation-section-header .panel-section-title {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
  flex: 1;
}

.situation-csv-btn {
  padding: 3px 8px;
  font-size: 0.65rem;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
  color: var(--fao-blue-dark);
  cursor: pointer;
  font-family: var(--font);
}

/* Graphs pane */
.chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.chart-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.chart-action-btn {
  padding: 4px 8px;
  font-size: 0.68rem;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
  color: var(--fao-blue-dark);
  cursor: pointer;
  font-family: var(--font);
}
.chart-action-btn:hover { background: var(--fao-blue-light); }
.chart-action-btn .icon-expand { display: block; }

.has-action-tip { position: relative; }

.chart-expand-box { max-width: 900px; width: 100%; }
.chart-expand-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}
.chart-expand-header h3 { font-size: 1rem; color: var(--fao-blue-dark); }
.chart-expand-header p { font-size: 0.78rem; color: var(--text-secondary); margin-top: 2px; }
.modal-close-btn {
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px;
}
.chart-expand-wrapper { height: 420px; margin-bottom: 14px; }
.chart-expand-actions { display: flex; gap: 8px; justify-content: flex-end; }

.chart-header h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--fao-blue-dark);
}
.chart-subtitle { font-size: 0.75rem; color: var(--text-secondary); margin-bottom: 8px; }

.chart-wrapper {
  height: 175px;
  background: var(--page-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px;
  margin-bottom: 0;
}

/* Legend table (FAO Uganda style) */
.legend-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
}
.legend-table thead th {
  background: var(--fao-blue);
  color: #fff;
  padding: 6px 8px;
  text-align: left;
  font-weight: 700;
  font-size: 0.68rem;
  text-transform: uppercase;
}
.legend-table td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.legend-table .lt-color { width: 36px; padding: 6px 8px !important; }
.legend-table .lt-swatch {
  display: block;
  width: 24px;
  height: 18px;
  min-width: 24px;
  min-height: 18px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.15);
}

.map-legend-section {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
}
.map-legend-section h5 {
  font-size: 0.62rem;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 3px;
}

/* Drought situation pane (Observatory style) */
.situation-search {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 0.76rem;
  margin-bottom: 6px;
  flex-shrink: 0;
}
.situation-search:focus { outline: none; border-color: var(--fao-blue); }

.district-situation-list {
  list-style: none;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.district-situation-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.district-situation-item.is-open { background: var(--fao-blue-light); margin: 0 -6px; padding: 8px 6px; border-radius: 4px; }
.district-situation-item:last-child { border-bottom: none; }

.dsit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}
.dsit-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
}
.dsit-actions {
  display: flex;
  gap: 8px;
  font-size: 0.68rem;
}
.dsit-actions a,
.dsit-actions .detail-toggle { color: var(--fao-blue); font-weight: 600; text-decoration: none; }
.dsit-actions a:hover,
.dsit-actions .detail-toggle:hover { text-decoration: underline; }

.dsit-bar {
  height: 10px;
  background: #e8e8e8;
  border-radius: 5px;
  overflow: hidden;
  display: flex;
}
.dsit-bar-seg { height: 100%; transition: width 0.3s; }

.dsit-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 3px;
  font-size: 0.68rem;
  color: var(--text-muted);
}

/* Timeline slider (bottom) */
.timeline-bar {
  flex-shrink: 0;
  background: var(--fao-blue);
  padding: 8px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  color: #fff;
}

.timeline-label {
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  min-width: 100px;
}

.timeline-slider {
  flex: 1;
  -webkit-appearance: none;
  height: 6px;
  background: rgba(255,255,255,0.3);
  border-radius: 3px;
  outline: none;
}
.timeline-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.timeline-range {
  font-size: 0.72rem;
  opacity: 0.85;
  white-space: nowrap;
}

.leaflet-control-zoom { display: none !important; }
.district-tooltip {
  background: rgba(36,120,176,0.92) !important;
  color: #fff !important; border: none !important;
  border-radius: 4px !important;
  padding: 6px 10px !important;
  font-size: 0.78rem !important;
}

/* Responsive */
@media (max-width: 1100px) {
  .data-panel { flex: 0 0 360px; }
}

@media (max-width: 900px) {
  .map-workspace { flex-direction: column; }
  .filter-sidebar {
    flex: none;
    max-height: 40vh;
    position: relative;
    margin-left: 0 !important;
  }
  .filter-sidebar.collapsed { max-height: 44px; overflow: hidden; }
  .map-center { min-height: 45vh; }
  .data-panel { flex: 1; min-height: 280px; border-left: none; border-top: 1px solid var(--border); }
}