/* ── API-live indicators ─────────────────────────────────────────────
 * Visual cues that mark UI elements showing data from /federal-budgets.
 * Anything tagged `_fromAPI:true` in PROVINCE_DATA / DISTRICT_DATA gets
 * one of these classes attached when it renders.
 * ──────────────────────────────────────────────────────────────────── */

/* Small pill used in map tooltips + right-rail headers */
.api-live-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #137333;
  color: #fff;
  font: 600 10px/1.4 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.2px;
  vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(19, 115, 51, 0.18);
}

/* Solid green dot used inline in lists (ranking, etc.) */
.api-live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #137333;
  margin-right: 6px;
  vertical-align: middle;
  box-shadow: 0 0 0 2px rgba(19, 115, 51, 0.18);
}

/* Glow on right-rail card headers when the data is live.
   Subtle — keeps existing layout, just adds a green left bar + tint. */
.ctx-hd-live {
  border-left: 4px solid #137333;
  padding-left: 8px;
  background: linear-gradient(
    to right,
    rgba(19, 115, 51, 0.06) 0%,
    rgba(19, 115, 51, 0) 60%
  );
}

/* Ranking list highlight — light green wash + a green left edge.
   `.rank-item` already has its own hover styles; we only add a left
   border + faint tint so the row stays readable. */
.rank-item-live {
  position: relative;
  background: linear-gradient(to right, rgba(19, 115, 51, 0.06) 0%, transparent 60%);
}
.rank-item-live::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 2px;
  background: #137333;
}

/* Palika right-rail: hero tile that shows "Total budget · <palika>"
   ONLY when live API data is present. The smaller KPI grid below it
   continues to show the same breakdown, just less prominently. */
.palika-total-hero {
  margin: 6px 0 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #137333 0%, #0f5d29 100%);
  border-radius: 12px;
  color: #fff;
  box-shadow: 0 2px 10px rgba(19, 115, 51, 0.20);
}
.palika-total-hero .pth-label {
  font: 600 11px/1.2 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  opacity: 0.85;
}
.palika-total-hero .pth-val {
  font: 800 28px/1.1 ui-sans-serif, system-ui, sans-serif;
  margin: 4px 0 2px;
}
.palika-total-hero .pth-val small {
  font-size: 0.5em;
  font-weight: 500;
  opacity: 0.85;
  margin-left: 2px;
}
.palika-total-hero .pth-sub {
  font: 500 11.5px/1.4 ui-sans-serif, system-ui, sans-serif;
  opacity: 0.92;
}

/* Subtle green outline on the Total budget KPI tile when it's live. */
.ctx-kpi.kpi-live-tile {
  border: 1px solid rgba(19, 115, 51, 0.35);
  box-shadow: inset 0 0 0 1px rgba(19, 115, 51, 0.06);
}

/* ── "No DB rows" markers ──
 * Used everywhere a scope (province/district/palika) was selected but
 * has no _fromAPI:true entry. Replaces mock baseline numbers with a
 * clear em-dash so the user can't mistake placeholders for real data.
 */
.kpi-empty {
  color: #9ca3af;
  font-weight: 600;
}
.api-empty-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(156, 163, 175, 0.2);
  color: #4b5563;
  font: 600 10px/1.4 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.2px;
  vertical-align: middle;
}
.ctx-hd-empty {
  border-left: 4px solid #9ca3af;
  padding-left: 8px;
}
.ctx-empty-card {
  margin: 8px 12px;
  padding: 14px 16px;
  background: #f9fafb;
  border: 1px dashed rgba(156, 163, 175, 0.5);
  border-radius: 10px;
}
.ctx-empty-card .ctx-empty-title {
  font: 600 13px/1.3 ui-sans-serif, system-ui, sans-serif;
  color: #374151;
  margin-bottom: 4px;
}
.ctx-empty-card .ctx-empty-sub {
  font: 400 12px/1.5 ui-sans-serif, system-ui, sans-serif;
  color: #6b7280;
}

/* Real-projects list (right rail, after the user picks a district or palika) */
.ctx-api-projects {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0 2px;
}
.ctx-proj-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  background: #f9fafb;
  border: 0;
  border-radius: 8px;
  border-left: 3px solid #137333;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.ctx-proj-row-link {
  text-decoration: none;
  color: inherit;
}
.ctx-proj-row-link:hover,
.ctx-proj-row-link:focus {
  background: #eef7f0;
  outline: 2px solid rgba(19, 115, 51, 0.18);
  outline-offset: 1px;
}
.ctx-proj-row .ctx-proj-name {
  flex: 1;
  font: 500 12px/1.4 ui-sans-serif, system-ui, sans-serif;
  color: #111827;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ctx-proj-row .ctx-proj-money {
  text-align: right;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ctx-proj-row .ctx-proj-money b {
  font: 700 12.5px/1.2 ui-sans-serif, system-ui, sans-serif;
  color: #137333;
}
.ctx-proj-row .ctx-proj-util {
  font: 600 11px/1.2 ui-sans-serif, system-ui, sans-serif;
}
.ctx-proj-detail {
  color: #1d4ed8;
  font: 700 10px/1.2 ui-sans-serif, system-ui, sans-serif;
}
.ctx-loading, .ctx-empty {
  padding: 12px;
  color: #6b7280;
  font: 400 12px/1.4 ui-sans-serif, system-ui, sans-serif;
  font-style: italic;
  text-align: center;
}

/* Tooltip — emphasize "Total Budget" line so it pops at a glance */
.map-tooltip-sub {
  font: 500 11px/1.4 ui-sans-serif, system-ui, sans-serif;
  color: #6b7280;
  margin-top: 2px;
}
.map-tooltip-budget {
  font: 500 12px/1.5 ui-sans-serif, system-ui, sans-serif;
  color: #111827;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed rgba(0, 0, 0, 0.12);
}
.map-tooltip-budget b {
  color: #137333;
  font-weight: 700;
}

/* KPI strip — live values get a green underline so it's obvious which
   numbers are coming from the API vs the mock baseline. Pure visual,
   doesn't shift layout. */
.kpi-val.kpi-live {
  border-bottom: 2px solid #137333;
  padding-bottom: 1px;
}
.kpi-val.kpi-live::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #137333;
  border-radius: 50%;
  margin-left: 6px;
  vertical-align: middle;
}

/* ── Live-data overlay ── always-visible card pinned to the bottom-left
   of the map. Lists every place whose numbers came from the API, with
   total budget. Click a row to drill the map into that scope.
   ──────────────────────────────────────────────────────────────────── */
.igbmd-live-panel {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 9000;
  width: 260px;
  font: 12px/1.4 ui-sans-serif, system-ui, sans-serif;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  user-select: none;
}
.igbmd-live-panel .ilp-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: linear-gradient(135deg, #137333 0%, #0f5d29 100%);
  color: #fff;
  cursor: pointer;
  font-weight: 600;
}
.igbmd-live-panel .ilp-dot {
  width: 8px; height: 8px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}
.igbmd-live-panel .ilp-title { flex: 1; letter-spacing: 0.3px; }
.igbmd-live-panel .ilp-count {
  background: rgba(255, 255, 255, 0.22);
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
}
.igbmd-live-panel .ilp-caret { opacity: 0.85; font-size: 11px; }

.igbmd-live-panel .ilp-body {
  max-height: 340px;
  overflow-y: auto;
  padding: 4px 0 6px;
}
.igbmd-live-panel .ilp-section {
  padding: 6px 10px 2px;
  color: #6b7280;
  font: 600 10.5px/1.2 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.igbmd-live-panel .ilp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  cursor: pointer;
  border-left: 3px solid transparent;
}
.igbmd-live-panel .ilp-row:hover {
  background: rgba(19, 115, 51, 0.06);
  border-left-color: #137333;
}
.igbmd-live-panel .ilp-row-name {
  color: #111827;
  font-weight: 500;
  flex: 1;
  margin-right: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.igbmd-live-panel .ilp-row-name em {
  color: #6b7280;
  font-style: normal;
  font-weight: 400;
  font-size: 11px;
}
.igbmd-live-panel .ilp-row-budget {
  color: #137333;
  font-weight: 600;
  font-size: 11.5px;
  white-space: nowrap;
}
.igbmd-live-panel .ilp-empty {
  color: #9ca3af;
  padding: 8px 10px 10px;
  font-size: 11.5px;
  font-style: italic;
}

/* Optional: tag in the map legend area / breadcrumb */
.api-live-legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 11px/1.4 ui-sans-serif, system-ui, sans-serif;
  color: #137333;
}
.api-live-legend::before {
  content: '';
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #137333;
}