/* ---------------------------------------------------------------
   BOJE

   Cijela paleta izlazi iz zelene s Bobicina logotipa (#216130). Ta ista
   zelena već stoji u ponudi (public/tvrtka.js → zelena), pa su aplikacija
   i PDF u istim bojama.

   Sve ostalo su izvedene nijanse: podloge su neutralne s laganim zelenim
   tonom, a naglasak je zelen umjesto plavog. Ako se boja marke ikad
   promijeni, mijenja se --marka i njezine nijanse ovdje — nigdje drugdje
   u CSS-u nema tvrdo upisane boje.

   U tamnoj temi zelena mora biti svjetlija, inače na tamnoj podlozi
   nema kontrasta.
   --------------------------------------------------------------- */
:root{
  /* boja marke */
  --marka:#216130;            /* zelena s logotipa */
  --marka-tamna:#184b25;
  --marka-svijetla:#e8f1ea;   /* podloga za zelene oznake */

  /* podloge i tekst */
  --poz:#ffffff; --poz2:#f4f7f4; --poz3:#e8eee9;
  --tekst:#151d18; --tiho:#5f6f65; --rub:#d7e0d9;

  /* naglasak = boja marke */
  --naglasak:#216130; --naglasak-tekst:#ffffff;

  /* stanja */
  --dobro:#1a7038; --dobro-poz:#e3f1e7;
  --upozorenje:#8a5a00; --upozorenje-poz:#fdf4e0;
  --lose:#b3261e; --lose-poz:#fbe9e7;

  --sjena:0 1px 2px rgba(20,40,25,.07), 0 2px 10px rgba(20,40,25,.05);
  --r:10px;
}
@media (prefers-color-scheme: dark){
  :root{
    --marka:#5cbd77;
    --marka-tamna:#3d9a58;
    --marka-svijetla:#16281c;

    --poz:#141816; --poz2:#1a1f1c; --poz3:#232a26;
    --tekst:#e5ebe7; --tiho:#94a49a; --rub:#313a35;

    --naglasak:#5cbd77; --naglasak-tekst:#0b1410;

    --dobro:#79dd9a; --dobro-poz:#12301e;
    --upozorenje:#f0c463; --upozorenje-poz:#31280a;
    --lose:#f2a49d; --lose-poz:#38160f;

    --sjena:0 1px 2px rgba(0,0,0,.45);
  }
}
*{box-sizing:border-box}
/* mora ici PRIJE ostalih pravila: atribut hidden uvijek pobjedjuje nad
   display:grid/flex koji su definirani nize u ovoj datoteci */
[hidden]{display:none !important}
body{
  margin:0; background:var(--poz2); color:var(--tekst);
  font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}

/* ---------- prijava ---------- */
.prijava-zaslon{min-height:100vh;display:grid;place-items:center;padding:20px}
.prijava-kutija{
  background:var(--poz); border:1px solid var(--rub); border-radius:14px;
  padding:32px; width:min(380px,100%); box-shadow:var(--sjena);
  display:flex; flex-direction:column; gap:14px;
}
.prijava-kutija h1{margin:0;font-size:22px}
.prijava-kutija p.tiho{margin:-10px 0 6px}
.prijava-kutija label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--tiho)}
.prijava-kutija input{
  padding:10px 12px;border:1px solid var(--rub);border-radius:var(--r);
  background:var(--poz2);color:var(--tekst)
}
.prijava-kutija button{
  padding:11px;border:0;border-radius:var(--r);
  background:var(--naglasak);color:var(--naglasak-tekst);font-weight:600
}

/* ---------- vrh ---------- */
.vrh{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  flex-wrap:wrap;padding:12px 20px;background:var(--poz);
  border-bottom:1px solid var(--rub);position:sticky;top:0;z-index:10
}
.vrh-lijevo,.vrh-desno{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.kartice{display:flex;gap:4px}
.kartica{
  background:transparent;border:0;padding:7px 13px;border-radius:var(--r);
  color:var(--tiho);display:flex;align-items:center;gap:7px
}
.kartica.aktivna{
  background:var(--marka-svijetla);color:var(--marka-tamna);font-weight:600
}
.kartica:hover:not(.aktivna){background:var(--poz3);color:var(--tekst)}
.znacka{
  background:var(--lose);color:#fff;border-radius:999px;
  padding:1px 7px;font-size:11px;font-weight:700
}
.tanak{
  background:var(--poz2);border:1px solid var(--rub);
  border-radius:var(--r);padding:6px 12px;color:var(--tekst)
}
.tiho{color:var(--tiho);font-size:13px}

/* ---------- paneli ---------- */
.panel{max-width:1100px;margin:0 auto;padding:20px}
.nacini{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.nacin{
  background:var(--poz);border:1px solid var(--rub);border-radius:999px;
  padding:7px 16px;color:var(--tiho)
}
.nacin.aktivna{background:var(--naglasak);border-color:var(--naglasak);color:var(--naglasak-tekst);font-weight:600}

.alat{
  background:var(--poz);border:1px solid var(--rub);border-radius:14px;
  padding:18px;box-shadow:var(--sjena);display:flex;flex-direction:column;gap:14px
}
.alat input[type=text],.alat input[type=number],.alat select,.alat textarea,#upitSifra{
  width:100%;padding:10px 12px;border:1px solid var(--rub);
  border-radius:var(--r);background:var(--poz2);color:var(--tekst)
}
.alat textarea{resize:vertical}
.red{display:flex;gap:12px;flex-wrap:wrap}
.red label{flex:1 1 150px;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--tiho)}
.tolerancija{display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--tiho)}
.tolerancija strong{color:var(--tekst);font-size:15px}
.tolerancija input[type=range]{width:100%;accent-color:var(--naglasak)}
.kvacice{display:flex;gap:20px;flex-wrap:wrap;font-size:14px}
.kvacice label{display:flex;align-items:center;gap:7px;cursor:pointer}
.glavni{
  align-self:flex-start;background:var(--naglasak);color:var(--naglasak-tekst);
  border:0;border-radius:var(--r);padding:10px 22px;font-weight:600
}
.objasnjenje{
  background:var(--poz2);border:1px solid var(--rub);border-radius:var(--r);
  padding:12px;font-size:13px
}
.objasnjenje code{background:var(--poz3);padding:1px 6px;border-radius:5px}
.sazetak{margin:18px 0 10px;font-size:14px;color:var(--tiho)}

/* ---------- rezultati ---------- */
.rezultati{display:flex;flex-direction:column;gap:14px}
.kartica-sprave{
  background:var(--poz);border:1px solid var(--rub);border-radius:14px;
  overflow:hidden;box-shadow:var(--sjena);display:flex;gap:0;flex-wrap:wrap
}
/* Slika se NE reže. Sprave su svakakvih oblika — visoka ljuljačka, široka
   klackalica — pa "cover" odsiječe pola sprave čim je redak viši od slike.
   Zato "contain": cijela slika stane, a prazan prostor popuni podloga. */
.slika{
  width:210px;flex:0 0 210px;background:var(--poz3);
  display:grid;place-items:center;min-height:150px;padding:8px
}
.slika img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;display:block
}
.slika .bez{color:var(--tiho);font-size:12px;text-align:center;padding:10px}
.telo{flex:1 1 380px;padding:16px;display:flex;flex-direction:column;gap:10px}
.naslov-red{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.naslov-red h3{margin:0;font-size:17px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.kat{
  background:var(--poz3);border-radius:999px;padding:2px 10px;
  font-size:12px;color:var(--tiho)
}
.znacke{display:flex;gap:6px;flex-wrap:wrap}
.z{border-radius:6px;padding:2px 8px;font-size:11px;font-weight:600}
.z.dobra{background:var(--dobro-poz);color:var(--dobro)}
.z.upoz{background:var(--upozorenje-poz);color:var(--upozorenje)}
.z.neutralna{background:var(--poz3);color:var(--tiho)}

.mjere{border-collapse:collapse;font-size:13px}
.mjere td{padding:2px 12px 2px 0;white-space:nowrap}
.mjere td:first-child{color:var(--tiho)}
.mjere .broj{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.post{font-weight:700;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.post.ok{color:var(--dobro)}
.post.sred{color:var(--upozorenje)}
.post.los{color:var(--lose)}

.ukupno{font-size:13px}
.napomena-rot{
  background:var(--upozorenje-poz);color:var(--upozorenje);
  border-radius:var(--r);padding:9px 12px;font-size:13px;font-weight:500
}
.cijene{font-size:13px;color:var(--tiho);display:flex;gap:16px;flex-wrap:wrap}
.veze{display:flex;gap:14px;flex-wrap:wrap;font-size:13px}
.veze a{color:var(--naglasak);text-decoration:none}
.veze a:hover{text-decoration:underline}
.opis-tekst{font-size:13px;color:var(--tiho)}

/* ---------- za provjeru ---------- */
.sekcija{
  background:var(--poz);border:1px solid var(--rub);border-radius:14px;
  padding:18px;margin-bottom:16px;box-shadow:var(--sjena)
}
.sekcija h2{margin:0 0 4px;font-size:16px}
.sekcija .tiho{margin:0 0 12px}
.tablica-omot{overflow-x:auto}
table.popis{width:100%;border-collapse:collapse;font-size:13px}
table.popis th,table.popis td{
  text-align:left;padding:8px 10px;border-bottom:1px solid var(--rub);vertical-align:top
}
table.popis th{color:var(--tiho);font-weight:600;white-space:nowrap}
table.popis a{color:var(--naglasak);text-decoration:none;font-family:ui-monospace,Menlo,monospace}
table.popis a:hover{text-decoration:underline}
.prazno{
  background:var(--dobro-poz);color:var(--dobro);border-radius:var(--r);
  padding:14px;font-weight:600
}
.greska{
  background:var(--lose-poz);color:var(--lose);border-radius:var(--r);
  padding:10px 12px;font-size:13px;margin:0
}

/* ---------- ucitavanje ---------- */
.ucitavanje{position:fixed;inset:0;background:rgba(0,0,0,.25);display:grid;place-items:center;z-index:50}
.ucitavanje span{
  width:38px;height:38px;border:3px solid #fff;border-top-color:transparent;
  border-radius:50%;animation:vrti .8s linear infinite
}
@keyframes vrti{to{transform:rotate(360deg)}}

@media (max-width:640px){
  .slika{width:100%;flex:1 1 100%;min-height:170px}
  .vrh{padding:10px 14px}
  .panel{padding:14px}
}

.razlog-ai{
  background:var(--poz3);border-left:3px solid var(--naglasak);
  border-radius:6px;padding:9px 12px;font-size:13px
}

/* ---------- ponuda ---------- */
/* naziv je ostao od plave znacke; boja sada dolazi iz teme (zelena) */
.znacka.plava{background:var(--naglasak);color:var(--naglasak-tekst)}
.naslov-sekcije{margin:0;font-size:15px}
.naslov-red-sekcije{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.gumbi{display:flex;gap:8px;flex-wrap:wrap}

/* Sirinu u retku daje pravilo `.red label`; samostalno polje ne smije
   rastezati visinu jer su .alat i .izlaz-odgovora stupci. */
.polje{flex:0 0 auto;display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--tiho)}
.polje input,.polje textarea,.polje select{
  padding:9px 11px;border:1px solid var(--rub);border-radius:var(--r);
  background:var(--poz2);color:var(--tekst);width:100%;font:inherit
}
.polje textarea{resize:vertical}

.dodaj-u-ponudu{
  align-self:flex-start;background:var(--poz3);border:1px solid var(--rub);
  border-radius:var(--r);padding:8px 16px;color:var(--tekst);font-weight:600;font-size:13px
}
.dodaj-u-ponudu:hover{border-color:var(--naglasak);color:var(--naglasak)}
.dodaj-u-ponudu.dodano{background:var(--dobro-poz);color:var(--dobro);border-color:transparent}

.stavka{
  display:flex;gap:12px;align-items:flex-start;padding:12px 0;
  border-top:1px solid var(--rub);flex-wrap:wrap
}
.stavka .rb{color:var(--tiho);font-size:13px;min-width:24px;padding-top:9px;
  font-family:ui-monospace,Menlo,monospace}
.stavka-glavni{flex:3 1 300px;display:flex;flex-direction:column;gap:6px}
.stavka-glavni input,.stavka-glavni textarea{
  padding:8px 10px;border:1px solid var(--rub);border-radius:8px;
  background:var(--poz2);color:var(--tekst);width:100%;font:inherit
}
.naziv-stavke{font-weight:600}
.opis-stavke{resize:vertical;font-size:13px}
.dimenzije-stavke{font-size:13px;max-width:320px}
.sifra-stavke{max-width:160px;font-family:ui-monospace,Menlo,monospace;font-size:12px}

.stavka-brojke{flex:2 1 320px;display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start}
.malo-polje{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--tiho);flex:1 1 70px}
.malo-polje input{
  padding:8px 9px;border:1px solid var(--rub);border-radius:8px;
  background:var(--poz2);color:var(--tekst);width:100%;font:inherit;text-align:right
}
.malo-polje .jm{text-align:center}
.iznos-stavke{
  padding:8px 9px;font-weight:700;text-align:right;
  font-family:ui-monospace,Menlo,monospace;font-size:13px
}
.naslov-skupine input{
  flex:1 1 300px;padding:8px 10px;border:1px solid var(--rub);border-radius:8px;
  background:var(--poz3);color:var(--tekst);font-weight:600;font:inherit
}
.alati-retka{display:flex;gap:4px;align-items:flex-start;padding-top:4px}
.sicusni{
  background:var(--poz2);border:1px solid var(--rub);border-radius:7px;
  padding:5px 9px;color:var(--tiho);font-size:12px;line-height:1
}
.sicusni:hover{color:var(--tekst);border-color:var(--naglasak)}
.sicusni.makni:hover{color:var(--lose);border-color:var(--lose)}

table.zbroj{margin-left:auto;border-collapse:collapse;font-size:14px;min-width:280px}
table.zbroj td{padding:7px 10px;border-bottom:1px solid var(--rub)}
table.zbroj td.broj{text-align:right;font-family:ui-monospace,Menlo,monospace}
table.zbroj tr.jako td{
  font-weight:700;color:var(--dobro);background:var(--dobro-poz);
  border-bottom:0;font-size:15px
}
.akcije-ponude{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 8px}
.akcije-ponude .glavni{align-self:auto;padding:11px 26px}
.poruka-ponude{font-size:14px;margin:4px 0 18px;min-height:20px}
.poruka-ponude.dobro{color:var(--dobro);font-weight:600}
.poruka-ponude.lose{color:var(--lose);font-weight:600}

.kartica-sprave.izvan{opacity:.82;border-style:dashed}

.prikazi-jos{align-self:center;padding:10px 22px;font-weight:600}

/* ---------- pošta ---------- */
table.posta-popis td{vertical-align:top}
table.posta-popis tr.odabran{background:var(--poz3)}
.naslov-poruke{font-weight:600;max-width:420px}
.tijelo-poruke{
  white-space:pre-wrap;word-break:break-word;background:var(--poz2);
  border:1px solid var(--rub);border-radius:var(--r);padding:14px;
  font:13px/1.55 inherit;max-height:420px;overflow:auto;margin:0
}
.prilozi{display:flex;flex-direction:column;gap:6px;font-size:13px}
.prilog{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.greska-viseredna{white-space:pre-wrap;line-height:1.6}

td.lose-polje{color:var(--lose);font-weight:600}

.nalaz-upita{font-size:13px}
.dobro-tekst{color:var(--dobro);font-weight:600;margin:6px 0}
.upozorenja{margin:6px 0 0;padding-left:20px;color:var(--upozorenje)}
.upozorenja li{margin-bottom:4px}

/* prilozi i odgovor */
.ime-priloga{font-weight:600}
a.kao-gumb{text-decoration:none;display:inline-block}
a.sicusni.kao-gumb{color:var(--naglasak)}
a.sicusni.kao-gumb:hover{border-color:var(--naglasak)}
a.tanak.kao-gumb{padding:10px 20px;color:var(--tekst);font-weight:600}
.odgovor-panel{margin-top:16px}
.predmet-odgovora{font-weight:600}
.tekst-odgovora{font:13px/1.6 inherit;resize:vertical}
.izlaz-odgovora{display:flex;flex-direction:column;gap:12px;margin-top:10px}

/* vrsta odgovora */
.oznaka-polja{margin:0;font-size:12px;color:var(--tiho)}
.vrste-odgovora{display:flex;gap:6px;flex-wrap:wrap;margin-top:-6px}
.vrsta-pilula{
  background:var(--poz2);border:1px solid var(--rub);border-radius:999px;
  padding:7px 15px;color:var(--tiho);font-size:13px
}
.vrsta-pilula:hover{border-color:var(--naglasak);color:var(--naglasak)}
.vrsta-pilula.aktivna{
  background:var(--naglasak);border-color:var(--naglasak);
  color:var(--naglasak-tekst);font-weight:600
}
.objasnjenje-vrste{margin:-6px 0 0}

/* pročitano / nepročitano / obrađeno */
.stupac-stanja{width:1%;white-space:nowrap}
.tocka-neprocitano{
  display:inline-block;width:9px;height:9px;border-radius:50%;
  background:var(--naglasak)
}
tr.neprocitana .naslov-poruke{font-weight:700}
tr.obradjena{opacity:.6}
.kvacica-filtar{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--tiho);cursor:pointer}
.kvacica-filtar input{accent-color:var(--naglasak)}

/* troškovnik iz privitka */
.glavni-sicusni{
  background:var(--naglasak);border:1px solid var(--naglasak);
  color:var(--naglasak-tekst);font-weight:600
}
.troskovnik{margin-top:16px}
.stavka-troskovnika{
  border:1px solid var(--rub);border-radius:var(--r);padding:10px;
  display:flex;flex-direction:column;gap:8px;background:var(--poz2)
}
.stavka-troskovnika.vrsta-radovi{opacity:.85}
.naslov-skupine-t{
  font-weight:700;font-size:13px;letter-spacing:.4px;text-transform:uppercase;
  color:var(--tiho)
}
.stavka-troskovnika.vrsta-naslov{border:0;background:transparent;padding:14px 2px 2px}
.usporedba{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start}
.strana-troskovnika{flex:2 1 320px;display:flex;flex-direction:column;gap:5px;min-width:0}
.strana-nasa{
  flex:1 1 240px;display:flex;flex-direction:column;gap:4px;min-width:0;
  border-left:2px solid var(--rub);padding-left:12px
}
.opis-troskovnika{font-size:13px;white-space:pre-wrap}
.bez-podudaranja{font-style:italic}
.strana-nasa a.kao-gumb{align-self:flex-start}
.odstupanja-mjere{display:flex;flex-direction:column;gap:4px;margin-top:2px}
.veze-sprave{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
/* ---------- alternative uz stavku troškovnika ----------
   Male kartice sa slikom: šifra sama ne kaže ništa, a slika odmah kaže
   o čemu se radi. */
.alternative{margin-top:8px}
.alternative-red{
  display:flex;gap:8px;flex-wrap:wrap;margin-top:6px
}
.alternative .alternativa{
  display:flex;gap:8px;align-items:center;text-align:left;
  background:var(--poz2);border:1px solid var(--rub);border-radius:10px;
  padding:6px 10px 6px 6px;cursor:pointer;min-width:190px;
  transition:border-color .15s, background .15s
}
.alternative .alternativa:hover{border-color:var(--naglasak);background:var(--poz3)}
.alternativa-tekst{display:flex;flex-direction:column;gap:2px;min-width:0}
.alternativa-gore{display:flex;gap:6px;align-items:center}
.alternativa-razlog{
  max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}

/* sličica sprave - i uz aktivni prijedlog i uz alternative */
.slicica{
  width:52px;height:52px;flex:0 0 52px;border-radius:8px;
  background:var(--poz3);display:grid;place-items:center;overflow:hidden
}
.slicica img{
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block
}
.slicica .bez-slike{
  font-size:9px;color:var(--tiho);text-align:center;padding:2px;line-height:1.2
}
.nasa-zaglavlje{display:flex;gap:10px;align-items:center}
.nasa-zaglavlje .slicica{width:60px;height:60px;flex:0 0 60px}
.odstupanja-mjere table.mjere td{padding:1px 10px 1px 0;font-size:12px}

.potvrda-stavke{display:flex;gap:8px;flex-wrap:wrap}
.naslov-skupine-z{
  background:var(--poz3);color:var(--tiho);border-radius:6px;
  padding:2px 8px;font-size:11px;font-weight:600
}
.poruka-troskovnika{font-size:13px;color:var(--upozorenje);margin:0}

/* prijedlozi sprava iz opisa u poruci */
.prijedlozi-sprava{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.prijedlog{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--poz2);border:1px solid var(--rub);border-radius:var(--r);padding:10px
}
.prijedlog img{width:74px;height:74px;object-fit:cover;border-radius:8px;flex:0 0 74px}
.prijedlog-telo{flex:1 1 240px;display:flex;flex-direction:column;gap:4px;min-width:0}
.prijedlog-naslov{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:14px}
.prijedlog-naslov strong{font-family:ui-monospace,Menlo,monospace}
.prijedlog .dodaj-u-ponudu{align-self:center}

/* ---------- kartica "Troškovnik": učitavanje datoteke ---------- */
.ispust{
  border:2px dashed var(--rub);border-radius:var(--r);
  padding:22px 16px;margin-top:12px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  background:var(--poz2);transition:border-color .15s, background .15s
}
.ispust.preko{border-color:var(--naglasak);background:var(--poz3)}
.ispust p{margin:0}
.ispust input[type=file]{display:none}

/* red s prijepisom koji se može preuzeti */
.prijepis-red{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding:8px 10px;margin:8px 0;
  border:1px solid var(--rub);border-radius:var(--r);background:var(--poz2)
}

/* ---------- naziv i materijali uz stavku troškovnika ---------- */
.naziv-stavke{font-weight:600;margin-bottom:2px}
.materijali-stavke{display:flex;gap:5px;align-items:center;flex-wrap:wrap;margin-top:4px}

/* ---------- "Što je pročitano": sudbina svakog retka izvornika ---------- */
.karta-redaka{
  margin-top:14px;border:1px solid var(--rub);border-radius:var(--r);
  padding:10px;background:var(--poz2)
}
.karta-redaka summary{cursor:pointer;font-weight:600}
.karta-redaka summary.ima-propusta{color:var(--lose)}
.karta-redaka .tablica-omot{max-height:420px;overflow:auto;margin-top:8px}
.karta-tablica td{font-size:12px;vertical-align:top}
.karta-tablica td:last-child{
  max-width:640px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.redak-propusten td{background:var(--lose-poz)}
.z.lose{background:var(--lose-poz);color:var(--lose)}
.potrosnja{
  margin-top:10px;padding:6px 10px;border-radius:var(--r);
  background:var(--poz3);display:inline-block
}

/* granica između najboljih rezultata i ostalih koje si otkrio gumbom */
.granica-vise{
  display:flex;align-items:center;gap:10px;
  color:var(--tiho);font-size:12px;text-transform:uppercase;letter-spacing:.5px;
  margin:6px 0
}
.granica-vise::before,.granica-vise::after{
  content:"";flex:1;height:1px;background:var(--rub)
}

/* ---------- logotip ----------
   Logotip ima taman tekst, pa bi se na tamnoj temi izgubio. Zato stoji na
   bijeloj pločici — to izgleda namjerno, a čita se u obje teme.
   Datoteka je PNG s PROZIRNOM pozadinom i bez ruba; ako se mijenja, nova
   mora biti ista takva (inače se u PDF-u vidi bijeli okvir oko loga). */
.logo-vrh{
  height:30px;width:auto;display:block;
  background:#fff;padding:5px 9px;border-radius:8px
}
.logo-prijava{
  height:44px;width:auto;display:block;margin:0 auto 18px;
  background:#fff;padding:8px 14px;border-radius:10px
}
@media (max-width:640px){
  .logo-vrh{height:24px}
}

/* ---------- uređivanje cijena i troškovničke stavke ----------
   Polja su UVIJEK vidljiva, i kad su prazna, jer je pola posla u tome da se
   vidi što nije upisano. Prazno polje pokazuje "/" kao placeholder. */

.urediva{
  margin-top:12px;padding-top:12px;
  border-top:1px solid var(--rub)
}

.cijene-uredive{
  display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center
}

.cijena-polje{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--poz2);border:1px solid var(--rub);border-radius:8px;
  padding:3px 7px;font-size:12px
}
.cijena-polje.istaknuta{
  background:var(--marka-svijetla);border-color:var(--marka)
}
.cijena-ime{color:var(--tiho);font-weight:600;letter-spacing:.02em}
.cijena-polje.istaknuta .cijena-ime{color:var(--marka-tamna)}
.cijena-valuta{color:var(--tiho)}

.unos-cijene{
  width:72px;border:0;background:transparent;color:var(--tekst);
  font:inherit;text-align:right;padding:2px 0
}
.unos-cijene::placeholder{color:var(--tiho);opacity:.7}
.unos-cijene:focus{
  outline:2px solid var(--marka);outline-offset:2px;border-radius:4px
}

.cijena-stanje{font-size:11px;color:var(--tiho)}
.cijena-stanje.dobro-tekst{color:var(--dobro);font-weight:600}
/* greska u ovom retku ne smije dobiti punu crvenu plohu kao .greska blok */
.cijena-stanje.greska{background:none;padding:0;color:var(--lose);font-weight:600}

.polje-stavke{margin-top:10px;display:flex;flex-direction:column;gap:4px}
.polje-stavke label{font-size:12px}
.unos-stavke{
  width:100%;box-sizing:border-box;
  border:1px solid var(--rub);border-radius:8px;background:var(--poz);
  color:var(--tekst);font:inherit;font-size:13px;padding:7px 9px;resize:vertical
}
.unos-stavke:focus{outline:2px solid var(--marka);outline-offset:1px;border-color:var(--marka)}

/* ---------- katalog za projektante ----------
   Zasebna stranica, ista paleta. Projektant samo gleda i preuzima, pa je sve
   posloženo oko jedne stvari: da brzo nađe spravu i kopira njezinu
   troškovničku stavku. */

.omot-projektanti{max-width:1200px;margin:0 auto;padding:16px 20px 40px}

.vrh-lijevo{display:flex;align-items:center;gap:10px}
.vrh-naslov{font-weight:600}
.vrh-desno{display:flex;align-items:center;gap:8px}
.vrh-desno input[type="search"]{
  padding:8px 12px;border:1px solid var(--rub);border-radius:var(--r);
  background:var(--poz);color:var(--tekst);font:inherit;font-size:13px;min-width:220px
}
.vrh-desno input[type="search"]:focus{outline:2px solid var(--marka);outline-offset:1px}

.kategorije-trak{
  display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 20px
}
.kat-gumb{
  padding:6px 12px;border:1px solid var(--rub);border-radius:999px;
  background:var(--poz);color:var(--tekst);font:inherit;font-size:13px;cursor:pointer
}
.kat-gumb:hover{background:var(--poz3)}
.kat-gumb.aktivna{
  background:var(--marka);border-color:var(--marka);color:#fff;font-weight:600
}

/* Skupine po kategoriji nemaju naslov — kategorije se biraju u traci gore. */
.kat-sekcija{margin-bottom:14px}

.mreza-sprava{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr))
}

.kartica-projektant{
  background:var(--poz);border:1px solid var(--rub);border-radius:14px;
  overflow:hidden;box-shadow:var(--sjena);display:flex;flex-direction:column
}

.slika-p{
  background:var(--poz3);height:180px;
  display:flex;align-items:center;justify-content:center;padding:8px
}
.slika-p img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;display:block
}
.slika-p .bez{color:var(--tiho);font-size:12px}

.telo-p{padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px;flex:1}
.telo-p h3{margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px}
.dim-p{margin:0;font-size:13px;color:var(--tiho)}

.stavka-p{
  background:var(--poz2);border:1px solid var(--rub);border-radius:10px;
  padding:10px;display:flex;flex-direction:column;gap:8px
}
.stavka-tekst{
  margin:0;font-size:12.5px;line-height:1.5;white-space:pre-wrap;
  max-height:8.5em;overflow:auto
}

/* Dimenzije: oznaka lijevo, vrijednost desno, jedinica iza svake brojke. */
.dim-p{
  margin:0;display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-size:13px;padding-bottom:2px
}
.dim-oznaka{color:var(--tiho);font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.dim-vrijednost{font-variant-numeric:tabular-nums}

/* Preporučena cijena — istaknuta, ali uvijek uz riječ „preporučena", da je
   projektant ne prenese u troškovnik kao ugovorenu. */
.cijena-p{
  display:flex;flex-direction:column;gap:2px;
  background:var(--marka-svijetla);border:1px solid var(--marka);
  border-radius:10px;padding:8px 10px
}
.cijena-p-oznaka{
  font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--marka-tamna);font-weight:700
}
.cijena-p-iznos{font-size:19px;color:var(--marka-tamna);font-variant-numeric:tabular-nums}
.cijena-p-nota{font-size:11px;color:var(--tiho);line-height:1.4}

/* Preuzimanja: jedno ispod drugog, sa strelicom. */
.preuzimanja{display:flex;flex-direction:column;gap:6px;margin-top:auto;padding-top:4px}
.preuzmi-red{
  display:flex;align-items:center;gap:9px;
  padding:9px 11px;border:1px solid var(--rub);border-radius:10px;
  background:var(--poz2);color:var(--tekst);text-decoration:none;
  font-size:13px;font-weight:500;transition:background .12s,border-color .12s
}
.preuzmi-red:hover{background:var(--marka-svijetla);border-color:var(--marka);color:var(--marka-tamna)}
.preuzmi-red:focus-visible{outline:2px solid var(--marka);outline-offset:2px}
.ikona-preuzmi{width:17px;height:17px;flex:none;color:var(--marka)}
.preuzmi-red:hover .ikona-preuzmi{color:var(--marka-tamna)}
.preuzmi-tekst{flex:1}

.podnozje{
  max-width:1200px;margin:0 auto;padding:20px;border-top:1px solid var(--rub)
}

@media (max-width:640px){
  .vrh-desno{width:100%}
  .vrh-desno input[type="search"]{flex:1;min-width:0}
  .mreza-sprava{grid-template-columns:1fr}
}

.sifra-celija{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600}

.zbroj-objava{
  margin:8px 0 0;padding:8px 10px;border-radius:8px;
  background:var(--poz2);border:1px solid var(--rub);font-size:13px
}

/* Preporučena cijena za projektante — jedina cijena koja izlazi iz kuće,
   pa je i vizualno odvojena od internih. */
/* Interno polje je ISTE veličine kao ostale cijene — samo drugačije obojeno
   i s tankim rubom, da se vidi da je posebno. Veliki prikaz s iznosom i
   napomenom postoji samo na stranici za projektante, ne ovdje. */
.cijena-polje.za-projektante{
  background:var(--dobro-poz);border-color:var(--dobro);
  box-shadow:inset 2px 0 0 var(--dobro)
}
.cijena-polje.za-projektante .cijena-ime{color:var(--dobro);font-weight:700}
.cijena-polje.za-projektante .cijena-valuta{color:var(--dobro)}
.cijena-polje.za-projektante .unos-cijene{font-weight:600}
.cijena-polje.za-projektante .unos-cijene:focus{outline-color:var(--dobro)}

/* Kad troškovničke stavke nema — okvir ostaje, ali blijed i bez gumba.
   Prazna kartica bez ijedne riječi izgleda kao kvar. */
.stavka-p.stavka-prazna{background:transparent;border-style:dashed}
.stavka-p.stavka-prazna .stavka-tekst{color:var(--tiho);font-style:italic}