/* NANO Prodaja – stil prema konceptu (Dokumentacija/Dizajn, IBM Plex, topli sivi tonovi).
   Ovdje su samo zajedničke klase ljuske (bez prefiksa); ekrani ubacuju svoj stil s vlastitim
   prefiksom klasa – popis zauzetih prefiksa je u zaglavlju app.js. */

:root {
  --pozadina: #f6f5f1;
  --povrsina: #ffffff;
  --povrsina-2: #f0eee9;
  --povrsina-3: #efede8;
  --rub: #e2e0da;
  --rub-jaci: #d9d6cf;
  --tekst: #1d1c1a;
  --tekst-2: #4a4843;
  --tekst-3: #6b6862;
  --tekst-4: #9a978f;
  --akcent: oklch(0.6 0.13 45);
  --akcent-tamni: oklch(0.5 0.13 45);
  --akcent-svijetli: oklch(0.93 0.04 45);
  --crveno: oklch(0.52 0.17 27);
  --crveno-pozadina: oklch(0.96 0.025 27);
  --zeleno: oklch(0.4 0.1 150);
  --zeleno-pozadina: oklch(0.94 0.05 150);
  --plavo: oklch(0.42 0.1 250);
  --plavo-pozadina: oklch(0.94 0.03 250);
  --zuto: oklch(0.45 0.1 70);
  --zuto-pozadina: oklch(0.94 0.05 80);
  --napomena: oklch(0.96 0.05 92);
  --napomena-rub: oklch(0.88 0.08 92);
  --ljubicasto: oklch(0.42 0.1 300);
  --ljubicasto-pozadina: oklch(0.93 0.05 300);
  --sjena: 0 10px 30px -16px rgba(0, 0, 0, .2);
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --sans: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
  --r-mali: 6px;
  --r: 8px;
  --r-veci: 12px;
  --r-velik: 20px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--pozadina);
  color: var(--tekst);
  font: 400 14px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--akcent-tamni); text-decoration: none; }
a:hover { color: var(--tekst); text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; letter-spacing: -.01em; }
h1 { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: 18px; font-weight: 600; }
h3 { font-size: 15px; font-weight: 600; }
.mono, .oznaka {
  font: 500 12px var(--mono);
  letter-spacing: .06em;
  color: var(--tekst-3);
  text-transform: uppercase;
}
.sivo { color: var(--tekst-3); }
.malo { font-size: 12px; }
.crveno { color: var(--crveno); }
.skriveno { display: none !important; }
.razmak { flex: 1; }
.red { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.stupac { display: flex; flex-direction: column; gap: 8px; }
.mreza-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ---------------------------------------------------------------- ljuska */

.ljuska { min-height: 100%; display: flex; flex-direction: column; }
.traka {
  height: 60px; background: var(--povrsina); border-bottom: 1px solid var(--rub);
  display: flex; align-items: center; gap: 24px; padding: 0 24px;
  position: sticky; top: 0; z-index: 20;
}
.traka .logo { font-weight: 700; font-size: 16px; letter-spacing: .02em; white-space: nowrap; color: var(--tekst); }
.traka .logo span { font-weight: 400; color: var(--tekst-3); }
/* Ako ni uži razmaci ispod ne pomognu, skraćuje se navigacija (krajnja mjera), nikad cijela stranica. */
.traka nav { display: flex; gap: 18px; font-size: 14px; color: var(--tekst-2); height: 100%; min-width: 0; overflow: hidden; margin-right: auto; }
.traka nav a { color: var(--tekst-2); display: flex; align-items: center; border-bottom: 2px solid transparent; padding-top: 2px; text-decoration: none; position: relative; white-space: nowrap; flex-shrink: 0; }
.traka nav a.aktivno { color: var(--tekst); font-weight: 600; border-bottom-color: var(--tekst); }
.traka nav a .brojac { position: absolute; top: 12px; right: -12px; }
.traka nav a:has(> .brojac) { margin-right: 12px; } /* značka strši desno – da je overflow nav-a ne odreže */
.prekidac {
  display: flex; background: var(--povrsina-2); border-radius: var(--r); padding: 3px; font-size: 13px;
}
.prekidac button {
  border: 0; background: none; padding: 5px 10px; border-radius: var(--r-mali); color: var(--tekst-3);
  cursor: pointer; display: flex; align-items: center; gap: 6px; white-space: nowrap;
}
.prekidac button.aktivno { background: var(--povrsina); color: var(--tekst); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.tocka { width: 7px; height: 7px; border-radius: 4px; display: inline-block; background: var(--akcent); flex-shrink: 0; }
.trazilica { position: relative; }
.trazilica input {
  width: clamp(150px, 16vw, 260px); height: 36px; border-radius: var(--r); border: 1px solid var(--rub); padding: 0 12px;
  background: var(--povrsina); outline: none;
}
.trazilica input:focus { border-color: var(--tekst-3); }
.trazilica .rezultati {
  position: absolute; right: 0; top: 42px; width: 520px; max-height: 70vh; overflow: auto;
  background: var(--povrsina); border: 1px solid var(--rub); border-radius: var(--r-veci);
  box-shadow: var(--sjena); padding: 8px 0; z-index: 30;
}
.trazilica .rezultati .skupina { padding: 8px 16px 4px; }
.trazilica .rezultati .stavka { display: block; padding: 7px 16px; color: var(--tekst); text-decoration: none; }
.trazilica .rezultati .stavka:hover, .trazilica .rezultati .stavka.oznaceno { background: var(--povrsina-2); }
.avatar {
  width: 34px; height: 34px; border-radius: 17px; background: var(--tekst); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600;
  border: 0; cursor: pointer; flex-shrink: 0;
}
.izbornik {
  position: absolute; background: var(--povrsina); border: 1px solid var(--rub); border-radius: var(--r-veci);
  box-shadow: var(--sjena); padding: 6px; min-width: 200px; z-index: 40;
}
.izbornik button, .izbornik a {
  display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 12px;
  border-radius: var(--r-mali); cursor: pointer; color: var(--tekst); text-decoration: none;
}
.izbornik button:hover, .izbornik a:hover { background: var(--povrsina-2); }
.sadrzaj { flex: 1; min-width: 0; padding: 28px 40px 60px; max-width: 1400px; width: 100%; margin: 0 auto; }
.sadrzaj.siroko { max-width: none; }
.donja-traka { display: none; }

/* Gornja traka na užim zaslonima (superadmin: 10 stavki + prekidač + tražilica + avatar).
   Od 1560 px naviše ostaje izgled 1b; ispod se redom sužavaju razmaci i slova navigacije,
   razmaci trake i tražilica, skraćuje logo i neaktivni proizvodi postaju samo točka (naziv je
   u title). Od 1280 px naviše stane svih 10 stavki; na užem prilagodiNav() u app.js skriva Konkurente. */
@media (min-width: 901px) and (max-width: 1559px) {
  .traka nav { gap: 12px; font-size: 13px; }
}
@media (min-width: 901px) and (max-width: 1400px) {
  .traka { gap: 14px; padding: 0 20px; }
  .trazilica input { width: clamp(150px, 15vw, 240px); }
  .traka .prekidac button { padding: 5px 8px; }
}
@media (min-width: 901px) and (max-width: 1279px) {
  .traka { gap: 12px; padding: 0 16px; }
  .traka .logo span { display: none; }
}
@media (min-width: 901px) and (max-width: 1160px) {
  .traka .prekidac button:not(.aktivno) .tocka + .prekidac-naziv { display: none; }
}

/* ---------------------------------------------------------------- elementi */

.kartica { background: var(--povrsina); border-radius: var(--r-veci); padding: 16px; }
.kartica.velika { border-radius: var(--r-velik); padding: 32px; box-shadow: var(--sjena); }
.kartica.rub { border: 1px solid var(--rub); }
.blok { background: var(--povrsina); border-radius: var(--r-veci); border: 1px solid var(--rub); }
.blok > .zaglavlje { display: flex; align-items: center; gap: 8px; padding: 14px 16px 8px; }
.blok > .tijelo { padding: 0 16px 14px; }
.brojka { background: var(--povrsina); border-radius: var(--r-veci); padding: 14px 16px; display: flex; flex-direction: column; }
.brojka b { font-size: 22px; }
.brojka span { font-size: 13px; color: var(--tekst-3); }
.brojke { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }

.gumb {
  height: 36px; padding: 0 14px; border-radius: var(--r); border: 0; background: var(--povrsina-2);
  color: var(--tekst); display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; font-size: 14px; white-space: nowrap; text-decoration: none;
}
.gumb:hover { background: var(--rub); text-decoration: none; color: var(--tekst); }
.gumb.glavni { background: var(--tekst); color: #fff; font-weight: 600; }
.gumb.glavni:hover { background: #3a3935; color: #fff; }
.gumb.akcent { background: var(--akcent-svijetli); font-weight: 600; }
.gumb.opasno { background: var(--crveno-pozadina); color: var(--crveno); }
.gumb.tih { background: none; color: var(--tekst-3); }
.gumb.tih:hover { background: var(--povrsina-2); color: var(--tekst); }
.gumb.rub { background: var(--povrsina); border: 1px solid var(--rub-jaci); }
.gumb.velik { height: 52px; padding: 0 24px; border-radius: var(--r-veci); font-size: 15px; }
.gumb.mali { height: 28px; padding: 0 10px; font-size: 13px; border-radius: var(--r-mali); }
.gumb:disabled { opacity: .5; cursor: default; }
.gumb kbd { font: 500 11px var(--mono); background: rgba(0,0,0,.08); border-radius: 4px; padding: 1px 5px; }
.gumb.glavni kbd { background: rgba(255,255,255,.2); }

.cip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 18px;
  background: var(--povrsina); border: 1px solid var(--rub-jaci); cursor: pointer; font-size: 13px;
  white-space: nowrap; color: var(--tekst);
}
.cip.aktivno { background: var(--tekst); color: #fff; border-color: var(--tekst); }
.cip b { font-weight: 600; }
.cip .x { opacity: .6; }

.znacka {
  font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: var(--r-mali); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px; background: var(--povrsina-3); color: var(--tekst-2);
}
.status-novo { background: var(--povrsina-3); color: var(--tekst-2); }
.status-planirano { background: oklch(0.95 0.015 250); color: oklch(0.45 0.04 250); }
.status-poslano { background: var(--plavo-pozadina); color: var(--plavo); }
.status-bez_odgovora { background: var(--zuto-pozadina); color: var(--zuto); }
.status-odgovorio { background: var(--zeleno-pozadina); color: var(--zeleno); }
.status-demo, .status-ponuda { background: var(--ljubicasto-pozadina); color: var(--ljubicasto); }
.status-kupio { background: var(--zeleno); color: #fff; }
.status-odbio { background: var(--crveno-pozadina); color: var(--crveno); }
.status-kasnije { background: var(--povrsina-3); color: var(--tekst-3); }
.status-ne_kontaktirati { background: var(--povrsina-3); color: #8d8a83; }
.znacka.upozorenje { background: var(--crveno-pozadina); color: var(--crveno); }
.znacka.nacrt { background: none; border: 1px dashed var(--rub-jaci); color: var(--tekst-3); }
.brojac {
  background: var(--crveno); color: #fff; font-size: 11px; font-weight: 600; border-radius: 9px;
  padding: 0 6px; min-width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center;
}

.napomena-blok {
  background: var(--napomena); border: 1px solid var(--napomena-rub); border-radius: var(--r-veci);
  padding: 12px 14px;
}
.upozorenje-blok {
  background: var(--napomena); border-left: 3px solid var(--napomena-rub); padding: 10px 14px;
  border-radius: var(--r); font-size: 14px;
}

/* tablice */
.tablica-omot { background: var(--povrsina); border: 1px solid var(--rub); border-radius: var(--r-veci); overflow-x: auto; }
table.tablica { width: 100%; border-collapse: collapse; font-size: 14px; }
.tablica th {
  text-align: left; font: 500 11px var(--mono); letter-spacing: .06em; color: var(--tekst-3);
  text-transform: uppercase; padding: 10px 12px; border-bottom: 1px solid var(--rub); white-space: nowrap;
  background: var(--povrsina); position: sticky; top: 0;
}
.tablica th.sortira { cursor: pointer; user-select: none; }
.tablica th.sortira:hover { color: var(--tekst); }
.tablica td { padding: 10px 12px; border-bottom: 1px solid var(--povrsina-2); vertical-align: middle; }
.tablica tr:last-child td { border-bottom: 0; }
.tablica tbody tr.klik { cursor: pointer; }
.tablica tbody tr.klik:hover { background: #fbfaf7; }
.tablica tr.oznaceno { background: var(--plavo-pozadina); }
.tablica td.naziv b { display: block; }
.tablica td.naziv span { font-size: 12px; color: var(--tekst-3); }
.stranice { display: flex; align-items: center; gap: 8px; justify-content: flex-end; padding: 12px 0; color: var(--tekst-3); }

/* obrasci */
.polje { display: flex; flex-direction: column; gap: 5px; }
.polje > label, .polje > .naslov { font-size: 13px; color: var(--tekst-3); }
.unos, .polje input[type=text], .polje input[type=password], .polje input[type=email], .polje input[type=date],
.polje input[type=time], .polje input[type=number], .polje input[type=search], .polje select, .polje textarea, select.unos {
  height: 38px; border: 1px solid var(--rub-jaci); border-radius: var(--r); padding: 0 12px;
  background: var(--povrsina); outline: none; width: 100%;
}
.polje textarea, textarea.unos { height: auto; min-height: 90px; padding: 10px 12px; resize: vertical; }
.unos:focus, .polje input:focus, .polje select:focus, .polje textarea:focus { border-color: var(--tekst-3); }
.kvacica { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.kvacica input { margin-top: 3px; accent-color: var(--tekst); }
.izbor { display: flex; flex-wrap: wrap; gap: 6px; }
.izbor button {
  padding: 7px 12px; border-radius: 18px; background: var(--povrsina); border: 1px solid var(--rub-jaci);
  cursor: pointer; font-size: 13px;
}
.izbor button.aktivno { background: var(--tekst); color: #fff; border-color: var(--tekst); }
.greska { color: var(--crveno); font-size: 13px; }

/* dijalog */
.zastor {
  position: fixed; inset: 0; background: rgba(29, 28, 26, .35); z-index: 100;
  display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; overflow: auto;
}
.dijalog {
  background: var(--povrsina); border-radius: 16px; width: 560px; max-width: 100%;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.4); display: flex; flex-direction: column;
}
.dijalog.sirok { width: 860px; }
.dijalog > header { display: flex; align-items: flex-start; gap: 12px; padding: 20px 24px 8px; }
.dijalog > header h2 { font-size: 20px; }
.dijalog > header .podnaslov { font-size: 13px; color: var(--tekst-3); margin-top: 2px; }
.dijalog > header .zatvori { margin-left: auto; border: 0; background: none; font-size: 20px; cursor: pointer; color: var(--tekst-3); }
.dijalog > .tijelo { padding: 12px 24px; display: flex; flex-direction: column; gap: 14px; }
.dijalog > footer { padding: 14px 24px 20px; display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.dijalog .status-promjena { font-size: 13px; color: var(--tekst-3); margin-right: auto; }

/* obavijesti */
.obavijesti { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.obavijest { background: var(--tekst); color: #fff; padding: 10px 16px; border-radius: var(--r); font-size: 14px; box-shadow: var(--sjena); }
.obavijest.greska { background: var(--crveno); color: #fff; }

/* prijava */
.prijava { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.prijava form { width: 380px; max-width: 100%; display: flex; flex-direction: column; gap: 14px; }
.prijava .logo { font-weight: 700; font-size: 24px; letter-spacing: .02em; }
.prijava .logo span { font-weight: 400; color: var(--tekst-3); }

.prazno { padding: 40px 20px; text-align: center; color: var(--tekst-3); }
.ucitavanje { padding: 40px 20px; text-align: center; color: var(--tekst-4); }
.mail-pregled { width: 100%; border: 0; min-height: 120px; background: #fff; }
.naslov-ekrana { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.natrag { color: var(--tekst-3); font-size: 14px; }

/* ---------------------------------------------------------------- mobitel */

@media (max-width: 900px) {
  .traka { padding: 0 16px; gap: 12px; height: 54px; }
  .traka nav, .traka .prekidac, .trazilica { display: none; }
  .traka .razmak { flex: 1; }
  .traka.mobilno-trazi .trazilica { display: block; position: static; flex: 1; }
  .traka.mobilno-trazi .trazilica input { width: 100%; }
  .traka.mobilno-trazi .trazilica .rezultati { left: 0; right: 0; width: auto; top: 54px; border-radius: 0; max-height: calc(100vh - 54px - 78px); }
  .mobilni-prekidac { display: flex !important; }
  .sadrzaj { padding: 16px 16px 100px; }
  .donja-traka {
    display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0;
    height: 70px; background: var(--povrsina); border-top: 1px solid var(--rub); padding: 8px 8px 16px;
    font-size: 12px; text-align: center; z-index: 20;
  }
  .donja-traka a { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--tekst-3); text-decoration: none; }
  .donja-traka a .ikona { width: 22px; height: 22px; border-radius: 6px; border: 2px solid #b5b2aa; display: flex; align-items: center; justify-content: center; font-size: 12px; }
  .donja-traka a.aktivno { color: var(--tekst); font-weight: 600; }
  .donja-traka a.aktivno .ikona { background: var(--tekst); border-color: var(--tekst); color: #fff; }
  .zastor { padding: 0; align-items: stretch; }
  .dijalog, .dijalog.sirok { width: 100%; min-height: 100%; border-radius: 0; }
  .dijalog > header { position: sticky; top: 0; background: var(--povrsina); z-index: 1; }
  .dijalog > footer { position: sticky; bottom: 0; background: var(--povrsina); border-top: 1px solid var(--rub); }
  .mreza-2 { grid-template-columns: 1fr; }
  .samo-web { display: none !important; }
  h1 { font-size: 24px; }
}
@media (min-width: 901px) {
  .samo-mobitel { display: none !important; }
  .traka > .razmak { display: none; } /* razmak daje margin-right: auto na nav-u, bez dvostrukog gap-a */
}
.mobilni-prekidac { display: none; }