/* =============================================================
   Javne stranice cjenika.

   Namjerno bez JavaScripta: t. VII. Odluke NN 101/2026 traži da
   softverski alati i automatizirani programi mogu dohvatiti podatke
   o cijenama. Stranica koja se sastavlja u pregledniku to otežava,
   a kupcu koji stoji u dućanu produžuje čekanje.

   Boje i tipografija dolaze iz design-tokens.css, istih tokena koje
   koristi administracija, pa javna stranica i aplikacija izgledaju
   kao jedan proizvod bez da javni dio ovisi o administracijskom CSS-u.
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-primary);
  color: var(--bs-secondary);
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
  font-size: 15px;
  line-height: 24px;
}

.javno-stranica {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- traka iznad stranice ---------- */

.javno-traka {
  background: var(--bg-cards);
  border-bottom: 1px solid var(--bs-icons-3);
}

.javno-traka__sadrzaj {
  max-width: 1120px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.javno-traka__znak { display: block; }

.javno-traka__crta {
  width: 1px;
  height: 18px;
  background: var(--bs-icons-3);
}

.javno-traka__sto {
  font: 500 13px/20px var(--font-sans);
  color: var(--bs-tertiary);
}

.javno-traka__veza {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--bs-icons-3);
  border-radius: var(--r-lg, 8px);
  background: var(--bg-cards);
  font: 600 13px/20px var(--font-sans);
  color: var(--bs-cta);
  text-decoration: none;
  white-space: nowrap;
}

.javno-traka__veza:hover { background: var(--bg-light-brand-2); border-color: var(--bs-cta); }

/* ---------- sadržaj ---------- */

.javno {
  flex: 1;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px 24px 48px;
}

.javno h1 {
  margin: 0 0 10px;
  font: 700 28px/32px var(--font-sans);
  letter-spacing: -0.01em;
}

.javno a { color: var(--bs-cta); text-decoration: none; }
.javno a:hover { text-decoration: underline; }

.uvod {
  margin: 0 0 28px;
  max-width: 80ch;
  font: 400 15px/24px var(--font-sans);
  color: var(--bs-tertiary);
  text-wrap: pretty;
}

.natrag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 20px;
  font: 600 13px/20px var(--font-sans);
}

.prazno {
  padding: 24px;
  background: var(--bg-cards);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--r-lg, 8px);
  color: var(--bs-tertiary);
}

/* ---------- kartice sa strojnim formatima ---------- */

.kartice {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 0 0 28px;
}

.kartica {
  display: block;
  padding: 16px 20px;
  background: var(--bg-cards);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--r-lg, 8px);
  box-shadow: var(--shadow-card, 0 4px 8px rgba(0, 0, 0, 0.04));
  color: inherit;
  transition: border-color .12s ease-out, box-shadow .12s ease-out;
}

.javno a.kartica:hover {
  text-decoration: none;
  border-color: var(--bs-cta);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.08);
}

.kartica strong { display: block; font: 600 15px/20px var(--font-sans); color: var(--bs-cta); }
.kartica span { display: block; margin-top: 4px; font: 400 13px/20px var(--font-sans); color: var(--bs-tertiary); }

/* ---------- dan objave ---------- */

.javno-dan {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 28px 0 12px;
}

.javno-dan h2 { margin: 0; font: 600 20px/24px var(--font-sans); }
.javno-dan__broj { font: 400 13px/20px var(--font-sans); color: var(--bs-text-icons); }

/* ---------- brojke iznad cjenika ---------- */

/* Four equal columns, so the figures line up whatever their length (two on a phone). */
.javno-brojke {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 0 0 24px;
  padding: 14px 20px;
  background: var(--bg-cards);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--r-lg, 8px);
}

.javno-brojke dt { font: 400 12px/16px var(--font-sans); color: var(--bs-text-icons); }
.javno-brojke dd { margin: 0; font: 600 17px/24px var(--font-sans); }

/* ---------- poveznice uz objavu ---------- */

td[data-uloga="datoteke"] a.pogledaj { font-weight: 600; }
td[data-uloga="datoteke"] .odvojnik { color: var(--neutral-30); margin: 0 4px; }

/* ---------- zaglavlje pregleda: tekst lijevo, datoteke desno ---------- */

.pregled-glava {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin: 0 0 24px;
}

.pregled-glava__tekst { min-width: 0; }
.pregled-glava h1 { margin: 0 0 8px; }
.pregled-mjesto { font: 500 15px/24px var(--font-sans); color: var(--bs-secondary); }
.pregled-mjesto b { font-weight: 600; }
.pregled-mjesto .odvojnik { color: var(--bs-text-icons); }
.pregled-opis { font: 400 14px/20px var(--font-sans); color: var(--bs-tertiary); }
.pregled-glava .preuzmi { margin: 0; flex-wrap: nowrap; }

/* ---------- gumbi za preuzimanje ---------- */

.preuzmi {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
}

.javno a.dl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--bs-icons-3);
  border-radius: var(--r-lg, 8px);
  background: var(--bg-cards);
  font: 600 13px/20px var(--font-sans);
  color: var(--bs-cta);
}

.javno a.dl:hover {
  background: var(--bg-light-brand-2);
  border-color: var(--bs-cta);
  text-decoration: none;
}

/* ---------- tablice ---------- */

/* overflow-x nosi i klip na zaobljene kutove, pa unutar kartice ne treba drugi omot. */
.tbl-omot {
  background: var(--bg-cards);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--r-lg, 8px);
  box-shadow: var(--shadow-card, 0 4px 8px rgba(0, 0, 0, 0.04));
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font: 500 14px/20px var(--font-sans);
  color: var(--bs-secondary);
}

th, td {
  text-align: left;
  vertical-align: top;
}

thead th {
  padding: 10px 16px;
  /* Stupanj svjetliji od pozadine stranice; dizajn ga drži odvojenim od --bg-primary. */
  background: #FAFAFA;
  border-bottom: 1px solid var(--bs-icons-3);
  font: 600 12px/16px var(--font-sans);
  color: var(--bs-tertiary);
  white-space: nowrap;
}

tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--ds-table);
}

tbody tr:hover td { background: var(--bg-light-brand); }
tbody tr:last-child td { border-bottom: none; }

td small { color: var(--bs-text-icons); font-size: 12px; }

.num { text-align: right; font-variant-numeric: tabular-nums; }
.mono, code { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Zadnji stupac popisa nosi tri poveznice; prelomljene izgledaju kao tri retka. */
table:not(.siroka) tbody td:last-child { white-space: nowrap; }

/* Novac se čita odozgo prema dolje, pa i naslov stupca stoji uz njegove brojke. */
[data-uloga="cijena"], [data-uloga="jedinicna"], [data-uloga="sidrena"] {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

tbody td[data-uloga="glavno"] { font-weight: 600; }
tbody td[data-uloga="cijena"] { font-weight: 600; }

/* Cjenik: naziv dobiva mjesta da se ne lomi riječ po riječ, ostali stupci su sivi, kao u dizajnu. */
table.siroka th, table.siroka td { padding-inline: 12px; }
table.siroka td[data-uloga="glavno"] { min-width: 200px; }
table.siroka td:not([data-uloga="glavno"]):not([data-uloga="cijena"]) { color: var(--bs-tertiary); }
table.siroka td:not([data-uloga="glavno"]) { white-space: nowrap; }

/* Prazna ćelija je crtica, kao u dizajnu. Samo na zaslonu: u datoteci ostaje prazno. */
table.siroka tbody td:empty::after { content: "—"; color: var(--bs-text-icons); }
code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 13px; }

/* The checksum is 64 characters with no space in them; on a phone it breaks rather than widen the page. */
p small code { white-space: normal; overflow-wrap: anywhere; }

/* ---------- oznake ---------- */

.oznaka {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--bg-light-brand-2);
  color: var(--bs-cta);
  font: 600 11px/16px var(--font-sans);
  white-space: nowrap;
}

.oznaka--siva { background: var(--ds-table); color: var(--bs-tertiary); }

/* ---------- podnožje ---------- */

.javno-podnozje {
  background: var(--bg-cards);
  border-top: 1px solid var(--bs-icons-3);
}

.javno-podnozje__sadrzaj {
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  font: 400 12px/16px var(--font-sans);
  color: var(--bs-text-icons);
}

/* =============================================================
   Uski ekran: tablica od jedanaest stupaca ne može se čitati na
   mobitelu, pa svaki redak postaje kartica. Uloga stupca kaže što
   u njoj ide u prvi plan; cijena je razlog zbog kojeg je kupac i
   otvorio stranicu, pa ona ide gore.

   Kartice nastaju iz iste tablice, a ne iz drugog skupa oznaka:
   podatak u stranici ostaje jedanput, kako ga stroj i čita.
   ============================================================= */

@media (max-width: 720px) {
  .javno { padding: 20px 16px 32px; }
  .javno h1 { font-size: 22px; line-height: 28px; }
  .javno-dan h2 { font-size: 17px; line-height: 24px; }
  .javno-traka__sadrzaj, .javno-podnozje__sadrzaj { padding: 12px 16px; }
  .javno-brojke { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; padding: 12px 16px; }
  .javno-podnozje__sadrzaj { flex-direction: column; }
  /* As specific as the button's own rule, or its 32 px height wins over the phone's 40. */
  .javno .preuzmi a.dl { flex: 1; justify-content: center; height: 40px; }
  .pregled-glava .preuzmi { width: 100%; }

  /* Obje tablice postaju kartice: popis objava i sam cjenik. */
  table.siroka, table.popis { display: block; background: transparent; }
  table.siroka thead, table.popis thead { display: none; }

  .tbl-omot:has(table.popis) {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }

  table.popis tbody { display: grid; gap: 12px; }

  table.popis tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    padding: 14px 16px;
    background: var(--bg-cards);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--r-lg, 8px);
    box-shadow: var(--shadow-card, 0 4px 8px rgba(0, 0, 0, 0.04));
  }

  table.popis td { border: none; padding: 0; }
  table.popis tbody tr:hover td { background: transparent; }

  td[data-uloga="mjesto"] { grid-column: 1; font: 600 15px/20px var(--font-sans); }
  td[data-uloga="vrsta"] { grid-column: 2; grid-row: 1; justify-self: end; }

  td[data-uloga="adresa"] {
    grid-column: 1 / -1;
    font: 400 13px/18px var(--font-sans);
    color: var(--bs-tertiary);
  }

  /* "Objavljeno" i "Redaka": oznaka lijevo, vrijednost desno, kao u dizajnu. */
  td[data-uloga="vrijeme"],
  td[data-uloga="redaka"] {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    white-space: normal;
    font: 600 13px/18px var(--font-sans);
    color: var(--bs-secondary);
  }

  table.popis td[data-uloga="vrijeme"]::before,
  table.popis td[data-uloga="redaka"]::before {
    content: attr(data-oznaka);
    font-weight: 400;
    color: var(--bs-tertiary);
  }

  /* Poveznice postaju gumbi, a "Pogledaj" zauzme ostatak retka. */
  td[data-uloga="datoteke"] {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    margin-top: 6px;
  }

  td[data-uloga="datoteke"] .odvojnik { display: none; }

  .javno td[data-uloga="datoteke"] a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--bs-icons-3);
    border-radius: var(--r-lg, 8px);
    background: var(--bg-cards);
    font: 600 13px/20px var(--font-sans);
    color: var(--bs-cta);
  }

  .javno td[data-uloga="datoteke"] a.pogledaj { flex: 1; }

  .javno-traka__veza { display: none; }

  .tbl-omot:has(table.siroka) {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }

  table.siroka tbody { display: grid; gap: 12px; }

  /* Kartica kao u dizajnu: naziv i cijena u prvom retku, ispod njih šifra · marka · JM
     lijevo i cijena za jedinicu mjere desno, pa ostalo. Flex s prelamanjem, jer ćelije
     šifre, marke i jedinice mjere stoje u jednom retku, a ne jedna ispod druge. */
  table.siroka tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    row-gap: 2px;
    padding: 14px 16px;
    background: var(--bg-cards);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--r-lg, 8px);
    box-shadow: var(--shadow-card, 0 4px 8px rgba(0, 0, 0, 0.04));
  }

  /* Prijelom retka iza cijene, da šifra ne stane u prvi redak uz kratak naziv. */
  table.siroka tr::after { content: ""; order: 3; flex-basis: 100%; height: 0; }

  table.siroka tbody tr:hover td { background: transparent; }
  table.siroka td { border: none; padding: 0; }

  td[data-uloga="glavno"] {
    order: 1;
    flex: 1 1 0;
    min-width: 0;
    padding-right: 12px;
    font: 600 15px/20px var(--font-sans);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  td[data-uloga="cijena"] {
    order: 2;
    flex: none;
    font: 700 17px/24px var(--font-sans);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  td[data-uloga="cijena"]::after { content: " €"; }

  table.siroka td[data-uloga="sporedno"] {
    order: 4;
    flex: none;
    font: 400 12px/16px var(--font-sans);
    color: var(--bs-text-icons);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  td[data-uloga="sporedno"]:not(:empty) ~ td[data-uloga="sporedno"]:not(:empty)::before {
    content: " · ";
  }

  table.siroka td[data-uloga="jedinicna"] {
    order: 5;
    flex: none;
    margin-left: auto;
    padding-left: 12px;
    font: 400 12px/16px var(--font-sans);
    color: var(--bs-text-icons);
  }

  td[data-uloga="jedinicna"][data-jm]::after { content: " € / " attr(data-jm); }

  table.siroka td[data-uloga="sidrena"] {
    order: 6;
    flex-basis: 100%;
    font: 400 12px/16px var(--font-sans);
    color: var(--bs-text-icons);
    text-align: left;
  }

  /* Prazna ćelija nosi samo svoju oznaku — "barkod:" bez barkoda ništa ne kaže. */
  table.siroka td:empty { display: none; }

  /* Oznaka ispred vrijednosti: broj bez konteksta ništa ne znači. */
  td[data-oznaka]:not([data-oznaka=""])::before {
    content: attr(data-oznaka) ": ";
    color: var(--bs-text-icons);
  }

  /* Posebni oblik prodaje: na kartici je to pilula s nazivom oblika, a "DA" se ne ponavlja. */
  td[data-uloga="akcija"] { display: none; }

  table.siroka td[data-uloga="akcijanaziv"] {
    order: 7;
    flex: none;
    margin: 6px 100% 0 0;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--bg-light-brand-2);
    color: var(--bs-cta);
    font: 600 11px/16px var(--font-sans);
    white-space: nowrap;
  }

  table.siroka td[data-uloga="nedostupno"] {
    order: 8;
    flex-basis: 100%;
    font: 600 12px/16px var(--font-sans);
    color: var(--error-primary, #AB1919);
  }

  /* Uobičajeno stanje je na kartici šum; u tablici ostaje. */
  td[data-uloga="skriveno"] { display: none; }
}

/* The service's terms and privacy policy, quietly, next to the decision the page exists for. */
.javno-podnozje a { color: inherit; }