/* Sjednice Opcinskog vijeca — po prototipu `Cerna Sjednice.dc.html`.
   Bez zaobljenja, bez sjena osim na lebdecem pregledu dokumenta.

   Selektori za <button> i <input> nose klasu DVAPUT: Elementor kit stilizira
   te elemente globalno (`.elementor-kit-5 button`, specificnost 0-1-1) i inace
   pregazi izgled widgeta — isti kvar kao kod gumba za dijeljenje u 2.6.1. */

.csj {
  --csj-popis: 340px;
  --csj-razmak: 44px;
  --csj-visina: 820px;
}

.csj-prazno { font-size: 16.5px; color: #586f7c; }

/* Skrivanje ide atributom `hidden` — i popis saziva u harmonici i ikone na
   gumbu za sviranje. Pravila nize im daju `display: flex`, sto je jace od
   pravila preglednika za `[hidden]`, pa se bez ovoga nista nikad ne sakrije:
   harmonika se ne sklapa, a gumb pokazuje play i pauzu istovremeno. */
.csj [hidden] { display: none !important; }

/* ---------- tražilica ---------- */

.csj-trazi-red { display: flex; justify-content: flex-end; margin-bottom: 26px; }

/* Kad trazilica stoji zasebnim widgetom u zaglavlju stranice, poravnanje i
   razmak odreduje Elementorov stupac u kojem sjedi, a ne ovo pravilo. */
.csj-trazi-red--sama { margin-bottom: 0; }
.csj-trazi-red--sama .csj-trazi { width: 100%; max-width: var(--csj-trazi-w, 340px); }

.csj-trazi {
  display: flex;
  align-items: center;
  height: 52px;
  width: 340px;
  border: 1px solid #dfe7eb;
  background: #fff;
}

.csj-trazi-ikona { display: flex; align-items: center; padding: 0 14px; color: #586f7c; }

.csj-trazi-polje.csj-trazi-polje {
  flex: 1;
  min-width: 0;
  height: 52px;
  padding: 0 14px 0 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 16px;
  color: #37474f;
}

/* Prsten fokusa nosi cijeli okvir, ne samo polje: polje stoji desno od ikone,
   pa je prsten oko njega ostavljao ikonu izvan i okvir je izgledao prepolovljeno.
   Isti prsten kao na gumbu pretrage u zaglavlju. */
.csj-trazi:focus-within {
  border-color: #80d8ff;
  box-shadow: 0 0 0 3px rgba(128, 216, 255, 0.45);
}

.csj-trazi-polje.csj-trazi-polje:focus,
.csj-trazi-polje.csj-trazi-polje:focus-visible {
  outline: none;
  border: 0;
  box-shadow: none;
}

/* ---------- raspored ---------- */

.csj-raspored {
  display: grid;
  grid-template-columns: var(--csj-popis, 340px) minmax(0, 1fr);
  gap: var(--csj-razmak, 44px);
  align-items: start;
}

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

.csj-bocno {
  display: flex;
  flex-direction: column;
  background: #f4f9fc;
  border: 1px solid #dceaf2;
  max-height: var(--csj-visina, 820px);
  overflow-y: auto;
}

.csj-saziv-glava.csj-saziv-glava { margin: 0; border-bottom: 1px solid #dceaf2; }

.csj-saziv-btn.csj-saziv-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 18px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1f2c33;
}

/* Ista zamka: bez ovoga glava saziva na hoveru postane puna plava ploha. */
.csj-saziv-btn.csj-saziv-btn:hover { background: transparent; color: #1f2c33; }
.csj-saziv-btn.csj-saziv-btn:focus-visible { outline: 3px solid rgba(128, 216, 255, 0.75); outline-offset: -3px; }

.csj-chevron { display: flex; flex: 0 0 auto; color: #37474f; transition: transform 140ms; }
.csj-saziv-btn[aria-expanded="true"] .csj-chevron { transform: rotate(90deg); }

.csj-saziv-naziv { flex: 1; text-align: left; }

.csj-saziv-broj {
  font-family: "Barlow", system-ui, sans-serif;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: #586f7c;
}

.csj-saziv-popis { display: flex; flex-direction: column; border-bottom: 1px solid #dceaf2; }

/* Dvije klase da globalna boja poveznice iz Elementor kita ne pregazi ove. */
.csj-stavka.csj-stavka {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 18px;
  text-align: left;
  text-decoration: none;
  border-left: 3px solid transparent;
  background: transparent;
  color: #37474f;
}

.csj-stavka.csj-stavka:hover { background: rgba(255, 255, 255, 0.6); }
.csj-stavka.csj-stavka:focus-visible { outline: 3px solid rgba(128, 216, 255, 0.75); outline-offset: -3px; }

.csj-stavka.je-aktivna { border-left-color: #0f6c99; background: #fff; }

.csj-stavka-naziv {
  flex: 1;
  min-width: 0;
  font-family: "Barlow", system-ui, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: #37474f;
}

.csj-stavka.je-aktivna .csj-stavka-naziv {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: 15.5px;
  color: #0f6c99;
}

.csj-stavka-broj {
  flex: 0 0 auto;
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 14px;
  color: #586f7c;
  white-space: nowrap;
}

.csj-stavka.je-aktivna .csj-stavka-broj { font-weight: 600; color: #0f6c99; }

.csj-zip.csj-zip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px;
  padding: 0 16px;
  height: 48px;
  border: 1px solid #cfdfe8;
  background: #fff;
  text-decoration: none;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #37474f;
}

.csj-zip.csj-zip:hover { border-color: #80d8ff; color: #0f6c99; }

/* ---------- ploča sjednice ---------- */

.csj-panel { display: flex; flex-direction: column; min-width: 0; }

.csj-panel-glava {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  padding-bottom: 26px;
  border-bottom: 2px solid #1f2c33;
}

.csj-panel-naslovi { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.csj-naslov.csj-naslov {
  margin: 0;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 800;
  font-size: 30px;   /* 1025–1440; ostale razine niže */
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #1f2c33;
}

.csj-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 16px;
  color: #586f7c;
}

.csj-tocka { width: 4px; height: 4px; border-radius: 50%; background: #cfdae0; }

.csj-preuzmi-sve.csj-preuzmi-sve {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 26px;
  background: #37474f;
  color: #fff;
  text-decoration: none;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.csj-preuzmi-sve.csj-preuzmi-sve:hover { background: #0f6c99; color: #fff; }

/* ---------- tonski zapis ---------- */

/* Dva retka: naslov i preuzimanje gore, upravljanje dolje. */
.csj-audio {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 30px;
  padding: 20px 24px;
  background: #f4f9fc;
  border: 1px solid #dceaf2;
}

.csj-audio-vrh {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.csj-audio-naslov {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #1f2c33;
}

.csj-audio-preuzmi.csj-audio-preuzmi {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15.5px;
  text-decoration: none;
  color: #37474f;
}

.csj-audio-preuzmi.csj-audio-preuzmi:hover,
.csj-audio-preuzmi.csj-audio-preuzmi:focus-visible { color: #0f6c99; }
.csj-audio-vel { color: #586f7c; }

.csj-audio-oznaka { font-size: 14.5px; color: #586f7c; }

.csj-audio-red {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* Zaobljenje i pozadina ponavljaju se u svim stanjima: Elementorov kit
   stilizira `button:hover` i `button:focus` (0-2-1) i ondje postavlja
   `border-radius: 0`, pa bi gumb pod misem postao kvadrat. */
.csj-play.csj-play {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #37474f;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.csj-play.csj-play:hover,
.csj-play.csj-play:focus,
.csj-play.csj-play:active {
  background: #0f6c99;
  border-radius: 50%;
}

.csj-play span { display: flex; }

/* Traka trajanja — po njoj se i premotava, pa je `role="slider"`. */
.csj-traka {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 5px;
  background: #e2eaee;
  cursor: pointer;
  touch-action: none;
}

.csj-traka-ispuna { display: block; height: 5px; width: 0; background: #0f6c99; }

/* Obje trake su vizualno 5 px visoke, sto je premalo za pogoditi misem, a
   pogotovo prstom. Nevidljivi sloj prosiruje podrucje pogotka na 23 px, a
   izgled ostaje isti. */
.csj-traka::before,
.csj-glasnoca::before {
  content: "";
  position: absolute;
  inset: -9px 0;
}

.csj-vrijeme {
  flex: 0 0 auto;
  font-size: 14.5px;
  color: #586f7c;
  white-space: nowrap;
}

.csj-audio-crta {
  flex: 0 0 auto;
  width: 1px;
  align-self: stretch;
  min-height: 24px;
  background: #dceaf2;
}

/* ---------- glasnoća ---------- */

.csj-zvuk {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #37474f;
}

.csj-zvuk.je-tiho { color: #90a4ae; }

/* Gumb bez pozadine — kit svakom `button` daje tamnu ispunu, i u stanjima. */
.csj-utisaj.csj-utisaj,
.csj-utisaj.csj-utisaj:hover,
.csj-utisaj.csj-utisaj:focus,
.csj-utisaj.csj-utisaj:active {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.csj-utisaj.csj-utisaj { color: inherit; }
.csj-utisaj.csj-utisaj:hover { color: #0f6c99; }
.csj-utisaj span { display: flex; }

.csj-glasnoca {
  position: relative;
  flex: 0 0 auto;
  width: 88px;
  height: 5px;
  background: #e2eaee;
  cursor: pointer;
  touch-action: none;
}

.csj-glasnoca-ispuna {
  position: absolute;
  inset: 0 auto 0 0;
  width: 70%;
  background: #0f6c99;
}

.csj-glasnoca-rucica {
  position: absolute;
  top: 50%;
  left: 70%;
  transform: translate(-50%, -50%);
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #0f6c99;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(15, 108, 153, 0.28);
  pointer-events: none;
}

.csj-zvuk.je-tiho .csj-glasnoca-ispuna,
.csj-zvuk.je-tiho .csj-glasnoca-rucica { background: #b0bec5; }

.csj-traka:focus-visible,
.csj-glasnoca:focus-visible,
.csj-play.csj-play:focus-visible,
.csj-utisaj.csj-utisaj:focus-visible {
  outline: 3px solid rgba(128, 216, 255, 0.75);
  outline-offset: 4px;
}

/* ---------- grupe dokumenata ---------- */

.csj-grupa { display: flex; flex-direction: column; margin-top: 38px; }

.csj-grupa-glava { display: flex; align-items: center; gap: 16px; padding-bottom: 10px; }

.csj-grupa-naziv {
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #586f7c;
}

.csj-grupa-crta { flex: 1; height: 1px; background: #e6ecef; }
.csj-grupa-broj { font-size: 14.5px; color: #586f7c; }

.csj-red {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 17px 6px;
  border-bottom: 1px solid #eef2f4;
  color: #37474f;
}

.csj-red[hidden] { display: none; }

.csj-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  height: 28px;
  border: 1px solid #dfe7eb;
  background: #fff;
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #586f7c;
}

.csj-ime { flex: 1; min-width: 0; font-size: 17px; line-height: 1.45; }
.csj-vel { flex: 0 0 auto; font-size: 14.5px; color: #586f7c; white-space: nowrap; }

.csj-akcije { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }

.csj-pregled.csj-pregled {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 13px;
  cursor: pointer;
  border: 1px solid #dfe7eb;
  background: #fff;
  color: #37474f;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Pozadina se navodi i na hoveru: tema boji svaki `button` u tom stanju
   vlastitom ispunom, a ona je ista boja kao nas tekst (#0f6c99), pa je
   natpis „Pregled" nestajao. Izmjereno 07.09.2026.: kontrast 1,0. */
.csj-pregled.csj-pregled:hover { background: #fff; border-color: #80d8ff; color: #0f6c99; }
.csj-pregled.csj-pregled:focus-visible,
.csj-preuzmi:focus-visible { outline: 3px solid rgba(128, 216, 255, 0.75); outline-offset: -2px; }

.csj-preuzmi.csj-preuzmi {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid #37474f;
  background: #37474f;
  color: #fff;
}

.csj-preuzmi.csj-preuzmi:hover { background: #0f6c99; border-color: #0f6c99; color: #fff; }

/* ---------- napomena ---------- */

.csj-napomena {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 42px;
  padding: 22px 24px;
  background: #f4f9fc;
  border: 1px solid #dceaf2;
  font-size: 15.5px;
  line-height: 1.65;
  color: #37474f;
}

.csj-napomena svg { flex: 0 0 auto; margin-top: 2px; }
.csj-napomena a.csj-napomena-veza,
.csj-napomena a { color: #0f6c99; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- responzivno ---------- */

@media (max-width: 1024px) {
  .csj-raspored { grid-template-columns: 1fr; }
  .csj-bocno { max-height: none; overflow-y: visible; }
  .csj-trazi { width: 100%; }
  .csj-trazi-red { justify-content: stretch; }
  .csj-panel-glava { flex-direction: column; align-items: stretch; }
  .csj-preuzmi-sve.csj-preuzmi-sve { align-self: flex-start; }
  .csj-naslov.csj-naslov { font-size: 28px; }
}

@media (max-width: 768px) {
  .csj-raspored { gap: 28px; }
  .csj-naslov.csj-naslov { font-size: 25px; }
  .csj-panel-glava { gap: 18px; padding-bottom: 22px; }
  .csj-audio { gap: 12px; margin-top: 24px; padding: 18px; }
  .csj-audio-red { flex-wrap: wrap; gap: 14px; }
  .csj-audio-crta { display: none; }
  .csj-glasnoca { width: 72px; }
  .csj-grupa { margin-top: 30px; }
  .csj-red { gap: 12px; padding: 15px 4px; }
  .csj-vel { display: none; }
  .csj-badge { min-width: 48px; }
  .csj-ime { font-size: 16px; }
  .csj-pregled.csj-pregled { padding: 0 11px; }
  .csj-napomena { margin-top: 32px; padding: 18px; }
  .csj-stavka.csj-stavka { padding: 13px 16px; }
}

/* Mobitel: naziv dokumenta dobiva cijeli redak, gumbi idu ispod njega,
   poravnati s pocetkom naziva. U jednom retku je naziv imao ~120 px i
   lomio se u cetiri-pet redaka (12.10.2026.). */
@media (max-width: 560px) {
  .csj-red { flex-wrap: wrap; row-gap: 10px; align-items: flex-start; }
  .csj-badge { margin-top: 1px; }
  .csj-ime { flex: 1 1 calc(100% - 60px); }
  .csj-akcije { margin-left: 60px; }
}

@media (max-width: 480px) {
  .csj-naslov.csj-naslov { font-size: 23px; }
}

@media (min-width: 1441px) {
  .csj-naslov.csj-naslov { font-size: 34px; }
}

@media (min-width: 1920px) {
  .csj-naslov.csj-naslov { font-size: 42px; }
}