/* ============================================================
   Park Čair — „Šta se menja": kartice izmena (bez ocena), filter po temi,
   detalj izmene sa izvorom uz svaki deo, snimci strana, uvećanje i mapa pre/posle.
   Učitava se posle style.css i cair.css (includes/header.php).
   ============================================================ */

/* Zelena umesto indigo boja koje su upisane u style.css (GUP kopija) */
.izvor-link { border-color: #bbf7d0; }
.izvor-link:hover { background: #dcfce7; color: #14532d; }
.izvor-link-akcenat:hover { background: #166534; color: #fff; }
.stranica-traka:not(.traka-uvod) { background: linear-gradient(120deg, #052e16 0%, #14532d 48%, #166534 100%); color: #dcfce7; }
.stranica-traka:not(.traka-uvod)::after { background: radial-gradient(circle, rgba(74, 222, 128, .28), transparent 65%); }
.stranica-traka:not(.traka-uvod) .putanja, .stranica-traka:not(.traka-uvod) .putanja a { color: rgba(220, 252, 231, .82); }
.stranica-traka:not(.traka-uvod) .putanja i { color: rgba(187, 247, 208, .5); }
.stranica-traka:not(.traka-uvod) .eyebrow { color: rgba(187, 247, 208, .92); }
.stranica-traka:not(.traka-uvod) p { color: rgba(240, 253, 244, .94); }
.stranica-traka:not(.traka-uvod) .izvor-link-akcenat { color: #14532d; }

/* ---------- filteri ---------- */
.filteri {
  position: sticky; top: 0; z-index: 20;
  background: rgba(241, 245, 249, .95); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--card-border);
  margin: 0 -1.5rem 1.2rem; padding: .7rem 1.5rem .75rem;
}
.filter-red { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.filter-red + .filter-red { margin-top: .5rem; }
.filter-oznaka { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: #94a3b8; margin-right: .2rem; }
.filter-cip {
  display: inline-flex; align-items: center; gap: .35rem;
  border: 1px solid var(--card-border); background: #fff; color: var(--ink-2);
  border-radius: 999px; padding: .3rem .72rem; font-size: .82rem; line-height: 1.2; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.filter-cip .broj { opacity: .6; font-variant-numeric: tabular-nums; font-size: .76rem; }
.filter-cip:hover { border-color: #86efac; color: #14532d; }
.filter-cip.je-aktivan { background: #14532d; border-color: #14532d; color: #fff; }
.filter-cip.je-aktivan .broj { opacity: .85; }
.filter-rezultat { font-size: .82rem; color: var(--ink-2); }
.filter-rezultat button { border: 0; background: none; color: #15803d; text-decoration: underline; padding: 0; font-size: .82rem; }
@media (max-width: 991.98px) {
  .filteri { position: static; margin: 0 0 1rem; padding: .6rem 0; background: none; backdrop-filter: none; }
  .filter-kategorije { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .2rem; }
  .filter-kategorije .filter-cip { flex: 0 0 auto; }
}

/* ---------- mreža kartica ---------- */
.mreza-promena { display: grid; grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); gap: 1rem; }
.mreza-promena > [hidden] { display: none !important; }
.promena-card {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--card-border); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; color: var(--ink);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.promena-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -16px rgba(15, 23, 42, .35); border-color: #86efac; }
.promena-cover { position: relative; display: block; height: 170px; background: #e2e8f0 center / cover no-repeat; }
.promena-cover::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, transparent 40%, transparent 72%, rgba(0, 0, 0, .22) 100%);
}
.promena-celina {
  position: absolute; top: .7rem; right: .7rem; z-index: 2;
  background: rgba(15, 23, 42, .62); color: #fff; backdrop-filter: blur(3px);
  font-size: .72rem; font-weight: 600; border-radius: 999px; padding: .2rem .55rem;
}
.promena-telo { padding: .85rem 1rem 1rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.promena-kat { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--kat, #64748b); }
.promena-kat i { margin-right: .25rem; }
.promena-card h3 { font-size: 1.02rem; font-weight: 700; line-height: 1.3; margin: 0; }
.promena-card h3 a { color: inherit; text-decoration: none; }
.promena-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.promena-kratko { font-size: .87rem; color: var(--ink-2); margin: 0; line-height: 1.45; }
/* zaključak na kartici: neutralno, bez boje ocene — samo kad smo nešto primetili */
.promena-zakljucak {
  margin-top: auto; padding-top: .5rem; border-top: 1px dashed var(--card-border);
  font-size: .82rem; line-height: 1.4; color: #475569; display: flex; gap: .45rem;
}
.promena-zakljucak i { flex: 0 0 auto; margin-top: .1rem; color: #94a3b8; }
.promena-vazno {
  display: inline-flex; align-items: center; gap: .2rem; color: #b91c1c; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px; margin-left: .4rem;
  display: none;
}
.mreza-prazno { text-align: center; color: var(--ink-2); padding: 3rem 1rem; border: 2px dashed var(--card-border); border-radius: var(--radius); }

/* ============================================================
   Detalj izmene (promena.php)
   ============================================================ */
.zaglavlje-promena { background-size: cover !important; background-position: center !important; }
.zaglavlje-promena .stranica-traka-sadrzaj { padding-top: 1.8rem; padding-bottom: 2rem; }
.zaglavlje-promena h1 { font-size: 2rem; text-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
.zaglavlje-promena p.kratko { font-size: 1.05rem; text-shadow: 0 1px 8px rgba(0, 0, 0, .4); }
.oznake-red { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; position: relative; z-index: 1; }
.oznaka-traka {
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); color: #fff;
  border-radius: 999px; padding: .2rem .65rem; font-size: .78rem; text-decoration: none;
}
a.oznaka-traka:hover { background: rgba(255, 255, 255, .25); color: #fff; }

.odeljak { margin-bottom: 1.9rem; scroll-margin-top: 1rem; }
.odeljak-naslov { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; font-size: 1.12rem; font-weight: 700; margin: 0 0 .8rem; }
.odeljak-naslov > i { color: var(--accent); }
.odeljak-naslov .pod { font-size: .8rem; font-weight: 400; color: var(--ink-2); }

/* sada → posle */
.pre-posle { display: grid; grid-template-columns: 1fr auto 1fr; gap: .8rem; align-items: stretch; }
.pp-strana { background: #fff; border: 1px solid var(--card-border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; }
.pp-slika { display: block; aspect-ratio: 16 / 10; background: #e2e8f0 center / cover no-repeat; position: relative; }
.pp-slika .strana-lupa { opacity: .85; }
.pp-bez-slike {
  aspect-ratio: 16 / 10; display: grid; place-items: center; text-align: center; padding: 1rem;
  background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 10px, #f1f5f9 10px, #f1f5f9 20px);
  color: #94a3b8; font-size: .85rem;
}
.pp-bez-slike i { display: block; font-size: 1.8rem; margin-bottom: .3rem; }
.pp-tekst { padding: .85rem 1rem 1rem; }
.pp-oznaka { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; border-radius: 6px; padding: .15rem .5rem; margin-bottom: .45rem; }
.pp-sada .pp-oznaka { background: #e2e8f0; color: #334155; }
.pp-posle .pp-oznaka { background: #dcfce7; color: #166534; }
.pp-tekst p { margin: 0; font-size: .93rem; color: var(--ink); line-height: 1.55; }
.pp-strelica { display: grid; place-items: center; font-size: 1.8rem; color: #4ade80; }
.pp-natpis { font-size: .74rem; color: #94a3b8; padding: .35rem 1rem 0; }
@media (max-width: 767.98px) {
  .pre-posle { grid-template-columns: 1fr; }
  .pp-strelica { transform: rotate(90deg); font-size: 1.4rem; }
}

/* ---------- planirana izmena: zaključak + tekst + izvori, brojke kao podnožje kartice ---------- */
.planirano, .pitanje {
  background: #fff; border: 1px solid var(--card-border); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.planirano-telo, .pitanje-telo { padding: 1.15rem 1.3rem 1.2rem; }
.planirano p, .planirano li, .pitanje p, .pitanje li { font-size: 1rem; line-height: 1.6; }
.planirano p, .planirano li { color: var(--ink); }
.pitanje-telo p, .pitanje-telo li { color: #334155; }
.planirano-telo > p:last-of-type, .pitanje-telo > p:last-of-type { margin-bottom: 0; }
/* zaključak: prvi pasus, blago naglašen, bez okvira i ocene */
.planirano .planirano-zakljucak {
  display: flex; gap: .6rem; font-weight: 600; color: var(--ink);
  padding-bottom: .85rem; margin-bottom: .85rem; border-bottom: 1px solid var(--card-border);
}
.planirano-zakljucak i { flex: 0 0 auto; color: #64748b; font-size: 1.05rem; line-height: 1.5; }
/* brojke: jedna traka, onoliko jednakih kolona koliko ima brojki (--n), bez praznih mesta */
.planirano-brojke {
  display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
  background: #f8fafc; border-top: 1px solid var(--card-border);
}
.planirano-brojke .pb-brojka { padding: .85rem 1.1rem .9rem; min-width: 0; }
.planirano-brojke .pb-brojka + .pb-brojka { border-left: 1px solid var(--card-border); }
.planirano-brojke strong {
  display: block; font-size: 1.3rem; font-weight: 800; line-height: 1.15; color: var(--ink);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.planirano-brojke span { display: block; margin-top: .25rem; font-size: .8rem; line-height: 1.35; color: var(--ink-2); }
@media (max-width: 575.98px) {
  .planirano-brojke { grid-template-columns: 1fr 1fr; }
  .planirano-brojke .pb-brojka + .pb-brojka { border-left: 0; }
  .planirano-brojke .pb-brojka:nth-child(even) { border-left: 1px solid var(--card-border); }
  .planirano-brojke .pb-brojka:nth-child(n+3) { border-top: 1px solid var(--card-border); }
  .planirano-brojke .pb-brojka:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---------- tri pitanja: naslov u traci sa pozadinom, kartice jasno razdvojene ---------- */
.pitanja { display: flex; flex-direction: column; gap: 1.5rem; }
.pitanje { scroll-margin-top: 1rem; }
.pitanje .pitanje-naslov {
  display: flex; align-items: center; gap: .6rem; margin: 0;
  padding: .8rem 1.3rem; background: #f1f5f9; border-bottom: 1px solid var(--card-border);
  font-size: 1.05rem; font-weight: 700; color: var(--ink);
}
.pitanje-naslov i { color: var(--accent); font-size: 1.15rem; }
/* pododeljci uz „Da li je preplaćeno?": stavke predmera i naša procena */
.pitanje-dodatak { padding: 1.1rem 1.3rem 1.3rem; border-top: 1px dashed var(--card-border); scroll-margin-top: 1rem; }
.pitanje-dodatak h4 { display: flex; align-items: center; gap: .5rem; font-size: .95rem; font-weight: 700; margin: 0 0 .35rem; color: var(--ink); }
.pitanje-dodatak h4 i { color: #64748b; }
.pitanje .dodatak-napomena { font-size: .85rem; line-height: 1.5; color: var(--ink-2); margin: 0 0 .8rem; max-width: 48rem; }
.pitanje .dodatak-napomena strong { color: var(--ink); }

/* red izvora ispod dela izmene: čipovi koji otvaraju samo tu stranu u popup-u */
.izvori-red { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .7rem; }
.izvori-oznaka { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: #94a3b8; margin-right: .1rem; }
.izvor-cip {
  display: inline-flex; align-items: center; gap: .3rem; max-width: 100%;
  border: 1px solid #bbf7d0; background: #f0fdf4; color: #166534;
  border-radius: 999px; padding: .18rem .6rem; font-size: .78rem; line-height: 1.3; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.izvor-cip:hover { background: #dcfce7; border-color: #86efac; color: #14532d; }
.izvor-cip i { font-size: .8rem; }
.pp-tekst .izvori-red { margin-top: .6rem; }

/* tabele cena i predmera: blok sa ivicom, prozračne ćelije */
.tabela-okvir { border: 1px solid var(--card-border); border-radius: 10px; }
.tabela-cena { --bs-table-border-color: #edf0f4; }
.tabela-cena > :not(caption) > * > * { padding: .65rem .8rem; font-size: .87rem; vertical-align: top; }
.tabela-cena > :not(caption) > * > *:first-child { padding-left: 1rem; }
.tabela-cena > :not(caption) > * > *:last-child { padding-right: 1rem; }
.tabela-cena thead th {
  background: #f8fafc; color: #64748b; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px; padding-top: .55rem; padding-bottom: .55rem;
}
.tabela-cena tbody tr:last-child > * { border-bottom-width: 0; }
.tabela-cena tfoot td { background: #f8fafc; font-weight: 700; border-top: 1px solid var(--card-border); border-bottom-width: 0; }
.tabela-cena .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabela-cena .opis-stavke { min-width: 15rem; max-width: 34rem; line-height: 1.45; }
.tabela-cena .opis-stavke small { color: var(--ink-2); display: block; margin-top: .25rem; font-size: .78rem; line-height: 1.4; }
.tabela-cena .jedinica { color: #94a3b8; }
.tabela-procena .num { font-weight: 600; }
.tabela-procena .izvor-procene {
  display: block; margin-top: .25rem; max-width: 15rem; margin-left: auto;
  white-space: normal; font-weight: 400; font-size: .75rem; line-height: 1.35; color: #64748b;
}

/* ---------- snimci strana ---------- */
.strane-mreza { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .8rem; }
.strana-snimak { margin: 0; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--card-border); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); text-decoration: none; color: var(--ink); }
.strana-uvecaj { position: relative; display: block; background: #f8fafc; }
.strana-uvecaj img { display: block; width: 100%; height: 13rem; object-fit: cover; object-position: top; }
.strana-lupa {
  position: absolute; right: .5rem; bottom: .5rem; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(15, 23, 42, .62); color: #fff; display: grid; place-items: center; font-size: .9rem;
  transition: opacity .15s, background .15s;
}
.strana-uvecaj:hover .strana-lupa, .pp-slika:hover .strana-lupa { background: var(--accent); }
.strana-opis { padding: .5rem .65rem .6rem; display: flex; flex-direction: column; gap: .15rem; font-size: .78rem; flex: 1; }
.strana-dok { font-weight: 600; color: var(--ink); }
.strana-natpis { color: var(--ink-2); line-height: 1.35; }
.strana-bez-slike .strana-prazno { display: grid; place-items: center; height: 8rem; font-size: 2rem; color: #cbd5e1; background: #f8fafc; }

/* citat sa sličicom strane */
.citat-snimak { display: flex; gap: .9rem; align-items: flex-start; }
.citat-strana { position: relative; flex: 0 0 auto; width: 104px; border-radius: 8px; overflow: hidden; border: 1px solid var(--card-border); background: #fff; box-shadow: 0 2px 8px -3px rgba(15, 23, 42, .25); }
.citat-strana img { display: block; width: 100%; height: 140px; object-fit: cover; object-position: top; }
.citat-strana .strana-lupa { width: 26px; height: 26px; font-size: .75rem; right: .3rem; bottom: .3rem; }
.citat-telo { flex: 1; min-width: 0; }
.citat-dok { color: var(--ink-2); }
.dok-linkovi { display: flex; flex-wrap: wrap; gap: .2rem .9rem; margin-top: .3rem; font-size: .78rem; }
.dok-linkovi a { text-decoration: none; white-space: nowrap; }
.dok-linkovi a:hover { text-decoration: underline; }
.dok-linkovi a.dok-ceo { color: #64748b; }
.strana-opis .dok-linkovi { margin-top: auto; padding-top: .25rem; flex-direction: column; gap: .1rem; font-size: .74rem; }
@media (max-width: 575.98px) { .citat-strana { width: 76px; } .citat-strana img { height: 104px; } }

/* ---------- uvećanje (lightbox) ---------- */
.uvecanje { position: fixed; inset: 0; z-index: 2000; background: rgba(2, 6, 23, .9); display: none; flex-direction: column; }
.uvecanje.otvoreno { display: flex; }
.uvecanje-traka { display: flex; align-items: center; gap: .6rem; padding: .6rem 1rem; color: #e2e8f0; font-size: .9rem; }
.uvecanje-traka .naslov { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uvecanje-traka a, .uvecanje-traka button {
  color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px; padding: .3rem .8rem; font-size: .82rem; text-decoration: none; white-space: nowrap;
}
.uvecanje-traka a:hover, .uvecanje-traka button:hover { background: rgba(255, 255, 255, .24); }
.uvecanje-telo { flex: 1; overflow: auto; display: flex; justify-content: center; align-items: flex-start; padding: 0 1rem 1rem; }
.uvecanje-telo img { max-width: 100%; max-height: calc(100vh - 4.5rem); height: auto; background: #fff; box-shadow: 0 10px 40px rgba(0, 0, 0, .6); cursor: zoom-in; }
.uvecanje-telo.puna img { max-width: none; max-height: none; cursor: zoom-out; }
body.bez-skrola { overflow: hidden; }

/* ---------- mapa pre/posle ---------- */
.mapa-pp { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.mapa-pp-polje { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--card-border); box-shadow: var(--shadow); background: #e5e7eb; }
.mapa-pp-polje .mapa-okvir { height: 430px; border: 0; border-radius: 0; }
.mapa-pp-oznaka {
  position: absolute; z-index: 500; top: .6rem; left: 3.2rem; pointer-events: none;
  background: rgba(15, 23, 42, .8); color: #fff; font-size: .76rem; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; border-radius: 8px; padding: .3rem .6rem;
}
.mapa-pp-oznaka.posle { background: rgba(21, 128, 61, .92); }
.mapa-pp-legenda { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .8rem; color: var(--ink-2); margin-top: .5rem; }
.mapa-pp-legenda span { display: inline-flex; align-items: center; gap: .35rem; }
.mapa-pp-legenda i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; border: 1px solid rgba(0, 0, 0, .15); }
@media (max-width: 767.98px) {
  .mapa-pp { grid-template-columns: 1fr; }
  .mapa-pp-polje .mapa-okvir { height: 320px; }
}
.google-okvir { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--card-border); box-shadow: var(--shadow); background: #e5e7eb; }
.google-okvir iframe { display: block; width: 100%; height: 320px; border: 0; }

/* bočna kolona detalja */
.bocna-kartica { background: #fff; border: 1px solid var(--card-border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.1rem; margin-bottom: 1rem; }
.bocna-kartica h3 { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: #94a3b8; margin: 0 0 .6rem; }
.dok-lista { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.dok-lista a { display: flex; gap: .5rem; align-items: flex-start; font-size: .86rem; text-decoration: none; line-height: 1.35; }
.dok-lista a i { color: #dc2626; margin-top: .1rem; }
.dok-lista .meta { display: block; font-size: .72rem; color: #94a3b8; }
.trazimo-kartica {
  background: #fff; border: 1px solid #f3c4c9; border-top: 5px solid #c8202f; border-radius: var(--radius);
  box-shadow: 0 12px 28px -16px rgba(200, 32, 47, .45); padding: 1.1rem 1.15rem 1.2rem; margin-bottom: 1rem;
}
.trazimo-kartica h3 { font-size: 1.05rem; font-weight: 800; color: #1b1f4d; margin: 0 0 .55rem; display: flex; align-items: center; }
.trazimo-kartica h3 i { color: #c8202f; }
.trazimo-tekst { font-size: .95rem; line-height: 1.5; color: #1b1f4d; }
.trazimo-poziv { font-size: .82rem; color: #64748b; margin: .7rem 0 .7rem; }
.btn-trazimo { background: #c8202f; border-color: #c8202f; color: #fff; font-weight: 700; }
.btn-trazimo:hover, .btn-trazimo:focus { background: #a51a27; border-color: #a51a27; color: #fff; }
.srodne-lista { display: flex; flex-direction: column; gap: .55rem; }
.srodna { display: flex; gap: .6rem; align-items: center; text-decoration: none; color: var(--ink); font-size: .85rem; line-height: 1.3; }
.srodna .srodna-slika { width: 56px; height: 42px; border-radius: 7px; flex: 0 0 auto; background: #e2e8f0 center / cover; }
.srodna:hover { color: var(--accent); }

/* veza sloja mape sa stranama dokumenta (mapa.php) */
.sloj-dok { margin-left: .25rem; border: 0; background: none; color: #15803d; padding: 0 .15rem; font-size: .92rem; line-height: 1; }
.sloj-dok:hover { color: #14532d; }
.opis-sloja { border-top: 3px solid var(--accent); }
.opis-sloja .strane-mreza { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
.opis-sloja .strana-uvecaj img { height: 10rem; }
.popup-strane { display: flex; gap: .35rem; margin: .35rem 0; }
.popup-strane a { display: block; width: 58px; border: 1px solid #e2e8f0; border-radius: 5px; overflow: hidden; }
.popup-strane img { display: block; width: 100%; height: 76px; object-fit: cover; object-position: top; }

@media print {
  .filteri, .mapa-pp, .google-okvir, .uvecanje { display: none !important; }
  .promena-card { break-inside: avoid; box-shadow: none; }
}