/* =====================================================================
   Centralni katalog — administracija
   Neutralna kamena paleta, jedna boja za akcije (borova zelena),
   sistemski font, bez vanjskih resursa.
   ===================================================================== */

:root {
  --platno: #f2f3f0;
  --povrsina: #ffffff;
  --povrsina-2: #f8f9f7;
  --povrsina-3: #eceee9;
  --tinta: #1d2320;
  --tinta-2: #3d4541;
  --prigusena: #5c6560;
  --blijeda: #8a928d;
  --linija: #dde0db;
  --linija-jaka: #c9cdc7;

  --akcija: #1f5f57;
  --akcija-hover: #174a44;
  --akcija-meka: #e3efec;
  --akcija-prsten: rgba(31, 95, 87, .28);

  --meni: #17302b;
  --meni-tekst: #dfe8e4;
  --meni-prigusen: #9fb3ac;
  --meni-hover: #21403a;
  --meni-aktivno: #2a4f47;

  --opasno: #b42318;
  --opasno-hover: #921c13;
  --opasno-meko: #fdf0ee;
  --opasno-linija: #f1c6c0;
  --uspjeh: #2c7a4d;
  --uspjeh-meko: #e7f4ec;
  --upozorenje: #8a5a00;
  --upozorenje-meko: #fff4dc;
  --upozorenje-linija: #f1d394;

  --r-s: 6px;
  --r: 9px;
  --r-l: 12px;
  --sjena: 0 1px 2px rgba(23, 35, 30, .06);
  --sjena-l: 0 18px 50px rgba(15, 25, 21, .22);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --meni-sirina: 248px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 15px/1.55 var(--font);
  color: var(--tinta);
  background: var(--platno);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--akcija); }
a:hover { color: var(--akcija-hover); }
h1, h2, h3 { line-height: 1.25; margin: 0; }
p { margin: 0 0 12px; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--akcija); outline-offset: 2px; border-radius: 4px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--mono); font-size: 13px; }
.prigusen { color: var(--prigusena); }
.num { font-variant-numeric: tabular-nums; }

.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.i-s { width: 15px; height: 15px; }
.i-l { width: 24px; height: 24px; }
.i-xl { width: 40px; height: 40px; stroke-width: 1.4; }

/* ------------------------------------------------------------------ okvir */
.okvir { display: grid; grid-template-columns: var(--meni-sirina) minmax(0, 1fr); min-height: 100vh; }

.meni {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
  padding: 20px 14px; background: var(--meni); color: var(--meni-tekst);
  z-index: 40;
}
.marka { display: flex; align-items: center; gap: 11px; padding: 2px 8px 20px; color: inherit; text-decoration: none; }
.marka-znak {
  width: 34px; height: 34px; border-radius: 8px; flex: none; display: grid; place-items: center;
  background: #d9e6e1; color: var(--meni);
}
.marka-znak .i { width: 20px; height: 20px; stroke-width: 2; }
.marka-tekst strong { display: block; font-size: 15px; font-weight: 650; color: #fff; }
.marka-tekst span { display: block; font-size: 12.5px; color: var(--meni-prigusen); }

.meni-naslov { margin: 14px 10px 4px; font-size: 12.5px; color: var(--meni-prigusen); }
.meni a, .meni button.meni-stavka {
  display: flex; align-items: center; gap: 11px; width: 100%;
  min-height: 40px; padding: 8px 10px; border: 0; border-radius: 8px;
  background: none; color: var(--meni-tekst); font: inherit; font-size: 14.5px; text-align: left;
  text-decoration: none; cursor: pointer;
}
.meni a:hover, .meni button.meni-stavka:hover { background: var(--meni-hover); color: #fff; }
.meni a[aria-current="page"] { background: var(--meni-aktivno); color: #fff; font-weight: 600; }
.meni a .i, .meni button.meni-stavka .i { color: var(--meni-prigusen); }
.meni a[aria-current="page"] .i { color: #bfe0d6; }
.meni-firma { margin: 8px 4px 2px; padding: 10px 12px; border-radius: 9px; background: rgba(255,255,255,.06); }
.meni-firma small { display: block; font-size: 12px; color: var(--meni-prigusen); }
.meni-firma strong { display: block; font-size: 14px; color: #fff; overflow-wrap: anywhere; }
.meni-dno { margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.meni-korisnik { display: flex; align-items: center; gap: 10px; padding: 6px 10px 8px; }
.inicijal { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #355b52; color: #e7f1ed; font-weight: 650; font-size: 13px; text-transform: uppercase; flex: none; }
.meni-korisnik div span { display: block; font-size: 13.5px; overflow-wrap: anywhere; }
.meni-korisnik div small { display: block; font-size: 12px; color: var(--meni-prigusen); }

.glavno { min-width: 0; display: flex; flex-direction: column; }
.traka-gore { display: none; }
.zastor { display: none; }

.traka-firma {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 32px; background: var(--upozorenje-meko); border-bottom: 1px solid var(--upozorenje-linija);
  color: #5d3d00; font-size: 14px;
}
.traka-firma .i { color: var(--upozorenje); }
.traka-firma strong { font-weight: 650; }
.traka-firma form { margin-left: auto; }

.sadrzaj { width: 100%; max-width: 1320px; margin: 0 auto; padding: 28px 32px 72px; }

.zaglavlje { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 24px; }
.zaglavlje-tekst { min-width: 0; }
.mrvice { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 13.5px; color: var(--prigusena); }
.mrvice a { color: var(--prigusena); text-decoration: none; }
.mrvice a:hover { color: var(--akcija); text-decoration: underline; }
.mrvice .i { width: 13px; height: 13px; }
.naslov { font-size: 26px; font-weight: 650; letter-spacing: -.01em; overflow-wrap: anywhere; }
.podnaslov { margin: 6px 0 0; color: var(--prigusena); }
.akcije-zaglavlja { display: flex; gap: 10px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ dugmad */
.dugme {
  --h: 40px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--h); padding: 0 16px; border-radius: var(--r);
  border: 1px solid var(--linija-jaka); background: var(--povrsina); color: var(--tinta);
  font: inherit; font-size: 14.5px; font-weight: 550; line-height: 1.1; text-decoration: none;
  white-space: nowrap; cursor: pointer; transition: background-color .15s, border-color .15s;
}
.dugme:hover { background: var(--povrsina-2); border-color: #b9beb7; color: var(--tinta); }
.dugme:disabled, .dugme[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.dugme-primarno { background: var(--akcija); border-color: var(--akcija); color: #fff; }
.dugme-primarno:hover { background: var(--akcija-hover); border-color: var(--akcija-hover); color: #fff; }
.dugme-tiho { background: transparent; border-color: transparent; color: var(--tinta-2); }
.dugme-tiho:hover { background: var(--povrsina-3); border-color: transparent; }
.dugme-opasno { background: var(--opasno); border-color: var(--opasno); color: #fff; }
.dugme-opasno:hover { background: var(--opasno-hover); border-color: var(--opasno-hover); color: #fff; }
.dugme-opasno-obrub { color: var(--opasno); border-color: var(--opasno-linija); }
.dugme-opasno-obrub:hover { background: var(--opasno-meko); color: var(--opasno-hover); border-color: #e8a79e; }
.dugme-m { --h: 34px; padding: 0 12px; font-size: 13.5px; border-radius: 8px; }
.dugme-ikona { width: var(--h); padding: 0; }
.dugme-puno { width: 100%; }
.dugme.radi { position: relative; color: transparent !important; pointer-events: none; }
.dugme.radi::after {
  content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--tinta); border-right-color: transparent; animation: okret .7s linear infinite;
}
.dugme-primarno.radi::after, .dugme-opasno.radi::after { border-color: #fff; border-right-color: transparent; }
@keyframes okret { to { transform: rotate(360deg); } }
form.u-redu { display: inline; margin: 0; }

/* ------------------------------------------------------------------ kartice i sekcije */
.ploca { background: var(--povrsina); border: 1px solid var(--linija); border-radius: var(--r-l); box-shadow: var(--sjena); }
.ploca-glava { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid var(--linija); }
.ploca-glava h2 { font-size: 16px; font-weight: 650; }
.ploca-glava p { margin: 2px 0 0; font-size: 13.5px; color: var(--prigusena); }
.ploca-tijelo { padding: 20px; }
.ploca + .ploca { margin-top: 20px; }

.oznaka {
  display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 0 9px;
  border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  background: var(--povrsina-3); color: var(--tinta-2);
}
.oznaka .i { width: 13px; height: 13px; }
.oznaka-tacka::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.oznaka-uspjeh { background: var(--uspjeh-meko); color: var(--uspjeh); }
.oznaka-neutralna { background: #eceeeb; color: #545c58; }
.oznaka-opasno { background: var(--opasno-meko); color: var(--opasno); }
.oznaka-akcija { background: var(--akcija-meka); color: var(--akcija-hover); }
.oznaka-upozorenje { background: var(--upozorenje-meko); color: var(--upozorenje); }

/* ------------------------------------------------------------------ forme */
.polje { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.polje > label, .polje > .oznaka-polja { font-size: 14px; font-weight: 600; color: var(--tinta-2); }
.opcionalno { font-weight: 400; color: var(--blijeda); }
.obavezno { color: var(--opasno); font-weight: 600; }
.pomoc { margin: 0; font-size: 13px; color: var(--prigusena); }
.greska-polja { margin: 0; display: flex; gap: 6px; align-items: flex-start; font-size: 13px; color: var(--opasno); }
.greska-polja .i { width: 15px; height: 15px; margin-top: 2px; }
.unos, .izbor, .tekst-polje {
  width: 100%; min-height: 42px; padding: 9px 12px;
  border: 1px solid var(--linija-jaka); border-radius: var(--r); background: var(--povrsina);
  color: var(--tinta); font: inherit; font-size: 15px;
}
.tekst-polje { min-height: 120px; resize: vertical; line-height: 1.55; }
.izbor { appearance: none; padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235c6560' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }
.unos:hover, .izbor:hover, .tekst-polje:hover { border-color: #b4bab2; }
.unos:focus, .izbor:focus, .tekst-polje:focus { outline: none; border-color: var(--akcija); box-shadow: 0 0 0 3px var(--akcija-prsten); }
.unos[readonly] { background: var(--povrsina-2); color: var(--prigusena); }
.unos:disabled { background: var(--povrsina-2); color: var(--blijeda); cursor: not-allowed; }
.polje.ima-gresku .unos, .polje.ima-gresku .izbor, .polje.ima-gresku .tekst-polje { border-color: var(--opasno); }
.grupa-unosa { position: relative; display: flex; }
.grupa-unosa .unos { padding-right: 56px; }
.sufiks { position: absolute; right: 1px; top: 1px; bottom: 1px; display: grid; place-items: center; padding: 0 12px; border-left: 1px solid var(--linija); border-radius: 0 8px 8px 0; background: var(--povrsina-2); color: var(--prigusena); font-weight: 600; font-size: 13.5px; pointer-events: none; }
.lozinka-omot { position: relative; }
.lozinka-omot .unos { padding-right: 46px; }
.lozinka-omot .prikazi-lozinku { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); }
.mreza-forme { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mreza-forme .puna { grid-column: 1 / -1; }
.forma-red { display: flex; flex-direction: column; gap: 16px; }
.akcije-forme { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 4px; }

.segment { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px; border-radius: 10px; background: var(--povrsina-3); border: 1px solid var(--linija); }
.segment label { position: relative; cursor: pointer; }
.segment input { position: absolute; opacity: 0; inset: 0; }
.segment span { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 8px; font-size: 14px; font-weight: 550; color: var(--tinta-2); }
.segment input:checked + span { background: var(--povrsina); color: var(--tinta); box-shadow: 0 0 0 1px var(--linija), var(--sjena); }
.segment input:focus-visible + span { outline: 2px solid var(--akcija); outline-offset: 1px; }

.prekidac { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border: 1px solid var(--linija); border-radius: 11px; cursor: pointer; background: var(--povrsina); }
.prekidac input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.prekidac-staza { position: relative; flex: none; width: 40px; height: 24px; margin-top: 1px; border-radius: 999px; background: #cbd0ca; transition: background .15s; }
.prekidac-staza::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.prekidac input:checked + .prekidac-staza { background: var(--akcija); }
.prekidac input:checked + .prekidac-staza::after { transform: translateX(16px); }
.prekidac input:focus-visible + .prekidac-staza { outline: 2px solid var(--akcija); outline-offset: 2px; }
.prekidac strong { display: block; font-size: 14.5px; }
.prekidac small { display: block; font-size: 13px; color: var(--prigusena); }

.obavijest { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--linija); background: var(--povrsina-2); font-size: 14px; color: var(--tinta-2); }
.obavijest .i { margin-top: 1px; color: var(--akcija); }
.obavijest-greska { background: var(--opasno-meko); border-color: var(--opasno-linija); color: #7a1a12; }
.obavijest-greska .i { color: var(--opasno); }
.obavijest-upozorenje { background: var(--upozorenje-meko); border-color: var(--upozorenje-linija); color: #5d3d00; }
.obavijest-upozorenje .i { color: var(--upozorenje); }
.obavijest p:last-child { margin: 0; }

/* ------------------------------------------------------------------ toast obavijesti */
.toastovi { position: fixed; right: 20px; bottom: 20px; z-index: 300; display: flex; flex-direction: column; gap: 10px; width: min(420px, calc(100vw - 32px)); }
.toast { display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px 13px 16px; border-radius: 11px; background: #1f2724; color: #eef3f0; box-shadow: var(--sjena-l); font-size: 14.5px; animation: toast-ulaz .2s ease-out; }
.toast-ikona { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; }
.toast-ikona .i { width: 14px; height: 14px; stroke-width: 2.5; }
.toast-uspjeh .toast-ikona { background: #3b9466; }
.toast-greska .toast-ikona { background: #d1453a; }
.toast-upozorenje .toast-ikona { background: #c48a1e; }
.toast-info .toast-ikona { background: #3f7c72; }
.toast-tekst { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.toast-zatvori { flex: none; border: 0; background: none; color: #a9b8b2; cursor: pointer; padding: 2px; border-radius: 6px; }
.toast-zatvori:hover { color: #fff; }
.toast.odlazi { opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
@keyframes toast-ulaz { from { opacity: 0; transform: translateY(8px); } }

/* ------------------------------------------------------------------ prozori (dialog) */
dialog { padding: 0; border: 0; background: transparent; color: inherit; max-width: none; max-height: none; }
dialog::backdrop { background: rgba(16, 26, 22, .5); }
.prozor { width: min(520px, calc(100vw - 24px)); margin: auto; }
.prozor-siroki { width: min(1040px, calc(100vw - 24px)); }
.prozor[open] { display: flex; }
.prozor-kutija { display: flex; flex-direction: column; width: 100%; max-height: calc(100dvh - 24px); background: var(--povrsina); border-radius: 14px; box-shadow: var(--sjena-l); overflow: hidden; }
.prozor-glava { display: flex; gap: 14px; align-items: flex-start; padding: 20px 22px 0; }
.prozor-glava h2 { font-size: 18px; font-weight: 650; }
.prozor-glava p { margin: 4px 0 0; color: var(--prigusena); font-size: 14px; }
.prozor-glava .dugme-ikona { margin: -6px -8px 0 auto; }
.prozor-ikona { flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--akcija-meka); color: var(--akcija); }
.prozor-ikona.opasno { background: var(--opasno-meko); color: var(--opasno); }
.prozor-tijelo { padding: 18px 22px; overflow-y: auto; }
.prozor-dno { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding: 14px 22px; border-top: 1px solid var(--linija); background: var(--povrsina-2); }

/* ------------------------------------------------------------------ alatna traka i filteri */
.statistika { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--linija); border-radius: var(--r-l); background: var(--povrsina); color: inherit; text-decoration: none; }
.stat:hover { border-color: var(--linija-jaka); color: inherit; }
.stat[aria-current="true"] { border-color: var(--akcija); box-shadow: 0 0 0 3px var(--akcija-prsten); }
.stat span { font-size: 13px; color: var(--prigusena); }
.stat strong { font-size: 24px; font-weight: 650; font-variant-numeric: tabular-nums; }
.stat.upozorenje strong { color: var(--upozorenje); }

.filteri { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 12px; margin-bottom: 18px; background: var(--povrsina); border: 1px solid var(--linija); border-radius: var(--r-l); }
.filteri .polje { flex: 1 1 180px; }
.filteri .polje.siroko { flex: 2 1 260px; }
.filteri .polje > label { font-size: 13px; font-weight: 550; color: var(--prigusena); }
.filteri .dugmad-filtera { display: flex; gap: 8px; }
.unos-ikona { position: relative; }
.unos-ikona > .i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--blijeda); pointer-events: none; }
.unos-ikona .unos { padding-left: 38px; }
.rezultat-info { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 2px 14px; font-size: 14px; color: var(--prigusena); }
.prikaz-izbor { display: inline-flex; gap: 3px; padding: 3px; border-radius: 10px; background: var(--povrsina-3); border: 1px solid var(--linija); }
.prikaz-izbor button { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 11px; border: 0; border-radius: 8px; background: none; color: var(--prigusena); font: inherit; font-size: 13.5px; font-weight: 550; cursor: pointer; }
.prikaz-izbor button[aria-pressed="true"] { background: var(--povrsina); color: var(--tinta); box-shadow: 0 0 0 1px var(--linija); }

/* ------------------------------------------------------------------ tabele */
.tabela-omot { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tabela th { text-align: left; font-size: 13px; font-weight: 600; color: var(--prigusena); padding: 11px 16px; background: var(--povrsina-2); border-bottom: 1px solid var(--linija); white-space: nowrap; }
.tabela td { padding: 12px 16px; border-bottom: 1px solid var(--linija); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover td { background: #fafbf9; }
.tabela .desno { text-align: right; }
.tabela .akcije-celije { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.celija-naziv strong { display: block; font-weight: 600; overflow-wrap: anywhere; }
.celija-naziv a { color: var(--tinta); text-decoration: none; }
.celija-naziv a:hover { color: var(--akcija); text-decoration: underline; }
.celija-naziv .mono { color: var(--blijeda); }

/* ------------------------------------------------------------------ proizvodi: kartice */
.proizvodi.kartice { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.kartica { position: relative; display: flex; flex-direction: column; background: var(--povrsina); border: 1px solid var(--linija); border-radius: var(--r-l); box-shadow: var(--sjena); overflow: hidden; }
.kartica-slika { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--povrsina-3); }
.kartica-slika { overflow: hidden; }
.kartica-slika img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kartica.skriven .kartica-slika img { filter: grayscale(.6); opacity: .75; }
.bez-slike { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #9aa39d; font-size: 13px;
  background: repeating-linear-gradient(135deg, #eff1ee 0 12px, #eaece8 12px 24px); }
.bez-slike .i { width: 32px; height: 32px; stroke-width: 1.4; }
.kartica-oznake { position: absolute; left: 10px; top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.kartica-oznake .oznaka { box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.kartica-broj { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 0 9px; border-radius: 999px; background: rgba(20, 30, 26, .72); color: #fff; font-size: 12.5px; font-weight: 600; }
.kartica-broj .i { width: 13px; height: 13px; }
.kartica-tijelo { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 0; flex: 1; }
.kartica-kat { font-size: 13px; color: var(--prigusena); }
.kartica-naslov { font-size: 16px; font-weight: 650; overflow-wrap: anywhere; }
.kartica-naslov a { color: var(--tinta); text-decoration: none; }
.kartica-naslov a:hover { color: var(--akcija); }
.kartica-cijena { font-weight: 600; margin-top: 2px; }
.kartica-cijena.na-upit { color: var(--prigusena); font-weight: 500; }
.kartica-akcije { display: flex; gap: 8px; align-items: center; padding: 14px 16px 16px; }
.kartica-akcije .dugme-uredi { flex: 1; }

.proizvodi.lista { background: var(--povrsina); border: 1px solid var(--linija); border-radius: var(--r-l); box-shadow: var(--sjena); }
.proizvodi.lista .kartica { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 16px; border: 0; border-bottom: 1px solid var(--linija); border-radius: 0; box-shadow: none; overflow: visible; }
.proizvodi.lista .kartica:last-child { border-bottom: 0; }
.proizvodi.lista .kartica-slika { width: 88px; border-radius: 7px; overflow: hidden; }
.proizvodi.lista .kartica-oznake, .proizvodi.lista .kartica-broj, .proizvodi.lista .bez-slike span { display: none; }
.proizvodi.lista .bez-slike .i { width: 22px; height: 22px; }
.proizvodi.lista .kartica-tijelo { padding: 0; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.proizvodi.lista .kartica-naslov { flex-basis: 100%; font-size: 15px; }
.proizvodi.lista .kartica-akcije { padding: 0; }
.proizvodi.lista .kartica-akcije .dugme-uredi { flex: none; }
.kartica-statusi { display: flex; gap: 6px; flex-wrap: wrap; }
.proizvodi.kartice .kartica-statusi { display: none; }

/* meni dodatnih akcija */
.meni-akcija { position: relative; }
.meni-akcija > summary { list-style: none; }
.meni-akcija > summary::-webkit-details-marker { display: none; }
.meni-lista { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 230px; padding: 6px; border-radius: 11px; background: var(--povrsina); border: 1px solid var(--linija); box-shadow: var(--sjena-l); }
.meni-lista.gore { top: auto; bottom: calc(100% + 6px); }
.meni-lista a, .meni-lista button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--tinta); font: inherit; font-size: 14px; text-align: left; text-decoration: none; cursor: pointer; }
.meni-lista a:hover, .meni-lista button:hover { background: var(--povrsina-3); color: var(--tinta); }
.meni-lista .i { color: var(--prigusena); }
.meni-lista .opasno, .meni-lista .opasno .i { color: var(--opasno); }
.meni-lista hr { border: 0; border-top: 1px solid var(--linija); margin: 6px 4px; }
.meni-lista form { margin: 0; }

.paginacija { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 24px; }
.paginacija a, .paginacija span { display: inline-grid; place-items: center; min-width: 38px; height: 38px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--linija); background: var(--povrsina); color: var(--tinta); text-decoration: none; font-size: 14px; font-variant-numeric: tabular-nums; }
.paginacija a:hover { border-color: var(--linija-jaka); }
.paginacija [aria-current="page"] { background: var(--akcija); border-color: var(--akcija); color: #fff; font-weight: 600; }
.paginacija .tri { border: 0; background: none; color: var(--blijeda); }

.prazno { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 52px 20px; border: 1px dashed var(--linija-jaka); border-radius: var(--r-l); background: var(--povrsina); color: var(--prigusena); }
.prazno .i { color: #a8b1ab; margin-bottom: 6px; }
.prazno h2, .prazno h3 { font-size: 17px; color: var(--tinta); font-weight: 650; }
.prazno p { max-width: 46ch; }

/* ------------------------------------------------------------------ forma proizvoda */
.raspored-proizvoda { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.kolona { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.dno-forme {
  position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 20px; padding: 12px 16px; background: rgba(255,255,255,.95);
  border: 1px solid var(--linija); border-radius: var(--r-l); box-shadow: 0 -6px 24px rgba(23,35,30,.08);
}
.dno-forme .stanje { margin-right: auto; font-size: 13.5px; color: var(--prigusena); }
.dno-forme.izmijenjeno .stanje { color: var(--upozorenje); font-weight: 600; }
.podaci-lista { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0; font-size: 14px; }
.podaci-lista dt { color: var(--prigusena); }
.podaci-lista dd { margin: 0; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ galerija */
.zona-uploada {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 28px 18px; border: 2px dashed #c3cbc4; border-radius: var(--r-l); background: var(--povrsina-2); text-align: center; cursor: pointer;
}
.zona-uploada:hover, .zona-uploada.preko { border-color: var(--akcija); background: #f1f7f5; }
.zona-uploada input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.zona-uploada .i { color: var(--akcija); }
.zona-uploada strong { font-size: 15.5px; }
.zona-uploada small { color: var(--prigusena); font-size: 13px; }
.zona-uploada.onemoguceno { opacity: .6; cursor: not-allowed; }
.zona-uploada.onemoguceno input { cursor: not-allowed; }
.red-uploada { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.stavka-uploada { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px; border: 1px solid var(--linija); border-radius: 10px; background: var(--povrsina); overflow: hidden; }
.stavka-uploada img, .stavka-uploada .bez-pregleda { width: 56px; height: 42px; object-fit: cover; border-radius: 6px; background: var(--povrsina-3); }
.stavka-uploada .ime { font-size: 13.5px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stavka-uploada .meta { font-size: 12.5px; color: var(--prigusena); }
.stavka-uploada.neispravna { border-color: var(--opasno-linija); background: var(--opasno-meko); }
.stavka-uploada.neispravna .meta, .stavka-uploada.greska .meta { color: var(--opasno); }
.stavka-uploada.gotovo { border-color: #b9dcc8; background: var(--uspjeh-meko); }
.stavka-uploada.gotovo .meta { color: var(--uspjeh); }
.traka-napretka { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--akcija); transition: width .15s; }

.galerija { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-top: 16px; }
.slika-kartica { display: flex; flex-direction: column; border: 1px solid var(--linija); border-radius: var(--r-l); background: var(--povrsina); overflow: hidden; }
.slika-kartica.glavna { border-color: var(--akcija); box-shadow: 0 0 0 1px var(--akcija); }
.slika-kartica.vuce { opacity: .4; }
.slika-okvir { position: relative; aspect-ratio: 4 / 3; background: var(--povrsina-3); }
.slika-okvir { overflow: hidden; }
.slika-okvir img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slika-okvir .nedostupna { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--opasno); font-size: 13px; background: var(--opasno-meko); }
.slika-oznake { position: absolute; inset: 10px 10px auto; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
.redni { min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center; background: rgba(20,30,26,.72); color: #fff; font-size: 12.5px; font-weight: 650; }
.oznaka-glavna { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--akcija); color: #fff; font-size: 12.5px; font-weight: 600; }
.oznaka-glavna .i { width: 13px; height: 13px; }
.rucka { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: none; align-items: center; gap: 5px; height: 28px; padding: 0 11px; border: 0; border-radius: 999px; background: rgba(255,255,255,.95); color: var(--tinta-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: grab; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
@media (hover: hover) and (pointer: fine) { .moze-vuci .rucka { display: inline-flex; } }
.slika-tijelo { padding: 12px 14px 4px; font-size: 13.5px; }
.slika-alt { color: var(--tinta-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; }
.slika-alt.prazno-polje { color: var(--upozorenje); }
.slika-akcije { display: flex; gap: 6px; align-items: center; padding: 10px 14px 14px; margin-top: auto; flex-wrap: wrap; }
.slika-akcije .rastegni { flex: 1 1 auto; }

.ured-slike { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: 22px; }
.fokus { position: relative; display: grid; place-items: center; min-height: 240px; border-radius: 10px; background: #1b221f; overflow: hidden; touch-action: none; user-select: none; }
.fokus-unutra { position: relative; line-height: 0; cursor: crosshair; }
.fokus-unutra img { max-width: 100%; max-height: 56vh; object-fit: contain; }
.fokus-tacka { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.4); pointer-events: none; }
.izrezi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.izrez { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--prigusena); text-align: center; }
.izrez div { overflow: hidden; border-radius: 6px; border: 1px solid var(--linija); background: var(--povrsina-3); }
.izrez div.r43 { aspect-ratio: 4 / 3; }
.izrez div.r11 { aspect-ratio: 1 / 1; }
.izrez div.r169 { aspect-ratio: 16 / 9; }
.izrez div { position: relative; }
.izrez img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* redoslijed (prevlačenje) */
.lista-redoslijeda { list-style: none; margin: 0; padding: 0; }
.lista-redoslijeda li { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--linija); background: var(--povrsina); }
.lista-redoslijeda li:last-child { border-bottom: 0; }
.lista-redoslijeda li.vuce { opacity: .4; }
.lista-redoslijeda .rucka-reda { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; color: var(--blijeda); cursor: grab; }
.lista-redoslijeda .rucka-reda:hover { background: var(--povrsina-3); color: var(--tinta-2); }
.lista-redoslijeda .minijatura { width: 56px; height: 42px; flex: none; border-radius: 6px; overflow: hidden; background: var(--povrsina-3); }
.lista-redoslijeda .minijatura img { width: 100%; height: 100%; object-fit: cover; }
.lista-redoslijeda .tekst { flex: 1; min-width: 0; }
.lista-redoslijeda .tekst strong { display: block; overflow-wrap: anywhere; }
.lista-redoslijeda .strelice { display: flex; gap: 4px; }

/* ------------------------------------------------------------------ prijava */
.prijava-stranica { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; background: var(--platno); }
.prijava-kutija { width: min(400px, 100%); }
.prijava-kutija .marka { justify-content: flex-start; padding: 0 0 24px; color: var(--tinta); }
.prijava-kutija .marka-znak { background: var(--meni); color: #d9e6e1; }
.prijava-kutija .marka-tekst strong { color: var(--tinta); }
.prijava-kutija .marka-tekst span { color: var(--prigusena); }
.prijava-kutija .ploca-tijelo { padding: 26px; }
.prijava-kutija h1 { font-size: 22px; font-weight: 650; margin-bottom: 4px; }

/* ------------------------------------------------------------------ odgovorni prikaz */
@media (max-width: 1199px) {
  .okvir { grid-template-columns: minmax(0, 1fr); }
  .meni { position: fixed; left: 0; top: 0; bottom: 0; width: min(290px, 86vw); height: auto; transform: translateX(-102%); transition: transform .2s ease; box-shadow: var(--sjena-l); }
  body.meni-otvoren .meni { transform: none; }
  body.meni-otvoren .zastor { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(16,26,22,.45); }
  .traka-gore { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 30; padding: 8px 14px; background: var(--povrsina); border-bottom: 1px solid var(--linija); }
  .traka-gore .marka { padding: 0; color: var(--tinta); }
  .traka-gore .marka-znak { background: var(--meni); color: #d9e6e1; width: 30px; height: 30px; }
  .traka-gore .marka-tekst strong { color: var(--tinta); font-size: 14.5px; }
  .traka-gore .marka-tekst span { display: none; }
  .sadrzaj { padding: 22px 20px 64px; }
  .traka-firma { padding: 9px 20px; }
  .statistika { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .raspored-proizvoda { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .sadrzaj { padding: 18px 16px 64px; }
  .traka-firma { padding: 8px 16px; }
  .naslov { font-size: 22px; }
  .zaglavlje { align-items: flex-start; }
  .akcije-zaglavlja { width: 100%; }
  .akcije-zaglavlja .dugme { flex: 1 1 auto; }
  .statistika { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .statistika .stat:first-child { grid-column: 1 / -1; }
  .stat strong { font-size: 20px; }
  .mreza-forme { grid-template-columns: minmax(0, 1fr); }
  .filteri .polje, .filteri .polje.siroko { flex: 1 1 100%; }
  .filteri .dugmad-filtera { width: 100%; }
  .filteri .dugmad-filtera .dugme { flex: 1; }
  .proizvodi.kartice { grid-template-columns: minmax(0, 1fr); }
  .proizvodi.lista .kartica { grid-template-columns: 64px minmax(0, 1fr); }
  .proizvodi.lista .kartica-slika { width: 64px; }
  .proizvodi.lista .kartica-akcije { grid-column: 1 / -1; }
  .proizvodi.lista .kartica-akcije .dugme-uredi { flex: 1; }
  .galerija { grid-template-columns: minmax(0, 1fr); }
  .ured-slike { grid-template-columns: minmax(0, 1fr); }
  .prozor-dno .dugme { flex: 1 1 auto; }
  .dno-forme .stanje { width: 100%; }
  .dno-forme .dugme { flex: 1 1 auto; }
  .toastovi { left: 16px; right: 16px; width: auto; bottom: 16px; }

  /* tabele postaju kartice */
  .tabela.prilagodljiva thead { display: none; }
  .tabela.prilagodljiva, .tabela.prilagodljiva tbody, .tabela.prilagodljiva tr, .tabela.prilagodljiva td { display: block; width: 100%; }
  .tabela.prilagodljiva tr { padding: 12px 16px; border-bottom: 1px solid var(--linija); }
  .tabela.prilagodljiva tr:last-child { border-bottom: 0; }
  .tabela.prilagodljiva td { padding: 3px 0; border: 0; }
  .tabela.prilagodljiva td[data-oznaka]::before { content: attr(data-oznaka) ": "; color: var(--prigusena); font-size: 13px; }
  .tabela.prilagodljiva td.celija-naziv::before { content: none; }
  .tabela.prilagodljiva .akcije-celije { justify-content: flex-start; margin-top: 8px; }
  .tabela.prilagodljiva .desno { text-align: left; }
  .tabela.prilagodljiva tbody tr:hover td { background: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
.odmak-gore { margin-top: 14px; }

/* fieldset kao polje (npr. tip cijene) */
fieldset.polje { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.polje > legend { padding: 0; margin-bottom: 6px; }
.polje > .dugme { align-self: flex-start; }
.statistika.dvije { grid-template-columns: repeat(2, minmax(0, 260px)); }
@media (max-width: 767px) {
  .statistika.dvije { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .statistika.dvije .stat:first-child { grid-column: auto; }
}