/* Jedan stupac na mobitelu (od 360 px), ograničena širina na računalu; bez vodoravnog skrolanja. */

:root {
  --pozadina: #f6f6f4;
  --plosa: #ffffff;
  --tekst: #1d1d1b;
  --blijedo: #6b6b66;
  --rub: #e2e2dd;
  --naglasak: #1f5fbf;
  --zeleno: #1d7a3a;
  --crveno: #b3261e;
  --zuto: #8a6d00;
  --plosa-oznake: #ecece8;
  --okolina: #6a1b9a;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --pozadina: #161615;
    --plosa: #1f1f1e;
    --tekst: #ececea;
    --blijedo: #a3a39d;
    --rub: #34342f;
    --naglasak: #7fb0ff;
    --zeleno: #6fcf8a;
    --crveno: #ff8a80;
    --zuto: #e6c35c;
    --plosa-oznake: #2b2b28;
    --okolina: #7b1fa2;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--pozadina);
  color: var(--tekst);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow-wrap: anywhere;
}

a { color: var(--naglasak); }

main {
  max-width: 880px;
  margin: 0 auto;
  padding: 12px 12px 48px;
}

.glava {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 880px;
  margin: 0 auto;
  padding: 10px 12px 0;
}
.glava .ime { font-weight: 600; color: var(--tekst); text-decoration: none; white-space: nowrap; }
.glava nav {
  margin-left: auto;
  margin-right: 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 2px 12px;
}
.glava form { margin: 0; flex: none; }
.glava button { white-space: nowrap; }

button, select, input, textarea {
  font: inherit;
  color: var(--tekst);
  background: var(--plosa);
  border: 1px solid var(--rub);
  border-radius: 8px;
  padding: 7px 10px;
  max-width: 100%;
}
button { cursor: pointer; }
button.tiho { background: none; color: var(--blijedo); }

.filtri {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 14px;
}
.filtri select { flex: 1 1 140px; min-width: 0; }

.napomena {
  background: var(--plosa-oznake);
  border-left: 4px solid var(--zuto);
  padding: 8px 12px;
  border-radius: 6px;
}

.feed { display: grid; gap: 10px; }

.stavka {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 12px;
  background: var(--plosa);
  border: 1px solid var(--rub);
  border-radius: 10px;
  padding: 10px;
}
.stavka .slika {
  display: block;
  width: 112px;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  background: var(--plosa-oznake);
  overflow: hidden;
}
.stavka .slika img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stavka h2 { font-size: 1rem; margin: 0 0 2px; line-height: 1.3; }
.stavka h2 a { color: var(--tekst); text-decoration: none; }
.stavka p { margin: 2px 0; }
.stavka .vrsta, .stavka .meta { color: var(--blijedo); font-size: 0.875rem; }
.stavka .razlog { font-size: 0.875rem; }

@media (min-width: 640px) {
  .stavka { grid-template-columns: 180px minmax(0, 1fr); }
  .stavka .slika { width: 180px; }
}

.oznaka {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--plosa-oznake);
}
.oznaka.javljen { color: var(--naglasak); }
.oznaka.odbijen { color: var(--crveno); }
.oznaka.nije-poslan { color: var(--zuto); }
.oznaka.presuda-da { color: var(--zeleno); }
.oznaka.presuda-ne { color: var(--crveno); }

.dalje, .natrag, .link { margin: 14px 0; }
.starije { font-weight: 600; }
.prazno { color: var(--blijedo); }

section { margin-top: 22px; }
section h3 { font-size: 1rem; margin: 0 0 8px; }

.galerija {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
@media (min-width: 640px) {
  .galerija { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.galerija figure { margin: 0; position: relative; }
.galerija img, .galerija .bez-fotke {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  background: var(--plosa-oznake);
}
.galerija figcaption {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0 7px;
  border-radius: 999px;
}

.poruka, .opis {
  white-space: pre-line;
  background: var(--plosa);
  border: 1px solid var(--rub);
  border-radius: 10px;
  padding: 10px 12px;
}

.odluka {
  background: var(--plosa);
  border: 1px solid var(--rub);
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 8px;
}
.odluka p, .odluka ul { margin: 2px 0; }
.odluka ul { padding-left: 20px; }
.neprovjereni { color: var(--blijedo); }

.polja {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 4px 12px;
  margin: 0;
  background: var(--plosa);
  border: 1px solid var(--rub);
  border-radius: 10px;
  padding: 10px 12px;
}
.polja dt { color: var(--blijedo); }
.polja dd { margin: 0; }

.cijene { width: 100%; border-collapse: collapse; background: var(--plosa); }
.cijene th, .cijene td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--rub); }
.cijene th { color: var(--blijedo); font-weight: 500; }

.prijava {
  max-width: 340px;
  margin: 18vh auto 0;
  display: grid;
  gap: 10px;
}
.prijava h1 { font-size: 1.25rem; margin: 0 0 6px; }
.greska { color: var(--crveno); margin: 0; }
.upozorenje { color: var(--zuto); margin: 0; }

/* Pretrage (ciklus 19). */

.vrh-pretraga { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.vrh-pretraga h1, main > h1 { font-size: 1.25rem; margin: 8px 0; }
a.gumb {
  display: inline-block;
  padding: 7px 10px;
  border: 1px solid var(--rub);
  border-radius: 8px;
  background: var(--plosa);
  text-decoration: none;
}
button.opasno { color: var(--crveno); }
button:disabled { opacity: 0.4; cursor: default; }

.problemi ul { margin: 4px 0 0; padding-left: 20px; }
.problemi h3 { margin: 0; }

.pretrage { display: grid; gap: 12px; }
.pretraga {
  background: var(--plosa);
  border: 1px solid var(--rub);
  border-radius: 10px;
  padding: 10px 12px;
  min-width: 0;
}
.pretraga h2 { font-size: 1.05rem; margin: 0 0 4px; line-height: 1.3; }
.pretraga h3 { font-size: 0.875rem; color: var(--blijedo); font-weight: 600; margin: 10px 0 2px; }
.pretraga ul { margin: 2px 0; padding-left: 20px; }
.meta { color: var(--blijedo); font-size: 0.875rem; margin: 2px 0; }
.objasnjenje { color: var(--blijedo); font-size: 0.875rem; }
.oznaka.glasna { color: var(--naglasak); }
.oznaka.tiha { color: var(--blijedo); }
.ime-filtra { font-weight: 500; }
small.nestaje { color: var(--zuto); }
.zamjena {
  border-left: 4px solid var(--naglasak);
  background: var(--plosa-oznake);
  border-radius: 6px;
  padding: 6px 10px;
  margin: 6px 0;
}
.zamjena p { margin: 0 0 6px; }
.zamjena form { margin: 0; }

form.ukus { display: grid; gap: 4px; margin: 10px 0; }
form.ukus label { font-size: 0.875rem; color: var(--blijedo); }
textarea { width: 100%; line-height: 1.4; resize: vertical; }
form.ukus button { justify-self: start; }
form.pad { display: grid; gap: 4px; margin: 10px 0; }
form.pad .polja-pada { display: grid; grid-template-columns: minmax(0, max-content) 6em; justify-content: start; gap: 4px 8px; align-items: center; }
form.pad label { font-size: 0.875rem; color: var(--blijedo); }
form.pad input { width: 100%; }
form.pad button { justify-self: start; }

.radnje { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 4px; }
.radnje form { margin: 0; display: flex; gap: 6px; }
details.url summary { color: var(--blijedo); font-size: 0.875rem; cursor: pointer; }
code { font-size: 0.8125rem; word-break: break-all; }

.vrste { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.vrste a {
  padding: 5px 10px;
  border: 1px solid var(--rub);
  border-radius: 999px;
  text-decoration: none;
  background: var(--plosa);
}
.vrste a[aria-current] { background: var(--naglasak); color: var(--plosa); border-color: var(--naglasak); }

form.nova section, section.link { margin-top: 14px; }
form.nova h3, section.link h3 { margin: 0 0 6px; }
.filtar { display: grid; gap: 4px; margin: 8px 0; }
.raspon { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.raspon input, .raspon select, .filtar select { width: 100%; min-width: 0; }
.kvacice { display: grid; gap: 2px; }
label.kvacica { display: flex; gap: 8px; align-items: baseline; }
details.ostali { margin-top: 8px; }
details.ostali summary { cursor: pointer; font-weight: 500; }
fieldset.javljanje { border: 1px solid var(--rub); border-radius: 8px; margin: 12px 0; display: grid; gap: 4px; }
section.link form { display: grid; gap: 6px; }
section.link input[type=url] { width: 100%; }

.lokacije input[type=search] { width: 100%; margin-top: 6px; }
.odabrane { display: flex; flex-wrap: wrap; gap: 6px; }
.cip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--plosa-oznake);
  border-radius: 999px;
  padding: 2px 4px 2px 10px;
  font-size: 0.875rem;
  max-width: 100%;
}
.cip .makni { border: none; background: none; padding: 0 6px; }
.ponuda { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 2px; }
.ponuda button { width: 100%; text-align: left; }

/* Uređivač kriterija (ciklus 20). */
ul.kriteriji.uredivanje { list-style: none; padding-left: 0; display: grid; gap: 12px; }
ul.kriteriji.uredivanje .redak { font-weight: 500; overflow-wrap: anywhere; }
ul.kriteriji.uredivanje .radnje { margin-top: 4px; }
ul.ponuda-polja { padding-left: 20px; display: grid; gap: 6px; }
form.kriterij fieldset { border: 1px solid var(--rub); border-radius: 8px; margin: 12px 0; display: grid; gap: 4px; }
form.kriterij label.broj { display: block; font-size: 0.875rem; color: var(--blijedo); margin-top: 8px; }
form.kriterij input[name=broj] { width: 100%; margin: 4px 0 8px; }
table.ucinak td, table.ucinak th { white-space: nowrap; }
ul.primjeri { padding-left: 20px; display: grid; gap: 6px; }
ul.primjeri li, ul.neprovjereni li { overflow-wrap: anywhere; }

/* Zašto nije došao (ciklus 21). */
.zasto {
  display: flex;
  gap: 8px;
  margin: 4px 0 10px;
}
.zasto input { flex: 1 1 auto; min-width: 0; }
.zasto button { flex: 0 0 auto; }
.po-pretrazi {
  background: var(--plosa);
  border: 1px solid var(--rub);
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 8px;
  overflow-wrap: anywhere;
}
.po-pretrazi p { margin: 2px 0; }
.po-pretrazi .ime { font-weight: 500; }
.po-pretrazi .vrsta { color: var(--blijedo); font-weight: 400; font-size: 0.875rem; }
.po-pretrazi .vrsta-glasna { color: var(--naglasak); }
.po-pretrazi[data-ishod="nevidjen"] .recenica { color: var(--blijedo); }
.noviji {
  background: var(--plosa-oznake);
  border-left: 4px solid var(--naglasak);
  padding: 8px 12px;
  border-radius: 6px;
}

/* Oznaka okoline (ciklus 32): ljubičasta, da se ne miješa s crvenom trakom kvara. */
.okolina {
  max-width: 880px;
  margin: 8px auto 0;
  padding: 6px 12px;
  background: var(--okolina);
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  border-radius: 6px;
}

/* Stanje bota (ciklus 22). */
.traka {
  display: grid;
  gap: 6px;
  max-width: 880px;
  margin: 8px auto 0;
  padding: 0 12px;
}
.traka a {
  display: block;
  background: var(--plosa);
  border-left: 4px solid var(--crveno);
  color: var(--crveno);
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 6px;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.stanje section { margin-top: 14px; }
.stanje h2 { font-size: 1.05rem; margin: 0 0 6px; }
.stanje .polja dd { overflow-wrap: anywhere; }
ul.stanje-pretraga, ul.ispadi { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
ul.stanje-pretraga li, ul.ispadi li {
  background: var(--plosa);
  border: 1px solid var(--rub);
  border-radius: 10px;
  padding: 8px 12px;
  overflow-wrap: anywhere;
}
ul.stanje-pretraga li.kvar { border-left: 4px solid var(--crveno); }
ul.stanje-pretraga p, ul.ispadi p { margin: 2px 0; }
ul.stanje-pretraga .ime, ul.ispadi .ime { font-weight: 500; }

/* Statistika tržišta (ciklus 23). */
table.mjesta, table.tok { font-size: 0.9375rem; overflow-wrap: normal; }
table.mjesta th .meta, table.tok th .meta { display: block; font-weight: 400; }
table.mjesta td:nth-child(n+2), table.mjesta th:nth-child(n+2),
table.tok td:nth-child(n+2), table.tok th:nth-child(n+2) { text-align: right; }
table.mjesta td:nth-child(n+2), table.tok td { white-space: nowrap; }
table.mjesta td .meta, table.tok td .meta { font-size: 0.8125rem; }
table.mjesta tr.dubina-1 td:first-child { padding-left: 18px; }
table.mjesta tr.dubina-2 td:first-child { padding-left: 30px; }
table.mjesta tr.dubina-0 td { font-weight: 600; }
.premalo { color: var(--blijedo); }
table.tok td.novih { width: 40%; }
.uz-stupac { position: relative; text-align: right; }
.uz-stupac .stupac {
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  background: var(--plosa-oznake);
  border-radius: 3px;
}
.uz-stupac .broj { position: relative; }
table.tok tr.u-tijeku td { color: var(--blijedo); }
ul.pretrage-statistika { padding-left: 20px; display: grid; gap: 6px; }

/* Rad bota (ciklus 24). */
section.lijevak, section.trosak { margin-top: 18px; }
section.lijevak h3, section.trosak h3 { font-size: 1rem; margin: 12px 0 4px; }
dl.stepenice dd { overflow-wrap: anywhere; }
table.rezu { font-size: 0.9375rem; }
table.rezu td:nth-child(2), table.rezu th:nth-child(2) { text-align: right; white-space: nowrap; }
table.rad-tjedni td .meta, table.trosak-tablica td .meta { white-space: nowrap; }
/* „listopad 2026.” u jednom retku gura tablicu na 384 px: Safari na 390 px
   s klasičnom trakom za pomicanje (373 px) i telefon od 375 px idu vodoravno. */
table.trosak-mjeseci td:first-child { white-space: normal; }

/* Pojeftinjenja (ciklus 27): tri stupca, cijena u dva retka, da 390 px ne ide vodoravno. */
table.pojeftinjenja { font-size: 0.9375rem; }
table.pojeftinjenja td:first-child { white-space: nowrap; }
table.pojeftinjenja td:nth-child(3), table.pojeftinjenja th:nth-child(3) { text-align: right; }
table.pojeftinjenja td:nth-child(2) { overflow-wrap: anywhere; }
.oznaka.ponovna { color: var(--naglasak); }
/* Iznos se ne lomi usred broja („112.42 5 €”); najniža i nova idu u dva retka. */
table.pojeftinjenja .cijela { white-space: nowrap; }

/* Upute (2026-10-26): tekst za čitanje, isti stupac kao ostatak. */

.upute { max-width: 680px; }
.upute h1 { font-size: 1.25rem; margin: 8px 0 4px; }
.upute h2 { font-size: 1.1rem; margin: 26px 0 6px; padding-top: 10px; border-top: 1px solid var(--rub); }
.upute h3 { font-size: 0.95rem; margin: 14px 0 4px; }
.upute p, .upute li { line-height: 1.5; }
.upute ul { padding-left: 20px; margin: 4px 0; }
.upute code { background: var(--plosa-oznake); padding: 0 4px; border-radius: 3px; font-size: 0.9em; }
.upute pre { background: var(--plosa); border: 1px solid var(--rub); padding: 8px 10px; overflow-x: auto; font-size: 0.875rem; line-height: 1.4; }
.upute .sadrzaj { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; padding: 0; list-style: none; }

/* Korisnici (ciklus 31): gumb se ne lomi usred riječi; ostatak tablice se lomi kao
   drugdje (globalni `anywhere`), jer ime do 20 znakova, chat i kod nemaju razmaka. */
table.korisnici form, table.kodovi form { margin: 0; }
table.korisnici button, table.kodovi button { white-space: nowrap; }