/* Rezervacije by InTeh - dodatni stilovi (Tailwind pokriva ostalo) */

/* --- tema: glavnu boju i tamni način postavlja PHP (jezgra/teme.php) na <html> / <body> --- */
:root { --tema: #e6221a; --na-temi: #fff; --poz: #f4f5f7; --kartica: #fff; --tekst: #0f172a; --tiho: #64748b; --rub: #e2e8f0; --sjedalo: #e2e8f0;
  --slobodno: #15803d; --zauzeto: #dc2626; --odabrano: #2563eb; } /* stanja sjedala – uobičajeno pravilo, isto u svim temama: zeleno = slobodno, crveno = zauzeto, plavo = vlastiti odabir */
.tema-tamna { --poz: #0b0f1a; --kartica: #141a29; --tekst: #f1f5f9; --tiho: #94a3b8; --rub: #283247; --sjedalo: #2c3850; color-scheme: dark; }

body { font-family: "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.gumb-ikona { display: inline-flex; align-items: center; gap: .4rem; }
.gumb-tema { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: .75rem; background: var(--tema); color: var(--na-temi); font-weight: 700; transition: filter .15s, transform .08s; }
.gumb-tema:hover { filter: brightness(.9); }
.gumb-tema:active { transform: scale(.98); }
.gumb-tema:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.stavka-aktivna { background: var(--tema); color: var(--na-temi); }
.boja-teme { color: var(--tema); }

/* --- javni dio (repertoar, izbor sjedala, karta) --- */
body.javno { color: var(--tekst); background: /* meki odsjaji u boji teme pri vrhu stranice */
    radial-gradient(56rem 28rem at 90% -6rem, color-mix(in srgb, var(--tema) 12%, transparent), transparent 70%),
    radial-gradient(44rem 26rem at -8% 10rem, color-mix(in srgb, var(--odabrano) 8%, transparent), transparent 70%) var(--poz);
  background-repeat: no-repeat; }
.zaglavlje-javno { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--kartica) 82%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); }
/* gumbi javnih stranica: pilule, sjena u boji teme, blagi pomak na prelazak mišem */
.javno .gumb-tema { border-radius: 9999px; background-image: linear-gradient(180deg, rgb(255 255 255 / .18), transparent 60%); box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--tema) 90%, transparent), inset 0 1px 0 rgb(255 255 255 / .25); transition: transform .15s, box-shadow .15s; }
.javno .gumb-tema:hover:not(:disabled) { filter: none; transform: translateY(-1px); box-shadow: 0 16px 28px -12px color-mix(in srgb, var(--tema) 95%, transparent), inset 0 1px 0 rgb(255 255 255 / .25); }
.javno .gumb-tema svg { transition: transform .15s; }
.javno .gumb-tema:hover:not(:disabled) svg:last-child { transform: translateX(3px); }
.gumb-obris { display: inline-flex; align-items: center; gap: .55rem; border: 1px solid var(--rub); border-radius: 9999px; background: var(--kartica); padding: .4rem 1rem .4rem .45rem; font-size: .875rem; font-weight: 700; box-shadow: 0 1px 2px rgb(15 23 42 / .05); transition: border-color .15s, box-shadow .15s, transform .15s; }
.gumb-obris:hover, .gumb-obris:focus-visible { border-color: var(--tema); box-shadow: 0 10px 22px -14px color-mix(in srgb, var(--tema) 80%, transparent); transform: translateY(-1px); outline: none; }
.gumb-obris .krug { display: flex; width: 1.8rem; height: 1.8rem; align-items: center; justify-content: center; border-radius: 9999px; background: color-mix(in srgb, var(--tema) 12%, transparent); color: var(--tema); transition: transform .15s, background .15s, color .15s; }
.gumb-obris:hover .krug { background: var(--tema); color: var(--na-temi); transform: translateX(-2px); }
/* meni u zaglavlju (slaže se u administraciji: Meni): pilule, podstavke kao padajuća kartica, na mobitelu popis ispod zaglavlja */
.izb-popis, .izb-pod { margin: 0; padding: 0; list-style: none; }
.izb { flex-shrink: 0; } /* ponytail: stavke glavne razine ne prelamaju se – desetak dugih naziva ne stane na uži zaslon računala; tada ih grupirati u podstavke ili povisiti prag gumba (768px) */
.izb-popis { display: flex; align-items: center; gap: .15rem; }
.izb-stavka { position: relative; display: flex; align-items: center; }
.izb-veza { display: inline-flex; align-items: center; gap: .45rem; border-radius: 9999px; padding: .5rem .9rem; font-size: .9rem; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; }
.izb-veza:hover, .izb-veza:focus-visible, .izb-stavka.aktivna > .izb-veza { background: color-mix(in srgb, var(--tema) 12%, transparent); color: var(--tema); outline: none; }
.izb-stavka.ima-pod > .izb-veza { padding-right: .3rem; }
.izb-pod-gumb { display: inline-flex; width: 1.6rem; height: 1.6rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 9999px; color: var(--tiho); transition: background .15s; }
.izb-pod-gumb:hover, .izb-pod-gumb:focus-visible { background: var(--sjedalo); outline: none; }
.izb-pod-gumb svg { transition: transform .15s; }
.izb-burger { display: inline-flex; width: 2.6rem; height: 2.6rem; flex-shrink: 0; align-items: center; justify-content: center; border: 1px solid var(--rub); border-radius: 9999px; background: var(--kartica); }
@media (min-width: 768px) {
  .izb-burger { display: none; }
  .izb-skriven { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* „samo ikona”: naziv ostaje čitačima zaslona; u popisu na mobitelu se ispisuje */
  .izb-pod { position: absolute; top: 100%; left: 0; z-index: 40; min-width: 13rem; margin-top: .9rem; padding: .4rem; border: 1px solid var(--rub); border-radius: 1rem; background: var(--kartica); box-shadow: 0 18px 40px -18px rgb(15 23 42 / .45);
    opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s; }
  .izb-pod::before { content: ""; position: absolute; inset: -1rem 0 auto; height: 1rem; } /* nevidljivi most preko razmaka: miš putem do podstavki ne „ispadne” iz stavke */
  .izb-pod.ulijevo { left: auto; right: 0; } /* ne stane udesno (javno.js) – poravnaj uz desni rub stavke */
  .izb-stavka:hover > .izb-pod, .izb-stavka.otvorena > .izb-pod { opacity: 1; visibility: visible; transform: none; }
  .izb-stavka:has(:focus-visible) > .izb-pod { opacity: 1; visibility: visible; transform: none; } /* tipkovnica (Tab); zasebno pravilo – preglednik bez :has ne smije odbaciti i gornje */
  .izb-stavka:hover > .izb-pod-gumb svg, .izb-stavka.otvorena > .izb-pod-gumb svg { transform: rotate(180deg); }
  .izb-pod .izb-veza { flex: 1; border-radius: .7rem; }
  /* treća razina i dublje: izlijeće u stranu */
  .izb-pod .izb-pod { top: -.4rem; left: 100%; margin: 0 0 0 .5rem; }
  .izb-pod .izb-pod.ulijevo { left: auto; right: 100%; margin: 0 .5rem 0 0; }
  .izb-pod .izb-pod::before { inset: 0 auto 0 -.6rem; width: .6rem; height: auto; }
  .izb-pod .izb-pod.ulijevo::before { inset: 0 -.6rem 0 auto; }
  .izb-pod .izb-stavka > .izb-pod-gumb svg { transform: rotate(-90deg); }
}
@media (max-width: 767.98px) {
  .izb { position: absolute; top: 100%; left: 0; right: 0; display: none; max-height: calc(100vh - 4rem); overflow-y: auto; border-bottom: 1px solid var(--rub); background: var(--kartica); padding: .5rem .75rem 1rem; box-shadow: 0 24px 40px -24px rgb(15 23 42 / .5); }
  .izb.otvoren { display: block; }
  .izb-popis { flex-direction: column; align-items: stretch; gap: .1rem; }
  .izb-stavka { flex-wrap: wrap; }
  .izb-veza { flex: 1; border-radius: .8rem; padding: .7rem .9rem; font-size: 1rem; }
  .izb-pod-gumb { width: 2.5rem; height: 2.5rem; }
  .izb-stavka.otvorena > .izb-pod-gumb svg { transform: rotate(180deg); }
  .izb-pod { display: none; flex-basis: 100%; margin-left: 1.1rem; padding-left: .5rem; border-left: 2px solid var(--rub); }
  .izb-stavka.otvorena > .izb-pod { display: block; }
}
/* koraci obrasca i traka odabira sjedala */
.korak { display: inline-flex; width: 1.9rem; height: 1.9rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 9999px; background: var(--tema); color: var(--na-temi); font-size: .9rem; font-weight: 800; box-shadow: 0 8px 16px -8px var(--tema); }
.traka-odabira { z-index: 10; border: 1px solid var(--rub); border-radius: 1.25rem; background: color-mix(in srgb, var(--kartica) 86%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: .75rem .85rem .75rem 1.1rem; box-shadow: 0 18px 34px -18px rgb(15 23 42 / .4); }
@media (min-width: 768px) { .traka-odabira { position: sticky; bottom: .75rem; } } /* na mobitelu ostaje na kraju obrasca – uz otvorenu tipkovnicu ne prekriva polja */
.cip-sjedalo { display: inline-flex; border-radius: .6rem; background: var(--odabrano); color: #fff; padding: .15rem .55rem; font-size: .8rem; font-weight: 700; animation: sjedalo-pop .22s ease-out; }
.termin-ikona.mala { width: 2.1rem; height: 2.1rem; border-radius: .7rem; }
/* blage animacije: sadržaj ulazi odozdo, odabrano sjedalo „poskoči” */
@keyframes ulaz { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes sjedalo-pop { 0% { transform: scale(.8); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.javno main > * { animation: ulaz .5s cubic-bezier(.2, .7, .2, 1) both; }
.javno main > :nth-child(2) { animation-delay: .07s; }
.javno main > :nth-child(3) { animation-delay: .14s; }
label.sjedalo.slobodno:has(input:checked) { animation: sjedalo-pop .22s ease-out; }
@media (prefers-reduced-motion: reduce) { .javno main > *, label.sjedalo.slobodno:has(input:checked), .cip-sjedalo { animation: none; } }
.kartica { background: var(--kartica); border: 1px solid var(--rub); border-radius: 1.25rem; box-shadow: 0 1px 2px rgb(15 23 42 / .04), 0 12px 32px -20px rgb(15 23 42 / .18); }
.tiho { color: var(--tiho); }
.rub { border-color: var(--rub); }
.traka-teme { background: var(--tema); color: var(--na-temi); }
.cip.besplatno { background: color-mix(in srgb, var(--slobodno) 14%, transparent); color: var(--slobodno); font-weight: 800; } /* besplatan ulaz */
.cip { display: inline-flex; align-items: center; gap: .35rem; border-radius: 9999px; background: var(--sjedalo); padding: .25rem .7rem; font-size: .78rem; font-weight: 600; }
/* termin na naslovnici: datum i vrijeme · dostupnost · gumb */
.termin-red { border: 1px solid var(--rub); border-radius: 1rem; background: var(--poz); padding: .9rem 1.1rem; transition: border-color .15s, box-shadow .15s, transform .15s; }
a.termin-red:hover, a.termin-red:focus-visible { border-color: var(--tema); box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--tema) 70%, transparent); transform: translateY(-1px); outline: none; }
.termin-ikona { display: flex; width: 2.75rem; height: 2.75rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: .85rem; background: color-mix(in srgb, var(--tema) 12%, transparent); color: var(--tema); }
.dostupnost-traka { margin-top: .4rem; height: .5rem; overflow: hidden; border-radius: 9999px; background: var(--sjedalo); }
.dostupnost-traka span { display: block; height: 100%; border-radius: inherit; }
.unos { width: 100%; border: 1px solid var(--rub); border-radius: .75rem; background: var(--kartica); color: var(--tekst); padding: .7rem .9rem; font-size: 1rem; }
.unos:focus { outline: none; border-color: var(--tema); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tema) 22%, transparent); }
.unos::placeholder { color: var(--tiho); opacity: .7; }
.opis-teksta { white-space: pre-line; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* uvećani prikaz slike predstave (klik na sliku s data-povecaj) */
img[data-povecaj] { cursor: zoom-in; } /* img[…]: jače od Tailwindova pravila za role="button" (pointer) */
dialog.uvecana-slika { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border-radius: 0; background: transparent; box-shadow: none; cursor: zoom-out; }
dialog.uvecana-slika[open] { display: flex; align-items: center; justify-content: center; }
dialog.uvecana-slika::backdrop { background: rgb(2 6 23 / .9); }
dialog.uvecana-slika img { width: auto; height: auto; max-width: 94vw; max-height: 92vh; object-fit: contain; border-radius: .75rem; box-shadow: 0 25px 50px -12px rgb(0 0 0 / .6); }
dialog.uvecana-slika button { position: fixed; top: 1rem; right: 1rem; width: 2.75rem; height: 2.75rem; border-radius: 9999px; background: rgb(0 0 0 / .6); color: #fff; font-size: 1.6rem; line-height: 1; }
/* ključ za administraciju u podnožju (kao u InTeh CMS-u): zatvoreni i otvoreni lokot jedan preko drugoga, prelazak mišem „otključa” */
.kljuc-admin { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9999px; color: color-mix(in srgb, var(--tiho) 70%, transparent); box-shadow: inset 0 0 0 1px var(--rub); transition: color .25s, background-color .25s, transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .25s; }
.kljuc-admin svg { grid-area: 1 / 1; transition: opacity .25s, transform .3s cubic-bezier(.2, .7, .2, 1); }
.kljuc-admin .kljuc-otvoren { opacity: 0; transform: scale(.8); }
.kljuc-admin:hover, .kljuc-admin:focus-visible { color: var(--tema); background: color-mix(in srgb, var(--tema) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tema) 45%, transparent); transform: translateY(-2px) scale(1.08); outline: none; }
.kljuc-admin:hover .kljuc-zatvoren, .kljuc-admin:focus-visible .kljuc-zatvoren { opacity: 0; transform: scale(.8); }
.kljuc-admin:hover .kljuc-otvoren, .kljuc-admin:focus-visible .kljuc-otvoren { opacity: 1; transform: scale(1); }
/* pomoćne stolice: okrugle, ispod stalnih redova, s natpisom (stanja boja ista kao kod sjedala) */
.sjedalo.pomocna { border-radius: 9999px; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .55); }
label.sjedalo.pomocna:hover { box-shadow: inset 0 0 0 2px rgb(255 255 255 / .55), 0 0 0 2px var(--odabrano); }
.pomocne-naslov { grid-column: 1 / -1; display: flex; align-items: center; gap: .75rem; margin: .9rem 0 .2rem; color: var(--tiho); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.pomocne-naslov::before, .pomocne-naslov::after { content: ""; flex: 1; border-top: 2px dashed var(--rub, #e2e8f0); }
.pomocne-naslov span { display: inline-flex; align-items: center; gap: .4rem; }
.pomocne-napomena { border-radius: .9rem; background: color-mix(in srgb, #f59e0b 12%, transparent); padding: .55rem .9rem; }
/* tlocrt u pregledu: „Prikaži tko sjedi gdje” – šira sjedala s prezimenom, boja po rezervaciji */
.sjedalo-ime { display: none; }
.tlocrt-imena .tlocrt { --sj: 5.2rem; gap: .3rem; }
.tlocrt-imena .sjedalo { height: 3.5rem; border-radius: .55rem; font-size: .85rem; } /* sva sjedala (i slobodna, i pomoćne stolice) iste veličine */
.tlocrt-imena .sjedalo-prazno { height: 3.5rem; }
.tlocrt-imena a.sjedalo.zauzeto { flex-direction: column; gap: .1rem; padding: .15rem .25rem; background: var(--boja-rez, var(--zauzeto)); line-height: 1.1; }
.tlocrt-imena .sjedalo-broj { font-size: .6rem; opacity: .8; }
.tlocrt-imena .sjedalo-ime { display: -webkit-box; max-width: 100%; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: .64rem; font-weight: 700; text-align: center; overflow-wrap: anywhere; } /* puno ime u najviše dva retka (ime / prezime) */
/* rezervacije: kartice za odabir termina */
.odabir-termina { border-radius: 1rem; border: 1px solid #e2e8f0; background: #fff; transition: border-color .15s, box-shadow .15s, transform .15s; }
.odabir-termina:hover { border-color: #cbd5e1; box-shadow: 0 8px 18px -10px rgb(15 23 42 / .35); transform: translateY(-1px); }
.odabir-termina.odabran { border-color: var(--tema); background: color-mix(in srgb, var(--tema) 6%, #fff); box-shadow: 0 0 0 2px var(--tema); }
.odabir-termina.proslo:not(.odabran) { opacity: .6; }
/* provjera ulazaka (mobitel/tablet): veliki dodirni gumbi, jasne boje stanja */
.ulazak { -webkit-tap-highlight-color: transparent; }
.ulazak-odabir { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .6rem center; background-size: 1.1rem; }
.ulazak-filtar { min-height: 2.25rem; border-radius: .6rem; color: #cbd5e1; transition: background .15s, color .15s; }
.ulazak-filtar.aktivan { background: #fff; color: #0f172a; box-shadow: 0 1px 3px rgb(0 0 0 / .25); }
.ulazak-sjedalo { position: relative; display: inline-flex; min-width: 3.25rem; height: 3.25rem; align-items: center; justify-content: center; border-radius: .9rem; border: 2px solid #cbd5e1; background: #fff; color: #0f172a; font-size: 1.25rem; font-weight: 800; touch-action: manipulation; transition: transform .1s, background .15s, border-color .15s, color .15s; }
.ulazak-sjedalo:active { transform: scale(.93); }
.ulazak-sjedalo:focus-visible { outline: 3px solid #34d399; outline-offset: 2px; }
.ulazak-sjedalo[aria-pressed=true] { border-color: #059669; background: #059669; color: #fff; }
.ulazak-sjedalo[aria-pressed=true]::after { content: "✓"; position: absolute; top: -.45rem; right: -.45rem; display: flex; width: 1.3rem; height: 1.3rem; align-items: center; justify-content: center; border-radius: 9999px; background: #fff; color: #059669; font-size: .75rem; box-shadow: 0 1px 3px rgb(0 0 0 / .3); }
.ulazak-brojac[data-razina=nitko] { background: #f1f5f9; color: #475569; }
.ulazak-brojac[data-razina=dio] { background: #fef3c7; color: #92400e; }
.ulazak-brojac[data-razina=svi] { background: #d1fae5; color: #065f46; }
.ulazak-svi { background: #0f172a; color: #fff; touch-action: manipulation; }
.ulazak-svi[data-svi="1"] { height: 2.5rem; background: transparent; color: #64748b; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } /* poništavanje: tiše od glavne radnje */
.ulazak-svi[data-potvrdi] { background: #fee2e2; color: #b91c1c; text-decoration: none; } /* drugi dodir poništava sve */
.ulazak-kartica[data-status=usli] { box-shadow: inset 0 0 0 2px #10b981; background: #f0fdf4; opacity: .8; } /* stigli: povučeno, da se ističu oni koji čekaju */
.ulazak-kartica[data-status=dio] { box-shadow: inset 0 0 0 3px #f59e0b; background: #fffbeb; }
/* slider slika (Kontakt) */
.slider-traka { scrollbar-width: none; }
.slider-traka::-webkit-scrollbar { display: none; }
.slider-gumb { position: absolute; top: 50%; display: flex; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; border-radius: 9999px; background: color-mix(in srgb, var(--kartica) 92%, transparent); color: var(--tekst); box-shadow: 0 8px 20px -8px rgb(0 0 0 / .45); transform: translateY(-50%); transition: opacity .15s, transform .15s; }
.slider-gumb:hover:not(:disabled) { transform: translateY(-50%) scale(1.08); }
.slider-gumb:disabled { opacity: 0; pointer-events: none; }
/* digitalna karta: polja s podacima; boje i slika predstave ispisuju se i na papir / u PDF */
.polje-karte { border-radius: .75rem; background: var(--poz); padding: .6rem .5rem; }
.karta, .karta * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
/* digitalna karta: perforacija između podataka i QR koda */
.karta-rez { position: relative; border-top: 2px dashed var(--rub); }
.karta-rez::before, .karta-rez::after { content: ""; position: absolute; top: -.75rem; width: 1.5rem; height: 1.5rem; border-radius: 9999px; background: var(--poz); }
.karta-rez::before { left: -.75rem; }
.karta-rez::after { right: -.75rem; }
.qr { width: 11rem; height: 11rem; padding: .5rem; border-radius: .75rem; background: #fff; }
.qr svg { display: block; width: 100%; height: 100%; }

.tema-tamna .logo-stranice { border-radius: .5rem; background: #fff; padding: .2rem .45rem; } /* vlastiti logo (Postavke) na tamnoj temi dobiva bijelu podlogu */

/* --- tlocrt dvorane (javni izbor sjedala i administracija) --- */
/* veličina sjedala (--sj): najveća koja stane u širinu okvira, do 2.5rem; dvorane s puno sjedala u redu dobivaju manja sjedala prije nego što se pojavi vodoravni klizač */
.tlocrt-okvir { overflow-x: auto; padding: .25rem .25rem .75rem; container-type: inline-size; }
.tlocrt { --sj: 2.25rem; display: grid; grid-template-columns: auto repeat(var(--stupaca), var(--sj)) auto; gap: .35rem; align-items: center; width: max-content; margin: 0 auto; }
@supports (width: 1cqw) { .tlocrt { --sj: clamp(1.5rem, calc((100cqw - 9rem) / var(--stupaca) - .35rem), 2.5rem); } } /* 9rem ≈ nazivi redova s obje strane */
.pozornica { grid-column: 1 / -1; margin: 0 1rem 1.25rem; padding: .45rem; border-radius: .5rem .5rem 2rem 2rem; background: var(--sjedalo); color: var(--tiho); font-size: .7rem; font-weight: 700; letter-spacing: .3em; text-align: center; text-transform: uppercase; }
.red-naziv { min-width: 1.75rem; padding: 0 .4rem; color: var(--tiho); font-size: .8rem; font-weight: 700; text-align: center; white-space: nowrap; }
.sjedalo { position: relative; display: flex; align-items: center; justify-content: center; width: var(--sj, 2rem); height: var(--sj, 2rem); border-radius: .6rem .6rem .35rem .35rem; background: var(--sjedalo); color: var(--tekst); font-size: max(.62rem, calc(var(--sj, 2rem) * .32)); font-weight: 600; user-select: none; }
label.sjedalo { cursor: pointer; transition: transform .1s; }
.sjedalo.slobodno { background: var(--slobodno); color: #fff; }
label.sjedalo:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--odabrano); }
label.sjedalo input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
label.sjedalo:has(input:checked), .sjedalo.odabrano { background: var(--odabrano); color: #fff; } /* .odabrano = legenda */
label.sjedalo.slobodno:has(input:checked), label.sjedalo:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--kartica), 0 0 0 4px var(--odabrano); }
/* zauzeto: crveno s prugama – razlikuje se od slobodnog i bez raspoznavanja crvene i zelene */
.sjedalo.zauzeto { background: repeating-linear-gradient(135deg, var(--zauzeto) 0 5px, color-mix(in srgb, var(--zauzeto) 80%, #000) 5px 10px); color: #fff; cursor: not-allowed; }
a.sjedalo.zauzeto { cursor: pointer; } /* administracija: klik vodi na rezervaciju */
a.sjedalo.zauzeto:hover { filter: brightness(.85); }
.sjedalo-prazno { width: var(--sj, 2rem); height: var(--sj, 2rem); } /* polje bez sjedala (kraći red, prolaz) – čuva poravnanje redova */
label.sjedalo.uklonjivo:has(input:checked) { background: transparent; color: var(--tiho); box-shadow: inset 0 0 0 1.5px var(--rub); } /* uređivanje dvorane: uklonjeno sjedalo, klik ga vraća */
label.sjedalo.uklonjivo:has(input:checked)::after { content: "+"; font-size: .85rem; opacity: .55; }
@media (max-width: 640px) {
  .tlocrt { gap: .2rem; }
}
tr:target { background: color-mix(in srgb, var(--tema) 12%, transparent); box-shadow: inset 3px 0 0 var(--tema); } /* klik na sjedalo u administraciji označi rezervaciju */

/* --- administracija (preuzeto iz Traventa) --- */
dialog { border: 0; border-radius: 1rem; padding: 0; box-shadow: 0 25px 50px -12px rgb(0 0 0 / .35); max-width: min(92vw, 40rem); width: 100%; }
dialog::backdrop { background: rgb(15 23 42 / .55); }
dialog input:not([type=checkbox]), dialog select, dialog textarea { width: 100%; border: 1px solid #cbd5e1; border-radius: .5rem; padding: .5rem .75rem; font-size: .9rem; }
dialog#dlg-modal { animation: modal-ulaz .15s ease-out; }
@keyframes modal-ulaz { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.tab-pilula { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem 1rem; border-radius: 9999px; font-size: .85rem; font-weight: 600; color: #475569; white-space: nowrap; transition: background .15s, color .15s, box-shadow .15s; }
.tab-pilula:hover { background: #f1f5f9; color: #0f172a; }
.tab-pilula.tab-aktivan { background: var(--tema); color: var(--na-temi); box-shadow: 0 6px 16px color-mix(in srgb, var(--tema) 35%, transparent); }
.akcija { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: .5rem; transition: background .12s, color .12s, transform .12s; }
.akcija:hover { transform: translateY(-1px); }
.akcija svg { width: 1rem; height: 1rem; }
tr[data-url] { cursor: pointer; }
tr[data-url]:hover { background-color: rgb(241 245 249 / .8); box-shadow: inset 3px 0 0 var(--tema); }
/* galerija: gumbi preko sličice i pregled slike preko cijelog ekrana */
.ikona-gumb { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 9999px; background: rgb(255 255 255 / .92); color: #334155; box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform .12s, background .12s, color .12s; }
.ikona-gumb:hover { background: #fff; color: #2563eb; transform: scale(1.08); }
.ikona-gumb.opasno:hover { background: #dc2626; color: #fff; }
.ikona-gumb svg { width: 1.1rem; height: 1.1rem; }
dialog.pregled-slike { width: auto; max-width: 96vw; max-height: 100vh; background: transparent; box-shadow: none; overflow: visible; padding: 0; }
dialog.pregled-slike::backdrop { background: rgb(15 23 42 / .88); }
/* nadzorna ploča: traka popunjenosti „naraste” pri otvaranju stranice */
.traka-raste { transform-origin: left; animation: traka-raste .9s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes traka-raste { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .traka-raste { animation: none; } }
/* meni (administracija): stablo stavki s povlačenjem; podstavke su uvučene uz okomitu crtu */
.meni-stablo, .meni-pod { margin: 0; padding: 0; list-style: none; }
.meni-pod { margin-left: 1.1rem; padding-left: .9rem; border-left: 2px solid #e2e8f0; }
.meni-red { display: flex; align-items: center; gap: .6rem; margin-top: .4rem; padding: .45rem .6rem; border: 1px solid #e2e8f0; border-radius: .75rem; background: #fff; cursor: grab; transition: border-color .12s, box-shadow .12s; }
.meni-red:hover { border-color: #cbd5e1; box-shadow: 0 4px 10px -6px rgb(15 23 42 / .3); }
.meni-red-skriven > :not(:last-child) { opacity: .45; } /* skrivena stavka: izblijedjela, gumbi ostaju jasni */
.meni-rucka { padding: .35rem .15rem; color: #94a3b8; font-size: .8rem; letter-spacing: -.12em; user-select: none; touch-action: none; } /* dodir: povlači se za ručku, ostatak retka i dalje lista stranicu */
.meni-ikona { display: inline-flex; width: 1.75rem; height: 1.75rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: .5rem; background: color-mix(in srgb, var(--tema) 12%, transparent); color: var(--tema); }
.meni-cvor.vuce > .meni-red { border-style: dashed; opacity: .45; }
.meni-duh { position: fixed; z-index: 60; margin: 0; pointer-events: none; opacity: .95; box-shadow: 0 16px 32px -12px rgb(15 23 42 / .45); }
.meni-crta { position: absolute; z-index: 59; height: 3px; border-radius: 3px; background: var(--tema); pointer-events: none; }
body.meni-vuce, body.meni-vuce .meni-red { cursor: grabbing; user-select: none; }
.ikona-izbor { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.4rem, 1fr)); gap: .35rem; max-height: 8.6rem; overflow-y: auto; padding: .2rem; }
.ikona-izbor label { position: relative; cursor: pointer; }
.ikona-izbor input[type=radio] { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; }
.ikona-izbor span { display: flex; height: 2.4rem; align-items: center; justify-content: center; border: 1px solid #e2e8f0; border-radius: .6rem; color: #475569; transition: background .12s, border-color .12s, color .12s; }
.ikona-izbor label:hover span { background: #f1f5f9; }
.ikona-izbor input:checked + span { border-color: var(--tema); background: color-mix(in srgb, var(--tema) 10%, transparent); color: var(--tema); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tema) 25%, transparent); }
.ikona-izbor input:focus-visible + span { outline: 2px solid #3b82f6; outline-offset: 1px; }
/* prijava: kuglice za PIN i tipkovnica */
.pin-skriveno { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.kuglica { width: 1.1rem; height: 1.1rem; border-radius: 9999px; border: 2px solid #cbd5e1; background: #fff; transition: transform .15s, background .15s, border-color .15s, box-shadow .15s; }
.kuglica.aktivna { border-color: #2563eb; box-shadow: 0 0 0 4px rgb(37 99 235 / .15); }
.kuglica.puna { background: #2563eb; border-color: #2563eb; transform: scale(1.15); }
.kuglica.salje { background: #16a34a; border-color: #16a34a; }
.tipka { display: inline-flex; align-items: center; justify-content: center; height: 3.25rem; border-radius: 1rem; background: #f1f5f9; font-size: 1.35rem; font-weight: 700; color: #0f172a; transition: background .12s, transform .08s, box-shadow .12s; }
.tipka:hover { background: #e2e8f0; }
.tipka:active { transform: scale(.96); background: #dbeafe; }
/* polja za unos u administraciji: mekša pozadina, zaobljeni rubovi, jasan fokus */
body:not(.javno) :is(main, dialog) :is(input:not([type=checkbox], [type=radio], [type=file], [type=hidden]), select, textarea) {
  background-color: #f8fafc; border: 1px solid #dbe3ec; border-radius: .75rem; padding: .625rem .875rem; font-size: .875rem; line-height: 1.4; color: #0f172a;
  box-shadow: inset 0 1px 2px rgb(15 23 42 / .04); transition: border-color .15s, box-shadow .15s, background-color .15s;
}
body:not(.javno) :is(main, dialog) :is(input:not([type=checkbox], [type=radio], [type=file], [type=hidden]), select, textarea):focus { outline: none; background-color: #fff; border-color: #3b82f6; box-shadow: 0 0 0 4px rgb(59 130 246 / .15); }
body:not(.javno) :is(main, dialog) :is(input, select, textarea):disabled { background-color: #f1f5f9; color: #64748b; cursor: not-allowed; }
body:not(.javno) :is(main, dialog) input[type=checkbox] { accent-color: #2563eb; }
input::placeholder, textarea::placeholder { color: #94a3b8; opacity: 1; }

@page { size: A4 portrait; margin: 12mm 12mm 14mm; }
@media print {
  .bez-ispisa { display: none !important; }
  body:has(.ispis-popis) main { padding: 0 !important; } /* popis rezervacija: cijela širina A4 */
  .ispis-popis, .ispis-popis * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body, body.javno { background: #fff !important; } /* !important: administracija ima Tailwindovu bg-slate-100 na <body> */
  tr, img { break-inside: avoid; }
  thead { display: table-header-group; }
}