/* =========================================================================
   Crop Map — public drill-down map (publicmap app)
   Region → District → Upazila. Namespaced `pm-` so it never collides with the
   app-shell (custom.css) or the auth screens (auth.css). Reuses the canonical
   palette variables defined in custom.css.
   ========================================================================= */

* { box-sizing: border-box; }

html, body.pm-body {
  height: 100%;
  margin: 0;
}

.pm-body {
  display: flex;
  flex-direction: column;
  font-family: var(--font-body, system-ui, sans-serif);
  color: var(--color-text, #1c2321);
  background: var(--color-bg, #f6f4ee);
}

/* ---------- header ---------- */
.pm-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  color: #eafaef;
  background: linear-gradient(135deg, var(--color-primary, #1f4d3a), var(--color-primary-dark, #163a2b));
  box-shadow: var(--shadow-md, 0 6px 20px rgba(28, 35, 33, 0.08));
  z-index: 500;
}

.pm-header__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  /* It doubles as a "home" button: clicking it resets the drill to Bangladesh. */
  border: none;
  background: none;
  padding: 4px 8px;
  margin: -4px -8px;
  border-radius: 12px;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: background 0.15s ease;
}
.pm-header__brand:hover { background: rgba(255, 255, 255, 0.12); }
.pm-header__brand:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.6); outline-offset: 2px; }
/* The DAE crest is opaque artwork, so it sits on a white plate (like the app
   sidebar) rather than straight on the dark-green header. */
.pm-header__logo {
  width: 46px; height: 46px; display: block;
  border-radius: 50%;
  object-fit: contain;
  background: #fff;
  padding: 3px;
  flex-shrink: 0;
}
.pm-header__brand-text { display: flex; flex-direction: column; }
.pm-header__title { font-size: 19px; font-weight: 700; }
.pm-header__sub { font-size: 12.5px; color: rgba(234, 250, 239, 0.8); margin-top: 2px; }

.pm-header__login {
  color: #eafaef;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 18px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  transition: background 0.15s ease;
}
.pm-header__login:hover { background: rgba(255, 255, 255, 0.14); }

/* EN/BN language pill — mirrors the auth screens' toggle, restyled for the
   dark-green public-map header. Sits just left of the login/dashboard link. */
.pm-lang {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}
.pm-lang span {
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  border-radius: 999px;
  color: rgba(234, 250, 239, 0.85);
  transition: background 0.15s ease, color 0.15s ease;
}
.pm-lang span:hover { color: #fff; }
.pm-lang span.active { background: #fff; color: var(--color-primary-dark, #163a2b); }

/* Two headline figures pulled from the latest situation report — মজুদের পরিমাণ
   (closing stock) and বিতরণ (farmer distribution), national totals in metric
   tons. Sits in the middle of the header (a margin-left:auto share balances it
   against the season chip's own auto margin) and folds away on narrow screens
   where there is no room beside the brand. */
.pm-header__stats {
  margin-left: auto;
  display: flex;
  align-items: stretch;
  gap: 16px;
  padding: 6px 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  line-height: 1.2;
}
.pm-header__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.pm-header__stat-label {
  font-size: 11px;
  letter-spacing: 0.03em;
  color: rgba(234, 250, 239, 0.78);
}
.pm-header__stat-value { font-size: 16px; font-weight: 700; white-space: nowrap; }
.pm-header__stat-value small { font-size: 11px; font-weight: 500; opacity: 0.8; }
.pm-header__stat-div {
  width: 1px;
  align-self: stretch;
  background: rgba(255, 255, 255, 0.22);
}

@media (max-width: 900px) {
  .pm-header__stats { display: none; }
}

/* Which cropping season today falls in. Seasons carry a month+day window with
   no year, so this chip is resolved server-side on every request. It sits
   between the brand and the login link and folds away on narrow screens, where
   the header has no room to spare. */
.pm-header__season {
  margin-left: auto;
  margin-right: 4px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding: 6px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  line-height: 1.25;
}
.pm-header__season-label {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(234, 250, 239, 0.75);
}
.pm-header__season-names { font-size: 14px; font-weight: 700; }
.pm-header__season-names small { font-weight: 500; opacity: 0.8; }

@media (max-width: 720px) {
  .pm-header__season { display: none; }
}


/* ---------- layout ---------- */
.pm-layout {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 320px 1fr;
  min-height: 0;
}

/* ---------- sidebar ---------- */
.pm-sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 16px;
  background: var(--color-surface, #fff);
  border-right: 1px solid var(--color-border, #e1ddcd);
  overflow: hidden;
}

.pm-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  margin-bottom: 12px;
  min-height: 20px;
}
.pm-breadcrumb button {
  border: none;
  background: none;
  color: var(--color-primary, #1f4d3a);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
}
.pm-breadcrumb button:hover { background: var(--color-surface-muted, #eef1ea); }
.pm-breadcrumb .pm-crumb-sep { color: var(--color-text-muted, #5b6660); }
.pm-breadcrumb .pm-crumb-current { font-weight: 700; padding: 2px 4px; }

.pm-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-muted, #5b6660);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.pm-list-count { font-weight: 600; }

.pm-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1 1 auto;
}
.pm-list li {
  padding: 9px 12px;
  border-radius: var(--radius-md, 10px);
  cursor: pointer;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  transition: background 0.12s ease;
}
.pm-list li:hover { background: var(--color-surface-muted, #eef1ea); }
.pm-list li.is-active {
  background: var(--color-primary, #1f4d3a);
  color: #fff;
}
.pm-list li .pm-list__code {
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
  opacity: 0.7;
}

.pm-selected {
  margin-top: 12px;
  padding: 12px;
  border-radius: var(--radius-md, 10px);
  background: var(--color-warning-bg, #fbf1de);
  border: 1px solid var(--color-accent, #d4a017);
}
.pm-selected__label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--color-accent-dark, #b8860b);
}
.pm-selected__name { font-size: 15px; font-weight: 700; margin-top: 2px; }
.pm-selected__code { font-family: var(--font-mono, monospace); font-size: 12px; color: var(--color-text-muted, #5b6660); }

/* ---------- map ---------- */
.pm-map-wrap { position: relative; min-height: 0; }
.pm-map { position: absolute; inset: 0; }

/* The OpenStreetMap basemap is only a backdrop here — the story is the
   Bangladesh polygons on top. Softening the tiles (a light blur + gentle
   desaturation) pushes the world behind out of focus so the country reads as
   the foreground. Only the tile pane is touched, so polygons, labels, popups,
   the legend and the zoom control all stay crisp. */
.pm-map .leaflet-tile-pane {
  filter: blur(2.5px) saturate(0.85) brightness(1.02);
}

.pm-loading, .pm-empty {
  position: absolute;
  z-index: 600;
}
.pm-loading {
  top: 12px; left: 50%; transform: translateX(-50%);
  background: rgba(22, 58, 43, 0.9); color: #fff;
  padding: 6px 16px; border-radius: 999px; font-size: 13px;
}
.pm-empty {
  inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(246, 244, 238, 0.75); padding: 24px;
}
.pm-empty__card {
  max-width: 420px; text-align: center;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e1ddcd);
  border-radius: var(--radius-lg, 18px);
  padding: 28px; box-shadow: var(--shadow-lg, 0 20px 48px rgba(22, 58, 43, 0.18));
}
.pm-empty__card h3 { margin: 0 0 8px; color: var(--color-primary-dark, #163a2b); }
.pm-empty__card p { margin: 0; font-size: 14px; color: var(--color-text-muted, #5b6660); line-height: 1.6; }
.pm-empty__card code {
  font-family: var(--font-mono, monospace); font-size: 12.5px;
  background: var(--color-surface-muted, #eef1ea); padding: 1px 5px; border-radius: 4px;
}

/* ---------- polygon tooltip label ---------- */
.pm-label {
  background: rgba(22, 58, 43, 0.92);
  color: #fff; border: none; border-radius: 6px;
  font-size: 12.5px; font-weight: 600; padding: 3px 8px;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(28, 35, 33, 0.06));
}
.pm-label::before { display: none; }

/* ---------- footer (narrow info strip) ---------- */
.pm-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 5px 16px;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(234, 250, 239, 0.92);
  background: linear-gradient(135deg, var(--color-primary, #1f4d3a), var(--color-primary-dark, #163a2b));
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  z-index: 500;
}
.pm-footer__group { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.pm-footer__sep { opacity: 0.4; }
.pm-footer__bn { font-weight: 600; }
.pm-footer__clock { font-variant-numeric: tabular-nums; letter-spacing: 0.3px; }
.pm-footer__visitors { display: inline-flex; align-items: center; gap: 5px; }
.pm-footer__visitors svg { opacity: 0.85; }
.pm-footer__visitors #pm-visitors { font-weight: 700; }
.pm-footer__rights { opacity: 0.85; }

/* ---------- responsive ---------- */
@media (max-width: 800px) {
  .pm-layout { grid-template-columns: 1fr; grid-template-rows: 200px 1fr; }
  .pm-sidebar { border-right: none; border-bottom: 1px solid var(--color-border, #e1ddcd); }
  .pm-footer { justify-content: center; text-align: center; font-size: 11px; }
}

/* ---------- district crop-land: sidebar controls ---------- */
.pm-cropland {
  margin-bottom: 12px;
  padding: 12px;
  border-radius: var(--radius-md, 10px);
  background: var(--color-success-bg, #e8f3ea);
  border: 1px solid var(--color-primary, #1f4d3a);
}
.pm-cropland__head {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary-dark, #163a2b);
  margin-bottom: 8px;
}
.pm-cropland__controls { display: flex; flex-direction: column; gap: 8px; }
.pm-field { display: flex; flex-direction: column; gap: 3px; }
.pm-field__label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--color-text-muted, #5b6660);
}
.pm-select {
  font: inherit; font-size: 13.5px;
  padding: 6px 8px;
  border: 1px solid var(--color-border, #e1ddcd);
  border-radius: 8px;
  background: var(--color-surface, #fff);
  color: var(--color-text, #1c2321);
}
.pm-cropland__hint {
  margin-top: 8px; font-size: 12px; line-height: 1.5;
  color: var(--color-text-muted, #5b6660);
}

/* ---------- district crop-land: map legend ---------- */
.pm-legend {
  position: absolute;
  z-index: 600;
  right: 12px; bottom: 12px;
  min-width: 176px;
  padding: 10px 12px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e1ddcd);
  border-radius: var(--radius-md, 10px);
  box-shadow: var(--shadow-md, 0 6px 20px rgba(28, 35, 33, 0.12));
  font-size: 12px;
}
/* "Save map" — snapshot the current view to a PNG. Top-right of the map, clear
   of the bottom-right legend and the top-left zoom control. */
.pm-export {
  position: absolute;
  z-index: 600;
  top: 12px; right: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  background: var(--color-surface, #fff);
  color: var(--color-primary-dark, #163a2b);
  border: 1px solid var(--color-border, #e1ddcd);
  border-radius: var(--radius-md, 10px);
  box-shadow: var(--shadow-md, 0 6px 20px rgba(28, 35, 33, 0.12));
  font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.pm-export:hover { background: var(--color-success-bg, #eef6ee); }
.pm-export svg { flex: 0 0 auto; }
.pm-export--busy { opacity: 0.6; cursor: progress; }
.pm-legend__title { font-weight: 700; margin-bottom: 6px; color: var(--color-primary-dark, #163a2b); }
.pm-legend__scale {
  height: 12px; border-radius: 4px;
  border: 1px solid var(--color-border, #e1ddcd);
}
.pm-legend__ends {
  display: flex; justify-content: space-between;
  margin-top: 4px; font-variant-numeric: tabular-nums;
  color: var(--color-text-muted, #5b6660);
}
/* Region map: fixed cropping-intensity class swatches. */
.pm-legend__classes { display: flex; flex-direction: column; gap: 4px; }
.pm-legend__class { display: flex; align-items: center; gap: 6px; }
.pm-legend__class-sw {
  width: 14px; height: 14px; border-radius: 3px;
  border: 1px solid var(--color-border, #e1ddcd);
  flex: 0 0 auto;
}
.pm-legend__nodata {
  display: flex; align-items: center; gap: 6px;
  margin-top: 8px; color: var(--color-text-muted, #5b6660);
}
.pm-legend__nodata-sw {
  width: 14px; height: 14px; border-radius: 3px;
  background: var(--pm-nodata, #d8d4c8);
  border: 1px solid var(--color-border, #e1ddcd);
}
@media (max-width: 800px) {
  .pm-legend { right: 8px; bottom: 8px; min-width: 150px; font-size: 11px; }
  .pm-export { top: 8px; right: 8px; padding: 6px 10px; font-size: 12px; }
}

/* ---------- district crop-land: click popup ---------- */
.pm-pop { min-width: 208px; }
.pm-pop__name { font-size: 15px; font-weight: 700; color: var(--color-primary-dark, #163a2b); }
.pm-pop__year { font-size: 12px; color: var(--color-text-muted, #5b6660); margin-bottom: 8px; }
.pm-pop__grid {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px;
  font-size: 13px; align-items: baseline;
}
.pm-pop__label { color: var(--color-text-muted, #5b6660); }
.pm-pop__val { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.pm-pop__val small { font-weight: 500; opacity: 0.7; }
.pm-pop__none {
  font-size: 13px; color: var(--color-text-muted, #5b6660);
  padding: 4px 0 2px;
}
.pm-pop__drill {
  display: inline-block; margin-top: 10px;
  font-size: 13px; font-weight: 600;
  color: var(--color-primary, #1f4d3a);
  background: none; border: none; padding: 0; cursor: pointer;
}
.pm-pop__drill:hover { text-decoration: underline; }
.pm-list li .pm-list__val {
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--color-accent-dark, #b8860b);
}
.pm-list li.is-active .pm-list__val { color: #fff; }