/* =====================================================================
   SBK_Spoljna saradnja i Obustave — izgled ljuske aplikacije.
   Boje, pismo i zaobljenja preuzeti su iz samih modula, da prelaz s
   prijave u modul ne mijenja vizuelni utisak:
     zaglavlje modula   linear-gradient(120deg,#17324d,#245d8f)
     pozadina modula    #edf3f8 -> #f8fafc -> #f4f6f9
     pismo modula       "Segoe UI", Arial, Helvetica, sans-serif
     obrub / tekst      #cbd5e1 / #172a3c
     istaknuto polje    obrub #d1a12a na podlozi #fff8d8
   ===================================================================== */

:root{
  --navy:#17324d;
  --plava:#245d8f;
  --plava2:#1c6fa8;
  --zelena:#147a55;
  --crvena:#b42318;
  --zlatna:#d1a12a;
  --zlatna-tamna:#9a6700;
  --zlatna-polje:#fff8d8;
  --tinta:#172a3c;
  --tinta-blijeda:#64748b;
  --obrub:#cbd5e1;
  --obrub-blijedi:#dbe4ec;
  --povrsina:#fff;

  --pismo:"Segoe UI",Arial,Helvetica,sans-serif;
  --zaobljenje:9px;
  --zaobljenje-vece:12px;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:var(--pismo);font-size:14px;line-height:1.45;
  color:var(--tinta);
  background:linear-gradient(180deg,#edf3f8 0,#f8fafc 260px,#f4f6f9 100%);
  background-attachment:fixed}
button,input,select,textarea{font:inherit;color:inherit}
.hidden{display:none!important}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.015em}

/* --------------------------------------------------------- dugmad */
.dugme{border:1px solid transparent;border-radius:var(--zaobljenje);padding:8px 14px;min-height:35px;
  font-weight:600;cursor:pointer;background:none;transition:background .13s,border-color .13s,box-shadow .13s}
.dugme.glavno{background:var(--plava);color:#fff;box-shadow:0 2px 8px rgba(23,50,77,.16)}
.dugme.glavno:hover{background:var(--navy)}
.dugme.sporedno{background:var(--povrsina);border-color:var(--obrub);color:var(--tinta)}
.dugme.sporedno:hover{border-color:var(--plava);color:var(--plava)}
.dugme.tiho{background:rgba(255,255,255,.9);border-color:var(--obrub);color:var(--tinta-blijeda)}
.dugme.tiho:hover{border-color:var(--plava);color:var(--plava)}
.dugme.opasno{background:var(--povrsina);border-color:var(--crvena);color:var(--crvena)}
.dugme.opasno:hover{background:var(--crvena);color:#fff}
.dugme.puno{width:100%;min-height:42px}
.tekst-dugme{background:none;border:0;color:#b6cbdc;cursor:pointer;padding:0;font-size:12px;
  text-decoration:underline;text-underline-offset:3px}
.tekst-dugme:hover{color:#fff}
:focus-visible{outline:2px solid var(--zlatna);outline-offset:2px}

.oznaka-naslov{display:block;font-size:12px;font-weight:700;color:#3c5670;margin-bottom:7px}
.polje{display:block;margin-bottom:16px}
.polje input,.polje textarea,select{width:100%;border:1px solid var(--obrub);
  border-radius:var(--zaobljenje);padding:9px 11px;background:var(--povrsina)}
.polje input:focus,.polje textarea:focus,select:focus{border-color:var(--plava);outline:none;
  box-shadow:0 0 0 4px rgba(36,93,143,.15)}

/* ======================================================== PRIJAVA */
.prijava{min-height:100vh;display:grid;grid-template-columns:minmax(300px,44%) 1fr}

.prijava-znak{color:#fff;padding:44px 40px;display:flex;flex-direction:column;gap:22px;
  background:linear-gradient(120deg,#17324d,#245d8f);
  box-shadow:4px 0 18px rgba(18,43,67,.20)}
.prijava-znak img{width:72px;height:auto}
.prijava-znak h1{font-size:30px;line-height:1.18;font-weight:750}
.prijava-znak p{margin:9px 0 0;color:#b9cfe0;font-size:13px}
.prijava-znak-podnozje{margin-top:auto;display:flex;flex-direction:column;gap:8px;
  padding-top:22px;border-top:1px solid rgba(255,255,255,.18)}
.prijava-znak-podnozje span{font-size:13px;color:#c7dbe9}
.prijava-znak-podnozje span::before{content:"— ";color:var(--zlatna)}

.prijava-list{display:grid;place-items:center;padding:40px 28px}
.prijava-list form{width:min(400px,100%)}

/* Pločica oznake budžetskog korisnika — osam polja, jedno po cifri. */
.plocica{position:relative;display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.plocica input{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;
  cursor:text;z-index:2}
.celija{height:54px;border:1px solid var(--obrub);border-radius:var(--zaobljenje);
  background:var(--povrsina);display:grid;place-items:center;
  font-size:22px;font-weight:800;color:var(--tinta);transition:border-color .13s,background .13s}
.celija.puna{border-color:var(--plava)}
.plocica.fokus .celija.na-redu{border:2px solid var(--zlatna);background:var(--zlatna-polje)}
.plocica-opis{font-size:12px;color:var(--tinta-blijeda);margin:9px 0 22px;min-height:18px}
.plocica-opis.posebno{color:var(--zlatna-tamna);font-weight:700}

.uloga-red{margin-bottom:16px}
.greska{margin-top:14px;border:1px solid #f3c9c5;border-left:4px solid var(--crvena);
  background:#fdeceb;color:#8c1d18;padding:10px 12px;border-radius:var(--zaobljenje);font-size:13px}

/* ======================================================== LJUSKA */
.ljuska{min-height:100vh;display:grid;grid-template-columns:250px 1fr}

.bocna{position:fixed;inset:0 auto 0 0;width:250px;color:#d5e3ee;display:flex;flex-direction:column;
  z-index:20;background:linear-gradient(165deg,#17324d,#245d8f 92%);
  box-shadow:2px 0 14px rgba(18,43,67,.18)}
.bocna-znak{display:flex;align-items:center;gap:12px;padding:18px;
  border-bottom:1px solid rgba(255,255,255,.16)}
.bocna-znak img{width:34px}
.bocna-znak strong{font-size:15px;font-weight:700;line-height:1.25;color:#fff}
.bocna nav{padding:12px 0;flex:1;overflow-y:auto}
.stavka{width:100%;border:0;background:none;color:#c8dcea;text-align:left;
  padding:10px 16px 10px 13px;cursor:pointer;display:flex;align-items:center;gap:11px;
  border-left:3px solid transparent;font-weight:600;
  transition:background .13s,border-color .13s,color .13s}
.stavka[hidden]{display:none}
.stavka i{font-style:normal;font-size:11px;font-weight:700;color:#8fb2cb;letter-spacing:.04em}
.stavka:hover{background:rgba(255,255,255,.08);color:#fff}
.stavka.aktivna{background:rgba(255,255,255,.13);color:#fff;border-left-color:var(--zlatna)}
.stavka.aktivna i{color:var(--zlatna)}
.stavka[disabled]{opacity:.38;cursor:not-allowed}
.stavka-naslov{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#8aadc6;
  padding:16px 16px 6px}
.bocna-podnozje{border-top:1px solid rgba(255,255,255,.16);padding:14px 16px;
  display:flex;flex-direction:column;gap:5px}
.bocna-podnozje .kod{font-size:18px;font-weight:800;color:#fff;letter-spacing:.05em}

.uloga-znak{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--zlatna);border:1px solid rgba(209,161,42,.6);
  border-radius:5px;padding:2px 7px}

.radni-prostor{grid-column:2;display:flex;flex-direction:column;min-height:100vh}
.traka{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 22px;
  background:var(--povrsina);border-bottom:1px solid var(--obrub-blijedi);
  box-shadow:0 2px 8px rgba(23,50,77,.06)}
.traka h2{font-size:19px}
.traka-desno{display:flex;align-items:center;gap:11px}
.stanje{font-size:12px;font-weight:600;padding:4px 10px;border-radius:var(--zaobljenje)}
.stanje.ok{background:#e6f5ee;color:var(--zelena)}
.stanje.lose{background:#fdeceb;color:var(--crvena)}

.stranice{flex:1;display:flex;flex-direction:column}
.stranica{display:none;padding:24px}
.stranica.aktivna{display:block}
.okvir-stranica.aktivna{display:flex;padding:0;flex:1}
#moduleFrame,#naloziFrame{flex:1;width:100%;border:0;min-height:calc(100vh - 56px);background:transparent}

/* --------------------------------------------------- početna */
.zaglavlje-korisnika{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding-bottom:14px;margin-bottom:22px;border-bottom:1px solid var(--obrub-blijedi)}
.zaglavlje-korisnika .natpis{font-size:12px;color:var(--tinta-blijeda)}
.kod-veliki{font-size:26px;font-weight:800;letter-spacing:.05em}

.popis-modula{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.popis-modula li{display:grid;grid-template-columns:50px 1fr 18px;align-items:center;gap:16px;
  padding:16px 20px;cursor:pointer;background:var(--povrsina);
  border:1px solid var(--obrub-blijedi);border-left:4px solid var(--plava);
  border-radius:var(--zaobljenje-vece);box-shadow:0 2px 8px rgba(23,50,77,.06);
  transition:box-shadow .16s,border-left-color .16s,transform .16s,background .16s}
.popis-modula li:hover,.popis-modula li:focus-visible{box-shadow:0 8px 20px rgba(23,50,77,.14);
  border-left-color:var(--zlatna);transform:translateY(-1px);background:#fbfdff}
.popis-modula li i{grid-row:1/3;font-style:normal;display:flex;align-items:center;justify-content:center;
  width:50px;height:50px;border-radius:12px;background:#eaf2fa;color:var(--plava);flex-shrink:0;
  transition:background .16s,color .16s}
.popis-modula li:hover i,.popis-modula li:focus-visible i{background:var(--zlatna-polje);color:var(--zlatna-tamna)}
.popis-modula li h3{font-size:18px;grid-column:2;grid-row:1}
.popis-modula li span{grid-column:2;grid-row:2;font-size:13px;color:var(--tinta-blijeda)}
.popis-modula li .strelica-otvori{grid-column:3;grid-row:1/3;color:var(--obrub);
  transition:color .16s,transform .16s;justify-self:end}
.popis-modula li:hover .strelica-otvori,.popis-modula li:focus-visible .strelica-otvori{
  color:var(--zlatna);transform:translateX(2px)}
.popis-modula li[hidden]{display:none}
.napomena{font-size:13px;color:#6b5000;margin-top:16px;background:var(--zlatna-polje);
  border:1px solid #e5cf86;border-radius:var(--zaobljenje);padding:10px 13px}

/* --------------------------------------------------- ploče */
.dvije-kolone{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:18px}
.ploca{background:var(--povrsina);border:1px solid var(--obrub-blijedi);
  border-top:3px solid var(--plava);border-radius:var(--zaobljenje-vece);padding:20px;
  box-shadow:0 2px 10px rgba(23,50,77,.07)}
.ploca h3{font-size:17px;margin-bottom:6px}
.ploca>p{margin:0 0 16px;color:var(--tinta-blijeda);font-size:13px}
.ploca.zavrsetak{border-top-color:var(--crvena);margin-top:18px}
.ploca.istaknuto{border-top-color:var(--zelena);margin-top:18px}
.oznaka-novo{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.04em;
  color:var(--zelena);background:#e3f5ec;border:1px solid #bfe0d1;border-radius:999px;
  padding:2px 8px;vertical-align:middle;margin-left:6px}
.uputa{font-size:12px;color:var(--tinta-blijeda);background:#f2f6fa;border:1px solid var(--obrub-blijedi);
  border-radius:var(--zaobljenje);padding:10px 12px;margin:0 0 14px}
.red-dugmadi{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:14px}
.putanja{font-size:13px;background:#f2f6fa;border:1px solid var(--obrub-blijedi);
  border-radius:var(--zaobljenje);padding:10px 12px;margin-bottom:16px;word-break:break-all}
.datoteka{display:block;border:1px dashed var(--obrub);border-radius:var(--zaobljenje);
  padding:14px;text-align:center;cursor:pointer;margin-bottom:14px;font-size:13px;
  color:var(--tinta-blijeda);background:#fbfdff}
.datoteka:hover{border-color:var(--plava);color:var(--plava)}
.datoteka input{display:none}
.ishod{margin-top:14px;font-size:13px;border:1px solid #bfe0d1;border-left:4px solid var(--zelena);
  background:#eaf7f1;padding:10px 12px;border-radius:var(--zaobljenje);word-break:break-all}
.ishod.greska{border-color:#f3c9c5;border-left-color:var(--crvena);background:#fdeceb;color:#8c1d18}

/* --------------------------------------------------- obavijest */
.obavijest{position:fixed;left:50%;bottom:24px;transform:translate(-50%,18px);
  background:var(--navy);color:#fff;padding:11px 20px;border-radius:var(--zaobljenje);
  font-size:13px;opacity:0;pointer-events:none;z-index:60;max-width:min(560px,90vw);
  border-left:4px solid var(--zlatna);box-shadow:0 8px 24px rgba(18,43,67,.28);
  transition:opacity .2s,transform .2s}
.obavijest.vidljiva{opacity:1;transform:translate(-50%,0)}

/* --------------------------------------------------- uže ekrane */
@media (max-width:900px){
  .prijava{grid-template-columns:1fr}
  .prijava-znak{padding:26px;box-shadow:0 3px 14px rgba(18,43,67,.20)}
  .prijava-znak h1{font-size:25px}
  .prijava-znak-podnozje{display:none}
  .celija{height:46px;font-size:19px}
  .ljuska{grid-template-columns:1fr}
  .bocna{position:static;width:auto}
  .bocna nav{display:flex;flex-wrap:wrap;padding:8px}
  .stavka{width:auto;border-left:0;border-bottom:3px solid transparent;border-radius:var(--zaobljenje)}
  .stavka.aktivna{border-left:0;border-bottom-color:var(--zlatna)}
  .stavka-naslov{display:none}
  .radni-prostor{grid-column:1}
  .stranica{padding:16px}
  .popis-modula li{grid-template-columns:38px 1fr 16px;padding:14px 16px;gap:12px}
  .popis-modula li i{width:38px;height:38px;border-radius:10px}
  .popis-modula li i svg{width:18px;height:18px}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{.bocna,.traka,.obavijest{display:none!important}}

.verzija-znak{font-size:11px;color:rgba(255,255,255,.62);letter-spacing:.03em}
.nadogradnja-traka{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 16px}
.nadogradnja-traka > div{font-size:13px;line-height:1.5}
.nadogradnja-traka strong{display:block;font-size:14px;margin-bottom:2px}
.mala-napomena{font-size:12.5px;color:var(--blijedo,#64748b);margin-top:8px}
.nadogradnja-traka .dugme{white-space:nowrap;flex-shrink:0}

/* ======================================================= WEB VERZIJA */
.ucitavanje{min-height:100vh;display:grid;place-content:center;justify-items:center;gap:14px;
  background:linear-gradient(120deg,#17324d,#245d8f);color:#e6eef5;font-size:14px}
.ucitavanje img{width:64px;height:auto}
.ucitavanje .greska{max-width:460px}
button.stanje{border:0;cursor:pointer;font-family:inherit;background:#eef2f6;color:var(--tinta-blijeda)}
.stanje.upozorenje{background:var(--zlatna-polje);color:var(--zlatna-tamna)}
.bocna-ime{font-size:12px;color:#c7dbe9;margin:2px 0 6px;line-height:1.3}
.naziv-bk{display:block;font-size:14px;color:var(--tinta-blijeda);margin-top:4px}
.stanje-lista{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:12px 0 16px;font-size:13px}
.stanje-lista dt{color:var(--tinta-blijeda)}
.stanje-lista dd{margin:0;font-weight:600}
.uputstva-lista{margin:8px 0 0;padding-left:18px;line-height:1.9}
.uputstva-lista a{color:var(--plava)}
.dijalog{border:1px solid var(--obrub);border-radius:var(--zaobljenje-vece);padding:22px 24px;
  width:min(460px,calc(100vw - 32px));box-shadow:0 18px 50px rgba(23,50,77,.25);color:var(--tinta)}
.dijalog::backdrop{background:rgba(23,42,60,.45)}
.dijalog h3{margin:0 0 10px}
.dijalog .polje{margin-bottom:12px}
.dijalog .red-dugmadi{margin-top:16px;flex-wrap:wrap}
.ishod.greska{border-left-color:var(--crvena)}
.prijava-list .polje{display:block;margin-bottom:16px}
.prijava-list .polje input{font-size:15px}
.prijava-podnaslov{margin:0 0 22px;color:var(--tinta-blijeda);font-size:13px}
.prijava-list h2{margin:0 0 6px;font-size:22px}
.prijava-napomena{margin-top:22px;font-size:12px;color:var(--tinta-blijeda)}
#mapaBanner{border-color:#f1dfa4;border-left-color:var(--zlatna);background:var(--zlatna-polje);color:var(--tinta)}