/* Zajednički izgled svih tema: raspored menija, kartice, tabele, telefon.
   Boje i slova dolaze iz teme (static/teme/<tema>.css) preko varijabli. */

:root {
  --sirina-sadrzaja: 1200px;
  --upozorenje-pozadina: #FFFAEB;
  --upozorenje-okvir: #FEC84B;
  --upozorenje-tekst: #B54708;
  --uspjeh-tekst: #067647;
  --visina-donje-trake: 4rem;
}

body { background: var(--pico-background-color); }

/* Veze bez podvlačenja; podvlače se tek kad se pređe mišem. */
a:not([role="button"]) { text-decoration: none; }
a:not([role="button"]):hover { text-decoration: underline; }

/* ---------- Gornja traka sa menijem ---------- */
.traka {
  padding-block: 0 !important;
  background: var(--traka-pozadina);
  border-bottom: 1px solid var(--pico-muted-border-color);
}
.traka-sadrzaj {
  max-width: calc(var(--sirina-sadrzaja) + 12rem);
  margin: 0 auto;
  padding: 0.6rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
}
.brend {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--traka-tekst);
  font-weight: 600;
}
.brend:hover { text-decoration: none !important; }
.znak {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--pico-border-radius);
  background: var(--pico-primary-background);
  color: var(--pico-primary-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
}
/* Logo servisa umjesto inicijala; bijela podloga da se vidi i na tamnoj traci. */
.logo-servisa {
  flex: none;
  height: 2.75rem;
  max-width: 10rem;
  object-fit: contain;
  padding: 0.15rem 0.3rem;
  background: #FFFFFF;
  border-radius: var(--pico-border-radius);
}
@media (max-width: 767px) {
  .logo-servisa { height: 2.25rem; max-width: 8rem; }
}
.glavni-meni {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.25rem;
}
.glavni-meni > a,
.glavni-meni summary {
  padding: 0.45rem 0.75rem;
  border-radius: var(--pico-border-radius);
  color: var(--meni-tekst);
  font-size: 0.9375rem;
  font-weight: 500;
}
.glavni-meni > a:hover { background: var(--meni-hover); text-decoration: none !important; }
.glavni-meni > a[aria-current="page"] {
  background: var(--meni-aktivna-pozadina);
  color: var(--meni-aktivna-tekst);
}
/* Padajući meni Moj servis (Pico dropdown) bez okvira, kao obična veza. */
.glavni-meni details.dropdown { margin: 0; width: auto; }
.glavni-meni details.dropdown summary {
  height: auto;
  border: none;
  background: transparent;
  box-shadow: none;
}
.glavni-meni details.dropdown > summary:not([role]) { color: var(--meni-tekst); }
.glavni-meni details.dropdown summary::after { margin-left: 0.4rem; }
.glavni-meni details.dropdown ul { min-width: 12rem; }
.desni-dio {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9375rem;
  color: var(--traka-tekst);
}
.desni-dio a { color: var(--meni-tekst); }
.desni-dio button.outline { color: var(--meni-tekst); border-color: currentColor; }
.desni-dio form { margin: 0; }
.desni-dio button { margin: 0; padding: 0.4rem 0.9rem; font-size: 0.9375rem; }
/* Na srednje širokom ekranu logo je dovoljan; naziv servisa je u opisu (title). */
@media (min-width: 768px) and (max-width: 1399px) {
  .brend.sa-logom .naziv-servisa { display: none; }
}
.dugme-pomoc {
  width: 2rem;
  height: 2rem;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 50%;
  font-weight: 700;
  text-decoration: none !important;
}
.inicijali {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--pico-muted-border-color);
  color: var(--pico-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
}
/* Meni na slovu korisnika (gore desno): ime i promjena lozinke. */
.meni-korisnika { margin: 0; }
.desni-dio details.meni-korisnika > summary.inicijali:not([role]) {
  width: 2rem;
  height: 2rem;
  min-height: 0;
  padding: 0;
  border: 0;
  line-height: 1;
  cursor: pointer;
  list-style: none;
}
.meni-korisnika > summary.inicijali::after { display: none; }
.desni-dio details.meni-korisnika > summary.inicijali:not([role]):hover,
.desni-dio details.meni-korisnika[open] > summary.inicijali:not([role]) {
  background: var(--pico-primary-background);
  color: var(--pico-primary-inverse);
}
.meni-korisnika > ul { min-width: 13rem; }
#promjena-lozinke article { width: min(28rem, 100%); }
.samo-telefon { display: none; }

/* ---------- Sadržaj ---------- */
main.container { max-width: var(--sirina-sadrzaja); padding-top: 1.75rem; padding-bottom: 3rem; }
h1 { font-size: 1.75rem; letter-spacing: -0.01em; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.1rem; }

article {
  border: 1px solid var(--pico-muted-border-color);
  box-shadow: none;
}

/* Zaglavlja tabela sitnija i prigušena, da se podaci ističu. */
thead th, thead td {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pico-muted-color);
}

/* Oznake (status naloga i slično). */
.oznaka {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.5;
  vertical-align: middle;
  background: var(--oznaka-pozadina);
  color: var(--oznaka-tekst);
}

/* Izbor teme u Podacima servisa. */
.izbor-teme { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.izbor-teme label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  cursor: pointer;
}
.izbor-teme label:has(input:checked) { border-color: var(--pico-primary); }
.izbor-teme input { flex: none; margin-top: 0.2rem; }
.izbor-teme .opis { display: block; margin-top: 0.2rem; font-size: 0.875rem; color: var(--pico-muted-color); }

/* Široka tabela se pomjera lijevo-desno unutar svog okvira, a ne cijela stranica. */
figure { overflow-x: auto; }
/* Iznos "123,08 KM" se ne lomi u dva reda. */
.km { white-space: nowrap; }
/* Traka sa današnjim narudžbama treperi da se ne previdi. */
.narudzbe-traka { border-left: 0.4rem solid var(--pico-primary); animation: treperi 1.2s ease-in-out infinite alternate; }
@keyframes treperi { from { background: var(--pico-card-background-color); } to { background: var(--pico-mark-background-color); } }
@media (prefers-reduced-motion: reduce) { .narudzbe-traka { animation: none; background: var(--pico-mark-background-color); } }
.vozila-klijenta { margin-bottom: 1rem; }
.vozila-klijenta p { margin-bottom: 0.4rem; line-height: 1.3; }
.vozila-klijenta label { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.4rem; }
.vozila-klijenta label input { flex: none; margin-top: 0.2rem; }

/* ---------- Donja traka (samo telefon) ---------- */
.donja-traka { display: none; }

@media (max-width: 767px) {
  .samo-racunar { display: none !important; }
  .samo-telefon { display: block; }
  .traka-sadrzaj { padding: 0.5rem 1rem; }
  .brend .naziv-servisa { font-size: 0.95rem; }
  .desni-dio { display: none; }
  main.container { padding-top: 1.25rem; padding-bottom: calc(var(--visina-donje-trake) + 2rem); }

  /* Glavni meni je na telefonu skriven i otvara se dugmetom Meni u donjoj traci. */
  .glavni-meni {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--visina-donje-trake);
    max-height: calc(100vh - var(--visina-donje-trake) - 3rem);
    overflow-y: auto;
    z-index: 20;
    flex-direction: column;
    flex-wrap: nowrap; /* inače se Odjava prelije u drugu kolonu kad meni ne stane */
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 0.75rem 0.75rem;
    background: var(--pico-card-background-color);
    border-top: 1px solid var(--pico-muted-border-color);
    box-shadow: 0 -0.5rem 1.5rem rgba(16, 24, 40, 0.12);
  }
  body.meni-otvoren .glavni-meni { display: flex; }
  .glavni-meni > a { padding: 0.75rem 0.75rem; font-size: 1rem; color: var(--pico-color); }
  .glavni-meni > a:hover { background: var(--pico-card-sectioning-background-color); }
  .glavni-meni > a[aria-current="page"] { background: var(--oznaka-pozadina); color: var(--oznaka-tekst); }
  .glavni-meni .grupa-menija {
    padding: 0.75rem 0.75rem 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pico-muted-color);
  }
  .glavni-meni form { margin: 0.5rem 0.75rem 0; }
  .glavni-meni form button { width: 100%; margin: 0; }

  .donja-traka {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    height: var(--visina-donje-trake);
    background: var(--donja-traka-pozadina);
    border-top: 1px solid var(--pico-muted-border-color);
  }
  .donja-traka a,
  .donja-traka button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--donja-traka-tekst);
    font-size: 0.7rem;
    font-weight: 500;
    text-decoration: none;
  }
  .donja-traka a[aria-current="page"],
  body.meni-otvoren .donja-traka button { color: var(--donja-traka-aktivna); }
  .donja-traka svg { width: 1.4rem; height: 1.4rem; }
}

@media print {
  .ne-stampaj, .traka, .donja-traka { display: none !important; }
  body { background: #FFFFFF; }
  main.container { max-width: none; padding: 0; }
}

/* ---------- Dijelovi stranica (Početna i dalje) ---------- */
.desno { text-align: right; }
.naslov-stranice {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 1.25rem;
}
.naslov-stranice hgroup { margin: 0; }
.naslov-stranice hgroup h1 { margin-bottom: 0.25rem; }
.naslov-stranice hgroup p { margin: 0; color: var(--pico-muted-color); }
/* Sat na Početnoj, iznad brzih dugmadi. */
.desno-od-naslova { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; }
.sat {
  font-family: var(--naslovna-slova, inherit);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--pico-h1-color);
  letter-spacing: 0.02em;
}
.sat .sekunde { font-size: 0.5em; color: var(--pico-muted-color); margin-left: 0.1em; }
@media (max-width: 767px) {
  /* Telefon: sat gore desno uz pozdrav, tri dugmeta u jednom redu. */
  .pozdrav { position: relative; }
  .pozdrav > div:first-child { padding-right: 6.5rem; }
  .desno-od-naslova { width: 100%; align-items: stretch; }
  .sat { position: absolute; top: 0; right: 0; font-size: 1.7rem; }
}
.brze-akcije { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.brze-akcije [role="button"] { margin: 0; padding: 0.55rem 1rem; font-size: 0.9375rem; }

/* Brojači: cijela pločica je veza; naziv i ikona gore, krupan broj, poruka ispod. */
.brojaci {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.875rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 767px) {
  .brojaci { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; }
  .brojac { padding: 0.75rem 0.9rem; }
  .brojac .broj { font-size: 1.9rem; }
}
.brojac {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 1rem 1.1rem;
  background: var(--pico-card-background-color);
  border: var(--brojac-okvir, 1px solid var(--pico-muted-border-color));
  border-radius: calc(var(--pico-border-radius) * 1.5);
  box-shadow: var(--pico-card-box-shadow);
  /* Pico unutar veze mijenja --pico-color u boju veze, pa se boja teksta uzima iz h1. */
  color: var(--pico-h1-color);
  text-decoration: none !important;
  transition: border-color 0.15s, transform 0.15s;
}
a.brojac:hover { border-color: var(--pico-primary-border); transform: translateY(-1px); }
.brojac .glava { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; color: var(--pico-muted-color); }
.brojac .naziv { font-size: 0.875rem; font-weight: 500; }
.brojac .glava .ikona { width: 1.1rem; height: 1.1rem; flex: none; }
.brojac .broj {
  font-family: var(--naslovna-slova, inherit);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.1;
  margin-top: 0.25rem;
  font-variant-numeric: tabular-nums;
}
.brojac .poruka { font-size: 0.8rem; color: var(--pico-muted-color); }
/* Posao koji čeka (npr. vozila za servis) dobija boju teme. */
.brojac.paznja { background: var(--paznja-pozadina); border-color: var(--paznja-okvir); }
.brojac.paznja .glava, .brojac.paznja .broj { color: var(--paznja-broj); }
/* Upozorenje (račun nije izdat ili plaćen) je žuto/narandžasto. */
.brojac.upozorenje { background: var(--upozorenje-pozadina); border-color: var(--upozorenje-okvir); }
.brojac.upozorenje .glava, .brojac.upozorenje .broj, .brojac.upozorenje .poruka { color: var(--upozorenje-tekst); }
.brojac.uspjeh .poruka { color: var(--uspjeh-tekst); }

/* Početna: kartica sa sljedećom narudžbom. */
.sljedeca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding: 1rem 1.1rem;
  background: var(--pico-card-background-color);
  border: var(--brojac-okvir, 1px solid var(--pico-muted-border-color));
  border-radius: calc(var(--pico-border-radius) * 1.5);
  box-shadow: var(--pico-card-box-shadow);
}
.sljedeca-lijevo { display: flex; align-items: center; gap: 1rem; min-width: 0; flex: 1 1 20rem; }
.sljedeca-vrijeme {
  flex: none;
  padding: 0.35rem 0.8rem;
  border-radius: var(--pico-border-radius);
  background: var(--upozorenje-pozadina);
  border: 1px solid var(--upozorenje-okvir);
  color: var(--upozorenje-tekst);
  text-align: center;
  line-height: 1.1;
}
.sljedeca-vrijeme small { display: block; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.12em; }
.sljedeca-vrijeme b { font-family: var(--naslovna-slova, inherit); font-size: 1.6rem; }
.sljedeca-dugmad { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-left: auto; }
.sljedeca-dugmad form { margin: 0; }
.sljedeca-dugmad [role="button"], .sljedeca-dugmad button {
  margin: 0; padding: 0.45rem 0.9rem; font-size: 0.9rem; width: auto;
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.brze-akcije [role="button"] { display: inline-flex; align-items: center; gap: 0.45rem; }
.brze-akcije .ikona, .sljedeca-dugmad .ikona { width: 1rem; height: 1rem; }

/* Registarska tablica kao prava BiH tablica: bijela pločica, crni okvir sa
   zaobljenim uglovima, plava traka sa BIH lijevo i debela uska slova.
   Boje su iste u svim temama (tablica je uvijek bijela). */
.tablica {
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid #000000;
  border-radius: 0.28em;
  background: #FFFFFF;
  box-shadow: 0 0 0 1px #FFFFFF;
  color: #000000;
  font-family: "DIN 1451", "Bahnschrift", "D-DIN", "Arial Narrow", "Roboto Condensed", var(--naslovna-slova, sans-serif);
  font-size: 0.8rem;
  font-weight: 700;
  font-stretch: semi-condensed;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.tablica-bih {
  display: flex;
  align-items: flex-end;
  padding: 0 0.22em 0.18em;
  background: #1A8FDB;
  color: #FFFFFF;
  font-family: Arial, Helvetica, sans-serif;
  font-size: max(0.48em, 7px);
  font-weight: 700;
  font-stretch: normal;
  letter-spacing: 0;
}
.tablica-znak { padding: 0.22em 0.4em 0.18em 0.35em; letter-spacing: 0.04em; }
/* Stranice daju svim span-ovima u redu sivu boju i svoju veličinu slova (.opis-reda span itd.);
   tablica ih ne smije naslijediti, inače je mutna. */
.tablica > .tablica-znak { color: #000000 !important; font-size: 1em !important; font-weight: 700 !important; opacity: 1 !important; }
.tablica > .tablica-bih { color: #FFFFFF !important; font-size: max(0.48em, 7px) !important; opacity: 1 !important; }

/* Početna: raspored lijevo (šire), bočna kolona desno. */
.pocetna-mreza { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (max-width: 1023px) { .pocetna-mreza { grid-template-columns: minmax(0, 1fr); } }
.pocetna-mreza article { margin-bottom: 1.25rem; }
.bocna-kolona { min-width: 0; }
.dan-rasporeda {
  margin: 0 calc(var(--pico-block-spacing-horizontal) * -1);
  padding: 0.9rem var(--pico-block-spacing-horizontal);
  border-bottom: 1px solid var(--pico-table-border-color);
}
.dan-rasporeda:last-child { border-bottom: none; }
.naziv-dana { margin: 0 0 0.6rem; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--pico-muted-color); }
.stavka-rasporeda {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  background: var(--pico-card-sectioning-background-color);
  color: var(--pico-h1-color);
  text-decoration: none !important;
}
.stavka-rasporeda:last-child { margin-bottom: 0; }
.stavka-rasporeda:hover { border-color: var(--pico-primary-border); }
.stavka-rasporeda .vrijeme { flex: none; min-width: 3.6rem; white-space: nowrap; font-family: var(--naslovna-slova, inherit); font-size: 1.25rem; font-weight: 700; }
.stavka-rasporeda .vrijeme.danas { color: var(--upozorenje-tekst); }
.stavka-rasporeda .opis-reda { flex: 1; }
.stavka-rasporeda .oznaka { flex: none; border-radius: 999px; background: var(--upozorenje-pozadina); color: var(--upozorenje-tekst); }
@media (max-width: 575px) { .stavka-rasporeda .oznaka { display: none; } }
.dan-rasporeda .prazno { display: flex; align-items: center; gap: 0.4rem; margin: 0; font-size: 0.9rem; }
.dan-rasporeda .prazno .ikona { width: 1rem; height: 1rem; }

/* Bočna kolona: nalozi u radu i pozivi na servis. */
.nalog-u-radu {
  display: block;
  margin-bottom: 0.5rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  background: var(--pico-card-sectioning-background-color);
  color: var(--pico-h1-color);
  text-decoration: none !important;
}
.nalog-u-radu:hover { border-color: var(--pico-primary-border); }
.nalog-u-radu .gore { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; }
.nalog-u-radu strong { display: block; font-size: 0.9rem; font-weight: 600; }
.nalog-u-radu small { color: var(--pico-muted-color); font-size: 0.78rem; }
.poziv {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 calc(var(--pico-block-spacing-horizontal) * -1);
  padding: 0.65rem var(--pico-block-spacing-horizontal);
  border-bottom: 1px solid var(--pico-table-border-color);
  color: var(--pico-h1-color);
  text-decoration: none !important;
}
.poziv:last-child { border-bottom: none; }
.poziv .opis-reda { flex: 1; font-size: 0.9rem; }
.poziv .opis-reda span { font-size: 0.8rem; }
.dugme-ikona {
  flex: none;
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  color: var(--pico-h1-color);
}
.dugme-ikona:hover { border-color: var(--pico-primary-border); }
.dugme-ikona .ikona { width: 1rem; height: 1rem; }
button.dugme-ikona { margin: 0; padding: 0; background: transparent; }
.nije-otvoreno { margin: 0.5rem 0 0; color: var(--upozorenje-tekst); }

/* Pozdrav na Početnoj: datum iznad, sažetak ispod naslova. */
.pozdrav .datum { margin: 0; font-size: 0.875rem; color: var(--pico-muted-color); }
.pozdrav h1 { margin: 0.15rem 0 0.2rem; }
.pozdrav .sazetak { margin: 0; color: var(--pico-muted-color); }
.pozdrav .sazetak strong { color: var(--pico-h1-color); }

/* Pretraga u gornjoj traci (računar). */
.pretraga-trake {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0 0.6rem;
  height: 2.25rem;
  width: 12.5rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  color: var(--meni-tekst);
}
.pretraga-trake:focus-within { border-color: var(--pico-primary-border); }
.pretraga-trake .ikona { width: 1rem; height: 1rem; flex: none; }
.pretraga-trake input[type="search"] {
  flex: 1;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  color: var(--traka-tekst);
  font-size: 0.875rem;
}
.pretraga-trake input[type="search"]:focus { box-shadow: none; }
.pretraga-trake input[type="search"] { width: auto; border-radius: 0; background-image: none; padding-inline-start: 0; }
.pretraga-trake kbd { flex: none; padding: 0 0.3rem; font-size: 0.65rem; line-height: 1.4; background: transparent; color: inherit; border: 1px solid currentColor; border-radius: 0.2rem; opacity: 0.7; }
@media (max-width: 767px) { .pretraga-trake { display: none; } }
/* Srednje širok ekran: zbijeniji meni da sve stane u jedan red. */
@media (min-width: 768px) and (max-width: 1399px) {
  .glavni-meni > a, .glavni-meni summary { padding-inline: 0.5rem; font-size: 0.9375rem; }
  .traka-sadrzaj { gap: 0.5rem 0.75rem; }
  .brend .naziv-servisa { max-width: 7.5rem; font-size: 0.9rem; line-height: 1.15; }
  .pretraga-trake { width: 8.5rem; }
  .desni-dio { gap: 0.5rem; }
  .pretraga-trake kbd { display: none; }
}

/* Dvije kartice jedna pored druge; na užem ekranu jedna ispod druge. */
.dvije-kolone { display: flex; flex-wrap: wrap; gap: 0 1.25rem; align-items: flex-start; }
.dvije-kolone > article { flex: 1 1 24rem; min-width: 0; }

/* Kartica sa spiskom: naslov lijevo, veza desno, redovi do ivica. */
article.spisak { padding-bottom: 0.25rem; }
article.spisak > header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.25rem 1rem;
}
article.spisak > header a { font-size: 0.875rem; font-weight: 500; }
article.spisak figure { margin-bottom: 0.5rem; }
.red-spiska {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 calc(var(--pico-block-spacing-horizontal) * -1);
  padding: 0.7rem var(--pico-block-spacing-horizontal);
  border-bottom: 1px solid var(--pico-table-border-color);
  color: var(--pico-h1-color);
  text-decoration: none !important;
}
.red-spiska:last-child { border-bottom: none; }
.red-spiska:hover { background: var(--pico-card-sectioning-background-color); }
.termin {
  flex: none;
  width: 4.5rem;
  padding: 0.3rem 0;
  border-radius: var(--pico-border-radius);
  background: var(--pico-card-sectioning-background-color);
  color: var(--pico-muted-color);
  font-size: 0.8rem;
  line-height: 1.25;
  text-align: center;
}
.termin b { display: block; font-size: 0.95rem; color: var(--pico-h1-color); }
.termin.danas { background: var(--oznaka-pozadina); color: var(--oznaka-tekst); }
.termin.danas b { color: var(--oznaka-tekst); }
.opis-reda { min-width: 0; line-height: 1.35; }
.opis-reda strong { display: block; }
.opis-reda span { font-size: 0.875rem; color: var(--pico-muted-color); }
.prazno { color: var(--pico-muted-color); margin: 0.5rem 0 0.75rem; }
.dug { font-weight: 600; color: var(--dug-boja, #B42318); }

/* Telefon: tri brza dugmeta Početne u jednom redu (poslije osnovnih pravila). */
@media (max-width: 767px) {
  .pozdrav .brze-akcije { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pozdrav .brze-akcije [role="button"] { justify-content: center; padding: 0.55rem 0.3rem; font-size: 0.8rem; gap: 0.3rem; }
}

/* Objašnjenje ispod polja forme (kad makro polja nema mjesta za njega). */
.objasnjenje-polja { margin-top: calc(var(--pico-spacing) * -0.75); color: var(--pico-muted-color); }

/* ---------- Radni nalog ---------- */
:root {
  --uspjeh-pozadina: #ECFDF3;
  --greska-pozadina: #FEF3F2;
  --greska-tekst: #B42318;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mrvice { display: block; margin-bottom: 0.75rem; font-size: 0.875rem; color: var(--pico-muted-color); }
.mrvice span { color: var(--pico-muted-color); }
.oznaka.uspjeh { background: var(--uspjeh-pozadina); color: var(--uspjeh-tekst); }
.oznaka.greska { background: var(--greska-pozadina); color: var(--greska-tekst); }
.oznaka.upozorenje { background: var(--upozorenje-pozadina); color: var(--upozorenje-tekst); box-shadow: inset 0 0 0 1px var(--upozorenje-okvir); }
.oznaka.sitna { padding: 0 0.45rem; font-size: 0.7rem; font-weight: 500; background: var(--pico-card-sectioning-background-color); color: var(--pico-muted-color); box-shadow: inset 0 0 0 1px var(--pico-muted-border-color); }

/* Zaglavlje: tablica, vozilo i broj naloga, klijent; oznake statusa desno. */
.naslov-naloga { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-bottom: 1.25rem; }
.naslov-naloga hgroup { margin: 0; flex: 1 1 16rem; min-width: 0; }
.naslov-naloga h1 { margin: 0 0 0.15rem; font-size: 1.6rem; }
.naslov-naloga .broj-naloga { color: var(--pico-muted-color); font-weight: 500; }
.naslov-naloga hgroup p { margin: 0; color: var(--pico-muted-color); }
.oznake-naloga { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tablica.velika { font-size: 1.35rem; border-width: 2px; }

/* Raspored: stavke lijevo (šire), obračun i podaci vozila desno. */
.nalog-mreza { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 1.25rem; align-items: start; }
.nalog-glavno, .nalog-strana { min-width: 0; }
.nalog-mreza article { margin-bottom: 1.25rem; }
.nalog-strana { position: sticky; top: 1rem; }
.red-dugmadi { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.red-dugmadi form { margin: 0; }
.red-dugmadi button, .red-dugmadi [role="button"] { width: auto; margin: 0; }

/* Kartica stavki: tabela do ivica kartice, grupe kao sitni natpisi. */
.kartica-stavki { padding-bottom: 0; }
.kartica-stavki > header { margin-bottom: 0; display: flex; align-items: baseline; gap: 0.5rem; }
.kartica-stavki > header small { color: var(--pico-muted-color); }
.kartica-stavki figure { margin: 0 calc(var(--pico-block-spacing-horizontal) * -1); }
.tabela-stavki { margin: 0; }
.tabela-stavki th, .tabela-stavki td { padding: 0.55rem 0.5rem; vertical-align: middle; }
.tabela-stavki th:first-child, .tabela-stavki td:first-child { padding-left: var(--pico-block-spacing-horizontal); }
.tabela-stavki th:last-child, .tabela-stavki td:last-child { padding-right: var(--pico-block-spacing-horizontal); }
.tabela-stavki .grupa-stavki th {
  padding-top: 0.9rem;
  padding-bottom: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--pico-muted-color);
  background: var(--pico-card-sectioning-background-color);
}
.tabela-stavki .priguseno { color: var(--pico-muted-color); }
.tabela-stavki .iznos-stavke { font-weight: 600; color: var(--pico-h1-color); }
.tabela-stavki .naziv-stavke small { display: none; }
.akcije-stavke { width: 1%; white-space: nowrap; }
.akcije-stavke .dugme-ikona { display: inline-grid; width: 1.9rem; height: 1.9rem; }
.akcije-stavke .dugme-ikona + .dugme-ikona { margin-left: 0.3rem; }
.dugme-ikona.brisanje:hover { border-color: var(--greska-tekst); color: var(--greska-tekst); }
.izmjena-stavke input, .izmjena-stavke select { margin: 0; min-width: 5rem; padding: 0.4rem 0.6rem; height: auto; }
.izmjena-stavke td:first-child input { min-width: 14rem; }
.dugmad-izmjene { white-space: nowrap; }
.dugmad-izmjene button { width: auto; margin: 0 0.3rem 0 0; padding: 0.4rem 0.8rem; }
.kartica-stavki > #stavke > .prazno { margin: 0 0 1rem; }

/* Nova stavka: podnožje kartice, polja u jednom redu na računaru. */
.nova-stavka {
  margin: 0 calc(var(--pico-block-spacing-horizontal) * -1);
  padding: 1rem var(--pico-block-spacing-horizontal) 0.25rem;
  border-top: 1px solid var(--pico-muted-border-color);
  background: var(--pico-card-sectioning-background-color);
  border-radius: 0 0 var(--pico-border-radius) var(--pico-border-radius);
}
.nova-stavka h3 { margin-bottom: 0.6rem; font-size: 0.95rem; }
.nova-stavka label { font-size: 0.85rem; }
.nova-stavka input, .nova-stavka select { margin-bottom: 0.75rem; }
.polja-stavke { display: grid; grid-template-columns: 1.4fr 0.7fr 1fr 1fr 0.7fr auto; gap: 0 0.6rem; align-items: start; }
.polja-stavke .dugme-dodaj { width: auto; margin-top: calc(0.85rem * 1.5 + 0.25rem); padding-inline: 1.25rem; }

/* Kartice sa spiskom (sati, troškovi): datum, opis, iznos, dugme. */
.nalog-mreza .red-spiska { gap: 0.75rem; padding-block: 0.55rem; }
.nalog-mreza .red-spiska form { margin: 0; }
.datum-reda { flex: none; width: 3.2rem; font-size: 0.85rem; color: var(--pico-muted-color); }
.nalog-mreza .opis-reda { flex: 1; }
.nalog-mreza .opis-reda span { display: block; }
article.spisak > header small, article.spisak > header .zbir { font-size: 0.85rem; color: var(--pico-muted-color); }
article.spisak > header .zbir { font-weight: 600; color: var(--pico-h1-color); }
.forma-u-redu { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 0.6rem; margin-top: 0.9rem; }
.forma-u-redu label { flex: 1 1 8rem; margin-bottom: 1rem; font-size: 0.85rem; }
.forma-u-redu label > input, .forma-u-redu label > select { margin-bottom: 0; }
.forma-u-redu button { width: auto; flex: none; margin-bottom: 1rem; }
.nalog-mreza .red-spiska .dugme-ikona { width: 1.9rem; height: 1.9rem; margin: 0; padding: 0; }
.racun-zarade { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 1rem; margin: 0.25rem 0 0.75rem; padding: 0.75rem 0 0; border-top: 1px solid var(--pico-muted-border-color); font-size: 0.9rem; }
.racun-zarade span { color: var(--pico-muted-color); }
.racun-zarade strong { font-size: 1rem; color: var(--pico-h1-color); }
.racun-zarade .zarada { color: var(--uspjeh-tekst); }
.storno-naloga { margin-top: 0.5rem; font-size: 0.9rem; }
.storno-naloga summary { color: var(--pico-muted-color); }

/* Bočna kartica: ukupno krupno, glavna radnja preko cijele širine. */
.kartica-obracuna .natpis { margin: 0; font-size: 0.85rem; color: var(--pico-muted-color); }
.kartica-obracuna .ukupno {
  margin: 0.1rem 0 0.75rem;
  font-family: var(--naslovna-slova, inherit);
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--pico-h1-color);
  white-space: nowrap;
}
.kartica-obracuna form { margin: 0; }
.kartica-obracuna button { width: 100%; margin-bottom: 0.6rem; }
.kartica-obracuna .izdavanje-racuna label { font-size: 0.85rem; }
.kartica-obracuna .izdavanje-racuna details { margin-bottom: 0.75rem; font-size: 0.85rem; }
.kartica-obracuna .racuni-naloga { margin-top: 0.25rem; border-top: 1px solid var(--pico-muted-border-color); }
.kartica-obracuna .prazno { margin: 0; }
.upozorenje-tekst { color: var(--upozorenje-tekst); }
dl.podaci { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; margin: 0 0 1rem; font-size: 0.9rem; }
dl.podaci dt { color: var(--pico-muted-color); font-weight: 400; }
dl.podaci dd { margin: 0; text-align: right; color: var(--pico-h1-color); }
dl.podaci .sasija { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.85rem; letter-spacing: 0.02em; word-break: break-all; }
.kartica-obracuna dl.podaci { padding-top: 0.75rem; border-top: 1px solid var(--pico-muted-border-color); }
.kartica-podataka > header { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.kartica-podataka > header a { font-size: 0.875rem; font-weight: 500; }
.kartica-podataka dl.podaci { margin-bottom: 0; }
.kartica-podataka h3 { margin: 0 0 0.3rem; font-size: 0.95rem; }
.kartica-podataka p { margin-bottom: 0.9rem; font-size: 0.925rem; }
.kartica-podataka p:last-child { margin-bottom: 0; }

/* v0 dopune: klijent sa ikonama, radnje gore desno, koraci naloga. */
.klijent-naloga { display: flex; flex-wrap: wrap; gap: 0.15rem 1.1rem; }
.klijent-naloga a { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--pico-h1-color); }
.klijent-naloga a.telefon { color: var(--pico-primary); }
.klijent-naloga .ikona { width: 0.95rem; height: 0.95rem; color: var(--pico-muted-color); }
.klijent-naloga a.telefon .ikona { color: inherit; }
.radnje-naloga { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.radnje-naloga > button, .radnje-naloga > [role="button"], .vise-radnji > summary {
  display: inline-flex; align-items: center; gap: 0.4rem; width: auto; height: 2.3rem; margin: 0; padding: 0 0.8rem; font-size: 0.9rem;
}
.radnje-naloga .ikona { width: 1rem; height: 1rem; }
.vise-radnji { position: relative; margin: 0; }
.vise-radnji > summary { padding: 0 0.6rem; list-style: none; }
.vise-radnji > summary::-webkit-details-marker { display: none; }
.vise-radnji > summary::after { display: none !important; }
.meni-radnji {
  position: absolute; right: 0; top: calc(100% + 0.4rem); z-index: 20; width: 19rem; padding: 0.9rem;
  border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius);
  background: var(--pico-card-background-color); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.meni-radnji form { margin: 0; }
.meni-radnji strong.opasno { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.35rem; color: var(--greska-tekst); }
.meni-radnji small { display: block; margin-bottom: 0.6rem; color: var(--pico-muted-color); line-height: 1.35; }
.meni-radnji input { margin-bottom: 0.6rem; }
.meni-radnji button { width: 100%; margin: 0; }
button.dugme-opasno, .dugme-opasno { background: var(--greska-tekst); border-color: var(--greska-tekst); color: #FFFFFF; }
.koraci-naloga { display: flex; align-items: center; gap: 0.5rem; margin: -0.4rem 0 1.25rem; padding: 0; overflow-x: auto; font-size: 0.875rem; list-style: none; }
.koraci-naloga li { display: flex; align-items: center; gap: 0.45rem; margin: 0; flex: none; color: var(--pico-muted-color); list-style: none; }
.koraci-naloga li + li::before { content: ""; width: 2rem; height: 1px; margin-right: 0.1rem; background: var(--pico-muted-border-color); }
.koraci-naloga .krug {
  display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border: 1px solid var(--pico-muted-border-color);
  border-radius: 50%; font-size: 0.75rem; font-weight: 600;
}
.koraci-naloga .krug .ikona { width: 0.85rem; height: 0.85rem; }
.koraci-naloga li.gotov { color: var(--uspjeh-tekst); }
.koraci-naloga li.gotov .krug { border-color: transparent; background: var(--uspjeh-pozadina); }
.koraci-naloga li.trenutni { color: var(--pico-h1-color); font-weight: 600; }
.koraci-naloga li.trenutni .krug { border-color: var(--pico-primary); background: var(--pico-primary); color: var(--pico-primary-inverse); }
.kartica-stavki > header .brojka {
  padding: 0 0.5rem; border-radius: 999px; font-size: 0.75rem; line-height: 1.5;
  background: var(--pico-card-sectioning-background-color); color: var(--pico-muted-color); box-shadow: inset 0 0 0 1px var(--pico-muted-border-color);
}
.oznaka.lager { padding: 0 0.4rem; border-radius: 0.25rem; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; background: var(--uspjeh-pozadina); color: var(--uspjeh-tekst); }
.tabela-stavki .popust { color: var(--upozorenje-tekst); }
.akcije-stavke .dugme-ikona { border-color: transparent; color: var(--pico-muted-color); }
.akcije-stavke .dugme-ikona:hover { border-color: var(--pico-muted-border-color); color: var(--pico-h1-color); }
.dugme-ikona.brisanje:hover { background: var(--greska-pozadina) !important; }
/* Forma nove stavke: prekidač vrste i lupa u polju naziva. */
.glava-nove-stavke { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 0.6rem; }
.glava-nove-stavke h3 { margin: 0; }
.prekidac { display: inline-flex; width: auto; margin: 0; padding: 0.15rem; border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); background: var(--pico-background-color); }
.prekidac label { margin: 0; cursor: pointer; }
.prekidac input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.prekidac span { display: block; padding: 0.25rem 0.8rem; border-radius: calc(var(--pico-border-radius) - 0.1rem); font-size: 0.85rem; color: var(--pico-muted-color); }
.prekidac input:checked + span { background: var(--oznaka-pozadina); color: var(--oznaka-tekst); font-weight: 600; }
.prekidac input:focus-visible + span { outline: 2px solid var(--pico-primary); outline-offset: 1px; }
.naziv-stavke-polje { position: relative; }
.naziv-stavke-polje > .ikona { position: absolute; left: 0.85rem; top: calc(var(--pico-form-element-spacing-vertical) + 0.4rem); width: 1rem; height: 1rem; color: var(--pico-muted-color); pointer-events: none; }
.naziv-stavke-polje input[name="naziv"] { padding-left: 2.4rem; }
.polja-stavke { grid-template-columns: 0.8fr 1fr 1.3fr 0.8fr auto; }
.dugme-dodaj { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; }
.dugme-dodaj .ikona { width: 1rem; height: 1rem; }
/* Računi dobavljača kad ih nema: jedna isprekidana traka. */
.traka-dobavljaca {
  display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; padding: 1rem var(--pico-block-spacing-horizontal);
  border: 1px dashed var(--pico-muted-border-color); border-radius: var(--pico-border-radius); background: var(--pico-card-background-color);
}
.traka-dobavljaca > div { flex: 1; min-width: 0; }
.traka-dobavljaca strong { font-size: 0.95rem; color: var(--pico-h1-color); }
.traka-dobavljaca p { margin: 0.1rem 0 0; font-size: 0.85rem; color: var(--pico-muted-color); }
.traka-dobavljaca [role="button"] { flex: none; display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; padding: 0.45rem 0.8rem; font-size: 0.875rem; }
.traka-dobavljaca [role="button"] .ikona { width: 1rem; height: 1rem; }
.traka-dobavljaca form { flex: none; margin: 0; }
.traka-dobavljaca button { display: inline-flex; align-items: center; gap: 0.35rem; width: auto; margin: 0; padding: 0.45rem 0.8rem; font-size: 0.875rem; }
.traka-dobavljaca button .ikona { width: 1rem; height: 1rem; }
.ikona-kocka { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: var(--pico-border-radius); background: var(--pico-card-sectioning-background-color); color: var(--pico-muted-color); }
.ikona-kocka .ikona { width: 1.2rem; height: 1.2rem; }
.ikona-kocka.uspjeh { width: 2.1rem; height: 2.1rem; background: var(--uspjeh-pozadina); color: var(--uspjeh-tekst); }
.ikona-kocka.uspjeh .ikona { width: 1rem; height: 1rem; }
.inicijali-radnika {
  flex: none; display: grid; place-items: center; width: 1.85rem; height: 1.85rem; border-radius: 50%;
  border: 1px solid var(--pico-muted-border-color); background: var(--pico-card-sectioning-background-color);
  font-size: 0.65rem; font-weight: 700; color: var(--pico-muted-color);
}
article.spisak > header .zbir span { font-weight: 400; color: var(--pico-muted-color); }
.forma-u-redu label.sire { flex-grow: 2; }
/* Troškovi i zarada: sklopljeno, zarada se vidi u naslovu. */
.kartica-zarade {
  margin-bottom: 1.25rem; padding: 0; border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius); background: var(--pico-card-background-color);
}
.kartica-zarade > summary { display: flex; align-items: center; gap: 0.8rem; padding: 0.9rem var(--pico-block-spacing-horizontal); }
.kartica-zarade > summary::after { flex: none; margin-left: 0.25rem; }
.kartica-zarade > summary .opis-reda { flex: 1; }
.kartica-zarade > summary .opis-reda strong { color: var(--pico-h1-color); }
.kartica-zarade > summary .opis-reda span { display: block; font-size: 0.8rem; }
.zarada-u-naslovu { text-align: right; line-height: 1.2; }
.zarada-u-naslovu .zarada { color: var(--uspjeh-tekst); }
.zarada-u-naslovu small { display: block; font-size: 0.75rem; color: var(--pico-muted-color); }
.kartica-zarade[open] > summary { margin-bottom: 0; border-bottom: 1px solid var(--pico-muted-border-color); }
.sadrzaj-zarade { padding: 0.25rem var(--pico-block-spacing-horizontal) 0.75rem; }
.racun-zarade small { font-size: 0.75rem; font-weight: 400; color: var(--pico-muted-color); }
/* Opis radova kao spisak: tačka za naručeno, kvačica za urađeno. */
.k-opis section + section { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--pico-muted-border-color); }
.k-opis h3 { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--pico-muted-color); }
.spisak-radova { margin: 0; padding: 0; list-style: none; font-size: 0.925rem; }
.spisak-radova li { display: flex; gap: 0.55rem; margin: 0 0 0.3rem; padding: 0; list-style: none; color: var(--pico-h1-color); }
.znak-reda { flex: none; display: grid; place-items: center; width: 0.9rem; height: 1.4rem; }
.znak-reda.naruceno::before { content: ""; width: 0.45rem; height: 0.45rem; border: 1.5px solid var(--pico-muted-color); border-radius: 50%; }
.znak-reda.uradjeno { color: var(--uspjeh-tekst); }
.znak-reda .ikona { width: 0.9rem; height: 0.9rem; }
.kartica-obracuna .dugme-zavrsi, .traka-zavrsi button { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; }
.kartica-obracuna .dugme-zavrsi { height: 3rem; font-weight: 600; }
.dugme-zavrsi .ikona, .traka-zavrsi .ikona { width: 1.1rem; height: 1.1rem; }
.traka-zavrsi { display: none; }

/* Tablet: jedna kolona; obračun i opis ostaju odmah ispod stavki. */
@media (max-width: 1023px) {
  .nalog-mreza { display: flex; flex-direction: column; gap: 0; }
  .nalog-glavno, .nalog-strana { display: contents; }
  .nalog-mreza > * > * { width: 100%; }
  .k-opis { order: 1; }
  .k-stavke { order: 2; }
  .k-obracun { order: 3; }
  .k-vozilo { order: 4; }
  .k-ostalo { order: 5; }
  .traka-zavrsi {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; align-items: center; gap: 1rem;
    padding: 0.6rem 1rem; border-top: 1px solid var(--pico-muted-border-color); background: var(--pico-card-background-color);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.08);
  }
  .traka-zavrsi small { display: block; font-size: 0.7rem; color: var(--pico-muted-color); line-height: 1; }
  .traka-zavrsi strong { font-family: var(--naslovna-slova, inherit); font-size: 1.35rem; color: var(--pico-h1-color); white-space: nowrap; }
  .traka-zavrsi button { width: auto; margin: 0 0 0 auto; padding: 0.55rem 1rem; }
  main.container:has(.traka-zavrsi) { padding-bottom: 6rem; }
}

/* Telefon: stavka u dva reda (naziv i detalji lijevo, iznos i dugmad desno). */
@media (max-width: 767px) {
  .naslov-naloga { gap: 0.5rem 0.75rem; }
  .naslov-naloga h1 { font-size: 1.3rem; }
  .naslov-naloga .broj-naloga { display: block; font-size: 1rem; }
  .naslov-naloga .tacka { display: none; }
  .tabela-stavki .iznos-stavke { font-size: 0.95rem; }
  .tablica.velika { font-size: 1.1rem; }
  .tabela-stavki thead { display: none; }
  .tabela-stavki td:not(.naziv-stavke):not(.iznos-stavke):not(.akcije-stavke) { display: none; }
  .tabela-stavki .naziv-stavke small { display: block; color: var(--pico-muted-color); font-size: 0.8rem; }
  .tabela-stavki .izmjena-stavke td { display: block !important; padding: 0.3rem var(--pico-block-spacing-horizontal); }
  .izmjena-stavke td:first-child input { min-width: 0; }
  .akcije-stavke .dugme-ikona { width: 2.25rem; height: 2.25rem; }
  .polja-stavke { grid-template-columns: 1fr 1fr; }
  .polja-stavke label:first-child { grid-column: 1 / -1; }
  .polja-stavke .dugme-dodaj { grid-column: 1 / -1; width: 100%; margin-top: 0; margin-bottom: 1rem; }
  .forma-u-redu button { width: 100%; }
  .kartica-obracuna .ukupno { font-size: 1.9rem; }
  .traka-zavrsi { bottom: var(--visina-donje-trake); }
  main.container:has(.traka-zavrsi) { padding-bottom: calc(var(--visina-donje-trake) + 6rem); }
  .radnje-naloga { margin-left: 0; width: 100%; }
  .radnje-naloga .oznaka { margin-right: auto; }
  .koraci-naloga { font-size: 0.8rem; gap: 0.35rem; }
  .koraci-naloga li + li::before { width: 0.9rem; }
  .koraci-naloga li:not(.trenutni) .naziv-koraka { display: none; }
  .traka-dobavljaca { flex-wrap: wrap; }
  .traka-dobavljaca [role="button"], .traka-dobavljaca form, .traka-dobavljaca button { width: 100%; justify-content: center; }
  .polja-stavke label:first-child { grid-column: auto; }
  .kartica-zarade > summary { flex-wrap: wrap; }
}
@media print {
  .mrvice, .koraci-naloga, .traka-zavrsi, .nova-stavka { display: none !important; }
  .nalog-mreza { grid-template-columns: minmax(0, 1fr) 15rem; }
  .nalog-strana { position: static; }
}
.spisak-radova li:last-child { margin-bottom: 0; }
.k-opis section > :last-child { margin-bottom: 0; }

/* ---------- Klijenti ---------- */
.avatar {
  flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--oznaka-pozadina); color: var(--oznaka-tekst); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em;
}
.avatar.velika { width: 3.6rem; height: 3.6rem; font-size: 1.15rem; }
.priguseno { color: var(--pico-muted-color); }

/* Pretraga: veliko polje sa lupom. */
.pretraga-klijenata { position: relative; display: block; margin-bottom: 1rem; }
.pretraga-klijenata > .ikona { position: absolute; left: 1rem; top: 50%; width: 1.15rem; height: 1.15rem; transform: translateY(-50%); color: var(--pico-muted-color); pointer-events: none; }
.pretraga-klijenata input[type="search"] {
  margin: 0; height: 3.1rem; padding-left: 2.9rem; font-size: 1.05rem;
  background-image: none; background-color: var(--pico-card-background-color);
}

/* Spisak: jedan red po klijentu, cijeli red vodi na klijenta. */
.spisak-klijenata { padding: 0; overflow: hidden; }
.glava-spiska, .red-klijenta {
  display: grid; grid-template-columns: 2.4rem minmax(0, 1.5fr) 10rem minmax(0, 2fr) 7.5rem 1rem;
  align-items: center; gap: 1rem; padding: 0.7rem var(--pico-block-spacing-horizontal);
}
.glava-spiska {
  padding-block: 0.6rem; border-bottom: 1px solid var(--pico-muted-border-color); background: var(--pico-card-sectioning-background-color);
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--pico-muted-color);
}
.red-klijenta { position: relative; border-bottom: 1px solid var(--pico-table-border-color, var(--pico-muted-border-color)); }
.red-klijenta:last-child { border-bottom: none; }
.red-klijenta:hover { background: var(--pico-card-sectioning-background-color); }
.ime-klijenta { color: var(--pico-h1-color); }
.ime-klijenta::after { content: ""; position: absolute; inset: 0; }
.red-klijenta .opis-reda span { display: block; }
.telefon-klijenta a { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; font-size: 0.925rem; }
.telefon-klijenta .ikona { width: 0.9rem; height: 0.9rem; }
.vozila-u-redu { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; min-width: 0; font-size: 0.85rem; color: var(--pico-muted-color); }
.vozilo-u-redu { display: inline-flex; align-items: center; gap: 0.4rem; min-width: 0; }
.vozilo-u-redu .model { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vozila-u-redu .jos { font-weight: 600; }
.posjeta { font-size: 0.875rem; white-space: nowrap; color: var(--pico-muted-color); }
.posjeta .oznaka { font-size: 0.75rem; }
.strelica-reda { color: var(--pico-muted-color); }
.strelica-reda .ikona { width: 1rem; height: 1rem; display: block; }
.spisak-klijenata > #redovi > .prazno { margin: 0; padding: 1rem var(--pico-block-spacing-horizontal); }
.spisak-klijenata .napomena-spiska { border-top: 1px solid var(--pico-muted-border-color); font-size: 0.85rem; }

/* Kartica klijenta: zaglavlje kao na nalogu, vozila lijevo, podaci desno. */
.naslov-klijenta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-bottom: 1.5rem; }
.naslov-klijenta hgroup { margin: 0; flex: 1 1 16rem; min-width: 0; }
.naslov-klijenta h1 { margin: 0 0 0.2rem; font-size: 1.6rem; }
.naslov-klijenta .klijent-naloga span { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--pico-muted-color); }
.naslov-klijenta .klijent-naloga .ikona { width: 0.95rem; height: 0.95rem; }
.naslov-klijenta .radnje-naloga > [role="button"], .radnje-vozila > [role="button"] {
  display: inline-flex; align-items: center; gap: 0.4rem; height: 2.3rem; margin: 0; padding: 0 0.85rem; font-size: 0.9rem; white-space: nowrap;
}
.naslov-klijenta .radnje-naloga .ikona, .radnje-vozila .ikona { width: 1rem; height: 1rem; }
.klijent-mreza { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.25rem; align-items: start; }
.klijent-vozila, .klijent-strana { min-width: 0; }
.klijent-strana { position: sticky; top: 1rem; }
.klijent-mreza article { margin-bottom: 1.25rem; }
.naslov-sekcije { display: flex; align-items: center; gap: 0.5rem; height: 2rem; margin: 0 0 0.75rem; font-size: 1.05rem; line-height: 1; }
/* Bočna kolona počinje u visini prve kartice vozila (ispod naslova Vozila). */
@media (min-width: 1024px) { .klijent-strana { margin-top: 2.75rem; } }
.brojka {
  padding: 0 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 500; line-height: 1.5;
  background: var(--pico-card-sectioning-background-color); color: var(--pico-muted-color); box-shadow: inset 0 0 0 1px var(--pico-muted-border-color);
}
.kartica-vozila { padding-bottom: 0.5rem; }
.kartica-vozila > header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; }
.glava-vozila { display: flex; align-items: center; gap: 0.9rem; min-width: 0; flex: 1 1 18rem; }
.glava-vozila h3 { margin: 0; font-size: 1.1rem; }
.glava-vozila .opis-reda > span, .glava-vozila .ranije { display: block; }
.glava-vozila .ranije { font-size: 0.8rem; color: var(--pico-muted-color); }
.kartica-vozila .tablica.velika { font-size: 1.1rem; }
.radnje-vozila { display: flex; align-items: center; gap: 0.4rem; }
.radnje-vozila .dugme-ikona { width: 2.3rem; height: 2.3rem; }
dl.podaci-vozila {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.6rem 1.25rem;
  margin: 0 0 1rem; padding: 0 0 1rem; border-bottom: 1px solid var(--pico-muted-border-color); font-size: 0.9rem;
}
.podaci-vozila dt { margin: 0; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--pico-muted-color); }
.podaci-vozila dd { margin: 0.1rem 0 0; color: var(--pico-h1-color); }
.podaci-vozila .sasija dd { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.85rem; letter-spacing: 0.02em; word-break: break-all; }
.podaci-vozila .napomena-vozila { grid-column: 1 / -1; }
.podaci-vozila .napomena-vozila dd { white-space: pre-line; }
.istorija-vozila h4 { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.25rem; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--pico-muted-color); }
.istorija-vozila .prazno { margin: 0.25rem 0 0.75rem; font-size: 0.9rem; }
.red-naloga {
  margin: 0 calc(var(--pico-block-spacing-horizontal) * -1); padding: 0.6rem var(--pico-block-spacing-horizontal);
  gap: 1rem; color: inherit; text-decoration: none !important;
}
.red-naloga .datum-reda { width: 5.6rem; }
.red-naloga .opis-reda { flex: 1; }
.red-naloga .opis-reda strong { font-size: 0.925rem; font-weight: 600; color: var(--pico-h1-color); }
.red-naloga .opis-reda span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.red-naloga .km-naloga { display: inline !important; font-weight: 400; color: var(--pico-muted-color); }
.red-naloga .oznaka { flex: none; font-size: 0.72rem; }
.red-naloga .iznos-naloga { flex: none; width: 6.5rem; text-align: right; font-weight: 600; color: var(--pico-h1-color); }
.k-kontakt dl.podaci dd a { color: var(--pico-primary); }
.k-kontakt h3 { margin: 1rem 0 0.3rem; padding-top: 0.9rem; border-top: 1px solid var(--pico-muted-border-color); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--pico-muted-color); }
.napomena-klijenta { white-space: pre-line; }
.k-sazetak dl.podaci { margin-bottom: 0; }

/* Forme klijenta i vozila: jedna kartica sa odjeljcima i dugmadima desno dolje. */
.forma-kartica { max-width: 52rem; }
.forma-kartica > article { margin-bottom: 1rem; }
.forma-kartica section { margin-bottom: 0; }
.forma-kartica section + section { margin-top: 0.5rem; padding-top: 1.25rem; border-top: 1px solid var(--pico-muted-border-color); }
.forma-kartica h2 { margin-bottom: 0.9rem; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--pico-muted-color); }
.forma-kartica h2 small { margin-left: 0.4rem; font-size: 0.75rem; font-weight: 400; text-transform: none; letter-spacing: 0; }
.forma-kartica label { font-size: 0.9rem; }
.dugmad-forme { display: flex; justify-content: flex-end; gap: 0.6rem; }
.forma-kartica .dugmad-forme > * { flex: none; width: auto; margin: 0; min-width: 8rem; }
.traka-saobracajne {
  max-width: 52rem; margin-bottom: 1rem; padding: 1rem var(--pico-block-spacing-horizontal);
  border: 1px dashed var(--pico-muted-border-color); border-radius: var(--pico-border-radius); background: var(--pico-card-background-color);
}
.glava-saobracajne { display: flex; align-items: flex-start; gap: 0.9rem; margin-bottom: 0.9rem; }
.glava-saobracajne strong { color: var(--pico-h1-color); }
.glava-saobracajne p { margin: 0.1rem 0 0; font-size: 0.875rem; color: var(--pico-muted-color); }
.ikona-kocka.istaknuta { background: var(--oznaka-pozadina); color: var(--oznaka-tekst); }
.traka-saobracajne .red-dugmadi > * { min-height: 2.75rem; }
.izbor-fajla {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; margin: 0; cursor: pointer;
  --pico-color: var(--pico-h1-color); --pico-background-color: transparent; --pico-border-color: var(--pico-secondary-border);
  max-width: 100%;
}
.izbor-fajla span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.izbor-fajla .ikona { width: 1.1rem; height: 1.1rem; flex: none; }
.izbor-fajla:has(input:focus-visible) { outline: 2px solid var(--pico-primary); outline-offset: 2px; }
.traka-saobracajne button:disabled { opacity: 0.45; }
.info-plocica {
  display: flex; gap: 0.5rem; margin: 0 0 1rem; padding: 0.55rem 0.75rem; border-radius: var(--pico-border-radius);
  background: var(--pico-card-sectioning-background-color); font-size: 0.8rem; color: var(--pico-muted-color);
}
.info-plocica .ikona { flex: none; width: 1rem; height: 1rem; margin-top: 0.1rem; }
input[name="registracija"], input[name="broj_sasije"] { text-transform: uppercase; }
input[name="registracija"] { font-family: var(--naslovna-slova, inherit); font-weight: 600; letter-spacing: 0.06em; }
input[name="broj_sasije"] { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: 0.03em; }
.dugmad-forme { max-width: 52rem; }
.dugmad-forme button { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; }
.dugmad-forme .ikona { width: 1.05rem; height: 1.05rem; }
.oznaka.sa-ikonom { display: inline-flex; align-items: center; gap: 0.35rem; }
.oznaka.sa-ikonom .ikona { width: 0.9rem; height: 0.9rem; }

/* Spisak: pretraga ostaje uz vrh dok se skrola. */
.pretraga-ljepljiva { position: sticky; top: 0; z-index: 15; margin: 0 -0.5rem; padding: 0.5rem 0.5rem 0.25rem; background: var(--pico-background-color); }
.status-telefon { display: none; }
.samo-telefon-flex { display: none !important; }
.dugme-plutajuce {
  position: fixed; right: 1rem; bottom: calc(var(--visina-donje-trake) + 1rem); z-index: 25;
  align-items: center; gap: 0.5rem; height: 3.4rem; padding: 0 1.25rem; border-radius: 999px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
}
.dugme-plutajuce .ikona { width: 1.2rem; height: 1.2rem; }

/* Istorija vozila: dugme Prikaži sve ispod spiska. */
.prikazi-sve {
  display: flex; align-items: center; justify-content: space-between; width: calc(100% + var(--pico-block-spacing-horizontal) * 2);
  margin: 0 calc(var(--pico-block-spacing-horizontal) * -1) -0.5rem; padding: 0.8rem var(--pico-block-spacing-horizontal);
  border: none; border-top: 1px solid var(--pico-muted-border-color); border-radius: 0 0 var(--pico-border-radius) var(--pico-border-radius);
  background: transparent; color: var(--pico-color); font-size: 0.9rem; font-weight: 500; text-align: left;
}
.istorija-vozila button.prikazi-sve { margin-bottom: -0.5rem; color: var(--pico-h1-color); box-shadow: none; }
.prikazi-sve:hover { background: var(--pico-card-sectioning-background-color); }
.prikazi-sve .ikona { width: 1rem; height: 1rem; color: var(--pico-muted-color); transition: transform 0.15s; }
.prikazi-sve[aria-expanded="true"] .ikona { transform: rotate(180deg); }
.stariji-nalozi { border-top: 1px solid var(--pico-muted-border-color); }
.procitano { max-width: 52rem; }

@media (max-width: 1023px) {
  .klijent-mreza { display: flex; flex-direction: column; gap: 0; }
  .klijent-vozila, .klijent-strana { display: contents; }
  .klijent-mreza > * > * { width: 100%; }
  .k-sazetak { order: 1; }
  .naslov-sekcije { order: 2; }
  .kartica-vozila, .klijent-vozila > .traka-dobavljaca { order: 3; }
  .k-kontakt { order: 4; }
  .glava-spiska, .red-klijenta { grid-template-columns: 2.4rem minmax(0, 1.5fr) 9rem minmax(0, 1.6fr) 1rem; }
  .glava-spiska > :nth-child(5), .red-klijenta .posjeta { display: none; }
}

/* Telefon: klijent kao kartica (ime i telefon gore, vozila ispod). */
@media (max-width: 767px) {
  .pretraga-klijenata input[type="search"] { height: 2.9rem; font-size: 1rem; }
  .red-klijenta {
    grid-template-columns: 2.4rem minmax(0, 1fr) auto;
    grid-template-areas: "avatar ime strelica" "avatar telefon strelica" "avatar vozila strelica";
    gap: 0.15rem 0.8rem; align-items: start; padding-block: 0.85rem;
  }
  .red-klijenta .avatar { grid-area: avatar; }
  .red-klijenta .opis-reda { grid-area: ime; display: flex; align-items: baseline; gap: 0.5rem; }
  .red-klijenta .opis-reda span { font-size: 0.8rem; }
  .red-klijenta .telefon-klijenta { grid-area: telefon; }
  .red-klijenta .vozila-u-redu { grid-area: vozila; margin-top: 0.35rem; }
  .red-klijenta .strelica-reda { grid-area: strelica; align-self: center; }
  .red-klijenta .posjeta { display: none; }

  .naslov-klijenta { gap: 0.6rem 0.85rem; }
  .naslov-klijenta h1 { font-size: 1.3rem; }
  .avatar.velika { width: 3rem; height: 3rem; font-size: 1rem; }
  .naslov-klijenta .radnje-naloga { width: 100%; margin-left: 0; display: grid; grid-template-columns: 1fr 1fr; }
  .naslov-klijenta .radnje-naloga > .oznaka { grid-column: 1 / -1; justify-self: start; }
  .naslov-klijenta .radnje-naloga > [role="button"] { justify-content: center; }
  .radnje-vozila { width: 100%; }
  .radnje-vozila > [role="button"]:first-child { flex: 1; justify-content: center; }
  .glava-vozila { flex-wrap: wrap; gap: 0.5rem 0.75rem; }
  dl.podaci-vozila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .red-naloga { flex-wrap: wrap; gap: 0.15rem 0.75rem; }
  .red-naloga .datum-reda { width: auto; order: 1; font-size: 0.8rem; }
  .red-naloga .oznaka { order: 2; }
  .red-naloga .iznos-naloga { order: 3; margin-left: auto; width: auto; }
  .red-naloga .opis-reda { order: 4; flex-basis: 100%; }
  .forma-kartica .dugmad-forme > * { flex: 1; min-width: 0; }
  .traka-saobracajne { flex-wrap: wrap; }
  .traka-saobracajne button { width: 100%; }
}
@media (max-width: 767px) {
  .forma-kartica .grid.polja-cetiri { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0.75rem; }
  .forma-kartica .grid.polja-cetiri > span:empty { display: none; }
}

/* Telefon (v0): kartica klijenta sa statusom desno, plutajuće dugme, ljepljiva dugmad forme. */
@media (max-width: 767px) {
  .samo-telefon-flex { display: inline-flex !important; }
  main.container:has(.dugme-plutajuce) { padding-bottom: calc(var(--visina-donje-trake) + 5.5rem); }
  .red-klijenta { grid-template-columns: 2.4rem minmax(0, 1fr) auto; grid-template-areas: "avatar ime status" "avatar telefon telefon" "avatar vozila vozila"; }
  .red-klijenta .status-telefon { display: inline-block; grid-area: status; align-self: start; font-size: 0.72rem; }
  .red-klijenta .strelica-reda { display: none; }
  .red-klijenta .opis-reda { display: block; }
  .red-klijenta .opis-reda span { display: block; }
  .telefon-klijenta a { padding: 0.35rem 0; font-size: 1rem; }
  .ime-klijenta strong { font-size: 1.05rem; }

  .kartica-vozila > header { flex-direction: column; align-items: stretch; }
  .glava-vozila { flex: none; flex-direction: column; align-items: flex-start; }
  .radnje-vozila > [role="button"], .radnje-vozila .dugme-ikona { height: 2.75rem; }
  .radnje-vozila .dugme-ikona { width: 2.75rem; }
  .naslov-klijenta .radnje-naloga > [role="button"] { height: 2.75rem; }
  .red-naloga { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "datum status iznos" "opis opis iznos"; gap: 0.15rem 0.6rem; align-items: center; }
  .red-naloga .datum-reda { grid-area: datum; }
  .red-naloga .oznaka { grid-area: status; justify-self: start; }
  .red-naloga .opis-reda { grid-area: opis; }
  .red-naloga .iznos-naloga { grid-area: iznos; font-family: var(--naslovna-slova, inherit); font-size: 1.1rem; }
  .k-sazetak .ukupno { font-size: 2.2rem; }

  .forma-kartica .dugmad-forme {
    position: sticky; bottom: var(--visina-donje-trake); z-index: 20; margin: 0 -1rem; padding: 0.7rem 1rem;
    border-top: 1px solid var(--pico-muted-border-color); background: var(--pico-card-background-color); box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.08);
  }
  .forma-kartica .dugmad-forme > button { flex: 2; }
  .traka-saobracajne .red-dugmadi { flex-direction: column; }
  .traka-saobracajne .red-dugmadi > * { width: 100%; }
  .glava-saobracajne { gap: 0.75rem; }
}
.istorija-vozila { margin-bottom: 0; }

/* Novi klijent: prekidač lice/firma, mogući duplikati, tok prijema iz narudžbe. */
.glava-odjeljka { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 0.9rem; }
.glava-odjeljka h2 { margin-bottom: 0; }
.forma-klijenta .prekidac span { display: inline-flex; align-items: center; gap: 0.35rem; }
.forma-klijenta .prekidac .ikona { width: 0.95rem; height: 0.95rem; }
.forma-klijenta .samo-firma { display: none; }
.forma-klijenta.firma .samo-firma { display: revert; }
.forma-klijenta.firma .samo-lice { display: none; }
.forma-klijenta section.samo-firma { margin-top: 0.5rem; padding-top: 1.25rem; border-top: 1px solid var(--pico-muted-border-color); }
.forma-klijenta.firma section.samo-firma { display: block; }
.slicni-klijenti {
  margin-bottom: var(--pico-spacing); padding: 0.75rem 1rem; border-radius: var(--pico-border-radius);
  background: var(--upozorenje-pozadina); color: var(--upozorenje-tekst); box-shadow: inset 0 0 0 1px var(--upozorenje-okvir);
}
.slicni-klijenti p { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.35rem; }
.slicni-klijenti .ikona { width: 1rem; height: 1rem; }
.slicni-klijenti ul { margin: 0; padding-left: 1.4rem; }
.slicni-klijenti li { margin-bottom: 0.15rem; list-style: disc; }
.slicni-klijenti a { font-weight: 600; }
.slicni-klijenti small { color: inherit; opacity: 0.85; }
.koraci-narudzbe { margin-top: -0.25rem; }
.kartica-narudzbe {
  display: flex; align-items: flex-start; gap: 0.9rem; max-width: 52rem; margin-bottom: 1rem; padding: 0.9rem var(--pico-block-spacing-horizontal);
  border-radius: var(--pico-border-radius); background: var(--pico-card-background-color); border-left: 4px solid var(--pico-primary);
  box-shadow: var(--pico-card-box-shadow);
}
.kartica-narudzbe strong { color: var(--pico-h1-color); }
.kartica-narudzbe p { margin: 0.15rem 0 0; font-size: 0.9rem; }
.kartica-narudzbe .opis-narudzbe { color: var(--pico-muted-color); font-style: italic; }
/* Novi radni nalog: vozilo na vrhu, alati ispod polja. */
.vozilo-naloga {
  display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1rem; padding: 0.9rem var(--pico-block-spacing-horizontal);
  border-radius: var(--pico-border-radius); background: var(--pico-card-background-color); box-shadow: var(--pico-card-box-shadow);
}
.vozilo-naloga > div { flex: 1; min-width: 0; }
.vozilo-naloga strong { color: var(--pico-h1-color); }
.vozilo-naloga p { margin: 0.1rem 0 0; font-size: 0.9rem; color: var(--pico-muted-color); }
.forma-kartica .alati-polja { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: -0.5rem 0 var(--pico-spacing); }
.forma-kartica .alati-polja:empty { display: none; }
.forma-kartica .alati-polja > * { width: auto; margin: 0; }
.forma-kartica .alati-polja select { flex: 1; min-width: 12rem; }
.forma-kartica .redovan-servis { margin-bottom: 0; }
.forma-kartica .objasnjenje-servisa { display: block; margin: 0.35rem 0 0; color: var(--pico-muted-color); }
.forma-kartica .uredi-ceste { margin: -0.5rem 0 0; }
@media (min-width: 768px) {
  .forma-kartica .grid.polja-tri { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .glava-odjeljka { flex-direction: column; align-items: stretch; }
  .forma-klijenta .prekidac { display: flex; }
  .forma-klijenta .prekidac { align-items: stretch; }
  .forma-klijenta .prekidac label { display: flex; flex: 1; width: auto; margin: 0 !important; }
  .forma-klijenta .prekidac span { flex: 1; padding: 0.4rem 0.8rem; }
  .forma-kartica .dugmad-forme > .bez-telefona { display: none; }
  .forma-kartica .dugmad-forme > button { white-space: nowrap; }
  .forma-klijenta .prekidac span { justify-content: center; }
  .forma-kartica .dugmad-forme > button.outline { flex: 1; }
  .koraci-narudzbe li:not(.trenutni) .naziv-koraka { display: inline; }
}

/* v0 (Novi klijent): forma centrirana, na telefonu traka sa dugmadima umjesto donje navigacije. */
main.container:has(.forma-kartica) { max-width: 54rem; }
.forma-kartica, .traka-saobracajne, .kartica-narudzbe, .procitano, .dugmad-forme { max-width: none; }
.forma-kartica .polje-jedinica { position: relative; }
.forma-kartica .polje-jedinica input { padding-right: 3rem; }
.forma-kartica .polje-jedinica > span { position: absolute; right: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--pico-muted-color); font-size: 0.9rem; pointer-events: none; }
.forma-kartica .polje-jedinica input[aria-invalid] + span { right: 2.6rem; }
.forma-kartica .preklopnik-servisa { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 0.9rem; border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); background: var(--pico-card-sectioning-background-color); cursor: pointer; }
.forma-kartica .preklopnik-servisa input { flex: none; margin: 0.15rem 0 0; }
.forma-kartica .preklopnik-servisa strong { display: block; font-weight: 500; color: var(--pico-h1-color); }
.forma-kartica .preklopnik-servisa small { display: block; margin-top: 0.15rem; color: var(--pico-muted-color); }
.vozilo-naloga .desno-vozila { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; }
.vozilo-naloga .desno-vozila a { font-size: 0.8rem; }
.iz-narudzbe {
  display: flex; align-items: center; gap: 0.6rem; width: 100%; margin-bottom: 1rem; padding: 0.6rem 0.9rem; text-align: left;
  border: 1px solid var(--upozorenje-okvir); border-radius: var(--pico-border-radius); background: var(--upozorenje-pozadina); color: var(--upozorenje-tekst); font-size: 0.9rem;
}
.iz-narudzbe:hover { filter: brightness(0.97); }
.iz-narudzbe > span:first-of-type { flex: 1; }
.iz-narudzbe .ikona { width: 1rem; height: 1rem; }
.iz-narudzbe .popuni { font-weight: 700; }
.slicni-klijenti .savjet { display: block; margin-top: 0.4rem; font-size: 0.8rem; }
.brojac-cifara { color: var(--pico-muted-color); }
@media (max-width: 767px) {
  body:has(.forma-kartica > .dugmad-forme) .donja-traka { display: none; }
  body:has(.forma-kartica > .dugmad-forme) main.container { padding-bottom: 2rem; }
  .forma-kartica .dugmad-forme { bottom: 0; padding-bottom: calc(0.7rem + env(safe-area-inset-bottom)); }
  .vozilo-naloga .tablica { display: inline-flex; }
  .vozilo-naloga { align-items: flex-start; }
}

/* Nalozi (v0): prekidač prikaza sa brojem, spisak naloga kao na Klijentima. */
.prikazi-naloga { display: flex; justify-content: flex-start; gap: 0.5rem; margin-bottom: 0.25rem; }
.prikazi-naloga a {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3rem; padding: 0 1rem;
  border: 1px solid var(--pico-muted-border-color); border-radius: calc(var(--pico-border-radius) * 1.5);
  background: var(--pico-card-background-color); color: var(--pico-muted-color);
  font-size: 1rem; font-weight: 500; text-decoration: none;
}
.prikazi-naloga a:hover { color: var(--pico-h1-color); border-color: var(--pico-primary); }
.prikazi-naloga a.prikaz-bez-racuna { border-color: var(--upozorenje-okvir); color: var(--upozorenje-tekst); }
.prikazi-naloga a.prikaz-otvoreni[aria-current="page"] { background: var(--oznaka-pozadina); color: var(--oznaka-tekst); border-color: var(--pico-primary); font-weight: 600; }
.prikazi-naloga a.prikaz-bez-racuna[aria-current="page"] { background: var(--upozorenje-pozadina); color: var(--upozorenje-tekst); border-color: var(--upozorenje-tekst); font-weight: 600; }
.prikazi-naloga .ikona { width: 1.05rem; height: 1.05rem; }
.broj-prikaza {
  min-width: 1.6rem; padding: 0.05rem 0.5rem; border-radius: 999px; text-align: center;
  font-size: 0.78rem; font-weight: 700; background: var(--pico-card-sectioning-background-color); color: var(--pico-h1-color);
}
.spisak-naloga { margin-top: 0; }

.spisak-naloga .glava-naloga, .red-spiska-naloga {
  grid-template-columns: 5.5rem minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, 1.7fr) 6rem 7.5rem 1rem;
}
.spisak-naloga.sa-racunom .glava-naloga, .sa-racunom .red-spiska-naloga {
  grid-template-columns: 5.5rem minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, 1.5fr) 6rem 7rem 7.5rem 1rem;
}
.red-spiska-naloga[hidden] { display: none; }
.red-spiska-naloga .broj-naloga span, .red-spiska-naloga .klijent-naloga-red > * { display: block; }
.red-spiska-naloga .broj-naloga span { font-size: 0.8rem; color: var(--pico-muted-color); }
.red-spiska-naloga .broj-naloga strong { font-size: 1rem; }
.red-spiska-naloga .vozilo-u-redu { flex-direction: column; align-items: flex-start; gap: 0.2rem; font-size: 0.85rem; color: var(--pico-muted-color); }
.red-spiska-naloga .vozilo-u-redu .model { max-width: 100%; }
.klijent-naloga-red { min-width: 0; }
.klijent-naloga-red strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--pico-h1-color); }
.telefon-reda { position: relative; z-index: 1; display: inline-flex !important; align-items: center; gap: 0.3rem; font-size: 0.85rem; white-space: nowrap; }
.telefon-reda .ikona { width: 0.85rem; height: 0.85rem; }
.opis-kvara { min-width: 0; font-size: 0.925rem; }
.tekst-kvara { white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.opis-kvara small { display: block; margin-top: 0.1rem; font-size: 0.78rem; color: var(--pico-muted-color); }
.trajanje .oznaka { font-size: 0.75rem; white-space: nowrap; }
.trajanje .oznaka.greska { box-shadow: inset 0 0 0 1px currentColor; }
.dno-reda { display: contents; }
.iznos-reda { text-align: right; font-weight: 600; white-space: nowrap; color: var(--pico-h1-color); }
.iznos-reda.nula { color: var(--pico-muted-color); font-weight: 500; }
.izdaj-racun {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  margin: 0; padding: 0.4rem 0.7rem; font-size: 0.85rem; white-space: nowrap;
}
.izdaj-racun .ikona { width: 0.95rem; height: 0.95rem; }
.spisak-naloga #redovi-naloga > .prazno { margin: 0; padding: 2rem var(--pico-block-spacing-horizontal); text-align: center; }
.podnozje-spiska {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem;
  margin: 0; padding: 0.85rem var(--pico-block-spacing-horizontal);
  border-top: 1px solid var(--pico-muted-border-color); background: var(--pico-card-sectioning-background-color);
  font-size: 0.9rem; color: var(--pico-muted-color);
}
.podnozje-spiska strong { margin-left: 0.4rem; font-family: var(--naslovna-slova, inherit); font-size: 1.25rem; color: var(--pico-h1-color); }
.prazan-spisak { padding: 2.5rem 1rem; text-align: center; }
.prazan-spisak > .ikona { width: 2.5rem; height: 2.5rem; color: var(--uspjeh-tekst); }
.prazan-spisak p { margin: 0.5rem 0 0; }
.prazan-spisak [role="button"] { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 1rem; }
.prazan-spisak [role="button"] .ikona { width: 1rem; height: 1rem; }

@media (max-width: 1199px) {
  .spisak-naloga .glava-naloga, .red-spiska-naloga { grid-template-columns: 5rem minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 1.3fr) 5.5rem 6.5rem 1rem; gap: 0.75rem; }
  .spisak-naloga.sa-racunom .glava-naloga, .sa-racunom .red-spiska-naloga { grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) 5.5rem 6.5rem 7rem 1rem; }
}
@media (max-width: 991px) {
  .spisak-naloga .glava-naloga, .red-spiska-naloga { grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 1fr) 5.5rem 6.5rem 1rem; }
  .spisak-naloga.sa-racunom .glava-naloga, .sa-racunom .red-spiska-naloga { grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 1fr) 5.5rem 6.5rem 7rem 1rem; }
  .spisak-naloga .glava-naloga > :nth-child(4), .red-spiska-naloga .opis-kvara { display: none; }
}

/* Telefon (v0): svaka kartica ista — broj i dani, vozilo, klijent i telefon, kvar, dno sa iznosom. */
@media (max-width: 767px) {
  .prikazi-naloga { display: grid; grid-template-columns: 1fr 1fr; }
  .prikazi-naloga a { padding-inline: 0.5rem; }
  main.container:has(.spisak-naloga) { padding-bottom: calc(var(--visina-donje-trake) + 6rem); }
  .red-spiska-naloga, .sa-racunom .red-spiska-naloga {
    display: flex; flex-direction: column; align-items: stretch; gap: 0.6rem; padding-block: 1rem;
  }
  .red-spiska-naloga .broj-naloga { display: flex; align-items: baseline; gap: 0.5rem; padding-right: 5.5rem; }
  .red-spiska-naloga .broj-naloga strong { font-size: 1.25rem; }
  .red-spiska-naloga .broj-naloga span { font-size: 0.875rem; }
  .red-spiska-naloga .trajanje { position: absolute; top: 1rem; right: var(--pico-block-spacing-horizontal); }
  .red-spiska-naloga .vozilo-u-redu { flex-direction: row; align-items: center; gap: 0.6rem; font-size: 1rem; color: var(--pico-h1-color); }
  .red-spiska-naloga .klijent-naloga-red { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; }
  .red-spiska-naloga .klijent-naloga-red strong { font-size: 1rem; }
  .red-spiska-naloga .telefon-reda {
    flex: none; min-height: 2.5rem; padding: 0 0.75rem; border-radius: var(--pico-border-radius);
    background: color-mix(in srgb, var(--pico-primary) 12%, transparent); color: var(--pico-primary); font-size: 0.95rem; text-decoration: none;
  }
  .red-spiska-naloga .opis-kvara { display: block; font-size: 0.95rem; }
  .red-spiska-naloga .opis-kvara small { font-size: 0.8rem; }
  .dno-reda {
    display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 0.75rem;
    padding-top: 0.75rem; border-top: 1px solid var(--pico-muted-border-color);
  }
  .red-spiska-naloga .iznos-reda { font-family: var(--naslovna-slova, inherit); font-size: 1.4rem; font-weight: 700; }
  .izdaj-racun { min-height: 2.5rem; padding-inline: 0.9rem; font-size: 0.925rem; }
  .red-spiska-naloga .strelica-reda { display: none; }
  .podnozje-spiska { flex-wrap: nowrap; padding-block: 1rem; }
  .podnozje-spiska > span { white-space: nowrap; }
  .podnozje-spiska strong { font-size: 1.3rem; }
}

/* ---------- Računi (v0): zbirovi, prekidač sa brojem, redovi kao na Nalozima ---------- */
.zbirovi-racuna { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.zbir-racuna {
  display: flex; flex-direction: column; gap: 0.15rem; padding: 0.9rem 1rem;
  border: 1px solid var(--pico-muted-border-color); border-radius: calc(var(--pico-border-radius) * 1.5);
  background: var(--pico-card-background-color); color: var(--pico-muted-color); text-decoration: none;
}
.zbir-racuna.ceka-naplatu { order: 3; }
.zbir-racuna .glava-zbira {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
}
.zbir-racuna .glava-zbira .ikona { width: 0.9rem; height: 0.9rem; }
.zbir-racuna strong {
  font-family: var(--naslovna-slova, inherit); font-size: 1.75rem; font-weight: 700; line-height: 1.2;
  font-variant-numeric: tabular-nums; color: var(--pico-h1-color); white-space: nowrap;
}
.zbir-racuna small { font-size: 0.85rem; }
.zbir-racuna.naplaceno strong { color: var(--uspjeh-tekst); }
a.zbir-racuna:hover { border-color: var(--pico-primary); }
.zbir-racuna.ima-duga { background: var(--upozorenje-pozadina); border-color: var(--upozorenje-okvir); }
.zbir-racuna.ima-duga .glava-zbira, .zbir-racuna.ima-duga strong { color: var(--upozorenje-tekst); }
.zbir-racuna.ima-duga:hover { border-color: var(--upozorenje-tekst); }

.prikazi-racuna a { min-width: 8rem; }
.prikazi-racuna a[aria-current="page"] { background: var(--oznaka-pozadina); color: var(--oznaka-tekst); border-color: var(--pico-primary); font-weight: 600; }
.prikazi-racuna .prikaz-neplaceni .broj-prikaza { background: var(--upozorenje-pozadina); color: var(--upozorenje-tekst); box-shadow: inset 0 0 0 1px var(--upozorenje-okvir); }

.filter-racuna { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; }
.filter-racuna .pretraga-klijenata { flex: 1; margin: 0; }
.filter-racuna .izbor-perioda { flex: none; width: 14rem; margin: 0; }
.filter-racuna select { height: 3.1rem; margin: 0; }
.filter-klijenta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0 0 0.75rem; }
.ukloni-filter { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.9rem; }
.ukloni-filter .ikona { width: 0.9rem; height: 0.9rem; }

.spisak-racuna { margin-top: 0.25rem; }
.spisak-racuna .glava-racuna, .red-racuna {
  grid-template-columns: 6rem 6.5rem minmax(0, 1.6fr) 6.5rem 8.5rem 7.5rem 9rem 11rem;
  gap: 0.75rem;
}
.po-klijentima .glava-racuna, .red-prometa { grid-template-columns: minmax(0, 1.6fr) 5rem 9rem 9rem 8rem 1rem; }
.red-racuna[hidden] { display: none; }
.red-racuna .broj-racuna strong { font-size: 1rem; color: var(--pico-primary); font-variant-numeric: tabular-nums; }
.red-racuna .datum-telefon { display: none; }
.datum-racuna, .zadnji-racun, .broj-prometa { font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.zadnji-racun, .broj-prometa { text-align: right; white-space: nowrap; color: var(--pico-muted-color); }
.kupac-racuna { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--pico-h1-color); }
.iznos-i-nacin, .dno-racuna { display: contents; }
.nacin-placanja { font-size: 0.9rem; color: var(--pico-muted-color); }
.iznos-racuna {
  text-align: right; white-space: nowrap; font-family: var(--naslovna-slova, inherit); font-size: 1.15rem; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--pico-h1-color);
}
.preostalo-racuna { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--pico-muted-color); }
.duguje { color: var(--upozorenje-tekst) !important; font-weight: 600; }
.status-racuna { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.status-racuna .oznaka { font-size: 0.75rem; white-space: nowrap; }
.status-racuna .oznaka.greska { box-shadow: inset 0 0 0 1px currentColor; }
.preostalo-telefon, .samo-telefon-oznaka { display: none; }
.radnja-racuna { text-align: right; }
.evidentiraj-uplatu {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 0.4rem;
  margin: 0; padding: 0.35rem 0.7rem; font-size: 0.85rem; white-space: nowrap;
}
.evidentiraj-uplatu .ikona { width: 0.95rem; height: 0.95rem; }
.red-racuna.storniran > :not(.dno-racuna), .red-racuna.storniran .status-racuna { opacity: 0.6; }
.red-racuna.storniran .iznos-racuna { text-decoration: line-through; color: var(--pico-muted-color); }
.spisak-racuna #redovi-racuna > .prazno { margin: 0; padding: 2rem var(--pico-block-spacing-horizontal); text-align: center; }
a.prikazi-starije {
  justify-content: center; gap: 0.5rem; width: 100%; margin: 0; border-radius: 0;
  color: var(--pico-primary); text-decoration: none;
}
.zbir-podnozja { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1.5rem; }
.napomena-prometa { margin-top: -0.5rem; }

@media (max-width: 1199px) {
  .spisak-racuna .glava-racuna, .red-racuna { grid-template-columns: 5.5rem 6rem minmax(0, 1fr) 8rem 7rem 8.5rem 10.5rem; }
  .spisak-racuna .glava-racuna > :nth-child(4), .red-racuna .nacin-placanja { display: none; }
  .po-klijentima .glava-racuna, .red-prometa { grid-template-columns: minmax(0, 1.4fr) 4.5rem 8.5rem 8.5rem 7rem 1rem; }
}
@media (max-width: 991px) {
  .spisak-racuna .glava-racuna, .red-racuna { grid-template-columns: 5.5rem minmax(0, 1fr) 8rem 7rem 8.5rem 10.5rem; }
  .spisak-racuna .glava-racuna > :nth-child(2), .red-racuna .datum-racuna { display: none !important; }
  .red-racuna .datum-telefon { display: block; font-size: 0.8rem; color: var(--pico-muted-color); }
}

/* Telefon (v0): Čeka naplatu preko cijele širine, kartice računa sa dnom (status, uplata). */
@media (max-width: 767px) {
  .zbirovi-racuna { grid-template-columns: 1fr 1fr; }
  .zbir-racuna.ceka-naplatu { order: -1; grid-column: 1 / -1; }
  .zbir-racuna.ceka-naplatu strong { font-size: 2.1rem; }
  .zbir-racuna strong { font-size: 1.25rem; }
  .prikazi-racuna { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.35rem; }
  .prikazi-racuna a { min-width: 0; padding-inline: 0.35rem; font-size: 0.9rem; gap: 0.35rem; }
  .filter-racuna { flex-direction: column; }
  .filter-racuna .izbor-perioda { width: 100%; }
  .red-racuna, .red-prometa {
    display: flex; flex-direction: column; align-items: stretch; gap: 0.35rem; padding-block: 0.85rem;
  }
  .red-racuna .broj-racuna { display: flex; justify-content: space-between; align-items: baseline; }
  .red-racuna .broj-racuna strong { font-size: 1.15rem; }
  .red-racuna .datum-telefon { display: inline; font-size: 0.875rem; }
  .red-racuna .kupac-racuna { font-weight: 600; }
  .iznos-i-nacin { display: flex; justify-content: space-between; align-items: baseline; }
  .red-racuna .nacin-placanja { display: inline !important; }
  .red-racuna .iznos-racuna { font-size: 1.5rem; }
  .dno-racuna {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem;
    padding-top: 0.6rem; border-top: 1px solid var(--pico-muted-border-color);
  }
  .preostalo-telefon { display: inline; font-size: 0.875rem; font-weight: 600; color: var(--upozorenje-tekst); }
  .evidentiraj-uplatu { min-height: 2.5rem; padding-inline: 0.9rem; font-size: 0.925rem; }
  .red-racuna .radnja-racuna:empty { display: none; }
  .red-prometa {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.2rem 0.75rem;
    grid-template-areas: "ime iznos" "broj preostalo" "zadnji preostalo";
  }
  .red-prometa .kupac-racuna { grid-area: ime; }
  .red-prometa .iznos-racuna { grid-area: iznos; font-size: 1.3rem; }
  .red-prometa .broj-prometa { grid-area: broj; text-align: left; }
  .red-prometa .zadnji-racun { grid-area: zadnji; text-align: left; }
  .red-prometa .preostalo-racuna { grid-area: preostalo; align-self: center; font-size: 0.9rem; }
  .red-prometa .strelica-reda { display: none; }
  .samo-telefon-oznaka { display: inline; }
  .podnozje-spiska .zbir-podnozja { gap: 0.25rem 1rem; }
}

/* ---------- Narudžbe ---------- */
.tekst-upozorenja { color: var(--upozorenje-tekst); font-weight: 600; }
.upozorenje-kartica { border-left: 4px solid var(--upozorenje-okvir); }
.narudzbe-mreza {
  display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 0 1.25rem; align-items: start;
  grid-template-areas: "termini forma" "rijesene forma";
}
.termini-kolona { grid-area: termini; min-width: 0; }
.forma-narudzbe-kolona { grid-area: forma; position: sticky; top: 1rem; }
.narudzbe-mreza .rijesene { grid-area: rijesene; }
.kartica-termina { padding-bottom: 0.5rem; }
.kartica-termina > header, .forma-narudzbe > header { display: flex; flex-direction: column; gap: 0.2rem; }
.kartica-termina > header strong, .forma-narudzbe > header strong { display: inline-flex; align-items: center; gap: 0.5rem; }
.kartica-termina > header .ikona, .forma-narudzbe > header .ikona { width: 1.1rem; height: 1.1rem; }
.kartica-termina > header small { color: var(--pico-muted-color); }
.prosli-termini { border: 1px solid var(--upozorenje-okvir); }
.prosli-termini > header { background: var(--upozorenje-pozadina); color: var(--upozorenje-tekst); }
.prosli-termini > header strong, .prosli-termini > header small { color: var(--upozorenje-tekst); }
.dan-narudzbi { margin: 0 calc(var(--pico-block-spacing-horizontal) * -1); padding: 0.9rem var(--pico-block-spacing-horizontal) 0.4rem; border-bottom: 1px solid var(--pico-table-border-color); }
.dan-narudzbi:last-child { border-bottom: none; }
.dan-narudzbi h2.naziv-dana { margin-bottom: 0.5rem; }
.dan-narudzbi h2 span { font-weight: 500; }
.dan-narudzbi.danas h2.naziv-dana { color: var(--pico-primary); }
.dan-narudzbi .prazno { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.5rem; font-size: 0.9rem; }
.dan-narudzbi .prazno .ikona { width: 1rem; height: 1rem; }

/* Jedan termin: vrijeme, ko i šta, dugmad desno. */
.termin-narudzbe {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: 1rem; align-items: center;
  margin-bottom: 0.5rem; padding: 0.75rem 0.9rem;
  border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius);
  background: var(--pico-card-sectioning-background-color);
}
.prosli-termini .termin-narudzbe { margin-top: 0.75rem; margin-bottom: 0; }
.prosli-termini .termin-narudzbe + .termin-narudzbe { margin-top: 0.5rem; }
.vrijeme-termina { text-align: center; line-height: 1.2; }
.vrijeme-termina b { display: block; font-family: var(--naslovna-slova, inherit); font-size: 1.35rem; color: var(--pico-h1-color); font-variant-numeric: tabular-nums; }
.vrijeme-termina small { color: var(--pico-muted-color); font-size: 0.8rem; }
.danas .vrijeme-termina b { color: var(--pico-primary); }
.prosli .vrijeme-termina b { color: var(--upozorenje-tekst); }
.opis-termina p { margin: 0; line-height: 1.4; }
.opis-termina .ko-dolazi { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
.opis-termina .ko-dolazi strong { color: var(--pico-h1-color); }
.opis-termina .vozilo-u-redu { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.2rem; font-size: 0.9rem; color: var(--pico-muted-color); }
.posao-termina { display: flex; align-items: flex-start; gap: 0.35rem; margin-top: 0.3rem !important; font-size: 0.9rem; color: var(--pico-h1-color); }
.posao-termina .ikona { flex: none; width: 0.9rem; height: 0.9rem; margin-top: 0.2rem; color: var(--pico-muted-color); }
.kontakt-termina { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem; margin-top: 0.35rem !important; }
.podsjecen { font-size: 0.72rem; }
.radnje-termina { display: flex; align-items: center; gap: 0.4rem; }
.radnje-termina form { margin: 0; }
.radnje-termina button, .radnje-termina [role="button"] {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; width: auto; height: 2.4rem; margin: 0; padding: 0 0.75rem; font-size: 0.875rem; white-space: nowrap;
}
.radnje-termina .ikona { width: 1rem; height: 1rem; }
.podsjeti { display: flex; flex: none; gap: 0.3rem; }
.forma-dosao button { font-weight: 600; }
.vise-radnji > summary { height: 2.4rem; }
.meni-termina { width: 15rem; }
.meni-termina form + form { margin-top: 0.4rem; }
.meni-termina button { display: flex; justify-content: flex-start; }

/* Zadnje riješene: kratki redovi sa obojenim statusom. */
.rijesena { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; margin: 0 calc(var(--pico-block-spacing-horizontal) * -1); padding: 0.6rem var(--pico-block-spacing-horizontal); border-bottom: 1px solid var(--pico-table-border-color); }
.rijesena:last-child { border-bottom: none; }
.datum-rijesene { font-size: 0.875rem; color: var(--pico-h1-color); }
.datum-rijesene small { display: block; color: var(--pico-muted-color); }
.rijesena .opis-reda > span { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.rijesena .oznaka { font-size: 0.75rem; white-space: nowrap; text-decoration: none; }

/* Forma nove narudžbe (desno, ostaje na ekranu dok se skrola). */
.forma-narudzbe form > button[type="submit"] { display: flex; align-items: center; justify-content: center; gap: 0.4rem; width: 100%; margin: 0; }
.forma-narudzbe form > button .ikona { width: 1rem; height: 1rem; }
.termin-polja { grid-template-columns: 1fr 1fr !important; gap: 0.75rem; }
.termin-polja input { margin-bottom: 0.5rem; }
.brzi-dani { display: flex; gap: 0.35rem; margin-bottom: 1rem; }
.brzi-dani button { flex: 1; width: auto; margin: 0; padding: 0.3rem 0.4rem; font-size: 0.8rem; }
.brzi-dani button.izabran { background: var(--oznaka-pozadina); color: var(--oznaka-tekst); border-color: var(--pico-primary); font-weight: 600; }
.prekidac-klijenta { display: flex; margin-bottom: 0.75rem; }
.prekidac-klijenta label { flex: 1; }
.prekidac-klijenta span { display: flex; align-items: center; justify-content: center; gap: 0.35rem; }
.prekidac-klijenta .ikona { width: 0.95rem; height: 0.95rem; }
.forma-narudzbe fieldset { margin-bottom: 0.75rem; }
.forma-narudzbe fieldset[hidden] { display: none; }
.forma-narudzbe .pretraga-klijenata { margin-bottom: 0.5rem; }
.forma-narudzbe .pretraga-klijenata input[type="search"] { margin-bottom: 0; }
#vozila-narudzbe .vozila-klijenta { margin-bottom: 0.5rem; padding: 0.6rem 0.75rem; border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); }
#vozila-narudzbe .vozila-klijenta p { font-size: 0.9rem; }
#vozila-narudzbe .vozila-klijenta label { margin-bottom: 0.25rem; font-size: 0.9rem; }
.izabrano-vozilo { padding: 0.6rem 0.75rem; border: 1px solid var(--pico-primary); border-radius: var(--pico-border-radius); background: var(--oznaka-pozadina); }
.forma-narudzbe textarea { resize: vertical; }

.zatvori-panel, .dugme-nove-narudzbe { display: none !important; }
.forma-narudzbe > header { flex-direction: row; align-items: center; justify-content: space-between; }
.greska-forme { margin: 0 0 0.75rem; color: var(--greska-tekst); font-size: 0.9rem; }
.link-dugme { width: auto; margin: 0; padding: 0.2rem 0; border: none; background: none; color: var(--pico-primary); font-size: 0.875rem; }
.link-dugme:hover { background: none; text-decoration: underline; }
.nadjeni-klijenti { margin: 0 0 0.75rem; padding: 0; list-style: none; border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); overflow: hidden; }
.nadjeni-klijenti li { margin: 0; list-style: none; border-bottom: 1px solid var(--pico-muted-border-color); }
.nadjeni-klijenti li:last-child { border-bottom: none; }
.izaberi-klijenta { display: block; width: 100%; margin: 0; padding: 0.6rem 0.8rem; border: none; border-radius: 0; background: transparent; color: var(--pico-h1-color); text-align: left; }
.izaberi-klijenta:hover, .izaberi-klijenta:focus-visible { background: var(--pico-card-sectioning-background-color); }
.izaberi-klijenta strong, .izaberi-klijenta small { display: block; }
.izaberi-klijenta small { color: var(--pico-muted-color); font-size: 0.78rem; }
.nema-klijenta { margin-bottom: 0.75rem; }
.izabrani-klijent { margin-bottom: 0.25rem; padding: 0.75rem; border: 1px solid var(--pico-primary-border, var(--pico-primary)); border-radius: var(--pico-border-radius); background: var(--pico-card-sectioning-background-color); }
.glava-izabranog { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem; }
.glava-izabranog p { margin: 0; line-height: 1.35; }
.glava-izabranog p span { display: block; color: var(--pico-primary); font-size: 0.875rem; }
.izabrani-klijent label { margin-bottom: 0; font-size: 0.85rem; color: var(--pico-muted-color); }
.izabrani-klijent select { margin: 0.25rem 0 0; }

/* Telefon i tablet: forma se otvara kao donji panel iz plutajućeg dugmeta. */
@media (max-width: 1023px) {
  .narudzbe-mreza { grid-template-columns: minmax(0, 1fr); grid-template-areas: "termini" "rijesene"; }
  main.container:has(.narudzbe-mreza) { padding-bottom: calc(var(--visina-donje-trake) + 5.5rem); }
  .dugme-nove-narudzbe { display: inline-flex !important; }
  .forma-narudzbe-kolona {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 60; display: none;
    max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
  }
  .forma-narudzbe-kolona.otvoren { display: block; animation: panel-gore 0.2s ease-out; }
  .forma-narudzbe-kolona .forma-narudzbe { margin: 0; border-radius: 1rem 1rem 0 0; padding-bottom: 1.5rem; }
  .forma-narudzbe > header { position: sticky; top: 0; z-index: 1; }
  .zatvori-panel { display: inline-flex !important; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin: 0; padding: 0; }
  .zatvori-panel .ikona { width: 1.2rem; height: 1.2rem; }
  .pozadina-panela { position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, 0.6); }
  .pozadina-panela[hidden] { display: none; }
  body.panel-otvoren { overflow: hidden; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .dugme-nove-narudzbe { bottom: 1.5rem; }
  .forma-narudzbe-kolona { width: min(36rem, 100%); margin-inline: auto; }
}
@keyframes panel-gore { from { transform: translateY(2rem); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .forma-narudzbe-kolona.otvoren { animation: none; } }
@media (max-width: 767px) {
  .termin-narudzbe { grid-template-columns: 4rem minmax(0, 1fr); gap: 0.75rem; padding: 0.8rem; }
  .vrijeme-termina { align-self: start; }
  .radnje-termina { grid-column: 1 / -1; padding-top: 0.6rem; border-top: 1px solid var(--pico-muted-border-color); }
  .radnje-termina .forma-dosao { flex: 1; order: -1; }
  .radnje-termina .forma-dosao button { width: 100%; height: 2.75rem; font-size: 1rem; }
  .radnje-termina button, .radnje-termina [role="button"], .vise-radnji > summary { height: 2.75rem; }
  .podsjeti .tekst-dugmeta { display: none; }
  .podsjeti .dugme-ikona { width: 2.75rem; padding: 0; }
  .podsjeti .dugme-ikona .ikona { width: 1.15rem; height: 1.15rem; }
  .vise-radnji { flex: none; }
  .kontakt-termina .telefon-reda {
    min-height: 2.25rem; padding: 0 0.7rem; border-radius: var(--pico-border-radius);
    background: color-mix(in srgb, var(--pico-primary) 12%, transparent); color: var(--pico-primary); font-size: 0.95rem; text-decoration: none;
  }
  .rijesena { grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 0.75rem; }
  .rijesena .datum-rijesene { grid-column: 1 / -1; font-size: 0.8rem; color: var(--pico-muted-color); }
  .rijesena .datum-rijesene small { display: inline; }
}
.rijesena .opis-reda .tablica { font-size: 0.75rem; }
.meni-termina .izmijeni-termin { display: flex; align-items: center; gap: 0.35rem; width: 100%; margin: 0; padding: 0.4rem 0.75rem; font-size: 0.875rem; }
.meni-termina .izmijeni-termin .ikona { width: 1rem; height: 1rem; }
.meni-termina hr { margin: 0.75rem 0 0.6rem; }
.kartica-narudzbe-izmjena { margin-bottom: 1rem; padding: 0.75rem 0.9rem; border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); background: var(--pico-card-sectioning-background-color); }
.kartica-narudzbe-izmjena p { margin: 0 0 0.2rem; }
.kartica-narudzbe-izmjena p:last-child { margin: 0; }
.radnje-termina .meni-termina button { width: 100%; justify-content: flex-start; }
.ime-termina { color: var(--pico-h1-color); }
.ime-termina:hover { color: var(--pico-primary); }

/* ---------- Kalendar i sat (flatpickr): uvijek 02.11.2026. i 24 sata ---------- */
input.polje-datuma {
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.85rem center; background-size: 1.05rem;
  cursor: pointer;
}
input.polje-datuma.vrijeme {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
}
.flatpickr-calendar {
  font-family: inherit; border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius);
  background: var(--pico-card-background-color); color: var(--pico-color); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}
.flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before, .flatpickr-calendar.arrowBottom::after { display: none; }
.flatpickr-months .flatpickr-month, .flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year { color: var(--pico-h1-color); fill: var(--pico-h1-color); }
.flatpickr-current-month .flatpickr-monthDropdown-months { background: var(--pico-card-background-color); }
.flatpickr-current-month input.cur-year { padding: 0 0 0 0.5ch; height: auto; margin: 0; border: none; background: transparent; box-shadow: none; }
.flatpickr-current-month .flatpickr-monthDropdown-months { width: auto; margin: 0; padding: 0; border: none; box-shadow: none; }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { color: var(--pico-h1-color); fill: var(--pico-h1-color); }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--pico-primary); }
span.flatpickr-weekday { color: var(--pico-muted-color); font-weight: 600; }
.flatpickr-day { color: var(--pico-h1-color); }
.flatpickr-day:hover, .flatpickr-day:focus { background: var(--pico-card-sectioning-background-color); border-color: var(--pico-muted-border-color); }
.flatpickr-day.today { border-color: var(--pico-primary); }
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--pico-primary); border-color: var(--pico-primary); color: var(--pico-primary-inverse); }
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover { color: var(--pico-muted-color); opacity: 0.45; }
.flatpickr-time { border-color: var(--pico-muted-border-color) !important; }
.flatpickr-time input, .flatpickr-time .flatpickr-time-separator, .flatpickr-time .flatpickr-am-pm { color: var(--pico-h1-color); }
.flatpickr-time input { height: 100%; margin: 0; padding: 0; border: none; background: transparent; box-shadow: none; font-size: 1.25rem; }
.flatpickr-time input:hover, .flatpickr-time input:focus { background: var(--pico-card-sectioning-background-color); }
.numInputWrapper span.arrowUp::after { border-bottom-color: var(--pico-h1-color); }
.numInputWrapper span.arrowDown::after { border-top-color: var(--pico-h1-color); }
.flatpickr-calendar.hasTime.noCalendar { width: 12rem; }

/* Dugme "Nova narudžba" na računaru: kratko istakne formu desno. */
@keyframes istakni-formu { 0%, 60% { box-shadow: 0 0 0 3px var(--pico-primary); } 100% { box-shadow: 0 0 0 0 transparent; } }
.forma-narudzbe.istaknuta { animation: istakni-formu 1.4s ease-out; }
@media (prefers-reduced-motion: reduce) { .forma-narudzbe.istaknuta { animation: none; outline: 3px solid var(--pico-primary); } }

/* Administracija: kartica servisa sa brojkama i dodacima. */
.admin-servis > header { margin-bottom: 1rem; }
.admin-servis-naslov { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.admin-servis-naslov h2 { margin: 0; font-size: 1.2rem; }
.admin-servis-oznake { display: flex; gap: 0.4rem; }
.admin-brojke { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
@media (max-width: 767px) { .admin-brojke { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; } }
.admin-brojka {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  color: var(--pico-h1-color);
  text-decoration: none !important;
}
a.admin-brojka:hover { border-color: var(--pico-primary-border); }
.admin-brojka .naziv { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--pico-muted-color); }
.admin-brojka b { font-size: 1.35rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.admin-brojka small { font-size: 0.78rem; color: var(--pico-muted-color); }
.admin-brojka .oznaka { font-size: 0.7rem; }
.admin-dodaci-naslov { margin: 0 0 0.5rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--pico-muted-color); }
.admin-dodaci { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.75rem; }
.admin-dodatak { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.admin-dodatak small { color: var(--pico-muted-color); }
.admin-dodatak label { margin: 0; white-space: nowrap; }

/* Promjena vlasnika vozila */
.pretraga-vlasnika { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
.pretraga-vlasnika input[type="search"] { margin: 0; }
.pretraga-vlasnika button { flex: none; width: auto; margin: 0; display: inline-flex; align-items: center; gap: 0.35rem; }
.red-vlasnika { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--pico-muted-border-color); }
.red-vlasnika:last-child { border-bottom: none; }
.red-vlasnika .opis-reda { flex: 1; min-width: 0; }
.red-vlasnika .opis-reda span { display: block; font-size: 0.85rem; color: var(--pico-muted-color); }
.red-vlasnika form { margin: 0; }
.red-vlasnika button { width: auto; margin: 0; padding: 0.4rem 0.9rem; }
.forma-vlasnika button { display: inline-flex; align-items: center; gap: 0.35rem; width: auto; }
.forma-vlasnika button .ikona, .pretraga-vlasnika button .ikona { width: 1rem; height: 1rem; }
.oznaka-vlasnika { font-size: 0.75rem; color: var(--pico-muted-color); font-weight: normal; }
/* Ranije vozilo je prigušeno, ali tablica ostaje jasna. */
.kartica-vozila.ranije-vozilo > :not(header), .ranije-vozilo .glava-vozila .opis-reda { opacity: 0.75; }
.kartica-vozila.ranije-vozilo .presao { display: block; font-size: 0.85rem; color: var(--pico-muted-color); }

/* Početni paketi usluga: zbijeni redovi, a na telefonu JM i cijena ispod naziva. */
.paket-tabela td { vertical-align: middle; }
.paket-tabela select,
.paket-tabela input:not([type="checkbox"]) { margin: 0; padding-block: 0.35rem; height: auto; }
@media (max-width: 640px) {
  .paket-tabela thead { display: none; }
  .paket-tabela tr {
    display: grid;
    grid-template-columns: 2rem 1fr 1fr;
    gap: 0.35rem 0.5rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--pico-muted-border-color);
  }
  .paket-tabela td { padding: 0; border: 0; }
  .paket-tabela td:nth-child(2), .paket-tabela td[colspan] { grid-column: 2 / 4; }
  .paket-tabela td:nth-child(3):not([colspan]) { grid-column: 2; }
  .paket-tabela td:nth-child(4) { grid-column: 3; }
}

/* Dugmad za cijeli paket i za isključene usluge, jedno do drugog. */
.dugmad-paketa { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.dugmad-paketa form { margin: 0; }
.dugmad-paketa button { margin: 0; padding: 0.35rem 0.75rem; }
@media (max-width: 640px) {
  .preuzeti-paketi tr { display: grid; grid-template-columns: 2fr 1fr 1fr; align-items: center; }
  .preuzeti-paketi td.dugmad-paketa { grid-column: 1 / 4; border-top: 0; padding-top: 0; }
}

/* Forma naloga: preporuka ide klijentu (zeleni rub), interna napomena prigušena. */
.polje-za-klijenta { padding-left: 0.75rem; border-left: 3px solid var(--uspjeh-tekst); }
.polje-interno { padding-left: 0.75rem; border-left: 3px dashed var(--pico-muted-border-color); }
.polje-za-klijenta .oznaka, .polje-interno .oznaka, .k-opis h3 .oznaka { margin-left: 0.35rem; text-transform: none; letter-spacing: 0; }

/* Kartica "Prvi koraci" na Početnoj (web/vodic.py): koraci se štikliraju sami. */
.prvi-koraci { margin-bottom: 1.5rem; padding: 1rem 1.25rem; }
.prvi-koraci header {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  margin: -1rem -1.25rem 0.75rem; padding: 0.75rem 1.25rem;
}
.prvi-koraci header div { display: flex; flex-direction: column; }
.prvi-koraci header small { color: var(--pico-muted-color); }
.prvi-koraci header form { margin: 0; }
.prvi-koraci header button { margin: 0; padding: 0.3rem 0.8rem; font-size: 0.8125rem; }
.prvi-koraci progress { margin-bottom: 0.75rem; height: 0.4rem; }
.prvi-koraci ol {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.5rem 1.25rem; margin: 0; padding: 0; list-style: none;
}
.prvi-koraci li { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0; list-style: none; }
.prvi-koraci .krug {
  display: inline-grid; place-items: center; flex: none; width: 1.6rem; height: 1.6rem;
  border: 1px solid var(--pico-muted-border-color); border-radius: 50%; font-size: 0.8rem; font-weight: 600;
}
.prvi-koraci .krug .ikona { width: 0.85rem; height: 0.85rem; }
.prvi-koraci .opis-reda span { font-size: 0.8125rem; color: var(--pico-muted-color); }
.prvi-koraci li.gotov .krug { border-color: transparent; background: var(--uspjeh-pozadina); color: var(--uspjeh-tekst); }
.prvi-koraci li.gotov strong { color: var(--pico-muted-color); text-decoration: line-through; font-weight: 500; }

/* Vodič (static/vodic.js, biblioteka driver.js): oblačić u bojama teme. */
.driver-popover.oblacic-vodica {
  max-width: min(24rem, calc(100vw - 2rem));
  background: var(--pico-card-background-color);
  color: var(--pico-color);
  border: 1px solid var(--pico-muted-border-color);
  border-radius: calc(var(--pico-border-radius) * 1.5);
  font-family: var(--pico-font-family);
  padding: 1rem 1.1rem;
}
.oblacic-vodica .driver-popover-title { font-family: var(--naslovna-slova, inherit); font-size: 1.05rem; color: var(--pico-h1-color); }
.oblacic-vodica .driver-popover-description { font-size: 0.9rem; line-height: 1.5; color: var(--pico-color); }
.oblacic-vodica .driver-popover-description p { margin: 0.4rem 0 0; }
.oblacic-vodica .driver-popover-description ol { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.oblacic-vodica .driver-popover-description li { margin: 0.1rem 0; }
.oblacic-vodica .misija { display: block; margin-bottom: 0.15rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pico-primary); }
.oblacic-vodica .driver-popover-progress-text { color: var(--pico-muted-color); font-size: 0.8rem; }
.oblacic-vodica .driver-popover-footer button {
  margin: 0; padding: 0.35rem 0.85rem; width: auto; font-size: 0.875rem; text-shadow: none;
  border-radius: var(--pico-border-radius); border: 1px solid var(--pico-primary-border);
  background: var(--pico-primary-background); color: var(--pico-primary-inverse);
}
.oblacic-vodica .driver-popover-footer .driver-popover-prev-btn { background: transparent; color: var(--pico-primary); }
.oblacic-vodica .driver-popover-footer button:hover { background: var(--pico-primary-hover-background); color: var(--pico-primary-inverse); }
.oblacic-vodica .driver-popover-close-btn { color: var(--pico-muted-color); background: none; border: 0; padding: 0; width: 2rem; }
.oblacic-vodica .driver-popover-footer button.prekini-vodic { margin-right: 0.75rem; padding: 0; background: none; border: 0; color: var(--pico-muted-color); font-size: 0.8rem; text-decoration: underline; cursor: pointer; }
.oblacic-vodica .driver-popover-footer button.prekini-vodic:hover { background: none; color: var(--pico-color); }
.oblacic-vodica .driver-popover-arrow-side-left.driver-popover-arrow { border-left-color: var(--pico-card-background-color); }
.oblacic-vodica .driver-popover-arrow-side-right.driver-popover-arrow { border-right-color: var(--pico-card-background-color); }
.oblacic-vodica .driver-popover-arrow-side-top.driver-popover-arrow { border-top-color: var(--pico-card-background-color); }
.oblacic-vodica .driver-popover-arrow-side-bottom.driver-popover-arrow { border-bottom-color: var(--pico-card-background-color); }
.oblacic-vodica .driver-popover-navigation-btns { gap: 0.4rem; }

/* ---------- Statistika (v0): podmeni, brojke, grafikon sa očitavanjem, mjeseci, godine, odsutni ---------- */
.podmeni-statistike { display: block; margin: 0 0 1rem; overflow-x: auto; scrollbar-width: none; }
.podmeni-statistike::-webkit-scrollbar { display: none; }
.podmeni-statistike ul {
  display: inline-flex; gap: 0.25rem; margin: 0; padding: 0.25rem;
  border: 1px solid var(--pico-muted-border-color); border-radius: calc(var(--pico-border-radius) * 2);
  background: var(--pico-card-background-color);
}
.podmeni-statistike li { padding: 0; list-style: none; }
.podmeni-statistike a {
  display: flex; align-items: center; min-height: 2.5rem; margin: 0; padding: 0 1rem; white-space: nowrap;
  border-radius: calc(var(--pico-border-radius) * 1.5); color: var(--pico-muted-color); text-decoration: none; font-weight: 500;
}
.podmeni-statistike a:hover { color: var(--pico-h1-color); }
.podmeni-statistike a[aria-current="page"] {
  background: var(--oznaka-pozadina); color: var(--oznaka-tekst); font-weight: 600; box-shadow: inset 0 0 0 1px var(--pico-primary);
}
.izbor-godine { margin: 0; }
.izbor-godine select { width: 8rem; margin: 0; }
.napomena-statistike { display: flex; gap: 0.5rem; max-width: 48rem; margin-bottom: 1rem; font-size: 0.875rem; color: var(--pico-muted-color); }
.napomena-statistike .ikona { flex: none; width: 1rem; height: 1rem; margin-top: 0.15rem; }

.brojke-statistike { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 2.5rem; }
.brojka-statistike {
  display: flex; flex-direction: column; gap: 0.35rem; margin: 0; padding: 1rem;
  border: 1px solid var(--pico-muted-border-color); border-radius: calc(var(--pico-border-radius) * 1.5);
}
.brojka-statistike.glavna { grid-column: span 2; justify-content: space-between; }
.glava-zbira { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pico-muted-color); }
.brojka-statistike strong {
  font-family: var(--naslovna-slova, inherit); font-size: 1.75rem; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums; color: var(--pico-h1-color); white-space: nowrap;
}
.brojka-statistike.glavna strong { font-size: 2.9rem; }
.brojka-statistike strong small { font-size: 0.55em; font-weight: 600; color: var(--pico-muted-color); }
.brojka-statistike p, .ocitavanje p {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; margin: 0; font-size: 0.875rem; color: var(--pico-muted-color);
}
.promjena { display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.promjena .ikona { width: 1rem; height: 1rem; }
.promjena.raste { color: var(--uspjeh-tekst); }
.promjena.pada { color: var(--greska-tekst); }

.odjeljak-statistike { margin-bottom: 2.5rem; }
.odjeljak-statistike h2 { margin-bottom: 0.25rem; font-size: 1.35rem; }
.opis-odjeljka { max-width: 48rem; margin-bottom: 0.75rem; font-size: 0.875rem; }
.glava-odjeljka { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.75rem; }
.glava-odjeljka h2 { margin: 0; text-align: left; }
.legenda-grafikona { display: flex; gap: 1rem; margin: 0; font-size: 0.875rem; color: var(--pico-muted-color); }
.legenda-grafikona span { display: inline-flex; align-items: center; gap: 0.4rem; }
.legenda-grafikona i { width: 0.75rem; height: 0.75rem; border-radius: 0.15rem; }
.legenda-grafikona .prosla, .stubac.prosla { background: var(--stubac-prosla, color-mix(in srgb, var(--pico-muted-color) 45%, transparent)); }
.legenda-grafikona .ova, .stubac.ova { background: var(--pico-primary-background); }

.grafikon-prometa { margin-bottom: 1rem; padding: 1.25rem; }
.ocitavanje { min-height: 4.5rem; }
.ocitavanje-redovi { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.5rem 2rem; }
.ocitavanje-redovi > div { display: flex; flex-direction: column; }
.ocitavanje-redovi strong {
  font-family: var(--naslovna-slova, inherit); font-size: 2.2rem; font-weight: 700; line-height: 1.15;
  font-variant-numeric: tabular-nums; color: var(--pico-h1-color); white-space: nowrap;
}
.ocitavanje-redovi .prosla-godina { text-align: right; font-size: 0.875rem; color: var(--pico-muted-color); }
.ocitavanje-redovi .prosla-godina strong { font-size: 1.5rem; color: var(--pico-muted-color); }
.ocitavanje p { margin-top: 0.25rem; }
.grafikon { display: flex; gap: 0.5rem; margin-top: 1rem; }
.osa-grafikona { position: relative; flex: none; width: 2.2rem; height: 15rem; font-size: 0.75rem; color: var(--pico-muted-color); font-variant-numeric: tabular-nums; }
.osa-grafikona span { position: absolute; right: 0; transform: translateY(-50%); }
.polje-grafikona { position: relative; flex: 1; min-width: 0; }
.mreza-grafikona { position: absolute; inset: 0 0 auto; height: 15rem; pointer-events: none; }
.mreza-grafikona i { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--pico-muted-border-color); }
.mreza-grafikona i.nula { border-top-style: solid; border-color: var(--pico-muted-color); }
.stupci-grafikona { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0.25rem; height: 15rem; }
.mjesec-grafikona {
  display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 100%; margin: 0; padding: 0 2px;
  border: none; border-radius: var(--pico-border-radius); background: transparent; box-shadow: none; cursor: pointer;
}
.mjesec-grafikona:hover { background: color-mix(in srgb, var(--pico-h1-color) 4%, transparent); }
.mjesec-grafikona[aria-pressed="true"] { background: color-mix(in srgb, var(--pico-h1-color) 8%, transparent); }
.mjesec-grafikona:focus-visible { outline: 2px solid var(--pico-primary); outline-offset: 1px; }
.stubac { display: block; width: 38%; max-width: 0.75rem; border-radius: 3px 3px 0 0; transition: height 0.35s cubic-bezier(.2, .7, .2, 1); }
.mjeseci-grafikona { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0.25rem; margin-top: 0.5rem; font-size: 0.75rem; text-align: center; color: var(--pico-muted-color); }
.mjeseci-grafikona .izabran { color: var(--pico-h1-color); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .stubac { transition: none; } }

.spisak-mjeseci .glava-spiska, .red-mjeseca, .podnozje-mjeseci {
  display: grid; grid-template-columns: 4.5rem 4.5rem repeat(3, minmax(0, 1fr)) minmax(0, 1.2fr) minmax(0, 1.2fr);
  align-items: center; gap: 0.75rem; padding: 0.7rem var(--pico-block-spacing-horizontal);
}
.red-mjeseca {
  width: 100%; margin: 0; border: none; border-bottom: 1px solid var(--pico-muted-border-color); border-radius: 0;
  background: transparent; box-shadow: none; color: var(--pico-h1-color); font-size: 1rem; font-weight: 400; text-align: left; cursor: pointer;
}
.red-mjeseca:hover { background: var(--pico-card-sectioning-background-color); }
.red-mjeseca[aria-pressed="true"] { background: color-mix(in srgb, var(--pico-primary) 9%, transparent); }
.red-mjeseca:focus-visible { outline: 2px solid var(--pico-primary); outline-offset: -2px; }
.red-mjeseca.prazan { color: var(--pico-muted-color); }
.red-mjeseca.buduci { opacity: 0.55; }
.naziv-mjeseca { font-weight: 600; color: var(--pico-h1-color); }
.red-mjeseca.prazan .naziv-mjeseca { color: var(--pico-muted-color); }
.dijelovi-mjeseca, .crtice, .dijelovi-godine, .dolasci-odsutnog { display: contents; }
.dijelovi-mjeseca > span, .crtice > span, .dijelovi-godine > span, .prosla-mjeseca {
  text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.dijelovi-mjeseca small, .dijelovi-godine small { display: none; }
.prosla-mjeseca { color: var(--pico-muted-color); }
.red-mjeseca .iznos-racuna { font-size: 1.1rem; }
.podnozje-mjeseci { border-top: 1px solid var(--pico-muted-border-color); background: var(--pico-card-sectioning-background-color); }
.podnozje-mjeseci > span, .podnozje-mjeseci > strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.podnozje-mjeseci strong { margin: 0; font-family: var(--naslovna-slova, inherit); font-size: 1.15rem; color: var(--pico-h1-color); }

.spisak-godina .glava-spiska, .red-godine {
  display: grid; grid-template-columns: 6rem 4rem minmax(0, 1.6fr) 8rem 8.5rem 5rem 8rem 4.5rem;
  align-items: center; gap: 0.75rem; padding: 0.75rem var(--pico-block-spacing-horizontal);
}
.red-godine { border-bottom: 1px solid var(--pico-muted-border-color); }
.red-godine:last-child { border-bottom: none; }
.red-godine.tekuca { background: color-mix(in srgb, var(--pico-primary) 6%, transparent); }
.godina-reda strong { color: var(--pico-h1-color); }
.do-mjeseca { font-size: 0.72rem; font-weight: 600; color: var(--upozorenje-tekst); white-space: nowrap; }
.broj-godine { text-align: right; font-variant-numeric: tabular-nums; }
.promet-godine { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.promet-godine .iznos-racuna { text-align: left; font-size: 1.1rem; }
.traka-godine { display: block; height: 0.375rem; border-radius: 999px; overflow: hidden; background: var(--pico-muted-border-color); }
.traka-godine i { display: block; height: 100%; border-radius: 999px; background: color-mix(in srgb, var(--pico-muted-color) 70%, transparent); }
.red-godine.tekuca .traka-godine i { background: var(--pico-primary-background); }
.dijelovi-godine .udio-rada { font-weight: 600; color: var(--pico-h1-color); }

.filter-odsutnih { margin-bottom: 0.75rem; }
.spisak-odsutnih .glava-spiska, .red-odsutnog { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr) 5.5rem 9.5rem 8.5rem; gap: 0.75rem; }
.red-odsutnog[hidden] { display: none; }
.red-odsutnog .ime-klijenta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.red-odsutnog .ime-klijenta strong { font-weight: 600; }
.dolasci-odsutnog > span { font-variant-numeric: tabular-nums; white-space: nowrap; }
.zadnji-dolazak small { display: block; font-size: 0.75rem; color: var(--pico-muted-color); }
.spisak-odsutnih #redovi-odsutnih > .prazno { margin: 0; padding: 2rem var(--pico-block-spacing-horizontal); text-align: center; }
.spisak-odsutnih .prikazi-starije { display: flex; justify-content: center; gap: 0.5rem; margin: 0; width: 100%; border-radius: 0; color: var(--pico-primary); box-shadow: none; }
.spisak-odsutnih .prikazi-starije b { font-weight: inherit; }
.spisak-odsutnih .prikazi-starije[hidden] { display: none; }
.spisak-odsutnih .podnozje-spiska strong { font-family: var(--naslovna-slova, inherit); font-size: 1.15rem; color: var(--pico-h1-color); }

@media (max-width: 1199px) {
  .brojke-statistike { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .brojka-statistike.glavna { grid-column: 1 / -1; }
  .spisak-godina .glava-spiska, .red-godine { grid-template-columns: 5rem 3.5rem minmax(0, 1.4fr) 7.5rem 8rem 4.5rem 7.5rem 4rem; gap: 0.5rem; }
}
@media (max-width: 991px) {
  .spisak-mjeseci .glava-spiska, .red-mjeseca, .podnozje-mjeseci { gap: 0.5rem; font-size: 0.9rem; }
}

/* Telefon (v0): brojke dvije u redu, mjeseci i godine kao kartice. */
@media (max-width: 767px) {
  .izbor-godine select { width: 6.5rem; }
  .glava-odjeljka { flex-direction: column; align-items: flex-start; }
  .brojke-statistike { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .brojka-statistike { padding: 0.85rem; }
  .brojka-statistike strong { font-size: 1.45rem; }
  .brojka-statistike.glavna strong { font-size: 2.6rem; }
  .grafikon-prometa { padding: 1rem; }
  .ocitavanje-redovi strong { font-size: 1.9rem; }
  .ocitavanje-redovi .prosla-godina { text-align: left; }
  .osa-grafikona, .mreza-grafikona, .stupci-grafikona { height: 12rem; }
  .osa-grafikona { width: 1.8rem; }
  .stupci-grafikona, .mjeseci-grafikona { gap: 0.1rem; }
  .mjeseci-grafikona { font-size: 0.68rem; }

  .red-mjeseca {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "naziv iznos" "dijelovi dijelovi";
    gap: 0.5rem; padding-block: 0.85rem;
  }
  .red-mjeseca .naziv-mjeseca { grid-area: naziv; text-transform: uppercase; font-size: 0.9rem; }
  .red-mjeseca .naziv-mjeseca .samo-telefon-oznaka { text-transform: none; font-weight: 400; color: var(--pico-muted-color); }
  .red-mjeseca .broj-mjeseca { display: none; }
  .red-mjeseca .iznos-racuna { grid-area: iznos; font-size: 1.4rem; }
  .dijelovi-mjeseca { grid-area: dijelovi; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; font-size: 0.875rem; }
  .dijelovi-mjeseca > span { text-align: left; }
  .dijelovi-mjeseca small, .dijelovi-godine small { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--pico-muted-color); }
  .red-mjeseca .prosla-mjeseca { display: none; }
  .red-mjeseca.prazan { grid-template-areas: "naziv iznos"; }
  .red-mjeseca.prazan .prosla-mjeseca { display: block; grid-area: iznos; font-size: 0.875rem; }
  .podnozje-mjeseci { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; }
  .podnozje-mjeseci strong { font-size: 1.3rem; }

  .red-godine {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "godina broj" "promet promet" "dijelovi dijelovi";
    gap: 0.5rem; padding-block: 0.9rem;
  }
  .godina-reda { grid-area: godina; font-size: 1.1rem; }
  .broj-godine { grid-area: broj; font-size: 0.875rem; color: var(--pico-muted-color); }
  .promet-godine { grid-area: promet; }
  .promet-godine .iznos-racuna { font-size: 1.45rem; }
  .dijelovi-godine { grid-area: dijelovi; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 0.75rem; font-size: 0.875rem; }
  .dijelovi-godine > span { text-align: left; }

  .red-odsutnog {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ime ime" "telefon telefon" "dolasci iznos";
    gap: 0.3rem 0.75rem; padding-block: 0.85rem;
  }
  .red-odsutnog .ime-klijenta { grid-area: ime; }
  .red-odsutnog .telefon-klijenta { grid-area: telefon; }
  .red-odsutnog .telefon-klijenta a { min-height: 2.25rem; }
  .dolasci-odsutnog { grid-area: dolasci; display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.875rem; color: var(--pico-muted-color); }
  .dolasci-odsutnog > span { text-align: left; }
  .zadnji-dolazak small { display: inline; }
  .red-odsutnog .iznos-racuna { grid-area: iznos; align-self: end; font-size: 1.4rem; }
}

/* ---------- Poslovanje (v0): zarada sa trakom udjela, prag, zarada po mjesecima i po nalogu ---------- */
.brojke-poslovanja { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.brojke-poslovanja .brojka-statistike { margin: 0; }
.brojke-poslovanja .glavna { gap: 1rem; }
.brojke-poslovanja .glavna > div:first-child { display: flex; flex-direction: column; gap: 0.35rem; }
.brojke-poslovanja .glavna strong { font-size: 3.4rem; }
.brojka-statistike strong.gubitak, .zarada-iznos.gubitak { color: var(--greska-tekst, var(--pico-del-color)); }
.traka-udjela { display: flex; gap: 1px; height: 0.5rem; border-radius: 999px; overflow: hidden; background: var(--pico-muted-border-color); }
.traka-udjela i { display: block; height: 100%; }
.udio-zarade { background: var(--uspjeh-tekst); }
.udio-nabavke { background: var(--upozorenje-tekst); }
.udio-troskova { background: var(--greska-tekst, var(--pico-del-color)); }
.legenda-udjela { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0.5rem 0 0 !important; font-size: 0.75rem !important; }
.legenda-udjela span { display: inline-flex; align-items: center; gap: 0.4rem; }
.legenda-udjela i { width: 0.5rem; height: 0.5rem; border-radius: 999px; }

.kartica-praga { display: flex; align-items: center; gap: 1rem; margin: 0 0 2.5rem; padding: 1.1rem 1.25rem; border-radius: calc(var(--pico-border-radius) * 1.5); }
.kartica-praga .ikona-kocka { width: 3rem; height: 3rem; color: var(--upozorenje-tekst); }
.kartica-praga .ikona-kocka .ikona { width: 1.5rem; height: 1.5rem; }
.tekst-praga { flex: 1; min-width: 0; }
.tekst-praga h2 { margin: 0 0 0.25rem; font-size: 1.15rem; text-align: left; }
.tekst-praga p { max-width: 46rem; margin: 0 0 0.35rem; font-size: 0.9rem; color: var(--pico-muted-color); }
.tekst-praga p strong { color: var(--pico-h1-color); }
.tekst-praga p:last-child { margin-bottom: 0; }
.napredak-praga { max-width: 32rem; margin: 0.75rem 0 0.35rem; }
.napredak-praga .traka-godine { height: 0.5rem; margin-bottom: 0.4rem; }
.napredak-praga .traka-godine i { background: var(--pico-primary-background); }
.prag-predjen { color: var(--uspjeh-tekst); font-weight: 600; }
.dugme-praga { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; white-space: nowrap; }
.dugme-praga .ikona { width: 1rem; height: 1rem; }

.spisak-zarade .glava-spiska, .red-zarade {
  display: grid; grid-template-columns: minmax(0, 1.1fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.2fr);
  align-items: center; gap: 0.75rem; padding: 0.8rem var(--pico-block-spacing-horizontal);
}
.red-zarade { border-bottom: 1px solid var(--pico-muted-border-color); }
.red-zarade:hover { background: var(--pico-card-sectioning-background-color); }
.red-zarade.prazan { display: flex; justify-content: space-between; padding-block: 0.6rem; font-size: 0.875rem; }
.red-zarade.prazan .naziv-mjeseca { color: var(--pico-muted-color); text-transform: uppercase; }
.red-zarade .dijelovi-mjeseca > span { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.red-zarade .iznos-racuna { font-size: 1.2rem; }
.podnozje-zarade { border-bottom: none; background: var(--pico-card-sectioning-background-color); }
.podnozje-zarade .dijelovi-mjeseca > span { font-weight: 600; color: var(--pico-h1-color); }
.oznaka-bez-unosa {
  display: inline-flex; align-items: center; gap: 0.25rem; margin-left: 0.5rem; padding: 0.05rem 0.5rem; vertical-align: middle;
  border: 1px solid color-mix(in srgb, var(--upozorenje-tekst) 50%, transparent); border-radius: 999px;
  background: var(--upozorenje-pozadina); color: var(--upozorenje-tekst); font-size: 0.7rem; font-weight: 500; text-transform: none; white-space: nowrap;
}
.oznaka-bez-unosa .ikona { width: 0.75rem; height: 0.75rem; }

.spisak-zarade-naloga .glava-spiska, .red-naloga-zarade {
  grid-template-columns: 5rem 6.5rem repeat(3, minmax(0, 1fr)) minmax(0, 1.1fr) 5rem;
}
.spisak-zarade-naloga .glava-spiska { display: grid; align-items: center; gap: 0.75rem; }
.red-naloga-zarade { position: relative; }
.broj-naloga { font-weight: 700; font-variant-numeric: tabular-nums; }
a.broj-naloga { color: var(--pico-h1-color); text-decoration: none; }
.datum-naloga { font-size: 0.9rem; color: var(--pico-muted-color); font-variant-numeric: tabular-nums; }
.marza-naloga { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.marza { font-weight: 600; font-variant-numeric: tabular-nums; }
.marza.dobra { color: var(--uspjeh-tekst); }
.marza.tanka { color: var(--upozorenje-tekst); }
.marza.gubitak { color: var(--greska-tekst, var(--pico-del-color)); }
.red-naloga-zarade .samo-telefon-oznaka { font-family: var(--pico-font-family); font-size: 0.875rem; font-weight: 400; color: var(--pico-muted-color); }

@media (max-width: 1199px) {
  .brojke-poslovanja { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brojke-poslovanja .glavna { grid-column: 1 / -1; }
}
@media (max-width: 991px) {
  .spisak-zarade .glava-spiska, .red-zarade { gap: 0.5rem; font-size: 0.9rem; }
}

/* Telefon (v0): zarada preko cijele širine, mjeseci i nalozi kao kartice. */
@media (max-width: 767px) {
  .brojke-poslovanja { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .brojke-poslovanja .promet { grid-column: 1 / -1; }
  .brojke-poslovanja .glavna strong { font-size: 2.8rem; }
  .kartica-praga { flex-direction: column; align-items: stretch; padding: 1rem; }
  .dugme-praga { justify-content: center; width: 100%; }

  .red-zarade, .red-naloga-zarade {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "naziv iznos" "dijelovi dijelovi";
    gap: 0.6rem; padding-block: 0.9rem;
  }
  .red-zarade .naziv-mjeseca { grid-area: naziv; text-transform: uppercase; font-size: 0.9rem; }
  .red-zarade .iznos-racuna { grid-area: iznos; font-size: 1.45rem; }
  .red-zarade .dijelovi-mjeseca { grid-area: dijelovi; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; font-size: 0.875rem; }
  .red-zarade .dijelovi-mjeseca > span { text-align: left; }
  .red-zarade .dijelovi-mjeseca small { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--pico-muted-color); }

  .red-naloga-zarade { grid-template-areas: "broj datum" "dijelovi dijelovi" "iznos iznos"; }
  .red-naloga-zarade .broj-naloga { grid-area: broj; }
  .red-naloga-zarade .datum-naloga { grid-area: datum; text-align: right; }
  .red-naloga-zarade .iznos-racuna { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
  .podnozje-zarade.red-naloga-zarade { grid-template-areas: "broj iznos"; }
  .podnozje-zarade.red-naloga-zarade .datum-naloga { display: none; }
  .podnozje-zarade.red-naloga-zarade .iznos-racuna { justify-content: flex-end; font-size: 1.25rem; }
  .podnozje-zarade.red-naloga-zarade .samo-telefon-oznaka { margin-right: 0.4rem; }
}

/* ---------- Troškovi (v0): mjesec sa strelicama, spisak sa zbirom, forma desno (na telefonu donji panel) ---------- */
.troskovi-mreza { display: grid; grid-template-columns: minmax(0, 1fr) 25rem; gap: 1.25rem; align-items: start; }
.troskovi-mjeseca { min-width: 0; }
.izbor-mjeseca { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.izbor-mjeseca h2 { flex: 1; margin: 0; font-size: 1.35rem; text-align: center; text-transform: capitalize; }
.izbor-mjeseca [role="button"] { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: 0; padding: 0; }
.izbor-mjeseca .ikona { width: 1.25rem; height: 1.25rem; }

.spisak-troskova { margin: 0 0 0.75rem; padding: 0; overflow: hidden; }
.zbir-troskova {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem;
  padding: 1rem var(--pico-block-spacing-horizontal); border-bottom: 1px solid var(--pico-muted-border-color);
}
.zbir-troskova > div { display: flex; flex-direction: column; gap: 0.35rem; }
.zbir-troskova strong {
  font-family: var(--naslovna-slova, inherit); font-size: 2.4rem; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--pico-h1-color); white-space: nowrap;
}
.zbir-troskova strong small { font-size: 0.45em; font-weight: 600; color: var(--pico-muted-color); }
.broj-troskova { font-size: 0.875rem; color: var(--pico-muted-color); }
.spisak-troskova ul { margin: 0; padding: 0; }
.red-troska {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin: 0;
  padding: 0.9rem var(--pico-block-spacing-horizontal); list-style: none; border-bottom: 1px solid var(--pico-muted-border-color);
}
.red-troska:last-child { border-bottom: none; }
.opis-troska { min-width: 0; }
.opis-troska > strong { font-weight: 600; color: var(--pico-h1-color); }
.opis-troska > p { margin: 0.15rem 0 0; font-size: 0.875rem; color: var(--pico-muted-color); overflow-wrap: anywhere; }
.opis-troska > p.oznake-troska { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; margin-top: 0.5rem; font-size: 0.75rem; }
.datum-troska { font-variant-numeric: tabular-nums; }
.oznaka-troska {
  display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.05rem 0.5rem; white-space: nowrap;
  border: 1px solid var(--pico-muted-border-color); border-radius: 999px; color: var(--pico-muted-color); text-decoration: none;
}
.oznaka-troska .ikona { width: 0.75rem; height: 0.75rem; }
a.oznaka-troska:hover { color: var(--pico-primary); border-color: var(--pico-primary); }
.oznaka-troska.mjesecni {
  border-color: color-mix(in srgb, var(--upozorenje-tekst) 50%, transparent);
  background: var(--upozorenje-pozadina); color: var(--upozorenje-tekst); font-weight: 500;
}
.desno-troska { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; flex: none; }
.desno-troska .iznos-racuna { font-size: 1.4rem; }
.desno-troska form { margin: 0; }
.red-troska .radnja-troska { width: auto; display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; padding: 0.25rem 0.6rem; font-size: 0.8rem; white-space: nowrap; }
.radnja-troska .ikona { width: 0.85rem; height: 0.85rem; }

.nema-troskova { padding: 2.5rem 1.25rem; text-align: center; border-style: dashed; border-width: 1px; border-color: var(--pico-muted-border-color); }
.nema-troskova .ikona-kocka { width: 3.5rem; height: 3.5rem; margin: 0 auto 1rem; border-radius: calc(var(--pico-border-radius) * 2); }
.nema-troskova .ikona-kocka .ikona { width: 1.75rem; height: 1.75rem; }
.nema-troskova p { max-width: 24rem; margin: 0 auto 0.25rem; font-size: 0.9rem; color: var(--pico-muted-color); }
.nema-troskova p strong { font-size: 1.1rem; color: var(--pico-h1-color); }
.nema-troskova button { align-items: center; gap: 0.4rem; margin-top: 1rem; width: auto; }
.nema-troskova button .ikona { width: 1rem; height: 1rem; }
.samo-uski, .dugme-novog-troska { display: none !important; }

.forma-troska-kolona { position: sticky; top: 1rem; }
.forma-troska-kolona.sa-prikazom { position: static; }
.forma-troska { margin: 0; }
.forma-troska > header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.forma-troska > header h2 { margin: 0; font-size: 1.15rem; text-align: left; }
.citanje-troska {
  margin-bottom: 1rem; padding: 0.9rem; border: 1px dashed var(--pico-muted-border-color);
  border-radius: calc(var(--pico-border-radius) * 1.5); background: var(--pico-card-sectioning-background-color);
}
.glava-citanja { display: flex; align-items: flex-start; gap: 0.75rem; }
.glava-citanja .ikona-kocka { background: var(--upozorenje-pozadina); color: var(--upozorenje-tekst); }
.glava-citanja strong { display: block; line-height: 1.25; color: var(--pico-h1-color); }
.glava-citanja small { display: block; margin-top: 0.25rem; color: var(--pico-muted-color); }
.dugmad-citanja { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.75rem; }
.dugmad-citanja > * { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-width: 0; margin: 0; padding-inline: 0.5rem; }
.dugmad-citanja label { cursor: pointer; }
.dugmad-citanja label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dugmad-citanja .ikona { flex: none; width: 1rem; height: 1rem; }
#fajl-troska:focus-visible ~ .dugmad-citanja label { outline: 2px solid var(--pico-primary); outline-offset: 2px; }
.procitano-troska { display: flex; gap: 0.5rem; padding: 0.6rem 0.75rem; border-radius: var(--pico-border-radius); background: var(--uspjeh-pozadina); font-size: 0.875rem; }
.procitano-troska .ikona { flex: none; width: 1rem; height: 1rem; margin-top: 0.15rem; color: var(--uspjeh-tekst); }
.forma-troska .polja-troska { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 0.75rem; }
.prekidaci-troska { display: grid; gap: 0.25rem; margin-bottom: 1rem; }
.prekidac-opcije { display: flex; align-items: center; gap: 0.75rem; margin: 0; padding: 0.4rem 0; cursor: pointer; }
.prekidac-opcije input { flex: none; margin: 0; }
.prekidac-opcije strong { display: block; font-weight: 500; color: var(--pico-h1-color); }
.prekidac-opcije small { display: block; font-size: 0.85rem; color: var(--pico-muted-color); }
.pdv-troska { margin-bottom: 1rem; }
.dodaj-trosak { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; width: 100%; }
.dodaj-trosak .ikona { width: 1rem; height: 1rem; }
.vrste-troskova { margin: 0.75rem 0 0; font-size: 0.875rem; color: var(--pico-muted-color); }

/* Telefon i tablet: spisak preko cijele širine, forma kao donji panel iz plutajućeg dugmeta. */
@media (max-width: 1023px) {
  .troskovi-mreza { grid-template-columns: minmax(0, 1fr); }
  main.container:has(.troskovi-mreza) { padding-bottom: calc(var(--visina-donje-trake) + 5.5rem); }
  .samo-uski, .dugme-novog-troska { display: inline-flex !important; }
  .forma-troska-kolona, .forma-troska-kolona.sa-prikazom {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 60; display: none;
    max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
  }
  .forma-troska-kolona.otvoren { display: block; animation: panel-gore 0.2s ease-out; }
  .forma-troska { border-radius: 1rem 1rem 0 0; padding-bottom: 1.5rem; }
  .forma-troska > header { position: sticky; top: 0; z-index: 1; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .dugme-novog-troska { bottom: 1.5rem; }
  .forma-troska-kolona { width: min(36rem, 100%); margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) { .forma-troska-kolona.otvoren { animation: none; } }
@media (max-width: 767px) {
  .zbir-troskova strong { font-size: 2.2rem; }
  .red-troska { flex-wrap: wrap; gap: 0.5rem 1rem; }
  .opis-troska { flex: 1; }
  .desno-troska { display: contents; }
  .desno-troska .iznos-racuna { order: 0; font-size: 1.3rem; }
  .desno-troska form { order: 1; display: flex; justify-content: flex-end; flex-basis: 100%; }
  .red-troska .radnja-troska { min-height: 2.25rem; }
}

/* ---------- Ciljevi (v0): cilj sa trakom, mjeseci sa trakama, "šta ako" desno sa rezultatom ---------- */
.ciljevi-mreza { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.cilj-godine { display: grid; gap: 1.25rem; min-width: 0; }
.cilj-godine > article, .cilj-godine > div > article { margin: 0; }
.kartica-cilja { padding: 1.25rem; border-radius: calc(var(--pico-border-radius) * 1.5); }
.kartica-cilja h2.glava-zbira { margin: 0; text-align: left; font-family: var(--pico-font-family); }
.ostvareno-cilja { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-top: 0.5rem; }
.ostvareno-cilja strong, .rezultat-sta-ako strong {
  font-family: var(--naslovna-slova, inherit); font-size: 3.4rem; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--pico-h1-color); white-space: nowrap;
}
.ostvareno-cilja strong small, .rezultat-sta-ako strong small { font-size: 0.45em; font-weight: 600; color: var(--pico-muted-color); }
.procenat-cilja { font-family: var(--naslovna-slova, inherit); font-size: 2.4rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--pico-primary); }
.procenat-cilja.postignut { color: var(--uspjeh-tekst); }
.opis-cilja { margin: 0.4rem 0 0; font-size: 0.875rem; color: var(--pico-muted-color); }
.traka-cilja { display: block; height: 0.75rem; margin-top: 1rem; border-radius: 999px; overflow: hidden; background: var(--pico-muted-border-color); }
.traka-cilja i { display: block; height: 100%; border-radius: 999px; background: var(--pico-primary-background); transition: width 0.5s cubic-bezier(.2, .8, .2, 1); }
.traka-cilja i.postignut { background: var(--uspjeh-tekst); }
.traka-cilja i.u-toku { background: var(--upozorenje-tekst); }
.traka-cilja.mala { height: 0.6rem; margin: 0; }
.brojke-cilja { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 1rem 0 0; }
.brojke-cilja > div { min-width: 0; }
.brojke-cilja dt { margin: 0; }
.brojke-cilja dd { margin: 0.25rem 0 0; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--pico-h1-color); white-space: nowrap; }
.bez-cilja { padding: 2rem 1.25rem; text-align: center; }
.bez-cilja .ikona-kocka { width: 3.5rem; height: 3.5rem; margin: 0 auto 1rem; border-radius: calc(var(--pico-border-radius) * 2); }
.bez-cilja .ikona-kocka .ikona { width: 1.75rem; height: 1.75rem; }
.bez-cilja h2 { margin: 0 0 0.35rem; font-size: 1.15rem; }
.bez-cilja p { max-width: 26rem; margin: 0 auto 0.4rem; font-size: 0.9rem; color: var(--pico-muted-color); }
.bez-cilja p strong { color: var(--pico-h1-color); }

.naslov-ciljeva { margin: 0 0 0.5rem; font-size: 1.15rem; text-align: left; }
.spisak-ciljeva { padding: 0; overflow: hidden; }
.spisak-ciljeva ul { margin: 0; padding: 0; }
.red-cilja {
  display: grid; grid-template-columns: 6rem minmax(0, 1fr) 8.5rem 8.5rem 3.5rem; align-items: center; gap: 0.75rem;
  margin: 0; padding: 0.75rem var(--pico-block-spacing-horizontal); list-style: none; border-bottom: 1px solid var(--pico-muted-border-color);
}
.red-cilja.prazan { opacity: 0.6; }
.spisak-ciljeva .glava-spiska { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pico-muted-color); }
.spisak-ciljeva .glava-spiska > span:nth-child(n+3), .ostvareno-mjeseca, .cilj-mjeseca, .procenat-mjeseca { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.red-cilja .naziv-mjeseca { display: flex; align-items: center; gap: 0.4rem; text-transform: uppercase; font-size: 0.9rem; }
.ostvareno-mjeseca small, .cilj-mjeseca small { display: none; }
.cilj-mjeseca { color: var(--pico-muted-color); }
.procenat-mjeseca { font-family: var(--naslovna-slova, inherit); font-size: 1.2rem; font-weight: 700; color: var(--pico-muted-color); }
.procenat-mjeseca.ispod { color: var(--pico-primary); }
.procenat-mjeseca.postignut { color: var(--uspjeh-tekst); }
.procenat-mjeseca.u-toku { color: var(--upozorenje-tekst); }
.oznaka-u-toku {
  display: inline-flex; padding: 0.05rem 0.5rem; border: 1px solid color-mix(in srgb, var(--upozorenje-tekst) 50%, transparent);
  border-radius: 999px; background: var(--upozorenje-pozadina); color: var(--upozorenje-tekst);
  font-size: 0.7rem; font-weight: 500; text-transform: none; white-space: nowrap;
}
.podnozje-ciljeva { grid-template-columns: minmax(0, 1fr) 8.5rem 8.5rem 3.5rem; border-bottom: none; background: var(--pico-card-sectioning-background-color); font-weight: 600; color: var(--pico-h1-color); }
.podnozje-ciljeva .cilj-mjeseca { color: var(--pico-h1-color); }
.cilj-godine .napomena-statistike { margin: 0.75rem 0 0; }

.forma-cilja { padding: 1.25rem; }
.forma-cilja form { margin: 0; }
.forma-cilja label { font-weight: 600; color: var(--pico-h1-color); }
.polje-cilja { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.polje-cilja input { max-width: 20rem; margin: 0; font-variant-numeric: tabular-nums; }
.polje-cilja button { width: auto; margin: 0; white-space: nowrap; }
.forma-cilja small { display: block; margin-top: 0.5rem; color: var(--pico-muted-color); }

.sta-ako-kolona { position: sticky; top: 1rem; min-width: 0; }
.kartica-sta-ako { margin: 0; padding: 1.25rem; }
.kartica-sta-ako h2 { margin: 0; font-size: 1.15rem; text-align: left; }
.opis-sta-ako { margin: 0.25rem 0 1rem; font-size: 0.875rem; color: var(--pico-muted-color); }
.polja-sta-ako { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 0.75rem; margin: 0; }
.polja-sta-ako label { margin: 0; font-size: 0.875rem; font-weight: 500; color: var(--pico-h1-color); }
.polja-sta-ako input { margin: 0.35rem 0 0; font-variant-numeric: tabular-nums; }
.polje-sa-jedinicom { position: relative; display: block; }
.polje-sa-jedinicom input { padding-right: 2.75rem; }
.polje-sa-jedinicom > span {
  position: absolute; right: 0.75rem; top: calc(50% + 0.175rem); transform: translateY(-50%);
  font-size: 0.875rem; color: var(--pico-muted-color); pointer-events: none;
}
/* Računa se dok se kuca (HTMX); skriveno dugme ostaje za Enter. */
.polja-sta-ako .izracunaj { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.rezultat-sta-ako { margin-top: 1.25rem; padding: 1rem; border-radius: calc(var(--pico-border-radius) * 1.5); background: var(--pico-card-sectioning-background-color); }
.rezultat-sta-ako .glava-zbira { display: block; }
.rezultat-sta-ako strong { display: block; margin-top: 0.35rem; font-size: 2.6rem; }
.rezultat-sta-ako strong.gubitak { color: var(--greska-tekst, var(--pico-del-color)); }
.rezultat-sta-ako > p { margin: 0.6rem 0 0; font-size: 0.875rem; color: var(--pico-muted-color); font-variant-numeric: tabular-nums; }
.glava-rezultata { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem; }
.promjena-zarade {
  display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.2rem 0.65rem; border-radius: 999px;
  font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.promjena-zarade .ikona { width: 1rem; height: 1rem; }
.promjena-zarade.raste { background: var(--uspjeh-pozadina); color: var(--uspjeh-tekst); }
.promjena-zarade.pada { background: color-mix(in srgb, var(--greska-tekst, var(--pico-del-color)) 15%, transparent); color: var(--greska-tekst, var(--pico-del-color)); }
.rezultat-sta-ako ul { margin: 0.75rem 0 0; padding: 0; border-top: 1px solid var(--pico-muted-border-color); font-size: 0.875rem; }
.rezultat-sta-ako li { display: flex; justify-content: space-between; gap: 0.75rem; margin: 0; padding: 0.5rem 0; list-style: none; border-bottom: 1px solid var(--pico-muted-border-color); }
.rezultat-sta-ako li:last-child { border-bottom: none; }
.rezultat-sta-ako li > span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rezultat-sta-ako li .raste { color: var(--uspjeh-tekst); }
.rezultat-sta-ako li .pada { color: var(--greska-tekst, var(--pico-del-color)); }
.rezultat-sta-ako li.razlika-godisnje { font-weight: 600; color: var(--pico-h1-color); }
.objasnjenje-sta-ako { margin: 1rem 0 0; font-size: 0.875rem; color: var(--pico-muted-color); }
@media (prefers-reduced-motion: reduce) { .traka-cilja i { transition: none; } }

@media (max-width: 1023px) {
  .ciljevi-mreza { grid-template-columns: minmax(0, 1fr); }
  .sta-ako-kolona { position: static; }
}

/* Telefon (v0): mjeseci kao kartice sa trakom preko cijele širine. */
@media (max-width: 767px) {
  .kartica-cilja, .forma-cilja, .kartica-sta-ako { padding: 1rem; }
  .ostvareno-cilja strong { font-size: 2.6rem; }
  .procenat-cilja { font-size: 2rem; }
  .brojke-cilja { gap: 0.5rem; }
  .brojke-cilja dd { font-size: 0.85rem; white-space: normal; }
  .spisak-ciljeva .glava-spiska { display: none; }
  .red-cilja {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "naziv procenat" "traka traka" "ostvareno cilj";
    gap: 0.5rem; padding-block: 0.8rem;
  }
  .red-cilja .naziv-mjeseca { grid-area: naziv; }
  .red-cilja .traka-cilja { grid-area: traka; }
  .red-cilja .ostvareno-mjeseca { grid-area: ostvareno; text-align: left; font-size: 0.875rem; }
  .red-cilja .cilj-mjeseca { grid-area: cilj; font-size: 0.875rem; }
  .red-cilja .procenat-mjeseca { grid-area: procenat; font-size: 1.5rem; }
  .ostvareno-mjeseca small, .cilj-mjeseca small { display: inline; color: var(--pico-muted-color); }
  .podnozje-ciljeva { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; }
  .podnozje-ciljeva > span:last-child { display: none; }
  .polje-cilja { flex-direction: column; }
  .polje-cilja input { max-width: none; }
  .polje-cilja button { width: 100%; }
  .rezultat-sta-ako strong { font-size: 2.2rem; }
}

/* ---------- Podešavanja (v0): odjeljci sa menijem lijevo (na telefonu traka gore), kartice izbora, prekidači ---------- */
.podesavanja-mreza { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.podesavanja-sadrzaj { display: grid; gap: 1.25rem; max-width: 48rem; min-width: 0; }
.odjeljci-podesavanja { position: sticky; top: 1rem; }
.odjeljci-podesavanja ul { display: grid; gap: 0.15rem; margin: 0; padding: 0; }
.odjeljci-podesavanja li { margin: 0; list-style: none; }
.odjeljci-podesavanja a {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.75rem; border-radius: var(--pico-border-radius);
  font-size: 0.925rem; font-weight: 500; color: var(--pico-muted-color); text-decoration: none;
}
.odjeljci-podesavanja a .ikona { width: 1rem; height: 1rem; flex: none; }
.odjeljci-podesavanja a:hover, .odjeljci-podesavanja a[aria-current] { background: var(--pico-card-sectioning-background-color); color: var(--pico-h1-color); }
.odjeljci-podesavanja a[aria-current] .ikona { color: var(--pico-primary); }

.odjeljak {
  margin: 0; padding: 1.25rem; scroll-margin-top: 1rem;
  border: 1px solid var(--pico-muted-border-color); border-radius: calc(var(--pico-border-radius) * 1.5);
  background: var(--pico-card-background-color); box-shadow: var(--pico-card-box-shadow);
}
.odjeljak > header { margin-bottom: 1rem; }
.odjeljak h2 { margin: 0; font-size: 1.15rem; text-align: left; }
.opis-odjeljka { display: block; margin: 0.3rem 0 0; font-size: 0.875rem; font-weight: 400; color: var(--pico-muted-color); }
.forma-odjeljka { display: grid; gap: 0.25rem; margin: 0; }
.forma-odjeljka > label, .forma-odjeljka > div > label, .dva-polja label, .tekstovi-racuna label { font-weight: 500; color: var(--pico-h1-color); }
.forma-odjeljka small { font-weight: 400; }
.dva-polja, .tekstovi-racuna { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.tekstovi-racuna { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1280px) { .tekstovi-racuna { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.podaci-poreza { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0 0; font-size: 0.875rem; }
.podaci-poreza > div {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.8rem; border-radius: 999px;
  border: 1px solid var(--pico-muted-border-color); background: var(--pico-card-sectioning-background-color);
}
.podaci-poreza dt { margin: 0; font-weight: 400; color: var(--pico-muted-color); }
.podaci-poreza dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--pico-h1-color); }

.pregled-racuna { margin: 0.5rem 0 0; border: 1px solid var(--pico-muted-border-color); border-radius: calc(var(--pico-border-radius) * 1.5); background: var(--pico-card-sectioning-background-color); }
.pregled-racuna > summary { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; font-size: 0.9rem; font-weight: 600; color: var(--pico-h1-color); }
.pregled-racuna > summary .ikona { width: 1rem; height: 1rem; color: var(--pico-primary); }
.pregled-racuna > summary::after { margin-left: auto; }
/* Račun je i u tamnoj temi bijel, kao na papiru. */
.papir-racuna { margin: 0 0.75rem 0.75rem; padding: 1rem; border-radius: var(--pico-border-radius); background: #fff; color: #333; font-size: 0.78rem; line-height: 1.5; }
.papir-racuna p { margin: 0; }
.papir-racuna img { float: right; max-height: 2.5rem; max-width: 45%; margin-left: 0.75rem; }
.papir-racuna [data-pregled="zaglavlje"] { text-align: center; color: #555; }
.papir-racuna .prvi-red { font-size: 0.9rem; font-weight: 700; color: #111; }
.papir-racuna .naziv-na-racunu { margin-top: 0.5rem; font-weight: 600; color: #111; }
.papir-racuna .stavke-racuna {
  clear: both; margin: 0.75rem 0 0.5rem; padding-top: 0.5rem; border-top: 1px dashed #bbb;
  text-align: center; font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: #999;
}
.papir-racuna [data-pregled="podnozje"] p + p { margin-top: 0.25rem; color: #555; }

.dno-odjeljka { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 0.75rem; padding-top: 1rem; border-top: 1px solid var(--pico-muted-border-color); }
.dno-odjeljka button { display: inline-flex; align-items: center; gap: 0.4rem; width: auto; margin: 0; }
.dno-odjeljka button .ikona { width: 1rem; height: 1rem; }
.nesnimljeno { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; color: var(--upozorenje-tekst); }
.nesnimljeno[hidden] { display: none; }
.nesnimljeno i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; }

.izbor-kartica { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin: 0 0 0.5rem; padding: 0; border: 0; }
.izbor-kartica[hidden] { display: none; }
.izbor-kartica > legend.glava-zbira { margin-bottom: 0.5rem; padding: 0; }
.kartica-izbora {
  display: flex; align-items: flex-start; gap: 0.75rem; margin: 0; padding: 0.85rem; cursor: pointer;
  border: 1px solid var(--pico-muted-border-color); border-radius: calc(var(--pico-border-radius) * 1.5);
  background: var(--pico-background-color); transition: border-color 0.15s, background-color 0.15s;
}
.kartica-izbora:hover { border-color: var(--pico-secondary-border, var(--pico-muted-color)); }
.kartica-izbora:has(input:checked) { border-color: var(--pico-primary-background); background: color-mix(in srgb, var(--pico-primary-background) 9%, var(--pico-background-color)); }
.kartica-izbora:has(input:focus-visible) { outline: 2px solid var(--pico-primary); outline-offset: 2px; }
.kartica-izbora > input { flex: none; margin: 0.15rem 0 0; }
.kartica-izbora strong { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; color: var(--pico-h1-color); }
.kartica-izbora strong .ikona { width: 1rem; height: 1rem; color: var(--pico-primary); }
.kartica-izbora .opis { display: block; margin-top: 0.15rem; font-size: 0.85rem; color: var(--pico-muted-color); }
/* Tema: umjesto kružića mala slika teme, a izabrana dobija kvačicu. */
.kartica-teme > input { position: absolute; opacity: 0; pointer-events: none; }
.kartica-teme strong .ikona { opacity: 0; }
.kartica-teme:has(input:checked) strong .ikona { opacity: 1; }
.uzorak-teme { display: flex; flex: none; width: 5.5rem; height: 3.75rem; overflow: hidden; border-radius: var(--pico-border-radius); border: 1px solid color-mix(in srgb, var(--pico-muted-color) 35%, transparent); }
.uzorak-teme i { display: block; }
.uzorak-teme .bocna { width: 1.3rem; }
.uzorak-teme > span { display: flex; flex: 1; flex-direction: column; }
.uzorak-teme .gore { height: 0.75rem; }
.uzorak-teme .dugo { height: 0.5rem; margin: 0.45rem 0.35rem 0.25rem; border-radius: 2px; }
.uzorak-teme .kratko { width: 2rem; height: 0.35rem; margin: 0 0.35rem; border-radius: 2px; opacity: 0.5; }

.prekidac-odjeljka { margin: 0; }
.prekidac-odjeljka label { display: flex; align-items: flex-start; gap: 1rem; margin: 0; cursor: pointer; }
.prekidac-odjeljka input[role="switch"] { flex: none; margin: 0.2rem 0 0; }
.tekst-prekidaca { min-width: 0; }
.naslov-prekidaca { display: block; font-size: 1.15rem; font-weight: 700; color: var(--pico-h2-color); }
.pod-prekidac .naslov-prekidaca { font-size: 1rem; font-weight: 600; }
.oznaka-stanja {
  display: inline-block; margin-top: 0.5rem; padding: 0.05rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 500;
  border: 1px solid var(--pico-muted-border-color); color: var(--pico-muted-color);
}
.oznaka-stanja.ukljuceno { border-color: color-mix(in srgb, var(--uspjeh-tekst) 45%, transparent); background: var(--uspjeh-pozadina); color: var(--uspjeh-tekst); }
.pod-prekidac { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--pico-muted-border-color); }
.pod-prekidac > .opis-odjeljka { margin: 0 0 0.75rem; }

.brojac-dana { display: flex; align-items: center; gap: 0.75rem; margin: 0.4rem 0 0.5rem; color: var(--pico-muted-color); }
.korak-broja { display: inline-flex; align-items: stretch; overflow: hidden; border: 1px solid var(--pico-form-element-border-color); border-radius: calc(var(--pico-border-radius) * 1.5); background: var(--pico-form-element-background-color); }
.korak-broja button { display: grid; place-items: center; width: 2.75rem; margin: 0; padding: 0; border: 0; border-radius: 0; }
.korak-broja button .ikona { width: 1rem; height: 1rem; }
.korak-broja input { width: 3.5rem; margin: 0; padding: 0.5rem 0; border: 0; text-align: center; font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; background: transparent; box-shadow: none; }

.polje-sa-jedinicom.siroka input { padding-right: 4.75rem; }
.oznake-poruke { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.75rem; }
.oznake-poruke button { width: auto; margin: 0; padding: 0.3rem 0.85rem; border-radius: 999px; font-size: 0.875rem; }
.pregled-poruke { padding: 0.9rem; border-radius: calc(var(--pico-border-radius) * 1.5); border: 1px solid var(--pico-muted-border-color); background: var(--pico-card-sectioning-background-color); }
.pregled-poruke .glava-zbira { margin: 0; }
/* Oblačić u boji Vibera, isti u svim temama. */
.oblacic-poruke {
  max-width: 92%; margin: 0.5rem 0 0 auto; padding: 0.6rem 0.9rem; border-radius: 1rem 1rem 0.25rem 1rem;
  background: #7360f2; color: #fff; font-size: 0.875rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
}
.oblacic-poruke strong { color: #fff; }

.trenutni-logo { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid var(--pico-muted-border-color); border-radius: calc(var(--pico-border-radius) * 1.5); background: var(--pico-card-sectioning-background-color); }
.trenutni-logo img { max-height: 5rem; max-width: 100%; padding: 0.35rem; border-radius: var(--pico-border-radius); background: #fff; }
.trenutni-logo p { margin: 0; font-size: 0.875rem; color: var(--pico-muted-color); }
.trenutni-logo form { margin: 0 0 0 auto; }
.trenutni-logo button, .izbor-fajla [role="button"], .izbor-fajla button { display: inline-flex; align-items: center; gap: 0.5rem; width: auto; margin: 0; }
.trenutni-logo .ikona, .izbor-fajla .ikona { width: 1rem; height: 1rem; flex: none; }
.ucitaj-logo { display: grid; gap: 0.5rem; margin: 1rem 0 0; }
.ucitaj-logo > label { margin: 0; font-weight: 500; color: var(--pico-h1-color); }
.izbor-fajla { display: flex; gap: 0.5rem; }
.izbor-fajla [role="button"] { flex: 1; min-width: 0; justify-content: flex-start; }
.izbor-fajla [role="button"] span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.greska-loga { margin: 0; font-size: 0.875rem; color: var(--greska-tekst, var(--pico-del-color)); }
.novi-logo { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border: 1px dashed var(--pico-muted-border-color); border-radius: calc(var(--pico-border-radius) * 1.5); }
.novi-logo[hidden] { display: none; }
.novi-logo img { max-height: 4rem; max-width: 50%; padding: 0.25rem; border-radius: var(--pico-border-radius); background: #fff; }
.novi-logo p { margin: 0; font-size: 0.875rem; color: var(--pico-muted-color); }
.savjeti-loga { margin: 1rem 0 0; border: 1px solid var(--pico-muted-border-color); border-radius: calc(var(--pico-border-radius) * 1.5); background: var(--pico-card-sectioning-background-color); }
.savjeti-loga > summary { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; font-size: 0.9rem; font-weight: 600; color: var(--pico-h1-color); }
.savjeti-loga > summary .ikona { width: 1rem; height: 1rem; color: var(--upozorenje-tekst); }
.savjeti-loga > summary::after { margin-left: auto; }
.savjeti-loga ul { margin: 0; padding: 0 1rem 1rem 2.25rem; font-size: 0.875rem; color: var(--pico-muted-color); }
.savjeti-loga li { margin-bottom: 0.3rem; }

/* Do 1023px: meni odjeljaka postaje traka sa dugmićima koja ostaje gore. */
@media (max-width: 1023px) {
  .podesavanja-mreza { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .podesavanja-sadrzaj { max-width: none; }
  .odjeljci-podesavanja {
    top: 0; z-index: 15; margin: 0 -1rem; padding: 0.6rem 1rem;
    background: color-mix(in srgb, var(--pico-background-color) 94%, transparent); backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--pico-muted-border-color);
  }
  .odjeljci-podesavanja ul { display: flex; gap: 0.5rem; overflow-x: auto; scrollbar-width: none; }
  .odjeljci-podesavanja ul::-webkit-scrollbar { display: none; }
  .odjeljci-podesavanja li { flex: none; }
  .odjeljci-podesavanja a {
    min-height: 2.5rem; padding: 0 0.9rem; border-radius: 999px; font-size: 0.875rem;
    border: 1px solid var(--pico-muted-border-color); background: var(--pico-card-background-color);
  }
  .odjeljci-podesavanja a .ikona { display: none; }
  .odjeljci-podesavanja a[aria-current] {
    border-color: var(--pico-primary-background);
    background: color-mix(in srgb, var(--pico-primary-background) 14%, var(--pico-card-background-color));
  }
  .odjeljak { scroll-margin-top: 4.25rem; }
}
@media (max-width: 767px) {
  .odjeljak { padding: 1rem; }
  .dva-polja, .izbor-kartica { grid-template-columns: minmax(0, 1fr); }
  .izbor-fajla { flex-direction: column; }
  .izbor-fajla button { width: 100%; justify-content: center; }
  .trenutni-logo form { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .kartica-izbora { transition: none; } }
.odjeljak .polje-sa-jedinicom { margin-top: 0.35rem; }
.odjeljak .polje-sa-jedinicom input { margin: 0; }
.odjeljak .polje-sa-jedinicom > span { top: 50%; }
.odjeljak .polje-sa-jedinicom + small { display: block; margin-top: 0.35rem; }
.dva-polja > label:has(.polje-sa-jedinicom) { margin-bottom: var(--pico-spacing); }
.ucitaj-logo { position: relative; }
.ucitaj-logo input[type="file"].sr-only { left: 0; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; }