/* ═══════════════════════════════════════════════════════════════════
   POSS — vzhled v13 (docs/stoly-kontrakt.md v13), poslední vrstva stylů
   pro pokladnu i moduly (sklad, účetnictví, mzdy):
   · černobílý základ, stavy stolů v odstínech šedi (výplň, šrafování,
     čárkovaný obrys — rozlišitelné i bez barev)
   · všechna tlačítka kulatá, dlaždice ceníku kulaté bez piktogramů
   · stisk NIKDY nezmenšuje klikací plochu (na tabletu pak prst „ujel“ mimo
     zmenšený prvek a klepnutí se ztratilo) — odezva je jen vnitřní stín
   · animace jen přes transform a opacity, bez var() v keyframes (Safari
     takové animace nepustí na GPU) a bez nekonečných animací box-shadow /
     barev (stránka by se překreslovala každý snímek a vše by trhalo)
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in:cubic-bezier(.4,0,1,1);
  --t-fast:.14s;--t-mid:.24s;--t-slow:.36s;
  --press:rgba(128,128,128,.22);
  --pri:#111113;--pri-tx:#ffffff;
  /* stavy stolů (světlý vzhled) */
  --t-free-bg:#FFFFFF;--t-free-bd:#D4D4D8;--t-free-tx:#18181B;--t-free-dot:#B4B4BB;
  --t-busy-bg:#18181B;--t-busy-bd:#18181B;--t-busy-tx:#FFFFFF;--t-busy-tx2:rgba(255,255,255,.72);
  --t-wait-a:#26262B;--t-wait-b:#3B3B41;--t-wait-bd:#111113;--t-wait-tx:#FFFFFF;
  --t-paid-bg:#E4E4E7;--t-paid-bd:#A1A1AA;--t-paid-tx:#18181B;--t-paid-tx2:#52525B;
  --t-res-bg:#FFFFFF;--t-res-bd:#3F3F46;--t-res-tx:#18181B;
  --t-bar-bg:#F4F4F5;--t-bar-bd:#A1A1AA;--t-bar-tx:#52525B;
  --t-tep:#FFFFFF;--t-ring:rgba(17,17,19,.2);--t-sel:#111113;
  --t-seat:rgba(113,113,122,.16);--t-seat-bd:rgba(82,82,91,.42);
  --t-dek:rgba(113,113,122,.16);--t-dek-bd:rgba(82,82,91,.5);
}
[data-theme="light"],:root:not([data-theme]){
  --red:#111113;--red-d:#000000;--red-g:rgba(17,17,19,.18);--rose:#111113;
  --gold:#3f3f46;
  --bg:#F5F5F5;--bg2:#FFFFFF;--bg3:rgba(255,255,255,.97);--bgE:rgba(0,0,0,.05);
  --tx:#111113;--tx2:rgba(17,17,19,.64);--tx3:rgba(17,17,19,.44);
  --bdr:rgba(17,17,19,.14);--bdr2:rgba(17,17,19,.10);--shadow:0 6px 24px rgba(17,17,19,.10);
  --hdr2:rgba(245,245,245,.95);
  --gradient-bg:var(--bg);
  --pri:#111113;--pri-tx:#ffffff;
}
[data-theme="dark"]{
  --red:#F4F4F5;--red-d:#D4D4D8;--red-g:rgba(244,244,245,.22);--rose:#F4F4F5;--gold:#A1A1AA;
  --pri:#F4F4F5;--pri-tx:#0A0A0C;--press:rgba(255,255,255,.16);
  --gradient-bg:var(--bg);
  --t-free-bg:#18181B;--t-free-bd:#5B5B63;--t-free-tx:#F4F4F5;--t-free-dot:#5B5B63;
  --t-busy-bg:#F4F4F5;--t-busy-bd:#F4F4F5;--t-busy-tx:#0A0A0C;--t-busy-tx2:rgba(10,10,12,.66);
  --t-wait-a:#D4D4D8;--t-wait-b:#B4B4BB;--t-wait-bd:#F4F4F5;--t-wait-tx:#0A0A0C;
  --t-paid-bg:#3F3F46;--t-paid-bd:#71717A;--t-paid-tx:#F4F4F5;--t-paid-tx2:#D4D4D8;
  --t-res-bg:#18181B;--t-res-bd:#D4D4D8;--t-res-tx:#F4F4F5;
  --t-bar-bg:#232327;--t-bar-bd:#71717A;--t-bar-tx:#D4D4D8;
  --t-tep:#0A0A0C;--t-ring:rgba(244,244,245,.26);--t-sel:#F4F4F5;
  --t-seat:rgba(161,161,170,.14);--t-seat-bd:rgba(161,161,170,.38);
  --t-dek:rgba(161,161,170,.12);--t-dek-bd:rgba(161,161,170,.42);
}
body{background:var(--bg)}

/* — primární a vedlejší tlačítka — */
.btn.red,.btn.gold,.hbtn.gold,.pw-ok,.cat-chip.on,.zona.on,.page-a .btn.red{background:var(--pri)!important;color:var(--pri-tx)!important;border-color:transparent!important}
.btn.big{font-weight:800;letter-spacing:.1px}
.login-t,.p-t,.qrov-t,.mo-t,.brand-t,.top .brand-t,.pw-t{background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--tx)!important}
.me-av,.login-av,.login-btn.admin .login-av{background:var(--pri)!important;color:var(--pri-tx)!important;border-color:transparent!important}
.tn.on{color:var(--tx);background:var(--bgE);border-bottom-color:var(--tx)}
.sn.on{color:var(--tx);background:var(--bgE)}
.sn.on::before{background:var(--tx)}
.sn-badge,.stack-n{background:var(--pri);color:var(--pri-tx)}
.menu button.on{background:var(--bgE);color:var(--tx)}
.menu button.on::after{background:var(--tx)}
.gi-c,.chip .sum,.acc-f b{color:var(--tx)!important}

/* — kulatá tlačítka všude — */
.btn,.hbtn,.cat-chip,.pod-btn,.sn,.zona,.zony,.zb,.chip-assign,.pw-x,.pw-ok,.mer-wrap .hbtn,
.menu button,.menu a,.tvar-tile,.zdroj,.tag{border-radius:9999px!important}
.tb,.p-back,.stack-tgl,.acc-more,.itm-x,.stepper button,.zb button,.hamb{border-radius:50%!important;aspect-ratio:1/1}
.login-btn{border-radius:50%!important;width:124px;height:124px;padding:10px 8px;justify-content:center;gap:4px!important}
.login-btn .login-av{width:46px!important;height:46px!important;font-size:19px!important}
.login-btn .login-name{max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.login-grid{gap:14px!important;max-width:440px!important}
@media(max-width:420px){
  .login-btn{width:100px;height:100px;padding:8px 6px}
  .login-btn .login-av{width:38px!important;height:38px!important;font-size:16px!important}
  .login-btn .login-name{max-width:80px;font-size:13px}
  .login-grid{gap:10px!important}
}
.menu{border-radius:18px}
.btn.sm{padding:7px 13px}

/* — dlaždice ceníku: kulaté, bez piktogramů (Vzhled → Dlaždice / Kompakt) — */
.gi{position:relative}
.grid:not(.seznam) .gi .gi-e{display:none}
.grid:not(.seznam):not(.kompakt){grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.grid:not(.seznam):not(.kompakt) .gi{aspect-ratio:1/1;border-radius:50%;justify-content:center;padding:10px;gap:4px;background:var(--bg2);border:1.5px solid var(--bdr2)}
.grid:not(.seznam):not(.kompakt) .gi-n{font-size:12.5px;line-height:1.18;max-width:92%;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.grid:not(.seznam):not(.kompakt) .gi-c{font-size:12px;font-weight:800}
.grid.kompakt .gi{border-radius:9999px;border-left-width:1px;padding:9px 12px;box-shadow:inset 3px 0 0 var(--kb,transparent)}
@media(pointer:coarse){.grid:not(.seznam):not(.kompakt){grid-template-columns:repeat(auto-fill,minmax(124px,1fr))}.grid:not(.seznam):not(.kompakt) .gi{min-height:0}}

/* — stisk: bez transformace klikací plochy, jen vnitřní odezva —
   odezva naskočí hned (0 s), po puštění plynule zmizí */
.btn,.hbtn,.cat-chip,.gi,.tb,.sn,.zona,.zb button,.pod-btn,.me,.acc,.acc-more,.tbl,.login-btn,.pw-x,.pw-ok,.p-back,
.stepper button,.itm-x,.tvar-tile,.chip,.chip-assign,.menu button,.menu a,.stack-tgl,.mnav button,.srch-r,.lst-r{
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:background-color var(--t-fast) var(--ease),border-color var(--t-mid) var(--ease),color var(--t-fast) var(--ease),box-shadow var(--t-mid) var(--ease),opacity var(--t-mid) var(--ease)!important}
.btn:active,.hbtn:active,.cat-chip:active,.gi:active,.tb:active,.sn:active,.zona:active,.zb button:active,.pod-btn:active,.me:active,
.acc:active,.acc-more:active,.tbl:active,.login-btn:active,.pw-x:active,.pw-ok:active,.p-back:active,.stepper button:active,.itm-x:active,
.tvar-tile:active,.chip:active,.chip-assign:active,.menu button:active,.menu a:active,.stack-tgl:active,.mnav button:active,.srch-r:active,.lst-r:active{
  transform:none!important;filter:none!important;box-shadow:inset 0 0 0 100vmax var(--press)!important;transition-duration:0s!important}

/* — odezvy klepnutí: kroužek z pseudo-prvku, animuje se jen transform/opacity — */
.gi.pop{animation:none}
.gi.pop::after{content:'';position:absolute;inset:-1.5px;border-radius:inherit;border:2px solid var(--tx);pointer-events:none;opacity:0;animation:kruh .42s var(--ease-out)}
@keyframes kruh{from{opacity:.32;transform:scale(1)}to{opacity:0;transform:scale(1.14)}}
.btn.ok-flash{position:relative;animation:none}
.btn.ok-flash::after{content:'';position:absolute;inset:-1px;border-radius:inherit;border:2px solid var(--tx);pointer-events:none;opacity:0;animation:kruh .5s var(--ease-out)}
.pay-ik{position:relative;animation:none!important}
.pay-ik::after{content:'';position:absolute;inset:-2px;border-radius:50%;border:2px solid currentColor;pointer-events:none;opacity:0;animation:kruhVelky 1.2s var(--ease-out)}
@keyframes kruhVelky{from{opacity:.5;transform:scale(1)}to{opacity:0;transform:scale(1.7)}}

/* — animace: panely, menu, okna, upozornění —
   směr panelu i obsahu = třída .z-leva (žádné var() v keyframes) */
@keyframes panelInR{from{opacity:0;transform:translateX(44px)}to{opacity:1;transform:none}}
@keyframes panelInL{from{opacity:0;transform:translateX(-44px)}to{opacity:1;transform:none}}
@keyframes panelOut{from{opacity:1;transform:none}to{opacity:0;transform:translateX(-24px)}}
.page .panel:not(.sheet):not([hidden]){animation:panelInR var(--t-slow) var(--ease-out) backwards}
.page .panel.z-leva:not(.sheet):not([hidden]){animation-name:panelInL}
.page .panel.ven{animation:panelOut .2s var(--ease-in) forwards!important;pointer-events:none}
/* účet (spodní karta): karta vyjíždí po GPU, ztmavení pozadí jen průhledností */
.panel.sheet{background:transparent!important}
.panel.sheet::before{content:'';position:absolute;inset:0;background:rgba(10,10,12,.38);opacity:0;transition:opacity .3s var(--ease);pointer-events:none}
.panel.sheet.up::before{opacity:1}
.panel.sheet>.sheet-card{position:relative;z-index:1;will-change:transform;transition:transform .38s var(--ease-out)!important}
@keyframes menuIn{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
.menu:not([hidden]),.ctx{animation:menuIn .18s var(--ease-out) backwards;transform-origin:top left}
.menu.r:not([hidden]){transform-origin:top right}
@keyframes okno{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.pw-modal.sh .pw-in,.pay-ovl.sh .pay-in,.mo.sh .mo-in{animation:okno .28s var(--ease-out) backwards}
@keyframes zatmeni{from{opacity:0}to{opacity:1}}
.pw-modal.sh,.pay-ovl.sh,.mo.sh{animation:zatmeni .22s var(--ease) backwards}
.pay-ovl{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(10,10,12,.74)!important}
@keyframes toastIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.toast{animation:toastIn .3s var(--ease-out) backwards;border-radius:16px}
/* účty bez stolu: najede jen nová karta (seznam se překresluje každých 30 s) */
.acc{position:relative}
@keyframes accIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.acc.nova{animation:accIn .32s var(--ease-out) backwards;animation-delay:var(--zpozd,0ms)}
.tbl{transition:background-color .3s var(--ease),border-color .3s var(--ease),box-shadow .25s var(--ease)!important}
/* přepnutí zóny: posune se celé okno mapy (mapa sama nese transform zoomu) */
@keyframes zonaVpred{from{opacity:0;transform:translateX(4%)}to{opacity:1;transform:none}}
@keyframes zonaZpet{from{opacity:0;transform:translateX(-4%)}to{opacity:1;transform:none}}
.map-view.zona-vpred{animation:zonaVpred .34s var(--ease-out) backwards}
.map-view.zona-zpet{animation:zonaZpet .34s var(--ease-out) backwards}
/* přelet položky z ceníku na lístek */
.prelet{position:fixed;z-index:1200;pointer-events:none;margin:0;will-change:transform,opacity;border-radius:50%;
  display:grid;place-items:center;text-align:center;background:var(--pri);color:var(--pri-tx);font-weight:800;font-size:12px;padding:6px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
/* lístek a ceník se nikdy neposouvají do strany (kroužek klepnutí, podsvícení) */
#pItems,#pGrid,.stack-list{overflow-x:hidden}
/* nový řádek lístku: krátké podsvícení (pokračuje i po překreslení, --zpozd) */
.itm.nova{position:relative}
.itm.nova::before{content:'';position:absolute;inset:0;border-radius:8px;background:var(--tx);pointer-events:none;opacity:0;animation:lisekBlik 1.1s var(--ease) backwards;animation-delay:var(--zpozd,0ms)}
@keyframes lisekBlik{0%{opacity:0}14%{opacity:.08}100%{opacity:0}}
@keyframes sumaPulz{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}
.sums b.pulz{display:inline-block;animation:sumaPulz .36s var(--ease-out)}

/* — přihlášení: rozmazaná fotka z loga, logo na bílé kartě vyniká — */
.login{background:#2a2a2c url(/stoly/core/img/login-pozadi.jpg) center/cover no-repeat!important}
.login::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 40%,rgba(0,0,0,0),rgba(0,0,0,.38));pointer-events:none}
.login>*{position:relative}
.login-logo{border-radius:22px;box-shadow:0 24px 70px rgba(0,0,0,.42),0 2px 8px rgba(0,0,0,.2);background:#fff}
.login-ucet{color:rgba(255,255,255,.86)!important;font-weight:700;letter-spacing:.12em}
.login-s{color:rgba(255,255,255,.74)!important;margin-bottom:22px!important}
.login-btn{background:rgba(255,255,255,.94)!important;border-color:transparent!important;color:#111113!important;box-shadow:0 8px 24px rgba(0,0,0,.22)}
.login-rank{color:rgba(17,17,19,.52)!important}
.login .setup-card{background:rgba(255,255,255,.95);color:#111113;border-color:transparent}
@keyframes loginIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.login-logo,.login-grid{animation:loginIn .5s var(--ease-out) backwards}
.login-grid{animation-delay:.08s}

/* přechod obsahu sekcí / záložek (.z-leva = obsah přijede zleva) */
@keyframes obsahInR{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes obsahInL{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
.prechod{animation:obsahInR .28s var(--ease-out) backwards}
.prechod.z-leva{animation-name:obsahInL}

/* — logo — */
.top .brand-ico{border-radius:11px!important;box-shadow:none!important;overflow:hidden;background:#111}
.top .brand-ico img{width:100%;height:100%;object-fit:cover;display:block}
.login-logo{width:min(380px,82vw);height:auto;display:block;margin:0 auto 18px}

/* ═══ STAVY STOLŮ V ODSTÍNECH ŠEDI ══════════════════════════════════
   volný = bílý · obsazený = černý · čeká na platbu = tmavé šrafování ·
   zaplaceno (účet ještě otevřený) = světle šedý · rezervace = čárkovaný
   obrys · bar = světlý s čárkovaným okrajem. Tmavý vzhled obráceně.
   Pulz (dlouho u stolu, platba visí) = prstenec, který mění jen průhlednost. */
.tbl{background:var(--t-free-bg);border-color:var(--t-free-bd);color:var(--t-free-tx);--st:var(--t-free-dot)}
.tbl.free .tbl-i{color:var(--tx2)}
.tbl.free .dot{background:transparent!important;box-shadow:inset 0 0 0 1.5px var(--t-free-dot)}
.tbl.busy{background:var(--t-busy-bg);border-color:var(--t-busy-bd);color:var(--t-busy-tx);--st:var(--t-busy-tx)}
.tbl.busy .tbl-i,.tbl.busy .tbl-t{color:var(--t-busy-tx2)}
.tbl.wait{background:repeating-linear-gradient(135deg,var(--t-wait-a) 0 7px,var(--t-wait-b) 7px 14px);border-color:var(--t-wait-bd);color:var(--t-wait-tx);--st:var(--t-wait-tx)}
.tbl.wait .tbl-i{color:var(--t-wait-tx);font-weight:800}
.tbl.wait .tbl-t{color:var(--t-wait-tx);opacity:.8}
.tbl.wait2{box-shadow:0 0 0 3px var(--t-ring)}
.tbl.paid{background:var(--t-paid-bg);border-color:var(--t-paid-bd);color:var(--t-paid-tx);--st:var(--t-paid-tx2)}
.tbl.paid .tbl-i{color:var(--t-paid-tx2);font-weight:800}
.tbl.paid .tbl-t{color:var(--t-paid-tx2)}
.tbl.res{background:var(--t-res-bg);border:2px dashed var(--t-res-bd);color:var(--t-res-tx);--st:var(--t-res-bd)}
.tbl.res .tbl-i{color:var(--t-res-tx);font-weight:800}
.tbl.res .tbl-x{color:var(--tx2)}
.tbl.res.soon{border-style:solid;border-color:var(--t-res-bd);box-shadow:0 0 0 3px var(--t-ring)}
.tbl.res.late{border-style:solid;border-width:2.5px;border-color:var(--t-res-tx)}
.tbl.res.late .tbl-x{color:var(--t-res-tx);font-weight:800;text-decoration:underline;text-underline-offset:2px}
.tbl.bar{background:var(--t-bar-bg);border:1.5px dashed var(--t-bar-bd);--st:var(--t-bar-bd)}
.tbl.bar .tbl-n{color:var(--t-bar-tx)}
.tbl.bar.busy{background:var(--t-busy-bg);border-style:solid;border-color:var(--t-busy-bd);--st:var(--t-busy-tx)}
.tbl.bar.busy .tbl-n{color:var(--t-busy-tx)}
.tbl.hrich1 .tbl-t,.tbl.hrich2 .tbl-t,.tbl.hrich3 .tbl-t{color:var(--t-busy-tx);font-weight:800}
.tbl.selectable{border-color:var(--t-sel);box-shadow:0 0 0 3px var(--t-sel)}
.tbl.edit.sel{border-color:var(--t-sel);box-shadow:0 0 0 3px var(--t-sel)}
.tbl:focus-visible{outline-color:var(--t-sel)}
/* pulzy: žádné box-shadow keyframes — jen průhlednost prstence */
.tbl.hrich1,.tbl.hrich2,.tbl.hrich3,.tbl.wait3{animation:none}
.tbl.hrich1::after,.tbl.hrich2::after,.tbl.hrich3::after,.tbl.wait3::after{content:'';position:absolute;inset:2px;border-radius:inherit;
  box-shadow:inset 0 0 0 2.5px var(--t-tep);opacity:0;pointer-events:none;animation:tep 2s ease-in-out infinite}
.tbl.hrich2::after{animation-duration:1.2s}
.tbl.hrich3::after{animation-duration:.8s;box-shadow:inset 0 0 0 3.5px var(--t-tep)}
.tbl.wait3::after{animation-duration:1.4s;box-shadow:inset 0 0 0 2.5px var(--t-wait-tx)}
@keyframes tep{0%,100%{opacity:0}50%{opacity:1}}
/* účet bez stolu, za který host právě platí */
.acc.paying{border-color:var(--tx)!important}
.acc.paying:not(.nova){animation:none}
.acc.paying::after{content:'';position:absolute;inset:-1px;border-radius:inherit;box-shadow:0 0 0 2px var(--tx);opacity:0;pointer-events:none;animation:tep 1.4s ease-in-out infinite}
.acc.paying .acc-f b{color:var(--tx)!important}
.acc-h .ago.hrich1,.acc-h .ago.hrich2,.acc-h .ago.hrich3{color:var(--tx)!important;font-weight:800}
/* legenda = stejné vzory jako stoly; bez rozmazání pozadí (drahé při animacích) */
.legend,.zb{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:var(--bg2)!important}
.legend i.lg{width:14px;height:14px;border-radius:4px;box-sizing:border-box;vertical-align:-2px}
.lg-free{background:var(--t-free-bg);border:1.5px solid var(--t-free-bd)}
.lg-busy{background:var(--t-busy-bg)}
.lg-wait{background:repeating-linear-gradient(135deg,var(--t-wait-a) 0 3px,var(--t-wait-b) 3px 6px)}
.lg-paid{background:var(--t-paid-bg);border:1.5px solid var(--t-paid-bd)}
.lg-res{background:var(--t-res-bg);border:1.5px dashed var(--t-res-bd)}
.legend.tecky{gap:6px;padding:8px 10px;font-size:0}
.legend.tecky i.lg{margin-right:0}
html[data-rezim="mobil"] .mnav button.on{color:var(--tx)!important}
/* židle a dekorace šedě přímo (filter by se přepočítával při každém překreslení) */
.seat{background:var(--t-seat)!important;border-color:var(--t-seat-bd)!important;filter:none!important}
.dek{filter:none!important}
.dek svg [fill]:not([fill="none"]){fill:var(--t-dek)}
.dek svg [stroke]{stroke:var(--t-dek-bd)}
.dek.terasa{background:repeating-linear-gradient(90deg,rgba(113,113,122,.09) 0 9%,rgba(113,113,122,.2) 9% 10%)!important;border-color:var(--t-dek-bd)!important}

@media(prefers-reduced-motion:reduce){
  .page .panel:not(.sheet):not([hidden]),.page .panel.ven,.menu,.ctx,.pw-in,.pay-in,.mo-in,.pw-modal,.pay-ovl,.mo,.toast,.acc,
  .map-view.zona-vpred,.map-view.zona-zpet,.prechod,.login-logo,.login-grid,.sums b.pulz{animation:none!important}
  .gi.pop::after,.btn.ok-flash::after,.pay-ik::after,.itm.nova::before,.tbl::after,.acc.paying::after{animation:none!important;opacity:0!important}
  .panel.sheet>.sheet-card,.panel.sheet::before{transition:none!important}
  .prelet{display:none}
}