/* Dvorba — zajednicke komponente. Izvor: packages/tokens/src/komponente.ts */

/* ─────────────────────────────  0. temelj  ───────────────────────────── */

* { box-sizing: border-box; margin: 0; padding: 0; }

body.ruka, body.stol {
  min-height: 100dvh;
  background: var(--paper); color: var(--ink);
  font-family: var(--text);
  font-size: var(--slovo); line-height: var(--red);
  -webkit-font-smoothing: antialiased;
  /* Jedna brojka za sav pokret u proizvodu. Dovoljno dugo da se promjena
     vidi kao promjena, dovoljno kratko da ne kasni za prstom. */
  --prelaz: 170ms;
}

/* Zrno papira. Revizija 10.8., nalaz 10: --grain je stajao u tokenima i
   koristio se SAMO na sanku, pa je papir ondje bio papir, a svugdje drugdje
   prazna ploha preglednika.

   Ista sprava kao na sanku (apps/staff/views/sank.eta): ploha preko cijelog
   okna, bez dodira, mijesana s podlogom. Zrno je crno-bijeli sum s pokrivnom
   moci od 5,5 %, pa se svjetlina pomakne za oko tri desetinke posto — manje
   od zaokruzivanja u mjerenju kontrasta, a ploha prestane izgledati kao
   prazan bijeli list.

   Svojstvo pointer-events: none je nosivi dio, ne opreznost: ploha stoji iznad
   cijelog zaslona i bez toga bi progutala svaki dodir na njemu. */
body.ruka::after, body.stol::after {
  content: ""; position: fixed; inset: 0;
  background: var(--grain);
  pointer-events: none; mix-blend-mode: overlay;
}
/* Na papiru zrno nema sto raditi — pisac ga ispise kao sivu plohu preko
   cijele stranice. Upute za osoblje (upute.eta) ovaj list ionako ne ucitavaju,
   ali panel se s vremena na vrijeme ispise. */
@media print {
  body.ruka::after, body.stol::after { display: none; }
}

/* Zaslon u ruci: gost i osoblje. Krupnije slovo, meta za mokar prst. */
body.ruka {
  --slovo: 17px; --red: 1.5;
  --g-vis: var(--tap); --g-sir: 100%; --g-rub: var(--r-m); --g-slovo: 18px;
  --g-obris: var(--crta-d); --g-razmak: 10px;
  --p-sir: 100%; --p-vis: var(--tap); --p-rub: var(--r-m); --p-obris: var(--crta-d) solid var(--rule);
  --p-plast: var(--card); --p-uvlaka: 0 16px; --p-slovo: 17px;
  /* Obrub kartice je 1 px otkad kartica nosi sjenu (razina 1): debeo obrub i
     sjena zajedno su dva puta ista rijec. */
  --k-rub: var(--r-m); --k-obris: 1px;
  --c-uvlaka: 3px 10px; --c-slovo: 13px;
  --m-rub: var(--r-m); --m-slovo: 15px;
  --h1: 27px; --h1-dno: 6px; --h1-raz: -.03em;
  --sirina: 27rem;
  --kv: 24px; --kv-rub: 7px; --kv-znak: 15px; --kv-tocka: 11px;
}
/* Zaslon za stolom: panel lokala i Aller panel. Mis, ne prst. */
body.stol {
  /* Sirina bocne trake izbornika (odjeljak 11). Stoji ovdje jer je iz nje
     racunata i pruga koja traku boji po cijeloj visini stranice. */
  --traka: 15rem;
  --slovo: 15px; --red: 1.55;
  --g-vis: 40px; --g-sir: auto; --g-rub: var(--r-s); --g-slovo: 15px;
  --g-obris: 1px; --g-razmak: 8px;
  --p-sir: auto; --p-vis: 36px; --p-rub: var(--r-s); --p-obris: 1px solid var(--rule-2);
  --p-plast: var(--white); --p-uvlaka: 0 10px; --p-slovo: 15px;
  --k-rub: var(--r-m); --k-obris: 1px;
  --c-uvlaka: 2px 9px; --c-slovo: 12px;
  --m-rub: var(--r-s); --m-slovo: inherit;
  --h1: 22px; --h1-dno: 4px; --h1-raz: normal;
  --sirina: 56rem;
  /* Kvacica je bila 13x13 px (nalaz 8) — velicina koju je odredio Windows.
     Osamnaest je gornja granica prije nego popis alergena od cetrnaest redaka
     pocne izgledati kao obrazac za porezni ured. Meta ostaje oznaka uz nju. */
  --kv: 18px; --kv-rub: 5px; --kv-znak: 11px; --kv-tocka: 8px;
}

/* ───────────────────────────  1. okvir zaslona  ──────────────────────── */

/* Jedan zaslon, jedna poruka, sve po sredini. */
body.sred { display: grid; place-items: center; padding: 24px; }
body.sred > main { width: 100%; max-width: var(--sirina); text-align: center; }

/* Stranica koja tece: zaglavlje, sadrzaj, dno. */
body.tok { --rub: 20px 20px 40px; }

/* Zasloni osoblja: bez zaglavlja panela, sadrzaj u stupcu. */
body.stupac {
  display: flex; flex-direction: column; align-items: center;
  padding: 20px 20px 40px;
}
body.stupac > main { --rub: 0; }

main { width: 100%; max-width: var(--sirina); margin: 0 auto; padding: var(--rub, 28px 24px); }

/* Zaglavlje panela. Rub racuna iz --sirina, pa znak i naslov stoje tocno
   iznad sadrzaja; bez toga zaglavlje visi lijevo, a sadrzaj je po sredini. */
header {
  background: var(--card); border-bottom: 1px solid var(--rule);
  padding: 16px max(24px, calc((100% - var(--sirina)) / 2 + 24px));
  display: flex; align-items: center; gap: 12px;
}
header strong { font-family: var(--disp); font-size: 16px; }
/* Ime SUSTAVA uz znak nosi razred .sustav, i to je i dalje bitno: u zaglavlju
   zna stajati i ime lokala i naslov zaslona (poslovnica, dnevna), a logotip
   pripada SAMO imenu sustava — tude ime nije naljepnica. Zato golo
   "header strong" ne smije nositi ni verzal ni razmak; cuva komponente.test.ts.

   Sam izgled logotipa od 14.8.2026. NIJE ovdje nego u tokens/logotip.ts, i
   posluzuje se s vlastite rute (/logotip.css). Razlog: uz njega ide i pismo
   (Forum), a ovaj list nose i svi gostovi zasloni — na kojima logotipa nema.
   Dok je pravilo stajalo ovdje, ime sustava je pisalo pismom TEME i lokal je
   birao kako se zove proizvod. */
/* Znak nosi boju lokala. Sunce nije za ukras, pa ni za znak.
   Plocica ostaje ista; od 14.8. u njoj stoji TOCKA (tokens/znak.ts) umjesto
   Orbite, a Orbita je dotad stajala umjesto polumjeseca iz pisma. Sredina je
   vec bila namjestena (place-items). */
header .znak {
  width: var(--tap-admin); height: var(--tap-admin); border-radius: var(--r-s);
  background: var(--sea); color: var(--on-sea);
  display: grid; place-items: center; font-family: var(--disp);
}
/* Poveznica u zaglavlju je meta za dodir kao i sve ostalo — sam tekst je
   visok 22 px, pa ga mis pogodi tek iz drugog pokusaja. */
header a {
  color: var(--sea-d); font-size: 14px;
  display: inline-flex; align-items: center;
  min-height: var(--tap-admin); padding: 0 4px;
}
header nav { margin-left: auto; display: flex; gap: 16px; align-items: center; }
header > a:last-child { margin-left: auto; }
/* Stanje zaslona u zaglavlju (broj nespremljenih promjena u uredniku menija)
   stoji desno, kao i tko je prijavljen. Otkad veze iz zaglavlja nose izbornik
   (odjeljak 11), cip je ondje jedino sto je ostalo. */
header > .cip { margin-left: auto; }
/* Naslov zaslona i recenica ispod njega. Zaslon koji odstupa mijenja brojku
   (--h1), ne cijelo pravilo. */
/* Tezina naslova dolazi iz teme, jer je to ono sto pismo stvarno ima:
   Marcellus postoji samo u 400, pa bi zadanih 700 iz preglednika bio potez
   koji je on sam podebljao. Sunkissed ostaje na 700 — isto sto je i dosad
   crtao <h1> bez ijednog pravila. */
h1 {
  font-family: var(--disp); font-size: var(--h1); font-weight: var(--tez-naslov);
  letter-spacing: var(--h1-raz); margin-bottom: var(--h1-dno);
}
/* Sto ovaj zaslon radi. Uza od stupca, jer se dugacak redak lose cita. */
.uvod { color: var(--faint); margin-bottom: 22px; max-width: 46rem; }

/* Tko je prijavljen. Stoji desno, kao i povratna veza. */
header .tko {
  margin-left: auto; font-family: var(--num); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--sea-d);
}

/* The active operator remains visible on every admin page, including a shared tablet. */
body.spanel > header { flex-wrap: wrap; }
.admin-pristup {
  display: flex; flex-wrap: wrap; flex: 1 1 100%; min-width: 0; align-items: center;
  justify-content: space-between; gap: 12px;
  border-top: 1px solid var(--rule); padding-top: 12px;
}
.admin-identitet { min-width: 0; flex: 1 1 15rem; display: grid; gap: 3px; }
.admin-radnje { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.admin-radnje form { margin: 0; }
.admin-radnje button { min-height: 48px; padding: 0 12px; white-space: nowrap; }
.admin-identitet .opis { font-size: 13px; line-height: 1.4; color: var(--faint); }
.admin-identitet strong { overflow-wrap: anywhere; line-height: 1.4; }
.admin-pristup a {
  flex: none; min-height: 48px; padding: 0 12px; border-radius: var(--r-s);
  background: var(--sea-t); text-decoration: none;
}
@media (min-width: 768px) {
  .admin-pristup { flex: 0 1 auto; margin-left: auto; max-width: 32rem; border-top: 0; padding-top: 0; }
}
@media print { .admin-pristup { display: none; } }

/* ─────────────────────────────  2. dugme  ────────────────────────────── */
/*
   Tri stanja, tri imena, jedna visina po svijetu:
     (bez klase)  glavno — ploha boje lokala, radnja koju zaslon nudi
     .tiho        sporedno — obris; jednako dohvatljivo, ali ne i jednako tesko
     .opasno      brise ili gasi — obris u boji sunca, jer trazi zastoj
   .uz je gumb u retku tablice: nizi, da redak ne naraste.
*/
button, .gumb {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--g-razmak);
  width: var(--g-sir); min-height: var(--g-vis); padding: 0 20px;
  border: 0; border-radius: var(--g-rub);
  background: var(--sea); color: var(--on-sea);
  font-family: var(--disp); font-size: var(--g-slovo); text-decoration: none;
  cursor: pointer; -webkit-appearance: none; appearance: none;
}
button.tiho, .gumb.tiho {
  background: transparent; color: var(--ink);
  border: var(--g-obris) solid var(--rule-2);
}
button.opasno, .gumb.opasno {
  background: transparent; color: var(--sun-ink);
  border: var(--g-obris) solid var(--sun-deep);
}
button.uz, .gumb.uz {
  width: auto; min-height: var(--tap-admin); padding: 0 12px; font-size: 14px;
}
/* Gumb koji ne uzima cijeli redak. U ruci je puna sirina pravilo, a ne
   iznimka — ovo je za zaslon na kojem stoji jedan jedini gumb, po sredini. */
button.usko, .gumb.usko { width: auto; min-width: var(--tap); }
button:disabled, .gumb[aria-disabled=true] { opacity: .55; cursor: not-allowed; }
/* Iznos unutar gumba stoji desno, u brojcanom pismu — da se cijena ne
   razlijeva. Od revizije 11.8. to je isto pismo kao tekst; sirinu drze
   tabularne cifre, ne monospace. */
button .t, .gumb .t { margin-left: auto; font-family: var(--num); font-size: 16px; }

/* ────────────────────────────  3. kartica  ───────────────────────────── */

/* Razina 1 dubine: kartica je jedan sloj iznad papira. Sjena je tinta teme,
   a ono sto plohu stvarno podize je svijetla ivica na gornjem rubu — sjena
   sama daje samo prljavstinu ispod. Ivica ide PRVA jer je unutarnja.
   Od 13.8. oboje stize kao --sloj-1: u tamnoj kuci sjene nema, a niz s
   „none" u sebi ne bi bio sjena manje nego pravilo manje. */
.kartica {
  background: var(--card); border: var(--k-obris) solid var(--rule);
  border-radius: var(--k-rub); padding: 18px 20px; margin-bottom: 16px;
  box-shadow: var(--sloj-1);
}
.kartica > h2 {
  font-family: var(--disp); font-size: 17px; font-weight: var(--tez-naslov);
  margin-bottom: 6px;
}
/* Sto kartica radi. Stoji ispod naslova, prije polja. */
.kartica > p.sto { color: var(--faint); margin-bottom: 12px; }
/* Poveznica u kartici nosi boju lokala, ne preglednikovu plavu. */
.kartica a { color: var(--sea-d); }
/* Kartica koja trazi potez. Jedina koja smije nositi sunce. */
.kartica.pazi { border-color: var(--sun-deep); }
.kartica.pazi > h2 { color: var(--sun-ink); }

/* ──────────────────────────  4. cip / pilula  ────────────────────────── */
/*
   Cip je stanje u jednoj rijeci. Boja mu je znacenje, ne ukras:
     (bez klase)  uredno ili u tijeku — more
     .pazi        iznimka koja trazi potez — svijetlo sunce
     .hitno       ne smije se previdjeti — puna ploha sunca
     .tiho        podatak bez tezine — crta
   Rijec uvijek stoji uz boju: boja nije jedini nositelj znacenja.
*/
/* Kut cipa dolazi iz teme: pilula na plazi i u hotelu, plocica od 10 px u
   gradu. Razina 0 dubine — cip ne nosi sjenu ni u jednoj kuci. */
.cip {
  display: inline-block; padding: var(--c-uvlaka); border-radius: var(--cip-rub);
  background: var(--sea-t); color: var(--sea-d);
  font-size: var(--c-slovo); white-space: nowrap;
}
.cip.pazi  { background: var(--sun-t); color: var(--sun-ink); }
.cip.hitno { background: var(--sun-deep); color: var(--white); }
.cip.tiho  { background: var(--rule); color: var(--ink-2); }
/* Cip sa znamenkama (sifra, iznos) — da se brojke ne razlijevaju. */
.cip.broj { font-family: var(--num); }

/* ────────────────────────  5. polje obrasca  ─────────────────────────── */
/*
   Nabrojeni su tipovi, ne golo >input< — inace pravilo pogodi i kvacicu, i
   biranje boje, i polje za datoteku, kojima ova kutija ne pristaje.

   :not([type]) je tu jer odabirnik po svojstvu gleda ATRIBUT, a ne ono sto
   preglednik podrazumijeva: <input name=iznos> je tekstualno polje, ali
   input[type=text] ga ne pogada — i ostane gola crta bez okvira.
*/
input:not([type]), input[type=text], input[type=number], input[type=password],
input[type=tel], input[type=email], input[type=search], input[type=time],
input[type=date], input[type=datetime-local], select, textarea {
  /* U ruci polje uzima cijeli redak; za stolom ga siri sadrzaj retka, jer
     tri polja stoje jedno uz drugo. Bez ovoga polje s krupnim pismom
     (PIN, kod) razvuce stranicu na svoju zadanu sirinu od dvadeset znakova. */
  width: var(--p-sir);
  min-height: var(--p-vis); padding: var(--p-uvlaka);
  border: var(--p-obris); border-radius: var(--p-rub);
  background: var(--p-plast); color: var(--ink);
  font-family: var(--text); font-size: var(--p-slovo);
}
textarea { padding: 12px 14px; line-height: 1.45; resize: vertical; }

/* Obrub pri kretanju tipkovnicom. Sunce jer je to stanje koje trazi potez —
   i jer se jedino ono vidi i na morskoj plohi i na pijesku. */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--sun); outline-offset: 2px; border-color: var(--sea);
}

/* Natpis iznad polja. Nabrojeni su i <label> i <div>, jer skupina kvacica
   nije jedan natpis za jedno polje — a golo .polje bi pogodilo i <input>
   koji na gostovu zaslonu nosi to isto ime. */
label.polje, div.polje { display: flex; flex-direction: column; gap: 4px; }
label.polje > span, div.polje > span { color: var(--faint); font-size: 13px; }
/* Kvacica je redak, ne stupac: natpis stoji uz kvadratic. */
label.kvacica {
  display: flex; align-items: center; gap: 8px; min-height: var(--tap-admin);
}

/* ─────────  5c. kontrole koje inace crta operativni sustav  ───────────── */
/*
   Revizija 11.8., nalaz 8: kroz jedanaest zaslona panela stajalo je 249
   kontrola koje nije crtao proizvod nego Windows — 221 kvacica od 13x13 px,
   11 padajucih popisa, 19 polja za datoteku s engleskim „Choose File · No
   file chosen", 15 polja za datum i vrijeme, biranje boje i radio s plavim
   naglaskom sustava, i to bas na zaslonu „Izgled lokala". Ondje vlasnik bira
   pjescano-tirkiznu paletu i gleda kako mu preglednik preko nje crta plavo.

   Sve ide kroz appearance:none i kroz tokene. Nijedna slika, nijedan
   data: URI i nijedan vanjski zahtjev: kvacica je oblik izrezan iz plohe
   (clip-path), strelica popisa su dva preklopljena preljeva u currentColor.
   Boja se time i dalje mijenja s bojom lokala — a slika bi je zamrznula.

   Sto se NE dira: velicina slova i visina retka polja (odjeljak 5), jer to
   nije crtao sustav nego mi.
*/

/* Kvacica i radio. Kutija je manja od mete za dodir i to je u redu: klikabilna
   je cijela oznaka uz nju (label.kvacica ima min-height mete), pa se pogada
   rijec, ne kvadratic. Provjereno mjerenjem, ne pretpostavljeno. */
input[type=checkbox], input[type=radio] {
  appearance: none; -webkit-appearance: none;
  flex: none; margin: 0;
  width: var(--kv); height: var(--kv);
  border: var(--crta-d) solid var(--rule-2); border-radius: var(--kv-rub);
  background: var(--white);
  display: inline-grid; place-content: center;
  vertical-align: text-bottom; cursor: pointer;
}
input[type=radio] { border-radius: 50%; }
/* Znak unutra je ploha boje teksta na moru, izrezana u kvacicu odnosno tocku.
   Stoji uvijek, samo je smanjen na nulu — tako se pojavljivanje moze
   prelijevati, a isprazan kvadratic nema sto crtati. */
input[type=checkbox]::before, input[type=radio]::before {
  content: ""; transform: scale(0); background: var(--on-sea);
  transition: transform var(--prelaz) ease-out;
}
input[type=checkbox]::before {
  width: var(--kv-znak); height: var(--kv-znak);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
}
input[type=radio]::before {
  width: var(--kv-tocka); height: var(--kv-tocka); border-radius: 50%;
}
input[type=checkbox]:checked, input[type=radio]:checked {
  background: var(--sea); border-color: var(--sea);
}
input[type=checkbox]:checked::before, input[type=radio]:checked::before {
  transform: scale(1);
}
input[type=checkbox]:disabled, input[type=radio]:disabled {
  opacity: .55; cursor: not-allowed;
}

/* Padajuci popis. Strelica su dvije polovice kvadrata u boji teksta, pa
   nasljeduje --ink i mijenja se s temom; slika bi ostala ista i na tamnoj
   podlozi. Desna uvlaka je razmak za nju — bez nje najduza stavka udari u
   strelicu. */
select {
  appearance: none; -webkit-appearance: none;
  padding-right: 32px;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 17px center, right 12px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}
select:disabled { opacity: .55; cursor: not-allowed; }

/* Polje za datoteku. Preglednik u njega sam crta gumb i natpis, i to na
   SVOM jeziku — hrvatski vlasnik dobiva „Choose File · No file chosen", i to
   cetiri puta na zaslonu prijevoda. Taj se natpis ne da promijeniti ni
   stilom ni atributom „lang", pa polje ostaje na svom mjestu i prozirno, a
   ono sto se vidi je nas <span> s tekstom iz rjecnika.

   Prozirno, a ne skriveno: tako ostaje dohvatljivo tipkovnicom i vidljivo
   pregledniku, i „required" i dalje javlja gresku na pravom mjestu.

   Zapis:  <label class="odabir">
             <input type="file" ...>
             <span data-odabrano="…">Odaberi datoteku</span>
           </label>
*/
.odabir { position: relative; display: inline-flex; align-items: center; }
.odabir input[type=file] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
  /* Preglednikov gumb je sirok oko 180 px — vise nego nas natpis, pa bi polje
     ostalo trajno „rezano" i kad je prozirno. Nula gasi taj sadrzaj; klik i
     tipkovnica i dalje rade. */
  font-size: 0;
}
.odabir > span {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--tap-admin); padding: 0 14px;
  border: 1px solid var(--rule-2); border-radius: var(--r-s);
  background: var(--white); color: var(--ink);
  font-family: var(--disp); font-size: 14px; cursor: pointer;
}
/* Odabrana datoteka. Njezino ime crta preglednik i mi ga nemamo cime
   procitati bez skripte — ali „required" cini polje valjanim tek kad je
   datoteka odabrana, pa se bar POTVRDA moze dati bez ijednog retka koda.
   Tekst potvrde dolazi iz rjecnika, kroz data-odabrano. */
.odabir input:required:valid + span {
  border-color: var(--sea); color: var(--sea-d);
}
.odabir input:required:valid + span::after {
  content: "· " attr(data-odabrano); font-family: var(--text);
}
.odabir input:focus-visible + span { outline: 3px solid var(--sun); outline-offset: 2px; }

/* Biranje boje. Sustav oko uzorka crta svoj okvir i svoj razmak; ovdje ostaje
   samo nasa ploha sa zaobljenjem kao i sva ostala polja. */
input[type=color] {
  appearance: none; -webkit-appearance: none;
  width: 64px; height: var(--tap-admin); padding: 3px;
  border: 1px solid var(--rule-2); border-radius: var(--r-s);
  background: var(--white); cursor: pointer;
}
input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
input[type=color]::-webkit-color-swatch { border: 0; border-radius: 7px; }

/* Datum i vrijeme. Kutija je nasa (odjeljak 5), ali RASPORED polja unutra —
   mm/dd/yyyy naspram dd.mm.gggg — crta preglednik po jeziku svog sucelja, ne
   po „lang" stranice ni po zaglavlju zahtjeva. Izmjereno: ni jedno ni drugo
   ne mijenja nista. Preurediti ih CSS-om se moze, ali tipkanje i dalje ide
   redom iz DOM-a, pa bi covjek utipkao dan u polje mjeseca — a tiho kriv
   datum je gore od americkog. Ovdje se zato sredi ono sto se smije: znak za
   otvaranje biraca prestaje biti sivi umetak sustava. */
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator {
  opacity: .55; cursor: pointer; padding: 2px; border-radius: 4px;
}
input[type=date]::-webkit-calendar-picker-indicator:hover,
input[type=time]::-webkit-calendar-picker-indicator:hover,
input[type=datetime-local]::-webkit-calendar-picker-indicator:hover {
  opacity: 1; background: var(--sea-t);
}

/* ─────────────────────  5b. brojac kolicine (− n +)  ─────────────────── */
/*
   Revizija 11.8., nalaz 9: kolicina je u kosarici imala − i +, a na zaslonu
   stavke golo brojcano polje. Isti izbor, dvije kontrole — a na plazi, mokrim
   prstom, tipkovnica je najgora od svih. Sprava je do sada stajala samo u
   kosarici (.redak .q); ovdje je jednom, za oba zaslona.

   Radi bez skripte na oba mjesta: u kosarici su to dva mala obrasca koja salju
   POST, na stavci dva gumba koja isti obrazac posalju kao GET natrag na
   zaslon stavke. Zato je ovdje samo izgled — ponasanje ostaje u predlosku.

   Modifikator .q.puno je isti brojac kad je on glavna kontrola zaslona: uzima
   cijeli redak i visinu mete kao i ostale kutije oko sebe.
*/
.q { display: flex; align-items: center; gap: 2px; flex: none; }
.q b { font-family: var(--num); font-size: 16px; min-width: 1.4rem; text-align: center; }
.q button {
  width: 40px; min-width: 40px; height: 44px; min-height: 44px; padding: 0;
  border: var(--crta-d) solid var(--rule); border-radius: var(--r-s);
  background: var(--card); color: var(--ink); font-size: 20px; line-height: 1;
}
.q button:disabled { opacity: .35; cursor: default; }

.q.puno { width: 100%; gap: 8px; }
.q.puno button {
  width: var(--tap); min-width: var(--tap); height: var(--tap); font-size: 26px;
}
.q.puno b { flex: 1; font-size: 22px; }

/* ────────────────────────────  6. poruka  ────────────────────────────── */
/*
   Traka iznad sadrzaja koja kaze sto se upravo dogodilo.
     (bez klase)  islo je kako treba — more
     .pazi        treba nesto uciniti — sunce
     .tiho        zakljucano ili nedostupno — isprekidan obris, bez boje
*/
.poruka {
  padding: 12px 16px; border-radius: var(--m-rub); margin-bottom: 16px;
  background: var(--sea-t); color: var(--sea-d); font-size: var(--m-slovo);
}
.poruka.pazi { background: var(--sun-t); color: var(--sun-ink); }
.poruka.tiho {
  background: transparent; border: 1px dashed var(--rule-2); color: var(--faint);
}
/* Greska nosi usklicnik ispred teksta: znak i recenica stoje jedno uz drugo,
   a ne jedno pod drugim. */
.poruka.greska { display: flex; gap: 10px; align-items: flex-start; }
.poruka.greska b { font-size: 18px; line-height: 1.2; }

/* ──────────────────────────  7. prazno mjesto  ───────────────────────── */

.prazno {
  background: var(--card); border: var(--crta-d) dashed var(--rule-2);
  border-radius: var(--r-m); padding: 22px; text-align: center; color: var(--faint);
}

/* ───────────────────────────  8. tablica  ────────────────────────────── */
/*
   Dva oblika, oba odavde: >table< je izvjestaj koji se cita, >table.gusto<
   popis u kojem se uredjuje — uzi redak i bez plohe, jer uz svaki redak
   stoji gumb. Tablice postoje samo u panelu.
*/
table { width: 100%; border-collapse: collapse; background: var(--card); }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--rule); }
th {
  font-family: var(--num); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--sea-d); font-weight: 400;
}
/* Brojcani stupac. Revizija 11.8., nalaz 3: poravnanje je stajalo samo na
   vrijednosti, pa je zaglavlje ostajalo lijevo a brojka bjezala desno —
   devetnaest parova kroz pet tablica, na najsirem stupcu 302 px razmaka.
   Oko cita stupac odozgo prema dolje i trazi naslov iznad brojke, ne
   dijagonalno. Zato poravnanje nosi STUPAC, i zaglavlje i vrijednost. */
th.n, td.n { text-align: right; }
td.n { font-family: var(--num); }
td a { color: var(--sea-d); }

table.gusto { background: transparent; }
table.gusto th {
  color: var(--faint); font-size: 11px; letter-spacing: .14em;
  padding: 6px 10px 6px 0;
}
table.gusto td { padding: 7px 10px 7px 0; vertical-align: middle; }

/* Redak koji trazi potez. Boja je pojacanje rijeci u retku, ne zamjena. */
tr.pazi { background: var(--sun-t); }
tr.pazi td, tr.pazi td a { color: var(--sun-ink); }

/* ──────────────────  9. zaglavlje zaslona u ruci  ────────────────────── */
/*
   Ime lokala, logo ako ga ima, prekidac jezika i crta ispod. Stoji na svakom
   gostovom zaslonu; do sada je stajao u dvije kopije (_glava i mjesto), pa je
   isti redak bio 14 px na osam zaslona i 15 px na meniju.
*/
/* Razmak verzala u brend-retku dolazi iz teme: plaza .12em, hotel .18em,
   grad .1em. Verzal bez razmaka je zbijen, a s previse razmaka je natpis na
   izlogu — svaka kuca to mjeri drukcije. */
.brend {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--disp); font-size: 14px;
  letter-spacing: var(--raz-brend); text-transform: uppercase;
}
/* Znak sustava (tocka, 14.8.; dotad Orbita, a prije nje prazan krug u razredu
   imena "sunce" — a sunce je rezervirano za hitno i za znak se ne smije uzeti).
   Ovdje znak stoji uz ime LOKALA, pa nosi boju lokala i manji je od Orbite:
   prstena od 20 px vise nema, ostala je tocka od 10. Oblik dolazi iz
   tokens/znak.ts, jednim izvorom za sva mjesta. */
.brend .tacka { flex: none; display: block; }
/* Logo lokala je ogranicen visinom, pa velika datoteka ne mijenja izgled. */
.brend .logo { max-height: 40px; max-width: 45vw; flex: none; }
/* Crta ispod zaglavlja je NAJNAGLASENIJA crta na gostovu zaslonu, pa nosi
   temu doslovno: 2 px na plazi i u gradu, 1 px u hotelu. */
.crta { height: var(--crta-d); background: var(--ink); margin: 10px 0 16px; }

/* Prekidac jezika: JEDAN cip s trenutnim jezikom (M.S. 10.8. — pet oznaka je
   natrpalo vrh telefona). <details> radi bez skripte; jezik se ionako
   prepozna sam, pa je cip rezerva, ne komanda.

   Sam prekidac je razina 0 i ne nosi sjenu; popis koji se iz njega otvori je
   razina 2, jer lebdi nad sadrzajem (12.8.). */
.jezik-izbor { margin-left: auto; position: relative; }
.jezik-izbor summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-width: 44px; min-height: 44px; padding: 0 12px;
  font-family: var(--num); font-size: 12px; letter-spacing: .08em;
  color: var(--ink); border: 1px solid var(--rule); border-radius: var(--cip-rub);
}
.jezik-izbor summary::-webkit-details-marker { display: none; }
.jezik-izbor summary::marker { content: ''; }
.jezik-izbor[open] summary { background: var(--sea-t); border-color: var(--sea); }
.jezik-izbor .dolje { font-size: 9px; color: var(--sea-d); }
/* Razina 2: popis lebdi nad sadrzajem, pa ga od njega odvaja sjena, a ne
   debeo obrub. Do 12.8. je to bila crta od 2 px u punoj tinti — jedini nacin
   da se ploha odvoji dok sjena nije postojala. */
.jezik-lista {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 5;
  min-width: 11rem; padding: 4px;
  background: var(--card); border: 1px solid var(--rule-2); border-radius: var(--r-m);
  box-shadow: var(--sloj-2);
}
.jezik-lista a {
  display: flex; align-items: center;
  min-height: 44px; padding: 0 12px; border-radius: var(--r-s);
  color: var(--ink); text-decoration: none;
  font-family: var(--num); font-size: 13px; letter-spacing: .06em;
}
.jezik-lista a.sad { background: var(--sea-t); color: var(--sea-d); }

/* Nadnaslov iznad skupine: sto slijedi. Samo u ruci — u panelu istu ulogu
   nosi zaglavlje tablice, a klasa istog imena ondje znaci nesto drugo. */
body.ruka .oznaka {
  font-family: var(--num); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--sea-d); margin: 18px 0 8px;
}

/* ──────────────────  10. potvrda dodira i fokus  ─────────────────────── */
/*
   Revizija 10.8., nalaz 10: „nula transition/hover u cijelom proizvodu —
   nista ne potvrduje dodir". Gost na plazi pritisne „Naruci", nista se ne
   promijeni, pa pritisne opet.

   Mijenja se samo ono sto potvrduje dodir: boja plohe, boja crte i jedan
   piksel visine. Sve traje jednako (--prelaz), jer razlicita trajanja na
   istom zaslonu izgledaju kao kvar.

   Prelazak misa stoji u @media (hover: hover). Na dodir se :hover zalijepi
   i ostane dok se ne dodirne nesto drugo, pa bi gumb ostao „upaljen" i
   poslije radnje. Pritisak radi na oboma i on je ovdje glavni — on je jedini
   koji kaze da je dodir primljen.
*/
button, .gumb, .kartica, summary, .jezik-lista a, .izbornik-lista a,
input:not([type]), input[type=text], input[type=number], input[type=password],
input[type=tel], input[type=email], input[type=search], input[type=time],
input[type=date], input[type=datetime-local], select, textarea {
  transition:
    background-color var(--prelaz) ease-out,
    border-color var(--prelaz) ease-out,
    color var(--prelaz) ease-out,
    transform var(--prelaz) ease-out;
}

@media (hover: hover) {
  button:hover:not(:disabled), .gumb:hover:not([aria-disabled=true]) {
    background: var(--sea-d);
  }
  button.tiho:hover:not(:disabled), .gumb.tiho:hover:not([aria-disabled=true]) {
    background: var(--sea-t); border-color: var(--sea);
  }
  /* Gumb koji brise vec nosi sunce; pod misem ga samo pojaca. */
  button.opasno:hover:not(:disabled), .gumb.opasno:hover:not([aria-disabled=true]) {
    background: var(--sun-t); border-color: var(--sun);
  }
  /* Brojac kolicine je obris, ne ploha: pod misem se ponasa kao .tiho gumb.
     Bez ovoga bi ga pregazilo opce pravilo iznad i − i + bi pod misem
     postali morska ploha s tamnim slovom na sebi. */
  .q button:hover:not(:disabled) { background: var(--sea-t); border-color: var(--sea); }
  /* Kartica koja je poveznica (popis lokala u Aller panelu). Ostale kartice
     nisu meta i pod misem se ne smiju ponasati kao da jesu. */
  a.kartica:hover { border-color: var(--sea); }
  .jezik-izbor summary:hover { border-color: var(--sea); }
  .jezik-lista a:hover { background: var(--sea-t); }
  /* Odjeljak panela pod misem. Ista ploha kao odabrani, jer je to ista
     obecana radnja — odabrani se od ostalih razlikuje i pismom, ne samo
     bojom (odjeljak 11). */
  .izbornik-lista a:hover { background: var(--sea-t); }
  .izbornik > summary:hover { border-color: var(--sea); }
  /* Polje pod misem najavi ono sto ce fokus i potvrditi. */
  input:not([type]):hover, input[type=text]:hover, input[type=number]:hover,
  input[type=password]:hover, input[type=tel]:hover, input[type=email]:hover,
  input[type=search]:hover, input[type=time]:hover, input[type=date]:hover,
  input[type=datetime-local]:hover, select:hover, textarea:hover {
    border-color: var(--sea);
  }
}

button:active:not(:disabled), .gumb:active:not([aria-disabled=true]),
summary:active, a.kartica:active {
  transform: translateY(1px);
}
button:active:not(:disabled), .gumb:active:not([aria-disabled=true]) {
  background: var(--sea-d);
}
button.tiho:active:not(:disabled), .gumb.tiho:active:not([aria-disabled=true]) {
  background: var(--sea-t); border-color: var(--sea);
}
button.opasno:active:not(:disabled), .gumb.opasno:active:not([aria-disabled=true]) {
  background: var(--sun-t); border-color: var(--sun);
}
.q button:active:not(:disabled) { background: var(--sea-t); border-color: var(--sea); }

/* Obrub pri kretanju tipkovnicom, sada za sve na sto se moze stati. Polja su
   ga imala jos u odjeljku 5; gumb i poveznica su uzimali preglednikov —
   tanak, plav i na morskoj plohi jedva vidljiv.

   Prsten se NE prelijeva. On je jedini znak gdje se covjek nalazi i mora
   biti ondje istog trena; prijelaz uz njega ima obrub polja, ne prsten. */
button:focus-visible, .gumb:focus-visible, a:focus-visible, summary:focus-visible,
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible,
input[type=file]:focus-visible {
  outline: 3px solid var(--sun); outline-offset: 2px;
}

/* ─────────────────────  11. izbornik panela  ─────────────────────────── */
/*
   Revizija 11.8., nalaz 7: „panel nema navigaciju". Umjesto nje je na
   pocetnoj stajala RECENICA od deset podvucenih poveznica visine 18 px i
   sirine 38-106 px, razdvojenih tockama — i to samo ondje. Iz „Izvjestaja" u
   „Meni" se islo natrag na pocetnu, pa u meni: tri poteza za jedan.
   Panel je u meduvremenu narastao na dvanaest zaslona.

   ── JEDAN POPIS, DVA OBLIKA ─────────────────────────────────────────────
   Isti <nav> je na sirokom ekranu bocna traka, a u ruci popis koji se otvara.
   Ne dvjema kopijama u predlosku (jedna bi se prije ili poslije razisla s
   drugom) nego jednim zapisom i jednim upitom o sirini.

   ── ZASTO <details> I ZASTO BEZ SKRIPTE ─────────────────────────────────
   Cijeli proizvod radi bez JavaScripta i to se ne krsi ni ovdje: otvaranje
   nosi <details>, isto kao prekidac jezika kod gosta i popover u uredniku
   menija. Na sirokom ekranu popis mora stajati otvoren i BEZ atributa 'open',
   jer ondje traka nije nesto sto se otvara — to radi ::details-content.

   Pravilo za sirok ekran zato stoji pod @supports: preglednik koji
   ::details-content ne poznaje NE dobiva traku sa skrivenim prekidacem (to bi
   bio panel bez ijedne veze), nego zadrzi popis koji se otvara. Losiji, ali
   ispravan zaslon.

   ── GDJE STOJI ──────────────────────────────────────────────────────────
   Raspored je mreza na <body class="stol spanel">: traka lijevo kroz obje
   redne trake, zaglavlje i sadrzaj desno. Zaglavlje racuna svoj rub iz
   '--sirina' i iz '100%', pa mora stajati NAD sadrzajem, ne nad cijelom
   stranicom — inace znak i naslov vise lijevo od teksta ispod njih.

   Sama traka je 'align-self: start' i ljepljiva, da popis ostane na zaslonu i
   na popisu mjesta od sto pedeset redaka. Boja trake zato ne moze stajati na
   njoj (visoka je koliko i popis) nego je pruga u podlozi stranice.
*/

/* Prekidac. U ruci je vidljiv, na sirokom ekranu ga nema. */
.izbornik { margin: 14px 20px 0; }
.izbornik > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: var(--tap-admin); padding: 0 14px;
  border: 1px solid var(--rule-2); border-radius: var(--r-s);
  background: var(--white); color: var(--ink);
  font-family: var(--disp); font-size: 15px;
}
.izbornik > summary::-webkit-details-marker { display: none; }
.izbornik > summary::marker { content: ''; }
/* Tri crte su ploha izrezana u tri trake — ne slika i ne znak iz pisma:
   slika bi zamrznula boju, a znak ne postoji u svakom pismu teme. */
.izbornik > summary::before {
  content: ""; flex: none; width: 15px; height: 11px; background: currentColor;
  clip-path: polygon(0 0, 100% 0, 100% 18%, 0 18%, 0 41%, 100% 41%,
                     100% 59%, 0 59%, 0 82%, 100% 82%, 100% 100%, 0 100%);
}
.izbornik[open] > summary {
  background: var(--sea-t); color: var(--sea-d); border-color: var(--sea);
}

.izbornik-lista {
  display: flex; flex-direction: column; gap: 2px;
  margin-top: 8px; padding: 8px;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-m);
}
.izbornik-lista a {
  display: flex; align-items: center;
  min-height: var(--tap-admin); padding: 0 12px; border-radius: var(--r-s);
  color: var(--ink); text-decoration: none; font-size: 14px;
}
/* Gdje se covjek nalazi. Nosi i plohu i pismo: boja sama nije dovoljna
   onome tko je ne razlikuje. */
.izbornik-lista a[aria-current=page] {
  background: var(--sea-t); color: var(--sea-d); font-family: var(--disp);
}
/* Nadnaslov skupine. Ista sprava kao zaglavlje tablice: sitno, razmaknuto,
   i ne trazi nista. */
.izbornik-lista .skupina {
  font-family: var(--num); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--faint);
  margin: 14px 0 2px; padding: 0 12px;
}
.izbornik-lista .skupina:first-child { margin-top: 0; }

@media screen and (min-width: 1024px) {
  @supports selector(::details-content) {
    body.stol.spanel {
      display: grid;
      grid-template-columns: var(--traka) minmax(0, 1fr);
      grid-template-rows: auto 1fr;
      grid-template-areas: "traka glava" "traka sadrzaj";
      /* Pruga trake ide kroz cijelu visinu stranice, pa stoji u podlozi
         <body> — ljepljiva traka je visoka samo koliko i popis. */
      background-image: linear-gradient(90deg,
        var(--card) 0 calc(var(--traka) - 1px),
        var(--rule) calc(var(--traka) - 1px) var(--traka),
        transparent var(--traka));
    }
    body.stol.spanel > header { grid-area: glava; }
    body.stol.spanel > main { grid-area: sadrzaj; }
    body.stol.spanel > .izbornik {
      grid-area: traka; margin: 0;
      align-self: start; position: sticky; top: 0;
      max-height: 100dvh; overflow-y: auto;
    }
    /* Popis stoji otvoren i bez atributa 'open'. */
    .izbornik::details-content { content-visibility: visible; }
    .izbornik > summary { display: none; }
    .izbornik-lista {
      margin: 0; padding: 16px 10px;
      background: transparent; border: 0; border-radius: 0;
    }
  }
}

/* Na papiru izbornika nema — panel se s vremena na vrijeme ispise, a upute
   za osoblje se ispisuju uvijek. */
@media print {
  .izbornik { display: none; }
}

/* ─────────────────  12. panel u ruci (uzak zaslon)  ──────────────────── */
/*
   Vlasnica trazi panel koji radi i s telefona: provjeriti pazar dok je vani,
   oznaciti da je necega nestalo. Tada panel nije zaslon za stolom nego zaslon
   u ruci — mis postaje prst, pa meta raste s 32 na 44 px.

   Mijenjaju se BROJKE svijeta, ne pravila: gumb, polje i odjeljak izbornika
   svi citaju iste tri velicine iz odjeljka 0. Slovo ostaje 15 px — ono je
   citljivo i u ruci, a povecanje bi prelomilo svaku tablicu u panelu.

   Uz sirinu stoji i 'pointer: coarse': tablet kojim se upravlja prstom je isto
   ruka, samo veca — bez obzira koliko je sirok. Sirina se ovdje NE navodi
   namjerno: „tablet je 1024 px" je racunica koja ne stoji (iPad uspravno je
   810-834 px, Surface 912 px), a upravo je ta racunica srednji pojas ostavila
   bez okna za tablicu — vidi odjeljak ispod.
*/
@media (max-width: 767px), (pointer: coarse) {
  body.stol { --tap-admin: 44px; --g-vis: 44px; --p-vis: 44px; }
}

/* Tablica u panelu ima do sedam stupaca s adresama, cijenama i gumbima uz
   svaki redak; na 390 px ne stane nijedna, ni uz najsitnije slovo. Prije se
   prelijevala izvan zaslona i dio stupaca se jednostavno nije mogao vidjeti.
   Sada je vlastito okno koje se pomice postrance — svi podaci ostaju, i
   nijedan se ne krati.

   GRANICA IDE DO 1023 px, NE DO 767 (21.8.). Okno je isprva stajalo do 767 px
   uz obrazlozenje „na tabletu od 1024 px tablica stane" — a to je mjerilo
   promasilo cijeli srednji pojas: iPad uspravno je 810-834 px, Surface 912 px.
   Ondje bocnog izbornika jos nema (on pocinje na 1024 px, odjeljak gore), pa
   tablica ima punu sirinu zaslona i svejedno ne stane: stupac radnji se ne
   prelama (td.radnje { white-space: nowrap }), pa je gurao CIJELU stranicu
   postrance. Vodoravno klizanje cijele stranice je gore od klizanja tablice:
   s njim odlutaju i zaglavlje i izbornik, a covjek gubi mjesto na kojem je bio.

   Vrijedi samo po sirini, ne i po 'pointer: coarse': od 1024 px tablica stoji
   uz bocni izbornik u mrezi (body.stol.spanel) i ondje se okno ne dira —
   sirok zaslon je ionako ima gdje pokazati cijelu. */
@media (max-width: 1023px) {
  body.stol table { display: block; overflow-x: auto; }
}

/* ──────────  13. za onoga tko je trazio manje pokreta  ───────────────── */
/*
   Postavka prefers-reduced-motion nije ukus nego zdravlje: pokret nekim
   ljudima izaziva mucninu i vrtoglavicu. Stoji u sustavu telefona i racunala
   i covjek ju je vec ukljucio — sucelje je samo mora poslusati.

   Gasi se SVE, i ono sto netko doda poslije: otud zvjezdica i !important,
   jedini u ovom listu. Potvrda dodira ostaje — boja se i dalje mijenja, samo
   trenutno i bez pomaka. Ugasiti povratnu informaciju bilo bi gore od pokreta.

   Cuva se ispitom u packages/tokens/test/komponente.test.ts: bez ovog
   odjeljka pada, s imenom pravila koje nedostaje.
*/
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  /* I jedan piksel je pomak. */
  button:active, .gumb:active, summary:active, a.kartica:active {
    transform: none !important;
  }
}