/* Turkalj Meister — dizajn sustav. Pravila: .claude/skills/design-system/SKILL.md.
   Pravilo se mijenja prvo u skillu, pa ovdje. */

:root {
  --tm-bg: #F5F4EE;
  --tm-surface: #FFFFFF;
  --tm-surface-2: #F0EEE6;
  --tm-border: #E6E3DA;
  --tm-border-strong: #D3CFC3;
  --tm-border-gumb: #A9A597;   /* rub gumba: mora se vidjeti da je gumb, ne tekst */
  --tm-ink: #1F1E1B;
  --tm-ink-2: #55534C;
  --tm-ink-3: #8A887F;
  --tm-accent: #D97757;
  --tm-accent-hover: #C6613F;
  --tm-accent-soft: #F7E6DE;
  --tm-ok: #2F7D4F;        --tm-ok-soft: #E3F1E8;
  --tm-warn: #9A6400;      --tm-warn-soft: #FBF0D9;
  --tm-danger: #B3261E;    --tm-danger-soft: #FBE9E7;
  --tm-info: #2B5F9E;      --tm-info-soft: #E4EDF8;
  --tm-serif: "Lora", Georgia, "Times New Roman", serif;
  --tm-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tm-radius: 12px;
  --tm-radius-sm: 8px;
  --tm-shadow: 0 1px 2px rgba(31, 30, 27, 0.04);
  --tm-visina: 40px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--tm-bg); color: var(--tm-ink);
  font-family: var(--tm-sans); font-size: 15px; line-height: 1.5;
}
h1, h2, h3 { font-family: var(--tm-serif); font-weight: 600; line-height: 1.25; margin: 0; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.02rem; }
p { margin: 0 0 0.75rem; }
a { color: var(--tm-accent-hover); text-decoration: none; }
a:hover { text-decoration: underline; }
small, .meta { color: var(--tm-ink-2); font-size: 0.875rem; }
[hidden] { display: none !important; }
.skriveno { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible { outline: 2px solid var(--tm-accent); outline-offset: 2px; border-radius: 4px; }

/* --- zaglavlje ---------------------------------------------------------- */
.zaglavlje { background: var(--tm-surface); border-bottom: 1px solid var(--tm-border); }
.zaglavlje-unutra {
  max-width: 1180px; margin: 0 auto; padding: 0 20px; min-height: 60px;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.marka { font-family: var(--tm-serif); font-weight: 600; font-size: 1.15rem; color: var(--tm-ink); }
.marka:hover { text-decoration: none; }
.navigacija { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.navigacija a {
  color: var(--tm-ink-2); padding: 8px 12px; border-radius: var(--tm-radius-sm); font-weight: 500;
}
.navigacija a:hover { background: var(--tm-surface-2); text-decoration: none; }
.navigacija a[aria-current="page"] { color: var(--tm-ink); background: var(--tm-surface-2); }
.zaglavlje-desno { display: flex; align-items: center; gap: 10px; }
.zaglavlje-desno form { margin: 0; }
.korisnik-ime { color: var(--tm-ink-2); font-size: 0.9rem; }
/* Upis nove stavke stoji među pogotcima, pa se mora razlikovati od njih. */
.birac-opcija.nova-stavka { border-top: 1px solid var(--tm-border); }
.birac-opcija.nova-stavka strong { color: var(--tm-accent); }

/* Polje koje se smije ostaviti prazno to kaže uz svoju oznaku. */
.neobavezno { font-family: var(--tm-sans); font-weight: 400; font-size: 0.78rem; color: var(--tm-ink-3); }

/* --- stranica ----------------------------------------------------------- */
.stranica { max-width: 1180px; margin: 0 auto; padding: 28px 20px 64px; }
/* Široka stranica: stavka cjenika s tri stupca. */
.stranica.siroka, .zaglavlje-unutra.siroka { max-width: 1560px; }
.bez-zaglavlja .stranica { padding-top: 12vh; }
.natrag { display: inline-block; margin-bottom: 10px; color: var(--tm-ink-2); font-size: 0.9rem; }
.naslovni-red { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.radnje-stranice { display: flex; gap: 8px; align-items: center; }
.radnje-stranice form { margin: 0; }
/* Što uz stavku uvijek ide: popis s gumbom za micanje na kraju retka. */
.popis-veza { list-style: none; margin: 0 0 14px; padding: 0; }
.popis-veza li { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--tm-border); }
.popis-veza form { margin: 0; }
/* Popis veza je sam redoslijed: stavka u sredini, povučene prije i poslije nje. */
.popis-veza.redoslijed { counter-reset: red; }
.popis-veza.redoslijed li { counter-increment: red; }
.popis-veza.redoslijed li > span:first-child::before {
  content: counter(red) "."; display: inline-block; min-width: 1.6em; color: var(--tm-ink-3);
}
.popis-veza li.ova { background: var(--tm-surface-2); padding-left: 8px; padding-right: 8px; }
.radnje-veze { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
/* Gumb na čipu veze: prije ili poslije stavke uz koju se veže. */
.cip-smjer {
  border: 1px solid var(--tm-border-strong); background: #fff; border-radius: 999px;
  padding: 0 8px; margin-right: 4px; font-size: 0.75rem; line-height: 1.5; cursor: pointer;
  color: var(--tm-ink-2);
}
.cip-kolicina {
  width: 3.4em; border: 1px solid var(--tm-border-strong); border-radius: 6px; background: #fff;
  padding: 0 4px; font: inherit; font-size: 0.8rem; text-align: right;
}
.cip input.cip-kolicina { height: auto; min-height: 0; padding: 1px 4px; line-height: 1.4; margin: 0 2px 0 -4px; }
.kolicina-dijela { display: inline-flex; gap: 4px; align-items: center; justify-content: flex-end; }
.kolicina-dijela input { width: 5em; text-align: right; }
.dodaj-dio { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-top: 12px; }
.dodaj-dio .birac { flex: 1 1 220px; margin: 0; }
.dodaj-dio .polje-kratko { flex: 0 0 90px; margin: 0; }
.cip-smjer[aria-pressed="true"] { border-color: var(--tm-accent); color: var(--tm-accent); }

/* Ugašen gumb i razlog zašto je ugašen stoje zajedno. */
.potvrda { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.potvrda .zasto { font-size: 0.8125rem; color: var(--tm-ink-2); text-align: center; }
.meta-red { display: flex; flex-wrap: wrap; gap: 6px 0; align-items: center; color: var(--tm-ink-2); margin: -10px 0 20px; }
.meta-red > span:not(.znacka)::after { content: "·"; margin: 0 8px; color: var(--tm-ink-3); }
.sub { display: block; color: var(--tm-ink-3); font-size: 0.82rem; font-weight: 400; }
.sub-inline { color: var(--tm-ink-3); font-family: var(--tm-sans); font-size: 0.85rem; font-weight: 400; margin-left: 6px; }

/* --- kartice ------------------------------------------------------------ */
.kartica {
  background: var(--tm-surface); border: 1px solid var(--tm-border); border-radius: var(--tm-radius);
  box-shadow: var(--tm-shadow); padding: 20px; margin-bottom: 16px;
}
.kartica > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.kartica.ravna { padding: 0; overflow: hidden; }
.kartica.uska { max-width: 640px; }
/* Stavka cjenika: forma lijevo, „Uz ovu stavku uvijek ide" desno. Uže od toga — jedno ispod drugog. */
@media (min-width: 1040px) {
  .stavka-i-veze { display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 1fr); gap: 20px; align-items: start; }
  .stavka-i-veze > .kartica.uska, .stavka-i-veze > .stupac > .kartica.uska { max-width: none; margin: 0; }
  .stavka-i-veze > .stupac { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
}
/* Stavka cjenika na širokom ekranu: forma · „Uz ovu stavku uvijek ide" · „Od čega se sastoji trošak".
   Desni stupac se rastvara, pa su obje kartice svaka u svom stupcu. */
@media (min-width: 1320px) {
  .stavka-i-veze.tri-stupca { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); }
  .stavka-i-veze.tri-stupca > .stupac { display: contents; }
}
.kartica.sredina { text-align: center; margin-left: auto; margin-right: auto; }
.kartica.interno { background: var(--tm-surface-2); }
.kartica-prijava { max-width: 380px; margin: 0 auto; padding: 28px; }
.kartica-prijava h1 { margin-bottom: 4px; }
.forma-u-kartici { border-top: 1px solid var(--tm-border); margin-top: 16px; padding-top: 16px; }

/* --- gumbi -------------------------------------------------------------- */
.gumb {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--tm-visina); padding: 0 16px; border-radius: var(--tm-radius-sm);
  border: 1px solid transparent; background: transparent; color: var(--tm-ink);
  font: 500 0.93rem var(--tm-sans); cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
.gumb:hover { text-decoration: none; }
.gumb.glavni { background: var(--tm-accent); color: #fff; }
.gumb.glavni:hover { background: var(--tm-accent-hover); }
/* Sporedni gumb ima jasan rub: svijetli rub polja bio je preslab, pa se gumb čitao kao tekst. */
.gumb.sporedni { background: var(--tm-surface); border: 1.5px solid var(--tm-border-gumb); }
.gumb.sporedni:hover { background: var(--tm-surface-2); border-color: var(--tm-ink-3); }
.gumb.tihi { color: var(--tm-ink-2); padding: 0 10px; }
.gumb.tihi:hover { background: var(--tm-surface-2); color: var(--tm-ink); }
/* Radnja u retku (Uredi, Premjesti, Makni, Spremi uz količinu…) je gumb, pa nosi jasan rub:
   niža je i manjeg slova od sporednog, ali se na prvi pogled vidi da je gumb, a ne tekst. */
.gumb.uretku, .radnje-retka .gumb {
  height: 30px; padding: 0 12px; font-size: 0.85rem;
  border: 1px solid var(--tm-border-gumb); background: var(--tm-surface); color: var(--tm-ink);
}
.gumb.uretku:hover, .radnje-retka .gumb:hover { background: var(--tm-surface-2); border-color: var(--tm-ink-3); color: var(--tm-ink); }
.radnje-retka .gumb.opasni-tekst, .gumb.uretku.opasni-tekst { border-color: #DDA39C; color: var(--tm-danger); }
.radnje-retka .gumb.opasni-tekst:hover, .gumb.uretku.opasni-tekst:hover { background: var(--tm-danger-soft); border-color: var(--tm-danger); }
.radnje-retka .gumb:disabled:hover, .gumb.uretku:disabled:hover { background: var(--tm-surface); border-color: var(--tm-border-gumb); }
.radnje-retka > form { display: inline; margin: 0; }
.radnje-retka .gumb, .radnje-retka details.uredi { vertical-align: middle; margin-left: 6px; }
.gumb.opasni { background: var(--tm-surface); border-color: var(--tm-danger); color: var(--tm-danger); }
.gumb.opasni:hover { background: var(--tm-danger-soft); }
.gumb.opasni.puni { background: var(--tm-danger); color: #fff; }
.gumb.opasni-tekst { color: var(--tm-danger); }
.gumb.siroki { width: 100%; }
.gumb:disabled, .gumb[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.gumb[data-radi]::after { content: "…"; }
.red-gumba { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.red-gumba.razmaknuto { align-items: flex-end; gap: 12px 20px; }
.red-gumba form { margin: 0; }
/* Polje s gumbom u retku gumba: bez donjeg razmaka polja, inače taj gumb stoji više od ostalih. */
.red-gumba .red-polja .polje, .red-gumba .red-polja > .gumb { margin-bottom: 0; }

/* --- forme -------------------------------------------------------------- */
.polje { margin: 0 0 14px; border: 0; padding: 0; min-width: 0; }
.polje > label, .polje > legend, .polje > .oznaka-polja { display: block; font-weight: 500; font-size: 0.875rem; margin-bottom: 5px; padding: 0; }
input, select, textarea {
  width: 100%; height: var(--tm-visina); padding: 8px 11px; font: inherit; color: var(--tm-ink);
  background: var(--tm-surface); border: 1px solid var(--tm-border-strong); border-radius: var(--tm-radius-sm);
}
textarea { height: auto; min-height: 72px; resize: vertical; line-height: 1.45; }
input[type="checkbox"] { width: 18px; height: 18px; padding: 0; accent-color: var(--tm-accent); flex: none; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--tm-accent); outline-offset: 0; border-color: var(--tm-accent); }
.polje small { display: block; margin-top: 4px; }
.mreza { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 14px; }
.mreza-stavka { grid-template-columns: 1fr 120px; }
.mreza-parametri { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.red-polja { display: flex; flex-wrap: wrap; gap: 0 12px; align-items: flex-end; }
.red-polja > .gumb { margin-bottom: 14px; }
.red-polja .raste { flex: 1 1 260px; }
.red-polja > .ispod-retka { flex: 1 0 100%; margin: -8px 0 14px; color: var(--tm-ink-3); }
.polje-kratko { max-width: 130px; }
.uski-unos { max-width: 120px; text-align: right; }
.kvacice { display: flex; flex-wrap: wrap; gap: 8px 18px; }
/* Kvačica sama za sebe drži svoj redak, da joj gumb ne sjedne uz bok; kad ih je
   više, u red ih slaže roditelj .kvacice. Širina ostaje po sadržaju, da klik ne
   hvata prazninu do kraja retka. */
.kvacica { display: flex; width: fit-content; align-items: center; gap: 8px; min-height: 32px; font-weight: 400; margin-bottom: 12px; }
.kvacice .kvacica { margin-bottom: 0; }
form .gumb.glavni { margin-top: 4px; }

.pomoc {
  display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px;
  border-radius: 50%; background: var(--tm-surface-2); color: var(--tm-ink-2); font-size: 0.72rem;
  font-weight: 600; cursor: help; position: relative; vertical-align: 1px;
}
.pomoc:hover::after, .pomoc:focus::after {
  content: attr(data-pomoc); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  width: max-content; max-width: 260px; padding: 8px 10px; border-radius: var(--tm-radius-sm);
  background: var(--tm-ink); color: #fff; font: 400 0.8rem/1.4 var(--tm-sans); z-index: 20; text-align: left; white-space: normal;
}

details.sklopljeno { border: 1px solid var(--tm-border); border-radius: var(--tm-radius-sm); margin: 0 0 14px; }
details.sklopljeno > summary {
  cursor: pointer; padding: 0 12px; min-height: var(--tm-visina); line-height: var(--tm-visina);
  font-weight: 500; font-size: 0.9rem; color: var(--tm-ink-2);
}
details.sklopljeno[open] > summary { border-bottom: 1px solid var(--tm-border); }
details.sklopljeno > :not(summary) { margin-left: 12px; margin-right: 12px; }
details.sklopljeno > summary + * { margin-top: 12px; }
details.sklopljeno > :last-child { margin-bottom: 12px; }

details.uredi { display: inline-block; text-align: left; }
details.uredi > summary {
  cursor: pointer; list-style: none; padding: 0 12px; border-radius: var(--tm-radius-sm);
  border: 1px solid var(--tm-border); font-size: 0.85rem; font-weight: 500; color: var(--tm-ink-2);
}
details.uredi > summary::-webkit-details-marker { display: none; }
details.uredi > summary { height: 30px; display: inline-flex; align-items: center; background: var(--tm-surface); }
details.uredi > summary:hover { background: var(--tm-surface-2); border-color: var(--tm-border-strong); color: var(--tm-ink); }
details.uredi[open] { display: block; margin-top: 8px; padding: 12px; background: var(--tm-surface-2); border-radius: var(--tm-radius-sm); }
details.uredi[open] > summary { margin-bottom: 10px; background: var(--tm-surface); }

/* --- birač (polje s pretragom) ------------------------------------------ */
.birac { position: relative; }
.birac-rezultati:empty { display: none; }
.birac-rezultati {
  position: absolute; z-index: 15; left: 0; right: 0; top: 100%; margin-top: 4px; max-height: 320px; overflow: auto;
  background: var(--tm-surface); border: 1px solid var(--tm-border-strong); border-radius: var(--tm-radius-sm);
  box-shadow: 0 8px 24px rgba(31, 30, 27, 0.10);
}
.birac-opcija { display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.birac-opcija:hover, .birac-opcija:focus { background: var(--tm-accent-soft); outline: none; }
.birac-prazno { padding: 10px 12px; margin: 0; color: var(--tm-ink-2); font-size: 0.875rem; }
.cipovi { display: flex; flex-wrap: wrap; gap: 6px; }
.cipovi:not(:empty) { margin-bottom: 8px; }
.cip {
  display: inline-flex; align-items: center; gap: 2px; padding: 4px 4px 4px 12px; border-radius: 999px;
  background: var(--tm-accent-soft); color: var(--tm-ink); font-size: 0.875rem; font-weight: 500;
}
.cip-x {
  width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
  color: var(--tm-ink-2); font-size: 1.05rem; line-height: 1; display: inline-flex;
  align-items: center; justify-content: center;
}
.cip-x:hover { background: rgba(31, 30, 27, 0.10); color: var(--tm-ink); }
.cip .cip-x { border: 1px solid var(--tm-border-gumb); }
.birac-prazno.uz-pogotke { border-top: 1px solid var(--tm-border); }

.birac [data-birac-unos][data-odabrano] { border-color: var(--tm-ok); }

/* --- traka filtara ------------------------------------------------------ */
.traka-filtara { display: flex; flex-wrap: wrap; gap: 0 12px; align-items: flex-end; margin-bottom: 14px; }
.traka-filtara .polje { flex: 0 1 150px; }
.traka-filtara .polje-pretraga { flex: 1 1 280px; }
.traka-filtara .polje-datum { flex: 0 1 140px; }
.traka-kraj { display: flex; gap: 8px; margin-bottom: 14px; }

/* --- tablice ------------------------------------------------------------ */
.tablica { width: 100%; border-collapse: collapse; }
.tablica th {
  text-align: left; font-weight: 600; font-size: 0.78rem; letter-spacing: 0.02em; color: var(--tm-ink-2);
  background: var(--tm-surface-2); padding: 10px 14px; border-bottom: 1px solid var(--tm-border);
}
.tablica td { padding: 12px 14px; border-bottom: 1px solid var(--tm-border); vertical-align: top; overflow-wrap: anywhere; }
.tablica tbody tr:last-child td { border-bottom: 0; }
.tablica tfoot td { border-top: 1px solid var(--tm-border-strong); border-bottom: 0; padding: 10px 14px; }
.tablica .broj { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kartica:not(.ravna) > .tablica th:first-child, .kartica:not(.ravna) .tablica td:first-child { padding-left: 8px; }
.radnje-retka { text-align: right; white-space: nowrap; }
.opis-stavke { display: block; color: var(--tm-ink-2); font-size: 0.875rem; margin-top: 3px; max-width: 62ch; }
.tablica-stavke td:first-child { white-space: nowrap; color: var(--tm-ink-3); font-variant-numeric: tabular-nums; }

/* --- značke, poruke, prazno --------------------------------------------- */
.znacka {
  display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.76rem; font-weight: 500;
  background: var(--tm-surface-2); color: var(--tm-ink-2); white-space: nowrap; vertical-align: 1px;
}
.znacka-ok { background: var(--tm-ok-soft); color: var(--tm-ok); }
.znacka-upozorenje { background: var(--tm-warn-soft); color: var(--tm-warn); }
.znacka-opasno { background: var(--tm-danger-soft); color: var(--tm-danger); }
.znacka-info { background: var(--tm-info-soft); color: var(--tm-info); }

.poruke { margin-bottom: 16px; }
.poruka { padding: 10px 14px; border-radius: var(--tm-radius-sm); margin: 0 0 8px; border: 1px solid transparent; }
.poruka-ok { background: var(--tm-ok-soft); color: var(--tm-ok); border-color: #CBE5D4; }
.poruka-greska { background: var(--tm-danger-soft); color: var(--tm-danger); border-color: #F3CFCB; }
.poruka-upozorenje { background: var(--tm-warn-soft); color: var(--tm-warn); border-color: #F0DDB0; }
.napomena-kutija { background: var(--tm-warn-soft); color: var(--tm-warn); border: 1px solid #F0DDB0; border-radius: var(--tm-radius-sm); padding: 12px 16px; margin-bottom: 16px; }
.napomena-kutija ul { margin: 6px 0 0; padding-left: 20px; }
.prazno { color: var(--tm-ink-2); text-align: center; padding: 28px 16px; margin: 0; }
.kartica > .prazno { padding: 12px 0; text-align: left; }

/* --- straničenje i kartice administracije ------------------------------- */
.stranicenje { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 4px; flex-wrap: wrap; }
.stranicenje-tekst { color: var(--tm-ink-2); font-size: 0.875rem; }
.kartice-nav { display: flex; gap: 4px; flex-wrap: wrap; margin: -8px 0 18px; border-bottom: 1px solid var(--tm-border); }
.kartice-nav a { padding: 9px 12px; color: var(--tm-ink-2); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.kartice-nav a:hover { color: var(--tm-ink); text-decoration: none; }
.kartice-nav a[aria-current="page"] { color: var(--tm-ink); border-bottom-color: var(--tm-accent); }

/* --- priprema ponude ---------------------------------------------------- */
.izlazak { border-top: 1px solid var(--tm-border); padding-top: 16px; margin-top: 16px; }
.izlazak:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.izlazak h3 { margin-bottom: 12px; }
.grupa { margin-bottom: 18px; }
.grupa-naslov { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.grupa-naslov select { height: 34px; min-height: 0; width: auto; padding: 4px 8px; font-size: 0.85rem; }
.u-retku { display: inline-flex; gap: 4px; margin: 0; align-items: center; }
.popis-veza.redoslijed li:last-child { border-bottom: 0; }
.popis-veza .gumb.strelica { width: 36px; padding: 0; }
.forma-stavke { min-width: min(560px, 80vw); }
.prijedlog { background: var(--tm-accent-soft); border-radius: var(--tm-radius-sm); padding: 12px 14px; margin: 14px 0; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.prijedlog p { margin: 0; }
.popis-odabira { list-style: none; margin: 0 12px; padding: 0; }
.popis-odabira li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--tm-border); }
.popis-odabira li:last-child { border-bottom: 0; }
.popis-odabira form { margin: 0; }
.zbroj { margin: 8px 0 0 auto; max-width: 340px; }
.zbroj > div { display: flex; justify-content: space-between; padding: 5px 0; font-variant-numeric: tabular-nums; }
.zbroj dt { color: var(--tm-ink-2); }
.zbroj dd { margin: 0; }
.zbroj-glavni { border-top: 1px solid var(--tm-border-strong); margin-top: 4px; padding-top: 8px !important; font-weight: 600; font-size: 1.05rem; }
.zbroj-glavni dt { color: var(--tm-ink); }

/* --- dijalog ------------------------------------------------------------ */
.dijalog { border: 1px solid var(--tm-border); border-radius: var(--tm-radius); padding: 0; max-width: 440px; width: calc(100% - 32px); box-shadow: 0 20px 60px rgba(31, 30, 27, 0.2); }
.dijalog::backdrop { background: rgba(31, 30, 27, 0.35); }
.dijalog form { padding: 22px; margin: 0; }
.dijalog h3 { margin-bottom: 8px; }

.dijalog footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
/* Opće pravilo daje glavnom gumbu u formi razmak odozgo; u podnožju dijaloga gumbi stoje u ravnini. */
.dijalog footer { align-items: center; }
.dijalog footer .gumb { margin: 0; }

/* --- mobitel: tablica postaje niz kartica, gumbi su viši ------------------ */
@media (max-width: 720px) {
  :root { --tm-visina: 44px; }
  body { font-size: 16px; }
  h1 { font-size: 1.45rem; }
  .stranica { padding: 18px 14px 96px; }
  .zaglavlje-unutra { gap: 8px 14px; padding: 8px 14px; }
  .navigacija { order: 3; flex-basis: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .zaglavlje-desno { margin-left: auto; }
  .kartica { padding: 16px; }
  .mreza-stavka { grid-template-columns: 1fr; }
  .polje-kratko { max-width: none; flex: 1 1 90px; }
  .traka-filtara .polje, .traka-filtara .polje-datum { flex: 1 1 140px; }
  .traka-filtara .polje-pretraga { flex-basis: 100%; }

  .tablica thead { display: none; }
  .tablica, .tablica tbody, .tablica tfoot, .tablica tr, .tablica td { display: block; width: 100%; }
  .tablica tr { padding: 12px 14px; border-bottom: 1px solid var(--tm-border); }
  .tablica tbody tr:last-child { border-bottom: 0; }
  .tablica td { padding: 2px 0 !important; border: 0; text-align: left !important; white-space: normal !important; }
  .tablica td[data-naziv]:not(:first-child)::before { content: attr(data-naziv) ": "; color: var(--tm-ink-3); font-size: 0.82rem; }
  /* Podnožje (zbrojevi): oznaka i iznosi u retku s razmakom, svaki iznos sa svojim nazivom. */
  .tablica tfoot tr { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 14px; }
  .tablica tfoot td { width: auto; }
  .radnje-retka { margin-top: 8px; }
  .radnje-retka .gumb { margin: 0 6px 0 0; }
  /* Na mobitelu se gumbi dodiruju prstom: najmanje 44 px. */
  .gumb.uretku, .radnje-retka .gumb { height: 44px; padding: 0 14px; }
  .cip .cip-x { width: 30px; height: 30px; }
  .forma-stavke { min-width: 0; }

  .naslovni-red .radnje-stranice { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 10px 14px; background: var(--tm-surface); border-top: 1px solid var(--tm-border); }
  .naslovni-red .radnje-stranice > *, .naslovni-red .radnje-stranice .gumb { width: 100%; }
  .dijalog { max-width: none; width: 100%; height: 100%; max-height: none; border-radius: 0; margin: 0; }
}

/* --- dijelovi ----------------------------------------------------------- */
.kartica.ravna > .zaglavlje-tablice { padding: 16px 20px 6px; }
.kartica.ravna > .zaglavlje-tablice .meta { margin: 4px 0 0; }
.radnje-pregleda { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
.zbroj.pregled-liste { margin-left: 0; }
/* Tablica dijelova stoji u uskom desnom stupcu: tješnje ćelije, da ne izađe iz kartice. */
.tablica.sastav th, .tablica.sastav td { padding: 10px 6px; }
.tablica.sastav th:first-child, .tablica.sastav td:first-child { padding-left: 0; }
.tablica.sastav .kolicina-dijela input { width: 4em; padding: 6px; }
.tablica.sastav .gumb { padding: 4px 8px; }
.dodaj-dio > .polje:first-of-type { flex: 1 1 220px; margin: 0; }
.kolicina-dijela.preimenuj { justify-content: flex-start; }
.kolicina-dijela.preimenuj input { width: min(18em, 100%); text-align: left; }

/* Interni obračun: jedna tablica s okvirom, objekt po objekt. Naslov objekta je traka preko
   cijele širine, a međuzbroj objekta podebljan redak s crtom iznad; objekte dijeli jača crta. */
.obracun-okvir { border: 1px solid var(--tm-border-strong); border-radius: var(--tm-radius-sm); overflow: hidden; background: var(--tm-surface); }
.tablica-obracun { font-size: 0.9rem; }
.tablica-obracun th, .tablica-obracun td { border-right: 1px solid var(--tm-border); padding: 8px 12px; }
.tablica-obracun th:last-child, .tablica-obracun td:last-child { border-right: 0; }
.kartica .tablica-obracun td:first-child, .kartica .tablica-obracun th:first-child { padding-left: 12px; }
.tablica-obracun thead th { border-bottom: 1px solid var(--tm-border-strong); }
.tablica-obracun .obracun-naslov th {
  background: var(--tm-surface-2); color: var(--tm-ink); font-family: var(--tm-serif); font-size: 0.98rem;
  letter-spacing: 0; border-top: 2px solid var(--tm-border-gumb); border-bottom: 1px solid var(--tm-border-strong);
}
.tablica-obracun .obracun-grupa:first-of-type .obracun-naslov th { border-top: 0; }
.tablica-obracun .obracun-rad td { background: #FCFBF8; }
.tablica-obracun .obracun-zbroj td { font-weight: 600; border-top: 1px solid var(--tm-border-strong); border-bottom: 0; }
.tablica-obracun tbody .obracun-zbroj:last-child td { border-bottom: 0; }
.tablica-obracun tfoot td { background: var(--tm-surface-2); border-top: 2px solid var(--tm-ink-3); padding: 10px 12px; }
.tablica-obracun tr.bez-troska td { background: var(--tm-warn-soft); }
.upis-troska { display: flex; gap: 4px; justify-content: flex-end; flex-wrap: wrap; margin: 0; }
.upis-troska input { width: 5.5em; height: 30px; padding: 4px 6px; text-align: right; }
.tablica-obracun .radni-sati { display: flex; align-items: center; gap: 4px 6px; flex-wrap: wrap; margin: 6px 0 0; }
.tablica-obracun .radni-sati .znacka { margin-left: 4px; }
#obracun .napomena-kutija p { margin: 0 0 6px; }
#obracun .napomena-kutija p:last-child { margin: 0; }
.uredi-panel .forma-stavke { min-width: 0; }
.tablica-obracun .radni-sati input { width: 4.2em; height: 30px; padding: 4px 6px; text-align: right; }
.tablica-obracun .radni-sati span { color: var(--tm-ink-3); font-size: 0.85rem; white-space: nowrap; }
@media (min-width: 721px) {
  .tablica-obracun { table-layout: fixed; }
  .tablica-obracun col.st-kol { width: 8%; }
  .tablica-obracun col.st-broj { width: 11%; }
  .tablica-obracun col.st-marza { width: 8%; }
}
@media (max-width: 720px) {
  .tablica-obracun td { border-right: 0; }
  .tablica-obracun .obracun-naslov th { display: block; }
}
.izvor-troska { display: block; color: var(--tm-ink-3); font-size: 0.82rem; margin-top: 2px; }
.izvor-troska form { display: inline-flex; margin: 4px 0 0; }

/* --- priprema ponude po koracima ----------------------------------------- */
/* Rad lijevo, sažetak s izradom desno. Sažetak prati skrolanje, pa se iznos i ono što
   priječi izradu vide dok se radi na bilo kojem koraku. */
.priprema-raspored { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 1040px) {
  .priprema-raspored { grid-template-columns: minmax(0, 1fr) 300px; }
  .sazetak { position: sticky; top: 16px; }
}
.priprema-glavno { min-width: 0; }
.priprema-meta { display: flex; flex-wrap: wrap; gap: 4px 0; margin: -12px 0 18px; color: var(--tm-ink-2); }
.priprema-meta > span + span::before { content: "·"; margin: 0 8px; color: var(--tm-ink-3); }

/* Koraci: broj u krugu, naslov i jedna rečenica stanja. Zaključan korak kaže zašto. */
.koraci { margin: 0 0 18px; }
.koraci ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.korak-veza {
  display: flex; align-items: flex-start; gap: 10px; height: 100%; padding: 10px 12px;
  border: 1px solid var(--tm-border); border-radius: var(--tm-radius-sm); background: var(--tm-surface);
  color: var(--tm-ink); text-decoration: none;
}
a.korak-veza:hover { border-color: var(--tm-border-gumb); text-decoration: none; }
.korak-broj {
  flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font-size: 0.8rem; font-weight: 600; background: var(--tm-surface-2); color: var(--tm-ink-2);
}
.korak-tekst { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.korak-tekst strong { font-weight: 600; font-size: 0.9rem; }
.korak-stanje { font-size: 0.8rem; color: var(--tm-ink-2); margin-top: 2px; }
.korak.gotov .korak-broj { background: var(--tm-ok-soft); color: var(--tm-ok); }
.korak.pazi .korak-stanje { color: var(--tm-warn); }
.korak.trenutni .korak-veza { border-color: var(--tm-accent); box-shadow: inset 0 -2px 0 var(--tm-accent); }
.korak.trenutni .korak-broj { background: var(--tm-accent); color: #fff; }
.korak.zakljucan .korak-veza { background: transparent; color: var(--tm-ink-3); cursor: not-allowed; }
.korak.zakljucan .korak-stanje { color: var(--tm-ink-3); }
@media (max-width: 720px) {
  .koraci ol { grid-template-columns: minmax(0, 1fr); }
}

/* Sažetak: iznosi, što još treba i izrada. */
.sazetak h2 { font-size: 1.05rem; margin-bottom: 10px; }
.sazetak .zbroj { margin: 0; max-width: none; }
.sazetak-ponude { list-style: none; margin: 0 0 10px; padding: 0 0 10px; border-bottom: 1px solid var(--tm-border); }
.sazetak-ponude li { display: flex; justify-content: space-between; gap: 4px 8px; padding: 3px 0; font-variant-numeric: tabular-nums; flex-wrap: wrap; }
.sazetak-interno { margin-top: 12px; padding: 10px 12px; background: var(--tm-surface-2); border-radius: var(--tm-radius-sm); font-size: 0.875rem; }
.sazetak-interno > div { display: flex; justify-content: space-between; gap: 8px; font-variant-numeric: tabular-nums; }
.sazetak-interno .meta { margin: 0 0 4px; font-size: 0.78rem; }
.prije-izrade { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--tm-border); }
.prije-izrade h3 { font-family: var(--tm-sans); font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; }
.prije-izrade ul { list-style: none; margin: 0; padding: 0; font-size: 0.875rem; }
.prije-izrade li { padding: 4px 0 4px 18px; position: relative; color: var(--tm-ink-2); }
.prije-izrade li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--tm-warn); }
.prije-izrade li a { color: var(--tm-ink); text-decoration: underline; text-decoration-color: var(--tm-border-gumb); }
.sazetak form { margin: 0; }
.sazetak .gumb.glavni { width: 100%; margin-top: 14px; }
.sazetak .zasto { display: block; margin-top: 6px; font-size: 0.8125rem; color: var(--tm-ink-2); text-align: center; }
.sazetak .odustani { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--tm-border); text-align: center; }

/* Dno koraka: poveznica na sljedeći korak, desno. */
.dalje { display: flex; justify-content: flex-end; gap: 8px; margin: 4px 0 16px; }

/* Ruta kao itinerar: polazište, objekti redom obilaska i povratak, s dionicama između. */
.itinerar { list-style: none; margin: 0 0 8px; padding: 0; }
.itinerar > li { position: relative; padding-left: 46px; }
.itinerar > li::before {
  content: ""; position: absolute; left: 17px; top: 0; bottom: 0; border-left: 2px solid var(--tm-border-strong);
}
.itinerar > li:first-child::before { top: 50%; }
.itinerar > li:last-child::before { bottom: 50%; }
.itinerar > li:only-child::before { display: none; }
.tocka { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; min-height: 56px; padding: 8px 0; }
.tocka-znak {
  position: absolute; left: 2px; top: 50%; margin-top: -16px; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; z-index: 1;
  font-size: 0.85rem; font-weight: 600; background: var(--tm-accent-soft); color: var(--tm-ink); border: 2px solid var(--tm-accent);
}
.tocka.baza .tocka-znak { background: var(--tm-ink); border-color: var(--tm-ink); color: #fff; font-size: 0.75rem; }
.tocka-naziv { min-width: 0; flex: 1 1 240px; }
.tocka-naziv strong { display: block; }
.tocka .radnje-veze form { margin: 0; }
.tocka .red-polja { flex: 1 1 320px; }
.tocka .red-polja .polje, .tocka .red-polja > .gumb { margin-bottom: 0; }
.dionica { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; padding: 2px 0; color: var(--tm-ink-2); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.dionica.nedostaje::before { border-left-style: dashed; border-left-color: var(--tm-warn); }
.dionica details.uredi[open] { flex-basis: 100%; margin-bottom: 6px; }
.ruta-ukupno { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--tm-border); }
.ruta-ukupno .red-gumba { margin: 0; }
.tocka .dodaj-objekt { flex: 1 1 100%; max-width: 620px; margin: 4px 0; padding: 12px 14px; background: var(--tm-surface-2); border-radius: var(--tm-radius-sm); }
.dodaj-objekt #objekti-za-dodati:not(:empty) { margin-top: 8px; background: var(--tm-surface); border: 1px solid var(--tm-border); border-radius: var(--tm-radius-sm); }
.dodaj-objekt .popis-odabira { margin: 0 12px; }
.dodaj-objekt .prazno { padding: 12px; text-align: left; }

/* Opis radova i stavke: opis lijevo (prati skrolanje), stavke desno, da se vidi iz kojeg su
   teksta nastale. Uže od 1400 px opis stoji iznad stavki. */
@media (min-width: 1400px) {
  .stavke-raspored { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 20px; align-items: start; }
  .opis-panel { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; margin: 0; }
}
.stavke-stupac { min-width: 0; }
.opis-panel textarea { min-height: 220px; font-size: 0.95rem; }
.opis-panel .meta { margin: 10px 0 0; }
.uz-opis { font-size: 0.875rem; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--tm-border); }
.uz-opis h3 { font-family: var(--tm-sans); font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; }
.uz-opis ol { margin: 0; padding-left: 20px; color: var(--tm-ink-2); }
.uz-opis li { padding: 2px 0; }
/* Dio opisa iz kojeg je stavka nastala: citat uz stavku. */
.tablica-stavke .iz-opisa { display: block; margin-top: 4px; padding-left: 8px; border-left: 2px solid var(--tm-accent-soft); color: var(--tm-ink-2); font-size: 0.82rem; font-style: italic; }

/* Stavke: jedna kartica po objektu, s međuzbrojem u zaglavlju. */
.naslov-ponude { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; margin: 26px 0 12px; }
.naslov-ponude:first-child { margin-top: 0; }
.objekt-kartica > header { align-items: flex-start; margin-bottom: 8px; }
.objekt-naslov { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.objekt-naslov .korak-broj { margin-top: 1px; background: var(--tm-accent-soft); color: var(--tm-ink); }
.objekt-iznos { font-weight: 600; font-size: 1.05rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.objekt-alati { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; margin: 0 0 12px; font-size: 0.875rem; color: var(--tm-ink-2); }
.objekt-alati form { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.objekt-alati input { width: 4.2em; height: 30px; padding: 4px 8px; text-align: right; }
.objekt-alati select { height: 30px; width: auto; padding: 2px 8px; font-size: 0.85rem; }
.objekt-alati label { font-weight: 500; color: var(--tm-ink); }
.tablica-stavke tr.pazi td { background: #FFFBF1; }
.tablica-stavke tr.pazi td:first-child { box-shadow: inset 3px 0 0 var(--tm-warn); }
/* Opis za klijenta je dug; u popisu stoje dva retka, cijeli je u „Uredi". */
.tablica-stavke .opis-stavke { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tablica-stavke .znacka { margin-left: 4px; }
.radnje-retka form.pomak { display: inline-flex; gap: 4px; }
.radnje-retka form.pomak .gumb { margin-left: 0; }
/* „Uredi" otvara redak ispod stavke preko cijele širine tablice (forma u uskom zadnjem stupcu
   izlazila je iz kartice pod sažetak). */
.tablica-stavke tr.uredi-red { display: none; }
.tablica-stavke tr:has(details.otvara-redak[open]) + tr.uredi-red { display: table-row; }
.tablica-stavke tr:has(details.otvara-redak[open]) td { border-bottom: 0; }
.tablica-stavke tr.uredi-red > td { padding-top: 0; }
.uredi-panel { padding: 14px; background: var(--tm-surface-2); border-radius: var(--tm-radius-sm); }
.uredi-panel .red-gumba:first-of-type { margin-top: 4px; }
details.uredi.otvara-redak[open] { display: inline-block; margin: 0; padding: 0; background: none; }
details.uredi.otvara-redak[open] > summary { margin: 0; background: var(--tm-surface-2); border-color: var(--tm-border-gumb); color: var(--tm-ink); }
.objekt-kartica details.dodaj-stavku { margin: 12px 0 0; }
.objekt-kartica details.dodaj-stavku .red-polja .birac { flex: 1 1 280px; }
.pazi-traka { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0 0 14px; font-size: 0.875rem; color: var(--tm-ink-2); }
.ponuda-zbroj { display: flex; justify-content: flex-end; margin: -4px 0 8px; }
.ponuda-zbroj .zbroj { width: 100%; max-width: 320px; margin: 0; }
@media (max-width: 720px) {
  .objekt-kartica > header { flex-direction: column; }
  .tablica-stavke tr:has(details.otvara-redak[open]) + tr.uredi-red { display: block; }
}

/* Stranica izrađene ponude: radnje u ploči desno (prati skrolanje); uže od 1040 px na vrhu. */
.stanje-ponude { display: flex; gap: 6px; flex-wrap: wrap; margin: -4px 0 8px; }
.radnje-ponude { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.radnje-ponude form { margin: 0; }
.radnje-ponude .gumb { width: 100%; }
.sazetak .radnje-ponude .gumb.glavni { margin-top: 0; }
@media (max-width: 1039px) {
  .ponuda-raspored .sazetak { order: -1; }
}

/* Dio: količina na stanju po firmi (obrazac i popis). */
fieldset.stanje-dijela { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
fieldset.stanje-dijela > legend { font-weight: 600; font-size: 0.875rem; padding: 0; margin-bottom: 8px; }
.stanje-firme { display: block; white-space: nowrap; }
.stanje-firme + .stanje-firme { margin-top: 2px; }
.stanje-firme .sub { display: inline; margin-right: 4px; }