/* Edukacija — vizualni sustav CZIS-a
   Plava paleta i geometrija preuzete su s czis.hr. Plohe za čitanje su pune,
   ne staklene: tekst preko poluprozirne podloge na gradijentu gubi kontrast,
   a ovdje se čita tridesetak minuta.
   Fontovi se poslužuju lokalno — podaci polaznika ne odlaze trećoj strani. */

/* ------------------------------------------------------------------ font */

/* ---------------------------------------------------------------- tokeni */
:root{
  --bg-1:#040C18;
  --bg-2:#071528;
  --bg-3:#0B213F;
  --staklo:rgba(255,255,255,.075);
  --staklo-jako:#0B1728;
  --puno:#0A1729;
  --puno-2:#0E1E36;
  --rub:rgba(255,255,255,.12);
  --rub-jak:rgba(255,255,255,.26);
  --text:#F4F7FC;
  --tekst:#DBE4F5;
  --muted:#B7C3D8;
  --tiho:#8EA0BA;
  --accent:#2F6DFF;
  --accent-light:#7DB1FF;
  --zelena:#3FBF8F;
  --crvena:#FF6B57;
  --sjena:0 30px 90px rgba(0,0,0,.38);
  --sjena-gumb:0 10px 24px rgba(47,109,255,.32);

  --body:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --util:ui-monospace,SFMono-Regular,"DejaVu Sans Mono",Consolas,monospace;

  --r-velik:22px;
  --r-srednji:16px;
  --r-mali:14px;
  --sirina:1120px;
}

/* Svijetla inačica: ista paleta, obrnuta ploha. Naglasak je tamniji jer
   #2F6DFF na bijelom nema dovoljan kontrast za tekst. */
[data-tema="svijetlo"]{
  --bg-1:#EEF2F9;
  --bg-2:#F4F7FC;
  --bg-3:#E4ECFA;
  --staklo:rgba(255,255,255,.7);
  --staklo-jako:#FFFFFF;
  --puno:#FFFFFF;
  --puno-2:#F1F5FC;
  --rub:rgba(10,23,41,.14);
  --rub-jak:rgba(10,23,41,.30);
  --text:#0A1729;
  --tekst:#243349;
  --muted:#4C5B72;
  --tiho:#5C6C86;
  --accent:#1B4FD8;
  --accent-light:#1B4FD8;
  --zelena:#1F7A57;
  --crvena:#B03A28;
  --sjena:0 24px 60px rgba(11,33,63,.12);
  --sjena-gumb:0 10px 22px rgba(27,79,216,.24);
}

*{box-sizing:border-box}

html,body{margin:0;padding:0;min-height:100%}
body{
  color:var(--tekst);
  font-family:var(--body);
  font-size:16px;
  line-height:1.7;
  background:
    radial-gradient(circle at 18% 20%, rgba(18,97,255,.22), transparent 28rem),
    radial-gradient(circle at 80% 15%, rgba(40,120,255,.10), transparent 24rem),
    linear-gradient(135deg,var(--bg-3) 0%, var(--bg-2) 42%, var(--bg-1) 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
[data-tema="svijetlo"] body{
  background:
    radial-gradient(circle at 18% 20%, rgba(47,109,255,.10), transparent 28rem),
    linear-gradient(135deg,var(--bg-3) 0%, var(--bg-2) 45%, var(--bg-1) 100%);
}

/* mrežica preko podloge */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.16;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(to bottom, black, transparent 85%);
}
[data-tema="svijetlo"] body::before{
  background-image:
    linear-gradient(rgba(10,23,41,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,23,41,.05) 1px, transparent 1px);
}

:focus-visible{outline:2px solid var(--accent-light);outline-offset:3px;border-radius:6px}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* ------------------------------------------------------------------ kadar
   Modul živi u okviru, ne po cijeloj visini prozora. Na visokom zaslonu bi
   inače podnožje s navigacijom bilo daleko ispod teksta koji se čita. */
.kadar{position:relative;z-index:1;width:min(100% - 40px, 1180px);
  height:min(92vh, 900px);margin:20px auto;display:flex;flex-direction:column;
  overflow:hidden;border:1px solid var(--rub);border-radius:var(--r-velik);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.03));
  backdrop-filter:blur(18px);box-shadow:var(--sjena)}
[data-tema="svijetlo"] .kadar{background:rgba(255,255,255,.55)}

/* ------------------------------------------------------------- zaglavlje */
.vrh{flex:none;z-index:30}
.zaglavlje{background:var(--staklo-jako);border-bottom:1px solid var(--rub);
  backdrop-filter:blur(14px)}
.zaglavlje-unutra{max-width:var(--sirina);margin:0 auto;padding:14px 34px;
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.zaglavlje-naziv{font-weight:800;font-size:16px;letter-spacing:-.02em;color:var(--text)}
.zaglavlje-org{font-family:var(--util);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.zaglavlje-desno{display:flex;align-items:center;gap:14px}
.zaglavlje-zapis{font-family:var(--util);font-size:11px;letter-spacing:.1em;color:var(--muted)}
.zaglavlje-zapis b{color:var(--text);font-weight:400}

.tema-gumb{font-family:var(--util);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  padding:7px 13px;border-radius:999px;border:1px solid var(--rub);
  background:var(--staklo-jako);color:var(--muted);cursor:pointer}
.tema-gumb:hover{color:var(--text);border-color:var(--rub-jak)}
/* Ikone sunca i mjeseca, iste kao u Kompasu. Atribut hidden ne djeluje unutar
   SVG-a, pa se prebacuje razredom na gumbu. */
.tema-ikona{display:inline-flex;align-items:center;gap:8px;padding:6px 13px 6px 11px}
.tema-natpis{font-family:var(--util);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase}
.tema-ikona .ikona-mjesec{display:none}
.tema-ikona.svijetlo .ikona-sunce{display:none}
.tema-ikona.svijetlo .ikona-mjesec{display:inline}

/* ----------------------------------------- kralježnica tečaja (potpis) */
.traka{background:var(--staklo-jako);border-bottom:1px solid var(--rub);backdrop-filter:blur(12px)}
.traka:empty{display:none}
.traka-naslov,.traka-brojac{display:none}
.traka-vodoravna{max-width:var(--sirina);margin:0 auto;padding:10px 34px;
  display:flex;align-items:flex-end;gap:14px;overflow-x:auto}
.blok{display:flex;flex-direction:column;gap:5px;flex:none}
.blok-ime{font-family:var(--util);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:transparent;white-space:nowrap;height:11px}
.blok.tekuci .blok-ime{color:var(--accent-light)}
.segmenti{display:flex;gap:3px;align-items:flex-end}
.segment{width:15px;height:3px;padding:0;border:0;border-radius:999px;
  background:rgba(255,255,255,.18);cursor:default}
[data-tema="svijetlo"] .segment{background:rgba(10,23,41,.16)}
.segment.vidjen{background:var(--muted);cursor:pointer}
.blok.tekuci .segment{height:5px}
.segment.tekuci{background:var(--accent);width:26px;box-shadow:0 0 0 4px rgba(47,109,255,.18)}

/* ---------------------------------------------------------------- ploha */
.ljuska{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:38px 34px 34px}
.ljuska > .ploca{max-width:var(--sirina);margin:0 auto}
.ploca{min-height:340px}
.ploca.ulazi{animation:ulaz .28s cubic-bezier(.2,.8,.2,1)}
@keyframes ulaz{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.oznaka-bloka{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;
  border-radius:999px;border:1px solid var(--rub);background:var(--staklo-jako);
  color:var(--text);font-size:11.5px;font-weight:600;margin:0 0 20px}
.oznaka-bloka::before{content:"";width:8px;height:8px;border-radius:50%;
  background:var(--accent-light);box-shadow:0 0 0 5px rgba(125,177,255,.12);flex:none}

.ploca h1{font-size:clamp(34px,5.4vw,58px);line-height:.98;letter-spacing:-.055em;
  font-weight:800;color:var(--text);margin:0 0 18px;max-width:18ch;text-wrap:balance}
.ploca h2{font-size:clamp(26px,3.6vw,38px);line-height:1.06;letter-spacing:-.04em;
  font-weight:800;color:var(--text);margin:0 0 15px;max-width:22ch;text-wrap:balance}

.tijelo{max-width:62ch}
/* Obostrano poravnanje uz rastavljanje na slogove. Bez rastavljanja bi u
   hrvatskom, gdje su riječi duge, nastajale široke rupe između riječi. */
.tijelo p{margin:0 0 13px;font-size:16px;line-height:1.7;
  text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.tijelo li{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.situacija p{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.ishod p{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
/* Kratki tekst se ne poravnava obostrano — ondje rupe najviše smetaju. */
.tijelo .napomena,.tecaj-opis{text-align:left;hyphens:manual}
.tijelo strong{color:var(--text);font-weight:600}
.tijelo code{font-family:var(--util);font-size:.9em;background:var(--puno-2);
  padding:2px 6px;border-radius:6px;color:var(--text)}
.tijelo ul,.tijelo ol{list-style:none;padding:0;margin:16px 0 0;counter-reset:t}
/* Stavka je blok, ne flex spremnik: uz flex bi svaki <strong> i tekstni čvor
   postao zaseban stupac i rečenica bi se raspala. Brojka je apsolutna. */
.tijelo li{position:relative;padding:13px 18px 13px 48px;margin-bottom:8px;
  border-radius:var(--r-mali);background:var(--puno);border:1px solid var(--rub);
  line-height:1.6;counter-increment:t}
.tijelo li::before{content:counter(t,decimal-leading-zero);position:absolute;
  left:18px;top:17px;font-family:var(--util);font-size:11px;color:var(--accent-light)}
.tijelo .napomena{color:var(--muted);font-size:14.5px}
/* Legacy oznaka tenant placeholdera. Krajnji korisnik ne smije vizualno
   razlikovati zadanu i prilagođenu vrijednost od ostatka teksta. */
.popuniti{font-style:inherit;color:inherit;background:none;border:0;border-radius:0;padding:0;white-space:normal}
[data-tema="svijetlo"] .popuniti{color:inherit;background:none;border-color:transparent}

/* ------------------------------------------------------- popis tečajeva */
.tecajevi{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-direction:column;
  gap:12px;max-width:70ch}
.tecaj-red{padding:20px 22px;border-radius:var(--r-srednji);background:var(--puno);
  border:1px solid var(--rub)}
.tecaj-glava{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-bottom:6px}
.tecaj-naziv{font-size:21px;font-weight:800;letter-spacing:-.03em;color:var(--text);
  margin:0;max-width:none}
.tecaj-opis{margin:0 0 14px;color:var(--muted);font-size:14.5px;line-height:1.6}
.tecaj-noga{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;border-top:1px solid var(--rub);padding-top:14px}
.tecaj-podatak{font-family:var(--util);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}

/* ------------------------------------------- bogatiji sadržaj slajdova */
/* Sve ovo se koristi iz polja "tijelo" u JSON-u tečaja. Slike i crteži moraju
   biti s vlastitog poslužitelja ili ugrađeni kao SVG — sigurnosna politika
   ne dopušta vanjske izvore. */
.tijelo a{color:var(--accent-light);text-decoration:none;
  border-bottom:1px solid rgba(125,177,255,.45)}
.tijelo a:hover{color:var(--text);border-bottom-color:var(--rub-jak)}

.dvostupac{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:28px;align-items:start;max-width:none}
.dvostupac > *{min-width:0}
.dvostupac p:last-child{margin-bottom:0}

.figura{margin:0;padding:18px;border-radius:var(--r-srednji);background:var(--puno);
  border:1px solid var(--rub)}
.figura svg,.figura img{display:block;width:100%;height:auto;border-radius:8px}
.figura figcaption{margin-top:12px;font-family:var(--util);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:left}

.ikone{list-style:none;padding:0;margin:16px 0 0;counter-reset:none}
.ikone li{display:flex;gap:14px;align-items:flex-start;padding:13px 18px;
  margin-bottom:8px;border-radius:var(--r-mali);background:var(--puno);
  border:1px solid var(--rub);text-align:left;hyphens:manual}
.ikone li::before{content:none}
.ikone svg{width:20px;height:20px;flex:none;margin-top:2px;color:var(--accent-light)}

/* Prikaz lažne poruke, za vježbe prepoznavanja */
.poruka-primjer{border-radius:var(--r-srednji);border:1px solid var(--rub);
  background:var(--puno);overflow:hidden;margin:0 0 18px}
.poruka-zaglavlje{padding:12px 16px;background:var(--puno-2);
  border-bottom:1px solid var(--rub);font-family:var(--util);font-size:11.5px;
  color:var(--muted);line-height:1.9}
.poruka-tijelo{padding:16px}
.poruka-tijelo p{text-align:left;hyphens:manual;font-size:15px}
.trag{background:rgba(255,107,87,.16);border-bottom:1px dashed var(--crvena);
  padding:0 3px;border-radius:3px}
.trag-opis{font-family:var(--util);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--crvena)}

/* Blagi pokret: prekidač za smanjeno gibanje ga isključuje globalno. */
@keyframes puls{0%,100%{opacity:.25}50%{opacity:1}}
.pulsira{animation:puls 2.4s ease-in-out infinite}
@keyframes klizi{from{transform:translateX(0)}to{transform:translateX(14px)}}
.klizi{animation:klizi 1.8s ease-in-out infinite alternate}

@media (max-width:760px){
  .dvostupac{grid-template-columns:1fr;gap:18px}
}

/* -------------------------------------------------------------- pitanja */
.pitanje{margin-top:8px}
.situacija{border-radius:var(--r-srednji);border:1px solid var(--rub);
  border-left:3px solid var(--accent);background:var(--puno);
  padding:18px 22px;margin:0 0 24px;max-width:68ch}
.situacija p{margin:0;color:var(--text)}
.pitanje-tekst{font-size:22px;font-weight:800;letter-spacing:-.03em;
  color:var(--text);margin:0 0 15px;line-height:1.2}

.opcije{display:flex;flex-direction:column;gap:9px;max-width:68ch}
.opcija{display:flex;gap:14px;align-items:flex-start;text-align:left;width:100%;
  padding:15px 18px;border-radius:var(--r-mali);background:var(--puno);
  border:1px solid var(--rub);color:var(--tekst);font:inherit;font-size:15px;
  line-height:1.5;cursor:pointer;transition:border-color .15s,background .15s}
.opcija:hover:not(:disabled){border-color:var(--rub-jak);background:var(--puno-2)}
.opcija:disabled{cursor:default}
.opcija-oznaka{font-family:var(--util);font-size:11px;color:var(--muted);
  padding-top:2px;flex:none}
.opcija.odabrana{border-color:var(--accent)}
.opcija.tocna{border-color:var(--zelena);background:rgba(63,191,143,.12)}
.opcija.tocna .opcija-oznaka{color:var(--zelena)}
.opcija.netocna{border-color:var(--crvena);background:rgba(255,107,87,.12)}
.opcija.netocna .opcija-oznaka{color:var(--crvena)}

.ishod{margin-top:18px;max-width:68ch;padding:16px 20px;border-radius:var(--r-mali);
  border:1px solid var(--rub);background:var(--puno)}
.ishod.da{border-color:rgba(63,191,143,.32);background:rgba(63,191,143,.08)}
.ishod.ne{border-color:rgba(255,107,87,.30);background:rgba(255,107,87,.08)}
.ishod-naslov{font-family:var(--util);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;margin:0 0 7px}
.ishod.da .ishod-naslov{color:var(--zelena)}
.ishod.ne .ishod-naslov{color:var(--crvena)}
.ishod p{margin:0;font-size:14.5px;line-height:1.65}

.kviz-zaglavlje{display:flex;align-items:baseline;justify-content:space-between;
  border-bottom:1px solid var(--rub);padding-bottom:12px;margin-bottom:24px}
.kviz-korak{font-family:var(--util);font-size:11px;letter-spacing:.14em;color:var(--muted)}

/* ------------------------------------------------------------- rezultat */
.rezultat-broj{font-size:72px;line-height:1;font-weight:800;letter-spacing:-.05em;
  margin:0 0 6px}
.rezultat-broj.da{color:var(--zelena)}
.rezultat-broj.ne{color:var(--crvena)}
.teme{list-style:none;padding:0;margin:16px 0 0;max-width:62ch}
.tema{display:flex;gap:12px;padding:13px 18px;margin-bottom:8px;
  border-radius:var(--r-mali);background:var(--puno);border:1px solid var(--rub)}
.tema::before{content:"\2192";color:var(--accent-light);font-family:var(--util);flex:none}

/* Brojke se razvlače preko širine sadržaja umjesto da se slažu ulijevo:
   inače na širokom zaslonu ostane pola ekrana prazno. Izvoz evidencije
   stoji na kraju istog retka — odnosi se na iste podatke. */
/* Osam kartica mora stati u jedan red na širini sadržaja: uz minmax(150px)
   osma se prelamala u vlastiti red i izvoz je visio sam. */
.podaci{display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));
  gap:12px;margin-top:28px;align-items:stretch}
.podatak-radnja{display:flex;align-items:center;justify-content:center;
  text-align:center}
.podatak{padding:14px 18px;border-radius:var(--r-srednji);border:1px solid var(--rub);
  background:var(--staklo);min-width:132px}
.podatak-ime{font-family:var(--util);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.podatak-vrijednost{font-size:24px;font-weight:800;letter-spacing:-.03em;
  color:var(--text);margin:0}

/* -------------------------------------------------------------- podnožje */
.podnozje{flex:none;z-index:20;background:var(--staklo-jako);
  border-top:1px solid var(--rub);backdrop-filter:blur(14px)}
.podnozje-unutra{max-width:var(--sirina);margin:0 auto;padding:12px 34px;
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.podnozje-status{font-family:var(--util);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tiho)}
.izradio{display:flex;align-items:center;gap:11px;font-family:var(--util);font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--tiho)}
/* Znak je jednobojan i crtan s currentColor. Kroz <img> to ne djeluje, pa se
   crta maskom — tako poprima boju teksta i vidljiv je u objema temama. */
.izradio .znak{width:21px;height:27px;flex:none;background-color:currentColor;
  -webkit-mask:url("/assets/ikone/czis-logo.svg") center/contain no-repeat;
  mask:url("/assets/ikone/czis-logo.svg") center/contain no-repeat}
.izradio span{opacity:.9}
.radnje{display:flex;gap:10px}

.gumb{font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:.005em;
  padding:12px 22px;border-radius:999px;border:1px solid var(--rub);
  background:var(--staklo-jako);color:var(--text);cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .15s,filter .15s}
.gumb:hover:not(:disabled){border-color:var(--rub-jak)}
.gumb:disabled{color:var(--tiho);cursor:default;opacity:.55}
.gumb.glavni{background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:var(--sjena-gumb)}
.gumb.glavni:hover:not(:disabled){filter:brightness(1.08)}
.gumb.glavni:disabled{background:var(--puno-2);border-color:var(--rub);
  color:var(--tiho);box-shadow:none}
.gumb.sitni{padding:9px 16px;font-size:12px}

/* ------------------------------------------------- kartice i obrasci */
.usko{position:relative;z-index:1;max-width:540px;margin:0 auto;padding:64px 22px}
.kartica{border:1px solid var(--rub);border-radius:var(--r-velik);padding:36px 34px;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.045));
  backdrop-filter:blur(18px);box-shadow:var(--sjena)}
[data-tema="svijetlo"] .kartica{background:var(--puno)}
.znak-marke{display:block;width:34px;height:44px;margin:0 0 18px;
  background-color:var(--accent-light);
  -webkit-mask:url("/assets/ikone/czis-logo.svg") center/contain no-repeat;
  mask:url("/assets/ikone/czis-logo.svg") center/contain no-repeat}
[data-tema="svijetlo"] .znak-marke{background-color:var(--accent)}
.kartica h1{font-size:34px;font-weight:800;letter-spacing:-.045em;color:var(--text);
  margin:0 0 6px}
.kartica p{margin:0 0 18px}
.podnaslov-org{font-family:var(--util);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin:0 0 26px}

.polje{margin-bottom:16px}
.polje label{display:block;font-family:var(--util);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.polje input{width:100%;padding:13px 15px;border-radius:var(--r-mali);
  background:var(--puno);color:var(--text);border:1px solid var(--rub);
  font:inherit;font-size:15px}
.polje input:focus{border-color:var(--accent);outline:none;
  box-shadow:0 0 0 4px rgba(47,109,255,.18)}
.polje input.mono,.mono{font-family:var(--util);letter-spacing:.12em}
.polje-greska{margin:7px 0 0;font-family:var(--util);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--crvena)}
.polje input.nedostaje{border-color:var(--crvena)}
.polje input.nedostaje:focus{box-shadow:0 0 0 4px rgba(255,107,87,.18)}
.polje-s-gumbom{position:relative;display:block}
.polje-s-gumbom input{padding-right:52px}
.prikazi-lozinku{position:absolute;right:7px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:50%;border:1px solid transparent;background:transparent;
  color:var(--muted);cursor:pointer;padding:0}
.prikazi-lozinku:hover{color:var(--text);background:var(--puno-2);border-color:var(--rub)}
/* Atribut hidden ne djeluje na elemente unutar SVG-a — oni nisu u HTML
   imenskom prostoru, pa ih zadani stil preglednika ne pokriva. Zato se
   prebacivanje radi razredom na gumbu. */
.prikazi-lozinku .oko-zatvoreno{display:none}
.prikazi-lozinku.vidljivo .oko-otvoreno{display:none}
.prikazi-lozinku.vidljivo .oko-zatvoreno{display:inline}

.poruka{padding:13px 17px;border-radius:var(--r-mali);border:1px solid var(--rub);
  border-left:3px solid var(--muted);background:var(--puno);
  font-size:14.5px;margin-bottom:18px}
.poruka.da{border-left-color:var(--zelena)}
.poruka.ne{border-left-color:var(--crvena)}
.uputa{font-size:14px;color:var(--muted)}
.razmak-dolje{margin-bottom:22px}
.izdavatelj-noga{text-align:center;margin-top:26px;font-family:var(--util);font-size:10px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--tiho)}

/* ------------------------------------------------------- administracija */
.admin{position:relative;z-index:1;max-width:1260px;margin:0 auto;padding:30px 26px 60px}
.naslov-s-znakom{display:flex;align-items:center;gap:16px}
.znak-marke.mali{width:26px;height:33px;margin:0;flex:none}
.admin-vrh{display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--rub);padding-bottom:18px;margin-bottom:26px;gap:16px}
.admin h1{font-size:30px;font-weight:800;letter-spacing:-.04em;color:var(--text);margin:0}
/* Alatna traka je podijeljena u skupine po namjeni: uvoz polaznika,
   poveznice i dodjela nisu ista radnja i ne smiju stajati u istom nizu. */
.alatna{display:flex;flex-wrap:wrap;gap:14px;align-items:stretch;margin-bottom:22px}
.skupina{flex:1 1 300px;padding:14px 16px;border-radius:var(--r-srednji);
  border:1px solid var(--rub);background:var(--staklo);display:flex;
  flex-direction:column;gap:10px}
.skupina-naslov{margin:0;font-family:var(--util);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);font-weight:400}
.skupina-napomena{margin:0;font-size:12.5px;color:var(--muted)}
.skupina-siroka{flex:1 1 100%}
.redak-polja{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.redak-polja > form{display:flex;flex-wrap:wrap;gap:9px;align-items:center}

/* Jedinstven izgled polja u svim trakama, uključujući repozitorij. */
.alatna select,.alatna input[type=number],.filtri select,.filtri input[type=search]{
  padding:10px 12px;border-radius:var(--r-mali);background:var(--puno);
  color:var(--text);border:1px solid var(--rub);font:inherit;font-size:13px}
.alatna select:focus,.alatna input:focus,
.filtri select:focus,.filtri input:focus{border-color:var(--accent);outline:none}
.alatna .skupina select{flex:1 1 200px;max-width:100%}
.alatna .redak-polja{width:100%}
.alatna input[type=number]{width:78px}
/* Ugrađeno polje za datoteku ima tekst koji se ne da skratiti ni prevesti,
   pa se skriva, a odabir ide preko oznake i vlastitog ispisa naziva. */
.alatna input[type=file]{position:absolute;width:1px;height:1px;opacity:0;
  overflow:hidden;clip:rect(0 0 0 0)}
.odabir-datoteke{cursor:pointer}
.alatna input[type=file]:focus + .naziv-datoteke,
.alatna input[type=file]:focus-visible ~ .odabir-datoteke{outline:2px solid var(--accent)}
.naziv-datoteke{font-family:var(--util);font-size:11px;color:var(--muted);
  max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uvoz-oznaka{font-family:var(--util);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted)}

table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;
  border:1px solid var(--rub);border-radius:var(--r-srednji);overflow:hidden;
  background:var(--staklo)}
th{font-family:var(--util);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  hyphens:none;
  color:var(--muted);text-align:left;padding:12px 14px;font-weight:400;
  border-bottom:1px solid var(--rub-jak)}
td{padding:13px 14px;border-bottom:1px solid var(--rub);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(255,255,255,.04)}
[data-tema="svijetlo"] tbody tr:hover{background:rgba(10,23,41,.03)}

.znacka{font-family:var(--util);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;border:1px solid var(--rub);color:var(--muted);
  white-space:nowrap;display:inline-block}
.znacka.zavrseno{border-color:rgba(63,191,143,.5);color:var(--zelena)}
.znacka.u_tijeku{border-color:rgba(47,109,255,.5);color:var(--accent-light)}
.znacka.neuspjelo{border-color:rgba(255,107,87,.5);color:var(--crvena)}
.znacka.poslano{border-color:var(--rub-jak)}
.znacka.ceka{border-color:rgba(125,177,255,.55);color:var(--accent-light)}
.znacka.zatvoren{border-color:rgba(255,107,87,.5);color:var(--crvena)}
/* Isporučena poveznica je uredno stanje, ne događaj — zato mirna boja, bez
   isticanja: u popisu se traže odstupanja („Nije poslano", „Bez pristupa"). */
.znacka.isporuceno{border-color:var(--rub-jak);color:var(--muted)}

/* Ispune za točno/netočno u svijetloj inačici: prozirnost izvedena iz tamnih
   tonova na bijeloj podlozi gotovo se ne vidi, pa se zadaju zasebno. */
[data-tema="svijetlo"] .opcija.tocna{background:#E4F5EE;border-color:#1F7A57}
[data-tema="svijetlo"] .opcija.netocna{background:#FBE7E3;border-color:#B03A28}
[data-tema="svijetlo"] .ishod.da{background:#EDF8F3;border-color:#9AD4BE}
[data-tema="svijetlo"] .ishod.ne{background:#FDF0ED;border-color:#E4B0A5}
[data-tema="svijetlo"] .situacija{background:#FFFFFF}

.prazno{padding:46px 0;text-align:center;color:var(--muted);font-size:15px}

/* ------------------------------------------------- okvir s poveznicom */
.okvir-sjena{position:fixed;inset:0;z-index:60;display:flex;align-items:center;
  justify-content:center;padding:24px;background:rgba(4,12,24,.72);
  backdrop-filter:blur(4px)}
.okvir-sjena[hidden]{display:none}
.okvir{width:min(100%,620px);border:1px solid var(--rub);border-radius:var(--r-velik);
  background:var(--carbon);padding:30px 32px;box-shadow:var(--sjena)}
.okvir-oznaka{font-family:var(--util);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.okvir-naslov{font-size:26px;font-weight:800;letter-spacing:-.04em;color:var(--text);
  margin:0 0 12px}
.okvir-tekst{margin:0 0 18px;font-size:14.5px;color:var(--tekst)}
.okvir-poveznica{padding:14px 16px;border-radius:var(--r-mali);background:var(--puno);
  border:1px solid var(--rub);margin-bottom:20px}
.okvir-poveznica code{font-family:var(--util);font-size:12.5px;color:var(--accent-light);
  word-break:break-all}
.okvir-radnje{display:flex;gap:10px;justify-content:flex-end}
.okvir-tekst p{margin:0 0 12px}
.okvir-tekst p:last-child{margin-bottom:0}
.gumb.opasno{background:var(--crvena);border-color:var(--crvena);color:#fff;
  box-shadow:0 10px 24px rgba(192,82,63,.30)}
body.bez-pomicanja{overflow:hidden}

/* ------------------------------------------------------------- uređivač */
.urednik-stranica{max-width:1600px}
.urednik{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;
  align-items:start}
.urednik-kod,.urednik-pregled{border:1px solid var(--rub);border-radius:var(--r-srednji);
  background:var(--staklo);overflow:hidden;display:flex;flex-direction:column;
  height:calc(100vh - 300px);min-height:460px}
.urednik-glava{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 14px;border-bottom:1px solid var(--rub);background:var(--puno-2)}
.urednik-nav{display:flex;align-items:center;gap:8px}
/* Isticanje trenutnog slajda mora preživjeti tipkanje, a obična selekcija
   nestaje čim se pritisne tipka. Zato ispod prozirne tekstualne plohe stoji
   sloj s istim tekstom u kojem je označen samo traženi dio. */
.kod-omot{position:relative;flex:1;min-height:0;background:var(--puno)}
/* Traka s brojevima redaka. Širina mora biti ista u sloju i u plohi za unos,
   inače se redci lome na različitim mjestima. */
.kod-omot::before{content:"";position:absolute;left:0;top:0;bottom:0;width:52px;
  background:var(--puno-2);border-right:1px solid var(--rub);pointer-events:none}
.kod-sjena,#kod{
  position:absolute;inset:0;margin:0;padding:14px 14px 14px 64px;border:0;
  font-family:var(--util);font-size:12.5px;line-height:1.65;tab-size:2;
  white-space:pre-wrap;overflow-wrap:break-word;word-break:normal;
  letter-spacing:normal}
.redak{position:relative}
.redak::before{content:attr(data-broj);position:absolute;left:-52px;width:38px;
  text-align:right;color:var(--tiho);opacity:.75;
  -webkit-user-select:none;user-select:none}
.redak.greska::before{color:var(--crvena);opacity:1;font-weight:600}
.redak.greska{background:rgba(255,107,87,.07);
  box-shadow:-52px 0 0 rgba(255,107,87,.07)}
.kod-sjena{overflow:hidden;pointer-events:none;color:transparent;z-index:0}
.kod-sjena mark{background:rgba(47,109,255,.28);color:transparent;
  border-radius:3px;box-shadow:0 0 0 1px rgba(125,177,255,.45)}
.kod-sjena mark.greska{background:rgba(255,107,87,.30);
  box-shadow:0 0 0 1px rgba(255,107,87,.6)}
[data-tema="svijetlo"] .kod-sjena mark.greska{background:rgba(176,58,40,.20)}
[data-tema="svijetlo"] .kod-sjena mark{background:rgba(27,79,216,.18)}
#kod{overflow-y:auto;resize:none;background:transparent;color:var(--text);z-index:1}
#kod:focus{outline:none}
.pregled-ploha{flex:1;overflow-y:auto;padding:26px 24px;background:var(--ink)}
.pregled-ploha .ploca{min-height:0}
.pregled-ploha h1{font-size:38px}
.pregled-ploha h2{font-size:26px}
.pregled-ploha .pitanje{margin-top:26px;padding-top:20px;border-top:1px solid var(--rub)}
#greske{white-space:normal}
#greske ul{margin:8px 0 0;padding-left:20px}
#greske li{margin-bottom:4px}
#stanje.da{color:var(--zelena)}
#stanje.ne{color:var(--crvena)}

@media (max-width:1100px){
  .urednik{grid-template-columns:1fr}
  .urednik-kod,.urednik-pregled{height:auto;min-height:380px}
  #kod{min-height:340px}
}

.stupac-odabir input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
/* Fiksne širine stupaca: bez njih se raspored mijenja pri svakom filtriranju.
   Uz fiksni raspored sadržaj se mora smjeti lomiti, inače prelije susjedni stupac. */
table{table-layout:fixed}
td,th{overflow-wrap:break-word}
.stupac-edukacija{white-space:normal}
/* Postoci, ne pikseli: uz fiksni raspored zbroj fiksnih širina zna pojesti
   stupac kojemu je ostavljeno 'auto'. */
.stupac-odabir{width:3%}
.s-ime{width:12%}
.s-mail{width:19%}
/* Adresa u mono slovima zauzima previše prostora i lomi se u više redaka;
   uobičajeni font je uži i stane u jedan. */
.stupac-mail{font-family:var(--body);font-size:12.5px;letter-spacing:0;
  color:var(--tekst);overflow-wrap:anywhere}
.s-jedinica{width:13%}
.s-edukacija{width:16%}
.s-status{width:11%}
.s-pokusaja{width:8%}
.s-rezultat{width:8%}
.s-potvrda{width:10%}
.s-radnja{width:12%}
/* Stupac radnji: sadržaj se slaže okomito i ne izlazi iz tablice.
   Uvjet :not(:only-child) je nužan — redak praznog popisa ima jednu ćeliju
   preko svih stupaca, pa bi je flex pretvorio iz tablične ćelije u okvir i
   time poništio colspan. */
tbody tr > td:last-child:not(:only-child){display:flex;flex-direction:column;
  align-items:flex-end;gap:6px;white-space:normal}
tbody tr > td:last-child:not(:only-child) .znacka,
tbody tr > td:last-child:not(:only-child) .gumb{max-width:100%}

.redanje{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.redanje:hover{color:var(--text)}
.redanje.aktivno{color:var(--accent-light)}
.strelica{font-size:9px;opacity:.7}
.upis-podatak{font-family:var(--util);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
/* Osoba se proteže preko svih svojih edukacija; crta se povlači samo ispod
   zadnje, da retci iste osobe vizualno drže zajedno. */
tr.red-nastavak > td{border-top:0}
tr.red-prvi > td{border-top:1px solid var(--rub-jak)}
tbody tr:hover{background:transparent}
tbody tr.red-prvi:hover td,
tbody tr.red-nastavak:hover td{background:rgba(255,255,255,.03)}
[data-tema="svijetlo"] tbody tr.red-prvi:hover td,
[data-tema="svijetlo"] tbody tr.red-nastavak:hover td{background:rgba(10,23,41,.03)}
.dodjela{display:inline-flex;align-items:center;gap:6px;margin:0 6px 5px 0;
  padding:4px 6px 4px 10px;border-radius:999px;border:1px solid var(--rub);
  background:var(--puno-2);font-size:12px;color:var(--tekst)}
.dodjela-ime{white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis}
.dodjela-x{border:0;background:none;color:var(--muted);cursor:pointer;
  font-size:15px;line-height:1;padding:0 3px}
.dodjela-x:hover{color:var(--crvena)}
.filtri{gap:10px;flex-wrap:wrap;align-items:center;padding:14px 16px;
  border-radius:var(--r-srednji);border:1px solid var(--rub);background:var(--staklo);
  margin-bottom:22px}
/* Polja u traci filtara imaju istu širinu da traka ne izgleda nasumično. */
.filtri input[type=search],.filtri select{width:280px;flex:none}

/* -------------------------------------------------------------- mobilno */
@media (max-width:760px){
  body{font-size:15.5px}
  .kadar{width:100%;height:auto;min-height:100vh;margin:0;border:0;border-radius:0;
    background:none;backdrop-filter:none;box-shadow:none}
  .ljuska{overflow:visible;padding:26px 16px 120px}
  .podnozje{position:fixed;left:0;right:0;bottom:0}
  .zaglavlje-unutra{padding:12px 16px;flex-wrap:wrap;gap:8px}
  .zaglavlje-org{width:100%;order:3}
  .traka-vodoravna{padding:9px 16px;gap:10px}
  .ljuska{padding:28px 16px 124px}
  .ploca h1{font-size:32px}
  .ploca h2{font-size:25px}
  .podnozje-unutra{padding:11px 16px}
  .podnozje-status,.izradio{display:none}
  .gumb{padding:12px 18px}
  .usko{padding:34px 16px}
  .kartica{padding:26px 20px;border-radius:var(--r-srednji)}
  .podaci{gap:10px}
  .alatna{padding:14px}
  table{font-size:13px}
}

/* ==================================================================
   Dodatne komponente sadržaja (uvedeno s tečajem `phishing`).
   Sve je isključivo CSS: tijelo slajda ulazi kroz innerHTML pa se
   <script> ne izvršava — interakcija ide kroz <details>/<summary>.
   ================================================================== */

:root{--zuta:#E8B44C}
[data-tema="svijetlo"]{--zuta:#8A6116}

/* Pločice: rešetka kartica s ikonom, naslovom i opisom. */
.plocice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
  list-style:none;padding:0;margin:16px 0 0}
.plocice.tri{grid-template-columns:repeat(3,minmax(0,1fr))}
.tijelo .plocice li{padding:16px 18px;margin:0;text-align:left;hyphens:manual}
.tijelo .plocice li::before{content:none}
.plocica-ikona{display:block;font-size:20px;line-height:1;margin-bottom:10px}
.plocica-naslov{display:block;font-weight:800;letter-spacing:-.02em;
  color:var(--text);margin-bottom:4px}
.plocice p{margin:0;font-size:14px;color:var(--muted);text-align:left;hyphens:manual}
.tijelo .plocice li.naglasak{border-color:var(--accent);
  background:linear-gradient(160deg,rgba(47,109,255,.16),var(--puno) 60%)}

/* Odjeljak s naslovom u boji: crvene zastavice i pomagala. */
.pod-naslov{font-family:var(--util);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;margin:22px 0 4px}
.pod-naslov.crveni{color:var(--crvena)}
.pod-naslov.zuti{color:var(--zuta)}
.tijelo .zastavice li::before{content:"⚑";font-family:var(--body);font-size:13px;
  color:var(--crvena);top:14px}
.tijelo .pomagala li{padding-left:44px}
.tijelo .pomagala li::before{content:"✦";font-family:var(--body);font-size:13px;
  color:var(--zuta);top:14px}

/* Istaknuta napomena. */
.isticaj{border-radius:var(--r-mali);border:1px solid var(--rub);
  background:var(--puno);padding:15px 19px;margin:18px 0 0;max-width:68ch}
.isticaj p{margin:0;text-align:left;hyphens:manual;font-size:14.5px}
.isticaj-naslov{font-family:var(--util);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;margin:0 0 6px}
.isticaj.info{border-color:rgba(125,177,255,.4);background:rgba(47,109,255,.08)}
.isticaj.info .isticaj-naslov{color:var(--accent-light)}
.isticaj.oprez{border-color:rgba(232,180,76,.45);background:rgba(232,180,76,.07)}
.isticaj.oprez .isticaj-naslov{color:var(--zuta)}
.isticaj.uspjeh{border-color:rgba(63,191,143,.4);background:rgba(63,191,143,.07)}
.isticaj.uspjeh .isticaj-naslov{color:var(--zelena)}
[data-tema="svijetlo"] .isticaj.info{background:rgba(27,79,216,.06)}
[data-tema="svijetlo"] .isticaj.oprez{background:rgba(138,97,22,.06)}
[data-tema="svijetlo"] .isticaj.uspjeh{background:rgba(31,122,87,.06)}

/* Koraci sa slovom ili brojem u znački (SLAM, postupci). */
.tijelo .koraci li{padding-left:66px}
.tijelo .koraci li::before{content:attr(data-slovo);width:34px;height:34px;
  left:15px;top:12px;display:flex;align-items:center;justify-content:center;
  border-radius:10px;background:linear-gradient(160deg,var(--accent),#1d47b8);
  color:#fff;font-family:var(--body);font-size:15px;font-weight:800;letter-spacing:0}
[data-tema="svijetlo"] .tijelo .koraci li::before{
  background:linear-gradient(160deg,var(--accent),#1638A0)}

/* Razlaganje adrese: obojeni dijelovi i legenda. */
.url-crta{font-family:var(--util);font-size:15px;line-height:2.1;
  border-radius:var(--r-mali);border:1px solid var(--rub);background:var(--puno);
  padding:14px 18px;margin:14px 0 0;overflow-wrap:anywhere;text-align:left;hyphens:manual}
.url-dio{padding:3px 2px;border-radius:5px}
.url-dio.tiho{color:var(--tiho)}
.url-dio.mamac{color:var(--crvena);background:rgba(255,107,87,.14);
  border-bottom:2px dashed var(--crvena)}
.url-dio.domena{color:#fff;background:var(--accent);font-weight:600;
  border-bottom:2px solid var(--accent-light)}
[data-tema="svijetlo"] .url-dio.domena{border-bottom-color:#1638A0}

/* Anatomija poruke: zone koje se otvaraju dodirom (details/summary). */
.anatomija{padding:0}
.anatomija .zona{border-top:1px solid var(--rub)}
.anatomija .zona:first-of-type{border-top:none}.anatomija summary{list-style:none;display:flex;gap:14px;align-items:flex-start;
  padding:13px 16px;cursor:pointer}
.anatomija summary::-webkit-details-marker{display:none}
.anatomija summary:hover{background:var(--puno-2)}
.anatomija summary:focus-visible{outline:2px solid var(--accent-light);
  outline-offset:-2px}
.anatomija .zona[open]{background:var(--puno-2);
  box-shadow:inset 3px 0 0 var(--accent)}
.anatomija .pin{flex:none;width:24px;height:24px;border-radius:50%;
  background:var(--crvena);color:#fff;font-family:var(--util);font-size:11px;
  font-weight:600;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 4px rgba(255,107,87,.22);margin-top:1px}
.anatomija .zona[open] .pin{background:var(--zelena);
  box-shadow:0 0 0 4px rgba(63,191,143,.22)}
.zona-sadrzaj{min-width:0;font-size:14.5px;line-height:1.6;text-align:left;
  hyphens:manual;overflow-wrap:anywhere}
.zona-sadrzaj .adresa{font-family:var(--util);font-size:12.5px;color:var(--muted)}
.tijelo .zona-objasnjenje{margin:0;padding:2px 16px 14px 54px;font-size:14px;
  line-height:1.6;color:var(--muted);text-align:left;hyphens:manual}
.zona-objasnjenje strong{color:var(--text)}

@media (max-width:760px){
  .plocice,.plocice.tri{grid-template-columns:1fr}
}

/* Slajd s vizualnim komponentama smije biti širi od proznog stupca;
   sam tekst unutar njega ostaje na čitljivoj mjeri. */
.tijelo:has(.plocice,.anatomija,.koraci){max-width:880px}
.tijelo:has(.plocice,.anatomija,.koraci) > p{max-width:62ch}
.tijelo:has(.plocice,.anatomija,.koraci) > ul.zastavice,
.tijelo:has(.plocice,.anatomija,.koraci) > ul.pomagala{max-width:70ch}

/* ==================================================================
   Sadržajne komponente koje oživljava sadrzaj.js (anatomija, url).
   Bez JavaScripta vrijedi osnovni oblik: details/summary u slijedu i
   statična legenda — ova pravila ništa od toga ne kvare.
   ================================================================== */

/* Traka prozora poruke (crta je sadrzaj.js, pa bez JS-a ni ne postoji). */
.an-traka{display:flex;align-items:center;gap:7px;padding:10px 14px;
  background:#E2E7F0;border-bottom:1px solid #D3DAE7}
.an-traka .an-tocka{width:10px;height:10px;border-radius:50%;background:#C3CBDA}
.an-traka b{margin-left:6px;font-family:var(--util);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;color:#5A657E;font-weight:600}

/* — inačica A: poruka lijevo, ljepljivi panel s objašnjenjem desno — */
.an-omot{margin:16px 0 0}
@media (min-width:920px){
  .an-omot{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);
    gap:16px;align-items:start}
  .an-omot > .anatomija{margin:0}
  .an-panel{position:sticky;top:16px}
}
.an-panel{border:1px solid var(--rub);border-radius:var(--r-srednji);
  background:var(--puno);padding:18px;min-height:170px;margin-top:14px}
@media (min-width:920px){.an-panel{margin-top:0}}
.an-prazno{display:flex;flex-direction:column;gap:8px;color:var(--muted);
  font-size:14.5px}
.an-prazno-ruka{font-size:26px;line-height:1}
.an-panel-oznaka{font-family:var(--util);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent-light);margin:0 0 8px}
.an-panel-tekst{font-size:14.5px;line-height:1.65;color:var(--muted);
  text-align:left;hyphens:manual}
.an-panel-tekst strong{color:var(--text)}
.an-panel-brojac{font-family:var(--util);font-size:10.5px;letter-spacing:.1em;
  color:var(--muted);margin:14px 0 0;padding-top:12px;
  border-top:1px dashed var(--rub)}
.anatomija .zona.videna .pin{background:var(--zelena);
  box-shadow:0 0 0 4px rgba(63,191,143,.22)}
.anatomija .zona.aktivna summary{background:#E3EBFF;
  box-shadow:inset 3px 0 0 var(--accent)}
/* Kad panel radi, ugrađeno objašnjenje unutar zone se ne prikazuje dvaput. */
.an-omot .zona .zona-objasnjenje{display:none}

/* — inačica B: objašnjenje ispod zone; brojač u podnožju — */
.an-noga{font-family:var(--util);font-size:10.5px;letter-spacing:.1em;
  color:var(--muted);margin:0;padding:11px 16px;border-top:1px solid var(--rub);
  background:var(--puno)}

/* — inačica C: vođeni pregled — */
.an-vodeno .zona.zatamnjena summary{opacity:.38;filter:saturate(.5)}
.an-vodeno .zona.aktivna summary{background:#E3EBFF;
  box-shadow:inset 3px 0 0 var(--accent)}
.an-vodic{display:flex;align-items:center;gap:14px;padding:11px 14px;
  border-top:1px solid var(--rub);background:var(--puno)}
.an-vodic-gumb{width:38px;height:34px;border-radius:9px;border:1px solid var(--rub);
  background:var(--staklo);color:var(--text);font-size:15px;cursor:pointer}
.an-vodic-gumb:hover:not(:disabled){border-color:var(--accent)}
.an-vodic-gumb:disabled{opacity:.35;cursor:default}
.an-vodic-polozaj{font-family:var(--util);font-size:10.5px;letter-spacing:.1em;
  color:var(--muted);flex:1;text-align:center;text-transform:uppercase}

/* — razlaganje adrese: panel s objašnjenjem odabranog dijela — */
.url-dio[role="button"]{cursor:pointer}
.url-dio[role="button"]:hover{outline:1px dashed var(--rub-jak)}
.url-dio.aktivan{outline:2px solid var(--accent-light)}
.url-panel{border:1px solid var(--rub);border-top:none;
  border-radius:0 0 var(--r-mali) var(--r-mali);background:var(--puno);
  padding:13px 16px;margin:0 0 4px}
.url-crta:has(+ .url-panel){border-radius:var(--r-mali) var(--r-mali) 0 0;
  margin-bottom:0}
.url-panel-uputa{font-family:var(--util);font-size:10px;letter-spacing:.12em;
  color:var(--muted);margin:0;text-transform:uppercase}
.url-panel-tekst{font-size:14px;line-height:1.6;color:var(--muted);margin:0;
  text-align:left;hyphens:manual}
.url-panel-tekst strong{color:var(--text)}

/* Traka napretka smije klizati vodoravno kad je uska, ali bez vidljivog
   klizača — on na Windowsima stoji stalno i para sučelje na pola. */
.traka-vodoravna{scrollbar-width:none}
.traka-vodoravna::-webkit-scrollbar{display:none}

/* Anatomija poruke je uvijek svijetla, kao stvarni klijent e-pošte — u obje
   teme. Poruka je "snimka tuđeg ekrana", ne dio našeg sučelja, i upravo taj
   kontrast (svijetla poruka u tamnom sučelju) nosi vjerodostojnost primjera. */
.poruka-primjer.anatomija{background:#F3F5F9;border-color:#D3DAE7}
.anatomija .zona{border-top-color:#DCE2ED}
.anatomija summary:hover{background:#E9EEF8}
.anatomija .zona[open]{background:transparent;box-shadow:none}
.anatomija .zona.aktivna summary,
.an-vodeno .zona.aktivna summary{background:#E3EBFF;
  box-shadow:inset 3px 0 0 var(--accent)}
.anatomija .zona-sadrzaj{color:#1B2233}
.anatomija .zona-sadrzaj strong{color:#0E1526}
.anatomija .zona-sadrzaj .adresa{color:#5A657E}
/* Objašnjenje unutar svijetle poruke (inačice B i C) — tamna slova. */
.anatomija .zona-objasnjenje{color:#333C52;
  box-shadow:inset 3px 0 0 var(--accent)}
.anatomija .zona-objasnjenje strong{color:#0E1526}
/* Podnožja komponente (brojač, vodič) ostaju dio našeg sučelja — uz rub
   svijetle poruke trebaju vlastitu pozadinu, ne prozirnu. */
.an-noga,.an-vodic{background:#E9EDF4;border-top:1px solid #D3DAE7;
  color:#5A657E}
.an-vodic-polozaj{color:#5A657E}
.an-vodic-gumb{background:#fff;border-color:#C9D2E3;color:#1B2233}
.an-vodeno .zona.zatamnjena summary{opacity:.45}

/* Otkriveni dio adrese: tiha potvrda, u paru sa zelenim pinom anatomije. */
.url-dio.viden{box-shadow:inset 0 -2px 0 var(--zelena)}

/* ==================================================================
   Dorade dogovorene nakon usporedbe s izvornom HTML edukacijom.
   ================================================================== */

/* --- Modul lista klizačem preglednika, ne unutarnjim okvirom. -------
   Vrijedi samo za stranicu modula (body[data-prag]); administracija
   zadržava unutarnje klizanje. Zaglavlje s trakom napretka lijepi se
   uz vrh, podnožje s gumbima uz dno — sadržaj teče između njih. */
body[data-prag] .kadar{height:auto;min-height:calc(100vh - 40px);
  overflow:visible}   /* overflow:hidden bi odsjekao sticky zaglavlje */
body[data-prag] .zaglavlje{border-radius:var(--r-velik) var(--r-velik) 0 0}
body[data-prag] .podnozje{border-radius:0 0 var(--r-velik) var(--r-velik)}
body[data-prag] .ljuska{overflow:visible;overscroll-behavior:auto}
body[data-prag] .vrh{position:sticky;top:0}
body[data-prag] .podnozje{position:sticky;bottom:0}
@media (min-width:920px){
  /* Ljepljivi panel anatomije mora stati ispod ljepljivog zaglavlja. */
  body[data-prag] .an-panel{top:132px}
}

/* --- Uvodna definicija: plava crta uz pojam, kao u izvorniku. ------- */
.tijelo .uvod{border-left:3px solid var(--accent);padding:6px 0 6px 18px;
  margin:6px 0 20px;font-size:17px;line-height:1.65;color:var(--tekst);
  font-weight:500;max-width:68ch}
.tijelo .uvod strong{color:var(--tekst)}

/* --- Pločice: obrub oživi na prelazak, naglasak ostaje stalan. ------ */
.tijelo .plocice li{transition:border-color .18s ease, transform .18s ease}
.tijelo .plocice li:hover{border-color:var(--accent);transform:translateY(-2px)}

/* --- Usporedba dva pristupa (masovni / ciljani). -------------------- */
.usporedba{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;margin:16px 0 0}
.usporedba-strana{border:1px solid var(--rub);border-radius:var(--r-srednji);
  background:var(--puno);padding:18px}
.usporedba-strana.opasna{border-color:rgba(255,107,87,.5)}
.usporedba-naslov{display:flex;gap:9px;align-items:center;font-weight:800;
  letter-spacing:-.02em;margin:0 0 12px;font-size:16.5px}
.usporedba-strana.opasna .usporedba-naslov{color:var(--crvena)}
.tijelo .usporedba ul{margin:0;padding:0}
.tijelo .usporedba li{padding:8px 0 8px 20px;margin:0;background:none;border:none;
  border-radius:0;box-shadow:none;border-top:1px dashed var(--rub);
  font-size:14.5px;color:var(--muted);text-align:left;hyphens:manual}
.tijelo .usporedba li:first-child{border-top:none}
.tijelo .usporedba li::before{content:"·";width:auto;height:auto;left:4px;top:8px;
  background:none;color:var(--accent-light);font-weight:800;font-size:16px}
.usporedba-strana.opasna li::before{color:var(--crvena)}
@media (max-width:760px){.usporedba{grid-template-columns:1fr}}

/* --- Anatomija: zaglavlje poruke po uzoru na Outlook. --------------- */
.an-oznaka{display:inline-block;min-width:64px;font-family:var(--util);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#5A657E}
.an-predmet{font-size:16.5px;font-weight:800;letter-spacing:-.01em;color:#0E1526}
.an-posiljatelj b{color:#0E1526}
.an-posiljatelj .adresa{font-family:var(--util);font-size:12.5px;color:#5A657E}
.an-prima{display:block;margin-top:3px;font-size:12.5px;color:#5A657E}
.an-privitak{display:inline-flex;align-items:center;gap:8px;background:#fff;
  border:1px solid #C9D2E3;border-radius:8px;padding:7px 12px;
  font-family:var(--util);font-size:12.5px;color:#1B2233}
.an-poveznica{color:#1B4FD8;text-decoration:underline;font-weight:600}


/* --- Zastavice i pomagala kao objedinjeni panel (kao u izvorniku). --- */
.odjeljak{border:1px solid var(--rub);border-radius:var(--r-srednji);
  background:var(--puno);margin:18px 0 0;overflow:hidden;max-width:72ch}
.odjeljak-naslov{margin:0;padding:12px 18px;font-family:var(--util);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  border-bottom:1px solid var(--rub)}
.odjeljak.crveni .odjeljak-naslov{color:var(--crvena);background:rgba(255,107,87,.07)}
.odjeljak.zuti .odjeljak-naslov{color:var(--zuta);background:rgba(232,180,76,.06)}
.tijelo .odjeljak ul{margin:6px 0;padding:0}
.tijelo .odjeljak li{background:none;border:none;border-radius:0;box-shadow:none;
  margin:0;padding:9px 18px 9px 46px;font-size:14.5px;color:var(--muted);
  text-align:left;hyphens:manual}
.tijelo .odjeljak li + li{border-top:1px dashed var(--rub)}
.tijelo .odjeljak.crveni li::before{content:"⚑";width:auto;height:auto;left:18px;
  top:9px;background:none;color:var(--crvena);font-size:13px;font-family:var(--body)}
.tijelo .odjeljak.zuti li::before{content:"✦";width:auto;height:auto;left:18px;
  top:9px;background:none;color:var(--zuta);font-size:13px;font-family:var(--body)}

/* --- Dijelovi adrese pozivaju na dodir dok nisu otkriveni. --------- */
.url-dio[data-obj]:not(.viden){outline:1px dashed var(--rub-jak);outline-offset:2px}
.url-dio[data-obj]:not(.viden):hover{outline-color:var(--accent-light)}
.url-panel-brojac{font-family:var(--util);font-size:10.5px;letter-spacing:.1em;
  color:var(--muted);margin:10px 0 0;padding-top:9px;border-top:1px dashed var(--rub)}

/* ==================================================================
   Administracija — plutajuća traka masovnih radnji (redizajn, faza 1b).
   Dodjela i isporuka sišle su s glavnog ekrana u traku koja se javlja
   tek kad nešto jest odabrano. Bez skripte traka stoji na kraju popisa
   i radi jednako.
   ================================================================== */
.traka-masovna{margin:18px 0 0;border-radius:var(--r-srednji);border:1px solid var(--rub);
  background:var(--staklo)}
/* Traka lebdi kao kartica u širini sadržaja, ne preko cijelog zaslona:
   pripada popisu nad kojim djeluje, pa se s njim i poravnava. */
.ima-skriptu .traka-masovna{position:fixed;bottom:18px;z-index:50;
  left:50%;transform:translate(-50%,140%);
  width:min(calc(100% - 40px),1260px);margin:0;
  border:1px solid var(--rub-jak);border-radius:var(--r-srednji);
  box-shadow:0 22px 50px rgba(0,0,0,.42);backdrop-filter:blur(14px);
  visibility:hidden;pointer-events:none;
  transition:transform .18s ease-out,visibility .18s}
.ima-skriptu .traka-masovna.vidljiva{transform:translate(-50%,0);
  visibility:visible;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.ima-skriptu .traka-masovna{transition:none}}
/* Traka je izvan toka stranice, pa bi inače legla preko zadnjih redaka — a to
   su često upravo oni koje je čovjek maloprije označio. */
body.ima-traku .admin{padding-bottom:170px}
.traka-masovna-unutra{padding:14px 22px;
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px}
.masovna-broj{font-size:13.5px;color:var(--tekst);align-self:center;
  padding-right:6px;border-right:1px solid var(--rub);min-width:190px}
.masovna-broj strong{font-size:16px;color:var(--text)}
.masovna-polje{display:flex;flex-direction:column;gap:6px}
.masovna-polje select,.masovna-polje input[type=number]{padding:10px 12px;
  border-radius:var(--r-mali);background:var(--puno);color:var(--text);
  border:1px solid var(--rub);font:inherit;font-size:13px}
.masovna-polje select{min-width:200px}
.masovna-polje input[type=number]{width:84px}
.masovna-polje select:focus,.masovna-polje input:focus{border-color:var(--accent);outline:none}
.masovna-nacin{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.masovna-nacin legend{padding:0;margin:0 0 2px}
.masovna-nacin .izbor{display:flex;align-items:center;gap:7px;font-size:13px;
  color:var(--tekst);cursor:pointer}
.masovna-nacin input[type=radio]{width:15px;height:15px;accent-color:var(--accent);
  cursor:pointer;margin:0}
.masovna-nacin .izbor.onemogucen{color:var(--tiho);cursor:not-allowed}
.masovna-nacin .izbor.onemogucen input{cursor:not-allowed}
#primijeni{margin-left:auto}

@media (max-width:900px){
  .traka-masovna-unutra{padding:12px 16px;gap:12px}
  .masovna-broj{min-width:0;border-right:0;width:100%}
  #primijeni{margin-left:0;width:100%}
  body.ima-traku .admin{padding-bottom:330px}
}

/* --------------------------- gornja traka: filtri i „Dodaj zaposlenika" */
.traka-vrh{display:flex;flex-wrap:nowrap;gap:12px;align-items:stretch;margin-bottom:10px}
/* Filtri se skupljaju koliko treba (`min-width:0`), pa gumb ostaje u istoj
   crti umjesto da ga široki obrazac istisne u novi red. */
.traka-vrh .alatna.filtri{flex:1 1 auto;min-width:0;margin:0}
.traka-vrh > .gumb{flex:0 0 auto;align-self:center;white-space:nowrap}
@media (max-width:900px){
  .traka-vrh{flex-wrap:wrap}
  .traka-vrh > .gumb{width:100%}
}
.ima-skriptu .bez-skripte{display:none}

/* ------------------------------------------------------- okvir za unos */
.okvir.sirok{width:min(100%,660px);padding:0;overflow:hidden}
.okvir-vrh{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 26px 0}
.okvir-vrh .okvir-naslov{margin:0}
.okvir-x{border:0;background:transparent;color:var(--muted);font-size:26px;line-height:1;
  padding:0 4px;cursor:pointer;border-radius:8px}
.okvir-x:hover{color:var(--text)}
.okvir-x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pretinci{display:flex;gap:4px;padding:16px 26px 0;border-bottom:1px solid var(--rub)}
.pretinac{border:0;background:transparent;color:var(--muted);cursor:pointer;
  font:inherit;font-size:14px;font-weight:600;padding:10px 14px;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.pretinac:hover{color:var(--text)}
.pretinac.odabran{color:var(--text);border-bottom-color:var(--accent)}
.pretinac:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ploha-pretinca{padding:22px 26px 26px}
.polja-u-dva{display:flex;gap:14px}
.polja-u-dva .polje-okvira{flex:1 1 0;min-width:0}
.polje-okvira{display:block;margin-bottom:14px}
.polje-okvira > span{display:block;font-family:var(--util);font-size:10px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.polje-okvira input,.polje-okvira select{width:100%;padding:12px 14px;
  border-radius:var(--r-mali);background:var(--puno);color:var(--text);
  border:1px solid var(--rub);font:inherit;font-size:14.5px}
.polje-okvira input:focus,.polje-okvira select:focus{border-color:var(--accent);outline:none}
.okvir-napomena{margin:0 0 14px;font-size:12.5px;color:var(--muted)}
.obrazac-poruka{margin:0 0 14px;padding:10px 14px;border-radius:var(--r-mali);
  border:1px solid var(--rub);border-left:3px solid var(--muted);
  background:var(--puno);font-size:13.5px;color:var(--tekst)}
.obrazac-poruka.da{border-left-color:var(--zelena)}
.obrazac-poruka.ne{border-left-color:var(--crvena)}

/* ------------------------------------------------------ zona za spuštanje */
.spusti{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:26px 20px;margin-bottom:14px;border-radius:var(--r-srednji);
  border:1px dashed var(--rub-jak);background:var(--puno);text-align:center;
  color:var(--muted)}
.spusti.nad{border-color:var(--accent)}
.spusti-tekst{margin:0;font-size:14px}
/* Ugrađeno polje za datoteku ima tekst koji se ne da skratiti ni prevesti, pa
   se skriva — ali ostaje dohvatljivo tipkovnicom, uz vidljiv obrub na oznaci. */
.spusti input[type=file]{position:absolute;width:1px;height:1px;opacity:0;
  overflow:hidden;clip:rect(0 0 0 0)}
.spusti input[type=file]:focus-visible ~ .odabir-datoteke{outline:2px solid var(--accent);
  outline-offset:2px}
.spusti .naziv-datoteke{margin:0;max-width:100%}

@media (max-width:900px){
  .polja-u-dva{flex-direction:column;gap:0}
}

/* Ishod kopiranja poveznice. Zaseban redak, jer natpis gumba nije mjesto za
   poruku: gumb koji se pretvori u rečenicu prestaje izgledati kao gumb. */
.okvir-status{margin:10px 0 0;font-size:13px;color:var(--zuta)}
.okvir-status.da{color:var(--zelena)}

/* --------------------------- ime, izvoz i lebdeći gumb nad popisom */
/* Prezime ostaje prvo jer se po njemu i redа, ali bez podebljanja: u popisu
   od stotinu redaka podebljano prezime u svakom retku ništa ne ističe. */
.celija-ime{white-space:nowrap}
/* Org. jedinica se lomila usred riječi („Računovo / dstvo"). Stupac dobiva
   dovoljno mjesta, a predugi naziv se lomi po riječima. */
/* Naziv jedinice lomi se samo na razmaku, nikad usred riječi („Računovo /
   dstvo"). Širina dolazi iz .s-jedinica jer tablica ima table-layout:fixed,
   pa min-width na ćeliji ne bi značio ništa. */
.tablica td.celija-jedinica{overflow-wrap:normal;word-break:keep-all;hyphens:none}
/* Izvoz evidencije nosi istu težinu kao dodavanje — obje su glavne radnje. */
.podatak-radnja{background:var(--accent);border-color:transparent;color:#fff}
.podatak-radnja:hover{background:var(--accent-light);color:#fff}
/* Izbornik prikaza i gumb dijele istu crtu iznad tablice. Gumb je i dalje
   uz desni rub popisa; prije je lebdio nad prazninom, a otkako u toj crti
   stoji i izbornik, praznine više nema pa se poravnavaju jedan uz drugoga. */
.popis-omot{position:relative}
/* Gumb sjedi na gornjem rubu tablice i napola ga preklapa — pripada popisu u
   koji dodaje retke. Crta s izbornikom prikaza ide sredinom, ispod njega. */
/* Sredina gumba pada otprilike na gornji rub tablice, pa ga pola prekriva —
   raspored kakav je bio prije nego je iznad tablice došao redak „Prikaži".
   Redak je visok 44 px + 14 px razmaka, pa tablica počinje na 58 px. */
.gumb-lebdeci{position:absolute;top:26px;right:26px;z-index:2;
  box-shadow:0 12px 28px rgba(0,0,0,.42)}
@media (max-width:900px){
  .gumb-lebdeci{position:static;display:block;width:100%;margin-bottom:12px}
  .celija-ime{white-space:normal}
}

.masovna-skriveni{display:block;margin-top:2px;font-size:12px;color:var(--zuta)}
.masovna-ponisti{display:block;margin-top:3px;padding:0;border:0;background:transparent;
  color:var(--muted);font:inherit;font-size:12px;text-decoration:underline;cursor:pointer}
.masovna-ponisti:hover{color:var(--text)}
.masovna-ponisti:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Polje u dijalogu (npr. rok poveznice). */
.dijalog-polje{display:block;margin-top:14px}
.dijalog-polje > span{display:block;font-family:var(--util);font-size:10px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.dijalog-polje input{width:110px;padding:10px 12px;border-radius:var(--r-mali);
  background:var(--puno);color:var(--text);border:1px solid var(--rub);font:inherit}
.dijalog-polje input:focus{border-color:var(--accent);outline:none}

/* Radnje stoje u ćeliji sklopljenoj preko svih redaka osobe, pa se poravnavaju
   uz nju, a ne uz prvi upis. */
.tablica td .celija-radnje{display:flex;flex-direction:column;gap:8px;
  align-items:flex-end}
.tablica td:has(.celija-radnje){vertical-align:middle}
.gumb-lebdeci{right:0}

/* Tri radnje s natpisima ne stanu u stupac od 12 %, pa se slažu jedna ispod
   druge i retke rastežu u visinu. Ikone stanu u jedan red. Natpis nosi
   `title` i `aria-label`, pa značenje ostaje dostupno i mišem i čitačem. */
.radnje-ikone{display:flex;gap:4px;justify-content:flex-end}
.ikona-gumb{display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;padding:0;border-radius:9px;cursor:pointer;
  border:1px solid var(--rub);background:var(--puno);color:var(--tekst);
  font-size:14px;line-height:1}
.ikona-gumb:hover{border-color:var(--rub-jak);color:var(--text);background:var(--staklo)}
.ikona-gumb:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ikona-gumb.opasna:hover{border-color:rgba(255,107,87,.55);color:var(--crvena)}

/* Stranice popisa. Kvačica „odaberi sve" bira samo prikazanu stranicu, a
   odabir preživljava prelazak — traka javlja koliko ih je izvan pogleda. */
.stranice{display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  padding:14px 18px;border-top:1px solid var(--rub)}
.stranice-broj{font-family:var(--util);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.stranice .gumb.sitni{margin-left:auto}
.stranice .gumb.sitni + .stranice-broj{margin-left:0}

/* Broj prikazanih stoji uz tablicu, nasuprot gumba za dodavanje. */
.popis-vrh{display:flex;align-items:center;justify-content:center;gap:8px;
  flex-wrap:wrap;min-height:44px;padding:0 0 14px}
.popis-vrh-tekst{font-family:var(--util);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.popis-vrh select{padding:7px 10px;border-radius:var(--r-mali);
  background:var(--puno);color:var(--text);border:1px solid var(--rub);
  font:inherit;font-size:13px}
.popis-vrh select:focus{border-color:var(--accent);outline:none}
@media (max-width:900px){.popis-vrh{padding-bottom:10px}}

/* Pitanje o zamjeni osobe pri izmjeni prezimena ili e-maila. */
.izbor-osobe{border:1px solid var(--rub);border-radius:var(--r-mali);
  padding:14px 16px;margin:0 0 14px}
.izbor-osobe legend{padding:0 6px}
.izbor-osobe .izbor{display:flex;gap:9px;align-items:flex-start;margin-top:9px;
  font-size:13.5px;color:var(--tekst);cursor:pointer;line-height:1.45}
.izbor-osobe .izbor:first-of-type{margin-top:4px}
.izbor-osobe input[type=radio]{width:15px;height:15px;margin:2px 0 0;
  accent-color:var(--accent);cursor:pointer;flex:0 0 auto}

/* Datum i razlog arhiviranja stoje u retku, ne u opisu na prelazak mišem. */
.arhiva-datum{display:block;font-family:var(--util);font-size:10px;
  letter-spacing:.12em;color:var(--muted);text-align:right;margin-top:4px}
.arhiva-razlog{display:block;font-family:var(--body);font-size:11.5px;
  letter-spacing:0;text-transform:none;color:var(--tiho);margin-top:2px}
/* Brojke su poveznice na svoj isječak popisa; izgled ostaje kartica. */
.podaci a.podatak{text-decoration:none;transition:border-color .15s,transform .15s}
.podaci a.podatak:hover{border-color:var(--rub-jak);transform:translateY(-1px)}
.podaci a.podatak:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Izvoz je radnja, ne brojka — zato plava, oblog ruba, ali ista visina kao
   kartice uz koje stoji. */
.podatak-izvoz{background:var(--accent);border-color:transparent;
  border-radius:999px;text-decoration:none;
  display:flex;justify-content:center;align-items:center;text-align:center;
  color:#fff;font-weight:600;font-size:14px;line-height:1.3}
.podaci a.podatak-izvoz:hover{background:var(--accent-light);
  border-color:transparent}
.dijalog-polje.siroko input{width:100%}

/* ------------------------------------------------ cPanel multi-tenant proširenja */
.czis-stranica{position:relative;z-index:1;width:min(100% - 32px,1180px);margin:24px auto 60px}
.czis-vrh{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px}
.czis-brand{display:flex;align-items:center;gap:14px}.czis-brand img{width:118px;max-height:42px}.czis-brand small{display:block;color:var(--muted)}
.czis-kartica{background:var(--puno);border:1px solid var(--rub);border-radius:var(--r-velik);padding:26px;box-shadow:var(--sjena)}
.czis-auth{width:min(100% - 32px,520px);margin:8vh auto;position:relative;z-index:1}.czis-auth .czis-brand{justify-content:center;margin-bottom:26px}.czis-auth h1{text-align:center;color:var(--text);line-height:1.1}.czis-auth .podnaslov{text-align:center;color:var(--muted);margin:-4px 0 22px}
.czis-polje{margin:0 0 16px}.czis-polje label{display:block;color:var(--text);font-weight:600;margin-bottom:6px}.czis-polje input,.czis-polje select,.czis-polje textarea{width:100%;border:1px solid var(--rub);background:var(--puno-2);color:var(--text);border-radius:12px;padding:12px 14px;font:inherit}.czis-polje textarea{min-height:110px;resize:vertical}.czis-polje .pomoc{font-size:13px;color:var(--muted);margin-top:6px}
.czis-akcije{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:20px}.czis-akcije .gumb{margin:0}.czis-akcije-desno{margin-left:auto}
.czis-alert{padding:12px 14px;border-radius:12px;margin:0 0 16px;border:1px solid var(--rub)}.czis-alert.greska{border-color:rgba(255,107,87,.45);background:rgba(255,107,87,.08)}.czis-alert.uspjeh{border-color:rgba(63,191,143,.45);background:rgba(63,191,143,.08)}
.czis-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.czis-metrika{padding:18px;border:1px solid var(--rub);border-radius:16px;background:var(--puno)}.czis-metrika b{display:block;color:var(--text);font-size:26px;line-height:1.1}.czis-metrika span{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.czis-sekcija{margin-top:24px}.czis-sekcija h2{color:var(--text);font-size:23px;letter-spacing:-.03em}.czis-tablica-wrap{overflow:auto;border:1px solid var(--rub);border-radius:16px}.czis-tablica{width:100%;border-collapse:collapse;background:var(--puno)}.czis-tablica th,.czis-tablica td{padding:13px 14px;border-bottom:1px solid var(--rub);text-align:left;vertical-align:top}.czis-tablica th{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);white-space:nowrap}.czis-tablica tr:last-child td{border-bottom:0}.czis-tablica a{color:var(--accent-light)}
.czis-status{display:inline-block;padding:4px 9px;border:1px solid var(--rub);border-radius:999px;font-size:12px;white-space:nowrap}.czis-status.completed,.czis-status.active,.czis-status.published{color:var(--zelena)}.czis-status.failed,.czis-status.suspended,.czis-status.expired{color:var(--crvena)}
.czis-nav{display:flex;gap:8px;flex-wrap:wrap}.czis-nav a{color:var(--tekst);text-decoration:none;padding:8px 11px;border:1px solid var(--rub);border-radius:10px;background:var(--puno)}.czis-nav a:hover{border-color:var(--rub-jak);color:var(--text)}
.czis-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.czis-form-grid .puno{grid-column:1/-1}.czis-kod{width:100%;min-height:58vh;background:#07101d;color:#e4edf9;border:1px solid var(--rub);border-radius:14px;padding:16px;font:13px/1.55 var(--util);tab-size:2;resize:vertical}
.czis-course-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.czis-course{border:1px solid var(--rub);background:var(--puno);border-radius:18px;padding:20px}.czis-course h2{font-size:20px;color:var(--text);margin:0 0 8px}.czis-course p{color:var(--muted)}
@media(max-width:850px){.czis-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.czis-form-grid,.czis-course-list{grid-template-columns:1fr}.czis-vrh{align-items:flex-start;flex-direction:column}.czis-akcije-desno{margin-left:0}}
@media(max-width:520px){.czis-grid{grid-template-columns:1fr}.czis-auth{margin:24px auto}.czis-kartica{padding:20px}.czis-stranica{width:min(100% - 20px,1180px)}}
.czis-grid-dva{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.editor-blok{margin:18px 0}.editor-slajd{background:var(--kartica);border:1px solid var(--rub);border-radius:16px;padding:18px;margin:14px 0}.editor-slajd[draggable=true]{cursor:grab}.editor-pitanje{border-left:3px solid var(--plava);padding:14px 16px;margin:12px 0;background:color-mix(in srgb,var(--kartica) 92%,var(--plava) 8%);border-radius:10px}.editor-red{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0}.editor-red h2,.editor-red h3,.editor-red h4{margin:0 auto 0 0}.editor-check{display:block;margin:12px 0}.editor-slajd textarea,.editor-pitanje textarea{width:100%;min-height:90px}.pregled-edukacije #preview-app{min-height:480px;margin-bottom:96px}.pregled-edukacije .donja-traka{position:fixed;bottom:0;left:0;right:0;background:var(--pozadina);border-top:1px solid var(--rub);padding:14px max(20px,calc((100vw - 1120px)/2));display:flex;justify-content:space-between;align-items:center;z-index:20}@media(max-width:850px){.czis-grid-dva{grid-template-columns:1fr}}


/* ---------------------------------------------------- početni tenant pristup */
.czis-auth-pocetna{width:min(100% - 32px,560px);margin:7vh auto}
.czis-auth-pocetna .czis-kartica{padding:34px 34px 32px}
.czis-auth-pocetna h1{font-size:clamp(30px,5vw,40px);letter-spacing:-.04em;margin:0 0 14px}
.czis-auth-pocetna .podnaslov{font-size:16px;line-height:1.6;margin:0 auto 26px;max-width:42ch}
.czis-brand-pocetna{margin-bottom:28px !important}
.czis-logo-pocetna{display:block;width:82px;height:106px;background:var(--accent-light);
  -webkit-mask:url('/assets/ikone/czis-logo.svg') center/contain no-repeat;
  mask:url('/assets/ikone/czis-logo.svg') center/contain no-repeat;
  filter:drop-shadow(0 8px 24px rgba(47,109,255,.18))}
.czis-akcije-pocetna .gumb{min-width:132px}
@media(max-width:520px){
  .czis-auth-pocetna{margin:28px auto}
  .czis-auth-pocetna .czis-kartica{padding:24px 20px}
  .czis-logo-pocetna{width:70px;height:91px}
}

/* CZIS trajno brisanje korisnika */
.gumb.trajno-brisi{background:#b42318;border-color:#b42318;color:#fff;font-weight:700}
.gumb.trajno-brisi:hover,.gumb.trajno-brisi:focus-visible{background:#8f1d14;border-color:#8f1d14;color:#fff}
.czis-opasna-zona{border:1px solid rgba(255,92,92,.5);background:rgba(180,35,24,.08)}
.czis-opasna-zona h1,.czis-opasna-zona h2{color:#ff8c82}

/* CZIS samostalna registracija - potvrda pristupa */
.czis-registration-success{width:min(100% - 32px,680px);margin:6vh auto}
.czis-registration-brand{justify-content:center;margin-bottom:24px!important}
.czis-registration-brand img{width:58px;height:auto}
.czis-registration-success .czis-kartica{padding:34px}
.czis-registration-success h1{text-align:center;margin-top:0}
.czis-registration-success .podnaslov{text-align:center;margin-bottom:26px}
.czis-credential-box{display:grid;gap:1px;border:1px solid var(--rub);border-radius:16px;overflow:hidden;margin:24px 0;background:var(--rub)}
.czis-credential-row{display:grid;grid-template-columns:1fr 1.4fr;gap:18px;align-items:center;padding:18px 20px;background:var(--kartica)}
.czis-credential-row span{color:var(--muted);font-size:14px}
.czis-credential-row strong{font-size:20px;letter-spacing:.01em;overflow-wrap:anywhere}
.czis-pin-display{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.18em!important}
.czis-credential-warning{border-color:rgba(240,180,41,.45);background:rgba(240,180,41,.08)}
.czis-confirmation-note{margin:20px 0;color:var(--muted);line-height:1.55}
.czis-understand-button{width:100%;justify-content:center;min-height:50px}
@media(max-width:560px){.czis-registration-success .czis-kartica{padding:24px 20px}.czis-credential-row{grid-template-columns:1fr;gap:6px}}
/* CZIS korisnik edukacije detalj */
.czis-user-detail-link{color:var(--text);font-weight:750;text-decoration:none;border-bottom:1px dashed rgba(125,177,255,.55);padding-bottom:2px}
.czis-user-detail-link:hover,.czis-user-detail-link:focus-visible{color:var(--accent-light);border-bottom-color:var(--accent-light)}
.czis-course-status{display:inline-flex;align-items:center;border:1px solid var(--rub);border-radius:999px;padding:5px 9px;font-size:12px;font-weight:750;white-space:nowrap}
.czis-course-status.completed{border-color:rgba(63,191,143,.45);color:#78dfb8;background:rgba(63,191,143,.09)}
.czis-course-status.in_progress{border-color:rgba(240,180,41,.45);color:#f7cd70;background:rgba(240,180,41,.08)}
.czis-course-status.failed{border-color:rgba(255,107,87,.45);color:#ff9b8e;background:rgba(255,107,87,.08)}
.czis-course-pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0 18px}
.czis-course-choice{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--rub);border-radius:12px;padding:12px;background:rgba(255,255,255,.015)}
.czis-course-choice input{margin-top:3px}.czis-course-choice small{display:block;color:var(--muted);margin-top:3px}
@media(max-width:760px){.czis-course-pick{grid-template-columns:1fr}}
/* CZIS-LICENCE-REGISTRATION-20260817 */
.czis-registration-submit-disabled,
.gumb.glavni.czis-registration-submit-disabled,
button.czis-registration-submit-disabled:disabled,
input.czis-registration-submit-disabled:disabled{
  opacity:.42!important;
  cursor:not-allowed!important;
  filter:grayscale(.55);
  box-shadow:none!important;
  transform:none!important;
}
.czis-registration-licence-message{
  width:100%;
  margin:0 0 12px;
  color:var(--muted,#aab6ca);
  font-size:13px;
  line-height:1.5;
}
.czis-registration-licence-message.nema-licenci{
  padding:12px 14px;
  border:1px solid rgba(240,180,41,.32);
  border-radius:10px;
  background:rgba(240,180,41,.08);
  color:#f3d47c;
}
/* CZIS supervisor tijek v2 */
.czis-supervisor-progress .czis-supervisor-metrics{grid-template-columns:repeat(4,minmax(0,1fr));margin:14px 0 20px}
.czis-supervisor-filter{display:grid;grid-template-columns:1.35fr 1fr 1.35fr;gap:12px;align-items:end;margin:18px 0 14px}
.czis-supervisor-filter-action{display:flex;gap:8px;align-items:center;grid-column:1/-1}
.czis-supervisor-self-row td{background:rgba(47,109,255,.055)}
.czis-supervisor-badge{display:inline-flex;margin-left:8px;padding:3px 7px;border-radius:999px;border:1px solid rgba(125,177,255,.5);color:#a9c9ff;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;vertical-align:middle}
.czis-supervisor-badge.secondary{opacity:.75}
.czis-supervisor-status{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;border:1px solid var(--rub);font-size:12px;font-weight:750;white-space:nowrap}
.czis-supervisor-status.nije-pristupio{color:#c8d3e6}.czis-supervisor-status.u-tijeku{color:#f4ce76;border-color:rgba(240,180,41,.4);background:rgba(240,180,41,.07)}.czis-supervisor-status.zavrsio{color:#78dfb8;border-color:rgba(63,191,143,.4);background:rgba(63,191,143,.07)}.czis-supervisor-status.nije-zavrsio{color:#ff9b8e;border-color:rgba(255,107,87,.4);background:rgba(255,107,87,.07)}.czis-supervisor-status.neutral{color:var(--muted)}
.czis-supervisor-privacy-note{margin:14px 0 0;font-size:12px}
@media(max-width:900px){.czis-supervisor-progress .czis-supervisor-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.czis-supervisor-filter{grid-template-columns:1fr}}
@media(max-width:560px){.czis-supervisor-progress .czis-supervisor-metrics{grid-template-columns:1fr 1fr}.czis-supervisor-filter-action{flex-direction:column;align-items:stretch}}

/* CZIS_UNIFIED_DESIGN_START */
:root{
  --czis-bg:#061527;
  --czis-bg-deep:#04111f;
  --czis-surface:#0a192b;
  --czis-surface-2:#10233d;
  --czis-surface-3:#132a49;
  --czis-border:#2a3f5c;
  --czis-border-soft:rgba(125,177,255,.18);
  --czis-text:#f3f7ff;
  --czis-muted:#b7c5d9;
  --czis-muted-2:#8192aa;
  --czis-accent:#2f6dff;
  --czis-accent-light:#7db1ff;
  --czis-danger:#ff6b57;
  --czis-success:#3fbf8f;
  --czis-warning:#f0b429;
  --pozadina:var(--czis-bg);
  --kartica:var(--czis-surface);
  --rub:var(--czis-border);
  --text:var(--czis-text);
  --muted:var(--czis-muted);
  --plava:var(--czis-accent);
  --accent:var(--czis-accent);
  --accent-light:var(--czis-accent-light);
  color-scheme:dark;
}
html{background:var(--czis-bg-deep)}
body{
  min-height:100vh;
  margin:0;
  color:var(--czis-text);
  background:
    radial-gradient(circle at 8% 12%,rgba(21,75,145,.42),transparent 37rem),
    linear-gradient(135deg,#0a2a51 0%,#071a30 43%,#04111f 100%);
  background-attachment:fixed;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--czis-accent-light)}
a:hover{color:#a8cbff}

/* Jedini dopušteni prikaz CZIS logotipa u web sučelju. */
.czis-logo-standard,
.czis-logo-pocetna,
.czis-brand .czis-logo-standard,
.znak{
  display:inline-block;
  flex:0 0 auto;
  width:42px;
  height:54px;
  background:var(--czis-accent-light)!important;
  -webkit-mask:url('/assets/ikone/czis-logo.svg') center/contain no-repeat;
  mask:url('/assets/ikone/czis-logo.svg') center/contain no-repeat;
  filter:drop-shadow(0 8px 22px rgba(47,109,255,.2));
}
.czis-auth .czis-logo-standard,
.czis-auth .czis-logo-pocetna{
  width:82px;
  height:106px;
}
.czis-brand-pocetna .czis-logo-standard,
.czis-brand-pocetna .czis-logo-pocetna{width:82px;height:106px}
.czis-brand img[src*="czis-logo.svg"]{width:42px;height:54px;object-fit:contain;filter:brightness(0) saturate(100%) invert(69%) sepia(72%) saturate(850%) hue-rotate(188deg) brightness(104%) contrast(104%)}
.czis-auth .czis-brand img[src*="czis-logo.svg"]{width:82px;height:106px}

.czis-stranica{width:min(100% - 40px,1180px);margin:0 auto;padding:26px 0 56px}
.czis-auth{width:min(100% - 32px,560px);margin:7vh auto 48px}
.czis-auth>.czis-brand{display:flex;justify-content:center;align-items:center;margin:0 0 26px}
.czis-vrh{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  margin-bottom:20px;
}
.czis-brand{display:flex;align-items:center;gap:14px;color:var(--czis-text)}
.czis-brand>div{display:flex;flex-direction:column;gap:3px}
.czis-brand strong{font-size:15px;color:var(--czis-text)}
.czis-brand small{color:var(--czis-muted);font-size:12px}
.czis-nav{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.czis-nav a,
.tema-gumb{
  color:var(--czis-text)!important;
  text-decoration:none;
  border:1px solid var(--czis-border);
  border-radius:10px;
  background:rgba(10,25,43,.72);
  padding:10px 13px;
  font-size:13px;
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
.czis-nav a:hover,.tema-gumb:hover{background:var(--czis-surface-2);border-color:rgba(125,177,255,.5);transform:translateY(-1px)}

.czis-kartica,.czis-sekcija,.czis-metrika,
.tecaj-red,.editor-slajd,.editor-pitanje,
.ploca{
  background:rgba(8,24,42,.93)!important;
  border:1px solid var(--czis-border)!important;
  border-radius:18px!important;
  box-shadow:0 18px 50px rgba(0,0,0,.12);
}
.czis-kartica{padding:28px}
.czis-sekcija{padding:24px}
.czis-auth .czis-kartica{padding:32px}
.czis-metrika{padding:17px 18px;min-height:72px}
.czis-metrika b{color:var(--czis-text);font-size:27px;letter-spacing:-.03em}
.czis-metrika span{color:var(--czis-muted);font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.czis-grid{gap:14px}

h1,h2,h3,h4,.slajd-naslov,.tecaj-naziv{color:var(--czis-text)!important;letter-spacing:-.025em}
p,.tijelo,li,label,.napomena,.podnaslov{color:var(--czis-muted)}
strong,b{color:var(--czis-text)}
code{color:#cfe1ff}

input,select,textarea{
  color:var(--czis-text)!important;
  background:#10233d!important;
  border:1px solid #314967!important;
  border-radius:11px!important;
  box-shadow:none!important;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--czis-accent-light)!important;
  outline:2px solid rgba(125,177,255,.24)!important;
  outline-offset:1px;
}
input::placeholder,textarea::placeholder{color:#788ba4!important}
input:disabled,select:disabled,textarea:disabled{opacity:.55;cursor:not-allowed}

.gumb,button.gumb,.czis-gumb{
  border-radius:999px!important;
  border:1px solid var(--czis-border)!important;
  color:var(--czis-text)!important;
  background:rgba(10,25,43,.88)!important;
  font-weight:700!important;
  transition:transform .16s ease,background .16s ease,border-color .16s ease,opacity .16s ease;
}
.gumb:hover:not(:disabled),button.gumb:hover:not(:disabled){transform:translateY(-1px);background:var(--czis-surface-2)!important;border-color:rgba(125,177,255,.52)!important}
.gumb.glavni,button.gumb.glavni{
  background:linear-gradient(135deg,#2f6dff,#3378ff)!important;
  border-color:#3c7bff!important;
  box-shadow:0 10px 24px rgba(47,109,255,.22);
}
.gumb:disabled,button:disabled{opacity:.42!important;cursor:not-allowed!important;transform:none!important;box-shadow:none!important}
.gumb.opasno,.gumb.danger,.czis-danger-button{background:rgba(255,107,87,.08)!important;border-color:rgba(255,107,87,.58)!important;color:#ff9a8c!important}

.czis-tablica{border-collapse:separate;border-spacing:0;width:100%;overflow:hidden;border:1px solid var(--czis-border);border-radius:16px}
.czis-tablica thead th{background:#0b1c31;color:#aebed3;border-bottom:1px solid var(--czis-border);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.czis-tablica tbody td{color:var(--czis-text);border-bottom:1px solid rgba(42,63,92,.68)}
.czis-tablica tbody tr:last-child td{border-bottom:0}
.czis-tablica tbody tr:hover td{background:rgba(125,177,255,.035)}
.czis-status{border-radius:999px;padding:5px 9px;border:1px solid var(--czis-border);background:rgba(255,255,255,.025)}
.czis-alert{border-radius:14px!important;border:1px solid var(--czis-border)!important;background:rgba(16,35,61,.82)!important;color:var(--czis-text)!important}
.czis-alert.greska{border-color:rgba(255,107,87,.62)!important;background:rgba(255,107,87,.07)!important}
.czis-alert.uspjeh{border-color:rgba(63,191,143,.55)!important;background:rgba(63,191,143,.07)!important}

/* LMS / edukacijski modul koristi isti sustav boja i isti logo. */
.kadar{background:rgba(5,17,31,.55)!important;border:1px solid rgba(42,63,92,.55)!important;border-radius:20px!important;box-shadow:0 24px 65px rgba(0,0,0,.18)}
.zaglavlje,.podnozje{background:rgba(6,21,39,.94)!important;border-color:var(--czis-border)!important}
.zaglavlje-unutra,.podnozje-unutra{color:var(--czis-text)}
.zaglavlje-naziv{display:flex!important;align-items:center!important;gap:10px!important;color:var(--czis-text)!important}
.zaglavlje-naziv::before{
  content:"";
  display:inline-block;
  width:29px;
  height:37px;
  background:var(--czis-accent-light);
  -webkit-mask:url('/assets/ikone/czis-logo.svg') center/contain no-repeat;
  mask:url('/assets/ikone/czis-logo.svg') center/contain no-repeat;
  flex:0 0 auto;
}
.zaglavlje-org,.zaglavlje-zapis,.podnozje,.podnozje-status{color:var(--czis-muted)!important}
.traka{background:#07172a!important;border-color:var(--czis-border)!important}
.blok-ime{color:var(--czis-muted)!important}
.segment{background:#223a59!important}.segment.tekuci,.segment.vidjen{background:var(--czis-accent)!important}
.ljuska{background:transparent!important}
.ploca{padding:clamp(24px,4vw,48px)!important}
.oznaka-bloka,.kviz-korak,.trag-opis{color:var(--czis-accent-light)!important}
.opcija{background:#10233d!important;border:1px solid #314967!important;color:var(--czis-text)!important;border-radius:13px!important}
.opcija:hover{border-color:var(--czis-accent-light)!important;background:#132a49!important}
.opcija-oznaka{background:rgba(125,177,255,.11)!important;border-color:rgba(125,177,255,.3)!important;color:var(--czis-accent-light)!important}
.plocice>li,.situacija,.poruka-primjer,.isticaj,.usporedba-strana,.odjeljak{background:#0d2038!important;border-color:var(--czis-border)!important;color:var(--czis-text)!important;border-radius:14px!important}

/* Dosljedan izgled početne i registracijskih ekrana. */
.czis-auth-pocetna,.czis-registration-success{width:min(100% - 32px,560px)!important}
.czis-auth-pocetna .czis-kartica,.czis-registration-success .czis-kartica{background:rgba(8,24,42,.95)!important}
.czis-auth-pocetna h1{font-size:clamp(30px,5vw,40px)!important}

@media(max-width:760px){
  .czis-stranica{width:min(100% - 24px,1180px);padding-top:18px}
  .czis-vrh{align-items:flex-start;flex-direction:column}
  .czis-nav{justify-content:flex-start}
  .czis-auth{margin:28px auto}
  .czis-auth .czis-kartica{padding:24px 20px}
  .czis-brand .czis-logo-standard{width:38px;height:49px}
  .czis-auth .czis-logo-standard,.czis-auth .czis-logo-pocetna{width:70px;height:91px}
}
/* CZIS_UNIFIED_DESIGN_END */

/* CZIS TENANT UX 2026-08-17 */
.czis-collapsible-section{border:1px solid var(--rub);border-radius:16px;background:var(--kartica);margin:18px 0;overflow:visible}
.czis-collapsible-section>summary{list-style:none;cursor:pointer;padding:18px 20px;display:flex;align-items:center;gap:12px;justify-content:space-between;font-weight:800;color:var(--text);user-select:none}
.czis-collapsible-section>summary::-webkit-details-marker{display:none}
.czis-collapsible-section>summary:before{content:'›';font-size:22px;line-height:1;transform:rotate(0deg);transition:transform .18s ease;color:var(--accent-light)}
.czis-collapsible-section[open]>summary:before{transform:rotate(90deg)}
.czis-collapsible-title{margin-right:auto;font-size:16px}
.czis-collapsible-meta{font-size:12px;font-weight:600;color:var(--muted);text-align:right}
.czis-collapsible-section[open]>summary{border-bottom:1px solid var(--rub)}
.czis-collapsible-content{padding:20px}
.czis-tenant-settings{margin-top:18px}

.czis-education-status-cell{min-width:250px;vertical-align:top}
.czis-edu-status-list{display:grid;gap:7px}
.czis-edu-status-item{display:grid;grid-template-columns:minmax(110px,1fr) auto;gap:8px;align-items:center}
.czis-edu-course-name{font-size:12px;line-height:1.3;color:var(--text);max-width:220px}
.czis-edu-empty{font-size:12px;color:var(--muted);font-style:italic}
.czis-course-status{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--rub);border-radius:999px;padding:4px 8px;font-size:10px;font-weight:800;white-space:nowrap}
.czis-course-status.completed{border-color:rgba(63,191,143,.45);color:#78dfb8;background:rgba(63,191,143,.08)}
.czis-course-status.in_progress{border-color:rgba(240,180,41,.45);color:#f7cd70;background:rgba(240,180,41,.08)}
.czis-course-status.failed{border-color:rgba(255,107,87,.45);color:#ff9b8e;background:rgba(255,107,87,.08)}
.czis-course-status.not_started{color:var(--muted);background:rgba(125,177,255,.04)}

.czis-action-menu{position:relative;display:inline-block;min-width:112px}
.czis-action-menu>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:7px 13px;border:1px solid var(--rub);border-radius:10px;background:rgba(255,255,255,.025);font-size:12px;font-weight:800;color:var(--text);white-space:nowrap}
.czis-action-menu>summary::-webkit-details-marker{display:none}
.czis-action-menu>summary:after{content:'⌄';font-size:12px;color:var(--muted)}
.czis-action-menu[open]>summary{border-color:rgba(125,177,255,.55);background:rgba(47,109,255,.08)}
.czis-action-menu-panel{position:absolute;right:0;top:calc(100% + 7px);z-index:60;min-width:210px;padding:8px;background:#0b1a2d;border:1px solid var(--rub);border-radius:12px;box-shadow:0 18px 48px rgba(0,0,0,.35);display:grid;gap:5px}
.czis-action-menu-panel form{display:block!important;margin:0!important;width:100%}
.czis-action-menu-panel .gumb,.czis-action-menu-panel button,.czis-action-menu-panel a{display:flex!important;width:100%!important;min-height:36px!important;align-items:center;justify-content:flex-start!important;text-align:left!important;border-radius:8px!important;padding:8px 10px!important;font-size:12px!important;box-shadow:none!important;text-decoration:none}
.czis-action-menu-panel .czis-action-danger{color:#ff9b8e!important;border-color:rgba(255,107,87,.32)!important;background:rgba(255,107,87,.06)!important;margin-top:3px}
.czis-action-menu-panel .czis-action-danger:hover{background:rgba(255,107,87,.13)!important}
.czis-tablica-wrap.czis-actions-ready{overflow:visible}

@media(max-width:900px){
 .czis-collapsible-meta{display:none}
 .czis-education-status-cell{min-width:210px}
 .czis-edu-status-item{grid-template-columns:1fr;gap:4px}
 .czis-action-menu-panel{right:auto;left:0}
 .czis-tablica-wrap.czis-actions-ready{overflow-x:auto;overflow-y:visible}
}
/* CZIS TENANT SETTINGS COLLAPSIBLE 2026-08-17 */
.czis-settings-details{border:1px solid var(--rub);border-radius:18px;background:var(--kartica);margin:18px 0;overflow:hidden}
.czis-settings-details>summary{list-style:none;cursor:pointer;padding:22px 26px;display:flex;align-items:center;gap:14px;color:var(--text);user-select:none}
.czis-settings-details>summary::-webkit-details-marker{display:none}
.czis-settings-details>summary:before{content:'▶';font-size:13px;color:var(--text);flex:0 0 auto;transition:transform .18s ease}
.czis-settings-details[open]>summary:before{transform:rotate(90deg)}
.czis-settings-details[open]>summary{border-bottom:1px solid var(--rub)}
.czis-settings-summary-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.czis-settings-summary-text strong{font-size:17px;line-height:1.25;color:var(--text);font-weight:800}
.czis-settings-summary-text small{font-size:12px;line-height:1.35;color:var(--muted);font-weight:600}
.czis-settings-content{padding:22px 26px 26px}
@media(max-width:700px){.czis-settings-details>summary{padding:18px 20px}.czis-settings-content{padding:18px 20px 22px}}
/* CZIS USER TABLE V2 2026-08-18 */
.czis-user-table-v2-wrap{overflow:visible!important}
.czis-user-table-v2{table-layout:fixed;width:100%}
.czis-user-table-v2 th:nth-child(1){width:22%}.czis-user-table-v2 th:nth-child(2){width:17%}.czis-user-table-v2 th:nth-child(3){width:14%}.czis-user-table-v2 th:nth-child(4){width:35%}.czis-user-table-v2 th:nth-child(5){width:12%}
.czis-user-table-v2 td{vertical-align:top;padding:18px 16px!important;overflow:visible}
.czis-user-name{display:inline-block;color:var(--accent-light)!important;font-size:15px;font-weight:800;text-decoration:none;border-bottom:1px dashed rgba(125,177,255,.5);line-height:1.25}.czis-user-name:hover{color:#b8d5ff!important}
.czis-user-meta{display:flex;flex-direction:column;gap:3px;margin-top:7px}.czis-user-username{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--text);font-size:12px}.czis-user-function{color:var(--muted);font-size:12px}
.czis-account-role{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.czis-account-badge,.czis-role-badge{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;font-size:10px;font-weight:800;border:1px solid var(--rub);white-space:nowrap}.czis-account-badge.active{color:#7be0b9;border-color:rgba(63,191,143,.5);background:rgba(63,191,143,.08)}.czis-account-badge.archived{color:#a9b6c8;background:rgba(169,182,200,.06)}.czis-account-badge.pending{color:#f7cd70;border-color:rgba(240,180,41,.48);background:rgba(240,180,41,.08)}.czis-account-badge.blocked{color:#ff9a8c;border-color:rgba(255,107,87,.52);background:rgba(255,107,87,.08)}.czis-role-badge.supervisor{color:#9bc4ff;border-color:rgba(125,177,255,.5);background:rgba(125,177,255,.08)}.czis-role-standard{font-size:11px;color:var(--muted)}
.czis-user-deadline{color:var(--text);font-size:12px;white-space:nowrap}
.czis-course-list{display:grid;gap:0}.czis-course-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;padding:0 0 10px;margin:0 0 10px;border-bottom:1px solid rgba(42,63,92,.58)}.czis-course-row:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}.czis-course-info{min-width:0;display:flex;align-items:baseline;gap:7px}.czis-course-name{font-size:12px;line-height:1.35;color:var(--text);font-weight:650;min-width:0}.czis-course-version{font-size:9px;color:var(--muted-2);white-space:nowrap}.czis-course-status{min-width:88px;text-align:center}.czis-course-empty{color:var(--muted);font-size:12px;font-style:italic}
.czis-user-actions{position:relative;overflow:visible!important}.czis-user-actions-menu{position:relative;display:inline-block}.czis-user-actions-menu>summary{list-style:none;display:flex;align-items:center;justify-content:center;gap:8px;min-width:104px;padding:9px 12px;border:1px solid var(--rub);border-radius:11px;background:rgba(10,25,43,.88);color:var(--text);font-size:12px;font-weight:800;cursor:pointer;user-select:none}.czis-user-actions-menu>summary::-webkit-details-marker{display:none}.czis-user-actions-menu[open]>summary{border-color:rgba(125,177,255,.55);background:var(--czis-surface-2)}.czis-action-chevron{font-size:11px;color:var(--muted);transition:transform .15s ease}.czis-user-actions-menu[open] .czis-action-chevron{transform:rotate(180deg)}
.czis-user-actions-panel{position:absolute;z-index:500;right:0;top:calc(100% + 7px);width:225px;padding:7px;border:1px solid var(--rub);border-radius:13px;background:#091a2e;box-shadow:0 20px 55px rgba(0,0,0,.45)}.czis-user-actions-panel form{display:block!important;margin:0!important;padding:0!important}.czis-user-actions-panel .czis-action-item,.czis-user-actions-panel button,.czis-user-actions-panel a{display:flex!important;width:100%!important;box-sizing:border-box!important;align-items:center!important;justify-content:flex-start!important;text-align:left!important;min-height:36px!important;padding:8px 10px!important;margin:0!important;border:0!important;border-radius:8px!important;background:transparent!important;color:var(--text)!important;font:inherit!important;font-size:12px!important;font-weight:650!important;text-decoration:none!important;box-shadow:none!important;cursor:pointer!important}.czis-user-actions-panel .czis-action-item:hover,.czis-user-actions-panel button:hover,.czis-user-actions-panel a:hover{background:rgba(125,177,255,.09)!important;transform:none!important}.czis-user-actions-panel .czis-action-primary{color:var(--accent-light)!important}.czis-action-separator{height:1px;background:var(--rub);margin:6px 5px}.czis-action-warning-wrap button,.czis-action-warning-wrap a{color:#f7cd70!important}.czis-action-danger-wrap button,.czis-action-danger-wrap a{color:#ff9a8c!important}.czis-action-danger-wrap{margin-top:5px!important;padding-top:5px!important;border-top:1px solid rgba(255,107,87,.18)!important}
@media(max-width:980px){.czis-user-table-v2-wrap{overflow-x:auto!important;padding-bottom:8px}.czis-user-table-v2{min-width:860px}.czis-user-actions-panel{right:auto;left:0}}
/* CZIS-COURSES-V2-20260818 */
.czis-course-page-head{align-items:flex-start;margin-bottom:18px}.czis-course-page-head h1{margin:0 0 6px}.czis-course-page-head p{margin:0;color:var(--muted)}
.czis-course-table-wrap{overflow:visible}.czis-course-table td{vertical-align:top}.czis-course-name{display:block;font-size:15px;margin-bottom:3px}.czis-course-code{display:block;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;margin-bottom:8px}.czis-course-description{display:block;max-width:42ch;color:var(--muted);font-size:12px;line-height:1.45}.czis-course-table td:nth-child(2) .czis-status{display:table;margin:0 0 6px}.czis-course-table td:nth-child(3)>span,.czis-course-table td:nth-child(3)>small{display:block}.czis-course-table td:nth-child(3)>small{margin-top:5px;color:var(--muted)}.czis-row-archived{opacity:.66}
.czis-switch{display:flex;align-items:center;gap:9px;cursor:pointer;font-weight:700}.czis-switch input{position:absolute;opacity:0;pointer-events:none}.czis-switch-ui{width:38px;height:22px;border:1px solid var(--rub);border-radius:999px;background:#0b1a2d;position:relative;transition:.18s}.czis-switch-ui:after{content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#8fa3c3;transition:.18s}.czis-switch input:checked+.czis-switch-ui{background:rgba(47,109,255,.35);border-color:#4e8aff}.czis-switch input:checked+.czis-switch-ui:after{left:19px;background:#8bc0ff}.czis-switch input:disabled+.czis-switch-ui{opacity:.4}.czis-mandatory-form small{display:block;max-width:26ch;margin-top:7px;color:var(--muted);font-weight:400;line-height:1.35}
.czis-action-menu{position:relative;display:inline-block}.czis-action-menu>summary{list-style:none;cursor:pointer;white-space:nowrap}.czis-action-menu>summary::-webkit-details-marker{display:none}.czis-action-menu-panel{position:absolute;z-index:80;right:0;top:calc(100% + 7px);min-width:220px;padding:7px;border:1px solid var(--rub);border-radius:12px;background:#0b1a2d;box-shadow:0 18px 50px rgba(0,0,0,.35)}.czis-action-menu-panel a,.czis-action-menu-panel button{display:block;width:100%;padding:10px 11px;border:0;background:transparent;color:var(--text);text-decoration:none;text-align:left;border-radius:8px;font:inherit;cursor:pointer}.czis-action-menu-panel a:hover,.czis-action-menu-panel button:hover{background:rgba(125,177,255,.09)}.czis-action-menu-panel .opasno{color:#ff8a7b}.czis-action-separator{display:block;height:1px;margin:6px;background:var(--rub)}
.czis-course-editor-v2{padding-bottom:86px}.czis-course-editor-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:22px}.czis-course-editor-head h1{margin:0 0 7px}.czis-editor-section{border:1px solid var(--rub);border-radius:14px;margin:12px 0;overflow:hidden;background:rgba(8,23,41,.35)}.czis-editor-section>summary{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:15px 17px;cursor:pointer}.czis-editor-section>summary span{color:var(--muted);font-size:12px}.czis-editor-section-body{border-top:1px solid var(--rub);padding:17px}.czis-editor-label{display:block;font-weight:700;margin:13px 0 7px}.czis-rich-toolbar{display:flex;gap:6px;flex-wrap:wrap;padding:8px;border:1px solid var(--rub);border-bottom:0;border-radius:11px 11px 0 0;background:#09172a}.czis-rich-toolbar button{border:1px solid var(--rub);border-radius:7px;background:#10233e;color:var(--text);padding:6px 9px;cursor:pointer}.czis-rich-editor{min-height:160px;padding:18px;border:1px solid var(--rub);border-radius:0 0 11px 11px;background:#0d2039;color:var(--text);line-height:1.65;outline:none}.czis-rich-editor:focus{border-color:#69a3ff;box-shadow:0 0 0 3px rgba(47,109,255,.12)}.czis-rich-editor figure,.czis-rich-editor svg{pointer-events:none}.czis-question-editor{margin-top:18px;padding:16px;border:1px solid rgba(125,177,255,.18);border-radius:12px;background:rgba(19,46,79,.4)}.czis-answer-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.czis-sticky-save{position:sticky;bottom:12px;z-index:30;display:flex;align-items:center;gap:14px;margin-top:24px;padding:12px 14px;border:1px solid var(--rub);border-radius:13px;background:rgba(7,21,38,.94);backdrop-filter:blur(12px);box-shadow:0 12px 35px rgba(0,0,0,.3)}.czis-sticky-save span{color:var(--muted);font-size:12px}.czis-confirm-card{max-width:720px;margin:40px auto}.gumb.opasno{background:#8d2929;border-color:#c14b4b;color:white}
@media(max-width:900px){.czis-course-table thead{display:none}.czis-course-table,.czis-course-table tbody,.czis-course-table tr,.czis-course-table td{display:block;width:100%}.czis-course-table tr{padding:14px;border-bottom:1px solid var(--rub)}.czis-course-table td{border:0;padding:8px 0}.czis-course-table td:before{content:attr(data-label);display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px}.czis-action-menu-panel{left:0;right:auto}.czis-course-editor-head{display:block}.czis-course-editor-head .czis-akcije{margin-top:12px}.czis-answer-grid{grid-template-columns:1fr}}
/* CZIS-COURSE-DRAFTS-V3-20260818 */
.czis-metrika-link{display:block;color:inherit;text-decoration:none;transition:border-color .18s,transform .18s}.czis-metrika-link:hover{border-color:#5b92e8;transform:translateY(-1px)}
.czis-draft-table td:nth-child(3)>span,.czis-draft-table td:nth-child(3)>small,.czis-draft-table td:nth-child(4)>span,.czis-draft-table td:nth-child(4)>small{display:block}.czis-draft-table td:nth-child(3)>small,.czis-draft-table td:nth-child(4)>small{margin-top:5px;color:var(--muted)}

/* CZIS-COURSES-V5-20260818 */
.czis-course-metrics .czis-metrika-link{cursor:pointer;text-decoration:none;color:inherit}
.czis-course-metrics .czis-metrika-link.aktivno{border-color:#5f9cff;box-shadow:0 0 0 1px rgba(95,156,255,.18) inset}
.czis-course-page-card,.czis-course-table-wrap,.czis-draft-table,.czis-draft-table tbody,.czis-draft-table tr,.czis-draft-table td{overflow:visible!important}
.czis-draft-table .czis-action-menu-panel{top:auto;bottom:calc(100% + 8px)}
.czis-delete-draft-link{color:#ff8a7b!important;border-top:1px solid var(--rub)!important;margin-top:5px;padding-top:11px!important}
.czis-mandatory-form{min-width:230px}
.czis-mandatory-form .czis-switch input:disabled+.czis-switch-ui{opacity:.55}
/* CZIS USER EDIT 20260818 */
.czis-user-edit-card{max-width:980px;margin-inline:auto}.czis-user-edit-card h1{margin-top:0}.czis-user-edit-card select{width:100%}

/* CZIS USERS V3 20260818 */
.czis-users-v3{margin-top:18px}.czis-users-toolbar{display:grid;gap:14px;margin-bottom:18px}.czis-users-search-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end}.czis-users-search,.czis-users-filter{display:grid;gap:7px}.czis-users-filter-label{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.czis-users-search input,.czis-users-filter select,.czis-users-page-nav select{width:100%;min-height:42px}.czis-users-clear{min-height:42px}.czis-users-filter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.czis-users-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.czis-users-chips[hidden]{display:none}.czis-users-chips-title{font-size:11px;color:var(--muted);font-weight:800}.czis-filter-chip{border:1px solid rgba(125,177,255,.34);background:rgba(125,177,255,.08);color:var(--accent-light);border-radius:999px;padding:6px 10px;font-size:11px;cursor:pointer}.czis-filter-chip:hover{background:rgba(125,177,255,.14)}
.czis-users-content{position:relative}.czis-users-content.is-loading{opacity:.58;pointer-events:none}.czis-users-results-meta{font-size:12px;color:var(--muted);margin:2px 0 10px}.czis-users-results-meta strong{color:var(--text)}.czis-users-list{display:grid;border:1px solid var(--rub);border-radius:16px;overflow:visible;background:rgba(5,20,36,.3)}.czis-users-list-head,.czis-users-row{display:grid;grid-template-columns:32px minmax(170px,1.4fr) minmax(140px,.9fr) minmax(210px,1.5fr) minmax(125px,.72fr) 120px;gap:14px;align-items:center}.czis-users-list-head{padding:12px 16px;border-bottom:1px solid var(--rub);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.czis-users-card{border-bottom:1px solid var(--rub)}.czis-users-card:last-child{border-bottom:0}.czis-users-row{padding:16px;transition:background .15s ease}.czis-users-row:hover{background:rgba(125,177,255,.035)}.czis-users-expand{width:28px;height:28px;border:1px solid var(--rub);border-radius:8px;background:transparent;color:var(--accent-light);font-size:20px;line-height:1;cursor:pointer}.czis-users-expand:hover{background:rgba(125,177,255,.08)}.czis-users-person{display:grid;gap:3px;min-width:0;cursor:pointer}.czis-users-name{color:var(--accent-light)!important;font-weight:850;text-decoration:none;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.czis-users-username{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;color:var(--text)}.czis-users-job{font-size:11px;color:var(--muted)}.czis-users-account{display:flex;align-items:flex-start;gap:7px;flex-wrap:wrap}.czis-users-education-summary{display:grid;gap:6px;min-width:0}.czis-users-education-summary>strong{font-size:12px;color:var(--text)}.czis-users-summary-badges{display:flex;gap:5px;flex-wrap:wrap}.czis-users-summary-badges .czis-course-status{min-width:0!important;padding:4px 7px;font-size:9px}.czis-users-deadline{font-size:11px;color:var(--text);white-space:nowrap}.czis-users-actions{position:relative;justify-self:end}.czis-users-action-menu{position:relative}.czis-users-action-menu>summary{list-style:none;border:1px solid var(--rub);border-radius:11px;padding:9px 13px;min-width:98px;text-align:center;color:var(--text);font-weight:800;font-size:11px;cursor:pointer;background:rgba(10,25,43,.9)}.czis-users-action-menu>summary::-webkit-details-marker{display:none}.czis-users-action-menu[open]>summary{border-color:rgba(125,177,255,.55)}.czis-users-action-panel{position:absolute;z-index:900;right:0;top:calc(100% + 7px);width:230px;padding:7px;border:1px solid var(--rub);border-radius:13px;background:#091a2e;box-shadow:0 22px 55px rgba(0,0,0,.48)}.czis-users-action-panel form{display:block!important;margin:0!important}.czis-users-action-panel button,.czis-users-action-panel a,.czis-users-action-panel .czis-action-item{display:flex!important;width:100%!important;box-sizing:border-box!important;min-height:36px!important;align-items:center!important;justify-content:flex-start!important;text-align:left!important;padding:8px 10px!important;margin:0!important;border:0!important;border-radius:8px!important;background:transparent!important;color:var(--text)!important;font-size:11px!important;font-weight:700!important;text-decoration:none!important;box-shadow:none!important}.czis-users-action-panel button:hover,.czis-users-action-panel a:hover{background:rgba(125,177,255,.09)!important}.czis-users-details{padding:0 16px 16px 62px}.czis-users-course-table{border:1px solid rgba(42,63,92,.72);border-radius:12px;overflow:hidden}.czis-users-course-head,.czis-users-course-detail{display:grid;grid-template-columns:minmax(220px,1fr) 90px 145px 160px;gap:12px;align-items:center;padding:10px 13px}.czis-users-course-head{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);background:rgba(125,177,255,.035)}.czis-users-course-detail{border-top:1px solid rgba(42,63,92,.58);font-size:11px}.czis-users-course-detail.is-match{background:rgba(125,177,255,.065);box-shadow:inset 3px 0 0 var(--accent-light)}.czis-users-course-title{font-weight:750;color:var(--text)}.czis-users-course-version,.czis-users-course-deadline{color:var(--muted)}.czis-users-no-courses,.czis-users-empty{padding:20px;color:var(--muted);font-size:12px;font-style:italic}.czis-users-pagination{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px}.czis-users-page-info{font-size:11px;color:var(--muted)}.czis-users-page-nav{display:flex;gap:6px;align-items:center}.czis-page-btn{min-width:34px;height:34px;border:1px solid var(--rub);border-radius:9px;background:transparent;color:var(--text);cursor:pointer}.czis-page-btn:hover:not(:disabled),.czis-page-btn.current{border-color:rgba(125,177,255,.6);background:rgba(125,177,255,.09);color:var(--accent-light)}.czis-page-btn:disabled{opacity:.35;cursor:not-allowed}.czis-users-page-nav select{width:auto;min-height:34px;height:34px;font-size:10px}.czis-account-badge{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;font-size:10px;font-weight:800;border:1px solid var(--rub);white-space:nowrap}.czis-account-badge.active{color:#7be0b9;border-color:rgba(63,191,143,.5);background:rgba(63,191,143,.08)}.czis-account-badge.archived{color:#a9b6c8;background:rgba(169,182,200,.06)}.czis-account-badge.pending{color:#f7cd70;border-color:rgba(240,180,41,.48);background:rgba(240,180,41,.08)}.czis-account-badge.blocked{color:#ff9a8c;border-color:rgba(255,107,87,.52);background:rgba(255,107,87,.08)}
@media(max-width:1100px){.czis-users-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.czis-users-list{overflow-x:auto}.czis-users-list-head,.czis-users-row{min-width:960px}.czis-users-details{min-width:898px}.czis-users-action-panel{right:auto;left:0}}
@media(max-width:680px){.czis-users-search-row{grid-template-columns:1fr}.czis-users-filter-grid{grid-template-columns:1fr}.czis-users-pagination{align-items:flex-start;flex-direction:column}.czis-users-page-nav{flex-wrap:wrap}.czis-users-chips{align-items:flex-start}}

/* CZIS PLACEHOLDERS STANDARD 2026-08-18 */
.czis-placeholder-page{padding-bottom:80px}.czis-placeholder-intro{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}.czis-placeholder-intro h1{margin:0 0 8px}.czis-placeholder-intro p{margin:0;color:var(--muted);max-width:75ch;line-height:1.6}.czis-placeholder-stats{display:flex;gap:10px;flex-wrap:wrap}.czis-placeholder-stats span{border:1px solid var(--rub);border-radius:12px;padding:10px 13px;color:var(--muted);white-space:nowrap}.czis-placeholder-stats b{color:var(--text);font-size:18px;margin-right:4px}.czis-placeholder-filters{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}.czis-placeholder-group{border:1px solid var(--rub);border-radius:16px;background:var(--kartica);margin:14px 0;overflow:hidden}.czis-placeholder-group>summary{list-style:none;cursor:pointer;padding:18px 20px;display:flex;justify-content:space-between;align-items:center}.czis-placeholder-group>summary::-webkit-details-marker{display:none}.czis-placeholder-group>summary:before{content:'▶';font-size:11px;margin-right:10px}.czis-placeholder-group[open]>summary:before{transform:rotate(90deg)}.czis-placeholder-group>summary strong{margin-right:auto}.czis-placeholder-group>summary span{color:var(--muted);font-size:12px}.czis-placeholder-group-body{border-top:1px solid var(--rub)}.czis-placeholder-item{padding:18px 20px;border-bottom:1px solid var(--rub)}.czis-placeholder-item:last-child{border-bottom:0}.czis-placeholder-meta{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}.czis-placeholder-meta h3{margin:0 0 5px;font-size:16px}.czis-placeholder-meta code{color:#9fc4ff;font-size:12px}.czis-placeholder-source{border:1px solid var(--rub);border-radius:999px;padding:5px 9px;font-size:11px;white-space:nowrap}.czis-placeholder-source.custom{color:#6ee7b7;border-color:rgba(52,211,153,.45);background:rgba(16,185,129,.08)}.czis-placeholder-source.default{color:var(--muted)}.czis-placeholder-description{margin:10px 0 14px;color:var(--muted);font-size:13px}.czis-placeholder-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:14px}.czis-placeholder-grid label>span,.czis-placeholder-default>span,.czis-placeholder-preview>span{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}.czis-placeholder-grid input{width:100%}.czis-placeholder-default{border:1px solid var(--rub);border-radius:11px;padding:11px 13px}.czis-placeholder-default p{margin:0;line-height:1.45}.czis-placeholder-preview{margin-top:12px;padding:10px 13px;border-left:3px solid #4e8aff;background:rgba(78,138,255,.06);border-radius:0 10px 10px 0}.czis-placeholder-preview strong{font-size:13px;line-height:1.5}.czis-placeholder-entry-link{margin-top:12px}.czis-placeholder-form .czis-sticky-save{position:sticky;bottom:12px;z-index:30;display:flex;gap:14px;align-items:center;margin-top:18px;padding:12px 14px;border:1px solid var(--rub);border-radius:13px;background:rgba(7,21,38,.95);backdrop-filter:blur(12px)}.czis-placeholder-form .czis-sticky-save span{color:var(--muted);font-size:12px}@media(max-width:800px){.czis-placeholder-intro{display:block}.czis-placeholder-stats{margin-top:16px}.czis-placeholder-grid{grid-template-columns:1fr}.czis-placeholder-meta{display:block}.czis-placeholder-source{display:inline-block;margin-top:8px}}

/* CZIS_USER_EDU_MANAGEMENT_V2 */
.czis-user-edu-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:18px}.czis-user-edu-heading h1{margin:0 0 8px}.czis-user-edu-heading p{margin:0}.czis-user-edu-note{display:block;color:var(--muted);font-size:12px;margin-top:5px}.czis-user-edu-muted{color:var(--muted);font-size:13px}.czis-inline-form{display:inline}.czis-danger-outline{border-color:rgba(255,107,87,.45)!important;color:#ff9b8e!important;background:rgba(255,107,87,.04)!important}.czis-danger-outline:hover,.czis-danger-outline:focus-visible{background:rgba(255,107,87,.1)!important;border-color:#ff9b8e!important}.czis-user-cert-box{display:flex;align-items:center;justify-content:space-between;gap:24px}.czis-user-cert-box h2{margin-top:0}.czis-user-cert-box p:last-child{margin-bottom:0}@media(max-width:760px){.czis-user-edu-heading,.czis-user-cert-box{flex-direction:column}.czis-user-edu-heading .gumb,.czis-user-cert-box .gumb{width:100%;text-align:center}}

/* CZIS_USER_EDU_MANAGEMENT_V21 */
.czis-user-edu-table{width:100%;table-layout:fixed;border-collapse:collapse}
.czis-user-edu-table .czis-user-edu-col-course{width:32%}
.czis-user-edu-table .czis-user-edu-col-version{width:9%}
.czis-user-edu-table .czis-user-edu-col-status{width:16%}
.czis-user-edu-table .czis-user-edu-col-result{width:12%}
.czis-user-edu-table .czis-user-edu-col-deadline{width:15%}
.czis-user-edu-table .czis-user-edu-col-actions{width:16%}
.czis-user-edu-table th,.czis-user-edu-table td{vertical-align:middle!important;box-sizing:border-box}
.czis-user-edu-table tbody td{padding-top:18px!important;padding-bottom:18px!important;border-bottom:1px solid rgba(133,169,211,.18)!important}
.czis-user-edu-table tbody tr:last-child td{border-bottom:0!important}
.czis-user-edu-table tbody tr{min-height:88px}
.czis-user-edu-table td:last-child,.czis-user-edu-table th:last-child{text-align:right}
.czis-user-edu-table td:last-child .czis-inline-form{display:flex;justify-content:flex-end;align-items:center;width:100%}
.czis-user-edu-table td:last-child .gumb{min-width:104px;justify-content:center}
.czis-user-edu-course{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;min-width:0}
.czis-user-edu-course>strong{display:block;line-height:1.42;overflow-wrap:break-word;word-break:normal}
.czis-user-edu-mandatory-badge{display:inline-flex;align-items:center;min-height:25px;padding:3px 9px;border:1px solid rgba(115,168,255,.35);border-radius:999px;background:rgba(71,126,214,.10);color:#a9c9ff;font-size:12px;font-weight:700;line-height:1.2;white-space:nowrap}
@media(max-width:900px){.czis-user-edu-table{min-width:900px}.czis-user-edu-table .czis-user-edu-col-course{width:30%}}

/* CZIS CREATE USER COURSES V1 20260818 */
.czis-create-user-courses-field{grid-column:1/-1;display:grid;gap:9px;margin-top:2px}.czis-create-user-courses-field>label{font-weight:750}.czis-create-user-courses-field>label small{font-size:.8em;color:var(--muted);font-weight:650}.czis-create-user-courses-help,.czis-create-user-courses-count{font-size:12px;color:var(--muted)}.czis-create-user-courses-box{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.czis-create-user-course-choice{display:flex;align-items:flex-start;gap:11px;min-width:0;padding:13px 14px;border:1px solid var(--rub);border-radius:12px;background:rgba(125,177,255,.025);cursor:pointer}.czis-create-user-course-choice:hover{border-color:rgba(125,177,255,.46);background:rgba(125,177,255,.055)}.czis-create-user-course-choice input{width:17px;height:17px;min-width:17px;margin:2px 0 0;accent-color:#397cff}.czis-create-user-course-copy{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}.czis-create-user-course-copy strong{width:100%;color:var(--text);font-size:13px;line-height:1.35}.czis-create-user-course-copy small{color:var(--muted);font-size:11px}.czis-create-user-course-badge{display:inline-flex;align-items:center;border:1px solid rgba(63,191,143,.45);border-radius:999px;padding:3px 7px;color:#7be0b9;background:rgba(63,191,143,.07);font-size:9px;font-weight:800}.czis-create-user-courses-loading,.czis-create-user-courses-empty,.czis-create-user-courses-error{grid-column:1/-1;padding:13px 14px;border:1px solid var(--rub);border-radius:12px;color:var(--muted);font-size:12px}.czis-create-user-courses-error{border-color:rgba(255,107,87,.35);color:#ffb0a5}.czis-create-user-courses-count{font-weight:700}@media(max-width:760px){.czis-create-user-courses-box{grid-template-columns:1fr}}

/* CZIS CREATE USER COURSES DROPDOWN V1.1 20260818 */
.czis-create-user-courses-field{grid-column:1/-1;display:grid;gap:9px;margin-top:2px;position:relative;overflow:visible}.czis-create-user-courses-label{font-weight:750}.czis-create-user-courses-label small{font-size:.8em;color:var(--muted);font-weight:650}.czis-create-user-courses-help,.czis-create-user-courses-count{font-size:12px;color:var(--muted)}.czis-create-user-courses-dropdown{position:relative;width:100%;z-index:20}.czis-create-user-courses-toggle{width:100%;min-height:54px;border:1px solid var(--rub);border-radius:12px;background:rgba(125,177,255,.045);color:var(--text);padding:0 16px;display:flex;align-items:center;justify-content:space-between;gap:14px;text-align:left;font:inherit;font-weight:700;cursor:pointer}.czis-create-user-courses-toggle:hover,.czis-create-user-courses-toggle:focus-visible,.czis-create-user-courses-dropdown.is-open .czis-create-user-courses-toggle{border-color:rgba(125,177,255,.62);outline:none;box-shadow:0 0 0 2px rgba(75,136,255,.16)}.czis-create-user-courses-toggle:disabled{cursor:not-allowed;opacity:.65}.czis-create-user-courses-chevron{font-size:18px;line-height:1;transition:transform .16s ease}.czis-create-user-courses-dropdown.is-open .czis-create-user-courses-chevron{transform:rotate(180deg)}.czis-create-user-courses-menu{position:absolute;left:0;right:0;top:calc(100% + 7px);max-height:330px;overflow:auto;padding:7px;background:#0a1c30;border:1px solid var(--rub);border-radius:12px;box-shadow:0 18px 42px rgba(0,0,0,.28);z-index:100}.czis-create-user-courses-menu[hidden]{display:none!important}.czis-create-user-course-option{display:flex;align-items:flex-start;gap:11px;padding:11px 10px;border-radius:9px;cursor:pointer}.czis-create-user-course-option:hover{background:rgba(125,177,255,.075)}.czis-create-user-course-option+ .czis-create-user-course-option{border-top:1px solid rgba(125,177,255,.09)}.czis-create-user-course-option input{width:17px;height:17px;min-width:17px;margin:2px 0 0;accent-color:#397cff}.czis-create-user-course-copy{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:9px;row-gap:3px;min-width:0;flex:1}.czis-create-user-course-copy strong{grid-column:1/-1;color:var(--text);font-size:13px;line-height:1.35;overflow-wrap:anywhere}.czis-create-user-course-meta{color:var(--muted);font-size:11px}.czis-create-user-course-badge{justify-self:end;display:inline-flex;align-items:center;border:1px solid rgba(63,191,143,.45);border-radius:999px;padding:3px 7px;color:#7be0b9;background:rgba(63,191,143,.07);font-size:9px;font-weight:800}.czis-create-user-courses-loading,.czis-create-user-courses-empty,.czis-create-user-courses-error{padding:12px;color:var(--muted);font-size:12px}.czis-create-user-courses-error{color:#ffb0a5}.czis-create-user-courses-count{font-weight:700}

/* CZIS CREATE USER COURSES DROPDOWN V1.2 20260819 */
.czis-create-user-courses-field{grid-column:auto!important;display:grid!important;gap:10px!important;margin:0!important;position:relative!important;overflow:visible!important;min-width:0!important;align-self:start!important}.czis-create-user-courses-label{font-weight:750!important;margin:0!important}.czis-create-user-courses-label small{font-size:.8em!important;color:var(--muted)!important;font-weight:650!important}.czis-create-user-courses-dropdown{position:relative!important;width:100%!important;min-width:0!important;z-index:40!important}.czis-create-user-courses-toggle{box-sizing:border-box!important;width:100%!important;min-width:0!important;min-height:70px!important;border:1px solid var(--rub)!important;border-radius:12px!important;background:rgba(125,177,255,.045)!important;color:var(--text)!important;padding:0 18px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;text-align:left!important;font:inherit!important;font-weight:600!important;cursor:pointer!important}.czis-create-user-courses-toggle:hover,.czis-create-user-courses-toggle:focus-visible,.czis-create-user-courses-dropdown.is-open .czis-create-user-courses-toggle{border-color:rgba(125,177,255,.72)!important;outline:none!important;box-shadow:0 0 0 2px rgba(75,136,255,.16)!important}.czis-create-user-courses-toggle:disabled{cursor:not-allowed!important;opacity:.65!important}.czis-create-user-courses-toggle-text{display:block!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}.czis-create-user-courses-chevron{flex:0 0 auto!important;width:24px!important;height:24px!important;display:grid!important;place-items:center!important;color:#a8c9f7!important;font-size:22px!important;line-height:1!important;transition:transform .16s ease!important}.czis-create-user-courses-dropdown.is-open .czis-create-user-courses-chevron{transform:rotate(180deg)!important}.czis-create-user-courses-menu{position:absolute!important;left:0!important;right:0!important;top:calc(100% + 7px)!important;max-height:340px!important;overflow:auto!important;padding:7px!important;background:#0b1d31!important;border:1px solid var(--rub)!important;border-radius:12px!important;box-shadow:0 18px 42px rgba(0,0,0,.34)!important;z-index:1000!important}.czis-create-user-courses-menu[hidden]{display:none!important}.czis-create-user-course-option{display:flex!important;align-items:flex-start!important;gap:12px!important;padding:12px 11px!important;border-radius:9px!important;cursor:pointer!important}.czis-create-user-course-option:hover{background:rgba(125,177,255,.08)!important}.czis-create-user-course-option+.czis-create-user-course-option{border-top:1px solid rgba(125,177,255,.09)!important}.czis-create-user-course-option input{width:18px!important;height:18px!important;min-width:18px!important;margin:2px 0 0!important;accent-color:#397cff!important}.czis-create-user-course-copy{display:grid!important;grid-template-columns:1fr auto!important;align-items:center!important;column-gap:9px!important;row-gap:4px!important;min-width:0!important;flex:1!important}.czis-create-user-course-copy strong{grid-column:1/-1!important;color:var(--text)!important;font-size:13px!important;line-height:1.35!important;overflow-wrap:anywhere!important}.czis-create-user-course-meta{color:var(--muted)!important;font-size:11px!important}.czis-create-user-course-badge{justify-self:end!important;display:inline-flex!important;align-items:center!important;border:1px solid rgba(63,191,143,.45)!important;border-radius:999px!important;padding:3px 7px!important;color:#7be0b9!important;background:rgba(63,191,143,.07)!important;font-size:9px!important;font-weight:800!important}.czis-create-user-courses-loading,.czis-create-user-courses-empty,.czis-create-user-courses-error{padding:12px!important;color:var(--muted)!important;font-size:12px!important}.czis-create-user-courses-error{color:#ffb0a5!important}@media(max-width:760px){.czis-create-user-courses-field{grid-column:1/-1!important}}


/* CZIS USER CREATE FORM V1.4 20260819 */
.czis-user-create-grid-v14{display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;column-gap:18px!important;row-gap:22px!important;align-items:start!important;width:100%!important;margin:0!important;padding:0!important}
.czis-user-create-grid-v14>.czis-user-create-field-v14{min-width:0!important;margin:0!important;align-self:start!important}
.czis-user-create-grid-v14>.czis-user-create-first-v14{grid-column:1/span 6!important}
.czis-user-create-grid-v14>.czis-user-create-last-v14{grid-column:7/span 6!important}
.czis-user-create-grid-v14>.czis-user-create-job-v14{grid-column:1/span 6!important}
.czis-user-create-grid-v14>.czis-user-create-department-v14{grid-column:7/span 6!important}
.czis-user-create-grid-v14>.czis-user-create-email-v14{grid-column:1/span 6!important}
.czis-user-create-grid-v14>.czis-user-create-code-v14{grid-column:7/span 3!important}
.czis-user-create-grid-v14>.czis-user-create-education-v14{grid-column:10/span 3!important}
.czis-user-create-grid-v14 label{display:block!important;margin:0 0 10px!important;font-weight:750!important;line-height:1.3!important;color:var(--text)!important}
.czis-user-create-grid-v14 input:not([type="hidden"]),.czis-user-create-grid-v14 select,.czis-user-create-grid-v14 .czis-create-user-courses-toggle{box-sizing:border-box!important;width:100%!important;min-width:0!important;height:60px!important;min-height:60px!important;margin:0!important;border-radius:12px!important}
.czis-user-create-grid-v14 input:not([type="hidden"]),.czis-user-create-grid-v14 select{padding:0 18px!important;border:1px solid var(--rub)!important;background:#122945!important;color:var(--text)!important;font:inherit!important}
.czis-user-create-grid-v14 select{appearance:auto!important;color-scheme:dark!important}
.czis-user-create-grid-v14 input:not([type="hidden"]):focus,.czis-user-create-grid-v14 select:focus{border-color:rgba(125,177,255,.78)!important;outline:none!important;box-shadow:0 0 0 2px rgba(75,136,255,.16)!important}
.czis-user-create-grid-v14 .czis-create-user-courses-field{display:flex!important;flex-direction:column!important;gap:0!important;position:relative!important;overflow:visible!important}
.czis-user-create-grid-v14 .czis-create-user-courses-label{margin-bottom:10px!important}
.czis-user-create-grid-v14 .czis-create-user-courses-dropdown{width:100%!important;min-width:0!important}
.czis-user-create-grid-v14 .czis-create-user-courses-toggle{padding:0 16px!important}
.czis-user-create-grid-v14 .czis-create-user-courses-toggle-text{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.czis-user-create-grid-v14 .czis-create-user-courses-help{order:3!important;margin:8px 0 0!important;min-height:0!important;font-size:12px!important;line-height:1.4!important;color:var(--muted)!important}
.czis-user-create-grid-v14 .czis-create-user-courses-menu{top:calc(100% + 7px)!important;z-index:40!important}
.czis-user-create-form-v14>.czis-akcije,.czis-user-create-form-v14>.akcije,.czis-user-create-form-v14>.form-actions{margin-top:26px!important}
select[name="job_title"]{box-sizing:border-box;width:100%;min-height:56px;border:1px solid var(--rub);border-radius:12px;background:#122945;color:var(--text);padding:0 16px;font:inherit;color-scheme:dark}
select[name="job_title"]:focus{border-color:rgba(125,177,255,.78);outline:none;box-shadow:0 0 0 2px rgba(75,136,255,.16)}
@media(max-width:1100px){
 .czis-user-create-grid-v14{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .czis-user-create-grid-v14>.czis-user-create-first-v14,.czis-user-create-grid-v14>.czis-user-create-job-v14,.czis-user-create-grid-v14>.czis-user-create-email-v14{grid-column:1!important}
 .czis-user-create-grid-v14>.czis-user-create-last-v14,.czis-user-create-grid-v14>.czis-user-create-department-v14,.czis-user-create-grid-v14>.czis-user-create-code-v14{grid-column:2!important}
 .czis-user-create-grid-v14>.czis-user-create-education-v14{grid-column:1/-1!important}
}
@media(max-width:760px){.czis-user-create-grid-v14{grid-template-columns:1fr!important}.czis-user-create-grid-v14>.czis-user-create-field-v14{grid-column:1!important}}

/* CZIS USER CREATE FORM V1.5.1 SAFE 20260819 */
/* Layout se radi na runtime omotaču koji kreira ograničena, idempotentna skripta. PHP tenant predložak se ne prepisuje. */
.czis-user-create-form-v151{width:100%!important;max-width:none!important;min-width:0!important}
.czis-user-create-grid-v151{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;column-gap:20px!important;row-gap:24px!important;align-items:start!important;width:100%!important;max-width:none!important;min-width:0!important;margin:0!important;padding:0!important}
.czis-user-create-grid-v151>.czis-user-create-field-v151{min-width:0!important;width:100%!important;max-width:none!important;margin:0!important;align-self:start!important}
.czis-user-create-grid-v151>.czis-user-create-first-v151{grid-column:1!important}
.czis-user-create-grid-v151>.czis-user-create-last-v151{grid-column:2!important}
.czis-user-create-grid-v151>.czis-user-create-job-v151{grid-column:1!important}
.czis-user-create-grid-v151>.czis-user-create-department-v151{grid-column:2!important}
.czis-user-create-grid-v151>.czis-user-create-email-v151{grid-column:1!important}
.czis-user-create-grid-v151>.czis-user-create-code-v151{grid-column:2!important}
.czis-user-create-grid-v151>.czis-user-create-education-v151{grid-column:1/-1!important;width:100%!important}
.czis-user-create-grid-v151 label{display:block!important;margin:0 0 10px!important;font-weight:750!important;line-height:1.3!important;color:var(--text)!important}
.czis-user-create-grid-v151 label small,.czis-user-create-grid-v151 .czis-create-user-courses-label small{font-size:.78em!important;font-weight:650!important;color:var(--muted)!important}
.czis-user-create-grid-v151 input:not([type="hidden"]),.czis-user-create-grid-v151 select,.czis-user-create-grid-v151 .czis-create-user-courses-toggle{box-sizing:border-box!important;width:100%!important;max-width:none!important;min-width:0!important;height:64px!important;min-height:64px!important;margin:0!important;border-radius:12px!important}
.czis-user-create-grid-v151 input:not([type="hidden"]),.czis-user-create-grid-v151 select{padding:0 18px!important;border:1px solid var(--rub)!important;background:#122945!important;color:var(--text)!important;font:inherit!important}
.czis-user-create-grid-v151 select{appearance:auto!important;color-scheme:dark!important;padding-right:42px!important}
.czis-user-create-grid-v151 input:not([type="hidden"]):focus,.czis-user-create-grid-v151 select:focus{border-color:rgba(125,177,255,.78)!important;outline:none!important;box-shadow:0 0 0 2px rgba(75,136,255,.16)!important}
.czis-user-create-grid-v151 .czis-create-user-courses-field{display:flex!important;flex-direction:column!important;gap:0!important;position:relative!important;overflow:visible!important}
.czis-user-create-grid-v151 .czis-create-user-courses-label{margin:0 0 10px!important}
.czis-user-create-grid-v151 .czis-create-user-courses-dropdown{position:relative!important;width:100%!important;min-width:0!important;z-index:40!important}
.czis-user-create-grid-v151 .czis-create-user-courses-toggle{padding:0 18px!important}
.czis-user-create-grid-v151 .czis-create-user-courses-toggle-text{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.czis-user-create-grid-v151 .czis-create-user-courses-help{order:3!important;margin:8px 0 0!important;min-height:0!important;font-size:12px!important;line-height:1.45!important;color:var(--muted)!important}
.czis-user-create-grid-v151 .czis-create-user-courses-menu{top:calc(100% + 7px)!important;z-index:1000!important}
.czis-user-create-form-v151 :is(.czis-akcije,.akcije,.form-actions,.actions){margin-top:26px!important}
@media(max-width:760px){
 .czis-user-create-grid-v151{grid-template-columns:1fr!important;row-gap:20px!important}
 .czis-user-create-grid-v151>.czis-user-create-field-v151{grid-column:1!important}
}

/* CZIS USER CREATE FORM V1.5.7.1 STANDALONE EXACT WIDTH 20260819 */
form.czis-user-create-form-v1571{
  box-sizing:border-box!important;
  max-width:none!important;
  min-width:0!important;
  margin-left:0!important;
  margin-right:0!important;
  overflow:visible!important;
}
form.czis-user-create-form-v1571 > .czis-user-create-grid-v1571{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:28px 28px!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  box-sizing:border-box!important;
  margin:0!important;
  padding:0!important;
  align-items:start!important;
}
.czis-user-create-grid-v1571 > .czis-user-field-v1571{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
  box-sizing:border-box!important;
}
.czis-user-create-grid-v1571 > .f-first{grid-column:1!important;grid-row:1!important;}
.czis-user-create-grid-v1571 > .f-last{grid-column:2!important;grid-row:1!important;}
.czis-user-create-grid-v1571 > .f-job{grid-column:3!important;grid-row:1!important;}
.czis-user-create-grid-v1571 > .f-department{grid-column:1!important;grid-row:2!important;}
.czis-user-create-grid-v1571 > .f-email{grid-column:2!important;grid-row:2!important;}
.czis-user-create-grid-v1571 > .f-code{grid-column:3!important;grid-row:2!important;}
.czis-user-create-grid-v1571 > .f-education{grid-column:1/-1!important;grid-row:3!important;}
.czis-user-create-grid-v1571 label{display:block!important;margin:0 0 10px!important;}
.czis-user-create-grid-v1571 input:is([type="text"],[type="email"],[type="password"],[type="tel"],[type="number"],:not([type])),
.czis-user-create-grid-v1571 select,
.czis-user-create-grid-v1571 .czis-create-user-courses-toggle{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  height:64px!important;
  min-height:64px!important;
  box-sizing:border-box!important;
  margin:0!important;
}
.czis-user-create-grid-v1571 .czis-create-user-courses-field,
.czis-user-create-grid-v1571 .czis-create-user-courses-dropdown,
.czis-user-create-grid-v1571 .czis-create-user-courses-toggle,
.czis-user-create-grid-v1571 .czis-create-user-courses-menu,
.czis-user-create-grid-v1571 .czis-create-user-courses-help{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  box-sizing:border-box!important;
}
.czis-user-create-grid-v1571 .czis-create-user-courses-menu{left:0!important;right:0!important;max-height:360px!important;}
.czis-user-create-grid-v1571 .czis-create-user-course-option{display:flex!important;align-items:flex-start!important;gap:12px!important;padding:10px 12px!important;min-height:48px!important;}
.czis-user-create-grid-v1571 .czis-create-user-course-option input[type="checkbox"],
.czis-user-create-grid-v1571 .czis-create-user-courses-menu input[type="checkbox"]{
  appearance:auto!important;-webkit-appearance:checkbox!important;
  display:inline-block!important;width:18px!important;height:18px!important;
  min-width:18px!important;min-height:18px!important;max-width:18px!important;max-height:18px!important;
  flex:0 0 18px!important;padding:0!important;margin:2px 0 0!important;
  border:initial!important;background:initial!important;box-shadow:none!important;
}
@media(max-width:1050px){
  form.czis-user-create-form-v1571 > .czis-user-create-grid-v1571{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .czis-user-create-grid-v1571 > .czis-user-field-v1571{grid-column:auto!important;grid-row:auto!important;}
  .czis-user-create-grid-v1571 > .f-education{grid-column:1/-1!important;}
}
@media(max-width:680px){
  form.czis-user-create-form-v1571{width:100%!important;}
  form.czis-user-create-form-v1571 > .czis-user-create-grid-v1571{grid-template-columns:minmax(0,1fr)!important;gap:20px!important;}
  .czis-user-create-grid-v1571 > .czis-user-field-v1571{grid-column:1!important;grid-row:auto!important;}
}

/* CZIS_ASSIGNMENT_MULTI_V1_CSS */
.czis-multi-native-hidden{display:none!important}
.czis-multi-check{position:relative;width:100%;min-width:0}
.czis-multi-trigger{width:100%;min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 18px;border:1px solid var(--rub);border-radius:12px;background:var(--polje,#132b49);color:var(--text,#eef4ff);font:inherit;text-align:left;cursor:pointer}
.czis-multi-trigger:hover{border-color:rgba(125,177,255,.65)}
.czis-multi-trigger:focus-visible{outline:2px solid rgba(88,145,255,.75);outline-offset:2px}
.czis-multi-trigger-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:650}
.czis-multi-trigger-chevron{flex:0 0 auto;color:#9fc5ff;font-weight:800}
.czis-multi-panel{position:absolute;z-index:80;left:0;right:0;top:calc(100% + 8px);max-height:360px;overflow:auto;border:1px solid var(--rub);border-radius:12px;background:#071a2e;box-shadow:0 18px 42px rgba(0,0,0,.35);padding:8px}
.czis-multi-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid transparent;border-radius:10px;cursor:pointer;color:var(--text)}
.czis-multi-item+.czis-multi-item{margin-top:4px}
.czis-multi-item:hover{background:rgba(89,141,225,.08);border-color:rgba(125,177,255,.18)}
.czis-multi-item.is-selected{background:rgba(65,125,222,.12);border-color:rgba(86,152,255,.28)}
.czis-multi-item input[type="checkbox"]{appearance:auto!important;-webkit-appearance:checkbox!important;width:18px!important;height:18px!important;min-width:18px!important;max-width:18px!important;min-height:18px!important;max-height:18px!important;margin:0!important;padding:0!important;flex:0 0 18px!important}
.czis-multi-item-body{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.czis-multi-item-body strong{font-size:14px;line-height:1.35;min-width:0}
.czis-multi-assigned-badge{margin-left:auto;flex:0 0 auto;border:1px solid rgba(63,191,143,.45);color:#78dfb8;background:rgba(63,191,143,.08);border-radius:999px;padding:3px 7px;font-size:11px;font-weight:750}
.czis-multi-submit-status{margin-top:12px;padding:10px 12px;border:1px solid var(--rub);border-radius:10px;color:var(--muted)}
.czis-multi-submit-status.greska{border-color:rgba(255,107,87,.45);color:#ff9b8e;background:rgba(255,107,87,.06)}
@media(max-width:760px){.czis-multi-panel{position:relative;top:auto;margin-top:8px;max-height:300px}}
/* CZIS_ASSIGNMENT_USERS_COMPACT_V1_1 */
.czis-multi-check.czis-user-multi .czis-multi-panel{
  padding:6px!important;
  max-height:340px;
}
.czis-multi-check.czis-user-multi .czis-multi-item{
  display:grid!important;
  grid-template-columns:18px minmax(0,1fr)!important;
  align-items:center!important;
  column-gap:10px!important;
  row-gap:0!important;
  width:100%!important;
  min-height:40px!important;
  padding:8px 10px!important;
  margin:0!important;
  border-radius:8px!important;
  box-sizing:border-box!important;
}
.czis-multi-check.czis-user-multi .czis-multi-item + .czis-multi-item{
  margin-top:2px!important;
}
.czis-multi-check.czis-user-multi .czis-multi-item input[type="checkbox"]{
  appearance:auto!important;
  -webkit-appearance:checkbox!important;
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  min-height:18px!important;
  max-width:18px!important;
  max-height:18px!important;
  margin:0!important;
  padding:0!important;
  align-self:center!important;
  justify-self:start!important;
  flex:none!important;
}
.czis-multi-check.czis-user-multi .czis-multi-item-body{
  display:flex!important;
  align-items:center!important;
  min-width:0!important;
  width:100%!important;
  gap:8px!important;
  margin:0!important;
  padding:0!important;
  line-height:1.25!important;
}
.czis-multi-check.czis-user-multi .czis-multi-item-body strong{
  display:block!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  font-size:14px!important;
  font-weight:650!important;
  line-height:1.25!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
/* CZIS_ASSIGNMENT_USER_FUNCTION_V1_2 */
.czis-multi-check.czis-user-multi .czis-multi-item-body{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(110px,160px)!important;
  align-items:center!important;
  column-gap:14px!important;
  row-gap:0!important;
  width:100%!important;
}
.czis-multi-check.czis-user-multi .czis-multi-item-body strong{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.czis-multi-check.czis-user-multi .czis-user-function-v12{
  display:block!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  color:var(--muted,#aebed3)!important;
  font-size:12px!important;
  font-weight:500!important;
  line-height:1.25!important;
  text-align:right!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
@media(max-width:760px){
  .czis-multi-check.czis-user-multi .czis-multi-item-body{
    grid-template-columns:minmax(0,1fr) minmax(88px,125px)!important;
    column-gap:10px!important;
  }
  .czis-multi-check.czis-user-multi .czis-user-function-v12{font-size:11px!important}
}
/* CZIS_ASSIGNMENT_USER_META_V1_3 */
.czis-multi-check.czis-user-multi .czis-multi-item-body{
  display:grid!important;
  grid-template-columns:minmax(0,1.45fr) minmax(105px,.9fr) minmax(95px,.75fr)!important;
  align-items:center!important;
  column-gap:14px!important;
  row-gap:0!important;
  width:100%!important;
}
.czis-multi-check.czis-user-multi .czis-multi-item-body strong{
  display:block!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.czis-multi-check.czis-user-multi .czis-user-username-v13,
.czis-multi-check.czis-user-multi .czis-user-function-v13{
  display:block!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  font-size:12px!important;
  font-weight:500!important;
  line-height:1.25!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.czis-multi-check.czis-user-multi .czis-user-username-v13{
  color:var(--text,#e8eef7)!important;
  opacity:.82!important;
  text-align:left!important;
}
.czis-multi-check.czis-user-multi .czis-user-function-v13{
  color:var(--muted,#aebed3)!important;
  text-align:right!important;
}
@media(max-width:760px){
  .czis-multi-check.czis-user-multi .czis-multi-item-body{
    grid-template-columns:minmax(0,1.25fr) minmax(84px,.9fr) minmax(82px,.7fr)!important;
    column-gap:8px!important;
  }
  .czis-multi-check.czis-user-multi .czis-user-username-v13,
  .czis-multi-check.czis-user-multi .czis-user-function-v13{font-size:11px!important}
}
/* CZIS_TENANT_EDUCATION_SHELL_V24_20260824_BEGIN */
.czis-tenant-context-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 22px;padding:8px;border:1px solid #29425f;border-radius:16px;background:#0a1d31}.czis-tenant-context-tabs a{padding:10px 14px;border-radius:11px;color:#c6d3e5;text-decoration:none;font-weight:700}.czis-tenant-context-tabs a:hover,.czis-tenant-context-tabs a.aktivno{background:#16375d;color:#fff}.czis-tenant-education-entry{display:flex;align-items:center;justify-content:space-between;gap:20px}.czis-tenant-education-entry>div{min-width:0}.czis-tenant-education-entry .gumb{flex:none}
body.czis-admin-shell-page{margin:0;background:#071a2d;color:#eef5ff;min-height:100vh}.czis-admin-shell-v24{display:grid;grid-template-columns:228px minmax(0,1fr);min-height:100vh;background:linear-gradient(135deg,#0c2b4d 0,#071a2d 27%,#061829 100%)}
.czis-shell-sidebar{position:sticky;top:0;height:100vh;box-sizing:border-box;border-right:1px solid #24415e;background:rgba(6,24,42,.82);padding:16px 12px;display:flex;flex-direction:column;gap:12px}.czis-shell-brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:#f4f8ff;padding:2px 6px 18px;border-bottom:1px solid #203b57}.czis-shell-brand img{width:44px;height:44px;object-fit:contain}.czis-shell-brand strong{display:block;font-size:16px;letter-spacing:.01em}.czis-shell-brand small{display:block;color:#9fb4cd;margin-top:3px;font-size:12px}
.czis-shell-nav-group{padding:8px 0 10px;border-bottom:1px solid #1d3751}.czis-shell-nav-system{border-bottom:0;margin-top:auto}.czis-shell-nav-label{display:block;padding:0 8px 7px;color:#829bb7;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.czis-shell-nav-group a{display:flex;align-items:center;gap:10px;padding:9px 10px;margin:2px 0;border-radius:9px;color:#d8e4f2;text-decoration:none;font-size:13px;font-weight:650}.czis-shell-nav-group a:hover,.czis-shell-nav-group a.aktivno{background:#102f50;color:#fff}.czis-shell-nav-icon{width:19px;text-align:center;color:#92bdf1;font-size:17px;line-height:1}
.czis-shell-main{min-width:0;padding:0 24px 34px}.czis-shell-topbar{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:22px;border-bottom:1px solid #1e3a56}.czis-shell-breadcrumb{display:flex;align-items:center;gap:10px;color:#9fb3ca;font-size:13px;min-width:0;flex-wrap:wrap}.czis-shell-breadcrumb a{color:#b4c6d9;text-decoration:none}.czis-shell-breadcrumb strong{color:#eef5ff}.czis-shell-top-actions{display:flex;align-items:center;gap:20px}.czis-shell-top-actions label{display:flex;align-items:center;gap:9px;color:#94abc4;font-size:12px}.czis-shell-top-actions select{min-width:145px;background:#0f2946;border:1px solid #274764;color:#eef5ff;border-radius:8px;padding:9px 32px 9px 11px}.czis-shell-admin{display:flex;align-items:center;gap:9px}.czis-shell-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#173552;color:#dce9f8;font-weight:800}.czis-shell-admin strong,.czis-shell-admin small{display:block}.czis-shell-admin strong{font-size:12px}.czis-shell-admin small{font-size:11px;color:#92a8c2;margin-top:2px}
.czis-shell-alert{margin:18px 0 0}.czis-shell-page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding:28px 0 18px}.czis-shell-page-head h1{margin:0;font-size:28px;letter-spacing:-.02em}.czis-shell-page-head p{margin:7px 0 0;color:#a9bdd4}.czis-shell-tabs{display:flex;gap:8px;flex-wrap:wrap}.czis-shell-tabs a{border:1px solid #294966;color:#dbe7f5;text-decoration:none;border-radius:9px;padding:10px 13px;font-size:12px;font-weight:700;background:#0a1d31}.czis-shell-tabs a.aktivno,.czis-shell-tabs a:hover{background:#1766f2;border-color:#327cff;color:#fff}
.czis-tenant-edu-layout{display:grid;grid-template-columns:minmax(0,1fr) 335px;gap:20px;align-items:start}.czis-tenant-edu-primary{min-width:0}.czis-tenant-edu-info,.czis-tenant-edu-card,.czis-tenant-side-card{border:1px solid #294765;background:rgba(7,29,49,.9);box-shadow:0 18px 45px rgba(0,0,0,.12)}.czis-tenant-edu-info{display:flex;gap:15px;align-items:flex-start;border-radius:14px;padding:18px 20px;margin-bottom:16px}.czis-tenant-edu-info-icon{flex:0 0 34px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#1f73f5;color:#fff;font-weight:800;box-shadow:0 0 0 6px rgba(48,124,255,.10)}.czis-tenant-edu-info h2,.czis-tenant-edu-card h2,.czis-tenant-side-card h2{margin:0;color:#f3f7fd}.czis-tenant-edu-info h2{font-size:14px}.czis-tenant-edu-info p{margin:6px 0 0;color:#9fb5ce;font-size:12px;line-height:1.55;max-width:900px}
.czis-tenant-edu-card{border-radius:14px;overflow:visible}.czis-tenant-edu-card-head{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:16px 18px 10px}.czis-tenant-edu-card-head h2{font-size:14px}.czis-tenant-edu-card-head p{margin:5px 0 0;color:#8fa8c3;font-size:11px}.czis-tenant-edu-total{color:#92a9c2;font-size:11px}.czis-tenant-edu-tools{display:grid;grid-template-columns:minmax(240px,1fr) minmax(180px,245px);gap:10px;padding:0 18px 12px}.czis-tenant-edu-search{display:flex;align-items:center;gap:8px;background:#102a48;border:1px solid #2a4b6a;border-radius:8px;padding:0 11px;color:#86a3c1}.czis-tenant-edu-search input{width:100%;min-width:0;background:transparent!important;border:0!important;box-shadow:none!important;color:#eef5ff!important;padding:10px 0!important}.czis-tenant-edu-tools select{background:#102a48;color:#eef5ff;border:1px solid #2a4b6a;border-radius:8px;padding:10px 12px}.czis-tenant-edu-table-wrap{overflow:visible;border-top:1px solid #203f5d}.czis-tenant-edu-table{width:100%;border-collapse:collapse}.czis-tenant-edu-table thead th{background:#102a48;color:#91a9c4;font-size:10px;text-transform:uppercase;letter-spacing:.06em;text-align:left;padding:10px 12px}.czis-tenant-edu-table tbody td{padding:11px 12px;border-top:1px solid #1c3b58;vertical-align:middle;font-size:12px}.czis-tenant-edu-table tbody tr:first-child td{border-top:0}.czis-tenant-edu-table tbody tr:hover{background:rgba(25,62,96,.28)}.czis-tenant-course-name{display:flex;align-items:center;gap:10px;min-width:0}.czis-tenant-course-icon{flex:0 0 28px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#102f51;color:#80b6f5;font-size:17px}.czis-tenant-course-name span:last-child{min-width:0}.czis-tenant-course-name strong{display:block;color:#f2f7fe;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:420px}.czis-tenant-course-name small{display:block;color:#849eb9;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:420px}.czis-version-pill{display:inline-flex;align-items:center;border-radius:999px;background:#0c483d;color:#43d79f;padding:4px 9px;font-weight:800}.czis-muted{color:#748aa4}.czis-shell-switch{gap:8px!important}.czis-shell-switch>span:last-child{min-width:76px;color:#a8bbd1;font-size:11px}.czis-tenant-course-date{color:#b9c8d9;white-space:nowrap}.czis-tenant-course-menu{position:relative}.czis-tenant-course-menu summary{list-style:none;cursor:pointer;font-size:22px;line-height:1;color:#9eb5cf;padding:4px 8px}.czis-tenant-course-menu summary::-webkit-details-marker{display:none}.czis-tenant-course-menu>div{position:absolute;right:0;z-index:30;min-width:150px;padding:6px;border:1px solid #315372;border-radius:9px;background:#0c223a;box-shadow:0 16px 35px rgba(0,0,0,.28)}.czis-tenant-course-menu a{display:block;padding:8px 10px;border-radius:6px;color:#dce8f6;text-decoration:none;font-size:11px}.czis-tenant-course-menu a:hover{background:#153a61}.czis-tenant-edu-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 16px;border-top:1px solid #203f5d;color:#8ea6bf;font-size:11px}.czis-tenant-edu-footer select{background:#102a48;color:#eef5ff;border:1px solid #2c4b69;border-radius:6px;padding:6px}.czis-tenant-pagination{display:flex;align-items:center;gap:4px}.czis-tenant-pagination button{min-width:28px;height:28px;border:1px solid #284966;background:#102b49;color:#9fb5cf;border-radius:6px;cursor:pointer}.czis-tenant-pagination button.aktivno{background:#1e72f2;color:#fff;border-color:#3c87ff}.czis-tenant-pagination button:disabled{opacity:.4;cursor:default}.czis-tenant-pagination span{padding:0 3px}
.czis-tenant-edu-aside{display:grid;gap:16px}.czis-tenant-side-card{border-radius:14px;padding:18px}.czis-tenant-side-card h2{font-size:15px;margin-bottom:14px}.czis-tenant-help-item{display:grid;grid-template-columns:36px minmax(0,1fr);gap:11px;padding:11px 0;border-top:1px solid #183852}.czis-tenant-help-item:first-of-type{border-top:0;padding-top:4px}.czis-tenant-help-item>span{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:900}.czis-tenant-help-item>span.green{background:#103d35;color:#44df9e}.czis-tenant-help-item>span.blue{background:#113a64;color:#55a7ff}.czis-tenant-help-item>span.purple{background:#302c58;color:#b88cff}.czis-tenant-help-item>span.orange{background:#4a351c;color:#ffae4b}.czis-tenant-help-item strong{display:block;font-size:12px}.czis-tenant-help-item p{margin:5px 0 0;color:#91a8c2;font-size:11px;line-height:1.5}.czis-tenant-side-card form{margin:0 0 8px}.czis-tenant-side-action{box-sizing:border-box;width:100%;display:flex;justify-content:center;align-items:center;gap:8px;padding:10px 12px;margin:0 0 8px;border:1px solid #315371;border-radius:7px;background:#0b223b;color:#a9c6e8;text-decoration:none;font:inherit;font-size:11px;font-weight:700;cursor:pointer}.czis-tenant-side-action:hover{border-color:#4a79a6;background:#102e4e;color:#fff}
@media(max-width:1180px){.czis-tenant-edu-layout{grid-template-columns:1fr}.czis-tenant-edu-aside{grid-template-columns:1fr 1fr}.czis-shell-page-head{align-items:flex-start;flex-direction:column}.czis-tenant-course-name strong,.czis-tenant-course-name small{max-width:300px}}
@media(max-width:850px){.czis-admin-shell-v24{grid-template-columns:1fr}.czis-shell-sidebar{position:relative;height:auto}.czis-shell-nav-group{display:flex;gap:4px;flex-wrap:wrap}.czis-shell-nav-label{width:100%}.czis-shell-main{padding:0 14px 28px}.czis-shell-topbar{align-items:flex-start;flex-direction:column;padding:15px 0}.czis-shell-top-actions{width:100%;justify-content:space-between;flex-wrap:wrap}.czis-shell-tabs{overflow:auto;max-width:100%;padding-bottom:4px;flex-wrap:nowrap}.czis-tenant-edu-aside{grid-template-columns:1fr}.czis-tenant-edu-tools{grid-template-columns:1fr}.czis-tenant-edu-table-wrap{overflow:auto}.czis-tenant-edu-table{min-width:760px}.czis-tenant-education-entry{align-items:flex-start;flex-direction:column}}
/* CZIS_TENANT_EDUCATION_SHELL_V24_20260824_END */

/* CZIS V2.5.2 — import edukacije + eksplicitno spremanje skice */
.czis-course-import-menu{position:relative}
.czis-course-import-menu>summary{list-style:none;cursor:pointer}
.czis-course-import-menu>summary::-webkit-details-marker{display:none}
.czis-course-import-menu[open]>summary{border-color:#69a3ff}
.czis-course-import-form{position:absolute;right:0;top:calc(100% + 10px);z-index:80;width:min(360px,calc(100vw - 40px));display:grid;gap:10px;padding:16px;border:1px solid var(--rub);border-radius:14px;background:#0a1b30;box-shadow:0 18px 44px rgba(0,0,0,.34)}
.czis-course-import-form input[type=file]{width:100%;padding:10px;border:1px solid var(--rub);border-radius:10px;background:#0d2039;color:var(--text)}
.czis-course-import-form small{color:var(--muted);line-height:1.45}
.czis-course-editor-v2[data-course-editor-state="working-copy"]{border-color:rgba(105,163,255,.34)}
@media(max-width:900px){.czis-course-import-form{left:0;right:auto}}

/* CZIS V2.5.3 — course editor dynamic content controls */
.czis-editor-section-title,.czis-editor-item-head,.czis-editor-subhead{display:flex;align-items:center;justify-content:space-between;gap:14px}
.czis-editor-section-title{margin:24px 0 12px}.czis-editor-section-title h2,.czis-editor-section-title p,.czis-editor-item-head h3,.czis-editor-subhead h3{margin:0}.czis-editor-section-title p{margin-top:4px;color:var(--muted)}
.czis-editor-item-head{margin-bottom:12px}.czis-editor-subhead{margin-top:20px;padding-top:16px;border-top:1px solid var(--rub)}
.gumb.mali{padding:7px 10px;font-size:12px}
@media(max-width:700px){.czis-editor-section-title,.czis-editor-item-head,.czis-editor-subhead{align-items:flex-start;flex-direction:column}.czis-editor-section-title .gumb,.czis-editor-subhead .gumb{width:100%;text-align:center}}

/* CZIS V2.5.5 — privatnost i transparentnost obrade */
.czis-privacy-links{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:16px 0 0;font-size:12px;color:var(--muted)}
.czis-privacy-links a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent}
.czis-privacy-links a:hover,.czis-privacy-links a:focus-visible{color:var(--text);border-bottom-color:currentColor}
.czis-privacy-registration-note{margin:18px 0 4px;padding:16px 18px;border:1px solid var(--rub);border-radius:14px;background:rgba(18,39,69,.52);font-size:13px;line-height:1.55}
.czis-privacy-registration-note>strong{display:block;margin-bottom:6px;color:var(--text);font-size:14px}
.czis-privacy-registration-note p{margin:6px 0;color:var(--muted)}
.czis-privacy-registration-note a{color:var(--accent);font-weight:700}
.czis-privacy-check{display:flex;align-items:flex-start;gap:10px;margin:12px 0 8px;padding:12px;border:1px solid rgba(125,177,255,.3);border-radius:10px;background:rgba(125,177,255,.06);color:var(--text);cursor:pointer}
.czis-privacy-check input{width:18px;height:18px;min-width:18px;margin-top:2px;accent-color:var(--accent)}
.czis-privacy-registration-note small{display:block;color:var(--muted);line-height:1.45}
.czis-legal-page{width:min(100% - 32px,1040px);margin:0 auto;padding:30px 0 54px}
.czis-legal-header{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px}
.czis-legal-brand{display:flex;align-items:center;gap:14px;color:var(--text);text-decoration:none}
.czis-legal-brand .czis-logo-standard{width:48px;height:48px;flex:0 0 48px}
.czis-legal-brand span:last-child{display:flex;flex-direction:column;gap:3px}
.czis-legal-brand strong{font-size:16px}.czis-legal-brand small{font-size:12px;color:var(--muted)}
.czis-legal-content{padding:34px 38px;line-height:1.68}
.czis-legal-content h1{margin:0 0 12px;color:var(--text);font-size:clamp(30px,4vw,46px);letter-spacing:-.035em}
.czis-legal-content h2{margin:32px 0 10px;color:var(--text);font-size:20px}
.czis-legal-content p,.czis-legal-content li,.czis-legal-content dd{color:var(--muted)}
.czis-legal-content strong,.czis-legal-content dt{color:var(--text)}
.czis-legal-content a{color:var(--accent)}
.czis-legal-content ul{padding-left:22px}.czis-legal-content li+li{margin-top:6px}
.czis-legal-meta{display:inline-flex;padding:6px 10px;margin-bottom:16px;border:1px solid var(--rub);border-radius:999px;color:var(--muted);font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.czis-legal-definition{display:grid;grid-template-columns:minmax(160px,220px) 1fr;gap:8px 20px;padding:18px;border:1px solid var(--rub);border-radius:14px;background:rgba(18,39,69,.36)}
.czis-legal-definition dt{font-weight:800}.czis-legal-definition dd{margin:0}
.czis-legal-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px;padding-top:22px;border-top:1px solid var(--rub)}
@media(max-width:720px){.czis-legal-page{width:min(100% - 20px,1040px);padding-top:16px}.czis-legal-header{align-items:flex-start}.czis-legal-content{padding:24px 20px}.czis-legal-definition{grid-template-columns:1fr}.czis-legal-definition dt{margin-top:8px}}

/* ============================================================
   V2.7.4 — Video & Ergonomics Foundation
   ============================================================ */

/* Semantički edukacijski blokovi; isti markup radi u editoru, previewu i learneru. */
.czis-learning-callout{max-width:72ch;margin:20px 0;padding:16px 18px;border:1px solid var(--rub);border-left:4px solid var(--accent);border-radius:12px;background:rgba(19,46,79,.46);text-align:left}
.czis-learning-callout>strong{display:block;margin:0 0 7px;color:var(--text);font-size:14px;letter-spacing:.01em}
.czis-learning-callout>p{margin:0!important;color:var(--tekst);text-align:left!important;hyphens:manual!important}
.czis-learning-callout--term{border-left-color:#79aefc;background:rgba(70,126,210,.10)}
.czis-learning-callout--important{border-left-color:#5fa2ff;background:rgba(47,109,255,.09)}
.czis-learning-callout--example{border-left-color:#58c9df;background:rgba(22,193,249,.07)}
.czis-learning-callout--warning{border-left-color:#f5bd58;background:rgba(245,189,88,.08)}
.czis-learning-callout--rule{border-left-color:#8aa8ff;background:rgba(105,163,255,.07)}
.czis-learning-callout--remember{border-left-color:#55d6a8;background:rgba(63,191,143,.08)}

/* Standardni video blok. Datoteka je privatni course asset, a browser dobiva
   samo autorizirani /mediji/<token> URL. */
.czis-video-block{width:min(900px,100%);margin:24px 0;border:1px solid var(--rub);border-radius:16px;background:rgba(8,23,41,.72);overflow:hidden;text-align:left}
.czis-video-frame{position:relative;aspect-ratio:16/9;background:#020914;overflow:hidden}
.czis-video-player{display:block;width:100%;height:100%;object-fit:contain;background:#020914}
.czis-video-block figcaption{display:block;padding:14px 16px;color:var(--muted);text-transform:none;letter-spacing:0;font-family:var(--body);font-size:13px;line-height:1.5}
.czis-video-block figcaption strong{display:block;margin-bottom:4px;color:var(--text);font-size:15px}
.czis-video-block figcaption p{margin:0 0 7px!important;font-size:13.5px!important;line-height:1.55!important;text-align:left!important}
.czis-video-requirement,.czis-video-watch-state{display:block;margin-top:7px;color:#9fc4ff;font-family:var(--util);font-size:10.5px;letter-spacing:.03em;text-transform:none}
.czis-video-block--split{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(220px,.8fr);align-items:stretch;width:min(980px,100%)}
.czis-video-block--split .czis-video-frame{height:100%;min-height:260px;aspect-ratio:auto}
.czis-video-block--split figcaption{display:flex;flex-direction:column;justify-content:center;padding:22px}
.czis-video-block--scenario{border-color:rgba(105,163,255,.34);box-shadow:inset 0 0 0 1px rgba(105,163,255,.06)}

/* Standard veličina grafika. Stare edukacije ostaju kompatibilne; nove mogu
   koristiti czis-media--small/medium/large/full za predvidljiv raspored. */
.tijelo img,.slajd-tijelo img{max-width:100%;height:auto}
.tijelo figure,.slajd-tijelo figure{box-sizing:border-box}
.czis-media--small{width:min(420px,100%)}
.czis-media--medium{width:min(640px,100%)}
.czis-media--large{width:min(860px,100%)}
.czis-media--full{width:100%}

/* Vizualni editor: medij se sprema kao čisti figure markup; kontrole označene
   data-editor-only nikada se ne šalju u sadržaj skice. */
.czis-rich-toolbar-separator{width:1px;align-self:stretch;min-height:26px;background:var(--rub);margin:0 2px}
.czis-rich-editor figure[data-czis-video]{pointer-events:auto;max-width:620px;outline:1px dashed rgba(125,177,255,.25)}
.czis-rich-editor figure[data-czis-video] video{pointer-events:none}
.czis-editor-media-controls{display:flex;align-items:center;gap:8px;max-width:620px;padding:8px 10px;margin:0 0 12px;border:1px dashed rgba(125,177,255,.22);border-top:0;border-radius:0 0 10px 10px;background:rgba(5,17,31,.68)}
.czis-editor-media-controls>span{margin-right:auto;color:var(--muted);font-size:11px}
.czis-media-dialog{width:min(760px,calc(100vw - 28px));max-height:calc(100vh - 32px);padding:0;border:1px solid var(--rub);border-radius:18px;background:#091a30;color:var(--text);box-shadow:0 30px 80px rgba(0,0,0,.55);overflow:auto}
.czis-media-dialog::backdrop{background:rgba(2,8,15,.76);backdrop-filter:blur(4px)}
.czis-media-dialog-card{padding:22px}
.czis-media-dialog-card h2{margin:0 0 5px}
.czis-media-dialog-card .czis-editor-item-head p{margin:0;color:var(--muted);font-size:13px;line-height:1.5;max-width:62ch}
.czis-media-dialog-card input[type="file"]{width:100%;padding:10px;border:1px solid var(--rub);border-radius:10px;background:#102a49;color:var(--text)}
.czis-media-dialog-card small{display:block;margin-top:5px;color:var(--muted);font-size:11px}
.czis-video-required-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 14px;border:1px solid var(--rub);border-radius:11px;background:rgba(18,39,69,.45)}
.czis-video-required-row>label{display:flex;align-items:center;gap:8px;margin:0}
.czis-video-threshold-label input{width:72px;margin-left:6px}
.czis-media-dialog-status{min-height:22px;margin:12px 0;color:#a9c8f7;font-size:12px}

@media(max-width:760px){
  .czis-video-block--split{display:block;width:100%}
  .czis-video-block--split .czis-video-frame{min-height:0;aspect-ratio:16/9}
  .czis-video-block figcaption{padding:12px 13px}
  .czis-learning-callout{padding:14px 15px;margin:16px 0}
  .czis-rich-toolbar-separator{display:none}
  .czis-video-required-row{align-items:flex-start;flex-direction:column}
}