/* Dodaci paleti za web: zaglavlje, status spremanja, urednik zida, način samo za čitanje. */
.jezik-izbor { border: 1px solid var(--rub2); border-radius: var(--r); padding: 4px 6px; background: var(--ploha); }
.glava a.logo { text-decoration: none; color: inherit; }
.glava a.gumb { text-decoration: none; }
.spremanje { font-size: 12px; color: var(--tekst3); white-space: nowrap; }
.spremanje.ok { color: var(--ok); }
.spremanje.greska { color: var(--los); font-weight: 600; }
.spremanje.upoz { color: var(--upoz); background: var(--upoz-svj); padding: 2px 8px; border-radius: 4px; font-weight: 600; }
/* demo s naslovnice: traka u glavi, gumbi za izvoz vode na registraciju (poruka) */
.demo-traka { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--upoz); background: var(--upoz-svj); padding: 3px 4px 3px 10px; border-radius: 6px; white-space: nowrap; }
.demo-traka[hidden] { display: none; }
.demo-traka a.gumb.glavni { color: #fff; }
.zid-uredi { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 2px; color: var(--tekst2); }
.zid-uredi label { margin: 0 0 0 6px; }
.zid-uredi input { width: 76px; }
.zid-kutovi { display: inline-flex; gap: 3px; }
/* admin gleda tuđu kuhinju: uređivanje isključeno (poslužitelj ionako odbija spremanje) */
body.samo-citanje .radno, body.samo-citanje #niz-alati, body.samo-citanje #zid-uredi, body.samo-citanje #otok-postavke,
body.samo-citanje #novi-zid, body.samo-citanje #parametri, body.samo-citanje #cijene { pointer-events: none; opacity: .75; }

/* 3D prikaz */
.td-alati { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; padding: 4px 0 8px; }
.td-grupa { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.td-info { padding: 7px 12px; margin-bottom: 8px; border: 1px solid var(--rub); border-radius: 6px; background: var(--ploha); font-weight: 600; min-height: 34px; }
.td-info.prazno { font-weight: 400; color: var(--tekst3); }
.tri-d { position: relative; width: 100%; height: calc(100vh - 230px); min-height: 360px; background: var(--ploha); border: 1px solid var(--rub); border-radius: 8px; overflow: hidden; }
.tri-d canvas { display: block; touch-action: none; }
.td-pomoc { margin: 6px 2px 0; }

/* podnožje: poruka iznad gumba, s ✕ za zatvaranje */
.podnozje { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 8px; }
.podnozje-gumbi { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.podnozje .poruka { position: relative; margin-left: 0; flex: none; cursor: auto; padding: 8px 40px 8px 12px; max-height: 38vh; }
.poruka-x { position: absolute; top: 4px; right: 6px; width: 28px; height: 28px; border: 0; border-radius: 6px; background: transparent; font-size: 22px; line-height: 1; color: var(--tekst2); }
.poruka-x:hover { background: rgba(0,0,0,.08); color: var(--tekst); }

/* parametri po grupama */
.par-grupe { display: flex; flex-direction: column; gap: 8px; }
.par-grupa { background: var(--ploha); border: 1px solid var(--rub); border-radius: 8px; }
.par-grupa > summary { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; cursor: pointer; list-style: none; flex-wrap: wrap; }
.par-grupa > summary::-webkit-details-marker { display: none; }
.par-grupa > summary::before { content: '▸'; color: var(--tekst3); width: 12px; }
.par-grupa[open] > summary::before { content: '▾'; }
.par-naslov { font-weight: 600; font-size: 14px; }
.par-opis { color: var(--tekst3); font-size: 12px; }
.par-izm { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--akcent-tamni); background: var(--akcent-svj); border-radius: 10px; padding: 2px 8px; }
.par-sadrzaj { padding: 4px 14px 14px; }

/* katalog */
.kat-alati { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.kat-trazi { flex: 1 1 220px; max-width: 340px; border: 1px solid var(--rub2); border-radius: var(--r); padding: 6px 9px; background: var(--ploha); }
.kat-cilj { display: inline-flex; gap: 6px; align-items: center; color: var(--tekst2); }
.kat-cilj select { border: 1px solid var(--rub2); border-radius: var(--r); padding: 5px 6px; background: var(--ploha); }
.kat-chipovi { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.kat-chip.akt { background: var(--akcent); color: #fff; border-color: var(--akcent-tamni); }
.kat-upozorenje { padding: 8px 12px; border-radius: var(--r); background: var(--upoz-svj); color: var(--upoz); }
.kat-naslov { margin: 16px 0 8px; }
.kat-broj { color: var(--tekst3); font-weight: 400; margin-left: 4px; }
.kat-mreza { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.kat-kartica { display: flex; flex-direction: column; gap: 8px; padding: 10px; background: var(--ploha); border: 1px solid var(--rub); border-radius: 8px; box-shadow: var(--sjena); }
.kat-kartica.ne { opacity: .6; }
.kat-slika { display: flex; align-items: center; justify-content: center; height: 170px; background: #fcfbf8; border-radius: 6px; overflow: hidden; }
.kat-slika img { height: 160px; width: auto; max-width: 100%; object-fit: contain; background: transparent; }
.kat-slika svg { width: 110px; height: 110px; }
.kat-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.kat-naziv b { color: var(--akcent-tamni); }
.kat-info small { color: var(--tekst2); font-size: 11px; }
.kat-nap { color: var(--upoz) !important; }
.kat-dodaj { justify-content: center; }

/* nadgradnja */
.stoji { color: var(--akcent-tamni); font-weight: 600; margin-left: 4px; }
.kat-nad { justify-content: center; border-style: dashed; }
.kat-kartica .kat-dodaj + .kat-dodaj { margin-top: -2px; }
.sel-el { border: 1px solid var(--rub2); border-radius: var(--r); padding: 5px 8px; background: var(--ploha); min-width: 90px; }

.brza.ne-stane { opacity: .45; text-decoration: line-through; }

/* kalkulator visina */
.kalk { background: var(--akcent-svj); border: 1px solid var(--rub); border-radius: 8px; padding: 10px 14px; margin: 6px 0 12px; }
.kalk-naslov { font-weight: 700; margin-bottom: 2px; }
.kalk-polja { display: flex; gap: 16px; flex-wrap: wrap; margin: 6px 0; }
.kalk-polja label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--tekst2); }
.kalk-polja input { width: 120px; border: 1px solid var(--rub2); border-radius: var(--r); padding: 5px 8px; background: var(--ploha); color: var(--tekst); }
.kalk-red { padding: 2px 0; }
.kalk-red small { color: var(--tekst3); }
.kalk-los { color: var(--los); font-weight: 700; }
.kalk-gumbi { display: flex; gap: 8px; margin-top: 8px; }
/* ikona s brojem u glavi: novi računi (admin), primljene kuhinje (zajednicko.js ikonaBroja) */
.ikona-broj { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; color: var(--tekst2); text-decoration: none; flex: none; }
.ikona-broj:hover { background: var(--ploha2); color: var(--akcent-tamni); }
.ikona-broj[hidden] { display: none; }
.ikona-broj svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ikona-broj-n { position: absolute; top: -3px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--los); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--ploha); }