/* iCAD portal v0.7 — izgled „C" (kao aplikacija). Uzor: dizajn-prijedlozi/c-aplikacija (prototip i snimke).
   Vlasnik: OKVIR — tokeni, okvir (bočna traka / donja traka), zajedničke sastavnice (ugovor §4b) i kupčev dio.
   3D i PDF su u preglednik.css, administracija u admin.css (obje učitava index.html poslije ove datoteke).
   Mobitel prvi; računalo od 1024 px (bočna traka 288 px). Dodirne površine ≥ 44 px, kontrast ≥ 4,5:1. */
@font-face{font-family:"Manrope";src:url("/fonts/manrope-latin-400-800.woff2") format("woff2");font-weight:400 800;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";src:url("/fonts/manrope-latin-ext-400-800.woff2") format("woff2");font-weight:400 800;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ================================================================== tokeni (imena iz prototipa) */
:root{
  --pozadina:#f1f4f6;--povrsina:#fff;--povrsina-2:#f6f8f9;--povrsina-3:#e9edf0;
  --crta:#e3e8ec;--crta-2:#d3dbe0;
  --tekst:#0f1a20;--tekst-2:#3f4d57;--tekst-3:#5b6973;
  --naglasak:#0b7c8c;--naglasak-jaki:#086674;--naglasak-svijetli:#5fc6d3;--naglasak-tint:#e1f1f3;--naglasak-tint-2:#c6e5ea;
  --jantar:#8a5300;--jantar-tint:#fdf0d5;
  --tamna:#0e1518;--tamna-2:#162026;
  --staklo:rgba(18,26,31,.66);
  --opasno:#b3261e;--opasno-tint:#fbe9e7;
  --r-s:12px;--r-m:16px;--r-l:20px;--r-xl:24px;
  --sjena-1:0 1px 2px rgba(15,26,32,.06);
  --sjena-2:0 1px 2px rgba(15,26,32,.04),0 8px 24px -12px rgba(15,26,32,.16);
  --sjena-3:0 2px 6px rgba(15,26,32,.06),0 22px 44px -18px rgba(15,26,32,.32);
  --pismo:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sirina-bocne:288px;--visina-tabova:72px;
  /* stara imena (v0.5–v0.6) — preglednik.css, admin.css i stilovi u kodu (uvoz.js: --upozorenje) ih smiju koristiti */
  --podloga:var(--pozadina);--crta-jaka:var(--crta-2);--tinta:var(--tekst);--tinta-2:var(--tekst-2);--tinta-3:var(--tekst-3);
  --oznaka:var(--naglasak);--oznaka-jaka:var(--naglasak-jaki);--oznaka-svijetla:var(--naglasak-svijetli);--oznaka-blijeda:var(--naglasak-tint);
  --novo:var(--opasno);--priprema:var(--jantar);--priprema-blijeda:var(--jantar-tint);--uspjeh:#1f7a4d;--upozorenje:var(--jantar);
  --traka:var(--tamna);--traka-2:var(--tamna-2);--traka-crta:#26323a;--traka-tekst:#aab6be;
  --display:var(--pismo);--ui:var(--pismo);--mono:var(--pismo);--oblo:var(--r-s);--rub:16px;--visina-trake:0px;--sirina:1400px;
}

/* ================================================================== temelj */
*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;accent-color:var(--naglasak);scroll-padding-top:16px}
body{margin:0;min-height:100vh;background:var(--pozadina);color:var(--tekst);font:500 16px/1.45 var(--pismo);
  font-feature-settings:"tnum" 1;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4,p{margin:0}
h1{font-size:32px;line-height:1.12;font-weight:800;letter-spacing:-.025em;overflow-wrap:anywhere}
h2{font-size:19px;line-height:1.25;font-weight:800;letter-spacing:-.01em}
h3{font-size:16px;line-height:1.3;font-weight:800}
:focus-visible{outline:3px solid var(--naglasak-svijetli);outline-offset:2px;border-radius:12px}
svg.ikona{flex:none;display:block}
.skriveno{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-variant-numeric:tabular-nums;letter-spacing:.01em}
.tiho{color:var(--tekst-2)}
.sitno{font-size:13px}
.greska{color:var(--opasno);font-weight:650}
.ucitavam{color:var(--tekst-3);font-weight:600;padding:24px 4px}
.bez-loma{white-space:nowrap}
.nadnaslov{display:block;font-size:14.5px;font-weight:700;color:var(--tekst-3);letter-spacing:0}
/* jedan čvor za oba zaslona; prikaz po širini (računalo ≥ 1024 px) */
@media (min-width:1024px){.na-mobitelu{display:none !important}}
@media (max-width:1023.98px){.na-racunalu{display:none !important}}
/* stara pravila (720 px) — administracija ih još koristi (izbornik ⋯, kartica u tablici) */
@media (max-width:720px){.skriveno-usko{display:none !important}}
@media (min-width:721px){.samo-mobitel{display:none !important}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}}

/* ================================================================== okvir */
.okvir{min-height:100vh}
.okvir-glavno{min-width:0;display:flex;flex-direction:column;min-height:100vh;overflow-x:clip}   /* osigurač: ništa ne gura stranicu u širinu */
#sadrzaj{flex:1;width:100%;min-width:0;padding:4px 16px 24px;outline:none}
#sadrzaj:focus,#sadrzaj:focus-visible{outline:none}
.okvir-bocna{display:none}
.dno{display:flex;justify-content:space-between;gap:6px 16px;flex-wrap:wrap;padding:12px 18px 18px;font-size:12.5px;font-weight:600;color:var(--tekst-3)}
.dno-desno{display:inline-flex;gap:14px;align-items:baseline}
.dno a{color:var(--tekst-3);text-decoration:underline;text-underline-offset:2px}
.dno a:hover{color:var(--tekst)}
.dno .dno-web{display:inline-flex;align-items:center;gap:4px;margin-left:2px;padding:3px 10px;border:1px solid var(--crta-2);border-radius:999px;color:var(--naglasak-jaki);text-decoration:none;font-weight:700}
.dno .dno-web:hover{background:var(--naglasak-tint);color:var(--naglasak-jaki)}
/* ništa ispod donje trake: prostor za nju na dnu */
body.ima-tabove .okvir-glavno{padding-bottom:calc(var(--visina-tabova) + 24px + env(safe-area-inset-bottom))}
.okvir.bez-okvira .okvir-glavno{min-height:100vh}
.okvir.bez-okvira .dno{max-width:none}

/* ---------------- donja traka s karticama (mobitel) — plutajuća, zaobljena */
.tabovi{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:40;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  height:var(--visina-tabova);padding:6px;border-radius:26px;background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 0 0 1px rgba(15,26,32,.06),0 16px 36px -14px rgba(15,26,32,.35)}
.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;border:0;background:none;padding:0;
  border-radius:20px;font-size:12.5px;font-weight:700;color:var(--tekst-3)}
.tab-ik{width:56px;height:32px;border-radius:16px;display:grid;place-items:center;transition:background .2s}
.tab-natpis{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tab[aria-current]{color:var(--naglasak-jaki)}
.tab[aria-current] .tab-ik{background:var(--naglasak-tint)}
.tab:active .tab-ik{background:var(--povrsina-3)}

/* ---------------- 3D i PDF preko cijelog zaslona: #sadrzaj.puno je flex stupac visine zaslona (preglednik.css ga puni) */
.okvir.puno #sadrzaj{padding:0}
#sadrzaj.puno{display:flex;flex-direction:column;position:relative;max-width:none;padding:0;min-height:100vh;min-height:100dvh}
.okvir.puno .dno{display:none}
body:not(.ima-tabove) .okvir.puno .okvir-glavno{padding-bottom:0}

/* ---------------- računalo: bočna traka 288 px */
@media (min-width:1024px){
  .okvir:not(.bez-okvira){display:grid;grid-template-columns:var(--sirina-bocne) minmax(0,1fr);align-items:start;
    background:linear-gradient(90deg,var(--povrsina) 0 calc(var(--sirina-bocne) - 1px),var(--crta) calc(var(--sirina-bocne) - 1px) var(--sirina-bocne),transparent var(--sirina-bocne))}
  .tabovi{display:none !important}
  body.ima-tabove .okvir-glavno{padding-bottom:0}
  #sadrzaj{max-width:1400px;padding:30px 44px 40px}
  .dno{padding:8px 44px 22px;max-width:1400px}
  h1{font-size:36px}
  .okvir-bocna{display:flex;flex-direction:column;position:sticky;top:0;height:100vh;padding:22px 16px 18px;background:var(--povrsina);
    border-right:1px solid var(--crta);overflow:auto;scrollbar-width:thin}
  .okvir.bez-okvira .okvir-bocna{display:none}
}
.okvir-logo{display:flex;align-items:center;gap:10px;padding:6px 10px 22px;color:var(--tekst)}
.okvir-logo .logo-puni{height:22px;width:auto}
.okvir-logo .logo-znak{display:none;width:34px;height:34px}
.okvir-oznaka{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--naglasak-jaki);padding-top:2px}
.okvir-nav{display:flex;flex-direction:column;gap:2px}
.nav-stavka{display:flex;align-items:center;gap:12px;min-height:46px;padding:0 12px;border-radius:14px;font-weight:700;font-size:15px;color:var(--tekst-2);
  transition:background .15s,color .15s}
.nav-stavka:hover{background:var(--povrsina-2);color:var(--tekst)}
.nav-stavka[aria-current]{background:var(--naglasak-tint);color:var(--naglasak-jaki)}
.nav-stavka .kratko{display:none}
.nav-stavka .broj{margin-left:auto;font-size:13px;font-weight:700;color:var(--tekst-3)}
/* 20. 10. („isti podatak jednom po ekranu"): broj uz OTVORENU stavku je već u naslovu stranice i čipovima, a broj novih
   paketa i redak ispod naziva otvorenog gradilišta („Nova Gradiška · 2026.", „C01 · 28. 9. 2026.", „1 u pripremi") u
   njegovu zaglavlju — u bočnoj traci se tada ne ponavljaju */
.nav-stavka[aria-current] .broj,.okvir-gr[aria-current] .okvir-novih,.okvir-gr[aria-current] small{display:none}
.okvir-naslov{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tekst-3);padding:22px 12px 8px}
.okvir-gradilista{display:flex;flex-direction:column;gap:2px}
.okvir-gr{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:16px;min-height:56px}
.okvir-gr:hover{background:var(--povrsina-2)}
.okvir-gr[aria-current]{background:var(--naglasak-tint)}
.okvir-gr .sl.mala{width:38px;height:38px;border-radius:11px}
.okvir-gr .sl.mala svg.glif{width:70%;height:70%}
.okvir-gr .t{min-width:0;flex:1}
.okvir-gr b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;font-size:14px;font-weight:700;line-height:1.25;overflow:hidden}
.okvir-gr small{display:block;font-size:12.5px;color:var(--tekst-3);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.okvir-gr[aria-current] b{color:var(--naglasak-jaki)}
.okvir-novih{flex:none;display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:var(--naglasak);color:#fff;
  font-size:12px;font-weight:800}
.okvir-korisnik{margin-top:auto;display:flex;align-items:center;gap:12px;padding:12px;border-radius:18px;background:var(--povrsina-2);border:1px solid var(--crta)}
.okvir-gradilista + .okvir-korisnik,.okvir-nav + .okvir-korisnik{margin-top:auto}
.okvir-bocna > .okvir-korisnik{margin-top:auto}
.okvir-korisnik .t{min-width:0;flex:1}
.okvir-korisnik b{display:block;font-size:14px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.okvir-korisnik small{display:block;font-size:12px;color:var(--tekst-3);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.okvir-korisnik .odjava{background:none;box-shadow:none;color:var(--tekst-2)}
.okvir-korisnik .odjava:hover{background:var(--povrsina-3);color:var(--tekst)}
.okvir-inacica{font-size:11.5px;color:var(--tekst-3);font-weight:600;padding:10px 12px 0}
/* razmak iznad kartice korisnika i kad nema popisa gradilišta */
.okvir-bocna .okvir-korisnik{margin-top:auto}
.okvir-bocna > :nth-last-child(2){margin-top:auto}

/* ---------------- računalo, 3D/PDF: uska tamna traka (84 px) */
@media (min-width:1024px){
  .okvir.puno:not(.bez-okvira){grid-template-columns:84px minmax(0,1fr);background:linear-gradient(90deg,#0b1114 0 84px,transparent 84px)}
  .okvir.puno .okvir-bocna{width:84px;padding:20px 0;align-items:center;gap:8px;background:#0b1114;border-right:1px solid rgba(255,255,255,.07);overflow:hidden}
  .okvir.puno .okvir-logo{padding:0 0 16px}
  .okvir.puno .okvir-logo .logo-puni,.okvir.puno .okvir-oznaka{display:none}
  .okvir.puno .okvir-logo .logo-znak{display:block;filter:invert(.82)}
  .okvir.puno .okvir-nav{gap:8px}
  .okvir.puno .nav-stavka{width:64px;min-height:60px;padding:0;flex-direction:column;justify-content:center;gap:3px;border-radius:16px;
    color:rgba(255,255,255,.72);font-size:11px;font-weight:750}
  .okvir.puno .nav-stavka:hover{background:rgba(255,255,255,.07);color:#fff}
  .okvir.puno .nav-stavka[aria-current]{background:rgba(95,198,211,.16);color:#8fdbe5}
  .okvir.puno .nav-stavka .dugo,.okvir.puno .nav-stavka .broj{display:none}
  .okvir.puno .nav-stavka .kratko{display:inline}
  .okvir.puno .okvir-naslov,.okvir.puno .okvir-gradilista,.okvir.puno .okvir-inacica,.okvir.puno .okvir-korisnik .t,.okvir.puno .okvir-korisnik .odjava{display:none}
  .okvir.puno .okvir-korisnik{margin-top:auto;padding:0;background:none;border:0}
  .okvir.puno .okvir-korisnik .avatar{width:40px;height:40px;font-size:13px}
  .okvir.puno #sadrzaj{max-width:none;height:100vh;height:100dvh;padding:0;overflow:hidden}
  /* PDF (s popisa i preko 3D-a) ostavlja usku traku vidljivu, kao 3D (sloj .prekrivac je u preglednik.css) */
  .okvir.puno:not(.bez-okvira) .prekrivac{left:84px}
}

/* ================================================================== sastavnice (ugovor §4b) */
/* ---------------- gumbi: .gumb (sekundarni, bijeli s obrubom), .primarni, .tamni, .svijetli (tint), .bijeli, .siva,
   .staklo, .opasno, .tekst, .malen, .velik, .ikona (okrugli 44 px) */
.gumb{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;height:48px;padding:0 18px;border:0;border-radius:15px;
  background:var(--povrsina);color:var(--tekst);box-shadow:0 0 0 1px var(--crta-2) inset,var(--sjena-1);font-weight:750;font-size:15.5px;line-height:1.2;
  white-space:nowrap;text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .2s,background .2s,color .2s}
.gumb:hover{background:var(--povrsina-2)}
.gumb:active{transform:scale(.98)}
.gumb.primarni,.gumb.oznaka{background:var(--naglasak);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 8px 18px -10px rgba(11,124,140,.8)}
.gumb.primarni:hover,.gumb.oznaka:hover{background:#0a7181}
.gumb.tamni,.gumb.pun{background:var(--tekst);color:#fff;box-shadow:none}
.gumb.tamni:hover,.gumb.pun:hover{background:#22313a}
.gumb.svijetli{background:var(--naglasak-tint);color:var(--naglasak-jaki);box-shadow:none}
.gumb.svijetli:hover{background:var(--naglasak-tint-2)}
.gumb.bijeli{background:#fff;color:var(--tekst);box-shadow:0 0 0 1px var(--crta) inset,var(--sjena-1)}
.gumb.velik.bijeli{box-shadow:0 8px 18px -10px rgba(0,0,0,.6)}
.gumb.siva{background:var(--povrsina-2);color:var(--tekst);box-shadow:0 0 0 1px var(--crta) inset}
.gumb.siva:hover{background:var(--povrsina-3)}
.gumb.staklo{background:rgba(255,255,255,.12);color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.16) inset}
.gumb.staklo:hover{background:rgba(255,255,255,.2)}
.gumb.opasno{color:var(--opasno);box-shadow:0 0 0 1px rgba(179,38,30,.35) inset}
.gumb.opasno:hover{background:var(--opasno-tint)}
.gumb.primarni.opasno{background:var(--opasno);color:#fff;box-shadow:none}
.gumb.tekst{background:none;box-shadow:none;color:var(--naglasak-jaki);padding:0 10px}
.gumb.tekst:hover{background:var(--naglasak-tint)}
.gumb.tekst.opasno{color:var(--opasno)}
.gumb.malen{min-height:38px;height:38px;padding:0 13px;border-radius:12px;font-size:14px;gap:6px}
.gumb.tekst.malen{padding:0 8px}
.gumb.velik{min-height:54px;height:54px;padding:0 22px;border-radius:17px;font-size:16.5px}
.gumb.ikona{width:44px;min-width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;gap:0;font-size:20px;position:relative}
.gumb.malen.ikona{width:38px;min-width:38px;height:38px;min-height:38px}
.gumb.puna-sirina{width:100%}
.gumb:disabled,.gumb[aria-disabled="true"]{opacity:.45;cursor:default;pointer-events:none;transform:none}
@media (pointer:coarse){.gumb.malen{min-height:44px;height:44px}.gumb.malen.ikona{width:44px;min-width:44px}}
.gumb .gumb-pod{margin-left:auto;font-size:13.5px;font-weight:650;opacity:.82}
/* „Preuzmi" (gumbPreuzmi): okrugli tint, riječ samo čitaču zaslona */
.gumb.preuzmi .preuzmi-rijec{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.znacka-tocka{position:absolute;top:9px;right:10px;width:9px;height:9px;border-radius:50%;background:var(--naglasak);box-shadow:0 0 0 2px #fff}

/* ---------------- avatar */
.avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;background:linear-gradient(140deg,#0e8a9b,#075c68);color:#fff;
  font-weight:800;font-size:15px;letter-spacing:.02em}
.avatar.tamni{background:linear-gradient(140deg,#2b3a44,#0f1a20)}
.avatar.velik{width:56px;height:56px;font-size:19px}
.avatar.mali{width:28px;height:28px;font-size:11px}
.avatar.siva{background:#e4e9ec;color:var(--tekst-2)}
.gumb-avatar{border:0;background:none;padding:0;border-radius:50%;display:inline-grid}

/* ---------------- čipovi i oznake */
.cip{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 12px;border-radius:999px;background:var(--povrsina);color:var(--tekst-2);
  box-shadow:0 0 0 1px var(--crta-2) inset;font-size:13px;font-weight:750;line-height:1.2;white-space:nowrap;max-width:100%;min-width:0}
/* dugi čip („Važeće: P01 · Za odobrenje — Faza 1 · Višlji krov…") se skrati s „…" (puni tekst u title), ne širi stranicu */
.cip-tekst{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.cip.naglasak{background:var(--naglasak-tint);color:var(--naglasak-jaki);box-shadow:none}
.cip.puna{background:var(--naglasak);color:#fff;box-shadow:none}
.cip.jantar{background:var(--jantar-tint);color:var(--jantar);box-shadow:none}
.cip.siva{background:var(--povrsina-3);color:var(--tekst-2);box-shadow:none}
.cip.staklo{background:rgba(255,255,255,.14);color:#fff;box-shadow:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.cip.bijeli{background:rgba(255,255,255,.82);color:var(--tekst-2);box-shadow:none}
.cip.mali{min-height:24px;padding:0 9px;font-size:12px;gap:5px}
.cip .tocka,.tocka{display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.cip.puna .tocka{background:#fff}
/* čip kao filtar (administracija): 46 px, odabran = taman */
button.cip{min-height:46px;padding:0 15px 0 8px;font-size:14.5px;gap:8px;cursor:pointer}
button.cip:not(:has(.avatar)){padding-left:16px}
button.cip .br{font-size:12.5px;color:var(--tekst-3);font-weight:800}
button.cip[aria-pressed="true"]{background:var(--tekst);color:#fff;box-shadow:none}
button.cip[aria-pressed="true"] .br,button.cip[aria-pressed="true"] svg{color:rgba(255,255,255,.7)}
.kod{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:8px;background:var(--povrsina-3);color:var(--tekst);font-size:12.5px;font-weight:800;
  letter-spacing:.02em;white-space:nowrap;flex:none}
.kod.tint{background:var(--naglasak-tint);color:var(--naglasak-jaki)}
.kod.jantar{background:var(--jantar-tint);color:var(--jantar)}

/* ---------------- stanje: točka + riječ (statusPaketa, status) */
.status{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:750;line-height:1.3;color:var(--tekst-2);white-space:nowrap}
.status::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:currentColor}
.status.vazeca,.status.aktivan{color:var(--naglasak-jaki)}
.status.vazeca::before,.status.aktivan::before{background:var(--naglasak)}
.status.priprema{color:var(--jantar)}
.status.stara,.status.neaktivan{color:var(--tekst-3);font-weight:650}
.status.stara::before,.status.neaktivan::before{width:7px;height:7px;background:none;border:1.5px solid currentColor}
/* NOVO = „još niste otvorili": teal točka i riječ (kao „• Novo" u prototipu) — ne crveno, ne umjesto stanja */
.status.novo,.novo-tocka{display:inline-flex;align-items:center;gap:6px;color:var(--naglasak-jaki);font-size:12.5px;font-weight:800;white-space:nowrap}
.status.novo::before,.novo-tocka::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--naglasak);flex:none;border:0}
.status + .status{margin-left:10px}
a.status{text-decoration:none}
a.status:hover{text-decoration:underline}

/* ---------------- tražilica (polje s ikonom) */
.trazilica{display:flex;align-items:center;gap:10px;min-height:54px;padding:0 8px 0 16px;border-radius:18px;background:var(--povrsina);color:var(--tekst-3);
  box-shadow:0 0 0 1px var(--crta) inset,var(--sjena-1);font-weight:600;font-size:15.5px;cursor:text}
.trazilica:focus-within{box-shadow:0 0 0 2px var(--naglasak) inset,0 0 0 4px rgba(11,124,140,.14)}
.trazilica input,.trazilica input[type=search]{flex:1;min-width:0;height:auto;min-height:44px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;
  color:var(--tekst);font-weight:650;font-size:16px;outline:none}
.trazilica input::placeholder{color:var(--tekst-3);font-weight:600;opacity:1}
.trazilica input::-webkit-search-cancel-button{cursor:pointer}
.trazilica kbd{font:inherit;font-size:12px;font-weight:800;color:var(--tekst-3);background:var(--povrsina-2);border:1px solid var(--crta);border-radius:8px;padding:3px 8px;flex:none}
.trazilica .kraj{flex:none;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 13px;border:0;border-radius:12px;background:var(--naglasak-tint);
  color:var(--naglasak-jaki);font-size:13.5px;font-weight:800}
.trazilica .kraj:hover{background:var(--naglasak-tint-2)}
.trazilica .kraj:disabled{opacity:.6}

/* ---------------- obrasci */
.polje{display:flex;flex-direction:column;gap:7px;margin-bottom:16px;min-width:0}
.polje > label,.polje > .natpis{font-size:13.5px;font-weight:750;color:var(--tekst-2)}
.polje .pomoc{font-size:13px;color:var(--tekst-3);font-weight:600}
.polja{display:grid;grid-template-columns:repeat(auto-fit,minmax(max(200px,calc((100% - 32px) / 3)),1fr));gap:0 16px}
.polja > .puno,.polja > .polje.puno{grid-column:1 / -1}
input:not([type]),input[type=text],input[type=email],input[type=password],input[type=search],input[type=number],input[type=date],input[type=tel],input[type=url],select,textarea{
  width:100%;height:48px;padding:0 14px;border:1px solid var(--crta-2);border-radius:14px;background:var(--povrsina);color:var(--tekst);
  font-size:16px;font-weight:600;transition:border-color .15s,box-shadow .15s}
textarea{height:auto;min-height:96px;padding:12px 14px;line-height:1.45;resize:vertical}
select{appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;
  background:var(--povrsina) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%235b6973' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center}
/* v0.8 (primjedba 7): padajući izbornik SVUGDJE (kupac, administracija, dijalozi, plan uvoza, dnevnik) — tekst odmaknut od
   lijevog ruba kao u polju za upis, strelica desno sa zrakom. Pojedina pravila admin.css (.adm .polje select, .plan-tablica
   select, .tihi-izbor…) stavljala su lijevo 8–12 px, pa je tekst izgledao prilijepljen uz rub. select:is(select,#_) ima
   težinu id-a (#_ ne postoji), pa ovo vrijedi i ispred njih; visinu, obrub i pozadinu i dalje određuje mjesto. */
select:is(select,#_){padding-left:16px;padding-right:42px;background-position:right 15px center;text-overflow:ellipsis}
/* niski izbornici u tablicama (≤ 38 px: plan uvoza, vrsta datoteke) — manje, ali ne uz rub */
.plan-tablica select:is(select,#_),select.tihi-izbor:is(select,#_){padding-left:12px;padding-right:32px;background-position:right 11px center}
/* izbornik u „piluli" s ikonom (Dnevnik: klijent, radnja) je sastavnica administracije — pravilo je u admin.css */
input:hover,select:hover,textarea:hover{border-color:var(--tekst-3)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--naglasak);box-shadow:0 0 0 3px rgba(11,124,140,.18)}
input::placeholder,textarea::placeholder{color:#7d8992}
input[type=checkbox],input[type=radio]{width:20px;height:20px;margin:0;flex:none;cursor:pointer}
.red{display:flex;gap:8px 12px;flex-wrap:wrap;align-items:center}
.red > .rasti{flex:1;min-width:180px}

/* ---------------- sličice (gradilište, model) i pločice ikona */
.sl{display:grid;place-items:center;flex:none;border-radius:16px;overflow:hidden;position:relative;background:#121b20}
.sl img{width:100%;height:100%;object-fit:cover;display:block}
.sl svg.glif{width:62%;height:62%}
.sl.plava{background:#e3eef6;color:#2a5a80}
.sl.zelena{background:#e4f2e7;color:#2d6a3e}
.sl.pijesak{background:#f7eedf;color:#85570f}
.sl.ljubicasta{background:#eee9f7;color:#5a3d8c}
.sl.tirkiz{background:#e0f0f2;color:#1d6670}
.sl.opeka{background:#f5e9e5;color:#8a4636}
.sl.tamna{background:radial-gradient(120% 90% at 70% 20%,#1d2b32 0,#0e1518 70%);color:rgba(255,255,255,.62)}
.ik-plocica{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;flex:none;background:var(--naglasak-tint);color:var(--naglasak-jaki);position:relative}
.ik-plocica.siva{background:var(--povrsina-3);color:var(--tekst-2)}
.ik-plocica.tamna{background:var(--tamna);color:#fff}
.ik-plocica.jantar{background:var(--jantar-tint);color:var(--jantar)}
.ik-plocica.tirkiz{background:#e0f0f2;color:#1d6670}
.ik-plocica.mapa{background:var(--naglasak-tint);color:var(--naglasak-jaki)}
.ik-plocica em{position:absolute;bottom:7px;font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.06em}
.ik-plocica.pdf svg{margin-top:-9px}

/* ---------------- popis (iOS „inset grouped") i redak */
.popis{background:var(--povrsina);border-radius:22px;box-shadow:var(--sjena-2);overflow:hidden}
.popis + .popis{margin-top:14px}
.popis-redak{display:flex;align-items:center;gap:10px;padding:0 14px 0 0;min-height:76px;position:relative}
.popis-redak + .popis-redak::before,.popis-redak + .popis-redak::after{content:none}
.popis > .popis-redak + .popis-redak::before,.mape-popis > .popis-redak + .popis-redak::before,.popis > * > .popis-redak + .popis-redak::before{
  content:"";position:absolute;left:84px;right:16px;top:0;height:1px;background:var(--crta)}
.popis-redak:has(> a.popis-veza:hover,> button.popis-veza:hover){background:var(--povrsina-2)}
.popis-veza{display:flex;align-items:center;gap:14px;flex:1;min-width:0;align-self:stretch;padding:12px 4px 12px 14px;border:0;background:none;
  text-align:left;color:inherit;font:inherit;border-radius:0}
.popis-veza:focus-visible{outline-offset:-3px}
.popis-redak > .popis-veza:only-child{padding-right:0}
.popis-tekst{flex:1;min-width:0;display:flex;flex-direction:column}
.popis-tekst .naslov{display:block;font-size:16px;font-weight:750;line-height:1.3;color:var(--tekst);overflow-wrap:anywhere}
.popis-tekst .pod{display:block;font-size:13.5px;color:var(--tekst-3);font-weight:600;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.popis-tekst .oznake{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}
.popis-radnje{display:flex;align-items:center;gap:8px;flex:none}
/* redak s radnjama nema strelicu (radnja desno je dovoljna; naziv dobiva mjesto) */
.popis-redak:has(> .popis-radnje) > .popis-veza > svg.chev{display:none}
.popis-redak .sl{width:56px;height:56px}
.popis-redak .sl.tamna svg{width:26px;height:26px}
svg.chev{color:#9aa6ae;flex:none}
.popis-redak.stara .popis-tekst .naslov{color:var(--tekst-2)}
.popis-podnozje{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:56px;padding:8px 16px;border:0;border-top:1px solid var(--crta);
  background:none;font-size:14.5px;font-weight:750;color:var(--naglasak-jaki);text-align:center}
.popis-podnozje:hover{background:var(--povrsina-2)}
div.skupina-naslov{display:flex;align-items:center;gap:8px;padding:16px 16px 6px;font-size:12.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--tekst-3);background:var(--povrsina-2);border-top:1px solid var(--crta)}
.popis > div.skupina-naslov:first-child,.povijest > div.skupina-naslov:first-child{border-top:0}
div.skupina-naslov + .popis-redak::before{content:none !important}

/* ---------------- segmentirani prekidač */
.segment{display:flex;gap:2px;padding:4px;border-radius:18px;background:#e3e8eb}
.segment button{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;height:46px;padding:0 8px;border:0;border-radius:14px;background:none;
  font-weight:750;font-size:15px;color:var(--tekst-2);white-space:nowrap;transition:background .2s,box-shadow .2s,color .2s}
.segment button:hover{color:var(--tekst)}
.segment button[aria-pressed="true"]{background:#fff;color:var(--tekst);box-shadow:0 1px 2px rgba(15,26,32,.1),0 3px 10px -4px rgba(15,26,32,.18)}
.segment button svg{display:none}
.segment .segment-natpis{overflow:hidden;text-overflow:ellipsis}
.segment button .br{font-size:12px;font-weight:800;color:var(--naglasak-jaki);background:var(--naglasak-tint);border-radius:999px;padding:1px 7px}
@media (min-width:1024px){
  .segment button svg{display:block}
  .segment .seg-povijest{display:none}
}
/* do 380 px (iPhone SE/mini 375 px): sitnije, da četiri kartice („Datoteke") stanu bez „…" */
@media (max-width:380px){.segment button{font-size:14px;padding:0 4px}}

/* ---------------- velika pločica (3D model / Nacrti) */
.plocica{position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:206px;border:0;border-radius:24px;overflow:hidden;padding:14px;
  box-shadow:var(--sjena-2);text-align:left;font:inherit;transition:transform .15s,box-shadow .2s;isolation:isolate}
.plocica:hover{transform:translateY(-2px);box-shadow:var(--sjena-3)}
.plocica:active{transform:scale(.985)}
/* slika ISPOD zatamnjenja (::before, z-index -1): s istim z-indexom slika je kao kasniji element bila iznad njega */
.plocica-slika{position:absolute;z-index:-2}
.plocica.tamna,.plocica-3d{background:var(--tamna);color:#fff}
.plocica-3d .plocica-slika{inset:0;background:#121b20}
.plocica-3d .plocica-slika img{width:100%;height:100%;object-fit:cover;object-position:40% 50%;display:block}
/* dorada v0.7: jače zatamnjenje odozdo — stupovi modela više ne prolaze kroz podnaslov (kontrast bijelog teksta) */
.plocica-3d::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(14,21,24,.92) 0,rgba(14,21,24,.55) 42%,rgba(14,21,24,0) 68%)}
.plocica-3d .plocica-slika.bez-slike{display:grid;place-items:center;align-content:start;padding-top:22%;
  background:radial-gradient(90% 70% at 70% 15%,#21323a 0,#0e1518 72%);color:rgba(95,198,211,.4)}
.plocica-nacrti{background:var(--povrsina);color:var(--tekst)}
.plocica-nacrti .plocica-slika{left:10px;right:10px;top:10px;height:98px;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--crta) inset}
/* sličica je izrez crteža u omjeru pločice (slike.js izrezCrteza) — sredina, ne gornji lijevi kut cijelog lista */
.plocica-nacrti .plocica-slika img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;display:block}
.plocica-nacrti .plocica-slika::after{content:"";position:absolute;inset:0;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,0) 50%,#fff 100%)}
.plocica-nacrti .plocica-slika.bez-slike{display:grid;place-items:center;color:var(--crta-2);
  background:repeating-linear-gradient(0deg,transparent 0 13px,#eef2f4 13px 14px),repeating-linear-gradient(90deg,transparent 0 13px,#eef2f4 13px 14px),#fff}
.plocica-ik{position:absolute;left:14px;top:14px;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.14) inset}
.plocica-strelica{position:absolute;right:12px;top:12px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center}
.plocica-3d .plocica-strelica{background:var(--naglasak);color:#fff}
.plocica-nacrti .plocica-strelica{background:var(--tekst);color:#fff}
.plocica-tekst{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.plocica-naslov{font-size:21px;font-weight:800;letter-spacing:-.015em;line-height:1.15}
.plocica-pod{font-size:13.5px;font-weight:650;margin-top:4px;opacity:.8}
.plocica-nacrti .plocica-pod{color:var(--tekst-3);opacity:1}
/* tekst preko sličice modela (svijetli stupovi, čelik): sjena slova i puna bjelina podnaslova */
.plocica-3d .plocica-tekst{text-shadow:0 1px 3px rgba(0,0,0,.6)}
.plocica-3d .plocica-pod{opacity:.92}
.plocica-gumb{display:none !important}
@media (min-width:1024px){
  .plocica{height:288px;padding:22px;border-radius:26px}
  .plocica-ik{left:20px;top:20px}
  .plocica-naslov{font-size:26px}
  .plocica-pod{font-size:14.5px}
  .plocica-strelica{display:none}
  .plocica-gumb{display:inline-flex !important;margin-top:16px;pointer-events:none}
  .plocica-nacrti .plocica-slika{height:132px;left:12px;right:12px;top:12px}
  /* model bez sličice: znak desno u sredini, da ne prelazi preko teksta (i kad je pločica sama, široka) */
  .plocica-3d .plocica-slika.bez-slike{place-items:center end;align-content:normal;padding:0 9% 0 0}
  .plocica-3d .plocica-slika.bez-slike svg{width:96px;height:96px}
  /* na računalu je tekst lijevo dolje preko slike: zatamnjenje odozdo (jače) i s lijeva */
  .plocica-3d::before{background:linear-gradient(to top,rgba(14,21,24,.92) 0,rgba(14,21,24,.6) 42%,rgba(14,21,24,0) 68%),
    linear-gradient(90deg,rgba(14,21,24,.55) 0%,rgba(14,21,24,.2) 40%,rgba(14,21,24,0) 65%)}
}

/* ---------------- kartica, prazno, odjeljak */
.kartica{background:var(--povrsina);border-radius:24px;box-shadow:var(--sjena-2);overflow:hidden}
.kartica.tamna{background:var(--tamna);color:#fff}
.kartica-glava{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 18px 4px 20px}
.kartica-glava h3{font-size:18px}
.kartica-glava-desno{font-size:13px;color:var(--tekst-3);font-weight:700;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.prazno{display:flex;flex-direction:column;align-items:center;gap:10px;padding:32px 24px;text-align:center;color:var(--tekst-2);font-weight:600;
  background:var(--povrsina);border-radius:22px;box-shadow:var(--sjena-2)}
.prazno > svg{color:var(--tekst-3)}
.prazno > p{margin:0}
.prazno-sredina{margin:24px auto 0;max-width:560px;padding:40px 24px}
.odjeljak-red{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:28px 2px 12px}
.odjeljak{margin:0;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tekst-3);line-height:1.3}
.odjeljak-desno{font-size:14px;font-weight:700;color:var(--tekst-3)}
.odjeljak-veza{display:inline-flex;align-items:center;gap:4px;min-height:44px;font-size:14px;font-weight:750;color:var(--naglasak-jaki)}
.odjeljak-veza:hover{text-decoration:underline}

/* ---------------- ladica (bočni list s desna / list s dna) */
dialog.ladica{position:fixed;margin:0;padding:0;border:0;background:var(--povrsina);color:var(--tekst);overflow:hidden;
  inset:auto 0 0 0;width:100%;max-width:100%;max-height:88vh;max-height:88dvh;border-radius:28px 28px 0 0;
  box-shadow:0 -12px 40px -10px rgba(0,0,0,.45);transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .2s,overlay .28s allow-discrete,display .28s allow-discrete}
dialog.ladica[open]{display:flex;flex-direction:column}
@starting-style{dialog.ladica[open]{transform:translateY(40px);opacity:0}}
dialog.ladica::backdrop{background:rgba(14,21,24,.42);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.ladica-hvataljka{flex:none;width:42px;height:5px;border-radius:3px;background:#d0d7dc;margin:10px auto 2px}
.ladica-glava{flex:none;display:flex;align-items:flex-start;gap:12px;padding:10px 12px 10px 20px}
.ladica-naslovi{flex:1;min-width:0;padding-top:6px}
.ladica-glava h2{font-size:20px;line-height:1.2;overflow-wrap:anywhere}
.ladica-pod{margin-top:6px;font-size:13.5px;color:var(--tekst-3);font-weight:650}
.ladica-pod .status{font-size:12.5px}
.ladica-zatvori{background:var(--povrsina-2) !important;box-shadow:none !important}
.ladica-tijelo{flex:1;min-height:0;overflow:auto;padding:6px 20px 20px;overscroll-behavior:contain}
.ladica-tijelo > * + *{margin-top:14px}
.ladica-tijelo .popis{box-shadow:0 0 0 1px var(--crta)}
.ladica-radnje{flex:none;display:flex;gap:10px;padding:12px 20px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--crta);background:var(--povrsina)}
.ladica-radnje > .gumb{flex:1}
@media (min-width:1024px){
  dialog.ladica{inset:0 0 0 auto;width:min(500px,100vw);height:100vh;height:100dvh;max-height:100dvh;border-radius:28px 0 0 28px;box-shadow:-20px 0 60px -20px rgba(0,0,0,.4)}
  @starting-style{dialog.ladica[open]{transform:translateX(60px);opacity:0}}
  .ladica-hvataljka{display:none}
  .ladica-glava{padding:20px 16px 12px 24px}
  .ladica-glava h2{font-size:22px}
  .ladica-tijelo{padding:6px 24px 24px}
  .ladica-radnje{padding:14px 24px 18px}
}

/* ---------------- mobilna glava stranice */
.mob-glava{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:68px;padding-top:6px;margin:0 -4px}
.mob-logo{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:var(--tekst)}
.mob-logo img{height:22px;width:auto}
.mob-glava-desno{display:flex;gap:10px;align-items:center}
.natrag{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 14px 0 6px;border-radius:999px;font-weight:750;color:var(--naglasak-jaki);font-size:16px}
.natrag:hover{background:var(--naglasak-tint)}

/* ---------------- obavijest */
#obavijest,.obavijest{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:100;display:flex;flex-direction:column;
  gap:8px;width:min(calc(100vw - 32px),460px);pointer-events:none}
body.ima-tabove #obavijest{bottom:calc(var(--visina-tabova) + 24px + env(safe-area-inset-bottom))}
@media (min-width:1024px){body.ima-tabove #obavijest{bottom:24px}}
#obavijest > div{display:flex;align-items:center;gap:10px;background:var(--tekst);color:#fff;padding:14px 18px;border-radius:18px;font-size:14.5px;font-weight:650;
  box-shadow:0 18px 40px -14px rgba(0,0,0,.5);pointer-events:auto}
#obavijest > div::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--naglasak-svijetli)}
#obavijest > div.greska{background:#3a1114;color:#ffe3e1}
#obavijest > div.greska::before{background:#ff8a80}
/* poruke dok je otvoren dijalog ili ladica (ui.js obavijest): u samom dijalogu (top layer), pri vrhu zaslona — ne preko gumba */
dialog > .obavijest-dijaloga{top:calc(16px + env(safe-area-inset-top));bottom:auto;z-index:5}
.obavijest-dijaloga > div{display:flex;align-items:center;gap:10px;background:var(--tekst);color:#fff;padding:14px 18px;border-radius:18px;font-size:14.5px;
  font-weight:650;box-shadow:0 18px 40px -14px rgba(0,0,0,.5);pointer-events:auto}
.obavijest-dijaloga > div::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--naglasak-svijetli)}
.obavijest-dijaloga > div.greska{background:#3a1114;color:#ffe3e1}
.obavijest-dijaloga > div.greska::before{background:#ff8a80}
/* greška obrasca i u dijalogu, ispod polja (dijalogObrasca) */
.obrazac-greska{margin:0 0 8px;padding:10px 12px;border-radius:12px;background:var(--opasno-tint);font-size:14px}

/* ================================================================== stari izvozi ui.js (restilizirani) */
/* ---------------- zaglavlje stranice, mrvice, alatna traka */
.zaglavlje-stranice{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;margin:8px 0 22px}
.zaglavlje-stranice > *{grid-column:1}
.zaglavlje-stranice > .radnje{grid-column:2;grid-row:1;align-self:end;display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.zaglavlje-stranice:has(> .put) > .radnje,.zaglavlje-stranice:has(> .nadnaslov) > .radnje{grid-row:2}
.zaglavlje-stranice > .cinjenice,.zaglavlje-stranice > .alatna-traka{grid-column:1 / -1}
.zaglavlje-stranice > .nadnaslov{margin-bottom:4px}
.zaglavlje-stranice > .opis-projekta,.opis-projekta{grid-column:1 / -1;margin:12px 0 0;max-width:80ch;font-size:15px;color:var(--tekst-2);font-weight:600}
.put{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin-bottom:12px;font-size:14px;font-weight:700;color:var(--tekst-3);min-width:0}
.put a,.put button{color:var(--naglasak-jaki);background:none;border:0;padding:0;font:inherit}
.put a:hover,.put button:hover{text-decoration:underline}
.put .razdjel{display:inline-flex;color:var(--tekst-3)}
.put [aria-current]{color:var(--tekst-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.oznaka-klijenta{margin-top:6px;font-weight:800;font-size:15px;color:var(--naglasak-jaki)}
.alatna-traka{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-bottom:14px}
.alatna-traka input[type=search],.alatna-traka input[type=text]{flex:1 1 220px;max-width:380px}
.alatna-traka select{width:auto;max-width:280px}
.alatna-traka label{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14.5px;font-weight:650;color:var(--tekst-2);cursor:pointer;white-space:nowrap}
.alatna-traka .razmak{flex:1}
.alatna-traka .status{white-space:normal}
@media (max-width:720px){
  .zaglavlje-stranice{grid-template-columns:minmax(0,1fr)}
  .zaglavlje-stranice > .radnje,.zaglavlje-stranice:has(> .put) > .radnje,.zaglavlje-stranice:has(> .nadnaslov) > .radnje{
    grid-column:1;grid-row:auto;order:10;justify-content:flex-start;margin-top:16px}
  .alatna-traka input[type=search],.alatna-traka input[type=text]{max-width:none}
}

/* ---------------- činjenice */
dl.cinjenice{display:flex;flex-wrap:wrap;gap:1px;margin:16px 0 0;padding:0;background:var(--crta);border-radius:20px;overflow:hidden;box-shadow:0 0 0 1px var(--crta)}
dl.cinjenice > div{flex:1 1 168px;min-width:0;padding:12px 16px 13px;background:var(--povrsina)}
dl.cinjenice dt{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--tekst-3);margin-bottom:3px}
dl.cinjenice dd{margin:0;font-size:15px;font-weight:750;color:var(--tekst);overflow-wrap:break-word}
dl.cinjenice dd.sporedno{font-weight:600;color:var(--tekst-2)}
dl.cinjenice dd a{color:var(--naglasak-jaki)}
dl.cinjenice dd a:hover{text-decoration:underline}
dl.cinjenice.u-retku{display:flex;flex-wrap:wrap;gap:4px 14px;background:none;box-shadow:none;border-radius:0;margin-top:10px}
dl.cinjenice.u-retku > div{flex:none;padding:0;background:none}
dl.cinjenice.u-retku dt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
dl.cinjenice.u-retku dd{font-size:14.5px;font-weight:650;color:var(--tekst-2)}

/* ---------------- ploča */
.ploca{background:var(--povrsina);border-radius:22px;box-shadow:var(--sjena-2)}
.ploca + .ploca,.ploca + .omot-tablice,.omot-tablice + .ploca{margin-top:16px}
.ploca-glava{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;min-height:60px;padding:12px 20px;border-bottom:1px solid var(--crta)}
.ploca-glava h2{font-size:17px}
.ploca-glava .radnje{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ploca-tijelo{padding:16px 20px}
.ploca-napomena{margin:12px 20px 0;font-size:14px;color:var(--tekst-2);font-weight:600}
.ploca > .omot-tablice,.ploca > .paketi{box-shadow:none;border-radius:0 0 22px 22px}
.ploca .prazno{box-shadow:none;background:none}
.brojac{flex:none;font-size:13px;font-weight:700;color:var(--tekst-3);font-variant-numeric:tabular-nums}
@media (max-width:720px){.ploca-glava{padding:12px 16px}.ploca-tijelo{padding:16px}}

/* ---------------- tablica (administracija; ≤ 720 px redak postaje kartica) */
.omot-tablice{background:var(--povrsina);border-radius:22px;box-shadow:var(--sjena-2);overflow-x:auto}
table.tablica{width:100%;border-collapse:collapse;font-size:14.5px;background:var(--povrsina)}
.tablica thead th{text-align:left;font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--tekst-3);white-space:nowrap;
  padding:12px 14px;background:var(--povrsina-2);border-bottom:1px solid var(--crta)}
.tablica tbody tr{height:60px}
.tablica th.glavni{width:34%}
.tablica td{padding:10px 14px;border-bottom:1px solid var(--crta);vertical-align:middle}
.tablica tbody tr:last-child td{border-bottom:0}
.tablica th:first-child,.tablica td:first-child{padding-left:18px}
.tablica th:last-child,.tablica td:last-child{padding-right:18px}
.tablica th.broj,.tablica td.broj{text-align:right;font-variant-numeric:tabular-nums}
.tablica td.mono{white-space:nowrap}
.tablica td.datum,.tablica th.datum{white-space:nowrap;font-variant-numeric:tabular-nums}
.tablica td.datum{font-size:14px;color:var(--tekst-2);font-weight:600}
.tablica td.sporedno{color:var(--tekst-2)}
.tablica td.jedan-red,.tablica th.jedan-red{white-space:nowrap}
.tablica td.uzak,.tablica th.uzak{width:1%;white-space:nowrap}
.tablica th.kut,.tablica td.kut{padding-left:24px}
.tablica tr.skupina th{padding:18px 18px 8px;background:var(--povrsina-2);text-align:left;border-bottom:1px solid var(--crta)}
span.skupina-naslov{font-size:13px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--tekst-2)}
.skupina-opis{margin-left:10px;font-size:13px;font-weight:700;color:var(--tekst-3)}
.tablica .naslov-retka{display:block;font-weight:750;font-size:15.5px;color:var(--tekst);line-height:1.3;overflow-wrap:anywhere}
.tablica .podnaslov,.podnaslov{display:block;margin-top:2px;font-size:13.5px;color:var(--tekst-3);font-weight:600;line-height:1.35}
.tablica td.izvodjac,span.izvodjac{color:var(--tekst);font-weight:700}
.podnaslov b{color:var(--tekst);font-weight:750}
.tablica a.veza-retka{color:inherit;display:block}
.tablica tr.redak[data-href]{cursor:pointer;transition:background .12s}
.tablica tr.redak[data-href]:hover{background:var(--povrsina-2)}
.tablica tr.redak[data-href]:hover .naslov-retka{color:var(--naglasak-jaki)}
.tablica tr.arhiviran td{color:var(--tekst-3)}
.tablica tr.arhiviran .naslov-retka{color:var(--tekst-2)}
.oznaka-3d:not(.gumb){display:inline-flex;align-items:center;height:22px;padding:0 7px;border-radius:7px;background:var(--naglasak-tint);color:var(--naglasak-jaki);
  font-size:11.5px;font-weight:800;letter-spacing:.03em}
@media (max-width:720px){
  .omot-tablice:has(> table.tablica:not(.siroka)){overflow:visible}
  table.tablica:not(.siroka),table.tablica:not(.siroka) tbody,table.tablica:not(.siroka) tr,table.tablica:not(.siroka) td{display:block;width:auto}
  table.tablica:not(.siroka) thead{display:none}
  table.tablica:not(.siroka) tbody tr{position:relative;height:auto;padding:14px 16px;border-bottom:1px solid var(--crta)}
  table.tablica:not(.siroka) tbody tr:last-child{border-bottom:0}
  table.tablica:not(.siroka) tr.skupina th{display:block}
  table.tablica:not(.siroka) td{display:flex;align-items:baseline;gap:12px;padding:3px 0;border:0;text-align:left;min-width:0}
  table.tablica:not(.siroka) td::before{content:attr(data-naslov);flex:none;width:104px;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--tekst-3)}
  table.tablica:not(.siroka) td[data-naslov=""]::before,table.tablica:not(.siroka) td:first-child::before{display:none}
  table.tablica:not(.siroka) td:first-child{display:block;padding:0 0 6px}
  table.tablica:not(.siroka) td:empty{display:none}
  table.tablica:not(.siroka) td.broj{justify-content:flex-start}
  table.tablica:not(.siroka) td.kut{position:absolute;top:14px;right:16px;padding:0}
  table.tablica:not(.siroka) tr:has(td.kut:not(:empty)) td:first-child{padding-right:112px}
}

/* ---------------- kartice (unutar paketa, administracija) */
.kartice{display:flex;gap:2px;margin:0 0 16px;padding:4px;border-radius:16px;background:#e3e8eb;overflow-x:auto;scrollbar-width:none;width:max-content;max-width:100%}
.kartice::-webkit-scrollbar{display:none}
.kartice [role="tab"]{flex:none;min-height:40px;padding:0 14px;border:0;border-radius:12px;background:none;color:var(--tekst-2);font-weight:750;font-size:14px;white-space:nowrap}
.kartice [role="tab"][aria-selected="true"]{background:#fff;color:var(--tekst);box-shadow:0 1px 2px rgba(15,26,32,.1)}
.kartica-sadrzaj{min-width:0}

/* ---------------- dijalog (dijalog, potvrdi) */
dialog.dijalog{width:min(580px,calc(100vw - 24px));max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:26px;background:var(--povrsina);color:var(--tekst);
  box-shadow:0 30px 70px -20px rgba(15,26,32,.5);overflow:hidden}
dialog.dijalog[open]{display:flex;flex-direction:column}
dialog.dijalog::backdrop{background:rgba(14,21,24,.45);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
dialog.dijalog.siroki{width:min(900px,calc(100vw - 24px))}
.dijalog-okvir{display:flex;flex-direction:column;min-height:0;flex:1}
.dijalog-glava{display:flex;align-items:center;gap:12px;padding:18px 14px 12px 24px}
.dijalog-glava h2{flex:1;font-size:20px}
.dijalog-tijelo{padding:8px 24px 12px;overflow:auto;min-height:0}
.dijalog-radnje{display:flex;justify-content:flex-end;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 24px 18px;border-top:1px solid var(--crta)}
.dijalog .zatvori-x{display:grid;place-items:center;border:0;background:var(--povrsina-2);width:44px;height:44px;border-radius:50%;color:var(--tekst-2);cursor:pointer}
.dijalog .zatvori-x:hover{background:var(--povrsina-3);color:var(--tekst)}
.potvrda-tekst{margin:0 0 10px;color:var(--tekst-2);font-weight:600}
@media (max-width:560px){
  .dijalog-glava{padding:14px 12px 10px 18px}
  .dijalog-tijelo{padding:6px 18px 10px}
  .dijalog-radnje{padding:12px 18px 16px}
  .dijalog-radnje > .gumb{flex:1}
}

/* ================================================================== kupac */
.uvod{margin:-6px 2px 18px;max-width:72ch;font-size:15px;color:var(--tekst-2);font-weight:600}

/* ---------------- naslov vršne stranice */
.naslov-blok{margin:10px 2px 16px}
.naslov-blok .nadnaslov{display:flex;align-items:center;gap:8px}
.naslov-radnje{display:flex;gap:10px;align-items:center}
.trazilica-mob .trazilica{margin-bottom:4px}
.trazilica.velika{margin-bottom:6px}
.zvono{position:relative}
@media (min-width:1024px){
  .naslov-blok{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:6px 0 24px}
  .naslov-radnje .trazilica{width:400px;min-height:50px}
  .naslov-radnje .trazilica input{font-size:15.5px}
  .naslov-radnje .zvono{width:50px;height:50px;min-width:50px}
  .trazilica.velika{max-width:620px}
}

/* ---------------- „Nastavite gdje ste stali" */
.hero{background:var(--tamna);color:#fff;border-radius:26px;overflow:hidden;box-shadow:var(--sjena-3);position:relative}
.hero-slika{height:176px;position:relative;background:#121b20}
.hero-slika .hero-sl{position:absolute;inset:0;width:100%;height:100%;border-radius:0}
.hero-slika .hero-sl img{object-position:52% 38%}
.hero-slika .sl.tamna svg{width:84px;height:84px;color:rgba(95,198,211,.35)}
.hero-slika .hero-glif{background:radial-gradient(90% 80% at 70% 20%,#21323a 0,#0e1518 75%) !important;color:rgba(255,255,255,.3) !important}
.hero-slika .hero-glif svg.glif{width:120px;height:120px}
.hero-slika::after{content:"";position:absolute;inset:auto 0 0 0;height:60px;background:linear-gradient(180deg,rgba(14,21,24,0),var(--tamna));pointer-events:none}
.hero-novo{position:absolute !important;left:14px;top:14px;z-index:1}
.hero-tijelo{padding:4px 18px 18px;position:relative}
.hero h3{font-size:22px;line-height:1.2;font-weight:800;letter-spacing:-.015em}
.hero-naslov:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.hero p{color:rgba(255,255,255,.76);font-size:14.5px;font-weight:600;margin-top:6px}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.hero-gumbi{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.hero-gumbi .gumb{width:100%}
@media (min-width:1024px){
  .hero{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);min-height:312px}
  .hero-slika{order:2;height:auto}
  .hero-slika::after{inset:0 auto 0 0;width:45%;height:auto;background:linear-gradient(90deg,var(--tamna),rgba(14,21,24,0))}
  .hero-slika .hero-sl img{object-position:50% 50%}
  .hero-novo{left:auto !important;right:16px}
  .hero-tijelo{padding:30px 32px;display:flex;flex-direction:column;justify-content:center}
  .hero h3{font-size:30px}
  .hero p{font-size:15.5px}
  .hero-gumbi{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
  .hero-gumbi .gumb{width:auto}
}

/* ---------------- kartice gradilišta (računalo) / retci (mobitel) — isti element */
.mreza-gr{background:var(--povrsina);border-radius:22px;box-shadow:var(--sjena-2);overflow:hidden}
.kartica-gr{position:relative}
.kartica-gr + .kartica-gr::before{content:"";position:absolute;left:84px;right:16px;top:0;height:1px;background:var(--crta)}
.kartica-veza{display:flex;align-items:center;gap:14px;padding:12px 14px;min-height:76px;color:inherit}
.kartica-veza:hover{background:var(--povrsina-2)}
.kartica-slika{position:relative;flex:none}
.kartica-slika .sl{width:56px;height:56px}
.kartica-slika .sl.tamna svg{width:26px;height:26px}
.kartica-tijelo{flex:1;min-width:0;display:flex;flex-direction:column}
.kartica-naslov{display:block;font-size:16px;font-weight:750;line-height:1.3}
.kartica-mj{display:block;font-size:13.5px;color:var(--tekst-3);font-weight:600;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kartica-novo{display:flex;margin-top:6px}
.kartica-oznake{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.kartica-gr.u-pripremi .kartica-naslov{color:var(--tekst-2)}
@media (min-width:1024px){
  .mreza-gr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;background:none;border-radius:0;box-shadow:none;overflow:visible}
  .kartica-gr{background:var(--povrsina);border-radius:24px;padding:8px;box-shadow:var(--sjena-2);display:flex;flex-direction:column;transition:transform .15s,box-shadow .2s}
  .kartica-gr:hover{transform:translateY(-2px);box-shadow:var(--sjena-3)}
  .kartica-gr + .kartica-gr::before{content:none}
  .kartica-veza{flex-direction:column;align-items:stretch;gap:0;padding:0;min-height:0;flex:1;border-radius:18px}
  .kartica-veza:hover{background:none}
  .kartica-slika .sl{width:100%;height:132px;border-radius:18px}
  .kartica-slika .sl svg.glif{width:84px;height:84px}
  .kartica-slika .sl.tamna svg{width:56px;height:56px}
  .kartica-cip{position:absolute;left:10px;top:10px}
  .kartica-cip.kartica-godina{left:auto;right:10px}
  /* 3D modeli: paket najviše u dva retka (ne „…" usred naziva faze), dijelovi u svom retku; gumb uvijek na dnu kartice */
  .mreza-modela .kartica-paket{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
  .mreza-modela .kartica-mj + .kartica-mj{margin-top:1px}
  .mreza-modela .kartica-veza{flex:1}
  .mreza-modela .kartica-tijelo{flex:1}
  .mreza-modela .kartica-dno{margin-top:auto}
  .mreza-modela .kartica-oznake{margin-top:auto;padding-top:8px}
  .kartica-tijelo{padding:12px 10px 4px}
  .kartica-naslov{font-size:16.5px;font-weight:800;letter-spacing:-.01em;min-height:43px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
  .kartica-mj{margin-top:4px}
  .kartica-vazece{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13.5px;font-weight:700;color:var(--tekst-2);min-width:0}
  .kartica-vazece > svg{color:var(--tekst-3)}
  .kartica-vazece .vazeci-paket{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .kartica-dno{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 2px 2px}
  .kartica-dno:has(> :only-child),.kartica-dno.jedan{grid-template-columns:1fr}
  .kartica-dno .gumb{min-height:44px;height:44px;font-size:14.5px;border-radius:14px;padding:0 10px}
}
@media (min-width:1024px) and (max-width:1279.98px){.mreza-gr{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1600px){.mreza-modela{grid-template-columns:repeat(4,minmax(0,1fr))}}
.mreza-modela .kartica-slika .sl{background-color:#121b20}
.rezultati-oznake{margin-bottom:6px}
.skupina-gradilista + .skupina-gradilista{margin-top:4px}
/* Nacrti (sva gradilišta): skupina po gradilištu je sklopiva — najnovije gradilište rasklopljeno */
details.skupina-gradilista{margin-top:12px}
details.skupina-gradilista > summary{list-style:none;cursor:pointer;border-radius:18px;background:var(--povrsina);box-shadow:var(--sjena-1),0 0 0 1px var(--crta) inset}
details.skupina-gradilista > summary::-webkit-details-marker{display:none}
details.skupina-gradilista > summary:hover{background:var(--povrsina-2)}
details.skupina-gradilista > summary .odjeljak-red{margin:0;min-height:58px;padding:8px 16px 8px 18px}
details.skupina-gradilista > summary .odjeljak{font-size:16px;letter-spacing:-.005em;text-transform:none;color:var(--tekst);font-weight:800}
details.skupina-gradilista[open] > summary{margin-bottom:10px}
.skupina-sazetak{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;font-weight:700;color:var(--tekst-3);white-space:nowrap}
.skupina-sazetak .zam-strelica{transition:transform .2s;color:var(--tekst-3)}
details.skupina-gradilista[open] > summary .zam-strelica{transform:rotate(180deg)}
details.skupina-gradilista .odjeljak{text-align:left}
.skupina-gradilista .skupina-veza{display:flex;justify-content:flex-end;padding:6px 4px 0}
.mjesto-dokumenata:empty{display:none}

/* ---------------- gradilište */
.traka-pogled{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0 6px;padding:10px 12px 10px 16px;border-radius:18px;background:var(--naglasak-tint);
  color:var(--naglasak-jaki);font-size:14px;font-weight:650}
.traka-pogled > svg{flex:none}
.traka-pogled-tekst{flex:1;min-width:200px}
.traka-pogled b{font-weight:800}
.gr-zaglavlje{margin:4px 2px 18px}
.gr-zaglavlje h1{font-size:28px}
.gr-naslov{min-width:0}
.meta-red{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;color:var(--tekst-2);font-size:14.5px;font-weight:650}
.meta-red > span{display:inline-flex;align-items:center;gap:6px}
.meta-red svg{color:var(--tekst-3)}
.oznake-red{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.oznake-red .cip{min-height:32px}
.gr-zaglavlje .gumbi{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.zip-mjesto{display:flex;flex-direction:column;gap:8px}
.zip-mjesto:not(:has(.zip-napredak:not([hidden]))){display:none}
.zip-mjesto{margin-bottom:12px}
.plocice{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.plocice.jedna{grid-template-columns:1fr}
.gr-alati{display:flex;flex-direction:column;gap:22px;margin-top:12px}
.gr-alati > .oznaka-trazi{order:-1}
.oznaka-trazi{min-height:56px;gap:8px;padding-left:14px}
.oznaka-trazi input::placeholder{font-size:15px}
.oznaka-trazi > svg{color:var(--tekst-3)}
.seg-sadrzaj{margin-top:14px;min-width:0}
.vrh-seg{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 4px 10px;font-size:13.5px;color:var(--tekst-3);font-weight:650;min-height:24px}
.vrh-seg-naslov{margin:0;font-size:13.5px;font-weight:750;color:var(--tekst-2)}
.vrh-seg .gumb.malen{min-height:36px;height:36px}
.gr-strana{min-width:0}
.gr-strana.istakni .kartica{box-shadow:0 0 0 3px var(--naglasak-svijetli),var(--sjena-3)}
.dokumenti-ploca{margin-bottom:18px}
@media (min-width:1024px){
  .gr-zaglavlje{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:0 0 24px}
  .gr-zaglavlje h1{font-size:34px}
  .gr-raspored{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start}
  .plocice{grid-template-columns:1.5fr 1fr;gap:16px}
  .gr-alati{flex-direction:row;align-items:center;gap:16px;margin-top:22px}
  .gr-alati > .oznaka-trazi{order:0;flex:1;min-width:250px;max-width:440px;min-height:54px;padding-left:18px}
  .gr-alati > .oznaka-trazi > svg{display:none}
  .gr-alati > .oznaka-trazi input{font-size:15px}
  .gr-alati > .segment{flex:none}
  .gr-alati > .segment button{flex:none;min-width:84px;padding:0 18px}
  .gr-strana{position:sticky;top:24px}
}
@media (min-width:1024px) and (max-width:1279.98px){
  .gr-raspored{grid-template-columns:minmax(0,1fr)}
  .gr-strana{position:static;margin-top:24px}
}

/* ---------------- povijest paketa (vremenska crta) */
.vremenska{list-style:none;margin:0;padding:6px 0}
.vr{position:relative}
.vr-gumb{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:0 10px;align-items:start;width:100%;padding:10px 14px 10px 12px;border:0;background:none;
  border-radius:16px;text-align:left;font:inherit;color:inherit}
.vr-gumb:hover{background:var(--povrsina-2)}
.vr-gumb:focus-visible{outline-offset:-3px}
.vr-os{position:relative;align-self:stretch;display:flex;justify-content:center}
.vr-os::before{content:"";position:absolute;top:-12px;bottom:-12px;width:2px;background:var(--crta-2);left:50%;transform:translateX(-50%)}
.vr-razdjel + .vr .vr-os::before{top:18px}
.vr:has(+ .vr-razdjel) .vr-os::before,.vr:last-child .vr-os::before{bottom:calc(100% - 18px)}
.vr-razdjel + .vr:has(+ .vr-razdjel) .vr-os::before,.vr-razdjel + .vr:last-child .vr-os::before{display:none}
.vr-cvor{position:relative;margin-top:7px;width:14px;height:14px;border-radius:50%;background:var(--naglasak);box-shadow:0 0 0 4px #fff,0 0 0 5px var(--naglasak-tint-2)}
.vr.stara .vr-cvor{background:#fff;box-shadow:0 0 0 4px #fff,inset 0 0 0 2px #a7b2b9}
.vr.priprema .vr-cvor{background:var(--jantar);box-shadow:0 0 0 4px #fff,0 0 0 5px #f3d9a6}
.vr-tijelo{min-width:0;display:flex;flex-direction:column}
.vr-gore{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vr-datum{font-size:13px;color:var(--tekst-3);font-weight:700}
.vr-naziv{font-size:16px;font-weight:750;margin-top:4px;line-height:1.3;overflow-wrap:anywhere}
.vr.stara .vr-naziv{color:var(--tekst-2)}
.vr-dno{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin-top:6px;font-size:13.5px;color:var(--tekst-3);font-weight:650}
.mini-3d{display:inline-flex;align-items:center;gap:4px;color:var(--naglasak-jaki);font-weight:800}
.vr-zamjena{display:inline-flex;align-items:center;gap:5px;font-weight:750;color:var(--tekst-3)}
.vr-gumb > svg.chev{margin-top:8px}
.vr-razdjel{display:flex;align-items:center;gap:10px;padding:12px 16px 4px;font-size:12.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--tekst-3)}
.vr-razdjel::after{content:"";flex:1;height:1px;background:var(--crta)}
.vr-razdjel.priprema{color:var(--jantar)}
.povijest .objekt-naslov{margin-top:6px}
.povijest-kartica .vremenska{padding-bottom:10px}

/* ---------------- ladica paketa i računa */
.ladica-paket-pod{display:inline}
.ladica-paket-pod .status{margin-left:8px;vertical-align:-1px}
.traka-nova,.traka-priprema{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 12px 12px 14px;border-radius:16px;background:var(--jantar-tint);
  color:var(--jantar);font-size:14.5px;font-weight:700}
.traka-nova > span,.traka-priprema > span{flex:1;min-width:180px}
.napomena{padding:12px 14px;border-radius:14px;background:var(--povrsina-2);color:var(--tekst-2);font-size:14.5px;font-weight:600;white-space:pre-line}
.objavljeno{font-size:13.5px;color:var(--tekst-3);font-weight:650}
.grupa-naslov{margin:0 4px 8px;font-size:12.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--tekst-3)}
.ladica .popis-redak{min-height:68px}
.ladica .popis-redak .ik-plocica{width:48px;height:48px;border-radius:14px}
.ladica .popis-redak + .popis-redak::before{left:76px}
.racun-glava{display:flex;align-items:center;gap:14px;padding:6px 0 4px}
.racun-tko{min-width:0}
.racun-glava b{display:block;font-size:16px;overflow-wrap:anywhere}
.racun-glava small{display:block;color:var(--tekst-3);font-weight:650;font-size:13.5px}
.racun-nav .popis-redak{min-height:64px}
.racun-nav .ik-plocica{width:44px;height:44px;border-radius:13px}
.racun-nav .popis-redak + .popis-redak::before{left:72px}
.racun-nav [aria-current] .naslov{color:var(--naglasak-jaki)}
.racun-dno{font-size:13px;color:var(--tekst-3);font-weight:650}
.racun-dno a{color:var(--naglasak-jaki);text-decoration:underline}
.ladica-racun .odjava{color:var(--opasno)}

/* ---------------- Mape (kao Drive) */
.mape-prikaz{min-width:0}
.mape-traka{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--crta);background:var(--povrsina-2)}
.mape-put{margin:0;font-size:14px;flex:1;min-width:0}
.mape-mrvica{min-height:36px}
.mape-popis{list-style:none;margin:0;padding:0}
.mape-prazno{box-shadow:none;border-radius:0}
.mape-napomena{margin:0;padding:12px 16px;border-bottom:1px solid var(--crta);font-size:14px;color:var(--tekst-2);font-weight:600}
.mape-prvi-red{display:block !important}
.mape-prvi-red .status.novo{margin-left:6px;vertical-align:1px}
.mape-ime{overflow-wrap:anywhere}
.mape-prvi-red .kod{vertical-align:1px}
.mapa-redak.stara .mape-ime{color:var(--tekst-2)}
/* dorada v0.7: naziv mape u JEDNOM retku (oznaka + naziv, dulje „…"), datum · datoteke · 3D · Novo u drugom */
.mapa-redak .mape-prvi-red{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mapa-redak .mape-ime{overflow-wrap:normal}
.mape-meta-red{display:flex;align-items:center;flex-wrap:wrap;gap:3px 12px;margin-top:4px;min-width:0}
.popis-tekst .mape-meta-red .pod{margin:0;overflow:visible;white-space:normal}
.mape-meta-red .mini-3d{font-size:13px}
.mape-meta-red .status + .status{margin-left:0}
.mape-zamijenjeno{border-top:1px solid var(--crta)}
.mape-zamijenjeno > summary.skupina-naslov{display:flex;align-items:center;gap:8px;min-height:48px;padding:10px 16px;border-top:0;cursor:pointer;list-style:none;
  font-size:12.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--tekst-3);background:var(--povrsina-2)}
.mape-zamijenjeno > summary::-webkit-details-marker{display:none}
.mape-zamijenjeno > summary:hover{color:var(--tekst-2)}
.mape-zamijenjeno > summary .brojac{font-size:12.5px;letter-spacing:0}
.mape-zamijenjeno > summary .zam-strelica{margin-left:auto;transition:transform .2s}
.mape-zamijenjeno[open] > summary .zam-strelica{transform:rotate(180deg)}
.mape-zamijenjeno .mape-popis{background:var(--povrsina)}
.mape-kartica > .mape-prikaz{min-width:0}
.vrh-seg.vrh-seg-mape{margin-top:22px}
.vazece-datoteke .popis-tekst .naslov{font-size:15px}
.vazece-datoteke .popis-tekst .pod{white-space:normal}
/* Datoteke (sva gradilišta): „7 paketa · 44 datoteke · zadnje 28. 9. 2026." lomi se ispred „·", ne reže se usred datuma */
.mapa-gradilista .popis-tekst .pod{white-space:normal}
.popis-podnozje.zip-podnozje{cursor:pointer;font:inherit;font-size:14.5px;font-weight:750}
.popis-podnozje.zip-podnozje:disabled{color:var(--tekst-3);cursor:default}
.dokumentacija-zip{display:inline-flex}
.zip-napredak{margin:0 0 10px}
.zip-red{display:flex;align-items:center;gap:10px;padding:10px 12px 10px 14px;border-radius:16px;background:var(--povrsina);box-shadow:var(--sjena-2);color:var(--naglasak-jaki)}
.napredak{flex:1;min-width:60px;height:8px;border-radius:4px;background:var(--povrsina-3);overflow:hidden}
.napredak > i{display:block;height:100%;width:0;background:var(--naglasak);transition:width .3s}
.zip-tekst{font-size:13.5px;color:var(--tekst-2);font-weight:650;white-space:nowrap}

/* ---------------- prijava */
.prijava{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 120px);padding:24px 0}
.prijava-kartica{width:min(460px,100%);padding:30px 24px 26px;border-radius:28px;background:var(--povrsina);box-shadow:var(--sjena-3)}
.prijava-logo{display:flex;align-items:center;gap:10px;margin-bottom:26px;color:var(--tekst)}
.prijava-logo img{height:26px;width:auto}
.prijava-logo span{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--naglasak-jaki);padding-top:3px}
.prijava .nadnaslov{color:var(--naglasak-jaki);margin-bottom:6px;font-size:14px}
.prijava h1{font-size:30px;margin-bottom:22px}
.prijava form .gumb{margin-top:4px}
.prijava form .greska:empty{display:none}
.prijava form .greska{margin:12px 0 0}
.prijava .ispod{display:flex;align-items:center;gap:8px;margin-top:18px;font-size:14px;color:var(--tekst-3);font-weight:600}
.prijava .ispod > svg{flex:none}
.prijava .ispod a{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--naglasak-jaki);font-weight:750}
.prijava-dno{margin-top:18px;font-size:13px;color:var(--tekst-3);font-weight:600;text-align:center}
@media (min-width:600px){.prijava-kartica{padding:38px 36px 32px}}

/* ================================================================== v0.8 (primjedbe s prvog testiranja, 20. 10. 2026.) */
/* ---------------- obavijesti: broj na zvonu, ladica „Obavijesti" (kupac.js ladicaObavijesti) */
.zvono-broj{position:absolute;top:2px;right:0;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--naglasak);color:#fff;
  font-size:11.5px;font-weight:800;line-height:20px;text-align:center;letter-spacing:0;box-shadow:0 0 0 2px var(--povrsina);pointer-events:none}
.zvono-broj[hidden]{display:none}
.obavijesti-vrh{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap}
.obavijesti-broj{font-size:14px;font-weight:750;color:var(--tekst-2)}
.obavijesti-sve{background:var(--naglasak-tint);color:var(--naglasak-jaki);box-shadow:none}
.obavijesti-sve:hover{background:var(--naglasak-tint-2)}
.obavijesti-popis{list-style:none;margin:0;padding:0;border-radius:18px;background:var(--povrsina);box-shadow:0 0 0 1px var(--crta);overflow:hidden}
.obavijest-stavka{position:relative}
.obavijest-stavka + .obavijest-stavka{border-top:1px solid var(--crta)}
.obavijest-veza{display:flex;align-items:flex-start;gap:14px;padding:14px 14px 14px 12px;color:inherit;text-decoration:none}
.obavijest-veza:hover{background:var(--povrsina-2)}
.obavijest-veza:focus-visible{outline-offset:-3px}
.obavijest-veza .ik-plocica{width:48px;height:48px;border-radius:14px}
.obavijest-tekst{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;padding-top:2px}
.obavijest-naslov{font-size:15px;line-height:1.35;font-weight:650;color:var(--tekst-2);overflow-wrap:anywhere}
.obavijest-pod{font-size:13.5px;line-height:1.4;font-weight:600;color:var(--tekst-3)}
.obavijest-tocka{display:inline-block;width:9px;height:9px;margin-right:8px;border-radius:50%;background:var(--naglasak);vertical-align:1px}
.obavijest-stavka.neprocitana .obavijest-veza{padding-bottom:56px}
.obavijest-stavka.neprocitana .obavijest-naslov{font-weight:800;color:var(--tekst)}
.obavijest-stavka.neprocitana .obavijest-pod{color:var(--tekst-2)}
.obavijest-stavka.procitana .obavijest-veza{opacity:.72}
.obavijest-stavka.procitana .obavijest-veza:hover{opacity:1}
/* „Označi kao pročitano" ispod teksta stavke (gumb ne smije biti u poveznici) */
.obavijest-oznaci{position:absolute;left:74px;bottom:12px;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px 0 10px;border:0;
  border-radius:999px;background:var(--povrsina-2);box-shadow:0 0 0 1px var(--crta-2) inset;color:var(--naglasak-jaki);font-size:13px;font-weight:750;cursor:pointer}
.obavijest-oznaci:hover{background:var(--naglasak-tint)}
.obavijest-oznaci:disabled{opacity:.5;cursor:default}
@media (pointer:coarse){.obavijest-oznaci{height:40px}.obavijest-stavka.neprocitana .obavijest-veza{padding-bottom:62px}}

/* ---------------- 3D: glavni model i sklopljene „Starije i pomoćne verzije" (kupac.js starijiModeli) */
details.ostali-modeli{margin-top:16px;border-radius:18px;background:var(--povrsina);box-shadow:var(--sjena-1),0 0 0 1px var(--crta) inset}
details.ostali-modeli > summary{display:flex;align-items:center;gap:8px;min-height:52px;padding:10px 16px;list-style:none;cursor:pointer;border-radius:18px;
  font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--tekst-3)}
details.ostali-modeli > summary::-webkit-details-marker{display:none}
details.ostali-modeli > summary:hover{color:var(--tekst-2);background:var(--povrsina-2)}
details.ostali-modeli > summary .brojac{letter-spacing:0}
details.ostali-modeli > summary .zam-strelica{margin-left:auto;transition:transform .2s}
details.ostali-modeli[open] > summary .zam-strelica{transform:rotate(180deg)}
.ostali-modeli-tijelo{padding:0 12px 14px}
.ostali-modeli-tijelo > .skupina-naslov{margin:14px 4px 8px}
.ostali-modeli-tijelo > .skupina-naslov:first-child{margin-top:4px}
.upozorenje-modela{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;margin:6px 0 8px;padding:8px 8px 8px 14px;border-radius:14px;
  background:var(--jantar-tint);color:var(--jantar);font-size:14px;font-weight:750}
.upozorenje-modela > svg{flex:none}
.upozorenje-modela > span{flex:1 1 160px;min-width:0}
.upozorenje-modela .gumb{background:var(--povrsina);color:var(--jantar);box-shadow:0 0 0 1px #f0d9a8 inset}
.upozorenje-modela .gumb:hover{background:#fff7e6}
.modeli-pomocni{box-shadow:0 0 0 1px var(--crta)}
.modeli-pomocni .popis-redak{min-height:64px}
.modeli-pomocni .ik-plocica{width:44px;height:44px;border-radius:13px}
.modeli-pomocni .popis-tekst .naslov{font-size:15px;font-weight:700;color:var(--tekst-2)}
.modeli-pomocni .oznake .status.stara{white-space:normal}
.mreza-modela + details.ostali-modeli{margin-top:22px}

/* ---------------- prijava lozinkom (v0.8 — src/app/prijava.js; do integracije je to bio <style> u prijava.js)
   .lozinka-omot: polje lozinke s gumbom „oko" (.lozinka-oko, aria-pressed) desno u polju
   .jacina[data-razina="0…3"] > .jacina-trake > i ×3 + tekst — jačina nove lozinke (pravila = lozinka.js na poslužitelju)
   input.kod-polje: pristupni kod XXXXX-XXXXX; .kod-veza: „Prvi put ili zaboravljena lozinka? Imam pristupni kod" */
.lozinka-omot{position:relative}
.lozinka-omot input{padding-right:54px}
.lozinka-oko{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:44px;min-width:44px;height:40px;min-height:40px;padding:0;
  border:0;border-radius:11px;background:none;box-shadow:none;color:var(--tekst-3);display:grid;place-items:center;cursor:pointer}
.lozinka-oko:hover{background:var(--povrsina-2);color:var(--tekst)}
.lozinka-oko[aria-pressed=true]{color:var(--naglasak-jaki)}
.jacina{display:flex;align-items:center;gap:10px;margin-top:2px;font-size:13px;font-weight:650;color:var(--tekst-3);min-height:18px}
.jacina-trake{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;width:96px;flex:none}
.jacina-trake i{height:5px;border-radius:3px;background:var(--crta-2)}
.jacina[data-razina="1"] .jacina-trake i:nth-child(-n+1){background:var(--opasno)}
.jacina[data-razina="2"] .jacina-trake i:nth-child(-n+2){background:var(--jantar)}
.jacina[data-razina="3"] .jacina-trake i{background:var(--naglasak)}
input.kod-polje{font-family:ui-monospace,Consolas,monospace;font-size:20px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
input.kod-polje::placeholder{letter-spacing:.06em}
.prijava-dno a{color:var(--naglasak-jaki);font-weight:700}
.prijava .ispod.kod-veza{display:block;line-height:1.5}
.prijava .napomena-kod{margin:0 0 14px;padding:10px 14px;border-radius:var(--r-s);background:var(--naglasak-tint);color:var(--naglasak-jaki);font-weight:650;font-size:14px}
.prijava .ispod.kod-veza a{display:inline;min-height:0;padding:12px 0}