/* Mapa nalaza — jedna strana koja spaja tri izveštaja kao slojeve.
   Nasleđuje paletu/kartice/tabele/pilule iz reports.css; ovde su samo raspored
   (bočni panel + mapa preko celog ekrana) i pravila rangova/pod-oznaka koja su
   ranije stajala u report_unregistered.css. */

:root {
  /* JEDNA BOJA PO SLOJU, nijanse unutar sloja. Slojevi se gledaju jedan po jedan, ali se
     i pamte između prebacivanja — ako dva sloja dele boju, ne vidi se da se prikaz
     promenio. Ranije su „van registra rang 1”, „nestambeno” i „javni objekat nestambeno”
     bili ista crvena (#dc2626), pa su tri različita nalaza izgledala identično.
     Unutar sloja nijansa nosi jačinu signala: zasićenije/tamnije = jače.

     Rampe su ŽIVE (visoka zasićenost), ne zagasite. Jaki kraj je ranije bio skoro crn
     (#991b1b, #155e75, #b45309, #86198f) — takve tačke su se gubile u sivo-bež OSM
     pločicama i sva četiri sloja su izgledala isto turobno. Sada jaki kraj drži punu
     zasićenost, a slabi ostaje svetao, pa se redosled signala i dalje čita.

     Iste vrednosti stoje u map.js (RANK_COLOR / CADASTRE_COLOR / BUILDING_COLOR /
     MISMATCH_COLOR) — tamo su tačke na mapi, ovde pilule i tačkice u legendi. */

  /* Sloj „van registra” — živa karmin-crvena. */
  --rank1: #be123c;  /* ulica poznata, broj ne — najjači signal */
  --rank2: #e11d48;  /* naselje poznato, ulica ne */
  --rank3: #fb7185;  /* opština poznata, naselje ne */
  --rank4: #fda4af;  /* opština nepoznata — uglavnom praznine u registru */

  /* Sloj „nestambene adrese (katastar)” — živa tirkizna. */
  --cad-non-residential: #0e7490;  /* namena zgrade poznata — najpouzdanije */
  --cad-auxiliary: #06b6d4;        /* garaža, šupa, ekonomski objekat */
  --cad-no-building: #67e8f9;      /* prazna parcela — najslabiji signal */
  --cad-unknown: #0891b2;          /* namena nepoznata */

  /* Sloj „javni objekti” — živa narandžasta. */
  --pb-non-residential: #ea580c;
  --pb-possibly-residential: #fb923c;
  --pb-unknown: #fcd34d;

  /* Sloj „sumnjiva koncentracija birača” — živa magenta. */
  --mismatch1: #c026d3;  /* 8+ birača po stanu — najjači signal */
  --mismatch2: #d946ef;  /* 6–8 birača po stanu */
  --mismatch3: #e879f9;  /* 4,5–6 birača po stanu */

  /* Tamno mastilo po sloju — za pilule čija je podloga presvetla za belo slovo.
     Nije crno nego iz iste porodice, da pilula ostane deo svog sloja. */
  --ink-rank: #4c0519;
  --ink-cad: #042027;
  --ink-pb: #2b0c02;
  --ink-mismatch: #330336;
}

/* Cela strana je visok stub: traka gore, ispod nje panel + mapa jedno pored
   drugog, bez skrola na telu (skroluje panel, ne strana). */
body { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.map-shell { flex: 1; display: flex; min-height: 0; }

#panel {
  width: 360px;
  flex: none;
  overflow-y: auto;
  padding: 16px;
  border-right: 1px solid var(--border);
  background: var(--bg);
}
/* Naslov nosi i izbornik opštine (vidi map.html). Flex, da izbornik stoji u istom redu i
   ne nasledi veličinu/debljinu naslovnog slova; izbornik uzima ostatak reda, jer je panel
   uzak a imena opština umeju da budu duga. */
#panel h1 {
  font-size: 18px; margin: 0 0 8px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}
#panel h1 #muni-picker { flex: 1 1 120px; min-width: 0; font-size: 13px; font-weight: 400; }
#panel .intro { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0 0 12px; }

#shown-count {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 8px 10px;
  margin-bottom: 12px;
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
}

/* Mapa preko ostatka širine, puna visina (reports.css ima fiksnih 560px). */
#map {
  flex: 1;
  height: auto;
  border: none;
  border-radius: 0;
  min-height: 0;
}

/* ── Kontrole jednog sloja ── */
.layer { border-top: 1px solid var(--border); padding: 12px 0; }
.layer:first-child { border-top: none; }
.layer-toggle {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 14px; cursor: pointer;
}
.layer-toggle .layer-name { flex: 1; }
.layer-count {
  color: var(--muted); font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.layer-body { margin: 10px 0 0 24px; }
.layer-filters { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.layer-filters label {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text); cursor: pointer;
}
.legend-row { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.legend-row span { display: inline-flex; align-items: center; gap: 5px; }

.layer-detail { font-size: 13px; }
.layer-detail > summary { cursor: pointer; color: var(--accent); font-weight: 600; padding: 4px 0; }
/* Kartice u uskom panelu — jedna kolona umesto mreže. */
.detail-body .lead { font-size: 12.5px; }

/* ── Rangovi i pod-oznake (iz nekadašnjeg report_unregistered.css) ── */
/* Pilula nosi belo slovo (.tag u reports.css). Tamo gde je živa podloga presvetla za
   belo, slovo prelazi na tamno mastilo istog sloja — inače bi svetle nijanse ostale
   nečitke, što je već bio slučaj kod ranijih rang3/rang4 pilula. */
.tag.rank1 { background: var(--rank1); }
.tag.rank2 { background: var(--rank2); }
.tag.rank3 { background: var(--rank3); color: var(--ink-rank); }
.tag.rank4 { background: var(--rank4); color: var(--ink-rank); }

.tag.cad-non-residential { background: var(--cad-non-residential); }
.tag.cad-auxiliary { background: var(--cad-auxiliary); color: var(--ink-cad); }
.tag.cad-no-building { background: var(--cad-no-building); color: var(--ink-cad); }
.tag.cad-unknown { background: var(--cad-unknown); color: var(--ink-cad); }
.tag.pb-non-residential { background: var(--pb-non-residential); color: var(--ink-pb); }
.tag.pb-possibly-residential { background: var(--pb-possibly-residential); color: var(--ink-pb); }
.tag.pb-unknown { background: var(--pb-unknown); color: var(--ink-pb); }

.legend-dot.cad-non-residential { background: var(--cad-non-residential); }
.legend-dot.cad-auxiliary { background: var(--cad-auxiliary); }
.legend-dot.cad-no-building { background: var(--cad-no-building); }
.legend-dot.cad-unknown { background: var(--cad-unknown); }
.legend-dot.pb-non-residential { background: var(--pb-non-residential); }
.legend-dot.pb-possibly-residential { background: var(--pb-possibly-residential); }
.legend-dot.pb-unknown { background: var(--pb-unknown); }

.legend-dot.rank1 { background: var(--rank1); }
.legend-dot.rank2 { background: var(--rank2); }
.legend-dot.rank3 { background: var(--rank3); }
.legend-dot.rank4 { background: var(--rank4); }

/* ── Sloj „više birača nego stanova” (birača po stanu) ── */
.tag.mismatch1 { background: var(--mismatch1); }
.tag.mismatch2 { background: var(--mismatch2); color: var(--ink-mismatch); }
.tag.mismatch3 { background: var(--mismatch3); color: var(--ink-mismatch); }

.legend-dot.mismatch1 { background: var(--mismatch1); }
.legend-dot.mismatch2 { background: var(--mismatch2); }
.legend-dot.mismatch3 { background: var(--mismatch3); }

.flag {
  display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600; white-space: nowrap; border: 1px solid;
}
.flag.out-of-range { color: var(--rank1); border-color: var(--rank1); }
.flag.no-number { color: var(--muted); border-color: var(--border); }

.geo-approx { color: var(--muted); font-size: 11px; font-style: italic; }

/* ── Prijavljeni: „sakrij već provereno” + oznaka u iskačućem prozoru ── */
.hide-checked {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text); cursor: pointer; margin-bottom: 12px;
}
.popup-checked {
  display: flex; align-items: center; gap: 4px;
  margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--ok);
}
/* Obris i pokazivač su sada na `.popup-btn` (reports.css), zajedno sa linkom „Nađi u
   spisku” — dugme i link stoje jedno ispod drugog, pa moraju da budu iste visine. */

/* ── Neprijavljeni: poziv na prijavu unutar iskačućeg prozora ── */
/* Otvara se tek na klik „Dodaj na moju listu” (vidi promptLogin u map.js), pa prozor u
   mirnom stanju ostaje kratak. */
.popup-auth { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.popup-auth-msg { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.popup-btn-ghost {
  background: transparent; color: var(--accent) !important;
  border: 1px solid var(--accent);
}
.popup-btn-ghost:hover { background: var(--accent-soft); color: var(--accent) !important; }

/* Ishod naknadnog dodavanja posle prijave — prozor je tada već zatvoren. */
.map-notice {
  margin: 0 0 12px; padding: 8px 10px; border-radius: 6px;
  background: var(--ok-tint); border: 1px solid var(--ok-border); color: var(--ok); font-size: 13px;
}

/* ── Mehurići klastera u boji sloja ──────────────────────────────────────────
   Podrazumevani markercluster mehurići su zeleni/žuti/narandžasti bez obzira na sloj, pa
   je klaster nad crvenim tačkama izgledao kao tuđ sloj. Mehurić sada uzima rampu svog
   sloja, po istom pravilu koje važi za tačke: manji klaster svetlija nijansa, veći
   zasićenija. Klasu `cluster-<hue>` postavlja createCluster (reports_common.js).

   Ide POSLE vendor/leaflet/MarkerCluster.Default.css (redosled u map.html), pa nadjačava
   podrazumevane boje pri istoj specifičnosti.

   Mastilo broja se bira po nijansi ispod, ne po sloju: na svetlijim krugovima tamno
   mastilo sloja, na zasićenima belo — svaki par je proveren na čitljivost. */
.cluster-rank {
  --cl-s: var(--rank3);  --cl-s-ink: var(--ink-rank);
  --cl-m: var(--rank2);  --cl-m-ink: #fff;
  --cl-l: var(--rank1);  --cl-l-ink: #fff;
}
.cluster-cad {
  --cl-s: var(--cad-no-building);   --cl-s-ink: var(--ink-cad);
  --cl-m: var(--cad-auxiliary);     --cl-m-ink: var(--ink-cad);
  --cl-l: var(--cad-non-residential); --cl-l-ink: #fff;
}
.cluster-pb {
  --cl-s: var(--pb-unknown);              --cl-s-ink: var(--ink-pb);
  --cl-m: var(--pb-possibly-residential); --cl-m-ink: var(--ink-pb);
  --cl-l: var(--pb-non-residential);      --cl-l-ink: var(--ink-pb);
}
.cluster-mismatch {
  --cl-s: var(--mismatch3);  --cl-s-ink: var(--ink-mismatch);
  --cl-m: var(--mismatch2);  --cl-m-ink: var(--ink-mismatch);
  --cl-l: var(--mismatch1);  --cl-l-ink: #fff;
}

/* Oreol je providno belo, a ne svetlija nijansa sloja: tačke već nose beli obrub
   (populate u map.js), pa mehurić tako izgleda kao njihova grupa, a ne kao peta boja. */
.marker-cluster { background: rgba(255, 255, 255, 0.6); }
.marker-cluster div { background: var(--cl-s); color: var(--cl-s-ink); font-weight: 700; }
.marker-cluster-medium div { background: var(--cl-m); color: var(--cl-m-ink); }
.marker-cluster-large div { background: var(--cl-l); color: var(--cl-l-ink); }

/* ── Telefon: panel iznad mape, obe polovine skroluju ── */
@media (max-width: 768px) {
  body { overflow: auto; height: auto; min-height: 100vh; }
  .map-shell { flex-direction: column; }
  #panel { width: auto; max-height: none; border-right: none; border-bottom: 1px solid var(--border); }
  #map { height: 65vh; flex: none; }
}