/* Staff screens — Tabestoon theme */
:root{--blue:#3D7FCC;--sky:#78B6E6;--sand:#E9D1B1;--cream:#FAF7EF;--navy:#2D3E50;--ink:var(--navy);--muted:#6b7a89;--bg:var(--cream);--card:#fff;--line:#ece3d3;--red:#d64545;--green:#2f9e6a}
@media (prefers-color-scheme:dark){:root{--ink:#f3efe6;--muted:#a9b6c3;--bg:#1b2632;--card:#243242;--line:#33455a}}
*{box-sizing:border-box}
[x-cloak],[hidden]{display:none!important}
body{margin:0;font-family:Vazirmatn,Tahoma,sans-serif;background:var(--bg);color:var(--ink);-webkit-tap-highlight-color:transparent;font-size:16px}
button,input{font:inherit;color:inherit}
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:10px;padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top));background:var(--blue);color:#fff;
  background-image:linear-gradient(0deg,rgba(233,209,177,.35) 0 3px,transparent 3px)}
.top .today{font-size:.85rem;opacity:.9}
.top form{margin-inline-start:auto}
.top .link{color:#fff;font-size:.85rem}
.net{width:10px;height:10px;border-radius:50%;background:#f0b84a}
.net[data-state=connected]{background:#7ee2a8}
.net[data-state=unavailable],.net[data-state=failed],.net[data-state=disconnected]{background:var(--red)}
.wrap{max-width:720px;margin:auto;padding:12px 16px 120px}
h2{margin:8px 0 12px;font-size:1.25rem}h2 small{font-weight:400;color:var(--muted);font-size:.9rem}
h3{margin:16px 0 8px;font-size:1.05rem}h4{margin:14px 0 6px;color:var(--muted);font-size:.9rem}
.head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.btn{border:1px solid var(--line);background:var(--card);border-radius:14px;padding:10px 16px;cursor:pointer;text-decoration:none;display:inline-block;text-align:center}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:700}
.btn.big{display:block;width:100%;padding:14px;font-size:1.05rem}
.btn:disabled{opacity:.6}
.link{background:none;border:0;padding:4px;color:var(--blue);cursor:pointer;text-decoration:none}
.link.danger{color:var(--red)}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px 14px;margin-bottom:12px}
.card header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px;margin-bottom:6px}
.where{font-size:1.25rem}
.meta{color:var(--muted);font-size:.85rem}
.lines{list-style:none;margin:0 0 10px;padding:0}
.lines li{padding:6px 0;border-bottom:1px dashed var(--line);font-size:1.05rem}
.lines li:last-child{border:0}
.lines li.off{text-decoration:line-through;opacity:.5}
.note{display:block;margin-top:4px;padding:4px 8px;border-radius:8px;background:#fff3c4;color:#6b4a00;font-weight:700;font-size:.95rem}
.tag{font-style:normal;color:var(--red);font-size:.8rem;margin-inline-start:6px}
.acts{float:left}
.empty{text-align:center;color:var(--muted);padding:40px 0}
.toast{position:fixed;inset:auto 16px calc(90px + env(safe-area-inset-bottom)) 16px;z-index:20;max-width:480px;margin:auto;background:var(--navy);color:#fff;padding:12px 16px;border-radius:14px;text-align:center;box-shadow:0 6px 20px rgba(0,0,0,.2)}
.toast.error{background:var(--red)}
.queue{margin:0 0 12px;padding:10px 14px;border-radius:12px;background:var(--sand);color:var(--navy);font-size:.9rem;text-align:center}
/* login */
.login{display:grid;place-items:center;min-height:100vh;padding:16px;background:var(--cream)}
.login-card{width:100%;max-width:380px;display:grid;gap:12px;text-align:center}
.login-card img{margin:8px auto 0;max-width:70%}
.login-card h1{font-size:1.1rem;margin:0}
label{display:grid;gap:4px;text-align:right;font-size:.9rem}
input{width:100%;border:1px solid var(--line);background:var(--card);border-radius:12px;padding:11px 12px;outline:none}
input:focus{border-color:var(--sky)}
.err{color:var(--red);margin:0}
/* waiter */
.seg{display:flex;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:4px;position:sticky;top:56px;z-index:5}
.seg button{flex:1;border:0;background:none;border-radius:10px;padding:9px 4px;cursor:pointer;font-size:.92rem}
.seg button.on{background:var(--blue);color:#fff}
.count{display:inline-block;min-width:20px;padding:0 6px;border-radius:999px;background:var(--red);color:#fff;font-size:.8rem}
.tables{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:10px}
.table{aspect-ratio:1;border-radius:16px;border:2px solid var(--line);background:var(--card);font-size:1.4rem;font-weight:800;cursor:pointer}
.table.busy{border-color:var(--sand);background:linear-gradient(180deg,var(--card),#f6e7d2)}
@media (prefers-color-scheme:dark){.table.busy{background:#4a4234}}
.row{display:flex;gap:8px}
.search{margin:4px 0 8px}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.chips button{flex:none;border:1px solid var(--line);background:var(--card);border-radius:999px;padding:6px 12px;cursor:pointer;white-space:nowrap}
.chips button.on{background:var(--blue);border-color:var(--blue);color:#fff}
.line{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px 12px;margin-bottom:8px}
.line.picked{border-color:var(--sky);box-shadow:0 0 0 1px var(--sky) inset}
.line .info{flex:1;display:grid;cursor:pointer}
.line .info small{color:var(--muted)}
.stepper{display:flex;align-items:center;gap:8px}
.stepper button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--bg);font-size:1.3rem;cursor:pointer}
.stepper b{min-width:1.5em;text-align:center}
.line .note{flex-basis:100%;background:var(--bg);color:inherit;font-weight:400;padding:8px 10px;margin:0}
.send{position:fixed;inset:auto 0 0 0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(0deg,var(--bg) 70%,transparent)}
.send .btn{max-width:688px;margin:auto}
.card.ready{border-color:var(--green);box-shadow:0 0 0 1px var(--green) inset}
.sum{margin:0 0 10px}
.tk{border-top:1px solid var(--line);padding-top:8px;margin-top:8px}
.tk-head{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--muted)}
.tk-head .link{margin-inline-start:auto}
.st{padding:1px 8px;border-radius:999px;font-size:.78rem;background:var(--bg)}
.st-new{background:#e6f1fb;color:var(--blue)}.st-ready{background:#dcf5e8;color:var(--green)}.st-cancelled{background:#fde2e2;color:var(--red)}
/* station */
.start{position:fixed;inset:0;z-index:30;display:grid;place-content:center;gap:16px;padding:24px;text-align:center;background:var(--cream);color:var(--navy)}
.started .start{display:none}
.pick{display:grid;gap:12px}
.ticket .where{font-size:1.4rem}
.ticket.late{border-color:var(--red);box-shadow:0 0 0 2px var(--red) inset;background:linear-gradient(180deg,#fde2e2,var(--card) 60px)}
.ticket.changed{border-color:#f0b84a;box-shadow:0 0 0 2px #f0b84a inset}
.ticket.cancelled{opacity:.75;border-style:dashed}
.flag{margin:0 0 6px;font-weight:800;color:#b07800}
.ticket.cancelled .flag{color:var(--red)}
@media (prefers-color-scheme:dark){.ticket.late{background:linear-gradient(180deg,#5a2a2a,var(--card) 60px)}.note{background:#5a4a1a;color:#ffe9a8}}
/* cashier */
.wrap.cashier{max-width:1100px}
.pick-order{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;width:100%;text-align:right;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin-bottom:8px;cursor:pointer}
.pick-order strong{flex:1}
.pick-order span{color:var(--muted);font-size:.9rem}
.pick-order.on{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue) inset}
.pick-order.paid{opacity:.8}
.bill .head{flex-wrap:wrap}
.bill h2{flex:1}
.lines .amt{float:left;color:var(--muted)}
.totals{margin:0}
.totals div{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:4px 0}
.totals dt small{color:var(--muted);font-size:.8rem}
.totals dd{margin:0;font-weight:700;white-space:nowrap}
.totals .disc dd{color:var(--red)}
.totals .off{text-decoration:line-through;opacity:.5}
.totals .due{font-size:1.2rem;border-top:1px solid var(--line);margin-top:4px;padding-top:8px}
.totals .left dd{color:var(--blue)}
.totals .over dd{color:var(--red)}
.totals .pay{font-size:.95rem}
.card h3{margin:4px 0 10px}
.card .seg{position:static;margin-bottom:10px}
.card .row{margin-bottom:10px;align-items:center}
.split span{white-space:nowrap;color:var(--muted)}
input.short{width:64px;text-align:center}
.change{white-space:nowrap}
.card > input,.card [x-data] > input{margin-bottom:10px}
.wrap-chips{flex-wrap:wrap;margin-bottom:10px}
details summary{list-style:none;cursor:pointer}
details summary::-webkit-details-marker{display:none}
details summary h3::after{content:" ▾";color:var(--muted)}
.actions .btn{flex:1}
.show-sm{display:none}
@media (max-width:899px){.cashier .hide-sm{display:none}.show-sm{display:inline-block}.cashier .bill:has(.empty){display:none}}
@media (min-width:900px){.wrap.cashier{display:grid;grid-template-columns:320px 1fr;gap:20px;align-items:start}.orders{position:sticky;top:70px;max-height:calc(100vh - 80px);overflow:auto}}
/* cash shift */
.shift-gate{max-width:480px;margin:auto}
.shift-gate input,.shift-bar input,.bill details input{margin-bottom:10px}
.shift-bar{padding-bottom:4px}
.shift-bar .meta{margin:0 0 4px}
.shift-bar details h3{margin:8px 0}
.calls{margin-bottom:6px}
.card.call{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue) inset;background:linear-gradient(180deg,#e6f1fb,var(--card) 60px)}
.card.call-bill{border-color:#c9a36b;box-shadow:0 0 0 2px #c9a36b inset;background:linear-gradient(180deg,#f7ead6,var(--card) 60px)}
.card.call.urgent{border-color:var(--red);box-shadow:0 0 0 3px var(--red) inset;background:linear-gradient(180deg,#fde2e2,var(--card) 60px);animation:pulse 1s ease-in-out infinite alternate}
@keyframes pulse{to{box-shadow:0 0 0 5px var(--red) inset}}
@media (prefers-color-scheme:dark){.card.call{background:linear-gradient(180deg,#223a52,var(--card) 60px)}.card.call-bill{background:linear-gradient(180deg,#4a4234,var(--card) 60px)}.card.call.urgent{background:linear-gradient(180deg,#5a2a2a,var(--card) 60px)}}
.pick-order.bill-call{border-color:#c9a36b;background:#f7ead6;color:var(--navy)}
.pick-order.bill-call.seen{opacity:.6}
.shift-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px;padding:8px 12px;border-radius:12px;background:var(--card);border:1px solid var(--line);font-size:.9rem}
.shift-bar.stale{border-color:var(--red);color:var(--red);font-weight:700}
.card.shift-off{text-align:center}
.card.shift-off p{margin:0 0 10px}