/* stanje.nasevode.rs: mapa slučajeva (plan 2.2). VLASNIK: T5. Tokeni iz style.css (T12); bez novih heks boja.
   Boja nosi značenje samo za kategoriju tačke (--kat-*). Područja: samo dve nijanse (na konkursu / ostala).
   Oblik tačke: pun krug = javni slučaj, šupalj = „po navodima“, šupalj isprekidan = dojava; tamni obod = zvanično. */

/* ── Okvir i platno ──────────────────────────────────────────────────────────────────────────────────────────── */
.mapa { margin-top: var(--r-5); }
.mapa__okvir { position: relative; }
.mapa__platno {
  position: relative; height: clamp(22rem, 62vh, 46rem); min-height: 0; overflow: hidden;
  background: var(--magla); border: 1px solid var(--tanko);
}
@supports (height: 1svh) { .mapa__platno { height: clamp(22rem, 62svh, 46rem); } }
.mapa__bez-js { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; padding: var(--r-5); text-align: center; color: var(--sivo); }
.mapa--js .mapa__platno .mapa__bez-js:only-child { color: var(--sivo-svetlo); }
.mapa__svg { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; font-family: var(--sans); -webkit-user-select: none; user-select: none; }
.mapa__svg:active { cursor: grabbing; }
.mapa__svg:focus { outline: none; }
.mapa__svg:focus-visible { outline: var(--fokus); outline-offset: -3px; }

/* ── Podloga (debljine ne rastu sa zumom) ────────────────────────────────────────────────────────────────────── */
.mapa__podloga path { vector-effect: non-scaling-stroke; }
.mapa__podrucje { fill: var(--list); stroke: var(--okvir); stroke-width: 0.6; stroke-linejoin: round; transition: opacity 0.2s; }
.mapa__podrucje--konkurs { fill: color-mix(in srgb, var(--noc-2) 13%, var(--list)); stroke: var(--mastilo); stroke-width: 0.8; }
.mapa__podrucje--sporedno { opacity: 0.45; }
.mapa__podrucje--izabrano { stroke: var(--mastilo); stroke-width: 2; opacity: 1; }
.mapa__jezero { fill: color-mix(in srgb, var(--noc-2) 32%, var(--list)); stroke: none; }
.mapa__reka { fill: none; stroke: color-mix(in srgb, var(--noc-2) 38%, var(--list)); stroke-width: 0.8; stroke-linecap: round; stroke-linejoin: round; }
.mapa__reka--glavna { stroke-width: 1.4; }
.mapa__granica { fill: none; stroke: var(--mastilo); stroke-width: 1.4; stroke-linejoin: round; }
.mapa__granica--kim { stroke-width: 1; stroke-dasharray: 5 3; }
@media (prefers-reduced-motion: reduce) { .mapa__podrucje { transition: none; } }

/* ── Tačke: boja = kategorija (--k), oblik = izvor i dokaz ───────────────────────────────────────────────────── */
.mapa__krug { --k: var(--sivo); fill: var(--k); stroke: var(--list); stroke-width: 1.5; }
.mapa__krug--krivolov { --k: var(--kat-krivolov); }
.mapa__krug--cuvanje { --k: var(--kat-cuvanje); }
.mapa__krug--ribocuvar { --k: var(--kat-ribocuvar); }
.mapa__krug--korisnik { --k: var(--kat-korisnik); }
.mapa__krug--pomor { --k: var(--kat-pomor); }
.mapa__krug--radovi { --k: var(--kat-radovi); }
.mapa__krug--drzava { --k: var(--kat-drzava); }
.mapa__krug--dobro { --k: var(--kat-dobro); }
.mapa__krug--d3 { fill: var(--k); stroke: var(--mastilo); stroke-width: 2.5; }
.mapa__krug--d2 { fill: var(--k); stroke: var(--list); stroke-width: 1.5; }
.mapa__krug--d1 { fill: var(--list); stroke: var(--k); stroke-width: 2.75; }
.mapa__krug--dojava { fill: var(--list); stroke: var(--k); stroke-width: 2.25; stroke-dasharray: 2.6 1.9; }

.mapa__cvor { cursor: pointer; outline: none; }
.mapa__pogodak { fill: transparent; stroke: none; }
.mapa__cvor:hover .mapa__pogodak { fill: color-mix(in srgb, var(--list) 55%, transparent); }
.mapa__cvor:focus-visible .mapa__pogodak,
.mapa__cvor--izabran .mapa__pogodak { fill: color-mix(in srgb, var(--akcenat-bledo) 75%, transparent); stroke: var(--akcenat); stroke-width: 3; }
.mapa__grupa-krug { fill: var(--mastilo); stroke: var(--list); stroke-width: 2; }
.mapa__brojac-krug { fill: var(--list); stroke: var(--mastilo); stroke-width: 2; }
.mapa__broj { fill: var(--list); font-size: 12px; font-weight: 600; text-anchor: middle; pointer-events: none; font-variant-numeric: tabular-nums; }
.mapa__cvor--brojac .mapa__broj { fill: var(--mastilo); font-size: 13px; }

/* ── Dugmad, savet, brojač, potpis ───────────────────────────────────────────────────────────────────────────── */
.mapa__kontrole { position: absolute; top: var(--r-2); left: var(--r-2); display: flex; flex-direction: column; align-items: flex-start; gap: var(--r-1); z-index: 2; }
.mapa__kontrole[hidden] { display: none; }
.mapa__dugme {
  min-width: 2.5rem; height: 2.5rem; padding: 0 0.6rem; font: inherit; font-size: 1.25rem; line-height: 1; color: var(--mastilo);
  background: var(--list); border: 1px solid var(--okvir); border-radius: var(--zaobljenje); box-shadow: var(--senka-1); cursor: pointer;
}
.mapa__dugme--tekst { font-size: var(--t-sitno); font-weight: 600; }
.mapa__dugme:hover { background: var(--magla); }
.mapa__savet {
  position: absolute; left: 50%; bottom: var(--r-4); transform: translateX(-50%); z-index: 3; margin: 0; max-width: calc(100% - 2rem);
  padding: var(--r-2) var(--r-3); font-size: var(--t-malo); color: var(--list); background: var(--mastilo); border-radius: var(--zaobljenje); pointer-events: none; text-align: center;
}
.mapa__savet[hidden] { display: none; }
.mapa__brojac { margin-top: var(--r-2); font-size: var(--t-malo); color: var(--sivo); }
.mapa__brojac[hidden] { display: none; }
.mapa__potpis { margin-top: var(--r-2); font-size: var(--t-sitno); color: var(--sivo); }

/* ── Kartica: donji list na telefonu, bočno na računaru ──────────────────────────────────────────────────────── */
.mapa__kartica {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; max-height: min(72vh, 36rem); overflow-y: auto; overscroll-behavior: contain;
  padding: var(--r-2) var(--gutter) var(--r-5); background: var(--list); border-top: 3px solid var(--mastilo); box-shadow: var(--senka-2);
}
.mapa__kartica[hidden] { display: none; }
.mapa__kartica:focus { outline: none; }
@media (min-width: 56em) {
  .mapa__kartica {
    position: absolute; left: auto; top: var(--r-2); right: var(--r-2); bottom: var(--r-2); z-index: 4; width: min(25rem, 46%); max-height: none;
    padding: var(--r-2) var(--r-4) var(--r-4); border: 1px solid var(--tanko); border-top: 3px solid var(--mastilo);
  }
}
.mapa-kartica__vrh { display: flex; justify-content: space-between; align-items: center; gap: var(--r-2); margin: 0 calc(-1 * var(--r-2)) var(--r-1); }
.mapa-kartica__zatvori, .mapa-kartica__nazad {
  min-width: 2.75rem; min-height: 2.75rem; padding: 0 var(--r-2); font: inherit; color: var(--mastilo); background: none; border: 0; cursor: pointer;
}
.mapa-kartica__zatvori { font-size: 1.75rem; line-height: 1; }
.mapa-kartica__nazad { font-size: var(--t-malo); font-weight: 600; }
.mapa-kartica__zatvori:hover, .mapa-kartica__nazad:hover { background: var(--magla); }
.kartica-slucaja.mapa-kartica { display: block; margin: 0; padding: 0; border: 0; box-shadow: none; background: none; }
.mapa-kartica > * + * { margin-top: var(--r-2); }
.mapa-kartica .kartica-slucaja__naslov { font-size: 1.1875rem; }
.mapa-kartica__ucitava { font-size: var(--t-malo); color: var(--sivo); }
.mapa-kartica__detalji > * + * { margin-top: var(--r-3); }
.mapa-kartica__podaci { display: grid; grid-template-columns: minmax(6.5rem, max-content) minmax(0, 1fr); gap: var(--r-1) var(--r-3); margin: var(--r-3) 0 0; font-size: var(--t-malo); border-top: 1px solid var(--tanko-2); padding-top: var(--r-2); }
.mapa-kartica__podaci dt { color: var(--sivo); }
.mapa-kartica__podaci dd { margin: 0; }
.mapa-kartica__podnaslov { font-size: var(--t-sitno); font-weight: 600; color: var(--sivo); text-transform: uppercase; letter-spacing: 0.04em; }
.mapa-kartica__izvori { margin: var(--r-1) 0 0; padding: 0; list-style: none; font-size: var(--t-malo); }
.mapa-kartica__izvori li + li { margin-top: var(--r-1); }
.mapa-kartica__izvori .ikonica { margin-left: 0.25em; }
.mapa-kartica__vise { margin-top: var(--r-4); font-weight: 600; }

.mapa-grupa__naslov { font-size: var(--t-h3); margin: 0; }
.mapa-grupa__mesto { margin-top: var(--r-1); font-size: var(--t-malo); color: var(--sivo); }
.mapa-grupa__lista { margin: var(--r-3) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--tanko-2); }
.mapa-grupa__lista li { margin: 0; border-bottom: 1px solid var(--tanko-2); }
.mapa-grupa__stavka { display: flex; gap: var(--r-3); align-items: flex-start; width: 100%; padding: var(--r-3) var(--r-1); font: inherit; text-align: left; color: var(--mastilo); background: none; border: 0; cursor: pointer; }
.mapa-grupa__stavka:hover { background: var(--papir); }
.mapa-grupa__tekst { display: flex; flex-direction: column; gap: 0.15em; min-width: 0; }
.mapa-grupa__stavka-naslov { font-weight: 600; line-height: 1.3; }
.mapa-grupa__meta { font-size: var(--t-sitno); color: var(--sivo); }

/* HTML znak tačke (spisak u grupi, filteri): isti kod kao SVG krug */
.mapa-grupa__znak, .mapa-filteri__tacka {
  flex: none; display: inline-block; width: 0.85rem; height: 0.85rem; margin-top: 0.25em; border-radius: 50%;
  background: var(--k); border: 1.5px solid var(--list); box-shadow: 0 0 0 1px var(--tanko);
}
.mapa-grupa__znak.mapa__krug--d3 { border: 2px solid var(--mastilo); box-shadow: none; }
.mapa-grupa__znak.mapa__krug--d1 { background: var(--list); border: 2.5px solid var(--k); box-shadow: none; }
.mapa-grupa__znak.mapa__krug--dojava { background: var(--list); border: 2px dashed var(--k); box-shadow: none; }
.mapa-filteri__tacka { margin-top: 0; }

/* ── Legenda ─────────────────────────────────────────────────────────────────────────────────────────────────── */
.mapa-legenda { margin-top: var(--r-3); font-size: var(--t-malo); border-top: 1px solid var(--tanko); }
.mapa-legenda__naslov { padding: var(--r-2) 0; font-weight: 600; cursor: pointer; }
.mapa-legenda__telo { display: grid; gap: var(--r-4); padding-bottom: var(--r-3); }
@media (min-width: 48em) { .mapa-legenda__telo { grid-template-columns: 1.4fr 1fr 1fr; } }
.mapa-legenda__podnaslov { margin: 0 0 var(--r-1); font-size: var(--t-sitno); font-weight: 600; color: var(--sivo); text-transform: uppercase; letter-spacing: 0.04em; }
.mapa-legenda__lista { margin: 0; padding: 0; list-style: none; }
.mapa-legenda__lista li { display: flex; align-items: center; gap: 0.4em; margin: 0.2em 0; }
.mapa-legenda__lista .ikonica { color: var(--sivo); }
.mapa-legenda__znak { flex: none; width: 1.25rem; height: 1.25rem; overflow: visible; }
.mapa-legenda__napomena { margin-top: var(--r-2); font-size: var(--t-sitno); color: var(--sivo); }
.mapa-legenda__polje { flex: none; display: inline-block; width: 1.25rem; height: 0.9rem; background: var(--list); border: 1px solid var(--okvir); }
.mapa-legenda__polje--konkurs { background: color-mix(in srgb, var(--noc-2) 13%, var(--list)); border-color: var(--mastilo); }

/* ── Filteri ─────────────────────────────────────────────────────────────────────────────────────────────────── */
.mapa-filteri { margin-bottom: var(--r-3); }
.mapa-filteri[hidden] { display: none; }
.mapa-filteri__sklopivo { background: var(--list); border: 1px solid var(--tanko); }
.mapa-filteri__dugme { padding: var(--r-2) var(--r-3); min-height: 2.75rem; display: flex; align-items: center; font-weight: 600; cursor: pointer; }
.mapa-filteri__aktivno { margin-left: 0.35em; font-weight: 400; color: var(--sivo); }
.mapa-filteri__telo { display: grid; gap: var(--r-3); padding: 0 var(--r-3) var(--r-3); border-top: 1px solid var(--tanko-2); }
.mapa-filteri__grupa { margin: 0; padding: var(--r-2) 0 0; border: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: var(--r-1) var(--r-2); align-items: center; }
.mapa-filteri__grupa legend { float: left; width: 100%; padding: 0; margin-bottom: var(--r-1); font-size: var(--t-sitno); font-weight: 600; color: var(--sivo); text-transform: uppercase; letter-spacing: 0.04em; }
.mapa-filteri__cip {
  display: inline-flex; align-items: center; gap: 0.4em; min-height: 2.5rem; padding: 0.2em 0.65em 0.2em 0.45em;
  font-size: var(--t-malo); line-height: 1.25; border: 1px solid var(--tanko); border-radius: var(--zaobljenje); background: var(--list); cursor: pointer;
}
.mapa-filteri__cip:has(input:checked) { border-color: var(--mastilo); background: var(--magla); }
.mapa-filteri__cip:has(input:disabled) { opacity: 0.55; cursor: default; }
.mapa-filteri__cip input { margin: 0; width: 1.05rem; height: 1.05rem; accent-color: var(--mastilo); }
.mapa-filteri__cip .ikonica { color: var(--sivo); }
.mapa-filteri__sve { font-size: var(--t-sitno); color: var(--sivo); }
.mapa-filteri__link, .mapa-filteri__ponisti, .mapa-lista__na-mapi {
  font: inherit; color: var(--mastilo); background: none; border: 0; padding: 0.3em 0.15em; text-decoration: underline; text-decoration-color: var(--tanko); text-underline-offset: 0.2em; cursor: pointer;
}
.mapa-filteri__link:hover, .mapa-filteri__ponisti:hover, .mapa-lista__na-mapi:hover { text-decoration-color: var(--akcenat-svetlo); }
.mapa-filteri__red { display: flex; flex-wrap: wrap; gap: var(--r-3); }
.mapa-filteri__polje { display: flex; flex-direction: column; gap: var(--r-1); font-size: var(--t-sitno); font-weight: 600; color: var(--sivo); text-transform: uppercase; letter-spacing: 0.04em; flex: 1 1 12rem; }
.mapa-filteri__polje select {
  min-height: 2.5rem; padding: 0 var(--r-2); font: inherit; font-size: var(--t-malo); font-weight: 400; text-transform: none; letter-spacing: 0;
  color: var(--mastilo); background: var(--list); border: 1px solid var(--okvir); border-radius: var(--zaobljenje);
}
.mapa-filteri__dno { margin: 0; font-size: var(--t-malo); }
@media (min-width: 56em) {
  .mapa-filteri__telo { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--r-5); }
  .mapa-filteri__grupa--kat { grid-column: 1 / -1; }
  .mapa-filteri__dno { grid-column: 1 / -1; }
}

/* ── Lista ispod mape ────────────────────────────────────────────────────────────────────────────────────────── */
.mapa-lista { margin-top: var(--r-5); }
.mapa-lista tr[hidden] { display: none !important; }
.mapa-lista__vrsta { display: inline-flex; align-items: center; gap: 0.35em; }
.mapa-lista__vrsta .ikonica { color: var(--sivo); }
.mapa-lista__na-mapi { margin-left: 0.5em; font-size: var(--t-sitno); color: var(--sivo); white-space: nowrap; }
.mapa-lista__dno { margin-top: var(--r-3); font-size: var(--t-malo); color: var(--sivo); }

@media print {
  .mapa-filteri, .mapa__kontrole, .mapa__kartica, .mapa__savet, .mapa-lista__na-mapi { display: none !important; }
  .mapa__platno { height: 60vh; border: 0; }
}