/* R3 slice 11/14 (50-geo-map.css) — extracted VERBATIM from styles.css lines 6003-6246.
   interactive Nigeria map, zone fills, state labels, map tooltip, reports canvas, text utils, blue/purple/pink badges.
   Link order in index.html is load-bearing: cascade tie-breaks depend on it. Do not reorder. */

/* ── Interactive Nigeria Map Styles ────────────────── */

.geo-map-card {
  display: flex;
  flex-direction: column;
  height: 460px;
  gap: 12px;
  position: relative;
  overflow: hidden;
}

.geo-map-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px 0;
}

.geo-map-svg-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  margin: 0 16px 16px;
  min-height: 0;
  position: relative;
  border-radius: 16px;
  border: 1px solid var(--border);
  overflow: hidden;
  /* "Coverage map" treatment: a soft green glow over a faint dot grid */
  background:
    radial-gradient(circle at 50% 38%, var(--accent-soft) 0%, transparent 62%),
    radial-gradient(var(--border-strong) 1px, transparent 1.6px);
  background-size: 100% 100%, 22px 22px;
  background-position: center, center;
}

.nigeria-map {
  width: 100%;
  height: 100%;
  max-height: 380px;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.04));
}

.nigeria-map path {
  transition: fill 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
              stroke 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
              filter 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  stroke: var(--hairline);
  stroke-width: 1.0;
  cursor: pointer;
}

.nigeria-map path:hover {
  stroke: var(--ink);
  stroke-width: 1.8;
  filter: brightness(1.04) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.12));
}

.nigeria-map path.selected {
  stroke: var(--ink) !important;
  stroke-width: 2.8 !important;
  filter: brightness(1.08) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}

/* Subtle transparent defaults — redesign categorical palette (foundations §10) */
.nigeria-map path.zone-nw { fill: rgba(235, 164, 51, 0.26); }   /* amber */
.nigeria-map path.zone-ne { fill: rgba(31, 158, 143, 0.26); }   /* teal */
.nigeria-map path.zone-nc { fill: rgba(110, 98, 214, 0.26); }   /* indigo */
.nigeria-map path.zone-sw { fill: rgba(0, 162, 75, 0.26); }     /* green */
.nigeria-map path.zone-se { fill: rgba(226, 109, 92, 0.26); }   /* clay */
.nigeria-map path.zone-ss { fill: rgba(194, 85, 122, 0.26); }   /* rose */

/* Hover fills */
.nigeria-map path.zone-nw:hover { fill: rgba(235, 164, 51, 0.6); }
.nigeria-map path.zone-ne:hover { fill: rgba(31, 158, 143, 0.6); }
.nigeria-map path.zone-nc:hover { fill: rgba(110, 98, 214, 0.6); }
.nigeria-map path.zone-sw:hover { fill: rgba(0, 162, 75, 0.6); }
.nigeria-map path.zone-se:hover { fill: rgba(226, 109, 92, 0.6); }
.nigeria-map path.zone-ss:hover { fill: rgba(194, 85, 122, 0.6); }

/* Selection fills */
.nigeria-map path.zone-nw.selected { fill: rgba(235, 164, 51, 0.85); }
.nigeria-map path.zone-ne.selected { fill: rgba(31, 158, 143, 0.85); }
.nigeria-map path.zone-nc.selected { fill: rgba(110, 98, 214, 0.85); }
.nigeria-map path.zone-sw.selected { fill: rgba(0, 162, 75, 0.85); }
.nigeria-map path.zone-se.selected { fill: rgba(226, 109, 92, 0.85); }
.nigeria-map path.zone-ss.selected { fill: rgba(194, 85, 122, 0.85); }

/* Permanent labels on map */
.state-label {
  font-family: "Geist", system-ui, sans-serif;
  font-weight: 600;
  fill: #475569;
  pointer-events: none;
  user-select: none;
  transition: font-weight 0.2s, fill 0.2s;
}

body.dark .state-label {
  fill: #cbd5e1;
}

.state-label.selected {
  font-weight: 800;
  fill: #000000;
}

body.dark .state-label.selected {
  fill: #ffffff;
}

/* Floating Tooltip */
.map-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--card-start);
  border: 1px solid var(--hairline);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--ink);
  display: none;
  z-index: 1000;
  backdrop-filter: var(--blur);
  flex-direction: column;
  gap: 3px;
}

body.dark .map-tooltip {
  background: rgba(15, 23, 42, 0.9);
}

.map-tooltip strong {
  font-weight: 700;
  font-size: 13px;
}

.map-tooltip span {
  display: flex;
  justify-content: space-between;
  gap: 15px;
}

.map-tooltip small {
  color: var(--muted);
}

.map-clear-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.geo-hero-card {
  grid-area: hero;
  display: flex;
  flex-direction: column;
  height: auto;
  gap: 12px;
}

.geo-zones-card {
  grid-area: zones;
  display: flex;
  flex-direction: column;
  height: auto;
  gap: 12px;
}

.geo-lga-card {
  grid-area: lgas;
  display: flex;
  flex-direction: column;
  height: auto;
  gap: 12px;
}

/* ── Reports Canvas and Dashboard Styles ───────────── */

.reports-canvas-container {
  position: relative;
  width: 100%;
  height: 230px;
  margin-top: 5px;
  padding: 0 16px 16px;
}

.dashboard-bento-secondary {
  grid-template-columns: 1.2fr 1fr;
  grid-template-rows: auto auto auto;
}

.dashboard-bento-secondary .chart-card {
  min-height: 330px;
}

.reports-trend-card {
  grid-column: span 2;
  min-height: 360px !important;
}

.pdf-hidden-logo {
  display: none;
}

/* ── Table Cell Color Classes ──────────────────────── */

.text-positive { color: #047a35 !important; font-weight: 600; }
.text-warning { color: #b45309 !important; font-weight: 600; }
.text-critical { color: #b84432 !important; font-weight: 600; }
.text-info { color: #5140a0 !important; font-weight: 600; }

body.dark .text-positive { color: #28a85a !important; }
body.dark .text-warning { color: #d97706 !important; }
body.dark .text-critical { color: #f05252 !important; }
body.dark .text-info { color: #818cf8 !important; }

.badge.blue {
  color: #1E40AF;
  background: rgba(37, 99, 235, .14);
  border-color: rgba(37, 99, 235, .40);
}
.badge.purple {
  color: #6B21A8;
  background: rgba(147, 51, 234, .14);
  border-color: rgba(147, 51, 234, .40);
}
.badge.pink {
  color: #9D174D;
  background: rgba(219, 39, 119, .14);
  border-color: rgba(219, 39, 119, .40);
}

body.dark .badge.blue { background: rgba(96, 165, 250, .18); color: #93C5FD; border-color: rgba(96, 165, 250, .36); }
body.dark .badge.purple { background: rgba(192, 132, 252, .18); color: #D8B4FE; border-color: rgba(192, 132, 252, .36); }
body.dark .badge.pink { background: rgba(244, 114, 182, .18); color: #F9A8D4; border-color: rgba(244, 114, 182, .36); }