/* GHIA PRO — sustav stila
   Boje su s njihovog memoranduma: GHIA siva + PRO žuta.
   Raspored slijedi Matrixovu aplikaciju: bijelo zaglavlje, kartice, pilule. */

[hidden] { display: none !important; }

:root {
  --marka-siva:   #5f6165;
  --marka-zuta:   #f5b301;
  --zuta-tamna:   #d99c00;
  --zuta-blijeda: #fff6e0;

  --navy:      #1b2a3a;
  --navy-blaga:#2c4055;
  --tekst:     #1e2a35;
  --tiho:      #6b7a8c;
  --rub:       #dbe3ec;
  --rub-jaci:  #c3cfdc;
  --pozadina:  #eef2f7;
  --plocica:   #ffffff;

  --zelena:    #1f9254;
  --zelena-bl: #e8f6ee;
  --plava:     #1e6fd9;
  --plava-bl:  #e9f1fc;
  --crvena:    #b3261e;
  --crvena-bl: #fdecea;
  --sjena:     0 1px 2px rgba(27,42,58,.06), 0 2px 8px rgba(27,42,58,.05);
  --sjena-jaca:0 10px 34px rgba(27,42,58,.18);
  --radijus:   10px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font: 15px/1.55 "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  color: var(--tekst);
  background: var(--pozadina);
  -webkit-font-smoothing: antialiased;
}

/* ---------- zaglavlje ---------- */
header {
  display: flex; align-items: center; gap: 22px;
  padding: 0 26px; height: 62px;
  background: #fff; border-bottom: 1px solid var(--rub);
  position: sticky; top: 0; z-index: 40;
}
.marka { font-size: 21px; font-weight: 800; letter-spacing: -.4px; white-space: nowrap; }
.marka .g { color: var(--marka-siva); }
.marka .p { color: var(--marka-zuta); }
.marka small {
  display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .16em;
  color: var(--tiho); margin-top: -4px;
}
.desno { margin-left: auto; display: flex; align-items: center; gap: 12px; }
#tkoSam {
  font-size: 13.5px; color: var(--tekst); font-weight: 600;
  background: var(--pozadina); border-radius: 20px; padding: 5px 13px;
}

/* glavni izbornik — kartice kao u Matrixu */
#izbornik { display: flex; gap: 4px; align-self: stretch; align-items: center; }
#izbornik button {
  background: none; border: none; border-bottom: 3px solid transparent;
  padding: 20px 15px 17px; font: inherit; font-size: 14.5px; font-weight: 600;
  color: var(--tiho); cursor: pointer; border-radius: 0;
}
#izbornik button:hover { color: var(--tekst); background: #f7fafc; }
#izbornik button.aktivan { color: var(--tekst); border-bottom-color: var(--marka-zuta); }

main { max-width: 1180px; margin: 26px auto 70px; padding: 0 26px; }

/* ---------- naslovi ---------- */
h1 { font-size: 22px; font-weight: 700; margin: 0 0 4px; letter-spacing: -.2px; }
h2 {
  font-size: 15px; font-weight: 700; margin: 30px 0 10px;
  text-transform: uppercase; letter-spacing: .06em; color: var(--navy);
}
h3 { font-size: 14px; font-weight: 700; margin: 20px 0 8px; color: var(--navy); }
.podnaslov { color: var(--tiho); margin: 0 0 18px; }
.naslovRed { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.naslovRed h1 { margin: 0; }
.naslovRed button, .naslovRed .gumbDatoteka { margin-left: auto; }
.naslovRed button ~ button, .naslovRed .gumbDatoteka ~ button { margin-left: 0; }
.uputa, .crtezUputa { color: var(--tiho); font-size: 13px; margin: 0 0 12px; max-width: 780px; }
.sitno { font-size: 12.5px; }
.tiho { color: var(--tiho); }

/* ---------- gumbi ---------- */
button, .gumbLink, .gumbDatoteka {
  font: inherit; font-size: 14px; font-weight: 600;
  padding: 8px 16px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--marka-zuta); background: var(--marka-zuta); color: #22303d;
  transition: filter .12s, background .12s, border-color .12s;
  text-decoration: none; display: inline-block;
}
button:hover, .gumbLink:hover, .gumbDatoteka:hover { filter: brightness(1.06); }
button:active { transform: translateY(1px); }
button:disabled { opacity: .5; cursor: default; filter: none; }
button.tiho {
  background: #fff; color: var(--tiho); border-color: var(--rub-jaci);
}
button.tiho:hover { background: #f7fafc; color: var(--tekst); }
button.sekundarni { background: var(--zelena); border-color: var(--zelena); color: #fff; }
.gumbLink, .gumbDatoteka {
  background: #fff; color: var(--navy); border-color: var(--rub-jaci);
}
.gumbLink:hover, .gumbDatoteka:hover { background: #f7fafc; }
.gumbDatoteka input { display: none; }
button.brisi {
  background: none; border: none; color: var(--crvena);
  font-size: 17px; padding: 0 5px; font-weight: 400;
}
button.brisi:hover { filter: none; color: #7d1a15; }

/* ---------- kartice i obrasci ---------- */
.kartica {
  max-width: 400px; margin: 72px auto; background: #fff; padding: 30px;
  border: 1px solid var(--rub); border-radius: var(--radijus); box-shadow: var(--sjena);
}
.kartica h1 { margin-bottom: 18px; }
label { display: block; margin: 14px 0; font-size: 13px; font-weight: 600; color: var(--tiho); }
input, select, textarea {
  display: block; width: 100%; margin-top: 5px; padding: 9px 11px;
  font: inherit; font-size: 14px; font-weight: 400; color: var(--tekst);
  border: 1px solid var(--rub-jaci); border-radius: 8px; background: #fff;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--marka-zuta);
  box-shadow: 0 0 0 3px rgba(245,179,1,.18);
}
textarea { resize: vertical; }
.greska { color: var(--crvena); min-height: 20px; font-size: 13.5px; }
.mreza2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; max-width: 780px; }
.oznakaPolja {
  display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tiho); margin: 16px 0 6px; font-weight: 700;
}
.akcije { margin: 24px 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.akcijeUze { margin: 12px 0 0; }
.kvacice label { margin: 7px 0; font-weight: 500; color: var(--tekst); font-size: 14px; }
.kvacice input { display: inline; width: auto; margin: 0 9px 0 0; }

/* ---------- tablice ---------- */
table {
  width: 100%; border-collapse: separate; border-spacing: 0; background: #fff;
  border: 1px solid var(--rub); border-radius: var(--radijus); overflow: hidden;
  margin-bottom: 14px; box-shadow: var(--sjena);
}
th {
  text-align: left; padding: 11px 14px; background: #f4f8fb;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tiho); border-bottom: 1px solid var(--rub);
}
td { padding: 11px 14px; border-bottom: 1px solid #eef3f8; font-size: 14px; vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: #fafcfe; }
td.d, th.d { text-align: right; }
td a { color: var(--plava); font-weight: 600; text-decoration: none; }
td a:hover { text-decoration: underline; }

/* ---------- početne pločice ---------- */
.plocice { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.plocica {
  background: #fff; border: 1px solid var(--rub); border-radius: var(--radijus);
  padding: 20px; box-shadow: var(--sjena); border-top: 3px solid var(--marka-zuta);
}
.plocica h2 { margin: 0 0 8px; font-size: 15px; text-transform: none; letter-spacing: 0; }
.plocica p { margin: 0 0 12px; color: var(--tiho); font-size: 13.5px; }
.plocica span {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tiho); background: var(--pozadina); padding: 3px 9px; border-radius: 10px;
}
.plocica.uskoro { border-top-color: var(--rub-jaci); }

/* ---------- oznake stanja ---------- */
.znak, .znak2 {
  display: inline-block; padding: 3px 10px; border-radius: 12px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  background: var(--pozadina); color: var(--tiho);
}
.znak.poslana { background: var(--plava-bl); color: #0b4c8c; }
.znak.prihvacena, .znak2.rijesen { background: var(--zelena-bl); color: #15633a; }
.znak2.rijesen { background: var(--zelena); color: #fff; }
.znak2.otvoren { background: var(--marka-zuta); color: #22303d; }
.znak2.siva { background: var(--pozadina); color: var(--tiho); }
.znak2.kod { background: var(--crvena); color: #fff; }
.oznakaAI {
  font-size: 10.5px; background: var(--navy); color: #fff; padding: 3px 9px;
  border-radius: 10px; vertical-align: middle; margin-left: 8px;
  letter-spacing: .08em; font-weight: 700;
}

/* ---------- pretraga s prijedlozima ---------- */
#kupacTrazi, #stavkeTrazi { position: relative; max-width: 780px; margin-bottom: 14px; }
#kupacTrazi input, #stavkeTrazi input { width: 100%; margin-top: 0; }
#kupacRezultati, #cjenikRezultati {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 30; margin-top: 4px;
  background: #fff; border: 1px solid var(--rub-jaci); border-radius: var(--radijus);
  max-height: 300px; overflow-y: auto; box-shadow: var(--sjena-jaca); display: none;
}
#kupacRezultati.vidi, #cjenikRezultati.vidi { display: block; }
.rezultat { padding: 9px 13px; cursor: pointer; border-bottom: 1px solid #eef3f8; font-size: 13.5px; }
.rezultat:last-child { border-bottom: none; }
.rezultat:hover { background: var(--zuta-blijeda); }
.rezultat .id {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px;
  color: var(--navy); font-weight: 700;
}
.rezultat .cij { float: right; font-weight: 700; color: var(--tekst); }
.rezultat .vise { color: var(--tiho); font-style: italic; cursor: default; }
.rezultat .vise:hover { background: none; }

/* ---------- stavke ponude ---------- */
#tablicaStavki input, #tablicaElemenata input, #tablicaElemenata select,
#tablicaPregrada input, #tablicaPregrada select, #tablicaClanova input {
  width: 100%; margin: 0; padding: 6px 8px; font-size: 13px;
}
#tablicaStavki td, #tablicaElemenata td, #tablicaPregrada td { padding: 7px 9px; }
#tablicaElemenata th, #tablicaPregrada th { font-size: 10.5px; padding: 8px 9px; }
.zbrojPonude { width: 340px; margin: 16px 0 0 auto; box-shadow: none; border: none; background: none; }
.zbrojPonude td { padding: 7px 12px; border-bottom: none; background: none !important; }
.zbrojPonude tr.istaknuto td {
  font-weight: 800; font-size: 16px; border-top: 2px solid var(--navy); padding-top: 11px;
}
tr.izAI td:first-child::before {
  content: "AI"; font-size: 9px; background: var(--navy); color: #fff;
  padding: 2px 5px; border-radius: 5px; margin-right: 6px; vertical-align: middle;
  font-weight: 700; letter-spacing: .06em;
}

/* ---------- okviri s porukama ---------- */
.upozorenje, #aiNejasno, #nacrtNapomene, #skicaNejasno, #izracunNapomena {
  background: var(--zuta-blijeda); border: 1px solid #f0dfa8;
  border-left: 4px solid var(--marka-zuta); border-radius: 8px;
  padding: 13px 16px; font-size: 13.5px; line-height: 1.5;
}
#aiNejasno { margin-top: 16px; max-width: 780px; }
#aiNejasno h3 { margin: 0 0 8px; color: #8a6d00; }
#aiNejasnoPopis { margin: 0; padding-left: 18px; }
#aiNejasnoPopis li { margin-bottom: 7px; }
#nacrtNapomene div, #skicaNejasno div { margin-bottom: 6px; }
#nacrtNapomene .los, #skicaNejasno .los { color: #8c1d18; font-weight: 700; }
.upozorenjeNaslov { color: #8a6d00; font-size: 15px; margin: 28px 0 4px; }

/* ---------- ispravci ---------- */
.ispravak {
  border: 1px solid #cfe6d6; border-left: 4px solid var(--zelena);
  background: var(--zelena-bl); border-radius: 8px; padding: 11px 15px; margin-bottom: 10px;
}
.ispravak.otvoren {
  border-color: #f0dfa8; border-left-color: var(--marka-zuta); background: var(--zuta-blijeda);
}
.ispravak .zaglavlje {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--tiho); margin-bottom: 6px;
}
.ispravak .tekst { font-size: 14px; }
.ispravak.rijesen .tekst { text-decoration: line-through; color: var(--tiho); }
.ispravak .radnje { margin-left: auto; display: flex; gap: 6px; }
.ispravak .radnje button { padding: 4px 11px; font-size: 12px; }
.prijedlogPravila {
  margin-top: 10px; padding: 11px 14px; background: #fff;
  border: 1px dashed var(--rub-jaci); border-radius: 8px; font-size: 13px;
}
.prijedlogPravila input { margin: 8px 0 10px; font-size: 13px; }

/* ---------- modal ---------- */
#zastor { position: fixed; inset: 0; background: rgba(20,30,42,.5); z-index: 70; }
#modalPonude {
  position: fixed; z-index: 71; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 960px; max-width: calc(100vw - 32px); max-height: 88vh; background: var(--pozadina);
  border-radius: 12px; box-shadow: var(--sjena-jaca);
  display: flex; flex-direction: column; overflow: hidden;
}
.modalVrh {
  display: flex; align-items: center; padding: 16px 24px;
  background: #fff; border-bottom: 1px solid var(--rub);
}
.modalVrh h2 { margin: 0; font-size: 16px; text-transform: none; letter-spacing: 0; }
.modalVrh button { margin-left: auto; font-size: 20px; line-height: 1; padding: 2px 10px; }
.modalTijelo { padding: 20px 24px 30px; overflow-y: auto; }

/* ---------- nacrti ---------- */
.nacrtRaspored {
  display: grid; grid-template-columns: minmax(340px,1fr) minmax(430px,1.05fr);
  gap: 26px; align-items: start;
}
.nacrtCrtezi h3, .nacrtAlat h3 { margin-top: 0; }
.nacrtAlat h3 { margin-top: 22px; }
.crtez {
  background: #fff; border: 1px solid var(--rub); border-radius: var(--radijus);
  padding: 10px; overflow-x: auto; box-shadow: var(--sjena); user-select: none;
}
.crtez svg { max-width: 100%; height: auto; display: block; }
.crtez.stranice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.crtez .otvor:hover, .crtez .pregrada:hover { stroke: var(--marka-zuta); }
.oblacicPovlacenja {
  position: fixed; z-index: 200; background: var(--navy); color: #fff;
  padding: 5px 10px; border-radius: 6px; font-size: 12px; pointer-events: none;
  font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: var(--sjena-jaca);
}
.prostorije { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.prostorija {
  background: #fff; border: 1px solid var(--rub); border-radius: 8px;
  padding: 7px 13px; font-size: 13px; box-shadow: var(--sjena);
}
.prostorija b { color: var(--navy); }

/* ---------- prilozi i skice ---------- */
.prilozi { margin-top: 12px; max-width: 780px; }
#popisPriloga { list-style: none; padding: 0; margin: 12px 0 0; }
#popisPriloga li {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-size: 13.5px;
  background: #fff; border: 1px solid var(--rub); border-radius: 8px;
  margin-bottom: 7px; max-width: 540px;
}
#popisPriloga .vel { color: var(--tiho); font-size: 12px; margin-left: auto; }
#popisPriloga button { background: none; border: none; color: var(--crvena); font-size: 17px; padding: 0 3px; }
#skicaRezultat {
  background: #fff; border: 1px solid var(--rub); border-radius: var(--radijus);
  padding: 18px 22px; margin: 16px 0 26px; box-shadow: var(--sjena);
}
#skicaSazetak { font-size: 14px; margin-bottom: 14px; }
#skicaSazetak b { color: var(--navy); }
#tablicaSkice td:last-child { font-size: 12px; color: var(--tiho); }
#noviNacrt {
  margin-top: 16px; padding: 14px 18px; background: var(--plava-bl);
  border: 1px solid #cfe0f5; border-left: 4px solid var(--plava);
  border-radius: 8px; font-size: 13.5px;
}
#noviNacrt h4 { margin: 0 0 9px; font-size: 14px; }
#upitKupca, #nalogNacrtu, #noviIspravak { width: 100%; max-width: 780px; margin-top: 0; }
#nalogNacrtu, #noviIspravak { max-width: none; }

/* ---------- floating AI chat ---------- */
#fab {
  position: fixed; right: 24px; bottom: 24px; width: 56px; height: 56px;
  border-radius: 50%; border: none; background: var(--navy); color: var(--marka-zuta);
  font-size: 22px; cursor: pointer; z-index: 60; line-height: 1; padding: 0;
  box-shadow: 0 6px 20px rgba(27,42,58,.32);
}
#fab:hover { background: var(--navy-blaga); filter: none; }
#chat {
  position: fixed; right: 24px; bottom: 92px; width: 400px;
  max-width: calc(100vw - 32px); height: 540px; max-height: calc(100vh - 140px);
  background: #fff; border: 1px solid var(--rub); border-radius: 12px;
  box-shadow: var(--sjena-jaca); z-index: 60;
  display: flex; flex-direction: column; overflow: hidden;
}
#chat header {
  display: flex; align-items: center; gap: 10px; padding: 13px 16px; height: auto;
  background: var(--navy); color: #fff; border: none; position: static;
}
#chat header b { font-size: 14px; font-weight: 700; }
#chat header small { opacity: .8; font-size: 12px; }
#chat header button {
  margin-left: auto; background: none; border: none; color: #fff;
  font-size: 20px; padding: 0 4px; line-height: 1;
}
#chatTok {
  flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column;
  gap: 10px; background: var(--pozadina);
}
.balon {
  max-width: 86%; padding: 10px 13px; border-radius: 12px; font-size: 14px;
  white-space: pre-wrap; word-wrap: break-word; line-height: 1.5;
}
.balon.ja { align-self: flex-end; background: var(--navy); color: #fff; border-bottom-right-radius: 3px; }
.balon.ai { align-self: flex-start; background: #fff; border: 1px solid var(--rub); border-bottom-left-radius: 3px; }
.balon.greska { align-self: flex-start; background: var(--crvena-bl); border: 1px solid #f5c6c2; color: #8c1d18; }
.balon.mislim { align-self: flex-start; color: var(--tiho); font-style: italic; background: none; }
#chatUvod { color: var(--tiho); font-size: 13px; text-align: center; margin: auto 10px; }
#chatForma { display: flex; gap: 8px; padding: 11px; border-top: 1px solid var(--rub); background: #fff; }
#chatForma textarea { flex: 1; height: 42px; margin: 0; font-size: 14px; }
#chatForma button { padding: 0 16px; }

@media (max-width: 900px) {
  .nacrtRaspored { grid-template-columns: 1fr; }
  .mreza2 { grid-template-columns: 1fr; }
  header { padding: 0 16px; gap: 12px; }
  main { padding: 0 16px; }
}

/* logo na ekranu za prijavu */
.markaVelika {
  font-size: 34px; font-weight: 800; letter-spacing: -.8px; text-align: center; line-height: 1;
}
.markaVelika .g { color: var(--marka-siva); }
.markaVelika .p { color: var(--marka-zuta); }
.markaPodnaslov {
  text-align: center; color: var(--tiho); font-size: 12.5px; letter-spacing: .1em;
  text-transform: uppercase; margin: 8px 0 26px; font-weight: 600;
}

/* sitna podešavanja nakon pregleda u pregledniku */
#tablicaElemenata td:nth-child(3) select { min-width: 88px; }
#tablicaElemenata td:nth-child(4) select { min-width: 84px; }
#tablicaPregrada td:nth-child(2) select { min-width: 88px; }
.crtez.stranice { align-items: center; justify-items: center; }
.crtez.stranice > div { display: flex; align-items: center; justify-content: center; }
/* Sve cetiri strane crtaju se u istom mjerilu — ako ih CSS rastegne na sirinu stupca,
   mjerilo se izgubi i uza strana izgleda veca od duge. */
.crtez.stranice svg { width: auto; max-width: 100%; }

/* rabati i izmjene u modalu ponude */
.rabatRed { display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; margin:6px 0 18px; }
label.uRedu { margin:0; width:230px; }
label.uRedu input { margin-top:5px; }
#modalStavke input { width:100%; margin:0; padding:6px 8px; font-size:13px; }
#modalStavke td { padding:7px 9px; }

/* ---------- početna ---------- */
.brojke { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:14px;
  margin-bottom:8px; }
.brojka { background:#fff; border:1px solid var(--rub); border-radius:var(--radijus);
  padding:16px 18px; box-shadow:var(--sjena); }
.brojka .v { font-size:26px; font-weight:800; color:var(--navy); line-height:1.15;
  font-variant-numeric:tabular-nums; white-space:nowrap; }
/* dugacke iznose smanji da ne lome valutu u novi red */
.brojka .v.dug { font-size:19px; }
.brojka .o { font-size:12.5px; color:var(--tiho); margin-top:5px; }

/* ---------- pilule (kartice u administraciji) ---------- */
.pilule { display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 20px; }
.pilule button { background:#fff; color:var(--tiho); border:1px solid var(--rub-jaci);
  border-radius:20px; padding:7px 17px; font-size:14px; }
.pilule button:hover { background:#f7fafc; color:var(--tekst); filter:none; }
.pilule button.aktivan { background:var(--navy); color:#fff; border-color:var(--navy); }

/* ---------- administracija ---------- */
#admKlijenti .naslovRed { align-items:flex-start; }
#admKlijenti .uputa { margin:0; max-width:560px; }
#klijentiPretraga { max-width:420px; margin-bottom:12px; }
#uvozIzvjestaj { background:var(--zuta-blijeda); border:1px solid #f0dfa8;
  border-left:4px solid var(--marka-zuta); border-radius:8px; padding:12px 16px;
  margin-bottom:14px; font-size:13.5px; }
#uvozIzvjestaj div { margin-bottom:4px; }
.uputaBlok { background:#fff; border:1px solid var(--rub); border-radius:var(--radijus);
  padding:16px 20px; margin-bottom:14px; box-shadow:var(--sjena); }
.uputaBlok h3 { margin:0 0 4px; }
.uputaBlok .opis { color:var(--tiho); font-size:13px; margin-bottom:10px; }
.uputaBlok textarea { width:100%; font-size:13.5px; font-family:inherit; min-height:110px; }
.uputaBlok .red { display:flex; align-items:center; gap:12px; margin-top:10px; }
.uputaBlok .red label { margin:0; font-weight:500; color:var(--tekst); }
.uputaBlok .red input[type=checkbox] { display:inline; width:auto; margin-right:7px; }
.grupaPostavki { background:#fff; border:1px solid var(--rub); border-radius:var(--radijus);
  padding:8px 20px 18px; margin-bottom:16px; box-shadow:var(--sjena); }
.grupaPostavki h3 { border-bottom:1px solid var(--rub); padding-bottom:9px; margin-bottom:4px; }
.postavka { padding:13px 0; border-bottom:1px solid #eef3f8; }
.postavka:last-child { border-bottom:none; }
.postavka .naslov { font-weight:600; font-size:14px; }
.postavka .opis { color:var(--tiho); font-size:12.5px; margin:3px 0 7px; max-width:620px; }
.postavka .unos { display:flex; gap:10px; align-items:center; }
.postavka input { margin:0; max-width:440px; }
.postavka input[type=number] { max-width:140px; }
.postavka .kljuc { font-family:ui-monospace,monospace; font-size:11px; color:#9aa8b8; }

/* nacrti u detaljima ponude */
.nacrtiUModalu { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:14px; margin-bottom:8px; }
.nacrtKartica { background:#fff; border:1px solid var(--rub); border-radius:var(--radijus);
  padding:12px; box-shadow:var(--sjena); }
.nacrtKartica .ime { font-weight:600; font-size:13.5px; margin-bottom:2px; }
.nacrtKartica .dim { color:var(--tiho); font-size:12.5px; margin-bottom:8px; }
.nacrtKartica img { max-width:100%; height:auto; display:block; margin-bottom:10px; }

/* ---------- Moj AI ---------- */
.mojAi { display:grid; grid-template-columns:260px 1fr; gap:18px; align-items:start;
  height:calc(100vh - 260px); min-height:460px; }
.mojAiPopis { background:#fff; border:1px solid var(--rub); border-radius:var(--radijus);
  padding:14px; box-shadow:var(--sjena); height:100%; display:flex; flex-direction:column; }
.mojAiPopis > button { width:100%; margin-bottom:12px; }
#popisRazgovora { list-style:none; margin:0; padding:0; overflow-y:auto; flex:1; }
#popisRazgovora li { display:flex; align-items:center; gap:6px; padding:9px 11px;
  border-radius:8px; cursor:pointer; font-size:13.5px; margin-bottom:3px; }
#popisRazgovora li:hover { background:var(--pozadina); }
#popisRazgovora li.aktivan { background:var(--zuta-blijeda); font-weight:600; }
#popisRazgovora .naslov { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#popisRazgovora .broj { font-size:11px; color:var(--tiho); }
#popisRazgovora button { background:none; border:none; color:var(--tiho); font-size:15px;
  padding:0 3px; opacity:0; }
#popisRazgovora li:hover button { opacity:1; }
#popisRazgovora button:hover { color:var(--crvena); filter:none; }

.mojAiRazgovor { background:#fff; border:1px solid var(--rub); border-radius:var(--radijus);
  box-shadow:var(--sjena); display:flex; flex-direction:column; height:100%; overflow:hidden; }
#mojAiTok { flex:1; overflow-y:auto; padding:22px 24px; display:flex; flex-direction:column;
  gap:16px; background:var(--pozadina); }
.poruka { display:flex; gap:12px; align-items:flex-start; }
.poruka .avatar { width:30px; height:30px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;
  color:#fff; }
.poruka.ja .avatar { background:var(--navy); }
.poruka.ai .avatar { background:var(--marka-zuta); color:#22303d; }
.poruka .sadrzaj { background:#fff; border:1px solid var(--rub); border-radius:10px;
  padding:12px 15px; font-size:14px; line-height:1.6; white-space:pre-wrap;
  word-wrap:break-word; max-width:calc(100% - 46px); }
.poruka.ja .sadrzaj { background:var(--zuta-blijeda); border-color:#f0dfa8; }
.poruka.mislim .sadrzaj { color:var(--tiho); font-style:italic; background:none; border:none; }
#mojAiUvod { color:var(--tiho); font-size:14px; text-align:center; margin:auto 20px;
  max-width:440px; line-height:1.6; }
#mojAiPrilozi { display:flex; flex-wrap:wrap; gap:7px; padding:0 16px; }
#mojAiPrilozi:not(:empty) { padding:10px 16px 0; }
#mojAiPrilozi span { background:var(--pozadina); border:1px solid var(--rub); border-radius:6px;
  padding:4px 10px; font-size:12.5px; display:flex; align-items:center; gap:7px; }
#mojAiPrilozi button { background:none; border:none; color:var(--crvena); padding:0;
  font-size:15px; }
#mojAiForma { display:flex; gap:10px; align-items:flex-end; padding:14px 16px;
  border-top:1px solid var(--rub); background:#fff; }
.spajalica { margin:0; padding:9px 12px; border:1px solid var(--rub-jaci); border-radius:8px;
  cursor:pointer; font-size:17px; line-height:1; background:#fff; }
.spajalica:hover { background:var(--pozadina); }
.spajalica input { display:none; }
#mojAiPitanje { flex:1; margin:0; resize:none; font-size:14px; }

/* ---------- praćenje cijena ---------- */
#sazetakDana { background:#fff; border:1px solid var(--rub); border-radius:var(--radijus);
  padding:18px 22px; box-shadow:var(--sjena); margin-bottom:8px; border-left:4px solid var(--rub-jaci); }
#sazetakDana.pratiti { border-left-color:var(--marka-zuta); }
#sazetakDana.vazno { border-left-color:var(--crvena); }
#sazetakDana .vrh { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
#sazetakDana .datum { font-weight:700; font-size:15px; }
#sazetakDana .tijelo { font-size:14px; line-height:1.65; white-space:pre-wrap; }
#sazetakDana .tijelo b { color:var(--navy); }
.znakVaznost { padding:3px 11px; border-radius:12px; font-size:11.5px; font-weight:700; }
.znakVaznost.mirno { background:var(--pozadina); color:var(--tiho); }
.znakVaznost.pratiti { background:var(--zuta-blijeda); color:#8a6d00; }
.znakVaznost.vazno { background:var(--crvena-bl); color:#8c1d18; }
td.gore { color:#8c1d18; font-weight:700; }
td.dolje { color:#15633a; font-weight:700; }
#raniji details { background:#fff; border:1px solid var(--rub); border-radius:8px;
  padding:10px 16px; margin-bottom:8px; box-shadow:var(--sjena); }
#raniji summary { cursor:pointer; font-weight:600; font-size:14px; }
#raniji .tijelo { font-size:13.5px; line-height:1.6; white-space:pre-wrap; margin-top:10px;
  color:var(--tekst); }

/* ---------- upiti s weba ---------- */
#izbornik button { position: relative; }
.znacka {
  display: inline-block; min-width: 18px; height: 18px; margin-left: 7px; padding: 0 5px;
  border-radius: 9px; background: var(--marka-zuta); color: #1b1b1b;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
#tablicaUpita tr.novo td:first-child { border-left: 3px solid var(--marka-zuta); font-weight: 600; }
#tablicaUpita select { padding: 4px 8px; font-size: 13px; }
#tablicaUpita td:last-child { white-space: nowrap; }
#tablicaUpita td:last-child button { margin-left: 6px; }
#detaljUpita {
  margin-top: 22px; padding: 20px 22px; border-radius: 12px;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.09);
}
#detaljUpita h2 { margin-top: 0; }
.porukaKupca {
  margin: 0 0 16px; padding: 12px 14px; border-left: 3px solid var(--marka-zuta);
  background: #fcfaf4; white-space: pre-wrap;
}
#detaljUpita tr.zbroj td { font-weight: 700; border-top: 2px solid #e3e3e3; }
.crtezUpita { margin: 18px 0; }
.crtezUpita svg { max-width: 100%; height: auto; }

/* ---------- AI nacrt ponude: tijek, sažetak, varijante ---------- */
#aiTijek {
  display: flex; align-items: center; gap: 10px; margin: 10px 0 0;
  padding: 10px 14px; border-radius: 8px; background: var(--zuta-blijeda);
  color: #6a5300; font-size: 13.5px;
}
.vrti {
  width: 14px; height: 14px; flex: none; border-radius: 50%;
  border: 2px solid #e2c884; border-top-color: var(--marka-zuta);
  animation: vrtnja .8s linear infinite;
}
@keyframes vrtnja { to { transform: rotate(360deg); } }
#aiSazetak {
  margin: 12px 0 0; padding: 12px 14px; border-radius: 8px;
  border-left: 3px solid var(--marka-zuta); background: #fbfcfe; font-size: 14px;
}
#aiVarijante { margin-top: 18px; }
#aiVarijante h4 {
  margin: 14px 0 6px; font-size: 13px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--tiho);
}
.varijanta {
  display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center;
  padding: 9px 12px; border: 1px solid var(--rub); border-radius: 8px; margin-bottom: 6px;
}
.varijanta.dodana { background: #f2f8f2; border-color: #cfe4cf; }
.varijanta .tiho { font-size: 12.5px; }
.upozorenje { color: #8a1f1f; }
.znak {
  display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 9px;
  background: var(--zuta-blijeda); color: #6a5300; font-size: 11px; white-space: nowrap;
}
tr.pretpostavka td:first-child { border-left: 3px solid var(--marka-zuta); }

/* ---------- projekti ---------- */
.kartice3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 4px 0 22px; }
.kartica3 {
  padding: 14px 16px; border-radius: 10px; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.08); border-left: 3px solid var(--rub-jaci);
}
.kartica3 span { display: block; color: var(--tiho); font-size: 12.5px; margin-bottom: 5px; }
.kartica3 b { font-size: 21px; }
.kartica3.dobro { border-left-color: #2e7d32; }
.kartica3.negativno { border-left-color: #b3261e; }
#tablicaProjekata tr:hover td { background: #f7f9fc; }
td.kasni { color: #b3261e; font-weight: 600; }
td.negativno { color: #b3261e; }
.noviTrosak {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 6px; align-items: center;
}
/* Redak za novi trosak: polja u jednom redu, inace se rastegnu preko cijele sirine. */
.noviTrosak input, .noviTrosak select {
  width: auto; flex: 0 0 auto; padding: 7px 9px; font-size: 13.5px;
}
.noviTrosak #tDatum { flex: 0 0 140px; }
.noviTrosak #tVrsta { flex: 0 0 130px; }
.noviTrosak #tOpis { flex: 1 1 240px; min-width: 180px; }
.noviTrosak #tDobavljac, .noviTrosak #tDokument { flex: 0 0 150px; }
.noviTrosak #tIznos { flex: 0 0 110px; text-align: right; }
.noviTrosak #fNaziv { flex: 1 1 260px; }
.kartica3 small { display: block; margin-top: 4px; color: var(--tiho); font-size: 12px; }
#troskoviPoVrsti { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
#troskoviPoVrsti span {
  padding: 4px 10px; border-radius: 12px; background: #eef2f7;
  color: var(--tiho); font-size: 12.5px;
}
#tablicaFaza input, #tablicaFaza select { padding: 5px 7px; font-size: 13px; width: 100%; }
tr.faza.gotovo td:nth-child(2) { color: #2e7d32; }
tr.faza.preskoceno td:nth-child(2) { color: var(--tiho); text-decoration: line-through; }
tr.faza.u_tijeku td:first-child { border-left: 3px solid var(--marka-zuta); }
#tablicaProjekata td:first-child, #tablicaProjekata td:nth-child(4),
#tablicaProjekata td:nth-child(7), #tablicaProjekata td:last-child { white-space: nowrap; }

/* ---------- prijava preko Microsofta ---------- */
.crta { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--tiho); font-size: 13px; }
.crta::before, .crta::after { content: ""; flex: 1; height: 1px; background: var(--rub); }
.gumbMicrosoft {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 11px 14px; box-sizing: border-box;
  border: 1px solid var(--rub-jaci); border-radius: 8px; background: #fff;
  color: #3c4043; font-size: 15px; font-weight: 600; text-decoration: none;
  cursor: pointer;
}
.gumbMicrosoft:hover { background: #f7f9fc; }

/* ---------- Moj AI: kartice, inbox, zadaci, dokumenti, zapamćeno ---------- */
.maKartica { margin-top: 4px; }

.card {
  background: #fff; border: 1px solid var(--rub); border-radius: var(--radijus);
  padding: 18px 20px; box-shadow: var(--sjena);
}
.card h2 { margin-top: 0; }
.card h3 { margin-top: 14px; }
.card h3:first-child { margin-top: 0; }

.inboxRaspored { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px;
  align-items: start; }
.inboxRaspored table { margin: 0; }
@media (max-width: 1100px) { .inboxRaspored { grid-template-columns: 1fr; } }

tr.klik, li.klik { cursor: pointer; }
tr.klik:hover { background: #f7fafc; }

.oznaka {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  padding: 2px 8px; border-radius: 10px; margin-right: 6px; white-space: nowrap;
  background: var(--pozadina); color: var(--tiho); border: 1px solid var(--rub);
}
.oznaka.hitno { background: var(--crvena-bl); color: var(--crvena); border-color: #f3c9c5; }
.oznaka.srednje { background: var(--zuta-blijeda); color: var(--zuta-tamna); border-color: #f0d79a; }

.popisZadataka { list-style: none; padding: 0; margin: 10px 0 0; }
.popisZadataka li {
  display: flex; align-items: center; gap: 8px; padding: 7px 0;
  border-bottom: 1px solid var(--rub); font-size: 13.5px;
}
.popisZadataka li:last-child { border-bottom: 0; }
/* tekst zadatka uzima glavninu retka; oznake padaju u novi red kad je usko */
.popisZadataka li { flex-wrap: wrap; }
.popisZadataka .tekstStavke { flex: 1 1 55%; min-width: 0; }
.popisZadataka .oznaka { flex: 0 0 auto; }
.popisZadataka .gotovo { text-decoration: line-through; color: var(--tiho); }
.kvacica {
  background: none; border: 0; cursor: pointer; font-size: 15px; color: var(--zelena);
  padding: 0 2px; width: auto;
}
.kvacica:hover { filter: none; background: none; }

/* jedan redak forme: polja NE smiju preuzeti globalnu sirinu 100% */
.redak { display: flex; gap: 8px; align-items: center; margin: 12px 0; flex-wrap: wrap; }
.redak input { margin: 0; width: auto; }
.redak input[type="date"] { flex: 0 0 auto; }
.redak input:first-child { flex: 1 1 260px; min-width: 200px; }
.redak button { flex: 0 0 auto; }

.prekidac { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; }
.prekidac input { width: auto; margin: 0; }

.gumbKaoLabel {
  display: inline-block; margin: 0; padding: 9px 16px; cursor: pointer; font-weight: 600;
  background: var(--navy); color: #fff; border-radius: 8px; font-size: 13px;
}
.gumbKaoLabel:hover { background: var(--navy-blaga); }

/* ---------- popup poruke ---------- */
#dijalogPoruke {
  width: min(900px, 94vw); max-height: 88vh; border: 0; border-radius: var(--radijus);
  padding: 0; box-shadow: var(--sjena-jaca); color: var(--tekst);
}
#dijalogPoruke::backdrop { background: rgba(27, 42, 58, .45); }
#dijalogPoruke header {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--rub);
}
#dijalogPoruke header button {
  background: none; border: 0; font-size: 22px; color: var(--tiho); cursor: pointer;
  width: auto; padding: 0 4px;
}
#dijalogPoruke header button:hover { background: none; color: var(--tekst); }
#dpTijelo { width: 100%; height: 52vh; border: 0; background: #fff; }
.dpPrivitci { display: flex; gap: 10px; flex-wrap: wrap; padding: 10px 20px;
  border-bottom: 1px solid var(--rub); font-size: 13px; }
.dpPrivitci a { color: var(--plava); text-decoration: none; }
#dpAnaliza { margin: 0 20px 14px; max-height: 32vh; overflow: auto; }
#dpAnaliza pre { white-space: pre-wrap; font-size: 12.5px; }
#dijalogPoruke footer {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 20px; border-top: 1px solid var(--rub);
}

/* ---------- početna ploča ---------- */
.plocaKartice {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px; margin: 8px 0 26px;
}
.popisNovosti { list-style: none; padding: 0; margin: 10px 0 0; }
.popisNovosti li {
  display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--rub);
  font-size: 13.5px;
}
.popisNovosti li:last-child { border-bottom: 0; }

/* ---------- upiti iz kampanje ---------- */
.leadPodaci {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 6px 18px; margin: 10px 0 4px; font-size: 13.5px;
}
.leadPoruka {
  white-space: pre-wrap; background: var(--pozadina); border: 1px solid var(--rub);
  border-radius: 8px; padding: 12px; font-size: 13px; max-height: 240px; overflow: auto;
}
#detaljLeada textarea { width: 100%; font-size: 13.5px; }
#detaljLeada select { width: auto; margin: 0; }
#nacrtPonudeLeada { margin-top: 16px; border-top: 1px solid var(--rub); padding-top: 12px; }
#nacrtPonudeLeada table { margin: 8px 0; }
.redak select { width: auto; margin: 0; }

/* ---------- projekti: gantt, nalozi, dijalozi ---------- */
.mreza4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 16px; }

.gantt { margin: 10px 0 18px; }
.ganttRed { display: flex; align-items: center; gap: 10px; margin: 3px 0; }
.ganttOznaka { flex: 0 0 210px; font-size: 12.5px; color: var(--tiho); text-align: right; }
.ganttTraka {
  position: relative; flex: 1; height: 16px; background: var(--pozadina);
  border-radius: 8px; overflow: hidden;
}
.ganttBar { position: absolute; top: 3px; height: 10px; border-radius: 5px; background: var(--rub-jaci); }
.ganttBar.u_tijeku { background: var(--marka-zuta); }
.ganttBar.gotovo { background: var(--zelena); }
.ganttDanas { position: absolute; top: 0; width: 2px; height: 100%; background: var(--crvena); }

.nalog {
  border: 1px solid var(--rub); border-radius: var(--radijus); padding: 12px 16px;
  margin-bottom: 10px; background: #fff;
}
.nalog h3 { margin: 0; }
.redakNaloga {
  display: flex; align-items: center; gap: 8px; margin: 5px 0; font-weight: 500;
  color: var(--tekst); font-size: 13.5px;
}
.redakNaloga input[type="checkbox"] { width: auto; margin: 0; }
.redakNaloga input[type="number"] { margin: 0; }

#dijalogRegistri, #dijalogIsporuka, #dijalogAnalize, #dijalogPozurnice {
  width: min(820px, 94vw); max-height: 88vh; border: 0; border-radius: var(--radijus);
  padding: 0; box-shadow: var(--sjena-jaca); color: var(--tekst);
}
#dijalogRegistri::backdrop, #dijalogIsporuka::backdrop,
#dijalogAnalize::backdrop, #dijalogPozurnice::backdrop { background: rgba(27,42,58,.45); }
#dijalogRegistri header, #dijalogIsporuka header,
#dijalogAnalize header, #dijalogPozurnice header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px; border-bottom: 1px solid var(--rub);
}
#dijalogRegistri header button, #dijalogIsporuka header button,
#dijalogAnalize header button, #dijalogPozurnice header button {
  background: none; border: 0; font-size: 22px; color: var(--tiho); cursor: pointer;
  width: auto; padding: 0 4px;
}
.drSadrzaj { padding: 16px 20px 20px; max-height: 72vh; overflow: auto; }
.drSadrzaj table { margin: 6px 0 4px; }
.drSadrzaj textarea { width: 100%; }

.grafMjeseci {
  display: flex; align-items: flex-end; gap: 8px; height: 160px; margin: 12px 0 18px;
  border-bottom: 1px solid var(--rub);
}
.grafStupac {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; height: 100%;
}
.grafBar { width: 70%; border-radius: 4px 4px 0 0; background: var(--zelena); }
.grafBar.dolje { background: var(--crvena); align-self: center; }
.grafStupac small { font-size: 10.5px; color: var(--tiho); margin-top: 4px; }

/* =====================================================================
   MOBITEL (29.09.2026.) — isti ekrani i isti id-jevi, samo drukčiji raspored.
   Provjera: /root/snap-izlaz/mob/snimi.mjs (pravi chromium, 390 px, prijavljen).
   ===================================================================== */
@media (max-width: 760px) {
  /* zaglavlje u dva reda: marka + odjava gore, izbornik kao traka koja se vuče prstom */
  header#zaglavlje { flex-wrap: wrap; height: auto; padding: 8px 14px 0; gap: 0 10px;
    padding-top: calc(8px + env(safe-area-inset-top)); }
  header#zaglavlje .marka { font-size: 19px; }
  header#zaglavlje .desno { gap: 8px; }
  #tkoSam { display: none; }
  #odjava { padding: 6px 12px; font-size: 13px; }
  #izbornik { order: 3; flex-basis: 100%; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; margin: 4px -14px 0; padding: 0 8px; }
  #izbornik::-webkit-scrollbar { display: none; }
  #izbornik button { padding: 11px 12px 10px; font-size: 14px; white-space: nowrap; flex-shrink: 0; }

  main { margin: 14px auto 90px; padding: 0 12px; }
  h1 { font-size: 22px; }

  /* iOS zumira stranicu kad je slovo u polju manje od 16px */
  input, select, textarea { font-size: 16px !important; }

  /* tablice: vodoravno pomicanje umjesto izlaska izvan ekrana */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  th { white-space: nowrap; padding: 9px 10px; }
  td { padding: 9px 10px; font-size: 13.5px; }

  .kartica { margin: 28px auto; padding: 22px 18px; }
  .card { padding: 14px; }
  .pilule { gap: 6px; margin: 10px 0 14px; flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none; }
  .pilule::-webkit-scrollbar { display: none; }
  .pilule button { white-space: nowrap; flex-shrink: 0; }

  /* Moj AI: razgovor preko cijele širine, popis razgovora kratak iznad njega */
  .mojAi { grid-template-columns: 1fr; height: auto; min-height: 0; gap: 10px; }
  .mojAiPopis { height: auto; max-height: 150px; padding: 10px; }
  .mojAiPopis > button { margin-bottom: 8px; padding: 9px; }
  .mojAiRazgovor { height: calc(100dvh - 190px); min-height: 380px; }
  #mojAiTok { padding: 14px 10px; gap: 12px; }
  .poruka { gap: 8px; }
  .poruka .avatar { width: 24px; height: 24px; font-size: 10px; }
  .poruka .sadrzaj { padding: 10px 12px; max-width: calc(100% - 32px); }
  #mojAiForma { padding: 10px; gap: 8px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  #popisRazgovora button { opacity: 1; }      /* nema lebdenja mišem na mobitelu */

  /* plutajući chat i dijalozi preko cijelog ekrana */
  #fab { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); width: 52px; height: 52px; }
  #chat { inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none;
    border-radius: 0; border: 0; }
  #modalPonude { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
    border-radius: 0; }
  .modalTijelo { padding: 14px 12px 24px; }
  dialog { width: 100vw !important; max-width: 100vw !important; height: 100dvh;
    max-height: 100dvh !important; margin: 0; border-radius: 0 !important; }

  /* rasporedi u dva stupca idu jedan ispod drugoga */
  .mreza2, .nacrtRaspored, .inboxRaspored { grid-template-columns: 1fr !important; }
  .brojke { grid-template-columns: 1fr 1fr; gap: 10px; }
  .brojka { padding: 12px 14px; }
  .brojka .v { font-size: 22px; }
  .akcije, .rabatRed { flex-wrap: wrap; }
  label.uRedu { width: 100%; }
  .crtez svg, .crtez img { max-width: 100%; height: auto; }
}

@media (max-width: 760px) {
  /* tablice kao kartice: svaki red jedna kartica, naziv stupca lijevo, vrijednost desno */
  table.kartice { display: block; overflow: visible; background: none; border: 0;
    box-shadow: none; border-radius: 0; }
  table.kartice thead { display: none; }
  table.kartice tbody { display: block; }
  table.kartice tr { display: block; background: #fff; border: 1px solid var(--rub);
    border-radius: 10px; padding: 6px 12px; margin-bottom: 10px; box-shadow: var(--sjena); }
  table.kartice td { display: flex; justify-content: space-between; align-items: baseline;
    gap: 12px; border: 0; padding: 5px 0; text-align: right; font-size: 14px;
    overflow-wrap: anywhere; }
  table.kartice td::before { content: attr(data-label); flex-shrink: 0; text-align: left;
    font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--tiho); padding-top: 2px; }
  table.kartice td[data-label=""]::before { content: none; }
  table.kartice td[data-label=""] { justify-content: flex-end; }
  table.kartice td:empty { display: none; }
  table.kartice tbody tr:hover td { background: none; }
  table.kartice td[colspan] { text-align: left; }
  table.kartice td[colspan]::before { content: none; }

  /* Moj AI: opis se na mobitelu ne ponavlja — prostor ide razgovoru */
  #mojAiEkran > p.podnaslov { display: none; }
  .mojAiRazgovor { height: calc(100dvh - 235px); }
  #odjava { background: #fff; border: 1px solid var(--rub-jaci); color: var(--tiho); }
}
@media (max-width: 760px) { main, header#zaglavlje { overflow-x: clip; } }
@media (max-width: 760px) { #modalStavke input { min-width: 76px; } #modalStavke td:nth-child(2) { min-width: 170px; } }
#firmaOdabir { margin: 0; width: auto; padding: 5px 10px; font-weight: 600; font-size: 13.5px;
  border-radius: 20px; background: var(--pozadina); }

/* ---------- ponuda s terena ---------- */
.terenKorak h3 { margin: 0 0 10px; }
.terenGumbi { display: flex; gap: 10px; flex-wrap: wrap; }
.gumbDatoteka { display: inline-flex; align-items: center; gap: 6px; margin: 0; cursor: pointer;
  background: var(--marka-zuta); color: #22303d; font-weight: 700; font-size: 15px;
  padding: 12px 18px; border-radius: 10px; }
.gumbDatoteka.sekundarni { background: #fff; border: 1px solid var(--rub-jaci); color: var(--tekst); }
.gumbDatoteka input { display: none; }
.terenSlike { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.terenSlika { position: relative; width: 104px; height: 104px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--rub); }
.terenSlika img { width: 100%; height: 100%; object-fit: cover; }
.terenSlika button { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; padding: 0;
  border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; border: 0; font-size: 16px; line-height: 1; }
.terenOznake { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.terenRed { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.terenRed > span { font-size: 12px; font-weight: 700; color: var(--tiho); text-transform: uppercase;
  letter-spacing: .05em; width: 72px; }
.oznakaGumb { background: #fff; color: var(--tekst); border: 1px solid var(--rub-jaci);
  border-radius: 18px; padding: 6px 12px; font-size: 13.5px; font-weight: 600; }
.oznakaGumb.odabran { background: var(--navy); color: #fff; border-color: var(--navy); }
.terenKupac { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.terenKupac input { margin: 0; }
.terenGlavni { width: 100%; padding: 16px; font-size: 16px; margin: 6px 0 4px; }
.terenProcitano { line-height: 1.55; }
@media (max-width: 760px) {
  .terenKupac { grid-template-columns: 1fr; }
  .terenRed > span { width: 100%; }
}