/* Registar dokumenata.
   Klase za `input`, `button` i `a` stoje dvaput: Elementorov kit ih stilizira
   globalno (`.elementor-kit-5 a`, 0-1-1) i inace pregazi izgled widgeta. Iz
   istog razloga svako stanje ponavlja svaku boju. */

.crg {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-family: "Barlow", system-ui, sans-serif;
  container-type: inline-size;
}

/* ---------- alatna traka ---------- */

.crg-alati { display: flex; flex-direction: column; gap: 16px; }

.crg-trazi {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  max-width: 460px;
  padding: 0 16px;
  background: #fff;
  border: 1px solid #dfe7eb;
  color: #586f7c;
}

.crg-trazi:focus-within { border-color: #80d8ff; box-shadow: 0 0 0 3px rgba(128, 216, 255, 0.4); }

.crg .crg-polje.crg-polje {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #1f2c33;
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.4;
}

.crg .crg-polje.crg-polje:focus,
.crg .crg-polje.crg-polje:focus-visible { outline: none; border: 0; box-shadow: none; background: transparent; }

.crg-filtri { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.crg-oznaka {
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #586f7c;
  margin-right: 4px;
}

.crg .crg-cip.crg-cip {
  height: 34px;
  padding: 0 14px;
  border: 1px solid #dfe7eb;
  border-radius: 0;
  background: #fff;
  color: #37474f;
  cursor: pointer;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.crg .crg-cip.crg-cip:hover,
.crg .crg-cip.crg-cip:focus { border-color: #80d8ff; background: #fff; color: #0f6c99; }

.crg .crg-cip.crg-cip.is-aktivan,
.crg .crg-cip.crg-cip.is-aktivan:hover,
.crg .crg-cip.crg-cip.is-aktivan:focus { border-color: #37474f; background: #37474f; color: #fff; }

.crg-cip:focus-visible { outline: 3px solid rgba(128, 216, 255, 0.75); outline-offset: 2px; }

/* ---------- brojka i poredak ---------- */

/* Brojac i ZIP preselili su u traku odabira; ovdje ostaje samo sortiranje. */
.crg-brojka {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  font-size: 15px;
  color: #586f7c;
}

.crg .crg-poredak.crg-poredak {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid #dfe7eb;
  border-radius: 0;
  background: #fff;
  color: #37474f;
  cursor: pointer;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crg .crg-poredak.crg-poredak:hover,
.crg .crg-poredak.crg-poredak:focus { border-color: #80d8ff; background: #fff; color: #0f6c99; }
.crg-poredak:focus-visible { outline: 3px solid rgba(128, 216, 255, 0.75); outline-offset: 2px; }

/* ---------- popis ---------- */

/* ---------- tablica ----------
   Raspored je izmjeren na prototipu `Cerna_Registar.dc.html`: cetiri stupca
   (naziv · vrsta · objavljeno · datoteka), razmak 20, redak 18/6, crta
   `1px #eef2f4`, a zaglavlje `2px #1f2c33`. Ispod 1025 px prototip napusta
   tablicu i redak postaje kartica. */

.crg-glava,
.crg-red {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px 160px 320px;
  gap: 20px;
  align-items: center;
}

/* Kad izvor nema kategorije, stupca „Vrsta" nema — ni u zaglavlju ni u retku. */
.crg--bez-vrste .crg-glava,
.crg--bez-vrste .crg-red { grid-template-columns: minmax(0, 1fr) 160px 320px; }

.crg-glava {
  padding: 0 6px 12px;
  border-bottom: 1px solid #e6ecef;
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #586f7c;
}

.crg-glava span:last-child { text-align: right; }

.crg-popis { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.crg-red {
  padding: 18px 6px;
  border-bottom: 1px solid #eef2f4;
  transition: background-color 0.15s;
  color: #37474f;
}

/* `[hidden]` (0-0-0) gubi od vlastitog `display:grid` — bez ovoga filtar
   ne bi sakrio ni jedan redak. */
.crg [hidden] { display: none !important; }

.crg-celija { display: flex; align-items: center; min-width: 0; }

.crg-celija--datum { font-size: 15.5px; color: #586f7c; }

.crg-celija--datoteka { gap: 12px; justify-content: flex-end; flex-wrap: wrap; }

.crg-naziv {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 500;
  font-size: 16.5px;
  line-height: 1.4;
  color: #1f2c33;
  text-wrap: pretty;
}

.crg-meta { font-size: 14px; color: #586f7c; }

/* Znacka nosi ono cime izvor razvrstava dokument.
   Prototip joj daje `height: 24px`, ali ondje su kategorije kratke
   („Odluke", „Programi"). Naše znaju biti duge — „Plan savjetovanja s
   javnošću" — i tada se prelome, a fiksna visina ostane 24 px, pa drugi
   redak ispadne izvan pozadine. Zato `min-height` i okomiti razmak:
   jednoredna znacka je i dalje visoka 24 px, dvoredna naraste. */
.crg-znacka {
  display: inline-flex;
  align-items: center;
  /* Dvoredna znacka: redci centrirani (Toni 15.10.2026.). */
  justify-content: center;
  text-align: center;
  min-height: 24px;
  padding: 4px 10px;
  background: #eaf6fd;
  color: #0f6c99;
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-wrap: pretty;
}

/* Oznaka vrste datoteke ima stalnu sirinu da se stupac ne razilazi:
   „DOCX" mjeri 50 px, „WEBP" 52 px. */
.crg-znak {
  flex: 0 0 auto;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  height: 28px;
  border: 1px solid #dfe7eb;
  background: #fff;
  color: #586f7c;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.1em;
}

/* Celija je poravnata na desno, pa bi promjenjiva sirina velicine datoteke
   („85 KB" naspram „336 KB") pomicala oznaku tipa lijevo-desno iz retka u
   redak — izmjereno 1771–1779 px na istoj stranici. Fiksna sirina s desnim
   poravnanjem drzi i velicinu i oznaku u istoj koloni. */
.crg-vel {
  flex: 0 0 auto;
  min-width: 56px;
  font-size: 14.5px;
  color: #586f7c;
  white-space: nowrap;
  text-align: right;
}

/* Na sirokom je preuzimanje samo ikona; oznaka se vraca u uskom prikazu. */
.crg-dl-tekst { display: none; }

.crg .crg-btn.crg-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border-radius: 0;
  cursor: pointer;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
}

.crg .crg-btn--obris.crg-btn--obris { border: 1px solid #dfe7eb; background: #fff; color: #37474f; }
.crg .crg-btn--obris.crg-btn--obris:hover,
.crg .crg-btn--obris.crg-btn--obris:focus { border-color: #80d8ff; background: #fff; color: #0f6c99; }

.crg .crg-btn--pun.crg-btn--pun { border: 1px solid #37474f; background: #37474f; color: #fff; }
.crg .crg-btn--pun.crg-btn--pun:hover,
.crg .crg-btn--pun.crg-btn--pun:focus { border-color: #0f6c99; background: #0f6c99; color: #fff; }

.crg-btn:focus-visible { outline: 3px solid rgba(128, 216, 255, 0.75); outline-offset: -2px; }

/* Prazno stanje po prototipu: uspravno slozen naslov, uputa i izlaz. */
.crg-prazno {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 48px;
  background: #f4f9fc;
  border: 1px solid #dceaf2;
}
.crg-prazno[hidden] { display: none; }
.crg-prazno__naslov {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: 19px;
  color: #1f2c33;
}
.crg-prazno__opis { font-size: 16px; line-height: 1.55; color: #586f7c; text-wrap: pretty; }
.crg .crg-prazno__veza.crg-prazno__veza {
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #0f6c99;
  text-decoration: none;
}
.crg .crg-prazno__veza.crg-prazno__veza:hover,
.crg .crg-prazno__veza.crg-prazno__veza:focus { color: #0b5375; text-decoration: underline; }
.crg .crg-prazno__veza.crg-prazno__veza:focus-visible { outline: 3px solid rgba(128, 216, 255, 0.75); outline-offset: 2px; }

.crg-upozorenje { margin: 0; padding: 16px; background: #fff4e5; color: #8a5300; font-size: 14px; }

/* ---------- razine ---------- */
/* Mjeri se sirina roditelja, ne prozora: registar stoji u punoj sirini
   stranice, ali i u uzem stupcu s bocnom navigacijom. */

/* Prototip mjeri viewport i lomi tablicu ispod 1025 px, ali ondje registar
   ima punu sirinu stranice. Nase registarske stranice imaju bocni stupac, pa
   je mjerodavna sirina samog widgeta: na zaslonu od 1440 px glavni stupac je
   oko 940 px. Zato tablica prvo suzava svoje stupce, a tek ispod 900 px
   postaje kartica. */
@container (min-width: 900px) and (max-width: 1099px) {
  .crg-glava,
  .crg-red { grid-template-columns: minmax(0, 1fr) 160px 118px 300px; }
  .crg--bez-vrste .crg-glava,
  .crg--bez-vrste .crg-red { grid-template-columns: minmax(0, 1fr) 118px 300px; }
  /* 264 px nije bilo dovoljno za oznaku, velicinu, Pregled i preuzimanje u
     jednom retku — na tabletu (1024) gumbi su se slagali jedan ispod drugog
     i svaki je redak bio dvostruko visi (12.10.2026.). */
  .crg-celija--datoteka { gap: 10px; flex-wrap: nowrap; }
  .crg-naziv { font-size: 16px; }
  .crg-celija--datum { font-size: 14.5px; }
}

@container (max-width: 899px) {
  .crg-glava { display: none; }
  .crg-red {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 4px;
  }
  /* U uskom prikazu red pocinje s lijeva, pa fiksna sirina velicine samo
     stvara rupu — ondje se vraca na prirodnu sirinu. */
  .crg-celija--datoteka { justify-content: flex-start; }
  .crg-vel { min-width: 0; text-align: left; }
  .crg-naziv { font-size: 16px; }
  .crg-dl-tekst { display: inline; }

  /* Kartica u tri retka umjesto pet: naziv; vrsta i datum u istom retku;
     datoteka i gumbi. Sve ispod naziva poravnato je s pocetkom naziva
     (kvacica 22 + razmak). Prije je svaka kartica imala pet redaka i popis
     od 88 akata bio je 24 000 px dug na mobitelu (12.10.2026.). */
  .crg-red { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 14px; row-gap: 10px; }
  .crg-celija--naziv { flex: 1 1 100%; }
  .crg-celija--vrsta,
  .crg-celija--datum { flex: 0 0 auto; }
  .crg-celija--vrsta,
  .crg--bez-vrste .crg-celija--datum,
  .crg-celija--datoteka { margin-left: 60px; }
  .crg-celija--datoteka { flex: 1 1 100%; gap: 10px; }

  /* Redak dokumenta po prototipu (Cerna Natjecaj v2, mobilni): ispod naziva
     jedan sivi redak „datum · DOCX · 16 KB", ispod njega Pregled i
     preuzimanje iste visine. Prije su oznaka (28), velicina i gumbi (40)
     stajali u jednom retku razlicitih visina, a polozaj gumba ovisio je o
     sirini oznake i velicine (Toni 13.10.2026.: „jako lose izgleda").
     Celija datoteke se rastvara (`contents`), pa njezini dijelovi postaju
     stavke retka i mogu se rasporediti redoslijedom. */
  .crg-red { column-gap: 0; }
  .crg-celija--naziv { order: 1; }
  .crg-celija--vrsta { order: 2; margin-right: 12px; }
  .crg-celija--datum { order: 3; font-size: 14.5px; }
  .crg-celija--datoteka { display: contents; }
  .crg .crg-znak.crg-znak,
  .crg .crg-vel.crg-vel {
    order: 4;
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0;
    background: none;
    color: #586f7c;
    font-family: "Barlow", system-ui, sans-serif;
    font-size: 14.5px;
    font-weight: 400;
    letter-spacing: 0;
    text-align: left;
  }
  .crg .crg-vel.crg-vel { order: 5; }
  .crg-znak::before,
  .crg-vel::before { content: "·"; margin: 0 7px; }
  .crg-red::after { content: ""; order: 6; flex: 0 0 100%; }
  .crg-btn--obris { order: 7; }
  .crg-btn--pun { order: 8; }
  .crg .crg-btn--obris.crg-btn--obris,
  .crg .crg-vel + .crg-btn--pun.crg-btn--pun { margin-left: 60px; }
  .crg .crg-btn--obris + .crg-btn--pun.crg-btn--pun { margin-left: 10px; }
  .crg-dl-tekst { display: none; }
  .crg .crg-btn--pun.crg-btn--pun { width: 40px; padding: 0; justify-content: center; }
}

/* U uskom prikazu 38 px je previše — okvir i naziv se primaknu. */
@container (max-width: 700px) {
  /* Dvije klase: osnovno `.crg-celija--naziv { gap: 38px }` stoji nize u
     datoteci i s jednom klasom je pobjedjivalo — naziv je bio na 80 px, a
     datum ispod njega na 58 (13.10.2026.). */
  .crg .crg-celija--naziv { gap: 16px; }
  .crg-celija--vrsta,
  .crg--bez-vrste .crg-celija--datum,
  .crg-celija--datoteka { margin-left: 38px; }
  .crg .crg-btn--obris.crg-btn--obris,
  .crg .crg-vel + .crg-btn--pun.crg-btn--pun { margin-left: 38px; }
}

/* Na mobitelu preuzimanje ostaje samo ikona (kao u ostalim popisima
   dokumenata), da oznaka, velicina, Pregled i preuzimanje stanu u redak. */
@container (max-width: 440px) {
  .crg-dl-tekst { display: none; }
  .crg .crg-btn--pun.crg-btn--pun { width: 40px; padding: 0; justify-content: center; }
}

/* Dodirna meta na mobitelu 44 px (pravilo paketa), oba gumba iste visine. */
@media (max-width: 767px) {
  .crg .crg-btn.crg-btn { height: 44px; }
  .crg .crg-btn--pun.crg-btn--pun { width: 44px; }
}

@container (max-width: 420px) {
  .crg-brojka { font-size: 14px; }
}

/* Vise widgeta „Kartice" jedan ispod drugog (npr. O općini: Naselja,
   Manifestacije, Udruge…): u jednom stupcu naslov iduce skupine lijepio se
   za zadnju karticu prethodne (12.10.2026.). */
@media (max-width: 1024px) {
  .elementor-widget-cerna-kartice + .elementor-widget-cerna-kartice { margin-top: 48px; }
}
@media (max-width: 480px) {
  .elementor-widget-cerna-kartice + .elementor-widget-cerna-kartice { margin-top: 40px; }
}

/* ---------- sredisnja stranica Dokumenti ---------- */

.chb { display: flex; flex-direction: column; gap: 34px; font-family: "Barlow", system-ui, sans-serif; container-type: inline-size; }

/* Isti razlog kao kod `.crg`: `[hidden]` (0-0-0) gubi od vlastitog
   `display:flex`, pa bi skriveni redci i dalje stajali na stranici. */
.chb[hidden], .chb [hidden] { display: none !important; }

.chb-trazi { height: 58px; max-width: 620px; }
.chb-prijedlozi { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: -22px; }

.chb-rezultati { display: flex; flex-direction: column; gap: 8px; }

.chb-odjeljak { display: flex; flex-direction: column; gap: 18px; }

.chb-glava {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 2px solid #1f2c33;
}

.chb-naslov {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 800;
  font-size: 26px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #1f2c33;
}

.chb-ukupno { font-size: 14.5px; color: #586f7c; }

.chb-mreza { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }

.chb .chb-kartica.chb-kartica {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 26px 22px 22px;
  background: #fff;
  border: 1px solid #e6ecef;
  color: #1f2c33;
  text-decoration: none;
}

.chb .chb-kartica.chb-kartica:hover,
.chb .chb-kartica.chb-kartica:focus { border-color: #80d8ff; background: #fff; color: #1f2c33; }
.chb-kartica:focus-visible { outline: 3px solid rgba(128, 216, 255, 0.75); outline-offset: 2px; }

.chb-kartica--vanjska { background: #f4f9fc; border-color: #dceaf2; }

.chb-broj {
  position: absolute;
  top: 16px;
  right: 18px;
  padding: 2px 8px;
  background: #eef4f8;
  color: #0f6c99;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: 11px;
}

.chb-ime {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  color: #1f2c33;
}

.chb-kartica--vanjska .chb-ime { margin-top: 0; }

.chb-opis { font-size: 15px; line-height: 1.55; color: #586f7c; }
.chb-host { font-size: 14px; color: #0f6c99; }

.chb-napomena {
  margin: 0;
  padding: 20px 24px;
  background: #f4f9fc;
  border: 1px solid #dceaf2;
  font-size: 15.5px;
  line-height: 1.6;
  color: #37474f;
}

@container (max-width: 620px) {
  .chb-naslov { font-size: 21px; }
  .chb-mreza { grid-template-columns: 1fr; }
}

/* Kartice bez pretrage (rasporedne stranice): bez razmaka koji odvaja
   odjeljke sredisnje stranice, jer je odjeljak samo jedan. */
.chb--samo-kartice { gap: 0; }

/* Kartica bez oznake u kutu ne treba prostor rezerviran za nju. */
.chb-kartica:not(:has(.chb-broj)) .chb-ime { margin-top: 0; }

/* ---------- odabir i ZIP ---------- */

/* Kvacica stoji lijevo od naziva; naziv i oznaka glasila idu u stupac unutar
   `.crg-naziv-blok`. Smjer je izricit jer je stariji raspored ovdje ostavljao
   `flex-direction: column`, pa je kvacica zavrsila iznad naziva. */
/* Razmak okvir → naziv je 38 px, kao u prototipu: ondje okvir stoji u
   vlastitom stupcu od 44 px uz razmak mreže od 16, pa između njegova desnog
   ruba i naziva ostaje 38. */
.crg-celija--naziv { display: flex; flex-direction: row; align-items: flex-start; gap: 38px; }

/* Odabrani redak: svijetla podloga, traka u boji uz lijevi rub i deblji naziv. */
.crg-red.je-odabran { background: #f4f9fc; box-shadow: inset 3px 0 0 #0f6c99; }
.crg-red.je-odabran .crg-naziv { font-weight: 700; }
.crg-odabir { flex: 0 0 auto; display: inline-flex; align-items: center; height: 24px; }
/* Okvir za odabir je isti u traci i u retku: kvadrat 22 px s vlastitom
   kvacicom, jer preglednicki `checkbox` nosi zaobljenja koja dizajn ne trazi. */
.crg .crg-kvacica.crg-kvacica {
  appearance: none;
  -webkit-appearance: none;
  width: 22px; height: 22px; margin: 0; padding: 0;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid #b7c4ca; border-radius: 0; background: #fff;
  cursor: pointer;
}
.crg .crg-kvacica.crg-kvacica:hover { border-color: #0f6c99; }
.crg .crg-kvacica.crg-kvacica:checked,
.crg .crg-kvacica.crg-kvacica:indeterminate { border-color: #1f2c33; background: #1f2c33; }
.crg .crg-kvacica.crg-kvacica:checked::after {
  content: ""; width: 6px; height: 11px; margin-top: -3px;
  border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg);
}
.crg .crg-kvacica.crg-kvacica:indeterminate::after {
  content: ""; width: 10px; height: 2.5px; background: #fff;
}
.crg .crg-kvacica.crg-kvacica:focus-visible { outline: 3px solid rgba(128, 216, 255, 0.75); outline-offset: 2px; }

/* ---------- traka odabira ---------- */

/* Sjeda tocno na zaglavlje tablice (bez razmaka) i mijenja stanje kad je
   nesto odabrano. Lijevi padding jednak je paddingu retka, pa se okvir
   „odaberi sve" poklapa s okvirima u redovima. */
.crg-traka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 66px;
  padding: 10px 16px 10px 6px;
  background: #f4f9fc;
  border: 1px solid #e6ecef;
  color: #37474f;
  /* Animira se `background-color`, ne `background`: tranzicija na shorthandu
     ostaje na staroj boji i traka nikad ne potamni. Izmjereno 05.09.2026. */
  transition: background-color 0.15s, border-color 0.15s;
}
.crg-traka.je-aktivna { background: #1f2c33; border-color: #1f2c33; color: #fff; }

.crg-traka__sve { display: flex; align-items: center; gap: 12px; cursor: pointer; min-width: 0; }
.crg-traka__broj { font-size: 15px; line-height: 1.3; color: #586f7c; text-wrap: pretty; }
.crg-traka.je-aktivna .crg-traka__broj {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  color: #fff;
}
/* Na tamnoj traci okvir je bijel, a znak u njemu taman. */
.crg-traka.je-aktivna .crg-kvacica.crg-kvacica { border-color: #fff; background: #fff; }
.crg-traka.je-aktivna .crg-kvacica.crg-kvacica:checked::after { border-color: #1f2c33; }
.crg-traka.je-aktivna .crg-kvacica.crg-kvacica:indeterminate::after { background: #1f2c33; }

.crg-traka__akcije { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

.crg .crg-ponisti.crg-ponisti {
  height: 46px; padding: 0 14px;
  border: 0; border-radius: 0; background: none; color: #c6d4db; cursor: pointer;
  font-family: "Montserrat", system-ui, sans-serif; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
}
.crg .crg-ponisti.crg-ponisti:hover,
.crg .crg-ponisti.crg-ponisti:focus { color: #fff; background: none; }
.crg .crg-ponisti.crg-ponisti:focus-visible { outline: 3px solid rgba(128, 216, 255, 0.75); outline-offset: 2px; }
.crg-naziv-blok { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.crg-meta--glasilo { color: #0f6c99; font-weight: 600; }

.crg-zip { display: inline-flex; margin: 0; }
/* Neaktivan gumb ne blijedi prozirnoscu nego ima vlastite mirne boje —
   `opacity` bi ga na tamnoj traci pretvorila u mrlju. */
.crg .crg-zip-gumb.crg-zip-gumb {
  display: inline-flex; align-items: center; gap: 9px;
  height: 46px; padding: 0 20px;
  border: 1px solid #cfdae0; border-radius: 0; background: transparent; color: #9fb1ba;
  font-family: "Montserrat", system-ui, sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; cursor: not-allowed;
  /* Tema gumbima daje `transition: all .3s`; uz nju promjena `background`
     shorthanda ostaje na staroj boji, pa se ovdje nabraja što se animira. */
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.crg-traka.je-aktivna .crg-zip-gumb.crg-zip-gumb {
  border-color: #fff; background: #fff; color: #1f2c33; cursor: pointer;
}
.crg-traka.je-aktivna .crg-zip-gumb.crg-zip-gumb:hover,
.crg-traka.je-aktivna .crg-zip-gumb.crg-zip-gumb:focus {
  border-color: #80d8ff; background: #80d8ff; color: #1f2c33;
}
.crg .crg-zip-gumb.crg-zip-gumb:focus-visible { outline: 3px solid rgba(128,216,255,.75); outline-offset: 2px; }

/* Zakljucni blok ispod tablice. Mjere iz prototipa registra, jednake na svim
   razinama: podloga #f4f9fc, obrub #dceaf2, padding 22/24, razmak 44 px iznad. */
.crg-zakljucak {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 44px;
  padding: 22px 24px;
  background: #f4f9fc;
  border: 1px solid #dceaf2;
}
.crg-zakljucak svg { flex: 0 0 auto; margin-top: 3px; color: #37474f; }
/* Klasa se pise dvaput jer tema svakom `p` dodaje `margin-bottom: 16px`,
   pa je blok inace 16 px visi od prototipa. */
.crg .crg-zakljucak__tekst.crg-zakljucak__tekst {
  margin: 0;
  min-width: 0;
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 15.5px;
  line-height: 1.65;
  color: #37474f;
  text-wrap: pretty;
}
.crg .crg-zakljucak__veza.crg-zakljucak__veza {
  color: #0f6c99;
  font-weight: 400;
  text-decoration: underline;
}
.crg .crg-zakljucak__veza.crg-zakljucak__veza:hover,
.crg .crg-zakljucak__veza.crg-zakljucak__veza:focus { color: #0b5375; text-decoration: underline; }
.crg .crg-zakljucak__veza.crg-zakljucak__veza:focus-visible { outline: 3px solid rgba(128, 216, 255, 0.75); outline-offset: 2px; }

@media (max-width: 767px) {
  .crg .crg-zip-gumb.crg-zip-gumb { height: 44px; }
  .crg-prazno { padding: 32px 20px; }
  .crg-zakljucak { margin-top: 32px; padding: 18px 20px; }
}