/* ============================================================
   GUP Niša — informativni sajt za građane
   Admin-panel izgled: tamni sidebar, svetli sadržaj, kartice.
   ============================================================ */

:root {
  --sb-width: 272px;
  --sb-bg: #0f172a;
  --sb-bg-2: #1e293b;
  --sb-text: #94a3b8;
  --sb-text-strong: #e2e8f0;
  --accent: #4f46e5;
  --accent-soft: #eef2ff;
  --body-bg: #f1f5f9;
  --card-border: #e2e8f0;
  --ink: #0f172a;
  --ink-2: #475569;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 4px 16px -6px rgba(15, 23, 42, .08);
}

/* scrollbar-gutter: traka za skrol se uvek računa, pa se sadržaj ne pomera
   levo-desno kad se pređe sa duge strane na kratku. */
html { scroll-behavior: smooth; scrollbar-gutter: stable; }

body {
  background: var(--body-bg);
  color: var(--ink);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
  min-height: 100vh;
}

.layout { display: flex; min-height: 100vh; }

/* ---------------- Sidebar ---------------- */
.sidebar {
  width: var(--sb-width);
  background: linear-gradient(180deg, var(--sb-bg) 0%, #111c33 100%);
  color: var(--sb-text);
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  /* Meni skroluje sam za sebe: kad se dođe do njegovog kraja, skrol ne prelazi
     na stranu iza. Vraćanje položaja mora biti trenutno, bez animacije. */
  overscroll-behavior: contain;
  scroll-behavior: auto;
  scrollbar-width: thin;
  scrollbar-color: #334155 transparent;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1.15rem 1.25rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(148, 163, 184, .12);
}
.brand-mark {
  width: 42px; height: 42px;
  border-radius: 12px;
  overflow: hidden;
  display: grid; place-items: center;
  flex: 0 0 auto;
  box-shadow: 0 6px 14px -4px rgba(99, 102, 241, .55);
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.brand-text { line-height: 1.15; }
.brand-text strong { color: #fff; font-size: 1.05rem; display: block; letter-spacing: .2px; }
.brand-text small { color: var(--sb-text); font-size: .72rem; text-transform: uppercase; letter-spacing: .6px; }

.sidebar-nav { padding: .9rem .75rem 1rem; flex: 1; }
.nav-label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #64748b;
  padding: 1rem .55rem .45rem;
  font-weight: 600;
}
.nav-item-link {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .56rem .65rem;
  margin-bottom: 2px;
  border-radius: 10px;
  color: var(--sb-text);
  text-decoration: none;
  font-size: .92rem;
  transition: background .15s, color .15s;
}
.nav-item-link i { font-size: 1.05rem; width: 1.35rem; text-align: center; flex: 0 0 auto; }
.nav-item-link span:first-of-type { flex: 1; }
.nav-item-link:hover { background: rgba(148, 163, 184, .1); color: var(--sb-text-strong); }
.nav-item-link.active {
  background: linear-gradient(90deg, rgba(99, 102, 241, .22), rgba(99, 102, 241, .08));
  color: #fff;
  box-shadow: inset 3px 0 0 var(--accent);
}
.nav-count {
  font-size: .7rem;
  background: rgba(148, 163, 184, .15);
  color: #cbd5e1;
  border-radius: 20px;
  padding: .1rem .5rem;
  font-variant-numeric: tabular-nums;
}
.nav-item-link.active .nav-count { background: rgba(255, 255, 255, .18); color: #fff; }

.sidebar-foot {
  padding: .9rem 1.15rem 1.1rem;
  border-top: 1px solid rgba(148, 163, 184, .12);
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.sidebar-foot-napomena { font-size: .74rem; color: #64748b; }
.sidebar-foot .btn-pismo {
  align-self: flex-start;
  background: rgba(148, 163, 184, .08);
  border-color: rgba(148, 163, 184, .25);
  color: var(--sb-text);
}
.sidebar-foot .btn-pismo:hover { background: rgba(148, 163, 184, .16); color: var(--sb-text-strong); }

.sidebar-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, .5);
  z-index: 1035;
}
body.sidebar-open .sidebar-backdrop { display: block; }

/* ---------------- Glavni deo ---------------- */
.main {
  flex: 1;
  margin-left: var(--sb-width);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar {
  position: sticky; top: 0; z-index: 1020;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .65rem 1.5rem;
}
.topbar-brand { display: flex; align-items: center; flex: 0 0 auto; }
.topbar-brand img {
  width: 36px; height: 36px;
  border-radius: 10px;
  object-fit: cover;
}
.topbar-search { position: relative; flex: 1; max-width: 480px; }
.topbar-search i {
  position: absolute; left: .85rem; top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
}
.topbar-search .form-control {
  padding-left: 2.4rem;
  border-radius: 12px;
  background: #f8fafc;
  border-color: var(--card-border);
}
.topbar-search .form-control:focus {
  background: #fff;
  border-color: #c7d2fe;
  box-shadow: 0 0 0 .2rem rgba(79, 70, 229, .12);
}
.btn-icon {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 12px;
  color: var(--ink-2);
  border: 1px solid transparent;
}
.btn-icon:hover { background: #f1f5f9; color: var(--ink); }
.btn-pismo {
  border-radius: 12px;
  border: 1px solid var(--card-border);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .5px;
  color: var(--ink-2);
  padding: .5rem .8rem;
}
.btn-pismo:hover { background: var(--accent-soft); color: var(--accent); border-color: #c7d2fe; }
html[data-pismo="lat"] .pismo-cir { display: none; }
html[data-pismo="cir"] .pismo-lat { display: none; }

.content { padding: 1.75rem 1.5rem 2.5rem; max-width: 1320px; width: 100%; margin: 0 auto; }

.site-footer {
  margin-top: auto;
  padding: 1.4rem 1.5rem 1.3rem;
  border-top: 1px solid var(--card-border);
  font-size: .88rem;
  color: var(--ink-2);
  background: #fff;
}
.footer-naslov {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: 1.02rem;
  color: var(--ink);
  margin-bottom: .3rem;
}
.footer-naslov i { color: var(--accent); font-size: 1.05rem; }

/* ---------------- Kartice i naslovne trake ---------------- */
.card { border: 1px solid var(--card-border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-header { background: transparent; border-bottom: 1px solid var(--card-border); font-weight: 600; }

.page-head { margin-bottom: 1.5rem; }
.page-head .eyebrow {
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--accent);
  margin-bottom: .3rem;
}
.page-head h1 { font-weight: 700; font-size: 1.7rem; margin-bottom: .45rem; }
.page-head .lead { font-size: 1.02rem; color: var(--ink-2); max-width: 62rem; }

/* Hero (početna) */
.hero {
  border-radius: 20px;
  background: linear-gradient(120deg, #1e1b4b 0%, #312e81 45%, #4338ca 100%);
  color: #e0e7ff;
  padding: 2.2rem 2.4rem;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute; right: -80px; top: -80px;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(129, 140, 248, .35), transparent 65%);
}
.hero h1 { color: #fff; font-weight: 700; font-size: 1.85rem; }
.hero p { max-width: 56rem; position: relative; z-index: 1; }
.hero .btn-light { font-weight: 600; }

/* Rok javnog uvida — istaknuta traka unutar hero-a */
.hero-rok {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 12px;
  padding: .7rem .95rem;
  margin-bottom: 1rem;
  position: relative; z-index: 1;
}
.hero-rok > i { font-size: 1.2rem; color: #fde68a; }
.hero-rok-tekst { flex: 1 1 18rem; }
.hero-rok-tekst strong { color: #fff; }
.hero-rok-oznaka {
  flex: 0 0 auto;
  background: #fbbf24; color: #422006;
  font-weight: 700; font-size: .82rem;
  border-radius: 20px; padding: .15rem .7rem;
}
.hero-rok-isteklo { background: rgba(255, 255, 255, .22); color: #fff; }

/* Uvodna traka „ko stoji iza sajta" — struktura zajednička sa .stranica-traka
   (vidi dole), boje su joj svetli variant, definisan posle .stranica-traka da
   pobedi u kaskadi (ista specifičnost, kasnije pravilo). */
.stranica-traka .uvod-vodeci { font-size: 1.15rem; font-weight: 600; margin: 0 0 .6rem; max-width: 54rem; }
.stranica-traka .uvod-tekst { margin: 0 0 .9rem; }
.stranica-traka .uvod-zakljucak { font-style: italic; margin: 0; flex: 1 1 20rem; }
.uvod-podnozje {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: .8rem;
  padding-top: .9rem;
  position: relative;
  z-index: 1;
}
.uvod-koraci {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .2rem 0 .9rem;
  position: relative;
  z-index: 1;
}
.uvod-koraci span {
  font-weight: 700;
  font-size: .85rem;
  border-radius: 20px;
  padding: .32rem .8rem;
}
.uvod-koraci i { font-size: .8rem; }
.uvod-kredit {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  flex: 0 0 auto;
  font-size: .82rem;
  font-weight: 600;
  border-radius: 20px;
  padding: .35rem .8rem;
  text-decoration: none;
  transition: background .15s, color .15s;
}
/* Dve kolone: levo uvodni tekst, desno napomena o nastanku prikaza — po pola
   širine trake, u jednom redu na širim ekranima (stack ispod 992px, vidi
   media blok niže). */
.uvod-split {
  display: flex;
  align-items: flex-start;
  gap: 1.75rem;
  position: relative;
  z-index: 1;
}
.uvod-glavno { flex: 1 1 100%; min-width: 0; }
.uvod-napomena { flex: 1 1 50%; min-width: 0; margin-top: .15rem; }

/* Stat pločice */
.stat-tile {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.05rem 1.2rem;
  display: flex;
  align-items: center;
  gap: .95rem;
  height: 100%;
}
.stat-icon {
  width: 46px; height: 46px;
  flex: 0 0 auto;
  border-radius: 12px;
  display: grid; place-items: center;
  font-size: 1.25rem;
}
.stat-value { font-size: 1.45rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-label { font-size: .8rem; color: var(--ink-2); }

.tint-indigo { background: #eef2ff; color: #4f46e5; }
.tint-teal   { background: #f0fdfa; color: #0f766e; }
.tint-amber  { background: #fffbeb; color: #b45309; }
.tint-rose   { background: #fff1f2; color: #be123c; }
.tint-sky    { background: #f0f9ff; color: #0369a1; }
.tint-violet { background: #f5f3ff; color: #6d28d9; }
.tint-brick  { background: #fef6f0; color: #7c2d12; }
.tint-orange { background: #fff7ed; color: #ea580c; }
.tint-lime   { background: #f7fee7; color: #4d7c0f; }

/* Horizontalni bar-grafikon (jedna mera, jedna boja) */
.bar-row { display: grid; grid-template-columns: 200px 1fr 64px; align-items: center; gap: .8rem; margin-bottom: .65rem; }
.bar-row .bar-label { font-size: .87rem; color: var(--ink); text-align: right; }
.bar-track { background: #eef2f7; border-radius: 6px; height: 14px; overflow: hidden; }
.bar-fill { background: #6366f1; height: 100%; border-radius: 0 4px 4px 0; min-width: 3px; }
.bar-val { font-size: .85rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* Kartice celina na početnoj */
.celina-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem 1.3rem;
  height: 100%;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.celina-card:hover {
  transform: translateY(-3px);
  border-color: #c7d2fe;
  box-shadow: 0 10px 28px -10px rgba(15, 23, 42, .18);
  color: inherit;
}
.celina-card .stat-icon { margin-bottom: .8rem; }
.celina-card h3 { font-size: 1.02rem; font-weight: 700; }
.celina-card p { font-size: .87rem; color: var(--ink-2); margin-bottom: .6rem; }
.celina-card .meta { font-size: .78rem; color: #94a3b8; }

/* ---------------- „Šta se menja" kartice ---------------- */
.izmena-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.3rem 1.4rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.izmena-card h3 { font-size: 1.06rem; font-weight: 700; margin: .65rem 0 .5rem; }
.izmena-card .opis { font-size: .92rem; color: var(--ink-2); }
.izmena-znacaj {
  background: #f8fafc;
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  padding: .65rem .85rem;
  font-size: .87rem;
  margin: .75rem 0;
}
.izmena-znacaj strong { color: var(--accent); }
.izmena-izvori { margin-top: auto; padding-top: .5rem; display: flex; flex-wrap: wrap; gap: .45rem; }
.izvor-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  text-decoration: none;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid #e0e7ff;
  border-radius: 20px;
  padding: .3rem .8rem;
  transition: background .15s;
}
.izvor-link:hover { background: #e0e7ff; color: #3730a3; }
.izvor-link-akcenat { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.izvor-link-akcenat:hover { background: #4338ca; color: #fff; }
.stretched-title { color: inherit; }
.stretched-title:hover { color: var(--accent); }

/* ---- podmeni u sidebaru ----
   Svaka dubina ima svoju vodicu: prva ide tačno ispod ikonice roditelja, pa se
   pogledom prati gde grupa počinje i gde se završava. Druga dubina je isprekidana
   i uvučenija — dve vrste linije razlikuju nivoe bez dodatnog šarenila. */
.nav-sub {
  margin: 2px 0 6px 1.32rem;
  padding-left: .95rem;
  border-left: 1px solid rgba(148, 163, 184, .2);
  display: flex; flex-direction: column; gap: 1px;
}
.nav-subitem {
  position: relative;
  display: flex; align-items: center; gap: .5rem;
  padding: .36rem .5rem; border-radius: 8px;
  font-size: .84rem; color: #94a3b8; text-decoration: none;
}
.nav-subitem i { font-size: .88rem; width: 1.05rem; text-align: center; flex: 0 0 auto; }
.nav-subitem span { flex: 1; }
.nav-subitem:hover { background: rgba(148, 163, 184, .1); color: var(--sb-text-strong); }
.nav-subitem.active { color: #fff; background: rgba(99, 102, 241, .16); font-weight: 600; }
/* aktivna stavka pali deo vodice uz sebe — odmah se vidi kroz koju granu se
   došlo do otvorene strane, bez bojenja same grane */
.nav-subitem.active::before {
  content: "";
  position: absolute;
  left: calc(-.95rem - 1px);
  top: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
  border-radius: 2px;
}

/* druga dubina podmenija (stavke unutar ugnježdene grane) */
.nav-grana-ugnjezdena > .nav-sub {
  margin: 1px 0 5px .4rem;
  padding-left: .75rem;
  border-left-style: dashed;
  border-left-color: rgba(148, 163, 184, .3);
}
.nav-grana-ugnjezdena > .nav-sub > .nav-subitem { font-size: .82rem; }
.nav-grana-ugnjezdena > .nav-sub > .nav-subitem.active::before { left: calc(-.75rem - 1px); }

/* ---- klikabilna kartica izmene + naslovna slika ---- */
.izmena-card { position: relative; overflow: hidden; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.izmena-card.klik { cursor: pointer; }
.izmena-card.klik:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -14px rgba(15, 23, 42, .3); border-color: var(--accent); }
.izmena-cover {
  display: block; height: 150px;
  margin: -1.3rem -1.4rem 1rem;
  background-size: cover; background-position: center; background-color: #e2e8f0;
}
.izmena-card.klik:hover .izmena-cover { filter: saturate(1.05) brightness(1.02); }
.izmena-card .stretched-title::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.izmena-card .izmena-izvori { position: relative; z-index: 2; }
.izmena-card .kartica-strelica {
  position: absolute; z-index: 2; top: 128px; right: 14px;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: rgba(15, 23, 42, .55); backdrop-filter: blur(3px);
  transition: transform .16s ease, background .16s ease;
}
.izmena-card.klik:hover .kartica-strelica { transform: translateX(3px); background: var(--accent); }

/* ---- srednja kartica izmene (široka traka izmena na strani poglavlja) ----
   Tri obavezne veze sa .izmena-card: (1) negativne margine slike moraju biti
   tačno padding kartice, da slika legne na ivicu; (2) strelica visi 22px preko
   dna slike, kao na velikoj kartici (150 - 128 = 22 -> 112 - 90 = 22);
   (3) .izmena-card{height:100%} radi jer je kartica dete CSS grida. */
.izmena-card-sred { padding: 1.05rem 1.15rem; }
.izmena-card-sred .izmena-cover { height: 112px; margin: -1.05rem -1.15rem .8rem; }
.izmena-card-sred h3 { font-size: .98rem; margin: 0 0 .35rem; line-height: 1.32; }
.izmena-card-sred .opis { font-size: .85rem; line-height: 1.5; }
.izmena-card-sred .kartica-strelica {
  top: 90px; right: 12px;
  width: 30px; height: 30px;
  font-size: .85rem;
}

/* foto-sloj zaglavlja se sad zove .zaglavlje-foto — vidi „Deljena naslovna
   traka" u sekciji „Pun tekst plana" niže u ovom fajlu */

/* ---- naslov grupe izmena (izmene.php: jedna grupa = jedno poglavlje plana) ----
   Putanja, naziv poglavlja i broj izmena stoje u istom redu; veza ka celom tekstu
   se odvaja na desnu ivicu. Na uskom ekranu se red prelomi i veza padne pod naziv. */
.grupa-pogl {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .35rem .7rem;
  margin: 2.25rem 0 1rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--card-border);
}
.grupa-pogl-put {
  font-size: .74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: #94a3b8;
}
.grupa-pogl-put i { font-size: .7rem; margin-left: .3rem; opacity: .7; }
.grupa-pogl h3 { font-size: 1.1rem; font-weight: 700; margin: 0; }
.grupa-pogl-broj { font-size: .8rem; color: #94a3b8; }
.grupa-pogl-veza { margin-left: auto; align-self: center; }

/* ---------------- Tabele fajlova ---------------- */
.table-files { margin-bottom: 0; }
.table-files th {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: #94a3b8;
  border-bottom-width: 1px;
  font-weight: 600;
}
.table-files td { vertical-align: middle; padding-top: .7rem; padding-bottom: .7rem; }
.table-files tbody tr:hover { background: #f8fafc; }
.file-link { color: var(--ink); }
.file-link:hover { color: var(--accent); }
.badge-ext { font-size: .68rem; letter-spacing: .5px; }

.group-desc { font-size: .92rem; color: var(--ink-2); max-width: 60rem; }

/* ---------------- Vremenska linija (vodič) ---------------- */
.timeline { position: relative; padding-left: 2.1rem; }
.timeline::before {
  content: "";
  position: absolute; left: 12px; top: 6px; bottom: 6px;
  width: 2px;
  background: #e2e8f0;
}
.tl-item { position: relative; padding-bottom: 1.6rem; }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot {
  position: absolute; left: -2.1rem; top: 2px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--accent);
  color: var(--accent);
  display: grid; place-items: center;
  font-size: .8rem;
  font-weight: 700;
}
.tl-item.done .tl-dot { background: var(--accent); color: #fff; }
.tl-item.now .tl-dot { box-shadow: 0 0 0 5px rgba(79, 70, 229, .15); }
.tl-item h3 { font-size: 1rem; font-weight: 700; margin-bottom: .25rem; }
.tl-item .tl-when { font-size: .78rem; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: .6px; }
.tl-item p { font-size: .9rem; color: var(--ink-2); margin-bottom: .2rem; max-width: 56rem; }

/* ---------------- Pojmovnik ---------------- */
.pojam-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 1.05rem 1.2rem;
  height: 100%;
}
.pojam-card dt { font-weight: 700; margin-bottom: .3rem; }
.pojam-card dd { font-size: .89rem; color: var(--ink-2); margin: 0; }

/* Isticanje pri pretrazi */
mark { background: #fef08a; padding: 0 .1em; border-radius: 3px; }

/* Karta-kartice (grafički deo) */
.karta-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.15rem 1.25rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.karta-broj {
  font-size: .72rem;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 1px;
}
.karta-card h3 { font-size: .98rem; font-weight: 700; margin: .25rem 0 .4rem; }
.karta-card p { font-size: .86rem; color: var(--ink-2); flex: 1; }
.karta-formats { display: flex; flex-wrap: wrap; gap: .4rem; }

/* Upozorenja / info trake */
.note-band {
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  font-size: .92rem;
  display: flex;
  gap: .8rem;
  align-items: flex-start;
}
.note-band i { font-size: 1.15rem; margin-top: .1rem; }
.note-info { background: #eff6ff; color: #1e40af; border: 1px solid #dbeafe; }
.note-warn { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }

/* Zaglavlje strane izmene deli izgled sa poglavlje.php — vidi „Deljena naslovna
   traka" u sekciji „Pun tekst plana" niže u ovom fajlu. Stilovi obrisane strane
   tema (.sekcija-card, .brojka-tile, .tema-hero, .tema-chip) su uklonjeni. */

/* ---------------- Mapa (Leaflet) ---------------- */
.mapa-okvir {
  border-radius: var(--radius);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow);
  z-index: 1;
  background: #eef2f7;
}
.mapa-ucitava::before {
  content: "Učitavanje karte…";
  position: absolute;
  z-index: 500;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 600;
  color: var(--ink-2);
  background: rgba(241, 245, 249, .7);
}
.sloj-kat {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: #64748b;
  padding: .55rem .3rem .2rem;
  border-bottom: 1px solid var(--card-border);
  margin-bottom: .15rem;
}
.sloj-lista { display: flex; flex-direction: column; gap: 1px; margin-bottom: .35rem; }
.sloj-red {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  padding: .22rem .3rem;
  border-radius: 8px;
  cursor: pointer;
}
.sloj-red:hover { background: #f8fafc; }
.sloj-red input { flex: 0 0 auto; }
.sloj-boja { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; border: 1px solid rgba(15,23,42,.15); }
.sloj-ime { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sloj-broj { color: #94a3b8; font-size: .72rem; font-variant-numeric: tabular-nums; }

/* citat iz plana (detaljna strana izmene) */
.citat {
  background: #f8fafc;
  border-left: 4px solid var(--accent);
  border-radius: 0 12px 12px 0;
  padding: 1rem 1.25rem;
  margin: 0 0 1rem;
}
.citat p { font-size: 1rem; line-height: 1.55; color: var(--ink); margin: 0 0 .5rem; font-style: italic; }
.citat footer { font-size: .82rem; color: var(--ink-2); font-style: normal; }
.citat footer a { text-decoration: none; color: var(--accent); white-space: nowrap; }

/* forma za primedbu */
.primedba-pregled {
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  font-family: Consolas, "Courier New", monospace;
  font-size: .85rem;
  white-space: pre-wrap;
  min-height: 260px;
}
.primedba-pregled > div { margin-bottom: 1.1rem; }
.primedba-pregled > div:last-child { margin-bottom: 0; }
.primedba-pregled .pregled-centrirano { text-align: center; font-weight: 700; }

/* kanali za predaju primedbe (šalter / pošta / imejl) */
.predaja-kanal { height: 100%; padding: .85rem 1rem; border: 1px solid var(--card-border); border-radius: var(--radius); background: #fff; }
.predaja-kanal-ikona {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: var(--accent-soft); color: var(--accent);
  margin-bottom: .5rem;
  font-size: .9rem;
}

/* ---- predlošci primedbi: alatke (pretraga + filteri po temi) ---- */
.primeri-alatke {
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: #f8fafc;
  padding: .8rem .9rem;
}
.primeri-pretraga { position: relative; }
.primeri-pretraga > i {
  position: absolute; left: .75rem; top: 50%; transform: translateY(-50%);
  color: var(--ink-2); font-size: .9rem; pointer-events: none;
}
.primeri-pretraga .form-control { padding-left: 2.15rem; background: #fff; }
.primeri-cipovi { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.primeri-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 .7rem;
  font-size: .8rem;
  line-height: 1.2;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.primeri-cip i { font-size: .85rem; }
.primeri-cip > span { opacity: .6; font-variant-numeric: tabular-nums; }
.primeri-cip:hover { border-color: #c7d2fe; color: var(--accent); }
.primeri-cip.je-aktivan {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.primeri-cip.je-aktivan > span { opacity: .8; }

/* ---- predlošci primedbi: grupe po temi ---- */
.primeri-grupa {
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: #fff;
  margin-bottom: .55rem;
  overflow: hidden;
}
.primeri-grupa > summary {
  display: flex; align-items: center; gap: .65rem;
  padding: .7rem .9rem;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: .93rem;
  color: var(--ink);
}
.primeri-grupa > summary::-webkit-details-marker { display: none; }
.primeri-grupa > summary:hover { background: #f8fafc; }
.primeri-grupa[open] > summary { border-bottom: 1px solid var(--card-border); background: #f8fafc; }
.primeri-grupa-broj {
  font-size: .78rem; font-weight: 600; color: var(--ink-2);
  background: #f1f5f9; border-radius: 999px; padding: .1rem .5rem;
  font-variant-numeric: tabular-nums;
}
.primeri-grupa-strelica { color: var(--ink-2); font-size: .8rem; transition: transform .15s; }
.primeri-grupa[open] > summary .primeri-grupa-strelica { transform: rotate(180deg); }
.primeri-grupa-ikona {
  width: 32px; height: 32px;
  flex: 0 0 auto;
  border-radius: 9px;
  display: grid; place-items: center;
  font-size: .95rem;
  background: #f1f5f9;
  color: var(--ink-2);
}

/* ---- predlošci primedbi: kartice (tri u redu) ----
   .primer-stavka je Bootstrap kolona, a ne sama kartica: pretraga i filter
   po temi joj postavljaju atribut hidden, pa se sklanja cela ćelija mreže. */
.primeri-grupa-telo { padding: .85rem; }
.primer-stavka { display: flex; }
.primer-kartica {
  display: flex; flex-direction: column;
  width: 100%;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition: border-color .15s, box-shadow .15s;
}
.primer-kartica:hover { border-color: #c7d2fe; box-shadow: 0 4px 14px rgba(15, 23, 42, .08); }
/* Red je poravnat na vrh (align-items-start), da otvaranje „Ceo tekst" ne
   razvuče i susedne kartice; min-height drži zatvorene kartice ujednačene. */
.primer-kartica-telo { flex: 1 1 auto; padding: .85rem .9rem .75rem; min-width: 0; min-height: 6.5rem; }
.primer-kartica-podnozje {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .6rem .9rem .75rem;
  border-top: 1px solid #f1f5f9;
}
.primer-stavka.je-dodat .primer-kartica {
  border-color: #86efac;
  background: #f6fdf9;
  box-shadow: inset 3px 0 0 #16a34a;
}
.primer-stavka.je-dodat .primer-kartica-podnozje { border-top-color: #dcfce7; }

.primer-naslov { font-size: .89rem; font-weight: 600; color: var(--ink); line-height: 1.35; }
.primer-sazetak { font-size: .82rem; color: var(--ink-2); margin-top: .3rem; line-height: 1.5; }
.primer-dodat { font-size: .77rem; color: #15803d; margin-top: .4rem; }
.primer-oznake { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.primer-oznaka {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .72rem; line-height: 1.3;
  color: var(--ink-2); background: #f1f5f9;
  border-radius: 999px; padding: .14rem .55rem;
}
.primer-oznaka-ostro { background: #fff1f2; color: #be123c; }

/* dugmad u podnožju kartice: „Ceo tekst" levo (tamnosivo), „Dodaj" desno (akcenat) */
.primer-btn {
  display: inline-flex; align-items: center; gap: .38rem;
  border: 0; border-radius: 9px;
  padding: .4rem .75rem;
  font-size: .79rem; font-weight: 600; line-height: 1.2;
  white-space: nowrap; cursor: pointer;
  transition: background .15s, box-shadow .15s;
}
.primer-btn i { font-size: .92rem; }
.primer-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.primer-btn-tekst { background: #475569; color: #fff; }
.primer-btn-tekst:hover { background: #334155; }
.primer-btn-tekst.je-otvoren { background: #1e293b; }
.primer-btn-dodaj { background: var(--accent); color: #fff; }
.primer-btn-dodaj:hover { background: #4338ca; }
.primer-btn-dodaj:disabled { background: #16a34a; color: #fff; cursor: default; }

/* pun tekst predloška + izvori na koje se poziva */
.primer-pun {
  margin-top: .75rem;
  padding-top: .7rem;
  border-top: 1px dashed #e2e8f0;
}
.primer-pun-tekst { font-size: .83rem; line-height: 1.6; color: var(--ink); margin-bottom: .6rem; }
.primer-izvori { display: flex; flex-wrap: wrap; gap: .35rem; font-size: .74rem; }
.primer-izvori-oznaka { color: var(--ink-2); font-weight: 600; width: 100%; margin-bottom: .1rem; }
.primer-izvori a {
  color: var(--accent); text-decoration: none;
  background: var(--accent-soft); border-radius: 8px; padding: .14rem .5rem;
}
.primer-izvori a:hover { text-decoration: underline; }

.primeri-prazno {
  border: 1px dashed #cbd5e1; border-radius: var(--radius);
  padding: 1.6rem 1rem; text-align: center; color: var(--ink-2); font-size: .88rem;
}
.primeri-prazno > i { font-size: 1.3rem; display: block; margin-bottom: .4rem; opacity: .6; }

@media (max-width: 575.98px) {
  .primer-kartica-podnozje { gap: .4rem; }
  .primer-btn { flex: 1 1 0; justify-content: center; }
}

/* ============================================================
   Pun tekst plana: meni, čitač, sadržaj, naselja
   ============================================================ */

/* ---- grana menija koja se otvara (bez JS-a) ----
   Dva glavna dela plana stoje u istom redu kao i obične stavke menija: vodeća
   ikonica je iste mere kao .nav-item-link i, a strelica je sitna oznaka na
   desnoj ivici. Otvorena grana se NAMERNO ne boji belim — bela je rezervisana
   za stranu na kojoj se korisnik zaista nalazi, pa bi obojena grana lagala da
   je i ona aktivna. Da je grana otvorena vidi se po okrenutoj strelici i po
   podmeniju koji je ispod nje. */
.nav-grana { margin-bottom: 2px; }
.nav-grana > summary {
  display: flex; align-items: center; gap: .65rem;
  padding: .56rem .65rem;
  border-radius: 10px;
  color: var(--sb-text);
  font-size: .92rem;
  cursor: pointer;
  list-style: none;
  transition: background .15s, color .15s;
}
.nav-grana > summary::-webkit-details-marker { display: none; }
.nav-grana > summary:hover { background: rgba(148, 163, 184, .1); color: var(--sb-text-strong); }
.nav-grana > summary > span { flex: 1; min-width: 0; }
.nav-grana-ikona { font-size: 1.05rem; width: 1.35rem; text-align: center; flex: 0 0 auto; }
.nav-grana-strelica {
  font-size: .68rem;
  flex: 0 0 auto;
  opacity: .45;
  transition: transform .18s ease, opacity .15s;
}
.nav-grana > summary:hover .nav-grana-strelica { opacity: .85; }
.nav-grana[open] > summary > .nav-grana-strelica { transform: rotate(180deg); }

/* ---- grana ugnježdena u podmeniju (npr. „Pravila gradnje" unutar „Šta se
   planira") — u meri stavki oko sebe, ali malo jača i svetlija od njih, da se
   na prvi pogled vidi šta je grupa a šta veza na stranu ---- */
.nav-grana-ugnjezdena { margin-bottom: 1px; }
.nav-grana-ugnjezdena > summary {
  padding: .36rem .5rem;
  font-size: .84rem;
  font-weight: 600;
  gap: .5rem;
}
.nav-grana-ugnjezdena > summary > .nav-grana-strelica { font-size: .62rem; }

/* ---- putanja na vrhu strane ---- */
.putanja {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  font-size: .82rem; color: var(--ink-2); margin-bottom: 1rem;
}
.putanja a { color: var(--ink-2); text-decoration: none; }
.putanja a:hover { color: var(--accent); text-decoration: underline; }
.putanja i { font-size: .7rem; color: #cbd5e1; }
.putanja .tekuca { color: var(--ink); font-weight: 600; }

/* ---- red sa izvorom (broj poglavlja + PDF) ---- */
.izvor-red { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .6rem; }
.izvor-red-sitno { margin: -.2rem 0 .8rem; }
.oznaka-pogl {
  font-size: .74rem; font-weight: 600;
  background: #f1f5f9; color: #64748b;
  border: 1px solid var(--card-border);
  border-radius: 20px; padding: .18rem .6rem;
}

/* ---- sam tekst plana ---- */
.plan-tekst { font-size: 1rem; line-height: 1.72; color: #1e293b; }
.plan-tekst p { margin: 0 0 1rem; text-align: left; }
.plan-tekst ul { margin: 0 0 1rem; padding-left: 1.35rem; }
.plan-tekst li { margin-bottom: .4rem; }
.plan-tekst > *:last-child { margin-bottom: 0; }

.pod-naslov {
  font-size: 1.12rem; font-weight: 700; color: var(--ink);
  margin: 2rem 0 .5rem; padding-top: .6rem;
  border-top: 1px solid var(--card-border);
  scroll-margin-top: 5rem;
}
.pod-sidro { color: #cbd5e1; text-decoration: none; margin-left: .35rem; opacity: 0; transition: opacity .15s; }
.pod-naslov:hover .pod-sidro { opacity: 1; }
.pod-sidro:hover { color: var(--accent); }

/* tabele i grafikoni: tačno kao u PDF-u, sa skrolom */
.tabela-tekst-okvir {
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: #f8fafc;
  overflow-x: auto;
  margin: 0 0 1rem;
}
.tabela-tekst {
  margin: 0; padding: .9rem 1.1rem;
  font-family: Consolas, "Courier New", monospace;
  font-size: .78rem; line-height: 1.45; color: #334155;
  white-space: pre; tab-size: 4;
}

/* ============================================================
   Strana jednog poglavlja: naslovna traka, blokovi, mera teksta
   ============================================================ */

/* Naslovna traka strane — deli je poglavlje.php i izmena.php (sadržaj trake je u
   includes/zaglavlje-*.php, a iscrtava ga header.php).
   Traka stoji IZVAN <main class="content">, u .main-u: pozadina ide preko cele
   širine sadržajnog dela i kad je ekran širi od mere sadržaja, a sam tekst se
   drži istog stupca kao ostatak strane. Zato .stranica-traka-sadrzaj ponavlja
   meru i bočni padding .content-a (1320px / 1.5rem) — te vrednosti se menjaju
   zajedno, i u osnovnom i u responsivnom bloku.
   Namerno bez 100vw: .main je pomeren za --sb-width, a 100vw bi napravio
   vodoravni skrol. */
.stranica-traka {
  background: linear-gradient(120deg, #1e1b4b 0%, #312e81 45%, #4338ca 100%);
  color: #e0e7ff;
  position: relative;
  overflow: hidden;
}
.stranica-traka::after {
  content: "";
  position: absolute; right: -90px; top: -110px;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(129, 140, 248, .35), transparent 65%);
  pointer-events: none;
}
.stranica-traka-sadrzaj {
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  padding: 1.6rem 1.5rem 1.5rem;
  position: relative;
  z-index: 1;
}
/* foto pozadina (izmena.php, kad izmena ima pravu fotografiju) */
.zaglavlje-foto { background-size: cover !important; background-position: center !important; }
/* dekorativna ikonica (izmena.php, kad nema fotografije) — nasleđuje boju
   trake, samo providna dekoracija u pozadini. Stoji u sadržaju trake, ne u
   traci, da ostane uz desnu ivicu teksta a ne uz ivicu ekrana. */
.stranica-traka-sadrzaj .zaglavlje-ikona {
  position: absolute; right: 1.5rem; top: 50%;
  transform: translateY(-50%);
  font-size: 6.5rem;
  opacity: .16;
  z-index: 0;
}

/* Sve što u traci nasleđuje svetlu podlogu mora da se prebaci na tamnu. */
.stranica-traka .putanja { color: rgba(224, 231, 255, .75); margin-bottom: .85rem; }
.stranica-traka .putanja a { color: rgba(224, 231, 255, .75); }
.stranica-traka .putanja a:hover { color: #fff; }
.stranica-traka .putanja i { color: rgba(199, 210, 254, .45); }
.stranica-traka .putanja .tekuca { color: #fff; font-weight: 600; }
.stranica-traka .eyebrow {
  font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.4px;
  color: rgba(199, 210, 254, .85);
  margin-bottom: .25rem;
}
.stranica-traka h1 {
  color: #fff; font-weight: 700; font-size: 1.7rem;
  margin: 0 0 .1rem; max-width: 54rem;
}
/* pasus ispod h1 — poglavlje.php ga ne koristi, izmena.php ga koristi
   za kratak opis */
.stranica-traka p {
  color: rgba(224, 231, 255, .92);
  max-width: 54rem;
  margin: .4rem 0 0;
  position: relative; z-index: 1;
}
.stranica-traka .izvor-red { margin-top: .85rem; }
.stranica-traka .oznaka-pogl {
  background: rgba(255, 255, 255, .12);
  color: #e0e7ff;
  border-color: rgba(255, 255, 255, .22);
}
.stranica-traka .izvor-link {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border-color: rgba(255, 255, 255, .22);
}
.stranica-traka .izvor-link:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.stranica-traka .izvor-link-akcenat {
  background: #fff; color: #3730a3; border-color: #fff; font-weight: 600;
}
.stranica-traka .izvor-link-akcenat:hover { background: #e0e7ff; color: #312e81; }
/* zamena za .text-secondary, koji je na tamnoj podlozi nečitljiv */
.stranica-traka .pogl-str { font-size: .8rem; color: rgba(224, 231, 255, .75); }

/* Uvodna traka početne strane — svetli variant .stranica-traka (umesto
   tamnog gradijenta): diskretnija od hero-a ispod, taman tekst na svetloj
   indigo podlozi. !important na pozadini jer .stranica-traka posle ovog
   pravila u kaskadi inače pobedi (ista specifičnost, kasnije pravilo). */
.traka-uvod {
  background: #ffffff !important;
  color: var(--ink-2);
  border-bottom: 1px solid var(--card-border);
  box-shadow: 0px 0px 9px #d3d3d3;
}
.traka-uvod::after { background: radial-gradient(circle, rgba(79, 70, 229, .12), transparent 65%); }
.traka-uvod .eyebrow { color: var(--accent); }
.traka-uvod .uvod-vodeci { color: var(--ink); }
.traka-uvod p { color: var(--ink-2); }
.traka-uvod .uvod-zakljucak { 
    margin: 0;
    flex: 1 1 20rem;
    font-weight: bold;
    font-size: 0.9rem;
    }
.traka-uvod .uvod-podnozje { border-top: 1px solid var(--card-border); }
.traka-uvod .uvod-koraci span { background: #fff; color: var(--accent); border: 1px solid var(--card-border); }
.traka-uvod .uvod-koraci i { color: #94a3b8; }
.traka-uvod .uvod-kredit { background: #fff; border: 1px solid var(--card-border); color: var(--ink-2); }
.traka-uvod .uvod-kredit:hover { background: var(--accent-soft); color: var(--accent); }

/* ---- „Na ovoj strani" u traci: sadržaj strane je deo zaglavlja, odvojen
   tankom crtom od naslova. Kolone su uže nego u telu strane (4 umesto 3), da
   duži spiskovi podnaslova ne razvuku traku previše u visinu. ---- */
.traka-toc {
  margin-top: 1.15rem;
  padding-top: .9rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.traka-toc-naslov {
  display: flex; align-items: center; gap: .4rem;
  font-size: .76rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.2px;
  color: rgba(199, 210, 254, .85);
  margin-bottom: .5rem;
}
.traka-toc .pogl-toc { columns: 15rem 4; column-gap: 1.4rem; }
.traka-toc .pogl-toc a {
  color: rgba(224, 231, 255, .82);
  border-left-color: rgba(199, 210, 254, .28);
  font-size: .82rem;
}
.traka-toc .pogl-toc a:hover {
  color: #fff;
  border-left-color: #fff;
  background: rgba(255, 255, 255, .09);
}

/* ---- uvodni panel: „delovi poglavlja" i „šta se menja" — zasebna celina
   između tamne trake i tela teksta. Ista paleta kao .izvor-link (accent-soft
   pozadina + #e0e7ff okvir), razvučena na punu širinu. ---- */
.pogl-uvod {
  margin-bottom: 2rem;
}
.pogl-uvod > .pogl-blok:last-child { margin-bottom: 0; }

/* ---- blok iznad teksta (delovi poglavlja / izmene / na ovoj strani) ---- */
.pogl-blok { margin-bottom: 1.75rem; }
.pogl-blok-naslov {
  display: flex; align-items: center; flex-wrap: wrap; gap: .4rem;
  font-size: 1rem; font-weight: 700; color: var(--ink);
  margin-bottom: .3rem;
}
.pogl-blok-naslov i { color: var(--accent); }
.pogl-blok-uvod { font-size: .9rem; color: var(--ink-2); max-width: 62rem; margin: 0 0 .95rem; }

/* Grid, ne flex: kartice izmena se oslanjaju na height:100% i margin-top:auto,
   što radi samo kad ih neko rasteže na visinu reda. Isti grid nosi i izdvojene
   izmene na početnoj strani (.mreza-izmena) — ista kartica, isto ponašanje. */
.pogl-izmene,
.mreza-izmena {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1rem;
}

/* ---- „Na ovoj strani": do tri kolone, bez sklapanja ----
   „columns: 16rem 3" znači najviše tri kolone, ali nikad uže od 16rem — pa se
   samo od sebe svede na dve, pa na jednu, bez ijednog media query-ja.
   Crta ide po svakoj stavci, jer bi jedna crta na okviru u više kolona stajala
   samo skroz levo. */
.pogl-toc { columns: 16rem 3; column-gap: 1.6rem; }
.pogl-toc a {
  display: block;
  break-inside: avoid;
  padding: .3rem .7rem;
  font-size: .84rem;
  line-height: 1.4;
  color: var(--ink-2);
  text-decoration: none;
  border-left: 2px solid var(--card-border);
}
.pogl-toc a:hover { color: var(--accent); border-left-color: var(--accent); background: #f8fafc; }
.pogl-toc a.nivo-4 { padding-left: 1.35rem; }
.pogl-toc a.nivo-5 { padding-left: 2rem; font-size: .8rem; }

/* ---- najava da počinje pun tekst poglavlja: razdvaja uvodni panel od teksta ---- */
.pogl-tekst-naslov {
  display: flex; align-items: center; gap: .4rem;
  font-size: 1rem; font-weight: 700; color: var(--ink);
  margin: 0 0 1.1rem;
}
.pogl-tekst-naslov i { color: var(--accent); }

/* ---- mera teksta plana ----
   Tekst se drži na ~62rem (oko 990px) i poravnat je levo; puna širina bi dala
   redove od ~150 znakova. Mera stoji na zajedničkom okviru, da crta iznad
   .pod-naslov-a prestaje tamo gde prestaje i tekst.
   Prva kolona je mera, druga je slobodan ostatak: tabele i grafikoni iz PDF-a
   (.tabela-tekst-okvir) preuzimaju oba traka, pa im ostaje više širine od
   samog teksta. Oba traka imaju minimum 0, pa kad je sadržaj uži od mere
   drugi trak nestane, a tekst zauzme sve — bez media query-ja i bez preliva. */
.pogl-tekst {
  display: grid;
  grid-template-columns: minmax(0, 62rem) minmax(0, 1fr);
  align-items: start;
}
.pogl-tekst > *,
.pogl-tekst .plan-tekst > * { grid-column: 1; }
.pogl-tekst .plan-tekst { display: contents; }
.pogl-tekst .plan-tekst > .tabela-tekst-okvir { grid-column: 1 / -1; }

/* ---- desna traka (naselje.php: mapa + dugmad) ---- */
.na-strani { position: sticky; top: 5rem; }

/* ---- prethodno / sledeće ---- */
.plan-navigacija { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; }
.plan-nav-dugme {
  display: flex; align-items: center; gap: .7rem;
  padding: .8rem 1.1rem; max-width: 48%;
  background: #fff; border: 1px solid var(--card-border);
  border-radius: var(--radius); text-decoration: none; color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.plan-nav-dugme:hover { border-color: var(--accent); box-shadow: var(--shadow); color: var(--accent); }
.plan-nav-dugme.kraj { margin-left: auto; text-align: right; }
.plan-nav-dugme small { display: block; font-size: .7rem; color: #94a3b8; text-transform: uppercase; letter-spacing: .5px; }
.plan-nav-dugme strong { font-size: .9rem; font-weight: 600; }
.plan-nav-dugme i { font-size: 1.1rem; color: #94a3b8; flex: 0 0 auto; }

/* ---- sadržaj plana (plan.php) ---- */
.sadrzaj-lista { display: flex; flex-direction: column; }
.sadrzaj-red {
  display: flex; align-items: center; gap: 1rem;
  padding: .68rem 1.15rem;
  border-top: 1px solid #f1f5f9;
  text-decoration: none; color: var(--ink);
  transition: background .12s;
}
.sadrzaj-red:hover { background: #f8fafc; color: var(--accent); }
.sadrzaj-red.bez-veze { color: var(--ink-2); }
.sadrzaj-red.bez-veze:hover { background: transparent; color: var(--ink-2); }
.sadrzaj-red.nivo-3 { padding-left: 2.6rem; }
.sadrzaj-ime { flex: 1; min-width: 0; }
.sadrzaj-ime strong { display: block; font-size: .93rem; font-weight: 600; }
.sadrzaj-ime small {
  display: block; font-size: .75rem; color: #94a3b8;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sadrzaj-strana { font-size: .75rem; color: #94a3b8; flex: 0 0 auto; font-variant-numeric: tabular-nums; }

/* ---- naselja ---- */
.naselje-grupa { margin-bottom: 1.5rem; }
.naselje-grupa-naslov {
  font-size: .72rem; text-transform: uppercase; letter-spacing: 1px;
  color: #94a3b8; font-weight: 700; margin-bottom: .55rem;
}
.naselje-card {
  display: flex; align-items: center; gap: .6rem;
  padding: .62rem .85rem; height: 100%;
  background: #fff; border: 1px solid var(--card-border);
  border-radius: 12px; text-decoration: none; color: var(--ink);
  transition: border-color .15s, transform .15s;
}
.naselje-card:hover { border-color: var(--accent); transform: translateY(-2px); color: var(--accent); }
.naselje-card i { color: #94a3b8; flex: 0 0 auto; }
.naselje-card:hover i { color: var(--accent); }
.naselje-card span { font-size: .88rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.naselje-polje { margin-bottom: 1.25rem; }
.naselje-polje-naslov {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .8px;
  color: var(--accent); font-weight: 700; margin-bottom: .35rem;
}

/* ============================================================
   „Od stanja do promene" — trake: jedna oblast = jedan red kroz tri koraka
   ------------------------------------------------------------
   Nema zuma, pomeranja ni SVG niti: traka je obična kartica sa tri kolone, pa
   se povezanost vidi po tome što stoje u istom redu, a strelica u razmaku vodi
   pogled sleva nadesno. Na uskom ekranu se traka prelomi u tri koraka odozgo
   nadole i svaki dobije svoju sitnu oznaku (.tok-mini).
   ============================================================ */

.tok-tabla { display: flex; flex-direction: column; gap: .75rem; }

/* zaglavlje kolona — prati skrol, poravnato sa mrežom trake */
.tok-zaglavlje,
.tok-traka {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.55fr);
  gap: .5rem 2.4rem;
}
.tok-zaglavlje {
  position: sticky; top: 0; z-index: 3;
  padding: .5rem 1.1rem;
  background: var(--body-bg);
  box-shadow: 0 6px 10px -8px rgba(15, 23, 42, .25);
  border-radius: var(--radius);
}
.tok-kol-naslov {
  display: flex; align-items: center; gap: .5rem;
  font-size: .74rem; text-transform: uppercase; letter-spacing: 1px;
  font-weight: 700; color: #64748b;
}
.tok-korak {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: grid; place-items: center; font-size: .7rem; flex: 0 0 auto;
}

.tok-traka {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: .9rem 1.1rem;
  align-items: start;
  /* traka je meta sidra sa početne (#celina-<slug>) — sticky zaglavlje tabele
     bi je inače preklopilo pri skoku */
  scroll-margin-top: 4rem;
}
.tok-celija { position: relative; min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
.tok-mini { display: none; }

/* spona između koraka: strelica u razmaku, sa kratkom isprekidanom crtom */
.tok-spona {
  position: absolute; top: .95rem; left: -1.85rem;
  color: #c3ccd8; font-size: 1.15rem; line-height: 1;
}
.tok-spona::after {
  content: ""; position: absolute; top: 50%; right: 100%;
  width: .7rem; border-top: 1px dashed #d7dfe9;
}

/* kartica koraka */
.tok-cvor {
  display: flex; align-items: center; gap: .5rem;
  background: #fff; border: 1px solid var(--card-border);
  border-radius: 12px; padding: .55rem .7rem;
  text-decoration: none; color: var(--ink);
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.tok-cvor:hover {
  border-color: var(--accent); box-shadow: var(--shadow);
  color: var(--ink); transform: translateY(-1px);
}
.tok-cvor-telo { flex: 1; min-width: 0; }
.tok-cvor strong { display: block; font-size: .87rem; font-weight: 600; line-height: 1.25; }
.tok-cvor small {
  display: block; font-size: .7rem; color: #94a3b8; margin-top: .12rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tok-cvor-strelica { flex: 0 0 auto; color: #cbd5e1; font-size: .8rem; }
.tok-cvor:hover .tok-cvor-strelica { color: var(--accent); }
.cvor-stanje { border-left: 3px solid #0f766e; }
.cvor-plan { border-left: 3px solid var(--accent); }
.tok-traka-novo .cvor-plan { border-left-color: #b45309; }

/* kartica izmene */
.tok-izmena {
  display: flex; align-items: center; gap: .5rem;
  background: #fff; border: 1px solid var(--card-border);
  border-left: 3px solid var(--tema-boja, #94a3b8);
  border-radius: 10px; padding: .4rem .6rem;
  text-decoration: none; color: var(--ink); font-size: .82rem;
  transition: border-color .15s, transform .12s;
}
.tok-izmena:hover { transform: translateX(2px); border-color: var(--tema-boja, var(--accent)); color: var(--ink); }
.tok-izmena i { color: var(--tema-boja, #94a3b8); flex: 0 0 auto; font-size: .9rem; }
.tok-izmena span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* „+2" = izmena se poziva i na druga poglavlja (objašnjenje stoji u title).
   Mora biti specifičnije od .tok-izmena span, inače i oznaka dobije flex:1 i
   razvuče se preko pola kartice. */
.tok-izmena .tok-izmena-jos {
  flex: 0 0 auto; font-size: .68rem; font-weight: 700;
  color: #94a3b8; background: #f1f5f9;
  border-radius: 20px; padding: .05rem .38rem;
}

/* sklopljeni ostatak dugačkog spiska izmena */
.tok-jos > summary {
  list-style: none; cursor: pointer;
  font-size: .78rem; color: var(--accent);
  padding: .25rem .6rem; border-radius: 8px;
  display: inline-flex; align-items: center; gap: .35rem;
}
.tok-jos > summary::-webkit-details-marker { display: none; }
.tok-jos > summary::before {
  content: "\f282";   /* bi-chevron-down */
  font-family: bootstrap-icons; font-size: .7rem;
  transition: transform .18s ease;
}
.tok-jos[open] > summary::before { transform: rotate(180deg); }
.tok-jos > summary:hover { background: var(--accent-soft); }
.tok-jos[open] { display: flex; flex-direction: column; gap: .35rem; }

/* prazna polja */
.tok-prazno {
  font-size: .76rem; color: #94a3b8; line-height: 1.4;
  border: 1px dashed #e2e8f0; border-radius: 10px;
  padding: .5rem .7rem; background: #fcfdfe;
}
.tok-prazno-oznaka { color: #cbd5e1; font-size: .7rem; }
.tok-prazno-c { border-style: dotted; }

/* ukrštene veze — podnožje trake, umesto niti preko cele table */
.tok-veze {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .55rem;
  margin-top: .75rem; padding-top: .7rem;
  border-top: 1px dashed #e8edf3;
  font-size: .76rem; color: #94a3b8;
}
.tok-veze > i { color: #cbd5e1; }
.tok-veza-cip {
  display: inline-flex; align-items: baseline; gap: .3rem;
  background: #f8fafc; border: 1px solid var(--card-border);
  border-radius: 20px; padding: .18rem .65rem;
  color: var(--ink-2); text-decoration: none; font-size: .76rem;
}
.tok-veza-cip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.tok-veza-cip em { font-style: normal; color: #94a3b8; }
.tok-veza-cip:hover em { color: var(--accent); }

/* ============================================================
   Park Čair — „sada → posle": ista logika kao trake iznad, ali dve kolone
   ------------------------------------------------------------
   Za Čair nema treće kolone (izdvojenih izmena), nego se ispod obe kolone
   nižu izvori. Naslov celine ide preko cele širine, jer nosi broj celine
   iz projekta i zvanični ćirilični naziv.
   ============================================================ */

.tok-zaglavlje-2,
.tok-traka-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* naslov celine — preko obe kolone, iznad para „sada/posle" */
.promena-glava {
  grid-column: 1 / -1;
  display: flex; align-items: baseline; gap: .55rem;
  margin-bottom: .15rem;
}
.promena-broj {
  flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center;
  font-size: .8rem; font-weight: 700;
  align-self: center;
}
.tok-traka-novo .promena-broj { background: #fef3c7; color: #b45309; }
.promena-glava h3 { font-size: .97rem; font-weight: 700; margin: 0; line-height: 1.3; }
.promena-glava .promena-zvanicno {
  font-size: .74rem; color: #94a3b8; display: block; margin-top: .1rem; font-weight: 400;
}
.promena-oznaka-nova {
  flex: 0 0 auto; font-size: .66rem; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: #b45309; background: #fef3c7;
  border-radius: 20px; padding: .12rem .5rem; align-self: center;
}

/* telo koraka — obična proza, bez linka (celina nema svoju stranu) */
.promena-telo {
  border: 1px solid var(--card-border); border-radius: 12px;
  padding: .6rem .75rem; background: #fff;
  font-size: .84rem; line-height: 1.55; color: var(--ink-2);
}
.promena-telo.cvor-stanje { background: #f6fbfa; }
.promena-telo.cvor-plan { background: #fafaff; }
.tok-traka-novo .promena-telo.cvor-plan { background: #fffbeb; }

/* podnožje trake: citati i dugmad ka izvorima */
.promena-izvori {
  grid-column: 1 / -1;
  margin-top: .8rem; padding-top: .7rem;
  border-top: 1px dashed #e8edf3;
  display: flex; flex-direction: column; gap: .5rem;
}
.promena-izvori .citat { margin: 0; }
.promena-linkovi { display: flex; flex-wrap: wrap; gap: .4rem; }

/* ============================================================
   Bilans zelenila — brojka „pre → posle" u jednoj pločici
   ============================================================ */

.bilans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; }
.bilans-kart {
  background: #fff; border: 1px solid var(--card-border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: .95rem 1.1rem;
  border-top: 3px solid var(--bilans-boja, var(--accent));
}
.bilans-naslov {
  font-size: .72rem; text-transform: uppercase; letter-spacing: 1px;
  font-weight: 700; color: #94a3b8; margin-bottom: .5rem;
  display: flex; align-items: center; gap: .4rem;
}
.bilans-naslov i { color: var(--bilans-boja, var(--accent)); font-size: .95rem; }
.bilans-red { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.bilans-sada { font-size: 1.05rem; font-weight: 600; color: #64748b; }
.bilans-strelica { color: #cbd5e1; font-size: 1.1rem; line-height: 1; }
.bilans-posle { font-size: 1.45rem; font-weight: 700; color: var(--bilans-boja, var(--accent)); line-height: 1.1; }
.bilans-razlika {
  display: inline-block; margin-top: .35rem;
  font-size: .78rem; font-weight: 700;
  color: #15803d; background: #f0fdf4;
  border-radius: 20px; padding: .1rem .55rem;
}
.bilans-razlika.pad { color: #b91c1c; background: #fef2f2; }
.bilans-opis { font-size: .78rem; color: var(--ink-2); line-height: 1.5; margin: .5rem 0 0; }
.bilans-kart .izvor-link { margin-top: .6rem; }

/* ============================================================
   Park Čair — predmer i tekst dokumentacije
   ------------------------------------------------------------
   Predmer je duga tabela sa opisima od po nekoliko rečenica: opis dobija
   najviše prostora, a brojevi se drže tabelarnih cifara da se kolone slažu.
   ============================================================ */
/* Sloj-podloga u panelu mape (okolni PGR, ne sam park) — sitna, tiha oznaka. */
.sloj-ime em {
  font-style: normal; font-size: .72rem; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .3px; margin-left: .3rem;
}

.predmer-tabela td { vertical-align: top; }
.predmer-tabela tbody td:nth-child(2) { min-width: 22rem; line-height: 1.45; }
.predmer-tabela td:nth-child(n+4),
.predmer-tabela th:nth-child(n+4) { font-variant-numeric: tabular-nums; }
.predmer-tabela tfoot td { border-top: 1px solid var(--card-border); }

/* Tekst prepisan iz projektne dokumentacije — ista mera i ritam kao tekst plana. */
.tekst-plana { max-width: 62rem; }
.tekst-plana p { margin-bottom: .7rem; line-height: 1.62; }
.tekst-plana ul { margin-bottom: .8rem; padding-left: 1.2rem; }
.tekst-plana li { margin-bottom: .25rem; line-height: 1.55; }

/* ---------------- Responsive ---------------- */
@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); transition: transform .2s ease; }
  body.sidebar-open .sidebar { transform: translateX(0); }
  .main { margin-left: 0; }
  .bar-row { grid-template-columns: 130px 1fr 56px; }
  .bar-row .bar-label { font-size: .8rem; }
  .hero { padding: 1.6rem 1.5rem; }
  .content { padding: 1.25rem 1rem 2rem; }
  /* .content menja bočni padding, pa sadržaj trake mora da ga prati */
  .stranica-traka-sadrzaj { padding: 1.4rem 1rem 1.25rem; }
  .stranica-traka h1 { font-size: 1.4rem; }
  .stranica-traka-sadrzaj .zaglavlje-ikona { right: 1rem; font-size: 5rem; }
  .uvod-split { flex-direction: column; gap: 1rem; }

  /* „Od stanja do promene": traka se prelama u tri koraka odozgo nadole, pa
     zaglavlje kolona nema šta da naslovi — umesto njega svaki korak nosi svoju
     oznaku, a strelica se okrene nadole. */
  .tok-zaglavlje { display: none; }
  .tok-traka,
  .tok-traka-2 { grid-template-columns: minmax(0, 1fr); gap: .9rem; padding: .9rem 1rem; }
  /* naslov celine ne treba razmak trake iznad sebe kad je sve u jednoj koloni */
  .promena-glava { margin-bottom: -.2rem; }
  .tok-mini {
    display: block;
    font-size: .68rem; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; color: #94a3b8;
  }
  .tok-spona {
    top: -1.15rem; left: .35rem;
    transform: rotate(90deg);
  }
  .tok-spona::after { display: none; }
}

@media print {
  .sidebar, .topbar, .site-footer { display: none; }
  .main { margin-left: 0; }
}