/* ==========================================================================
   NWP Risk Map Styles (References: 03_riskmap_basin.jpg & 04_riskmap_district.jpg)
   ========================================================================== */

/* Basin Layout */
.nwp-basin-layout {
  display: grid;
  grid-template-columns: 280px 1fr 280px;
  gap: 1.5rem;
  align-items: start;
}

/* District Layout */
.nwp-district-layout {
  display: grid;
  grid-template-columns: 260px 1fr 480px;
  gap: 1.5rem;
  align-items: start;
}

/* Dual / Single Maps Container */
.dual-maps-card,
.single-map-card {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.single-map-card .map-view-img {
  max-height: 540px;
  width: 100%;
}

/* Forecast Date Banner */
.forecast-date-display {
  background: var(--color-mint-light);
  border: 1px solid var(--color-pale-green);
  border-radius: var(--radius-sm);
  padding: 0.65rem 1rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-primary-dark);
  text-align: center;
  margin-bottom: 1rem;
  line-height: 1.55;
  display: block;
}

.dual-maps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.map-view-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
  background: #FAFCFA;
}

.map-view-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: 0.65rem;
  text-align: center;
}

.map-view-img {
  width: 100%;
  max-height: 480px;
  object-fit: contain;
  border-radius: var(--radius-xs);
  background: #FFFFFF;
  border: 1px solid var(--color-border);
}

.basin-slider-section {
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border-light);
}

/* District Risk Summary 4-Column Cards (Reference 04_riskmap_district.jpg) */
.district-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.summary-risk-card {
  border-radius: var(--radius-sm);
  overflow: hidden;
  text-align: center;
  border: 1px solid var(--color-border);
}

.summary-card-header {
  padding: 0.35rem 0.25rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #FFFFFF;
}

.summary-card-header.critical { background: var(--risk-critical); }
.summary-card-header.high { background: var(--risk-high); }
.summary-card-header.moderate { background: var(--risk-moderate); }
.summary-card-header.medium { background: var(--risk-medium); color: #142820; }

.summary-card-body {
  background: #FFFFFF;
  padding: 0.5rem 0.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.summary-count {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-primary-dark);
  line-height: 1.1;
}

.summary-unit {
  font-size: 0.72rem;
  color: var(--color-text-muted);
}

/* District Table Panel */
.district-table-panel {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.15rem;
  box-shadow: var(--shadow-sm);
}

.table-heading-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.table-heading-sub {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-text-muted);
}

.risk-chip {
  padding: 0.15rem 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 3px;
  white-space: nowrap;
}

.risk-chip.critical { background: var(--risk-critical-bg); color: var(--risk-critical-text); border: 1px solid #F8BBD0; }
.risk-chip.high { background: var(--risk-high-bg); color: var(--risk-high-text); border: 1px solid #FFCDD2; }
.risk-chip.moderate { background: var(--risk-moderate-bg); color: var(--risk-moderate-text); border: 1px solid #FFE0B2; }
.risk-chip.medium { background: var(--risk-medium-bg); color: var(--risk-medium-text); border: 1px solid #FFF9C4; }
.risk-chip.low { background: var(--risk-low-bg); color: var(--risk-low-text); border: 1px solid #C8E6C9; }
.risk-chip.verylow { background: var(--risk-verylow-bg); color: var(--risk-verylow-text); border: 1px solid #DCEDC8; }
.risk-chip.white { background: #FFFFFF; color: var(--color-text-main); border: 1px solid var(--color-border); }